1. CS117 Introduction to Computer Science II Lecture 2 Creating an HTML Document Instructor: Li Ma Office: NBC 126 Phone: (713) 313-7028 Email: malx@tsu.edumalx@tsu.edu Webpage: http://itscience.tsu.edu/ma Department of Computer Science Texas Southern University, Houston July, 2011

2. Objectives Understanding HTML Planning and writing an HTML document Importing page content Previewing and editing a Web page Printing an HTML document

3. Understanding HTML The relationship between the HTML text file and the Web page –The source file for a Web page is known as an HTML document or HTML file –HTML documents are text files that the Web browser can read and interpret –The browser will add format and insert referenced files, based on the HTML source in the text file, to create the appearance of the Web page in the browser window

4. Understanding HTML (cont) Open an HTML file –by an editor to edit and view the source code –by a browser to view Web page Web pages can include many types of elements and formatting, including text, links, tables, lists, graphics, sound, and video All elements of the Web page are defined by the tags (instructions) applied to the contents

5. Planning an HTML Document Sketch your Web page – storyboarding –what elements, how to arrange Enter structuring tags for the file: html tags Enter head section elements –ex. Title tag, keywords meta tag Enter each Web page body element –Web page content contained within and Preview the Web page

6. Writing an HTML Document You can create an HTML document in any application that allows you to enter and save text –Notepad –Hand-coding HTML –WordPad A plain text editor will not add any additional formatting to the HTML file

7. Writing an HTML Document (cont) Notepad is a good choice for text editor Save your file as a HTML document –Start Notepad program to get a blank document –Use Save As command The extension of the file name is.htm or.html, ex. Index.htm or index.html Save the file in a specified folder Type all the tags for your Web page Be careful of the new W3C coding standards

8. Importing Web Content Copy the page content from another document to your html file –Open the existing document –Use Copy/Paste commands to import the content needed to your HTML file Mark up Web page content –Use tag set … for each paragraph –Use … for level-one heading, … for level-two heading, … –Use for line break, for horizontal line

9. Previewing a Web Page Previewing is one of the most important parts of Web page development –It can identify the errors The formatting of the Web page may look different in different browsers –Preview it in all of the most common Web browsers It’s a good habit to evaluate and revise Web pages periodically

10. Printing an HTML Document From the text editor, you can only print the source code To print the Web page, you need the Web browser You may change the browser headers and footers –Use Page Setup command