100 likes | 235 Views
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.edu Webpage: http://itscience.tsu.edu/ma Department of Computer Science Texas Southern University, Houston. July, 2011. Objectives.
E N D
CS117 Introduction to Computer Science IILecture 2 Creating an HTML Document Instructor: Li Ma Office: NBC 126 Phone: (713) 313-7028 Email: malx@tsu.edu Webpage: http://itscience.tsu.edu/ma Department of Computer Science Texas Southern University, Houston July, 2011
Objectives • Understanding HTML • Planning and writing an HTML document • Importing page content • Previewing and editing a Web page • Printing an HTML document
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
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
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 <body> and </body> • Preview the Web page
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
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
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 <p>…</p> for each paragraph • Use <h1>…</h1> for level-one heading, <h2>…</h2> for level-two heading, … • Use <br /> for line break, <hr /> for horizontal line
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
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