View
222
Download
0
Embed Size (px)
Citation preview
Hypertext Markup LanguageA set of markup tags and
associated syntax rulesUnlike a programming language,
you cannot describe actions or logic
You can only describe information structure and context
Markup tags also called elements
<element>Data goes here</element>
Cascading Style SheetsUsed to define attributes of
elements in HTML and XML◦Common attributes: height, width,
font-size, alignment, color, etc.Documents can have multiple
style sheets with overlapping and sometimes conflicting definitions
Cascading refers to the set of rules for resolving conflicts.
CascadingPriority is given to the most
specific definitions and then the definitions or rules cascade down to the less specific rules.
Priority is also given to definitions that are “closer” to the content, i.e., embedded and inline styles can be used to override global or attached styles.
HTML
HTML was supposed to be a structural or “semantic” language, ◦But, the Browser Wars lead to the
introduction of “style” or formatting tags.
◦“style” tags are bad!◦They are being removed from the
HTML standards (called deprecation).
CSS
Cascading Style SheetsUsed to specify the
style/appearance of structural elements (HTML tags).
CSS was part of the original design of the web,
but its use was almost entirely abandoned between 1997 and 2003.
Why are “style” tags bad?
The best answer is very complicated
Short Answer: ◦Leads to bloated HTML code that is
hard to maintain.
Semantic vs Style
Semantic Meaning
<img src=“tiger.jpg”>
<span class=“caption”>This is a picture of a tiger</span>
A caption is meaningful.Images typically have a caption that describes
the image.
Style Appearance
<img src=“tiger.jpg”>
<font type=“Arial” style=“italic” size=“10pt”>
This is a picture of a tiger</font>
Here, we specify how to display the caption but not the fact that it’s actually a caption.
Semantics + CSS is better!<span class=“caption”>Figure 1</span><span class=“caption”>Figure 2</span><span class=“caption”>Figure 3</span>…<span class=“caption”>Figure 99</span>
.caption {font-size: 10pt;font-style: italic;
}
This is why the font tag sucks!(it’s a style tag)<font type=“Arial” style=“italic” size=“10pt”> Figure 1
</font>
<font type=“Arial” style=“italic” size=“10pt”> Figure 2 </font>
<font type=“Arial” style=“italic” size=“10pt”> Figure 3 </font>
…
<font type=“Arial” style=“italic” size=“10pt”> Figure 999 </font>
<font type=“Arial” style=“bold” size=“10pt”> Sub-title </font>
Imaging if you wanted to change the font size to 12pt for all image captions?
Good luck!
XHTML & CSS syntax
General Structure Example
<element>Content</element>
element {
property: value;
property: value;
…
}
<h1>ESPN</h1>
h1 {
font-size: 10pt;
color: red;
}
Extensible HTML XHTMLXHTML is a reformulation of HTML
according to XML standards.
Only four differences1. Inclusion of an XML header2. Single tags end with />, instead of
just >3. Attribute values must have quotes:
“value”4. Tags must be in lowercase
Why use XHTML?It is the recommended standard
(W3C) since 1999◦HTML 4.01 (1998)◦XHTML 1.0 (1999)
Allows your web page to be parsed by a general XML parser.◦Lots of applications support XML
parsing.
Web’s 4 Commandments1. Make sure your code validates as
XHTML2. Use Semantic Markup
• Use tags that describe the content, not the content’s appearance
3. Structure Documents Logically• The HTML code should be in a logical
order; Style sheets can reposition items for presentation
4. Use CSS, not <font> or <table> to layout and decorate your pages.
XHTML Rules<elementname> Content content
</elementname>
In XHTML all element names must be lower case.◦ In HTML tag case didn’t matter.
In XHTML all element must have a closing tag◦ Most web browsers are forgiving about
closing tags, which makes it possible to forget about them
◦ Example <p>Here is paragraph with no ending tag<p>Here is another paragraph</p>
HTML single tagsHTML has a few tags that are
standalone, i.e., no closing tag.
Image: <img src=“imagename.jpg”>
Line break: <br> Link: <link type="text/css”>
◦Used to link/insert a Cascading Style Sheet
XHTML single tagsTo meet XML guidelines HTML single
tags must to closed with a />
1. Image: <img src=“imagename.jpg” />
2. Line break: <br />3. Link: <link type="text/css" />
Note the space before the />
Attributes<element attribute=“value”> content
</element>
XHTML requires that all attribute values be enclosed in quotes.
HTML: <img src=tiger.jpg>XHTML: <img src=“tiger.jpg” />
Forgiving browsers don’t care about the quotes (Follow XHTML; quotes matter to us)
Browsers ignore whitespaceAn XHTML document is an ASCII Text
document.XHTML renderers ignores, tabs, spaces
and line breaks◦ Allows a web designer to format XHTML
code without having an effect on the web page’s rendered appearance.
To render tabs, spaces, and line breaks requires using tags and style sheets.
Basic XHTML document<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Strict//EN…
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title> Title Displays in Browser’s Top Bar </title>
<link type="text/css" href="part5.css" rel="stylesheet"/>
</head>
<body>
Page content here
</body>
</html>
Text Structure (blocks)
<h1>Most Important Header</h1>
<p>A paragraph in the literal sense.</p>
<h2>Sub-heading</h2><h3>Smaller Sub-heading</h3>…<h6>Smallest Sub-heading</h6>
Lists
Ordered Lists (ol) Unordered Lists (ul)
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ol>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
Terms and Definitions
Example Meaning
<dl>
<dt>Coffee</dt>
<dd>black hot drink</dd>
<dt>Milk</dt>
<dd>white cold drink</dd>
</dl>
dl – definition list
dt – definition term
dd – definition description
Used heavily in early HTML documents which were most scientific papers with lost of definitions and terms
Text Formatting (style)
<tt> Teletype text </tt><i> Italic text </i><b> Bold text </b>
<big> Big text </big>
<small> Small text </small>
Text identity (semantic)
<em> Emphasized text </em><strong> Strong text </strong><dfn> Definition term </dfn><code> Computer code text </code><samp> Sample computer code
</samp><kbd> Keyboard text </kbd><var> Variable </var><cite> Citation </cite>
HyperlinksCalled the anchor tag<a
href=“http://www.espn.com”>ESPN</a>
href stands for hypertext referenceWhat is the element name?What is the attribute?What is the attribute’s valueWhat is the content?
Elements we’ll learn about later
Tables
<table><tr><td></td></tr><tr><td></td></tr>
</table>
Forms<form action=“program.php”>
<input type=“text”><input type=“submit”>
</form>
FramesDeprecated!
DeprecationRemoved from the standardMost browsers will still render
deprecated tags◦However, browsers do not have to
according to the standardsDo not use deprecated tags
unless you have no choice
Divisions and SpansDivisions <div> used to break your
webpage into logical blocks or boxesSpans <span> used to create custom
in-line tags, i.e., within the flow of a paragraph of text.
Example: This is paragraph with a table
reference. <span class=“tableref”>Table 2.4</span> is a lovely table.