HTML Introduction 2-1

Lecture 6 HTML - HyperText Markup Language  not a programming language  structure text into title, body, paragraphs, lists, links, or other elements  a language that instructs web browsers to properly render text, images, … 2-2

Lecture 6 HTML Documents  plain-text files that can be created using any text editor (e.g., Notepad) .html or.htm extension  constructed by HTML elements o An element: is a distinct object in the document, e.g. paragraph, heading, page title, etc. o The whole html document is also considered an “element” 2-3

Lecture 6 HTML Documents creation (step by step)  Step 1: open “Notepad” in your computer o Start -> All Programs -> Accessories -> Notepad  Step 2: write your html code in the notepad (copy-paste from next slide) 2-4

Lecture 6 Sample HTML code Lastname, Firstname Welcome to My Homepage. We will have a close look at the code later! 2-5

Lecture 6 HTML Documents creation (step by step)  Step 3: save the file in your computer… o File -> Save As… 2-6

Lecture 6 HTML Documents creation (step by step)  Step 3 contd.: save the file as.html or.htm file o Choose “All Files” in the field “save as type:” o Type “sample.html” in the field “File name:”  You may replace sample with any other name you want o Click on “Save” button o Now, double-click on the saved file to open it up as a web browsing page 2-7

Lecture 6 Editing a saved HTML Document (step by step)  Right click on the “sample.html” file and open with Notepad o Edit/Modify… o Click on “File -> Save” button o Now, double-click on the saved file to open it up as a web browsing page 2-8

Lecture 6 In-class fun!  Create an html document with title: “Welcome to ’s webpage!”  and execute the html file using your web browser! 2-9

Lecture 6 Submitting your html documents to instructor!  Use any “winzip” software to “zip” your html documents into one single file (zipped file)  the zipped file to the instructor  You may also use “winrar” software 2-10