INTRODUCTION
Materials
• Computer with a code editor (e.g., VS Code)
• Internet connection
• HTML reference guide (e.g., W3Schools)
HTML which stands for HyperText Markup Language. By the e
nd of this lecture, you’ll know the basics of how to create your
own webpage.”
Brief History of HTML
“HTML was created by Tim Berners Lee in 1991 to structure web pages.
Since then, it has evolved significantly. Understanding HTML is your first step
into web development.”
Basic Structure of an HTML Document
• html
• Copy
• <!DOCTYPE html>
• <html>
• <head>
• <title>My First Webpage</title>
• </head>
• <body>
• <h1>Welcome to My Page!</h1>
• <p>This is my first paragraph.</p>
• </body>
• </html>
Explanation of Basic Tags
• <!DOCTYPE html>: Declares the document type
• <html>: Root element of the HTML page
• <head>: Contains meta-information about the document
• <title>: Sets the title of the webpage
• <body>: Contains the visible content
Common HTML Tags
• <h1> to <h6>: Headings
• <p>: Paragraph
• <a>: Anchor (link)
• <img>: Image
Coding Demonstration
• “Let’s create a simple webpage together.”
1. Open your code editor and create a new file called index.html.
2. Type in the following code:
CONT.
html
Copy
<!DOCTYPE html>
<html>
<head>
<title>My Simple Webpage</title>
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a basic HTML document.</p>
<a href="https://www.example.com">Visit Example</a>
</body>
</html>
3. Save the file and open it in your web browser
to see your first webpage in action!
Hands-on Activity:
❑ Create a simple webpage with:
❑ A title
❑ At least one heading
❑ A paragraph introducing yourself
❑ A link to your favorite website
Intermediate HTML: 2nd
“We’re moving beyond the basics and diving into lists, tables, and forms in HTML.
By the end of this lesson, you’ll be able to create and structure more complex webpages
.”
HTML Lists:
Two main types of list
1. Ordered list
2. Unordered lists
Ordered list - typically rendered as a numbered list.
• html
• Copy
• <ol>
• <li>First item</li>
• <li>Second item</li>
• <li>Third item</li>
• </ol>
Attributes
This element also accepts the global attributes.
Reversed
This Boolean attribute specifies that the list's items are in reverse order. Items will be
numbered from high to low.
Start
An integer to start counting from for the list items. Always an Arabic numeral (1, 2, 3, etc.),
even when the numbering type is letters or Roman numerals. For example, to start
numbering elements from the letter "d" or the Roman numeral "iv," use start="4".
Type
Sets the numbering type:
a - for lowercase letters
A - for uppercase letters
I - for lowercase Roman numerals
I - for uppercase Roman numerals
1 - for numbers (default)
The specified type is used for the entire list unless a different type attribute is used on an
enclosed <li> element.
Usage Note:
Marker, such as a number or letter.
- The <ol> and <ul> (or the synonym <menu>) elements may nest as deeply as desired, alternating
between <ol>, <ul> (or <menu>) as needed.
- The <ol> and <ul> elements both represent a list of items. The difference is with
the <ol> element, the order is meaningful.
For example:
•Steps in a recipe
•Turn-by-turn directions
•The list of ingredients in decreasing proportion on nutrition information labels
To determine which list to use, try changing the order of the list items; if the meaning
changes, use the <ol> element — otherwise you can use <ul> otherwise, or <menu> if your
list is a menu.
Example:
Using Roman Numeral type
Using the start attribute:
Nesting lists:
Result
Unordered List - define a list where the sequence or order of the list items doesn't matter.
We can use an unordered list for keeping track of groceries, supplies and random objects.
• html In HTML, we use the <ul> tag to create an unordered
list.
• Copy
• <ul> df
For example: Browser output:
• <li>Item one</li>
• <li>Item two</li>
• <li>Item three</li>
• </ul>
• Ordered lists use num
bers, while unordered list
s use bullets.”
Creating Tables:
“Tables are great for organizing data. Here’s a basic table structure:
HTML Forms – are essential for user input.
Sample:
Activity 1:
Create a webpage with a list, table, and form.
1. Open your code editor and create a new file called intermediate.html.
2. Type in the following code:
3. Save the file and open it in your web browser
to see your new webpage in action!”
4. Upload to our teams file folder “Intermidiete “
Unordered Lists Marker:
We use the CSS list-style-type property to change the marker that marks the list item.
The valid options for markers are
Icon Marker Description “Example market list”
• (default) disc sets the marker to a dot
○ circle sets the marker to a hollow circle
sets the marker to a filled black
▪ square
square
none removes the marker altogether
Nesting List: In HTML, we can create a nested list by adding
one list inside another.
Browser Output:
Ordered List inside Unordered List:
Similarly, we can also mix list types while nesting and add ordered
lists inside the unordered list. For example,
.
Browser Output:
Activity 2.
Multi-level Nesting of Unordered List
.
.
.
.
.
.
