Scribd
Upload
5 views

HTML Begin

HTML starter course for lower secondary

Uploaded by

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

HTML Begin

HTML starter course for lower secondary

Uploaded by

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

Topic :HTML

Hyper Text Markup Language

HTML is used for designing web pages on the internet. HTML is an application of standard
generalized markup language. It is a simple language used to define and describe the layout of a
web page.
 HTML stands for Hyper Text Markup Language
 An HTML file is a text file containing small markup tags
 The markup tags tell the Web browser how to display the page
 An HTML file must have an htm or html file extension
 An HTML file can be created using a simple text editor

Tags
An element is a fundamental component of the structure of a text document. To denote the
various elements in an HTML document, you use tags. HTML tags consist of a left angle bracket
(<), a tag name, and a right angle bracket (>). Tags are usually paired (e.g., <H1> and </H1>) to
start and end the tag instruction. The end tag looks just like the start tag except a slash (/)
precedes the text within the brackets. HTML is not case sensitive. <title> is equivalent to
<TITLE> or <TiTlE>.

Container and Empty elements


The tags which have both the opening as well as the closing tag are called Container elements
e.g. <HTML>…….</HTML>, <Table>……</Table> etc.

The tags which have only the opening tags and no closing tags are called Empty elements e.g.
<HR>, <IMG> etc.

Note: Not all tags are supported by all World Wide Web browsers. If a browser does not support
a tag, it will simply ignore it. Any text placed between a pair of unknown tags will still be
displayed.

Structure of a HTML Document


Every HTML document should contain certain standard HTML tags. Each document consists of
head and body text. The head contains the title, and the body contains the actual text that is
made up of paragraphs, lists, and other elements.
<html>
<head>
<TITLE>A Simple HTML Example</TITLE>
</head>
<body>
<H1>HTML is Easy To Learn</H1>
<P>Welcome to the world of HTML.
This is the first paragraph. While short it is
still a paragraph!</P>
<P>And this is the second paragraph.</P>
</body>
</html>

Markup Tags
1 of 13
Topic :HTML

HTML
This element tells your browser that the file contains HTML-coded information. The file extension
.html or .htm also indicates this an HTML document and must be used.

HEAD
The head element identifies the first part of your HTML-coded document that contains the title.
The title is shown as part of your browser's window.

TITLE
The title element contains your document title and identifies its content in a global context. The
title is typically displayed in the title bar at the top of the browser window, but not inside the
window.

BODY
The second--and largest--part of your HTML document is the body, which contains the content of
your document (displayed within the text area of your browser window). The tags explained
below are used within the body of your HTML document.
Some of the attributes of the <Body> tag are:
 Text
 Bgcolor
 Background
 Alink
 Vlink
 Link
 Leftmargin
 Topmargin

Text: controls the color of all the page’s body text that isn’t a link, including headings, body text,
text inside tables and so on.
Link: controls the color of normal, unfollowed links in the page (that are usually blue by default)
Vlink: controls the color of links you have visited(that are usually purple by default)
Alink: controls the color of a link that has had the mouse button pressed on it but not released
(an activated link, often red by default)
Bgcolor : controls the background color of the page.
Background: Used to put an image in the background of the web page. The value of the
background attribute is a filename or URL that points to the image file (with GIF or JPEG format)
Leftmargin: sets the Left/right margin of the web page. The value for this attribute can be given
in integer or percentage.
Topmargin: sets the top/bottom margin of the web page. The value for this attribute can be
given in integer or percentage.

Example:
<body bgcolor=orange text=white link=red background=taj.jpg
leftmargin=5 topmargin=5>

Headings
HTML has six levels of headings, numbered 1 through 6, with 1 being the largest. Headings are
typically displayed in larger and/or bolder fonts than normal body text. The first heading in each
document should be tagged <H1>.

2 of 13
Topic :HTML

The syntax of the heading element is:


<Hy>Text of heading </Hy>
where y is a number between 1 and 6 specifying the level of the heading.

Example:
<H1> Hello </H1>
<H2> Welcome to the world of web tech </H2>

Paragraphs
It is used in the beginning of the paragraph and will leave a blank line after it and the text
following it appears on a new line. Unlike documents in most word processors, carriage returns in
HTML files aren't significant. In fact, any amount of whitespace -- including spaces, linefeeds,
and carriage returns -- are automatically compressed into a single space when your HTML
document is displayed in a browser.
<P>Welcome to the world of HTML.
This is the first paragraph.
While short it is
still a paragraph!</P>

In the source file there is a line break between the sentences. A Web browser ignores this line
break and starts a new paragraph only when it encounters another <P> tag.

NOTE: The </P> closing tag may be omitted. This is because browsers understand that when
they encounter a <P> tag, it means that the previous paragraph has ended.

It is used in the beginning of the paragraph and will leave a blank line after it and the text
following it appears on a new line. The paragraph can be aligned in 3 different ways:
a) Left alignment - <P ALIGN = LEFT>
b) Right alignment - <P ALIGN = RIGHT>
c) Center alignment - <P ALIGN = CENTER>

Preformatted Text
Use the<PRE> tag (which stands for "preformatted") to generate text in a fixed-width font. This
tag also makes spaces, new lines, and tabs significant -- multiple spaces are displayed as
multiple spaces, and lines break in the same locations as in the source HTML file. This is useful
for program listings, among other things. For example, the following lines:

<PRE> Output
Class Teacher Class Teacher
XI Ms. ABC XI Ms. ABC
XII Ms. XYZ XII Ms. XYZ
</PRE>

Font tag
This tag is used to control the characteristics of the given set of characters. It has three
attributes:
 Size
 Face
3 of 13
Topic :HTML

 Color

Size: This attribute is used to change the size of the font for a character, word, phrase, or on any
range of text. The values for size attribute can range from 1 to 7, with 3 being default size.

Face: This can have values as font names enclosed in quotation marks, separated by commas
as its values. When a browser interprets the values, it will search for the first font name. If it is
unable to find the first, then it will try the second, then the third and so on, until it finds a font that
is actually installed on the system. If the browser cannot find any of the listed fonts, then the
default font will be loaded.

Color: This attribute is responsible for changing the color of the characters enclosed within the
<font> and </font> tag.

Example:
<font size=1 color=red> This line is red in color and of font size
1</font>
<font size=2 color=green face=”Futura, Helvetica”> This is green in
color and of font size 2</font>

Forced Line Breaks


The <BR> tag forces a line break with no extra (white) space between lines. Using <P> elements
for short lines of text such as postal addresses results in unwanted additional white space. For
example, with :

National Center for Supercomputing Applications<BR>


605 East Springfield Avenue<BR>
Champaign, Illinois 61820-5518<BR>

The output is:

National Center for Supercomputing Applications


605 East Springfield Avenue
Champaign, Illinois 61820-5518

Horizontal Rules
The <HR> tag produces a horizontal line the width of the browser window. A horizontal rule is
useful to separate major sections of your document.
You can vary a rule's size (thickness) and width (the percentage of the window covered by the
rule). For example:
<HR SIZE=4 WIDTH="50%">
displays as:

These are the attributes or options to the <HR> command.


1. SIZE=".." ; the thickness of the line.
2. COLOR=".." ; line color, Internet Explorer only.
3. WIDTH=".." ; the length of the line.
4. ALIGN=".." ; alignment of line: RIGHT, LEFT, or CENTER.
5. NOSHADE ; make a solid line.

4 of 13
Topic :HTML

Commenting Your Files


Comments in HTML are like comments in a computer program--the text you enter is not used by
the browser in any formatting and is not directly viewable by the reader. The comments are
accessible only if a reader views the source file.
To include a comment, enter:
<!-- your comments here -->
You must include the exclamation mark and the hyphens as shown.

Some more Tags

<B> bold text </B>

<I> italic text </I>

<TT> typewriter text, e.g. fixed-width font. </TT>

<Center>Tag used to center the contents-text as well as images on the web page </Center>

Escape Sequences (Character Entities)


Character entities have two functions:
 escaping special characters
 displaying other characters not available in the plain ASCII character set (primarily
characters with diacritical marks)

Three ASCII characters--the left angle bracket (<), the right angle bracket (>), and the
ampersand (&)--have special meanings in HTML and therefore cannot be used "as is" in text.
(The angle brackets are used to indicate the beginning and end of HTML tags, and the
ampersand is used to indicate the beginning of an escape sequence.) Double quote marks may
be used as-is but a character entity may also be used (").

To use one of the three characters in an HTML document, you must enter its escape sequence
instead:
&lt - the escape sequence for <
&gt - the escape sequence for >
&amp - the escape sequence for &
&nbsp - non-breaking space

Non-breaking Space
The most common character entity in HTML is the non-breaking space. Normally HTML will
truncate spaces in your text. If you write 10 spaces in your text HTML will remove 9 of them. To
add spaces to your text, use the &nbsp; character entity.

NOTE: Unlike the rest of HTML, the escape sequences are case sensitive. You cannot, for
instance, use &LT; instead of &lt;.

Linking
The chief power of HTML comes from its ability to link text and/or an image to another document
or section of a document. A browser highlights the identified text or image with color and/or
underlines to indicate that it is a hypertext link (often shortened to hyperlink or just link).

5 of 13
Topic :HTML

HTML's single hypertext-related tag is <A>, which stands for anchor. To include an anchor in
your document:

1. start the anchor with <A (include a space after the A)


2. specify the document you're linking to by entering the parameter HREF="filename"
followed by a closing right angle bracket (>)
3. enter the text that will serve as the hypertext link in the current document
4. enter the ending anchor tag: </A> (no space is needed before the end anchor tag)

Here is a sample hypertext reference in a file called US.html:

<A HREF="Student.html">Student Details</A>

This entry makes the word Student Details the hyperlink to the document Student.html, which
is in the same directory as the first document.

Relative Pathnames Versus Absolute Pathnames


You can link to documents in other directories by specifying the relative path from the current
document to the linked document. For example, a link to a file Class.html located in the
subdirectory School would be:
<A HREF="School/class.html">Class List</A>

These are called relative links because you are specifying the path to the linked file relative to the
location of the current file. You can also use the absolute pathname (the complete URL) of the
file, but relative links are more efficient in accessing a server.

Links to Specific Sections within the same document


Anchors can also be used to move a reader to a particular section in a document (either the
same or a different document) rather than to the top, which is the default. This type of an anchor
is commonly called a named anchor because to create the links, you insert HTML names within
the document.

Example:
<HTML>
<BODY>
This is an example of an anchor
<A name=anchor1>Each anchor is named differently in the same
document</A>
……………………….
……………………….
……………………….
<A href=#anchor1>
Links to anchor1 of the same document
</A></BODY></HTML>

Links Between Sections of Different Documents (Anchor to link to another document)


If we have to link to some other document or to an anchor of some other document, then the
value of the HREF should be he URL i.e. the name of the document, followed by #, followed by
the anchor name. Let us consider the above example as Document1 and let us connect
document2 to the anchor1 of document1.

6 of 13
Topic :HTML

<html>
<body>
<A href=document1.html#anchor1>
connects to anchor1 of Document1
</A>
</body>
</html>

Inline Images
Most Web browsers can display inline images (that is, images next to text) that are in Bitmap
(BMP), GIF, or JPEG format. Other image formats are also being incorporated into Web
browsers [e.g., the Portable Network Graphic (PNG) format]. Each image takes additional time to
download and slows down the initial display of a document. Carefully select your images and the
number of images in a document.

To include an inline image, enter:


<IMG SRC=ImageName>
where ImageName is the URL of the image file.

The other attributes which can be used with <IMG> tag are:

 Align=”alignment” specifies the position of the picture on the web page in relation to the
surrounding text. The default value for this attribute is BOTTOM.
1. LEFT aligns an image with the left margin.
2. RIGHT aligns an image with the right margin
3. TOP aligns the image with the top of the letters in the current line.
4. BOTTOM aligns the image with the baseline of the letters in the current line.
5. MIDDLE aligns the text to the middle of the image.

 Border=”border width” specifies the width of the border around the image. This value
must be an integer.

 Height=”height” specifies the height of the image either in the form of an integer or as a
percentage height of the window.

 Width=”width” specifies the width of the image either in the form of an integer or as a
percentage width of the window.

 ALT =”text” specifies text to be displayed instead of an image if the image is not available.

7 of 13
Topic :HTML

Images as Hyperlinks
Inline images can be used as hyperlinks just like plain text. The following HTML code:

<A HREF="Garden.html"><IMG SRC="Flower.gif" ALT="[Flowers]"></A

A blue border will surround the image indicating that it's a clickable hyperlink. You may not
always want this border to be displayed, though. In this case you can use the BORDER attribute
of the IMG tag to make the image appear as normal. Adding the BORDER attribute and setting it
to zero:

<A HREF="Garden.html"><IMG SRC="Flower.gif" BORDER=0 ALT="[Flowers]"></A>

LISTS

There are three types of lists: unordered lists, ordered lists, and definition lists. The first two
are very similar in structure, while definition lists have a unique setup.

Unordered Lists

The unordered list is a bulleted list of items. The list begins and ends with the tags <UL> and
</UL> respectively. Each item in the list is marked using the <LI> tag, which stands for "List
Item." <LI> has a corresponding </LI>, but this closing tag is not required to end the list item.

 Monday
 Tuesday
 Wednesday
<UL>
<LI>Monday
<LI>Tuesday
<LI>Wednesday
</UL>

Attributes for <UL ...>


TYPE : sets the type of bullet to use in the list. DISC is a solid little circle. CIRCLE is an
empty circle, and SQUARE is a square
 <UL type = ”disc”>

o <UL type = ”circle”>

 <UL type = ”square”>

Ordered Lists

Ordered lists are numbered list of items. An ordered list is contained within the tags <OL>
and </OL> and each list item starts with the <LI> tag.

8 of 13
Topic :HTML

1. Monday
2. Tuesday
3. Wednesday
<OL>
<LI>Monday
<LI>Tuesday
<LI>Wednesday
</OL>

Attributes for <OL ...>


TYPE :sets the type of numbering to use (1 / A / a / I / i )

<OL type=1> makes numbers (1, 2, 3)


<OL type=A> makes uppercase letters (A, B, C)
<OL type=a> makes lowercase letters (a, b, c)
<OL type=I> makes uppercase Roman numerals (I, II, III)
<OL type=i> makes lowercase Roman numerals (i, ii, iii)

START : tells the browser what number to start counting at

<OL type=1 start=5> will start the numbering from 5


<OL type=A start=5> will start the numbering from E

Definition Lists
Definition lists begin and end with the tags <DL> and </DL>. They are based on term-
definition pairs and are used to display definition of a list of terms.

Do
a deer, a female deer
Re
a drop of golden sun
Mi
a name I call myself
<DL>
<DT>Do
<DD>a deer, a female deer
<DT>Re
<DD>a drop of golden sun
<DT>Mi
</DL>

<DT> stands for "Definition-list Term" and <DD> stands for "Definition-list Definition."

There is one attribute to the <DL> tag, which is compact. This causes the display of the
definition list to be compacted. It means that the information contained in the <DD> will be

9 of 13
Topic :HTML

displayed on the same line as the <DT> term, if possible. (Microsoft's Internet Explorer does
not support this attribute)

<DL compact>

Do a deer, a female deer


Re a drop of golden sun
Mi a name I call myself
<DT>Do
<DD>a deer, a female deer
<DT>Re
<DD>a drop of golden sun
<DT>Me
<DD>a name I call myself
</DL>

10 of 13
Topic :HTML

Tables
Tables are very useful for presentation of tabular information. They also provide a structure
for organizing other HTML elements into "grids" on the page.

A TABLE is first specified with the <TABLE> tag, then a row in the table is opened
with the TABLE ROW (<TR>) tag, then the contents of the row are defined for each
cell with TABLE DATA (<TD>) tags. Tables start being built from the top left, then
across the columns of the first row, then to the second row, across the columns of the
second row... and so on.
Example: Output:
<table border=1>
<caption>Table</caption>
<tr> Table
<td>Row 1 col 1</td>
<td>Row 1 col 2</td>
<td>Row 1 col 3</td> Row 1 col 1 Row 1 col 2 Row 1 col 3
</tr> Row 2 col 1 Row 2 col 2 Row 2 col 3
Row 3 col 1 Row 3 col 2 Row 3 col 3
<tr>
<td>Row 2 col 1</td>
<td>Row 2 col 2</td>
<td>Row 2 col 3</td>
</tr>

<tr>
<td>Row 3 col 1</td>
<td>Row 3 col 2</td>
<td>Row 3 col 3</td>
</tr>
</table>

Table Elements
Element Description
<TABLE> ... defines a table in HTML. If the BORDER attribute is present, your browser
</TABLE> displays the table with a border.
<CAPTION> ... defines the caption for the title of the table. The default position of the title
</CAPTION> is centered at the top of the table. The attribute ALIGN=BOTTOM can be
used to position the caption below the table.
NOTE: Any kind of markup tag can be used in the caption.
<TR> ... </TR> specifies a table row within a table. You may define default attributes for
the entire row.
<TH> ... </TH> defines a table header cell. By default the text in this cell is bold and
centered. Table header cells may contain other attributes to determine the
characteristics of the cell and/or its contents.
<TD> ... </TD> defines a table data cell. By default the text in this cell is aligned left and
centered vertically. Table data cells may contain other attributes to
determine the characteristics of the cell and/or its contents.
11 of 13
Topic :HTML

ATTRIBUTES
The attributes of each of the above tags are given below:

<TABLE> tag:

 ALIGN=LEFT / RIGHT / CENTER specifies the horizontal placement of the


table.
 WIDTH=x (pixels or "%") specifies the width of a table across the browser
window. A percentage value will cause the table to consume that portion of
the width, regardless of window size.
 HEIGHT= x (pixels or "%") specifies the height of a table.
 BORDER="n": will cause a shaded border to appear around the table, where
n specifies the size of the border.
 BORDERCOLOR="#xxxxxx": specifies the colour of the border.
 CELLSPACING="n": specifes the amount of space between the cells in the
table. The default value is 2.
 CELLPADDING="n": specifies the amount of space between the border and
the contents of the cell; The default value is 1.
 BGCOLOR ="#xxxxxx" will color the background of the entire table.

<CAPTION> tag:

 ALIGN=TOP / BOTTOM specifies whether the caption is to be placed at the


bottom or the top of the table. The default is TOP.

<TR> , <TH> and <TD> tag:

 ALIGN=LEFT / RIGHT / CENTER specifies the horizontal placement of the


text in the cells.
 VALIGN=TOP / MIDDLE / BOTTOM specifies the vertical placement of the
text in the cells.
 BGCOLOR ="#xxxxxx" will color the background of the row / cells.
 COLSPAN="n": specifes the number of columns a cell spans.
 ROWSPAN="n": specifes the number of rows a cell spans.

Note: To change colour / size / fontface of the text in each cell, use <FONT> tag
separately within each <TD> tag.

12 of 13
Topic :HTML

EXAMPLE 1 OF ROWSPAN

<TABLE BORDER=1> Item 1 Item 3


<TR> Item 2
<TD>Item 1</TD> Item 4 Item 5
<TD ROWSPAN=2>Item 2</TD>
<TD>Item 3</TD>
</TR>
<TR>
<TD>Item 4</TD>
<TD>Item 5</TD>
</TR>
</TABLE>

EXAMPLE 2 OF ROWSPAN
Item 2 Item 3 Item 4
<TABLE BORDER=1> Item 1
Item 5 Item 6 Item 7
<TR>
<TD ROWSPAN=2>Item 1</TD>
<TD>Item 2</TD>
<TD>Item 3</TD>
<TD>Item 4</TD>
</TR>
<TR>
<TD>Item 5</TD>
<TD>Item 6</TD>
<TD>Item 7</TD>
</TR>
</TABLE>

EXAMPLE OF COLSPAN

<TABLE BORDER=1>
<TR> Item 1 Item 2
<TD>Item 1</TD>
<TD COLSPAN=2>Item 2</TD> Item 3 Item 4 Item 5
</TR>
<TR>
<TD>Item 3</TD>
<TD>Item 4</TD>
<TD>Item 5</TD>
</TR>
</TABLE>

13 of 13

You might also like