Difference between revisions of "HTML and CSS"

From CSE330 Wiki
Jump to navigationJump to search
m (Updated all links to HTTPS.)
 
(35 intermediate revisions by 2 users not shown)
Line 5: Line 5:
 
The most basic web page is shown below.
 
The most basic web page is shown below.
  
−
<source lang="html">
+
<source lang="html4strict">
 
<!DOCTYPE html>
 
<!DOCTYPE html>
 
<html>
 
<html>
Line 19: Line 19:
 
If you were to open this page in Firefox, you would see the following:
 
If you were to open this page in Firefox, you would see the following:
  
−
(image here)
+
[[File:BasicHTML.png‎]]
  
 
This is the skeleton of every web page on the internet.  Things to notice:
 
This is the skeleton of every web page on the internet.  Things to notice:
Line 31: Line 31:
 
**** p
 
**** 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).
+
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 is Alt-Ctrl-U (or Option-Command-U).
  
 
== Introduction to HTML ==
 
== Introduction to HTML ==
Line 39: Line 39:
 
=== Tags ===
 
=== Tags ===
  
−
Tags define the content of your page.  There are two types: content tags and empty tags.
+
Tags define the content of your page.  Each tag represents an ''element''.  There are two main types of elements: content elements and empty elements.
  
−
==== Content Tags ====
+
==== Content Elements ====
  
−
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:
+
A '''content element''' is a container for other elements on your page, and it participates in the nesting hierarchy of a web page.  The general format looks like this:
  
−
<source lang="html">
+
<source lang="html4strict">
 
<tagname> Contents </tagname>
 
<tagname> Contents </tagname>
 
</source>
 
</source>
Line 51: Line 51:
 
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.
 
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 ====
+
'''Note:''' There are actually several different types of content elements, including phrasing content, sectioning content, and flow content.  More details can be found [https://www.w3.org/html/wg/drafts/html/master/dom.html#content-models in the HTML5 spec].
  
−
An '''empty tag''' represents an element on your page that does not participate in the nesting hierarchy.  An empty tag looks like this:
+
==== Void Elements ====
  
−
<source lang="html">
+
A '''void element''' or '''empty element''' represents an element on your page that does not participate in the nesting hierarchy.  An empty element looks like this:
 +
 
 +
<source lang="html4strict">
 
<tagname />
 
<tagname />
 
</source>
 
</source>
  
−
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.
+
Although the trailing slash is optional on void/empty elements, it is considered best practice to include it, and it also makes it more clear what's a content element and what's a void element when reviewing your code.
 +
 
 +
==== Content Tags with Optional Closing Tag ====
 +
 
 +
HTML has a quirk in that a few content tags, such as <nowiki><p></nowiki>, <nowiki><tbody></nowiki>, and <nowiki><li></nowiki>, do not require that the end tag be present.  In addition, both the opening and the closing tags <nowiki><html></nowiki>, <nowiki><head></nowiki>, and <nowiki><body></nowiki> may ''sometimes'' be omitted.  For example, the following code will pass the validator as a valid HTML5 document:
 +
 
 +
<source lang="html4strict">
 +
<!DOCTYPE html>
 +
<!-- implicit <html▷ -->
 +
<!-- implicit <head▷ -->
 +
<title>My Miniature Document</title>
 +
<!-- implicit </head▷ because the <body▷ is starting -->
 +
<!-- implicit <body▷ -->
 +
<div>
 +
<p>
 +
Hello
 +
<!-- implicit </p▷ because a new <p▷ is starting -->
 +
<p>
 +
World
 +
<!-- implicit </p▷ because the parent is closing -->
 +
</div>
 +
<!-- implicit </body▷ because end of document -->
 +
<!-- implicit </html▷ because end of document -->
 +
</source>
 +
 
 +
More information is in [https://www.w3.org/TR/html5/syntax.html#optional-tags the HTML5 spec].
 +
 
 +
===== Why to Always Include Closing Tags =====
 +
 
 +
It will make your life easier if you always include closing tags, even if they are technically optional, for the following reasons:
 +
 
 +
* It is best practice to '''be explicit''' in your code.
 +
* You can see in the spec how there are strict conditions for when the closing tags are implied and when they are not.  Changing something at the end of your document could have '''adverse consequences''' to something earlier if you are using implicit end tags.
 +
* Popular browsers such as Internet Explorer 9 will create the incorrect DOM structure when closing tags are omitted, leading to '''hard-to-detect bugs'''
 +
 
 +
It might be advantageous to take advantage of this HTML quirk is if you are hard-core trying to optimize the load speed of your pages, but in most other cases, omitting closing tags will only cause frustration.
  
 
=== Attributes ===
 
=== Attributes ===
  
−
Both content tags and empty tags can have attributes that further define their functionality.  You define an attribute like this:
+
Both content elements and void elements can have attributes that further define their functionality.  You define an attribute like this:
  
−
<source lang="html">
+
<source lang="html4strict">
 
<contenttag attribute="value"> Content </contenttag>
 
<contenttag attribute="value"> Content </contenttag>
 
<emptytag attribute="value" />
 
<emptytag attribute="value" />
Line 72: Line 109:
 
=== Commonly Used Tags ===
 
=== Commonly Used Tags ===
  
−
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].
+
For reference, below is a list of commonly used tags in HTML.  For a complete list, see [https://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.
+
Void elements are distinguished from content elements by the presence of a trailing slash.
  
 
==== Semantic Elements ====
 
==== Semantic Elements ====
 +
 +
{{DoctypeTV
 +
|youtube_id=53bFhkqThCQ
 +
|time=5m18s
 +
|desc=Semantic Elements in HTML5
 +
}}
  
 
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.
Line 93: Line 136:
 
*** '''<nowiki><option value="value"></nowiki>''' Defines an option for the select box
 
*** '''<nowiki><option value="value"></nowiki>''' Defines an option for the select box
 
** '''<nowiki><textarea name=""></nowiki>''' 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)
 +
 +
For more information on HTML forms, read the article [[HTML Forms]].
  
 
==== External Media ====
 
==== External Media ====
Line 166: Line 211:
  
 
=== Selectors ===
 
=== Selectors ===
 +
 +
{{DoctypeTV
 +
|youtube_id=W9H95NcbTSw
 +
|time=5m27s
 +
|desc=CSS Selectors, Part 1
 +
}}
  
 
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:
 
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:
Line 175: Line 226:
 
</source>
 
</source>
  
−
The third most common way to select an element is by its ID.  To select by ID, use a number sign, like so:
+
{{DoctypeTV
 +
|youtube_id=0a4r4bm1nQA
 +
|time=1m29s
 +
|desc=CSS Selectors, Part 2
 +
}}
 +
 
 +
A third common way to select an element is by its ID.  To select by ID, use a number sign, like so:
  
 
<source lang="css">
 
<source lang="css">
Line 201: Line 258:
 
</source>
 
</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].
+
Some common CSS selectors are listed below.  For a complete list of CSS selectors, see [https://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 tag name ''foo''
Line 217: Line 274:
 
<source lang="css">
 
<source lang="css">
 
a:visited {
 
a:visited {
−
color: #99FF99; /* this example uses a hexadecimal RGB definition for the color, which allows you to mix over 16 million colors */
+
color: #99FF99; /* this example uses a hexadecimal RGB definition for the color, which allows you to
 +
mix over 16 million colors */
 
}
 
}
 
</source>
 
</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].
+
Some common pseudo-classes are listed below.  For a complete list, see [https://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: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)
Line 240: Line 298:
 
Selectors are used to select elements that need to have styles applied to them, and properties are used to actually define those styles.  Throughout this section, you've seen properties including '''color''', '''font-family''', '''font-style''', and '''text-decoration'''.  There are dozens more properties you can define, some of which are listed below.
 
Selectors are used to select elements that need to have styles applied to them, and properties are used to actually define those styles.  Throughout this section, you've seen properties including '''color''', '''font-family''', '''font-style''', and '''text-decoration'''.  There are dozens more properties you can define, some of which are listed below.
  
−
For a complete list of CSS properties, see [http://www.w3.org/TR/CSS/#properties section 4.1 of the CSS Specification].
+
For a complete list of CSS properties, see [https://www.w3.org/TR/CSS/#properties section 4.1 of the CSS Specification].
  
 
* '''background-image''' sets the background image of an element.  Usage: <code>background-image: url(path/to/image.png);</code>
 
* '''background-image''' sets the background image of an element.  Usage: <code>background-image: url(path/to/image.png);</code>
Line 246: Line 304:
 
* For Tables:
 
* For Tables:
 
** '''border-collapse''' removes the spacing between table cells.  Usage: <code>border-collapse: collapse;</code>
 
** '''border-collapse''' removes the spacing between table cells.  Usage: <code>border-collapse: collapse;</code>
−
** Note: You can select td elements that are grandchildren of a table element, and then specify border properties on the td's
+
** Note: You can select td elements that are grandchildren of a table element, and then specify border properties on the td's, like this: <code>#myTable > tr > td { border: 1px solid black; }</code>
 
* '''border''' defines the border around an element.  Usage: <code>border: 1px dashed red;</code>
 
* '''border''' defines the border around an element.  Usage: <code>border: 1px dashed red;</code>
 
* '''border-radius''' lets you have rounded corners on your elements
 
* '''border-radius''' lets you have rounded corners on your elements
Line 262: Line 320:
 
Some CSS properties require that you specify numerical values for things (font-size, line-height, border-width, and so on).  CSS supports a number of units, the most common of which include:
 
Some CSS properties require that you specify numerical values for things (font-size, line-height, border-width, and so on).  CSS supports a number of units, the most common of which include:
  
−
* '''px''', which defines the number in pixels (relative to screen resolution).
+
* '''px''', which defines a distance in pixels (relative to screen resolution).
−
* '''em''', which defines the number relative to font size.  (Note: an ''em'' is the width of the capital letter M.  No, I'm not kidding.)
+
* '''em''', which defines a distance relative to font size.  (Note: an ''em'' is the width of the capital letter M.  No, I'm not kidding.)
 +
* '''rem''', which defines a distance relative to the font size of the root element.  Compare to '''em''', which defines a distance relative to the font size of the current element (which might have a different font size than the document root).
 
* '''pt''', which is a traditional print unit equal to 1/72 of an inch (should appear the same size on all screens regardless of resolution).
 
* '''pt''', which is a traditional print unit equal to 1/72 of an inch (should appear the same size on all screens regardless of resolution).
−
* '''%''', which defines the size relative to its parent element.  For the most part, you'll only use % when working with the Box Model (see below).
+
* '''%''', which defines a distance relative to that property of its parent element.  For the most part, you'll only use % when working with the Box Model (see below).
  
 
=== The Box Model ===
 
=== The Box Model ===
Line 285: Line 344:
 
div.box {
 
div.box {
 
width: 500px;
 
width: 500px;
−
margin: 0 auto; /* when two "arguments" are passed to margin or padding, the first defines top and bottom margin/padding and the second defines left and right margin/padding */
+
margin: 0 auto; /* when two "arguments" are passed to margin or padding, the first defines top
−
padding: 25px; /* when only one "argument" is passed to margin or padding, it defines the margin/padding on all four sides */
+
and bottom margin/padding and the second defines left and right margin/padding */
−
border: 1px solid black; /* the 1px defines the border-width; the solid defines the border-style; the black defines the border-color */
+
padding: 25px; /* when only one "argument" is passed to margin or padding, it defines the
 +
margin/padding on all four sides */
 +
border: 1px solid black; /* the 1px defines the border-width; the solid defines the border-style;
 +
the black defines the border-color */
 
}
 
}
 
</source>
 
</source>
Line 293: Line 355:
 
Here is what the resulting box looks like:
 
Here is what the resulting box looks like:
  
−
(image here)
+
[[File:CSSBoxExample.png]]
  
−
This is only scraping the surface of the CSS box model.  All advanced web sites utilize the box model to its full extent to produce the complex layouts you have come to expect on the internet.  For more information on the CSS box model, read [http://www.w3.org/TR/css3-box/ the W3C specification].
+
Note that the ''width'' defines only the ''content width''.  To compute the actual "width" of the element, you need to add the left and right padding border, and margin.
 +
 
 +
This is only scraping the surface of the CSS box model.  All advanced web sites utilize the box model to its full extent to produce the complex layouts you have come to expect on the internet.  For more information on the CSS box model, read [https://www.w3.org/TR/css3-box/ the W3C specification].
 +
 
 +
=== Typography ===
 +
 
 +
Traditionally, Web developers were limited to a small subset of fonts that were commonly installed on all computers:
 +
 
 +
* Andale Mono
 +
* Arial
 +
* Arial Black
 +
* Comic Sans MS
 +
* Courier New
 +
* Georgia
 +
* Impact
 +
* Times New Roman
 +
* Trebuchet MS
 +
* Verdana
 +
* Webdings
 +
 
 +
That was it.  Incredibly limiting.
 +
 
 +
However, fonts other than these are used widely on the Web.  How?  CSS has evolved to the point where it now allows you to upload a font to your server, and use that font on your site, or even include CSS from another server that adds the fonts you want. One excellent resource for a wide variety of fast, appropriately-licensed fonts is [https://fonts.google.com/ Google Fonts].
  
 
== Using HTML and CSS in your Web Page ==
 
== Using HTML and CSS in your Web Page ==
Line 318: Line 402:
 
To include external stylesheets in your document, place the following empty HTML tag in your <code><head></code>:
 
To include external stylesheets in your document, place the following empty HTML tag in your <code><head></code>:
  
−
<source lang="html">
+
<source lang="html4strict">
 
<link rel="stylesheet" type="text/css" href="path/to/stylesheet.css" />
 
<link rel="stylesheet" type="text/css" href="path/to/stylesheet.css" />
 
</source>
 
</source>
 +
  
 
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 <code><style></code> tag, also in your <code><head></code>:
 
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 <code><style></code> tag, also in your <code><head></code>:
  
−
<source lang="html">
+
<source lang="html4strict">
 
<style type="text/css">
 
<style type="text/css">
 
styles {
 
styles {
Line 331: Line 416:
 
</style>
 
</style>
 
</source>
 
</source>
 +
  
 
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:
 
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:
  
 
<source lang="css">
 
<source lang="css">
−
p.danger {
+
p.notice {
−
color: red;
+
color: blue;
 
}
 
}
 
</source>
 
</source>
−
<source lang="html">
+
<source lang="html4strict">
−
<p class="danger">You'd better think twice about using inline styles!</p>
+
<p class="notice">Well done using classes instead of inline styles!</p>
 
</source>
 
</source>
  
−
[[Category:Module 2]]
+
 
 +
Just so you know it when you see it, the following example shows the usage of inline styles, which are declared using the '''style''' attribute.
 +
 
 +
<source lang="html4strict">
 +
<p style="color:red;">You'd better think twice about using inline styles.</p>
 +
</source>
 +
 
 +
=== Quick and Easy Page Layout ===
 +
 
 +
I like to use the following code when I just want a simple, aesthetically pleasing web page:
 +
 
 +
<source lang="html4strict">
 +
<!DOCTYPE html>
 +
<head>
 +
<meta charset="utf-8"/>
 +
<title>My Web Page</title>
 +
<style type="text/css">
 +
body{
 +
width: 760px; /* how wide to make your web page */
 +
background-color: teal; /* what color to make the background */
 +
margin: 0 auto;
 +
padding: 0;
 +
font:12px/16px Verdana, sans-serif; /* default font */
 +
}
 +
div#main{
 +
background-color: #FFF;
 +
margin: 0;
 +
padding: 10px;
 +
}
 +
</style>
 +
</head>
 +
<body><div id="main">
 +
 
 +
<!-- CONTENT HERE -->
 +
 
 +
</div></body>
 +
</html>
 +
</source>
 +
 
 +
Put your document where the <code><nowiki><!-- CONTENT HERE --></nowiki></code> is.  Your page will go instantly from dull-looking to presentable. ;-)
 +
 
 +
=== The HTML5 Shiv ===
 +
 
 +
Some browsers (*cough cough* IE < version 9) do strange things when you apply CSS styles to the newest HTML elements that were introduced with HTML5.  Fortunately, there is a painless solution.  Simply include the following code in your '''<head>''' tag:
 +
 
 +
<source lang="html4strict">
 +
<!--[if lt IE 9]>
 +
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
 +
<![endif]-->
 +
</source>
 +
 
 +
This so-called '''HTML5 Shiv''' will make older versions of Internet Explorer render your pages more closely to how modern browsers do.
 +
 
 +
== Validation ==
 +
{{XKCD
 +
|id=1144
 +
|name=tags
 +
}}
 +
 
 +
HTML and to a lesser extent CSS are forgiving when it comes to syntactical errors in your code.  However, it is not good practice to ignore your syntax errors for a variety of reasons:
 +
 
 +
* '''Faster and More Reliable Rendering.'''  Don't leave it up to your client's browser to decide what you meant when you made your syntax error.
 +
* '''Interoperability with Compliant Browsers.'''  Although a web page may ''look'' right in your ''testing'' browser, you need to remember that there are ''lots'' of different user agents: other browsers, mobile devices, and screen readers, just to name a few.
 +
* '''Accessibility.'''  Valid HTML code enables you to be confident that your page will be accessible to people with disabilities, such as the blind.
 +
* '''Search Engine Optimization.''' Web sites with valid HTML syntax rank higher in search engines like Google.
 +
* '''Future Proofing.'''  The W3C specification will not be made backwards-incompatible, so writing valid HTML syntax ensures that your page will work well into the future.
 +
* '''More Professional.'''  No seasoned web developer will publish a page with accidental syntax errors.
 +
 
 +
The industry standard tool for HTML and CSS syntax checking is the '''[https://validator.w3.org/ W3C Validator]'''.  '''You should ALWAYS validate your code before completing your project!'''  The Validator gives very helpful feedback to help you find and fix syntax errors.
 +
 
 +
For more information on why it is important to validate, see [https://validator.w3.org/docs/why.html the W3C's recommendation].
 +
 
 +
=== But why don't… ===
 +
 
 +
As you play around with the validator, you may have discovered that household name sites like [https://www.google.com/ Google] and [https://www.yahoo.com/ Yahoo] do not pass the validator.  This is a deliberate act on the part of these web sites because of the following reasons:
 +
 
 +
* '''Download Speed.'''  Sometimes, but not always, valid code adds bytes to the file size.  Sites that serve tens of thousands of requests per second are highly concerned with the increased file size.
 +
* '''Interoperability with Non-Compliant Browsers.'''  ''Very'' old browsers like Netscape Navigator and Internet Explorer 5 do not respond the way that modern browsers do to the same markup.
 +
 
 +
However, do not take these as reasons to not validate your own code.  The reasons listed in the previous section almost always outweigh the counterpoints in this section.
 +
 
 +
[[Category:Module 1]]

Latest revision as of 15:37, 11 February 2017

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:

BasicHTML.png

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 is 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. Each tag represents an element. There are two main types of elements: content elements and empty elements.

Content Elements

A content element is a container for other elements 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.

Note: There are actually several different types of content elements, including phrasing content, sectioning content, and flow content. More details can be found in the HTML5 spec.

Void Elements

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

<tagname />

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

Content Tags with Optional Closing Tag

HTML has a quirk in that a few content tags, such as <p>, <tbody>, and <li>, do not require that the end tag be present. In addition, both the opening and the closing tags <html>, <head>, and <body> may sometimes be omitted. For example, the following code will pass the validator as a valid HTML5 document: 

<!DOCTYPE html>
<!-- implicit <html▷ -->
<!-- implicit <head▷ -->
	<title>My Miniature Document</title>
<!-- implicit </head▷ because the <body▷ is starting -->
<!-- implicit <body▷ -->
	<div>
		<p>
			Hello
		<!-- implicit </p▷ because a new <p▷ is starting -->
		<p>
			World
		<!-- implicit </p▷ because the parent is closing -->
	</div>
<!-- implicit </body▷ because end of document -->
<!-- implicit </html▷ because end of document -->

More information is in the HTML5 spec.

Why to Always Include Closing Tags

It will make your life easier if you always include closing tags, even if they are technically optional, for the following reasons:

  • It is best practice to be explicit in your code.
  • You can see in the spec how there are strict conditions for when the closing tags are implied and when they are not. Changing something at the end of your document could have adverse consequences to something earlier if you are using implicit end tags.
  • Popular browsers such as Internet Explorer 9 will create the incorrect DOM structure when closing tags are omitted, leading to hard-to-detect bugs

It might be advantageous to take advantage of this HTML quirk is if you are hard-core trying to optimize the load speed of your pages, but in most other cases, omitting closing tags will only cause frustration.

Attributes

Both content elements and void elements 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.

Void elements are distinguished from content elements by the presence of a trailing slash.

Semantic Elements

Watch on DOCTYPE

Semantic Elements in HTML5

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)

For more information on HTML forms, read the article HTML Forms.

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

Watch on DOCTYPE

CSS Selectors, Part 1

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;
}

Watch on DOCTYPE

CSS Selectors, Part 2

A third 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 using pseudo-classes. Pseudo-classes always begin with a colon. 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

Selectors are used to select elements that need to have styles applied to them, and properties are used to actually define those styles. Throughout this section, you've seen properties including color, font-family, font-style, and text-decoration. There are dozens more properties you can define, some of which are listed below.

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

  • background-image sets the background image of an element. Usage: background-image: url(path/to/image.png);
  • background-color sets the background color of an element (note: the image takes precedence over the color; the color will be displayed if the image can't be found)
  • For Tables:
    • border-collapse removes the spacing between table cells. Usage: border-collapse: collapse;
    • Note: You can select td elements that are grandchildren of a table element, and then specify border properties on the td's, like this: #myTable > tr > td { border: 1px solid black; }
  • border defines the border around an element. Usage: border: 1px dashed red;
  • border-radius lets you have rounded corners on your elements
  • float makes the text of a document flow around the element. Usage: float: left; (or right)
    • clear makes an element stop wrapping around floats and instead move down to where the floats end. Usage: clear: both;
    • Note: If you specify multiple object in a for as floating, they will appear next to each other horizontally.
  • cursor lets you change the type of cursor that appears then your element is in focus. Example usage: cursor: pointer;
  • font lets you specify the font-size, line-height, and font-family in one fell swoop. Usage: font: 14px/18px Verdana, Arial, sans-serif;
  • list-style-type specifies the type of number or bullet used on <ol>'s and <ul>'s
  • text-align lets you justify text on the left, center, or right
  • display lets us specify an element as inline or block (see below), and it also enables us to "turn off" an element from being displayed on a page. Example usage: display: none;

Units

Some CSS properties require that you specify numerical values for things (font-size, line-height, border-width, and so on). CSS supports a number of units, the most common of which include:

  • px, which defines a distance in pixels (relative to screen resolution).
  • em, which defines a distance relative to font size. (Note: an em is the width of the capital letter M. No, I'm not kidding.)
  • rem, which defines a distance relative to the font size of the root element. Compare to em, which defines a distance relative to the font size of the current element (which might have a different font size than the document root).
  • pt, which is a traditional print unit equal to 1/72 of an inch (should appear the same size on all screens regardless of resolution).
  • %, which defines a distance relative to that property of its parent element. For the most part, you'll only use % when working with the Box Model (see below).

The Box Model

For the most part, all elements fall into one of two categories:

  • Inline (Examples: a, span, strong)
  • Block (Examples: p, div, section)

The properties we've seen thus far apply mostly to inline elements. As it turns out, CSS has an additional set of properties that describe block elements. These properties compose the box model.

While inline elements flow with the text, block elements stand on their own. You can define the space between the block element and the next closest element on the page using margin, the block element's border using border, and the space between the block element's border and its content using padding:

Box.png

For example, you could make a padded box that is centered on the page using this CSS: 

div.box {
	width: 500px;
	margin: 0 auto; /* when two "arguments" are passed to margin or padding, the first defines top
		and bottom margin/padding and the second defines left and right margin/padding */
	padding: 25px; /* when only one "argument" is passed to margin or padding, it defines the
		margin/padding on all four sides */
	border: 1px solid black; /* the 1px defines the border-width; the solid defines the border-style;
		the black defines the border-color */
}

Here is what the resulting box looks like:

CSSBoxExample.png

Note that the width defines only the content width. To compute the actual "width" of the element, you need to add the left and right padding border, and margin.

This is only scraping the surface of the CSS box model. All advanced web sites utilize the box model to its full extent to produce the complex layouts you have come to expect on the internet. For more information on the CSS box model, read the W3C specification.

Typography

Traditionally, Web developers were limited to a small subset of fonts that were commonly installed on all computers:

  • Andale Mono
  • Arial
  • Arial Black
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Times New Roman
  • Trebuchet MS
  • Verdana
  • Webdings

That was it. Incredibly limiting.

However, fonts other than these are used widely on the Web. How? CSS has evolved to the point where it now allows you to upload a font to your server, and use that font on your site, or even include CSS from another server that adds the fonts you want. One excellent resource for a wide variety of fast, appropriately-licensed fonts is Google Fonts.

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.notice {
	color: blue;
}

<p class="notice">Well done using classes instead of inline styles!</p>


Just so you know it when you see it, the following example shows the usage of inline styles, which are declared using the style attribute. 

<p style="color:red;">You'd better think twice about using inline styles.</p>

Quick and Easy Page Layout

I like to use the following code when I just want a simple, aesthetically pleasing web page: 

<!DOCTYPE html>
<head>
<meta charset="utf-8"/>
<title>My Web Page</title>
<style type="text/css">
body{
	width: 760px; /* how wide to make your web page */
	background-color: teal; /* what color to make the background */
	margin: 0 auto;
	padding: 0;
	font:12px/16px Verdana, sans-serif; /* default font */
}
div#main{
	background-color: #FFF;
	margin: 0;
	padding: 10px;
}
</style>
</head>
<body><div id="main">

<!-- CONTENT HERE -->

</div></body>
</html>

Put your document where the <!-- CONTENT HERE --> is. Your page will go instantly from dull-looking to presentable. ;-)

The HTML5 Shiv

Some browsers (*cough cough* IE < version 9) do strange things when you apply CSS styles to the newest HTML elements that were introduced with HTML5. Fortunately, there is a painless solution. Simply include the following code in your <head> tag: 

<!--[if lt IE 9]>
<script src="https://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

This so-called HTML5 Shiv will make older versions of Internet Explorer render your pages more closely to how modern browsers do.

Validation

XKCD Comic: tags

HTML and to a lesser extent CSS are forgiving when it comes to syntactical errors in your code. However, it is not good practice to ignore your syntax errors for a variety of reasons:

  • Faster and More Reliable Rendering. Don't leave it up to your client's browser to decide what you meant when you made your syntax error.
  • Interoperability with Compliant Browsers. Although a web page may look right in your testing browser, you need to remember that there are lots of different user agents: other browsers, mobile devices, and screen readers, just to name a few.
  • Accessibility. Valid HTML code enables you to be confident that your page will be accessible to people with disabilities, such as the blind.
  • Search Engine Optimization. Web sites with valid HTML syntax rank higher in search engines like Google.
  • Future Proofing. The W3C specification will not be made backwards-incompatible, so writing valid HTML syntax ensures that your page will work well into the future.
  • More Professional. No seasoned web developer will publish a page with accidental syntax errors.

The industry standard tool for HTML and CSS syntax checking is the W3C Validator. You should ALWAYS validate your code before completing your project! The Validator gives very helpful feedback to help you find and fix syntax errors.

For more information on why it is important to validate, see the W3C's recommendation.

But why don't…

As you play around with the validator, you may have discovered that household name sites like Google and Yahoo do not pass the validator. This is a deliberate act on the part of these web sites because of the following reasons:

  • Download Speed. Sometimes, but not always, valid code adds bytes to the file size. Sites that serve tens of thousands of requests per second are highly concerned with the increased file size.
  • Interoperability with Non-Compliant Browsers. Very old browsers like Netscape Navigator and Internet Explorer 5 do not respond the way that modern browsers do to the same markup.

However, do not take these as reasons to not validate your own code. The reasons listed in the previous section almost always outweigh the counterpoints in this section.

Retrieved from "http://classes.engineering.wustl.edu/cse330/index.php?title=HTML_and_CSS&oldid=2269"