Scribd
Upload
14 views

Steps To Create A HTML

The document provides information on how to create an HTML document and describes various HTML tags and their usage. It discusses opening a text editor, adding the basic HTML structure with head and body tags, saving the file with a .html extension, and viewing it in a browser. It then explains common tags like headings, paragraphs, links, images, lists and tables. It provides details on attributes, colors, and how to create internal and external links.

Uploaded by

ratio1698
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
14 views

Steps To Create A HTML

The document provides information on how to create an HTML document and describes various HTML tags and their usage. It discusses opening a text editor, adding the basic HTML structure with head and body tags, saving the file with a .html extension, and viewing it in a browser. It then explains common tags like headings, paragraphs, links, images, lists and tables. It provides details on attributes, colors, and how to create internal and external links.

Uploaded by

ratio1698
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 54

Steps to Create a HTML Doc.

 

Open a text editor Create your HTML document

Head - not displayed with body Body


 

 

Save the HTML (extension of .htm or .html) Display your HTML document in WWW browser window Check your work and modify as necessary Place it on the Web.

Structure of HTML Page


<html> <head> <title> Hello World </title> </head> <body> Hello World </body> </html>

Save with .html or .htm Extension

Structure of HTML Page

Steps to Create a HTML Doc.


 

Open a text editor Create your HTML document

Head - not displayed with body Body


 

 

Save the HTML (extension of .htm or .html) Display your HTML document in WWW browser window Check your work and modify as necessary Place it on the Web.

TAGS & Attributes


<body bgcolor = aqua >

Meaning of HTML TAG


Tags are elements of the HTML document used to specify how the document or Text in a web page should be displayed by the browser. In HTML, each tag has its own specific meaning, which is (in general) common across all different browsers.
HTML markup tags are usually called 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 tag, the second tag is the end tag Start and end tags are also called opening tags and closing tags

Working of HTML Tags?




When a WWW browser displays a page it reads from a text file, and looks for special codes or "Tags" that are marked by the < and > signs The general format for a HTML tag is:  <tag name>string of text</tag name> As an example, the title for a section may use a header tag that looks like the following:  <h3>What are HTML tags?</h3> This tag would tell a WWW browser to display the text "What are HTML tags?" in the style of header level 3

Classification of Tags
Singular Tags :- Those tags which have only opening tag not having closing tags e.g. < br > < hr > etc Paired Tags : - Those Tags which have both opening & closing tags e.g. < body > < / body > etc.

Common Tags Used


         

< html > < / html > Opens and closes the HTML document. < title > < / title > This is the title of your page and will appear at the top of your browsers window. < head > </ head > what you are not going to see on page. < body > < / body > what are you going to see on page. <h1 > </ h1> to <h6> </h6> Heading Tags <b> text </b> Bold text. <i> text </i> Italic text. <u> text </u> Underline text. <br> (no closing) Line break. <hr> (no closing) Horizontal line.

TAG with Attributes


Attributes are associated with each tag to further define the tags. Every tags in HTML having some attributes which enhance its working
< Tag_Name attributes = value >

HTML elements can have attributes Attributes provide additional information about the element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value"

Working with < BODY > Tag


The body element defines the document's body. The body element contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
Attributes
background bgcolor text link alink vlink

Value
image Name Color name Color name Color name Color name Color name

Description
Specifies a background image for a document Specifies a background color for a document Specifies a background color for a document Specifies color for a link in a web page Specifies color for a Active link in a web page Specifies color for a Visited link in a web page

Example
background = 1 . Jpg bgcolor= red text = black link = cyan alink = cyan vlink = cyan

Working with Color


aliceblue antiquewhite aqua aquamarine azure beige bisque black blanchedalmond blue blueviolet brass * brown burlywood #F0F8FF #FAEBD7 #00FFFF #7FFFD4 #F0FFFF #F5F5DC #FFE4C4 #000000 #FFEBCD #0000FF #8A2BE2 #B5A642 #A52A2A #DEB887 lightgreen lightgrey lightpink lightsalmon lightseagreen lightskyblue lightslategray lightsteelblue lightyellow lime limegreen linen magenta maroon

Codes
#90EE90 #D3D3D3 #FFB6C1 #FFA07A #20B2AA #87CEFA #778899 #B0C4DE #FFFFE0 #00FF00 #32CD32 #FAF0E6 #FF00FF #800000

Working with < heading > Tag


The Heading < h1 ------ h6 > tags are used to create text headers for a document etc. H1 is the largest header & H6 is the smallest header.

Attributes
align

Value
Center , Left , Right

Description
Specifies the alignment of an text according to value.

Example
align = center

Working with < heading > Tag

Working with < Font > Tag


The font tag is used to set the face (type), color, and size of the characters in a text .

Attributes color face size

Value Any color Like Arial 1 to 7

Description color attribute is used to set the color of the text attribute sets the font face (type) of the text, such as Arial or Courier Size attribute is used to set the size of text range is 1 to 7

Example color = red Face = arial Size= 6

Working with < Font > Tag

Working with < image > Tag


The < img > tag embeds an image in an HTML page .
Attributes
src alt align border Hspace Vspace Height Width Title

Value
Image path Any Text Top , bottom, middle , left , right pixels Pixels Pixels Any Text

Description
Specifies the URL of an image Specifies an alternate text for an image Specifies the alignment of an image according to surrounding elements Specifies the width of the border around an image Specifies the white space on left and right side of an image or Top & Bottom of image Specifies Height & Width of Image Display text as tool tip for image

Example
src = 1 . Jpg alt = Any Msg align = top Border = 5 hspace = 10 height= 10 Width= 5 Title = any Msg

Working with < image > Tag

Meaning of Hyperlink
A

hyperlink (or link) is a word, group of words, or image that you can click on to jump to a new document or a

new section within the current document.

move the cursor over a link in a Web page, the arrow will turn into a little hand.
When you

Normal Text or Hyperlinks


 Appear

Blue in color

 The Hyperlink text / image is underlined. underlined.  When the mouse cursor is placed over it, the standard arrow shaped mouse cursor changes to the shape

of a hand.

 The color of link can be overwrite by the attributes of body tag.


Attributes Link Alink Vlink Value Any Color Any Color Any Color Description Link on the Web Page Active Link on Web page Visited Link on Web Page Example Link = yellow Alink = Yellow Vlink = Yellow

Type of links
Linking can be of Two Types
External Linking

Internal Linking

These are the links to files not on your own site or page

These are the links to parts of files in your own site or page

Working with < anchor > Tag


a > anchor tag is used to create link between different web pages. It can be of two types Internal & External Linking.
< a href = URL The <

of Web page >

Any Text < / a >

Absolute URL
It will show the entire path of the file

Relative URL
It describe the location of the desired file with reference to the location of the file that contain URL itself.

http://abcd/mail/new.html

mail/new.html

External Linking
Attributes Value Description An absolute URL - points to another web site (like href="http://www.example.com/default.htm") A relative URL - points to a file within a web site (like href="default.htm") An anchor URL - points to an anchor within a page (like href="#top") Example href= http://www.yahoo.co m/

href

URL

target

_top _self _self _parent

Where Linked Document is opened

Target = _blank

< a href = http : // www.yahoo.com/ > Yahoo < / a > < a href = / f1.html > Click me </ a>

Internal Linking
Attributes name href Value Any name # anchor section Description Name of Anchor Section Linking with anchor section Example Name = BCA href = # anchor section

< a name = Location name > < a href = # location name > Click me </ a>

Example:

<<H1>Table

          

of Contents</H1> <A href="#section1">Introduction</A><BR> <A href="#section2">Some background</A><BR> <A href="#section2.1">On a more personal note</A><BR> ...the rest of the table of contents... ...the document body.. . <H2> <A name="section1">Introduction</A> </H2> ...section 1... <H2> <A name="section2">Some background</A> </H2> ...section 2... <H3> <A name="section2.1">On a more personal note</A> </H3> ...section 2.1..

OUTPUT

 

Table of Contents Introduction Some background On a more personal note ...the rest of the table of contents... ...the document body... I Introduction ...section 1... 1 Some background ...section 2... 1

  

 

  

On a more personal note ...section 2.1... 1

Working with < hr > Tag


The <HR
Attributes color size Width Align

>

element inserts a horizontal line.


Value Description specifies the color of the horizontal line Set the size of the line Set the width of the line Alignment of line Example color = red size=4 Width=200 Align= left

Any color Any num Any num Left , center , right

<hr size="5" width="300" align="left">

Working with < Paragraph > Tag


The < P > element defines a paragraph of text. One blank line is inserted between paragraphs.

Attributes align

Value Center , Left , Right

Description Specifies the alignment of an image according to surrounding elements

Example align = center

< p align = center > God is Great </ p >

Working with < base > Tag


< HEAD > Tag. It is used to specify a base URI, or URL, for relative links. For example, you can set the base URL once at the top of your page, then all subsequent relative links will use that URL as a starting point. point.
This tag is placed under < head > < base href = Z:/Images/> </head>

Working with < base > Tag


<html> <head> <base href="http://www.quackit.com/html/" > </head> <body> <p>Learn about <a href=index.html">Intro to HTML</a></p> </body> </html>
The link above will actually resolve to http://www.quackit.com/html/index.html regardless of the URL of the current page. This is because the base URL (http://www.quackit.com/html/) is prepended to the (relative) URL indicated in the link (index.html)

Working with <table> Tag


Table tag is Used to represent

any information in tabular form or in the form of Rows & Columns. It can be basically used as drawing different interfaces for developing any web application.
 Table tag denotes the beginning of a table  Each Table has   Each table row ( TR ) can contain :  Table Data ( 

caption tag for providing name of Table Table Row ( TR ) tag used to form a single row with in a table TD ) tag used to put data in a cell Table Heading ( TH ) used to put text as heading in a cell.

Working with <table> Tag

Working with <table> Tag

Attributes of <table> Tag


Attributes Border, bordercolorlight, bordercolordark Cellspacing Cellpadding Bgcolor, background ( for img ) Hspace , Vspace Width , Height Align Rules Value Pixels Pixels Pixels color name Pixels Pixels Center , Left , Right None Size of Border Specifies Space between cells Specifies space within cells sets the background color of the marquee. Specifies the white space on left and right side of an table Specifies the width & height of table Specifies the alignment of an table according to surrounding elements Weather inside border display or not Description Example Border=5 Cellspacing=10 Cellpadding=10 bgcolor = yellow hspace = 10 Width=10 align = center Rules=none

Working with < tr > Tag

Working with < tr > Tag


<TR BGCOLOR="#00FF00"> <TD><IMG SRC="rrose.gif" ALT="rose"></TD> <TD>Image is a transparent .gif.</TD> </TR>

Working with < td > Tag

Single cell

<TD>Image is a transparent .gif.</TD>

Working with < table > Tag


<TABLE BORDER="7" CELLPADDING="7" CELLSPACING="10"> <TR BGCOLOR="#00FF00"> <TD><IMG SRC="rrose.gif" ALT="rose"></TD> <TD>Image is a transparent .gif.</TD> </TR> </TABLE>

Result : -

Working with < table > Tag


<TABLE BGCOLOR=red" BORDER="7" CELLPADDING="7" CELLSPACING="10"> <TR> <TD>The table has a red background</TD> <TD><PRE> </PRE></TD> </TR> <TR> <TD BGCOLOR=blue">BGCOLOR in TD/H or TR overrides BGCOLOR in the TABLE tag.</TD> <TD><PRE> </PRE></TD> </TR> </TABLE>

RowSpan & ColSpan


Table cells can attributes many down") indicate how many columns or rows a cell should take up.

span across more than one column or row. The COLSPAN ("how many across") and ROWSPAN ("how

RowSpan & ColSpan

The colspan attribute of the TD element specifies the number of columns spanned by the cell, and the rowspan attribute specifies the number of rows spanned by the cell

Working with ColSpan Tag

Working with RowSpan Tag

Nested Tables
When User declare or uses a table inside another table as a its data member.

By:-Lect.Mohit Verma ( DBIMCS )

Nested Tables
<TABLE BORDER="7" CELLPADDING="10" CELLSPACING="10" BGCOLOR=blue"> <CAPTION ALIGN="BOTTOM">Butterfly</CAPTION> <TR> <TD> <TABLE BORDER="7" CELLPADDING="10" CELLSPACING="10" BGCOLOR=red> <TR> <TD><IMG SRC="bfly.gif" ALT="butterfly"></TD> </TR> </TABLE> </TD> </TR> </TABLE>

Miscellaneous TAGS

Working with < marquee > Tag


With this tag user can scroll any text or img as per its requirement.
Attributes behavior direction bgcolor Hspace Vspace Scrollamount , scrolldelay Width Height Value Alternate , slide , scroll Left , right , up, down color name Description indicates how the contents scroll. indicates which direction the marquee scrolls BGCOLOR sets the background color of the marquee. Specifies the white space on left and right side of an marquee or Top & Bottom of marquee Specifies speed which it move Specifies the width & height of marquee text Example Behavior=alternate Direction = right bgcolor = yellow

Pixels

hspace = 10

speed Pixels

Scrollamount=20 Width=10

Working with < List > Tags


This tag can be used to make any kind of list weather Ordered or Unordered. < UL > for Unordered List it contain < Li > List item Tag init <OL > for Ordered List it contain <Li> List item init. <ul> <li>first list item</li> <li>second list item</li> <li>third list item</li> </ul> <ol> <li>first list item</li> <li>second list item</li> <li>third list item</li> </ol> Output 1. First list item 2. Second list item 3. Third list item

Working with < List > Tags


Tag Attributes Value Circle Disc square Description The type attribute of the UL element changes the marker type. Example

<UL>

Type

type = disc

<ul> <li type="disc">first list item</li> <li type="circle">second list item</li> <li type="square">third list item</li> </ul>

Working with < List > Tags

Tag

Attributes

Value

Description

Example

< li >

start

Any Value

From where to start

Start = 5

Working with < Sub > Tags


The <sub> tag defines subscript text. Subscript text appears half a character below the baseline. Subscript text can be used for chemical formulas, like H2O.

< body > H < sub > 2 < / sub > O. </body>

Working with < Sup > Tags


The <sup> tag defines subscript text. Subscript text appears above a character below the baseline. Sup script text can be used for mathematical formulas, like

< body > a < sup > 2 < / sup > + b <sup> 2 </sup > . </body>

You might also like