Scribd
Upload
22 views14 pages

Unit I - Nme Notes - F

The document provides an introduction to HTML, detailing its history, structure, and key components such as the head and body sections. It covers various HTML versions, the significance of the <title> tag, and how to create links and set colors in web pages. Additionally, it emphasizes the importance of metadata and comments in HTML coding.

Uploaded by

ahilanellaiappan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
22 views14 pages

Unit I - Nme Notes - F

The document provides an introduction to HTML, detailing its history, structure, and key components such as the head and body sections. It covers various HTML versions, the significance of the <title> tag, and how to create links and set colors in web pages. Additionally, it emphasizes the importance of metadata and comments in HTML coding.

Uploaded by

ahilanellaiappan
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 14

UNIT I – Introduction to HTML: History of HTML- HTML Documents- Head

Sections-Title, Prologue-Links-Colourful Webpage-Comment Lines

HTML

 HTML stands for Hyper Text Markup Language.


 It is used to design web pages.
 HTML describes the structure of a web page.
 HTML is the combination of Hypertext and Markup language.
 Hyper Text: Hyper Text simply means "Text within Text." A text has a link within it,
is a hypertext. Whenever you click on a link which brings you to a new webpage. Hyper
Text is a way to link two or more web pages with each other.
 Markup language: which is used by the browser to manipulate text, images and other
content to display it in required format.
 Web Page: A web page can be identified by entering an URL. A Web page can be of
the static or dynamic type. With the help of HTML only, we can create static web pages.
 HTML elements are represented by tags.
 HTML tags, label pieces of content such as "heading", "paragraph", "table", and so on.
 Browsers do not display the HTML tags, but use them to render the content of the page.
HISTORY OF HTML:

HTML was created by Sir Tim Berners-Lee in late 1991 but was not released officially,
which was published in 1995 as HTML 2.0. HTML 4.01 was published in late 1999 and was a
major version of HTML.
HTML is a markup language and has evolved with various versions updating. Each version has
allowed its user to create web pages in the much easier and prettier way and make sites very
efficient.

1. HTML 1.0 was released in 1993 with the intention of sharing information which can be
readable and accessible via web browsers. But not much of the developers were
involved in creating websites. So the language was also not growing.
2. Then comes the HTML 2.0, published in 1995; which contains all the features of HTML
1.0 along with that few additional features; which remained as the standard markup
language for designing and creating websites until January 1997 and refined various
core features of HTML.

3. Then comes the HTML 3.0, where Dave Raggett who introduced a fresh paper or draft
on HTML. It included improved new features of HTML, giving more powerful
characteristics for webmasters in designing web pages. But these powerful features of
new HTML slowed down the browser in applying further improvements.

4. Then comes the HTML 4.01 which is widely used and was a successful version of
HTML before HTML 5.0, which is currently released and used worldwide. HTML 5
can be said for as an extended version of HTML 4.01 which was published in the
year 2012.

5. HTML continued to grow, with new, powerful, and exciting tags. We


got <background>, <frame>, <font>, and of course, <blink>. Microsoft jumped into
the game, and <marquee>, <iframe>, and <bgsound> started competing for room in the
spec.

Note: The <iframe> tag specifies an inline frame.


inline frame is used to embed another document within the current HTML document.
HTML Versions:
Version Year
HTML 1991
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 2000
HTML 5 2014

HTML DOCUMENTS:

An HTML document is divided into two parts:

 Head part- The title and metadata of a web document are contained in the head
element.
 Body part- The body element includes the information that you wish to display on a
web page. To make your web pages HTML 4 compatible, include a document type
declaration (DTD) before the HTML element.
Basic Structure of HTML

An HTML document's basic structure consists of5 elements:

 <!DOCTYPE>
 <html>
 <head>
 <title>
 <body>
<!DOCTYPE>
 It is referred as the document type declaration (DTD).
 It is an instruction to the browser regarding the document type.
 It is a null element that does not have a closing tag and must not contain any content.

<html>
 The <html> tag informs the browser that this is an HTML document.
 The <html> tag requires a beginning and ending tag.
 Syntax of the <html> Tag
<!DOCTYPE html>
<html>
...
</html>

<head>
 The <head> tag in HTML is used to contain metadata (data about data).
 It is used between the<html> and <body> tags.
 It only contains HTML document metadata, which specifies information about the
HTML document.
 Depending on our needs, an HTML head might contain a lot of metadata information
or can have very little or no metadata information.
 However, the head section of an HTML document plays an essential role in the
creation of a website.

The following is a list of metadata tags:

 <title>
 <style>
 <meta>
 <link>
 <script>
 <base>

Syntax of the <head> Tag


<!DOCTYPE html>
<html>
<head>
...
</head>

</html>
<title>
 This <title> tag in HTML displays the title of a web page
 It can help in higher rankings in search results if appropriate keywords are included.
 It gives a relevant title to the full HTML content.
 It appears at the top of the browser window
 Syntax of the <title> Tag
<!DOCTYPE html>
<html>
<head>
<title> ... </title>
</head>

</html>

<body>
 The <body> tag in HTML specifies the main content of an HTML document that
appears on the browser.
 It can contain headings, text, paragraphs, photos, tables, links, videos, etc.
 The <body> tag must come after the <head> tag, or it must be inserted between
the </head> and </html> tags.
 This tag is essential for all HTML documents and should only be used once
throughout the document .

Syntax of the <body> Tag


<!DOCTYPE html>
<html>
<head>
<title>Body Tag</title>
</head>
<body>
<h1>...</h1>
<p>...</p>
</body>
</html>

</body>
</html>
HTML Heading Tags (<h1> to <h6> )

 A HTML heading or HTML h tag can be defined as a title or a subtitle which you
want to display on the webpage.
 When you place the text within the heading tags <h1>.........</h1>, it is displayed on
the browser in the bold format and size of the text depends on the number of heading.
 There are six different HTML headings which are defined with the <h1> to <h6> tags,
from highest level h1 (main heading) to the least level h6 (least important heading).
 h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most
important heading and h6 is used for least important.
<! DOCTYPE html>
<html>
<head>
<title>Heading Tags</title>
</head>
<body>
<h1>Heading no. 1</h1>
<h2>Heading no. 2</h2>
<h3>Heading no. 3</h3>
<h4>Heading no. 4</h4>
<h5>Heading no. 5</h5>
<h6>Heading no. 6</h6>
</body>
</html>
HTML Head Section:

 The <head> tag in HTML is used to contain metadata (data about data).
 It is used between the<html> and <body> tags.
 It only contains HTML document metadata, which specifies information about
the HTML document.
 Depending on our needs, an HTML head might contain a lot of metadata information
or can have very little or no metadata information.
 However, the head section of an HTML document plays an essential role in the
creation of a website.

The following is a list of metadata tags:

 <title>
 <style>
 <meta>
 <link>
 <script>
 <base>

Syntax of the <head> Tag


<!DOCTYPE html>
<html>
<head>
...
</head>

</html>

 <title> - The <title> tag defines the title of the document.


 <style>- The style attribute is used to add styles to an element, such as color, font,
size, and more.
 <meta>-Metadata is data (information) about data.
 <link> tag is used to specify the relationship between the current document and
external source.
 <script> - it is used to embed a client-side script (JavaScript).
 <base> -The <base> element is used to identify a base URL upon which to build all
relative URLs that appear on a webpage.
HTML <title> Tag:

 This <title> tag in HTML displays the title of a web page


 It can help in higher rankings in search results if appropriate keywords are included.

 It gives a relevant title to the full HTML content.


 It appears at the top of the browser window
 Syntax of the <title> Tag
<!DOCTYPE html>
<html>
<head>
<title> ... </title>
</head>

</html>

Note:

 Only one <title> tag per document is permitted.

Steps to write Title Tags


1. Write unique titles for every page.

 Every page on the website is unique and the title tags should reflect that.
 Title should accurately describe what’s on that specific page.
 A clear and accurate title is more useful to anyone who sees the page in the search
listings.
2. Pay attention to length.
 Google and other search engines will display 50-60 characters of a title tag in the
search results.
 If the user like to include your brand name in every title tag (which can be a good idea
for recognizable brands), put it at the end, behind the words that describe what’s on
the specific page.
2. Use target keyword (but don’t overdo it).

 Every page on the website should answer a question or provide valuable information
someone will be searching for.

 Google’s algorithm uses the title tag as one of the main ways to determine what a
page is about, it’s a good opportunity to include the main keyword or keywords
targeting for that page.
 That makes it clear to Google that this page is relevant for anyone searching for that
specific term. Just make sure not to fall for keyword stuffing.

4. Be descriptive of what’s on the page.

 The title tag should provide an accurate description of what people will see when they
choose to visit the web page.
 When people’s expectations match what they see on the page, it means a lower
bounce rate and a longer time spent on the site – metrics that signal to Google your
page is valuable and should keep ranking high.

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.
 Note: A link does not have to be text. A link can be an image or any other HTML
element!

HTML Links - 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.
 Clicking on the link text, will send the reader to the specified URL address.
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


 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:
o _self - Default. Opens the document in the same window/tab as it was
clicked
o _blank - Opens the document in a new window or tab
o _parent - Opens the document in the parent frame
o _top - Opens the document in the full body of the window

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

<!DOCTYPE html>
<html>
<head>
<title>Hyperlink Example</title>
<base href = "https://www.tutorialspoint.com/">
</head>
<body>
<p>Click any of the following links</p>
<a href = "/html/index.htm" target = "_blank">Opens in New</a> |
<a href = "/html/index.htm" target = "_self">Opens in self</a> |
<a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
<a href = "/html/index.htm" target = "_top">Opens in Body</a>
</body>
</html>
HTML - Colors

Colors are very important to give a good look and feel to your website. You can specify
colors on page level using <body> tag or you can set colors for individual tags
using bgcolor attribute.
The <body> tag has following attributes which can be used to set different colors −
 bgcolor − sets a color for the background of the page.
 text − sets a color for the body text.
 alink − sets a color for active links or selected links.
 link − sets a color for linked text.
 vlink − sets a color for visited links − that is, for linked text that you have already
clicked on.

HTML Color Coding Methods


There are following three different methods to set colors in your web page −
 Color names − You can specify color names directly like green, blue or red.
 Hex codes − A six-digit code representing the amount of red, green, and blue that
makes up the color.
 Color decimal or percentage values − This value is specified using the rgb( )
property.

HTML Colors - Color Names


 You can specify direct a color name to set text or background color.
 W3C has listed 16 basic color names that will validate with an HTML validator but
there are over 200 different color names supported by major browsers.

Standard 16 Colors

HTML Colors - Hex Codes


 hexadecimal is a 6 digit representation of a color. The first two digits(RR) represent
a red value, the next two are a green value(GG), and the last are the blue value(BB).
 Each hexadecimal code will be preceded by a pound or hash sign #. Following is a
list of few colors using hexadecimal notation.

HTML Colors - RGB Values


 This color value is specified using the rgb( ) property.
 This property takes three values, one each for red, green, and blue.
 The value can be an integer between 0 and 255 or a percentage.
 Note − All the browsers does not support rgb() property of color so it is recommended
not to use it.

<!DOCTYPE html>
<html>

<head>
<title>HTML Colors by Name</title>
</head>
<body text = "blue" bgcolor = "green">
<p>Use different color names for for body and table and see
the result.</p>
</body>

</html>

HTML Comments

 HTML Comments are used to insert comments in the HTML code.


 It is a good practice of coding so that the coder and the reader can get help to
understand the code.
 It is a simple piece of code that is wiped off (ignored) by web browsers i.e., not
displayed by the browser.
Comment Types

There are three types of comments in HTML which are:

 Single-line Comment
 Multi-line Comment
 Using comment tag

Single-line Comment
 The single-line comment is given inside the ( <!– comment –> ) tag.
Syntax
<!-- comment -->

Example:

<!DOCTYPE html>
<html>
<body>
<!--This is single line comment,It wont be displayed by the browser -->
<h2>Hello World</h2>
</body>
</html>

Multi-line Comment
Multiple lines can be given by the syntax (<!– –>), Basically it’s the same as we used in
single line comment, difference is half part of the comment (” –> “), is appended where the
intended comment line ends.
Syntax
<!-- Multi
Line
Comment -->

Example:
<!DOCTYPE html>
<html>
<body>
<!-- This is
multi-line
comment -->
<h2> Hello World </h2>
</body>
</html>

Using comment tag


There used to be an HTML <comment> tag, but currently it is not supported by any modern
browser.
Syntax
<comment> Some Comment </comment>
Example:
<!DOCTYPE html>
<html>
<body>
<comment>This is a comment</comment>
<h2>Hello World</h2>
</body>
</html>

You might also like