WEB TECHNOLOGIES
BSCDSC17
Introduction to HTML and HTML5 Basics
• What is HTML?
• HTML (HyperText Markup Language) is the standard language used to
create and design documents on the web. It provides the structure of
a webpage, allowing you to insert text, images, links, and other
content. HTML5 is the latest version, offering new features and
improved functionality.
HTML Document Structure
A basic HTML document has a standard structure, defined by a set of tags:
1. <!DOCTYPE html>: Declares the document type and version (HTML5). 2.
<html>: The root element of an HTML document.
3. <head>: Contains meta-information about the document, such as the title and links to
stylesheets.
4. <title>: Specifies the title of the document, displayed in the browser's title bar or tab. 5.
<body>: Contains the content of the document, such as text, images, and other elements.
Basic html document structure
HTML5 Basic Tags
HTML5 introduces new elements and attributes that provide better structure
and functionality.
Here are some basic tags:
• <h1> to <h6>: Heading tags, with <h1> being the highest level and <h6> the lowest. •
<p>: Paragraph tag.
• <br>: Line break.
• <hr>: Horizontal rule, used to separate content.
Output
Formatting Tags
Formatting tags are used to style and emphasize text.
Here are some common formatting tags:
• <b>: Bold text.
• <i>: Italic text.
• <u>: Underlined text.
• <strong>: Strong importance (usually displayed in bold). •
<em>: Emphasized text (usually displayed in italic). •
<mark>: Highlighted text.
• <small>: Smaller text.
• <del>: Deleted text (usually displayed with a strikethrough). •
<ins>: Inserted text (usually displayed with an underline).
HTML5 Semantic Elements
HTML5 introduces semantic elements that provide
meaning to the structure of the document.
These elements help improve readability and accessibility:
• <header>: Defines a header for a document or section.
• <nav>: Defines a navigation block.
• <section>: Defines a section in a document.
• <article>: Defines an independent, self-contained content.
• <aside>: Defines content aside from the main content.
• <footer>: Defines a footer for a document or section.
• <main>: Defines the main content of a document.
• <figure>: Represents self-contained content, like images, diagrams, or code snippets. •
<figcaption>: Provides a caption for the <figure> element.
HTML Lists, Tables, Forms, and Multimedia
Lists in HTML
There are three types of lists in HTML:
1. Unordered List (<ul>): Displays items in a bullet list. 2. Ordered
List (<ol>): Displays items in a numbered list. 3. Definition List
(<dl>): Displays a list of terms and their definitions.
Lists in html
Unordered List
• <ul>: Defines an unordered
list. • <li>: Defines a list item.
Ordered List
• <ol>: Defines an ordered list.
• <li>: Defines a list item.
Lists in html
Definition List
• <dl>: Defines a definition list.
• <dt>: Defines a term.
• <dd>: Defines a description of
the term.
An unordered list is used to group a set of related items in no particular order. It is displayed with bullet points.
An ordered list is used to group a set of related items in a specific order. It is displayed with numbers or letters. A definition list is
used to group terms and their definitions.
Tables in HTML
Tables are used to display data in rows and columns.
Each table is made up of table rows (<tr>), and each row is made up of table data cells (<td>)
and /or table header cells (<th>).
Tables are created using a
combination of several tags:
• <table>: Defines the table.
• <tr>: Defines a row in the
table.
• <th>: Defines a header cell in
the
table.
• <td>: Defines a standard cell in the
table.
Forms in HTML
Forms allow users to
enter and submit data to a server.
Forms consist of various form
elements:
• <form>: Defines the form.
• <input>: Defines an input field.
• <textarea>: Defines a multi-line text input.
• <button>: Defines a clickable button. •
<select>: Defines a drop-down list.
• <option>: Defines an option in a drop-down list. •
<label>: Defines a label for an input element.
Multimedia Basics in HTML
HTML provides various tags to include multimedia elements such as
images, iframes, maps, audio, and video in web pages.
Images
The <img> tag is used to embed images in an HTML page.
Attributes:
• src: Specifies the path to the image.
• alt: Provides alternative text for the image, which is displayed if the image cannot be
loaded.
• width: Sets the width of the image.
• height: Sets the height of the image.
output
Iframe
The <iframe> tag is used to embed another
HTML page within the current page.
Attributes:
• src: Specifies the URL of the page to embed. •
width: Sets the width of the iframe. • height:
Sets the height of the iframe. • frameborder:
Specifies whether or not to display a border
around the iframe.
<h3>Iframe Example</h3>
<iframe src="l.html" width="600"
height="400" frameborder="0"></iframe>
Using the <iframe> Tag
The <frame> tag was used in HTML to define a particular area within a frameset.
However, the <frame> and <frameset> tags are obsolete in HTML5, meaning
they should not be used in modern web development. Instead, the <iframe> tag
is recommended for embedding content from another source within a web page.
Using the <iframe> Tag
The <iframe> (inline frame) tag allows you to
embed another HTML document within the current HTML document.
Attributes:
• src: Specifies the URL of the page to embed.
• width: Sets the width of the iframe.
• height: Sets the height of the iframe.
• frameborder: Specifies whether or not to display a border around the iframe. •
allowfullscreen: Allows the iframe content to be displayed in fullscreen mode. •
name: Assigns a name to the iframe.
• sandbox: Applies extra restrictions on the content within the iframe
Map Tag
The <map> tag is used to define an image map.
An image map is an image with clickable areas.
The <area> tag defines the clickable areas in the image map.
Attributes for <area>:
• shape: Specifies the shape of the clickable area (rect, circle, poly). •
coords: Specifies the coordinates for the clickable area. • href:
Specifies the URL of the linked document.
Embedding audio and video on webpages
To embed audio and video clips on a webpage,
HTML provides the <audio> and <video> elements respectively.
These elements allow you to integrate multimedia content directly
into your HTML document,
providing a seamless user experience for playing audio files and videos
without relying on external plugins or players.
Embedding Audio
To embed audio, use the <audio> tag:
Embedding Video
To embed video, use the <video> tag
Embedding Audio
The <audio> tag is used to embed sound content in documents. It supports various audio
formats like MP3, WAV, and OGG. Attributes:
• src: Specifies the path to the audio file.
• controls: Adds audio controls such as play, pause, and volume.
Embedding Video
The <video> tag is used to embed video content in documents. It supports various video formats
like MP4, WebM, and OGG.
Attributes:
• src: Specifies the path to the video file.
• controls: Adds video controls such as play, pause, and volume. • width: Sets the width of the
video player.
• height: Sets the height of the video player.
