Practical 1
Introduction to HTML
Objective:
To understand the basics of HTML
(HyperText Markup Language), the fundamental language for creating web pages.
Overview:
What is HTML?
·HTML, or HyperText Markup
Language, is the standard markup language used to create and design documents
on the World Wide Web.
·It structures web content
and its elements, defining the layout and organization of a webpage.
·HTML is used to structure
text, images, links, multimedia, and other content to be displayed in a web
browser.
Key Concept/Features of HTML:
1. Elements and Tags: HTML consists of a series of elements, represented by tags, that define the structure and content of a webpage. Tags are enclosed in angle brackets (< >) and usually come in pairs, with an opening tag (<tag>) and a closing tag (</tag>).
2.Attributes: HTML tags can have attributes that provide additional information about the element. Attributes are included within the opening tag and usually come in name-value pairs, such as class="classname" or src="image.jpg".
3.Document Structure: An HTML document has a well-defined structure, starting with a <!DOCTYPE html> declaration, followed by an <html> element that encompasses the entire document. Within the <html> element, there are <head> and <body> sections. The <head> contains metadata, such as the document title and links to stylesheets, while the <body> contains the content to be displayed.
4.Hyperlinks: One of the core features of HTML is the ability to create hyperlinks using the <a> tag. Hyperlinks allow users to navigate between different pages or resources on the web.
5.Forms and Input: HTML supports the creation of interactive forms using the <form> element and various input types (<input>, <textarea>, <button>, etc.), enabling user interaction and data submission.
6.Multimedia: HTML provides tags to embed multimedia elements, such as images (<img>), videos (<video>), and audio (<audio>), allowing rich media content to be included in web pages.
Importance and Benefits of HTML:
1. Foundation of Web Pages:
Structure: HTML provides the basic structure of a webpage, allowing content to be organized in a meaningful way. It uses elements like headings, paragraphs, lists, links, and media to create a cohesive layout.
Consistency: By using a standardized language, HTML ensures that web pages are consistently rendered across different browsers and devices.
2. Ease of Use:
Simplicity: HTML
is relatively easy to learn and use, making it accessible for beginners. Its
syntax is straightforward, and its tags are intuitive.
Readability: HTML
documents are easy to read and understand, even for those with minimal coding
experience, due to their clear and human-readable structure.
3. Accessibility:
Screen Readers:
HTML's semantic elements (like <header>, <footer>, <nav>,
<article>, etc.) improve accessibility by providing additional context to
screen readers and other assistive technologies.
SEO Benefits:
Semantic HTML elements help search engines better understand the content and
structure of a webpage, which can improve search engine rankings.
4. Interactivity and Forms:
Forms: HTML
supports the creation of interactive forms, allowing users to submit data,
interact with the site, and perform actions such as login, registration,
search, and feedback.
Hyperlinks: HTML
enables the creation of hyperlinks, which are essential for navigating between
web pages and resources on the internet.
5. Integration
with Other Technologies:
CSS: HTML
integrates seamlessly with CSS (Cascading Style Sheets), allowing developers to
style and layout web pages. CSS handles the visual presentation, while HTML
structures the content.
JavaScript: HTML
works alongside JavaScript, enabling dynamic content and interactive features
on web pages. JavaScript can manipulate HTML elements, validate forms, and
create complex user interactions.
6. Multimedia
and Graphics:
Images and Videos:
HTML supports embedding multimedia elements like images, videos, and audio
files, enhancing the user experience with rich content.
Graphics: HTML5
includes the <canvas> element, allowing for the rendering of graphics,
animations, and even games directly in the browser without needing external
plugins.
7. Cross-Platform
Compatibility:
Web Browsers: HTML
is supported by all major web browsers (Chrome, Firefox, Safari, Edge, etc.),
ensuring that web pages can be viewed and interacted with on any device with a
browser.
Responsive Design:
HTML, combined with CSS, supports responsive design techniques, allowing web
pages to adapt to different screen sizes and devices (desktops, tablets,
smartphones).
8. Standards
and Community Support:
W3C Standards:
HTML is maintained by the World Wide Web Consortium (W3C), which ensures that
it evolves with web technologies and meets the needs of developers and users.
Community: A large
and active community of developers contributes to the evolution of HTML,
provides support, and shares best practices, making it easier to find resources
and solutions.
Summary:
HTML is the backbone of web development, providing the structure
and foundation for creating web pages. Its simplicity, accessibility, and
compatibility with other web technologies make it an essential tool for
developers. Whether you are creating a simple webpage or a complex web application,
HTML is the starting point for building and organizing web content.
Tools:
1.Text
Editor: A program for writing code (e.g., Notepad++, Sublime Text,
Visual Studio Code).
2.Web
Browser: A program for viewing web pages (e.g., Chrome, Firefox).
Example:
A simple HTML document looks like this:
Example 1:
|
<html> <head> <title>My
First HTML Page</title> </head> <body> <h1>Welcome
to My First HTML Page</h1> <p>This
is a paragraph of text.</p> </body> </html> |
Example Explained
- The
<!DOCTYPE html> declaration defines that this document is an HTML5
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
This example includes the essential components of an HTML
document: the doctype declaration, the html element, the head section with a
title, and the body section with content.
How to Execute HTML
File:
After writing the above code save it a specific folder with a
specific name with .html extension. Here , i.e; first.html. To execute the html
file we generally use the any type of web browser.
The purpose of a web browser (Chrome,
Edge, Firefox, Safari) is to read HTML documents and display them correctly.
A browser does not display the HTML tags,
but uses them to determine how to display the document:
Output/Screenshot output:
.png)
What is an HTML Element?
An HTML element is defined by a start tag,
some content, and an end tag:
Syntax:
<tagname> Content goes here...
</tagname>
Example:
The HTML element is everything from the
start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<br> none none
Some HTML elements have no content (like
the <br> element). These elements are called empty elements. Empty
elements do not have an end tag!
Html Page Structure:
A Basic Html
document must contain :
1.<html> : Every HTML code must be enclosed between basic HTML
tags. It begins with <html> and ends with <html> tag.
2.<head>: The head tag comes next which contains all the
header information of the web page or documents like the title of the page and
other miscellaneous information. This information is enclosed within the head
tag which opens with <head> and ends with <head>. The contents will
of this tag will be explained in the later sections of the course.
3.<title>: We can mention the title of a web page using the
<title> tag. This is header information and hence is mentioned within the
header tags. The tag begins with <title> and ends with <title>.
4.<body>: Next step is the most important of all the tags we
have learned so far. The body tag contains the actual body of the page which
will be visible to all the users. This opens with <body> and ends with
<body>. All content enclosed within this tag will be shown on the web
page be it writings or images or audio or videos or even links. We will see
later in the section how using various tags we may insert mentioned contents
into our web pages.
Lab Exercise:
Introduction
to HTML
Objective:
To create a basic HTML web page with
fundamental elements and understand their structure and usage.
Instructions:
Create a new file named example2.html using
a text editor (e.g., Notepad, Visual Studio Code, Sublime Text).
Build the basic structure of your HTML
document:
Example 2:
|
<!DOCTYPE
html> <html
lang="en"> <head> <meta
charset="UTF-8"> <meta
name="viewport" content="width=device-width,
initial-scale=1.0"> <title>My
First HTML Page</title> </head> <body> <h1>Hello,
World!</h1> <p>This
is my first HTML page.</p> </body> </html> |
Save the file and open it in a web browser
to view your web page (example2.html).
Output:
.png)
HTML Structure:
ü <!DOCTYPE
html>: Defines the document type and version of HTML (HTML5 in this case).
ü <html>: Root
element that wraps the entire content of the HTML document.
ü <head>:
Contains meta-information about the HTML document, such as character set,
viewport settings, and page title.
ü <meta
charset="UTF-8">: Specifies the character encoding for the
document (UTF-8 supports most characters worldwide).
ü <meta
name="viewport" content="width=device-width,
initial-scale=1.0">: Sets the viewport to the width of the device and
initial zoom level (for responsive design).
ü <title>:
Sets the title of the HTML document, displayed in the browser's title bar or
tab.
ü <body>:
Contains the content visible to users, such as headings, paragraphs, images,
links, etc.
Basic Elements:
ü <h1>:
Defines a top-level heading. (Heading levels range from <h1> for the main
heading to <h6> for subheadings.)
ü <p>: Defines
a paragraph of text.
Home Tasks(For Practice):
Enhance your page by adding:
Additional headings (<h2>,
<h3>) and paragraphs (<p>) to structure your content.
Create a list using <ul> (unordered
list) or <ol> (ordered list).
Insert images using <img> and links
using <a>.
Experiment with attributes:
Add class and id attributes to elements
for styling and JavaScript interactions.
Use href attribute in <a> for
linking to other web pages or resources.
Explore alt attribute in <img> for
alternative text (important for accessibility).
Outcome:
By completing this lab exercise, you will
have created a basic HTML page and gained familiarity with essential HTML
elements and their attributes.