Week 2: HTML Basics - Lists, Links, and Images
Muhammad SufiyanLists 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
Linkedin: linkedin.com/in/innosufiyan
Subscribe to my newsletter
Read articles from Muhammad Sufiyan directly inside your inbox. Subscribe to the newsletter, and don't miss out.
Written by
Muhammad Sufiyan
Muhammad Sufiyan
As a former 3D Animator with more than 12 years of experience, I have always been fascinated by the intersection of technology and creativity. That's why I recently shifted my career towards MERN stack development and software engineering, where I have been serving since 2021. With my background in 3D animation, I bring a unique perspective to software development, combining creativity and technical expertise to build innovative and visually engaging applications. I have a passion for learning and staying up-to-date with the latest technologies and best practices, and I enjoy collaborating with cross-functional teams to solve complex problems and create seamless user experiences. In my current role as a MERN stack developer, I have been responsible for developing and implementing web applications using MongoDB, Express, React, and Node.js. I have also gained experience in Agile development methodologies, version control with Git, and cloud-based deployment using platforms like Heroku and AWS. I am committed to delivering high-quality work that meets the needs of both clients and end-users, and I am always seeking new challenges and opportunities to grow both personally and professionally.