Develop a Web Page Using HTML, CSS & JavaScript
Introduction
What is HTML? What is CSS? What is JavaScript? And how do I use them? These are four questions we will discuss in this booklet.
HTML (Hyper Text Markup Language) is the language with which Web pages are written. CSS (Cascading Style Sheets) are the sytlistic actions applied to the content of the Web pages you see online. JavaScript is a simple client side (users' end) interpreted scripting language originated by Netscape.
HTML is the language that builds Web pages. It controls the pieces of the Web pages you see online. It is made up of elements. A basic Web page consists of a head section and a body section. The head contains information about the Web page and the body contains information that is visible on the page. The head contains at the very least a title, but can also contain style sheets, scripts and other online elements that can be useful in building your page or links to those pieces.
The following is a Web page that we will build in this exercise. It includes a head section with a title element, meta tags, a script element, a linked stylesheet and an embedded stylesheet.
1. <!DOCTYPE HTML>
2. <html lang='en'>
3. <head>
4. <title>Develop a Web Page Using HTML, CSS and JavaScript</title>
5. <meta name="description" content="description of the page content goes here.">
6. <meta name="keywords" content="key words contained in the page used for search engine">
7. <meta name="author" content = "Authors name">
8. <link rel="stylesheet" href="style.css">
9. <style type="text/css">
10. body{background-color:white; color:black; font:100%/150% helvetica, sans-serif; }
11. section{width:90%; margin:1em auto;}
12. section::after{clear:both;}
13. h1, h2, h3, h4{ text-align:center; background-color:#333; color:#ccc; width:100%; margin:10px auto 15px auto; line-height:150%;
14. footer{background-color:#333; color:#ccc; width:90%; margin:1em auto; text-align:center;}
15. #b1, #b2{min-width:35%; max-width:40%; width:37.5%; margin:1em 2.5%; border:1px solid #900; padding:2em; display:block; }
16. #b1{float:left;}
17. #b2{float:right;}
18. .cb{clear:both; float:none;}
19. </style>
20. <script type='text/javascript'>
21. function hideBox()
22. {
23. var box = document.getElementById('b1');
24. box.style.visibility='hidden';
25. box.style.display="block";
26. }
27. function showBox()
28. {
29. var box = document.getElementById('b1');
30. box.style.visibility='visible';
31. box.style.display="block";
31. }
33. // This is a comment in JavaScript.
34. // This script locates within this document and element with an ID of b1.
35. // It hides that box when the function hideBox is run and shows the box when the function showbox is run.
36. </script>
37. </head>
38. <body>
39. <section>
40. <h1>My First Web Page </h1>
41. <h2>Author: Patrick Pearce</h2>
42. <p><strong>About Me:</strong> I am a self-taught Web page developer. I have been building Web pages since 1998. I wrote the first one in 43. 44. Microsoft Word and saved it as HTML. I then used the view source option in the right click menu to see how the page was written so that what I wrote displayed.</p>
43. <div id='b1'>
44. This box is displayed by default, but click the button to the right and it will disappear.
45. </div>
46. <div id='b2'>
47. <button onclick="hideBox();">Hide Box</button>
48. <button onclick="showBox();">Show Box</button>
49. </div>
50. </section>
51. <div class=cb></div>
52. <footer>
53. <address>Site Design and Development by Patrick R. Pearce, Sr.<br>Savanna, GA. 31419<br>501.316.7995</address>
54. </footer>
55. </body>
56. </html>
Link to view this document online.
Link to the linked style sheet.
The stylesheet is currently very sparse. It only contains a command to remove all of the padding, margins and background information for all of the elements. We will add information to the style sheet as we move further into the exercise.
HTML syntax requires that most element tags be closed, that most attributes have values and that the pages be written in a well constructed order. An HTML element is made up of a less than character (<), the element name, (zero) or more attributes most of which require values; and a greater that sign (>). For example the paragraph element looks like this <p class='paragraph'> The p indicates this is the paragraph element and the class assigns stylesheet rules to the paragraph. I'll talk more about the class attribute in the CSS section.
HTML5
Now that we've looked at the page we intend to build, let's get an understanding of what we've seen. Link to example page with lines numbered.
Lines 1 and 2 define the document type. Line 1 says this is an HTML5 document. The current version of HTML and so it does not need the 5 in the definition. Line 2 tells the user agent (browser) in what language the HTML is written, in this case "English".
The head section
Line 3 opens the head section. Line 4 is the title element which appears in the tab at the top of the page. Remember the information in the head is information about the page, and not content. Lines 5, 6 and 7 are meta elements, Line 5 is the description element and contains information regarding the content of the page. Line 6 is the keywords element and contains the words that one might use in a search engine to locate the page. For example to locate this page one might search for "build a webpage", or "build a web page". Notice the subtle difference in the two terms, one has webpage as one word the other has it a two. For a really good explanation of keywords see metatags.org/meta_name_keywords. Line 7 is the meta element for the author in case you want someone to be able to search for your name as an author.
Line 8, still in the head is a link to an external style sheet. Line 9 begins the embedded stylesheet. The elements, are styled using the element names, lines 10 through 14; id, lines 15, 16 and 17; and a class on line 18. Line 19 closes the style element. Line 20 opens a JavaScript. There are two functions in the script. The first function {hideBox() } hides a box on the page and the second function {showBox()} shows the box on the screen. Lines 31 through 33 are JavaScript comments. Line 34 closes the script element and Line 35 closes the head section. Remember information in the head is about the page, and not content for the page.
The body element
The body element contains information the the page visitor will see in her/his browser. Line 36 opens the body element. Inside the body element is a section element (line 37). A section is a layout element and can be styled in the stylesheet. It can be set to appear in a specific location on the page with any style you choose. There are a few more positioning/layout elements which we have not used. They include article, aside, and div. These elements can be styled in the stylesheet to appear in any location on the page. I'll discuss locating and positioning items in another article. Line 38 is a header element. There are six header levels, H1 through H6. Each one indicates a different level of heading and a different size of text. They are used to build an outline of your page, Line 40 is a paragraph element. Line 41 vis the first of two div elements. The div elements are used in this case for positioning the content on the page. Notice there is text in one box, and buttons in the other. The stylesheet tells the browser to display the two divs side-by-side. In div b2, are the buttons that call the two functions we created in the JavaScript element. One button hides the box on the left and the other returns it. After the divs close is a div with a class cb. It stops the elements on the page from "floating" on the page. Without that div, the footer would show up between and below divs b1 and b2. The last item in the body section is the footer, line 49. The footer contains contact information for the page author; that content is in the address element. Line 53 closes the footer. Line 54 closes the body element and line 55 closes the html and the page. This is a quick view of what we will write. I will go into more detail as we progress.
Cascading Style Sheets (CSS)
Applying Styles
Applying styles is done using CSS. Any element on the page can be styled using style sheets. There are four types of style sheets, linked, embedded @import (@import is beyond the scope of this exercise)and inline. These three types of sheets are how CSS gets the cascading part of its name. The styles are applied based on an order of precedence. That order is the closet style to the element wins. An inline style has precedence over an embedded style; and an embedded style has precedence over a linked style. Our example has two of the types of styles, linked and embedded. It is usually best practice to only use those two types of sheets. This is supported by the notion that stylesheets are a method of separating content and presentation. The less non-content information in the Web page the better.
Embedded stylesheets bloat the Web page content and linked stylesheetds can slow the load time of a page. Depending on the amount of styling you do (although the download time is usually insignificant). If you have a large page,with a large linked stylesheet, inline styles for the basic layout may help to improve load times. For our purposes and the size of our pages this is not a concern; so we will use both linked and embedded CSS.
Linked stylesheets have a significant advantage over embedded stylesheets. They can be linked from any page on your site thereby providing a consistent look and feel for all of your pages and making changes in the linked sheet will apply those changes to all of the pages that use the linked sheet. This makes site changes much simpler.
Our Styles
Below is the embedded stylesheet for our page. I'll go through each line and explain what it does and to which element. The first item styled is the body. This means that everything in the page will have these qualities unless over ridden by another declaration. First the page's background color is set to white. The the text color is set to black. Next we set font information. The font declaration is shorthand for setting all of the possible font properties, font-style, font-variant, font-weight, font-size/line-height, and font-family. The font-styles include normal, no alteration to the designated font; italic, the designated text is shown in italics; and oblique, which looks similar to italic, but is not a real font. It's the text shown slanted. The font-variant allows you to show your text in small-caps. The font weight sets the thickness of the letters (i.e. boldness). The range is from 100 to 900 with 400 being a "normal" font. Font-size/line-height sets the size of the font. Sizes can be set in pixels, EMs or percentages among other methods. EM is a printing measurement and is used quite commonly. Setting the font-size begins with knowing where you start. The base for font-sizes is 16 pixels. This is the same as 100% or 1EM. The line height is the height of the line containing the text, and allows for some vertical separation. Most commonly the spacing is approximately 20% so a text of 16 pixels might have a line height of 16 pixels plus 20% times 16 or 3.2 pixels which may be rounded to 20 pixels. The exact number is not really relevant to our discussion. There is a good discussion of line-height available at http://practicaltypography.com. So our page has text at 16 pixels and a line height of 150% or 24 pixels. Lastly we specify the font-face for our text, Helvetica is our first choice, but if the user's system does not have Helvetica available, our page will use the first sans-serif font it finds. Sans serif fonts are ones with out any decoration (points at the ends of the letters).
body{background-color:white; color:black; font:100%/150% helvetica, sans-serif; }
The section style defines the width of the section. In this case it is 90% of the width of its parent container, the body element. It has margins of 1em above and below it and is centered between the left and right margins of the body element in this case the browser window width.
section{width:90%; margin:1em auto;}
Next we style the heading elements Heading elements are designed to be used as an outline for your page. There are six levels of headings numbered h1 through h6. Each one is slightly smaller that the one before. The h1 heading is usually displayed as 32 pixels, or 200%. An h2 is set at 150% or 18pixels Headings 3 through 6 are shown as h3:1em h4: 1em h5:.87 em h6: .67 em.We add a background-color and a text color to heading elements as well. In order to center the content of the heading, we use the text-align:center attribute. To center the headings, we add a top and bottom margin with side margins of auto. The auto setting will align the element "centered". And finally we set the line-height to complete our styling of the headings
h1, h2, h3, h4{ text-align:center; background-color:#333; color:#ccc; width:100%; margin:10px auto 15px auto; line-height:150%;}
The next element we style is the footer. For the footer, we want it to look similar to the head element. Remember consistent styling with your pages is essential to the navigation and branding of your site. So again the background-color is set to #333 a dark gray; with a silver (#ccc) colored text. The items are set to be centered, using the text-align:center element and the footer is set to 90% of the body width.
footer{background-color:#333; color:#ccc; width:90%; margin:1em auto; text-align:center;}
Now we will style the two boxes on the page. We are using the boxes as the objects on which our JavaScript will operate. We have two boxes one of which we will make invisible using the script we will discuss later. Here we are using ID Selectors. ID Selectors operate on a single element. Each ID may only appear once in a page. Our box on the left (the one that will disappear), has the ID b1. To indicate to CSS that we are using an ID Selector, we use the # (pound sign or hash sign). So our first box we give the ID b1, an ID may be any text so long as it is unique on the page, and the second box(the one that contains our buttons) we give the ID b2. We set the minimum width of each box to be 35 percent of the section element, and the maximum width to be 40%. Then set the width to 37.5%. We give each box a 1em top and bottom margin and 2.5% left and right margins. We set the border of the boxes to have a 1 pixel solid line colored a dark red/maroon (#900). Finally we tell the browser to display the box as a block level element. (Block level elements appear as an element with both a top and bottom and left and right margin.) The next two lines tell the browser to put the boxes on the same line next to each other, (floated side by side). Our last line is required to turn off the float.
#b1, #b2{min-width:35%; max-width:40%; width:37.5%; margin:1em 2.5%; border:1px solid #900; padding:2em; display:block; }
#b1{float:left;}
#b2{float:right;}
.cb{clear:both; float:none;}
JavaScript
What is JavaScript
JavaScript is an interpreted scripting language. So what does that mean? It means the user's browser recognizes JavaScript and interprets the commands in the script. We are only touching on a minute part of JavaScript for this exercise. This is merely an introduction to how to manipulate content on the page with JS. There are many more things you can do with it. In fact there are hundreds of books each in the hundreds of pages explaining and showing how to write JavaScripts.
Our Script
We will step through our script one line at a time and explain what it's doing. The first line tells the browser that the content between the open script and close script tags is a JavaScript. The next line instantiates a function. A function is a piece of JS code that can be called from either another function, or by interaction with the user. In our case the script is called when the user presses one of the buttons in the second box. Our first function [hideBox()] locates the element with an ID of b1. You will notice that element is the box on the left side of the page and contains some text. After the script locates the element it then changes a part of the style of the element. All elements are displayed by default (so long as they are properly written and not hidden by some CSS). The script changes the visibility from visible (the default for an element) to hidden; thereby hiding the element from the user's view.
<script type='text/javascript'>
function hideBox(){
var box = document.getElementById('b1');
box.style.visibility='hidden';
}
Our second function does just the opposite of the first script. it locates the element with an ID of b1 and changes the visibility back to visible. Notice with the first script; we did not delete the element, we merely hid it from view. Now we are changing it back to its original condition (visible).
function showBox(){
var box = document.getElementById('b1');
box.style.visibility='visible';
}
// This is a comment in JavaScript.
// This script locates within this document and element with an ID of b1.
// It hides that box when the function hideBox is run and shows the box when the function showbox is run.
</script>
As a best practice, we add some comments to the script to explain to the next programmer what the script does.
Summing It All Up
So what have we done? We discussed HTML, CSS, and JavaScript. We looked at a Web page that has all three pieces in it. We walked through each line of the code and discovered what each line does. Remember this is just a cursory look at Web page development, and not an in-depth study.
Test yourself. In order to see how much you have learned, take the quiz. It is fully self-contained (i.e. your score is calculated when you finish).