01 HTML5 Template

Posted on by

Select all the text and paste into blank text editor document. Template 1 contains most used HTML5 elements. Template 2 does not. Text is at 25% so it can be easily copied. Make sure you copy all of the text.

Template 1

<!DOCTYPE html>
<html lang="en"> 
<head>
<meta charset="utf-8">
<title>title</title>
<!-- Sets viewport to the device screen size -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--Link an external style sheet-->
<link href="css/styles.css" rel="stylesheet">
<style> 
	main { max-width: 1500px; }
	section { max-width: 1000px; margin: 10px auto; padding: 0 20px; }
	img {width: 100%}
	figure {width: 25%; margin: auto;}
/* Overrides desktop style when viewport is less than 600px (for smart phones) */
@media only screen and (max-width: 600px) {
    
}
</style>
</head>
<!-- body -->
<body>
<main>
<section>
	<header>
		<h1>Heading 1</h1>
		<nav>		
			<ul>
				<li>
					<a href="#">
						navigation as unordered list item
					</a>
			</ul>		
		</nav>	
	</header>	
	<article>
		<h2>Heading 2</h2>
		<p>The <strong>template</strong> contains <em>most used</em> HTML5 elements. Replace this text with the content written for the first assignment. Notice that there is no closing tag for this paragraph or for the list item in the navigation above.
		<figure>
			<img src="http://b.parsons.edu/~dejongo/12-fall/stuff/01-blocks.gif" alt="blocks" >
			<figcaption>Blocks. The figure tag make adding a caption below the picture possible. The picture tag makes multiple pictures possible, and places the img, an inline element, in a block element. </figcaption>
		</figure>
	</article>	
	<footer>
		<hr>
		<p>Resources
		<ul>
			<li> HTML <a href="http://b.parsons.edu/~dejongo/01-writing-html5/#inline_elements"  >inline</a> and <a href="http://b.parsons.edu/~dejongo/01-writing-html5/#block_elements"  >block</a> elements. 
			<li> Writing <a href="http://b.parsons.edu/~dejongo/03-the-mechanics-of-css/" >CSS</a>, <a href="http://b.parsons.edu/~dejongo/03-applying-css/"  >examples</a>, <a href="http://b.parsons.edu/~dejongo/04-the-layout-modes/" >layout</a> and <a href="http://b.parsons.edu/~dejongo/05-styling-the-navigation/" > styling the navigation</a> 
			<li><a href="https://validator.w3.org" >Validate your page</a>
			<li><a href="https://web.dev/measure/" >Page quality audit</a>
		</ul>
	</footer>
</section>
</main>
</body>	

</html>

Template 2

<!DOCTYPE html>
<html lang="en"> 
<head>
<meta charset="utf-8">
<title>title</title>
<!-- Sets viewport to the device screen size -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--Link an external style sheet-->
<link href="css/styles.css" rel="stylesheet">
<style> 
/* Overrides desktop style when viewport is less than 600px (for smart phones) */
@media only screen and (max-width: 600px) {
    
}
</style>
</head>
<body>
</body>	

</html>

Leave a Reply