Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
272 views12 pages

Hyper Text Markup Language (HTML) : Unit 5

Uploaded by

Lavanya lokesh

The document discusses HTML and its basic concepts like tags, structure of an HTML document, formatting text and elements. It explains how to create an HTML file and commonly used tags along with their functionality.

Copyright:

© All Rights Reserved
Download as DOCX, PDF, TXT or read online from Scribd
Download as docx, pdf, or txt

Hyper Text Markup Language (HTML) : Unit 5

Uploaded by

Lavanya lokesh
272 views12 pages
The document discusses HTML and its basic concepts like tags, structure of an HTML document, formatting text and elements. It explains how to create an HTML file and commonly used tags along with their functionality.

Original Description:

html

Original Title

UNIT 4 HTML

Copyright

© © All Rights Reserved

Available Formats

DOCX, PDF, TXT or read online from Scribd

Did you find this document useful?

Is this content inappropriate?

The document discusses HTML and its basic concepts like tags, structure of an HTML document, formatting text and elements. It explains how to create an HTML file and commonly used tags along with their functionality.

Copyright:

© All Rights Reserved
Download as DOCX, PDF, TXT or read online from Scribd
Download as docx, pdf, or txt
272 views12 pages

Hyper Text Markup Language (HTML) : Unit 5

Uploaded by

Lavanya lokesh
The document discusses HTML and its basic concepts like tags, structure of an HTML document, formatting text and elements. It explains how to create an HTML file and commonly used tags along with their functionality.

Copyright:

© All Rights Reserved
Download as DOCX, PDF, TXT or read online from Scribd
Download as docx, pdf, or txt
You are on page 1/ 12

UNIT 5

HYPER TEXT MARKUP LANGUAGE(HTML)


File Creation
If information has to be stored on a computer, it must be created first. While being created,
information can only be stored in the form of files on the computer. These files are created
using special software programs or programming environments.
Files that travel across the largest network in the world, the Internet, and carry information
from a server to a client that request them are called Web Pages. The individual who develops
these web pages called Web Developer.

Web Server
A Web server is a system that delivers content or services to end users over the Internet. A
Web server consists of a physical server, server operating system (OS) and software used to
facilitate HTTP communication. A Web server is also known as an Internet server.

Web Client
The Web client is a client-side component within the Java 2 Platform Enterprise Edition
(J2EE), a distributed multi-tiered application model used for building and developing enterprise
applications. Client-side components are typically computer applications running on a user's
computer and connect to a server.

Web Page
A Web page is a document for the World Wide Web that is identified by a unique
uniform resource locator (URL).A Web page can be accessed and displayed on a monitor or
mobile device through a Web browser .

Web Browser
A Web browser is a software program that allows a user to locate, access, and display Web
pages. In common usage, a Web browser is usually shortened to "browser." Browser allows web
client to:

 Connect to an appropriate Server.

 Query the Server for the information to be read.

 Provides an interface to read the information returned by the server.


Hyper Text Markup Language(HTML)
HTML (Hypertext Markup Language) 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 Web browser how to display a Web page's words and images for the user.
Each individual markup code is referred to as an element.
The HTML syntax is based on a list of tags that describe the page's format and what is
displayed on the Web page.
HTML Tags
Web pages are created using a language called HTML. HTML uses tags to control the
look and feel of the web page.
HTML tags are surrounded by < > characters. The surrounding characters are called angle
brackets Many tags have a closing tag, which are characterized by a forward slash "/" before
the tag name. This closing tag tells the browser to cease whatever instruction began with the
initial 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>
The general form for a tag is:
< tag_name > Text </tag_name>
There are many tags in HTML, and each one tells the browser a piece of information
about how it should display the text between the tags.
Example for tag in html.
<html> this is html page </html>
HTML tags can be of two types

Paired Tags:

A tag is said to be a paired tag if the text is placed between a tag and its companion tag.
In paired tags, the first tag is referred to as Opening Tag and the second tag is referred to as
Closing Tag. For example the <b> tag is a paired tag. The <b> tag with its companion tag
</b> causes the text contained between them to be rendered in bold. The effect of other
paired tag is applied only to the text they contain.

The opening tag activates the effect and the closing tag turns the effect off.
Singular Tags:

The second type of tag is the singular or stand-alone tag. A stand-alone tag does not have
a companion tag.

For example <br/> tag will insert a line break. This tag does not require any companion tag.
Steps Involved In Creating HTML File:

HTML can be edited by using a professional HTML editor like:


 Adobe Dreamweaver
 Microsoft Expression Web
 CoffeeCup HTML Editor
The common text editors are Notepad (PC) or TextEdit (Mac).

Following are the 4 steps below to create your first web page with Notepad.
STEP 1: Open Notepad
Open command prompt and type notepad and press enter.
STEP 2: Write HTML code.
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>

STEP 3: Save the HTML Page.

In notepad From the File pull-down menu, Select "Save As". Change the
"Save As Type" option on the bottom from "Text Document" to "All
Files".
Save the file to the Desktop, and name the file using the ".html" extension
(e.g., "home.html").

STEP 4: View HTML Page in Browser.

Double-click on saved HTML file; a webpage will open in default browser.

Commonly Used Commands

The Structure Of An HTML Program:

Every HTML program has a rigid structure. The entire web page is enclosed within <html>
</html> tags. Within these tags two distinct section are created using the <head> </head> tags
and the <body> </body> tags.
These are described below

Document head: Information placed in this section is essential to the inner workings of
document and has nothing to do with the content of the document. With the exception of
information contained within the <title> </title> tags, all the information placed within the
<head></head> tags is not displayed in the browser.
The HTML tags used to indicate the start and end of the head section are: <head>
<title>…………….</title>
</head>
Document body: The tags used to indicate the start and end of the main body of textual
information are:
<body>
…………….
</body>
Page defaults like background color, text color, font size, font weight and so on can be
specified as attributes of the <body> tag. The attributes that the <body> tag takes are:
CSS Background Formatting (background-color :) – Set the default background-color
property to the background-color of an element. This tag is written in the CSS (Cascading
Style Sheets) file.
CSS Background Formatting (background-color :) - Set the background-image property
of an element or of the document. This tag is written in the CSS file.
TEXT – Changes the body text color from its default value to the color specified
with this attribute.
Example:
<body style=”background:url(abc.gif); color:red;”>

Titles And Footers

Titles

A web page could have a title that describes what the page is about without being too wordy. This can be
achieved by using the title tag. Text included between<title>……</title> tag shows up in the title bar of the
browser window.
<title>……..</title>

Titles

Just as a title can be placed in title bar of the browser window, certain information is commonly placed
at the foot of the web page. This tag should be ideally be placed immediately after the last line of the
textual material of the web page.
However, it could also be placed anywhere in the body of the document. The text typed
within these tags always appears in Italics.

Copyright information, contact details of the creater of the web page and so on are the
type of information traditionally placed bat the foot of the web page.
The HTML tags are: <address>……..</address>
Example:
<head>
<title>this is the title</title>
</head>
<body >
::::::::::::::
<address>this is footer </ address > </body>
Text Formatting
Paragraph breaks
A blank line always separates paragraphs in textual materials. The tags that provides this
functionality is <p>. On encountering this tag the browser, moves on to new line, skipping one
line between the previous line and the new line.
Example:
<body >
HTML (Hypertext Markup Language) is the set of markup symbols or codes
inserted in a file intended for display on a World Wide
Web browser page. <p>The markup tells the Web browser how to display a
Web page's words and images for the user.</p>
</body>
Line breaks
When text needs to starts from a new line and not bontinue on the same line
(without skipping a blankline), the <br/> tag should be used. This tag simply jumps to
the start of the next line.
Example:
<body >
HTML stands for (Hypertext Markup Language).<br/> It is used to create web
pages </body>

Emphasizing Material In A Web Page

Heading Styles:

HTML supports six different levels of headings. The highest-level header format is
<h1> and the lowest level is<h6>.

All the styles appear in BOLDFACE and size of heading depends on the level choosen.
ie.<h1> to <h6>
As the number next to<h><(1,2…..) increases the font size actually decreases.
Example:<h1> This is heading </h1>
Drawing lines

The tag <hr> draw lines and horizontal rules. This tag draws a horizontal line across
the whole page wherever specified. The attributes to the <hr> tag are

ALIGN – aligns the line on the browser screen, which is by default, aligned to the center of
the screen..
ALIGN =LEFT will align the line to the left of the screen.
ALIGN =RIGHT will align the line to the right of the screen.
ALIGN =CENTER will align the line to the center of the screen. SIZE –
Changes the size of the rule.
WIDTH – Sets the width of the rule. It can be set to fixed number of pixels, or to a
percentage of the available screen width..
Example:
Welcome to our web site
<hr align=”left” width=”10” size=”4”/>
Text Styles
Bold:
Displays the text in BOLDFACE style. The tags used are between <b> …</b>.
Example:
<b> Welcome to our web site.</b>
Italics:
Displays the text in ITALICS style. The tags used are between <i>…. </i>.
Example:
<i> Welcome to our web site </i>.
Underline:
Displays the text in UNDERLINED style. The tags used are between <u> ….
</u>.
Example:<u> Welcome to our web site </u>.

Other Text Effects


Centering (Text, Images etc,):
The <center>….</center> tags are used to center everything found between them- text, lists,
images, rules, tables or any other page elements.
Example:
< center> Welcome to our web site.</center>

Spacing(Indenting Text):
The tag used for inserting blank space in an html document is <spacer>its
attributes are:
TYPE – to specify whether space has to be left horizontally or vertically.

TYPE=”HORIZONTAL” indicates that horizontal space has to be left.

TYPE=”VERTICAL” indicates that vertical space has to be left.

SIZE – indicates the amount of space to be left. Size accepts any integer.
Example:

Welcome to our web site<br/>


<spacer type=”horizontal” size=90>Hope you enjoyed it </spacer >
Controlling font size and color:
Font tag is deprecated. Instead of font tag now font tag is specified in CSS text formatting
properties. The CSS text formatting properties must be speciufied in “STYLE”. Some of the
attributes of Font available in CSS text formatting are:

font-family: – Sets the text to the specified font for the specified element. font-size - Sets the
size of the text. font-size value can be absolute(px or em) or can be relative(%).
color – Sets the color of the text. Color can be set to English language name,
hexadecimal or RGB value.
Example:
<p style=”font-family: Comic Sans MS; font-size:10px; color:red;”> Welcome
to our web site.</p>
Lists

Types of lists:

Unordered list(bullets): An unordered list starts with the tag <ul> and ends with </ul>.
Each list item starts with the tag <li>. Attributes and css\style properties which can be
specified with <li> are:
css list-style-type: – specifies the type of the bullet.

list-style-type:circle will give a solid square black bullet

list-style-type: square will give a solid square black bullet

Example:

<ul style=”list-style-type: circle;”> <li>


Floppies
<li> Hard disks
<li> Monitors
</ul>
Ordered list(numbering): An ordered list starts with the tag <ol> and ends with </ol>.
Each list item starts with the tag <li>. Attributes and css\style properties which can be
specified with <li> are:
css\style list-style-type:– controls the numbering scheme to be used.

list-style-type:decimal will give numbers (1,2,3….).

list-style-type:lower-alpha will give lower-alpha (a,b,c,d…).

list-style-type:lower-greek will give lower-greek (alpha,beta,gamma…).

list-style-type:lower-latin will give lower-latin (a,b,c,d…).

list-style-type:lower-roman will give lower-roman (i,ii,iii,iv…).

list-style-type:upper-alpha will give upper -alpha (A,B,C,D…).

list-style-type:upper -latin will give upper -latin (A,B,C,D…).

list-style-type:upper -roman will give upper -roman (I,II,III,IV…).

css\style counter rese :– The counter-reset property creates or resets one or more counters.

Example:

<ol style=”list-style-type: decimal” start=”3”> <li>


Floppies
<li> Hard disks
<li> Monitors
</ol>
Definition list: Definition list values appear within tags <dl> and </dl>. Definition list
consist of two parts:

Deinition term – specifies appears after <dl> tag. Deinition


description – appears after <dd> tag.

Example:

<dl>

<dt> Keyboard <dd> An input device. <dt>


Printer <dd> An output device.
</dl>

Adding Graphics To HTML Documents


Other than text, HTML allows placing of static and/or animated images in an HTML page.
HTML accepts two picture file formats .gif and .jpg. Using tools such as gif constructor or adobe
PhotoShop, images can be created to suit the requirements of a web page and saved in these file
formats.
Once an image is ready and stored in the above mentioned formats, it can be inserted into
a webpage using the tag <img>, which takes the name of the image file (filename.gif
filename.jpg or filename.jpeg) as an attribute. In addition, HTML also allows control of height
width border and soon, of every image placed on the webpage. The <img> takes the following
attributes:

BORDER – specifies the size of the border to place around the image. This attribute
should be specified in the CSS.
WIDTH - Specifies the width of the image in pixels. HIGHT -
Specifies the hight of the image in pixels.
css/style PADDING – indicates the amount of space to the left, right, top and bottom of the
image. This attribute should be specified in the CSS.
ALT– indicates the text to be displayed in case of browser is unable to display the
image specified in the SRC attribute.
SRC – Specifies the location and name of the image file.
Example:
<html>
<body>
Example for image attribute<br/>
<img src=”images/html.gif” style=”border-width:3px;” height=”200”
width”200” alt=”The Html”>
<body><html>

Linking Documents
Links:
HTML allows linking to other HTML documents as well as images. Clicking on a section
of text or an image in one web page will open an entire web page or an image. The text or an
image that provides such linkages is called hypertext, a hyperlink or hotspot. The browser
distinguishes hyperlink from normal text. Every hyperlink, Appears blue in color. The
hyperlink text/image is underlined. When the mouse cursor placed over it the standard arrow
shaped mouse cursor changes to the shape of hand. The blue color which appears by default
can be over-ridden. To change these link colors, there are three attributes that can be specified
with the <body> tag these are:
css\style a:link or a:active or a:visited : Changes the default color of hyper a
hyper link to what ever color is specified with this tag. The user can specify the
color name or equivalent hexadecimal number. It controls placing a caption with
respect to table.

Links are created in webpage using the <a>…</a> tags. Anything written between the
<a></a> tags become hyperlink or hotspot.
The documents to be navigated needs to be specified. By using the href attribute of the <a>
tag the next navigate webpage or image can be specified.
Syntax:<A href=”filename.html”>

Example: <a href=”home.html”>visit home page</a>

Links:

Just as text can act as hyperlink, so also image can act as hyperlink. Anything included
within<a>…</a> tags become a hotspot. An image can be made a hotspot by enclosing an
<img> tag within the <a>….</a> tags

Example:<a href=”home.html”> <img src=”mickey.gif”> </a>

Frames.

Introduction to Frames:

Until now each web page when opened takes over the entire browser screen. The browser
screen could not be split into separate (unique) sections, showing different but related
information.

The HTML tags that divide a browser screeninto two or more HTML recognizable unique
regions. Each unique region is called frame. Each frame can be loaded with a different
document and hence, allow multiple HTML documents to be seen concurrently.
The <frameset> tag:
The splitting of browser screen into frames is accomplished with the <frameset> and
</frameset> tags embedded into the HTML document. The <frameset>….</frameset> tags
required one of the following two attributes depending on wether thescreen has to be devided
into rows or columns.

Rows: This attribute is used to divide the screen into multiple rows. It can be set equal to a list
of values. Depending on the required size of each row.
Columns: This attribute is used to divide the screen into multiple columns. It can be set equal
to a list of values. Depending on the required size of each column.

The value for row or column can be: A number of pixels.

Expressed as percentage of the screen resolution. The symbol *,


which indicates the remaining space.
Example:
<frameset rows=”40%,30%,30%”> divides browser screen into 3
horizontal sections.

<frameset cols=”50%,50%’> splits the 1st horizontal section


into two equal vertical section.
</frameset>
<frameset cols=”25%,75%’> splits the 2nd horizontal section
into two vertical section.
</frameset>
</frameset>
The <frame> tag:

Once the browser screen is divided into rows(horizontal sections) and columns(vertical
sections) each unique section defined can be loaded with different HTML documents. This
is achived by using the <frame> tag which takes in the following attributes:
Src=”url”: Indicates the URL of the document to be loaded into the frame.

MarginHeight=”n”: Specifies theamount of white space to be left at the top and


bottom of the frame.

MarginWidth=”n”: Specifies theamount of white space to be left at the side of the


frame.
Name=”name”: Gives the frame a unique name soit can be targeted by other
documents. The name given must begin with an alpha numeric character.

Noresize: Disables the frame resizing capability.

Scrolling: Controls the appearance of horizontal and vertical scrollbars in a frame. This
takes the values YES/NO/AUTO.

Example:
<html>
<frameset rows=”30%,*”> Divides the screen into 2rows, one
occupying 30% of the screen, and
other occupying the remaining.
<frameset cols =”50%,50%’> Divides the 1st row into 2 equal
columns, each 50% of the screen.
<frame src=”file1.html”> loads 1st frame with file1.html
<frame src=”file2.html”> loads 2nd frame with file2.html
</frameset>
<frameset cols =”50%,50%’> Divides the 2nd row into 2 equal
columns, 50% of the screen.
<frame src=”file3.html”> loads 1st frame with file3.html
<frame src=”file4.html”> loads 2nd frame with file4.html
</frameset>
</frameset>
</html>
Tables

Introduction:

A table is a twodimensional matrix, consisting of rows and columns. Tables are


intended for displaying data in columns on a web page all table related tags are
included between the <table>….</table> tags. Each row of a table is described
between the <tr>…. </tr> tags each column of a table is described between the
<td>…</td> tags.
Table rows can be of two types:

Header rows: the row that spans across column of a table is called the header
row. A table header row is defined using <th>….</th>. The content of table
header row is automatically centered and appears in boldface.

Data Rows: Individual data cells placed in the horizontal plane creates a data row.
There could be single data or multiple data. Data cells hold data that must be
displayed in the table
The attributes that can be included in the <table> tag are:

Align: Horizontal alignment is controlled by the align attribute. It can be set to


left, right, center, justify or inherit.
Valign: Controls the vertical alignment of cell contents. It accepts the value top,
middle or bottom.
Width: Sets the width to a specific number of pixels or to a percentage of the
available screen width. By default cell width is adjusted based on cell data
value.
Border: Controls the border to be placed around the table. The border
thickness is specified in pixels.
Cellpadding: This attribute controls the distance between the data in a cell
and the boundries of the cell.
Cellspacing: Controls the spacing between adjacent cells.
Colspan: This attribute inside a<th> or <td> tag instructs the browser to make
the cell defined by the tag to take up more than one column. This attribute is
usefull when one row of the table needs to be a certain numbers of columns
wide.
Rowspan: The rowspan attribute woks in the same way as colspan attributes
except that it allows a cell to take up more than one row.
The Caption Tag:

Table heading is called Captions. Captions can be provide to a table by using


the<caption>….</caption> tags. This paired tags appeared within the
<table>….,/table> tags. The caption attributes is as follow:
css\style caption-side: It controls placing a caption with respect to table.
caption-side:bottom: will place the caption immediately below the table.
caption-side:top: will place the caption immediately ablove the table.
caption-side:right: will place the caption immediately right side of the table.
caption-side:left: will place the caption immediately left side of the table.
Example:
<html>
<body>
<center>
<table border=”5” style=”text-align:center” width=”50%”
cellpadding=”10” cellsapacing=”10”>
<tr> <th rowspan=”2”>NAME</th><th rowspan=”2”>MARKS</th> </tr>
<tr><th>C</th><th>C++</th><th>JAVA<th> </tr>
<tr align=”center”>
<td>ABC</td><td>40</td><td>45<td><td>42</td></tr>
<tr align=”center”>
<td>XYZ</td><td>30</td><td>40<td><td>45</td></tr>
</table><center><body><html>

You might also like