HTML Fundamentals

HTML tags, forms, HTML5 vs XHTML and HTML validation

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.

Structure of HTML Documents and HTML Document Tags

The first thing in your HTML document is a <!DOCTYPE html> tag that specifies the correct version of HTML used throughout the document. The following link shows how to use a <!DOCTYPE> tag:

HTML document type declaration: http://www.w3schools.com/tags/tag_doctype.asp

Each HTML document has a root node, i.e., <html>...</html>. The <html> tag has two children: a head node <head>...</head> and a body node <body>...</body>. The following links provide details.

HTML document tags and the document structure: http://www.w3schools.com/html/html_intro.asp
HTML head: http://www.w3schools.com/html/html_head.asp

HTML Syntax (elements)

Each HTML tag consists of an opening and a closing, that is, <name>...</name>. Typically, you will write content between the opening and the closing tags. The content can be text or other HTML tags. Attributes can be added to an HTML tag, for example, <name attribute_name = "attribute_value">...content...</name>.

HTML elements: http://www.w3schools.com/html/html_elements.asp
HTML attributes: http://www.w3schools.com/html/html_attributes.asp

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

Other Features

HTML entities: http://www.w3schools.com/html/html_entities.asp

HTML symbols: http://www.w3schools.com/html/html_symbols.asp

Character encoding: http://www.w3schools.com/html/html_charset.asp

URL and URL encoding: http://www.w3schools.com/html/html_urlencode.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 Class Exercise In Lab Exercise 1

  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/
  2. Ensure that the permissions are correct (644)
  3. Validate "test_html5.html" using the W3C HTML5 validator (http://validator.w3.org). Correct any mistakes.
  4. 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 Class Exercise In Lab Exercise 2

  1. Edit the HTML "medical_form.html"
  2. 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.
  3. 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.

In Class Exercise 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:
medical form

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.