LOOK FOR
• HTML character entities
• What does & and ; mean
• Tags: ©   ¼
&frac12; &frac34; <hr>, <small>
• Can I open Notepad++?
• Can I launch my code to test?
• Can I type container tags correctly?
• Can I nest tags?
Review last lesson
Inline Elements
•Do not create line
breaks
•Used to mark up text
fragments
•Include these tags:
–em
–strong
–i
–b
Block Elements
•Create line breaks
before and after
•Include these tags:
–Head
–P
–Blockquote
–Cite
–q
–br
Well-formed code
• Requires that all tags are properly
nested
• Follow the rule
“first to open, last to close.”
Character entities
• Represent symbols not accessible on
standard keyboards
• Include:
– &copy; (copyright symbol)
– &nbsp; (non-breaking space size of a letter;
does not create a line break)
–¼
&frac14;
–½
&frac12;
–¾
&frac34;
– The “&” indicates beginning of character entity
– The “;” indicates its end
Horizontal lines
• <hr> tag
– Empty element
– NO CLOSING TAG
– By default <hr> extends the entire width
of page
• Used to separate the page footer or
section of a page
On Your Own
• HTML Overall assignment directions – now
in share drive this should give you stepby-step directions on opening and working
between assignment/Notepad++ and
browser
• Please do ONLY C-1
• You will use the about.HTML file as
well
Text Size
• The small tag in HTML 5 allows you
to control the size of your text
– <small> - basically means “fine print”
•
•
•
•
Semantic / logical tag
Container tag
Inline element (no line breaks)
Meant ONLY for text or other inline elements
– There is a lot of overlap between HTML and
CSS, visually. HTML has semantic meaning,
however, while CSS does not
Semantic / Logical Explained
• Why should we care about semantic
markup?
• People who are visually impaired rely on
speech-based browsers to read pages
– Programs cannot interpret pages very well unless
they are clearly explained. Semantic code
is critical to accessibility
• Search engines need to understand what
your content is about to rank you on
search engines.
– Improves your placement on search engines,
as it is easier for the "search engine spiders" to
understand.
OYO
• HTML Overall assignment directions – now
in share drive this should give you stepby-step directions on opening and working
between assignment/Notepad++ and
browser
• Please do ONLY D-1
• You will use the about.HTML file as
well
Nested lists
Lists
• Ordered * * * * * * * * *<ol> & <li>
• Unordered* * * * * * * <ul> & <li>
– Are containers
– Have open and closing tags
Unordered Lists
• Use <ul> AND <li>
– <ul> = unordered list (declare the list
type)
– <li> = list item
EXAMPLE
<ul>
<li>cooked potatoes</li>
<li>Cooked cauliflower</li>
<li>Finely chopped gherkins</li>
</ul>
OYO
• Please do E-1 (directions)
• Use recipe.html (in Notepad++)
• Then work on your own “site” using
these new elements
Unit summary
• Review text elements
• Learned how to add registered and
copyright symbols
• Learned how to create an unordered
list