Watkins Web 2: Blog

Posts tagged with “tutorials”

Advanced Forms and Attribute Selectors

Download Exercise 15

Update: A solution is now included with the files.

Fun facts about forms

  1. A form is first-and-foremost defined by the elements between <form> and </form> tags. There might be many text fields, radio buttons, and checkboxes, but if they all appear inside a single set of <form> tags, that’s one form.
  2. Forms usually have at least two attributes, called method and action. The two options for method are get and post, and the action specifies a file to process the form when it gets submitted. So usually we’ll write something like <form id="contact" method="post" action="email-sender.php"">. We’ll go over these details later.
  3. Most form elements are inline by default, and inline HTML elements need to be contained by block level elements to be valid. This is why you see so many pointless-looking <div> tags in forms.
  4. The most common form elements — text inputs, textareas, and submit buttons — require illogical-looking markup. Pay special attention to the type attribute whenever you see an input:
    Form element Markup Output
    A single-line text field <input type="text" />
    A multiline text area <textarea rows="5" cols="20">I suppose some placeholder text could go here, but most people leave it out.</textarea>
    A “submit” button that sends a form <input type="submit" value="Submit Form!" />

Further Reading

Intro to The Shell

The Mac’s Terminal.app program lets you control the system with text commands, sort of like DOS before Windows arrived. Technically you’re using this interface to interact with Mac OS X’s Unix underpinnings, bypassing the graphical user interface entirely. (Unix is an open-source operating system that dates back to the 1970s: many present-day operating systems are built on top of it, including Mac OS X and  the various kinds of Linux, some of which run on personal computers and others of which run on web servers). Apache is a web hosting program that runs on Linux. Windows is not Unix.

Terminal’s text-only environment is variously called “the terminal,” “the command line,” “the shell,” and bash (short for “Bourne-again shell” — don’t ask). In general, you can use the shell to run scary system-level scripts, monitor system processes, log into other computers or remote web servers, etc. Serious nerds even edit text files with shell programs like Vim, Vi, or Emacs.

The first thing you’ll notice about the shell is its limitations: you have to use the arrow keys to move around, you can’t select text and delete it, you can only clear a line you’re writing with [ctrl] c, etc. Try exploring with the commands below.

Important Commands

Command Description
pwd Path of working directory
Outputs the current folder you’re in
ls List files
Shows all files and folders in the current working directory
clear Clear
Clears the screen
cd foldername Change directory
Moves you into a different directory. Use cd.. to go up a level. You must “escape” spaces with a forward slash: cd My\ Folder. Note that you can drag a file or folder from the Finder right into Terminal and it will insert the corresponding file path instantly.
cp filename.txt filename2.txt Copy
Copy a file — you must provide both the original and new file names, separated by a space.
mv filename.txt path/to/folder/ Move
Move a file — you must provide the file name and a destination directory, separated by a space.
mkdir foldername Make directory
Creates a new folder
curl http://website.com Client for URLs
Scoops the HTML source of a webpage and outputs it
banner word Banner Text
Outputs ridiculous sideways ascii art of word
[ctrl] c Cancel
Clears the line that you’re writing
Up arrow
Shows previous commands. Keep hitting ↑ to go further back in your history and ↓ to go forward.

Further Reading

Clearing floats: the Advanced Version

Most medium-complex sites involve floating elements to put them side-by-side. Often we want elements that follow floated elements not to be affected by them. Here are the top three ways to deal with clearing floats.

Using a dedicated .clear class


<p class="clear">Some text that follows some floats elements</p>


.clear {

Using a dedicated .clearfix class to make a container “self-clearing”


<ul id="gallery" class="clearfix">
<li><a href="#"><img src="image.jpg" alt="Image" /></a></li>
<li><a href="#"><img src="image.jpg" alt="Image" /></a></li>
<li><a href="#"><img src="image.jpg" alt="Image" /></a></li>


#gallery li {
.clearfix:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;

For those scoring at home, the idea is to use the :after pseudo-class to insert the period character (.), set it to display:block, clear any floats, and then hide that extra character. Clever.

The Document Object Model

Whenever you hear about the “Document Object Model” (or “DOM”), it’s usually in the context of Javascript. But it actually applies to CSS, too, when you have to decide what kind of a selector to use. The diagram below shows how you might draw the structural relationship of a simple page, and therefore what relationship the individual elements have to each other.

Example web page

Document Object Model diagram 1

Page translated into a “tree and node” diagram

Document Object Model diagram 2

CSS selectors

This should help clarify some of the selector syntax we have been working with, and the situations that each is useful for:

/* Set every paragraph in Georgia */ 
p {font-family:georgia, serif;}
/* Create small-caps for every span that has a class of caps */ 
span.caps {font-size:.9em; letter-spacing:1px;}
/* Turn span text green, but only if the span is 
a descendent of emphasized text (here this rule will be applied 
to the second span only) */
em span {color:green;}
/* Italicize paragraphs that are the first child 
of the #main div (here this rule will be applied 
to the first paragraph only) */
#main p:first-child {font-style:italic;}
/* Put spans in bold, but only if they are 
children of paragraphs (here this will be applied 
to the first span but not the second) */
p > span {font-weight:bold;}

Further Reading

Review: Classes, IDs, Selectors

For your reference I’m reposting this guide from the Web 1 blog:

Classes vs. IDs

Classes and IDs should first be understood as attributes that you add to HTML entities – they just happen to be particularly useful as targets of CSS selectors. So you might change <p>Some content</p> to <p id="footer">Some content</p> so that you can style it a particular way.

The point of IDs is that they are unique identifiers for a particular HTML entity. Therefore, they only be used once on a page. If you want to create a set of things to be styled the same way, use a class: you could have <p class="infobox">Welcome to my site</p> near the top of the page and then <p class="infobox">Check out my other website...</p> further down the page.

CSS Selectors

Pay careful attention to the use of spaces: they indicate a descendent selector. p#special refers to the HTML element <p id="special">, but p #special (with a space after the p) refers to “anything with an id of special inside a paragraph.” For example, the span inside <p>Some content <span id="special">some nested content<span></p>

This table summarizes the most common ways to style elements using IDs, classes, and descendent selectors:

What we want to style HTML CSS Rule
All paragraphs <p>Sample</p> p {color:red;}
All paragraphs with a class of special <p class="special">Sample</p> p.special {color:red;}
The (only) paragraph with an id of first <p id="first">Sample</p> p#first {color:red;}
Anything with a class of warning <p class="warning">Sample</p>, but also <ul class="warning">, <div class="warning">, etc., if they exist. .warning {color:red;}
Paragraphs nested inside the maincontent div <div id="maincontent"><p>Sample</p></div> div#maincontent p {color:red;}
List items nested inside unordered lists that have a class of ingredients <ul class="ingredients"><li>Sample</li></ul> ul.ingredients li {color:red;}