Week 2: HTML Basics - Lists, Links, and Images
Lists in HTML
Lists are a great way to organize information in a structured format. In HTML, there are three types of lists:
Unordered Lists (ul)
Ordered Lists (ol)
Description Lists (dl)
Unordered Lists (ul)
An unordered list starts with the <ul> tag. Each list item is defined with the <li> tag. By default, items in an unordered list are displayed with bullet points.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Unordered List Example</title>
</head>
<body>
<h2>Fruits</h2>
<ul>
<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>
</ul>
</body>
</html>
Ordered Lists (ol)
An ordered list starts with the <ol> tag. Each list item is defined with the <li> tag. Items in an ordered list are displayed with numbers.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Ordered List Example</title>
</head>
<body>
<h2>Steps to Make a Sandwich</h2>
<ol>
<li>Get two slices of bread.</li>
<li>Spread peanut butter on one slice.</li>
<li>Spread jelly on the other slice.</li>
<li>Put the slices together.</li>
</ol>
</body>
</html>
Description Lists (dl)
A description list is a list of terms with a description for each term. It starts with the <dl> tag. Each term is defined with the <dt> tag, and each description is defined with the <dd> tag.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Description List Example</title>
</head>
<body>
<h2>HTML Terms</h2>
<dl>
<dt>HTML</dt>
<dd>Hypertext Markup Language</dd>
<dt>CSS</dt>
<dd>Cascading Style Sheets</dd>
<dt>JavaScript</dt>
<dd>Programming language of the Web</dd>
</dl>
</body>
</html>
Links in HTML
Links are created using the <a> tag. They can be used for internal navigation, external navigation, or for creating mail links.
Internal Links
Internal links point to other pages within the same website.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Internal Link Example</title>
</head>
<body>
<h2>Home Page</h2>
<p>Go to the <a href="about.html">About Page</a>.</p>
</body>
</html>
External Links
External links point to pages on different websites.
Example:
<!DOCTYPE html>
<html>
<head>
<title>External Link Example</title>
</head>
<body>
<h2>Learn More</h2>
<p>Visit <a href="https://www.wikipedia.org" target="_blank">Wikipedia</a> for more information.</p>
</body>
</html>
Mail Links
Mail links open the user's email client with a new message to a specified address.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Mailto Link Example</title>
</head>
<body>
<h2>Contact Us</h2>
<p>Send us an email at <a href="mailto:info@example.com">info@example.com</a>.</p>
</body>
</html>
Image Tag
The <img> tag is used to embed images in an HTML page. It is an empty tag containing attributes only, and it does not have a closing tag.
Attributes:
src: Specifies the path to the image.
alt: Provides alternative text for the image.
width: Sets the width of the image.
height: Sets the height of the image.
Example:
<!DOCTYPE html>
<html>
<head>
<title>Image Example</title>
</head>
<body>
<h2>Beautiful Scenery</h2>
<img src="scenery.jpg" alt="A beautiful scenery" width="500" height="300">
</body>
</html>
Markup
Assignment: Create a Resume in HTML
Based on what we have learned, create a simple resume using HTML. Your resume should include:
1.A heading with your name.
2.An unordered list of your skills.
3.An ordered list of your work experience.
4.A description list of your education.
5.Links to your email and LinkedIn profile.
6.An image (e.g., your profile picture).
Example:
<!DOCTYPE html>
<html>
<head>
<title>My Resume</title>
</head>
<body>
<h1>Inno Sufiyan</h1>
<h2>Skills</h2>
<ul>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
<h2>Work Experience</h2>
<ol>
<li>Frontend Developer at XYZ Corp</li>
<li>Web Designer at ABC Ltd</li>
</ol>
<h2>Education</h2>
<dl>
<dt>Bachelor of Science in Computer Science</dt>
<dd>University of Technology</dd>
<dt>High School Diploma</dt>
<dd>City High School</dd>
</dl>
<h2>Contact</h2>
<p>Email: <a href="mailto:sufiyan@example.com">sufiyan@example.com</a></p>
<p>LinkedIn: <a href="https://www.linkedin.com/in/sufiyan" target="_blank">linkedin.com/in/sufiyan</a></p>
<h2>Profile Picture</h2>
<img src="profile.jpg" alt="Profile Picture" width="200" height="200">
</body>
</html>
Markup
This document should help you understand the basics of HTML lists, links, and images, and guide you in creating a simple HTML resume.
Instructor: Muhammad Sufiyan