Welcome to WEB PAGE DESIGN Workshop

1
Welcome to WEB PAGE DESIGN Workshop

• by
• Dr. Vijayakumar R Belaguli

Professor Head of the Department Computer
Science and Engineering Global Academy of
Technology
2
Introduction to HTML

• Objectives
• Introduction
• The internet
• WWW
• HTML
• Web browser
• HTML Document
• Structure
• Creation
• Saving
• Viewing

3
Introduction to HTML

• Introduction
• Computers are used for communication, share
  information.
• Transfer of Information over cables, satellite
  links and electronic waves.
• Many computers are interconnected (network).

4
Introduction to HTML

• Internet
• Network of networks? more than millions of
  computers are connected to each other.
• Usage
• Search for information
• Communicate with users across the globe.
• Online shopping.

5
Introduction to HTML

• WWW
• World Wide Web? similar to library.
• Millions of pages of text, images, audio, vedeo
  are stored on different computers that are
  interconnected.

6
Introduction to HTML

• What is Website?
• It is a collection of related web pages.
• What is Home page?
• The first page of the website is called home page.

7
Introduction to HTML

• A markup language combines text and extra
  information about the text.
• HTML? Hyper text markup language.
• HTML is an improved version of (SGML) Standard
  Generalized Markup Language.

8
Introduction to HTML

• Web browsers ? capable of
• Displaying web pages containing text and picture.
• Playing audio and vedeo files.
• Link web pages.

9
Introduction to HTML

• HTML Document structure
• Three basic elements
• HTML
• HEAD
• BODY

10
HTML Document Stucture
Displayed on the Title Bar of Internet Explorer
(IE)

• ltHTMLgt
• ltHEADgt
• ltTITLEgt Workshop on Web Page Design lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• This is my First Web Page Design Experience.
• lt/BODYgt
• lt/HTMLgt

Head section
HTML section
Body section
Closing Tag
Forward Slash must be used for all closing tags.
11
HTML Element

• Every HTML document starts and ends with HTML
  tag.
• Container elements? Start and End tags
• ExampleltHTMLgtlt/HTMLgt, ltBODYgt..lt/BODYgt, ltHEADgt
  lt/HEADgt.
• Empty Elements? No closing tags
• Example ltBRgt -- Line break or break in line.

12
HEAD Element

• Specifies the title of HTML document.
• Title element is placed within the HEAD element.
• Text within the title element is displayed on the
  title bar.
• ltHEADgt ltTITLEgt Welcome to Web Page Design
  Workshop lt/TITLEgt lt/HEADgt

13
My First Webpage

• ltHTMLgt
• ltHEADgt
• ltTITLEgt Welcome to Web Page Design Workshop
  lt/TITLEgt
• lt/HEADgt
• ltBODYgt GLOBAL ACADEMY OF TECHNOLOGY lt/BODYgt
• lt/HTMLgt

14
Setting Text Attribute

• ltHTMLgt
• ltHEADgt
• ltTITLEgt Welcome to Web Page Design Workshop
  lt/TITLEgt
• lt/HEADgt
• ltBODY text "Blue"gt GLOBAL ACADEMY OF
  TECHNOLOGY
• lt/BODYgtlt/HTMLgt

15
Setting Text Heading Element

• Six Levels of Headings ltH1gt ....lt/H1gt to
  ltH6gt..lt/H6gt
• Align attributes " center ", " left ", " right "
• ltBODY text "RED"gt
• ltH1 align "center"gt Computer Club lt/H1gt
• ltH2 align "left"gt IT- HERMIT lt/H2gt
• ltH3 align "right"gt Department of Computer
  Science and Engineering lt/H3gt
• ltH4gt Department of Information Science and
  Engineering lt/H4gt
• ltH5gt Global Academy of Technology lt/H5gt
• ltH6gt Bangalore-560098 lt/H6gt
• lt/BODYgt

16
Font Element

• Font element is used to Change "size", "color",
  "face"
• ltfont face "Arial" size "7" color "blue"
• style " italic" gt This text is in Bluegt
• Color attribute can also expressed in Hexadecimal
  to show 16 million colors (combination of RGB).
• Range ? " 000000 " to " FFFFFF
• ltBRgt ? line break element.

17
Character Formatting

• Bold face element ltBgt lt/Bgt
• ltBgt Department of Information Science and
  Engineeringlt/Bgt
• UnderLine Element ltugt .lt/ugt
• ltugt Global Academy of Technology is underlined
  lt/ugt
• Italics Element ltigt .lt/igt
• ltigt Bangalore-560098 is italizedlt/igt
• Big Element
• ltBIGgt Welcome to Web page Design lt/BIGgt

18
Character Formatting

• Small element ltSMALLgt lt/SMALLgt
• ltSMALLgt Half Day Workshop lt/SMALLgt
• Strike Element ltSTRIKEgt ....STRIKEgt
• ltSTRIKEgt Rs.nbspnbsp500/- lt/STRIKEgt
• Subscript Element ltSUBgt.lt/SUBgt
• HltSUBgt 2 lt/SUBgt O.
• SuperScript Element ltSUPgt ..lt/SUPgt
• A.XltSUPgt 2 lt/SUPgt B.X C 0

19
Font Element character formatting

• ltBODY text "GRAY"gt
• ltBRgtltfont size "5"gt Computer Club
  lt/fontgtltBRgtltBRgt one extra line break
• ltBRgtltfont color"000000"gt ltBIGgt Welcome to Web
  page Design lt/BIGgt lt/fontgt
• ltBRgtRegistration Fees ltSTRIKEgt
  Rs.nbspnbsp500/- lt/STRIKEgt nbspnbspnbspR
  s.nbspnbsp00/-
• ltBRgtSubscript is used here Feel free to bring
  your own HltSUBgt2lt/SUBgtO.
• ltBRgtltfont size "7" color"red"gt Quadriatic
  equation isnbsp nbsp A.XltSUPgt2lt/SUPgt B.X
  C0 ..(use of superscript)
• lt/BODYgt

20
BASEFONT Element

• BASEFONT element is used for setting the default
  size , color and style in a web page.
• ltBODYgt
• ltBASEFONT size "5" FACE "ARIAL NARROW"
  COLOR"RED"gt
• BASEFONT element is used for setting the default
  size , color and style in a web page
• lt/BODYgt

21
BLOCKQUOTE Element

• BlockQuote element is used to display text quotes
  in a distinct style with paragraph indent.
• ltBODYgt
• ltBLOCKQUOTEgt
• BlockQuote element is used to display text
  quotes in a distinct style with paragraph indent.
  It causes paragraph break and provides space
  above and below the quote. Blockquote is a
  container element. You may view the effect of
  blockquote element using the browser.
• lt/BLOCKQUOTEgt
• lt/BODYgt

22
HORIZONTAL RULE Element

• Horizontal rule element is used to draw
  horizontal lines in the web page. ltHRgt .lt/HRgt,
  ltHR attributesgt ltHRgt
• ltBODYgt
• ltBLOCKQUOTEgt
• BlockQuote element is used to display text
  quotes in a distinct style with paragraph indent.
  It causes paragraph break and provides space
  above and below the quote. Blockquote is a
  container element. You may view the effect of
  blockquote element using the browser.
  lt/BLOCKQUOTEgt
• ltHR SIZE5 WIDTH 60 COLORBLUE
  NOSHADEgt
• lt/BODYgt

23
BODY Element attributes

• ltBODY LEFTMARGIN"140" RIGHTMARGIN"20"
  TOPMARGIN"100" BOTTOMMARGIN"40"
  BGCOLOR"GRAY"gt
• BlockQuote element is used to display text
  quotes in a distinct style with paragraph indent.
  It causes paragraph break and provides space
  above and below the quote. Blockquote is a
  container element. You may view the effect of
  blockquote element using the browser.
• lt/BODYgt

24
Creating Lists

• HTML Supports several List elements
• Unordered List
• Attributes ltUL Typecircle, Fillround,
  squaregt
• Ordered List
• Attributes ltOL Type1, a, I,A
  start5gt
• Nested List

25
Creating Lists

• ltBODYgt
• ltUL Type"square"gt Unordered LIST OF FRUITS
• ltLIgt Papaya
• ltLIgtApple
• ltLIgtBanana
• ltLIgtMango
• lt/ULgt
• ltOL Type"a" start "5"gtOrdered LIST on
  Menutoolbar
• ltLIgtClick File menu
• ltLIgtClick save
• ltLIgtClick edit
• ltLIgtClick Format
• lt/OLgt
• lt/BODYgt

26
Anchor Element

• It is the most important element in HTML.
• It marks the text as hyperlink.
• Identified by tag ltAgt
• Attributes
• HREF? Used for specifying a text or image as a
  hyperlink
• NAME?Allows the anchor
• TITLE

27
Anchor Element

• HREF Attribute
• ltA HREFAcceptanceform.docgtCollegelt/Agt
• ltA HREFwww.google.comgtGooglelt/Agt
• NAME Attribute
• ltA HREFNAMEgt Introduction to HTMLlt/Agt
• ltA nameNAMEgt What is HTML? lt/Agt
• TITLE?tooltip over the hyperlink
• ltA TITLEInfo HREFAcceptanceform.docgtAcceptanc
  e formlt/Agt

28
Anchor link Attributes

• ltBODY LINKREDgt
• ltA HREFAcceptanceform.docgtCollegelt/Agt
• ltA HREFwww.google.comgtGooglelt/Agt
• ltBODY ALINKBluegtActive link
• ltA HREFAcceptanceform.docgtCollegelt/Agt
• ltA HREFwww.google.comgtGooglelt/Agt
• ltBODY VLINKYellowgtvisited link
• ltA HREFAcceptanceform.docgtCollegelt/Agt
• ltA HREFwww.google.comgtGooglelt/Agt

29
ImageElement and Attributes

• ltBODYgt GLOBAL ACADEMY OF TECHNOLOGYltBRgt
• ltIMG SRC"images/00002.jpg" Alt"Image not
  Available"gtImage 00002.jpgltBRgt
• ltIMG SRC"images/00004.jpg" Alt"Image not
  Available" height"145" width"165" hspace"45"
  vspace"50"gt
• Image 00004.jpgltBRgt
• ltIMG SRC"images/00007.jpg" Alt"Image not
  Available" align "right"gtImage 00007.jpgltBRgt
• ltIMG SRC"images/00005.jpg" Alt"Image not
  Available" border "10"gtImage 00005.jpgltBRgt
• lt/BODYgt

30
AudioElement and Attributes

• ltBODYgt GLOBAL ACADEMY OF TECHNOLOGYltBRgt
• ltBGSOUND SRCKunidu.mp3"gtMungaaru mallay
  songsltBRgt
• ltBGSOUND SRCtrrp06.mp3" LOOPinfinite"gt Ta
  ra rum pum songsltBRgt
• ltBGSOUND SRCChand_Chamake.mp3" LOOP3"gt
  Fanaa songsltBRgt
• lt/BODYgt

31
Image Hyperlinks and Image Map

• ltBODYgt GLOBAL ACADEMY OF TECHNOLOGYltBRgt
• Image Hyper linkltbrgt
• ltA HREFsfbindex.htmlgt
• ltIMG SRC"images/00002.jpg" Alt"Image not
  Available"gtlt/Agt ltBRgt
• Image MapltBRgt
• ltIMG SRC"images/cutebaby03.jpg"
  UsemapCuteBabygt
• ltMap NameCuteBabygt ltArea Coords143,179
• HREF sfbinstructionpage.htmlgt lt/MAPgt
• lt/BODYgt

32
Tables

• Table element is used to insert tables in web
  pages. Table element consists of the
• Table Header
• Table Row
• Table Data

33
Tables

• ltBODYgt
• ltTablegt
• ltTRgt
• ltTHgt Namelt/THgtltTHgtClasslt/THgtltTHgtSectionlt/THgt
• lt/TRgt
• ltTRgt
• ltTDgt Amitlt/TDgtltTDgtVIII SEMlt/TDgtltTDgtCSElt/TDgt
• lt/TRgt
• lt/Tablegt
• lt/BODYgt

34
Tables Attributes

• Table Attributes
• Align Cellspacing
• Height CellPadding
• Width Border
• BGCOLOR FrameVoid,Above,
• Bordercolor Below, Hsides,LHS,RHS
• Bordercolorlight VSIDES, BOX
• BordercolorDark
• Background

35
Table data Element Attributes

• Table Data element Attributes
• ltTD attributexyzgt
• Align
• Height
• Width
• colspan
• rowspan
• Background

36
Table Row Element Attributes

• Table Row element Attributes
• ltTR attributepqrgt
• Align
• BGCOLOR
• Bordercolor
• Bordercolorlight
• Bordercolordark

37
Table Header Element Attributes

• Table Header element Attributes
• ltTH attributeabcgt
• Align Width
• colspan Height
• rowspan Background
• BGCOLOR
• Bordercolor
• Bordercolorlight
• Bordercolordark

38
Marquee
39
Marquee

• lthtmlgt
• ltheadgt
• lttitlegtNew Page 1lt/titlegt
• lt/headgt
• ltbodygt
• ltmarquee behavior"slide" height"50"
  width"80" hspace"45" vspace"55"
  direction"left"
• bgcolor"RED" loop"5" scrollamount"10"gtMoving
  Textlt/marqueegt
• lt/bodygt
• lt/htmlgt

40
Frames

• Frames display two or more web pages in a single
  browser window.
• You need to create frame document to create
  frames.