Ok, let’s get to work.
The first thing we want to do is get a simple webpage up to represent our car dealership. Here we are tending to the first part of our design goal, creating the structure of our webpage.
You can download the completed version of fredscars.html for this module with the completed HTML here.
And see it work here.
Create the html file.
For the first step, create a folder where you are going to keep all your development files. I like to name mine simply, “Development”. Then under the Development folder create a subfolder called FredsCars. Under FredsCars create a directory called HTML. And finally in the HTML directory create a directory called Chapter01Mod3. Now create a text file named, “FredsCars.html” in the Chapter01Mod3 folder. FredsCars.html should have the following pathway:
C:\Development\FredsCars\HTML\Chapter01Mod3\FredsCars.html
I put HTML in the pathway because in later parts of the book we will build FredsCars in other technologies such as MVC, Razor, and Angular.
So the pathway for FredsCars built in MVC might look like this:
C:\Development\FredsCars\MVC\FredsCars\FredsCars.sln.
Directory Structure for FredsCars development files.
Now as we move through the modules of the chapter you can copy the code from the previous module to each new module’s folder so if you mess up you can just delete it and copy over from the previous module again to start over.
A Three Minute Page
Fire up your favorite text editor and open up the file you just created named FredsCars.html. And if you don’t have a favorite you can use notepad or download textpad.
Type the following text into your editor and save your file.
<html>
<head>
<title>Fred's Cars, Trucks & Jeeps</title>
</head>
<body>
<h1>Welcome to Fred's Cars!</h1>
Thank you for visiting our site.
</body>
</html>
Open up “FredsCars.html” in your browser and you should see something similar to the following.
It’s that easy. What did that take us? Three minutes? And we already have an html page up and running. It may not look like much but it is a good starting point and it is a good place to stop and explain the main structure of an html page.
HTML Tags and Elements explained
The bare-bones structure of an HTML page actually looks like this:
Bare-bones structure of an html document.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>HTML is made up of elements called tags. Each tag starts with a ‘<‘ character and ends with a ‘>’ character.
So this portion, which is the html tag:
<html></html>tells the browser that this is an html document and marks the beginning and end of the html element. An element is an object such as the html element or the body element that the tag represents in the browser. The browser keeps track of all these elements represented by tags in something called the DOM (Document Object Model). We’ll be able to access these elements in the DOM with JavaScript a little later in the tutorial.
Notice the second part of the html tag at the end of the document has an extra character in it. The ‘/’ character. Most elements require a start tag and an end tag. A start tag looks like this:
<html>And an end tag with the ‘/’ character looks like this:
</html>So together:
<html></html>tells the document that this is an html element and marks the beginning and end of the document. This is a container type tag and it will contain our head and body sections. Container tags are the types of tags that require an end tag with the ‘/’ character.
Empty tags, unlike container tags, do not require the end tag.
Examples of empty tags are:
Horizontal rule:
<hr>Line Break:
<br>And the Input tag.
<input />Empty tags did not used to require the ‘/’ character. But newer standards of html require the ‘/’ character before the closing ‘>’ character. You’re browser will probably understand empty tags without the ‘/’ character, but you should probably use it if you can remember to. You can see examples of both above. Old timer developers are sometimes more lax with hr and br tags since we’ve been using them for so long it’s just habit. But you should not copy my bad habits and try to remember to use the proper syntax. Otherwise some tools that use XML under the hood or try to parse your code and expect the ‘/’ char may not work properly.
Give the webpage a title and add a comment
Now that we know what HTML tags and elements are, let’s start over and replace the contents of fredscars.html with the bare-bones html template above we just looked at.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>Save your file and refresh your browser and this is what the webpage should look like now. Just an empty window.
Look at the title tab in the browser. Since we did not give the document a title or any content, it simply reflects the html of the document in the browser tab where the title should be.
Let’s fix this by adding a title.
Let’s add back in the contents of our title tag and add a comment placeholder for the contents of the body. Modify the contents of fredscars.html with the changes shown below in blue.
<html>
<head>
<title>Fred's Cars, Trucks & Jeeps</title>
</head>
<body>
<!-- TODO: Add some content to the body -->
</body>
</html>
In a bare-bones html template, the <head> tag holds the <title> and <meta> tags.
Meta tags hold meta information about the html document like a description of the document or keywords that search engines can use. We don’t need any meta tags yet.
Here we have given our webpage document the title, “Fred’s Cars, Trucks & Jeeps”. And within the <body> tag put a TODO comment as a place holder for the body’s content. This is the syntax for an HTML comment. HTML comments start with ‘<!--‘ and end with ‘-->‘. Programmers use comments a lot to document code that may not be self describing or that is more complicated then usual. I use them to tell my self what I am doing so when I look back it will jog my memory as to what I was trying to do. We also can use them to hold TODO items to remind us to come back and do something. Here I’ve reminded myself to come back and add some content to the body.
If you save this code and refresh your browser, you should now see a title in the Title Bar of the browser:
Notice you do not see the comment, “<!– TODO: Add some content to the body –>”.
This is because comments are ignored by the browser. Anything you place in a comment will not be shown in the content.
Add a welcome message to our landing page
Finally, let’s add back in our placeholder welcome message that we had in the beginning.
Make the changes shown below to fredscars.html and refresh your browser:
<html>
<head>
<title>Freds Cars, Trucks & Jeeps</title>
</head>
<body>
<h1>Welcome to Fred's Cars!</h1>
Thank you for visiting our site.
</body>
</html>
Now we should be back to our three minute page.
The <body> tag is another container type element and it holds the actual contents of the html document. In the previous step we added a heading tag with the contents, “Welcome to Fred’s Cars!”. The heading tag looks like this:
<h1>My Heading</h1>The heading tag is a container type element with an opening and closing tag and nested contents but it is also a block type element as opposed to an inline element. This is why the text, “Thank you for visiting our site!” is pushed down to the next line without the need for a line break or a <br /> tag.
Heading tags help add structure to the contents of your document. Like a newspaper article, you have different sized headings in HTML to help distinguish what level you are at in the content. HTML has six levels of headings. <h1>, <h2>, <h3> and so on.
Define the common areas of our site
Most websites have a header and footer that show up on all the pages of the site. In the sections that follow we will start to add in some of these areas and make our page start to look more like a real website.
Header, Footer, Body
Header
Now we are going to add a simple header, or banner, to our webpage. Modify the contents of fredscars.html with the contents shown below, save your file, and refresh the browser.
<html>
<head>
<title>Fred's Cars, Trucks & Jeeps</title>
</head>
<body>
<header>
Fred's Cars, Trucks & Jeeps
</header>
<h1>Welcome to Fred's Cars!</h1>
Thank you for visiting our site.
</body>
</html>
The result should look similar to the following:
Now we have some text on the top of the webpage that says, “Fred’s Cars, Trucks & Jeeps”. Well I don’t know about you, but this doesn’t look much like a header to me even though we’ve used a <header> tag to wrap the the text in. Let’s fix that real quick. Modify the contents of FredsCars.html with the updated code below, save your file and refresh your browser.
<html>
<head>
<title>Freds Cars, Trucks & Jeeps</title>
<style>
body{
margin: 0;
}
header{
padding: 5px;
background-color: black;
color: white;
text-align: center;
font-size: 16pt;
font-weight: bold;
font-family: arial;
}
</style>
</head>
<body>
<header>
Fred's Cars, Trucks & Jeeps
</header>
<h1>Welcome to Fred's Cars!</h1>
Thank you for visiting our site.
</body>
</html>
Your webpage should look similar to the following:
That’s better. We now have a nice banner across the top of our webpage with a black background and white text for nice contrast and we have made the text bolder and more pronounced.
Let’s look at the code we’ve added in the last two modifications.
First, we added the <header> tag. The header tag of course wraps our header or banner accross the top of our page. But only because we placed the header at the top of the html document. We could have used a div tag instead of a header tag and gotten the same result:
<div>
Fred's Cars, Trucks & Jeeps
</div>A div tag is just a block type tag for holding content. Block elements automatically start on a new line and push other content down a line. This is the opposite of inline elements which flow within the rest of the content. Inline elements don’t start a new line or push other content to the next line. HTML 5 provides more descriptive block type elements then <div> for holding content such as <article> and <header>. Here we used header instead of div to more clearly express the structure of our webpage.
Next we added a <style> tag.
The style element is used to hold CSS (Cascading Style Sheets) styling properties that we apply to elements on the webpage.
The first portion within the style tag targets the body tag and sets the margins in the body to 0.
body{
margin: 0;
}Without this there would be space to the left, right, and top of our black banner and it would not look as nice. Go ahead and comment out the margin setting like this:
body{
/* margin: 0; */
}This is how we make a comment in css. With the ‘/*’ characters to start, then the comment portion, then the closing ‘*/’ characters. This is similar to the
<!-- comment -->comments in html and is the multi-line comment syntax.
Save the file, refresh your browser and this is what you’ll see:
Now uncomment the margin property in the css by removing the ‘/*’ and ‘*/’ characters to return the webpage to our current state.
The second portion targets the header element and sets some appearance properties:
header{
padding: 5;
background-color: black;
color: white;
text-align: center;
font-size: 16pt;
font-weight: bold;
font-family: arial;
}This is pretty self-descriptive. We put 5 pixels of space between the borders of the header element and it contents, “Fred’s Cars, Trucks & Jeeps”. Otherwise the text would be pretty squished between the top and bottom of the black background. Why don’t you comment out the padding property and see for yourself.
We also set the background color of the header to black, the text to white using the color property, centered the text, and set the text to an Arial, bold, 16 point font.
Footer
Let’s create a simple footer. Contact information is commonly found in the footer of a website. So let’s start with that. Modify the contents of your fredscars.html with the code below and refresh you browser.
<html>
<head>
<title>Fred's Cars, Trucks & Jeeps</title>
<style>
body{
margin: 0;
}
header{
padding:5;
background-color:black;
color: white;
text-align:center;
font-size: 16pt;
font-weight: bold;
font-family: arial;
}
</style>
</head>
<body>
<header>
Fred's Cars, Trucks & Jeeps
</header>
<h1>Welcome to Freds Cars!</h1>
Thank you for visiting our site.
<footer style="background-color:black;
color: white;
text-align:center">
Contact us: (555)555-5555<br />
121 Fredway St.<br />
Cartown USA
</footer>
</body>
</html>Your browser should look similar to the following:
Let’s examine the new code. The <footer> element obviously expresses that we think of this piece of content as the footer of our webpage. But again, like the header, it only comes last because we put it last. And we could have used a <div> element and gotten the same visual result. But it’s good practice to use the more concise elements that HTML 5 provides.
Also, this time instead of targeting the styling of the footer element from within the <style> tag like we did for the header, we used an inline style:
<footer style="background-color: black;
color: white;
text-align: center">
Contact us: (555)555-5555<br />
121 Fredway St.<br />
Cartown USA
</footer>Here we placed a style attribute on the footer tag and assigned to it a list of css properties targeting itself and the contents it contains. Again we made the background black, the color of the text white, and centered the text.
Finally, notice the <br /> elements we used. These are line-breaks and they push the content that follows to the next line.
White on black for the header and footer and black on white for the content is always a slick look for websites. Sometimes less is more. But there is still something wrong. Something seems unfinished. The footer is not at the bottom of the screen. It’s only pushed one line down from the ending of the main content. And there is a bunch of whitespace below the footer.
Make that footer sticky
We are going to fix this problem with a “Sticky Footer”.
In order to create a sticky footer, we need to add a “spacer” using a <div> tag between the content and the footer that can automatically grow depending on the size of the content area.
Modify the contents of your fredscars.html file with the code below, save your file and refresh your browser:
<html>
<head>
<title>Fred's Cars, Trucks & Jeeps</title>
<style>
body{
margin: 0;
display: flex;
flex-direction: column;
min-height: 100vh;
}
header{
padding:5;
background-color:black;
color: white;
text-align:center;
font-size: 16pt;
font-weight: bold;
font-family: arial;
}
.spacer {
flex: 1;
}
</style>
</head>
<body>
<header>
Fred's Cars, Trucks & Jeeps
</header>
<h1>Welcome to Freds Cars!</h1>
Thank you for visiting our site.
<div class="spacer"></div>
<footer style="background-color:black;
color: white;
text-align:center">
Contact us: (555)555-5555<br />
121 Fredway St.<br />
Cartown USA
</footer>
</body>
</html>
Your browser should now look similar to the following:
In the above code we added a div tag between the main content and the footer and added to it a class called “spacer”. Then we targeted the spacer div with css styling and applied the flex system to it so that it will grow as needed.
Body
We already have the body area defined with our placeholder content. In fact we have pretty much accomplished the first part of our design goal, which was to build an html structure for our webpage. But the webpage still looks kind of plain. And the main content has no padding between itself and the left border of the page.
We’ll fix all this in the next section with a CSS library called Bootstrap.