To link the css style sheet - external css one needs to link the css style sheet to html via a link statement.

<link>  This is used in an HTML document to tell it where to find the css file. Link does not need a closing tag.  It is found in the head element.  It has three attributes. the rel, href, and type.   The href specifics the path to the css doc.  The type attribute specifics the type of element being linked to for style sheets it is always text/css.  The rel attribute specifics the relationship between the html and css.  In this case it is always stylesheet.  The the statement would look like

<head>

<link href="/jm1/css/template.css" rel="stylesheet" type="text/css" />

</head>

 

 

 

Comments (0)

 <form> element  should always have an action attribute and will usually have a and id attributes also.

actions value is the URL for the page on that server that will receive the information in the form when it is submitted.

method to get the information can either be get or post.  In the get method the value from the form are added to the end of the URL specified in the action attribute. i.e.

GET METHOD

<form action="http://lindahagen.com/subscribe.php" method="get">

   <p>This is where the form controls would appear controlled by the php program</p>

</form>

POST METHOD


This method should be used if you are uploading a file, a lot of information, sensitive data such as a password, or interacts with a database.  In the above example the method="get" would be replaced with method="replace".

id attribute should be distinct for the form on the site.

The default method if none is listed is get.

<INPUT>

The input element of forms has a type attribute such as text and a name.  The name identifies the form control. Each form control has a different name. 

type attribute 

  • type="text"  is one line of text
  • type="password" creates a text box that acts just like a single-line text input, except the characters are blocked out
  • type="radio" in addition to name there will be a value which shows next to the circle and one of the choices will have a checked="checked" attribute.  Only one radio button should have the checked attribute. <input type="radio" name="books" value="title1" checked="checked" />     <input type="radio" name="books" value="title2" />
  • type="checkbox" user can select or deselect one or more options The name should be the same for all the buttons that answer that question. The values are the words that will show on the web site <input type="checkbox" name="books" value="title1" />     <input type="checkbox" name="books" value="title2" /> Checked is not required but can be used if wanted.

example of an input statement

<form action="http://..../...php>

<p>Username:

<input type="text" name="username" />

</p>

</form>

<textarea>

<textarea> element is used to create a mutli-line text input.  Does not use the word input. Need a opening and closing tag. Any text that appears between the opening and closing tags will appear in the text box when the page load. 

<form action="http://..../...php>

<p>Was this site useful</p>

<textarea name="eval">Place comments here</textarea>

</form>

RADIO BUTTON

 

 

 

Comments (0)

Table represents information in a grid. They have rows and columns. Tables are written out row by row. <table> starts the table, <tr> is the beginning of a row, </tr> is the end of the row, <td> is the beginning of the cell in that row and </td> if the end of that cell.

<table>

  <tr>

    <td>row 1 cell 1</td>

    <td > row 1 cell 2 </td>

    <td > row 1 cell 3 </td>

  </tr>

  <tr>

    <td>row2 cell 1</td>

    <td>tow2 cell 2</td>

     <td>tow2 cell 3</td>

  </tr>

</table>

This would produce a two column two row table.  Ie., 2 by 2.

Table Headings


Table headings are part of a row.  So they go between <tr> and </tr>  In the above example there are three columns, If I wanted the head to appear above each column I would add right after <table>

<table>

  <tr>

    <th>first heading</th>

    <th>second heading</th>

    <th>thrid heading</th>

  </tr>

  then the other rows of data.

</table>

If a cell has no data then it should still be represented as an empty cell <th>text</th> or if data <td>data</td> where data here is a blank space.

The scope attribute can be used for either a heading for a row or colum

row heading may be <th scope="row">row heading</th>

column heading may be <th scope="column">column heading</th>

SPANNING COLUMNS


If you want a <th> or <td> to cover more then one column the attribute colspan should be used

<td colspan=2>data</td> will combine 2 columns for that row. More then 2 columns may be combined in any row and can be different for each row.

this can also be used with <th>

SPANNING ROWS

rowspan works the same as colspan except it combines rows together.

Thus, one row of cells will be shorter then the preceding row of cells since in one of the columns the two or more rows may be colapsed into one cell.

i.e. <table>

      <tr>

         <td>data 1-1</td>

         <td>data 1-2</td>

         <td>data 1-3</td>

     </tr>

     <tr>

         <td>data 2-1</td>

         <td rowspan="2">data 2</td>

         <td>data 3</td>

     </tr>

     <tr>

         <td>data 1</td>

         <td>data 3</td>

     </tr>\

  </tr>

</table>

   See how row 3 has only two elements listed and row 1 and 2 have 3.  because cell 2-2 and cell 3-2 were combined.

Below is used for long tables only:

the <thead> headings of the table should sit inside this element

<tbody> the body of the data should sit inside this element

<tfoot> the footer information should be inside this element.

This allows for tables that cover more then one page to carry the headers over to the next page.  Does not work in all browsers. Not needed for short tables.

 

 

       

        

 

Comments (0)

<img> element


img is an empty element it has no closing tag.  the image information goes in as an attribute.  An example might be

<img src="/jm1/images/BlueFlower.jpg" alt="A blue flower" title="Blue flowers of Brisbane" />

the attributes are

  • src which tells the browser where to find the image file. 
  • alt provides a text description of the image if the image cannot be shown. This is used by screen reader software and search engines.  Should be an accrate description of the image content. The quotes can be left empty if no additional information is provided.
  • title can be used to provide additional information about the image. The quotes can be left empty if no title is provided.

Additional attributes can be used:

  • width="22 "  where the number is the number of pixels across for the image
  • height="22" where the number is the number of pixels tall for the image

height and width is being specified in css presently.

An image can be placed anywhere in the code.  At the beginning, middle or end of text.

Image resolution should be at 72 pixels per inch.

Transparent GIFs allow for 100% transparency.

PNGs allow diagonal or rounded edges or semi-opaque transparency or drop-shadows.

 

 <figure> new to HTML5


<figure> allows the image and the caption to be grouped together or be associated.  There can be more then one image inside the <figure> as long as they share the same caption.

<figure>

   <img="image/BlueFlower.jpg" alt="A blue flower" title="The blue flowers of Brisbane"  

  <br/>

<figcaption>The blue flowers of Brisbane cover the slopes of the mountains in Brisbane in the spring.</figcaption>

</figure>

Comments (0)


There need to be a target tag and a link tag.

The target tag might look like this

<body>

<a id='top'><a>

with content between the two <a>

The link tag might look like this

<a href="#top">Go to Top</a>

</body>


The  link only works if the user is far enough down the page that they would otherwise have to scroll up to the top of the page.

PAGE LINKS

links are created using the <a href="http://...>text the user will see to click on</a>   The link text goes between the opening <a> and the closing </a>

href attributes

     The full url takes one to another website href="http://lindahagen.com"

      Within a web site you can use a relative url 

             If the page is in the same folder then use the name of the file.

             If the page is in a different folder then within that folder the sub-folders would be listed.  href="/jm1/image/BlueFlower.jpg"  This file is in a image is a sub-folder of lindahagen.   href="/jm1/image/flower/BlueFlower.jpg"  is in a sub-sub-folder of lindahagen (lindahagen->image->flower)

             If the page is in a different folder that is not the sub-folder of the folder being referenced then ../ is used for every folder level one wants to go up. 

EMAIL LINKS


  To use a specific email address to mail to the href references a mailto:  href="mailto:This email address is being protected from spambots. You need JavaScript enabled to view it.">email to John doe</a>  this opens up the email program in compose or new.

 

TARGET NEW WINDOW OR NEW TAB


Adding the attribute of target to the element allows one to decide if it should be in the same window, new window or new tab.

A new window would be <a href="http:/www.lindahagen.com" target="_blank">new window</a>

To open over the site leave off the target <a href="http://www.lindahagen.com" target="_self">same window</a>

To open in a new tab <a href="http:/www.lindahagen.com" target="tab">new tab</a>  not sure if this will work.

 

PARTS OF A PAGE

 The id  attribute used to target any HTML element within a page that can be linked to.  It is used to link within a page.  It has to start with a letter. No two attributes can have the same value.   Such as <h1 id="top">title</h1>.  The <a> element is used to link with the id.  The href in the <a> starts with a #.  Thus, <a href="#top">Go to top of page</a> with take one to where the id="top".

If the link to a specific part of a page is on another page the href would look like following:  

<a href=http://lindahagen.com/#top">  or if on the same website same folder href="/jm1/images/BlueFlower.jpg"/#top"> or may use ../

 

Comments (0)