HTML

HTML
Hyper Text Markup Language

HTML (HyperText Markup Language) is the most basic building
block of the Web. It defines the meaning and structure of web
content.
Other technologies besides HTML are generally used to describe
a web page's appearance/presentation (CSS) or functionality/
behavior (JavaScript).
"Hypertext" refers to links that connect web pages to one
another, either within a single website or between websites.
HTML used to create web pages.
HTML stands for HyperText Markup Language.
HTML is not a programming language, it is a markup language.
A markup language is a set of markup tags.
Markup tags used to create web pages.
Latest version HTML5.
HTML consists of a series of elements.
HTML elements tell the browser how to display the content.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
HTML
</head>
<body>
DOCUMENT <h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
HTML ELEMENTS
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>
EMPTY HTML ELEMENTS
HTML elements with no content are called empty elements

The <br> tag defines a line break, and is an empty element
without a closing tag:
EXAMPLE:
<p>This is a <br> paragraph with a line break.</p>
<hr> for horizontal line
HTML TAGS
HTML tags are like keywords which defines that how web
browser will format and display the content.
All HTML tags must enclosed within < > these brackets.
Every tag in HTML perform different tasks.
If you have used an open tag <tag>, then you must use a
close tag </tag>.
HTML TAGS EXAMPLE
Meta Tags
DOCTYPE, title, link, meta and style
Text Tags
<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <var>,<br>
Link Tags
<a> and <base>
Image and Object Tags
<img>, <object>
HTML TAGS EXAMPLE
List Tags
<ul>, <ol>, <li>, <dl>, <dt> and <dd>
Table Tags
<table>, <tr>, <td>, <th>,<caption>
Form Tags
<form>, <input>, <textarea>, <select>, <button>, <label>
Special Tag
<div>,<span>
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"
Examples:
href Attribute:- The <a> tag defines a hyperlink. The href
attribute specifies the URL of the page the link goes to:
<a href="https://www.w3schools.com">Visit W3Schools</a>
HTML ATTRIBUTES
src Attribute:- The <img> tag is used to embed an image in an
HTML page. The src attribute specifies the path to the image
to be displayed.
<img src="img_girl.jpg">
width and height Attributes:- The <img> tag should also
contain the width and height attributes , which specify the
width and height of the image (in pixels):
<img src="img_girl.jpg" width="500" height="600">
HTML ATTRIBUTES
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.
<img src="img_girl.jpg" alt="Girl">
style Attribute:- The style attribute is used to add styles to an
element, such as color, font, size, and more.
<p style="color:red;">This is a red paragraph.</p>
title Attribute:- The title attribute defines some extra
information about an element.
<p title="I'm a tooltip">This is a paragraph.</p>
HTML TEXT FORMATTING
The HTML <b> element defines bold text.
The HTML <i> element defines italic text.
The HTML <strong> element is used to define text with
strong importance. The content inside is typically displayed in
bold.
The HTML <small> element defines smaller text.
The HTML <sup> element defines superscript text.
Superscript text appears half a character above the normal
line, and is sometimes rendered in a smaller font.
HTML TEXT FORMATTING
The HTML <sub> element defines subscript text. Subscript

text appears half a character below the normal line, and is
sometimes rendered in a smaller font.
The HTML <ins> element defines a text that has been inserted
into a document. Browsers will usually underline inserted text.
The HTML <del> element defines text that has been deleted
from a document. Browsers will usually strike a line through
the deleted text.
TASK 1
HTML IMAGE
The HTML <img> tag is used to embed an
image in a web page.
The <img> tag has two required attributes:
src & alt.
<img src="url" alt="alternatetext">
HTML LINK
HTML links are hyperlinks. You can click
on a link and jump to another document.
<a href="url">link text</a>
TASK 2&3
1. Inline
by using the style attribute inside HTML CSS
HTML elements. CSS stands for Cascading Style
2. Internal
Sheets.
It can control the layout of multiple
web pages all at once.
by using a <style> element in the CSS can be added to HTML
documents in 3 ways:
<head> section
3. External
by using a <link> element
to link to an external CSS.
CSS SELECTORS
1. id
The id attribute specifies a unique id for an HTML element.
The value of the id attribute must be unique within the HTML
document.
The id attribute is used to point to a specific style declaration in
a style sheet.
The syntax for id is: write a hash character (#), followed by an
id name. Then, define the CSS properties within curly braces
{}.
CSS SELECTORS
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
}
#paragraph{Color:black;}
</style></head>
<body>
<h1 id="myHeader">My Header</h1>
<p id=“paragraph”>hello</p>
</body>
</html>
CSS SELECTORS
2. class
The HTML class attribute is used to specify a class for an HTML
element. The syntax for class is: .classname{}
<html> <head>
<style>
.myHeader { background-color: lightblue; color: black; }
</style></head>
<body>
<h1 class="myHeader">My Header</h1>
<p class="myHeader">hello</p>
</body>
</html>
SPAN
The <span> tag is an inline container used to
mark up a part of a text, or a part of a
document.
DIV
The <div> (division) element is a generic
block-level element that is typically used to
separate page content into blocks.
HTML LIST
1 2 3
Description List
Ordered List Unordered List or
Definition List
Unordered HTML List
An unordered list starts with the <ul> tag. Each list item
starts with the <li> tag.
The list items will be marked with bullets (small black
circles) by default:
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
Ordered List
In the ordered HTML lists, all the list items are marked
with numbers by default.
It is known as numbered list also. The ordered list starts
with <ol> tag and the list items start with <li> tag.
<ol>
<li>Aries</li>
<li>Bingo</li>
<li>Leo</li>
</ol>
HTML Description List or Definition List
It is also known as a definition list where entries are listed like a dictionary or
encyclopedia.
The HTML definition list contains the following three tags:
<dl> tag defines the start of the list.
<dt> tag defines a term.
<dd> tag defines the term definition (description).
<dl>
<dt>Aries</dt>
<dd>-One of the 12 horoscope sign.</dd>
<dt>Bingo</dt>
<dd>-One of my evening snacks</dd>
</dl>
TASK 4
TASK 5
HTML TABLE
HTML tables allow web developers to arrange data into rows
and columns.
Each table cell is defined by a <td> and a </td> tag.
Each table row starts with a <tr> and end with a </tr> tag.
If you want your cells to be headers, use the <th> tag instead
of the <td> tag.
To add a border, use the CSS border property on table, th, and
td elements.
To set the width of a table, add the style attribute to the
<table> element.
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Place</th>
</tr>
<tr>
HTML TABLE
<td>Alfreds Futterkiste</td>
<td>95478124</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>784556214</td>
<td>Mexico</td>
</tr>
</table>
colspan
To make a cell span over multiple columns, use the colspan

attribute:
The value of the colspan attribute represents the number of
columns to span.
<table>
<tr>
<th colspan="2">Name</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>43</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>57</td>
</tr>
</table>
rowspan
To make a cell span over multiple rows, use the rowspan

attribute:
The value of the rowspan attribute represents the number of
rows to span.
<table>
<tr>
<th>Name</th>
<td>Jill</td>
</tr>
<tr>
<th rowspan="2">Phone</th>
<td>555-1234</td>
</tr>
<tr>
<td>555-8745</td>
</tr>
</table>
TASK 6
TASK 7
TASK 8
HTML FORM
The <form> element is a container for different types of input elements, such as: text fields,
checkboxes, radio buttons, submit buttons, etc.
The <fieldset> tag is used to group related elements in a form. The <fieldset> tag draws a box
around the related elements. The <legend> tag is used to define a caption for the <fieldset>
element.
The <input> tag specifies an input field where the user can enter data. The <input> element is
the most important form element.
The <textarea> tag defines a multi-line text input control. A text area can hold an unlimited
number of characters. The size of a text area is specified by the <cols> and <rows> attributes.
The <input type="tel"> defines a field for entering a telephone number.
The <input type="date"> defines a date picker.
The <input type="email"> defines a field for an e-mail address.
The <input type="password"> defines a password field (characters are masked).
The <select> element is used to create a drop-down list. The content between the opening
<option> and closing </option> tags is what the browsers will display in a drop-down list.
<form action="/action_page.php">
<label for="fname">First name:</label>
<br>
<input type="text" id="fname"
name="fname" value="John"><br>
HTML FORM <label for="lname">Last name:</label>
<br>
<input type="text" id="lname"
name="lname" value="Doe"><br><br>
<input type="submit" value="Submit">
</form>
TASK 9
TASK 10
HTML MEDIA
To show a video in HTML, use the <video> element:

<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>
</body>
</html>
HTML MEDIA
To play an audio file in HTML, use the <audio> element:

<!DOCTYPE html>
<html>
<body>
<audio controls>
<source src=“song.mp3" type="audio/mpeg">
</audio>
</body>
</html>
Iframe
Syntax:
<iframe src="url" title="description"></iframe>
Example:
<iframe src="demo_iframe.htm" height="200"
width="300"title="Iframe Example"></iframe>
THANK YOU

HTML

Uploaded by

Copyright:

Available Formats

HTML

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML

Uploaded by

Copyright:

Available Formats

HTML

Hyper Text Markup Language

DOCUMENT <h1>My First Heading</h1>

SYNTAX: <tagname> Content goes here... </tagname>

<h1>My First Heading</h1>

HTML elements with no content are called empty elements

The HTML <sub> element defines subscript text. Subscript

To make a cell span over multiple columns, use the colspan

To make a cell span over multiple rows, use the rowspan

To show a video in HTML, use the <video> element:

To play an audio file in HTML, use the <audio> element:

You might also like

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.