22

Chapter 3 class presentation

Embed Size (px)

DESCRIPTION

Used in Intro to Web Design

Citation preview

Page 1: Chapter 3 class presentation
Page 2: Chapter 3 class presentation

3. Understands the importance and the skills that enhance web pages by being able to: Use ordered, unordered lists & definitions with

their attributes Code formatting tags such as bold, italicize and

underline Insert the font style tag for web site Insert specific non-character codes when

applicable Check for grammatical problems with a web

page Combined and use all codes through Chapter 3 Define key words given in this chapter Use the sections of a website to create the

wireframe for major student project

Page 3: Chapter 3 class presentation

Flag + E: Opens up Computer Dialog box

Flag + D: Places all documents on the status bar

Alt + Tab: moves you thru all open documents

Ctrl + A: Selects an entire document

Ctrl + C: Copies Ctrl + V: pastes Ctrl + X: cuts

Page 4: Chapter 3 class presentation

1. Ordered lists2. Unordered lists;3. Definition lists.

Page 5: Chapter 3 class presentation

Use when order of list IS IMPORTANT

Element & paired tag Two kinds of elements for

numbered lists: <ol></ol> specifies that this is a numbered list

<li></li>: marks each item in the list</li>

Page 6: Chapter 3 class presentation

<ol>opening tag for an ordered list

<li>1st list item</li> <li>2nd list item</li> <li>3rd list item</li> </ol>closing tag for an ordered

list

Numbered List

Numbered List

Page 7: Chapter 3 class presentation

Attributes need to be in quotation marks (“quote marks”)

Two ordered list attributes: “start”=specifies the

first number in list (5, 6, 7)

“type”=specifies numbering style for list (A, or a; I or I; etc.)

Page 8: Chapter 3 class presentation

All ordered lists begin with decimal number “1”

Place start attribute inside <ol> start tag

To change starting number:

<ol start=“10”> <li>List here</li> <li>List here</li> </ol><

“10”

“10”

Page 9: Chapter 3 class presentation

Consists of one or more items each prefaced by a bullet (big dot or check mark)

When order is NOT important

Uses Element & paired tag: <ul></ul> <li></li>

Page 10: Chapter 3 class presentation

<ul> <li>1st list item</li> <li>2nd list item</li>

<li>3rd list item</li>

</ul>

Page 11: Chapter 3 class presentation

Three types of bullets: Disc: solid circle bullets

(default bullet) Square: solid square

bullets Circle: hollow circle

bullets To specify kind of circle

<ul type=“circle”>

Page 12: Chapter 3 class presentation

ORDERED LIST UNORDERED LIST

<ol><li>First line</li><li>Second line</li>

<li>Third line</li></ol>

<ul> <li>First line</li> <li>Second line</li> <li>Third line</li>

</ul>

Page 13: Chapter 3 class presentation

ORDERED LIST UNORDERED LIST

<ol start=“5”><li>First line</li><li>Second line</li>

<li>Third line</li></ol>

<ul type=“circle”> <li>First line</li> <li>Second line</li> <li>Third line</li>

</ul>

Page 14: Chapter 3 class presentation

Group terms and definitions into single list

3 different elements <dl></dl> <dt></dt> <dd></dd>

Page 15: Chapter 3 class presentation

<dl> <dt>First term name</dt> <dd>definition for 1st

term</dd> <br /><br /> (puts 1 space) <dt>Second term name</dt> <dd>definition of 2nd

term</dd></dl>

Page 16: Chapter 3 class presentation
Page 17: Chapter 3 class presentation

<strong></strong>: bold: Darkens text so that it stands apart from other text

<em></em>: italicize: Texts slants to the right to separate it from other text.

<u></u>: underline: Places a line underneath text.

Page 18: Chapter 3 class presentation

All websites have their own default setting for font style

Three major font styles are: Arial Times New Roman Helvetica

Use these three styles to set font on your website

Use following with the start <body> tag:

<body bgcolor=“green”><font style=“Arial, Times New Roman, Helvetica”>

</font></body>

Page 19: Chapter 3 class presentation

One special non-character code is:

&nbsp;

The code is used as a replacement for <pre></pre> tag

Not an element or an attribute This tag adds white space & does

not distort text Two “&nbsp;” equals

approximately one space

Page 20: Chapter 3 class presentation

Identification HTML Code Symbol

Left & right single apostrophe

&lsquo;&rsquo; (It’s)

Left & right quotation marks

&ldquo;&rdquo; ( “follow”)

Fraction &frac12; ½

Copyright &copy; ©

Hyphen &minus; —

Page 21: Chapter 3 class presentation

Misspelled words Misused words Inaccurate use of

words Complete

sentences Correct use of

punctuation and capital letters

Page 22: Chapter 3 class presentation