HTML Basics Objectives: Objectives: Understand what HTML is Understand what HTML is Know basic HTML...

HTML BasicsHTML Basics

Objectives:Objectives: Understand what HTML isUnderstand what HTML is Know basic HTML tagsKnow basic HTML tags Understand how to view HTML Understand how to view HTML

sourcessources Tasks:Tasks:

Page in Notepad! (Simple Bio)Page in Notepad! (Simple Bio) Printing the Source & IDing TagsPrinting the Source & IDing Tags

HTMLHTML

HTML stands for Hypertext Markup HTML stands for Hypertext Markup Language. HTML file and Web Page Language. HTML file and Web Page are synonymous. are synonymous.

All web pages; despite fancy All web pages; despite fancy graphics, music… etc… is nothing graphics, music… etc… is nothing more than a text file with formatting more than a text file with formatting codes inserted. codes inserted.

You don’t necessarily NEED a fancy You don’t necessarily NEED a fancy web authoring program like web authoring program like Dreamweaver. Notepad can do Dreamweaver. Notepad can do everything Dreamweaver can- if you everything Dreamweaver can- if you know the tags.know the tags.

Basic HTML Tags StartingBasic HTML Tags Starting

Three Sections exist of a Three Sections exist of a webpage:webpage:

1.1. The HTML DocumentThe HTML Document

2.2. The HEAD Section The HEAD Section

3.3. The BODY SectionThe BODY Section

Basic Tag LayoutBasic Tag Layout

WRONGWRONG<HTML><HTML><HEAD><HEAD><TITLE><TITLE><BODY><BODY></TITLE></TITLE></HEAD></HEAD></BODY></BODY></HTML></HTML>

RIGHTRIGHT<HTML><HTML><HEAD><HEAD><TITLE><TITLE></TITLE></TITLE></HEAD></HEAD><BODY><BODY></BODY></BODY></HTML></HTML>

Example of the BASIC site.Example of the BASIC site.

<HTML><HTML><HEAD><HEAD><TITLE><TITLE>This is a basic website.This is a basic website.</TITLE></TITLE></HEAD></HEAD><BODY><BODY>Welcome to my basic website. Boo.Welcome to my basic website. Boo.</BODY></BODY></HTML></HTML>

REMEMBER:REMEMBER:

Always save files Always save files (if you do them in notepad, (if you do them in notepad, for example)for example) as .htm or .html to be able to as .htm or .html to be able to view them in a web browser! view them in a web browser! Most first/main pages are saved as index…Most first/main pages are saved as index…If you want to later open a file in notepad- If you want to later open a file in notepad- right click and use the open with option to right click and use the open with option to select notepad select notepad (usually the default program to (usually the default program to open a .htm or .html file is a browser)open a .htm or .html file is a browser)

More Basic Tags More Basic Tags

There are a LOT more tags available for use. For There are a LOT more tags available for use. For example, some basic text tags include:example, some basic text tags include:

BoldBoldItalicItalicUnderlineUnderline<BLINK>Blinks <BLINK>Blinks (only in certain browsers)(only in certain browsers)</BLINK></BLINK><H1>Heading 1 <H1>Heading 1 (goes up to 6) (goes up to 6) </H1></H1>SubscriptSubscript Basic Seperations Include:Basic Seperations Include: Paragraph White Space before & after Paragraph White Space before & after <HR> Horizontal Rule<HR> Horizontal Rule Line Break Line Break Etc.. Etc!Etc.. Etc!

NOTICENOTICE

All Tags Start with <TAG> and end with All Tags Start with <TAG> and end with </TAG>! This keeps them invisible to </TAG>! This keeps them invisible to

the everyday web surfer.the everyday web surfer.

Viewing SourcesViewing Sources

All websites can be viewed in their All websites can be viewed in their HTML version.HTML version.

Most web browsers have a “view -> Most web browsers have a “view -> source” option in their menu.source” option in their menu.

Viewing the source of a page helps Viewing the source of a page helps you learn how other web masters do you learn how other web masters do what they do, and if needed- you can what they do, and if needed- you can copy their code and use it as your copy their code and use it as your own (this is how JAVA most own (this is how JAVA most commonly gets shared!)commonly gets shared!)

No need to reinvent the wheel! No need to reinvent the wheel!

Tasks:Tasks:

Page in NotepadPage in Notepad&&

Printing the Source & IDing TagsPrinting the Source & IDing Tags

HTML Basics Objectives: Objectives: Understand what HTML is Understand what HTML is Know basic HTML...

Documents

Transcript of HTML Basics Objectives: Objectives: Understand what HTML is Understand what HTML is Know basic HTML...