Difference between revisions of "HTML and CSS"

From CSE330 Wiki
Jump to navigationJump to search
Line 72: Line 72:
 
=== Commonly Used Tags ===
 
=== Commonly Used Tags ===
  
−
Here is a list of commonly used tags in HTML.  For a complete list, see [http://www.w3schools.com/html5/html5_reference.asp the list at W3Schools].
+
For reference, below is a list of commonly used tags in HTML.  For a complete list, see [http://www.w3.org/TR/html5/#contents section 4 of the HTML 5 Specification].
  
 
Empty tags are distinguished from content tags by the presence of a trailing slash.
 
Empty tags are distinguished from content tags by the presence of a trailing slash.
Line 160: Line 160:
  
 
* It ''selects'' all <code><nowiki><header></nowiki></code> elements
 
* It ''selects'' all <code><nowiki><header></nowiki></code> elements
−
* It ''declares'' the foreground color (i.e. the text color) of the selected elements to be blue
+
* It ''declares'' the ''property'' '''color''' (i.e. the text color) of the selected elements to be blue
−
* It declares the font of the selected elements to be Verdana, or alternatively any sans-serif font if Verdana is not available
+
* It ''declares'' the ''property'' '''font-family''' (i.e. the font "face") of the selected elements to be Verdana, or alternatively any sans-serif font if Verdana is not available
  
 
All CSS rules follow this general format.  The following sections will discuss more detail on CSS selectors and declarations.
 
All CSS rules follow this general format.  The following sections will discuss more detail on CSS selectors and declarations.
  
 
=== Selectors ===
 
=== Selectors ===
 +
 +
In the previous section's example, the most basic CSS selector was used: selecting by the ''tag name''.  To select by the ''class name'', use a period, like so:
 +
 +
<source lang="css">
 +
.info {
 +
font-weight: bold;
 +
}
 +
</source>
 +
 +
The third most common way to select an element is by its ID.  To select by ID, use a number sign, like so:
 +
 +
<source lang="css">
 +
#medal_table {
 +
border-collapse: collapse;
 +
}
 +
</source>
 +
 +
Selectors can be combined.  For example, to select all hyperlinks in any paragraph having the class "alert", you could do:
 +
 +
<source lang="css">
 +
p.alert a {
 +
font-style: italic;
 +
}
 +
</source>
 +
 +
The <code>p.alert</code> selects all <code><nowiki><p></nowiki></code> tags with the class name "alert".  The space tells CSS to look for all descendants of such paragraphs.  Finally, the <code>a</code> selects all <code><nowiki><a></nowiki></code> elements in the resulting set.
 +
 +
It is also very common to use a right-angle bracket to select a ''child'' rather than a ''descendant'', the distinction being that ''descendants'' could be nested at any depth: child, grandchild, and so on, while a ''child'' must be at the next level down in the DOM.  For example:
 +
 +
<source lang="css">
 +
ul.fruits > li {
 +
text-decoration: underline;
 +
}
 +
</source>
 +
 +
Some common CSS selectors are listed below.  For a complete list of CSS selectors, see [http://www.w3.org/TR/CSS/#selectors section 4.2 of the CSS Specification].
 +
 +
* '''foo''' selects an element with tag name ''foo''
 +
* '''.foo''' selects an element with the class name ''foo''
 +
* '''#foo''' selects an element with the ID ''foo''
 +
* '''[foo="bar"]''' selects an element with the attribute ''foo'' whose value is ''bar''
 +
* '''foo bar''' selects an element matching ''bar'' that is a descendant of an element matching ''foo''
 +
* '''foo > bar''' selects an element matching ''car'' that is a child of an element matching ''foo''
 +
* '''foo + bar''' selects an element matching ''bar'' that is the next sibling of an element matching ''foo''
 +
 +
==== Pseudo-Classes ====
 +
 +
Elements can also be selected based on their current state.  For example, this is how you could change the color of all visited links on your web page:
 +
 +
<source lang="css">
 +
a:visited {
 +
color: #99FF99; /* this example uses a hexadecimal RGB definition for the color, which allows you to mix over 16 million colors */
 +
}
 +
</source>
 +
 +
Some common pseudo-classes are listed below.  For a complete list, see [http://www.w3.org/TR/CSS/#selectors section 4.2 of the CSS Specification].
 +
 +
* '''foo:first-child''' selects an element matching ''foo'' that is the first child of its parent (i.e., any ''foo'' that doesn't have older siblings)
 +
* '''foo:last-child''' selects an element matching ''foo'' that is the last child of its parent
 +
* '''foo:empty''' selects any element matching ''foo'' that has no children
 +
* Pseudo-Classes for Form Elements:
 +
** '''input:checked''' selects all checkboxes and radio buttons that are checked
 +
* Pseudo-Classes for Hyperlink Elements:
 +
** '''a:link''' selects all hyperlinks that have not been visited yet
 +
** '''a:visited''' selects all hyperlinks that have been visited
 +
* Pseudo-Classes for Interactive Elements (like buttons, hyperlinks, etc):
 +
** '''foo:active''' selects elements matching ''foo'' that are being pressed on
 +
** '''foo:hover''' selects elements matching ''foo'' that are being hovered over
 +
** '''foo:focus''' selects elements matching ''foo'' that are selected (no pun intended)
 +
 +
=== Properties ===
 +
 +
For a complete list of CSS properties, see [http://www.w3.org/TR/CSS/#properties section 4.1 of the CSS Specification].
  
 
== Using HTML and CSS in your Web Page ==
 
== Using HTML and CSS in your Web Page ==

Revision as of 07:29, 14 August 2012

You have probably used so-called "What-You-See-Is-What-You-Get" (WYSIWYG) web page editor before. You select text, press the bold button, and voilà! Your text is bold. But what's really happening behing the scenes is that your editor is generating HTML and CSS code. Indeed, every page you view on the internet is built using HTML and CSS. In this guide, you will learn the principles of HTML and CSS and learn how they fit together to make a web page.

Basic Structure of a Web Page

The most basic web page is shown below. 

<!DOCTYPE html>
<html>
<head>
	<title>My First Web Page</title>
</head>
<body>
	<p>Hello World!</p>
</body>
</html>

If you were to open this page in Firefox, you would see the following:

(image here)

This is the skeleton of every web page on the internet. Things to notice:

  • The page begins with a DOCTYPE declaration. This is a mandatory part of a web page, and it tells the browser what version of HTML to use when rendering your page. In this case, the browser should use HTML 5.
  • The rest of the page consists of tags, in a hierarchy as follows:
    • html
      • head
        • title
      • body
        • p

You can view a web page's source code in your browser; in Firefox, the keyboard shortcut is Ctrl-U (or Command-U), and in Chrome, it Alt-Ctrl-U (or Option-Command-U).

Introduction to HTML

HTML stands for HyperText Markup Language. Notice that HTML is not a programming language, so it doesn't have classes, methods, variables, or anything else you may be used to seeing. Instead, HTML defines the content of a web page, and it uses tags to do that for you.

Tags

Tags define the content of your page. There are two types: content tags and empty tags.

Content Tags

A content tag is a container for other tags on your page, and it participates in the nesting hierarchy of a web page. The general format looks like this: 

<tagname> Contents </tagname>

If you've used BBCode before in online forums, HTML should look familiar, except that it uses angle brackets (less-than and greater-than signs) instead of square brackets.

Empty Tags

An empty tag represents an element on your page that does not participate in the nesting hierarchy. An empty tag looks like this: 

<tagname />

Although the trailing slash is optional on empty tags, it is considered best practice to include it, and it also makes it more clear what's a content tag and what's an empty tag when reviewing your code.

Attributes

Both content tags and empty tags can have attributes that further define their functionality. You define an attribute like this: 

<contenttag attribute="value"> Content </contenttag>
<emptytag attribute="value" />

Commonly Used Tags

For reference, below is a list of commonly used tags in HTML. For a complete list, see section 4 of the HTML 5 Specification.

Empty tags are distinguished from content tags by the presence of a trailing slash.

Semantic Elements

Use these tags for defining broad sections of your page with a specific purpose.

  • <header> Defines the header section of a web page
  • <footer> Defines the footer section of a web page
  • <nav> Defines the section of your page that contains navigation links
  • <article> Defines an article on your page (useful for screen readers)
  • <section> Defines a real section of your page; for example, one with unique headings distinct from the rest of the document
  • <figure> Defines a figure
    • <figcaption> Defines a caption for that figure (<figcaption> should be nested inside of <figure>)
  • <form> Defines a form into which the user should input data
    • <input type="text/number/date/radio/etcetera" name="name" /> Defines an input field of a certain type
    • <label for="input-id"> Defines a label for an input field with the ID input-id
    • <select name="name"> Defines an input field where the user can select one or more choices (like a drop-down box)
      • <option value="value"> Defines an option for the select box
    • <textarea name=""> Defines a text box (which is larger than a text field)

External Media

Use these tags to include external media onto your page.

  • <iframe src="source"> Represents a little window on your page into which source is loaded; source could be a PDF document, for example, or an entire other web page
  • <link rel="what" type="mime" href="source" /> Defines an external document what located at source with the mime type mime that should be loaded into your HTML page. Note: <link /> does NOT define a hyperlink! <a> is for that. Used most commonly for including CSS stylesheets.
  • <img src="source" alt="text" /> Defines an image located at source that has a textual representation of text
  • <audio> Represents an audio clip on your page
  • <video> Represents a video clip on your web page
  • <canvas> Defines a canvas for advanced drawing (we will learn more about this in future modules)

Outlining Elements

Use these elements to define an outline for your page, including definitions and citations.

  • <h1> to <h6> Defines the outline for your page
  • <p> Defines a paragraph of text
  • <dl> Defines a Dictionary List
    • <dt> Defines a Dictionary Term
    • <dd> Defines a Dictionary Definition
  • <table> Defines a table for displaying data
    • <thead>, <tbody>, <tfoot> Defines the heading, body content, and footing of a table
      • <tr> Defines a table row
        • <th> Defines a table cell that contains a heading
        • <td> Defines a table cell that contains data
  • <ol> and <ul> Define ordered and unordered lists, respectively (meaning numbered lists and bulleted lists)
    • <li> Defines a list item for either <ol> or <ul>
  • <q> Represents a short, inline quotation quoted from another source
  • <blockquote> Represents a longer block of text quoted from another source

Miscellaneous Elements

This section lists useful elements that don't fit into one of the other categories.

  • <a href="destination"> Make a hyperlink to destination
  • <br /> Denotes where a line break should appear (note that white space is ignored when rendering, so a line break in the source code is not reflected in the output)
  • <button> Defines a clickable button
  • <code> Defines a piece of computer code
  • <output> Defines the result of a calculation
  • <pre> Defines pre-formatted text in which whitespace will be preserved
  • <script> Defines a script for your page (we will learn a lot more about this in later modules)
  • <div> Defines a block section of your document (useful for styling)
  • <span> Defines an inline section of your document (useful for styling)

High School Analogy

In more ways than not, HTML can be thought of as a markup language for five-paragraph essays that you wrote in history class in high school. <blockquote> is used to denote long quotations; <h1> through <h6> denote the outline; <p> denotes new paragraphs; <figure> and <figcaption> represent exhibits; <section> could represent chapters if you were writing a longer report; and so on.

Take home message: HTML defines the content of your page. Use it to its full ability.

Introduction to CSS

Notice that we haven't said a word about how things look yet. This is because that is what CSS is for!

CSS stands for Cascading Style Sheets, and it defines the appearance of your page. CSS is composed of rules, and each rule consists of a selector and one or more declarations. Let's see an example: 

header {
	color: blue;
	font-family: Verdana, sans-serif;
}

The above CSS rule does three things:

  • It selects all <header> elements
  • It declares the property color (i.e. the text color) of the selected elements to be blue
  • It declares the property font-family (i.e. the font "face") of the selected elements to be Verdana, or alternatively any sans-serif font if Verdana is not available

All CSS rules follow this general format. The following sections will discuss more detail on CSS selectors and declarations.

Selectors

In the previous section's example, the most basic CSS selector was used: selecting by the tag name. To select by the class name, use a period, like so: 

.info {
	font-weight: bold;
}

The third most common way to select an element is by its ID. To select by ID, use a number sign, like so: 

#medal_table {
	border-collapse: collapse;
}

Selectors can be combined. For example, to select all hyperlinks in any paragraph having the class "alert", you could do: 

p.alert a {
	font-style: italic;
}

The p.alert selects all <p> tags with the class name "alert". The space tells CSS to look for all descendants of such paragraphs. Finally, the a selects all <a> elements in the resulting set.

It is also very common to use a right-angle bracket to select a child rather than a descendant, the distinction being that descendants could be nested at any depth: child, grandchild, and so on, while a child must be at the next level down in the DOM. For example: 

ul.fruits > li {
	text-decoration: underline;
}

Some common CSS selectors are listed below. For a complete list of CSS selectors, see section 4.2 of the CSS Specification.

  • foo selects an element with tag name foo
  • .foo selects an element with the class name foo
  • #foo selects an element with the ID foo
  • [foo="bar"] selects an element with the attribute foo whose value is bar
  • foo bar selects an element matching bar that is a descendant of an element matching foo
  • foo > bar selects an element matching car that is a child of an element matching foo
  • foo + bar selects an element matching bar that is the next sibling of an element matching foo

Pseudo-Classes

Elements can also be selected based on their current state. For example, this is how you could change the color of all visited links on your web page: 

a:visited {
	color: #99FF99; /* this example uses a hexadecimal RGB definition for the color, which allows you to mix over 16 million colors */
}

Some common pseudo-classes are listed below. For a complete list, see section 4.2 of the CSS Specification.

  • foo:first-child selects an element matching foo that is the first child of its parent (i.e., any foo that doesn't have older siblings)
  • foo:last-child selects an element matching foo that is the last child of its parent
  • foo:empty selects any element matching foo that has no children
  • Pseudo-Classes for Form Elements:
    • input:checked selects all checkboxes and radio buttons that are checked
  • Pseudo-Classes for Hyperlink Elements:
    • a:link selects all hyperlinks that have not been visited yet
    • a:visited selects all hyperlinks that have been visited
  • Pseudo-Classes for Interactive Elements (like buttons, hyperlinks, etc):
    • foo:active selects elements matching foo that are being pressed on
    • foo:hover selects elements matching foo that are being hovered over
    • foo:focus selects elements matching foo that are selected (no pun intended)

Properties

For a complete list of CSS properties, see section 4.1 of the CSS Specification.

Using HTML and CSS in your Web Page

Recall that HTML defines the content of your page, while CSS defines the appearance.

Most of the HTML you write will be in the <body> tag, because, naturally, this is where the content of your page should reside. CSS, on the other hand, is supplemental to the content, and so it should be included in the <head> tag, as shown in the following section.

How to Include CSS

There are three options for using CSS in your web page:

  1. Loading external stylesheets
  2. Embedding stylesheets in the document
  3. Inline styles using the style attribute

The first option is almost always preferred in production applications for the following reasons:

  • Browsers can cache external stylesheets, so once they've loaded the stylesheet once, they won't have to load it again, making future pages load faster and reducing requests to your server
  • External stylesheets are more modular; that is, they can be included in multiple pages on your web site without the need for copying and pasting embedded stylesheets

To include external stylesheets in your document, place the following empty HTML tag in your <head>: 

<link rel="stylesheet" type="text/css" href="path/to/stylesheet.css" />

It may be convenient during development to use embedded stylesheets, because then you don't have to click back and forth between files in your IDE and clear your browser cache. You may place embedded stylesheets in a <style> tag, also in your <head>: 

<style type="text/css">
styles {
	go: here;
}
</style>

For a variety of reasons, inline styles should almost always be avoided. Instead of using inline styles, give your element a CSS class, and assign styles to that class in your stylesheet: 

p.danger {
	color: red;
}

<p class="danger">You'd better think twice about using inline styles!</p>
Retrieved from "http://classes.engineering.wustl.edu/cse330/index.php?title=HTML_and_CSS&oldid=337"