Scribd
Upload
3 views

Chapter 2 - HTML

This document provides an overview of HyperText Markup Language (HTML), detailing its structure, elements, and various tags used to create web pages. It covers topics such as HTML tags, attributes, text formatting, tables, images, links, and forms, emphasizing the importance of HTML in web development. Additionally, it discusses the evolution of HTML and its integration with other technologies like CSS and JavaScript.

Uploaded by

yibeltalmesfin278
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Chapter 2 - HTML

This document provides an overview of HyperText Markup Language (HTML), detailing its structure, elements, and various tags used to create web pages. It covers topics such as HTML tags, attributes, text formatting, tables, images, links, and forms, emphasizing the importance of HTML in web development. Additionally, it discusses the evolution of HTML and its integration with other technologies like CSS and JavaScript.

Uploaded by

yibeltalmesfin278
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 47

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

You might also like