HTML Lecture 10 - HTML Lists and Iframes
- Alex Wright
- Oct 19, 2020
- 2 min read
Updated: Jul 1, 2022
HTML Lists allow web developers to group a set of the related items in an ordered or unordered list.
HTML - Unordered List
An unordered list starts with a <ul> tag and each item is listed within the <li> element. By default, the unordered list is represented by small black circles or bullet points. We can use the style attribute to choose different list item markers. Let's try this in code:
<!DOCTYPE html>
<html>
<head>
<title>Lecture 10</title>
</head>
<body>
<h1 style="text-align:center">Lecture 10</h1>
<h3>Drinking Items</h3>
<ul>
<li>Water</li>
<li>Tea</li>
<li>Coffee</li>
</ul>
<h3>Eating Items</h3>
<ul style="list-style-type:square">
<li>Pizza</li>
<li>Burger</li>
<li>Fries</li>
</ul>
</body>
</html>The result:
As you can see in the result. The first list by default shows circled bullet points as list item markers whereas the second list shows square shape list item markers.
HTML - Ordered List
An ordered list starts with a <ol> tag and each item is listed within the <li> element. By default, the ordered list is represented by numbers. We can use the style attribute to choose different list item markers. Let's try this in code:
<!DOCTYPE html>
<html>
<head>
<title>Lecture 10</title>
</head>
<body>
<h1 style="text-align:center">Lecture 10</h1>
<h3>Drinking Items</h3>
<ol>
<li>Water</li>
<li>Tea</li>
<li>Coffee</li>
</ol>
<h3>Eating Items</h3>
<ol type="A">
<li>Pizza</li>
<li>Burger</li>
<li>Fries</li>
</ol>
</body>
</html>The result:
As you can see in the result the first list shows numbers which are the default for an ordered list whereas the second list is represented by uppercase letters after using the 'type' attribute to the list. The other list item type that can be used are type = "a" for lowercase letters, type = "I" for uppercase roman numbers, and type = "i" for lowercase roman numbers.
HTML - Iframes
IFrames are used to show a webpage within a webpage. It starts with a tag <iframe>. Within this tag, we can define the source of the URL, the title of the Iframe, height, and width of the iframe. Let's try this in code:
<!DOCTYPE html>
<html>
<head>
<title>Lecture 10</title>
</head>
<body>
<h1 style="text-align:center">Lecture 10</h1>
<iframe src = "https://www.jackofall.org/" title = "Iframe example" height = "600" width = "850">
</body>
</html>The result:
As you can see in the result how we have used <iframe> to show this website's homepage within our webpage. Try these codes yourself and create cool stuff!
Comments