Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download HTML and CSS
Document related concepts
Transcript
HTML
Background
Stylesheets
HTML and CSS
Web Programming
Uta Priss
ZELL, Ostfalia University
2013
Web Programming
Intro
Slide 1/20
HTML
Background
Stylesheets
Outline
HTML
Background
Stylesheets
Web Programming
Intro
Slide 2/20
HTML
Background
Stylesheets
Example of an HTML document
<html>
<head>
<title>This is a title</title>
<link rel="stylesheet" type="text/css" href="fn.css" />
</head>
<body>
<!-- a simple example of a website -->
<h1>This is a heading</h1>
<a href="http://ostfalia.de">Link to Ostfalia</a>
</body>
</html>
HTML element, attribute, start tag, end tag, empty element,
comment, markup, link, separation of layout and content
Web Programming
Intro
Slide 3/20
HTML
Background
Stylesheets
Elements
<html>
<head>
<title>This is a title</title>
<link rel="stylesheet" type="text/css" href="fn.css" />
</head>
<body>
<!-- a simple example of a website -->
<h1>This is a heading</h1>
<a href="http://ostfalia.de">Link to Ostfalia</a>
</body>
</html>
Web Programming
Intro
Slide 4/20
HTML
Background
Stylesheets
Head and body
<html>
<head>
<title>This is a title</title>
<link rel="stylesheet" type="text/css" href="fn.css" />
</head>
<body>
<!-- a simple example of a website -->
<h1>This is a heading</h1>
<a href="http://ostfalia.de">Link to Ostfalia</a>
</body>
<html>
Web Programming
Intro
Slide 5/20
HTML
Background
Stylesheets
Attributes
<html>
<head>
<title>This is a title</title>
<link rel="stylesheet" type="text/css" href="fn.css" />
</head>
<body>
<!-- a simple example of a website -->
<h1>This is a heading</h1>
<a href="http://ostfalia.de">Link to Ostfalia</a>
</body>
</html>
Web Programming
Intro
Slide 6/20
HTML
Background
Stylesheets
Empty element
<html>
<head>
<title>This is a title</title>
<link rel="stylesheet" type="text/css" href="fn.css" />
</head>
<body>
<!-- a simple example of a website -->
<h1>This is a heading</h1>
<a href="http://ostfalia.de">Link to Ostfalia</a>
</body>
</html>
Web Programming
Intro
Slide 7/20
HTML
Background
Stylesheets
Comment
<html>
<head>
<title>This is a title</title>
<link rel="stylesheet" type="text/css" href="fn.css" />
</head>
<body>
<!-- a simple example of a website -->
<h1>This is a heading</h1>
<a href="http://ostfalia.de">Link to Ostfalia</a>
</body>
</html>
Web Programming
Intro
Slide 8/20
HTML
Background
Stylesheets
Link
<html>
<head>
<title>This is a title</title>
<link rel="stylesheet" type="text/css" href="fn.css" />
</head>
<body>
<!-- a simple example of a website -->
<h1>This is a heading</h1>
<a href="http://ostfalia.de">Link to Ostfalia</a>
</body>
</html>
Web Programming
Intro
Slide 9/20
HTML
Background
Stylesheets
How to open a linked page in a new tab/window:
<a href="url" target=" blank">
Email link:
<a href="mailto:someone@somewhere">
An image:
<img src="image.jpg" alt="description">
Special characters, for example:
ü
Web Programming
Intro
Slide 10/20
HTML
Background
Stylesheets
Which of these is not correct HTML?
<link type=’text/css’ rel="stylesheet" href="fn.css" />
<img src="image.jpg" alt="description"></img>
<html><h3>Heading</h3></html>
<a href="image.gif">Picture</a>
Web Programming
Intro
Slide 11/20
HTML
Background
Stylesheets
History of HTML
Who? When? Where? Why?
Web Programming
Intro
Slide 12/20
HTML
Background
Stylesheets
History of HTML
I
HTML: Hyper Text Markup Language
I
Tim Berners-Lee at CERN (1989)
I
based on SGML
I
November 1995: HTML 2.0
I
World Wide Web Consortium (W3C): 1994
I
in 1997: HTML 3.2 and HTML 4.0
I
in 2000: XHTML
I
2008-2011: HTML5
Web Programming
Intro
Slide 13/20
HTML
Background
I
browser incompatibilities
I
how to edit: source code editors or WYSIWYG editors
I
testing for standards
Web Programming
Intro
Stylesheets
Slide 14/20
HTML
Background
Stylesheets
Layout versus content/meaning
I
How is layout represented in other formats: txt, pdf, Word
documents, databases, xml, LaTeX?
I
What are advantages/disadvantages of separating layout and
content?
I
What are typical layout features?
Web Programming
Intro
Slide 15/20
HTML
Background
Stylesheets
Advantages
I
separation of layout and content
I
consistency across pages of the same site
I
bandwidth
I
useful for accessibility
Web Programming
Intro
Slide 16/20
HTML
Background
Stylesheets
Embedding CSS into an HTML file
<style type="text/css">
body {
color: red;
background-color: #FFFFAA; }
</style>
Web Programming
Intro
Slide 17/20
HTML
Background
Stylesheets
How to invoke a css file
<head>
<link rel="stylesheet" type="text/css" href="fn.css" />
</head>
Web Programming
Intro
Slide 18/20
HTML
Background
Stylesheets
Example of a CSS file
a{text-decoration:underline}
a.blank{text-decoration:none; color:green}
h3 {color:#008888; text-align: center; margin-top: 0.3in;
margin-bottom: 0.3in}
hr {color:#002600; background-color:#002600; height: 3px;}
div.bold {color:#008800; font-weight:bold}
body {background-color: #FFFFAA;}
Used with:
<a class="blank" ... >link</a>
<div class="bold">this is bold</div>
Web Programming
Intro
Slide 19/20
HTML
Background
Stylesheets
Background
I
CSS: Cascading Style Sheets
I
Stylesheet language
I
Can be applied to any kind of XML document
Web Programming
Intro
Slide 20/20
