Scribd
Upload
3 views

HTML NOTES

This document provides comprehensive notes on HTML, covering essential elements such as document structure, headings, paragraphs, links, images, and attributes. It explains how to format text, create hyperlinks, and use CSS for styling. Additionally, it includes best practices for using absolute and relative URLs, as well as various HTML tags for quotations, abbreviations, and comments.

Uploaded by

Anshaj Shukla
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
3 views

HTML NOTES

This document provides comprehensive notes on HTML, covering essential elements such as document structure, headings, paragraphs, links, images, and attributes. It explains how to format text, create hyperlinks, and use CSS for styling. Additionally, it includes best practices for using absolute and relative URLs, as well as various HTML tags for quotations, abbreviations, and comments.

Uploaded by

Anshaj Shukla
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 15

HTML NOTES

HTML is Not Case Sensitive

HTML Documents
All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>.

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 Link
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 Elements
The HTML element is everything from the start tag to the end tag:

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

Nested HTML Elements


HTML elements can be nested (this means that elements can contain other elements).

All HTML documents consist of nested HTML elements.

The following example contains four HTML elements ( <html>, <body>, <h1> and <p>):

Example Explained
The <html> element is the root element and it defines the whole HTML document.

It has a start tag <html> and an end tag </html>.

Then, inside the <html> element there is a <body> element:

Empty HTML Elements


HTML elements with no content are called empty elements.

The <br> tag defines a line break, and is an empty element without a closing tag:

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

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

There are 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".

Notes: External images might be under copyright. If you do not get permission to use it,
you may be in violation of copyright laws. In addition, you cannot control external images;
it can suddenly be removed or changed.

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 the URL begins with a slash, it will be
relative to the domain. Example: src="/images/img_girl.jpg".

Tip: It is almost always best to use relative URLs. They will not break if you change
domain.

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

SINGLE AND DOUBLE QUOTES

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

HTML Headings
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>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

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.

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

With HTML, you cannot change the display by adding extra spaces or extra lines in your
HTML code.

The browser will automatically remove any extra spaces and lines when the page is
displayed

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>

TML 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 Poem Problem


This poem will display on a single line:

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


</p>

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

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


Setting the style of an HTML element, can be done with the style attribute.
The HTML style attribute has the following syntax:

<tagname style="property:value;">

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

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

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

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>
Chapter Summary
 Use the style attribute for styling HTML elements
 Use background-color for background color
 Use color for text colors
 Use font-family for text fonts
 Use font-size for text size
 Use text-align for text alignment

HTML Text Formatting


HTML contains several elements for defining text with a special meaning.

Formatting elements were designed to display special types of text:

 <b> - Bold text


 <i> - Italic text
 <mark> - Marked text- color the background
 <small> - Smaller text
 <del> - Deleted text
 <ins> - Inserted text - underline
 <sub> - Subscript text
 <sup> - Superscript text
HTML Quotation and Citation
Elements
HTML <blockquote> for Quotations
The HTML <blockquote> element defines a section that is quoted from another source.

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

<blockquote cite="http://www.worldwildlife.org/who/index.html">

For nearly 60 years, WWF has been protecting the future of nature.

</blockquote>

OUTPUT

Browsers usually indent blockquote elements.

For nearly 60 years, WWF has been protecting the future of nature.

HTML <q> for Short Quotations


The HTML <q> tag defines a short quotation.

<p>Browsers usually insert quotation marks around the q element.</p>

<p>WWF's goal is to: <q>Build a future where people live in harmony with
nature.</q></p>

OUTPUT

Browsers usually insert quotation marks around the q element.

WWF's goal is to: “Build a future where people live in harmony with nature.”

HTML <abbr> for Abbreviations


The HTML <abbr> tag defines an abbreviation or an acronym, like "HTML", "CSS", "Mr.",
"Dr.", "ASAP", "ATM".
<p>The <abbr title="World Health Organization">WHO</abbr> was
founded in 1948.</p>

<p>Marking up abbreviations can give useful information to browsers,


translation systems and search-engines.</p>

The WHO(on putting mouse on WHO it will show full form) was founded in
1948.

Marking up abbreviations can give useful information to browsers,


translation systems and search-engines.

HTML <address> for Contact Information


The HTML <address> tag defines the contact information for the author/owner of a
document or an article.

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

The HTML address element defines contact information (author/owner) of a


document or article.

Written by John Doe.


Visit us at:
Example.com
Box 564, Disneyland
USA
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>The HTML cite element defines the title of a work.</p>

<p>Browsers usually display cite elements in italic.</p>

<img src="img_the_scream.jpg" width="220" height="277" alt="The


Scream">

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

The HTML cite element defines the title of a work.

Browsers usually display cite elements in italic.

The Scream by Edvard Munch. Painted in 1893.

HTML Comments
Comments can be used to hide content.

This can be helpful if you hide content temporarily:

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

<!-- <p>This is another paragraph </p> -->


<p>This is a paragraph too.</p>
HTML Colors
Background Color
You can set the background color for HTML elements:

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

Hello World

Text Color
You can set the color of text:

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


Hello World

Border Color
You can set the color of borders:

<h1 style="border: 2px solid Tomato;">Hello World</h1>

Hello World

HTML Links
HTML Links - Syntax
The HTML <a> tag defines a hyperlink. It has the following syntax:

<a href="url">link text</a>

This example shows how to create a link to W3Schools.com:

<a href="https://www.w3schools.com/">Visit W3Schools.com!</a>


HTML Links - The target Attribute
By default, the linked page will be displayed in the current browser window. To change
this, you must specify another target for the link.

The target attribute specifies where to open the linked document.

The target attribute can have one of the following values:

 _self - Default. Opens the document in the same window/tab as it was clicked
 _blank - Opens the document in a new window or tab

Absolute URLs vs. Relative URLs


Both examples above are using an absolute URL (a full web address) in
the href attribute.

A local link (a link to a page within the same website) is specified with a relative
URL (without the "https://www" part):

<h2>Absolute URLs</h2>
<p><a href="https://www.w3.org/">W3C</a></p>
<p><a href="https://www.google.com/">Google</a></p>

<h2>Relative URLs</h2>
<p><a href="html_images.asp">HTML Images</a></p>
<p><a href="/css/default.asp">CSS Tutorial</a></p>

HTML Links - Use an Image as a Link


To use an image as a link, just put the <img> tag inside the <a> tag:

<p>The image below is a link. Try to click on it.</p>

<a href="default.asp"><img src="smiley.gif" alt="HTML tutorial"


style="width:42px;height:42px;"></a>

Image as a Link
The image below is a link. Try to click on it.
smily face with link

Button as a Link
To use an HTML button as a link, you have to add some JavaScript code.

JavaScript allows you to specify what happens at certain events, such as a click of a
button:

Example
<button onclick="document.location='default.asp'">HTML Tutorial</button>

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>
Title – mouse leke jaane se title dikha dega

Create a Bookmark in HTML


Bookmarks can be useful if a web page is very long.

To create a bookmark - first create the bookmark, then add a link to it.

When the link is clicked, the page will scroll down or up to the location with the bookmark.

Example
First, use the id attribute to create a bookmark:
<p><a href="#C4">Jump to Chapter 4</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>

You might also like