Transcript Presentation: Creating an HTML page

Creating an HTML page
Skills: edit and debug HTML pages
IT concepts: text editor
This work is licensed under a Creative Commons Attribution-NoncommercialShare Alike 3.0 License.
Where does this topic fit?
• Internet concepts
– Applications
– Technology
– Implications
• Internet skills
– Application development
– Content creation
There are tools for creating Web sites that
generate HTML for you – why learn HTML?
• Users
– To be able to modify pages – for example adding a
feature to a blog
– To understand how the technology works in order to
feel empowered and in control
• Developers
– To be able to write programs that generate HTML
Use a text editor, not a word processer
or HTML editor to do your assignments.
Notepad, a text
editor
Word, a word
processor
Extra information in a .doc file
A Web client would not understand this.
The Notepad text editor
Notepad is included with Windows.
Start > All programs > Accessories > Notepad
First, enter the text
Add the basic HTML tags
Save the file on your hard drive
Naming your HTML file
Use the extension htm or html.
Be careful to select All Files as the type.
Check to see the file was saved in the
directory you selected
Be sure the file has the extension .htm, not .txt.
Display the page with a Web client
(Double click on the file name or use the File > Open
command in the Web client).
The content is correct, but not the presentation. Web
clients run everything together.
Add the <h2> and <p> tags
Save it on your hard drive then refresh using the
Web client
Note that it re-wraps the text if the
window is re-sized
Four tips
Notepad and a Web client side by side
Simple debugging -- change the HTML, save it, and refresh the client.
The browser View > Source command
HTML source for the Classes page on my Web site
HTML editors may
be approximate
The composed page
has line breaks
The HTML <br>
tags are missing
Before starting, turn off Windows extension hiding
tools > folder options ... > view
uncheck
You only have to do this one time.
A few questions
What difference would it make in our example if you accidently
left of the paragraph closing tag </p>?
What difference does it make if you add extra blank lines
between two lines of text?
Creating an HTML page
Skills: edit and debug HTML pages
IT concepts: text editor
This work is licensed under a Creative Commons Attribution-NoncommercialShare Alike 3.0 License.