Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
32 views

HTML Basics

Uploaded by

rk9451176004
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
32 views

HTML Basics

Uploaded by

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

HTML

FUNDAMENTALS OF HTML
HTML stands for Hypertext Markup Language, and it is the most
widely used language to write Web Pages.
Hypertext refers to the way in which Web pages (HTML
documents) are linked together.

HTML is the standard markup language for Web pages.


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

HTML elements are represented by tags


Browsers do not display the HTML tags, but use them to render
the content of the page
HTML Document Structure Basic HTML Document Example

Document declaration tag <!DOCTYPE html>


<html> <html>
<head> <head>
Document header related tags <title>This is document
</head> title</title>
</head>
<body> <body>
Document body related tags <h1>This is a heading</h1>
</body> <p>Document content goes here.
</html> </body>
</html>
Example Explained
• The <!DOCTYPE html> declaration defines this document to be
HTML5.
The <!DOCTYPE> declaration tag is used by the web browser to
understand the type and version of the HTML used in the
document. Current version of HTML is 5 and it makes use of the
following declaration:
<!DOCTYPE html>
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the document
• The <title> element specifies a title for the document
• The <body> element contains the visible page content
• The <h1> element defines a large heading
• The <p> element defines a paragraph
The HTML <head> Element
• The HTML <head> element is a container for metadata. HTML metadata is
data about the HTML document. Metadata is not displayed.
• The <head> element is placed between the <html> tag and the <body> tag:
<!DOCTYPE html>
<html>

<head>
<title>My First HTML</title>
<meta charset="UTF-8">
</head>

<body>
<p>The HTML head element contains meta
data.</p>
<p>Meta data is data about the HTML
document.</p>
</body>

</html>
How to View HTML Source?
• 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.

• Inspect an HTML Element:


• Right-click on an element (or a blank area), and choose "Inspect" or
"Inspect Element" to see what elements are made up of (you will
see both the HTML and the CSS). You can also edit the HTML or
CSS on-the-fly in the Elements or Styles panel that opens.
Web Browsers
• The purpose of a web browser (Chrome, Edge, Firefox, Safari)
is to read HTML documents and display them.
• The browser does not display the HTML tags, but uses them to
determine how to display the document:
Save the HTML Page
• Save the file on your computer. Select File > Save as in the
Notepad menu.
• Name the file "index.htm" and set the encoding to UTF-8
(which is the preferred encoding for HTML files).
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").
HTML Tags

As told earlier, HTML is a markup language and makes use of


various tags to format the content.
These tags are enclosed within angle braces <Tag Name>.

HTML tags are element names surrounded by angle brackets:


<tagname>content goes here...</tagname>

HTML tags normally come in pairs like <p> and </p>

Except few tags, most of the tags have their corresponding closing
tags. For example <html> has its closing tag </html> and <body>
tag has its closing tag </body> tag etc.
HTML Basic Tags

It is important to use headings to show the document structure.

Heading Tags
HTML also has six levels of headings, which use the elements
<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.

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


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

While displaying any heading, browser adds one line before and
one line after that heading.
Example
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>Hello LPU </h1>
<h2>Hello LPU </h2>
<h3>Hello LPU </h3>
<h4>Hello LPU </h4>
<h5>Hello LPU </h5>
<h6>Hello LPU </h6>
</body>
</html>
Bigger Headings

Each HTML heading has a default size. However, you can specify the size for any heading
with the style attribute, using the CSS font-size property:

<!DOCTYPE html>
<html>
<body>

<h1 style="font-size:60px;">Heading
1</h1>

<p>You can change the size of a heading


with the style attribute, using the font-size
property.</p>

</body>
</html>
HTML Paragraphs

. Paragraph Tag
The <p> tag offers a way to structure your text into different paragraphs.
Each paragraph of text should go in between an opening <p> and a
closing </p> tag as shown below in the example:

Example
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title><
/head>
<body>
<p>Here is a first paragraph of text.</p>
<p><h2>Here is a second paragraph of text.</h2></p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
HTML Display
• You cannot be sure how HTML will be displayed.
• Large or small screens, and resized windows will
create different results.
• With HTML, you cannot change the output by
adding extra spaces or extra lines in your HTML
code.
• The browser will remove any extra spaces and
extra lines when the page is displayed:
<!DOCTYPE html>
<html>
<body>

<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>

<p>
The number of lines in a paragraph depends on the size of the browser window. If you resize the browser window, the number of lines
in this paragraph will change.
</p>

</body>
</html>
Preserve Formatting

The <pre> tag defines preformatted text.


Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it
preserves both spaces and line breaks.

Example
<!DOCTYPE html>
<html>
<body>

<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>

</body>
</html>
Default CSS Settings

<!DOCTYPE html>
<html>
.....contd.
<head>
<pre>
<style>
Text in a pre element
pre {
is displayed in a fixed-width
display: block;
font, and it preserves
font-family: Arial;
both spaces and
font-size:20px
line breaks
}
</pre>
</style>
</head>
<p>Change the default CSS settings to see the
<body>
effect.</p>
<p>A pre element is displayed like
</body>
this:</p>
</html>
Line Break Tag

Whenever you use the <br /> element, anything following it starts from the next
line. This tag is an example of an empty element, where you do not need opening
and closing tags, as there is nothing to go in between them.
The <br /> tag has a space between the characters br and the forward slash.

NB: If you omit this space, older browsers will have trouble rendering the line
break, while if you miss the forward slash character and just use <br> it is not valid
in XHTML
Example
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
LPU<br />
Block -34<br />
CSE </p>
</body>
</html>
Centering Content

You can use <center> tag to put any content in the center of the page or any table
cell.
Example
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>Welcome to LPU</p>
<center><p>Welcome to School of CSE</p></center>
</body>
</html>
HTML Styles
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.

<!DOCTYPE html>
<html>
<body>

<p>I am normal</p>
<p style="color:red;">I am red</p>
<p style="color:blue;">I am blue</p>
<p style="font-size:50px;">I am big</p>

</body>
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:

<!DOCTYPE html>
<html>
<body style="background-color:powderblue;">

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

</body>
</html>
Text Color Fonts
The CSS color property defines the The CSS font-family property
text color for an HTML element: defines the font to be used for an
HTML element:
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <body>

<h1 style="font-
<h1 style="color:blue;">This is a
family:verdana;">This is a
heading</h1> heading</h1>
<p style="color:red;">This is a <p style="font-
paragraph.</p> family:courier;">This is a
paragraph.</p>
</body>
</body>
</html> </html>
Text Size
The CSS font-size property defines Text Alignment
the text size for an HTML The CSS text-align property defines the
element: horizontal text alignment for an HTML
element:
<!DOCTYPE html>
<!DOCTYPE html>
<html> <html>
<body> <body>

<h1 style="font-size:300%;">This is <h1 style="text-align:center;">Centered


a heading</h1> Heading</h1>
<p style="text-align:center;">Centered
<p style="font-size:160%;">This is a paragraph.</p>
paragraph.</p>
</body>
</body> </html>
</html>
HTML Links
HTML links are defined with the <a> tag:
• The link's destination is specified in the href attribute.
• Attributes are used to provide additional information about HTML elements.

<!DOCTYPE html>
<html>
<body>

<h2>HTML Links</h2>
<p>HTML links are defined with the a tag:</p>

<a href="https://www.w3schools.com">This is a link</a>

</body>
</html>
HTML Images
• HTML images are defined with the <img> tag.
• The source file (src), alternative text (alt), width, and height are provided as
attributes:
<!DOCTYPE html>
<html>
<body>

<h2>HTML Images</h2>
<p>HTML images are defined with the img tag:</p>

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

</body>
</html>
HTML Buttons

• HTML buttons are defined with the <button> tag:


<!DOCTYPE html>
<html>
<body>

<h2>HTML Buttons</h2>
<p>HTML buttons are defined with the button tag:</p>

<button>Click me</button>

</body>
</html>
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):
<!DOCTYPE html>
<html>
<body>
<h2>An Unordered HTML List</h2>
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</body>
</html>
Horizontal Lines

Horizontal lines are used to visually break up sections of a document.


The <hr /> tag creates a line from the current position in the document to the right
margin and breaks the line accordingly.
For example you may want to give a line between two paragraphs as in the given
example below:
Example
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
HTML Elements

An HTML element is defined by a starting tag.

If the element contains other content, it ends with a closing tag, where the element
name is preceded by a forward slash as shown below with few tags:

Start Tag Content End Tag


<p> This is paragraph content. </p>
<h1> This is heading content. </h1>
<div> This is division content. </div>

NB: There are some HTML elements which don't need to be closed, such as <img.../>,
<hr /> and <br /> elements. These are known as void elements.
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>
Do Not Forget the End Tag
<!DOCTYPE html>
<html>
<body>

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

</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):

• Empty elements can be "closed" in the opening tag like this: <br />.
• HTML5 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.

<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
HTML Is Not Case Sensitive
• HTML tags are not case sensitive: <P> means the
same as <p>.
• The HTML5 standard does not require lowercase
tags, but W3C recommends lowercase in HTML,
and demands lowercase for stricter document types
like XHTML.
HTML Attributes

All HTML elements can have attributes. Attributes provide additional


information about HTML elements.

An attribute is used to define the characteristics of an HTML element and is placed inside
the element's opening tag.

Attributes usually come in name/value pairs like: name="value" . They are made up of
two parts: a name and a value:

The name is the property you want to set. For example, the paragraph <p> element in the
example carries an attribute whose name is align, which you can use to indicate the
alignment of paragraph on the page.

The value is what you want the value of the property to be set and always put within
quotations. The below example shows three possible values of align attribute: left, center
and right.
Example

<!DOCTYPE html>
<html>
<head>
<title>Align Attribute Example</title>
</head>
<body>
<p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
</body>
</html>
Core Attributes

The four core attributes that can be used on the majority of HTML elements are:

• id
• title
• class
• style
The id Attribute

The id attribute of an HTML tag can be used to uniquely identify any element within
an HTML page.

There are two primary reasons that you might want to use an id attribute on an
element:

1. If an element carries an id attribute as a unique identifier it is possible to identify


just that element and its content.

2. If you have two elements of the same name within a Web page (or style sheet), you
can use the id attribute to distinguish between elements that have the same name.
Example

<p id="html"> Simple HTML Text</p>


<p id="css">HTML with Cascading Style Sheet properties</p>
The title Attribute
The title attribute gives a suggested title for the element.

The behavior of this attribute will depend upon the element that carries it, although it is
often displayed as a tooltip when cursor comes over the element or while the element is
loading.
Example
<!DOCTYPE html>
<html>
<head>
<title>The title Attribute Example</title>
</head>
<body>
<h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>
The class Attribute
The class attribute is used to associate an element with a style sheet, and specifies the class of
element.

The value of the attribute may also be a space-separated list of class names.
For example:
class="className1 className2 className3“

The style Attribute


The style attribute is used to specify the styling of an element, like color, font, size etc.
The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.

<!DOCTYPE html>
<html>
<head>
<title>The style Attribute</title>
</head>
<body><p style="font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>
The href Attribute

HTML links are defined with the <a> tag. The link address is specified in the href
attribute:
<!DOCTYPE html>
<html>
<body>

<h2>The href Attribute</h2>


<p>HTML links are defined with the a tag. The link address is specified in the
href attribute:</p>

<a href="https://www.w3schools.com">This is a link</a>

</body>
</html>
The src Attribute
HTML images are defined with the <img> tag.
The filename of the image source is specified in the src attribute:

<!DOCTYPE html>
<html>
<body>

<h2>The src Attribute</h2>


<p>HTML images are defined with the img tag, and the filename of
the image source is specified in the src attribute:</p>

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

</body>
</html>
The width and height Attributes

HTML images also have width and height attributes, which specifies the width
and height of the image. The width and height are is specified in pixels by default;
so width="500" means 500 pixels wide.

<!DOCTYPE html>
<html>
<body>

<h2>Size Attributes</h2>
<p>Images in HTML have a set of size attributes, which specifies the width and height of
the image:</p>

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

</body>
</html>
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.
The alt attribute is also useful if the image cannot be displayed (e.g. if it does not exist):

<!DOCTYPE html>
<html>
<body>

<h2>The alt Attribute</h2>


<p>The alt attribute should reflect the image content, so users who cannot see the image
gets an understanding of what the image contains:</p>

<img src="img_girl.jpg" alt="Girl with a jacket" width="500" height="600">

</body>
</html>
Image not displayed. Instead content of alt is displayed.
<!DOCTYPE html>
<html>
<body>

<img src="img_typo.jpg" alt="Girl with a jacket">

<p>If we try to display an image that does not exist, the value of the
alt attribute will be displayed instead. </p>

</body>
</html>
The lang Attribute

The language of the document can be declared in the <html> tag.


The language is declared with the lang attribute.
Declaring a language is important for accessibility applications (screen readers) and search
engines:
The first two letters specify the language (en). If there is a dialect, add two more letters (US).

<!DOCTYPE html>
<html lang="en-US">
<body>

...

</body>
</html>
Use Lowercase Attributes

The HTML5 standard does not require lowercase attribute names.


The title attribute can be written with uppercase or lowercase like title or TITLE.

Quote Attribute Values

The HTML5 standard does not require quotes around attribute values.
The href attribute, demonstrated above, can be written without quotes:

<!DOCTYPE html> <!DOCTYPE html>


<html> <html>
<body> <body>

<a <a
href=https://www.w3schools.com> href="https://www.w3schools.com">T
This is a link</a> his is a link</a>

</body> </body>
</html> </html>
Single or Double Quotes?

Double quotes around attribute values are the most common in HTML, but
single quotes can also be used.
In some situations, when the attribute value itself contains double quotes, it is
necessary to use single quotes:

<!DOCTYPE html>
<html>
<body>

<h2>Single or Double Quotes?</h2>


<p>In some situations, when the attribute value itself contains double quotes, it
is necessary to use single quotes:</p>
<p>Move your mouse over the paragraphs below to see the effect:</p>

<p title='John "ShotGun" Nelson'>John with double quotes</p>


<p title="John 'ShotGun' Nelson">John with single quotes</p>

</body>
</html>
HTML Formatting Tags

Bold Text
Anything that appears within <b>...</b> element, is displayed in bold as shown below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Bold Text Example</title>
</head>
<body>
<p>Welcome to <b>LPU</b> Jalandhar</p>
</body>
</html>
Italic Text
Anything that appears within <i>...</i> element is displayed in italicized as shown
below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Italic Text Example</title>
</head>
<body>
<p>Welcome to <i>LPU</i> Jalandhar</p>
</body>
</html>
Underlined Text
Anything that appears within <u>...</u> element, is displayed with underline as shown
below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Underlined Text Example</title>
</head>
<body>
<p>Welcome to <u>LPU</u> Jalandhar</p>
</body>
</html>
Strike Text
Anything that appears within <strike>...</strike> element is displayed with strikethrough,
which is a thin line through the text as shown below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Strike Text Example</title>
</head>
<body>
<p>This is completely <strike>bad</strike>idea</p>
</body>
</html>
Superscript Text
The content of a <sup>...</sup> element is written in superscript; the font size used is
the same size as the characters surrounding it but is displayed half a character's height
above the other characters.

Example
<!DOCTYPE html>
<html>
<head>
<title>Superscript Text Example</title>
</head>
<body>
<p>An example of <sup>superscript</sup> formatting tag</p>
</body>
</html>
Subscript Text
The content of a <sub>...</sub> element is written in subscript; the font size used is the
same as the characters surrounding it, but is displayed half a character's height beneath
the other characters.

Example
<!DOCTYPE html>
<html>
<head>
<title>Subscript Text Example</title>
</head>
<body>
<p>An example of <sub>subscript</sub> formatting tag</p>
</body>
</html>
Inserted and Deleted Text

Anything that appears within <ins>...</ins> element is displayed as inserted text.


Anything that appears within <del>...</del> element, is displayed as deleted text.

Example
<!DOCTYPE html>
<html>
<head>
<title>Inserted Text Example</title>
</head>
<body>
<p>This is an example of <del>HTML</del> and <ins>JavaScript</ins>
</p>
</body>
</html>
Larger Text
The content of the <big>...</big> element is displayed one font size larger than the rest of
the text surrounding it as shown below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Larger Text Example</title>
</head>
<body>
<p>Welcome to <big>LPU</big> Jalandhar</p>
</body>
</html>
Smaller Text
The content of the <small>...</small> element is displayed one font size smaller than the
rest of the text surrounding it as shown below:

Example
<!DOCTYPE html>
<html>
<head>
<title>Smaller Text Example</title>
</head>
<body>
<p>Example of <small>small</small> formatting tag</p>
</body>
</html>
Grouping Content
The <div> and <span> elements allow you to group together several elements to create
sections or subsections of a page.

Example
<!DOCTYPE html>
<html>
<head>
<title>Div Tag Example</title>
</head>
<body>
<div align="middle" >
<p> Welcome to HTML</p>
<p> Welcome to JavaScript</p>
<p> Welcome to CSS</p>
</div>
</body>
</html>
The <span> element, on the other hand, can be used to group inline elements only. So, if
you have a part of a sentence or paragraph which you want to group together, you could
use the <span> element as follows

Example
<!DOCTYPE html>
<html>
<head>
<title>Span Tag Example</title>
</head>
<body>
<p>This is the example of <span style="color:green">span tag</span> and the <span
style="color:red">div tag</span> alongwith CSS</p>
</body>
</html>
Emphasized Text
Anything that appears within <em>...</em> element is displayed as emphasized text.

Example
<!DOCTYPE html>
<html>
<head>
<title>Emphasized Text Example</title>
</head>
<body>
<p>This is an example of <em>emphasized</em> tag</p>
</body>
</html>
Marked Text
Anything that appears with-in <mark>...</mark> element, is displayed as marked with
yellow ink.

Example
<!DOCTYPE html>
<html>
<head>
<title>Marked Text Example</title>
</head>
<body>
<p>This is an example of <mark>marked</mark> tag</p>
</body>
</html>
Text Direction
The <bdo>...</bdo> element stands for Bi-Directional Override and it is used to override
the current text direction.

Example
<!DOCTYPE html>
<html>
<head>
<title>Text Direction Example</title>
</head>
<body>
<p>This text will go left to right.</p>
<p><bdo dir="rtl">This text will go right to left.</bdo></p>
</body>
</html>
Short Quotations
The <q>...</q> element is used when you want to add a double quote within a sentence.

Example
<!DOCTYPE html>
<html>
<head>
<title>Double Quote Example</title>
</head>
<body>
<p>Welcome to <q>LPU</q>Jalandhar</p>
</body>
</html>
Computer Code
Any programming code to appear on a Web page should be placed inside
<code>...</code> tags. Usually the content of the <code> element is presented in a
monospaced font, just like the code in most programming books.

Example
<!DOCTYPE html>
<html>
<head>
<title>Computer Code Example</title>
</head>
<body>
<p>Regular text. <code>This is code.</code> Regular text.</p>
</body>
</html>
HTML <blockquote> for Quotations
The HTML <blockquote> element defines a section that is quoted from another source.
Browsers usually indent <blockquote> elements.

<!DOCTYPE html>
<html>
<body>

<p>Browsers usually indent blockquote elements.</p>

<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

</body>
</html>
HTML <address> for Contact Information
<!DOCTYPE html>
<html>
<body>

<p>The HTML address element defines contact information (author/owner) of a document or


article.</p>

<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

</body>
</html>
HTML Comment Tags
Syntax:
<!-- Write your comments here -->

Example:
<!DOCTYPE html>
<html>
<body>

<!-- This is a comment -->


<p>This is a paragraph.</p>
<!-- Comments are not displayed in the browser -->

</body>
</html>
HTML Colors
Color Names
HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA,
HSLA values.
<!DOCTYPE html>
<html>
<body>
<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>
</body>
</html>
Border Color
<!DOCTYPE html>
<html>
<body>

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

</body>
</html>
Color Values
• In HTML, colors can also be specified using
RGB values, HEX values, HSL values, RGBA
values, and HSLA values:
• Same as color name "Tomato":
<!DOCTYPE html>
<html>
<body>

<p>Same as color name "Tomato":</p>

<h1 style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</h1>


<h1 style="background-color:#ff6347;">#ff6347</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">hsl(9, 100%, 64%)</h1>

<p>Same as color name "Tomato", but 50% transparent:</p>


<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>

<p>In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or
even transparent colors using RGBA or HSLA color values.</p>

</body>
</html>
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).
Shades of gray are often defined using equal values for all the 3 light sources:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgb(0, 0, 0);">rgb(0, 0, 0)</h1>


<h1 style="background-color:rgb(60, 60, 60);">rgb(60, 60, 60)</h1>
<h1 style="background-color:rgb(120, 120, 120);">rgb(120, 120, 120)</h1>
<h1 style="background-color:rgb(180, 180, 180);">rgb(180, 180, 180)</h1>
<h1 style="background-color:rgb(240, 240, 240);">rgb(240, 240, 240)</h1>
<h1 style="background-color:rgb(255, 255, 255);">rgb(255, 255, 255)</h1>

<p>By using equal values for red, green, and blue, you will get different shades of gray.</p>

</body>
</html>
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).
Shades of gray are often defined using equal values for all the 3 light sources:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:#000000;">#000000</h1>
<h1 style="background-color:#3c3c3c;">#3c3c3c</h1>
<h1 style="background-color:#787878;">#787878</h1>
<h1 style="background-color:#b4b4b4;">#b4b4b4</h1>
<h1 style="background-color:#f0f0f0;">#f0f0f0</h1>
<h1 style="background-color:#ffffff;">#ffffff</h1>

<p>By using equal values for red, green, and blue, you will get different shades of
gray.</p>

</body>
</html>
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
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>


<h1 style="background-color:hsl(240, 100%, 50%);">hsl(240, 100%, 50%)</h1>
<h1 style="background-color:hsl(147, 50%, 47%);">hsl(147, 50%, 47%)</h1>
<h1 style="background-color:hsl(300, 76%, 72%);">hsl(300, 76%, 72%)</h1>
<h1 style="background-color:hsl(39, 100%, 50%);">hsl(39, 100%, 50%)</h1>
<h1 style="background-color:hsl(248, 53%, 58%);">hsl(248, 53%, 58%)</h1>

<p>In HTML, you can specify colors using HSL values.</p>

</body>
</html>
Saturation
Saturation can be described as the intensity of a
color.
100% is pure color, no shades of gray
50% is 50% gray, but you can still see the color.
0% is completely gray, you can no longer see the
color.
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>


<h1 style="background-color:hsl(0, 80%, 50%);">hsl(0, 80%, 50%)</h1>
<h1 style="background-color:hsl(0, 60%, 50%);">hsl(0, 60%, 50%)</h1>
<h1 style="background-color:hsl(0, 40%, 50%);">hsl(0, 40%, 50%)</h1>
<h1 style="background-color:hsl(0, 20%, 50%);">hsl(0, 20%, 50%)</h1>
<h1 style="background-color:hsl(0, 0%, 50%);">hsl(0, 0%, 50%)</h1>

<p>With HSL colors, less saturation mean less color. 0% is completely gray.</p>

</body>
</html>
Lightness

The lightness of a color can be described as how much light you want to give the color,
where 0% means no light (black), 50% means 50% light (neither dark nor light) 100%
means full lightness (white).

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 100%, 0%);">hsl(0, 100%, 0%)</h1>


<h1 style="background-color:hsl(0, 100%, 25%);">hsl(0, 100%, 25%)</h1>
<h1 style="background-color:hsl(0, 100%, 50%);">hsl(0, 100%, 50%)</h1>
<h1 style="background-color:hsl(0, 100%, 75%);">hsl(0, 100%, 75%)</h1>
<h1 style="background-color:hsl(0, 100%, 90%);">hsl(0, 100%, 90%)</h1>
<h1 style="background-color:hsl(0, 100%, 100%);">hsl(0, 100%, 100%)</h1>

<p>With HSL colors, 0% lightness means black, and 100 lightness means white.</p>

</body>
</html>
Shades of gray are often defined by setting the hue and saturation to 0, and adjust the
lightness from 0% to 100% to get darker/lighter shades:

<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsl(0, 0%, 0%);">hsl(0, 0%, 0%)</h1>


<h1 style="background-color:hsl(0, 0%, 24%);">hsl(0, 0%, 24%)</h1>
<h1 style="background-color:hsl(0, 0%, 47%);">hsl(0, 0%, 47%)</h1>
<h1 style="background-color:hsl(0, 0%, 71%);">hsl(0, 0%, 71%)</h1>
<h1 style="background-color:hsl(0, 0%, 94%);">hsl(0, 0%, 94%)</h1>
<h1 style="background-color:hsl(0, 0%, 100%);">hsl(0, 0%, 100%)</h1>

<p>With HSL colors, shades of gray are made by setting the saturation to 0%, and adjusting
the lightness according to how dark/light the gray color should be.</p>

</body>
</html>
• RGBA Value
• RGBA color values are an extension of RGB
color values with an alpha channel - which
specifies the opacity for a color.
• An RGBA color value is specified with:
rgba(red, green, blue, alpha)
• The alpha parameter is a number between 0.0
(fully transparent) and 1.0 (not transparent at
all):
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:rgba(255, 99, 71, 0);">rgba(255, 99, 71, 0)</h1>


<h1 style="background-color:rgba(255, 99, 71, 0.2);">rgba(255, 99, 71, 0.2)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.4);">rgba(255, 99, 71, 0.4)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.6);">rgba(255, 99, 71, 0.6)</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.8);">rgba(255, 99, 71, 0.8)</h1>
<h1 style="background-color:rgba(255, 99, 71, 1);">rgba(255, 99, 71, 1)</h1>

<p>You can make transparent colors by using the RGBA color value.</p>

</body>
</html>
HSLA Value
• HSLA color values are an extension of HSL
color values with an alpha channel - which
specifies the opacity for a color.
• An HSLA color value is specified with:
hsla(hue, saturation, lightness, alpha)
• The alpha parameter is a number between 0.0
(fully transparent) and 1.0 (not transparent at
all):
<!DOCTYPE html>
<html>
<body>

<h1 style="background-color:hsla(9, 100%, 64%, 0);">hsla(9, 100%, 64%, 0)</h1>


<h1 style="background-color:hsla(9, 100%, 64%, 0.2);">hsla(9, 100%, 64%, 0.2)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.4);">hsla(9, 100%, 64%, 0.4)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.6);">hsla(9, 100%, 64%, 0.6)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.8);">hsla(9, 100%, 64%, 0.8)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 1);">hsla(9, 100%, 64%, 1)</h1>

<p>You can make transparent colors by using the HSLA color value.</p>

</body>
</html>
HTML Links
• HTML links are hyperlinks.
• You can click on a link and jump to another
document.
• When you move the mouse over a link, the
mouse arrow will turn into a little hand.
• Hyperlinks are defined with the HTML <a> tag:
<a href="url">link text</a>
• A link does not have to be text. It can be an
image or any other HTML element.
<!DOCTYPE html>
<html>
<body>

<h2>HTML Links</h2>
<p><a href="https://www.w3schools.com/html/">Visit our
HTML tutorial</a></p>

</body>
</html>
Internal and external document links
• There are two types of links to pages you can
create. There is the “Internal Link” and the
“External Link“.
• An “Internal Link” is a link in your site that
navigates the visitor to another page in your
website.
• The “External Link” navigates the visitor away
from your site to another website in the
internet (like http://google.com).
Creating an Internal link in your website
• Internal links reference to a file location on your server. The path
to the file location is placed in the “href” attribute.

• For Example, if you place a file called nextpage.html in your


public_html for your main domain, you simply put the file name
like below.
<a href="nextpage.html">This text will now be a link</a>

• To reference a file in a subfolder, you include the subfolder name


in the “href” attribute For example, if you have nextpage.html in
a folder called subfolder, you will create the link like the
following:
<a href="subfolder/nextpage.html">This text will now be a
Creating an External link to another site

• Creating an “External Link” only requires you


to have the link to the page. If you want to link
your site to inmotionhosting.com for example,
you would copy the url in the address bar
when you are at inmotionhosting.com, and
paste the url in the “href” of your anchor / link
like the following:
<a href="http://inmotionhosting.com">Text
that will be a link</a>
HTML Link Colors
• By default, a link will appear like this (in all
browsers):
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
• You can change the default colors, by using
CSS:
HTML Links - The target Attribute
• The target attribute specifies where to open the linked
document.
• The target attribute can have one of the following values:
• _blank - Opens the linked document in a new window or
tab
• _self - Opens the linked document in the same window/tab
as it was clicked (this is default)
• _parent - Opens the linked document in the parent frame
• _top - Opens the linked document in the full body of the
window
• framename - Opens the linked document in a named frame
<!DOCTYPE html>
<html>
<body>

<h2>The target Attribute</h2>

<a href="https://www.w3schools.com/html/" target="_blank">Visit our HTML


tutorial!</a>

<p>If you set the target attribute to "_blank", the link will open in a new browser
window or tab.</p>

</body>
</html>
_top attribute
• If your webpage is locked in a frame, you can use target="_top" to
break out of the frame:
<!DOCTYPE html>
<html>
<body>

<p>Locked in a frame? <a href="https://www.w3schools.com/html/"


target="_top">Click here!</a></p>

</body>
</html>
HTML Links - Image as Link
<!DOCTYPE html>
<html>
<body>

<h2>Image Links</h2>

<p>The image is a link. You can click on it.</p>

<a href="default.asp">
<img src="smiley.gif" alt="HTML tutorial" style="width:42px;height:42px;border:0">
</a>

<p>We have added "border:0" to prevent IE9 (and earlier) from displaying a border around the
image.</p>

</body>
</html>
Link Titles
• The title attribute specifies extra information about an element. The information is
most often shown as a tooltip text when the mouse moves over the element.

<!DOCTYPE html>
<html lang="en-US">
<body>

<h2>Link Titles</h2>
<p>The title attribute specifies extra information about an element. The information is
most often shown as a tooltip text when the mouse moves over the element.</p>
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>

</body>
</html>
HTML Links - Create a Bookmark
• HTML bookmarks are used to allow readers to
jump to specific parts of a Web page.
• Bookmarks can be useful if your webpage is
very long.
• To make a bookmark, you must first create the
bookmark, and then add a link to it.
• When the link is clicked, the page will scroll to
the location with the bookmark.
<!DOCTYPE html>
<html>
<body>

<p><a href="#C4">Jump to Chapter 4</a></p>


<p><a href="#C10">Jump to Chapter
10</a></p>

<h2>Chapter 1</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 2</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 3</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C4">Chapter 4</h2>


<p>This chapter explains ba bla bla</p>
<h2>Chapter 5</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 6</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 7</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 8</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 9</h2>
<p>This chapter explains ba bla bla</p>

<h2 id="C10">Chapter 10</h2>


<p>This chapter explains ba bla bla</p>

<h2>Chapter 11</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 12</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 13</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 14</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 15</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 16</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 17</h2>
<p>This chapter explains ba bla bla</p>
<h2>Chapter 18</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 19</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 20</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 21</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 22</h2>
<p>This chapter explains ba bla bla</p>

<h2>Chapter 23</h2>
<p>This chapter explains ba bla bla</p>

</body>
</html>

You might also like