Tech043 02 HTML

1
Tech04302 HTML
2
Admin

• Attendance Register
• log in to your profile

3
Session Aims Objectives

• Aims
• introduce you to the fundamental aspects of web
  pages (HTML)
• Objectives, after this weeks sessions, you
  should be able to
• identify how many tags are in a block of html
• identify how many elements are in a block of html
• identify nested html elements
• generate html for basic tasks, e.g.
• bold, italic, centred text
• images

4
HTML Elements Tags

• Hyper-Text Markup Language
• text files edited with notepad
• tags, e.g. ltbgt lthtmlgt lt/agt
• element start tag content end tag
• bold ltbgtThis will be in
  boldlt/bgt
• italic ltigtThis will be in
  italiclt/igt
• work like brackets
• start/open ltbgt ltigt
• end/close lt/bgt lt/igt

5
Questions Tags

• How many tags are in the following
• ltheadgtlttitlegtHellolt/titlegtlt/headgt
• ltbodygt
• ltigtSoftlt/igtltbgt131lt/bgt
• lt/bodygt

4
6
6
Questions Elements

• How many elements are in the following
• ltheadgtlttitlegtHellolt/titlegtlt/headgt
• ltbodygt
• ltigtSoftlt/igtltbgt131lt/bgt
• lt/bodygt

2
3
7
HTML Nesting Elements

• Nesting puts one element inside
  another ltbgtltigtHellolt/igtlt/bgt
• Cannot overlap elements ltbgtltigtHellolt/bgtlt/igt

?
?
8
Questions HTML Elements

• Which of the following are valid elements?
• ltcentergtltbgtTitlelt/bgt
• ltheadgtlttitlegtlt/titlegtlt/headgt
• ltpgtGood ltbgtmorning.lt/pgtlt/bgt
• ltbodygtltigtSoftlt/igtltbgt131lt/bgtlt/bodygt

?
?
?
?
9
HTML page structure

• every HTML page has 2 sections

lthtmlgt ltheadgt lttitlegtTestlt/titlegt
lt/headgt ltbodygt ltpgtThis is a test
ltbgtpagelt/bgt.lt/pgt lt/bodygt lt/htmlgt
10
Indentation

• spaces are used to move lines in from left
• helps see structure

lthtmlgt ltheadgt lttitlegtTestlt/titlegt lt/headgt ltbodygt lt
pgtThis is a test ltbgtpagelt/bgt.lt/pgt lt/bodygt lt/htmlgt
lthtmlgt ltheadgt lttitlegtTestlt/titlegt
lt/headgt ltbodygt ltpgtThis is a test
ltbgtpagelt/bgt.lt/pgt lt/bodygt lt/htmlgt
head (is inside html)
title(is inside head)
11
HTML Attributes

• Some tags need extra information to work
• Anchor (hyper-link) element lta
  hrefnextpage.htmgtNext Pagelt/agt
• Image element ltimg srcBeach.jpg /gt
• Embedded object element ltembed
  srcMusic.mp3gtlt/embedgt

attribute (page to jump to)
attribute (filename of picture to display)
attribute (filename of music to play)
12
HTML Attributes (where)

• Attributes go inside the start tag
• lta hrefnextpage.htmgtNext Pagelt/agt
• not anywhere else
• ltagthrefnextpage.htmNext Pagelt/agt

start tag
?
attribute
start tag
?
13
HTML Tags Reference

• Lots of info available on-line, e.g.
• http//www.willcam.com/cmat/html/crossref.html
• Short list of tags
• ltpgt new paragraph
• ltbgt bold text
• ltigt italic text
• ltagt anchor (link) to another web page
• ltimggt image/picture (.bmp, .jpg, .gif)
• ltembedgt embedded object (.avi .mpg .wav .mp3)

14
Example My Summer
My summer web-page
15
Visual Studio 2005
16
Create New Web-site

• Select Empty web site
• Browse to D\ and create folder

17
Create New Web page
18
Create New Web Page

• Select HTML Page
• Type filename

19
Visual Studio
Design view see page as it will appear
20
Visual Studio
Source view see HTML code
21
View page (Run)
22
Enable debugging

• Select Add new Web.config file

23
Environment Settings

• Choose VB settings (same as my laptop)

24
Tutorial Exercise 1 My Summer

• LEARNING OBJECTIVE to understand tags,
  elements, and attributes, so that you can
  create your own web-pages using Visual
  Studio 2005
• TASK Create a My Summer web page, which
  describes the highlights of what you did over the
  summer, including text, pictures, and sound.
  Hint Create a new web site within Visual Studio
  2005. Create a new web page within you
  web site.