Introduction to HTML

1
Session 1

• Introduction to HTML

• Adapted by Sophie Peter from original document by
  Charlie Foulkes

2
HTML

• Stands for Hypertext Markup Language
• HTML allows for the sending of unformatted text,
  between tags containing instructions on how to
  display the text (and images) which are then
  interpreted by the receiving browser.
• Initially this was at a rather simplistic level,
  and designers are still struggling with the
  restrictions that HTML puts on design.

3
Understanding HTML

• HTML documents therefore consist of text and tags
  (images are not embedded).
• Most tags come in pairs - opening and closing
  instructions to the browser.
• Bad things happen if you do not close tags that
  are meant to be closed. For example, choosing to
  ltcentergt a paragraph but forgetting to include a
  closing lt/centergt tag will mean that the whole
  document will then be centred.

4
Understanding HTML

• HTML can be written in CAPITALS or lowercase.
  Note JavaScript is case sensitive.
• HTML uses American English keywords e.g. bgcolor
  (this attribute sets the background colour) or
  ltfont colorFFFFFFgt.
• White space is ignored. There is only 1 space
  after a full stop in HTML no matter how many you
  type in. Unless you use something called a
  non-breaking space - nbsp

5
HTML

• HTML files should be named as followsexample.htm
  l or example.htmdepending on what web server
  the site will be on. Be consistent - using both
  is a recipe for disaster.

6
HTML - Understanding Tags

• HTML ltbgtMake this text boldlt/bgt

A closing tag. This means STOP making the text
bold NOW. The back-slash denotes this.
An opening tag. Roughly interpreted, this means
START making the text bold NOW.
Displayed by browser Make this text bold
7
HTML - Understanding Tags

• Browsers are built to understand and interpret
  more than just HTML documents. As you know,
  computers are also pretty stupid and need to be
  given instructions in a precise way. The first
  tag you type in any HTML document must therefore
  beltHTMLgt
• this tells the computer that this is an HTML
  document lt/HTMLgt
• this tells the computer that this is the end of
  the HTML document

8
PC
Mr HTML DOCUMENT
Linux
PC
Web Server
MAC
Phone Lines
ltheadgt The first part of the HTML document to
be received and interpreted by the computer and
browser.
ltbodygt The rest of the web page including text
and images which will be displayed.
9
ltheadgt
The ltheadgt of an HTML document is the brains of
the outfit, and includes tags which tell the
receiving browser about the document. The most
obvious of these is lttitlegt - the text displayed
in the title bar of the browser. It can be left
blank, but if success with Search Engines is
important to you, make sure each page on your
site has a unique title.
10
ltheadgt
The ltheadgt is also the correct place for all the
clever stuff like JavaScript and other scripting
languages. It is also the right location for
links to other useful files such as Cascading
Style Sheets and external JavaScript
files. ltlink relstylesheet typetext/css
hrefstyles.cssgt ltscript srcmyJavaScript.jsgt
11
ltheadgt
The ltheadgt also has an important role to play in
making pages Search Engine-friendly. This is
done by using ltmetagt tags. Not all Search
Engines use them, but it gives you (yet another)
weapon in the fight for publicity! ltmeta
namekeywords contentHendrix, Janis Joplin,
Cream, The Whogt ltmeta namedescription
contentWelcome to 60s music heaven.gt
12
ltbodygt
The ltbodygt of an HTML document contains
everything displayed on screen (apart from the
title). In essence, the visible part of the
HTML. However it also has attributes of its own
which can be changed, such as ltbody
bgcolor000000gt - changes the background colour
to black ltbody backgroundpic.jpggt - changes
the background to a tiling image Note you cant
have both!
13
ltbodygt
You can also set a general colour for text.
Careful with your syntax, now! ltbody
text000000gt ? ltbody text000000gt
? ltbodytext000000 gt ? ltbody text 000000gt
?
14
Basic HTML Structure
lthtmlgt ltheadgt lttitlegtExample Documentlt/titlegt lt/he
adgt ltbodygt lt/bodygt lt/htmlgt
TIP for Success! Type all this into Notepad first
before doing any further editing.
15
Formatting Tags
ltbgtBold Textlt/bgt ltbrgt ltstronggtStrong
Textlt/stronggt ltbrgt ltigtItalic Textlt/igt ltbrgt ltemgtEmp
hasised Textlt/emgt ltbrgt
Bold Text Strong Text Italic Text Emphasised
Text
16
Nesting Tags

• What if you need to make text bold and italic?
  The HTML instructions must be nested in order to
  work properly, as shownltbgtltigtMy bold and
  italic text.lt/igtlt/bgt ? ltigtltbgtMy bold and italic
  text.lt/bgtlt/igt ? ltbgtltigtMy bold and italic
  text.lt/bgtlt/igt ?

17
Headings

• HTML features 6 built-in heading styles for text.
  They are fairly handy, especially when using
  Cascading Style Sheets but are not anti-aliased
  and so do not produce the most aesthetically
  pleasing text when used at the largest size lth1gt.
• They are used as belowlth1gtLarge
  Textlt/h1gtlth6gtTiny Textlt/h6gt

lth1gt lth6gt
18
Headings

• This screen shot from Dreamweaver shows what they
  look like. It also shows the standard fonts
  available in HTML.

19
Fonts

• HTML limits us to using around 4 different fonts
  because the font is not embedded in the web page,
  it is provided by the computer upon which the
  page is being displayed.
• If the computer does not have the specified font
  installed, it substitutes it for one which it
  thinks is similar - so alternative font should
  normally be specified in the HTML rather than
  relying on the computers judgement!
• Therefore, if you want to use unusual fonts to
  set a mood, they have to be graphics rather than
  text - i.e. a picture of some text.

20
Fonts

• What is available? As you can see each has a
  different look and feel
• Times New Roman (default)
• Arial
• Courier
• Verdana
• Georgia

21
Fonts

• Example of the font tag in action
• ltfont face"Verdana, Arial, Helvetica,
• sans-serif" size"2"gt
• Starts by specifying the choice (Verdana) then
  lists alternatives that behave in a fairly
  predictable way that hopefully wont spoil the
  design. The tag then specifies what size the
  text should be.

22
Break

• The most reliable way of ensuring blank space or
  a return where needed is to insert a break
  ltbrgt.This should forceltbrgta breakThis should
  forcea breakThis should forceltbrgtltbrgta
  breakThis should forcea break

23
Lab Exercise 1

• demo

24
Lists - Unordered

• To produce a bulleted list on a web pageltulgt
  ltli typesquaregtOnly one bullet!lt/ulgt?
  Only one bullet!
• Other types of bullet include circle and disc,
  the default being disc, which looks like the
  bullet for this paragraph - an opaque circle.

25
Lists - Ordered

• To produce a numbered list on a web pageltolgt
  ltligt List Item One ltligt List Item Twolt/olgt1.
  List Item One2. List Item Two
• Again, can have choice of numberber including
  roman (iv)

26
Paragraphs

• Most normal text on web pages falls into this
  category. Like headings, ltpgt inserts a clean
  line break before and after text. It doesnt
  need a closing tag if you begin the next
  paragraph with another ltpgt.ltpgtThis is the
  beginning of an example paragraph about dull
  stuff blah blah blah...

27
Words Pictures

• ltimg srcimages/me.jpggt
• Refers to the graphics file in the images
  directory. The picture cannot be embedded in the
  HTML file like a Word document - the image is a
  computer file in its own right and is downloaded
  separately. This tag points to the location of
  the graphics file on the web server and does not
  need a closing tag.

28
Words Pictures

• ltimg srcimages/me.jpgheight119 width79gt
• Including the dimension attributes makes for a
  quicker download time. The browser is then
  prepared for the graphic rather than having to
  calculate the size.
• Options for me.jpg
• hspace40 or vspace40width50

29
Hyperlinks - Anchor Tags

• The whole purpose of the internet is to link to
  other documents, and there are two main ways to
  do this
• 1. Relativelta hrefinteresting.htmlgtClick
  here!lt/agt
• 2. Absolute lta hrefhttp//www.blah.com/interes
  ting.htmlgt Click here!lt/agt

30
Using Images as Hyperlinks

• The coolest hyperlinks are pictures. Especially
  rollover images. The way to turn an image into
  a hyperlink is by putting the image tag in
  between the anchor tags.
• lta hrefmyHomePage.htmlgtltimg srcme.jpg
  height119width79gtlt/agt
• Design point it is good netiquette to provide
  text links as well as images.

31
Mailto Hyperlinks

• These are hyperlinks which (should) automatically
  open the users email package with a blank email
  addressed to whatever address you specify in the
  code.
• Mail me on lta hrefmailtome_at_blah.comgtme_at_bla
  h.com!lt/agt

32
Lab Exercise 2

• demo