0% found this document useful (0 votes)

12 views

HTML Notes

The document provides information about HTML elements and tags. It describes common HTML elements like headings, paragraphs, links, images and how to style text. It also covers HTML attributes and nested elements.

Uploaded by

yonghacart

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

12 views

HTML Notes

Uploaded by

yonghacart

Available Formats

Download as DOCX, PDF, TXT or read online on Scribd

You are on page 1/ 21

HTML Notes

<p title ="About W3Schools">W3Schools is a web developer's site.</p>

- tooltip

HTML (Hyper Text Markup Language)

- standard markup language for creating Web pages
- describes the structure of a Web page
- consists of a series of elements
- HTML elements tell the browser how to display the content
- HTML elements label pieces of content such as "this is a heading", "this is a
paragraph", "this is a link", etc.
- is not case sensitive.

Example:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>
<a href="https://www.w3schools.com">This is a link</a>
<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">

</body>
</html>

Example Explained:
 <!DOCTYPE html> declaration defines that this document is an HTML5
document.
- represents the document type and helps browsers to display web pages
correctly.
- must only appear once, at the top of the page (before any HTML tags).
- is not case sensitive.
 <html> element is the root element of an HTML page.
 <head> element contains meta information about the HTML page.
 <title> element specifies a title for the HTML page (which is shown in the
browser's title bar or in the page's tab).
 <body> element defines the document's body, and is a container for all the
visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists,
etc.
 <h1> element defines a large heading.
- <h1> defines the most important heading. <h6> defines the least important
heading.
 <p> element defines a paragraph.
 <a> defines HTML links.
- the link's destination is specified in the href attribute.
 <img> defines HTML images
- the source file (src), alternative text (alt), width, and height are provided as
attributes

The content inside the <body> section will be displayed in a browser. The content inside
the <title> element will be shown in the browser's title bar or in the page's tab.

An HTML element is defined by a start tag, some content, and an end tag:
<start tag> Content goes here... </end tag>

Empty elements do not have an end tag.

- have no content (like the <br> element).

Web Browsers - read HTML documents and display them correctly.

- does not display the HTML tags, but uses them to determine how to display the
document.
Nested HTML Elements
HTML elements can be nested (this means that elements can contain other elements).
All HTML documents consist of nested HTML elements.

HTML Attributes
All HTML elements can have attributes.
Attributes provide additional information about elements.
Attributes are always specified in the start tag.
Attributes usually come in name/value pairs like: name="value".

The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of the page the link
goes to:
<a href="https://www.w3schools.com">Visit W3Schools</a>

The src Attribute

The <img> tag is used to embed an image in an HTML page. The src attribute specifies
the path to the image to be displayed:
<img src="img_girl.jpg">

Two ways to specify the URL in the src attribute:

1. Absolute URL - Links to an external image that is hosted on another website.
Example: src="https://www.w3schools.com/images/img_girl.jpg".
2. Relative URL - Links to an image that is hosted within the website. Here, the
URL does not include the domain name. If the URL begins without a slash, it will
be relative to the current page. Example: src="img_girl.jpg". If a URL begins with
a slash ("/"), it is considered a root-relative URL, meaning it is relative to the root
directory of the website. Example: src="/images/img_girl.jpg".
The width and height Attributes
The <img> tag should also contain the width and height attributes, which specify the
width and height of the image (in pixels):
<img src="img_girl.jpg" width="500" height="600">

The alt Attribute

The required alt attribute for the <img> tag specifies an alternate text for an image, if the
image for some reason cannot be displayed. This can be due to a slow connection, or
an error in the src attribute, or if the user uses a screen reader.
<img src="img_girl.jpg" alt="Girl with a jacket">

The style Attribute

The style attribute is used to add styles to an element, such as color, font, size, and
more.
<p style="color:red;">This is a red paragraph.</p>

The lang Attribute

It declares the language of the Web page. This is meant to assist search engines and
browsers.
<!DOCTYPE html>
<html lang="en">
<body>
...
</body>
</html>
Country codes can also be added to the language code in the lang attribute. So, the first
two characters define the language of the HTML page, and the last two characters
define the country.
<!DOCTYPE html>
<html lang="en-US">
<body>
...
</body>
</html>

The title Attribute

The title attribute defines some extra information about an element.
The value of the title attribute will be displayed as a tooltip when you mouse over the
element:
<p title="I'm a tooltip">This is a paragraph.</p>

HTML Headings
HTML headings are titles or subtitles that are displayed on a webpage.
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
<h1 style="font-size:60px;">Heading 1</h1>

HTML Paragraphs
The HTML <p> element defines a paragraph.
A paragraph always starts on a new line, and browsers automatically add some white
space (a margin) before and after a paragraph.
The browser will automatically remove any extra spaces and lines when the page is
displayed.
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>

HTML Line Breaks

The HTML <br> element defines a line break. The <br> tag is an empty tag, which
means that it has no end tag.
<p>This is<br>a paragraph<br>with line breaks.</p>

<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>
HTML Styles
The HTML style attribute is used to add styles to an element, such as color, font, size,
and more.
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.
<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:
<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:
<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:
<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:
<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>

HTML Formatting Elements

Formatting elements were designed to display special types of text:
 <b> - Bold text
 <strong> - Important text
- typically displayed in bold
 <i> - Italic text
- defines a part of text in an alternate voice or mood.
- often used to indicate a technical term, a phrase from another language, a
thought, a ship name, etc.
 <em> - Emphasized text
- typically displayed in italic.
- a screen reader will pronounce the words in <em> with an emphasis, using
verbal stress.
 <mark> - Marked or highlighted text
 <small> - Smaller text
 <del> - Deleted text
- usually strike a line through deleted text
 <ins> - Inserted text
- usually underline inserted text
 <sub> - Subscript text
- appears half a character below the normal line, and is sometimes rendered in a
smaller font.
- can be used for chemical formulas, like H2O
 <sup> - Superscript text
- appears half a character above the normal line, and is sometimes rendered in a
smaller font.
- an be used for footnotes, like WWW[1]

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 60 years, WWF has worked to help people and nature thrive. As the world's
leading conservation organization, WWF works in nearly 100 countries. At every
level, we collaborate with people around the world to develop and deliver
innovative solutions that protect communities, wildlife, and the places in which
they live.
</blockquote>

HTML <q> for Short Quotations

The HTML <q> tag defines a short quotation.
Browsers normally insert quotation marks around the quotation.
<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>

HTML <abbr> for Abbreviations

The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS",
"Mr.", "Dr.", "ASAP", "ATM".
Marking abbreviations can give useful information to browsers, translation systems and
search-engines.
Tip: Use the global title attribute to show the description for the abbreviation/acronym
when you mouse over the element.
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in
1948.</p>
HTML <address> for Contact Information
The HTML <address> tag defines the contact information for the author/owner of a
document or an article.
The contact information can be an email address, URL, physical address, phone
number, social media handle, etc.
The text in the <address> element usually renders in italic, and browsers will always
add a line break before and after the <address> 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> tag defines the title of a creative work (e.g. a book, a poem, a song, a
movie, a painting, a sculpture, etc.).
Note: A person's name is not the title of a work.
The text in the <cite> element usually renders in italic.
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

HTML <bdo> for Bi-Directional Override

BDO stands for Bi-Directional Override.
The HTML <bdo> tag is used to override the current text direction:
<bdo dir="rtl">This text will be written from right to left</bdo>
HTML Comment Tag
Comments are not displayed by the browser, but they can help document an HTML
source code.

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

Hide Content
Comments can be used to hide content.
<p>This is a paragraph.</p>

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

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

<p>This is a paragraph too.</p>
Comments are also great for debugging HTML, because the user can comment out
HTML lines of code, one at a time, to search for errors.

Hide Inline Content

Comments can be used to hide parts in the middle of the HTML code.
<p>This  is a paragraph.</p>
HTML Colors
HTML colors are specified with predefined color names, or with RGB, HEX, HSL,
RGBA, or HSLA values.

Color Names
In HTML, a color can be specified by using a color name:

Background Color

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<p style="background-color:Tomato;">Lorem ipsum...</p>

<h1 style="color:Tomato;">Hello World</h1>

<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Border Color

<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.
The following three <div> elements have their background color set with RGB, HEX,
and HSL values:
<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>

HTML RGB and RGBA Colors

An RGB color value represents RED, GREEN, and BLUE light sources.
An RGBA color value is an extension of RGB with an Alpha channel (opacity).
RGB Color Values
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 with a value
between 0 and 255.
This means that there are 256 x 256 x 256 = 16777216 possible colors!
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value
(255), and the other two (green and blue) are set to 0.
Another example, rgb(0, 255, 0) is displayed as green, because green is set to its
highest value (255), and the other two (red and blue) 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).
Example:

Shades of Gray
Shades of gray are often defined using equal values for all three parameters:
RGBA Color Values
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):
Example:

HTML HEX Colors

A hexadecimal color is specified with: #RRGGBB, where the RR (red), GG (green) and
BB (blue) hexadecimal integers specify the components of the color.

HEX Color Values

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 other two (green and blue) are set to 00.
Another example, #00ff00 is displayed as green, because green is set to its highest
value (ff), and the other two (red and blue) are set to 00.
To display black, set all color parameters to 00, like this: #000000.
To display white, set all color parameters to ff, like this: #ffffff.
Example:

Shades of Gray
Shades of gray are often defined using equal values for all three parameters:

HTML HSL and HSLA Colors

HSL stands for hue, saturation, and lightness.
HSLA color values are an extension of HSL with an Alpha channel (opacity).

HSL Color Values

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 value. 0% is black, and 100% is white.
Example:

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.

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), and
100% means full lightness (white).

Shades of Gray
Shades of gray are often defined by setting the hue and saturation to 0, and adjusting
the lightness from 0% to 100% to get darker/lighter shades:
What is CSS?
Cascading Style Sheets (CSS) is used to format the layout of a webpage.
The word cascading means that a style applied to a parent element will also apply to all
children elements within the parent.

Using CSS
CSS can be added to HTML documents in 3 ways:
 Inline - by using the style attribute inside HTML elements
 Internal - by using a <style> element in the <head> section
 External - by using a <link> element to link to an external CSS file
The most common way to add CSS, is to keep the styles in external CSS files.

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.
The following example sets the text color of the <h1> element to blue, and the text color
of the <p> element to red:
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>