الماحضرة الثانية
advertisement
HTML Contents : • HTML Text Formatting • HTML Styles • Lists HTML - lec 2 T.A. Reem Alshnaifi 9-Feb-13 HTML HTML Text Formatting • Text formatting. • Preformatted text (how to control line breaks and spaces). • Insert contact information (Address). • Abbreviations and acronyms. • Long and short quotations. HTML Text Formatting Example <! Doctype html> <html> <body> <b><u><i>This text is bold , Underlined and italic </i></u></b><br> <p><strong><em><ins>This text is strong , emphasized and inserted </ins></em></strong></p> <p><small>This text is small</small></p> <p><big>This text is big</big></p> </body> </html> HTML Text Formatting <! Doctype html> <html> <body> <p>This is<sub> subscript</sub> and <sup>superscript</sup></p> <p><s> this is Striked text </s></p> <p><del> this is deleted text </del></p> <p><tt> this is teletype Text </tt></p> </body> </html> Example preformatted text Example <! Doctype html> <html> <body> <p>The pre tag is good for displaying computer code:</p> <pre> for i = 1 to 10 print i next i</pre> </body> This is preformatted text. </html> It preserves both spaces and line breaks. Insert contact information (Address) Example <! Doctype html> <html> <body> <address> Written by W3Schools.com<br> <a href="mailto:us@example.org">Email us</a><br> Address: Box 564, Disneyland<br> Phone: +12 34 56 78 </address> </body> </html> abbreviations and acronyms. Example <!DOCTYPE html> <html> <body> <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p> <p>Can I get this <acronym title="as soon as possible">ASAP</acronym >?</p> </body> The title attribute is used to show the </html> spelled-out version when holding the mouse pointer over the acronym or abbreviation Long and short quotations •The <blockquote> tag specifies a section that is quoted from another source •The <q> tag defines a short quotation. Long and short quotations Example <!DOCTYPE html> <html><body><p>Here is a quote from WWF's website:</p> <blockquote>For 50 years, WWF has been protecting the future of nature. The world’s leading conservation organization, WWF works in 100 countries. and is supported by 1.2 million members in the United States</blockquote> <p>WWF's goal is to: <q>Build a future where people live in harmony with nature</q></p></body></html> HTML HTML Styles • Style background color • put the image as background • Style font, color, and size • alignment of text • scrolling text Style background color Example <!DOCTYPE html> <html> <body bgcolor="PowderBlue"> <h2 style="background-color:red;">This is a heading</h2> <p style="background-color:green;">This is a paragraph.</p> </body> </html> put the image as background <!DOCTYPE html> <html> <body background="pic.jpg"> </body> </html> Example Style font, color, and size Example <!DOCTYPE html> <html> <body> <p style="font-family:arial;color:red;fontsize:40px">A paragraph.</p> <p><font face="Calibri "color="red"size="7">A paragraph.</font></p> </body> </html> alignment of text Example <!DOCTYPE html> <html> <body> <h1 align="center">Center-aligned heading</h1> <CENTER> This is a centered text </CENTER> <p align = "right"> This is a right-aligned paragraph </p> </body> </html> scrolling text <!DOCTYPE html> <html> <body bgcolor=“rgb(255,255,0)”> <marquee bgcolor="#cccccc" behavior="alternate" direction="right" loop="-1" scrollamount="3" width="100%">Example Marquee</marquee> </body> </html> behavior can be : Scroll or slide Example HTML Lists : • Ordered Lists • Unordered lists • Definition Lists • Nested Lists • Different type of ordered lists • Different type of unordered lists Ordered Lists Example <!DOCTYPE html> <html> <body> <ol> <li>First list item</li> <li>Second list item</li> </ol> </body> </html> Unordered lists <!DOCTYPE html> <html> <body> <ul> <li>A list item</li> <li>Another list item</li> </ul> </body> </html> Example Definition Lists <!DOCTYPE html> <html><body> <DL> <DT>HTML</DT> <DD>Hyper Text Markup Language</DD> <DT>WWW</DT> <DD>World Wide Web</DD> </DL> </body></html> Example Nested Lists Example <!DOCTYPE html> <html> <body> <ul> <li> College of Computer and Information <ul> <li> Department of Computer Science</li> <li> Department of Information Systems </li> </ul></li> <li> college of Medicine </li> <li> college of Eduction </li> </ul> </body></html> Different type of ordered lists <!DOCTYPE html> <html><body> <h4>Numbered list:</h4> <ol> <li>Apples</li> <li>Bananas</li> <li>Lemons</li></ol> <h4>Letters list:</h4> <ol type="A"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li></ol> Example Different type of ordered lists <h4>Roman numbers list:</h4> <ol type="I"> <li>Apples</li> <li>Bananas</li> <li>Lemons</li></ol> </body> </html> Note : type = “a” type=“i” lowercase letters list lowercase roman number list Different type of unordered lists <!DOCTYPE html> <html> <body> <h4>Square bullets list:</h4> <ul type="square"> <li>Apples</li> <li>Bananas</li></ul> </body></html> Note : type="disc" type="circle" Disc bullets list Circle bullets list Example default
