Introduction on HTML

Download Report

Transcript Introduction on HTML 

HTML Introduction
2-1
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, …
Lecture 6
2-2
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”
Lecture 6
2-3
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
Lecture 6
(copy-paste from next slide)
2-4
Sample HTML code
<html>
<head>
<TITLE>Lastname, Firstname</TITLE>
</head>
<body>
<H1>Welcome to My Homepage.</H1>
</body>
</html>
We will have a close look at the code later!
Lecture 6
2-5
HTML Documents creation (step by step)

Step 3: save the file in your computer…
o File -> Save As…
Lecture 6
2-6
HTML Documents creation (step by step)

Step 3 contd.: save the file as .html or .htm file
Choose “All Files” in the field “save as type:”
o Type “sample.html” in the field “File name:”
o

You may replace sample with any other name you want
Click on “Save” button
o Now, double-click on the saved file to open it up as a web browsing page
o
Lecture 6
2-7
Editing a saved HTML Document (step by step)

Right click on the “sample.html” file and open with Notepad
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
o
Lecture 6
2-8
In-class fun!

Create an html document with title:
“Welcome to <first name> <last name>’s webpage!”

and execute the html file using your web browser!
Lecture 6
2-9
Submitting your html documents to
instructor!

Use any “winzip” software to “zip” your html
documents into one single file (zipped file)

Email the zipped file to the instructor

You may also use “winrar” software
Lecture 6
2-10