[go: up one dir, main page]
Scribd
Upload
60 views10 pages

HTML

HTML stands for Hypertext Markup Language and is used to define the structure and layout of web pages. HTML uses tags to annotate text, images, and other content for display in a web browser. Common tags are used to define headings, paragraphs, lists, and embed images and media.

Uploaded by

Harshit Sinotiya
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
60 views10 pages

HTML

HTML stands for Hypertext Markup Language and is used to define the structure and layout of web pages. HTML uses tags to annotate text, images, and other content for display in a web browser. Common tags are used to define headings, paragraphs, lists, and embed images and media.

Uploaded by

Harshit Sinotiya
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/ 10

What is HTML?

HTML stands for HyperText Markup Language. Developed by scientist Tim


Berners-Lee in 1990.

HTML is the set of markup symbols or codes inserted in a file intended for
display on a World Wide Web browser page. The markup tells the VWeb browser how to
display a Web page's words and images for the user. Each individual markup code is
referred to as an element (but many people also refer to it as a tag). Some elements
come in pairs that indicate when some display effect is to begin and when it is to end.
HyperText is the method by which you move around on the web by clicking on
special text called hyperlinks which bring you to the next page.

" Markup is what HTML tags do to the text inside them. They mark it as a certain
type of text (italicized text, for example).

" HTML is a Language, as it has code-words and syntax like any other language.

The tools you need


Fortunately, HTML 0s written in plain text. That means you don't need any fancy
software programs like a word processor to create your HTML files. All you need is a
simple text-editor that's already on your system. For MACs, that would be SimpleText
and for Windows, Notepad,

2 Types of Tags
1. Container Tag- always wraps around text or graphics and comes in a set with an
opening and a closing tag.

Example: <head> opening tag


</head> closing tag

The forward slash () on the closing tag tells the browser that the tag has ended.
2. Empty Tag - An empty tag is a term used in web programming to refer to a
starting tag which does not have an ending tag.

Example: <br> &<hr>

Most Commonly Used Tags in HTML


Document Structure
<html> <html> HTML documents begin at the first tag and end at the second.
These tags tell the browser that what lies between is coded in
HTML.
<head> </head> Header information goes between these tags. The <title> tags are
used to create a title that appears at the top of the browser window.
The <meta> tag can be used to help webcrawlers index your site.
<body> <body> The contents of the main page are displayed between these tags.
You can set various attributes within this tag, including background
images and colors and colors for text and links.
Body tags
<h3> </h3> Medium-sized header line

H1 gives the biggest, hÓ gives the smallest. Try them out to see
which suits any given application. Within this tag, the attribute
align= can be set to left, center, or right. For example: <h3
align="center"> </h3> centers the header.
<p> Starts a new paragraph: a blank line followed by a new line. You
should use the </p> tag to end the paragraph, but it isn't
necessary.
<br> or <br /> Starts a new line without a blank line in between.
<b> <b> Bold face any text between the tags.
<i> <i> Italic face any text between the tags.
<u> </u> Underline any text between the tags. Not widely used, because
most underlined text on HTML pages is hyperlinks
<Sup> </sup> Supersap. any text between the tags.
<sub> </sub> Subsctipt any text between the tags.
<tt> </tt> Any text between the tags is uniformly spaced: good for aligning
columns.
<hr Draws a horizontal line. The attribute size="50%" (any percent will
do) draws a line of that percentage of the screen width. The
attribute align= can be used to move the line to left, center, or right.
<pre> </pre> Text between these
tags is "preformatted". Spaces and line breaks
appear as you entered
them.
Lists
<ul> /ul> Begin and end an un-numbered list. Each individual item on the list
begins with <li> and ends with <li>, Each item appears as a bullet
point. list
<ol> </o> Begin and end a numbered list. Each individual item on the
begins with <li> and ends with </i>.
Insert Image
Insert the image file: jpg, -gif, or .png files are supported by nearly
<img "tool tips"
src="filename" allbrowsers. The title attribute is displayed by the
mouse over the image.
title="text"> function of the browser: when you run the

Case sensitive
lowercase or
sensitive. That means, you can use either
HTML is also not case For consistency, use
either one or the
same as <html>, code in
uppercase. <HTML> is the our purposes, I have written our
mix and match. For
other. It's best not to
lowercase.

Basic HTML Format

<html>
Ghead> The Head </title>
<title>

<ihead>

<body>

The Body

</body>

</html>
HTML Tags
Whatare HTML tags?
HTML tags are used to mark-up HTML elements
HTML tags are surrounded by the two characters <and >
The surrounding characters are called angle brackets
HTML tags normally come in pairs like <b> and </>
The first tag in a paif is the staYt tag, the second tag is the end tag
The text between the start and end tags is the element content
HTML tags are not case sensitive, <b> means the same as <B>
Logical Vs, Physical Tags
In HTML there are both logical tags and physical tags. Logical tags are designed to
describe (to the browser) the enclosed text's meaning. An example of a logical tag is the
<strong> </strong>tag. By placing text in between these tags you are telling the browser
that the text has some greater importance. By default all browsers make the text appear bold
when in between the <strong>and
</strong>tags.
Physical tags on the other hand provide specific instructions on how to display the text
they enclose. Examples of physical tags include:
<b>: Makes the text bold.
<big>: Makes the text usually one size bigger than what's around it.
<i>:Makes text italic.
Physical tags were invented to add style to HTML pages because style sheets were not
around, though the original intention of HTML was to not have physical tags. Rather than
use physical tags to style your HTML pages, you should use style sheets.
HTML Elements
Remember the HTML example from the previous page:
<htm>
<head>
<title>My First Webpage</title>
<head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
<html>

This is an HTML element:

<b>This text is bold</b>

The HTML element begins with a start tag: <b>


The content of the HTML element is: This text
is bold The HTML element ends with an end
tag: </b>

The purpose of the <b>tag is to define an HTML element that should be displayed
as bold. This is also an HTML element:

<body>
This is my first homepage. <b>This text is bold<b>
<body>
This HTML element starts with the start tag <body>,and ends with the end tag </body>. The
purpose of the <body>tag is to define the HTML element that contains the body of the
HTML document.
Nested Tags
You may have noticed in the example above, the <body>tag also contains other tags, like
the <b>tab. When you enclose an element in with multiple tags, the last tag opened should
be the first tag closed. For example:

<p><b><em>This is NOT the proper way toclose nested togs.</p><em><b>


<p><b><em>This is the proper way to cose nested tags. </em></b></p>
Why Use Lowercase Tags?
You may notice we've used lowercase tags even though I said that HTML tags are not case
sensitive.
<B> means the same as <b>, The World Wide Web Consortium (W3C), the group
responsible for developing web standards, recommends lowercase tags in their HTML 4
recommendation, and XHTML (the next generation HTML) requires lowercase tags.
Tag Attributes
Tags can have attributes. Attributes can provide additional information about the HTML
elements on your page. The <tag> tells the browser to do something, while the attribute
tells the browser how to do it. For instance, if we add the bgcolor attribute, we can tell the
browser that the background color of your page should be blue, like this: <body
bgcolor-"blue">.
To build any web page you will need four primary tags: <html>, <head>, <title>
and <body>, These are all container tags and must appear as pairs with a beginning
and an ending,
<html>...</html>

Every HTML document begins and ends with the <html> tag. This tells the browser that
the following document is an htrnl file. Remember, tags tell the browsers how to display
information.

<head>...</head>

The <head> tag contains the title of the document along with general information about
the file, like the author, copyright, keywords and/or a description of what appears on the
page.

<title>..<ititle>

Appears within the <head> tag and gives the title of the page. Try to make your titles
descriptive, but not more than 20 words in length. The title appears at the very top of the
browser page on the title bar.

<body>...</body>

The main content of your page is placed within the body tags: your text, images, links,
tables and so on.

Adding color
When you create a web page you willwant to use different background and text
colors and to add images. This makes the site more attractive to visitors and generally
makes the website look better. Take care not to make the text and background color the
same!

In this exercise we willchange the background color of your welbsite you created
to blue. To do this you would add the following HTML code into the body of your text
file.
<body bgcolor = "#0000FF">

Notice how instead of saying <body bgcolor = blue> We have used some strange
ooking code. Don't worry this is called "Hexadecimal color and can be used for
nserting complex colors into your website.
bther sample of Hexadecimal color codes

FFF COC 999 666 333 000 FFC FF9 FF6 FF3 sWITCH TO DECIMAL RGB
FFF CCc 999 666 333 000C0o 900 600 300 COLOR CODEs

99C CC9 FFC FFC FF9 FF6 CC3 CCO


C00 900 C33 C66 966 633 300 033
CCF CCE 333 666 999 CCC FFF CC9 CC6 330 660 990 CC0 FFO FF3 FFO
F0O F33 300 600 900 coo FO0 933 633 000 o00 000o o00 090 366 033
99F CCF 99C 666 999 CCc FFF 996 993 663 993 CC3 FF3 CC3 FF6 FFO
FOO F66 C33 633 933 C33 F33 600 300 333 333 333 333 366 699 Dóó
66F 99F 66C 669 999 CCC FFF 996 663 996 CC6 FF6 990 CC3 FEF6 FFO
FOO F66 C33 900 966 C66 F66 633 300 666 666 666 033 399 6CC 099
33F 66F 339 66C 99F CCC FFF CC9 CC6 Cc9 FF9 FF3 Cco 990 FF3 FFO
FOO F33 900 C0o F33 C99 F99 966 600 999 999 399 066 066 3 C 0CC
00C 33C 336 669 99C CCF FFF FFC FF9 FFC FF9 CC6 993 660 Cco 330
CO0 C0O 600 933 C66 F99 FCC C99 933 CCC 9CC 699 366 033 099 033
33C 66C 00F 33F 66F 99F CCF CC9 996 993 990 663 660
C33 C66 FO0 F33 F66 F99 FCC 9CC 699 399 099 366 066
006 336 009 339 669 99C FFC FF9 FF6 FF3 FFO CC6 CC3
600 633 900 933 966 C99 CFF 9FF 6FF 3FF OFF 6CC 3CC
003 00C 006 339 66C 99F CCF S39 99C CCC Cc9 996 663 330 990 CCO
300 C33 633 966 C99 FCC FFF 9FF CFF CFF 9FF 6CC 399 066 0CC oCC
00F 33F 009 00C 33F 99F 99C 006 669 999 999 993 660 660 CC3 CCo
F33 F66 933 C66 F99 FFF CCC 6CC 9CC 9FF 9CC 3FF 0CC 099 3FF OFF
00F 66F 33C 009 66F 66C 669 003 336 666 666 666 330 993 CC6 990
F66 F99 C66 966 FFF CCC 999 366 699 6FF 6CC 699 099 3CC 6FF OFF
00F 66F 33C 33F 33C 339 336 O06 003 333 333 333 333 663 996 660
F99 FCc c99 FFF CCC 999 666 699 399 3FF 3CC 399 366 30C 6FF OFF
00F 33F 00F 00C o09 006 003 339 336 000 O00 000 00O 000 663 330
FCC FCC FFF CcC 999 666 333 9CC 6CC OFF OCC 099 066 033 3FF OFF
00C 2011 VisiBone 09 33C 66C 669 336 003 330
C99 9CC CFF CFF 9FF 6FF 3CC 0CC
00C O09 006 003
CFF 9FF 6FF 3EF

As well as using the Hexadecimal method, you can also use good old-fashioned
English! Meaning that placing the following code into your HTML file would have the
xact same effect:
<body bgcolor = "blue">
2 uy 0wn Homne Page
Fle Edt Vew
Microsofl Internet Explorer
Favorkes Toos Help
Eack
Search Favortes
ddess elcpocuments and SettingsiDanDesktopiogt.html
Google Search Web 3tochedA Zopions
1m our-N ame dthis iN yWveb Pagel

Adding color to text

Adding color to text is the same way in adding background color. This is the code
we need to insert into our webpage:

<font color="Red">Text that you want to make red goes


here</font>
insert the </font>
that you must put </font> after the text has ended. If you didn'timportant for now
Notice too
entire document would have the text as red. This isn'tbecome a problem.
then your than one text color on a page this
may
but if you ever have more
Here is how your code should now look:

<html>
<head>
<title>My Own Home Page <title>
<head>
<body>
<body bgcolor= "blue">
<font color="Red">
<H1>lamYour-Name and this is my web Page!</H1>
</font>
</body>
IMPORTANT TIP: A common error when coding with colors and HTML in general are
simple spelling mistakes. Remember that when typing "color" it is the American spelling.
make sure you don't use the English spelling "colour" or your HTML won 't work.

You might also like