XP 1 HTML Committed to Shaping the Next Generation of IT Experts. 01: Introduction to HTML.
19
XP XP 1 HTML Committed to Shaping the Next Generation of IT Experts. 01: Introduction to HTML
-
Upload
evan-clark -
Category
Documents
-
view
218 -
download
1
Transcript of XP 1 HTML Committed to Shaping the Next Generation of IT Experts. 01: Introduction to 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…
