Web Programming
Instructor: Melaku M.
Target Group: G4 CS Student
Chapter 2: HyperText Markup Language
Web Programming
➢ Client-side scripting
➢ Server-side scripting
Introduction to HTML
Introduction to HTML
❖HTML (Hypertext Markup Language) is the standard markup language used
to create web pages and web application.
❖It defines the structure and content of a webpage.
❖ It is a combination of Hypertext and Markup language.
✓The Hypertext defines the link between web pages, and
✓Markup defines the text document within tags to structure the web pages.
• This language annotates text so that machines can understand and
manipulate it accordingly.
Introduction to HTML
❖ It uses HTML tags and attributes to describe the structure and formatting of a
web page.
❖Tags are enclosed within angle brackets (< >).
❖It is often assisted by technologies such as Cascading Style Sheets (CSS) and
scripting languages such as JavaScript.
❖HTML is the language of the web.
❖It has evolved through versions from HTML 2.0 to HTML5.
Hypertext
❖Hypertext is a text that contains links to other text. These links,
often called "hyperlinks," can be clicked on to access the linked
information immediately.
❖It's a fundamental concept of the WWW, allowing users to navigate
from one document to another in a non-linear way.
❖In HTML, hyperlinks are created using the anchor tag <a>
Markup Language
❖Markup language is a system for annotating a document in a way that is
syntactically distinguishable from the text. The annotations specify how the text
should be structured, formatted, or presented. The markup symbols/codes tells
web browsers how to display a webpage’s words and images.
❖Key characteristics of markup languages:
• Structure: Markup languages define the structure of a document, such as headings,
paragraphs, lists, and links.
• Formatting: They specify how the content should be presented, including font size, style,
color, and alignment.
• Presentation: control the layout and appearance of a document, such as margins, spacing,.
HTML elements and tags
❖HTML elements are the building blocks of web pages. They define different parts of
the webpage such as headings, paragraphs, lists, images, links, table. form and more.
❖Tags are used to define the beginning and end of an element, while elements consist of
the opening tag, content, and closing tag.
❖Markup languages often use tags (e.g., <tagname>content</tagname>) to define
elements within the document.
❖In other words, tags are the markers that define where an element begins and ends,
while elements encompass the entire structure including the content contained within the
tags.
HTML elements
❖The HTML element is defined by a start tag, some content, and an end tag:
<tagname> Content goes here... </tagname>
❖The HTML element is everything from the start tag to the end tag:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
HTML Page Structure
The basic
structure of
an HTML
page is here
Web Browsers
❖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:
HTML tags
❖HTML tags are like keywords which defines that how web browser
will format and display the content. With the help of tags, a web
browser can distinguish between an HTML content and a simple
content.
❖All HTML tags must enclosed within < > these brackets.
❖If you have used an open tag <tag>, then you must use a close tag
</tag> (except some tags)
❖Syntax: <tag> content </tag>
A Simple HTML Document
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
</body>
</html>
1. Basic HTML tags (HTML, HEAD, BODY,TITLE)
❖<!DOCTYPE html>: This tag specifies the document type as HTML5. and
helps browsers to display web pages correctly.
❖<html>: This tag defines the root of the HTML document/page.
❖<head>: This tag contains metadata about the document/page, Elements within
the head aren’t visible on the front end of a webpage. Such as <style>, <title> ,
<script>, <meta>, <link>
❖<title>: This tag sets the title of the webpage.
❖<body>: This tag defines the webpages/documents body, and is a container for
all the visible contents, such as headings, paragraphs, images,, tables, lists, etc.
❖<p>: This tag defines a paragraph.
2. HTML Meta tags
❖HTML meta tags are special <HTML>
<head>
sections within the <head>
<meta charset="UTF-8">
section of an HTML document
<meta name="viewport"
that provide metadata about content="width=device-width, initial-
the webpage. scale=1.0">
<meta name="description"
❖This metadata is used by search content=“write this page description.">
engines, browsers, and other <title>My Webpage</title>
applications to understand the </head>
content and context of the page.
2. HTML Meta tags
❖Common Meta Tags and Their Uses:
✓<meta charset="UTF-8">: Specifies the character encoding used in the
HTML document.
✓<meta name="description" content="A brief description of your
webpage">: Provides a concise summary of the page's content. Search
engines often use this to display a snippet of the page in search results.
✓<meta name="author" content="Your Name">: Indicates the author of
the page.
3. HTML Comments
❖HTML comments allows you to add notes, explanations, or instructions within
the code without affecting the appearance of the webpage.
❖These comments are not visible on the rendered webpage but are present in the
source code, making it easier for developers to collaborate, debug, and maintain
clean code.
❖Syntax for writing HTML Comments
Examples of HTML Comments
Example: Multi-line Comment
Example: Single Line Comment
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<html>
<body>
<body>
<!-- This is
<!--This is heading Tag-->
heading tag -->
<h1>GeeksforGeeks</h1>
<h1>GeeksforGeeks</h1>
<!--This is paragraph tag -->
<!– This is
<p>single line comment</p>
paragraph tag -->
</body>
<p>This is multi-line comment</p>
</html>
</body>
</html>
4. HTML Link Tag
❖In HTML, links are used to connect different web pages, sections within a page,
or external resources like images, videos, or files. They create a clickable
element that, when clicked, takes the user to the specified destination.
❖In HTML, links are created using the <a> tag, and the destination of the link is
specified using the href attribute
❖Syntax:
<a href="url">Link Text</a>
❖Example:
<a href="https://www.example.com">Visit Example Website</a>
4. HTML Link Tag: Common Examples
❖Creating Basic Links: To create a link to www.htmltutor.org:
<a href="https:// www.htmltutor.com ">Visit HTML Tutor Page </a>
❖ Opening Links in New Tab : Use, target=”_blank” attribute:
<a href="https://www.htmltutor.com" target="_blank"> HTML Tutor</a>
❖Creating Internal Page Anchors : To link to another section on the same
page.
<a href="#section1">Go to Section 1</a>
❖Executing JavaScript : To trigger JavaScript code:
<a href="javascript:alert('Hello World!');">Execute JavaScript</a>
❖Linking to Email Addresses : To link to an email address
<a href="mailto:example@xyz.com">Send email</a>
4. HTML Link Tag
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <body>
<a href="https://www.geeksforgeeks.org"> <a
GeeksforGeeks HTML Tutorial href=“https://www.geeksforgeeks.org”
target="_blank">
</a>
GeeksforGeeks
</body>
</a>
</html>
</body>
</html>
5. HTML Text Formatting tags
❖HTML provides various tags for text formatting. This improves visual
appeal.
❖Let’s explore some of the common HTML text formatting tags.
❖Bold Text tag <strong> or <b>: Used to make text bold.
<b>This text is bold.</b> //This text is bold.
❖Italic Text tag <em> or <i>: Used to make text italic.
<i>This text is italicized.</i> //This text is italicized.
❖Underline text <u> Tag: Used to underline text.
<u>This text is underlined.</u> //This text is underlined.
❖Strikethrough Tag <s>: Used to strike through text.
<s>This text is struck through.</s> //This text is strikethrough.
5. HTML Text Formatting tags
❖Superscript Tag <sup>: Used to display text as superscript.
E = mc<sup>2</sup>
❖Subscript Tag <sub>: Used to display text as subscript (below the baseline).
H<sub>2</sub>O
❖Quote Tag <blockquote>: Used to define a long quotation.
<blockquote>This is a long quotation.</blockquote>
❖Preformatted Text Tag <pre>: Used to preserve whitespace and line breaks.
❖<pre> This text will be displayed exactly as it is typed. </pre>
❖Horizontal Rule Tag <hr>: Used to create a horizontal rule. Example <hr>
5. HTML Text Formatting tags
❖Inline Quote: <q>:
<q>This is an inline quote.</q> //”This is an inline quote”
❖Small Text: <small>:
<small>This text is smaller.</small> //This text is smaller.
❖Headings tags <h1> to <h6>:Used for headings of different levels of importance
<h1>This is a heading 1</h1> //This is a heading 1
❖Paragraph tags <p>:
<p>This is paragraph tag.</p> //This is a paragraph
❖Break tags <br>: forces the content that follows it to start on a new line.
5. HTML Text Formatting tags
❖<abbr> tag in HTML is used to define an abbreviation or acronym
<abbr title="Hypertext Markup Language">HTML</abbr>
<p>The <abbr title="National Aeronautics and Space Administration">NASA</abbr>
was established in 1958.</p>
❖<del> Tag: Marks text as deleted.
<del attr="values"> Contents... </del>
5. HTML Text Formatting tags
❖Unordered List: <ul> with <li> Ordered List: <ol> with <li>
<ul> <ol>
<li>Item 1</li> <li>First item</li>
<li>Item 2</li> <li>Second item</li>
</ul> </ol>
•Item 1 1.First item
•Item 2 2.Second item
Text formating demonstrativ example 1
<h2> HTML Text Formating Tags </h2>
<h1> This is heading level 1</h1>
<p> This is paragraph</p>
<b> This text is bold</b>
<i> This text is italicized</i>
<u> This text is underlined</u>
<s> This is Strikethrough text</s>
<h3> Superscript E.g: E = mc<sup>2</sup></h3>
<h3> Subscript E.g: H<sub>2</sub>O</h3>
<hr> <!--prints horizontal line -->
Text formating demonstrativ example 2
<h2> HTML Text Formating Tags </h2>
<pre> This text will be displayed
exactly as it is typed. </pre>
<q>This is an inline quote.</q> <br>
<abbr title="Hypertext Markup Language">
HTML</abbr><br>
<del attr="values"> Contents... </del>
<h3>Unordered List </h3>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
6 HTML Table tag
HTML tables are used to structure data in a tabular format on web pages.
<table> tag: Defines the entire table.
<tr> tag: Defines a table row.
<th> tag: Defines a table header cell (typically used for column headings)
<caption> tag: Defines a caption/description for the table.
<thead> tag: Defines the header section of the table.
<td>: Defines a table data cell.
<tbody> tag: Defines the body section of a table.
<col> tag: Defines attributes for a group of columns
<colgroup> tag: Defines a group of columns
6 HTML table tag
<table> <tbody>
<caption>My Table</caption> <tr>
<td>Data 1</td>
<thead> <td>Data 2</td>
<tr> </tr>
<th>Column 1</th> <tr>
<td>Data 3</td>
<th>Column 2</th> <td>Data 4</td>
</tr> </tr>
</thead> </tbody>
</table>
7. HTML image inserting tags
❖HTML <img> tag is used to embed images into a web page.
❖ Syntax: <img src="imageUrl" alt="Alternative text">
❖Example: <img src="example.jpg" alt="A beautiful landscape">
❖Attributes:
1. src: Specifies the URL of the image file.
2. alt: Provides alternative text for the image, which is displayed if the image cannot be
loaded or for users who are visually impaired.
3. width: Sets the width of the image in pixels.
4. height: Sets the height of the image in pixels.
5. title: Sets the title attribute for the image, which is displayed as a tooltip when the user
hovers over the image.
• Example 2: <img src="example.jpg" alt="A beautiful landscape" width="400"
height="300" title="A stunning mountain view">
8. HTML Frames
❖HTML frames were a common <html>
technique used to divide a web page <head>
<title>Frames Example</title>
into multiple sections, each
</head>
displaying a different content.
<body>
❖ However, they have largely been <frameset rows="100px, *">
<frame src="header.html">
replaced by modern web
<frame src="content.html">
development techniques like CSS </frameset>
and JavaScript. </body>
</html>
In this example, the browser window is divided into two frames:
9.HTML Form and Form Controls
❖HTML forms are used to collect user input from a web page. They can include
various types of form controls, allowing for various type of data to be submitted.
❖Basic Structure of an HTML Form
<form action="" method="post">
<label for="name">Name:</label>
<input type="text" name="name" required >
<label for="email">Email:</label>
<input type="email" name="email" required>
<input type="submit" value="Submit"> Output
</form>
Key Components of an HTML Form
1. <form>: The main container for the form. It has attributes like:
• action: URL where the form data will be sent.
• method: HTTP method (GET or POST) used for submitting the form.
2. Form Controls
1. Text input: Used for single-line text input, such as names, addresses.
<input type="text" name="username">
2. Password Input: used for password input.
<input type="password" name="password">
3. Email Input: Designed for entering email addresses
<input type="email" name="email">
Key Components of an HTML Form
4. Number Input: allowing users to enter numbers
<input type="number" name="age" min="0" max="100">
5. Date: Provides a calendar-based interface for selecting dates.
<input type=“date" name=“birthdate">
6. Checkbox: Creates a checkable box that can be selected or deselected
<input type="checkbox" name="subscribe" value="yes"> Subscribe
7. Label: Labels in HTML are used to associate text with form controls. They
provide context for the user and make forms more accessible.
<label for="name">Name:</label>
8. Submit button: used to submit the value.
<input type=“submit" value=“submit">
Key Components of an HTML Form
9. Radio Button: Creates a group of radio buttons, where only one option can be
selected at a time.
<input type="radio" name="gender" value="male">
<label for="male">Male</label>
<input type="radio" name="gender" value="female" id="female">
<label for="female">Female</label>
10. <textarea>: Used for multi-line text input, such as for writing comments or
longer messages.
<textarea name=“message” >write your text here:</textarea>
11. file: Allows users to upload files from their local computer.
<input type=“file" name=“photo" >
Key Components of an HTML Form
12. Select: Creates a dropdown list or selection box, allowing users to choose
from a predefined set of options.
<select name="country">
<option value="us">United States</option>
<option value="ca">Canada</option>
<option value="uk">United Kingdom</option>
</select>
13. Time: Allows users to select specific times.
14. reset: Creates a button that, when clicked, resets all form fields to their initial values.
15. button: A generic button that can be used for various purposes, such as triggering custom
actions or displaying messages.
Create a student registration form
<html>
<body>
<h2> Student registration form </h2>
<form action="" method="post">
Student name:<input type="text" name="name" > <br>
Phone number<input type=“tel" name=“phone" > <br>
Profile photo: <input type=“file" name=“profile“> <br>
Age: <input type=“number" name=“age“> <br>
Date of birth: <input type=“date" name=“dateOfBirth"> <br>
Password: <input type=“password" name=“password"> <br>
<input type=“submit" value=“Register">
</form>
</body>
</html>
10. Inserting Multimedia in HTML
❖Inserting multimedia elements such as images, audio, and video into HTML
documents enhances the user experience.
❖Audio: To embed audio files, use the <audio> tag. This tag supports various
audio formats like MP3, WAV, and OGG. You can also include controls for
playback.
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
10. Inserting Multimedia in HTML
❖Video: To embed video files, use the <video> tag. Like the audio tag, it supports
various formats and can include controls.
<video width="320" height="240" controls>
<source src="video.mp4" type="video/mp4">
<source src="video.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
controls: Adds video playback controls to the element.
<source>: Specifies the source of the video file.
type: Specifies the MIME type of the video file.
10. Inserting Multimedia in HTML
❖Embedding YouTube Videos: To embed a YouTube video, you can use the
<iframe> tag. You’ll need the embed link from the YouTube video.
<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0"
allowfullscreen>
</iframe>
Complete Example: Inserting Multimedia in HTML
<html lang="en">
<head>
<title>Multimedia Example</title>
</head>
<body>
<h1>Multimedia in HTML</h1>
<h2>Image</h2>
<img src="https://via.placeholder.com/300" alt="Placeholder Image"
title="This is a placeholder image">
<h2>Audio</h2>
<audio controls>
<source src="https://www.mp3.com//Sound.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
Complete Example: Inserting Multimedia in HTML
<h2>Video</h2>
<video width="320" height="240" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4"
type="video/mp4">
Your browser does not support the video tag.
</video>
<h2>YouTube Video</h2>
<iframe width="560" height="315"
src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0"
allowfullscreen></iframe>
</body>
</html>
11. HTML Graphics
❖ Graphics are representations used to make web-page or applications visually
appealing and also for improving user experience and user interaction.
❖ Some examples of graphics are photographs, flowcharts, bar graphs, maps,
engineering drawings, constructional blueprints, logos etc.
❖Usually, the following technologies are used in web graphics with HTML5:
Canvas, SVG WebCGM, CSS, etc.
1. HTML Canvas Graphics
❖The HTML <canvas> element is used to draw graphics, via JavaScript.
❖The <canvas> element is only a container for graphics. You must use
JavaScript to actually draw the graphics.
❖Canvas has several methods for drawing paths, boxes, circles, text, and adding
images. It can be used for animation, game graphics, data visualization, photo
manipulation, and etc.
2. HTML SVG
❖SVG stands for Scalable Vector Graphics
❖SVG is used to define vector-based graphics, which can be directly embedded
in HTML pages. SVG defines graphics in XML format.
❖ SVG graphics do not lose any quality when zoomed or resized, and every
element and attribute in SVG files can be animated.
❖SVG integrates with other standards, such as CSS, DOM, XSL and JavaScript
