Scribd
Upload
22 views

01 HTML (1)

HTML, or Hyper Text Markup Language, is the standard markup language for creating web pages, consisting of elements represented by tags that structure the content for browsers. Key components include headings, paragraphs, links, images, and lists, each defined by specific tags, with attributes providing additional information. HTML documents are structured with a root element, a head for metadata, and a body for visible content, and can be created using various HTML editors.

Uploaded by

stfushit3
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
22 views

01 HTML (1)

HTML, or Hyper Text Markup Language, is the standard markup language for creating web pages, consisting of elements represented by tags that structure the content for browsers. Key components include headings, paragraphs, links, images, and lists, each defined by specific tags, with attributes providing additional information. HTML documents are structured with a root element, a head for metadata, and a body for visible content, and can be created using various HTML editors.

Uploaded by

stfushit3
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/ 96

HYPERTEXT MARKUP LANGUAGES

What is HTML?
➢ HTML is the standard markup language for creating Web pages.
➢ HTML stands for Hyper Text Markup Language
➢ HTML describes the structure of a Web page
➢ HTML consists of a series of elements
➢ HTML elements tell the browser how to display the content
➢ HTML elements are represented by tags
➢ HTML tags label pieces of content such as "heading", "paragraph", "table",
and so on
➢ Browsers do not display the HTML tags, but use them to render the content
of the page
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>
Example Explained
✓ The <!DOCTYPE html> declaration defines this <!DOCTYPE html>
document to be HTML5 <html>
<head>
✓ The <html> element is the root element of an HTML
<title>Page Title</title>
page
</head>
✓ The <head> element contains meta information <body>
about the document
✓ The <title> element specifies a title for the <h1>My First Heading</h1>
document <p>My first paragraph.</p>

✓ The <body> element contains the visible page </body>


content </html>
✓ The <h1> element defines a large heading
✓ The <p> element defines a paragraph
Web Browsers
 The purpose of a web
browser (Chrome, Edge,
Firefox, Safari) is to read
HTML documents and
display them. <!DOCTYPE html>
 The browser does not
<html>
<head>
display the HTML tags, <title>Page Title</title>
</head>
but uses them to <body>
determine how to <h1>My First Heading</h1>
display the document: <p>My first paragraph.</p>

</body>
</html>
HTML Editors
Web pages can be created and modified by
using professional HTML editors.
Example:
✓Notepad++
✓Sublime Text
✓VS Code
✓Bracket
HTML Tags
HTML Tags

HTML tags are element names surrounded by angle brackets.


Example:
<tagname> content goes here...</tagname>
HTML tags normally come in pairs like <p> and </p>
The first tag in a pair is the start tag, the second tag is the end tag
The end tag is written like the start tag, but with a forward
slash inserted before the tag name

Tip: The start tag is also called the opening tag, and the end
tag the closing tag.
HTML Headings
➢ HTML headings are defined with the <h1> to <h6> tags.
➢ <h1> defines the most important heading. <h6> defines
the least important heading.

Example:
 <h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
HTML Paragraphs
➢ HTML paragraphs are defined with the <p> tag

Example:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
➢ HTML links are defined with the <a> tag
➢ The link's destination is specified in the href attribute.

Example:
<a href="https://www.sample.com"> This is a link </a>
HTML Images

➢ HTML images are defined with the <img> tag.


➢ The
source file (src), alternative text (alt), width,
and height are provided as attributes.

Example:
<img src=“Images/sample.jpg" width="104" height="142">
HTML Buttons
➢ HTML buttons are defined with the <button> tag

Example
<button> Click me </button>
HTML Lists
 HTML lists are defined with the <ul> (unordered/bullet list) or
the <ol> (ordered/numbered list) tag, followed by <li> tags (list
items):
 Example:
 <ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>

<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
HTML
Elements
HTML Elements
 An HTML element usually consists of a start tag and an end tag,
with the content inserted in between:
Example:
<tagname>Content goes here...</tagname>
The HTML element is everything from the start tag to the end tag:
<p>My first paragraph.</p>

 HTML elements with no Start tag Element content End tag


content are called empty <h1> My First Heading </h1>
elements. Empty elements do
<p> My first </p>
not have an end tag, such as paragraph.
the <br> element (which
<br>
indicates a line break).
Nested HTML Elements
➢ HTML elements can be nested (elements can contain elements).
➢ All HTML documents consist of nested HTML elements.

This example contains four HTML elements:


<!DOCTYPE html>
<html>
<body>

<h1>My First Heading.</h1>


<p>My first paragraph.</p>

</body>
</html>
Empty HTML Elements
HTML elements with no content are called empty elements.
<br> is an empty element without a closing tag (the <br> tag defines
a line break):

Example
<p>This is a <br> paragraph with a line break.</p>

 Empty elements can be "closed" in the opening tag like this: <br/>.
 HTML does not require empty elements to be closed. But if you want
stricter validation, or if you need to make your document readable
by XML parsers, you must close all HTML elements properly.
HTML Is Not Case Sensitive
HTML tags are not case sensitive: <P> means
the same as <p>.

The HTML standard does not require


lowercase tags, but many
sources recommends lowercase in HTML,
and demands lowercase for stricter
document types like XHTML.
HTML
Attributes
HTML Attributes
Attributes provide additional information about HTML
elements.
➢ All HTML elements can have attributes
➢ Attributes provide additional information about an element
➢ Attributes are always specified in the start tag
➢ Attributes usually come in name/value pairs
like: name="value"
The href Attribute

HTML links are defined with the <a> tag.


The link address is specified in
the href attribute:

Example
<a href="https://www.w3schools.com">This is a link</a>
The src Attribute
HTML images are defined with the <img> tag.

The filename of the image source is specified in


the src attribute:

Example:
<img src="img_girl.jpg">
The width and height Attributes

HTML images also have width and height attributes, which


specifies the width and height of the image:

Example:
<img src="img_girl.jpg" width="500" height="600">

The width and height are specified in pixels by default;


so width="500" means 500 pixels wide.
The alt Attribute
The alt attribute specifies an alternative text to be used, if an image cannot be
displayed.

The value of the alt attribute can be read by screen readers. This way, someone
"listening" to the webpage, e.g. a vision impaired person, can "hear" the
element.

Example
<img src="img_girl.jpg" alt="Girl with a jacket">
The alt attribute is also useful if the image cannot be displayed
(e.g. if it does not exist):

Example
See what happens if we try to display an image that does not exist:
<img src="img_typo.jpg" alt="Girl with a jacket">
The style Attribute
The style attribute is used to specify the styling of an
element, like color, font, size etc.

Example
<p style="color:red">This is a paragraph.</p>
The title Attribute
Here, a title attribute is added to the <p> element. The value of the
title attribute will be displayed as a tooltip when you mouse over
the paragraph:

Example
<p title="I'm a tooltip">
This is a paragraph.
</p>
Suggestion: Quote Attribute Values
The HTML standard does not require quotes around attribute values.

The href attribute, demonstrated above, can be written without


quotes:

Bad
<a href=https://www.w3schools.com>

Good
<a href="https://www.w3schools.com">
HTML
Headings
HTML Headings
Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least
important heading.
Heading 1
Example
<h1>Heading 1</h1> Heading 2
<h2>Heading 2</h2> Heading 3
<h3>Heading 3</h3>
Heading 4
<h4>Heading 4</h4>
<h5>Heading 5</h5> Heading 5
<h6>Heading 6</h6> Heading 6

Note: Browsers automatically add some white space (a margin)


before and after a heading.
Headings are Important
Search engines use the headings to index the structure and
content of your web pages.

Users often skim a page by its headings. It is important to use


headings to show the document structure.

<h1>headings should be used for main headings, followed


by <h2> headings, then the less important <h3>, and so on.

Note: Use HTML headings for headings only. Don't use headings
to make text BIG or bold.
HTML Horizontal Rules
The <hr> tag defines a thematic break in an HTML page, and is
most often displayed as a horizontal rule.

The <hr> element is used to separate content (or define a change)


in an HTML page:

Example
<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
The HTML <head> Element
The HTML <head> element is a Example
container for metadata. HTML <!DOCTYPE html>
metadata is data about the HTML <html>
document. Metadata is not
displayed. <head>
<title>My First HTML</title>
<meta charset="UTF-8">
The <head> element is placed </head>
between the <html> tag and
<body>
the <body> tag: .
.
Note: Metadata typically define the .
document title, character set, styles,
scripts, and other meta information.
How to View HTML Source?
Have you ever seen a Web page and wondered
"Hey! How did they do that?"

View HTML Source Code:


Right-click in an HTML page and select "View
Page Source" (in Chrome) or "View Source" (in
Edge), or similar in other browsers. This will open
a window containing the HTML source code of the
page.
HTML Tag Reference
Tag Description
<html> Defines the root of an HTML document
<body> Defines the document's body
A container for all the head elements (title, scripts,
<head>
styles, meta information, and more)
<h1> to <h6> Defines HTML headings
<hr> Defines a thematic change in the content
HTML
Paragraphs
HTML Paragraphs
The HTML <p> element defines a paragraph:

Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

Note: Browsers automatically add some white space


(a margin) before and after a paragraph.
HTML Line Breaks
The HTML <br> element defines a line break.

Use <br> if you want a line break (a new line) without starting a
new paragraph:

Example
<p>This is<br>a paragraph<br>with line breaks.</p>

The <br> tag is an empty tag, which means that it has no end tag.
The HTML <pre> Element
The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually


Courier), and it preserves both spaces and line breaks:

Example
<pre>
My Bonnie lies over the ocean.

My Bonnie lies over the sea.

My Bonnie lies over the ocean.

Oh, bring back my Bonnie to me.


</pre>
HTML Tag Reference

Tag Description
<p> Defines a paragraph
<br> Inserts a single line break
<pre> Defines pre-formatted text
HTML Styles
HTML Styles

I am Green
I am Blue

I am Big
I am the Bigger Blue
The HTML Style Attribute

Setting the style of an HTML element, can be done with


the style attribute.

The HTML style attribute has the following syntax:

<tagname style="property:value;">

The property is a CSS property. The value is a CSS


value.
Background Color
The CSS background-color property defines the background color for
an HTML element.

This example sets the background color for a page to powderblue:

Example
<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
Text Color

The CSS color property defines the text color for


an HTML element:

Example
<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
Fonts

The CSS font-family property defines the font to be used for


an HTML element:

Example
<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
Text Size

The CSS font-size property defines the text size for an


HTML element:

Example
<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
Text Alignment
The CSS text-align property defines the horizontal text
alignment for an HTML element:

Example
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
Discussion Summary

•Use the style attribute for styling HTML elements


•Use background-color for background color
•Use color for text colors
•Use font-family for text fonts
•Use font-size for text sizes
•Use text-align for text alignment
HTML Text
Formatting
Text Formatting

This text is bold


This text is italic
This is subscript and superscript
HTML Formatting Elements

In the previous chapter, you learned about


the HTML style attribute.

HTML also defines special elements for


defining text with a special meaning.

HTML uses elements like <b> and <i> for


formatting output, like bold or italic text.
Formatting elements were designed
to display special types of text:
✓<b> - Bold text
✓<strong> - Important text
✓<i> - Italic text
✓<em> - Emphasized text
✓<mark> - Marked text
✓<small> - Small text
✓<del> - Deleted text
✓<ins> - Inserted text
✓<sub> - Subscript text
✓<sup> - Superscript text
HTML <b> and <strong> Elements
The HTML <b> element defines bold text, without any
extra importance.

Example
<b>This text is bold</b>

The HTML <strong> element defines strong text, with


added semantic "strong" importance.
Example
<strong>This text is strong</strong>
HTML <i> and <em> Elements
The HTML <i> element defines italic text, without any extra
importance.

Example
<i>This text is italic</i>

The HTML <em> element defines emphasized text, with added


semantic importance.

Example
<em>This text is emphasized</em>
Note:

Browsers display <strong> as <b>,


and <em> as <i>. However, there is a
difference in the meaning of these
tags: <b> and <i> defines bold and italic
text, but <strong> and <em> means that
the text is "important".
HTML <small> Element

The HTML <small> element defines smaller text:

Example
<h2>HTML <small>Small</small> Formatting</h2>
HTML <mark> Element

The HTML <mark> element defines


marked/highlighted text:

Example
<h2>HTML <mark>Marked</mark> Formatting</h2
HTML <del> Element

The HTML <del> element defines


deleted/removed text.

Example
<p>My favorite color is <del>blue</del> red.</p>
HTML <ins> Element

The HTML <ins> element defines


inserted/added text.

Example
<p>My favorite <ins>color</ins> is red.</p>
HTML <sub> Element

The HTML <sub> element defines


subscripted text.

Example
<p>This is <sub>subscripted</sub> text.</p>
HTML <sup> Element

The HTML <sup> element defines


superscripted text.

Example
<p>This is <sup>superscripted</sup> text.</p>
HTML Text Formatting Elements
Tag Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
HTML
Comments
HTML Comment Tags
Comment tags are used to insert comments in the HTML source
code.

You can add comments to your HTML source by using the


following syntax:
<!-- Write your comments here -->

Notice that there is an exclamation point (!) in the opening tag,


but not in the closing tag.
Note: Comments are not displayed by the browser, but they can
help document your HTML source code.
Examples:
Example1
<!-- This is a comment -->

<p>This is a paragraph.</p>

<!-- Remember to add more information here -->


Comments are also great for debugging HTML, because you can comment out
HTML lines of code, one at a time, to search for errors:

Example2
<!–-
Do not display this image at the moment
<img border="0" src="pic_trulli.jpg" alt="Trulli">
-->
HTML Colors
HTML colors are specified using predefined color names, or RGB, HEX,
HSL, RGBA, HSLA values.
Color Names
In HTML, a color can be specified by
using a color name:

HTML supports 140 standard color names.


Background Color
You can set the background color for HTML elements:

Example
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
Text Color
Example
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>

Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
Border Color
Example
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
Color
Values
In HTML, colors can also be specified using
RGB, HEX, HSL, RGBA, and HSLA values:
RGB Value
In HTML, a color can be specified as an RGB value, using this formula:

rgb(red, green, blue)


Each parameter (red, green, and blue) defines the intensity of the color
between 0 and 255.

For example, rgb(255, 0, 0) is displayed as red, because red is set to its


highest value (255) and the others are set to 0.

To display black, set all color parameters to 0, like this: rgb(0, 0, 0).

To display white, set all color parameters to 255, like this: rgb(255, 255,
255).
Experiment by mixing the RGB
values below:

rgb(255, 99, 71)


RED: 255

GREEN: 99

BLUE: 71 Rgb + (255 + 99+ 71)


Example:
Example Shades of Gray
Shades of gray are often defined using equal values for all the
3 light sources:
HEX Value
In HTML, a color can be specified using a hexadecimal
value in the form:

#rrggbb
Where rr (red), gg (green) and bb (blue) are hexadecimal
values between 00 and ff (same as decimal 0-255).

For example, #ff0000 is displayed as red, because red is


set to its highest value (ff) and the others are set to the
lowest value (00).
Experiment by mixing the HEX
values below:

#ff6347
RED ff
GREEN 63
BLUE 47 # + ff + 63 + 47
Examples:
Example Shades of Gray
Shades of gray are often defined using equal values for all the 3
light sources:
HSL Value
In HTML, a color can be specified using hue, saturation, and
lightness (HSL) in the form:

hsl(hue, saturation, lightness)


Hue is a degree on the color wheel from 0 to 360. 0 is red, 120
is green, and 240 is blue.

Saturation is a percentage value, 0% means a shade of gray,


and 100% is the full color.

Lightness is also a percentage, 0% is black, 50% is neither


light or dark, 100% is white.
Examples:
HTML TABLE
AND FORMS
Sample Table
Company Contact Country

Alfreds Futterkiste Maria Anders Germany

Centro comercial
Francisco Chang Mexico
Moctezuma

Ernst Handel Roland Mendel Austria

Island Trading Helen Bennett UK

Laughing Bacchus
Yoshi Tannamuri Canada
Winecellars

Magazzini Alimentari
Giovanni Rovelli Italy
Riuniti
Defining an HTML Table

An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A


table header is defined with the <th> tag. By
default, table headings are bold and
centered. A table data/cell is defined with
the <td> tag.
Example
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td> Note: The <td> elements are the data containers
<td>94</td> of the table.
</tr> They can contain all sorts of HTML elements;
</table>
text, images, lists, other tables, etc.
Tag Description
<table> Defines a table
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<caption> Defines a table caption
<colgroup> Specifies a group of one or more columns in a table for
formatting
<col> Specifies column properties for each column within a
<colgroup> element
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
HTML FORMS
The <form> Element
The HTML <form> element defines a form that is used to collect user input:
<form>
.
form elements
.
</form>

An HTML form contains form elements.

Form elements are different types of input elements, like text fields,
checkboxes, radio buttons, submit buttons, and more.
The <input> Element

The <input> element is the most important form element.

The <input> element can be displayed in several ways, depending on


the type attribute. Here are some examples:

Type Description
<input type="text"> Defines a one-line text input field
<input type="radio"> Defines a radio button (for selecting one of many choices)
<input type="submit"> Defines a submit button (for submitting the form)
Text Input

<input type="text"> defines a one-line input field for text input:

Example
<form>
<br>First name:<br>
<input type="text" name="firstname">
<br>Last name:<br>
<input type="text" name="lastname">
</form>
Radio Button Input

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

Radio buttons let a user select ONE of a limited number of choices:

Example
<form>
<input type="radio" name="gender" value="male" checked> Male<br>
<input type="radio" name="gender" value="female"> Female<br>
<input type="radio" name="gender" value="other"> Other
</form>
Checkbox Button Input
<input type=“checkbox"> defines a checkbox button.

Checkbox buttons let a user select ONE of a limited number of choices:

Example
<form>
<input type=“checkbox" name="gender" value="male" checked> Male<br>
<input type="checkbox" name="gender" value="female"> Female<br>
<input type="checkbox" name="gender" value="other"> Other
</form>
The Submit Button
<input type="submit"> defines a button for submitting the form data
to a form-handler. The form-handler is typically a server page with a
script for processing input data. The form-handler is specified in the
form's action attribute:

Example
<form action="/action_page.php">
<br> First name:<br>
<input type="text" name="firstname" value="Mickey"><br>
Last name:<br>
<input type="text" name="lastname" value="Mouse"><br><br>
<input type="submit" value="Submit">
</form>
The <select> Element
The <select> element defines a drop-down list:

Example
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>

The <option> elements defines an option that can be selected.


By default, the first item in the drop-down list is selected.
www.tutorialspoint.com
www.w3schools.com

RESOURCES/REFERENCES

You might also like

pFad - Phonifier reborn

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

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy