HTML - V22.0004

1
HTML - V22.0004
2
Introduction to Hypertext

• HTML Hypertext Markup Language
• Hypertext
• links within and amongWeb documents
• connect one document to another
• Although this seems rather mundane today, this is
  a radical departure from the structure of books
  since the invention of the printing press

3
Origins of HTML

• HTML is based on SGML (Standardized General
  Markup Language)
• A philosophical rule was that HTML should convey
  the structure of a hypertext document, but not
  the details of its presentation.
• Since then, HTML has evolved into a presentation
  language.

4
What is HTML?

• HTML (Hypertext Markup Language)
• HTML standards are developed under the authority
  of the World Wide Web Consortium (W3C), headed by
  Tim Lee
• http//www.w3c.org
• HTML is the set of "markup" symbols or codes
  inserted in a file intended for display on a
  World Wide Web browser.
• The markup tells the Web browser how to display a
  Web page's text, images, sound and video files
  for the user.
• The individual markup codes are referred to as
  elements (but many people also refer to them as
  tags).

5
HTML

• HTML is easy to pick up.
• There are many good books as well as resources
  on-line
• Our goal is to teach you the basics so that you
  can pick up the rest on your own.

6
HTML Documents

• HTML documents are text documents
• We use simple ASCII text files
• Html file extensions .html or .htm
• You can create html documents using
• Notepad in Windows and TextEdit (MAC OS X)
• You can also use HTML Editors

7
HTML Editors

• HTML editors are called WYSIWYG
• What You See Is What You Get!
• Examples of HTML Editors
• Dreamweaver
• Front Page
• Go Live

8
HTML Editors

• Cons
• They do not always generate clean HTML
• Add redundant tags
• Add their own tags
• They do not offer good graphic tools to
  manipulate images
• It can be hard to fix HTML tags since every time
  you open a document, code is added.

• Pros
• Good for beginners
• You do not have to know much HTML to use editors
• It is easy to create complex tables, image maps,
  and use advanced functions such
• as Style Sheets and JavaScript
• Easy for design due to the WYSIWYG interface

9
HTML Document Structure

• HTML Document contains
• Text (content of the page)
• HTML uses the following file extensions or
  suffix .HTML or .HTM
• Embedded tags
• provides instruction for the structure, and
  appearance of the content

10
HTML Document Structure

• The HTML document is divided into two major
  parts
• HEAD contains information about the document
• Title of the page (which appears at the top of
  the browser window)
• Meta tags used to describe the content (used by
  Search engines)
• JavaScript and Style sheets generally require
  statements in the document Head
• BODY Contains the actual content of the document
  
• This is the part that will be displayed in the
  browser window

11
Sample HTML Document

• ltHTMLgt
• ltHEADgt
• ltTITLEgt My web page lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• Content of the document
• lt/BODYgt
• lt/HTMLgt

12
HTML Tags

• All HTML tags are made up of a tag name and
  sometimes they are followed by an optional list
  of attributes which all appear between angle
  brackets lt gt
• Nothing within the brackets will be displayed by
  the browser (unless the HTML is incorrectly
  written and the browser interprets the tags as
  part of the content)
• Attributes are properties that extend or refine
  the tags functions

13
Basic Syntax

• Most (but not all!) HTML tags have a start tag
  and an end tag
• ltH1gtHello, world!lt/H1gt
• Basic Document Structure
• header information about the page, e.g. the
  title.
• body the actual content of the page.
• document starts with
• ltHTMLgt and ends with lt/HTMLgt

14
HTML Tags

• Standalone tags
• There are a few HTML tags which do not use an end
  tag and are used for standalone elements on the
  page
• ltimggt to display an image
• ltBRgt Line break
• ltHRgt header

15
HTML Tags

• Attributes
• ltbody bgcolorkhaki text000000 linkblue
  vlinkbrown alinkblack gt
• Attributes are added within a tag to extend a
  tags action.
• You can add multiple attributes within a single
  tag.
• Attributes belong after the tag name each
  attribute should be separated by one or more
  spaces.
• Most attributes take values, which follow an
  equal sign
• after the attributes name.
• Values are limited to 1024 characters in length.

16
This is Information which the browser will ignore

• Tabs
• multiple spaces will appear as a single space
• Example

Hello, How are
you? The browser will ignore the blanks and
new line Hello, How are you?
17
ltPgt v. ltBRgt Tags

• ltBRgt Break
• ltPgt Paragraph tag. Creates more space than a
  BR tag.
• ltHRgt Creates a Horizontal Rule

18
Paragraph Tag ltPgt

• Leaves one empty line after the tag
• Multiple ltPgt tags with no intervening text is
  interpreted as redundant by all browsers and will
  display a single ltPgt tag

19
Line break ltBRgt

• This tag breaks the line and starts text at a new
  line.
• It will not add an empty line like the paragraph
  tag
• Multiple ltbrgt tags will display multiple line
  breaks

20
Using blockquotes

• Use ltblockquotegt . lt/blockquotegt to set up a
  block of text. Nested blockquotes will further
  indent.
• For example
• ltblockquotegtTiffany was one of America's most
  acclaimed and multitalented artists working in
  the late 19th and early 20th centuries.
• ltblockquotegtOf all of Tiffany's artistic
  endeavors, stained glass brought him the greatest
  recognition. lt/blockquotegtlt/blockquotegt
• will display as
• Tiffany was one of America's most acclaimed and
  multitalented artists
• working in the late 19th and early 20th
  centuries.
• Of all of Tiffany's artistic endeavors, stained
  glass brought him the greatest recognition.

21
Comments lt!-- --gt

• Browser will NOT display text in between
• lt!-- This is a comment --gt
• lt!-- This is another
• comment
• --gt
• I. E. uses the following tag as a comment
• ltcommentgt this a comment lt/commentgt

22
Headings lth1gt .. lth6gt

• You can create Headlines of various sizes on your
  page
• Headlines appear as bold letters
• An empty line will also follow the headlines.
• Used for titles
• H1 is the largest font and h6 is the smallest
  heading
• Headings need an end tag lt/h1gt

23
Font Tags to specify color, font type and size

• ltFONT FACEARIAL SIZE6gt
• ltBgtThe Curse of Xanadult/Bgt
• lt/FONTgt
• ltFONT FACEARIAL SIZE3gt
• by By Gary Wolf, ltIgtWired Magazinelt/Igt
• lt/FONTgt
• Font tags
• face Arial, Courier, etc.
• size e.g. 3, 6
• color e.g. RED, GREEN, etc.

24
Text format tags

• Bold ltbgt some text lt/bgt or ltstronggt
• Italic ltIgt some text lt/Igt or ltemgt
• ltHRgt (Horizontal Rule) Displays horizontal line
  in the browser window. The line fills the window
  from left to the right margins. Its useful to
  separate sections of your document
• You can use attributes with lthrgt such as
• lthr width70gt

25
Lists

• Lists are used to organize items in the browser
  window
• Unordered list Bulleted list (most popular),
  list items with no particular order
• Ordered list Numbered list

26
Lists

• HTML supports two types of Lists
• Ordered Lists (OL) e.g. 1,2,3
• UnOrdered Lists (UL) e.g. bullets.
• Basic Syntax
• ltULgt ltLIgtItem 1
• ltLIgtItem 2
• lt/ULgt

27
Unordered list

• Unordered list Bulleted list (most popular),
  lists items with no particular order
• Fruit
• ltULgt
• ltLIgt Banana
• ltLIgtGrape
• lt/ULgt

• Fruit
• Banana
• Grape

28
Ordered list

• Numbered list
• Fruit
• ltolgt
• ltLIgt Banana
• ltLIgtGrape
• lt/OLgt

• Fruit
• Banana
• Grape

29
Hyperlinks (Anchor Tag)

• Hyperlinks are used for linking
• within the same page (Named tags)
• To another page in your web site (Relative Link
  or local link)
• To another page outside your web site (Absolute
  or remote link)
• Email Link
• Hyper Links are highlighted and underlined text.
  When you click on it, it takes you to another
  page on the web.
• ltA commandtargetgthighlighted textlt/Agt

30
Hyperlinks

• Absolute Link These are links to another page
  outside of your web site. These links specify the
  entire URL of the page
• ltA HREFhttp//www.nyu.edu/gtNYU Web Sitelt/Agt
• NYU Web Site

31
Hyperlinks

• Relative Link These are links to another page in
  your site so you do not have to specify the
  entire URL.
• ltA HREFindex.htmlgtGo back to main pagelt/Agt
• Go back to main page

32
Targeted Links

• A tag includes a target attribute. If you
  specify target_blank, a new browser window
  will be opened.
• ltA HREFhttp//www.nyu.edu target"_blankgt
  NYUlt/Agt
• More on this when we get to frames...

33
Email Link

• You can someone at
• lta hrefmailtojj1_at_nyu.edugtSend email to
  J.J.lt/Agt

34
HTML Tables

• Tables represent a simple mechanism for creating
  rows and columns of data.
• This is a great tool for laying out the content
  of any web page, especially when you omit the
  border by using
• border 0
• Tables are very widely used and supported by all
  common browsers.
• Tables use a very simple tag structure.

35
Backgrounds

• Use lt body bgcolor gt for a background
  color with a hex version of a web-safe color
• ltbody bgcolor ccffffgt
• For a tiled background using an image file
• ltBODY background"backgroundPicture.gif"gt

36
HTML - Tables

• Tables tags starts with
• ltTABLEgt tag, then
• ltTRgt defines table rows.
• Each ltTRgt represents one row in the table.
• The number of rows is determined by the number of
  ltTRgt
• ltTDgt Table data or ltTHgt Table Header can follow
  the ltTRgt tag
• The number of cells in each row is determined by
  the number of ltTHgt (Table Header) and/or ltTDgt
  (Table data) tags contained within that row.
• ltTHgt text will be in bold, and centered
• lttablegt
• lt/tablegt

lttrgt lttdgt cell 1 ltthgt cell 2 ltthgt cell 3 lt/trgt
lttrgt lttdgt cell 4 lttdgt cell 5 lttdgt cell 6 lt/trgt
lttrgt lttdgt cell 7 lttdgt cell 8 lttdgt cell 9 lt/trgt
37
Basic Tag Structure

•  ltTABLEgt
• ltTR gt
• ltTHgtTickerlt/THgt
• ltTHgtPricelt/THgt
• lt/TRgt
• ltTRgt
• ltTDgtMSFTlt/TDgt
• ltTDgt71 1/16lt/TDgt
• lt/TRgt
• ltTRgt
• ltTDgtKOlt/TDgt
• ltTDgt46 15/16lt/TDgt
• lt/TRgt
• lt/TABLEgt

TR Table Row
TH Table Heading
TD Table Data
Every ltTDgt must have a matching lt/TDgt. Every
ltTRgt must have a matching lt/TRgt.
38
Table Attributes

• ltTABLE ALIGNleft" BORDER0 BGCOLORcyan
  width600 cellpadding0 cellspacing0gt
• Align "left", "center" or "right - "left" is
  the default
• Border thickness of the border in pixels - 0
  for no borders
• Bgcolor is background color in HEX or as a name
  color
• Backgroundurl (works with IE only)
• Cellpadingn (n is number of pixels (space)
  between cell content and its border
• Cellspacingn (n is number of pixels (space)
  between cells)
• Heightn (height of table in pixels or
  percentages 100)
• Widthn (Width of table in pixels or percentages
  100)

39
Scrolling text using the ltmarqueegt tag

• lthtmlgt
• ltheadgtlttitlegt scrolling textlt/titlegtlt/headgt
• ltmarqueegtltfont facesand"gtWelcome to my website!
  Be sure to visit again!lt/marqueegt
• lt/bodygt
• lt/htmlgt

40
HTML and Multimedia
41
Images

• ltimg src "logoblue.gif" width"153" height"31"
  border"0" alt"W I R E D"gt
• Image Attributes
• src URL or filename for the image
• width/height not required
• border not required.
• alt recommended for users running a text
  browser.

42
Adding multimedia files

• lta hreffilename.extensiongt listen to sound file
  lt/agt
• lta hrefsound1.wavgt listen to sound file lt/agt
• lta hrefmovie1.movgt view movie clip lt/agt

43

Multimedia Filetypes

• File Type Extention/Mime type
• plain text .txt
• HTML document .html
• GIF image .gif or .jpg or .png
• Acrobat file .pdf
• AIFF sound file .aiff .au . wav
• MP3 .mp3
• QuickTime movie .mov
• MPEG movie .mpeg or .mpg