CSCI235 MicroComputer Applications

1
CSCI-235Micro-Computer Applications

• Basic HTML

2
HTML is a Markup Language

• HyperText Markup Language (HTML)
• Hypertext refers to the fact that Web pages are
  more than just text (e.g., can contain
  multimedia, provide links for jumping within
  without)
• Markup refers to the fact that it works by
  augmenting text with special symbols (tags) that
  control formatting when the document is viewed by
  a special application (e.g., a Web browser
  interprets HTML)

3
HTML Structure

• HTML is a language for describing the structure
  of a document, not its actual presentation
• You can not control the way your readers
  computers and browsers interpret your Web pages
• Keep in mind that different browsers display
  formatted text differently

4
HTML Editors

• HTML documents are basically ASCII text documents
• Any Word Processor, preferably Windows Notepad
  can be used to create the necessary text
• Many high-level tools exist for creating Web
  pages (e.g., Microsoft FrontPage, Netscape
  Composer, etc)
• Assembly language vs. high-level language analogy

5
HTML Tags

• HTML specifies a set of tags that identify
  structure and content type
• Tags are enclosed in lt gt
• Most tags come in pairs, marking a beginning and
  an ending
• ltbgtTagslt/bgt
• Single Tags have a single tag and all the
  information required is contained within the
  single tag
• ltIMG SRC"picture.gif" ALIGN"Left" gt

6
HTML Elements

• An HTML element is an object enclosed by a pair
  of tags
• lttitlegt My Home Pagelt/titlegt
• is a TITLE element
• ltbgt This text appears bold.lt/bgt
• is a BOLD element
• An HTML document is a collection of elements

7
Structural Elements

• an HTML document has two main structural elements
• HEAD contains setup information for the browser
  the Web page (e.g., the title for the browser
  window, etc)
• BODY contains the actual content to be displayed
  in the Web page

HTML documents begin and end with lthtmlgt and
lt/htmlgt tags Comments appear between lt!-- and
--gt HEAD section enclosed between ltheadgt and
lt/headgt BODY section enclosed between ltbodygt and
lt/bodygt
lthtmlgt lt!- Version information -- -- File
sample1.html -- --gt ltheadgt lttitlegtMy first
HTML documentlt/titlegt lt/headgt ltbodygt Hello
world! lt/bodygt lt/htmlgt
8
Opening and Closing Tags

• Start all pages with these tags
• lthtmlgt
• ltheadgt
• lttitlegt lt/titlegt
• lt/headgt
• ltbodygt
• End all pages with these tags
• lt/bodygt
• lt/htmlgt

9

• lthtmlgt
• ltheadgt
• lttitlegt Text here appears in browser title bar
  lt/titlegt
• lt/headgt
• ltbodygt
• Text to form the body of the message
• lt/bodygt
• lt/htmlgt

10
Headings

• Headings serve as headlines for a document
• There are six (6) levels of header tags. Level 1
  is the largest and boldest, Level 6 is the
  smallest
• (There is additional space provided above and
  below any heading level text.)

11
More Heading Properties

• Headings can also include placement information
  inside the tag
• For Examplelth1 align"center"gt text here lt/h1gt
• Orlth1 align"right"gt text here lt/h1gt

12
Paragraphs

• HTML does not recognize carriage returns or
  enters, you will need to add a Paragraph tag
• The paragraph tag is ltpgt and the closing tag is a
  lt/pgt
• NOTE To get the look of a ltpgt paragraph tag
  without really using one, you may choose to use
  two (2) break tags ltbrgt together

13
Line Breaks Paragraphs

• The ltbrgt tag leaves normal spacing between lines,
  whereas the ltpgt tag leaves 2 to 3 times the space
• This sentence represents the spacing between ltbrgt
  lines with the break tag
• This sentence represents the spacing between ltpgt
  lines with the paragraph tag

14
Justified Text in Paragraphs

• Use the ltp alignjustifygtText lt/pgt tags

(SEE SAMPLE HTML PAGE 1)
15
Listing Items on a Web Page

• Adding lists to your Web page
• Bullets called Unordered Lists ltulgt
• Numbered listscalled Ordered Lists ltolgt

16
Unordered Lists ltulgt

• When you want to make a bulleted list do the
  following
• Use the ltulgt tag as in the following example

ltulgt ltligt How lt/ligt l How ltligt Now
lt/ligt l Now ltligt Brown lt/ligt l Brown ltligt
Cow lt/ligt l Cow lt/ulgt
17
Ordered Lists ltolgt

• When you want to make a numbered list to drive
  your point home, do the following
• Use the ltolgt tag as in the following example

ltolgt ltligt How lt/ligt 1. How ltligt Now
lt/ligt 2. Now ltligt Brown lt/ligt 3.
Brown ltligt Cow lt/ligt 4. Cow lt/olgt
18
Colors

• The color of the background and text of a
  document can be defined using tags
• Colors can either be defined with their values in
  hex (e.g. FF0000 for red) or by the use of one
  of the sixteen predefined colors (Black, White,
  Silver, Gray, Red, Maroon, Lime, Green, Blue,
  Navy, Magenta, Purple, Yellow, Olive, Cyan, and
  Teal)
• If you want red try
• ltfont colorredgtThis is redlt/fontgt

19
Style

• This is how you ask for a
• ltbgtbold fontlt/bgt
• This is how you ask for a
• ltigtitalic fontlt/igt
• This is how you ask for a
• ltugtunderlined fontlt/ugt

20
Using Images

• ltIMG SRC"image.location"gt 
• ltIMG SRC"image.location" WIDTH135 HEIGHT200gt
• ltIMG SRC"image.location" ALIGNRightgt
• ltBODY BACKGROUND"image.location"gt 

(SEE SAMPLE HTML PAGE 2)
21
Adding Links

• lta href"location"gtText that is underlined to
  indicate a linklt/agt

(SEE SAMPLE HTML PAGE 3)
22
Writing Your Own Page

• Start Notepad by clicking on the Start button,
  Programs, Accessories, then Notepad
• Anything you save on your W disk is accessable
  to the outside world by the StFx Web server. But
  what is your URL?
• If your login id is, for example, x2005abc, your
  URL is
• http//www.stfx.ca/people/x2005/x2005abc
• Name your HTML file index.html