An Introduction to HTML

1
An Introduction to HTML
2
History of HTML

• 1989 Tim Berners-Lee invents the Web with HTML
  as its publishing language
• at CERN, the European Laboratory for Particle
  Physics in Geneva, Switzerland.
• To Know More About HTML History Read The
  Following Article
• http//www.w3.org/People/Raggett/book4/ch02.html

3
Introduction

• HTML is a markup language that was created with
  the purpose of displaying documents in the form
  of web-pages. HTML stands for HyperText Markup
  Language.
• HTML isn't a programming language as such - it
  doesn't need compiling or any special software to
  make it. It's easy to pick up the basics in a
  short time.
• The popularity and importance of HTML is due to
  the fact that it is the coding technology used to
  publish content on the World Wide Web (also
  referred to as the Internet)

4
HyperText Mark-up Language (HTML)

• Hyper is the opposite of linear. It used to be
  that computer programs had to move in a linear
  fashion.
• Text is what you will use. Real, honest to
  goodness English letters
• Mark up is what you will do. You will write in
  plain English and then mark up what you wrote.
• Language language is plain English

5
Before Writing HTML Code You should know Following

• File Extension (.htm older versions, html)
• Compatibility (browser)

6
Requirements

• Editing Tools (Frontpage, Dreamweaver,. Bluefish
  - linux)
• Viewing Tools (Browser)
• Graphics Tools (Fireworks, Photoshop)
• Web Server (Apache)

7
HTML Document Format

• HTML documents are text files made up of HTML
  elements
• ltHTMLgt 
• ltHEADgt
• ltTITLEgtTitle of the web page lt/TITLEgt lt/HEADgt 
• ltBODYgt
• lt/BODYgt 
• lt/HTMLgt

http//www.w3.org/TR/REC-html40/struct/global.html

8
The tags used are

• ltHTMLgt lt/HTMLgt
• Defines the extent of the HTML markup text
• ltHEADgt lt/HEADgt
• Contains descriptions of the HTML page. This
  meta information is not displayed as part of the
  web page.
• ltTITLEgt lt/TITLEgt
• Describes the title of the page. This
  description is usually displayed by the browser
  as the title of the window in which the web page
  is displayed. This information is also used by
  some search engines to compile an index of web
  pages.
• ltBODYgt lt/BODYgt
• Delimits the body of the web page. In the body
  is the text to be displayed as well as HTML
  markup tags to hint at the format of the text.

9
HTML elements are defined using HTML tags.

• This is an HTML element
• ltbgtThis text is boldlt/bgt

10
The HTML element

• The HTML element starts with a start tag
  ltbgtThe content of the HTML element is This
  text is boldThe HTML element ends with an end
  tag lt/bgt

11
Point to Remember

• HTML is not case sensitive language
• The tags can be written in upper-case or a
  mixture of upper- and lower-case or just
  lower-case. For example, ltHTMLgt, ltHtMlgt and
  lthtmlgt all represent the same tag.

12
Basic Tags

• lthtmlgt Defines an HTML document
• ltbodygt Defines the document's body
• lth1gt to lth6gt Defines header 1 to header 6
• ltbrgt Inserts a single line break
• lthrgt Defines a horizontal rule
• lt!--gt Defines a comment
• ltpgt Defines a paragraph

13
ltBODYgt.lt/BODYgt

• All of the text and images you put on your page
  must appear BETWEEN the Opening and Closing
  ltBODYgt tags.
• There are several basic Attributes that you
  can use in the Opening ltBODYgt Tag.

14
Attributes that you can use in the Opening ltBODYgt
Tag.BACKGROUNDUse this Attribute to specify a
background graphic (GIF or JPG) like
thisBACKGROUND"picture.gif" or if it is in a
different folder than the page you are writing
BACKGROUND"otherfoldernamehere/picture.gif"
BGCOLORIf you do not wish to use a background
graphic, use this Attribute instead to define a
color for your web page background
BGCOLOR"FFFFFF" or "White" TEXTUse this
Attribute to define what color ALL of the text on
your page will appear in TEXT"000000" or
"Black"
15
Attributes that you can use in the Opening ltBODYgt
Tag.LINKThis Attribute will let you define
the color that ALL of your Links are displayed
as LINK"008080" VLINKThe VLINK Visited
Link defines the color that ALL the Visited
Links appear in. If you click on a Link and go to
a page, and then come back to the original page,
the Link you just clicked on is now another
color. You can define that color using VLINK
VLINK"FFFF00" ALINKThe ALINK Active Link
sets the color the Links will turn as you click
on them ALINK"FF0000"
16
Comments in HTML

• The comment tag is used to insert a comment in
  the HTML source code. A comment will be ignored
  by the browser. You can use comments to explain
  your code, which can help you when you edit the
  source code at a later date.
• lt!-- This is a comment --gt

17
Images handling In HTML

• You can add graphic images in two formats to
  your web pages
• ltIMGgt
• ltIMG SRCpicture.gif"gt
• ltIMG SRCpicture.gif" WIDTH"100" HEIGHT"200"gt
• ltIMG SRCpicture.gif" WIDTH"140" HEIGHT"64"
  ALT"Testing the ALT text trick" BORDER"0"gt
• ltimg " src"picture.gif" align"right" gt

18
Table

• Tables allow you to place objects and page
  elements very precisely on your web page allowing
  you a lot more creative freedom.
• There is one big drawback to using tables. Your
  browser will wait until ALL of the material
  contained in the table has been downloaded before
  it displays the table on the page. So, it is
  absolutely essential that you include Height and
  Width tags in any images you put into a table, so
  that the browser doesn't wait for every single
  graphic to download before it displays the table

19
Table (continued)

• ltTABLEgt
• ltTHgt...lt/THgt
• ltTRgt...lt/TRgt
• ltTDgt...lt/TDgt
• lt/TABLEgt

20
ltTABLE BORDER"1"gt      lt-- Opening Table tag
with the border on ltTHgt Testing the header
lt/THgt     lt-- defining the header cell and text
ltTRgt     lt-- defining the first row with this
tag ltTDgt Example Cell lt/TDgt   lt-- defining the
individual cell lt/TRgt     lt-- ending the first
row with this tag lt/TABLEgt     lt-- ending the
table with the Closing table tag
Table (continued)
21
Forms

• There are 5 choices of form question layouts.
• Text fields
• Radio Buttons
• Check Boxes
• Selector Bars
• Text Areas

22
ltFormgt . lt/Formgt

• Form tag used inside the body tag

23
Forms (continued)
24
Forms (continued)
25
Text Field

• Text fields are one line of input. Normally you
  set a limit as to how many characters can be
  typed for the given field (maxlength). You can
  also set the size of the field (size).

ltINPUT TYPETEXT NAMEname SIZE40 maxlength30gt
26
Radio Button

• Radio Buttons allow for multiple choices yet the
  user can only select one. Multiple selections are
  not allowed with radio buttons. Notice that the
  NAME is the same for all buttons in a set, but
  the VALUE is different. Also notice that in the
  first one, the word "checked" is in the code
  which defaults "Yes" as being chosen when the
  page loads.

ltINPUT typeradio namer" checked value"yes"gt
YesltINPUT typeradio namer" value"no"gtNoltINPU
T typeradio namer" valueany value"gtany value
27
Check Box

• Check Boxes allow for multiple choices AND
  multiple selections. The user can select one or
  more. Notice that the NAME is now different for
  all checkboxes, but the VALUE is the same. Also
  notice that in the second two, the word "checked"
  is in the code which puts a check in the box for
  "Two" and "Three" when the page loads.

ltINPUT typecheckbox namea1" value"yes"gtOneltIN
PUT typecheckbox checked namea2"
value"yes"gtTwoltINPUT typecheckbox checked
namea2" value"yes"gtThree
28
Selector bar

• Selector Bars are perfect for questions that have
  many responses and you don't want to take up a
  lot of room on a page. They can be set for single
  or multiple selections allowed (either put in the
  word multiple or don't). If you choose multiple,
  you have to hold down the ctrl-key when making
  multiple choices. Notice the size can be however
  many cells you want.

29
Selector bar

• ltSELECT name"favorite_color" multiple
  size3gtltOPTION selected value"Red"gt Red
  lt/OPTIONgtltOPTION value"blue"gt Blue
  lt/OPTIONgtltOPTION value"green"gt Green
  lt/OPTIONgtltOPTION value"purple"gt Purple
  lt/OPTIONgtltOPTION value"black"gt Black
  lt/OPTIONgtltOPTION value"yellow"gt Yellow
  lt/OPTIONgtltOPTION value"pink"gt Pink
  lt/OPTIONgtlt/SELECTgt

30
Text Area

• Text fields are multiple lines of input. Normally
  this is where people respond with a lengthy
  answer of a paragraph or more. Be sure to put in
  the wrapvirtual so that when the typing hits the
  end of the line it auto wraps to the next line.
  You can set the columns and rows to whatever you
  like. And you can put in a default response that
  is preloaded in the box when the page loads.

ltTEXTAREA WRAPVIRTUAL NAME"comments" COLS20
ROWS5gt feed back lt/TEXTAREAgt
31
Frames

• With frames, you can display more than one HTML
  document in the same browser window. Each HTML
  document is called a frame, and each frame is
  independent of the others.
• The disadvantages of using frames are
• The web developer must keep track of more HTML
  documents
• It is difficult to print the entire page

32
Frames (continued)

• The Frameset Tag
• The ltframesetgt tag defines how to divide the
  window into frames
• Each frameset defines a set of rows or columns
• The values of the rows/columns indicate the
  amount of screen area each row/column will occupy

33
Frames (continued)

• The Frame Tag
• The ltframegt tag defines what HTML document to put
  into each frame
• In the follwing example we have a frameset with
  two columns. The first column is set to 25 of
  the width of the browser window. The second
  column is set to 75 of the width of the browser
  window. The HTML document "frame_a.htm" is put
  into the first column, and the HTML document
  "frame_b.htm" is put into the second column

34
Frames (continued)

• ltframeset cols"25,75"gt    ltframe
  src"frame_a.htm"gt    ltframe src"frame_b.htm"gt
  lt/framesetgt
• Note If a frame has visible borders, the user
  can resize it by dragging the border. To prevent
  a user from doing this, you can add
  noresize"noresize" to the ltframegt tag.
• Add the ltnoframesgt tag for browsers that do not
  support frames.

35
HTML uses a hyperlink to link to another document
on the Web

• The Anchor Tag and the Href Attribute
• HTML uses the ltagt (anchor) tag to create a link
  to another document.
• An anchor can point to any resource on the Web
  an HTML page, an image, a sound file, a movie,
  etc.
• The syntax of creating an anchor 
• lta href"url"gtText to be displayedlt/agt

http//www.w3.org/TR/html401/intro/intro.htmlh-2.
1
36

• The ltagt tag is used to create an anchor to link
  from, the href attribute is used to address the
  document to link to, and the words between the
  open and close of the anchor tag will be
  displayed as a hyperlink.
• This anchor defines a link to IIITM-K website
• lta href"http//www.iiitmk.ac.in/"gtVisit
  IIITM-Klt/agt

37
References

• http//www.w3.org/TR/REC-html40/struct/global.html
  
• http//www.w3.org/MarkUp/Guide/
• http//www.w3.org/MarkUp/Guide/Advanced.html
• http//www.w3.org/DOM/

38

• http//www.davesite.com/webstation/html/
• http//www.cwru.edu/help/introHTML/toc.html
• http//www.2kweb.net/html-tutorial/
• http//www2.utep.edu/kross/tutorial/
• http//www.mcli.dist.maricopa.edu/tut/lessons.html
  
• http//www.htmlcodetutorial.com/
• http//www.echoecho.com/html.htm
• http//www.webcom.com/html/tutor/
• http//www.primeshop.com/html/jump3.htm
• http//www.htmlprimer.com/
• http//www.pageresource.com/html/index2.htm

39

• http//hotwired.lycos.com/webmonkey/authoring/html
  _basics/
• http//www.arachnoid.com/lutusp/html_tutor.html
• http//www.utoronto.ca/webdocs/HTMLdocs/NewHTML/ht
  mlindex.html
• http//www.iboost.com/build/programming/html/basic
  /755.htm
• http//www.angelfire.com/fl5/html-tutorial/
• http//www.ncsu.edu/it/edu/html_trng/html_intro.ht
  ml
• http//www.w3.org/MarkUp/
• http//www.htmlhelp.com/reference/wilbur/list.html
  
• http//www.w3.org/People/Raggett/book4/ch02.html
• http//www.utexas.edu/learn/html/
• http//www.inf.bme.hu/htmlhelp/alphabet.htm
• http//www.w3schools.com/html/html_formatting.asp