html and css readings

8
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. Industrial Technology Kelly Bauer

Upload: kelly-bauer

Post on 19-Mar-2016

218 views

Category:

Documents


1 download

DESCRIPTION

A self paced HTML and CSS tutorials

TRANSCRIPT

Page 1: HTML and CSS Readings

 

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.    

Industrial  Technology  

 

K e l l y   B a u e r  

Page 2: HTML and CSS Readings
Page 3: HTML and CSS Readings

Bauer  IND  TECH:  HTML/CSS   3    

 

HTML  HTML  is  now  used  basically  to  hold  content  (ie,  text,  images  etc)  with  style  being  handled  by  CSS.  This  separation  of  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  supported  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>

 

Page 4: HTML and CSS Readings

A  basic  rule  of  HTML  is  that  anything  that  is  between  a  start  tag  <b>  and  an  end  tag  </b>  will  have  that  tag  apply  to  it.    

 

Eg.    

Which text will be <b> bold </b>?

Answer:    

Which  text  will  be  bold?  

The  tags  are  fairly  logical:    

<p> is a paragraph </p>

<br /> is a line break that isn’t a paragraph (ie, a carriage return)

<img src=”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 tag…that is, that they don’t 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.  

Page 5: HTML and CSS Readings

Bauer  IND  TECH:  HTML/CSS   5    

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

Page 6: HTML and CSS Readings

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/  

Page 7: HTML and CSS Readings

Bauer  IND  TECH:  HTML/CSS   7    

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:

<p id="Example1">Whatever is defined in between these two paragraph tags will be part of the Example1 ID </p>

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:

<p class="Example2" >Anything within this paragraph would be part of the example2 class. </p> <p class="Example2" >But this paragraph would also have anything within the paragraph would be part of the example2 class. </p>

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:

• Business Name needs to be an ID with font green and a black background • Slogan needs to be an ID with Italics, bold, and a border • The lorum ipsum text needs to be part of a class, with a different font • 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  

Page 8: HTML and CSS Readings

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