Difference between revisions of "HTML and CSS"
From CSE330 Wiki
Jump to navigationJump to search| Line 78: | Line 78: | ||
Use these tags for defining broad sections of your page with a specific purpose. | Use these tags for defining broad sections of your page with a specific purpose. | ||
| − | * '''<header>''' Defines the header section of a web page | + | * '''<nowiki><header></nowiki>''' Defines the header section of a web page |
| − | * '''<footer>''' Defines the footer section of a web page | + | * '''<nowiki><footer></nowiki>''' Defines the footer section of a web page |
| − | * '''<nav>''' Defines the section of your page that contains navigation links | + | * '''<nowiki><nav></nowiki>''' Defines the section of your page that contains navigation links |
| − | * '''<article>''' Defines an article on your page (useful for screen readers) | + | * '''<nowiki><article></nowiki>''' 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 | + | * '''<nowiki><section></nowiki>''' Defines a real section of your page; for example, one with unique headings distinct from the rest of the document |
| − | * '''<figure>''' Defines a figure | + | * '''<nowiki><figure></nowiki>''' Defines a figure |
| − | ** '''<figcaption>''' Defines a caption for that figure (<figcaption> should be nested inside of <figure>) | + | ** '''<nowiki><figcaption></nowiki>''' Defines a caption for that figure (<figcaption> should be nested inside of <figure>) |
| − | * '''<form>''' Defines a form into which the user should input data | + | * '''<nowiki><form></nowiki>''' 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 | + | ** '''<nowiki><input type="text/number/date/radio/etcetera" name="name" /></nowiki>''' Defines an input field of a certain type |
| − | ** '''<label for="input-id">''' Defines a label for an input field with the ID ''input-id'' | + | ** '''<nowiki><label for="input-id"></nowiki>''' 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) | + | ** '''<nowiki><select name="name"></nowiki>''' 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 | + | *** '''<nowiki><option value="value"></nowiki>''' Defines an option for the select box |
| − | ** '''<textarea name="">''' Defines a text box (which is larger than a text field) | + | ** '''<nowiki><textarea name=""></nowiki>''' Defines a text box (which is larger than a text field) |
==== External Media ==== | ==== External Media ==== | ||
| Line 96: | Line 96: | ||
Use these tags to include external media onto your page. | 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 | + | * '''<nowiki><iframe src="source"></nowiki>''' 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. | + | * '''<nowiki><link rel="what" type="mime" href="source" /></nowiki>''' 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'' | + | * '''<nowiki><img src="source" alt="text" /></nowiki>''' Defines an image located at ''source'' that has a textual representation of ''text'' |
| − | * '''<audio>''' Represents an audio clip on your page | + | * '''<nowiki><audio></nowiki>''' Represents an audio clip on your page |
| − | * '''<video>''' Represents a video clip on your web page | + | * '''<nowiki><video></nowiki>''' Represents a video clip on your web page |
| − | * '''<canvas>''' Defines a canvas for advanced drawing (we will learn more about this in future modules) | + | * '''<nowiki><canvas></nowiki>''' Defines a canvas for advanced drawing (we will learn more about this in future modules) |
==== Outlining Elements ==== | ==== Outlining Elements ==== | ||
| Line 107: | Line 107: | ||
Use these elements to define an outline for your page, including definitions and citations. | Use these elements to define an outline for your page, including definitions and citations. | ||
| − | * '''<h1> to <h6>''' Defines the outline for your page | + | * '''<nowiki><h1> to <h6></nowiki>''' Defines the outline for your page |
| − | * '''<p>''' Defines a paragraph of text | + | * '''<nowiki><p></nowiki>''' Defines a paragraph of text |
| − | * '''<dl>''' Defines a Dictionary List | + | * '''<nowiki><dl></nowiki>''' Defines a Dictionary List |
| − | ** '''<dt>''' Defines a Dictionary Term | + | ** '''<nowiki><dt></nowiki>''' Defines a Dictionary Term |
| − | ** '''<dd>''' Defines a Dictionary Definition | + | ** '''<nowiki><dd></nowiki>''' Defines a Dictionary Definition |
| − | * '''<table>''' Defines a table for displaying data | + | * '''<nowiki><table></nowiki>''' Defines a table for displaying data |
| − | ** '''<thead>, <tbody>, <tfoot>''' Defines the heading, body content, and footing of a table | + | ** '''<nowiki><thead>, <tbody>, <tfoot></nowiki>''' Defines the heading, body content, and footing of a table |
| − | *** '''<tr>''' Defines a table row | + | *** '''<nowiki><tr></nowiki>''' Defines a table row |
| − | **** '''<th>''' Defines a table cell that contains a heading | + | **** '''<nowiki><th></nowiki>''' Defines a table cell that contains a heading |
| − | **** '''<td>''' Defines a table cell that contains data | + | **** '''<nowiki><td></nowiki>''' Defines a table cell that contains data |
| − | * '''<ol> and <ul>''' Define ordered and unordered lists, respectively (meaning numbered lists and bulleted lists) | + | * '''<nowiki><ol> and <ul></nowiki>''' Define ordered and unordered lists, respectively (meaning numbered lists and bulleted lists) |
| − | ** '''<li>''' Defines a list item for either <ol> or <ul> | + | ** '''<nowiki><li></nowiki>''' Defines a list item for either <nowiki><ol> or <ul></nowiki> |
| − | * '''<q>''' Represents a short, inline quotation quoted from another source | + | * '''<nowiki><q></nowiki>''' Represents a short, inline quotation quoted from another source |
| − | * '''<blockquote>''' Represents a longer block of text quoted from another source | + | * '''<nowiki><blockquote></nowiki>''' Represents a longer block of text quoted from another source |
==== Miscellaneous Elements ==== | ==== Miscellaneous Elements ==== | ||
| Line 126: | Line 126: | ||
This section lists useful elements that don't fit into one of the other categories. | This section lists useful elements that don't fit into one of the other categories. | ||
| − | * '''<a href="destination">''' Make a hyperlink to destination | + | * '''<nowiki><a href="destination"></nowiki>''' 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) | + | * '''<nowiki><br /></nowiki>''' 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 | + | * '''<nowiki><button></nowiki>''' Defines a clickable button |
| − | * '''<code>''' Defines a piece of computer code | + | * '''<nowiki><code></nowiki>''' Defines a piece of computer code |
| − | * '''<output>''' Defines the result of a calculation | + | * '''<nowiki><output></nowiki>''' Defines the result of a calculation |
| − | * '''<pre>''' Defines pre-formatted text in which whitespace will be preserved | + | * '''<nowiki><pre></nowiki>''' 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) | + | * '''<nowiki><script></nowiki>''' 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) | + | * '''<nowiki><div></nowiki>''' Defines a block section of your document (useful for styling) |
| − | * '''<span>''' Defines an inline section of your document (useful for styling) | + | * '''<nowiki><span></nowiki>''' Defines an inline section of your document (useful for styling) |
=== High School Analogy === | === 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. | + | <nowiki>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.</nowiki> |
Take home message: HTML defines the ''content'' of your page. Use it to its full ability. | Take home message: HTML defines the ''content'' of your page. Use it to its full ability. | ||
Revision as of 16:19, 10 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.
Contents
Basic Structure of a Web Page
Open up a plain text editor (like Notepad on Windows or TextEdit in Plain Text mode on Mac OS X) and insert the following:
<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Now save the file, and open it in Firefox. You should see the following:
(image here)
What you have just produced is the bare bones 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
- head
- html
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
Here is a list of commonly used tags in HTML. For a complete list, see the list at W3Schools.
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
- <tr> Defines a table row
- <thead>, <tbody>, <tfoot> Defines the heading, body content, and footing of a table
- <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!
