HTML

1
HTML
2
HTML

• Introduction
• Creation
• Tags
• Text
• List
• Image
• Background
• Link
• Table
• Frames
• Forms

3
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

4
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.

5
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

6
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.

7
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.

8
First Web Page

• ltHTMLgt
• ltHEADgt
• ltTITLEgt
• lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• lt/BODYgt
• lt/HTMLgt

9
TAGS

• Instructs the browser to do some operation.
• Pillar of HTML
• Start Tag and End Tag
• ltStart TAGgt
• lt/End TAGgt
• Few examples
• ltBODYgt, ltHTMLgt etc
• Every tag may or may not have Attributes.
• ltBODY BGCOLORtangt

10
Adding Text

• Anything that we type between the tags ltBODYgt and
  lt/BODYgt will appear on the browser.
• Many formatting tags are available.

11
Text Formatting

• ltBASEFONTgt, ltFONTgt, ltBgt, ltIgt, ltUgt, ltBRgt,
  ltSTRONGgt, ltEMgt, ltSUBgt, ltSUPERgt, ltBLINKgt,
  ltSTRIKEgt, ltHxgt
• x 1 to 6 (1 being the largest and 6 being the
  smallest)
• ltBLINKgt works only in netscape.
• ltBIGgt, ltSMALLgt

12
Text Layout

• ltCENTERgt
• ltDIVgt (same as ltPgt)
• ltPgt
• ltP ALIGN gt lt/Pgt
• Right
• Left
• Center
• Justify

13
HTML Lists

• Ordered List
• ltOL TYPE circlegtltOLgt
• 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
• ltUL TYPEcirclegtlt/ULgt
• TYPE can be circle or square or disc

14
Images

• JPEG or GIF images are recognized by browsers
• ltIMGgt 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.

15
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 top-bottom
  sides
• Aligning images is also possible with the align
  property

16
Hyperlink

• ltAgt - Anchor tag
• Its attribute HREF will be the page to which we
  will be redirected.
• ltA HREFSecond.htmlgtClick Herelt/Agt
• Click Here will appear in the browser like this
• Click Here

17
Specifying Colors for Links

• Define colors for all links on the page.
• ltbody link"C0C0C0" vlink"808080"
  alink"FF0000"gt
• Link Unvisited link
• Vlink Visited link
• Alink Active link (Color of the link when mouse
  is on it)

18
Specifying Colors for Links

• Define colors for individual links on the page.
• Placing font tags between the lta hrefgt and the
  lt/agt tag.Click lta href"http//www.softsmith.com"
  gtltfont colorBlue"gtherelt/fontgtlt/agt to go to
  Softsmith.
• Using a style setting in the ltagt tag. Click lta
  href"http//www. softsmith.com" style"color
  red"gtherelt/agt to go to Softsmith.

19
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.

20
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
• lta name"chapter1"gtSome contentslt/agt
• Click lta href"chapter1"gtherelt/agt to read
  chapter 1.

21
Link to Email

• lta href"mailtoxyz_at_abc.com"gtEmail Melt/agt
• 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.

22
Image Map

• Helps us to use one image to navigate to multiple
  pages.
• ltimg src"rainbow.gif" usemap example
  border0gt ltmap nameexamplegtltarea shapeRect
  Coords0,0,29,29 Href"http//www.yahoo.com"gt
  ltarea shapeRect Coords30,30,59,59
  Href"http//www.hotbot.com"gt lt/mapgt
• Shape can be Circle or polygon also.

23
Backgrounds

• For setting background of our page, we need to
  specify some properties in ltBODYgt tag.
• BACKGROUND
• BGCOLOR
• BGSOUND
• BGPROPERTIES

24
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

25
Table Creation

• Table - ltTABLEgt lt/TABLEgt
• Row - ltTRgt lt/TRgt
• Column - ltTDgt lt/TDgt
• ltTABLE BORDER0gt
• ltTRgt
• ltTDgt 1 lt/TDgt
• ltTDgt 2 lt/TDgt
• lt/TRgt
• lt/TABLEgt

1 2
26
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

27
Row / Column attributes

• All property of table.
• Height
• Only for TD
• Rowspan Merging rows
• Colspan Merging columns
• nowrap

28
Frames

• Divides screen into separate areas
• Each frame can contain a HTML document
• ltframesetgt tag is used to create a frame.
• Ended with lt/framesetgt tag
• Attributes
• Cols
• Rows

29
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.
• ltframe src"menu.html" name"menu" noresize
  scrollingnogt
• If we give scrollingauto, scroll bar will appear
  if needed. Otherwise it wont.

30
HTML Forms

• Most widely used in web applications
• Has several elements
• Created with in ltBODYgt
• Use ltFORMgt lt/FORMgt tags to define elements of
  form
• Attributes
• Action URL to be navigated on submit
• Method GET or POST

31
Form Fields

• Text
• Password
• Hidden
• Text area
• Submit button
• Cancel button
• Image button
• Check box
• Radio button
• Drop down menu

32
Text / Password / Hidden

• ltInput type text name UserId
  valueusergt
• ltInput type password namepwd valuepwdgt
• ltInput type hidden namehide valuehidegt

33
Text Area

• lttextarea cols20 rows20 nametxtareagtText
  arealt/textareagt
• 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
• Physical Exact replica of what we type

34
Check box

• ltinput type"checkbox" name"option1" value"
  Java "gt Javaltbrgtltinput type"checkbox"
  name"option2" value" Oracle " checkedgt Oracle
  ltbrgtltinput type"checkbox" name"option3"
  value" Net "gt .Net ltbrgt
• For Radio button, the type need to be given as
  radio

35
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
• ltselect nameddlgt
• ltoption Value1gt1lt/optiongt
• ltoption Value2gt2lt/optiongt
• lt/selectgt

36
Submit / Reset / Image Button

• ltinput type"submit" value"Send me your name!"gt
• ltinput typereset" valueReset"gt
• ltinput typeimage" srcimage.gif nameimagegt

37
Special Characters

• nbsp
• copy
• gt
• lt

38
HTML Comments

• Starts with
• lt!- -
• Ends with
• - -gt

39
META Tag

• ltMETAgt 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

40
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