Download
1 / 19
190 likes | 315 Views
HTML. 01: Introduction to HTML. Committed to Shaping the Next Generation of IT Experts. Objectives. Understanding HTML Understanding Tags Creating Web Pages By An Editor Formatting text Alignment text Bullet, Numbering Horizontal line. HTML. HyperText Markup Language
E N D
HTML 01: Introduction to HTML Committed to Shaping the Next Generation of IT Experts.
Objectives • Understanding HTML • Understanding Tags • Creating Web Pages By An Editor • Formatting text • Alignment text • Bullet, Numbering • Horizontal line
HTML • 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
HTML Source Code • Use an editor (such as Notepad) to create • Write HTML code then save as: filename.htm
HTML 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 >
HTML 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
Structure of a Web Document <HTML> <HEAD> <TITLE> title text </TITLE> </HEAD> <BODY> … all the information you want displayed </BODY> </HTML>
Tips 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…
Use 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…
Placing Text in a Document • Paragraph breaks • Automatic with Heading • For other, use <P> tags • Line breaks • Use <BR> only, no </BR> • Practice…
Enhancing Text in a DocumentLogical Tags (Browser Dependent) • Practice…
Nested 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)
Using 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
Creating 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
Unordered / 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
Creating 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
Unordered / Bulleted List • EXAMPLE: <H3> Your Shopping List </H3> <OL> <LI> A Milk <LI> A Sugar <LI> A Butter </OL> RESULT: Your Shopping List • A Milk • A Sugar • A Butter Practice…
Adding a Horizontal Line • Placing a line or ruler across the page • Use the <HR> tag • No closing tag • Used to divide a page • Practice…
