Web Authoring,

1

• Web Authoring,
• Web Design in a Nutshell, 2nd Edition.
• Deliverer A. Vasa Buraphadeja

2
HTML Tags

• Elements are indicated by tags
• Tag is made up of the element name followed by an
  optional list of attributes, appears between
  angle brackets (lt gt)
• Nothing within the brackets is displayed in the
  browser
• Containers
• Most elements or components are containers,
  having a start tag and an end tag.
• Empty ("Standalone") Tags

The weather is ltIgtgorgeouslt/Igt today
ltframegt lthrgt ltmetagt ltimggt ltbrgt ltcolgt
3
HTML Tags

• Attributes
• Attributes are added within a tag to extend or
  modify the tag's actions. Attributes always go in
  the start tag only
• Nesting HTML Tags
• beginning and end tags of the enclosed tag must
  be completely contained within the beginning and
  end tags of the applied tag
• mistake is overlapping the tags, although some
  browsers display content marked up this way,
  other do not allow the violation

ltELEMENT ATTRIBUTE"value"gtAffected textlt/ELEMENTgt
The weather is ltBgtltIgtgorgeouslt/Igtlt/Bgt today.
4
Information Browsers Ignore

• Line breaks
• Line returns in the HTML document are ignored.
  Text and elements wrap continuously until they
  encounter a ltpgt or ltbrgt tag within the flow of
  the document text.
• Tabs and multiple spaces
• a tab or more than one consecutive blank
  character space in an HTML document is displayed
  as a single space.Extra spaces can be added by
  using the non-breaking space character entity
  (nbsp) or using preformatted text (ltpregt).
• Multiple ltPgt tags with no intervening text
• Unrecognized tags
• Text in comments lt!-- a comment --gt

5
Tips on Good HTML Style

• Follow HTML syntax
• if you omit a closing lt/tablegt tag, some versions
  of IE display the contents of the table just
  fine, while Netscape Navigator leaves that
  portion of your web page completely blank
• Follow code-writing conventions
• Use comments to delineate sections of code so you
  can find them quickly.
• Because browsers ignore line breaks, tabs, and
  extra spaces in the HTML document, they can be
  used to make your document easier to scan.
• because HTML tags are not case-sensitive, you may
  choose to write tags in all capital letters (XML
  standard requires all tags and attributes to be
  lowercase)

6
Tips on Good HTML Style

• Avoid adding extra or redundant tags.
• extra and redundant HTML tags add unnecessary
  bytes
• make the browser work harder to parse the file,
  further increasing display times
• ltfontgt tags within a sentence is a common side
  effect of making small edits with a WYSIWYG
  authoring tool.
• Keep good HTML style in mind when naming your
  files
• Use the proper HTML document suffix .html , .htm
• limit filenames to letters, numbers, underscores
  (in place of spaces), hyphens
• Filenames are case-sensitive in HTML

7
HTML Tools

• HTML documents are simple ASCII text files, you
  can use any minimal text editor to write them.
• HTML Editors
• Text editing tools designed especially for
  writing HTML.
• WYSIWYG Authoring Tools have graphical
  interfaces, automate more complex tasks such as
  creating Cascading Style Sheets, or adding
  JavaScript.
• Pros and Cons to authoring tools
• If you do choose to use a web authoring tool,
  don't expect it to excuse you from learning HTML
  altogether. In many cases, you will need to do
  some manual fine-tuning to the resulting HTML
  code.

8
HTML Tools

• Pros
• For beginners, even useful for learning HTML.
• For quick prototyping. Design ideas can be tried
  out on the fly.
• For complex tables and other advanced functions,
  e.g. JavaScript, DHTML functions.
• Offer considerable time savings.
• Cons
• Sometimes add proprietary or redundant tags.
• Some editors automatically change an HTML
  document when you open it in the program, or add
  their own tags and may strip out any tags they do
  not recognize.
• The code these programs generate may not conform
  to the latest HTML specifications.
• They are expensive!

9
HTML Tools

• Notepad as a tool
• How to save HTML file in Notepad?
• File / save as
• In file name text box, type index.htm (with
  double quotation around the name.)
• How to view HTML output?
• Launch IE
• File / Openand point to the file index.htm.

10
Document Structure

• A typical HTML document is divided into two major
  portions the head and the body. The head
  contains information about the document, such as
  its title and "meta" information describing the
  contents. The body contains the actual contents
  of the document (the part that is displayed in
  the browser window).

ltHTMLgt ltHEADgt ltTITLEgtDocument
Titlelt/TITLEgt lt/HEADgt ltBODYgt
Contents of Document lt/BODYgt lt/HTMLgt
11
Setting Up an HTML document

• The Document Header
• Titles provides a description of the pages
  contents. Its whats displayed in a users
  bookmarks, also Search engines rely heavily on
  titles!
• Other elements are
• link- defines the relationship between the
  current document and another document, often used
  to link to an external style sheet.
• meta- tags are used to provide info about a
  document
• script- is to add JavaScript and VBScript using
  this tag.
• style- is to embed style sheets.
• The Document Body contains the contents of the
  document that displays in the browser window.

12
Global Settings with the ltbodygt Tag

• Colors

13
Formatting Text

• Paragraphs and Headings (Block-Level Elements)
• ltdivgt...lt/divgt
• no presentation properties of its own
• aligncenterleftright
• classname
• stylestyle properties
• lth1gt through lth6gt
• aligncenterleftright
• ltpgt

14
Formatting Text

• Text Appearance (Inline Styles)
• ltbgt
• ltfontgt
• colorcolor name or RRGGBB
• facetypeface (or list of typefaces)
• sizevalue
• ltigt
• ltstronggt
• ltugt
• Spacing and Positioning
• ltbrgt
• ltcentergt

15
Formatting Text

• Lists
• ltligt
• ltolgt
• startnumber
• type1AaIi
• ltulgt
• typedisccirclesquare

16
The ltfontgt Tag

• Specifying Size with ltfontgt

17
The ltfontgt Tag

• Specifying Size with ltfontgt
• sizes of nested ltfontgt tags are not cumulative,
  but rather are always based on the default or
  basefont size of the text.
• if the default text size for a document is 3, any
  text in that document that is enclosed in ltfont
  size"1"gt will result in text with a size of 4,
  even if that text is nested within a paragraph
  with ltfont size"5"gt.
• Advantage of ltfont size"n"gt
• Gives designers some control over type size
• Disadvantages of ltfont size"n"gt
• overrides viewers' preference for comfortable
  on-screen reading
• every single ltfontgt tag needs to be edited
  individually, not good with style

18
The ltfontgt Tag

• Specifying Fonts with ltfontgt
• The browser looks at the string of font names
  until it finds one that is installed on the
  user's system.
• If none of the suggested fonts are installed, the
  default font is used instead.

ltFONT FACE"Verdana, Arial, sans-serif"gttextlt/FONT
gt
19
Unix directory structure
20
Creating Links

• Summary of Tags Related to Linking
• ltagt
• hrefurl
• targettext
• local file ltA HREF"filename.html"gt...lt/Agt
• external file ltA HREF"http//server/path/file.ht
  ml"gt...lt/Agt
• named anchor ltA HREF"http//server/path/file.htm
  lfragment"gt...lt/Agt
• named anchor in the current file ltA
  HREF"fragment"gt...lt/Agt
• send an email message ltA HREF"mailtousername_at_do
  main"gt...lt/Agt
• file on an FTP server ltA HREF"ftp//server/path/
  filename"gt...lt/Agt

21
Creating Links

• Absolute URLs
• a protocol identifier, a host name (the name of
  the server machine), and the path to the specific
  filename
• Relative URLs
• pointer to another document relative to the
  location of the current document
• currently in resume.html (identified here by its
  full pathname)
• link on that page to bio.html, which is in the
  same directory
• to link to the file index.html in a higher level
  directory

ltA HREF"http//www.littlechair.com/web/index.html
"gt...lt/Agt
www.littlechair.com/web/work/resume.html
ltA HREF"bio.html"gt...lt/Agt
ltA HREF"../index.html"gt
22
Introduction to Tables

• Table in action
• Data table
• Text Alignment
• Page Template
• Multipart Image Container

23
Basic Table Structure

• Rows and Cells
• The minimum tags for describing a table are
  lttablegt, lttrgt, and lttdgt. The following HTML shows
  the basic structure with a visual representation
  of this concept.

ltTABLEgt ltTRgt ltTDgtcell 1lt/TDgtltTDgtcell
2lt/TDgt lt/TRgt ltTRgt ltTDgtcell 3lt/TDgtltTDgtcell
4lt/TDgt lt/TRgt lt/TABLEgt
24
Basic Table Structure

• Table-level Controls lttablegt
• Width of the table and its position, align on the
  page
• Thickness of the border around the table and
  between cells
• Spacing within and between cells, use cellPadding
  and cellSpacing
• Set background, bgcolor, color of all cells
• Row-level Controls
• Vertical and horizontal alignment, valign and
  align, of the content in that row
• Set background color of all cells contained in
  that row
• Cell-level Controls, lttrgt, or ltthgt
• Vertical and horizontal alignment of the cells
  content
• Set background color of that cell
• Height and width of the cell
• Whether the cell should span over more than cell
  space, colspan and rowspan

25
Basic Table Structure

• Spanning Columns and Rows
• Columns-gt
• Rows-gt

26
Affecting Table Appearance

• Positioning a Table on the Page
• By default, they behave like paragraphs or other
  blocks, but like images if floated to the left or
  right with the align attribute.
• Use the align attribute to position against the
  left or right margin and allow text to flow
  around it
• Sizing Tables
• By default, a table (and its rows and columns)
  are sized automatically to the minimum dimensions
  required to fit their contents.
• It is desirable to assign a table or column a
  specific size, especially when using the table to
  build a page structure.

27
Affecting Table Appearance

• Table dimensions
• The width attribute is used within the lttablegt
  tag to specify the width of the table.
• Specify an absolute value (measured in pixels) or
  a relative value (a percentage of the available
  width of the screen) as shown in the following
  table
• Table height can be specified using the height
  attribute, also can be defined by absolute or
  relative values.

Style Sample HTML Result
absolute value lttable width600gt Makes the table 600 pixels wide
relative value lttable width80gt Makes the table 80 of the screen width
28
Affecting Table Appearance

• Cell dimensions
• A cell's width setting affects the width of the
  entire column it occupies, so you can be
  specified by setting the width of just one cell
  in the column (generally those in the top row)
  the remaining cells will follow.
• Likewise, row height can be set using just one
  cell in each row.

29
Affecting Table Appearance

• Table Cell Spacing
• Cellspacing
• The amount of space between table cells is
  controlled by the cellspacing attribute within
  the lttablegt tag.
• Default value is 2
• Cellpadding
• Refers to the amount of space between the cell's
  border and the contents of the cell

30
Affecting Table Appearance

• Coloring Tables
• You can specify a background color for the entire
  table (lttablegt), for selected rows (lttrgt), or for
  individual cells (lttdgt or ltthgt) by placing the
  bgcolor attribute in the appropriate tag.