HTML - Softsmith

Download Report

Transcript HTML - Softsmith 

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 don’t want to resize them, we can specify
the same using the attribute “noresize”.
• If we don’t 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
line breaks will be there
Softsmith Infotech
• 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 doesn’t
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