CALIFORNIA STATE UNIVERSITY, LOS ANGELES

INFORMATION TECHNOLOGY SERVICES

HTML5 & CSS3.0 Part 1: Using HTML and CSS to Create a Website Layout
Fall 2011, Version 1.0

Table of Contents
Introduction ...................................................................................................................................3 Downloading the Data Files ..........................................................................................................3 Requirements..................................................................................................................................3 About Notepad++ ........................................................................................................................3 Notepad++ Interface ...............................................................................................................4 About HTML & CSS .....................................................................................................................4 HTML5 .......................................................................................................................................4 Studying Basic Tags ...............................................................................................................4 Structure of HTML Tags ........................................................................................................5 Opening and Closing HTML Tags .........................................................................................5 Head and Body Tags ..............................................................................................................5 Cascading Style Sheets (CSS).....................................................................................................5 Classes & IDs ........................................................................................................................5 CSS Selectors .........................................................................................................................5 Creating a New Web Page .............................................................................................................6 Creating our Home Page .............................................................................................................6 Basic Website Structure .........................................................................................................7 Setting the Page Title .............................................................................................................7 Saving the Page ......................................................................................................................7 Creating a Section for CSS Styling Tags ....................................................................................8 Indentation...................................................................................................................................8 Setting the Background Color .....................................................................................................9 Creating the Wrapper ..................................................................................................................9 Creating a class for the Wrapper ............................................................................................9 Centering Page Elements .................................................................................................10 Checkpoint One.........................................................................................................................10 Creating the Website Structure within the Container .............................................................11 Adding a Banner and a Navigation Bar ....................................................................................11 Adding a Navigation Bar ..........................................................................................................12 Checkpoint Two ........................................................................................................................13 Adding the Main Content Containers ........................................................................................13
For additional handouts, visit http://www.calstatela.edu/handouts. For video tutorials, visit http://www.youtube.com/mycsula.

Adding the Main Content Div ...................................................................................................13 Adding the Footer .....................................................................................................................14 Adding Text to the Page ..............................................................................................................15 Checkpoint Three ......................................................................................................................15 Basic Styling of Text.................................................................................................................16 Appendix .......................................................................................................................................17

Title

Introduction
Websites can be created by using one of many coding languages (e.g., HTML, JSP, PHP, ASP, ASP.NET, or Perl). Among those languages, HTML is the most basic text-based language that has been used in Web design since 1989. HTML consists of two parts: 1) content that will be displayed in a web browser and 2) markup or tags, which are encoded information that is generally hidden from web page viewers. This three-part workshop series will help participants create a basic website using fundamental HTML knowledge that they can build on with more advanced techniques. The first part will introduce the basics of web design that includes using divisions to arrange the page layout, menu bar to link multiple pages and CSS 3.0 to enhance web page elements

Downloading the Data Files

This handout includes sample data files that can be used for hands-on practice. The data files are stored in a self-extracting archive. The archive must be downloaded and executed in order to extract the data files. The data files used with this handout are available for download at http://www.calstatela.edu/its/training/datafiles/htmlp1.exe. Instructions on how to download and extract the data files are available at http://www.calstatela.edu/its/docs/download.php.

Requirements

A text editor, preferably Notepad++ or something similar. Notepad that is provided with Windows will also work. o Notepad++ http://notepad-plus-plus.org/download http://portableapps.com/apps/development/notepadpp_portable (Portable version that can be placed on a flash drive) A recent web browser, e.g., Mozilla Firefox, Google Chrome or Internet Explorer 9. o Google Chrome http://www.google.com/chrome/intl/en/landing_chrome.html?hl=en o Mozilla Firefox http://www.mozilla.com/en-US/firefox/new/ o Internet Explorer 9 (Only on Windows 7 and Windows Vista Service Pack 2) http://windows.microsoft.com/en-US/internet-explorer/downloads/ie
NOTE: Anything below Internet Explorer 9 is not compatible with the new HTML5 features. While any on the list above is acceptable, this handout is developed based on the steps administered in Notepad++ and Mozilla Firefox.

About Notepad++
Notepad++ is a lightweight, but powerful text editing tool. It is built primarily for programming, not writing essays. It has built in tag highlighting and automatic indentation which helps improve organization and readability.

Title

Notepad++ Interface
Menu Bar Tab Bar Line Number s Tool Bar

Text Area

Status Bar
Figure 1 - Notepad++ Interface

About HTML & CSS

HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are the languages of the web. HTML tags and CSS classes, ids and attributes make up the entirety of every web page on the Internet.

HTML5
HTML5 is still a work in progress and has been since June of 2004. Most of the tags that were compatible in previous versions of HTML are still compatible. However, they are no longer used because better and cleaner methods have since been found. HTML5 is still not final, but is already making a huge impact on the web.

Studying Basic Tags

HTML is comprised mostly of tags. Tags define how the page is formatted and displayed. For every HTML based web page, there are several tags that will always be inserted into the document (see Error! Reference source not found.). <!doctype>, <html>, <head>, and <body>.

Title

Figure 2 Blank HTML Page

Structure of HTML Tags

There are two formats for HTML tags. One format defines where the tag starts (the opening tag) and the other defines where the tag ends (the closing tag).

Opening and Closing HTML Tags

Opening HTML tags are all structured in the same way. First, they will start with a left pointing angle bracket (<); second, the function/name of the tag (for example, Body, to define the body of the document); and finally, close with a right pointing angle bracket (>). Angle brackets are also referred to as chevrons. A complete HTML tag will look something like this: <body>. Now look at the page that was created (Figure 1), notice some of the tags that have been created: <html>, <head>, <title>, and <body> these are structural tags which define the layout of the page. Closing HTML tags are similar to opening tags in that they contain angle brackets and the function of the tag contained between the two. The difference is that after the left pointing angle bracket there is a forward slash (/). This tells the browser that the tag will not affect any elements of the page after that point. For example: </body> defines the end of the body tag.

Head and Body Tags

The head and body tags are used to organize the code into two major areas. The parts of the code that are more back-end oriented (not seen by the viewer) are usually placed within the <head> tag area. Examples include: CSS scripting and Java scripting. The <meta> tag appears in the <head> tag and is used for character encoding, language specification, and search engine meta data. Information contained within the <body> tag will generally appear on the screen when the page loads. Examples include: text and images.

Cascading Style Sheets (CSS)

CSS handles the design aspects of creating a website while HTML is the structure of the page. HTML alone will produce a white page with no colors, headings or other styling. CSS allows customization of styles and formatting elements (e.g., paragraphs, headers) on the page.

Classes & IDs

CSS is mainly applied through what are called classes and IDs. Essentially, you can bind an arbitrary group of styles to a class or id of any name to apply to almost any HTML tag. Subsequently, classes and IDs are often referred to as Selectors. So what is the difference between classes and IDs? Classes are meant to be used freely and as much as desired, while IDs are meant to be used just once to be unique. These classes and IDs cannot be created in the body
Title 5

tag. Instead, they are created in their own style tag. The <style> tag can be placed in the <head> section of your html page (internal), or it can be placed in a separate CSS file and then imported (external).

CSS Selectors
CSS selectors offer various ways to select your HTML tags for styling. These extra selectors are used to reduce the need to create a new classes or IDs for every tag created, and results in cleaner code.
NOTE: For more information on CSS selectors, visit http://www.w3.org/TR/CSS2/selector.html.
Table 1 CSS Selectors

Selector

Example of Syntax

Description

Example of Selection

Class

.box{Attributes Here}

ID

#box{Attributes Here}

Tag Selector

p{ Attributes Here }

Will affect any tag with the class wrapper applied to it. Will affect any tag with the ID wrapper applied to it. This selector will affect all <p> tags in the HTML document. This selector will affect any <a> tag that is a child element of a <p> tag.

<p class=box> This text is affected. </p> <p id=box> This text is affected. </p> <p> This text is affected. </P> <p> <a> This text is affected. </a> </p>

Child Selector

p > a{ Attributes Here }

Pseudo Selector

a:hover{ Attributes Here }

Will only apply defined <a>Hover over me</a> style on mouse hover.

Creating a New Web Page

The first page that has to be created for any website is the home page. Home page is the page that will be displayed when the Uniform Resource Locator (URL) of the website is entered into the browsers Address Bar (e.g., http://www.calstatela.edu). When the URL is entered, the browser will automatically look for the home page, which is also recognized as the index or default page. This page can be created in one of many web formats including: HTML (.html - Hypertext Markup Language), XML (.XML Extensible Markup Language), PHP (.php Hypertext Preprocessor), CGI (.cgi Common Gateway Interface), and ASP (.asp Application Service Provider). For the purpose of this workshop, .html, the most basic format will be used. The program that will be used for creating a web page will be the free text editor Notepad++. Alternatively, other programs such as Notepad can be used, but have no added helpful HTML specific features like the ones included in Notepad++.

Title

Creating a Home Page

To get started, we need to create the index.html file. To create a home page: 1. Launch Notepad++. In the ITS Training Lab, go to the Start button and point All Programs, then click Notepad++. 2. If the text area is not blank, click the New button. 3. Select File. 4. Select Save As. 5. In the File name: text box, type index.html. 6. On the Save as type: box directly below, select All types (*.*). 7. Next, click the Desktop button on the left side of the Save As dialog box. 8. Select the Create New Folder button and name it Website. Press Enter to confirm. 9. Double click the newly created folder, then click Save.

Basic Website Structure

Creating a strong foundation is one of the most important parts of creating a website. Once a new blank HTML page is created, the next step is to set the document type to HTML5, which will be the basic shell of the website. This process can also be called as setting up a <meta> tag which defines the character encoding we are going to use. In our case, we will use utf-8. To create the shell of our website: 1. At the very top of the page, type <!doctype html>. This will set the document type to HTML 5. 2. Directly underneath the doctype tag, type: <html lang=en> </html>. 3. In between the html tags we just created, type: <head> <title></title> <meta charset=utf-8> </head> <body> </body>
NOTE: Take note of the indentation.

Setting the Page Title

The page title will appear in the title bar of the web browser, and is what displays in the taskbar when the page is minimized. To set the page title: 1. In between the opening (<title>) and closing title (</title>) tags, type HTML Workshop. 2. Double click the index.html file from the student data file directory to see the result in a browser window.

Title

Saving the Page

Saving the page right away serves many purposes. First, it is a good habit to save your work periodically so that nothing is lost in the event of a system error. Second, it gives a name to the file that is being worked on so that it can be referenced to from other files. Third, and most importantly from a Web design standpoint, it allows links from one page to another to be relative (i.e., links will look like webpage_2.html instead of http://www.mywebsite.com/webpage_2.html). This helps make it easier to seamlessly work on the web page offline as well as online, as links are referring to files in subdirectories or in the same folder. To save the web page: 1. Select the File menu. 2. Select the Save command. Or: 1. Press [Ctrl] + [S].

Creating a Section for CSS Styling Tags

Cascading Style Sheets (CSS) is a language used to help style different elements of a web page, and is much more powerful and flexible. CSS can be placed in one central location (in the head tag, using whats called internal CSS), at the point of modification (inline CSS), and via a separate CSS file (external CSS). For this workshop, the Internal CSS method will be used. To create a section for CSS: 1. Create a new line below the <meta> tag. 2. Type <style>. 3. Then press [Enter] about 3-4 times. 4. Then, type </style>. This is your closing tag (see Figure 3 Adding a CSS Styles Section).

Figure 3 Adding a CSS Styles Section

Any CSS that needs to be added to the page, will be added in-between the style tags.

Title

Indentation
Indenting the source code of any computer language is absolutely crucial. It makes the code cleaner and much easier to read. [Tab] is most often used to indent source code. As a rule of thumb, you should indent every time you insert an element into another element, this is known as nesting. Example: <body> <p> This is a nested paragraph. </p> </body> In this small scale example, the paragraph tag (<p>) is nested in the <body> tag. Every element in the page is nested in the <html> tag aside from the <!doctype>, which always resides at the very top of the page.

Setting the Background Color

The background of the page set the undertone for the entire site. When creating/setting a background, it is important to have something simple. It is something that serves to enhance the content, not overpower it. Two types of backgrounds can be used: single solid color or an image. The background will be created using CSS styling. To set a background color: 1. In-between the <style> tags, insert a couple of indentations ([Tabs]), and type body{ }. 2. Using indentation, recreate the setup Figure 3 has. Each vertical dotted line represents a [Tab]. 3. On the line in-between the curly braces of the body style, enter a couple tabs until you get one tab passed the body style. (See Figure 4 - Make sure the opening and end tag are on the same vertical line)

Figure 4 - Make sure the opening and end tag are on the same vertical line

4. Type background-color:#cccccc; (No quotes) This defines the background color with the hexadecimal value for light grey. 5. To see the changes, save the file by clicking File, then Save, or by pressing Ctrl + S simultaneously. Also, be sure to refresh the page in the browser.

Creating the Wrapper

Creating a wrapper is an essential part of creating any website. The wrapper helps contain all of your content and gives a more reliable reference for positioning elements on your web page. To create the wrapper for our webpage:

Title

1. Place the cursor between the <body> tags and type: <div class=wrapper> </div> 2. Press [Enter] a couple of times to allow some space in-between the newly created tags for content. 3. Be sure to apply appropriate indentation accordingly.

Creating a class for the Wrapper

A div element with class=wrapper as an attribute doesnt do anything if no wrapper class is defined. To define a new class: 1. Navigate to the <style> tag near the top of the page and place the insertion point inbetween the opening and closing. 2. Line up the cursor vertically with the previous body style we defined and type: div.wrapper{ Attributes go here } 3. After the { , but before the } seen after div.wrapper, type:
width: 1000px; height: 800px; margin-left: auto; margin-right: auto; border: 1px solid black; NOTE: width sets the width of the division element to 1,000 pixels. height sets the height of the division element to 800 pixels. margin-left:auto; and margin-right:auto; are used to center the element relative to browser window (more info in the next sub-section). border creates a border around the element that is 1 pixel wide, solid (as opposed to dotted, dashed) and black.

4. Be sure to apply appropriate indentation and semicolons accordingly.

Centering Page Elements

Centering page elements is essential to every web page. It helps improve the look and feel of the website with just a simple repositioning. To center HTML elements on a webpage: 1. Navigate to the CSS styling for the element you want to be centered. 2. In-between the curly braces, { }, enter: margin-left: auto; margin-right: auto; 3. Save and refresh the page to see the changes.

Title

10

NOTE: This is currently the most effective and compatible way to center elements. This uses very common CSS that is unlikely to ever be deprecated.

Checkpoint One
This is the first of three checkpoints within this handout. At each checkpoint, make sure that the document that is being created is similar enough (some discrepancies are acceptable). The code should look similar to Figure 5 Checkpoint One.

Figure 5 Checkpoint One

Creating the Website Structure within the Container

At the moment, all that is on our website is a colored background (whichever you chose), and the outline of a box, which is our wrapper, or container.

Adding a Banner and a Navigation Bar

A div element can be placed at the top of the page and serve as a container for text or an image that represent the website. To add a banner to the top of our webpage: 1. In-between the div tags with the class wrapper applied to it, type: <div class=banner></div>
NOTE: Be sure that you close the banner div tag on the same line for clarity.

Title

11

Technically speaking, the banner is actually at the top of the page at this point. However, it has no style applied to it, making it invisible. Lets add some style: 2. Next, navigate to the CSS portion of our web page and underneath the defined class of wrapper, add a new one named div.banner div.banner{ }
NOTE: Remember to match the indenting of the previous classes.

3. In-between the curly braces, type: width: 750px; height: 90px; position: relative; top: 0px; margin-left: auto; margin-right: auto; border: 1px solid black;
NOTE: position:relative; is a bit more complex and is used to give you more of a choice on how you want the positioning of your element to react to its surroundings (more later). top:0px; moves the element so that the top of the element is at the top of the parent element, which in this case is the wrapper.

Adding a Navigation Bar

Another div element can be placed underneath the banner (or anywhere else you want) and serve as the navigation bar to reach other pages on your website. To add a navigation bar to our website: 1. In-between the div tags with the class wrapper applied to it, but not inside of the div tag with the class banner applied to it, type: <div class=nav></div>
NOTE: Be sure that you close the nav div tag on the same line for clarity.

2. Next, navigate to the CSS portion of our web page and underneath the defined class of banner, add a new one named. div.nav{ } 3. In-between the curly braces, type: background-color: #5C5C5C; width: 750px; height: 30px; margin-left: auto;
Title 12

margin-right: auto; position: relative; top: 3px; border: 1px solid black;
NOTE: Since we declared position:relative, our navigation bar will appear naturally after the banner. We add 3 pixels of space between the top of the navigation bar and the bottom of the banner.

Checkpoint Two
Your code should look similar to what is seen below.
NOTE: The code shown below is only the code edited since checkpoint 1. For the full code, refer to the data file checkpoint_2.html.

Figure 6 - Checkpoint Two

Adding the Main Content Containers

So far, we have only added the container and the upper portion of our webpage. Lets add some of the more important containers.

Adding the Main Content Div

To add an area where our websites actual content will go, we need to add another division. To create the main content division:

Title

13

1. In-between the div tags with the class wrapper applied to it and below the div tags with the class nav applied to it, type: <div class=main></div>
NOTE: Be sure that you close the main div tag on the same line for clarity.

2. Next, navigate to the CSS portion of our web page and underneath the defined class of nav, add a new one named div.main div.main{ } 3. In-between the curly braces, type: position: relative; top: 6px; width: 750px; height: 600px; margin-left: auto; margin-right: auto; border: 1px solid black; background-color: white;
NOTE: Since we declared position:relative, our navigation bar will appear naturally after the nav. We add 6 pixels of space between the top of the main content box and the bottom of the nav.

Adding the Footer

Footers are optional, but they are usually pretty useful to help give some background information or provide a large area for useful, but not essential, links. To add a footer to the bottom the page: 1. In-between the div tags with the class wrapper applied to it and below the div tags with the class main applied to it, type: <div class=footer></div>
NOTE: Be sure that you close the footer div tag on the same line for clarity.

2. Next, navigate to the CSS portion of our web page and underneath the defined class of nav, add a new one named div.footer div.footer{ } 3. In-between the curly braces, type:

Title

14

background-color: black; height: 180px; width: 752px; margin-left: auto; margin-right: auto; position: relative; bottom: 8px; z-index: 1; color: white;
NOTE: z-index:1; gives our footer the z-index of 1, meaning that it will be above all other elements. z-index is a way to change the layering of elements without having to rearrange our div tags. Elements without z-index defined in the style default to 0.

Adding Text to the Page

Adding text to a page is obviously one of the most important aspects of website creation. To add text to our page: 1. Inside of our main div, type: <p> </p>. This is known as a paragraph tag and should almost always contain your text.
NOTE: Text can be entered in between the <p> tags as is if no additional styling is desired for the text. 2. Inside of the <p> tag, type class=welcome. The entire line should look like this:

<p class=welcome> </p>

3. Insert some text in-between <p class=welcome> and </p>.

Example: <p class=welcome>Text goes here</p>

4. Now that we added some text, we need to define what styles will be applied via the

welcome class. To do this, in-between the <style> tags, type: p.welcome{ }

NOTE: p lets the browser know we only want to let this style be applied to paragraph tags. .welcome is the class name. 5. In-between the { and}, type: margin-left: 14px; margin-right: 15px; text-indent: 16px; 6. The changes should be reflected upon saving and reloading of the page. The text is now indented and spaced away from the edges for a better overall look of the text.

Checkpoint Three
Your code should look similar to what is seen below.

Title

15

NOTE: The code shown below is only the code edited since checkpoint 2. For the full code, refer to the data file checkpoint_3.html.

Figure 7 - Checkpoint Three

Basic Styling of Text

HTML text can be formatted and stylized much like in other programs such as Microsoft Word. To add some more styling to our text, try adding some of these attributes to our text classes (h1.header & .welcome):
Title

text-decoration: underline; o text-decoration: line-through; o text-decoration: overline; color: red; o color: blue; o color: #00FF00; --- Hexadecimal values also work to specify colors. font-size:20px;
16

Appendix
Table Commonly Used HTML Color Codes

Color Code Color Code Red #FF0000 White #FFFFFF Turquoise #00FFFF Light Grey #C0C0C0 Light Blue #0000FF Dark Grey #808080 Dark Blue #0000A0 Black #000000 Light Purple #FF0080 Orange #FF8040 Dark Purple #800080 Brown #804000 Yellow #FFFF00 Burgundy #800000 Pastel Green #00FF00 Forest Green #808000 Pink #FF00FF Grass Green #408080 For more color code list, visit: Webmonkey - http://www.webmonkey.com/reference/color_codes/ Colourlovers - http://www.colourlovers.com/blog/2007/06/30/ultimate-html-colorhex-code-list/ ComputerHope - http://www.computerhope.com/htmcolor.htm
Table 1 Commonly Used HTML Tags

Tag

Name

Description

<a> <b> <body> <br> <em> <form> <h1> <head> <hr> <html> <i> <img> <input> <li> <menu> <ol> <p> <table> <td> <th> <title> <tr> <u> <ul>

anchor bold body of HTML document line break emphasis form heading 1 heading of HTML document horizontal rule hypertext markup language italic image input field list item menu ordered list paragraph table table data table header document title table row underline unordered list

Make hyperlinks Bold the text Where to start the document and place the HTML codes Force to change line Emphasis the content Insert a form inside the web page Heading Size Contains information about the page Create a horizontal line Begins the HTML document Italic the text Image Insert a input field Create a listed item in an unordered or ordered list Insert a menu in a web page Numbered the list Create a line break and a space between lines. Insert a table inside a web page The cell of a table The header of a table The title in the title bar of the browser The row of a table Underline the text Bullets the list

Title

17