Web Design Primer
Chapter 3 – HTML
The structure of web pages is provided by the hypertext markup language (HTML), which includes various tags for text and objects. Tags are enclosed in less-than and greater-than symbols, such as the paragraph tag, <p>. Most tags have opening and closing tags. The closing tag is written with a forwards slash (/) before the tag. Thus, we have a paragraph: <p>Sample paragraph</p>.
HTML is different from page layout for print because, while the print designer most likely knows the finished size of the document, and which is the same for all copies, the web designer does not know the type of equipment that the reader has — Is it a Windows or Macintosh computer? Android, iOS, or Windows tablet or smartphone? What size monitor? What size browser window? HTML code allows for the page to be created for each reader’s equipment and settings.
Page Structure
Web pages are created with the <html> tag, which is analogous to a piece of paper in print. The area of the page visible to users is the <body>, analogous to the finished size of a print document. The <head> contains tags invisible to the user, such as <title> (name in the browser tab) and <style> (global or embedded style). Each web page should only have one <head>, and <body> tag.
Constructing a Web Page
To construct a web page, the designer would enclose each paragraph in opening and closing <p> tags. Headers could be used to mark important sections, <h1> being the largest and <h2> the smallest.
The designer can style the type elements to include type style (font-family), type size (font-size), line leading or spacing (line-height), position (text-align), and colour (color).
Images in compatible file formats (JPEG, PNG, GIF) can be placed on the page using the <img> tag, e.g., <img src=”filename.jpg” />. Unlike in page layout programs for print documents, images cannot be placed visually on the page. They can occupy their own lines or a text wrap can be created with the “float” style (e.g., <img src=”filename.jpg” style=”float: left;”). Space can be placed around the image using the “margin” style.
Relevant items can be grouped using the <header> and <footer> tags, usually at the top and bottom of the page, respectively, or with a <div> tag in the main body.
| tag | description |
|---|---|
| Text tags | |
| <p> | paragraph |
| <h1>…<h6> | heading 1 to 6 (1 is largest) |
| <ul> | unordered list, or bullet points |
| <ol> | ordered list, or numbered steps |
| <li> | list items in a <ul> or <ol> series; can also be used to construct menus |
| Object tags | |
| <img/> | image, must be accompanied by “src” and the name of the image file; self-closing tag |
| <div> | division, can act as a picture box, text box, grouping tag, or object unto itself |
| <a> | anchor, or link to another page, another location on a page, or another site. Accompanied by the name of the link as “href,” e.g., <a href=”filename.html”> |
| <br/> | break, or carriage return; can be substituted with margin-bottom or padding-bottom; self-closing |
| <table> | table |
| <tr> | table row; each table needs at least one <tr> tag to appear |
| <td> | table data, or cell; each table needs at least one <td> tag to appear; columns are determined by the number of <td> tags in a row. Cells can be merged with the “colspan” tag, e.g., <td colspan=”2″> |
| <video> | inserts a video of compatible file type into the page |
| <audio> | inserts an audio clip of compatible file type |
| Grouping Tags | |
| <header> | area at the top of a page, e.g., could hold a banner and menu |
| <footer> | area at the bottom of a page |
| <nav> | navigation, useful for holding a menu of links to other pages or sites |
| <div> | mentioned above, could also be used to group objects |
The Four “Ws” of Web Design
When designing web pages, the authors recommend recognizing four design principles:
- Design for Width. Although the web designer does not know the width of the user’s browser window, he or she can design for numerous possibilities by specifying width as percent and by implementing “responsive design” through the use of media queries (see Chapter 5). Whatever the width of the browser window, users can scroll to access the page’s height dimension.
- Who. Although target audiences can be defined and/or assumed, we never know who will be viewing our web pages. Regardless, we want to welcome all appropriate readers and enable them to conveniently read the information on our site.
- What. We do not know what equipment the user has, e.g., Macintosh or Windows computer, tablet, or smart phone; screen size; browser; installed fonts; internet connection speed; and other factors. Still, we try to create designs that look good on the widest variety of devices.
- Where. We do not necessarily know where our readers came from, but we still want them to find our site appropriately and not to lose the link to our site. For example, when linking to another site, using the target=”_blank” specification will cause the linked site to open in a new tab or window, thus preserving the reader’s access to our site.
Links
A key feature of web pages is the ability to navigate among pages, locations within a page, and other sites. Links are created with the anchor tag, <a>, which is generally accompanied by “href” and the name of the page, location (ID), or site. Three types of links include:
- local or relative links—These go to other pages in a site. Format: <a href=”filename.html”>. The complete path to the file must be written in the tag. E.g., the above tag assumes that “filename.html” is present in the same folder as the current file. If it was in a folder called “pages,” the tag should read <a href=”pages/filename.html”>
- anchors—Anchors to go to another location in the same page. The destination is represented by a tag with an ID, and the ID is cited in the anchor. E.g., <a href=”para1″>. Anchors are often used to allow readers to conveniently navigate back to the top of the page or to an area further down on the page.
- global or absolute links—These go to other sites, e.g., <a href=”http://www.ryerson.ca”>. Again, specifying target=”_blank” will open the linked site in a new browser tab or window, preventing readers from losing our site.
Forms
“Here, fill out this form!”—not a pleasant sound to many people’s ears. Adding to that is the concern about seeing the fine print, that someone can’t read your handwriting, and those repetitive fields. Thanks to the web, forms can now be created for users to fill in online—perhaps in advance.
A form can be written on the web or given to end-users to download as Fillable PDF and either upload, email, or submit the forms data. An advantage of PDF is that the user can save the form, change the data, and submit it again if required.
Online forms can use multiple types of objects for collecting data, including text fields, radio buttons, check boxes, and selection lists (Table 3-2).
| Purpose | Description | Code |
|---|---|---|
| text and numerical entries | fields for readers to type information | <input type=“text”> |
| radio buttons | selecting a single option from a predefined list | <input type=“radio”> |
| check box | specifying one or multiple items as present or absent | <input type=“checkbox”> |
| text areas | allows for the entry of multiple lines of text | <textarea> |
| selection lists | lists of options in drop-down lists | <select>
<option> |
| submit button | transmits form data | <input type=“submit”> |
The form part of a web page is designed by the <form> tag. The form tag should include a name, ID, action, and method.
