Scribd
Upload
103 views6 pages

Lab Manual For HTML Exercise: Building A Basic Web Page: &NBSP &NBSP &NBSP &NBSP

This document provides a lab manual to guide users through building a basic HTML webpage. It outlines objectives like learning HTML structure and tags for headings, paragraphs, lists, images, links, tables and forms. The exercises walk through creating an HTML document, adding content and styling, using <div> tags to group content, including images and links, and practicing with different HTML tags to build out a webpage. The final exercise instructs users to create a simple one-page website incorporating learned skills.

Uploaded by

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

Lab Manual For HTML Exercise: Building A Basic Web Page: &NBSP &NBSP &NBSP &NBSP

This document provides a lab manual to guide users through building a basic HTML webpage. It outlines objectives like learning HTML structure and tags for headings, paragraphs, lists, images, links, tables and forms. The exercises walk through creating an HTML document, adding content and styling, using <div> tags to group content, including images and links, and practicing with different HTML tags to build out a webpage. The final exercise instructs users to create a simple one-page website incorporating learned skills.

Uploaded by

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

Lab Manual for HTML Exercise: Building a Basic Web Page

Introduction
HTML (HyperText Markup Language) is the standard markup language for creating web pages.
It defines the structure and content of a web page, allowing you to add text, images, links, and
other elements. This lab manual will guide you through the process of building a basic web page
using HTML.
Objectives

 Familiarize yourself with the basic structure of an HTML document


 Learn how to create headings, paragraphs, and lists in HTML
 Learn how to group contents using <div>
 Understand how to add images and links to a web page
 Understand how to create tables and forms
 Practice using HTML tags and attributes
Lab Setup
You will need a text editor I.e NotePad or a code editor i.e Visual studio code to write HTML
code. A web browser is also required to preview your web pages.
Exercise 1: Creating a Basic HTML Document
1. Open a text editor or a code editor.
2. Type the following code:
HTML
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph.</p>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<img src="[Link]" alt="Image description">
<a href="#home">Google</a>
&nbsp;&nbsp;&nbsp;&nbsp /* non-breaking space (<code>&nbsp;</code>) is an
HTML entity that represents a space that will not break into a new line. This
means that two words separated by a non-breaking space will stick together
(not break into a new line) even if the line break happens between them. */

<a href="#profile">Profile</a>

</body>
</html>

Use code with caution.


3. Save the file as "[Link]".
4. Open a web browser and drag and drop the "[Link]" file onto the browser window.
5. Observe the web page that appears in the browser.
Exercise 2: Adding More Content and Styling
6. Modify the existing HTML code to add more content and styling.
7. Use different heading tags (h2, h3, h4, h5, h6) to create a hierarchy of headings.
8. Use the strong (<strong>) and emphasis (<em>) tags to emphasize important text.
9. Use the break (<br>) tag to insert line breaks within paragraphs.
Exercise 3: Learn
The <div> tag, short for "division," is a generic container element in HTML that allows you to
group and organize content on a web page. It's one of the most commonly used HTML tags and
doesn't inherently represent any specific meaning or behavior. Instead, it serves as a versatile
tool for structuring and styling content.
Key features of the <div> tag:

 Grouping content: The <div> tag groups related content together, making it easier to
manage and style as a single unit.
 Styling with CSS: The <div> tag doesn't have any predefined styling by default. Instead,
it's used in conjunction with CSS to apply visual styles, such as background color,
borders, padding, and margin.
 JavaScript manipulation: The <div> tag can be manipulated using JavaScript to add
interactivity and dynamic behavior to the web page.
 Semantic meaning: The <div> tag itself doesn't carry any semantic meaning, but it can
be used to create semantic sections like headers, footers, sidebars, or content areas.
Try to implement the following code.
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<div class="header">
<h1>My Web Page</h1>
</div>

<div class="content">
<p>This is a paragraph of text.</p>
<img src="[Link]" alt="Image description">
</div>

<div class="footer">
<p>&copy; 2023 My Name</p>
</div>
</body>
</html>

Exercise 4: Adding Images and Links


10. Download an image and save it in the same folder as your HTML file.
11. Modify the HTML code to add the image tag (<img>) and specify the image source (src)
and alternative text (alt) attributes.
12. Add links to other web pages using the anchor (<a>) tag. Specify the href attribute to
link to the desired web page and the target attribute to open the link in a new tab
(_blank).
Exercise 5: Practicing with Different HTML Tags
13. Explore various HTML tags and their attributes to create different elements on your web
page.
14. Use the table (<table>) tag to create tables with rows (<tr>) and cells (<td>).
15. Use the form (<form>) tag to create form

Try to implement the following code and get better understanding on tables and form tags.
<!DOCTYPE html>
<html>
<head>
<title>Table Example</title>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>Occupation</th>
</tr>
<tr>
<td>John Doe</td>
<td>30</td>
<td>Software Engineer</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>25</td>
<td>Marketing Manager</td>
</tr>
</table>
<form>

<label
for="name">Name:</label>

<input
type="text"
id="name"
name="name">

<br>

<label
for="email">Email:</label>

<input
type="email"
id="email"
name="email">

<br>

<label
for="message">Message:</label>

<textarea
id="message"
name="message"></textarea>
<br>
<button type="submit">Submit</button>
</form>
</body>
</html>

Exercise 6: Now try to create a simple and one page website as shown in the figures below. The
images are provided in the zip file named images.

Common questions

Powered by AI

The <strong> and <em> tags are used to emphasize text, with <strong> indicating strong importance by bolding the text and <em> representing stressed emphasis via italics. Both tags are not purely stylistic; they provide semantic meaning that assistive technologies, such as screen readers, use to convey emphasis to visually impaired users, thus enhancing accessibility .

HTML forms facilitate user input on web pages, enabling data collection for processing. Crucial tags include <form> for defining the form container, <input> for user inputs such as text or selection fields, <label> for describing input fields, <textarea> for multiline text input, and <button> for submitting the form. These components work together to gather and transmit user data efficiently .

Both <img> and <a> tags enhance interactivity by adding visual and navigational elements to a web page. The <img> tag implements functionalities like displaying an image and providing alternative text for accessibility using the 'src' and 'alt' attributes. The <a> tag creates hyperlinks, redirecting users to another page or section using 'href,' and can open links in new tabs with 'target=_blank.' Their implementations differ as images visually enhance content, while anchors facilitate navigation .

The doctype declaration in HTML documents, particularly in HTML5, is significant because it tells the browser which version of HTML is being used, enabling proper parsing and rendering. In HTML5, the declaration is simplified to <!DOCTYPE html>, which ensures that the document is rendered in standards mode, preventing quirks or legacy issues that might arise from previous HTML versions .

The <div> tag functions primarily as a block-level container without any semantic meaning, used to group elements for styling or for manipulation via CSS or JavaScript. In contrast, semantic HTML tags, like <header>, <footer>, <section>, and <article>, provide meaningful context to the structure of the web page, improving accessibility and SEO by explicitly defining the type of content .

HTML tables enhance data presentation by organizing information in a grid format, allowing easy access and readability. Key tags required include <table> to define the table structure, <tr> for table rows, <th> for header cells providing context, and <td> for data cells holding the actual content. This setup allows for logical arrangement and clear delineation of dataset variables and values .

To add an image to an HTML page, the <img> tag is used, requiring 'src' for the image path and 'alt' for a text description. An example code is: <img src="image.jpg" alt="Image description">. The 'src' attribute can point to relative or absolute paths, and the 'alt' attribute provides alternative text, improving accessibility and information in case of loading issues .

Entities like &nbsp; (non-breaking space) enhance text presentation by preventing automatic line breaks between connected words, thereby maintaining the desired text flow and spacing. This approach allows precise control over content presentation, ensuring consistent formatting, such as in scenarios where two graphical elements or words should be inseparable across lines .

The basic components of a simple HTML document include the doctype declaration, <html>, <head>, <title>, and <body> tags. The doctype declaration "<!DOCTYPE html>" signifies HTML5 and helps browsers render the content correctly. The <html> tag encloses all HTML content, serving as the root of the document. The <head> section contains metadata, such as <title>, which sets the title of the page shown on the browser tab. The <body> tag holds all the visible content of the page, including headings, paragraphs, images, and links .

CSS complements HTML by styling elements within <div> tags to enhance visual aesthetics and provide layout control. It allows setting properties like background color, borders, padding, and margins. CSS grid and flexbox can be used to create responsive and flexible layouts, while animations and transitions can add dynamic visual effects. This separation of structure (HTML) and style (CSS) leads to cleaner code and easier maintenance .

You might also like