Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
74 views

HTML Notes

Uploaded by

shubhj509
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
74 views

HTML Notes

Uploaded by

shubhj509
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 12

WEB DESIGNING USING HTML

INTRODUCTION
We access web sites regularly to download information. We also observe that the
content on the website is presented in different layouts, colors, fonts, size and web
pages are created by writing simple text in HTML or Hyper Text Markup
Language.HTML is one of the several Markup languages such as RTF, PHP,
PEARL, ASP, JAVASCRIPT, ACTIONSCRIPT. Used for designing websites on
the WWW.
3 Technologies used by World Wide Web are :
1) HTML (Hyper Text Markup Language) used to write Web pages.
2) HTTP (Hyper Text Transfer Protocol) to transmit those pages.
3) A web browser client program to receive the data, interpret it and display the
results.

BASIC WEB TERMINOLOGY

WWW(World Wide Web) : is a web of information that is interlinked through the


hypertext links.

HTTP : Hyper Text Transfer Protocol. Protocol used to transfer web pages.

HTML : Hyper Text Markup Language. The language used to design web pages.

Hypertext :Hypertext is the way we move around on the web by clicking on


hyperlinks that take us to the next page and so on. Thus, the link
available on a webpage is called Hypertext. These text are known as
Link, Link, Hotlink, Hyperlink.

Hyperlink : Used to jump to another part of same/different web page.


Eg. This is a link to Google

Uniform Resource Locator (URL) : Unique address of webpage.


Eg. http//www.yahoo.com/index.html

Web Browser : A web browser (commonly referred to as a browser) is a software


application for accessing information on the World Wide Web.
When a user requests a web page from a particular website, the
web browser retrieves the necessary content from a web server and
then displays the page on the screen.
The most popular web browsers that are used today are Mozilla
Firefox, Google Chrome, Microsoft Internet Explorer,
Apple Safari and the Opera browser.

Web Server : It is a computer having server software, which holds Web pages and
‘serves’ them out to computers that request them.
Eg. Microsoft IIS, Apache.

Website : A set of Web pages that are logically connected.

Web Page : Electronic document carrying information and links to resources on


Internetcreated using languages like HTML.

Home Page : The starting, introductory or welcome page for a Web site. It is also
known as index page.

What is HTML ?
HTML stands for Hypertext Markup Language, and it is the most widely used
language to write Web Pages. HTML is a Markup Language. HTML is the
character-based method for describing and expressing the content. The content
may be pictures, text, sound and video clips.
Technically HTML is not a programming language but it has code-words and
syntax like any other language. It consists of tags typed into a text-file by the site
author. The text is then saved as an .html file, and viewed through a browser, like
Internet Explorer or Netscape Navigator. This browser reads the file and translates
the text into a visible form, hopefully rendering the page as the author had
intended. You can use anything from a text-editor such as Notepad to a powerful
graphical editor to create HTML pages.

Features of HTML:
- HTML provides pre defined tags to create the layout of a web page such as
headings, paragraphs, lists, tables, images, etc.
- HTML is a markup language. Markup is what HTML tags do to the text
inside them. The markups are read and interpreted by the browsers which
display the marked elements as per the specifications used for developing
web pages connected through hyperlinks.
- HTML uses HYPERTEXT.
Important Points :
 Each HTML document begins with a <HTML> and ends with </HTML> tags.

 Each document consists of a HEAD section surrounded by <HEAD> and


</HEAD> tags and a BODY section with <BODY> and </BODY>.
 HTML tags come in pairs with the ending tag containing an additional "/".
 In our case, the <TITLE> tags are nested in the <HEAD>-</HEAD>tags.
 Text inside <TITLE> tags is displayed on the browser Title Bar.
 The text between the <BODY> tags is displayed inside the browser window.

What is an HTML DOCUMENT ?


A HTML document corresponds to a web page. It contains HTML tags and plain
text. They can be created using the text editor Notepad.A web browser (like
Internet Explorer or Firefox) reads the HTML documents and displays them as
web pages.The browser does not display the HTML tags, but uses the tags to
interpret the content of the page.

HTML Tag/ HTML Element :


An HTML Tag/Element indicates structure in an HTML document and a way of
hierarchically arranging content. It refers to the HTML codes that define the
element in an HTML file, such as headings, images, paragraphs and list.

5 Properties of HTML Tags:


 HTML tags are keywords surrounded by angle brackets like <html>
 HTML tags normally come in pairs like <b> and </b>
 The first tag in a pair is the start or opening tag, the second tag is the end or
closing tag.
 Some Tags can surround other tags. This is called Nesting.
 HTML elements have properties: attributes and content.
Attributes define desired behavior or indicate additional element properties
And Content can be text or other elements

HTML Tag Types:There are two types of tags in HTML.


1. Container tags:- container tags need both an opening tag <>and a closing
tag</>. These tell the browser when to begin a command and when to end it.
Example :<html>,……..</html>,<body>……..</body>
2. Empty Tags:- They are made up of just opening tag. In these closing tag is
not required.
Example : The three most common empty tags are <hr> horizontal rule,
<br> Line Break, and <p> paragraph.
Attributes:
HTML elements can have attributes. Attributes provide additional information
about an element. Attributes are added to a tag to enhance the way the tag displays
the content on the page. An attribute is included within the actual tag, either within
a start tag or an empty tag and are always specified in the start tag. Attributes
control the different properties of a tag. Each tag has some default values for its
attributes. To modify these, you have to set the attributes to the new value.
Syntax : Attribute = “value”
e.g. <p align="left">, <hr color="pink">

Syntax Rules for Writing Tags:


1) Html tag consist of a left angle bracket(<), a tag name, and a right angle
bracket (>).
2) Tags come in pairs e.g. <HTML>........... </HTML>. The end tag is a
closing tag with additional forward slash (/).
3) HTML tags are not case sensitive. You may type them in the lowercase or
the Upper Case, the effect will be the same.
4) Attributes are optional. They are always added in the starting of the tag
not in the closing tag.
Creating an HTML file using Notepad application :-
To write the web pages simple text editors like Note Pad, Word Pad can be used.
To convert the text files (.txt) into html documents (.htm and .html) extension is
used.View the html document by making use of web browsers like mozillafirefox,
internet explorer, google chrome etc.

Steps to create a HTML Document :


 Open Notepad ( Click Start Programs AccessoriesNotepad) and type
the content.
 In Notepad, click File  Save As. The Save As dialog box gets displayed.
 Go to your folder/sub-directory.
 Type Filename as “Exercise.htm” Select ‘All files’ option from ‘Save As
Type’ drop down menu and click ‘Save’.
 Open Windows Explorer and open the folder where file was saved.
 Double click on the file. The output is displayed in your browser page.

Basic Structure Tags of an HTML Document:


Basic structure tags are the tags required by the browser, without which the
browser will not recognize the file as being an HTML file.
If these basic structure tags are not in a document, the page loaded through it
would not be displayed properly.
The HTML file has a HEAD and BODY section.
<HEAD>........</HEAD>  Head Part
<BODY>.........<BODY>  Body Part

All HTML files should include at least these basic structure tags :-
a) The HTML Tag
b) The Head Tag
c) The Title Tag
d) The Body Tag

The HTML Tag : This tag is the container for the entire web page. This element
contains other elements, the head and the body elements.
Syntax :<HTML> .......</HTML>

The HEAD Tag : Contains contains metadata information about the web page. It
may also contain other tags that help you to identify your HTML file to the outside
world.
Syntax :<HEAD> .......</HEAD>

The TITLE Tag : This tag is nested within the Head tag. It identifies your page to
the rest of the world. The tag output is displayed on your browser’s title bar but
does not appear as part of the page.
Syntax :<TITLE > .......</TITLE>

The BODY Tag :contains the visual aspects of the web page. This tag is the
compliment of the Head tag and contains all the tags or elements that a browser
actually displays as the body of your HTML document.
Syntax :<BODY> .......</BODY >

Attributes of <BODY> Tag


Bgcolor sets background color for the entire page
Background = “ “ Adds an image to the background
(Image can be a .GIF or .JPEG or .BMP image file
or a URL)
Text= sets the color of ordinary text on the page
link= Sets the colour of ordinary links on the page
alink= Sets the colour of active links
vlink= Sets the colour of visited links

Comment Tag :- This tag is used to add comments to various sections of your
script. Browser does not display any text displayed between these tags.
Syntax :<! ....... >

Headings Tag :- Headings help in defining the format and structure of the
document. They provide valuable tool in highlighting important topics & the nature of
the document as a whole. There are six levels of headings in HTML specified by <H1>,
<H2>, <H3>, <H4>, <H5> and <H6> tags.
Syntax :<Hy> ............ </Hy>
where y is size of heading ranging from 1....6.

Paragraph Tag : Paragraph tag can be used to place blocks of text in HTML
document. Syntax :<P > .......</P >

Line break Tag :- <BR> Tag is used to add line breaks in the HTML code. It is
used to add blank lines to a document.

Text alignment :Align attribute can be used with the Headings tag & Paragraph tag
to align the text. Data can be aligned from left, right, center or justify by using any
one of values such as LEFT, RIGHT, CENTER, JUSTIFY.

PHYSICAL TAGS : Defines how the text should be displayed by the browser.
They control the physical characteristics of the text.
<B> ........ </B> Bold I am bold
<I> ........ </I> Italics I am bold
<U> ........ </U> Underline I am bold
<STRIKE> ... </STRIKE>
or <S> ------</S> Strikethrough I am bold
I am bold
<SUP> ........ </SUP> Superscript
<SUB> ........ </SUB> Subscript I am bold
<TT> ........ </TT> Typewriter form Typewriter form
<BIG> ........ </BIG> Bigger font I am Bigger
<SMALL> ........ </SMALL> Smaller font I am smaller

LOGICAL TAGS :Logical tags on the other hand indicate the ‘type’ of content
they enclose.
There are 9 logical tags each requiring a closing tag.
Examples are :-
<STRONG>, <EM>, <ABBR>, <CITE> ,<CODE>, <DFN>, <KBD>, <SAMP>,
<VAR>.

Horizontal Ruled Lines : Horizontal Rules (Lines) are used to separate different
areas of a web page.

<HR> Tag : This tag produces a horizontal line with a width of the browser
window. This is useful for visually separating document sections.
Syntax :<HR>
Attributes of <HR> Tag
a) <HR> empty tag without attribute makes line the full width
of the screen.
b) <HR width = ”n”> For fixed pixel width
c) <HR width = ”n %”> For percentage of screen width
d) <HR size = ”n”> specify thickness of the horizontal line.
e) <HR align = ”value”> Aligns ruler to value, which is left, right or center
f) <HR color =”name”> sets color of a line
g) <HR noshade> turns line’s shading off

TEXT FORMATTING
The FONT Tag :The font tag enables you to set the font size, font color, and font
family of the text placed inside the tag.
Syntax :<FONT> .....</FONT>

Attributes of<FONT> Tag


FACE = “value”  Value specifies the font type
COLOR = “name”  name specifies the color name
SIZE = “n” n takes a number from 1 to 7

<CENTER>TAG : The content between the tags is centered on the current


line.
Syntax :<center> ………. </center>
<DIV>TAG : Can enclose text and other HTML elements and divides the
document into Sections. ALIGN attribute can be used with
<div> for left, right and center alignment.
MARQUEE TAG : This tag creates an HTML marquee which is a scrolling piece
of text displayed either horizontally across or vertically down your webpage
depending on the settings. This tag provides some animated text to the page. It
allows text to scroll on the web page and is supported only by Internet Explorer

Syntax :<MARQUEE> …….. </MARQUEE>

Attributes of <MARQUEE> Tag


Bgcolor = “name of color”
Behaviour = “motion type”  values can be alternate, scroll or slide
Direction = “scroll direction  down, up, left or right
Width =“ “  in pixels or percentage
Height = “ “  in pixels or percentage
scrolldelay = “milliseconds”
loop = “number”  sets the no. of times the marquee text scrolls

1. Blockquote tag <BLOCKQUOTE> It provides left and right indention of affected


text and is useful for quoting a direct source within a document.

2. Preformatted tag <PRE>It contains preformatted plain text. This is useful for
including computer program output or source code without your document.

HYPERLINKS AND ANCHORS


Hyperlink : A hyperlink is a reference (an address) to a resource on the web.
Hyperlink text is used to jump to a specific place in either the same web page or
another Web page, to display an image, download a program, send an e-mail
message, run a script and so on.

HTML documents contain certain ‘hot spots’. These hot spots provide anchors that
link to other document files on the Internet.

<A> Tag / Anchor Tag : is used to define both hyperlinks and anchors
Syntax :<a>...</a>

The href Attribute : Defines the link address of a resource on the web
Syntax : <a href="url"> Link text </a>
Link text defines the part to be displayed. It can be text, image
or any other HTML element
Example: <a href="http://www.yahoo.com/"> Visit Yahoo! </a>
<a> element -- defines a link to the website www. yahoo.com
Visit Yahoo -- the link that is displayed in a browser

<IMG> TAG : Used to insert graphics on a web page. The IMG tag has no
closing tag
Syntax :<imgsrc="url" />
URL points to the location where the image is stored. The browser puts the image
where the image tag occurs in the document.

Attributes of <IMG> tag


height and width -- Used to set proper proportions for the image and takes
values in pixels or in percentages
alt -- Defines "alternate text" for an image
align --- Aligns other HTML elements such as text around the image.
Takes values: left, right, top, bottom, middle
Border -- Draws a border around the image
border="n", where n indicates the thickness of the border
border="0" indicates no border

Image As a Link : Uses image to navigate to another page


<img> tag is placed within the <a> tag
<a href="location_of_link">
<imgsrc="location_of_image" /></a>

CREATING LISTS
List:- A number of connected items or names which are written or printed one
below the other.
HTML supports 4 types of lists :-
1) Unordered list
2) Ordered list
3) Definition list
4) Nested List
Unordered list: An Unordered list is a list of items which are marked with bullets
(typically black small circles)
<UL> Tag : This tag defines a bulleted list of items. The <LI> (list item) tag is
nested inside the UL tag and defines each item within the list. Inside a list item
you can put a paragraph line break, images, links, other list etc.

Three types of bullets can be displayed in an unordered list


(1)disk (default) ●
(2)circle ○
(3)square ■

Syntax :<UL type="square"> ……..</UL>

Ordered list:
An ordered list is a list of items marked with numbers. An order list starts with
<OL>tag.
<OL>Tag : This tag defines a sequentially numbered list of items. It is used with
the <LI> Tag. Inside a list item, you can put paragraphs, line breaks,
images, links, other lists, etc.

The type attribute is used to change bullet type. It takes one of the five values:
type ="a" -- Lowercase alphabet
type ="A" -- Uppercase Alphabet
type ="i" -- Lowercase Roman Numerals
type ="I" -- Uppercase Roman Numerals
type ="1" -- Regular number (default)

The start attribute sets the starting number of the bullet. Default is 1.
Syntax :<OL type = “ “ > ...... </OL>

Definition list :The definition list is the ideal way to present a glossary, list of
terms (and their definition), in HTML.
<DL> Tag : This tag allows you to create glossaries or list of terms and
definitions. A glossary consists of three tag elements: a tag to define the list (DL),
a tag to define the term (DT) and a tag to define the definitions (DD).
Syntax: <dl>
<dt> ……</dt>
<dd>…..</dd>
</dl>
Nested List : When one type is given inside or embedded inside another type of
list. It is called as Nested list. You can also have a number of paragraphs, each
containing a nested list, in a single list item.

TABLES
Tables are used to make data easier to interpret and to control the layout of a page.

<TABLE> Tag : This tag is used to create a table.


Syntax :<TABLE> ...............</TABLE>
A table is divided into rows and columns.
<TR>.....</TR> Tag ==> Table row tag
<TD>....</TD> Tag ==> Table data tag, which is the content of a data cell
A data cell can contain text, images, lists,
paragraphs, forms, horizontal rules, tables, etc.
<TH> ...... </TH> Tag ==> Table heading tag
<caption> Defines a table caption
<colgroup> Defines groups of table columns
<col> Defines the attribute values for one or more columns in a table
<thead> Defines a table head
<tbody> Defines a table body
<tfoot> Defines a table footer
<CENTER> Displays the table in the center

Attributes of <TABLE>Tag :
1) border ==> border = "n" specifies thickness of border in n pixels
Border = "0" means no border for the table & is the default setting
2) border color ==> Specifies the colour of the table border
3) width and height ==>Specifies the width and height respectively of the table
In pixels or as a percent
5) Alignment attributes ==> Content in cells can be aligned using these
attributes
align ==> Used to align a table to either the left, right or center of
page
valign ==> Specifies that the table can be either top or bottom
aligned. The default is center aligned
5) Cellpadding ==> Cellpadding is the buffer space around the contents
of a cell
6) Cellspacing ==> Cellspacing is how far apart each cell is from
another cell
7) colspan ==> sets how many columns a cell spans.
8) rowspan ==> sets how many rows a cell spans.
9) bgcolor ==> assigns background color to an entire table, a row or a
Single cell

You might also like