INTRODUCTION TO HTML
UNIT-I
1.1 INTRODUCTION WEB BASIC:
INTERNET:
The Internet is essentially a global network of computing resources. You can
think of the Internet as a physical collection of routers and circuits as a set of shared
resources.
Some common definitions given in the past include
A network of networks based on the TCP/IP communications protocol.
A community of people who use and develop those networks.
INTERNET-BASED SERVICES:
Some of the basic services available to Internet users are
Email − A fast, easy, and inexpensive way to communicate with other Internet
users around the world.
Telnet − Allows a user to log into a remote computer as though it were a local
system.
FTP − Allows a user to transfer virtually every kind of file that can be stored on a
computer from one Internet-connected computer to another.
UseNet news − A distributed bulletin board that offers a combination news and
discussion service on thousands of topics.
World Wide Web (WWW) − A hypertext interface to Internet information
resources.
WWW:
WWW stands for World Wide Web. All the resources and users on the Internet
that are using the Hypertext Transfer Protocol (HTTP).
The World Wide Web is a way of exchanging information between computers on
the Internet, tying them together into a vast collection of interactive multimedia
resources.
HTTP:
HTTP stands for Hypertext Transfer Protocol. This is the protocol being used to
transfer hypertext documents that makes the World Wide Web possible.
URL:
URL stands for Uniform Resource Locator, and is used to specify addresses on
the World Wide Web. A URL is the fundamental network identification for any resource
connected to the web (e.g., hypertext pages, images, and sound files).
A URL will have the following format
protocol://hostname/other_information
Website:
Each page available on the website is called a web page and first page of any
website is called home page for that site.
Web Server:
Every Website on a computer known as a Web server. This server is always
connected to the internet. Every Web server that is connected to the Internet is given a
unique address made up of a series of four numbers between 0 and 256 separated by
periods. For example, 68.178.157.132 or 68.122.35.127.
When you register a Web address, also known as a domain name, such as
tutorialspoint.com you have to specify the IP address of the Web server that will host
the site.
Web Browser:
Web Browsers are software installed on your PC. To access the Web you need a
web browsers, such as
Netscape Navigator,
Microsoft Internet Explorer or
Mozilla Firefox.
1.2 HTML:
HTML stands for Hyper Text Markup Language
HTML is the standard markup language for creating Web pages
HTML describes the structure of a Web page
HTML 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.
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
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:
<h1>My First Heading</h1>
<p>My first paragraph.</p>
Start tag
Element content End tag
<h1> My First Heading </h1>
<p> My first paragraph. </p>
<br> none none
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>.
Example
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
<!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>
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>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
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:
Example
<a href="https://www.w3schools.com">This is a link</a>
The link's destination is specified in the href attribute.
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">
TAG:
HTML tags are like keywords which defines that how web browser will format
and display the content. With the help of tags, a web browser can distinguish between
an HTML content and a simple content.
HTML tags contain three main parts: opening tag, content and closing tag.
But some HTML tags are unclosed tags.
Syntax
<tag> content </tag>
HTML Tag Examples
<p> Paragraph Tag </p>
<h2> Heading Tag </h2>
<b> Bold Tag </b>
<i> Italic Tag </i>
<u> Underline Tag</u>
Unclosed HTML Tags:
Some HTML tags are not closed, for example br and hr.
<br> Tag: br stands for break line, it breaks the line of the code.
<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the
webpage.
HTML Text Tags:
<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>, <address>,
<bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>,
<var> and <br>
UNIT-2
2.1 TAG
HTML tags are like keywords which defines that how web browser will format
and display the content. With the help of tags, a web browser can distinguish between
an HTML content and a simple content. HTML tags contain three main parts: opening
tag, content and closing tag. But some HTML tags are unclosed tags.
When a web browser reads an HTML document, browser reads it from top to
bottom and left to right. HTML tags are used to create HTML documents and render
their properties. Each HTML tags have different properties.
An HTML file must have some essential tags so that web browser can differentiate
between a simple text and HTML text. You can use as many tags you want as per your
code requirement.
o All HTML tags must enclosed within < > these brackets.
o Every tag in HTML perform different tasks.
o If you have used an open tag <tag>, then you must use a close tag </tag>
Syntax:
<tag> content </tag>
HTML Tag Examples:
<p> Paragraph Tag </p>
<h2> Heading Tag </h2>
<b> Bold Tag </b>
<i> Italic Tag </i>
<u> Underline Tag</u>
Unclosed HTML Tags:
Some HTML tags are not closed, for example br and hr.
<br> Tag: br stands for break line, it breaks the line of the code.
<hr> Tag: hr stands for Horizontal Rule. This tag is used to put a line across the
webpage.
HTML Meta Tags:
DOCTYPE, title, link, meta and style
HTML Text Tags:
<p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <strong>, <em>, <abbr>, <acronym>, <address>,
<bdo>, <blockquote>, <cite>, <q>, <code>, <ins>, <del>, <dfn>, <kbd>, <pre>, <samp>,
<var> and <br>
HTML Link Tags:
<a> and <base>
HTML Image and Object Tags:
<img>, <area>, <map>, <param> and <object>
HTML List Tags:
<ul>, <ol>, <li>, <dl>, <dt> and <dd>
HTML Table Tags:
table, tr, td, th, tbody, thead, tfoot, col, colgroup and caption
HTML Form Tags:
form, input, textarea, select, option, optgroup, button, label, fieldset and legend
2.2 FONT STYLE ELEMENTS:
Font-style elements are similar to phrase elements in that they are used to modify
pieces of text. However, as the name implies, font-style elements are stylistic rather
than structural in nature. And therein lies the rub. In HTML 4.0, most stylistic formatting
is accomplished through style sheets. Font-style elements are an exception, a holdover
from previous versions of HTML.
four font-style elements here:
bold
italic
small
big
Bold:
The bold element specifies that text should be rendered in boldface. Here's a
sample paragraph which contains a bold element.
<P>
<B>Important:</B> All staff members
are required to wear the funny hats.
</P>
As you can see, the bold element is delimited by the <B> and </B> tags.
Italic:
The italic element specifies that text should be rendered in an italic face. Here's a
sample paragraph which contains an italic element.
<P>
But I don't <I>want</I> to wear a funny hat.
</P>
As you can see, the italic element is delimited by the <I> and </I> tags.
Small:
The small element specifies that text should be rendered in a smaller size. Here's
a sample paragraph with the small element:
<P>
Don't forget to read the
<SMALL>fine print</SMALL>
before you sign anything.
</P>
As you can see, the small element is delimited by the <SMALL> and </SMALL> tags.
Big:
The big element is similar to the small element, but it works in reverse. Here's a
sample paragraph with the big element:
Actually this paragraph contains three instances of the big element. They're nested
inside one another to demonstrate their cumulative effect. (The small element works
the same way.)
<P>
It's a
<BIG>really <BIG>great <BIG>sale </BIG></BIG></BIG>
</P>
As you can see, the big element is delimited by the <BIG> and </BIG> tags.
