HTML Tags
An HTML document can be described by a set of HTML tags. We will introduce several common HTML tags that can be used to produce a basic page with images, lists, tables and links.
Document Structure Tags
Consider what you need when you write an article: a main title with subheadings and paragraphs. To create titles/headings in HTML, the format is: <h>...</h>, where a number appears after the h. For instance, h1 is the most important heading (like your title) and h6 is the least important (a sub-sub-sub-sub-subheading). Paragraphs are denoted with the opening and closing pair: <p>...</p>. Highlights such as bold (<strong>...</strong>), italics (<i>...</i>), and underlining (<u>...</u>) may be used during writing. The following links provide details.
HTML headings: http://www.w3schools.com/html/html_headings.asp
HTML paragraphs: http://www.w3schools.com/html/html_paragraphs.asp
HTML formatting: http://www.w3schools.com/html/html_formatting.asp
List Tags
List tags are an essential part of HTML. The three kinds of lists are: unordered lists (<ul>...</ul>), ordered lists (<ol>...</ol>) and description lists (<dl>...</dl>). In the ordered and unordered lists, a <li>...</li> tag is used around each list item. In the description list, a pair of term <dt>...</dt> tags and description <dd>...</dd> tags are used to define each list item. The following link provides details.
HTML lists: http://www.w3schools.com/html/html_lists.asp
Table Tags
To include tables in an HTML document, you will use the <table>...</table> tags. An HTML table contains captions (<caption>...</caption>) and rows (<tr>...</tr>). Each row contains columns, otherwise known as table data (<td>...</td>). The data for the first row is usually a set of headings denoted using (<th>...</th>) in place of the <td> pair. The following link provides details.
HTML tables: http://www.w3schools.com/html/html_tables.asp
Image Tags
The most commonly used formats for image files are GIF (graphic interchange format), JPEG (joint photographic experts group) and PNG (portable network graphics). To insert images into a web page, you use the tag: (<img src="..." alt="..." />), where a source attribute, i.e., src, and an attribute for alternative text, i.e., alt, should be specified. A width attribute and a height attribute can be used optionally. However, it should be pointed out that arbitrary use of these two attributes may distort (squish or stretch) the image. The following links provide details on using images tags.
HTML images: http://www.w3schools.com/html/html_images.asp
Tags for Links
Links can be considered the most important element of an HTML document. Without HTML links, there would be no "surfing the web" as you know it. The use of links, i.e., <a href="">...</a> enable us jump from one page to another with a simple click. There are two ways of specifying a web address: either as a relative address or an absolute address. In addition, you may use an <id> attribute to create bookmarks (places to jump) within an HTML document.
HTML links: http://www.w3schools.com/html/html_links.asp
HTML Block and Inline elements
All HTML elements can be categorized into two types: inline elements and block elements. Inline elements do not explicitly include a line break and the content appears on the current line (or, as the name implies, "in-that-line"). Examples of inline elements are: <td>, <a>, and <img>. By contrast, block elements normally start and end with an implicit new line. For example, <table>, <div>, <p> and <h1> tags are block elements.
HTML blocks: http://www.w3schools.com/html/html_blocks.asp
XHTML vs HTML5
XHTML is HTML redesigned as XML. It provides more strict syntax rules than HTML. HTML5 is a newly designed specification with more advanced features (such as tags for adding video, audio, and graphics and additional functionality). Currently, most modern Internet browsers support this specification. The following links provide the details of the two specifications.
What is XHTML: http://www.w3schools.com/html/html_xhtml.asp
What's new in HTML5: http://www.w3schools.com/html/html5_intro.asp
HTML Validation
Through a W3C validator, all errors and potential problems in your HTML code can be identified. To ensure that you are coding correctly, this lab requires that all your HTML code be validated. To do this, you need to copy your URL address into the text box provided by the following W3C validation service web site:
The W3C Markup Validation Service: http://validator.w3.org
More information about web validation: http://www.w3schools.com/website/web_validate.asp
Rules for Writing HTML5 in XHTML Format
In the lab, we will be writing HTML5 but adhering to the strict rules of XHTML to encourage proper programming habits. Therefore, you should be aware of the following XHTML syntax rules:
- 1. case sensitivity
- all tags and attributes must be in lower case
- 2. closing tags
- all tags must be closed
- 3. quoted attribute values
- all attribute values must be in quotes
- 4. explicit attribute values
- all attributes must be specified by assignment
- 5. id and name attributes
- only use name for form elements; use id everywhere else it is needed
- 6. element nesting
- the rules for element nesting must be followed. Most important, a block element cannot be nested in an inline element.
Validating HTML5 as XHTML1.1
In order to validate your HTML5 as XHTML, you need to modify some of the content to ensure it is valid XHTML:
- replace the
<!DOCTYPE html> with
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
- add the
xmlns attribute to <html> tag, that is, using the following html tag:
<html xmlns = "http://www.w3.org/1999/xhtml">
- comment out the character set line:
<meta charset = "utf-8">
A comment in HTML is anything between the following two partial tags: <!-- Comments are here -->
In Lab Exercise 1
- Copy the poorly written HTML5 page: "test_html5.html" into public_html directory
using the following command:
cp /net/data/ftp/pub/class/215/basic_html/test_html5.html ~/public_html/
- Ensure that the permissions are correct (644)
- Validate "test_html5.html" using the W3C HTML5 validator (http://validator.w3.org). Correct any mistakes.
- Validate "test_html5.html" using the XHTML1.1 validator (see the notes above on converting your code to XHTML1.1). You will notice that it complains about the
<section> tag. This is a new tag specified in HTML5; it can remain in the code. Besides the two <section> tag errors, all other errors can be corrected.
HTML Forms
You have all encountered HTML forms when you make an online purchase and fill in your address and information. You will be learning how to create a basic HTML form (i.e., <form action="" method="">...</form>). In a form tag, an action="process.php" attribute specifies a server-side program that is waiting to process the user inputs; in this example, the program is php code saved in the "process.php" file. A method="post" attribute specifies the type of method, which will be either get or post, used for submitting the information. With the help of HTML input elements (i.e., <input type="" name="" />), different types of content can be collected. To summarize, we have three types of input elements. The first type is for plain text and includes text, password and textarea. The second type provides options for choices and includes radio, checkbox and select. The third type is for submitting or resetting user inputs and includes submit and reset. All form elements need to have a <name=""> attribute specified. For working with JavaScript, one can specify an extra <id> attribute, for example, <input type="text" name="first_Name" id="first_Name" />. The following links provide details.
HTML form tag and attributes: http://www.w3schools.com/html/html_forms.asp
HTML input types: http://www.w3schools.com/html/html_form_input_types.asp
More input elements: http://www.w3schools.com/html/html_form_elements.asp
In Lab Exercise 2
- Edit the HTML "medical_form.html"
- Create a simple HTML form, which should include an input text box for entering the name, an input box for passwords, a group of radio buttons for gender and a drop-down list for selecting the nationality.
- Validate the page for XHTML 1.1 format (http://validator.w3.org).
Structure of a PHP Web Project
In order to maintain a nice project structure, you need to carefully design the directories to store your HTML pages, PHP scripts, styles sheets, JavaScript files, and resources such as images. The following gives you a sample structure of a web project.
--public_html/;
+--index.html (or index.php)
+--basic_html_pages/
+--introduction.html
+--friends_list.html
+--login_form.html
+--register_form.html
+--php_services/
+--add_a_user.php
+--post_a_message.php
+--display_messages.php
+--includes/
+--db_connect.php
+--header.php
+--footer.php
+--functions.php
+--images/
+--profile1.png
+--profile2.jpg
+--profile3.png
+--profile3.gif
+--css/
+--style.css
+--scripts/
+--validation.js
+--display_messages.js
+--lib/
+--dojo.js
+--jquery.js
The public_html is the root folder of your project/website. In the root folder, you will have the index.html(index.php) file as your home page. All your additional HTML pages, for example, introduction.html, can be put into the basic_html_pages folder. You can put the server side scripts, for example, PHP files, into a php_service folder. Commonly used PHP functions including header and footer information should be put into the includes folder. Image files, CSS files and external JavaScript files can be put into the images, css and scripts folders, respectively. If you would like to download third party libraries, you should put them into the lib folder.
Note: This provides an example of what might be done in industry. For the lab, you will be creating separate directories for each lab to nicely
organize your work incrementally. For each assignment, you should also create a unique directory.
Lab Assignment
last week, you created "medical_form.html" in the public_html directory.
This week work on your medical form using HTML form tags. The page must pass HTML validation.
A sample medical form is provided below:
Upload the zipped file medical_form.html to URcourses before 11:55PM today.
Important Note: Your HTML5 documents may not pass XHTML1.1 validation.
Some HTML5 tags do not exist in XHTML and will, therefore, not pass validation. However, you must make sure your web pages do not contain any syntax errors according to XHTML. That is, some errors are allowed. For example, when using the HTML5 <article> tag, you will have an error message: "element 'article' undefined"; you may also have an error such as "there is no attribute id" when you use something like <section id="mysecid">. Syntax errors according to XHTML (i.e., a paragraph tag without a closing, an image tag without a back slash, or an embedded block element inside a non-block element) are not allowed.