HTML

1
HTML Web Design (1)

• Paul Browne
• Dublin City University

2
A Little Internet History

• Originally designed in early 1960s as a military
  network by Defence Advanced Research Projects
  Agency (DARPA)
• A Computer Network would continue to function
  even after a number of nodes were destroyed
• Rooters know the location of computers and are
  used to direct network traffic
• The Internet (ARPANET) came online in 1969
• Initially connected universities in America
• FTP, Telnet and TCP/IP protocols developed in
  1970s

3
HTML History

• HTML (Hypertext Markup Language)
• HTML is a text markup language
• It is a slimmed down version (subset) of the more
  complicated SGML document format
• 1989 Tim Berners-Lee proposed HTML
• HTML documents/pages have a .html extension
• The language is used to specify the presentation
  of documents for the internet/ Intranet and the
  linking of documents (hyperlinks)
• An Internet browser is required to view html
  pages
• The first html browser (Mosaic) was developed in
  1993
• Developers from Mosaic left to form Netscape
• The World Wide Web Consortium formed in 1994 to
  ensure standards and interoperability
  (http//www.w3.org/)

4
Basic HTML

• HTML uses tags to specify the formatting
• The tags are not displayed in the browser, they
  tell the browser how to display the document
• Tags in HTML appear as angle brackets
• ltthe tag formatgt
• Each Tag needs to have an end
• lt/the tag formatgt
• Tags can be used to apply formatting to
  individual words, sentences, paragraphs or the
  whole HTML page
• ltcentergtltugt This is a sample ltbgtHTMLlt/bgt line
  formattedlt/ugtlt/centergt
• Is displayed in the internet browser as the
  following
• This is a sample HTML line formatted

5
Basic HTML

• Important Points
• All file names need to be in the correct case
  (html page names, image names etc),
• Cars.html is treated differently than cars.html
• Myphoto.jpg is treated differently than
  myphoto.jpg
• Page names should be meaningful not just
  Noname.html or page1.html
• Dont use a whitespace character in the file name
  like my page.html use an underscore instead
  like my_page.html
• Acceptable Characters (A-Z) (a-z)(0-9) or _ .
• First pages of a website need to be called
  index.html
• HTML TAGS use American spelling like color not
  colour

6
Basic HTML Page
All HTML pages require the following basic
structured tags
ltHTMLgt ltHEADgt ltTITLEgt lt/TITLEgt lt/HEADgt ltBODYgt
lt/BODYgt lt/HTMLgt
These basic structured tags should only appear
once per HTML page i.e only one ltbodygt tag and
one lt/bodygt tag etc
The text is added here
These tags must appear at the end of the HTML
page
7
Basic HTML Page
This states the document is a HTML page

• ltHTMLgt
• ltHEADgt
• ltTITLEgt My Dublin Homepage lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• Dublin is a city......
• ltcentergtltugt This is a sample ltbgtHTMLlt/bgt line
  formattedlt/ugtlt/centergt
• lt/BODYgt
• lt/HTMLgt

This is the title of the web page
Most formatting Tags in HTML have an end tag.
If no end tag is used the formatting will apply
for the rest of the web page
8
Basic HTML Page
ltHTMLgt ltHEADgt ltTITLEgt My Dublin Homepage
lt/TITLEgt lt/HEADgt ltBODYgt Dublin is a
city...... ltcentergtltugt This is a sample
ltbgtHTMLlt/bgt line formattedlt/ugtlt/centergt lt/BODYgt lt
/HTMLgt
HTML Page display in Internet browser
9
Basic HTML

• ltHTMLgt
• ltHEADgt
• ltTITLEgt My Dublin Homepage lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• Dublin is a city......
• lt/BODYgt
• lt/HTMLgt

No formatting tags are placed here
Text formatting tags is placed here only
10
HTML Formatting

• Font Formatting
• To bold text the following tag is used ltBgt
  lt/Bgt
• To underline text use the following ltUgt lt/Ugt
• To italics text ltIgt . lt/Igt
• The size, colour and font face type can also be
  modified
• ltFONT SIZE"7" COLOR"FF0000" FACE""gt The font
  test lt/FONTgt
• HTML 4.0 ltfont style"font-familyverdanafont-si
  ze60color660000"gt
• This is the text lt/fontgt

Some Acceptable Colours Red, green, blue, yellow,
orange. Specific codes can also be used for
colour FFFFFF white 000000black FF0000red
808080Navy
Some Acceptable fonts courier, courier new comic
sans ms arial, garamond verdana
11
HTML Formatting

• Text Formatting
• To move text onto a new line use ltBRgt
• To start a new paragraph use ltPgt
• To add more than one white space character use
  the following nbsp
• To add a line separating text use ltHRgt or
  ltHR color"330000" width"80"gt

Unordered List (bullet points) ltULgt ltLIgtPart 1
ltBRgt ltLIgtPart 2 ltBRgt ltLIgt Part 3 ltBRgt lt/ULgt
Ordered List (Numbers) ltOLgt ltLIgtPart 1
ltBRgt ltLIgtPart 2 ltBRgt ltLIgt Part 3 ltBRgt lt/OLgt
12
HTML Formatting

• Hyperlinking Webpages
• External page
• lta href"http//www.google.ie" gt Link to google
  lt/agt
• Internal page
• lta href"MyPage.html" gt MyPage lt/agt
• Linking within page lta href"C4"gt Images lt/agt
  (Link)
• Section to link to lta name"C4"gtlth2gtChapter
  4lt/h2gtlt/agt
• Inserting an Image
• Using an Image as a link
• ltIMG SRCpicture.jpg" WIDTH"2272" HEIGHT"1704"
  BORDER"0" ALT"text"gt
• Using an Image as a link
• lta hrefnextpage.html"gt
• ltimg border"0" src"nextpage.jpg" width"65"
  height"38"gt
• lt/agt

13
HTML Background

• Modifying Background Colour
• Instead of ltBODYgt use ltBODY bgcolor"FFFF99" gt
• The Colour of hyperlinks can also be modified
• ltBODY bgcolor"FFFF99" link"330000"
  alink"330000" vlink"330000" gt
• Embedding video, shockwave flash
• ltembed width100 height168 pluginspage"http//qu
  icktime.apple.com/" src"2002.mpg" width192
  loop"true" controller"true" autoplay"true"gtlt/em
  bedgt

14
HTML Tables

• Tables in HTML consist cells of rows and
  columns
• Very important method of formatting
• A Table of one row two columns could place an
  image in one cell and text in the other
• Things can get very complicated like tables
  within tables
• lttable border"1" bordercolor"330000"
• cellpadding"10"gt
• lttrgt
• lttd bgcolor"FF3300" width"300"gtFirstlt/tdgt
• lttdgtRowlt/tdgt
• lt/trgt
• lttrgt
• lttdgtSecondlt/tdgt
• lttdgtRowlt/tdgt
• lt/trgt
• lt/tablegt

15
HTML Reference http//www.w3schools.com/html/html
_examples.asp

• The End