Web Development Study Guide: Lessons 4–6

How to use this guide

Use this guide after reading Lessons 4, 5, and 6 and completing the related labs. Practice reading short pieces of link, table, and form code and predicting exactly what the browser shows, where it goes, or what it sends. Then build a small linked site with a data table and a form, test every link and path, and compare the name=value results your form submits with what you typed.

The ideas that connect Lessons 4–6

Lesson 4 connects pages into a site with hyperlinks. Lesson 5 organizes information a page displays in rows and columns. Lesson 6 collects information from the people who use the page and sends it to a server. The three lessons rely on the same habits:

Choose the element that matches the purpose. An anchor for a link, a table for data in rows and columns, and a form field that matches the kind of answer you need.
Let attributes carry the meaning. href sets a link’s destination, colspan and rowspan reshape a table’s grid, and name, value, type, method, and action decide what a form sends and where.
Keep structure in HTML and appearance in CSS. Presentational HTML attributes such as border on a table are deprecated; use CSS instead.
Test the result. Check that links and paths resolve, tables adapt to small screens, and forms submit the values you expect.
Keep it simple. Clear link text, plain data tables, and short, clearly labeled forms are easier to use, easier to maintain, and better for search engines.

Lesson 4 — Hyperlinks

The anchor element

An anchor turns text or an image into a hyperlink:

<a href="schedule.html">View the class schedule</a>

<a> is the container element for the link.
href is the hypertext reference that identifies the destination.
The text between the opening and closing tags is the clickable link text.
The opening tag needs a quoted href value, a closing angle bracket, and a matching </a>.

In the example, schedule.html is the target and View the class schedule is the text displayed to users. By default, clicking a hyperlink displays its specified destination in the current browser context; it does not automatically open a new browser window.

Browsers commonly show unvisited links as blue and underlined and visited links as purple and underlined. In CSS, the a:link selector styles unvisited links, a:visited styles visited links, a:hover styles a link under the pointer, and a:active styles a link being clicked. CSS can change these states, but links must remain visually distinguishable and keyboard focus must remain visible.

URI, URL, and path vocabulary

A URI (Uniform Resource Identifier) is the broad category of resource identifiers.
A URL (Uniform Resource Locator) identifies a resource by location and access scheme.
A URN (Uniform Resource Name) identifies a resource by name within a namespace.
A relative or partial URL is resolved from the current document’s directory.
An absolute or fully qualified URL contains the full path, including the protocol indicator such as https://.

Use relative paths for files within your own site:

<a href="about/team.html">Meet the team</a>
<a href="../index.html">Return home</a>

These paths continue to work when the project moves as long as the directory structure and file names remain consistent. Preserve capitalization and spelling because a path that works on one local system may fail on a case-sensitive Web server.

Use an absolute URL for an external resource:

<a href="https://www.w3.org/">World Wide Web Consortium</a>

The protocol indicator is part of a fully qualified external URL. Use publicly available links and trustworthy destinations when linking to other organizations, and consider copyright, licensing, privacy, and implied endorsement.

Local, internal, and external hyperlinks

Local hyperlinks connect pages within your own Website and should use the project’s relative directory structure.
Internal hyperlinks jump to another point or section within the same Webpage.
A link to another Website or external file uses an absolute URL and is an external hyperlink.
An image can become a hyperlink when the <img> element is placed inside an anchor.

<a href="index.html">
  <img src="images/logo.png" alt="Course home" />
</a>

The image is now the clickable link content. Its alt describes the destination or action, not just the image’s appearance.

Fragment links and bookmarks

An internal link requires an internal bookmark, called an anchor, that identifies the point the link references within the page. Define the target with the id attribute, then create the link with an <a> element whose href value starts with #:

<nav aria-label="Glossary index">
  <a href="#html">HTML</a>
  <a href="#url">URL</a>
</nav>

<h2 id="html">HTML</h2>
<p>Hypertext Markup Language structures a document.</p>
<h2 id="url">URL</h2>
<p>A Uniform Resource Locator identifies a resource location.</p>

The # tells the browser to find a target in the current document. A path and fragment can target a section in another file, such as syllabus.html#grading. A full URL plus a fragment, such as http://www.ucorp.biz/internal.html#First, links to an internal anchor in an external file. When the href value omits the #, the browser looks for a location within an external document. The fragment must match the destination id exactly.

A glossary index or table of contents is an indexing and cataloging feature: users can scan available topics and jump directly to the explanation. Test the target’s existence, keyboard behavior, focus location, and browser history.

Link maintenance

Broken or obsolete links create link rot. An automated link checker can identify invalid references, but the next step is to inspect and manually update, repair, or remove the affected code. A successful server response does not prove that the destination is current or useful.

Use a maintenance loop:

Inventory important local, external, image, and fragment links.
Check status, destination relevance, wording, accessibility, and security.
Repair paths, redirects, fragments, link text, or navigation.
Retire obsolete links while preserving necessary user paths and records.

Lesson 4 terms to know

hyperlink, anchor, href, link text, URI, URL, URN, relative URL, partial URL, absolute URL, fully qualified URL, local hyperlink, internal hyperlink, external hyperlink, fragment, hash, id, bookmark, a:link, image link, link rot, link checker, mailto, tel

Lesson 5 — HTML Tables

When to use a table

A table presents information that naturally belongs in rows and columns: schedules, price lists, grades, and directories. Tables add styling control and semantic meaning that the <pre> tag cannot provide.

Do not use tables to lay out a page. The W3C recommends HTML5 structure elements (<header>, <nav>, <section>, <article>, <aside>, <footer>) for page structure. Layout tables are hard to update, confuse screen readers, do not adapt to small screens, and may lower a page’s search ranking. Use data tables tastefully and sparingly.

The table structure tags

Tag	Description	Required?
`<table>...</table>`	Contains all other table elements	Required
`<caption>...</caption>`	Adds a title, which appears above the table by default	Optional
`<tr>...</tr>`	Contains all data for a table row	Required
`<th>...</th>`	Header cell; typically designates cells in the top row or left column	Optional
`<td>...</td>`	Designates table cell contents (table data)	Required

The required tags are <table>, <tr>, and <td>. The caption is the table element that appears apart from the table itself, above the grid by default. Place <caption> first inside <table>, and put every cell inside a <tr>.

<table>
  <caption>
    Table Elements
  </caption>
  <tr>
    <th>Price</th>
    <th>Quantity</th>
  </tr>
  <tr>
    <td>13.95</td>
    <td>72</td>
  </tr>
</table>

By default, a table has no visible border. Header cells (<th>) are bold and centered; data cells (<td>) are normal weight and left-aligned. Both are vertically centered. Align content consistently within each column; numbers are commonly right-aligned.

CSS properties for table elements

The old HTML border attribute (<table border="1">) is deprecated in HTML5 and fails validation. Style tables with CSS instead. The same properties work on table, tr, th, and td; the selector decides where the style applies.

Property	Description
`border`	Determines the style of the border: width, line style, and color, such as `1px solid gray`
`border-collapse`	Combines the borders of adjacent cells into a single border instead of separating them (`collapse`)
`border-spacing`	Determines the amount of space between the borders of adjacent cells
`padding`	Determines the amount of space between cell data and the cell border
`width`	Determines how far the table or cell will extend horizontally across the page
`text-align`	Determines line justification: aligns content horizontally (`left`, `center`, `right`, `justify`)
`vertical-align`	Determined by the relative placement between the top and bottom margins: aligns content vertically (`top`, `middle`, `bottom`)
`background-color`	Fills the table, a row, or a cell with a color name or hex code
`height`	Sets the height of the table or a row; among cells in one row, the largest height wins

Values to remember:

border-spacing and padding are specified in pixels in this course, such as border-spacing: 6px; and padding: 15px;.
width can be specified in pixels or as a percentage. A percentage (such as width: 90%;) adapts to the screen, so it is the better practice for tables that must fit every device.

Keep the most-confused pair straight: padding is inside a cell; border-spacing is between cells. Border-spacing has no visible effect once borders are collapsed.

table {
  border-collapse: collapse;
  width: 90%;
}

th,
td {
  border: 1px solid gray;
  padding: 15px;
}

text-align: center centers content inside cells; it does not move the table. To center the whole table on the page, give it automatic left and right margins:

table.center {
  margin-left: auto;
  margin-right: auto;
}

Spanning columns and rows

colspan and rowspan are HTML attributes of <th> and <td>. They specify the number of columns or rows that a single table cell occupies.

<tr>
  <th colspan="3">Site Development Associate</th>
</tr>

This heading is located in one cell that spans three columns of the table. It is not “in the third column,” and the number is not a width in inches or percent.

<tr>
  <th rowspan="5">Site Development Associate</th>
</tr>

This row heading is located in one cell that vertically spans five rows of the table, counting the row where it starts.

When a cell spans, remove the cells it covers. A colspan="2" header replaces two header cells, and rows under a rowspan cell have one fewer cell. Forgetting to remove the covered cell makes a cell stick out of the grid.

Responsive tables

Bootstrap is a free, open-source front-end framework of HTML and CSS design templates. Wrapping a table in <div class="table-responsive"> lets a wide table scroll inside its own box on a small screen instead of forcing the whole page to scroll sideways. Responsive design means a site works properly on every screen size and resolution.

Lesson 5 terms to know

table, caption, tr, th, td, header cell, data cell, border, border-collapse, border-spacing, padding, width, height, background-color, text-align, vertical-align, colspan, rowspan, deprecated, margin-left: auto, layout table, HTML5 structure elements, Bootstrap, table-responsive, responsive design

Lesson 6 — Web Forms

How a form reaches the server

A Web form collects input from users. The form alone does nothing useful; something on the server must process the data. The elements necessary for client-server communication are:

Web browser — displays the form and sends the data.
Web form — the fields the user fills in.
Web server — receives the request (for example, IIS, Tomcat, or Apache).
Server-side script or CGI script — processes the data on the server.

A server-side script stays on the server and processes form input there. Modern server-side languages that handle form input include PHP, ASP (ASP.NET), and Java.
A client-side script is code embedded in an HTML page and downloaded by the user to help process Web form input, such as JavaScript.
The Common Gateway Interface (CGI) is the long-standing standard that lets a Web server pass form data to a program. CGI scripts have traditionally been written in Perl.

Do not confuse the categories: IIS, Tomcat, and Apache are Web servers; Linux/UNIX, Mac, and Windows are operating systems; PHP, ASP, and Java are scripting and programming languages.

Submit, reset, and raw text strings

Submitting the form uploads the data from all fields to the receiving server, where it is processed by the script specified in the <form> tag’s action attribute.
Resetting the form clears the data and redisplays every field with its default value.

When you submit, the browser sends the form’s contents as a raw text string of name=value pairs:

Name=Dimitri+Pappas&Email=student50@class.com&AddToList=yes

The name attribute of each field supplies the name half; the user’s entry or the field’s value supplies the value half.
Ampersands (&) delimit the name=value pairs.
Plus signs (+) replace spaces.
An empty text box sends its name with nothing after the equal sign, such as Email=.

On the Web server, a server-side script parses the raw text string and formats it into a human-readable format:

Name:          Dimitri Pappas
Email:         student50@class.com
Mailing List:  Yes

A script can then store the data, search a database, send a response to the user, or transmit the data by email, FTP, HTTP, or HTTPS. PHP’s mail() function is a common way to email form results.

The `<form>` tag

<form>...</form> is the container for every field. Always include the closing tag.

<form method="post" action="http://www.anyserver.com/cgi-bin/scriptfile">
  ...
</form>

Attribute or value	Description
`method`	Specifies the manner in which the browser will send form data to a Web server
`action`	Specifies the name and location of the CGI or other server-side script used to process the form
`get`	Appends the form data to the URL for use in a query string; the default method
`post`	Sends the data in the body of the request; allows sending more characters and is more secure than `get`

post keeps data out of the URL, but it does not encrypt the data. Only HTTPS encrypts form data in transit, so use post over HTTPS for anything sensitive.

The three field tags

Tag	Creates
`<input>`	Text boxes, password fields, checkboxes, radio buttons, file upload, the Submit and Reset buttons, and the HTML5 number, date, time, and range fields
`<select>`	Single-option and multiple-option lists from which users choose items; contains `<option>` elements
`<textarea>`	A scrolling text field into which users can enter multiple lines of text

With <input>, you designate the form field type by assigning a value to the type attribute. The name attribute labels each field’s data in the results.

Form field reference

Field	Description	Code
Text box	A text field into which a user can enter characters	`<input type="text">`
Password field	A text box that visually masks entered characters as filled circles	`<input type="password">`
Radio buttons	Round option buttons in a group of two or more mutually exclusive options	`<input type="radio">`
Checkboxes	Square boxes in a group of two or more non-exclusive options	`<input type="checkbox">`
Single-option select list	A drop-down list of two or more options from which a single selection can be made	`<select>`
Multiple-option select list	An exposed list of two or more options, optionally scrollable, from which a user can make more than one selection	`<select multiple="multiple">`
Text area	A scrolling text field into which the user can enter multiple lines of text	`<textarea>`
File upload	A button and field that let users navigate to and select a local file for uploading	`<input type="file">`
Submit button	A button that, when clicked, causes the form’s action statement to process	`<input type="submit">`
Reset button	A button that clears all form data and sets all fields back to their default values	`<input type="reset">`

Text boxes

<input
  type="text"
  name="City"
  value="Booneville"
  size="30"
  maxlength="40"
  placeholder="Your city"
/>

value places default text inside the text box.
size sets the display width in characters.
maxlength sets the maximum number of characters a user can enter.
placeholder shows a hint that disappears when the user types and is not submitted.

File upload

<input type="file" name="File" />

This creates a Browse (or Choose File) button so users can select and upload files to your site.

Radio buttons and checkboxes

<input type="radio" name="AddToList" value="yes" checked="checked" /> Yes
<input type="radio" name="AddToList" value="no" /> No

Radio buttons are exclusive because every button in the group shares the same name attribute. Each button has its own value.
checked="checked" designates the preselected option.
Checkboxes allow any number of choices. Give checkboxes separate names to record each choice as its own field, or a shared name to treat them as one grouped field. The type keyword is checkbox, one word.

Select lists

<select name="timeofday" multiple="multiple" size="4">
  <option>Morning</option>
  <option>Afternoon</option>
  <option>Evening</option>
  <option value="Remove">Never</option>
</select>

multiple="multiple" allows users to choose more than one option (Ctrl+click or Cmd+click).
size controls the number of items that appear in the scrolling list box. If you omit size, the number of items shown by default depends on the browser.
An <option> submits its visible text unless it has a value, which is sent instead.

Scrolling text area

<textarea name="comments" cols="30" rows="3"></textarea>

cols specifies the width in characters.
rows specifies the number of visible lines.
Text placed between the tags appears as default text.

HTML5 input types

<input type="number" name="age" min="15" max="65" />
<input type="date" name="date" />
<input type="range" name="rating" min="1" max="10" value="5" />

number accepts numbers within min and max, with optional step and a default value.
date, time, and datetime-local show a picker in supporting browsers.
range shows a slider for an approximate value; the default range is 0–100.
email checks for a valid email address.

CAPTCHAs and SEO

A CAPTCHA (Completely Automated Public Turing Test to Tell Computers and Humans Apart) is a challenge that separates people from automated bots to stop spam submissions. Text, image, and audio versions exist; audio CAPTCHAs support users who are blind or have low vision. Google’s reCAPTCHA moved from typed words toward analyzing user behavior.

Search engine optimization (SEO) means designing pages so search engines rank them highly. For forms:

Create as simple a form as possible; extra fields can lower the score.
A CAPTCHA can lower the score because bots stop there.
Use informative, descriptive labels for fields.
Provide a clear call to action, alt text for images, text navigation, responsive design, and cross-links to important pages.

Lesson 6 terms to know

Web form, Web server, server-side script, client-side script, CGI, Perl, PHP, ASP.NET, raw text string, name=value pair, ampersand, parse, submit, reset, form, method, action, get, post, HTTPS, input, type, name, value, size, maxlength, placeholder, text box, password field, radio button, checked, checkbox, file upload, select, option, multiple, textarea, cols, rows, number, date, range, CAPTCHA, reCAPTCHA, SEO