Arnie Jordan

1

• Arnie Jordan
• Computer Studies
• November 09

2
HyperText Markup Language
Arnie Jordan Computer Studies November 09
3
HyperText Markup Language
Arnie Jordan Computer Studies November 09
4
HyperText Markup Language
5
What is HTML?

• HYPERTEXT A special type of database system
• Objects (text, pictures, music, programs, and on)
  can be creatively be creatively linked to each
  other
• HyperText Markup Language is (HTML) is the
  authoring language of the WWW
• It is developed using SGML

6
HTML (Hypertext MarkUP Language)

• HTML is the lingua franca for publishing
  hypertext on the World Wide Web
• Define tags lthtmlgtltbodygt ltheadgt.etc
• Allow to embed other scripting languages to
  manipulate design layout, text and graphics
• Platform independent
• Current version of HTML is 4.01
• For more info http//www.w3.org/MarkUp/

7
HTML (Hypertext MarkUP Language)

• The current HTML recommendation is XHTML 1.0
• XHTML combines HTML and XML
• Reformulation of HTML 4.01 in XML
• Combines the strength of HTML 4 with the power of
  XML

8
HyperText Markup Language

• Webserver
• PC, Mac,... (or other computing system)
• Operating system (Windows NT, UNIX, MacOS,...)
• Webserver software (Apache, IIS,)
• Content html pages, databases,
• Internet link
• Special case personal (offline) webserver

9
HyperText Markup Language

• HTML?
• Simple !!
• How to create HTML pages?
• Notepad or any text editor
• HTML editor

10
HyperText Markup Language
Tell the browser that this is webpage

• ltHTMLgt
• ltHEADgt
• ltTITLEgtMy first webpagelt/TITLEgt
• lt/HEADgt
• ltBODYgt
• Hello there
• lt/BODYgt
• lt/HTMLgt
• Save as name_of_file.htm

Title Header
Content starts here
Content stops here
Tell the browser that webpage ends
11
HyperText Markup Language

• Dressing it up!! tags
• start ltattributegt
• stop lt/attributegt
• ltpgt new paragraph default
• ltbrgt new line
• lthrgt horizontal rule

12
HTML Headings

• ltH1gtStyle 1lt/H1gt
• ltH2gtStyle 2lt/H2gt
• ltH3gtStyle 3lt/H3gt
• ltH4gtStyle 4lt/H4gt
• ltH5gtStyle 5lt/H5gt
• ltH6gtStyle 6lt/H6gt
• ltPgtNormal

13
HTML Physical Styles

• ltPgtNormal
• ltPgtltBgtBoldlt/Bgt
• ltPgtltIgtItalicslt/Igt

14
HTML Color

• ltPgtltFONT COLOR"FF0000"gtThis line is redlt/FONTgt
• ltPgtltFONT COLOR"00CC00"gtThis line is
  greenlt/FONTgt
• FFFF00 yellow
• 9900CC purple
• 0000FF blue
• 000000 black

15
HTML Lists
Ordered list

• ltOLgt
• ltLIgtnumbered list line 1lt/FONTgtlt/LIgt
• ltLIgtnumbered list line 2lt/FONTgtlt/LIgt
• lt/OLgt
• ltULgt
• ltLIgtbulleted list line 1lt/FONTgtlt/LIgt
• ltLIgtbulleted list line 2lt/FONTgtlt/LIgt
• lt/ULgt

Un-Ordered list
16
HTML Alignment

• ltP ALIGNrightgtThis is right alignedlt/pgt
• ltCENTERgtThis is center alignedlt/CENTERgt

17
HTML Tables
Border size
New row

• ltTABLE BORDER1gt
• ltTRgt
• ltTDgt
• ltPgtcolumn 1 row 1
• lt/TDgt
• ltTDgt
• ltPgtcolumn 2 row 1
• lt/TDgt
• lt/TRgt
• ltTRgt
• ltTDgt
• ltPgtcolumn 1 row 2
• lt/TDgt
• ltTDgt
• ltPgtcolumn 2 row 2
• lt/TDgt
• lt/TRgt
• lt/TABLEgt

New column
18

• ltTABLE BORDER1 WIDTH"100"gt
• ltTRgt
• ltTD WIDTH"10"gt
• ltPgtNr
• lt/TDgt
• ltTD WIDTH"90"gt
• ltPgtDescription
• lt/TDgt
• lt/TRgt
• ltTRgt
• ltTD WIDTH"10"gt
• ltPgt1
• lt/TDgt
• ltTD WIDTH"90"gt
• ltPgtsampling at harbour
• lt/TDgt
• lt/TRgt
• ltTRgt
• ltTD WIDTH"10"gt

19
HTML Hyperlink !
Anchor

• ltPgtltA HREF"personal_page.htm"gtClick here to
  visit my personal pagelt/Agt
• ltPgtltA HREF"http//ioc.unesco.org/default.htm"gtCli
  ck herelt/Agt to visit the IOC home page

CLICK!
20
HTML including images

• GIF (Graphics Interchange Format)
• JPG (short for JPEG Joint Photography Experts
  Graphics)ltIMG SRC./images/iyosm.gif"gt

21
Website managers
Frontpage 98
22
Frontpage Editor
WYSIWYG
23
Time to try!!
24
(No Transcript)