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.htm” 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.htm” 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!  Remember to always backup the in-class files in your usb drive or before logging off from the class. o After logging off, all the files stored in the computer Temp folder will be erased. 2-9

How to view your HTML files over the Internet  HTML files need to be uploaded to a web server to view them over the Internet  E.g., JJ web server  There are many free web servers o o o and many more…  For this class, you may create an account with any such web servers for the practice purpose  Let’s take an example: Lecture 6

How to upload files…  Sign in using your username and password o You will be taken to the control panel  Click on the “File Manager” Tab o Here you can upload your files to the web server  One at a time  Eight at a time  Or zip the entire folder  After successful uploading, you can view your webpage/website over the Internet o o Example: Lecture 6

One particular thing to remember!  Starting page!  Web servers by default take one particular file as the homepage of your website o index.htm or index.html o Try to be uniform with your naming convention throughout this class  The html page that you want to load as the homepage of you website o Name it as index.htm Lecture 6