980px
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.

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 -->

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

What Is CSS?

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