CALIFORNIA STATE UNIVERSITY, LOS ANGELES

INFORMATION TECHNOLOGY SERVICES

HTML5 & CSS3.0Part 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 & ID’s........................................................................................................................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..........................................................................................10

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 2

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 FilesThis 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 3

Notepad++ Interface

Figure 1 - Notepad++ Interface

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

HTML 5 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 TagsHTML 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>.

Figure 2 – Blank HTML Page

Title 4

Tab Bar

Menu Bar

Tool Bar

Line Numbers

Text Area

Status Bar

Structure of HTML TagsThere 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 TagsOpening 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 TagsThe 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 & IDsCSS 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 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 SelectorsCSS 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.

Title 5

Table 1 – CSS Selectors

Selector Example of Syntax Description Example of Selection

Class .box{Attributes Here} Will affect any tag with the class wrapper applied to it.

<p class=”box”> This text is affected.</p>

ID #box{Attributes Here} Will affect any tag with the ID wrapper applied to it.

<p id=”box”> This text is affected.</p>

Tag Selector p{ Attributes Here } This selector will affect all <p> tags in the HTML document.

<p> This text is affected.</P>

Child Selector p > a{ Attributes Here } This selector will affect any <a> tag that is a child element of a <p> tag.

<p> <a> This text is affected. </a></p>

Pseudo Selector a:hover{ Attributes Here }

Will only apply defined style on mouse hover.

<a>Hover over me</a>

Creating a New Web PageThe 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 browser’s 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++.

Creating a Home PageTo 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.

Title 6

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 StructureCreating 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 TitleThe 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.

Saving the PageSaving 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.

Title 7

2. Select the Save command.

Or:1. Press [Ctrl] + [S].

Creating a Section for CSS Styling TagsCascading 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 what’s 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.

IndentationIndenting 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>

Title 8

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 ColorThe 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 WrapperCreating 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: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 WrapperA div element with class=”wrapper” as an attribute doesn’t do anything if no wrapper class is defined.

Title 9

To define a new class:1. Navigate to the <style> tag near the top of the page and place the insertion point in-

between 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 ElementsCentering 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.

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 OneThis 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.

Title 10

Figure 5 – Checkpoint One

Creating the Website Structure within the ContainerAt 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 BarA 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.

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. Let’s 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{

}

Title 11

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 BarAnother 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;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.

Title 12

Checkpoint Tw o 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 ContainersSo far, we have only added the container and the upper portion of our webpage. Let’s add some of the more important containers.

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

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

Title 13

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 FooterFooters 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:

background-color: black;height: 180px;width: 752px;margin-left: auto;margin-right: auto;position: relative;bottom: 8px;z-index: 1;

Title 14

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 PageAdding 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 ThreeYour code should look similar to what is seen below.

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.

Title 15

Figure 7 - Checkpoint Three

Basic Styling of TextHTML 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):

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;

Title 16

AppendixTable – Commonly Used HTML Color Codes

Color Code Color CodeRed #FF0000 White #FFFFFFTurquoise #00FFFF Light Grey #C0C0C0Light Blue #0000FF Dark Grey #808080Dark Blue #0000A0 Black #000000Light Purple #FF0080 Orange #FF8040Dark Purple #800080 Brown #804000Yellow #FFFF00 Burgundy #800000Pastel Green #00FF00 Forest Green #808000Pink #FF00FF Grass Green #408080For more color code list, visit:Webmonkey - http://www.webmonkey.com/reference/color_codes/Colourlovers - http://www.colourlovers.com/blog/2007/06/30/ultimate-html-color-hex-code-list/

ComputerHope - http://www.computerhope.com/htmcolor.htm

Table 1 – Commonly Used HTML Tags

Tag Name Description

<a> anchor Make hyperlinks<b> bold Bold the text<body> body of HTML document Where to start the document and place the

HTML codes<br> line break Force to change line<em> emphasis Emphasis the content<form> form Insert a form inside the web page<h1> heading 1 Heading Size<head> heading of HTML document Contains information about the page<hr> horizontal rule Create a horizontal line<html> hypertext markup language Begins the HTML document<i> italic Italic the text<img> image Image<input> input field Insert a input field<li> list item Create a listed item in an unordered or ordered

list<menu> menu Insert a menu in a web page<ol> ordered list Numbered the list<p> paragraph Create a line break and a space between lines.<table> table Insert a table inside a web page<td> table data The cell of a table<th> table header The header of a table<title> document title The title in the title bar of the browser<tr> table row The row of a table<u> underline Underline the text<ul> unordered list Bullets the list

Title 17