What is 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.

What is WWW?

WWW stands for World Wide Web. A technical definition of the World Wide
Web is − All the resources and users on the Internet that are using the
Hypertext Transfer Protocol (HTTP).
A broader definition comes from the organization that Web inventor Tim
Berners-Lee helped found, the World Wide Web Consortium (W3C): The
World Wide Web is the universe of network-accessible information, an
embodiment of human knowledge.
In simple terms, 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.

What is HTTP?

HTTP stands for Hypertext Transfer Protocol. This is the protocol being used
to transfer hypertext documents that makes the World Wide Web possible.
A standard web address such as Yahoo.com is called a URL and here the
prefix http indicates its protocol
What is 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
The protocol specifies how information is transferred from a link. The
protocol used for web resources is HyperText Transfer Protocol (HTTP).
Other protocols compatible with most web browsers include FTP, telnet,
newsgroups, and Gopher.
The protocol is followed by a colon, two slashes, and then the domain name.
The domain name is the computer on which the resource is located.
Links to particular files or subdirectories may be further specified after the
domain name. The directory names are separated by single forward slashes.

What is Website?

Currently you are on our website Tutorialspoint.com which is a collection of

various pages written in HTML markup language. This is a location on the
web where people can find tutorials on latest technologies. Similarly, there
are millions of websites available on the web.
Each page available on the website is called a web page and first page of any
website is called home page for that site.

What is Web Server?

Every Website sits 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.

What is 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.
 Currently you must be using any sort of Web browser while you are
navigating through my site tutorialspoint.com. On the Web, when you
navigate through pages of information this is commonly known as browsing
or surfing.

Protocols of Internet:

In the world of technology, there are vast numbers of users' communicating

with different devices in different languages. That also includes many ways
in which they transmit data along with the different software they implement.
So, communicating worldwide will not be possible if there were no fixed
'standards' that will govern the way user communicates for data as well as
the way our devices treat those data"protocols" which are set of rules that
help in governing the way a particular technology will function for
communication. In other words, it can be said that the protocols are digital
languages implemented in the form of networking algorithms. There are
different networks and network protocols, user's use while surfing.
There are various types of protocols that support a major and compassionate
role in communicating with different devices across the network. These are:

1. Transmission Control Protocol (TCP)

2. Internet Protocol (IP)

3. User Datagram Protocol (UDP)

4. Post office Protocol (POP)

5. Simple mail transport Protocol (SMTP)

6. File Transfer Protocol (FTP)

7. Hyper Text Transfer Protocol (HTTP)

8. Hyper Text Transfer Protocol Secure (HTTPS)

9. Telnet

10. Gopher

Let's discuss each of them briefly:

1. Transmission Control Protocol (TCP): TCP is a popular communication

protocol which is used for communicating over a network. It divides any
message into series of packets that are sent from source to destination and
 there it gets reassembled at the destination.

2. Internet Protocol (IP): IP is designed explicitly as addressing protocol. It is

mostly used with TCP. The IP addresses in packets help in routing them
through different nodes in a network until it reaches the destination system.
TCP/IP is the most popular protocol connecting the networks.

3. User Datagram Protocol (UDP): UDP is a substitute communication protocol

to Transmission Control Protocol implemented primarily for creating loss-
tolerating and low-latency linking between different applications.

4. Post office Protocol (POP): POP3 is designed for receiving incoming E-mails.

5. Simple mail transport Protocol (SMTP): SMTP is designed to send and

distribute outgoing E-Mail.

6. File Transfer Protocol (FTP): FTP allows users to transfer files from one
machine to another. Types of files may include program files, multimedia
files, text files, and documents, etc.

7. Hyper Text Transfer Protocol (HTTP): HTTP is designed for transferring a

hypertext among two or more systems. HTML tags are used for creating
links. These links may be in any form like text or images. HTTP is designed
on Client-server principles which allow a client system for establishing a
connection with the server machine for making a request. The server
acknowledges the request initiated by the client and responds accordingly.

8. Hyper Text Transfer Protocol Secure (HTTPS): HTTPS is abbreviated as

Hyper Text Transfer Protocol Secure is a standard protocol to secure the
communication among two computers one using the browser and other
fetching data from web server. HTTP is used for transferring data between
the client browser (request) and the web server (response) in the hypertext
format, same in case of HTTPS except that the transferring of data is done
in an encrypted format. So it can be said that https thwart hackers from
interpretation or modification of data throughout the transfer of packets.

9. Telnet: Telnet is a set of rules designed for connecting one system with
another. The connecting process here is termed as remote login. The
system which requests for connection is the local computer, and the system
which accepts the connection is the remote computer.

10. Gopher: Gopher is a collection of rules implemented for searching, retrieving

as well as displaying documents from isolated sites. Gopher also works on
the client/server principle.

Some Other Protocols

Some other popular protocols act as co-functioning protocols associated
with these primary protocols for core functioning. These are:
 ARP (Address Resolution Protocol)

 DHCP (Dynamic Host Configuration Protocol)

 IMAP4 (Internet Message Access Protocol)

 SIP (Session Initiation Protocol)

 RTP (Real-Time Transport Protocol)

 RLP (Resource Location Protocol)

 RAP (Route Access Protocol)

 L2TP (Layer Two Tunnelling Protocol)

 PPTP (Point To Point Tunnelling Protocol)

 SNMP (Simple Network Management Protocol)

 TFTP (Trivial File Transfer Protocol)

HTML
HTML (Hypertext Markup Language) is the only markup language for
creating web pages. It provides some titles, headings, paragraphs, lists,
tables, embedded images, etc., to describe the structure of text-based and
multimedia information in HTML documents.

Here is some key information to easily describe HTML:

 HTML (Hypertext Markup Language) is a language for publishing text-based

and multimedia information on the World Wide Web.

 HTML is a straightforward Computer Coding Language. It was developed in

the 90s. HTML is the basis of a web page, and the web page is the basis of a
website. HTML uses 'tags' to create web documents.

 HTML is a hypertext markup language; It is a predetermined set of markup

tags used to design web pages.

 HTML is the first language of web designing. CSS is also used along with
HTML to improve web page design further. JavaScript is used with HTML to
make web pages dynamic.

 HTML is relatively easy to learn because every tag is predefined, so only we

need to know the work of tags and their attributes.
 Web browsers (Chrome, Internet Explorer, Firefox, Safari, and other web
browsers) are software' to read HTML and display web page design as
output.

 You can write HTML in any simple editor such as Notepad. And other
software such as Adobe Dreamweaver, Sublime, NetBeans, Notepad ++,
etc., are mainly used for writing and editing HTML.

 ".html" or ".htm" are the two extensions used to write and save HTML files;
we can write HTML code in any text editor and save it as "filename.html" or
"filename.htm".

HTML editors
There are so many software packages available to develop HTML. The
software packages can be grouped into two main categories:

1. text-based (or code-based) editors

2. WYSIWYG (what you see is what you get) editors

Text-based (or code-based) editors

To start creating web pages, you do not need an expensive software package
but you do need some knowledge of HTML. You can create web pages with a
basic text editor like Windows Notepad. However, as you master scripting
HTML, you will learn that using Notepad or some other basic text editor is not
sufficient. In Windows, Notepad can be started from the Start Menu:

1. Select: Programs | Accessories | Notepad

2. Type notepad.exe or just notepad in the Run command from the Start
Menu:

1. Start the Run Command

 2. Type "notepad" in the textbox.

3. Next, click on the OK button to start Notepad.

Macromedia Homesite is a popular text-based HTML editor. The editor

provides many HTML-specific options that are not available in the Windows
Notepad.

WYSIWYG editors
Because WYSIWYG (pronounced wuzzywig or wizzywig) HTML editors do not
require much HTML knowledge, they tend to be expensive. These editors
allows you to directly work in the "design" or "preview" view instead of the
code view. The main advantage of working with the design view is that you
can design the layout of your page by dragging-and-dropping pieces of your
page layout. Thus a web page can be developed more quickly than by hard-
coding it by hand using a text-based editor.

There are several popular WYSIWYG editors available:

1. Macromedia Dreamweaver
2. Microsoft FrontPage
3. Adobe GoLive

Remember these editors can help you create web pages but they cannot
teach you HTML. If you first master HTML, you will utilize these software
packages more efficiently.

Text-based editors versus WYSIWYG editors

Text-based (or code-based) WYSIWYG editors

editors
  Better control. Because  Support for other scripting
text-based editors require languages. WYSIWYG editors
knowledge of HTML, the provide advanced features to
developer has more code in other
control over what is written programming/scripting
to produce a web page. In languages such as JavaScript,
some cases, a software XHTML, ASP/ASP.NET, PHP,
package (like FrontPage) and JSP.
may write proprietary code
that may not be interpreted  Faster/simplified development.
by all the brwosers. WYSIWYG editors allows you to
develop pages quickly as the
 Faster editing. You can software writes the necessary
quickly change your code code in response to the layout
unlike WYSIWYG editors. you design for your web page.
WYSIWYG editors require,
for example, a lot of  Better organization.
computer-resources to Dreamweaver, for instance,
start-up or load/open a allows you to define a site
page. folder that contains all the files
that make up the website. By
 More flexibility. You can defining a local site folder, you
edit your code directly at have many advantages
the desired location. This including moving of files
cannot be always done (without breaking links),
with WYSIWYG editors. searching of a particular term
or tag in the entire site (without
having the file open!), and FTP
support to move only changed
or new files to the server.

Creating an HTML document

Before you start writing code to write a web page, it is a good practice to plan
ahead the appearance of the web page. An HTML document has two
elements:

1. Document Content
2. Tags

Document content is the information on a web page that the user will see.
That information could be text or graphics, for example. As you start creating
your own web pages, try finding out first what information you want to display
and how you want to present it.

Tags are the HTML codes that control how the document content will appear.
The tags, in other words, will determine whether the text will be bold, black or
blue, or of font type Time New Roman or Airal.

Naming conventions
HTML files names are very important as they are used to locate or open the
files. Remember these points when naming HTML files:

1. Save your web page files with the .htm or .html file extension. (Both of
these files represent HTML files, older systems such Windows 3.1 and
DOS cannot recognize four-letter file extensions. Because the first
three letters of .html and .htm are the same, those systems ignore the
"l" and just recognize ".htm".)
2. Some web servers are case-sensitive. That means those web servers
would consider page1.htm and Page1.htm as two different files. To
avoid case sensitivity problems, use only lowercase or uppercase
letters to name your files.
3. Filenames should consists only of letters and numbers. Avoid using
spaces, punctuation, or special characters. If you need to separate
words, use hyphen (-) and underscores (_), for example, creating-an-
HTML-document.htm or creating_an_HTML_document.htm.

These same recommendations should also be applied to naming folders of

your web site. See the example below:

The image shows folder names follow the

same naming conventions as the file
names; for instance, folder names and file
names are separated by a hyphen if the
name consists of more than one word.
Basic structure of an HTML document
An HTML document has two* main parts:

1. head. The head element contains title and meta data of a web
document.
2. body. The body element contains the information that you want to
display on a web page.

* To make your web pages compatible with HTML 4, you need to add a
document type declaration (DTD) before the HTML element. Many web
authoring software add DTD and basic tags automatically when you create a
new web page.

In a web page, the first tag (specifically, <html>) indicates the markup
language that is being used for the document. The <head> tag contains
information about the web page. Lastly, the content appears in the <body> tag.
The following illustration provides a summary.

Summary of Basic HTML Tags

Understanding elements
To markup your web pages, you will need to learn the syntax (rules of a
computing language) of HTML. HTML syntax is very simple to follow.
Remember the syntax only controls the presentation or structure of a web
page. The most fundamental piece of building block of HTML is the elements.
In HTML, an element refers to two different things:

1. element of structure of a document (for example, paragraph, web page

title, etc.).
2. element in the sense of a tag (for example, <p>, <title>)

Because of the different meanings of the word "element", it can be confusing

what the word "element" means in a particular context. The following
discussion may help you to understand the differences in the meaning. When
we talk about the element in the sense of element of structure of a document,
we are referring to the structure of the document; for example, document's
header information (head), title, body, etc. When, however, we use the word
element to refer to a tag, we are talking about a specific HTML instruction that
uses angled brackets like: <>. As the following table shows,

head body p
Examples of elements of structure of a document
<head><body><p>
Examples of elements as tags
an element becomes a tag when we use the angled brackets around it. To
create a web page, we use tags. A tag instructs the browser what specific
instruction to execute. Assume in your web page you want to emphasize
some text as bold. To do this, HTML requires three pieces of information from
you:

1. With what tag do you want to emphasize the text? (Answer to this
question determines what and where a specific HTML instruction will
begin. In other words, this starts an HTML instruction.)
2. What text do you want to make bold?
3. Where do you want to stop the instruction? (An instruction should be
ended with the same tag that started the instruction. See below.)

As an example, assume you want markup "World Wide Web Consortium" bold:

The World Wide Web Consortium (W3C) is a rule-making body for the Web.

So how would be write the necessary markup? Begin by answering to the

three questions listed above. Here are the answers to each corresponding
question:

1. we will use the <b> tag. Think of this as turning ON the bold feature in
HTML.
2. we want to display "World Wide Web Consortium" as bold. Remember
this text must be immediately following after the <b> tag.
3. stop the instruction with </b> tag. This will turn OFF the bold feature of
HTML.
So our HTML markup will become:

The <b>World Wide Web Consortium</b> (W3C) is a rule-making body for the
Web.

Most elements in HTML have three parts: start tag, content, and end tag.
The start tag is simply the element name surrounded by the angled brackets
such as <b>, <body>, and <p>. The end tag is a element name surrounded by
</ and > such as </b>, </body>, and </p>. In other words, an end tag simply
has the forward slash (/) before the element name. So if you open (start) a tag
with <i>, you will close (end) it with </i>.

As stated earlier, a start tag instructs the browser Note

to start a particular instruction. Conversely, an Not all HTML tags require a
end tag marks the end of that instruction.
closing tag. For example,
Because typically a complete web page contains
<img> tag, <br> tag, <hr>
many tags and sometimes nested tags (tags
tag, etc. Also, none of these
within other tags), it is necessary to close all
opened tags even if your web page displays tags take any content. The
correctly in a particular browser. Properly closing <img> tag is used to display
tags not only will help you to familiarize more graphic files; the <br> tag is
with HTML tags, but it also will avoid any used to end a line, and the
possibility of browsers displaying your web page <hr> tag inserts a horizontal
incorrectly. rule.

Main points to remember:

1. Every element has a name such as head, title, p, i, and b.

2. A tag is the element name surrounded by the angled brackets. This
refers to a start tag such as <p>, <title>, and <i>. A start tag starts a
particular HTML instruction.
3. An end tag is the same as a start tag except the end tag has a forward
slash between the < and the element name. An end tag stops a
particular HTML instruction.
4. Most elements have content, which is placed between the start and the
end tags. Example, this is <b>bold</b>.
5. Some elements have no content. Such elements/tags are known as
empty tags.
6. Some elements have no end tags. These are referred to as one-
sided tags. A tag that has an opening and closing tag is referred to
as two-sided tag.

Understanding attributes
In HTML, elements (or tags) have attributes or properties. As an HTML writer,
attributes allow you to add extra instruction to your tags. Because each tag
has its own unique attributes, you have to learn which attribute(s) belongs
which tag. (See the attributes reference table for details.) Any attribute cannot
be just applied to any tag. Think of attributes as options. As such, options can
only be applied to tags if the tags offer those options. If you incorrectly apply
an option to a tag, the browser is likely to ignore that option.

An attribute has two parts: attribute name and attribute value. Because of
these two-parts, they are also referred to as pairs. The attribute
name identifies (or defines) what special instruction you want to add to a
particular tag. The attribute value, on the other hand, indicates (usually
predefined) option for that attribute. So if you are going to use an attribute,
you will need to have value for that attribute. Let's go over the actual HTML.

align="right" is an example of attribute-value pair. The word align is the

attribute. The value of this attribute is right. A value of an attribute is enclosed
in double quotation marks. Notice the value is on the right-hand side of the
equal sign and the attribute name is on the left of equal sign. As you may have
understood, align="right" instructs the browser to align some text or object to
the right hand side of the web page. You can apply this attribute, for example,
to <p> tag to start your paragraph from the right hand side as:

This is my paragraph. Normally, text and other object on a web page are left-
aligned. Because this paragraph has an extra instruction (align="right") to
start this particular paragraph from the right, the paragraph is right-aligned.

The following shows the HTML code for the top paragraph:

<p align="right">This is my paragraph. Normally, text and other object on a

web page are left-aligned. Because this paragraph has an extra instruction
(align="right") to start this particular paragraph from the right, the paragraph is
right-aligned.</p>

We stated earlier that an attribute adds an extra instruction to a tag. When

does this extra instruction stop executing (or finish applying value of the
attribute)? This is an important question because many times you will have
nested tags and it may not be clear to you when the instruction will stop. The
answer is that the instruction stops once the browser encounters the
corresponding ending tag for the tag that contains the attribute. In our
example, any text outside of this paragraph tag will be unaffected (specifically
will not be right-aligned) because we apply the attribute to just one <p> tag.

Keep the following points in mind while working with attributes:

 some attributes have predefined values. For example, for

the align attribute, possible values include, left, center, justify and right.
So if you use the align attribute, you should use one of these
 acceptable values.
 some attributes accept numerical values. For instance, for
the width attribute, you can specify a numerical value such as 5 (which
indicates 5 pixels), or 20% (which indicates 20% of the screen width).

Main points to remember for attributes:

 Attributes are specific to tag names. For example, for the <p> tag, you
can use the align attribute but not the width attribute. The width
attribute can only be used with tags such as <table>, <td>, and <img>.
 Attributes have values. Make sure to use the correct value for the
correct attribute. For instance, you should not use color="20", or
align="brown"; instead use, color="red", and align="justify".
 Attribute values needs to be enclosed in double quotation marks. This
is true especially if the value contains one or more spaces, for example,
face="Times New Roman".
 Attribute values could come from a predefined list (such as color
names red, green, blue, etc.) or from you (width of a table 50% or 800
pixels.)

Adding comments to HTML

As you create more pages, it may become difficult for you to understand your
code in the future unless you use comments. By adding comments to your
code, it could be a valuable reference guide for you when you look at your
code in the future. Ideally, comments should be added to indicate what the
code does. Comments are personal; so add anything that you think is
impotent about your code. Remember, as you add comments to your pages,
the file size of the web page will increase. That, in turn, may increase web
page download time. So avoid use of excessive comments.

As you first start working with HTML, you may start by adding comments to
every single line to remind you of what the code does. As you develop more
experience and gather more knowledge about HTML, you will learn to
comment only major parts of your web page. You may, for example, comment
the width of nested tables you are using in your web page:
 Examples of comments in HTML
In HTML, a comment begins with <!-- and ends with -->. Any text you place
after <!-- is comment. Browsers ignore comment text. Again, comment is for
your reference; it does not get displayed on the web page. In a comment, you
can freely include special characters, such as ampersands, quotation marks,
and angle brackets. Your comments can also span multiple lines. The
browser will stop ignoring text once it reads -->.

Example of a single line comment:

<!--This is a small comment-->

Example of a multi-line comment:

<!--This comment is long. It is displayed on more than one line. Adding multi-
line comments in HTML is easy as adding a single line comment. Whether the
comment is single line or multi-line, it starts with <-- and ends with -->-->.

Important points about comments:

 Use comments as a reference guide. Avoid use of excessive

comments.
 Add comments to major parts of your code; or for parts, that you are
unsure of.
 Use of comments is a great way to communicate with other people
working on the same web page.
 Start your comment with <-- and end with -->
 Browsers and search engines ignore comments.

History of HTML
 HTML was created by Sir Tim Berners-Lee in late 1991 but was not released
officially, 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 very evolving markup language and has evolved with various
versions updating. Long before its revised standards and specifications are
carried in, each version has allowed its user to create web pages in a much
easier and prettier way and make sites very efficient.

 HTML 1.0 was released in 1993 with the intention of sharing information
that can be readable and accessible via web browsers. But not many of the
developers were involved in creating websites. So the language was also not
growing.

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

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

 Then comes 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 an extended version of HTML 4.01, which was
published in the year 2012.

Structure of HTML Document:

Text Basics
Creating a paragraph

In HTML, creating a paragraph is simple as entering text. To create a

paragraph, move the cursor to the location where you want the paragraph in
the HTML editor you are using. Next, type the <p> tag to begin the paragraph.
(Yes, if you guessed, the "p" inside the <p> tag stands for paragraph.) Once
you are done typing or pasting text for the paragraph, close the <p> tag with
</p>. Closing the tag instructs the browser that the paragraph has ended.
As an example, we will create the following paragraph with the <p> tag:

To learn HTML and other web programming languages, come to

ScriptingMaster.com regularly. The web site is updated daily with new content.
The web site is succeeding because visitors like you keep coming back and
find the site simple to use, easy to understand, and resourceful.

To create the above paragraph, you would write the following code:

<html>
<title>How To Create Paragraph</title>
<body>
<p>To learn HTML and other web programming languages, come to
ScriptingMaster.com regularly. The web site is updated daily with new content.
The web site is succeeding because visitors like you keep coming back and
find the site simple to use, easy to understand, and resourceful.</p>
</body>
</html>

The output of the code shown above would look like:

Text alignment with the align attribute

The normal text alignment depends on how the text is read in the browser's
default language. If the text is read, for instance, from left to right, the normal
alignment is left. On the other hand, if the text is read from right to left, the
normal alignment is right.

If you want to change the normal alignment of the text, you can use
the align attribute. With the attribute, you could use one of these values:

1. left
2. right
3. center
4. justify

Left alignment

To align text to the left margin, set the align attribute to left:

<p align="left">This paragraph uses the left alignment. If a language is read

from left to right and the browser is set to that language, the default
alignment is left. When the text is aligned automatically to the left, use of the
align attribute with the value left is not necessary.</p>

Output of the above code:

This paragraph uses the left alignment. If a language is read from left to right
and the browser is set to that language, the default alignment is left. When the
text is aligned automatically to the left, use of the align attribute with the
value left is not necessary.

Right alignment
To align text the right margin, set the align attribute to right:

<p align="right">This paragraph uses the right alignment. If a browser's

default language is read from right to left, the default alignment is right. When
the text is aligned automatically to the right, use of the align attribute with the
value right is not necessary.</p>

Output of the above code:

This paragraph uses the right alignment. If a browser's default language is

read from right to left, the default alignment is right. When the text is aligned
automatically to the right, use of the align attribute with the value right is not
necessary.

Center alignment
To change the alignment of the text to the center of the page, set
the align attribute to center:

<p align="center">This paragraph uses the center alignment. Aligning text

center is easy: simply set the align attribute to center or use the <center>
tag.</p>

Output of the above code:

This paragraph uses the center alignment. Aligning text center is easy: simply
set the align attribute to center or use the <center> tag.

Justified alignment
When you want to continue the text to the right and left margins, set
the align attribute to justify:

<p align="justify">This paragraph uses the justify alignment. The paragraph is

justified: the text continues to both margins.</p>

Output of the above code:

This paragraph uses the justify alignment. The paragraph is justified: the text
continues to both margins.

Character tags: logical and physical

A tag that is applied to an individual character is known as a character tag. A
character tag can be grouped into two categories: physical and logical.
(Note: physical styles are associated with physical character tags; logical
styles are associated with logical character tags.)

As you work with these tags to style your text in different ways, you will
discover that there is not really big difference how the text is displayed on a
browser. For instance, you can italicize your text using the <i> tag (a physical
character tag) or <em> tag (a logical character tag). Why does that make any
difference? It depends on whether you are using italics for the sake of using
italics or whether you are using italics to convey some special meaning. While
a physical character tag controls how to format the text, a logical character
tag describes how the text is being used, without regard to how it should be
formatted. Thus a logical style would be used to convey some meaning while
a physical style would not.

Physical styles
As mentioned above, a physical character tag controls how the characters are
formatted. For instance, you might display some characters as bold or italic.
Listing 1 displays some common physical character tags.

Listing 1 common physical character tags

Tag Description Renders as

<b> bold displays text as bold

<big> big displays text in a big font

<i> italics displays text as italic

<s> or <strike> * strike displays text with a line through it

<small> small displays text in a small font

<sub> subscript displays the text as subscript — text that

displays below the baseline of the text

<sup> superscript displays the text as superscript — text that

has baseline above the baseline of the rest of
the text

<tt> teletype displays the text with fixed-width font

<u> underline underlines the text

* Both <s> and <strike> tags are deprecated in HTML 4.0 so instead use
the <del> tag.

Listing 2 displays some examples of the common physical character tags.

Listing 2 examples of common physical character tags

HTML code Output

This is <b>bold</b> This is bold

This is <big>big font</big> This is big font

This is <i>italic</i> This is italic

Was <s>$50</s>; now $40 Was $50; now $40

This is <small>small</small> This is small

H₂O H2O
May 5^th 2005 May 5th 2005

<tt>fixed-width font</tt> fixed-width font

This is <u>underlined</u> This is underlined

Logical styles
A logical character tag describes how the text is being used, not necessarily
how it is formatted. Listing 3 displays common examples logical character
tags.

Listing 3 common logical character tags

Tag Description Renders as

<cite> citation emphasizes the text in italics.

<code> code sample Displays some characters as code usually in

Courier font (i.e., fixed-width font)

<del> deleted text displays text with a line through it; renders
differently in Netscape and Internet Explorer

<dfn> definition italics; renders differently in Netscape and Internet

Explorer

<em> emphasis emphasizes the text in some way usually as italic.

<ins> inserted text underlined; renders differently in Netscape and

Internet Explorer

<kbd> code sample fixed-width font

<samp> code sample fixed-width font

<strong> strong Text is emphasized more strongly than usually as

bold.

<var> program italics

variable

Listing 4 provides examples of how logical tags may display on a browser.

Listing 4 examples of logical tags

HTML code Output

 This is used for a short <cite>quote</cite>. This is used for a short quote.

<code>y = m * x + b</code> y=m*x+b

<del>Deleted</del> text text

<dfn>definition</dfn> text definition text

This is <em> emphasized </em>. This is emphasized .

<ins>inserted</ins> text inserted text

<kbd>code</kbd> sample code sample

<samp>code</samp> sample code sample

This is <strong>strong</strong>. This is strong.

<var>program</var> variable program variable

Note that both logical and physical tags are two-sided tags (requiring an
opening and closing tag). Also, the character tags can also be nested to
format some text as

<b><i>this is bold and italicized</i></b>

which will result in :

this is bold and italicized

When you nest tags, make sure to closed them properly. Although the output
of the following code is same, the tags are not closed properly:

<b><i>this is bold and italicized</b></i>

Do you notice why? Well, because the tags are overlapped: the <i> tag should
be closed first because it was the last tag that was opened. The <b> tag
should be closed last as it is the first tag that is opened. In general, a tag that
is opened last, should be closed first. A tag that is opened first should be
closed last.

Creating headings
There are six headings in HTML. Each heading can be created with an HTML
header tag, one header tag for each level of heading. Header tags are range
from <h1> to <h6>, where <h1> is the largest and most prominent and <h6> is
the smallest. To use a header tag, use the following syntax:
<hn>Some text</hn>
where n is a number between 1 and 6.

Figure 1 shows how to use all of the six headings as an HTML code on the left
and the output from a browser is shown on the right.

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Figure 1 Six Headers Styles Displayed in

Internet Explo

HTML lists: ordered, unordered, and

definition
Lists are very important to any document as they allow you to make your key
points stand out from the rest of the text. HTML supports three lists:

 unordered (bulleted) — click this link to learn how to create an

unordered list.
 ordered (numbered) — click this link to learn how to create an ordered
list.
 definition — click this link to learn how to create a definition list.
Unordered (bulleted) list
The most commonly used list is the unordered list. An unordered list can be
used whenever the order of items you want to list is unimportant. HTML
offers three different default characters to use with an unordered list: a bullet
( ), a circle ( ), and a square ( ). The following shows examples of an
unordered list:

Unordered list — type bullet (default)

Unordered list — type circle

Unordered list — type square

Ordered (numbered) list

The other popular kind of list is the ordered list. This type of list can be used
when the order of items to list is important. It could be that you want to list
steps to how to cook a recipe; for this kind of list you could use an ordered list
because each step can be emphasized numerically. An ordered list can be
created with different styles: Arabic numbers, lowercase or uppercase letters,
or lowercase or uppercase Roman numerals. The following shows examples
for each of these styles:

Ordered list style: Arabic numbers

(default)
 Ordered list style: lowercase
letters

Ordered list style: uppercase

letters

Ordered list style: lowercase

Roman numerals

Ordered list style: uppercase

Roman numerals

Definition list
The definition list is used far less frequently than the other two kinds of lists mentioned
above. A definition list, as the name implies, is used for listing definitions:

Click here to learn how to create a definition list.

Nested lists
Sometimes, a list is long and may require subordinate lists. Mastering multiple lists
within a single list is easy once you learn how to create a single list. (See this page to
learn how to create nested lists.) The following shows an example of a nested list:

An example showing nested list

Line breaks
To add a line break in a web page, you can use the <br> tag. Typing a <br> tag in your
HTML code is similar to pressing the ENTER or RETURN key in a word processor. The
effect of <br> tag is that the browser stops printing text on that line and drops down to
the next line on that page. The <br> tag does not require a closing tag. The following
shows an example:

Line breaks<br> in HTML

instructs the browser to start a new line after the word "breaks" because after this word
the tag <br> is placed. Thus the output of the above code is:

Line breaks
in HTML

To add multiple line breaks in a row, simply use the <br> tag for each line you want to
stop and start. For instance,

Line breaks <br><br><br> in HTML

inserts three line breaks after the word "breaks". The following shows the output of the
above code:
Line breaks

in HTML

Preformat text
With the <pre> tag, the text renders in the browser exactly as you type it. The <pre> tag is
short for preformat. So if you press the ENTER or RETURN key several times to create
line breaks within a <pre> tag, you can expect to see all those line breaks in a browser.

The following shows the <pre> tag in use: