Scribd
Upload
50 views

HTML Presentation

This document provides an overview of HTML including: 1. HTML stands for Hypertext Markup Language and is used to structure and present content on the web. It uses tags to define headings, paragraphs, lists, links and other elements. 2. HTML documents are plain text files that can be created using a basic text editor. They are recognized and rendered by web browsers. 3. Key HTML elements include headings, paragraphs, lists, images, links, tables and forms which allow users to interact with web pages. Attributes are used to further define elements and control formatting and behavior.

Uploaded by

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

HTML Presentation

This document provides an overview of HTML including: 1. HTML stands for Hypertext Markup Language and is used to structure and present content on the web. It uses tags to define headings, paragraphs, lists, links and other elements. 2. HTML documents are plain text files that can be created using a basic text editor. They are recognized and rendered by web browsers. 3. Key HTML elements include headings, paragraphs, lists, images, links, tables and forms which allow users to interact with web pages. Attributes are used to further define elements and control formatting and behavior.

Uploaded by

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

HTML

Softsmith Infotech

HTML
Introduction Creation Tags Text List Image Background Link Table Frames Forms
Softsmith Infotech

Introduction
SGML Standard Generalized Markup Language (1986) Mother of HTML and XML Describing document types in many field of human activity (clinical records to musical notations) Used in Aerospace, Defense, Semiconductor and Publishing industries
Softsmith Infotech

SGML - Barriers
Lack of widely supported style sheets Complex and unstable software Obstacles to interchange SGML data SGML renamed as Sounds Good, May be Later.

Softsmith Infotech

HTML
Hyper Text Markup Language
Hypertext Dealing with links Markup Designing documents with some styles or lay outs

HTML document is a plain text file HTML recognized by Web Browser

Softsmith Infotech

HTML Creation
Use Notepad or any text editor Type contents and save with a .htm or .html extension Eg. MyPage.html FrontPage, MS Word allows us to create web pages without any prior knowledge in HTML. Just save as web page and you will get the effect.
Softsmith Infotech

Why to learn HTML?


HTML is the glue that holds all web pages together. You can use tags that the editor does not support. You can read the code of other people's pages, and "borrow" the effects. You can do the work yourself, when the editor simply refuses to create the effects you want.

Softsmith Infotech

First Web Page


<HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML>
Softsmith Infotech

TAGS
Instructs the browser to do some operation. Pillar of HTML Start Tag and End Tag
<Start TAG> </End TAG>

Few examples:
<BODY>, <HTML> etc

Every tag may or may not have Attributes.


<BODY BGCOLOR=tan>
Softsmith Infotech

Adding Text
Anything that we type between the tags <BODY> and </BODY> will appear on the browser. Many formatting tags are available.

Softsmith Infotech

Text Formatting
<BASEFONT>, <FONT>, <B>, <I>, <U>, <BR>, <STRONG>, <EM>, <SUB>, <SUPER>, <BLINK>, <STRIKE>, <Hx>
x = 1 to 6 (1 being the largest and 6 being the smallest) <BLINK> works only in netscape.

<BIG>, <SMALL>

Softsmith Infotech

Text Layout
<CENTER> <DIV> (same as <P>) <P>
<P ALIGN = > </P>
Right Left Center Justify

Softsmith Infotech

HTML Lists
Ordered List
<OL TYPE = circle><OL> TYPE can be circle or square or disc If TYPE is left, by default we have Numbers. TYPE can also take values like A, a, i, I We can configure the numbering to start from a particular value with the help of start attribute.

Unordered list
<UL TYPE=circle></UL> TYPE can be circle or square or disc
Softsmith Infotech

Images
JPEG or GIF images are recognized by browsers <IMG> tag will place image on your page The attribute SRC, tells the location from which the image is to be taken We can control size of the image (width and height attributes) The attribute ALT will say the text to be displayed in the place of image, if image not found.
Softsmith Infotech

Images
The attribute BORDER specifies the thickness of border around the image. Hspace and Vspace attributes allows us to add space to the left-right sides and topbottom sides Aligning images is also possible with the align property

Softsmith Infotech

Hyperlink
<A> - Anchor tag Its attribute HREF will be the page to which we will be redirected. <A HREF=Second.html>Click Here</A> Click Here will appear in the browser like this
Click Here

Softsmith Infotech

Specifying Colors for Links


Define colors for all links on the page.
<body link="#C0C0C0" vlink="#808080" alink="#FF0000">
Link Unvisited link Vlink Visited link Alink Active link (Color of the link when mouse is on it)

Softsmith Infotech

Specifying Colors for Links


Define colors for individual links on the page.
Placing font tags between the <a href> and the </a> tag. Click <a href="http://www.softsmith.com"><font color=Blue">here</font></a> to go to Softsmith. Using a style setting in the <a> tag. Click <a href="http://www. softsmith.com" style="color: red">here</a> to go to Softsmith.

Softsmith Infotech

Link Target
By default, links will open in the current window We can specify values for the Target attribute to change this behaviour.
_blank new window _self same window _parent frame superior to the frame where the hyperlink is in _top Cancels all frame and loads in new window.

We can specify the name of the frame where the link need to be opened.
Softsmith Infotech

Internal Link
To create a link with in that page, add a name attribute to the anchor tag and specify that name from the place where you want that navigation
<a name="chapter1">Some contents</a> Click <a href="#chapter1">here</a> to read chapter 1.

Softsmith Infotech

Link to Email
<a href="mailto:[email protected]">Email Me</a> This will appear in the page as
Email Me

When we click that, we can compose mail and send it to that address. We can even configure subject and body of the mail using the attributes subject and body.

Softsmith Infotech

Image Map
Helps us to use one image to navigate to multiple pages.
<img src="rainbow.gif" usemap = #example border=0> <map name=example> <area shape=Rect Coords=0,0,29,29 Href="http://www.yahoo.com"> <area shape=Rect Coords=30,30,59,59 Href="http://www.hotbot.com"> </map>

Shape can be Circle or polygon also.

Softsmith Infotech

Backgrounds
For setting background of our page, we need to specify some properties in <BODY> tag. BACKGROUND BGCOLOR BGSOUND BGPROPERTIES
Softsmith Infotech

Tables
Help in arranging elements in our page in a neat way Divide page into separate sections Creating Menus Adding form fields Alignment of images

Softsmith Infotech

Table Creation
Table - <TABLE> </TABLE> Row - <TR> </TR> Column - <TD> </TD>
<TABLE BORDER=0> <TR> <TD> 1 </TD> <TD> 2 </TD> </TR> </TABLE>
Softsmith Infotech

1 2

Table Attributes
Align left, right, center Valign top or bottom Background Bgcolor Border Bordercolor Bordercolordark - shadow Cellpadding Cellspacing Nowrap protects from line break Frame deals with border adjustment void, above, below, lhs, rhs, hsides, vsides, box Width
Softsmith Infotech

Row / Column attributes


All property of table. Height

Only for TD
Rowspan Merging rows Colspan Merging columns nowrap

Softsmith Infotech

Frames
Divides screen into separate areas Each frame can contain a HTML document <frameset> tag is used to create a frame. Ended with </frameset> tag Attributes
Cols Rows
Softsmith Infotech

Resizing and Scrolling


By default, we can resize frames. If we dont want to resize them, we can specify the same using the attribute noresize. If we dont need scroll bars, we can specify scrolling attribute as no. <frame src="menu.html" name="menu" noresize scrolling=no> If we give scrolling=auto, scroll bar will appear if needed. Otherwise it wont.
Softsmith Infotech

HTML Forms
Most widely used in web applications Has several elements Created with in <BODY> Use <FORM> </FORM> tags to define elements of form Attributes
Action URL to be navigated on submit Method GET or POST
Softsmith Infotech

Form Fields
Text Password Hidden Text area Submit button Cancel button Image button Check box Radio button Drop down menu
Softsmith Infotech

Text / Password / Hidden


<Input type = text name = UserId value=user> <Input type = password name=pwd value=pwd>

<Input type = hidden name=hide value=hide>


Softsmith Infotech

Text Area
<textarea cols=20 rows=20 name=txtarea>Text area</textarea> Cols and rows specifies how many columns and rows will the text are occupy on our page. Name Program will use this name to refer to the element Tabindex and wrap are other properties
Tabindex order of tab focus Wrap
Off no line breaks Virtual for appearance Infotech Softsmith line breaks will be there Physical Exact replica of what we type

Check box
<input type="checkbox" name="option1" value=" Java "> Java<br> <input type="checkbox" name="option2" value=" Oracle " checked> Oracle <br> <input type="checkbox" name="option3" value=" Net "> .Net <br> For Radio button, the type need to be given as radio

Softsmith Infotech

Dropdown List
Using Select tag we can define dropdown menu Select tag has attributes like
Name Size Multiple

Option tag defines values in the list <select name=ddl>


<option Value=1>1</option> <option Value=2>2</option> </select>
Softsmith Infotech

Submit / Reset / Image Button


<input type="submit" value="Send me your name!"> <input type=reset" value=Reset"> <input type=image" src=image.gif name=image>

Softsmith Infotech

Special Characters
&nbsp &copy &gt &lt

Softsmith Infotech

HTML Comments
Starts with
<!- -

Ends with
- ->

Softsmith Infotech

META Tag
<META> tag has information related to search engines and browsers Later its use was not recommended If page content and description doesnt match, search engines report that page as SPAM Based on the keywords, search engines search the keywords present in META tag of the page
Softsmith Infotech

HTML Hex Colors


RGB Style #RGB Safe 216 colors
R 00, 33, 66, 99, CC, FF G 00, 33, 66, 99, CC, FF B 00, 33, 66, 99, CC, FF

Softsmith Infotech

You might also like