HTML H yper T ext M arkup L anguage. HTML HTML is NOT case sensitive However, proper coding...

transcript

HTMLHTMLHyper

Markup

Language

HTMLHTML•HTML is NOT case sensitive

•However, proper coding etiquette if for all <TAGS> to be in ALL CAPS and for text to be in regular sentence form.

Basic HTML TagsBasic HTML TagsEach HTML tag has three basic parts:

1. An open angle bracket (less than sign): <

2. The text and characters that tell Web browsers what to do

3. A closing angle bracket (greater than sign): >

<HTML>

HTML TagsHTML Tags

Many tags are used in pairs (some stand alone)Start tags tell the browser where to turn on particular formatting function (like italics)

<TAG>End tags tell the browser where to turn off the function. They include a slash.

</TAG> (Container Tag)Empty tag - <LI> - Stands Alone

LIFOLIFO

*Important note about paired tags:

Tags have to be LIFO: Last In First Out

It means that the LAST tag you turn on should always be the FIRST you turn off.

<HTML>

Three Sections of an HTML DocumentThree Sections of an HTML Document

1. The HTML document

2. The HEAD section

3. The BODY section

HTML SectionHTML Section

<HTML></HTML> The first tag in every HTML document will

always be <HTML>, which tells the Web browsers that everything that follows should be treated as a Web page.

The </HTML> tag tells the browser where the page ends.

HEAD SectionHEAD Section

<HEAD></HEAD> Immediately follows the opening <HTML> tag. Purpose of this section is to provide general information

about a particular Web page. This tag contains the Web page’s title

(<TITLE></TITLE> tags) This section is NOT displayed in the page’s body. Page’s title will appear at the top of the browser window,

in the title bar

BODY SectionBODY Section

Follows the HEAD section Contains all of your Web pages content (text,

graphics, etc.)

Saving Web PagesSaving Web Pages

Save every page as a .html or .htm Save main page (home page) as index.htm

This is the filename that servers first try to download. If you save your main page as index.htm, you help ensure that it is the first page that your audience will see.

EXAMPLEEXAMPLE

<HTML> <HEAD><TITLE>I’m at the top of the screen in

the blue area</TITLE> </HEAD> <BODY><H1>Basic Example</H1><H2>This is

basic coding! </H2> </BODY> </HTML>

<HTML>

<HEAD><TITLE>I’m at the top of the screen in the blue area</TITLE> </HEAD>

<BODY> H1>Basic Example</H1>< <H2>This is basic coding! </H2> </BODY>

</HTML>

More HTMLMore HTML By default, browsers read the text of your

Web page as a continuous line of single-spaced text.

Adding White SpaceAdding White Space White space refers to the amount of empty

space on a page. The more white space on a page, the easier it is

to read. Force browsers to break up text by using :

Paragraph tagsLine breaksHorizontal lines

Paragraph Tags Paragraph Tags Add white space between paragraphs adds one line of white space For example: Four score and seven years ago our fathers brought forth on this continent

a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

Would be displayed in a browser as: Four score and seven years ago

our fathers brought forth

on this continent a new nation,

conceived in Liberty, and dedicated to the proposition

that all men are created equal.

Line Breaks Line Breaks

Has no ending tag. Used to add a line break without adding any

new space between lines of text. inserts a blank line no blank line

Example Using Example Using Four score and seven years ago our fathers brought

forth on this continent a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

our fathers brought forth on this continent a new nation,conceived in Liberty, and dedicated to the proposition that all men are created equal.

the difference the difference Example Four score and seven years ago our fathers

brought forth on this continent a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

our fathers brought forth

on this continent a new nation,

conceived in Liberty, and dedicated to the proposition

that all men are created equal.

Example Four score and seven years ago

our fathers brought forth on this continent a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.

our fathers brought forth on this continent a new nation,conceived in Liberty, and dedicated to the proposition that all men are created equal.

Horizontal Rules<HR>Horizontal Rules<HR>

Can visually break a page into sections. Use sparingly.

______________________________________

HTML – Style TagsHTML – Style Tags specifies that the enclosed text should

be displayed in boldface. specifies that the enclosed text should be di

splayed in italics. specifies that the enclosed text should be

underlined. These style tags can be combined:

TAG = TAG

Heading Tags<H></H>Heading Tags<H></H>

Emphasizes major topics Adds hierarchy to topics Ability to create up to six levels of headings,

high - <H1>TAG</H1> = TAGto

low - <H6>TAG</H6> = TAG

HTML – Aligning TagsHTML – Aligning Tags Web browsers automatically left justify text. Tag for horizontally centering your text:

Text<CENTER>text</CENTER>

Tag to right justify text: Text

ListsLists Unordered Lists – bulleted lists

Lists that do not require any specific order<UL></UL>

Each item in the list has to be identified with a list item tag:<LI></LI>

Example:Spring Classes are as follows:<UL><LI>Keyboarding</LI><LI>E-Commerce/Web Design</LI><LI>Information Management</LI></UL>

Ordered ListsOrdered Lists Ordered Lists – numbered lists

Lists that do require a specific order.<OL></OL>

Numbers are automatically inserted.Each item in the list has to be identified with a list item tag:

<LI></LI>Example:

Spring Classes are as follows:<OL><LI>Keyboarding</LI><LI>E-Commerce/Web Design</LI><LI>Information Management</LI></OL>

BGCOLOR=###### Add to the <BODY> tag

<BODY BGCOLOR=0000FF> Color is changed by changing the hex code

(0000FF) <BODY BGCOLOR=RED>

Background Color TagBackground Color Tag

Font Color TagFont Color Tag FONT SIZE

Size Range: 1-7Default is 3

RGB OR HEX NUMBERS FOR COLORS Use the same hex numbers for color

(FFFFFF is white) Or

HyperlinkHyperlink

<A HREF=http://www.yahoo.com>visit Yahoo!</A>

visit Yahoo

Hyperlink ColorHyperlink Color Included in the <BODY> Tag LINK Color – the color of the hyperlink of your web page.

LINK=RED VLINK Color (Visited hyperlink)- the color of the hyperlink

once the Web site has been visitedVLINK=BLUE

ALINK Color (Active hyperlink)- the color of the hyperlink once the Web site has been visited

EXAMPLE:

IMAGE TAGIMAGE TAG

<IMG SRC=“image.gif”> <BODY BACKGROUND=“IMAGE.GIF”> Gif images (Graphic Interchange Format)

Clip ArtRegular Graphics

Jpeg images (Joint Photographic Experts Group)Photos

Image as a HyperlinkImage as a Hyperlink

Example:<A HREF=HTTP://WWW.EXCITE.COM><IMG SRC=“charlie.jpg”></A>SIZE– <IMG SRC=“IMAGE.GIF HEIGHT=“30” WIDTH=“475”>– Measures in pixels

HTML H yper T ext M arkup L anguage. HTML HTML is NOT case sensitive However, proper coding...

Documents