980px

HCDE532 » The Basics of HTML & CSS

In the 1990s, early versions of HTML mixed content and presentation in the same file. In 1997, HTML 4 recommended against mixing presentation with content. Today, clean separation of content (HTML) and presentation (CSS) is strongly recommended.

What Is XHTML?

  • XHTML stands for EXtensible HyperText Markup Language
  • XHTML is almost identical to HTML 4.01
  • XHTML is a stricter and cleaner version of HTML
  • XHTML is HTML defined as an XML application
  • XHTML is a W3C Recommendation

See Also: XHTML | W3 Schools

XHTML Syntax Rules

  • Attribute names must be in lower case
  • Attribute values must be quoted
  • Attribute minimization is forbidden
  • The XHTML DTD defines mandatory elements

Structure of an XHTML File

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!-- tells the browser what markup language is being used -->
<html xmlns="http://www.w3.org/1999/xhtml"><!-- begin contents of the web page -->
<head><!-- begin information about the web page -->
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /><!-- tells the browser what content type is being used -->
<title>Premium Design Works</title><!-- the page title -->
<link rel="stylesheet" href="styles.css" type="text/css" media="all" /><!-- link to stylesheet -->
</head><!-- end information about the web page -->
<body><!-- begin visible page content -->
<h1>Premium Design Works</h1><!-- displayed as a level 1 heading -->
<p>Premium Design Works is a small design and development group in Seattle, Washington. We specialize in handling the visual communication needs of your business, organization or artistic endeavor.</p> <!-- displayed as a paragraph -->
<h2>About Us</h2><!-- displayed as a level 2 heading -->
<p>For over ten years now, Premium Design Works has been helping local Seattle businesses, non-profit organizations and artists succeed in their marketplace by effectively presenting their message to their audience.</p>
<p>We do this by being a part of the local business and artistic community ourselves and by utilizing the same communication tools we share with you to compete in our visual and technology driven lifestyle.
<h2>Our Services</h2>
<p>Premium Design Works understands that visual communication services play an instrumental role in achieving the business goals of your company. We understand that you are investing in us and are expecting a return on that investment.</p>
<p>We offer the following services:</p>
<ul> <!-- displayed as an unordered list -->
<li>Brand Strategy</li><!-- displayed as a list item -->
<li>Graphic Design</li>
<li>Web Development</li>
<li>Search Engine Visibility</li>
</ul>
<h2>Contact Us</h2>
<p>13612 14th Avenue South<br />Burien, Washington 98168</p>
<p>206.851.7636</p>
<p><i><a href="mailto:msinkula@premiumdw.com">msinkula@premiumdw.com &gt;&gt;</a></i></p>
</body><!-- end visible page content -->
</html><!-- end contents of the web page -->

View: Bio Page Two | Premium Design Works

Code: https://github.com/msinkula/bio-page-two/blob/master/index.html

The !DOCTYPE

Doctypes are the web authors way of declaring to the browser what standards they are adhering.

Doctypes are placed at the top of an HTML page:

Select Code
1
2

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

Tags

The HTML tag is what tells the browser to expect HTML—meaning that this document that you are writing will be able to viewed in a browser when previewing or posted to the web.

  • The <head> tag calls out the portion of your HTML page that will contain the header information of your page – meta data information, title of your page, etc.
  • You write the text of your page’s title between the opening and closing <title> tags
  • The <meta> tag tells the browser which character set we will be using
  • The <body> tag calls out the portion of your HTML page that will be rendered to or viewed within the browser
  • An <h1> tag is our main headline and an <h2> tag is our sub headline
  • A <p> is the paragraph tag

See Also: HTML Tag List | W3 Schools

Introduction to HTML5

HTML5 is the fifth revision of the HTML. Its core aims have been to improve the language with support for the latest multimedia while keeping it easily readable by humans and consistently understood by computers and devices (web browsers, parsers, etc.). HTML5 is intended to subsume not only HTML 4, but XHTML 1 and DOM Level 2 HTML as well.

See Also: HTML HOME | W3 Schools

HTML5 is also a potential candidate for cross-platform mobile applications. Many features of HTML5 have been built with the consideration of being able to run on low-powered devices such as smartphones and tablets.

The Anatomy of an HTML5 Document

Lets take a look at the first couple of changes from XHTML to HTML5:

Select Code
1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html><!-- tells the browser what markup language is being used -->
<html><!-- begin contents of the web page -->
<head><!-- begin information about the web page -->
<meta charset="utf-8" /><!-- tells the browser what content type is being used -->
<title>Title of the document</title><!-- the page title -->
<link rel="stylesheet" href="styles.css" type="text/css" media="all" /><!-- link to stylesheet -->
</head><!-- end information about the web page -->
<body><!-- begin visible page content -->
<p>Hello World!</p><!-- page content -->
</body><!-- end visible page content -->
</html><!-- end contents of the web page -->
  • the doctype is much simpler
  • the character encoding is much shorter

Example: https://github.com/msinkula/HCDE598/blob/master/multiple-pages-for-your-website/template.html

What Is CSS?

  • CSS stands for Cascading Style Sheets
  • Styles define how to display HTML elements
  • Styles were added to HTML 4.0 to solve a problem
  • External Style Sheets can save a lot of work
  • External Style Sheets are stored in CSS files

An HTML document can be displayed with different styles: See how it works

See Also: CSS Introduction | W3 Schools

Structure of a CSS File

Select Code
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

* { margin: 0; padding: 0; border: 0; }

body { /* CSS Selector */
background-color:#FFFFFF; /* CSS Rule */
font-family: Arial, Helvetica, sans-serif;
color: #000;
}

h1 {
width: 500px;
margin-top: 25px;
margin-right: 0px;
margin-bottom: 20px;
margin-left: 50px;
border-bottom: 1px solid #85898A;
}

h2 {
width: 500px;
font-size: 21px;
line-height: 21px;
font-style: normal;
padding-top: 8px;
margin-right: 0px;
margin-bottom: 2px;
margin-left: 50px;
}

p {
width: 500px;
font-size: 14px;
line-height: 21px;
letter-spacing: 0px;
text-align: justify;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 50px;
}

ul {
width: 500px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 10px;
margin-left: 50px;
}

li {
font-size: 14px;
line-height: 21px;
letter-spacing: 0px;
margin-left: 20px;
}

a {
color:#000;
text-decoration: underline;
}

a:hover {
color:#F20017;
text-decoration: none;
}

Example: https://github.com/msinkula/HCDE598/blob/master/multiple-pages-for-your-website/styles.css

This portion of the Premium Design Works website is written by Mike Sinkula for the Web Design & Development students at Seattle Central College and the Human Centered Design & Engineering students at the University of Washington.

Leave a Comment:

Don't forget to get your Globally Recognized Avatar.

css.php