Scribd
Upload
0 views

Chapter02 HTML

The document provides a comprehensive introduction to HTML and the steps to create a website, including choosing a domain name, hosting service, and creating web content. It explains HTML structure, tags, formatting, and how to create elements like lists, links, graphics, and tables. Additionally, it covers basic HTML syntax and attributes for styling and organizing web content.

Uploaded by

abadhan_sabyasachi
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
0 views

Chapter02 HTML

The document provides a comprehensive introduction to HTML and the steps to create a website, including choosing a domain name, hosting service, and creating web content. It explains HTML structure, tags, formatting, and how to create elements like lists, links, graphics, and tables. Additionally, it covers basic HTML syntax and attributes for styling and organizing web content.

Uploaded by

abadhan_sabyasachi
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 59

Introduction to HTML

Creating a Web Site

1. Choose a domain name


2. Choose a hosting service and get the IP address
3. Create web content
4. Store (publish) onto hosting server (FTP/HTTPS)
5. Submit new site to search engines

2
HTML (Hyper Text Markup Language)

What is HTML?

• HTML documents are simply text documents with a specific form


• Documents comprised of content and markup tags
• Content: actual information being conveyed
• 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 are ;
 surrounded with angle brackets like this
 <B> or <I>.
 Most tags come in pairs
 exceptions: <P>, <br>, <li> tags …
 The first tag turns the action on, and the second turns it off. 3
HTML

How to Create and View an HTML document?


1.Use an text editor such as Editpad to write the
document.
2.Save the file as filename.html on a PC. This is called the
Document Source.
3.Open Netscape (or any browser) Off-Line
4.Switch to Netscape
5.Click on File, Open File and select the filename.html
document that you just created.
6.Your HTML page should now appear just like any other
Web page in Netscape.

4
Structural Tags
<HTML>
These tags enclose the entire Web page document.
</HTML>

<HEAD>
These tags enclose the Head part of the document. Within the head, more tags
can be used to specify title of the page, meta-information, etc.
</HEAD>

<TITLE>
These tags enclose the title of the document. This text appears in the title bar in
the browser and on the bookmark list if someone bookmarks your web page.
</TITLE>
Our First Example
• If you are running Windows, start Notepad
• If you are on a Mac, start SimpleText
• If you telnet to csupomona.edu, use “pico”
• Type in the following:
<html>
<head>
<title>Title of page</title>
</head>
<body>
This is my first homepage. <b>This text is bold</b>
</body>
</html>

• Open this file using a browser, and you will see…


• <title>
– defines a title in the browser tab
– provides a title for the page when it is added to favourites
– displays a title for the page in search engine results
HTML

The second tag(off switch) starts with a forward slash.


 For example ,<B> text </B>

can embedded, for instance, to do this:


 <HEAD><TITLE> Your text </HEAD></TITLE> it won't work.
 The correct order is <HEAD><TITLE> Your text </TITLE></HEAD>

not case sensitivity.


Many tags have attributes.
 For example, <P ALIGN=CENTER> centers the paragraph following it.

Some browsers don't support some tags and some


attributes.
 HTML is not case-sensitive

7
HTML

Basic HTML Document Format

<html>
<html>
<title>personal
<title>personal website</title>
website</title> See what it
<body
<body bgcolor="SILVER">
bgcolor="SILVER"> looks like:
<center><h1><FONT
<center><h1><FONT
COLOR="RED">SRM
COLOR="RED">SRM
UNIVERSITY</FONT></h1></center
UNIVERSITY</FONT></h1></center
>>
</body>
</body>
</html>
</html>

<TITLE>...</TITLE>-- puts text on the browser's title bar.

1999 Asian Women's Network Training


8
Workshop
Header Tags
Header Tags -- Used for marking sections and
subsections in a document.

<H1>Header 1 -- Giant-sized and bold </H1>


<H2>Header 2 -- Large and bold </H2>
<H3>Header 3 -- Normal-sized and bold </H3>
<H4>Header 4 -- Small and bold </H4>
<H5>Header 5 -- Very Small and bold </H5>
<H6>Header 6 -- Tiny and bold </H6>
Header Tags (cont.)

H1 = Giant-sized and bold


H2 = Large and bold
H3 = Normal-sized and bold
H4 = Small and bold
H5 = Very Small and bold

H6 = Tiny and bold


HTML

You may now switch back and forth between the Source
and the HTML Document
switch to Notepad with the Document Source
make changes
save the document again
switch back to `browser
click on RELOAD and view the new HTML
Document
switch to Notepad with the Document Source......

11
Breaking Lines and Paragraphs

• <P> text </P>


– Paragraph tag
– Most browsers render (process) this with blank lines
between each paragraph
• <BR>
– Line break tag
– Used when the webmaster wants a carriage return but
doesn't want a blank line to follow

Example: text a
<p>text a</p>
<p>text b</p> text b
<br>text c
<br>text d text c
text d
Text Formatting Tags
Some basic text formatting styles:

Tag Result

<I> Italics </I> Italics


<B> Bold </B> Bold

<PRE> Preformatted Text </PRE> Preformatted Text


<small> Small text
<del> Deleted text
<ins> Inserted text
<sub> Subscript text
<sup> Superscript text
Font modifications
Web creators can also change the way text looks by using the <FONT> tag

SIZE="number" - changes size of the font; 1=smallest, 7 = largest


<FONT SIZE="7">Big</FONT> <FONT SIZE="1">Small</FONT>

Big Small

COLOR="color-name" - changes text color


<FONT COLOR="red">This is red</FONT>

This is red

FACE="font-name" - changes font


<FONT FACE="verdana">This is the verdana font;</FONT> <FONT FACE="chicago">this is the chicago font.</FONT>

This is the verdana font; this is chicago font.


<font> example

<html>
<head>
<title>Page Title</title>
</head>
<body bgcolor=“grey”>
<h1><font color=“red” size=7>This is a Heading</font></h1>
<p><font color=“blue”>This is a paragraph.</font></p>
</body>
</html>
Lists -- Unordered Lists
Unordered lists:
<UL>
<LI>Item One • Item One
<LI>Item Two • Item Two
<LI>Item Three • Item Three
<LI>Item Four • Item Four
</UL>

Unordered List Attributes:


type="disc/circle/square"
• Disc (default)  Circle  Square
Lists -- Ordered Lists
Ordered (Numbered) Lists:
<OL>
<LI> Item One 1. Item One
<LI> Item Two 2. Item Two
<LI> Item Three 3. Item Three
<LI> Item Four
4. Item Four
</OL>

Ordered List Attributes:


type="i/I/a/A/1" (default)
i = i. Item One I = I. Item One a = a. Item One A = A. Item One 1 = 1.Item One
ii. Item Two II. Item Two b. Item Two B. Item Two 2. Item Two
iii. Item Three III. Item Three c. Item Three C. Item Three 3. Item Three
iv. Item Four IV. Item Four d. Item Four D. Item Four 4. Item Four

This attribute lets you specify which number/letter will start the list
Anchor <a> tab(Links)
The anchor tag <A> is used to link one document to another or from one part of a
document to another part of the same document.

Basic Links:
<A HREF="http://www.srmap.edu.in/">SRM University-AP</A>

Email links:
<A HREF="mailto:[email protected]">Email
[email protected]</A>
Graphics

To have a graphic appear on a webpage, web


designers must to put the <IMG> tag in with the
address where the graphic "lives":
<IMG
SRC="http://www.someplace.com/images/fish.gif">

Graphics attributes:
width="xx/xx%": width in pixels/percentage
height="xx/xx%": height in pixels/percentage
border="xx": pixel length of the border surrounding the image.
hspace="xx": places a buffer of space horizontally around the image
vspace="xx": places a buffer of space vertically around the image
align="top/middle/bottom/right/left": aligns image in relation to the text (see next 2 slides)
Graphics (cont.)
<img src="http://www.someplace.com/images/fish.gif" align="top">All about Fish

All about Fish

<img src="http://www.someplace.com/images/fish.gif" align="middle">All about Fish

All about Fish

<img src="http://www.someplace.com/images/fish.gif" align="bottom">All about Fish

All about Fish


Graphics (cont.)
<img src="http://www.someplace.com/images/fish.gif" align="left">All about Fish

All about Fish

<img src="http://www.someplace.com/images/fish.gif" align="right">All about Fish

All about Fish


HTML COLOR:
Hexadecimal Color Codes
<hr> tag

• The <hr> tag in HTML stands for horizontal rule


• It is used to insert a horizontal rule or a thematic break in an
HTML page
• Helps to divide or separate the document sections.

<html>
<title>personal website</title>
<body bgcolor=000000>
<h1><FONT COLOR="RED">SRM UNIVERSITY</FONT></h1>
<hr size=10 align="left" width=10>
</body>
</html>
<pre> tag

• Text in a <pre> element is displayed in a fixed-width font


(usually Courier), and it preserves both spaces and line breaks.

<html>
<title>personal website</title>
<body>
<h1><FONT COLOR="RED">SRM UNIVERSITY</FONT></h1>
<pre>
SRM University, Andhra Pradesh (SRM AP), also known as SRM University, Amaravati, is
a private university[3] located near Neerukonda village in Mangalagiri mandal of
Guntur district in Andhra Pradesh, India, in the area of the planned capital city
Amaravati. The university was established in 2017 by the SRM Trust through the
Andhra Pradesh Private Universities (Establishment and Regulation) Act, 2016.[4] It
offers undergraduate, postgraduate courses and Ph.D programmes in engineering,
liberal arts and basic sciences.[5]
</pre>
</body>
</html>
Defining a Table Structure
• The first step to creating a table is to specify
the table structure:
– the number of rows and columns
– the location of column headings
– the placement of a table caption
• Once the table structure is in place, you can
start entering data into the table.

25
Using the <table>,
<tr>, and <td> Tags
• Graphical tables are enclosed within a two-
sided <table> tag that identifies the start
and ending of the table structure.
• Each row of the table is indicated using a two-
sided <tr> (for table row).
• Within each table row, a two-sided <td> (for
table data) tag indicates the presence of
individual table cells.

26
The General Table Syntax
<table border=1>
<tr>
<td> First Cell </td>
<td> Second Cell </td>
</tr>
<tr>
<td> Third Cell </td>
<td> Fourth Cell </td>
</tr>
</table>

two rows

two columns
27
Columns within a Table
• HTML does not provide a tag for table columns.
• In the original HTML specifications, the number
of columns is determined by how many cells
are inserted within each row.
– for example, if you have four <td> tags in each
table row, that table has four columns
• Later versions of HTML provide increased
support for controlling the appearance of table
columns.
28
HTML Structure of a Table
beginning of the
table structure
table cells

After the table


First row in the
table
structure is in place,
you’re ready to add
the text for each cell.

end of the table


structure

29
Creating Headings with the <th> Tag
• HTML provides the <th> tag for table
headings.
• Text formatted with the <th> tag is centered
within the cell and displayed in a boldface
font.
• The <th> tag is most often used for column
headings, but you can use it for any cell that
you want to contain centered boldfaced text.

30
Adding Table Headings to the Table
Text in cells formatted
with the <th> tag is bold
and centered above each
table column.

table
headings

31
Creating a Table Caption
• HTML allows you to specify a caption for a table.
• The syntax for creating a caption is: <caption
align=“alignment”>caption text</caption>
– alignment indicates the caption placement
– a value of “bottom” centers the caption below the table
– a value of “top” or “center” centers the caption above the table
– a value of “left” or “right” place the caption above the table to the
left or right
• The <caption> tag works only with tables, the tag must be
placed within the table structure.
• Captions are shown as normal text without special formatting.
• Captions can be formatted by embedding the caption text
within other HTML tags.
– for example, place the caption text within a pair of <b> and <i>
32
tags causes the caption to display as bold and italic
Result of a Table Caption
caption text

caption will be
centered above
the table

33
Modifying the Appearance of a Table
• You can modify the appearance of a table by
adding:
– gridlines
– borders
– background color
• HTML also provides tags and attributes to
control the placement and size of a table.

34
Adding a Table Border
• By default, browsers display tables without table
borders.
• A table border can be added using the border
attribute to the <table> tag.
• The syntax for creating a table border is: <table
border=“value”>
– value is the width of the border in pixels
• The size attribute is optional; if you don’t specify a
size, the browser creates a table border 1 pixel
wide.
35
Tables with Different Borders Values

This figure shows the effect on a table’s border when the border size is varied.

36
Adding a 5-Pixel Border to a Table

Only the outside


border is affected by
the border attribute;
the internal gridlines
are not affected.

37
Controlling Cell Spacing
• The cellspacing attribute controls the amount of
space inserted between table cells.
• The syntax for specifying the cell space is:
<table cellspacing=“value”>
– value is the width of the interior borders in pixels
– the default cell spacing is 2 pixels

• Cell spacing refers to the space between the cells.

38
Defining Cell Padding
• To control the space between the table text and the
cell borders, add the cellpadding attribute to the
table tag.
• The syntax for this attribute is:
<table cellpadding=“value”>
– value is the distance from the table text to the cell border,
as measured in pixels
– the default cell padding value is 1 pixel

• Cell padding refers to the space within the cells.


39
Tables with Different
Cell Spacing Values
different cell spacing values

different cell padding values

40
<rule> attribute
• The rule attribute lets you control how the
table gridlines are drawn.
• The syntax of the rules attribute is:
<table rules=“type”>
– type is either “all”, “rows”, “cols”, or “none”
the effect of each of the rules attribute values on a table

41
Working with Table and Cell Size
• The size of a table is determined by text it contains in its cells.
• By default, HTML places text on a single line.
• As you add text in a cell, the width of the column and table
expands to the edge of the page.
– once the page edge is reached, the browser reduces the size of the
remaining columns to keep the text to a single line
• You can insert line break, paragraph, or other tags within a
cell.
• When the browser can no longer increase or decrease the size
of the column and table it wraps the text to a second line.
• As more text is added, the height of the table expands to
accommodate the additional text.
• But, you can manually define the size of the table and its cells.
42
Defining the Table Size
• The syntax for specifying the table size is:
<table width=“size” height=“size”>
– size is the width and height of the table as measured in pixels or as a
percentage of the display area
• To create a table whose height is equal to the entire height of the
display area, enter the attribute height=“100%”.
• If you specify an absolute size for a table in pixels, its size remains
constant, regardless of the browser or monitor settings used.

43
Setting the Width of the
Table to 500 Pixels

44
Defining Cell and Column Sizes
• To set the width of an individual cell, add the width attribute to
either the <td> or <th> tags.
• The syntax is: width=“value”
– value can be expressed in pixels or as a percentage of the table
width
• The height attribute can also be used in the <td> or <th> tags
to set the height of individual cells.
– The height attribute is expressed either in pixels or as a
percentage of the height of the table.

45
Aligning a Table on the Web Page
• By default, a browser places a table on the left margin of a
Web page, with surrounding text placed above and below the
table.
• To align a table with the surrounding text, use the align attribute as
follows: align=“alignment”
– alignment equals “left”, “right”, or “center”
– left or right alignment places the table on the margin of the Web page
and wraps surrounding text to the side
– center alignment places the table in the horizontal center of the page,
but does not allow text to wrap around it
• The align attribute is similar to the align attribute used with the
<img> tag.

46
Results of a Right-Aligned Table

47
Values of the Align
and Valign Attributes

48
Spanning Rows and Columns
• To merge several cells into one, you need to create
a spanning cell.
• A spanning cell is a cell that occupies more than
one row or column in a table.
• Spanning cells are created by inserting the
rowspan and colspan attribute in a <td> or <th>
tag.
• The syntax for these attributes is:
rowspan=“value” colspan=“value”
– value is the number of rows or columns that the cell spans
in the table
49
A Table Structure with a
Row-Spanning Cell
four table cells
in the first row

only three table


cells are required
for the second and
third rows

HTML code

resulting table
50
Adding Spanning Cells to a Table

51
Another Example of Spanning Cells

52
Another Example of Spanning Cells

53
Try yourself

This cell
spans two this cell
columns and spans three
two rows columns

This cell
spans three
rows

54
Applying a Background Color
• Table elements support the bgcolor attribute.
• To specify a background color for all of the cells in a table, all of the
cells in a row, or for individual cells, by adding the bgcolor attribute
to either the <table>, <tr>, <td>, or <th> tags as follows:
<table bgcolor=“color”>
<tr bgcolor=“color”>
<td bgcolor=“color”>
<th bgcolor=“color”>
– color is either a color name or hexadecimal color value

55
Specifying Table, Row, and Cell Colors
The bordercolor Attribute
• By default, table borders are displayed in two shades of gray
that create a three-dimensional effect.
• The syntax for the bordercolor attribute is:
<table bordercolor=“color”>
– color is an HTML color name or hexadecimal color value
• Internet Explorer and Netscape apply this attribute
differently.
<table border=“10” bordercolor=“blue”>

Internet Explorer Netscape


57
Applying a Table Background
• Add a background image to your tables using the
background attribute.
• A background can be applied to the entire table or to a cell.

parch.jpg

<table background=“parch.jpg”> <td background=“parch.jpg”>

58
Comments in HTML

You might also like