Scribd
Upload
14 views40 pages

HTML ppt (1)

HTML, or HyperText Markup Language, is the standard markup language used for creating web pages, defining their structure and content display. It includes various elements such as headings, paragraphs, lists, tables, and forms, along with attributes that provide additional information about these elements. Multimedia elements like audio and video can also be incorporated into HTML documents, enhancing the web experience.

Uploaded by

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

HTML ppt (1)

HTML, or HyperText Markup Language, is the standard markup language used for creating web pages, defining their structure and content display. It includes various elements such as headings, paragraphs, lists, tables, and forms, along with attributes that provide additional information about these elements. Multimedia elements like audio and video can also be incorporated into HTML documents, enhancing the web experience.

Uploaded by

Candy Man
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 40

HTML

▶ HTML stands for HyperText Markup Language.


What is HTML?

•HTML is the standard markup language for creating Web


pages
• HTML describes the structure of a Web page
•HTML elements tell the browser how to display the content
Web Browsers

▶ The purpose of a web browser (Chrome, Edge,


Firefox, Safari) is to read HTML documents and
display them correctly.
HTML Page Structure

▶ <html>
▶ <head>
▶ <title>Page title</title>
▶ </head>
▶ <body>
▶ <h1>This is a heading</h1>
▶ <p>This is a paragraph.</p>
▶ <p>This is another paragraph.</p>
▶ </body>
▶ </html>
HTML Versions List

▶ HTML 1.0: released in 1991


▶ HTML 2.0: released in 1995
▶ HTML 3.2: released in 1997
▶ HTML 4.01: released in 1999
▶ XHTML: released in 2000
▶ HTML5: released in 2014
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 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
HTML Editors
View the HTML Page in Your Browser
Open the saved HTML file in your favorite browser (double click on the file, or
right-click - and choose "Open with").
The result will look much like this:
A Simple HTML Document

▶ <!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>


<p>My first paragraph.</p>

</body>
</html>
What is an HTML Element?

▶ An 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>

Start tag Element content End tag


<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
HTML Attributes

▶ All HTML elements can have attributes


▶ Attributes provide additional information about elements
▶ Attributes are always specified in the start tag
▶ Attributes usually come in name/value pairs
like: name="value"
HTML Text Formatting

• <b> - Bold text


• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <mark> - Marked text
• <small> - Smaller text
• <del> - Deleted text
• <ins> - Inserted text
• <sub> - Subscript text
• <sup> - Superscript text
HTML Text Formatting

▶ 1) Bold Text
▶ HTML<b> and <strong> formatting elements
▶ If you write anything between <strong>???????. </strong>, is shown important
text.
▶ See this example:
▶ <p><strong>This is an important content</strong>, and this is normal conten
t</p
2) Italic Text
▶ See this example:
▶ <p> <i>Write Your First Paragraph in italic text.</i></p>
3) HTML Marked formatting
▶ If you want to mark or highlight a text, you should write the content within
<mark>.........</mark>.
See this example:
▶ <h2> I want to put a <mark> Mark</mark> on your face</h2>
4) Underlined Text
▶ If you write anything within <u>.........</u> element, is shown in underlined
text.
See this example:
▶ <p> <u>Write Your First Paragraph in underlined text.</u></p>
HTML Text Formatting

5) Strike Text
▶ Anything written within <strike>.......................</strike> element is
displayed with strikethrough. It is a thin line which cross the statement.
See this example:
▶ <p> <strike>Write Your First Paragraph with strikethrough</strike>.</p>

Deleted Text
▶ Anything that puts within <del>..........</del> is displayed as deleted text.
See this example:
▶ <p>Hello <del>Delete your first paragraph.</del></p>
HTML Text Formatting

▶ Inserted Text
Anything that puts within <ins>..........</ins> is displayed as inserted text.
See this example:
<p> <del>Delete your first paragraph.</del><ins>Write another paragraph.</ins
></p>
HTML Attributes

href Attribute

The <a> tag defines a hyperlink. The href (Hypertext REFerence)attribute


specifies the URL (Uniform Resource Locator)of the page the link goes to:

The src Attribute


The <img> tag is used to embed an image in an HTML page.
The src (source for that image)attribute specifies the path to the image to be
displayed:
The width and height Attributes
The <img> tag should also contain the width and height attributes,
which specifies the width and height of the image (in pixels):

The alt Attribute


• The required alt attribute for the <img> tag specifies an alternate text
for an image, if the image for some reason cannot be displayed. This
can be due to slow connection,or an error in the src attribute, or if
the user uses a screen reader.
TABLE
GENERAL TABLE STRUCTURE
STUDENT TABEL
HTML TABLE
HTML Table Tags
▶ HTML table tag is used to display data in tabular form (row * column). There
can be many columns in a row.
▶ We can create a table to display data in tabular form, using <table> element,
with the help of <tr> , <td>, and <th> elements.
▶ In Each table, table row is defined by <tr> tag, table header is defined by
<th>, and table data is defined by <td> tags.
HTML Table Colspan & Rowspan
HTML Table Colspan & Rowspan
HTML Lists
HTML Lists are used to specify lists of information. All lists may contain one or more list
elements. There are three different types of HTML lists:

Unordered HTML List


An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

Ordered HTML List


An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

Description Lists
HTML also supports description lists.
A description list is a list of terms, with a description of each term.
The <dl> tag defines the description list, the <dt> tag defines the term (name),
and the <dd> tag describes each term:
Unordered HTML List
Value Description
disc Sets the list item marker to a
bullet (default)
circle Sets the list item marker to a circle
square Sets the list item marker to a
square
none The list items will not be marked
Ordered HTML List

Type Description
type="1" The list items will be numbered
with numbers (default)
type="A" The list items will be numbered
with uppercase letters
type="a" The list items will be numbered
with lowercase letters
type="I" The list items will be numbered
with uppercase roman numbers
type="i" The list items will be numbered
with lowercase roman numbers
HTML Block and Inline Elements
▶ Every HTML element has a default display value, depending on what type of
element it is.
▶ There are two display values: block and inline.

Block-level Elements
A block-level element always starts on a new line, and the browsers automatically add some space
(a margin) before and after the element.
A block-level element always takes up the full width available (stretches out to the left and right as far as it can).
The <p> element defines a paragraph in an HTML document.

Inline Elements
An inline element does not start on a new line.
HTML Forms
▶ An HTML form is used to collect user input. The user input is most often sent to a server for processing.
▶

The <label> Element


1)The <label> element also help users who have difficulty clicking on very small regions
(such as radio buttons or checkboxes) - because when the user clicks the text within the <label>
element, it toggles the radio button/checkbox. 2)The for attribute of the <label> tag should be
equal to the id attribute of the <input> element to bind them together.

The <input> Element

The HTML <input> element is the most used form element.


An <input> element can be displayed in many ways, depending on the type
attribute.
The <input> Element

Type Description
<input type="text"> Displays a single-line text input
field
<input type="radio"> Displays a radio button (for
selecting one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting
zero or more of many choices)
<input type="submit"> Displays a submit button (for
submitting the form)
<input type="button"> Displays a clickable button
Radio Buttons

The <input type="radio"> defines a radio button.

Checkboxes
 The <input type="checkbox"> defines a checkbox.
 Checkboxes let a user select ZERO or MORE options of a limited number
of choices.

The Submit Button


The <input type="submit"> defines a button for submitting the form data to a
form-handler.
The Submit Button
The <input type="submit"> defines a button for submitting the form data to a form-handler.

<form>
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John"><br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
The Method Attribute
The method attribute specifies the HTTP (hypertext transfer protocol)method to be used when submitting the form data.
The form-data can be sent as URL variables (with method="get") or as HTTP post transaction (with method="post").

The default HTTP method when submitting form data is GET.


Notes on GET:
▶ Appends the form data to the URL, in name/value pairs
▶ NEVER use GET to send sensitive data! (the submitted form data is visible in
the URL!)
▶ The length of a URL is limited (2048 characters)
▶ Useful for form submissions where a user wants to bookmark the result
▶ GET is good for non-secure data, like query strings in Google
Notes on POST:
▶ Appends the form data inside the body of the HTTP request (the submitted
form data is not shown in the URL)
▶ POST has no size limitations, and can be used to send large amounts of data.
▶ Form submissions with POST cannot be bookmarked
HTML Input Types
• <input type="button">
• <input type="checkbox">
• <input type="color">
• <input type="date">
• <input type="email">
• <input type="image">
• <input type="month">
• <input type="number">
• <input type="password">
• <input type="radio">
• <input type="range">
• <input type="reset">
• <input type="search">
• <input type="submit">
• <input type="text">
• <input type="time">
• <input type="url">
• <input type="week">

Tip: The default value of the type attribute is "text".


HTML
▶
Media
Multimedia on the web is sound, music, videos, movies, and animations.
What is Multimedia?
▶ Multimedia comes in many different formats. It can be almost anything you
can hear or see, like images, music, sound, videos, records, films,
animations, and more.
▶ Web pages often contain multimedia elements of different types and formats.
Browser Support
▶ The first web browsers had support for text only, limited to a single font in a
single color.
▶ Later came browsers with support for colors, fonts, images, and multimedia!
Multimedia Formats
▶ Multimedia elements (like audio or video) are stored in media files.
▶ The most common way to discover the type of a file, is to look at the file
extension.
▶ Multimedia files have formats and different extensions like: .wav, .mp3,
.mp4, .mpg, .wmv, and .avi.
Common Video Formats
There are many video formats out there.

The MP4, WebM, and Ogg formats are supported by HTML.

The MP4 format is recommended by YouTube.


HTML Video
The HTML <video> element is used to show a video on a web page.

HTML Audio
To play an audio file in HTML, use the <audio> element
Playing a YouTube Video in
HTML
▶ To play your video on a web page, do the following:

• Upload the video to YouTube


• Take a note of the video id
• Define an <iframe> element in your web page
• Let the src attribute point to the video URL
• Use the width and height attributes to specify the dimension of the player
• Add any other parameters to the URL (see below)

You might also like