980px

See Also:

1. Division Tags

Where <div> is short for division, are the basic tags you will use to group your content into logical components:

Select Code
1
2
3
4
5
<!-- Begin Header -->
<div id="header">
<h1 id="logo"><a href="index.html"><img src="images/logo.png" alt="Mike Sinkula's Website" /></a></h1>
</div>
<!-- End Header -->

2. Identifications

ID’s are the means to control each <div> tag of logical components via the style, selected by the # sign:

Select Code
1
2
3
4
5
6
7
8
9
10
11
#header {
width: 500px;
height: 50px;
margin-top: 50px;
margin-bottom: 10px;
margin-left: 50px;
}

#logo {
font-size: 32px;
}

ID’s are used:

HTML5 Document Section Elements

As well as the first couple of changes, HTML5 has introduced a whole new list of document section elements:

See Also:

1. Header

The <header> tag specifies a header for a document or section:

Select Code
1
2
3
4
5
6
7
8
9
10
<!-- Begin Header -->
<header>
<!-- Begin Logo -->
<h1 id="logo"><a href="index.php">mike<strong>sinkula</strong></a></h1>
<!-- End Logo -->

<?php include ('includes/navigation.php'); ?>

</header>
<!-- End Header -->

See Also: HTML5 Header Tag | W3 Schools

2. Navigation

The <nav> tag defines a section of navigation links:

Select Code
1
2
3
4
5
6
7
8
9
10
<!-- Begin Navigation -->
<nav>
<ul>
<li><a href="biography.php">Biography</a></li>
<li><a href="education.php">Education</a></li>
<li><a href="experience.php">Experience</a></li>
<li><a href="skills.php">Skills</a></li>
</ul>
</nav>
<!-- End Navigation -->

See Also: HTML5 Navigation Tag | W3 Schools

3. Article

The <article> tag specifies independent, self-contained content:

Select Code
1
2
3
4
5
6
7
<!-- Begin Content Article -->
<article>
<figure><img src="images/img-myface.png" alt="My Face"><figcaption><small>I dare you to read my <a href="http://www.mikesinkula.com/" target="_blank">blog</a>.</figcaption></small></figure>
<p><a href="http://www.mikesinkula.com/" target="_blank">Mike Sinkula</a> grew up in Southern California and went on to earn a Bachelor of Arts in <a href="http://www.csuchico.edu/cdes/" target="_blank">Communication Design</a> from <a href="http://www.csuchico.edu/" target="_blank">California State University at Chico</a> in 1993.</p>
<p>Early in 1994 Mike came to Seattle to work in its booming graphic design industry. He went on to work for a few years in the corporate sector of Seattle for such companies as <a href="http://www.nintendo.com/" target="_blank">Nintendo of America</a> and Sierra On-line designing and producing artwork for “Nintendo Power” and “Interaction” Magazine.</p>
</article>
<!-- End Content Article -->

See Also: HTML5 Article Tag | W3 Schools

4. Aside

The <aside> tag defines some content aside from the content it is placed in:

Select Code
1
2
3
4
5
6
7
8
<!-- Begin Content Aside -->
<aside>
<ul>
<li><strong>email:</strong> <a title="mailto:mike@mikeinkula.com" href="mailto:mike@mikeinkula.com">mike@mikeinkula.com</a>
<li><strong>blog:</strong> <a title="Mike Sinkula's Blog" href="http://www.mikesinkula.com/" target="_blank">http://www.mikesinkula.com/</a>
</ul>
</aside>
<!-- End Content Aside -->

See Also: HTML5 Aside Tag | W3 Schools

5. Footer

The <footer> tag defines a footer for a document or section:

Select Code
1
2
3
4
5
<!-- Begin Footer -->
<footer>
<p><?php echo ("&copy;" . date ('Y') . " "); ?><a title="http://www.mikesinkula.com" href="http://www.mikesinkula.com">Mike Sinkula</a>. All rights reserved.</p>
</footer>
<!-- End Footer -->

See Also: HTML5 Footer Tag | W3 Schools

 

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