Scribd
Upload
14 views4 pages

Web Dev LAb 1

The document outlines the objectives and key concepts of HTML, including its structure and essential elements such as headings, paragraphs, links, images, and lists. It provides a brief explanation of HTML's role in web page creation and includes tasks for creating a simple HTML page and a CV webpage. The document serves as a foundational guide for beginners to understand and apply HTML in web development.

Uploaded by

Talha Khursheed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views4 pages

Web Dev LAb 1

The document outlines the objectives and key concepts of HTML, including its structure and essential elements such as headings, paragraphs, links, images, and lists. It provides a brief explanation of HTML's role in web page creation and includes tasks for creating a simple HTML page and a CV webpage. The document serves as a foundational guide for beginners to understand and apply HTML in web development.

Uploaded by

Talha Khursheed
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

Lab# 01

Objectives:
 Understand the basic structure of an HTML document.
 Learn how to create paragraphs and format text.
 Learn how to insert hyperlinks and images.
 Learn how to create ordered and unordered lists.
 Apply these concepts by creating a simple web page.

What is HTML?

 HTML stands for Hyper Text Markup Language


 HTML is the standard markup language for creating Web pages
 HTML describes the structure of a Web page
 HTML consists of a series of elements
 HTML elements tell the browser how to display the content
 HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.

Some key HTML elements include:


 Headings (<h1> to <h6>): Used to define section titles.
 Paragraphs (<p>): Used to display text content.
 Links (<a>): Used to create hyperlinks.
 Images (<img>): Used to insert pictures.
 Lists (<ul> and <ol>): Used to create itemized content.

Web Technology
HTML Page Structure

Example:

Example Explained

 The <!DOCTYPE html> declaration defines that this document is an HTML5

Web Technology
document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the HTML page
 The <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab)
 The <body> element defines the document's body, and is a container for all the
visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists,
etc.
 The <h1> element defines a large heading
 The <p> element defines a paragraph

Additional HTML Elements

1. Paragraphs and Text Formatting

2. Hyperlinks

3. Images

<img src="image.jpg" alt="A sample image" width="300" height="200">

4. Lists

 Ordered List:

Web Technology
 Unordered List:

Tasks:

1. Create a New HTML Page with the following elements:


o Title: "My First HTML Page"
o A main heading (<h1>) with a welcome message.
o A paragraph about yourself.
o A hyperlink to a website you like.
o An image of your choice (local or online).
o An ordered list of your favorite hobbies.
o An unordered list of your favorite foods.
2. Build a Simple CV Webpage
o Include:
 Your name as a main heading.
 A short introduction paragraph.
 An image (your photo or an avatar).
 A list of your skills.
 A hyperlink to your LinkedIn profile (if available).

Web Technology

You might also like