Welcome to the COMP 5062 Web Design for Optimization Web Workshop.

This workshop is designed to help new web designers like yourself to learn the mechanics of code for creating simple to advanced web pages.

Module 1: HTML basics

HTML Overview
Getting Started
HTML Basics
Your First Web Page
Paragraphs
Headings
Learning Checkpoint
Lists
Coding Tips
MyPortfolio
Learning Checkpoint
Additional Exercises

Module 2: HTML Extended

HTML Basics Recap
HTML Structure
Linking Tags
Images
Tables
Nesting
Comments
MyPortfolio
Learning Checkpoint

Module 3: CSS Basics

Creating a Basic Web Page
CSS Syntax
How to use CSS
Inline CSS
Embedded CSS
External CSS
Colours in CSS
Backgrounds in CSS
Reasons for CSS
MyPortfolio
Learning Checkpoint

Module 4: CSS Extended

Basic CSS Recap
Selectors
Grouping
Classes
The Box Model
Margins
Padding
Divs and ids
Containers
MyPortfolio
Learning Checkpoint
Webworkshop Final Review

**** Must Read Me ****

While platforms such as WordPress and programs such as Dreamweaver make it very easy to create web content without being a code writing expert (WYSIWYG format), understanding and knowing the ‘ins and outs’ of some basic code can help to speed up the design process on many levels. So, before we start building sites with WordPress in COMP 5062, let’s learn some basic code!

Your job is to start with first module below (HTML Basics) and go through it step by step. Each instruction is followed by a new instruction that ultimately leads you to the end of the module for the portion of the workshop that will be added to ‘MyPortfolio’ (My Portfolio).  Please understand that from the very beginning of the workshop, you should have a workshop folder saved on your computer that contains two separate parent folders; one named ‘myportfolio’ and one named ‘steps’. Each of these folders is its own separate website.

Good luck and have fun! Your completed Web Workshop folder containing a complete steps site and a complete myportfolio site is due at the end of Week 4.

HTML Overview

What is HTML?

Firstly, HTML is short for “HyperText Markup Language”. That may sound scary, but it simply means it is a language for describing web-pages using ordinary text. HTML is not a complex programming language.

HTML Files

Every web page is actually a HTML file. Each HTML file is just a plain-text file, but with a .html file extension instead of .txt, and is made up of many HTML tags as well as the content for a web page. A web site will often contain many html files that link to each other. You can edit HTML files with your favourite editor.

Example:

Below is an example of a basic HTML webpage that we will go into detail as we move along in the modules.

<html>
 <head>
  <title>this is the title</title>
 </head>
 <body>
  <h1>My Heading</h1>
  <p>This is the first paragraph of text.</p>
  <p>This is the second paragraph of text.</p>
  <p>An image: <img src="photo.jpg"> </p>
  <p>A link: <a href="http://www.fanshaweprof.com"> html guide</a>
</p>
</body>
</html>

Getting Started

What you are creating.

In this web module you will be creating this website: (image below)

Website modle

Before we start creating web page, we must first create a folder structure to hold all our web work. 

In this course, we will be building a couple of websites and adding to them. In preparation, let’s set up a folder structure now. Within the main project folder then (webworkshop), you have two main site folders other known as root directories.

When you’re working with Steps to Success, save all the files in the steps folder.
When you’re working with My Personal Portfolio, save all the files in the myportfolio folder.

Keeping your site organized is vital in web site design. Things can quickly get confusing and files can easily get lost.

Create a folder called webworkshop. (spelt exactly) Inside then create….

  • Then a folder called myportfolio and another called steps.
  • Inside the myportfolio folder create one called images and mycss.
  • Inside the steps folder create one called images and stepscss.
  • ***Ignore the index.html file. You will create this in the next step***

Folder Structure

HTML Basics

HTML Basics

There are four sets of HTML tags that are needed to form the basic structure for every HTML file:

  • <html></html>
  • <head></head>
  • <title></title>
  • <body></body>
Definition – <html> </html>
This basically defines the document as web page. It also identifies the beginning and end of the HTML document. All other tags must fall between the html tags.
Header – <head> </head>
The header contains information about the document that will not appear on the actual page, such as the title of the document, the author, which stylesheet to use and also meta tags.
Title – <title> </title>
The title tag defines the title that will appear in the title bar of your web browser. The title must appear between the head tags.
Body – <body> </body>
The body tags contain all the information and other visible content on the page. All your images, links and plain text must go between the <body> and </body> tags.

These four tags are special. There must only be one set of each and they must be in the correct order like in the example below. The fun and creative part comes when using the basic tags for adding content and headings.

Example:

Below is a basic html document. Notice that everything falls between the html tags, the title appears within the head of the document, and that the body comes after the head

<html>
<head>

  <title>My Page Title</title>

 </head>
 <body>

  This is where all my web page content goes!

 </body>
</html>

Your First Webpage

Open up Brackets or the IDE that you are going code in and create a new file. Save this file as index.html in your steps folder. Type or copy and paste the code below into brackets. Permitting you have created a new html file and saved it as an html file, you should see the same code as the code below. If you did something wrong, simply copy and paste the code below and use that.

<!DOCTYPE html>
<html>
   <head>
       <title>My First Web Page</title>
   </head>
   <body>
       <p>This is my first Web page.</p>
   </body>
</html>

If you have saved the index.html file in the correct spot you will see your index.html file in your steps folder the same as the image above.

Open the File in a browser by double clicking it in the windows explorer.

The browser will show the Web page. The title of the page, “My First Web Page” displays in the title bar at the top of the screen. In the Window browser you see the text “This is my first Web page.”

Paragraphs

The code

In your code remove all of the content in your opening <body> and closing </body>  body tags. Then, type  This is my first Web page and on the next line type Isn’t it cool! inside of the opening <body> and closing </body>  body tags.

Hit save and view it in your browser. You will notice that despite them being on separate lines, they show up on one line in the browser. To have them show up on separate lines put the paragraph tag around each line <p> and </p>. 

<p>This is my first Web Page</p> 
<p>Isn't it cool!</p>

Hit save and look at your code.

code paragraph example

Each statement should be on separate lines. If you made a mistake, simply replace your code with the code below.

<!DOCTYPE html> 
<html> 
 <head> 
  <title>My First Web Page</title> 
 </head> 
 <body> 
  <h1>Welcome to My Web Page!</h1> 
   <p>This is my first Web page.</p> 
   <p>Isn't it cool!</p> 
 </body> 
</html>

Code paragraphs exampleThe Webpage

Save and preview in a browser (click the refresh/reload button to update the page and view your changes)

You will notice that each line is separated by <p> and </p>. This is important because it identifies the content as a paragraph and helps structure your content in the webpage. How does it effect space on the web page?

The paragraph tag <p> at the beginning of a line will display a line space above the line in the browser, and a </p> tag at the end of a line will display a line space below the line in a browser.

Block-level elements

Note: The p element is also known as a block-level element. There are numerous block-level elements in HTML.
Find out more at http://htmlhelp.com/reference/html40/block.html

Block-level elements are also known as containers or boxes.

The concept of block-level element s/containers/boxes is very important when we move into CSS. A block-level element can contain content. The opening and closing tags define the block/container/box. Therefore the p element requires an opening <p> and closing tag </p>.

Page Break

The paragraph break tag <br/> will end a line, so that any new text will display in the browser below the text that preceded the <br/> tag. This tag does not require a closing tag. It is not a block-level element . It does not contain any content. Copy and Paste the Code below and save your file.

<!DOCTYPE html>
 <html>
  <head>
   <title>My First Web Page</title> 
  </head> 
  <body> 
   <h1>Welcome to My Web Page!</h1> 
    <p>This is my first Web page.</p> 
    <p>Isn't it cool!</p> 
    <p>Perry Broome <br/> 
     121 Main Street <br/> 
     555-9871</p> 
  </body> 
</html>

page break code

 

Headings

Headings

So far, your Web page contains a few lines of content but it doesn’t have a heading. There are six different headings you can use. The Table shows the six different header levels, from largest to smallest. The header level will determine how the content of your heading is displayed. Headings, like paragraphs are also block-level elements; they contain content. Therefore Headings must have a opening and closing tag. Headers for HTML Documents :

Open a new file and call it: headings.html. Make sure to save this file in the steps folder. Give it a new title <title>Headings</title> and page heading <h1>Heading</h1> Copy and replace your code with this code.

<!DOCTYPE html> 
 <html> 
  <head> 
   <title>Headings</title> 
  </head> 
  <body> 
   <h1>Headings</h1> 
   <h1>This is a h1 title.</h1> 
   <h2>This is a h2 title.</h2> 
   <h3>This is a h3 title.</h3> 
   <h4>This is a h4 title.</h4> 
   <h5>This is a h5 title.</h5> 
   <h6>This is a h6 title.</h6> 
  </body> 
</html>

headings code

Learning Checkpoint

So far you should have 2 new files in your steps folder: index.html and headings.html

If you do not see these files in your steps folder go back and make sure you are saving them in the correct spots. Move them to your steps folder if you need to.

There should be nothing in your images folder and nothing new in your myportfolio folder.

Lists

You can create bulleted or numbered lists just as you can in a Word document. The Unordered element (ul) is used to create a bulleted list. The Ordered element (ol) is used to create a numbered list.

Each item in the list must be contained in a list element (li). All of these elements are block elements and therefore must have an opening and closing tag.

An unordered list will look like this:

<ul> 
<li>item 1</li> 
<li>item 2</li> 
<li>item 3</li> 
<li>item 4</li> 
<li>item 5</li> 
</ul>

An ordered list will look like this:

<ol> 
<li>item 1</li> 
<li>item 2</li>
<li>item 3</li>
<li>item 4</li> 
<li>item 5</li> 
</ol>

Open your index.html in your code editor (brackets or notepad).

Create an ordered list of animals and a bullet list for household items. Add the following code into index.html (should go in above the mailing address that you added to your page as part of the instructions on ‘Breaks’).

<p>These are five of my favorite animals:</p> 
<ol> 
<li>dog</li> 
<li>cat</li> 
<li>mouse</li> 
<li>snake</li> 
<li>hippo</li> 
</ol> 
<p>These are household items:</p> 
<ul> 
<li>chair</li> 
<li>stove</li> 
<li>bed</li> 
<li>TV</li> 
<li>computer</li> 
</ul>

You will see an ordered list of five animals and a bulleted list of household items.  You need to be very careful to only do as the instructions indicate and not to accidentally remove content when you are putting new content into your page. This will result in point deductions when this project is ultimately graded.

code list content

Coding Tips

FOR THESE INSTRUCTIONS, YOU ARE NOT ACTUALLY CHANGING YOUR INDEX FILE. PLEASE SIMPLY READ OVER THESE INSTRUCTIONS AND MOVE ONTO THE NEXT STEP WITHOUT CHANGING ANY FILES. THIS IS AN FYI INSTRUCTION ONLY.

It is a good idea to enter codes in logical segments. This will make it easier to decode/debug later on if you experience a problem. If all of your code is jammed together, it will be difficult to locate the source of any problem.

Code should be separated into segments by function.
Here is an example:

<html>
indent <head>
indent twice <title>This is the title</title>
indent </head>
indent <body>
indent twice <h1> My Information <h1>
indent twice <p>some text</p>
indent twice<h2> a sub heading</h2>
indent twice <p>some more text<br/>
indent twice 2nd line of text </p>
indent </body>
</html>

The extra blank lines between the segments helps keep lines of code separated in the Notepad file, but the text will not display the separate lines in the browser.

The extra space on the left side of the <h1>, <h2> and <p> tags helps you spot any missing tag. As you gain experience, you will become more adept at entering code to make the task of decoding/debugging easier.

MyPortfolio

Moving to the myportfolio folder

Now it is time to create a web page about yourself for your Personal Portfolio (myportfolio). You will now switch from saving files in your steps folder to saving files in myportfolio folder. You may want to read that last sentence again to ensure that you are in the right place to begin creating your myportfolio site.

Here is the standard message you will receive now each time you reach the myportfolio instructions: You have completed all of the tasks required for your steps site for this module. You will now start working on the myportfolio site. Make sure to close all of the files related to the steps and apply all of the following instructions on this page to the myporftolio site.

  • Create a new file.
  • Save it as index.html in the myportfolio folder
  • Put your name in the <title>
  • Create a heading (h1)
  • Write at least TWO 3 to 4 sentence paragraphs about yourself. You could discuss your hometown and some of things that you like to do there, your favorite foods, etc.
  • Create a bullet list of five of your favorite hobbies (or movies, animals, foods, etc…pick a category) and place it below your personal paragraphs.
  • Save the file.

If you simply borrow the code from your index file in steps, please make sure you only include the information requested in the above instructions. For example, you only need one list and you can either remove that mailing address information or edit it to show your own address. The page title, heading, etc. should all be customized on the MyPortfolio side according to the instructions above.

Below is an example of what it might look like. I used sample text but you can still get the point.

myportfolio index code

Learning Checkpoint

So after this module far you should have:

2 new files in your steps folder: index.html and headings.html

1 new file in your myportfolio folder: index.html

If you do not see these files in your folders go back and make sure you are saving them in the correct spots. Move them to the correct folder if you need to.

There should be nothing in your images folder for both steps and myportfolio.

FOlder Structure

 

Additional Exercises

These exercises are not required but are simply extra resources for you to practice what you have learned in Module 1.

Simply Follow the link to W3schools and do the exercises. This is the link.

HTML Basics Recap

HTML Basics

There are four sets of HTML tags that are needed to form the basic structure for every HTML file:

  • <html></html>
  • <head></head>
  • <title></title>
  • <body></body>
Definition – <html> </html>
This basically defines the document as web page. It also identifies the beginning and end of the HTML document. All other tags must fall between the html tags.
Header – <head> </head>
The header contains information about the document that will not appear on the actual page, such as the title of the document, the author, which stylesheet to use and also meta tags.
Title – <title> </title>
The title tag defines the title that will appear in the title bar of your web browser. The title must appear between the head tags.
Body – <body> </body>
The body tags contain all the information and other visible content on the page. All your images, links and plain text must go between the <body> and </body> tags.

These four tags are special. There must only be one set of each and they must be in the correct order like in the example below. The fun and creative part comes when using the basic tags for adding content and headings.

Example:

Below is a basic html document. Notice that everything falls between the html tags, the title appears within the head of the document, and that the body comes after the head

<!DOCTYPE html>
<html>
<head>

  <title>My Page Title</title>

 </head>
 <body>

  <p>This is where all my web page content goes!</p>

 </body>
</html>

 

HTML Structure

FOR THESE INSTRUCTIONS, YOU ARE NOT ACTUALLY CHANGING YOUR INDEX FILE. PLEASE SIMPLY READ OVER THESE INSTRUCTIONS AND MOVE ONTO THE NEXT STEP WITHOUT CHANGING ANY FILES. THIS IS AN FYI INSTRUCTION ONLY.

It is a good idea to enter codes in logical segments. This will make it easier to decode/debug later on if you experience a problem. If all of your code is jammed together, it will be difficult to locate the source of any problem.

Code should be separated into segments by function.
Here are code examples:

Good Coding Example

<html> 
 <head> 
  <title>This is the title</title> 
 </head> 
 <body> 
   <h1> My Information <h1> 
    <p>some text</p> 
   <h2> a sub heading</h2> 
    <p>some more text<br/>
    2nd line of text </p> 
 </body> 
</html>

Bad Coding Example


 

<html> <head> <title>This is the title</title> </head> <body> <h1> My Information <h1> <p>some text</p> <h2> a sub heading</h2> <p>some more text<br/> 2nd line of text </p> </body> </html>

The extra blank lines between the segments helps keep lines of code separated in the Notepad file, but the text will not display the separate lines in the browser.

The extra space on the left side of the <h1>, <h2> and <p> tags helps you spot any missing tag. As you gain experience, you will become more adept at entering code to make the task of decoding/debugging easier.

Tables

Creating Tables

Tables allow you to arrange data into columns and rows. You are not making a new file yet. These codes are just here to show you examples. Please read on.

Tables are block-level elements that contain content. Therefore the table element requires an opening <table> and closing tag </table> to define the block/container/box. The table must have at least one row.

Table rows are tr elements. Rows are block-level elements that must have opening and closing tags. <tr> </tr>. The table row must have at least one column. Table columns are td elements. Columns are also block-level elements that must have opening and closing tags. <td> </td>.

A table with 1 row and 1 column looks like this (please note that you are not creating a new file yet…the codes below are just examples!):

<table> 
 <tr> 
  <td> content</td> 
 </tr> 
</table>

A table with 1 row and 2 column looks like this:

<table> 
 <tr> 
  <td> col 1 </td> 
  <td> col 2 </td> 
 </tr> 
</table>

A table with 2 row and 2 column looks like this:

<table> 
 <tr> 
  <td> row 1 col 1 </td> 
  <td> row 1 col 2 </td> 
 </tr> 
 <tr> 
  <td> row 2 col 1 </td> 
  <td> row 2 col 2 </td> 
 </tr> 
</table>

Now the Steps:

  1. Create a new file called table.html. Remember, we are working in steps folder right now!
  2. Put in the standard html coding structure !doctype, html, head, and body tags etc. (borrow it from your previous index file.  Save it as table.html in steps.
  3. Give the page a <title> and an heading <h1> using the phrase ‘My Table’ for both.
  4.  Type the following (or copy and paste) between the opening <body>and closing body tags </body>
    <table width="80%" border="2" cellpadding="0" cellspacing="0"> 
     <tr> 
      <td>Address</td> 
      <td>53 Applewood Lane</td>
     </tr> 
     <tr> 
      <td>City</td> 
      <td>London</td> 
     </tr> 
     <tr> 
      <td>Province</td> 
      <td>On</td> 
     </tr> 
     <tr> 
      <td>Phone number</td> 
      <td>123-889-8765</td> 
     </tr> 
    </table>

    The table attribute width indicates the width of the table.
    The table attribute border indicates the thickness of the border lines. If you do not want a border, change the value to “0”.
    The table attribute cellpadding indicates how much empty space there will be between the cell contents its cell borders.
    The table attribute cellspacing indicates how much empty space there will be between cell borders.

  5. Save and preview in the browser to see the results.

My table page

Linking Tags

Creating Links in HTML

You can link your web page to other web pages you have created, or to pages created by other people. Links are what make the World Wide Web go around.

There are several different kinds of links you can make:

  1. Absolute

    • jumps to pages outside of a particular web site
    • called “external” links
    • links to any other web page in the world usually without permission
    • has a different domain name from the web site it is found in
  2. Relative

    • jumps to other pages within the same web site
    • called “local” or “internal” links
    • has the same domain name as the one in the address bar of the browser
  3. Email

    • opens up email forms without taking the user to another page .
  4. Anchors

    • jumps to somewhere else on the same page
    • useful for long pages.

To make an absolute, or an external link you must first know the exact URL(web address) of the page you want to link to.

  1. You are still working in table.html.
  2. Cut and past the following code just below your table but still within the <body> of the document:
<p><a href="http://www.fanshawec.ca/">I am currently a student at Fanshawe College</a></p>


Notice
that you have been provided with an exact URL, including the ‘http://www. This is required for an absolute link.

Save the file and then click Refresh/reload on the browser to see the hyperlink you have just inserted.

Absolute Link

To make a relative , or an internal link, you first have to have another page to link to. We’ll link to table.html.

Now, lets create a link.

  1. Open index.html in Brackets or Atom (from your steps folder!). As always, because we still working on steps, make sure you that you have opened your steps index file!
  2. Type in (or cut and paste) the following HTML code after your last entry but before the closing body tag:
    <p><a href="table.html">Check out my amazing table web page!</a></p>
  3. Save and preview in the browser to see the hyperlink you have just inserted.

The opening tag <a href=” “> marks the beginning of a hypertext reference, which indicates a link to connect to another object (text, image, and so on). The link can be internal (within the same document) or external (to another Web page or server in cyberspace).

The quotation marks (” “) enclose the address of the object or URL being linked to. The text between the opening and closing tags is what will show, usually blue and underlined, on the Web page as the link. When the users click that link text, they will open and view the linked item. The familiar pointing hand icon will appear when users move the mouse over a hyperlink. The closing tag for the hyperlink is </a>.

Check out my amazing table web page! will appear as an underlined link at the bottom of your web page. Check to see if the link works.

Table Link

Add Mailto: Links to your web page

Open your index.html web page file in steps and insert (exactly as written) the following HTML code:

<h3> Some Mail Links: </h3> 
<p><a href="mailto: mschonewille@fanshaweonline.ca">mschonewille@fanshaweonline.ca</a><br/> 
<a href="mailto: youremail@yourdomain.com">Email Us</a></p>

You can do this by copying the text directly off the browser screen with the mouse and pasting it into your web page, or you can (carefully) type the lines into the file. The lines may be placed anywhere in the file after the <body> command and before the </body> command.

Now save the file and use your second browser window to open your web page. (You may have to do a reload/refresh to get the browser to see the modified file.) If things have been done properly, you should get something like the following as part of your homepage display:

If you click on these links, they will prompt you to to send email to the corresponding addresses. Alternatively, instead of using your name as the link text, it’s often better to use the actual email address as the link text in case users that click on the links don’t have a default email server set up on their machines. That way, they can simply copy and paste your email address.

That’s pretty easy, huh? Now use these two mailto links as templates to customize your web page by adding some links for other people that you may want to email frequently. You can either change these two examples to other addresses, or you can just add more mailto links to these.

Email link Code

Images

Saving and Inserting an Image

You are now working on the page table.html in steps!

Placing images on your Web page is a sure way to dress it up and make it interesting to others.

Before you can do this, you must have an image ready. It must be in either .gif (Graphics Interchange Format), .jpg (Joint Photographic Experts Group) format, or .png (portable network graphics). Also, please keep in mind that while Windows refers to a .jpg format as ‘jpeg’, the file extension does NOT include the ‘e’!

The image element (img) is not a block-level element and does not require a closing tag. It does not contain any content.

The / within the tag acts as the closer.

The image element tells the browser where to place an image on the page. It also tells the browser where to get the image; the attribute source.(src=”locationand/or image name”).

Important note: The image is not an HTML file. The image is a separate file. The HTML merely tells the browser where to get the file and where to put it on the page.

Another Important note: Does your image folder start with a capital ‘I’ instead of a small ‘i’? Is that going to be a problem? YES, IT IS, because you are about to define a path to a folder called ‘images’ (with a small ‘i’).

  1. Position the cursor over the image below.
  2. Right-click the mouse and a shortcut menu appears.
  3. Click Save Picture As to display the Save Picture dialog box.
  4. fanshawe logo
  5. In the File name, the file name fanshawe1.png or just simply fanshawe1 will appear. It is a PNG.
    In the Save as type, the file type will be PNG image.
    Most images for the web are JPEGs, GIFs or PNGs.
  6. In Save in text box at the top of the screen, select the location in which you saved. We will save it in the images folder inside the steps folder.!! NOT the myportfolio folder!!The image will be stored in this location, ready for you to use.
  7. Open table.html from the steps folder. Open with your code editor.
    Position the cursor just after the tag, Press Enter to move the cursor to the next line.
    Type in following HTML (or copy and paste)
  8. <p><img src="images/fanshawe1.png" alt="new image" border="0" /></p>
  9. The HTML tells the browser to look in the folder called images and get the file fanshawe1.png src=”fanshawe1.png”
    Save and preview in a browser to see the results.
    The image you selected should appear on your Web page under the table.

input an image

Nesting

Nesting

This page does not require additional changes or files as it is purely definition based.

HTML tags can be nested. One tag can be inside another tag.
For example, the image we just placed was inside a paragraph tag.

<p><img src="images/image1.gif" alt="new image" border="0" /></p>

Another example: if you wish to have the line “This is a test.” display in italic h2 header size, the coding would be:

<h2><i>This is a test.</i></h2>

The <i> tag is used to italicize text and the <h2> tag is used to define the size of the text.

With nested tags the order in which they appear is not important, but they should be symmetrical. That is, if the opening <h2> tag appears first, the closing </h2> tag should appear last, and so on for each tag pair.

You could even nest an image link right inside of a hyperlink. Remember that for your work on MyPP for this module!

Comments

Comments

Placing comments in a web page helps you keep organized. A webpage can get huge very fast. Comments help mark areas of a web page.

<!– this is a comment –>

The browser window will not display the content inside of <!– and –>

Using Comments to Hide Markup from Browsers Temporarily

There is no limit to the amount of information you can put into a comment, and this is why comments are often used to hide a section of a web page temporarily. Commenting may be preferable to deleting content, particularly if you want to put that information back into the web page at a later date (if it’s in a comment, you won’t have to re-type it).

Just to see how this works, create a new html file in your steps folder and name it commentout.html as this process is often called “commenting out” markup.

Here’s an example: (this is the code for the commentout.html file)

<!DOCTYPE html> 
<html> 
 <head> 
  <title>Commenting out XHTML</title> 
 </head> 
  <body> 
  <h1>Current Stock</h1> 
   <p>The following items are available for order:</p> 
  <ul> 
   <li>Dark Smoke Window Tinting</li> 
   <li>Bronze Window Tinting</li> 
   <!-- <li>Spray mount</li> 
   <li>Craft knife (pack of 5)</li> --> 
  </ul> 
 </body> 
</html>

Comment out code

MyPortfolio

My Personal Portfolio Application

You have completed all of the tasks required for your steps site for this module. You will now start working on the myportfolio site. Make sure to close all of the files related to the steps and apply all of the following instructions on this page to the myportfolio site.

 MyPortfolio index page

  1. Put an image of yourself on your index.html page. You can use any image you want but please keep it appropriate and try not use an extremely large sized file. If this file is going to be part of your site, should you link to it in the folder where it currently sits on your computer or should you move a copy to your images folder and then link to that one? You decide, keeping in mind my stressing the concept of having one single root directory. If your image still appears very large once you get it to show up on your page, use the ‘width’ and ‘height’ attributes in your image code to adjust the size.
  2. Add some brief text below the picture (a sentence or two with appropriate <p> or <br> spacing) including some info about where & when the photo was taken.

index with image MyPortfolio contact page

  1. Create a new page call it contact.html.
  2. Give it a heading and a title
  3. Create a table with your street address, city, province/state, country, phone number and email. You can just borrow the table code you used in the steps portion of this module, but you may have to add more rows.
  4. Create a relative link back to index.html but do it using an image in place of your link text. If you’ve learned how to create a simple hyperlink to a page or external website and use a text phrase as your link text and you’ve also learned how to make an image appear on a page using an html image code, could you not just use put the html image code in the place of the link text inside of the hyperlink html code? I’m sure you can! If you have trouble, try looking up the solution at w3schools.com.
  5. Save the file.
  6. Now, in index.html, create a relative link to contact.html using appropriate link text.
  7. Save the file.

The next two there are no preview images, you should have a pretty good idea to do what I have laid out.

 MyPortfolio education page

  1. Create a new page call it education.html.
  2. Give it a heading and a title
  3. Add an unordered list of your past education
  4. Create an absolute link to one of your past schools. If can’t locate a link to any school that you’ve attended prior to coming Fanshawe College, then link to Fanshawe’s website. Use appropriate link text.
  5. Create a relative link back to the index page. Use appropriate link text.
  6. Save the file.
  7. Now, in index.html, create a relative link to education.html. Use appropriate link text.
  8. Save the file.

 MyPortfolio employment page

  1. Create a new page call it employment.html.
  2. Give it a heading and a title
  3. Add an ordered list of your past employment
  4. Create an absolute link to a website for one of your past employers. Use appropriate link text.
  5. Add a comment (in the code) anywhere on the page. This will not be visible when viewing in a browser.
  6. Create a relative link back to the index page.
  7. Save the file.
  8. Now, in index.html, create a relative link to the employment page. Use appropriate link text.
  9. Save the file.

Learning Checkpoint

So after this module far you should have:

4 files in your steps folder: index.html and headings.html, table.html, commentout.html

1 image in your steps , images folder called fanshawe1.png

4 files in your myportfolio folder: index.html, education.html, employment.html, contact.html

1 image in your myportfolio, images folder called what ever your image is called

If you do not see these files in your folders go back and make sure you are saving them in the correct spots. Move them to the correct folder if you need to.

folder structure image

Additional Exercises

These exercises are not required but are simply extra resources for you to practice what you have learned in Module 1.

Simply Follow the link to W3schools and do the exercises. This is the link.

What is CSS?

What is CSS?

  • CSS stands for Cascading Style Sheets
  • CSS describes how HTML elements are to be displayed on screen, paper, or in other media
  • CSS saves a lot of work. It can control the layout of multiple web pages all at once
  • External stylesheets are stored in CSS files

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

CSS Solved a Big Problem

HTML was NEVER intended to contain tags for formatting a web page!

HTML was created to describe the content of a web page, like:

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

When tags like <font>, and color attributes were added to the HTML 3.2 specification, it started a nightmare for web developers. Development of large websites, where fonts and color information were added to every single page, became a long and expensive process.

To solve this problem, the World Wide Web Consortium (W3C) created CSS.

CSS removed the style formatting from the HTML page!

CSS Saves a Lot of Work!

The style definitions are normally saved in external .css files.

With an external stylesheet file, you can change the look of an entire website by changing just one file!

Creating a basic Webpage

Open your code editor and copy the following HTML code:

<!DOCTYPE html> 
<html> 
 <head> 
  <title>My first CSS work </title> 
 </head> 
 <body> 
  <h1>Styles</h1> 
   <p>This is a paragraph<br />
    with a break </p>
 </body> 
</html>

Save it as css.html in your steps folder.

CSS Syntax

CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

CSS selector

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

Looks like:

h1{color:red; text-align:center; }

h1 is the selector
color and text-align are the properties
color has the value red
text-align has the value center

Can also look like:

h1{ 
color:red; 
text-align:center; 
}

It is easier on the eyes to read the code in this vertical layout, but the code would work just the same if laid horizontally as in the example further above. Like HTML, extra spaces and lines in in the text version of the code do not effect how the browser interprets the code.

Directions:

  1. enter the selector you want to define characteristics for, such as h1
  2. use the { bracket to start the rule
  3. use } to end the rule
  4. inside the brackets, list the characteristics you want the tag to use
    1. list the property
    2. use the colon (:) to separate the property from its value
    3. list the value
  5. use a semi-colon (;) to separate each characteristic.

Inline CSS

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

  • External style sheet
  • Internal style sheet
  • Inline style

This example is the Inline Style

Inline Styles

An inline style may be used to apply a unique style for a single element.

To use inline styles, add the style attribute to the relevant element. The style attribute can contain any CSS property.

The example below shows how to change the color and the left margin of a <h1> element:

Example

<h1 style=”color:blue;margin-left:30px;”>This is a heading</h1>

Tip: An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly.

Add the following code to the body element of your css.html file.

<p style="color: red;"> This paragraph is styled in red. It's appearance is controlled by the inline style.</p>

Save and preview in a browser

Inline CSS Code

Embedded CSS

Internal Style Sheet

An internal style sheet may be used if one single page has a unique style.

Internal styles are defined within the <style> element, inside the <head> section of an HTML page:

Example

<head> 
 <style> body { background-color: linen; }h1 { color: maroon; margin-left: 40px; } </style> 
</head>

Directions:

  1. Add the following markup inside the head element
    <style type="text/css"> h1 { color:red; text-align:center; } </style>
  2. Add another h1 inside the <body> element.
    <h1>This is my 2nd heading. It should also be red. Every h1 on this page will now be red. </h1>
  3. Save and preview in a browser.

embedded styling

External CSS

External Style Sheet

With an external style sheet, you can change the look of an entire website by changing just one file!

Each page must include a reference to the external style sheet file inside the <link> element. The <link> element goes inside the <head> section:

Example

<head> <link rel=”stylesheet” type=”text/css” href=”mystyle.css”> </head>

 

An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension.

Here is how the “mystyle.css” looks:

body {
 background-color: lightblue; 
} 

h1 { 
color: navy; 
margin-left: 20px; 
}

Link to the external CSS

The external style sheet is linked to the HTML by the link element. The link tag is placed in the head element of the HTML. The link element is not a block element and does not require a closing tag. It does not contain any content.

The / within the tag acts as the closer.

The Syntax:

<element attribute=” value” attribute=”value” />

Looks like:

<link href=”stylefolder/stylefile.css” rel=”stylesheet” />

link is the HTML element
href is the attribute of the HTML element
stylefile.css is the name of the external css file (notice that the folder path is also included)
rel tells the browser what type of file it is

What to do!

  1. In your code editor, open a new file.
  2. Add the following code
    /* CSS Document */ 
    body { 
    margin-left: 0px; 
    margin-top: 0px; 
    margin-right: 0px;
    margin-bottom: 0px; 
    background-color: #FFFFCC; 
    color: #000000; 
    }
    
     h2 { 
    color:blue; 
    } 
    
    p { 
    font-family: Arial, Helvetica, sans-serif; 
    color:green; 
    }
  3. Save as styles.css in the stepscss folder (inside the steps folder)
    Remember to add .css as the extension of the file
  4. Open index.html
  5. Link to external style sheet in the head element using the following markup:
    <link href="stepscss/styles.css" rel="stylesheet" type="text/css" />
  6. Add a h2 element inside the body element of index.html
    <h2>This is a h2 heading. It should be blue. It's presentation is controlled by the external css. </h2>
  7. Add a p element inside the body element
    <p>This is a green paragraph. It's presentation is controlled by the external css.</p> 
    <p>All paragraphs will be controlled by the external css except for the paragraph that have inline styles. The inline style will trump the external style.</p> 
    <p>This is an example of the Cascade effect</p>
  8. Save and preview your web page in a browser.
    Read the content.

External CSS Linking

Colours in CSS

CSS Colors

Color Names

In this section you are not modifying your styles folder or myportfolio folder!! Simply read and learn about colours in CSS.

In HTML, a color can be specified by using a color name:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

Background Color

You can set the background color for HTML elements:

Hello World
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

<h1 style=”background-color:DodgerBlue;”>Hello World</h1> 
<p style=”background-color:Tomato;”>Lorem ipsum…</p>

Text Color

You can set the color of text:

Hello World

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Example

<h1 style=”color:Tomato;”>Hello World</h1> 
<p style=”color:DodgerBlue;”>Lorem ipsum…</p> 
<p style=”color:MediumSeaGreen;”>Ut wisi enim…</p>

Example

<h1 style=”border:2px solid Tomato;”>Hello World</h1> 
<h1 style=”border:2px solid DodgerBlue;”>Hello World</h1>
<h1 style=”border:2px solid Violet;”>Hello World</h1>

Color Values

In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:

Same as color name “Tomato”:

rgb(255, 99, 71) 
#ff6347
hsl(9, 100%, 64%)

Same as color name “Tomato”, but 50% transparent:

rgba(255, 99, 71, 0.5) 
hsla(9, 100%, 64%, 0.5)

Example

<h1 style=”background-color:rgb(255, 99, 71);”>…</h1> 
<h1 style=”background-color:#ff6347;”>…</h1> 
<h1 style=”background-color:hsl(9, 100%, 64%);”>…</h1> 
<h1 style=”background-color:rgba(255, 99, 71, 0.5);”>…</h1> 
<h1 style=”background-color:hsla(9, 100%, 64%, 0.5);”>…</h1>

Reasons for CSS

Reasons for CSS

More Control

  • Allows you to format and lay out content in ways you cannot accomplish with HTML tags.
    For example: change the line spacing and specify the position of content on a web page.

Saves Time

  • Allows you to define in one location how you want information for tags to appear throughout your web page(s).
  • Don’t have to type the same information in each individual tag

Easy to Update

  • Make changes to your web page(s) in one centralized location to
    help maintain a consistent appearance.

MyPortfolio

You have completed all of the tasks required for your steps site for this module. You will now start working on the myportfolio site. Make sure to close all of the files related to the steps and apply all of the following instructions on this page to the myportfolio site.

MyPortfolio

  1. Create an external style sheet and save it as mystyles.css in the mycss folder. An easy way to generate some basic css code in this new css file is to simply copy the code that you created in your style sheet for the steps site and then make any changes to that code (i.e. background will need to be changed) that would be required through the application of the remaining instructions on this page.
  2. Open index.html from the myportfolio folder and create a link to mystyles.css in the appropriate place in your code using the appropriate type of html link (for a css file).
  3. In the CSS file (mystyles.css):
    • body – define a background color at your discretion
    • h1 – define colour of the font and the size
    • p – define the font size

    Even if you borrowed the CSS coding from you style sheet in steps, you may need to conduct a bit of research to dig up some options for different CSS color codes, coding for different fonts, etc. Of course, the w3schools website is a great spot for stuff like this (as indicated with the hyperlink below). You can also refer to this quackit page for some help with CSS color options.

  4. Save the changes to your CSS file and then preview your index page in a browser. Assuming that the link to your CSS file is properly included in the head tag of your index page, you should see the new colors and font properties. If all is good and you have seen the formatting changes resulting from your mystyles.css file, link ALL the web pages you’ve created for your myportfoliosite to mystyles.css (this includes contact, education, and employment)! If you didn’t see any formatting changes in index in the browser, you need to fix the CSS link in index.html to mystyles.css before you copy and paste that link into your other three pages.

Need Help? As always, you can use www.3schools.com as a reference or refer back to the instructions in the steps portion of this module.

Experiment and have fun.

Learning Checkpoint

You have done quite a lot of coding and created a number of items. Let’s check to see if you have done it all correctly.

In your steps folder you should have

  1. index.html
  2. headings.html
  3. table.html
  4. commentout.html
  5. css.html

In your steps/stepscss folder you should have

  1. styles.css

In your steps/images folder you should have

  1. 1 image -fanshawe1.png

If you do not see these files in your folders go back and make sure you are saving them in the correct spots. Move them to the correct folder if you need to.

In your myportfolio folder you should have

  1. index.html
  2. contact.html
  3. employment.html
  4. education.html

In your myportfolio/mycss/ folder you should have

  1. mystyles.css

In your myportfolio/images folder you should have

  1. 1 image -labeled however you have it

If you do not see these files in your folders go back and make sure you are saving them in the correct spots. Move them to the correct folder if you need to.

Basic CSS Recap

What is CSS?

  • CSS stands for Cascading Style Sheets
  • CSS describes how HTML elements are to be displayed on screen, paper, or in other media
  • CSS saves a lot of work. It can control the layout of multiple web pages all at once
  • External stylesheets are stored in CSS files

Why Use CSS?

CSS is used to define styles for your web pages, including the design, layout and variations in display for different devices and screen sizes.

CSS Syntax

A CSS rule-set consists of a selector and a declaration block:

CSS selector

The selector points to the HTML element you want to style.

The declaration block contains one or more declarations separated by semicolons.

Each declaration includes a CSS property name and a value, separated by a colon.

A CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces.

Looks like:

h 1{color:red; text-align:center;}
CSS

h1 is the selector
color and text-align are the properties
color has the value red
text-align has the value center

Can also look like:

h1{ color:red; text-align:center;}
CSS

It is easier on the eyes to read the code in this vertical layout, but the code would work just the same if laid horizontally as in the example further above. Like HTML, extra spaces and lines in in the text version of the code do not effect how the browser interprets the code.

Selectors and Grouping

Steps to Success

Using the headings.html web page you created in steps, we’ll discuss the type selector and grouping. We’ll look at how we can utilize grouping efficiently within our CSS file.

  1. Open the headings.html file in steps folder.
  2. Now, create a new file in your code editor and add the following code./* CSS Document */ This is a CSS comment. It will help you know which file is the css and which file is the html.
  3. Save the file as headings.css inside the stepscss folder
  4. Add the following code to the <head> of headings.html
    <link href="stepscss/headings.css" rel="stylesheet" type="text/css" />

Type Selectors

The type selector matches the tag name of any element type within our documents.

  1. Add the following h1 rule to headings.css:
h1 { 
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
color: #666; 
background-color: transparent; }

Illustration 1: A simple type selector

The results are in Image 1.
Headings 1
Image 1: Our h1 rule

The rule in Illustration 1 would make all instances of the h1 element assume the properties and values we have declared within the rule . We have simply declared that all instances of our h1 element will comprise of a set of fonts. They will be dark gray in colour and the background will be transparent.

Group Type Selectors

  1. Add the following (h2 – in red) to headings.css:
h1, h2{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
color: #666; 
background-color: transparent; }

Illustration 2: Grouping our selectors

In Illustration 2, I have added a comma immediately after the h1 selector and then I added an h2 selector. The results are in Image 2.

grouping headings
Image 2: Our h1, h2 rule

We can see from the image above that our h1, h2 rule has completed the styling we set for both our h1 and h2 elements; this is pretty cool. What we have done is separate our type selectors with a comma. What this means is that each selector in the rule will be styled exactly the same, just as if they had been written individually. This means we can use this technique to declare the common properties that exist within each of our elements.

  1. Add the following (h3, h4, h5, h6 – in red) to headings.css:
h1, h2, h3, h4, h5, h6 {
  font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
  color: #666;
  background-color: transparent;
}

Illustration 3: go crazy!

If we are using all those h elements, and they fit into our generic rule , then this is the best thing to do. No sense in re-writing the rule multiple times when just the once will do.

Preview in the browser:


Image 3: Our h1 to h6 generic styling

We see the styling has been applied to all our h elements, from h1, right through to h6.

Setting The Specifics

Now that we have seen how we can group our type selectors, and therefore reduce the amount of code we need to type – not to mention that we can now maintain our CSS easier – we can look at setting the specifics for our h elements.

  1. Add the following code to headings.css
h1, h2, h3, h4, h5, h6{ font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; 
color: #666; 
background-color: transparent; } 
h1{font-size: 1.2em;} 
h2{font-size: 1em;} 
h3{font-size: 0.9em;} 
h4{font-size: 0.8em;} 
h5{font-size: 0.7em;} 
h6{font-size: 0.6em;}

Illustration 4: Sizing our h elements

Let’s take a look at how our CSS in Illustration 4 is rendered by the browser:


Image 3: Our h elements are now sized

In Illustration 4, I have set a size for each of the h elements we have been working with: h1 to h6. What if we decided that all our h elements now require a margin of 25px to the left, to conform to the layout we have in mind for our page? Well we can easily accomplish this now by revisiting the generic rule . We need only add the margin property we require in a single location to affect all our h elements.

By writing our CSS in this manner we are giving ourselves options. We have the ability to add properties into the individual rule we have created for our h elements – if the rule is only required by that specific element. We also have the ability to go back to our generic rule to add any properties that are required by our h elements on a global basis.

Specificity

The lower the rule in our style sheet the greater the importance of the rule – that is, the closer it is to the actual content that is to be styled – this provides us with further options. Should our client request one day that all the h3 elements be red in colour, we can simply add that value to the rule for that specific element, as shown in Illustration 5.

  1. Add the following (color: red; – in red) to headings.css.
h3 {
font-size: 0.9em;
color: red; }

Illustration 5: Making the h3 elements red in colour

Make that change in your test page and preview it in your browser. You will notice the colour of your h3 is now red, while all the other h elements are unaffected, as we would expect.


Image 4: Our h3 element is now red

As you can see from these simple examples, it is easy to build on each of the individual rule. The generic rule should be at the top of your style sheet to prevent it overriding your individual rule settings. Try moving the generic rule to the bottom of your style sheet and see how the gray colour in that rule overrides the red colour in the h3 rule .

Conclusion

In this tutorial, we have learned that a type selector will style all instances of its type on every page the CSS is linked to. We have also seen how we can group our selectors. Grouping makes the maintenance of our style sheets much easier. Grouping condenses our rule, makes everything more manageable and easier to read.

This grouping is not limited to type selectors. Try experimenting with what we have covered here and see how far you can go. We briefly looked at the cascade and saw how a greater importance is placed on a rule when it is lower in the style sheet. It will always win out against a rule that is higher in the style sheet with the same selector.

Classes

Custom CSS (Classes) Selectors

Steps to Success

  1. In your code editor, open a new file.
  2. Add the following code:
    <html> 
     <head> 
      <title>advanced styles</title> 
      <link href="stepscss/classes.css" rel="stylesheet" type="text/css" /> 
     </head> 
     <body> 
      <table border="0" cellspacing="0" cellpadding="1"> 
       <tr> 
        <td>Advanced stylesheet example!</td> 
       </tr> 
       </table> <br/> 
       <table border="0" cellspacing="0" cellpadding="1" class="alttable"> 
         <tr> 
         <td>Advanced stylesheet example!</td> 
        </tr> 
      </table> 
     </body> 
    </html>

     

  3. Save as classes.html in the steps folder
  4. In your code editor, open a new file and copy the following style rules into it:
    /* CSS Document */ 
    
    body { 
    font-size: 1em; 
    background: #FFFFFF; 
    color: #000000; 
    font-family: verdana, arial, ms sans serif; } 
    
    table { 
    border-right: #000000 1px solid; 
    padding-right: 1px; 
    border-TOP: #000000 1px solid;
    padding-left: 1px;
    margin: 0px; 
    border-left: #000000 1px solid; 
    color: #000000; 
    border-bottom: #000000 1px solid; 
    background-color: #c0c0c0; } 
    
    .alttable { border-right: #FF0000 2px dashed;
    border-TOP: #FF0000 2px dashed; 
    padding-left: 3px; 
    FONT-SIZE: 8pt; 
    border-left: #FF0000 2px dashed; 
    color: #FFFF00; 
    border-bottom: #FF0000 2px dashed; 
    background-color: #000000; }
  5. Save as classes.css in the stepscss folder
  6. Preview in a browser.

Classes code

This example brings “classes” into the equation. If you create a set of rules for the <table> tag – what happens if you want to create two tables with different appearance?

The answer is to use a class. Classes are prefixed with a full period (.) and the name of the class can be whatever you decide. .alttable is the class used in the above example. When the browser reads the class=classname part of the table tag, it will break away from the standard table style declarations. It will jump to the .alttable rules and use those.

Classes mean that elements can be individualized, yet still use the formatting from an external css file. Thus, they are very useful and important.

The Box Model

The CSS Box Model

All HTML elements can be considered as boxes. In CSS, the term “box model” is used when talking about design and layout.

The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model:

Box ModelExplanation of the different parts:

  • Content – The content of the box, where text and images appear
  • Padding – Clears an area around the content. The padding is transparent
  • Border – A border that goes around the padding and content
  • Margin – Clears an area outside the border. The margin is transparent

The box model allows us to add a border around elements, and to define space between elements.

Example

div {
width: 300px; 
border: 25px solid green; 
padding: 25px; 
margin: 25px; 
}

Divs and ids

Using the div element and the id attribute for page layout

All the work we have done so far has left us with a vertical layout of our web pages.

How do the experts do it? How are they able to have content sit beside each other in a wonderful, colourful layout?

The pros use a combination of the div element and the id selector in both the HTML and the CSS.

The Mighty div Element

The div element gives structure and context to any block-level content in the document. Each div element becomes a generic block-level container for all content within the required start and end tags. As we will see, The div tag is a powerful generic element well suited for being used as a container within our Web page. This turns it into a good candidate for creating sections or divisions (hence “div“) of Web documents.

The id Selector

The id selector is similar to the class selector. The id selector provides us with the opportunity to uniquely target these containers and apply rules to them.

The difference between ids and classes

ids must be unique. Only one unique id per HTML file. If there was an id called footer. It can only be used once as an attribute of the div element.

Classes can be reused on a single page. If there was a class called box, it could be used within several HTML elements with in one HTML file

In the following steps, we use divs and ids to create containers/divisions/boxes for our content.

  • header,
  • nav,
  • section,
  • sidebar,
  • showcase,
  • container
  • footer

We will add background colors, padding, margins and a few other properties to each of these areas

We will use an external style sheet for your CSS.

Containers

Building Containers using divs, ids and CSS

Steps to Success – creating containers

  1. Create a new HTML file in your code editor.
  2. Add the following markup:
    <!DOCTYPE html> 
    <html> 
     <head> 
       <title></title> 
     </head> 
     <body> 
       <header id="main-header"> 
         <div class="container"> 
         </div> 
       </header> 
         <section id="showcase"> 
           <div class="container"> 
           </div> 
         </section> 
       <div class="container"> 
         <section id="main"> 
         </section> 
         <aside id="sidebar"> 
         </aside> 
       </div> 
      <footer id="main-footer"> 
      </footer> 
     </body> 
    </html>
  3. Save as containers.html (in steps of course!)
  4. Add in the following code in orange in to the sections below.
  5. Add the following markup:
<!DOCTYPE html> 
<html> 
 <head> 
   <title>My Website</title> 
 </head> 
 <body> 
   <header id="main-header"> 
    <div class="container"> 
      <h1>My Website</h1> 
    </div> 
   </header> 
   <section id="showcase"> 
    <div class="container"> 
      <h1>This is my Main Showcase Section</h1> 
    </div> 
  </section> 
   <div class="container"> 
    <section id="main"> 
     <h1>Welcome</h1> 
      <p>This is where you will put in the main content about your website and yourself.</p> 
    </section> 
   <aside id="sidebar"> 
     <p>This is the sidebar content that will float to the right of the page. </p> 
   </aside> 
  </div> 
  <footer id="main-footer"> 
     <p>Copyright © 2018 My Website</p> 
  </footer> 
 </body> 
</html>

The Division Element

We have put the content into containers using the division element (div).

Divisions, like paragraphs are also block elements; they can contain content. Therefore divisions must have an opening and closing tag.

The attribute id defines the selector. In the html code you just put in to your container.html file has a number of selectors and id’s present.

    1. Create a file in your code editor and add the following code:
body{ 
background-color:#f4f4f4; 
color:#555; 
font-family:Arial, Helvetica, sans-serif; 
font-size:16px; 
line-height:1.6em; 
margin:0; 
} 

.container{ 
width:80%; 
margin:auto; 
overflow:hidden; 
max-width: 1000px; 
}

 #main-header{ 
background-color:coral; 
color:#fff; 
} 

#showcase{ 
background-color:DodgerBlue; 
background-position:center right;
 min-height:300px; 
margin-bottom:30px; 
text-align: center; 
} 

#showcase h1{ 
color:#fff; 
font-size:50px; 
line-height: 1.6em; 
padding-top:30px; 
} 

#main{ 
float:left; 
width:70%; 
padding:0 30px; 
box-sizing: border-box; 
} 

#sidebar{ 
float:right; 
width:30%; 
background: #333; 
color:#fff; 
padding:10px; 
box-sizing: border-box; 
} 

#main-footer{ 
background: #333; 
color:#fff; 
text-align: center; 
padding:20px;
margin-top:40px; 
}

Notice:

      • id selector is defined by the # symbol within our style sheet, and by the use of the id attribute within our HTML document – for example id=”sidenav”.
      • body selector is set to 0 for the padding and the margin. Usually the margin and padding are set to the browser default if not specifically set to 0.
    1. Save this file as layout.css in the stepscss folder.
    2. Link to the external style sheet, layout.css in the <head> element of containers.html using the following markup:
<link href="stepscss/layout.css" rel="stylesheet" type="text/css" />
  1. Save both files and preview in a browser
    Notice the page is split into coloured divisions or containers.

Now we can start playing with the layout. We want a navigation menu that is across the top on the left.
In your containers.html file copy and past the following code beneath the </header> closing tag and before and <section is=”showcase”> showcase tag.

<nav id="navbar">
  <div class="container"> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">About</a></li> 
     <li><a href="#">Services</a></li> 
     <li><a href="#">Contact</a></li> 
   </ul> 
  </div> 
</nav>

This section of code is simply an unorderlist outlined by the ul tag and each li item. As you can see we have not linked the tabs to any pages (#) but that is easily done later on.

Once you have done that in the containers.html file save it and copy the following code in your layout.css file

#navbar
{
  background-color:#333;
  color:#fff;
}

#navbar ul
{
  padding:0;
  list-style: none;
}

#navbar li
{
  display:inline;
}

#navbar a
{
  color:#fff;
  text-decoration: none;
  font-size:18px;
  padding-right:15px;
}

We added this section of styling to the layout.css page so we could start to style our navigation bar.

  1. The first #navbar {css} defines the background color and font color.
  2. The second #navbar ul {css} defines the padding and layout of the unorderlist. The list-style: none; code removes the bullet points.
  3. The third #navbar li {css} defines the list items to go inline (to the right) not vertical
  4. The fourth #navbar a {css defines the color of the menu items, font size as 18px, and padding between each item to be 15px.

The following diagram helps visualize where everything is connected.

layout

Basically that is how the pros do it but these days, even the pros let Dreamweaver do most of the work for them! We’re almost there!

Background Images

Let’s do as the pros do and add a background image.

The first thing you need to do is to save this image. Right click on the image below and save it as showcase.jpg in your images folder. Remember we are still working out of our steps folder NOT myportfolio.

showcase image

In your layout.css file copy the following code and paste is beneath the last css element.

#showcase{ 
background-image:url('../images/showcase.jpg'); 
background-position:center right;
min-height:300px; 
margin-bottom:30px; 
text-align: center; 
}

Make sure you save your layout.css files and preview them.

shocase image example

MyPortfolio

Now applying this to myportfolio

You have completed all of the tasks required for your steps site for this module. You will now start working on the myportfolio site. Make sure to close all of the files related to the steps and apply all of the following instructions on this page to the myportfolio site.

Next Steps

  1. Open index.html from the myportfolio folder.
  2. You should also open up mystyles.css from the mycss folder.
  3. Add all of the div tags header, nav, section, sidebar, showcase, container, footer to divide your HTML as we just did in Steps to Success.
  4. Remember how we got the divs to work , you will need to copy the CSS from the layout.css file to make it all work.
  5. Use that file structure as the basis for you pages and simply customize the content within each page.
  6. In the navigation, put in your myportfolio pages and connect them all.

Have fun and make a great website

An Example of your contact page could look something like this.

Contact Page

Learning Checkpoint

You have done quite a lot of coding and created a number of items. Let’s check to see if you have done it all correctly.

In your steps folder you should have

  1. index.html
  2. headings.html
  3. table.html
  4. commentout.html
  5. css.html
  6. containers.html
  7. classes.html

In your steps/stepscss folder you should have

  1. styles.css
  2. headings.css
  3. layout.css
  4. classes.css

In your steps/images folder you should have

  1. 1 image -fanshawe1.png
  2. showcase.jpg

If you do not see these files in your folders go back and make sure you are saving them in the correct spots. Move them to the correct folder if you need to.

In your myportfolio folder you should have

  1. index.html
  2. contact.html
  3. employment.html
  4. education.html

In your myportfolio/mycss/ folder you should have

  1. mystyles.css

In your myportfolio/images folder you should have

  1. 1 image -labeled however you have it
  2. showcase.jpg

If you do not see these files in your folders go back and make sure you are saving them in the correct spots. Move them to the correct folder if you need to.

Webworkshop Final Review

So far you have….

  • Learned the basics of HTML coding
  • Learned the basics of CSS coding
  • Learned how to link and connect web pages
  • Learned how to change and modify the pages you create

You don’t have to code  from scratch. Copy and paste if that is easier for you.

Don’t be afraid to reuse and recycle code.

Experiment and have fun. Once you have gotten your css to the point where you are happy, you are done with your webworkshop!!!

Once you have completed these final myportfolio instructions, you are ready to zip your project and submit to the FOL dropbox. You should zip your entire webworkshop folder, name the zip file ‘webworkshop’ if it doesn’t receive that name automatically, and submit to the FOL dropbox before the deadline.