Documents
Resources
Learning Center
Upload
Plans & pricing Sign in
Sign Out

html_css

VIEWS: 7 PAGES: 18

									                         (X)HTML	
  and	
  CSS	
  

What	
  are	
  HTML	
  and	
  XHTML?	
  
HTML stands for Hypertext Markup Language. It was developed in the late 80s and early
90s as a way to for scientists to share scientific papers. The currently accepted version is
HTML 4 which was released in 1997.Although a few changes were made in the
following in 1999, HTML has remained largely the same since for the past 13 years.

XHTML is eXtensible Markup Language and was developed in 2000. XHTML is
essentially HTML 4 with stricter rules as adopted from XML. It is best to use the strict
rules of XHTML over the relaxed rules of HTML when possible. Stricter rules mean that
all browsers will display your webpage in nearly the same way. Relaxed rules of HTML
allow someone developing a website to publish a page which is “incomplete.” It will
display well on some browsers, but poorly on others.

In 2008, HTML 5 was published as a working draft. It is currently accepted on Chrome
and Safari browsers as well as all popular smartphone and tablet browsers. HTML 5
adopts many of the strict rules of XHTML and is the product of a combination of HTML
5 and XHTML 2.0.

This tutorial deals primarily with HTML 4/XHTML 1.0. For information on the additions
and changes made in HTML 5, please see the HTML 5 tutorial.

Text	
  Editors	
  v.	
  Word	
  Processor	
  
When editing code such as HTML and CSS, you need to use a text editor and not a word
processor. A word processor, such as Microsoft Word, formats text as you type. A saved
document from a word processor saves formatting along with the text. A text editor only
saves the text. You must use a text editor to code in HTML or CSS or your webpages will
not work.
The most well-known text editor is Adobe Dreamweaver. However, it is expensive. One
of the best free text editors for Macs is TextWrangler and one of the best free text editors
for PCs is Notepad++.

	
  
	
  
	
  
	
  
	
  
Definitions	
  
Element—	
  
An individual component of HTML or XHTML. These include the HTML body,
paragraphs, line breaks, tables, etc. A document is broken up into multiple elements.

Tag—	
  
Tags mark the beginning and ending of elements. An opening tag for a paragraph looks
like this: <p> and a closing tag looks like this: </p>. Similarly, an opening tag for a
table looks like this: <table> and a closing tag looks like this: </table>.
Notice that the tag name “p” or “table” is in both the opening and closing tags. In
XHTML, the tag name must be lower case. Both opening and closing tags are
surrounded by angle brackets “ < >”. However, the closing tag has a forward slash “/ ”
after the opening angle bracket.
Later in the tutorial we will discuss what tags you can use in your webpage. Just keep in
mind the structure of opening and closing tags.

Nesting—	
  
Nesting refers to how different elements in html interact. They are nested together. For
example, inside the body of a webpage, you might have two paragraphs. The code would
look like this:

<body>
     <p>This is paragraph 1.</p>
     <p>This is paragraph 2.</p>
</body>

Notice that we have three elements in this snippet of code, a body and two paragraphs.
The paragraphs are in between the body opening and closing tag. Similarly, the paragraph
content is in between the paragraph opening and closing tags.

If the code were written as the following, it would not work:

<body>
     <p>This is paragraph 1.</p>
     <p>This is paragraph 2.
</body>
</p>

Why, you ask? Because elements must be nested, whatever element was opened first,
must be closed last. Think of elements as Russian nesting dolls, they must fit into each
other.

On a side note, it is convention to press tab every time a new element begins. However,
because text editors save only the content and not the formatting, to a computer, this:
<body>
     <p>This is paragraph 1.</p>
     <p>This is paragraph 2.</p>
</body>

Looks like this:

<body><p>This is paragraph 1.</p><p>This is paragraph
2.</p></body>
But obviously, the first one is easier for humans to read. So use tabs to prevent
frustration.

Container	
  Element—	
  
A container element is an element that contains content of any kind. Most elements in
XHTML are container elements, such as body (<body></body>) and paragraph
(<p> </p>).

Stand	
  Alone	
  Element—	
  
A stand alone element is an element that does not contain content. There are only a few in
XHTML. One of the most popular is the line break. <br></br>
Because nothing will ever go between the opening and closing brackets, a short cut has
been developed: <br />. This format opens and closes the element in one tag.

Attribute—	
  
Each element can have a variety of attributes which can modify the element. These can
include style attributes, identification attributes, and language attributes.

Value—	
  
A value is the value assigned to a given attribute. Values are provided in double
quotation marks after the attribute. For example, if a paragraph in an English language
website is written in French, you might want to identify that. The attribute is language
and the value is French.

<p lang = “fr”>C’est la vie</p>

Here the paragraph opening tag <p> has an attribute lang (language) with a value
“fr” (French). The closing tag is normal. Whenever you add attributes, do so within
the opening tag after the tag name but before the closing angle bracket. Always include
an equals sign = and surround the value in double quotation marks.
Getting	
  Started	
  
Every XHTML document must begin with this code.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">

<html xmlns = "http://www.w3.org/1999/xhtml" >
     <head>
          <meta http-equiv = "Content-Type” content =
          "text/html; charset=UTF-8" />

            <title>Untitled Document</title>
       </head>
       <body>

     </body>
</html>

The <!DOCTYPE> tells your browser that you are creating an XHTML document and
which XHTML elements you can use.

The <html></html> tags must surround everything in your webpage except the
<!DOCTYPE>.

Every html document must have a <head></head>. This is where you will include
any metadata, including the <title></title> which will appear at the top of your
web browser, or in the tab if you use a tabbed browser.

The <body></body> is where any content you want to appear on your website will go.

Whitespace	
  
If you create two paragraphs in the body, like so:

<body>
     <p>This is Paragraph 1</p>
     <p>This is Paragraph 2</p>
</body>
They will look like this in your browser:




If you type, the following in your text editor
<body>
        <p>This                     is Paragraph 1</p>
        <p>This is




     Paragraph 2</p>
</body>

This is what will appear in your browser:




Notice that the addition of white space in your editor did not change the format in the
browser. This is because the text editor, once again, does not save format. It only saves
the content. Therefore any extra spaces are squished into one space, which is why the
spaces between the words appear but the extra spaces do not. You can add whitespace
one of two ways.
The first is to use the code &nbsp; which stands for “non-breaking space” this will add
space horizontally (be aware that some browsers ignore multiple non-breaking spaces.
The second is to use the line break tag <br/> which will add space vertically.

So, if you type:
<body>
        <p>This is Paragraph &nbsp; &nbsp; 1</p>
        <p>This is
        <br/><br/><br/>
        Paragraph 2</p>
</body>
Your browser will display the following:
The paragraph element <p></p> automatically includes space between paragraphs as
seen above. If you do not want to include space between your paragraphs of content,
wrap all your content in one paragraph tag and use the line break <br/> in between your
paragraphs.
<body>
       <p>
            This is Paragraph 1<br/>
            This is Paragraph 2
       </p>
</body>




Phrase Markup Elements

While most the time you will want to have regular text for your content, occasionally you
will want to emphasize a word or a phrase. (If you are going to emphasize larger chunks
of content, a CSS class would be a better option).

The following tags are the most commonly used phrase markup elements:
Name        Tags            Markup                   Result
Emphasis <em>               <p>This is the
            </em>           <em>emphasis</em>
                            tag.</p>
Strong      <strong>        <p>This is the
            </strong> <strong>strong
                            </strong>
                            tag.</p>
Quote       <q>             <p>This is the
            </q>            <q>quote</q>
                            tag.</p>
Bold        <b>             <p>This is the
            </b>            <b>bold</b>
                            tag.</p>
Italic      <i>             <p>This is the
            </i>            <i>italic</i>
                            tag.</p>
Big         <big>           <p>This is the
            </big>          <big>big</big>
                            tag.</p>
Strike      <s>             <p>This is the
            </s>            <s>strike</s>
                            tag.</p>
Small       <small>         <p>This is the
            </small>        <small>small</sma
                            ll> tag.</p>
Underline <u>               <p>This is the
          </u>              <u>underline</u>
                            tag.</p>

Note that emphasis and italic appear the same and strong and bold appear the same. This
is because <em> and <strong> let the browser choose how to emphasize or strengthen
the text. Most browser do use italic and bold, respectively; however, some use other
styles such as underline.

The latter six tags (bold through underline) cannot be rendered in browser designed for
those with visual or mobility impairments. Therefore, <em>, <strong>, and <q>
should be used most often when possible.

Headings	
  
Headings provide structure to your document. Automated tools such as search engines
use headings to determine the organization of your document. Think of headings as an
outline. For example, an outline of a book might look like this:

Book Title
   1. Chapter 1
   2. Chapter 2
   3. Chapter 3
           a. Sub-section 1
           b. Sub-section 2
   4. Chapter 4

If you were to turn this into an HTML page, the code would look like this

<h1>Book Title</h1>
     <h2>Chapter 1</h2>
     <h2>Chapter 2</h2>
     <h2>Chapter 3</h2>
          <h3>Sub-section 1</h3>
          <h3>Sub-section 2</h3>
     <h2>Chapter 4</h2>
XHTML has eight heading styles <h1> through <h8>.
Note, however, that for the structure of your page to be understood, only one <h1> can be
used per webpage.
If you do not like the default style of the headings, you can change it within your CSS file
without interfering with the structure of your webpage.

List	
  
	
  
Unordered	
  Lists	
  
Unordered lists are bullet pointed lists. To start an unordered list, use the <ul> tag.
Each item in your list must be surrounded be the list item tag <li>.
<ul>
       <li>One</li>
       <li>Two</li>
       <li>Three</li>
</ul>

You can nest lists also:

<ul>
     <li>One</li>
     <li>Two</li>
          <ul>
               <li>One</li>
               <li>Two</li>
               <li>Three</li>
          </ul>
     <li>Three</li>
</ul>

Unordered lists have three styles, disc, circle and square. The default first level is disc
(the solid black circle you see). The default second level is circle (the open circle you see
in the second example). The default third level is square (a solid black square). If you
would like the style to be different, you must call the attribute type and give it the desired
value.

<ul type = “square” >
	
  
	
  
	
  
	
  
	
  
	
  
Ordered	
  Lists	
  
Ordered lists are numbered lists and function similarly to unordered lists, but begin with
<ol>

<ol>
     <li>First</li>
     <li>Second</li>
     <li>Third</li>
</ol>

Like unordered lists, you can also nest ordered lists.
<ol>
       <li>First</li>
       <li>Second</li>
              <ol>
                       <li>First</li>
                       <li>Second</li>
                       <li>Third</li>
              </ol>
       <li>Third</li>
</ol>

The default style for the ordered list is Arabic numerals. You can change the style to
upper or lower case Roman numerals and the upper or lower case alphabet by setting the
value of the attribute type.

<ol    type   =   “I”   >
<ol    type   =   “i”   >
<ol    type   =   “A”   >
<ol    type   =   “a”   >

Table	
  
Tables are used to show tabular data.

Ten years ago, people tables to align visual elements of the page, but it is an infinitely
better practice to use CSS to design your webpage layout.

Tables have five elements:
Table: <table></table>
Caption: <caption></caption>
Table Row: <tr></tr>
Table Header Cell: <th></th>
Table Data Cell: <td></td>
The Table tag must surround all other elements.
The Caption tag is optional and should be placed first or last in the table.
The Table Row tag begins and end each row of the table, including the header row.
The Table Header Cell tag surrounds each cell in the header row.
The Table Data Cell tag surrounds all cells not in the header row.

Below is the code for a table with 3 columns, 1 header row, and 2 data rows:
<table>
       <caption>My Table</caption>
       <tr>
               <th>One</th>
               <th>Two</th>
               <th>Three</th>
       </tr>
<tr>
               <td>A</td>
               <td>C</td>
               <td>E</td>
       </tr>
<tr>
               <td>B</td>
               <td>D</td>
               <td>F</td>
       </tr>
</table>

It is best to use CSS to customize table colors, borders, and spacing.
	
  
Images	
  
Images are easily added to your web page through the image tag <img>. A typical image
tag, complete with attributes would look like this:

<img src = “picture.jpg” alt = “Picture of Sea Otter”
title = “Sea Otter at New York Aquarium” width = “256”
height = “320” />

The src attribute identifies the source of the image. This can be any jpg, png, gif, or
bmp file on your website or it could be an image on the web already, in which case the
src attribute would look likes this:
“http://www.somewebsite.com/picture.jpg”

The alt attribute is the alternative text for the image. This is usually a short
description of the image. It will display if the image does not load for whatever reason. In
addition, in browsers for visually impaired persons, the alternative text informs the user
what the image contains.
The title attribute is the title of the image as discoverable by search engines and will
appear if a user hovers the mouse over the image.

The width and height attributes define the width and height of an image. Defining
only the width or only the height will force the other attribute to scale.

Other attributes for <img> are:
align, which can have the values “left”, “right”, or “center”
hspace, which has a numeric value. This value determines how much horizontal space
is between the image and the text of your page. A value of “0” will provide no space and
a value of “10” will provide a buffer of 10 pixels.

Anchor	
  Tag	
  
The anchor tag <a></a> is used to create hyperlinks in HTML.
The most commonly used attribute is href, which is the hypertext reference attribute
and refers to whatever page you are linking to.
Like images, the anchor tag needs alternative text (alt) and a title (title).
A typical anchor tag looks like this:

<a href=”http://www.google.com” alt= “Link to Google” title
= “Google Search Engine” >Click here to go to Google</a>




The link above is an example of an absolute filepath. It starts at http:// and continues on
to the name of the file.

In your webpage, it is likely that you will have multiple files in multiple folders. The best
way to link to files in your website is through a relative filepath.

Imagine a website for a college that has three departments: academics, athletics, and
administration. Each of these departments has multiple sections, such as mathematics,
literature, water polo, football, Dean’s office, and student organizations.




Below is a possible file structure for our website:
                                              Imagine	
  
                                               College	
  


    academics	
               adminstration	
            athletics	
               index.html	
  




      mathematics.html	
              dean.html	
            water_polo.html	
  




        literature.html	
           registrar.html	
          football.html	
  




                                  student_organizati
        chemistry.html	
                                       soccer.html	
  
                                      ons.html	
  


To navigate between all these pages, we need to use relative urls. There are three basic
types of relative urls:
    1. Navigate to a file on the same level (e.g. literature.html to mathematics.html)
    2. Navigate to a file on a lower level (e.g. index.html to water_polo.html)
    3. Navigate to a file on an upper level (e.g. dean.html to index.html)
All other links are a combination of these three (e.g. soccer.html to registrar.html)

   1. If you are on literature.html and want to navigate to mathematics.html, your link
       will look like this:
       <a href = “mathematics.html”>
   2. If you are on index.html and want to navigate to water_polo.html, you need to go
       into the athletics folder first, so your link will look like this:
       <a href = “athletics/water_polo.html”>
   3. If you are on dean.html and want to navigate to index.html, you need to get out of
       the administration folder first, so your link will look like this:
       <a href = “../index.html”>
   4. If you are on soccer.html and want to navigate to registrar.html, you need to get
       out of athletics and into administration, so your link will look like this:
       <a href = “../adminstration/registrar.html”>
Note that these rules apply to all relative file links including those used in the <img
src> attribute.
What	
  is	
  CSS?	
  
You may have noticed that we have yet to talk about style. Obviously, web pages include
more than content. Stylistic elements, such as colors, formatting, margins, and other
layout elements, are handled by CSS.

CSS is the acronym for Cascading Style Sheets. The word “cascading” refers to how
styles are inherited from one another. As we know, html and xhtml have nesting
elements. As a reminder, <body></body> surrounds all the content of your page while
<p></p> will appear between the body tags. Because body surrounds the paragraph,
any style we have set for the body, such as color or font, will also apply to the paragraph
tag (the style has “cascaded down”). The implications of this will become clearer as the
tutorial continues.

CSS	
  Syntax	
  
Although there are ways to apply CSS to an html document within the document itself, it
is best to create a separate file with the extension .css. By using one style sheet for your
entire style sheet

CSS styles are applied according to a particular syntax:

tag name{
  attribute: value;
}

Tag name refers to the html tag name, such as body, p, table, td, h1, etc. We
have encountered attributes before. Common attributes include color,
background-color, text-align, border, font-family, etc. Value is
the value of the attribute.

For any attributes referring to color, the value will be a hexadecimal number that signifies
a color. #FFFFFF is white #000000 is black.

For some attributes, there are only certain allowed values. In the case of text-align,
the possible values are left, right, center, and justify.

Finally, some attributes have numbers as their values. For example, border can have
any numerical value, which determines the width of a border.

	
  
	
  
	
  
Types	
  of	
  Style	
  Selectors	
  
In CSS, there are two kinds of style selectors. The first is the tag selector and the second
is the class selector.

Tag	
  Selector	
  
A tag selector style is a style that applies to an existing html tag. This applies a style to
any instance of a given tag.

body{
     background-color: #EDEDED;!
     font-family: Arial, Helvetica, sans-serif;!
     color: #333333;!
     padding-top: 20px;!
}!!

p{!
        text-align: left;!
        text-indent: 40px;              !
}

In the code above, styles have been defined for the body tag and the paragraph tag.
In the body, we have defined:
background-color, the color of the background of the webpage.
font-family, the font face used in the webpage. Usually three fonts are listed,
separated by commas. This tells the browser that if Arial is an available font, please
use it. If Arial is unavailable, use Helvetica, and if neither is available, use a default
sans-serif.
color, the color of the text used in the webpage
padding-top, the top padding between the beginning of the webpage and the
beginning of the content. You can define padding on bottom, top, left, and right
separately or all at once.
In the paragraph, we have defined:
text-align, the alignment of the text on the screen.
text-indent, the length of the indent of the first line in pixels.

Note that we did not define the font-family or color for the paragraph tag. We defined
this in the body and it “cascaded” down because <p></p> is always nested inside
<body></body>
Class	
  Selector	
  
While it is very handy to define styles on a tag level, occasionally you want more finite
control over the style of your webpage. Imagine a webpage that displays a scholarly
paper. The content would contain the title of the paper, the author name, the abstract, and
the content of the paper itself. If each of these elements were coded as paragraphs with a
<p></p> tag, there would be no visual distinction between the abstract and the content,
and the title. The solution to this is the class selector.

p{!
       text-align: left;!
       text-indent: 40px;              !
}

.title{
     font-size: 18px;
     text-align: center;
     text-indent: 0px
}

.author{
     font-size: 16px;
     text-align: center;
}

.abstract{
     text-indent: 0px;
     font-weight: bold;
}

Obviously, there are no html tags called, title, author, or abstract. Class selectors can be
named anything you want but they must begin with a period (.) to tell the browser that
you are defining the style for a class and not a tag.
Our webpage will still be made entirely of <p></p> tags, but they will be given a class
(see the following section for the html code to make this happen). Any paragraph with a
title class will be aligned center and have a font size of 18px.
Again, because styles “cascade,” the browser checks the style assigned to the <p> tag
first. Then, it checks for the styles assigned to the specific class of paragraph. If a class
redefines a class, for example, text-align, the browser uses the class definition and
not the tag definition.




Applying	
  Styles	
  in	
  HTML	
  

Linking	
  the	
  CSS	
  File	
  
	
  
If you have created a CSS file, you need to link it to your webpage. To do so, type the
following code into your file in the header <head></head>:
<link rel = "stylesheet" type = "text/css" href =
"example.css" />
The only part of the code you will change is the filename and filepath after href.
Remember the rules of filepaths outlined in the HTML section of this tutorial.

	
  
	
  
	
  
	
  
Tags	
  
In our examples above, we defined styles for <body></body> and <p></p>.
Because these are existing tags in HTML and XHTML, once your stylesheet is linked to
your html file (see above), the styles will be applied and you do not need to do anything
special.

Classes	
  
	
  
To apply the .author, .title, and .abstract classes we created above, we need to call a class
as an attribute and use the style name we used as the value. There are three ways to do
this: within a tag, within div tag or within a span tag.
	
  
Within	
  Tag	
  
	
  
To create a paragraph with the title class we created above, you will type the following in
the opening tag of a paragraph:
<p class = “title” >
Remember to use the exact name you created in your stylesheet as your class name but
without the period (.).
	
  
Div	
  
	
  
Occasionally, you will want to apply a class to more than one paragraph or element. If,
for example, the abstract of your scholarly paper is three paragraphs, you could call the
class in each of those paragraph opening tags as shown above. However, to save time,
you can surround those paragraphs in a <div></div> with the class abstract.

<div class = “abstract” >

     <p>Paragraph 1 of abstract </p>
     <p>Paragraph 2 of abstract </p>
     <p>Pargraph 3 of abstract</p>
</div>
<p>Paragraph 1 of paper, etc.</p>
	
  
This technique is used very commonly, particularly in webpages that have various
“sections” of content such as the menu, the footer, the header, etc.
	
  
	
  
	
  
	
  
	
  
Span	
  
	
  
Whereas <div></div> can apply a style to multiple elements at a time, <span></span>
applies a style within an element. For example, if you wanted to emphasize certain words
on your page, you could create a “highlight” class like the one below, that changes the
font color to a deep red and bolds the text.

.highlight{!
          color: #9D1B2E;!
          font-weight: bolder;                        !
        }

To apply this code to only a few words in a paragraph, you would create a <span> of
class highlight around those words.

<p> The quick <span class = “highlight” >red fox</span>
jumps over the lazy brown dog.</p>


Conclusion	
  
Because this is a limited introductory tutorial on XHTML, HTML and CSS, there was no
room to discuss every HTML tag or all possible CSS style attributes and values.

Fortunately, all tags and styles have been documented by the W3Schools (the
organization responsible for the creation of the languages discussed in this tutorial.

For	
  more	
  on	
  HTM,	
  go	
  to:	
  
http://www.w3schools.com/html/default.asp

For	
  more	
  on	
  CSS,	
  go	
  to:	
  
http://www.w3schools.com/css/default.asp

								
To top