Introduction to the Internet Lecture 3 HTML Dr. Abeer Alnuaim Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Images Images can be included using <img > by default, browsers can display GIF and JPEG files, more modern browsers can also typically support PNG files and SVG graphics (of course, use at your own risk) other image formats may require plug-in applications for display Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Images Use the src attribute to indicate the image location. Include alt attribute that describe the image. Alt is short for alternative text. width and/or height - dimensions in pixels (often only need to specify one of them and the other is automatically scaled to match, where possible pictures should be resized using other programs to save on bandwidth and problems that some (older) browsers might have with resizing images) Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Images Example: <img src = ”Smile.jpg” alt = "Picture of a happy face” > Make sure your image is in your web site directory folder Image as a Link: <a href="http://www.website.com"><img src=”hyperlinkedImage.jpg" alt=”alternitavetext”> </a> Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Lists HTML supports: Unordered Lists (or Unnumbered lists) Ordered Lists (or Numbered lists) Definition lists (or Description lists) You can nest lists too, but use this feature sparingly because too many nested items can get difficult to follow. Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Unordered Lists Starts with an opening list <ul> (for unordered list) tag. Enter the <li> (list item) tag followed by the individual item End the entire list with a closing list </ul> tag Example: Result Source Code <ul> <li> Sara </li> <li> Nora </li> <li> Hana </li> </ul> Sara Nora Hana The <li> item can contain multiple paragraphs. Indicate the paragraphs with the <P> paragraph tags. Try it! Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Ordered Lists A numbered list (also called an ordered list, from which the tag name derives) is identical to an unnumbered list, except is uses <ol> instead of <ul>. <li> is used here as well to list the items. Source Code <ol> <li> Sara </li> <li> Nora </li> <li> Hana </li> </ol> Result Sara Nora Hana Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh lists Unordered lists and ordered lists are commonly used in HTML: Unordered List The first item The second item The third item The fourth item Ordered List The first item The second item The third item The fourth item Development of Internet Application 1501CT - Sara Almudauh

Description List (Definition Lists ) The <dl> tag defines a description list. It is used in conjunction with <dt> (defines terms) and <dd> (describes each term) Web browsers generally format the definition on a new line and indent it. <dl>   <dt>Coffee</dt>   <dd>- black hot drink</dd>   <dt>Milk</dt>   <dd>- white cold drink</dd> </dl> Coffee    - black hot drink   Milk    - white cold drink Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh  The Style Attribute A style attribute can be added to an unordered list, to define the style of the marker: Style Description list-style-type:disc The list items will be marked with bullets (default) list-style-type:circle The list items will be marked with circles list-style-type:square The list items will be marked with squares list-style-type:none The list items will not be marked Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Example (Disc) Code Result <!DOCTYPE html> <html> <body> <h2>Unordered List with Disc Bullets</h2> <ul style="list-style-type:disc"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html> Unordered List with Disc Bullets Coffee Tea Milk Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Example (Circle) Code Result <!DOCTYPE html> <html> <body> <h2>Unordered List with Circle Bullets</h2> <ul style="list-style-type:circle"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html> Unordered List with Disc Bullets Coffee Tea Milk Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Example (Square) Code Result <!DOCTYPE html> <html> <body> <h2>Unordered List with Square Bullets</h2> <ul style="list-style-type:square"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html> Unordered List with Disc Bullets Coffee Tea Milk Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Example (None) Code Result <!DOCTYPE html> <html> <body> <h2>Unordered List without Bullets</h2> <ul style="list-style-type:none"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </body> </html> Unordered List with Disc Bullets Coffee Tea Milk Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh The Type Attribute Type Description type="1" The list items will be numbered with numbers (default) type="A" The list items will be numbered with uppercase letters type="a" The list items will be numbered with lowercase letters type="I" The list items will be numbered with uppercase roman numbers type="i" The list items will be numbered with lowercase roman numbers Development of Internet Application 1501CT - Sara Almudauh

The Type Attribute (Number) Code Result <!DOCTYPE html> <html> <body> <h2>Ordered List with Numbers</h2> <ol type="1"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html> Ordered List with Numbers Coffee Tea Milk Development of Internet Application 1501CT - Sara Almudauh

The Type Attribute (Uppercase letters) Code Result <!DOCTYPE html> <html> <body> <h2>Ordered List with Letters</h2> <ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html> Ordered List with Numbers Coffee Tea Milk Development of Internet Application 1501CT - Sara Almudauh

The Type Attribute (Lowercase letters) Code Result <!DOCTYPE html> <html> <body> <h2>Ordered List with Letters</h2> <ol type=“a"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html> Ordered List with Numbers Coffee Tea Milk Development of Internet Application 1501CT - Sara Almudauh

The Type Attribute (Uppercase Roman Numbers) Code Result <!DOCTYPE html> <html> <body> <h2>Ordered List with Roman Numbers</h2> <ol type=“I"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html> Ordered List with Numbers Coffee Tea Milk Development of Internet Application 1501CT - Sara Almudauh

The Type Attribute (Lowercase Roman Numbers) Code Result <!DOCTYPE html> <html> <body> <h2>Ordered List with Lowercase Roman Numbers</h2> <ol type="i"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </body> </html> Ordered List with Numbers Coffee Tea Milk Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Nested HTML Lists Code Result <!DOCTYPE html> <html> <body> <h2>A Nested List</h2> <ul> <li>Coffee</li> <li>Tea <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </body> </html> A Nested List Coffee Tea Black tea Green tea Milk Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Horizontal Lists Code Result <!DOCTYPE html> <html> <head> <style> ul#menu li { display:inline; } </style> </head> <body> <h2>Horizontal List</h2> <ul id="menu"> <li>HTML</li> <li>CSS</li> <li>JavaScript</li> <li>PHP</li> </ul> </body> </html> Horizontal List HTML CSS  JavaScript PHP Development of Internet Application 1501CT - Sara Almudauh

HTML <q> for Short Quotations The HTML <q> element defines a short quotation. Browsers usually insert quotation marks around the <q> element. Code Result <!DOCTYPE html> <html> <body> <p>Browsers usually insert quotation marks around the q element.</p> <p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p> </body> </html> Browsers usually insert quotation marks around the q element. WWF's goal is to: Build a future where people live in harmony with nature. Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Special Characters Some characters (symbols) are reserved in HTML5. For example, you cannot use the > and < signs or the copyright symbol © within your text because the browser could mistake them for markup. You need to use the special characters sometimes called Entity characters. Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Special Characters Char. Entity Meaning & & Ampersand < < Less than > > Greater than " " Double quote ' &apos; Single quote ¼ ¼ One quarter ½ ½ One half ¾ ¾ Three quarters  ° Degree (space)   Non-breaking space @ © Copyright € € Euro Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Inline Tags An inline element does not start on a new line and only takes up as much width as necessary. Some inline tags are: <em> <strong> <dfn> <code> <kbd> <samp> <var> <cite> <q> <sub> <sup> Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh New Tags In HTML5, there are new (div-like) sectioning tags, e.g.: <header> <footer> <nav> <main> <section> <article> <aside> <figure> There are new (span-like) phrasing tags, e.g.: <mark> <time> <command> There are new media tags, e.g.: <video> <audio> <canvas> <svg> <math> See the HTML5 differences from HTML4 document: http://www.w3.org/TR/html5-diff/ Development of Internet Application 1501CT - Sara Almudauh

Development of Internet Application 1501CT - Sara Almudauh Questions !!  Development of Internet Application 1501CT - Sara Almudauh