Course Content - Chapter 2 Introduction to HTML Introduction to a Text Editor as a web authoring tool Instructional Activity: Creating a webpage using a text editor

HTML ITC181 Fluency in IT Prof. Sheila D. Shea

3 What is HTML? Reference: Shelly, HTML textbook, CH2, pp Main language for defining how a web page should look Hypertext Markup Language (HTML) Features specified in HTML Background color, font, layout Most pages are written by a web authoring tool that writes HTML automatically; Dreamweaver, FrontPage, etc.

Why should we learn HTML? Helps us understand the Web Gives us experience directing a computer to do tasks for us Prepares us for other topics we study (fluency)

Concept of Tags Source code of webpages Key word/s surrounded by formatting tags Formatting tags Angle brackets Example: Usually come in pairs Second tag w/ a slash Often referred to beginning & end tag

Example of Title tag Fluency in IT Title appears in the Title bar Tags are not case sensitive Text in tags – case sensitive Traditional – keep lowercase

HTML Tags Bold Italic text Paragraphs Can use more than 1 kind at a time: ITC181 Results in a browser view: ITC181 order of tags does not matter

Some HTML tags not paired Horizontal rule tag Break text – continues text on next line HTML web page file begins & ends with

HTML Web Page HTML web page file begins & ends with

HTML Structure – pp tells the browser version/type of HTML/XHTML used; includes an URL that references DTD (document type definition) that can interpret the code. Links to W3C website title, preliminary material main content here Lowercase tags, except for Form must always be followed All of these tags are required

HTML Authoring Tool Must use text editors Must be written using basic ASCII characters Word processing software has special formatting code browsers do not like, reason for: Save as web page

Headings in HTML Several levels of headings Levels: ….. highest lowest Use in order Do not have to start with level 1

Text Editors Notepad (included in Windows OS) TextEdit (included in MAC OS) Vi (included in UNIX OS) Additional programs:

Saving Files in Notepad Make sure the file ends in:.html Checkpoint: view details of file; make sure you do not see a file extensions such as…webpage1.html.txt After saving, the icon should be a standard “browser” icon

Instructional Activities 1. In Class Lab Exercise: Textbook: Chapter 2 Creating and Editing a Web Page Assignment: pp. 40 – 80 Follow the directions on the above pages to create the webpage Add your name to the bottom 2. Follow-up Lab Exercise: Create a student webpage with the elements from Chapter 2 Headings Bulleted List