HTML 3

 Creating Lists in HTML

Hello friends,

Now it’s time to create lists and tables... Let's start with lists first. In HTML, there are three types of lists: ordered lists, unordered lists, and definition lists. We will examine each type separately.

Ordered List

<html>
  <body>
   <ol>
    <li>Tea</li>
    <li>Coffee</li>
    <li>Milk</li>
    <li>Water</li>
   </ol>
  </body>
</html>

Unordered List

<html>
  <body>
   <ul>
    <li>Tea</li>
    <li>Coffee</li>
    <li>Milk</li>
    <li>Water</li>
   </ul>
  </body>
</html>

In an ordered list, we use the <ol> tag, and each item is placed within <li>...</li> tags. The browser displays it as follows:

  1. Tea

  2. Coffee

  3. Milk

  4. Water

The only difference in an unordered list is that we use <ul> instead of <ol>. The result in the browser appears as:

  • Tea

  • Coffee

  • Milk

  • Water

In an ordered list, we can customize numbering with numbers, letters, or Roman numerals. Let's see examples:

<html>
  <body>
  
  <h3>Numbered List</h3>
  <ol>
  <li>Tea</li>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Water</li>
  </ol>

  <h3>Uppercase Letter List</h3>
  <ol type="A">
  <li>Tea</li>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Water</li>
  </ol>

  <h3>Lowercase Letter List</h3>
  <ol type="a">
  <li>Tea</li>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Water</li>
  </ol>
  
  <h3>Roman Numeral List</h3>
  <ol type="I">
  <li>Tea</li>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Water</li>
  </ol>
  
  <h3>Lowercase Roman Numeral List</h3>
  <ol type="i">
  <li>Tea</li>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Water</li>
  </ol>
  
  </body>
</html>

These are the available options for ordered lists. Now, let’s move on to unordered lists.

<html>
  <body>
  
  <h3>Disc List</h3>
  <ul type="disc">
  <li>Tea</li>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Water</li>
  </ul>

  <h3>Circle List</h3>
  <ul type="circle">
  <li>Tea</li>
  <li>Coffee</li>
  <li>Milk</li>
  <li>Water</li>
  </ul>

  <h3>Square List</h3>
  <ul type="square">  
  <li>Tea</li>
  <li>Coffee</li>
  <li>Milk</li>  
  <li>Water</li>  
  </ul>
  
  </body>
</html>

Definition Lists

Definition lists use different tags: <dl>, <dt>, and <dd>. Let's start with an example and then explain it.

<html>
  <body>

  <dl>
  <dt>Hot Beverages</dt>
  <dd>Tea</dd>
  <dd>Coffee</dd>
  <dt>Cold Beverages</dt>
  <dd>Water</dd>
  <dd>Milk</dd>
  </dl>
  
  </body>
</html>

Output:

Hot Beverages

  • Tea

  • Coffee

Cold Beverages

  • Water

  • Milk

The <dl> tag defines the list. <dt> is used for the category title, while <dd> is used for the list items.

Nested List Example

Let’s practice with a nested list:

<html>
  <body>
  <h3>Top 3 Football Teams by Country</h3>
  
  <ul>
   <li>Turkey</li>
    <ol type="a">
     <li>Beşiktaş</li>
     <li>Galatasaray</li>
     <li>Fenerbahçe</li>
    </ol>
  
   <li>England</li>
    <ol type="a">
     <li>Chelsea</li>
     <li>Liverpool</li>
     <li>Man. United</li>
    </ol>
  
   <li>Spain</li>
    <ol type="a">
     <li>Real Madrid</li>
     <li>Barcelona</li>
     <li>Atletico Madrid</li>
    </ol>
  </ul>
  
  </body>
</html>

Yes, you guessed it right—I am a Beşiktaş fan, and I prefer Ronaldo over Messi! :))

In the next lesson, we will cover table creation. See you then!

Yorumlar

Yorum Gönder

Bu blogdaki popüler yayınlar

Arithmetic Operators and Expressions

( + ) : Addition ( - ) : Subtraction ( / ) : Division ( * ) : Multiplication ( % ) : Modulus (-x) : Changes the sign of the variable. int number = 34; printf("%d", -number); Modulus is used to find remainders. For example, if you want to find the remainder of 15 divided by 6, you write: 15%6 = 3. The order of operations is as follows: Parentheses ( ) are evaluated first. Then, multiplication * , division / , and modulus % are evaluated from left to right. Finally, addition + and subtraction - are performed, also from left to right. There are some additional details about division. For example, in standard arithmetic, 4/5 equals 0.8 . However, in C, 4/5 results in 0 because the program expects an integer result when dividing two integers. Here are some examples: 8/4+2 => 2 + 2 => 4 8-4*2+-12 => 8 - 8 + -12 => -12 15*4/2%4*7 => 60/2%4*7 => 30%4*7 => 2*7 => 14 31+7/2-83%5*2-2 => 31+ 3 - 3 * 2 - 2 => 31 + 3 - 6 - 2 =...
Devamı

Functions

Functions in Procedural Languages like C One of the important topics in procedural languages like C is functions. In languages like Java or C#, they are called methods. Regardless of what they are called, their job is the same. Imagine doing the same operation multiple times. Writing the same code for every instance would be quite cumbersome. Functions are designed to solve this problem. You define the operation once, and then you can call the function as many times as needed. The benefits of functions don't stop there. Functions provide modularity. For example, let's say you've written a function to test if a number is prime, and you realize it's incorrect. You don't need to change the entire program—just fix the wrong function, and the program will work correctly. Additionally, moving the code of your functions to other programs is very simple. Functions make your work easier. Imagine writing a program that reads data from disk, processes it, then converts the...
Devamı

What is a Variable? How is it Defined?

  Variables are placeholders that store values either entered by the user or assigned during program execution. Defining a variable means specifying its type according to the data it will store. For example, if you have a variable named a and you want it to store an integer value, you must define a as an integer. Some variable types: char, int, float, double, short, long... (Long and short are variations of integer with different ranges.) #include<stdio.h> int main(void) { int a; a = 25; printf("The value of a is %d", a); return 0; } int stands for integer. In the first line, we wrote "int a;" , which means "I have a variable named a of integer type." The line a = 25; assigns the value 25 to a . This means that whenever a is used, its value 25 will be referenced. The printf(); function contains %d , which indicates that an integer variable will be displayed. The variable name a is provided after the comma to speci...
Devamı