HTML

XPXP

1

HTML

Committed to Shaping the Next Generation of IT Experts.

01: Introduction to HTML

XPXPObjectives• Understanding HTML• Understanding Tags• Creating Web Pages By An Editor

– Formatting text– Alignment text– Bullet, Numbering– Horizontal line

2

XPXPHTML

• HyperText Markup Language• Allow sharing documents on different types of

computers• Not platform specific• Simple

• Places codes (tags) in a Web document• Provides information to browsers about document

structure

XPXPHTML Source Code• Use an editor (such as Notepad) to create• Write HTML code then save as:

filename.htm

XPXPHTML Tags• Codes to create documents

– Format text– Place pictures / graphics on the page– Create links to other pages

• Syntax– Each tag begins with < tag > symbol– Most tags end with < / tag > symbol

• Example: <HTML>… headings & body of web page …

< /HTML >

XPXPHTML Structure Tags

• Two main sections:– Head section– Body section

• HEAD SECTION– Must contain a title

• Title will show up in Title Bar of web page– May contain formatting styles– May contain keywords for particular browsers

XPXPStructure of a Web Document<HTML>

<HEAD><TITLE> title text </TITLE>

</HEAD><BODY> … all the information you want displayed</BODY>

</HTML>

XPXPTips about Titles• Only 1 title allowed• Should be brief, but descriptive• Will show up as Title bar• Cannot be formatted• Cannot be a link to other pages

• Practice…

XPXPUse of Headings• Should use one large heading <H1> that is similar to title• There are six levels of headings

<H1> … </H1> Largest font size<H2> … </H2> Next largest

<H6> … </H6> Smallest font size• Used to organize the body

• Practice…

XPXPPlacing Text in a Document• Paragraph breaks

– Automatic with Heading– For other, use <P> tags

• Line breaks– Use <BR> only, no </BR>

• Practice…

XPXPEnhancing Text in a DocumentPhysical Tags

<B> … </B> Bolds text<I> … </I> Italicizes text

<CENTER> … </CENTER>

Centers text

<U> … </U> Underlines text<STRIKE> … </STRIKE> Strikes through text

<SUB … </SUB> Text Subscript

<SUP> … </SUP> Text Superscript

XPXPEnhancing Text in a DocumentLogical Tags (Browser Dependent)

<EM> … </EM> Italicizes text<STRONG> … </STRONG> Bolds text

<DEL> … </DEL> Strikes through text

<INS> … </INS> Underlined text

Practice…

XPXPNested Tags• Creating multiple formatting tags• Bold and Italicize

<B> <I> Text to be formatted </I> </B>

Results in: Text to be formatted Note the order of closing tags – last tag opened is

first tag closed. (LIFO)

XPXPUsing Attributes with Tags

• Attributes define the tag• Attribute followed by = sign, then value• Value is always enclosed in quotation marks• Entered after the tag and before closing >

EXAMPLE:<H1 ALIGN=“Center” > Heading Message </H1>

Results:Heading Message

XPXPCreating Lists• Bulleted list (unordered list)• Numbered list (ordered)

• Unordered list– Begins with <UL> tag and ends with </UL>– Each line in list begins with <LI> (no closing tag)– Each line will appear on web page as:

• Indented• Preceded by a bullet

XPXPUnordered / Bulleted List• EXAMPLE:<H3> Your Shopping List </H3>

<UL><LI> A Milk<LI> A Sugar<LI> A Butter

</UL>RESULT:Your Shopping List A Milk A Sugar A Butter

XPXPCreating Lists• Numbered list (ordered)

• Ordered list– Begins with <OL> tag and ends with </OL>– Each line in list begins with <LI> (no closing tag)– Each line will appear on web page as:

• Indented• Preceded by a number

XPXPUnordered / Bulleted List• EXAMPLE:<H3> Your Shopping List </H3>

<OL><LI> A Milk<LI> A Sugar<LI> A Butter

</OL>RESULT:Your Shopping List1. A Milk2. A Sugar3. A ButterPractice…

XPXPAdding a Horizontal Line• Placing a line or ruler across the page

• Use the <HR> tag– No closing tag– Used to divide a page

• Practice…

Documents

HTML