Embed Size (px)
DESCRIPTION
Citation preview
HTML Text Formatting Making text look good on the page
We know some basic text tags
� <p> � <br /> � But there are more that we should
investigate …
Headings can go from levels 1to 6 <head>!<title>The Mammalian Kingdom</title>!</head>!<body>!<h1>Phylum</h1>!<h2>Class</h2>!<h3>Order</h3>!<h4>Family</h4>!<h5>Genus</h5>!<h6>Species</h6>!
Preformatted text
� HTML usually collapses whitespace � <pre> preserves it <pre>!
.-. .-.!
| \/ |!
\ /!
`\ /`!
`\/`!
</pre>!
There are special characters !
©!
<!
>!
&!
®!
°!
We can create two types of lists
� Ordered ◦ With numbers or letters
<ol> … </ol>!
� Both use list items <li> … </li>!
� Unordered ◦ Usually bulleted
<ul> … </ul>!
Have different types of ordered lists
� <ol style="list-style-type:_______"> � decimal (default) � upper-alpha � lower-alpha � upper-roman � lower-roman � … and more
You can have different bullets with unordered lists � Shapes ◦ list-style-type: circle; � disc � square � circle � none
� Any picture ◦ list-style-image: url('stewie.jpg');
Demo: ordered and unordered lists Hands-on ordered and unordered lists
HTML5 Semantic text elements
" time " mark " meter " progress
" time
� Represents a precise date and time with an optional time-zone offset
<time datetime="2012-04-19">April 19, 2012</time>!
<time datetime="14:00">2pm</time>!
<time datetime="2011-07-14">July 14th, 2011</time>!
<time datetime="2011-07-14T14:00">!
2pm on July 14th</time>!
" mark
� The mark element represents a run of text in one document marked or highlighted for reference purposes
� Like highlighting words that a visitor searched for
" meter � Something measured � But only where there is a minimum and maximum
value � Disk used � You can set ◦ value ◦ min ◦ max ◦ high ◦ low ◦ optimum
" progress
� Values that are in the process of changing � Your download is <progress>55%</progress>
complete � It has 3 attributes � value � min � max
Conclusion
� Certain tags are used primarily for text � Headings do more than just print big text � <pre> tags allow preformatted text � Special characters can be added with & � Ordered lists are done with <ol> � Unordered lists are done with <ul>
Further study
