Scribd
Upload
23 views30 pages

6 MoreHTML

The document discusses HTML and CSS concepts like nesting tags correctly, indentation guidelines, block vs inline elements, attaching CSS stylesheets, and color properties. It provides examples and resources for further learning HTML, XHTML, and CSS.

Uploaded by

Sankar Raju
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
23 views30 pages

6 MoreHTML

The document discusses HTML and CSS concepts like nesting tags correctly, indentation guidelines, block vs inline elements, attaching CSS stylesheets, and color properties. It provides examples and resources for further learning HTML, XHTML, and CSS.

Uploaded by

Sankar Raju
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPT, PDF, TXT or read online on Scribd
You are on page 1/ 30

More HTML

Chapter 4
Nesting Tags
 How do you write the following in HTML?

 The wrong way:


This is <strong>really, <em>REALLY</strong> fun</em>!

 Tags must be correctly nested.


 A closing tag must match the most recently opened tag.
 The right way:
This is <strong>really,</strong>
<em><strong>REALLY</strong> fun</em>!

2
Spacing And Indentation
 Which tag is not closed?
<html><head><title>Can you find it?</title></head>
<body><p><ul><li>Not it!</li><li><ol><li>Is it here?
</li><li>Or maybe it's this one?</li></ol></li><li>
More words here</li><li>This is very hard to
read</li></p></body></html>

3
How About Now?
<html>
<head>
<title>Can you find it?</title>
</head>
<body>
<p>
<ul>
<li>Not it!</li>
<li>
<ol>
<li>Is it here?</li>
<li>Or maybe it's this one?</li>
</ol>
</li>
<li>More words here</li>
<li>This is very hard to read</li>
</p>
</body>
</html>

4
Spacing And Indentation Guidelines
 If the tag's content fits on one line, open and close
the tag on the same line.
<li>Is it here</li>

 Otherwise, the tag's content should be indented


more than the starting and closing tags.
<ol>
<li>Is it here?</li>
<li>Or maybe this tag is not closed?</li>
</ol>

 If the starting and closing tags are on separate lines,


they should line up vertically, like above.
5
Spacing And Indentation Guidelines
 Use newlines to structure the HTML.
 The wrong way:
<ol>
<li>Item 1</li><li>Item 2</li><li>Item 3</li>
</ol>
 The right way:
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

6
Extensible HTML: XHTML
 Newer version of HTML, standardized in 2000

 XHTML tags must always be …


 … in lowercase
 … closed
 … nested properly

 XHTML 1.0 Strict is the standard we will be using.


 Reference: http://www.december.com/html/x1/

7
Why Use Standards?
 Ensure interoperability across different browsers

 Can easily verify if standards-compliant


 XHTML Validation Service: http://validator.w3.org/

 Alas, not all web browsers (particularly Internet


Explorer) adhere to the standards
 http://www.webdevout.net/browser-support-summary

8
Basic XHTML Template
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>page title goes here</title>
</head>

<body>
page content goes here
</body>
</html>

9
HTML Element

10
Block vs. Inline Elements
 Block elements create "larger" structures than inline
elements.

 In general,
 block elements may contain text, inline elements, and other
block elements.
 inline elements may contain only text and other inline
elements.

 Block elements begin on new lines, inline elements


do not.

11
Block or Inline?
 Block  Inline
 h1, h2, ..., h6  br
 p  em
 ul, ol  strong
 hr  a
 img

12
Document Flow: Block Elements

13
Document Flow: Inline Elements

14
Document Flow Example

15
Why Important?

Only block
elements are
directly allowed
inside the body
element.

Elements allowed
in body element

Image snapshot from XHTML 1.0 Strict Reference http://www.december.com/html/x1/element/body.html


16
What About Links?
No a!

 Allowable content for body:

 Illegal:
<body>
<a href="http://www.yahoo.com">Yahoo!</a>
</body>
 How can a web page have links?
 One solution is to put the link in a block element.
<body>
<p><a href="http://www.yahoo.com">Yahoo!</a></p>
</body>

17
Images In XHTML
 Requires an alt attribute describing the image
<p>
<img src="hamster.jpg" alt="Hamster eating carrot" />
</p>

 Image present:  Image missing:

18
XHTML Validation
 Make sure your files validate!
 XHTML Validation Service: http://validator.w3.org/

 When fixing errors, fix the first error and then try
validating again.
 For example, a single missing closing tag might be
confused for several errors.

 Validation does not check for proper indentation.

19
Web 2.0

20
HTML/XHTML Resources
 W3Schools HTML Tutorial
 http://www.w3schools.com/html/default.asp

 W3Schools XHTML Tutorial


 http://www.w3schools.com/xhtml/default.asp

 Complete list of HTML tags


 http://www.w3schools.com/tags/default.asp

 XHTML 1.0 Strict Reference


 http://www.december.com/html/x1/

21
Cascading Style Sheets (CSS)

 Describe the appearance, layout, and


presentation of information on a web page

 Describe how information is to be displayed,


not what is being displayed

22
Basic CSS Rule
 A CSS file contains one or more rules.
 Rule syntax:
selector {
property: value;
property: value;
...
property: value;
}

 selector: HTML element you wish to style


 property: attribute you wish to change

23
Example

 CSS:
p {
font-family: sans-serif;
background-color: yellow;
}

 HTML:
<p>Can you see me now?</p>

24
Color Properties
 color: color of the element's text
 background-color: color that will appear behind
the element

25
Colors
 Colors are defined by three numbers (from 0 to 255) representing the
amount of red, green, and blue (RGB)

 Can specify colors by:


 Pre-defined name
 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive,
purple, red, silver, teal, white, yellow
 RGB triplet
 rgb(R,G,B) where R, G, and B are each numbers from 0 to 255
 RGB triplet in hexadecimal format*
 #RRGGBB where RR, GG, BB are the red, green, and blue values in
hexadecimal

 ColorSchemer: http://www.colorschemer.com/online.html

*You do not need to understand hexadecimal.

26
Colors Example

 Ways to specify teal


h1 {
color: teal;
}

h1 {
color: rgb(0,128,128);
}

h1 {
color: #008080;
}

27
More Properties: Font

 font-family: which font will be used


 font-size: how large the letters will be drawn
 font-style: used to enable/disable italic style
 font-weight: used to enable/disable bold style

 For examples on how to set these and other


properties, see:
 http://www.w3schools.com/css/css_reference.asp
 http://www.tizag.com/cssT/reference.php

28
Attaching a CSS File: <link />
<head>
<title>...</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>

 Copy the rel and type attributes and their


corresponding values verbatim
 Use the href attribute to specify the location of a
stylesheet file
 Path location may be absolute or relative

29
CSS Resources
 CSS property references:
 http://www.w3schools.com/css/css_reference.asp
 http://www.tizag.com/cssT/reference.php

 CSS tutorial:
 http://www.tizag.com/cssT/

 CSE 190 M (Web Programming) lecture notes:


 http://www.cs.washington.edu/education/courses/cse190m/
CurrentQtr/lectures/slides/lecture03-basic_css.html

30

You might also like