Download - 05 html text formatting
![Page 1: 05 html text formatting](https://reader034.vdocument.in/reader034/viewer/2022051323/5495c10bb47959564d8b4e01/html5/thumbnails/1.jpg)
HTML Text Formatting Making text look good on the page
![Page 2: 05 html text formatting](https://reader034.vdocument.in/reader034/viewer/2022051323/5495c10bb47959564d8b4e01/html5/thumbnails/2.jpg)
We know some basic text tags
� <p> � <br /> � But there are more that we should
investigate …
![Page 3: 05 html text formatting](https://reader034.vdocument.in/reader034/viewer/2022051323/5495c10bb47959564d8b4e01/html5/thumbnails/3.jpg)
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>!
![Page 4: 05 html text formatting](https://reader034.vdocument.in/reader034/viewer/2022051323/5495c10bb47959564d8b4e01/html5/thumbnails/4.jpg)
Preformatted text
� HTML usually collapses whitespace � <pre> preserves it <pre>!
.-. .-.!
| \/ |!
\ /!
`\ /`!
`\/`!
</pre>!
![Page 5: 05 html text formatting](https://reader034.vdocument.in/reader034/viewer/2022051323/5495c10bb47959564d8b4e01/html5/thumbnails/5.jpg)
There are special characters !
©!
<!
>!
&!
®!
°!
![Page 6: 05 html text formatting](https://reader034.vdocument.in/reader034/viewer/2022051323/5495c10bb47959564d8b4e01/html5/thumbnails/6.jpg)
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>!
![Page 7: 05 html text formatting](https://reader034.vdocument.in/reader034/viewer/2022051323/5495c10bb47959564d8b4e01/html5/thumbnails/7.jpg)
Have different types of ordered lists
� <ol style="list-style-type:_______"> � decimal (default) � upper-alpha � lower-alpha � upper-roman � lower-roman � … and more
![Page 8: 05 html text formatting](https://reader034.vdocument.in/reader034/viewer/2022051323/5495c10bb47959564d8b4e01/html5/thumbnails/8.jpg)
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');
![Page 9: 05 html text formatting](https://reader034.vdocument.in/reader034/viewer/2022051323/5495c10bb47959564d8b4e01/html5/thumbnails/9.jpg)
Demo: ordered and unordered lists Hands-on ordered and unordered lists
![Page 10: 05 html text formatting](https://reader034.vdocument.in/reader034/viewer/2022051323/5495c10bb47959564d8b4e01/html5/thumbnails/10.jpg)
HTML5 Semantic text elements
" time " mark " meter " progress
![Page 11: 05 html text formatting](https://reader034.vdocument.in/reader034/viewer/2022051323/5495c10bb47959564d8b4e01/html5/thumbnails/11.jpg)
" 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>!
![Page 12: 05 html text formatting](https://reader034.vdocument.in/reader034/viewer/2022051323/5495c10bb47959564d8b4e01/html5/thumbnails/12.jpg)
" 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
![Page 13: 05 html text formatting](https://reader034.vdocument.in/reader034/viewer/2022051323/5495c10bb47959564d8b4e01/html5/thumbnails/13.jpg)
" meter � Something measured � But only where there is a minimum and maximum
value � Disk used � You can set ◦ value ◦ min ◦ max ◦ high ◦ low ◦ optimum
![Page 14: 05 html text formatting](https://reader034.vdocument.in/reader034/viewer/2022051323/5495c10bb47959564d8b4e01/html5/thumbnails/14.jpg)
" progress
� Values that are in the process of changing � Your download is <progress>55%</progress>
complete � It has 3 attributes � value � min � max
![Page 15: 05 html text formatting](https://reader034.vdocument.in/reader034/viewer/2022051323/5495c10bb47959564d8b4e01/html5/thumbnails/15.jpg)
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>
![Page 16: 05 html text formatting](https://reader034.vdocument.in/reader034/viewer/2022051323/5495c10bb47959564d8b4e01/html5/thumbnails/16.jpg)
Further study