HTML and CSS Prereading

Industrial Technology
HTML/CSS Readings
The following is a general summary of how HTML and CSS work. It includes a number of code snippets and exercises to complete prior to the commencement of problem 3 of the preliminary course.
Kelly Bauer
HTML
HTML is now used basically to hold content (ie, text, images etc) with style being handled by CSS. This separationof content and style allows more flexibility for handling style changes and also makes the page more accessible for people with disabilities that use screen readers (further info). There are also more styling features available with CSS than HTML (see Zen CSS). HTML is an evolving language, with the current standard being XHTML, about to evolve into HTML 5.0 which will allow a higher standard of interactivity. There are a variety of tags (HTML features) that have evolved to become obsolete, which are no longer s upported by browsers. This means that your website, if it uses these tags, may not function as you hope. Different browsers also have different standards, so this can mean a very different design shown in one browser to the other. The basic structure of a webpage is: HTML document Head: Contains information about the page. (meta tags) For example, the keywords for the page, and information about the page. Body: Contains everything that is displayed on the page.
The basic structure of a webpage translates to:

<head> </head> <body> </body>
Bauer IND TECH: HTML/CSS 3
A basic rule of HTML is that anything that is between a start tag and an end tag will have that tag apply to it.
Eg.
Which text will be bold ?
Answer: Which text will be bold? The tags are fairly logical:
 is a paragraph is a line break that isnt a paragraph (ie, a carriage return) <imgsrc=filename.jpg width=100 height=50 /> is to insert an image in the same folder that is 100 pixels wide and 50 pixels wide. The end / in both br and img is because these two tags do not have an end tagthat is, that they dont wrap around another element.
Task
1. Look at http://www.w3schools.com/html/default.asp 2. Create a list of major tags that you would use.
CSS: Box Model

Read the information on the box model on this page. Look at the interactive diagram here
Task
1. Write two paragraphs explaining the box model and why it is important in web design.
Structure of a CSS Rule

Cascading style sheets have a particular structure that should be followed:
selector { property: value; property:value;}
A simple Rule
p { font-family:sans-serif; }
This rule redefines the tag as having a sans serif font rather than the general serif. This means that any text written in your HTML document that is defined by a tag will be in sans serif.
Adding Style
There are 2 ways to add a style to your page: Linking to the style sheet externally. The advantage of this is that it keeps the style seperate from the HTML. This way, all the style information is kept together and multiple pages can be linked to the same CSS. Putting the style in the Head of the HTML. This keeps the CSS within the HTML page. The advantage of this, is that you only one file needs to be stored, rather than two. Unfortunately , if you want to reuse the styles for another page, you have to copy and paste into the new HTML page. This also increases data redundancy, as if one page changes, the rest aren't updated automatically, as is the case with the external sheet
How to do it
Putting the style in the Head of the HTML
<head> <title>My HTML Page</title> <style type="text/css"> /* CSS in here */ </style> </head>
Linking to a style sheet externally

<head> <link rel="stylesheet" type="text/css" href="style.css" media="all" /> </head>
Example File
Task
1. Download the following Sample HTML page 2. Create a CSS page that redefines H1, H2 and the P tags 3. Attach the css to the HTML page 4. Test to see whether your page Validates
Further Information
Official CSS Reference http://www.w3schools.com/css/css_reference.asp Comprehensive list of resources http://www.w3.org/Style/CSS/
Classes and IDs

Often, you need to organise a website into more logical and relevant areas than just paragraphs and headings. For example, you may have a main heading, like the one on this page, which was not to be repeated. Another example of items not to be repeated would be business logos or slogans that you generally would not be repeated on the page. Items that are not repeated are IDs. On the other hand, you would have different sections of your website, that may not be directly located next to each other that are required to have the same formatting. These would be part of the same group and named with a class. You can group and name these sections as part of the same class and modify them using CSS.
How to give something an ID

It is first defined in the HTML:
Whatever is defined in between these two paragraph tags will be part of the Example1 ID 
The CSS would then read:

#example1 { background-color: white; }
How to name something as part of Class

Firstly, define in the HTML whereever something is required to be part of the class:
Anything within this paragraph would be part of the example2 class. But this paragraph would also have anything within the paragraph would be part of the example2 class. 
Then, in the CSS:

.example2 { background-color: white; }
Sample File
Task
1. Download the sample file 2. Create a CSS file and change the following properties using IDs and Classes: y Business Name needs to be an ID with font green and a black background y Slogan needs to be an ID with Italics, bold, and a border y The lorumipsum text needs to be part of a class, with a different font y The Specials section needs to be an ID, with a black border and a red background.
Further Resources
CSS Tutorial - ID vs Class Your HTML Source
Links
Links in HTML are an ugly blue underline that does nothing for good design. CSS makes it easy to change links sitewide, and also change based on specific situations.
a {} rules put in here will specify the normal state of the link a:hover {} rules put in here will specify the rollover state a:visited {} Rules in here will specify the visited state
An example. This is the code that is used to change the links at the bottom of the page. Notice that when you rollover the links that they change colour. The a:visited has been set as the same as the a property so that if you revisit a page, it still looks the same.
a{color:#990000;} a:visited{color:#990000;} a:hover{color:#CC0066;}
You can also create different types of links attached to different classes on your page, which means that you can create navigation type menu systems. First, create a list of words that you wish to create a navigation bar out of in HTML:
<ul> <li class="menu" >home</li> <li class="menu" >page 1</li> <li class="menu" >Page 2 </li> </ul>
Then, code the HTML to refer only to the menu class:

a.menu {font-weight:bold; font-size: 125%; color: #006633 text-decoration: none } a:visited.menu{font-weight:bold; font-size: 125%; color: #006633 text-decoration: none } a:hover.menu{color: black; text-decoration:underline}
Task
1. Create a website with 2 separate types of links: A menu bar and a normal link.
Further Information
Accessible Websites: Rollovers Listamatic: One list, many ways

HTML and CSS Prereading

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML and CSS Prereading

Uploaded by

Copyright:

Available Formats

Industrial Technology

The basic structure of a webpage translates to:

Bauer IND TECH: HTML/CSS 3

CSS: Box Model

Structure of a CSS Rule

Bauer IND TECH: HTML/CSS 5

Linking to a style sheet externally

Classes and IDs

How to give something an ID

The CSS would then read:

How to name something as part of Class

Then, in the CSS:

Bauer IND TECH: HTML/CSS 7

Then, code the HTML to refer only to the menu class:

You might also like