HTML Note

HTML INTRODUCTION
What is HTML?
 stands for Hyper Text Markup Language
 is the standard markup language for creating

Web pages
 describes the structure of a Web page
 consists of a series of elements
 elements tell the browser how to display the

content
 elements label pieces of content such as "this is a
heading", "this is a paragraph", "this is a link",

etc.
A Simple HTML Document
Example:-
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>

<p>My first paragraph.</p>
</body>
</html>
Example Explained
 The <!DOCTYPE html> declaration defines that this
document is an HTML5 document
 The <html> element is the root element of an HTML page
 The <head> element contains meta information about the
HTML page
 The <title> element specifies a title for the HTML page (which
is shown in the browser's title bar or in the page's tab)
 The <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.
 The <h1> element defines a large heading
 The <p> element defines a paragraph
What is an HTML Element?
 An HTML element is defined by a start tag, some
content, and an end tag:
<tagname> Content goes here... </tagname>

The HTML element is everything from the start tag to
the end tag:
CONT….
START TAG ELEMENT TAG END TAG
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> NONE NONE

HTML Editors
Learn HTML Using Notepad
 Web pages can be created and modified by using
professional HTML editors.

 However, for learning HTML we recommend a
simple text editor like Notepad (PC).

 We believe that using a simple text editor is a good
way to learn HTML.

Follow the steps below to create your first web page
with Notepad
CONT……
Step 1: Open Notepad (PC)

Windows 8 or later:
1. Open the Start Screen (the window symbol at the
bottom left on your screen). Type Notepad.
Windows 7 or earlier:
2. Open Start > Programs > Accessories > Notepad
Step 2: Write Some HTML

Write or copy the following HTML code into Notepad:
CONT…..
<!DOCTYPE html>
<html>
<body>
</body>
</html>
CONT…..
Step 3: 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).
CONT…
Step 4: 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").
The result will look much like this:
The Meaning of <!DOCTYPE html>
 The very first line in every web document should
contain a <!DOCTYPE html> declaration. Even
though it's wrapped in angle brackets, it is not a tag
but a statement.
 Doctype stands for Document Type Declaration. It
informs the web browser about the type and version
of HTML used in building the web document. This
helps the browser to handle and load it properly.
 When an HTML page is missing a Document Type
Definition (DOCTYPE or DTD) declaration, the
browser won't be able to interpret it correctly
Cont.…
 If document type is not mentioned, browser will
go to Quirks mode. Quirks mode depends upon
the web browser version, If is older version then
this will not support HTML5 tags (Example:
header tag, footer tag, section tag,...)
What is <br> Tag in HTML?
 In HTML, <br> tag breaks the current line and
starts a new line. This practice is helpful while

writing multiple paragraphs, quotations, or any
text that needs separation from the previous
line/text.
UTF-8 (Unicode Transformation Format)
 UTF-8 is a Unicode character encoding method.

This means that UTF-8 takes the code point for
a given Unicode character and translates it into
a string of binary. It also does the reverse,
reading in binary digits and converting them
back to characters.
Example
To create the simple page that contains the phrase “hello world” in the body and this
is line one paragraph, "this is line two paragraph” in the paragraph.
<!DOCTYPE html>
<html>
<head>
<title>a simple web page</title>
</head>
<body>
<h1>hello world</h1>
<p>This is a line one paragraph.</p>
<p1>This is a line two paragraph.</p1>
</body>
</html>
HTML Basic Examples
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>.

The <!DOCTYPE> Declaration
 The <!DOCTYPE> declaration represents the

document type, and helps browsers to display
web pages correctly.
 It must only appear once, at the top of the page
(before any HTML tags).
 The <!DOCTYPE> declaration is not case
sensitive.
 The <!DOCTYPE> declaration for HTML5 is:
 <!DOCTYPE html>
Cont.…
<!DOCTYPE html>
<html>
<body>

</body>
</html>
HTML Headings
 HTML headings are defined with the <h1> to

<h6> tags.
 <h1> defines the most important heading.

<h6> defines the least important heading:
Example
<h1>This is heading 1</h1>
HTML Paragraphs
 HTML paragraphs are defined with the <p> tag:

Example
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
HTML Links
 HTML links are defined with the <a> tag:
E.g. <a href="https://www.w3schools.com">This is a link</a>
 The link's destination is specified in the href attribute.
 the href attribute link (short for “Hypertext REFerence”) indicates
the relationship between pages to search engines
 Attributes are used to provide additional information about HTML
elements.
Output
HTML Links
HTML links are defined with the a tag:
Cont.…
<!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:
Example
 <img src="w3schools.jpg" alt="W3Schools.com"
width="104" height="142">
Output
 HTML Images
 HTML images are defined with the img tag:

Cont.…
<!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>
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
co
HTML Elements
An HTML element is defined by a start tag, some content,

and an end tag.
HTML Elements
 The HTML element is everything from the start tag to the
end tag:
 <tagname>Content goes here...</tagname>

Examples of some HTML elements:

Cont.….
Start tag Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none

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:

 Example
 <p>This is a <br> paragraph with a line break.</p>
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
<!DOCTYPE html>
<html>
<body>

</body>
</html>
HTML is Not Case Sensitive
 HTML tags are not case sensitive: <P> means

the same as <p>.
HTML Tag Reference
 Tag Description
 <html> =Defines the root of an HTML
document
 <body>=Defines the document's body
 <h1> to <h6>=Defines HTML headings

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:
Cont.….
 Example
 <a href="https://www.w3schools.com">Visit
W3Schools</a>
HTML Links
 HTML links are hyperlinks.
 Note: A link does not have to be text. A link can be an
image or any other HTML element!

 Syntax
 The HTML <a> tag defines a hyperlink. It has the
following syntax:
 <a href="url">link text</a>
 The most important attribute of the <a> element is the href
attribute, which indicates the link's destination.

 The link text is the part that will be visible to the reader.
Example
This example shows how to create a link to W3Schools.com:
<a href="https://www.w3schools.com/">Visit
W3Schools.com!</a>
 By default, links will appear as follows in all browsers:
 An unvisited link is underlined and blue

 A visited link is underlined and purple
 An active link is underlined and red
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:
Cont.
_self - Default. Opens the document in the same
window/tab as it was clicked
_blank - Opens the document in a new window or
tab
_parent - Opens the document in the parent frame
_top - Opens the document in the full body of the
window
Example
Cont.…
Try it yourself
Visit W3Schools
If target="_blank", the link will open in a new browser window or
tab.
<!DOCTYPE html>
<html>
<body>
<h2>The target Attribute</h2>
<a href="https://www.w3schools.com/" target="_blank">Visit
W3Schools!</a>
<p>If target="_blank", the link will open in a new browser
window or tab.</p>
</body>
</html>
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):
 Example
Try it yourself
Absolute URLs
W3C
Google
Relative URLs
HTML Images
CSS Tutorial
Cont.
<!DOCTYPE html>
<html>
<body>
<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>
</body>
</html>
HTML Links - Use an Image as a Link
To use an image as a link, just put the <img> tag inside the <a> tag:
Example
Image as a Link
The image below is a link. Try to click on it.
HTML tutorial
<!DOCTYPE html>
<html>
<body>
<h2>Image as a Link</h2>
<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>
</body>
</html>
Link to an Email Address
 Use mailto: inside the href attribute to create a link that opens
the user's email program (to let them send a new email):
 Example
<!DOCTYPE html>
<html>
<body>
<h2>Link to an Email Address</h2>
<p>To create a link that opens in the user's email program (to let
them send a new email), use mailto: inside the href attribute:</p>
<p><ahref="mailto:someone@example.com">Send
email</a></p>
</body>
</html>
Summary
 Use the <a> element to define a link

 Use the href attribute to define the link address
 Use the target attribute to define where to open
the linked document
 Use the <img> element (inside <a>) to use an
image as a link
 Use the mailto: scheme inside the href attribute
to create a link that opens the user's email
program
The src Attribute

HTML Note

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML Note

Uploaded by

Copyright:

Available Formats

HTML INTRODUCTION

 is the standard markup language for creating

 consists of a series of elements

 elements tell the browser how to display the

heading", "this is a paragraph", "this is a link",

<h1>My First Heading</h1>

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

<p> My first paragraph. </p>

<br> NONE NONE

professional HTML editors.

simple text editor like Notepad (PC).

way to learn HTML.

Step 1: Open Notepad (PC)

Step 2: Write Some HTML

<h1>My First Heading</h1>

<p>My first paragraph.</p>

Save as in the Notepad menu.

to UTF-8 (which is the preferred encoding for

starts a new line. This practice is helpful while

 UTF-8 is a Unicode character encoding method.

document type declaration: <!DOCTYPE

with <html> and ends with </html>.

between <body> and </body>.

 The <!DOCTYPE> declaration represents the

<h1>My First Heading</h1>

 HTML headings are defined with the <h1> to

 <h1> defines the most important heading.

 HTML paragraphs are defined with the <p> tag:

(alt), width, and height are provided as

 HTML images are defined with the img tag:

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

View HTML Source Code:

Page Source" (in Chrome) or "View Source" (in

An HTML element is defined by a start tag, some content,

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

<h1>My First Heading</h1>

<br> none none

element without a closing tag:

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

Nested HTML Elements

elements can contain other elements).

(<html>, <body>, <h1> and <p>):

<h1>My First Heading</h1>

 HTML tags are not case sensitive: <P> means

 <h1> to <h6>=Defines HTML headings

 Attributes usually come in name/value pairs

attribute specifies the URL of the page the link

 Note: A link does not have to be text. A link can be an

image or any other HTML element!

 The HTML <a> tag defines a hyperlink. It has the

 The most important attribute of the <a> element is the href

attribute, which indicates the link's destination.

 An unvisited link is underlined and blue

 Use the <a> element to define a link

You might also like