Using HTML to Create a Basic Web Page… By Josh Gallagan

Using HTML to Create Using HTML to Create a Basic Web Page…a Basic Web Page…

By Josh GallaganBy Josh Gallagan

How do web pages compare to the How do web pages compare to the Wizard of Oz?Wizard of Oz?

http://www.youtube.com/watch?v=YWyCCJ6B2WE

How do web pages work?How do web pages work?

How do web pages work?How do web pages work?

HTML is the Man Behind the HTML is the Man Behind the CurtainCurtain

HTML is the "hidden" code that helps us communicate with others on the World Wide Web (WWW).

The method behind the madness…The method behind the madness…

www.yahoo.com – Show Sourcewww.yahoo.com – Show Source

Why do you need to learn HTML…Why do you need to learn HTML…

Foundation of web designEveryone is doing it…The way things are going.

What is HTML?What is HTML? H-T-M-L are initials that stand for HyperText Markup Language

(computer people love initials and acronyms -- you'll be talking acronyms ASAP). Let me break it down for you:

Hyper is the opposite of linear. It used to be that computer programs had to move in a linear fashion. This before this, this before this, and so on. HTML does not hold to that pattern and allows the person viewing the World Wide Web page to go anywhere, any time they want.

Text is what you will use. Real, honest to goodness English letters. Mark up is what you will do. You will write in plain English and

then mark up what you wrote. More to come on that in the next Primer.

Language because they needed something that started with "L" to finish HTML and Hypertext Markup Louie didn't flow correctly. Because it's a language, really -- but the language is plain English.

History of HTMLHistory of HTML

HTML stands for HyperText Markup Language. Developed by scientist Tim Berners-Lee in 1990.

Is a descendant of SGML or Standard Generalized Markup Language which was a descendant of IBMs GML.

In 2000 HTML became an international standard for web documents.

History of HTMLHistory of HTML

The latest version of HTML is 4.01.The latest version of HTML is 4.01. The World Wide Web Consortium or W3C The World Wide Web Consortium or W3C

sets these standards.sets these standards. XHTML 1.0 or Extensible HTML has XHTML 1.0 or Extensible HTML has

worked its way alongside HTML. worked its way alongside HTML. The future is unknown, but HTML 5.0 and The future is unknown, but HTML 5.0 and

XHTML 5.0 are expected to be released in XHTML 5.0 are expected to be released in the near future.the near future.

How Does HTML WorkHow Does HTML Work

An HTML file is a text file containing small markup tags or container tags.

The markup tags tell the Web browser how to display the page

An HTML file must have an htm or html file extension

An HTML file can be created using a simple text editor like Notepad or Word.

Markup TagsMarkup Tags HTML tags are used to mark-up HTML HTML tags are used to mark-up HTML elementselements HTML tags are surrounded by the HTML tags are surrounded by the two characters two characters

< and >< and >

The surrounding characters are called The surrounding characters are called angle bracketsangle brackets HTML tags normally HTML tags normally come in pairscome in pairs like and like and The first tag in a pair is the open tagThe first tag in a pair is the open tag , , the second tag is the second tag is

the closing tag. the closing tag. The text between the start and end tags is the The text between the start and end tags is the element element

contentcontent HTML tags are HTML tags are not case sensitive,not case sensitive, means the means the

same as same as There are many HTML markup tagsThere are many HTML markup tags

The 8 Elements of a WebpageThe 8 Elements of a Webpage

1.1. <html> - <html> - Opening HTML tagOpening HTML tag2.2. <head> - <head> - Opening head tagOpening head tag3.3. <title>Title of page</title> - <title>Title of page</title> - Title tagsTitle tags4.4. </head> - </head> - Closing head tagClosing head tag5.5. <body> - <body> - Opening body tagOpening body tag6.6. This is my first homepage. - This is my first homepage. - ContentContent7.7. </body> - </body> - Closing body tagClosing body tag8.8. </html> - </html> - Closing html tagClosing html tag

A Basic Web Document StructureA Basic Web Document Structure

<html> <html> <head> <head> <title>Title of page</title> <title>Title of page</title> </head> </head> <body> <body>

This is my first homepage. This is my first homepage. </body> </body> </html> </html>

Your TurnYour Turn

Now you practice by creating your own Now you practice by creating your own web page using HTML.web page using HTML.

Follow the instructions on the handout to Follow the instructions on the handout to create your webpage.create your webpage.

InstructionsInstructions

Open Notepad.Open Notepad. Type the HTML into Notepad.Type the HTML into Notepad. Save the document as index.htmlSave the document as index.html You can save it right on your desktop.You can save it right on your desktop. After you have saved the document, open After you have saved the document, open

it up in Internet Explorer.it up in Internet Explorer. You should be able to see your webpage.You should be able to see your webpage.

View Source CodeView Source Code

Once you have opened your file using Once you have opened your file using Internet Explorer, right mouse click Internet Explorer, right mouse click anywhere on the webpage. When the anywhere on the webpage. When the menu pops up select>View Page Source.menu pops up select>View Page Source.

This will allow you to edit your code or you This will allow you to edit your code or you can also check the code of another can also check the code of another website.website.

More Markup TagsMore Markup Tags Adding Bold Text Adding Bold Text Centering Text <center> </center>Centering Text <center> </center> Horizontal Rule <hr> no end tag neededHorizontal Rule <hr> no end tag needed Add vertical space or a break no end Add vertical space or a break no end

tag neededtag needed Hyperlink Hyperlink

<a href =“http://www.joshgallagan.com”><a href =“http://www.joshgallagan.com”>Mr. G’s PageMr. G’s Page</a></a>

Adding Bold TextAdding Bold Text


This is my first homepage.This is my first homepage. </body> </body> </html> </html>

Centering TextCentering Text

<html> <html> <head> <head> <title>Title of page</title> <title>Title of page</title> </head> </head> <body> <body> <center><center>This is my first homepage.This is my first homepage.</center></center> </body> </body> </html> </html>

Adding a Horizontal RuleAdding a Horizontal Rule


<center><center>This is my first homepage.This is my first homepage.</center> </center> <hr><hr></body> </body> </html> </html>

Adding Vertical SpaceAdding Vertical Space <html> <html>

<head> <head> <title>Title of page</title> <title>Title of page</title> </head> </head> <body> <body> <center>This is my first homepage.</center> <center>This is my first homepage.</center> <hr><hr> </body> </body> </html> </html>

Adding a HyperlinkAdding a Hyperlink <html> <html>

<head> <head> <title>Title of page</title> <title>Title of page</title> </head> </head> <body> <body> <center>This is my first homepage.</center> <center>This is my first homepage.</center> <hr><hr> <a href =“http://www.ellagallagan.com”><a href =“http://www.ellagallagan.com”>Ella’s PageElla’s Page</a></a>

</body> </body> </html> </html>

W3C and ValidateW3C and Validate

W3C = World Wide Web ConsortiumW3C = World Wide Web Consortium W3C is the governing body of web design. W3C is the governing body of web design.

They determine the web design They determine the web design standards.standards.

To check your code, go to w3c.orgTo check your code, go to w3c.org

HTML vs XHTMLHTML vs XHTML

We will review this later, I do not want to We will review this later, I do not want to overwhelm you.overwhelm you.

XHTML requires mandatory DTD which XHTML requires mandatory DTD which stands for Doctype Declaration.stands for Doctype Declaration.

Where To Go From HereWhere To Go From Here

www.w3schools.comwww.w3schools.com www.htmlgoodies.comwww.htmlgoodies.com www.yourhtmlsource.comwww.yourhtmlsource.com www.htmlquick.comwww.htmlquick.com

WYSIWYGs = DreamweaverWYSIWYGs = Dreamweaver

Documents

Using HTML to Create a Basic Web Page… By Josh Gallagan