for paragraphs, for links, for images,

and
for unordered and ordered lists, and
for line breaks. Styles can be applied using the style attribute or internal CSS to control text formatting, colors, sizes, and other properties."> for main headings,

for paragraphs, for links, for images,

and
for unordered and ordered lists, and
for line breaks. Styles can be applied using the style attribute or internal CSS to control text formatting, colors, sizes, and other properties.">
Address: [go: up one dir, main page]

---
Include Form Remove Scripts Session Cookies
Open navigation menu
Close suggestionsSearchSearch
enChange Language
Upload
Sign in
Sign in
Download free for days
0 ratings0% found this document useful (0 votes)
79 views37 pages
HTML Headings
HTML elements are used to define headings, paragraphs, links, images, buttons, lists, line breaks, quotes, and other content. Common elements include <h1> for main headings, <p> for paragraphs, <a> for links, <img> for images, <ul> and <ol> for unordered and ordered lists, and <br> for line breaks. Styles can be applied using the style attribute or internal CSS to control text formatting, colors, sizes, and other properties.
Uploaded by
Venice Aira Montañez
AI-enhanced description
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
• Download
• SaveSave HTML Headings For Later
• 0%0% found this document useful, undefined
• 0%, undefined
• Embed
• Share
• Print
• Report
0 ratings0% found this document useful (0 votes)
79 views37 pages
HTML Headings
HTML elements are used to define headings, paragraphs, links, images, buttons, lists, line breaks, quotes, and other content. Common elements include <h1> for main headings, <p> for paragraphs, <a> for links, <img> for images, <ul> and <ol> for unordered and ordered lists, and <br> for line breaks. Styles can be applied using the style attribute or internal CSS to control text formatting, colors, sizes, and other properties.
Uploaded by
Venice Aira Montañez
AI-enhanced description
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
• Download
• SaveSave HTML Headings For Later
• 0%0% found this document useful, undefined
• 0%, undefined
• Embed
• Share
• Print
• Report
Download nowDownload
You are on page 1/ 37
Search
Fullscreen
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading
<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
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
HTML links are defined with the <a> tag:
<a href="https://www.w3schools.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.
<img src="w3schools.jpg" alt="W3Schools.com" width="104"height="142">
HTML Buttons
HTML buttons are defined with the <button> tag
<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):
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
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):
<p>This is a <br> paragraph with a line break.</p>
The href Attribute
HTML links are defined with the <a> tag. The link address is specified in
the href attribute:
<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:
<img src="img_girl.jpg">
The width and height Attributes
Images in HTML have a set of size attributes, which specifies the width and height
of the image:
<img src="img_girl.jpg" width="500" height="600">
The alt Attribute
The alt attribute specifies an alternative text to be used, when an image cannot be
displayed.
The value of the attribute can be read by screen readers. This way, someone
"listening" to the webpage, e.g. a vision impaired person, can "hear" the element.
<img src="img_girl.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.
<p style="color:red">I am a paragraph</p>

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:
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>
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:
<p title="I'm a tooltip">

This is a paragraph.
</p>
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
<h1 style="font-size:60px;">Heading 1</h1>
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:
<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 has nothing to do with HTML headings.
The <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>
.
.
.
HTML Paragraphs
The HTML <p> element defines a paragraph
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
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:
<p>This is<br>a paragraph<br>with line breaks.</p>
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:
<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>
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.
TML Background Color
The background-color property defines the background color for an HTML element.
This example sets the background color for a page to powderblue:
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
HTML Text Color
The color property defines the text color for an HTML element:
<h1 style="color:blue;">This is a heading</h1>

<p style="color:red;">This is a paragraph.</p>
HTML Fonts
The font-family property defines the font to be used for an HTML element:
<h1 style="font-family:verdana;">This is a heading</h1>

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

<p style="text-align:center;">Centered paragraph.</p>
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 italictext.
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.
<b>This text is bold</b>
The HTML <strong> element defines strong text, with added semantic "strong"
importance.
<strong>This text is strong</strong>
HTML <i> and <em> Elements
The HTML <i> element defines italic text, without any extra importance.
<i>This text is italic</i>
The HTML <em> element defines emphasized text, with added semantic importance.
<em>This text is emphasized</em>
HTML <small> Element
The HTML <small> element defines smaller text:
<h2>HTML <small>Small</small> Formatting</h2>
HTML <mark> Element
The HTML <mark> element defines marked or highlighted text:
<h2>HTML <mark>Marked</mark> Formatting</h2>
HTML <del> Element
The HTML <del> element defines deleted (removed) text.
<p>My favorite color is <del>blue</del> red.</p>
HTML <ins> Element
The HTML <ins> element defines inserted (added) text.
<p>My favorite <ins>color</ins> is red.</p>
HTML <sub> Element
The HTML <sub> element defines subscripted text.
<p>This is _subscripted text.</p>
HTML <sup> Element
The HTML <sup> element defines superscripted

text.
<p>This is ^{superscripted} text.</p>
HTML <q> for Short Quotations
The HTML <q> element defines a short quotation.
Browsers usually insert quotation marks around the <q> element.

<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>
HTML <blockquote> for Quotations
The HTML <blockquote> element defines a section that is quoted from another
source.
Browsers usually indent <blockquote> elements.
<p>Here is a quote from WWF's website:</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>
HTML <abbr> for Abbreviations
The HTML <abbr> element defines an abbreviation or an acronym.
Marking abbreviations can give useful information to browsers, translation systems

and search-engines.
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in

1948.</p>
HTML <address> for Contact Information
The HTML <address> element defines contact information (author/owner) of a

document or an article.
The <address> element is usually displayed in italic. Most browsers will add a line
break before and after the element.
<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
HTML <cite> for Work Title
The HTML <cite> element defines the title of a work.

Browsers usually display <cite> elements in italic.
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
HTML <bdo> for Bi-Directional Override
The HTML <bdo> element defines bi-directional override.
The <bdo> element is used to override the current text direction:
<bdo dir="rtl">This text will be written from right to left</bdo>
HTML Comment Tags
You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->
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:
Tomato Orange
DodgerBlue MediumSeaGreen
Gray SlateBlue
Violent LightGray
<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>
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
You can set the color of text:
<h1 style="color:Tomato;">Hello World</h1>

<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Border Color
You can set the color of borders:
<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 values, HEX values, HSL values,
RGBA values, and HSLA values:
Same as color name "Tomato":
Example
<h1 style="background-color:rgb(255, 99, 71);">...</h1>
<h1 style="background-color:#ff6347;">...</h1>
<h1 style="background-color:hsl(9, 100%, 64%);">...</h1>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">...</h1>

<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
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).
<h1 style="background-color:#ff0000;">#ff0000</h1>
<h1 style="background-color:#0000ff;">#0000ff</h1>
<h1 style="background-color:#3cb371;">#3cb371</h1>
<h1 style="background-color:#ee82ee;">#ee82ee</h1>
<h1 style="background-color:#ffa500;">#ffa500</h1>
<h1 style="background-color:#6a5acd;">#6a5acd</h1>
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
<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>
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.
<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>
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).
<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>
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:
<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>

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

Styling HTML with CSS
CSS stands for Cascading Style Sheets.
CSS describes how HTML elements are to be displayed on screen, paper, or

in other media.
CSS saves a lot of work. It can control the layout of multiple web pages all at
once.
CSS can be added to HTML elements in 3 ways:
 Inline - by using the style attribute in HTML elements

 Internal - by using a <style> element in the <head> section
 External - by using an external CSS file
Inline CSS
An inline CSS is used to apply a unique style to a single HTML element.
An inline CSS uses the style attribute of an HTML element.
This example sets the text color of the <h1> element to blue:
<h1 style="color:blue;">This is a Blue Heading</h1>
Internal CSS
An internal CSS is used to define a style for a single HTML page.
An internal CSS is defined in the <head> section of an HTML page, within

a <style> element:
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
External CSS
An external style sheet is used to define the style for many HTML pages.
With an external style sheet, you can change the look of an entire web site,
by changing one file!
To use an external style sheet, add a link to it in the <head> section of the HTML
page:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
An external style sheet can be written in any text editor. The file must not contain
any HTML code, and must be saved with a .css extension.
Here is how the "styles.css" looks:
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
CSS Fonts
The CSS color property defines the text color to be used.
The CSS font-family property defines the font to be used.
The CSS font-size property defines the text size to be used.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
font-family: verdana;
font-size: 300%;
}
p {
color: red;
font-family: courier;
font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
CSS Border
The CSS border property defines a border around an HTML element:
p {
border: 1px solid powderblue;
}
CSS Padding
The CSS padding property defines a padding (space) between the text and the
border:
p {
border: 1px solid powderblue;
padding: 30px;
}
CSS Margin
The CSS margin property defines a margin (space) outside the border:
p {
border: 1px solid powderblue;
margin: 50px;
}
The id Attribute
To define a specific style for one special element, add an id attribute to the
element:
<p id="p01">I am different</p>
then define a style for the element with the specific id:
#p01 {
color: blue;
}
The class Attribute
To define a style for special types of elements, add a class attribute to the
element:
<p class="error">I am different</p>
then define a style for the elements with the specific class:
p.error {
color: red;
}
External References
External style sheets can be referenced with a full URL or with a path relative to the
current web page.
This example uses a full URL to link to a style sheet:
<link rel="stylesheet"href="https://www.w3schools.com/html/styles.css">
This example links to a style sheet located in the html folder on the current web
site:
<link rel="stylesheet" href="/html/styles.css">
This example links to a style sheet located in the same folder as the current page:
<link rel="stylesheet" href="styles.css">

HTML Links
Links are found in nearly all web pages. Links allow users to click their way from
page to page.
HTML Links - Hyperlinks
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.
HTML Links - Syntax
In HTML, links are defined with the <a> tag:
<a href="url">link text</a>

<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
The href attribute specifies the destination address

(https://www.w3schools.com/html/) of the link.
The link text is the visible part (Visit our HTML tutorial).
Clicking on the link text will send you to the specified address.
Local Links
The example above used an absolute URL (a full web address).
A local link (link to the same web site) is specified with a relative URL (without
https://www....).
<a href="html_images.asp">HTML Images</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:

<style>
a:link {
color: green;
background-color: transparent;
text-decoration: none;
}
a:visited {
color: pink;
background-color: transparent;
text-decoration: none;
}
a:hover {
color: red;
background-color: transparent;
text-decoration: underline;
}
a:active {
color: yellow;
background-color: transparent;
text-decoration: underline;
}
</style>
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
This example will open the linked document in a new browser window/tab:
<a href="https://www.w3schools.com/" target="_blank">Visit W3Schools!</a>
Tip: If your webpage is locked in a frame, you can use target="_top" to break out
of the frame:
<a href="https://www.w3schools.com/html/" target="_top">HTML5 tutorial!</a>

HTML Links - Image as Link
It is common to use images as links:
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial"style="width:42px;height:42px;border:0;">
</a>
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.
Example
<a href="https://www.w3schools.com/html/" title="Go to W3Schools HTML
section">Visit our HTML Tutorial</a>
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.
Example
First, create a bookmark with the id attribute:
<h2 id="C4">Chapter 4</h2>
Then, add a link to the bookmark ("Jump to Chapter 4"), from within the same
page:
<a href="#C4">Jump to Chapter 4</a>
Or, add a link to the bookmark ("Jump to Chapter 4"), from another page:
<a href="html_demo.html#C4">Jump to Chapter 4</a>
External Paths
External pages can be referenced with a full URL or with a path relative to the
current web page.
This example uses a full URL to link to a web page:
<a href="https://www.w3schools.com/html/default.asp">HTML tutorial</a>
This example links to a page located in the html folder on the current web site:
<a href="/html/default.asp">HTML tutorial</a>
This example links to a page located in the same folder as the current page:
<a href="default.asp">HTML tutorial</a>
HTML Images
Example
<img src="pic_trulli.jpg" alt="Italian Trulli">
Example
<img src="img_girl.jpg" alt="Girl in a jacket">
HTML Images Syntax
In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image:
<img src="url">
The alt Attribute
The alt attribute provides an alternate text for an image, if the user for some
reason cannot view it (because of slow connection, an error in the src attribute, or
if the user uses a screen reader).
The value of the alt attribute should describe the image:
<img src="img_chania.jpg" alt="Flowers in Chania">
If a browser cannot find an image, it will display the value of the alt attribute:
<img src="wrongname.gif" alt="Flowers in Chania">
Image Size - Width and Height
You can use the style attribute to specify the width and height of an image.
<img src="img_girl.jpg" alt="Girl in a
jacket"style="width:500px;height:600px;">
Alternatively, you can use the width and height attributes:
<img src="img_girl.jpg" alt="Girl in a jacket" width="500"height="600">
Width and Height, or Style?
The width, height, and style attributes are valid in HTML5.
However, we suggest using the style attribute. It prevents styles sheets from
changing the size of images:
<!DOCTYPE html>
<html>
<head>
<style>
img {
width: 100%;
}
</style>
</head>
<body>
<img src="html5.gif" alt="HTML5 Icon" width="128" height="128">

<img src="html5.gif" alt="HTML5 Icon"style="width:128px;height:128px;">
</body>
</html>
Images in Another Folder
If not specified, the browser expects to find the image in the same folder as the
web page.
However, it is common to store images in a sub-folder. You must then include the
folder name in the src attribute:
<img src="/images/html5.gif" alt="HTML5

Icon"style="width:128px;height:128px;">
Images on Another Server
Some web sites store their images on image servers.
Actually, you can access images from any web address in the world:
<img src="https://www.w3schools.com/images/w3schools_green.jpg"alt="W3Schools
.com">
Animated Images
HTML allows animated GIFs:
<img src="programming.gif" alt="Computer Man"style="width:48px;height:48px;">
Image as a Link
To use an image as a link, put the <img> tag inside the <a> tag:
<a href="default.asp">
<img src="smiley.gif" alt="HTML
tutorial"style="width:42px;height:42px;border:0;">
</a>
Image Floating
Use the CSS float property to let the image float to the right or to the left of a
text:
<p><img src="smiley.gif" alt="Smiley

face"style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>
<p><img src="smiley.gif" alt="Smiley

face"style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>
Image Maps
The <map> tag defines an image-map. An image-map is an image with clickable

areas.
In the image below, click on the computer, the phone, or the cup of coffee:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer"href="computer.htm"
>
<area shape="rect" coords="290,172,333,250" alt="Phone"href="phone.htm">
<area shape="circle" coords="337,300,44" alt="Coffee"href="coffee.htm">
</map>
The name attribute of the <map> tag is associated with the <img>'s usemap attribute
and creates a relationship between the image and the map.
The <map> element contains a number of <area> tags, that define the clickable areas
in the image-map.
Background Image
To add a background image on an HTML element, use the CSS propertybackground-

image:
To add a background image on a web page, specify the background-image property on the BODY
element:
<body style="background-image:url('clouds.jpg');">
<h2>Background Image</h2>
</body>
Example
To add a background image on a paragraph, specify the background-image

property on the P element:
<body>
<p style="background-image:url('clouds.jpg');">
...
</p>
</body>
The <picture> Element
HTML5 introduced the <picture> element to add more flexibility when specifying
image resources.
The <picture> element contains a number of <source> elements, each referring to
different image sources. This way the browser can choose the image that best fits
the current view and/or device.
Each <source> element have attributes describing when their image is the most
suitable.
The browser will use the first <source> element with matching attribute values, and
ignore any following <source> elements.
Example
Show one picture if the browser window (viewport) is a minimum of 650 pixels, and another image if
not, but larger than 465 pixels.
<picture>
<source media="(min-width: 650px)"srcset="img_pink_flowers.jpg">
<source media="(min-width: 465px)"srcset="img_white_flower.jpg">
<img src="img_orange_flowers.jpg" alt="Flowers"style="width:auto;">
</picture>
HTML Tables
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
</head>
<body>
<h2>HTML Table</h2>
<table>
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
<tr>
<td>Ernst Handel</td>
<td>Roland Mendel</td>
<td>Austria</td>
</tr>
 <tr>
<td>Island Trading</td>
<td>Helen Bennett</td>
<td>UK</td>
</tr>
<tr>
<td>Laughing Bacchus Winecellars</td>
<td>Yoshi Tannamuri</td>
<td>Canada</td>
</tr>
<tr>
<td>Magazzini Alimentari Riuniti</td>
<td>Giovanni Rovelli</td>
<td>Italy</td>
</tr>
</table>
</body>
</html>
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
<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>
<td>94</td>
</tr>
</table>
HTML Table - Adding a Border
If you do not specify a border for the table, it will be displayed without borders.
A border is set using the CSS border property:
table, th, td {
border: 1px solid black;
}
HTML Table - Collapsed Borders
If you want the borders to collapse into one border, add the CSS border-
collapse property:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
HTML Table - Adding Cell Padding
Cell padding specifies the space between the cell content and its borders.
If you do not specify a padding, the table cells will be displayed without padding.
To set the padding, use the CSS padding property:
th, td {
padding: 15px;
}
HTML Table - Left-align Headings
By default, table headings are bold and centered.
To left-align the table headings, use the CSS text-align property:

th {
text-align: left;
}
HTML Table - Adding Border Spacing
Border spacing specifies the space between the cells.
To set the border spacing for a table, use the CSS border-spacing property:
table {
border-spacing: 5px;
}
HTML Table - Cells that Span Many Columns
To make a cell span more than one column, use the colspan attribute:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two columns</h2>

<p>To make a cell span more than one column, use the colspan attribute.</p>
<table style="width:100%">
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>55577854</td>
<td>55577855</td>
</tr>
</table>
</body>
</html>
HTML Table - Cells that Span Many Rows
To make a cell span more than one row, use the rowspan attribute:
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
</head>
<body>
<h2>Cell that spans two rows</h2>

<p>To make a cell span more than one row, use the rowspan attribute.</p>
<table style="width:100%">
<tr>
<th>Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">Telephone:</th>
<td>55577854</td>
</tr>
<tr>
<td>55577855</td>
</tr>
</table>
</body>
</html>
HTML Table - Adding a Caption
To add a caption to a table, use the <caption> tag:
<table style="width:100%">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
 <td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
A Special Style for One Table
To define a special style for a special table, add an id attribute to the table:
<table id="t01">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
Example
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 15px;
text-align: left;
}
table#t01 {
 width: 100%;
background-color: #f1f1c1;
}
</style>
</head>
<body>
<h2>Styling Tables</h2>
<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>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br>
<table id="t01">
<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>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
Now you can define a special style for this table:
table#t01 {
width: 100%;
background-color: #f1f1c1;
}
Add more style
<!DOCTYPE html>
<html>
<head>
<style>
table {
width:100%;
table, th, td {
border: 1px solid black;
border-collapse: collapse;
th, td {
padding: 15px;
text-align: left;
table#t01 tr:nth-child(even) {
background-color: #eee;
table#t01 tr:nth-child(odd) {
background-color: #fff;
table#t01 th {
background-color: black;
color: white;
}
</style>
</head>
<body>
<h2>Styling Tables</h2>
<table>
<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>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
<br>
<table id="t01">
<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>
<td>94</td>
</tr>
<tr>
<td>John</td>
<td>Doe</td>
<td>80</td>
</tr>
</table>
</body>
</html>
You might also like
• Color Mixing Guide 2 Tattoo Ink

  

  100% (4)

  Color Mixing Guide 2 Tattoo Ink

  2 pages
• Basics of Web Design HTML5 and CSS 5th E PDF

  

  0% (5)

  Basics of Web Design HTML5 and CSS 5th E PDF

  4 pages
• Ultra HTML Reference

  

  From Everand

  Ultra HTML Reference

  Mike Abelar

  2/5 (1)
• HTML Notes

  

  No ratings yet

  HTML Notes

  21 pages
• HTML Cont.

  

  No ratings yet

  HTML Cont.

  16 pages
• HTML

  

  No ratings yet

  HTML

  47 pages
• HTML2

  

  No ratings yet

  HTML2

  154 pages
• HTML NOTES

  

  No ratings yet

  HTML NOTES

  15 pages
• HTML

  

  No ratings yet

  HTML

  44 pages
• HTML Can Be Edited by Using Professional HTML Editors Like

  

  No ratings yet

  HTML Can Be Edited by Using Professional HTML Editors Like

  22 pages
• Topic 7: Understanding The Functionality of HTML What Is HTML?

  

  No ratings yet

  Topic 7: Understanding The Functionality of HTML What Is HTML?

  9 pages
• HTML5 Basic Notes

  

  No ratings yet

  HTML5 Basic Notes

  96 pages
• HTML Class2

  

  No ratings yet

  HTML Class2

  22 pages
• HTML Intro

  

  No ratings yet

  HTML Intro

  29 pages
• WD Unit 1

  

  No ratings yet

  WD Unit 1

  7 pages
• HTML free notes

  

  No ratings yet

  HTML free notes

  33 pages
• Zita - Lifelo 1587044694 A

  

  No ratings yet

  Zita - Lifelo 1587044694 A

  105 pages
• HTML-Chapter 1 - 4

  

  No ratings yet

  HTML-Chapter 1 - 4

  111 pages
• HTML Tags: Tagname /tagname

  

  No ratings yet

  HTML Tags: Tagname /tagname

  14 pages
• Html4, W3School: !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML

  

  No ratings yet

  Html4, W3School: !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML

  10 pages
• Design-G10-Part 1

  

  No ratings yet

  Design-G10-Part 1

  26 pages
• What is HTML

  

  No ratings yet

  What is HTML

  63 pages
• Website Development

  

  No ratings yet

  Website Development

  193 pages
• What Is HTML

  

  No ratings yet

  What Is HTML

  66 pages
• html fnl

  

  No ratings yet

  html fnl

  89 pages
• HTML Notes

  

  No ratings yet

  HTML Notes

  21 pages
• html_css

  

  No ratings yet

  html_css

  40 pages
• HTML

  

  No ratings yet

  HTML

  110 pages
• HTML&CSS Bells

  

  No ratings yet

  HTML&CSS Bells

  230 pages
• HTML5 Notes

  

  No ratings yet

  HTML5 Notes

  39 pages
• ppt html 1

  

  No ratings yet

  ppt html 1

  33 pages
• HTML notes 2

  

  No ratings yet

  HTML notes 2

  6 pages
• HTML Notes

  

  No ratings yet

  HTML Notes

  2 pages
• Html5: !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML

  

  No ratings yet

  Html5: !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML

  17 pages
• HTML Tags: Markup: Markup Language Is Designed To Process, Define and Present Text

  

  No ratings yet

  HTML Tags: Markup: Markup Language Is Designed To Process, Define and Present Text

  80 pages
• Module1 HTML Doc

  

  No ratings yet

  Module1 HTML Doc

  192 pages
• Web Technology Unit 2 Part 1

  

  No ratings yet

  Web Technology Unit 2 Part 1

  21 pages
• HTML Basics

  

  No ratings yet

  HTML Basics

  28 pages
• HTM_ Lab_Materials

  

  No ratings yet

  HTM_ Lab_Materials

  85 pages
• Chapter 2 - Introduction to HTML

  

  No ratings yet

  Chapter 2 - Introduction to HTML

  59 pages
• HTML5 COURSE

  

  No ratings yet

  HTML5 COURSE

  51 pages
• HTML

  

  No ratings yet

  HTML

  14 pages
• HTML 5 Slides

  

  No ratings yet

  HTML 5 Slides

  95 pages
• HTML-Chapter 1 - 4

  

  100% (1)

  HTML-Chapter 1 - 4

  126 pages
• text formating tag

  

  No ratings yet

  text formating tag

  31 pages
• HTML 1

  

  No ratings yet

  HTML 1

  43 pages
• Unit - 1 HTML

  

  No ratings yet

  Unit - 1 HTML

  110 pages
• HTML SYlABUS

  

  No ratings yet

  HTML SYlABUS

  50 pages
• HTML Notes

  

  No ratings yet

  HTML Notes

  30 pages
• html

  

  No ratings yet

  html

  54 pages
• HTML Course

  

  No ratings yet

  HTML Course

  9 pages
• What Is HTML?: Start Tag Element Content End Tag

  

  No ratings yet

  What Is HTML?: Start Tag Element Content End Tag

  6 pages
• HTML Codes N Tags

  

  100% (1)

  HTML Codes N Tags

  183 pages
• CBT_HTML_Ver 9.0

  

  No ratings yet

  CBT_HTML_Ver 9.0

  131 pages
• 1 HTML

  

  No ratings yet

  1 HTML

  45 pages
• Editors: Write HTML Using Notepad or Textedit

  

  No ratings yet

  Editors: Write HTML Using Notepad or Textedit

  53 pages
• What Is HTML

  

  No ratings yet

  What Is HTML

  14 pages
• !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML

  

  No ratings yet

  !doctype HTML Head Title /title /head Body h1 /h1 P /P /body /HTML

  11 pages
• HTML

  

  No ratings yet

  HTML

  45 pages
• HyperText Markup Language New Lesson

  

  No ratings yet

  HyperText Markup Language New Lesson

  169 pages
• HTML Notes

  

  No ratings yet

  HTML Notes

  18 pages
• HTML UNIT 1-Merged

  

  No ratings yet

  HTML UNIT 1-Merged

  3 pages
• Abros TT

  

  No ratings yet

  Abros TT

  1,185 pages
• PKM2013 Web Design Marking Scheme Complete

  

  No ratings yet

  PKM2013 Web Design Marking Scheme Complete

  16 pages
• Css Flex Box Cheat Sheet

  

  No ratings yet

  Css Flex Box Cheat Sheet

  16 pages
• Learn HTML and CSS From Scratch - 10 Easy Steps

  

  No ratings yet

  Learn HTML and CSS From Scratch - 10 Easy Steps

  1 page
• Choropleth Map of The World: Blue To Red Life Expectancy at Birth in Years

  

  No ratings yet

  Choropleth Map of The World: Blue To Red Life Expectancy at Birth in Years

  7 pages
• Sedna Reporting Features

  

  No ratings yet

  Sedna Reporting Features

  13 pages
• Mitsubishi Color 2010

  

  No ratings yet

  Mitsubishi Color 2010

  13 pages
• CSS Buttons

  

  No ratings yet

  CSS Buttons

  11 pages
• Online Exam Report

  

  No ratings yet

  Online Exam Report

  23 pages
• LRV Reference Table

  

  No ratings yet

  LRV Reference Table

  6 pages
• CSS Lab

  

  No ratings yet

  CSS Lab

  5 pages
• Manik Mahajan: Curriculum Vitae

  

  No ratings yet

  Manik Mahajan: Curriculum Vitae

  5 pages
• Detailed Lesson Plan: I. Learning Objectives

  

  No ratings yet

  Detailed Lesson Plan: I. Learning Objectives

  6 pages
• Udacity Nanodegree Style Guide HTML

  

  No ratings yet

  Udacity Nanodegree Style Guide HTML

  10 pages
• Ionicons v2.0.0

  

  No ratings yet

  Ionicons v2.0.0

  92 pages
• HTML, JS, PHP, Ajax

  

  No ratings yet

  HTML, JS, PHP, Ajax

  218 pages
• WordPress Genius Guide Volume 2

  

  100% (3)

  WordPress Genius Guide Volume 2

  180 pages
• STEFANIK Komiks Ukážka

  

  No ratings yet

  STEFANIK Komiks Ukážka

  11 pages
• Professional Summary:: Senior UI Engineer With 4 Yrs Experience

  

  No ratings yet

  Professional Summary:: Senior UI Engineer With 4 Yrs Experience

  3 pages
• Activity 4-1: Creating Styles and Selectors

  

  No ratings yet

  Activity 4-1: Creating Styles and Selectors

  5 pages
• Vignette PortalDevGuideLD1

  

  No ratings yet

  Vignette PortalDevGuideLD1

  516 pages
• Portfolio: by Jenna Bell

  

  No ratings yet

  Portfolio: by Jenna Bell

  13 pages
• Sorastro's Paint Conversion Chart - Sheet1

  

  No ratings yet

  Sorastro's Paint Conversion Chart - Sheet1

  4 pages
• Bootstrap Forms

  

  No ratings yet

  Bootstrap Forms

  8 pages
• Advanced CSS - Page Layout

  

  No ratings yet

  Advanced CSS - Page Layout

  48 pages
• Css Cheat Sheet

  

  100% (1)

  Css Cheat Sheet

  2 pages
• Soal Bahasa Inggris Bab Colors Warna-Warna Dan Kunci Jawaban

  

  100% (7)

  Soal Bahasa Inggris Bab Colors Warna-Warna Dan Kunci Jawaban

  8 pages
• Edu Prek Colors092817

  

  No ratings yet

  Edu Prek Colors092817

  32 pages