HTML Setup

The first thing we want to do is get an idea for what we want for our website. We want a quick easy page to relay information. It will have a logo on the top, area on the left for instructions, an area on the right for a quick navigation guide, and a footer on the bottom for contact information.

There are two main parts of a website, the Head and the Body. We will want to write the code below. Each tag is named and placed inside brackets ‹ › and closed with similar bracket with a slash ‹/›. This is done so that we can use our CSS to change the appearance of the sections and the elements within.

We will go over the CSS styling at a later date, but the code is availabe on the CSS page to view ahead of time if you would like.

‹!DOCTYPE html›
‹html›
‹head›
‹/head›
‹body›
	‹header›
	‹/header›
	‹main›
		‹content›
		‹/content›
		‹navigation›
		‹/navigation›
	‹/main›
‹/body›
‹/html›
			

HEAD Section

The head section contains metadata, like the document’s title, character set, and linked resources.

‹meta charset="utf-8"/›
‹title›Culligan Demonstration‹/title›
‹meta name="viewport" content="width=device-width, initial-scale=1.0"/›
‹link rel="stylesheet" type="text/css" href="assets/culligan.css"/›
			

• ‘meta’ — a meta tag is an HTML code snippet in a webpage's head section that provides data about the page (metadata) to browsers, search engines, and other web services, rather than being displayed to users
• charset — a standardized collection of characters (letters, numbers, symbols) and their assigned numeric codes, acting as a "dictionary" for computers to understand text, with common examples like ASCII and the universal Unicode (UTF-8)
• title — Sets the title of the webpage, shown on browser tabs and search engine results.
• link — connecting the HTML document to external resources like stylesheets (CSS) or icons (favicon) within the head section
• rel — defines the connection between the current document and a linked resource
• type — a mechanism for identifying data types, especially at runtime

BODY Section

The body section of our website will convey the most information and the changing information of the website. While the header and the footer will remain generally the same, different content will fill the content section of our website, depending on what the end user is looking for. Our body is made up of a Header and Main section, with Content and Nav, and the Footer.

Header

The Header is where we are going to put our brand information, in this case the Culligan logo. We will insert an ‹img› tag. Inside the image tag, we will locate the logo inside our assets folder and link that logo with a src value and also designate an alt value, so that the image is described to people who cannot see and are using the internet with a screen reader.

You may notice that the ‹img› tag does not have an open ‹ › and close ‹/› like other tags, but a short cut closed tag. The tag alone is ‹img/›

‹header›
		‹img src="assets/logo.png" alt="Culligan 'C' logo" /›
‹/header›
			

Main

Our main section houses two parts, the Content and the Nav.

‹main›
	‹content›
	‹/content›
	‹navigation›
	‹/navigation›
‹/main›
			

Content

The content section on each page will change with the subject matter of the page. This page's content is dedicated to explaining how to make the website and showing you the code for the website.

We have three stylized headings available for content. The tags for the headings are ‹h1›, ‹h2›and ‹h3›.

These heading tags having different sizes, colors and indenting to help organize content on a page. They also need to have an open and a close.

The paragraphs containing our copy are contained in ‹p› elements.

‹content›
	‹h1› This is Heading 1. (HTML Setup, HEAD Section, and BODY Section titles on this page)
	‹/h1›
	‹p› This is where our paragraph copy goes.
	‹/p›
		‹ul› This is the unordered list. 
			‹li›This is a list item.
			‹/li›
		‹/ul›
	‹h2›This is Heading 2 (Header, Content and Footer titles on this page)
	‹/h2›
	‹h3›This is Heading 3 (Content and Nav titles on this page.)
	‹/h3›
‹/content›
			

Nav

The Quick Navigation is how the user will move around the web site. In this case, we have three pages on our website. The HTML Pages, CSS and Glossary pages. Each one is linked with an ‹a› and pointing to a created web page in the ‹href› tag.

‹nav›
	‹h1›Quick Navigation‹/h1›
		‹ul›
			‹li›‹a href="index.htm"›HTML Pages‹/a›‹/li›
			‹li›‹a href="css.htm"›CSS‹/a›‹/li›
			‹li›‹a href="glossary.htm"›Glossary‹/a›‹/li›
		‹/ul›
‹/nav›	
			

Footer

‹footer›
‹p› ‹/p›
‹/footer›