HTML and CSS Reference
In-Depth Information
the company logo exist, all beginning with the prefix
logo-,
which keeps them together alphabetically. As a website
grows, using naming conventions such as these makes finding your files quicker.
Of course, these are only my personal preferences; you may like to use different naming conventions or folder struc-
tures that work better for you.
Understanding the HTML Template
The web page template (index.html) is written in HTML5. Because you will build on and style one page in
CSS3
Foundations
, links to other pages are only included to represent and demonstrate a real-world web page.
href
links
are given the value
#
, which means the page only refers to itself. Should you wish to add more pages in the future,
feel free to change the links.index.html in all of its glory:
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”utf-8” />
<title>Cool Shoes & Socks</title>
<!--[if lt IE 9]>
<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>
<![endif]-->
</head>
<body>
<header id=”header” class=”group” role=”banner”>
<a href=”#” title=”Return to the front page”>
<img class=”logo” src=”images/logo.png” alt=”Cool Shoes & Socks”
/>
</a>
<nav role=”navigation”>
<ul>
<li>
<a href=”#” title=”Return to the front page”>Home</a>
</li>
<li>
<a href=”#” title=”About Company Name”>About</a>
</li>
<li class=”products”>
<a href=”#” title=”Visit our shop”>Shop</a>
</li>
<li>
<a href=”#” title=”Contact us”>Contact</a>
</li>
</ul>
</nav>
</header>
<div class=”showcase”>
<img src=”images/banner-trainers.jpg” alt=”Some of our cool trainers” />
<a class=”button purchase” href=”#” title=”Purchase product”>
More Information
</a>
