Tutorial 1 – Creating Web Pages With HTML By Marge Hohly Professor CIS 205 - Marge Hohly
Points to Cover HTML Page Basic page format Headings and properties for tags Paragraph tags Tag types Lists Character Tags Special Characters Horizontal Lines Graphics Practice page to code with class. CIS 205 - Marge Hohly
Creating an HTML Document HTML document parts Document Content What you see, text & graphics Tags Controls appearance of the document content Tag generic syntax: <Tag Name Properties> Content </Tag Name> <H1 ALIGN=Center>My Web Page</H1> CIS 205 - Marge Hohly
Web Page Basic Format <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> Basic Webpage Template View Basic page in browser CIS 205 - Marge Hohly
Heading Tags Heading elements affects the appearance of document content (Text) Heading tags Examples CIS 205 - Marge Hohly
Adding Properties to Tag Header tags started to contain properties with HTML 3.2 version Align tag Center Left (Default) Right Header with Properties examples CIS 205 - Marge Hohly
Tag Types Opening tag Closing tag Two-sided tag One-sided tag The tag that turns on a particular layout feature in HTML. Opening tags are enclosed in < > symbols. Closing tag The tag that turns off a particular layout feature in HTML. Closing tags are enclosed in </ >. Two-sided tag A tag that requires an opening and closing tag. <H1> Initial Heading </H1> <B> Makes texts bold </B> One-sided tag A tag that does not require an opening and closing tag. <HR> Horizontal Rule or <BR> line Break CIS 205 - Marge Hohly
Paragraph Tags Defines the beginning and end of a paragraph of text. <P> The text of a paragraph </P> To insert a blank line use <P></P> Align=OPTION where OPTION is either LEFT, CENTER, or RIGHT Example: <P ALIGN=CENTER> Text </P> CIS 205 - Marge Hohly
List Tags Unordered List Ordered List Definition List CIS 205 - Marge Hohly
Unordered List Know as a bulleted list <UL> <LI> Line item </LI> <LI> Line item </LI> <LI> Line item </LI> </UL> Use starting and closing tags for all parts Unordered List Example CIS 205 - Marge Hohly
Ordered List Numbered List <OL> <LI> Line item </LI> <LI> Line item </LI> <LI> Line item </LI> </OL> Can modify the number type using properties Ordered List Example CIS 205 - Marge Hohly
Definition List A list of terms and their definitions line <DL> <DT> Term <DD> Definition line <DT> Term <DD> Definition line <DT> Term <DD> Definition line </DL> Definition List Example CIS 205 - Marge Hohly
Adding Properties to Lists Unordered list can vary the shape of the bullet For example, circle, disk, & square Type Property for Unordered Lists CIS 205 - Marge Hohly
Nested Lists A list within a list <UL> <LI> Cats</LI> <LI> Dogs</LI> <UL> <LI> Cocker</LI> <LI> Poodle</LI> </UL> <LI> Birds</LI> </UL> Indenting helps you avoids errors in coding, but makes no difference in appearance Example Nested List CIS 205 - Marge Hohly
Character Tags Logical character tag Physical character tag CIS 205 - Marge Hohly
Logical Character Tags Indicates how the text is used, not necessarily how it is displayed Different browsers may interpret slightly differently Examples of Logical Character tags CIS 205 - Marge Hohly
Physical Character Tags Indicates exactly how text is to be formatted and displayed Examples of Physical Character Tags CIS 205 - Marge Hohly
Special Characters Sometimes you want to include characters in your Webpage that don’t appear on your keyboard Sometimes you want to insert a non-character or numeric character like & < > etc. Insert the code for the character ie: < for a < Examples:Special Characters CIS 205 - Marge Hohly
Horizontal Lines To display a horizontal line in a web page use the Horizontal Rule tag The basic tag is <HR> Examples: Horizontal Rules CIS 205 - Marge Hohly
Inline Image An image that appears directly on a Web page. Image inserted into the document where the anchor is placed. Example: Inline Image CIS 205 - Marge Hohly
Simple Link A highlighted phrase or keyword that moves you from one topic to another after being clicked or activated. Example: CIS 205 - Marge Hohly
Class Practice page Class will design and code a sample simple WebPages. Include: At Least 2 levels of headings List Horizontal line Link (optional) Graphic (coffee cup) CIS 205 - Marge Hohly