Assignment 5_3: HTML

Due: Nov 29., beginning of class

HTML Markup: bare bones version

Before you start download your site folder I prepared for you. It contains the Helvetica font files, an icon font and 2 CSS files: "fonts.css" (includes links to font files) and "styles.css" (includes a CSS reset). Use "styles.css" to add your own rules.

The site folder you downloaded has no HTML yet. First open up Dreamweaver, create a new site (top menu SITE > NEW SITE) and browse to the site folder you downloaded. Then create a new HTML document and save it into the main directory (not in one of the existing sub-folders).

The example markup below has the content for the home page. It's structured in a "meaningful" way which simply means that the appropriate tags are used for the sections and the elements (headlines, paragraphs etc.).

HTML markup ("plain"):


<!DOCTYPE html>  <br />
<html lang="en"><br />
<br />
<head><br />
<title>UIC buildings at Open House Chicago</title><br />
</head><br />
        <br />
<body><br />
<br />
<br />
<header><br />
	<img src="images/uic-dark.png" width="90" height="90" alt=""/><br />
	<img src="images/open-house-light.png" width="552" height="60" alt=""/> <br />
</header><br />
<br />
	<br />
<nav><br />
	<ul><br />
		<li><a href="bsb.html">Behavioral Sciences Building</a></li><br />
		<li><a href="cmw.html">College of Medicine West</a></li><br />
		<li><a href="uvh.html">University Hall</a></li><br />
	</ul> <br />
</nav>	<br />
<br />
	<br />
<section><br />
	<h1>UIC buildings at Open House Chicago </h1><br />
	<br />
	<p>Date: Sat, Oct 15, Sun, Oct 16 </p><br />
	<br />
	<p>The Chicago Architecture Foundation’s Open House Chicago is a free public festival that offers behind-the-scenes access to more than 200 buildings across Chicago.</p><br />
	<br />
	<p>Explore the hidden gems and architectural treasures of Chicago’s diverse neighborhoods—all for free.</p><br />
	<br />
	<p>3 UIC buildings are featured in this year's festival:</p><br />
	<br />
	<ul><br />
		<li><a href="bsb.html">Behavioral Sciences Building</a></li><br />
		<li><a href="cmw.html">College of Medicine West</a></li><br />
		<li><a href="uvh.html">University Hall</a></li><br />
	</ul>		<br />
</section><br />
	<br />
	<br />
<footer><br />
	<img src="images/uic-dark.png" width="90" height="90" alt=""/><br />
	<ul><br />
		<li><a href="#">facebook</a></li><br />
		<li><a href="#">twitter</a></li><br />
		<li><a href="#">instagram</a></li><br />
		<li><a href="#">youtube</a></li><br />
		<li><a href="#">twitter</a></li><br />
	</ul><br />
</footer>	<br />
		<br />
		<br />
</body><br />
</html>

result in browser:

HTML Head Markup with CSS links and viewport tag (for mobile devices)

Example HTML code:


<head><br />
<title>UIC buildings at Open House Chicago</title><br />
<!--The viewport meta tag to turn off auto-zoom on mobile devices: -->       <br />
<meta name="viewport" content="width=device-width, initial-scale=1.0"><br />
<link href="css/styles.css" rel="stylesheet" type="text/css" />        <br />
<link href="css/fonts.css" rel="stylesheet" type="text/css" />         <br />
</head>

Since the linked CSS already has a "reset" in in it'll eliminate some browser default styles such as font sizes.

HTML Markup: with added DIVs (for container and grid columns)

Next step is to add div elements to the HTML code in order to be able to position them. The horizontal sections are already in place for Header, Main Section and Footer. Now we need to divide the layout vertically into columns using DIVs.

Example:

In the example below each blue box is a div. As you can see there are a few empty divs the layout can be built without them but lets add them for stability.

HTML code for the above example

Add a so called "non breaking space" in each div that's empty.

HTML Markup (version 2):


<!DOCTYPE html>  <br />
<html lang="en"><br />
<meta charset="UTF-8"><br />
<br />
<head><br />
<title>UIC buildings at Open House Chicago</title><br />
<!--The viewport meta tag to turn off auto-zoom on mobile devices: -->       <br />
<meta name="viewport" content="width=device-width, initial-scale=1.0"><br />
<link href="css/styles.css" rel="stylesheet" type="text/css" />        <br />
<link href="css/fonts.css" rel="stylesheet" type="text/css" />         <br />
</head><br />
       <br />
        <br />
<body class="home"><br />
<br />
<div class="container"><br />
<br />
<br />
<header class="cf"><br />
<br />
	<div class="logos"><br />
	<div class="logo-1"><img src="images/uic-light.png" width="90" height="90" alt=""/></div><br />
	<div class="logo-2"><img src="images/open-house-light.png" width="552" height="60" alt=""/></div><br />
	</div><br />
	<br />
	<nav><br />
	<ul><br />
		<li><a href="bsb.html">Behavioral Sciences Building</a></li><br />
		<li><a href="cmw.html">College of Medicine West</a></li><br />
		<li><a href="uvh.html">University Hall</a></li><br />
	</ul> <br />
	</nav>	<br />
	 <br />
</header><br />
<br />
	<br />
	<br />
<section><br />
<br />
	<!--row 1:--><br />
	<div class="headline-left"><br />
	<h1>UIC buildings<br> at Open House Chicago </h1><br />
	</div><br />
	<div class="headline-right">&nbsp;</div><br />
	<div class="clear"></div><br />
	<br />
	<!--row 2:--><br />
	<div class="home-text-left">&nbsp;</div><br />
	<div class="home-text-right"><br />
	<p class="intro">The Chicago Architecture Foundation’s Open House Chicago is a free public festival that offers behind-the-scenes access to more than 200 buildings across Chicago.</p><br />
	</div><br />
	<div class="clear"></div><br />
	<br />
	<!--row 3:--><br />
	<div class="home-note-left">&nbsp;</div><br />
	<div class="home-note-right"><br />
	<p>Explore the hidden gems and architectural treasures of Chicago’s diverse neighborhoods—all for free.</p><br />
	</div><br />
	<div class="clear"></div><br />
	<br />
	<!--row 4:--><br />
	<div class="image2-left"></div><br />
	<div class="image2-right">&nbsp;</div><br />
	<div class="clear"></div><br />
	<br />
	<!--row 5:--><br />
	<div class="link-text"><br />
	<p>3 UIC buildings are featured in this year's festival:</p><br />
	</div><br />
	<div class="link-list"><br />
	<ul><br />
		<li><a href="bsb.html">Behavioral Sciences Building</a></li><br />
		<li><a href="cmw.html">College of Medicine West</a></li><br />
		<li><a href="uvh.html">University Hall</a></li><br />
	</ul><br />
	</div><br />
	<div class="home-date"><br />
	<p>Date: Sat, Oct 15 <br>Sun, Oct 16 </p>	<br />
	</div><br />
	<div class="clear"></div><br />
	<br />
	<!--row 6:--><br />
	<div class="image3-left">&nbsp;</div><br />
	<div class="image3-right"></div><br />
	<div class="clear"></div>	<br />
		<br />
</section><br />
<br />
	<br />
	<br />
<footer><br />
<br />
	<div class="uic-logo"><br />
	<img src="images/uic-light.png" width="90" height="90" alt=""/><br />
	</div><br />
	<br />
	<div class="social"><br />
	<ul><br />
		<li><a href="#"><i class="fa fa-facebook-official"></i></a></li><br />
		<li><a href="#"><i class="fa fa-twitter"></i></a></li><br />
		<li><a href="#"><i class="fa fa-instagram"></i></a></li><br />
		<li><a href="#"><i class="fa fa-youtube"></i></a></li><br />
		<li><a href="#"><i class="fa fa-tumblr"></i></a></li><br />
	</ul><br />
	</div><br />
	<br />
</footer>	<br />
		<br />
<br />
</div><!-- end of container --><br />
</body><br />
</html>

Course

Assignments