Download presentation
Presentation is loading. Please wait.
1
Tutorial 1 – Creating Web Pages With HTML
By Marge Hohly Professor CIS Marge Hohly
2
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 Marge Hohly
3
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 Marge Hohly
4
Web Page Basic Format <HTML> <HEAD> </HEAD>
<BODY> </BODY> </HTML> Basic Webpage Template View Basic page in browser CIS Marge Hohly
5
Heading Tags Heading elements affects the appearance of document content (Text) Heading tags Examples CIS Marge Hohly
6
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 Marge Hohly
7
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 Marge Hohly
8
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 Marge Hohly
9
List Tags Unordered List Ordered List Definition List
CIS Marge Hohly
10
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 Marge Hohly
11
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 Marge Hohly
12
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 Marge Hohly
13
Adding Properties to Lists
Unordered list can vary the shape of the bullet For example, circle, disk, & square Type Property for Unordered Lists CIS Marge Hohly
14
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 Marge Hohly
15
Character Tags Logical character tag Physical character tag
CIS Marge Hohly
16
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 Marge Hohly
17
Physical Character Tags
Indicates exactly how text is to be formatted and displayed Examples of Physical Character Tags CIS Marge Hohly
18
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 Marge Hohly
19
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 Marge Hohly
20
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 Marge Hohly
21
Simple Link A highlighted phrase or keyword that moves you from one topic to another after being clicked or activated. Example: CIS Marge Hohly
22
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 Marge Hohly
Similar presentations
