HTML Lecture

1
HTML Lecture
2
C. Tim Berners Lee and the WWW

• Internet was created by dozens of people.
• WWW was created by one person
• Tim Berners Lee
• Lee invented HTML, HTTP, created the first web
  browser, and the first web server.

3
Inventing HTML

• History of the Web is fascinating.
• Check out Weaving the Web by Tim Berners
  Leehttp//www.w3.org/People/Berners-Lee/
• Early challenge of the web so many different
  operating systems UNIX, Macintosh, NeXT,
  Mainframes, Windows.
• Lee wanted to create a very simple language that
  would work on any of these platforms.

4
Introduction to Hypertext

• HTML Hypertext Markup Language
• Hypertext
• links within Web documents
• connect one document to another
• seems rather mundane today, but this was actually
  once revolutionary.

5
Origins of HTML

• Lee based HTML on SGML (Standardized General
  Markup Language)
• More on this when we get to XML
• 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.

6
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).

7
What is Hypertext ?

• Hypertext
• links within Web documents
• connect one document to another
• seems rather mundane today, but this was actually
  once revolutionary.
• therefore, to understand HTML, you have to first
  examine the history of Hypertext.

8
HTML

• HTML is easy to pick up.
• WebMaster in a Nutshell is a great reference
  guide.
• Goal is to teach you the very basics and you can
  pick up the rest on your own.
• Not focused on creating beautiful web pages.

9
HTML Documents

• HTML documents are text documents
• Simple ASCCII text files
• Html file extensions .html or .htm
• You can create html documents using
• WordPad or Notepad on the PC and Simple Text
  (MAC os 9) or TExtEdit (MAC OS X)
• You can also use HTML Editors

10
HTML Editors

• HTML editors are called WYSIWYG
• What You See Is What You Get
• Examples of HTML Editors
• Dream Weaver
• Home site
• BBedit

11
HTML Editors

• Cons
• Do not generate clean HTML
• Add redundant tags
• Add their own tags
• Do not offer good graphic tools to manipulate
  images
• Hard to fix the HTML codes since every time you
  open document, it adds code

• Pros
• Good for beginners
• DO not have to know much HTML to use editors
• Easy to create complex tables, image maps, and
  use advance functions
• as Style Sheets and Java scripts
• Easy for design

12
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

13
HTML Document Structure

• HTML document divides into major parts
• HEAD contains information about the document
• As Title of the page, and Meta tag which
  describes content used by Search engines
• Some JavaScript and Style sheets are part of the
  head
• BODY Contains the actual content of the document
  
• Its the part that will be displayed in the
  Browser

14
Sample HTML Document

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

• Content of the document

15
HTML Tags

• All HTML tags are made up of a tag name and
  sometimes is followed by an optional list of
  attributes which all appear between angle
  brackets lt gt
• Nothing within brackets will be displayed by the
  browser
• Attributes are proprieties that extend or refine
  the tags function

16
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

17
HTML Tags

• Containers
• Most HTML tags have beginning (opener) or (START)
  tag
• They also have an end tag
• ltHEADgt lt/HEADgt
• ltBODYgt lt/BODYgt
• For Some tags, the end tag is optional
• ltpgt

18
HTML Tags

• Standalone tags
• Few HTML tags do not use an end tag and are used
  for standalone element on the page
• ltimggt to display an image
• ltBRgt Line break

19
HTML Tags

• Attributes
• ltbody bgcolorkhaki text000000 linkblue
  vlinkbrown alinkblack gt
• 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 attributes name
• Values are limited to 1024 characters in length

20
Information Browser ignore

• Tabs
• multiple spaces
• Will convert all the spaces to a single
• Example

Hello, How are
you? !-- browser will ignore and convert all
spaces and line return to one space -- Hello,
How are you?
21
ltPgt v. ltBRgt Tags

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

22
Paragraph Tag ltPgt

• Leave 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

23
Line break ltBRgt

• Breaks 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

24
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

25
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

26
Font Tags

• 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.

27
Font Tags specifies information about
fontfont type, size and color

• 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.

28
Text format tags

• Bold ltbgt lt/bgt or ltstronggt
• Italic ltIgt lt/Igt or ltemgt
• ltblinkgt lt/blinkgt
• 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

29
Lists

• There are several lists which is used to organize
  item lists in browser
• Unordered list Bulleted list (most popular),
  list items with no particular order
• Ordered list Numbered list

30
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

31
Unordered list

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

• Fruit
• Banana
• Grape

32
Ordered list

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

• Fruit
• Banana
• Grape

33
Hyperlinks (Anchor Tag)

• Hyperlinks are used for linking
• within the same page (Name 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
• Text links
• Image links
• Hyper Links are highlighted and underlined text.
  When clicked on, it takes you to another page on
  the web.
• ltA commandtargetgthighlighted textlt/Agt

34
Hyperlinks

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

35
Hyperlinks

• Relative Link links to another page in your web
  Site. Do not have to specify entire URL.
• ltA HREFindex.htmlgtGo back to main pagelt/Agt
• back to main page

36
Targeted Links

• A tag includes a target attribute. If you
  specify target_blank, new browser window will
  be opened.
• ltA target"_blank" HREF"http//www.wired.com/wire
  d/archive//3.06/xanadu.html?personted_nelsontopi
  c_setwiredpeople"gtFull Text of Articlelt/Agt
• More on this when we get to frames...

37
Creating Anchor links

• Anchors name tag is the text you will link
  internally to a section within one document
• Used for long documents to create a dynamic table
  of content
• Anchors will make you jump to a different section
  in one document
• lta hrefintrogt introduction lt/agt
• .
• .
• lta nameintrogtintroductionlt/agt

38
Email Link

• You can email me at
• lta hrefmailtosao1_at_nyu.edugtSana Odehlt/Agt

39
HTML Tables

• Tables represent a simple mechanism for creating
  rows and columns of data
• Great tool for laying out the content of any web
  page.
• Very widely used
• Very simple tag structure

40
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
41
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.
42
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)

43
IV. HTML and Multimedia

• Basic Audio and Video

44
Example 1 Images

• ltimg src "http//static.wired.com/wired/images/wi
  red_logoblue.gif" width"153" height"31"
  border"0" alt"W I R E D"gt
• Image Attributes
• src URL for the image
• width/height not required but recommended.
• border not required.
• alt recommended.

45
Adding multimedia files

• You may want to have an image open as a separate
  document when a user activates a link
• This is called an external image, and it is
  useful if you do not wish to slow down the
  loading of the main document with large inline
  images.
• To include a reference to an external image,
  enter
• ltA HREF"MyImage.gif"gtlink anchorlt/Agt
• Use the same syntax for links to sounds files and
  movies.
• The only difference is the file extension of the
  linked file. this example, specifies a link to a
  QuickTime movie.
• ltA HREF"AdamsRib.mov"gtlink anchorlt/Agt

46
specifies a link to a QuickTime movie. Some
common file types and their extensions arelta
hreffilename.extensiongt listen to sond file
lt/agtlta hrefsound1.wavgt listen to sond file
lt/agtlta hrefmovie1.movgt view movie clip lt/agt

• plain text .txt
• HTML document .html
• GIF image .gif or .jpg or .png
• Acrobat file .pdf
• AIFF sound file .aiff .au . Wav
• QuickTime movie .mov
• MPEG movie .mpeg or .mpg

47
Ex. 4 Embedding Audio

• For Internet Explorer, you can use BGSOUND
• ltBGSOUND src"http//www.3-cities.com/yogi/Starw
  ars/impressive.wav"gt
• Netscape doesnt support BGSOUND, so you need to
  use the EMBED tag
• ltEMBED SRC"http//www.3-cities.com/yogi/Starwar
  s/impressive.wav"
• controls"console"gt

48
Ex 5 Embedded Video

• Use the Embed tag
• ltEMBED SRC"http//www.nba.com/theater/video/jord
  an_m_layup_020898.avi"
• AUTOSTARTfalsegt
• If we have time later in the semester, we will
  discuss Real Media Real Audio and Real Video.