Computer Programming Dr. Deepak B Phatak Dr. Supratik Chakraborty Department of Computer Science and Engineering Session: Lists, Links, and Images in HTML
Recap Introduced HTML Examined some basic tags
Overview of This Lecture Lists Ordered Unordered Definition Images Hyperlinks Text Images For more Information https://en.wikibooks.org/wiki/hypertext_markup_language
Ordered Lists Numbered List <ol type= x start= n > </ol> x can be 1, I, i, a, A, etc. n has to be a number, defining the starting point (Default is 1). Items <li> </li> <ol type= a start= 4 > <li> </li>. </ol> <li> </li>
Ordered Lists <ol type="i"> <li> while </li> <li> for </li> <li> do...while </li> </ol> i. while ii. for iii. do...while <ol type="a" start="3"> <li> while </li> <li> for </li> <li> do...while </li> </ol> c. while d. for e. do while
Example: Ordered List <html> <head> <title> Topics in C+ +</title> </head> <body> <h1 style="color:red" align="center"> Topics in C++ </h1>.. </body> </html> <ol type="i"> <li> Iterative Solutions </li> <ol type="a"> <li> while </li> <li> for </li> <li> do...while </li> </ol> <li> Functions </li> <ol type="1"> <li> Pass by reference </li> <li> Pass by value </li>
Example: Ordered List <html> <head> <title> Topics in C++ </title> </head> <body> <h1 style="color:red" align="center">topics in C++</h1> <ol type="i"> <li> Iterative Solutions </li> <ol type="a"> <li> while </li> <li> for </li> <li> do...while </li> </ol> <li> Functions </li> <ol type="1"> <li> Pass by reference </li> <li> Pass by value </li> <li> Recursive </li> </ol> </ol> </body> </html>
Unordered Lists Bulleted List <ul type= x > </ul> x can be disc, square, and circle. Default is disc type= x is deprecated in HTML5 Items <li> </li> <ul type= x > <li> </li>. <li> </li> </ul>
Unordered Lists <ul type="square"> <li> while </li> <li> for </li> <li> do...while </li> </ul> while for do while <ul type="circle"> <li> while </li> <li> for </li> <li> do...while </li> </ul> o while o for o do while
Example : Unordered List <html> <head> <title> Unordered Lists </title> </head> <body> <h1 style="color:red" align="center"> Unordered Lists </h1>.. </body> </html> <ul type="disc"> <li> Iterative Solutions </li> <ul type="square"> <li> while </li> <li> for </li> <li> do...while </li> </ul> <li> Functions </li> <ul type="circle"> <li> Pass by reference </li> <li> Pass by value </li>
Example : Unordered List <html> <head> <title> Topics in C++ </title> </head> <body> <h1 style="color:red" align="center">topics in C++ </h1> <ul type="disc"> <li> Iterative Solutions </li> <ul type="square"> <li> while </li> <li> for </li> <li> do...while </li> </ul> <li> Functions </li> <ul type="circle"> <li> Pass by reference </li> <li> Pass by value </li> <li> Recursive </li> </ul> </ul> </body> </html>
Definition List <dl> </dl> Defines definition list <dt> </dt> Defines terms of the list <dd> </dd> Describes each term <dl> <dt> </dt> <dd> </dd> <dd>... </dd> </dl>
Example : Definition List <html> <head> <title> Unordered Lists </title> </head> <body> <h1 style="color:red" align="center"> Unordered Lists </h1>.. </body> <dl> <dt> Iterative Solutions </dt> <dd> while </dd> <dd> for </dd> <dd> do...while </dd> <dt> Functions </dt> <dd> Pass by reference </dd> <dd> Pass by value </dd> <dd> Recursive </dd> </dl>
Example : Definition List <html> <head> <title> Topics in C++ </title> </head> <body> <h1 style="color:red" align="center"> Topics in C++ </h1> <dl> <dt> Iterative Solutions </dt> <dd> while </dd> <dd> for </dd> <dd> do...while </dd> <dt> Functions </dt> <dd> Pass by reference </dd> <dd> Pass by value </dd> <dd> Recursive </dd> </dl> </body> </html>
Hyperlinks <a href= URL > text </a> Defines a hyperlink Could Be a Local or Remote File text Becomes a hot spot <html> <head> <title> Hyperlinks </title> </head> <body> <a href="https://en.wikipedia.org/wiki/html"> Click here for Wiki Article </a> </body> </html>
Example: Hyperlinks <html> <head> <title> Hyperlinks </title> </head> <body> <a href="https://en.wikipedia.org/wiki/html"> Click here for Wiki Article </a> </body> </html> Before Clicking the hyperlink After Clicking the hyperlink
Images <img src= URL alt= Text" style="width:npx;height:mpx;> URL: the filename and extension of image. If Image is not present in the same directory, Mention entire path along with filename Text: Alternate text to be displayed on Mouse hover Npx: Width of the image in pixels Mpx: Height of the image in pixels
Example: Images <html> <head> <title> Images </title> </head> <body> <img src="flower1.jpg" alt="purple flower" style="width:270px;height:199px;"> <br /><br /> <a href="https://commons.wikimedia.org/wiki/file:a_daisy_flower.jpg"> <img src="flower2.jpg" alt= daisy" style="width:200px;height:139px;" border="2"> </a> </body> </html> The 2nd picture is taken from: https://commons.wikimedia.org/wiki/file:a_daisy_flower.jpg
Example: Images <html> <head> <title> Images </title> </head> <body> <img src="flower1.jpg" alt="purple flower" style="width:270px;height:199px;"> <br /><br /> <a href="https://commons.wikimedia.org/wiki/file:a_daisy_flower.jpg"> <img src="flower2.jpg" alt= daisy" style="width:200px;height:139px;" border="2"> </a> </body> </html> The 2nd picture is taken from: https://commons.wikimedia.org/wiki/file:a_daisy_flower.jpg
Summary Lists Ordered Unordered Definition Images Hyperlinks Text Images For more Information https://en.wikibooks.org/wiki/hypertext_markup_language