Software: XHTML
Additional Information about XHTML
Basic Structure
The basic structure of a web page is extremely simple. The really exciting thing about writing HTML, is that you can test it out immediately to see how it works. Let's start by producing some very simple web pages just to get some practice. Open up the text file "index.html" located in the "practice_sties" then xhtml folder that you copied to the desktop.
Follow along with this basic XHTML structure tutorial to create the basic outline for your first web page.
Activity: Open the index page in the xhtml folder and follow along with the tutorial adding the XHTML to your web page. When you finish continue moving through the tutorials on this page until you reach the "Additional Information" Section.
HTML is broken down into elements, attributes, and values.
Understanding HTML Building Blocks Tutorial
Block-Level Elements
Block-level elements are like the building blocks of your initial mark-up of the page. They start things on a new line and give a little space above and below the element. Use these to create an outline of your information.
| Type | Element(s) |
|---|---|
| Headings | h1,h2,h3,h4,h5,h6 |
| Paragraphs | p |
| Block (long) quotes | blockquote |
| Preformatted text | pre |
| Various list elements | ol,ul,li,dl,dt,dd |
| Horizontal rule (lines) | hr |
Paragraph | <p>
Paragraph tags are the most basic elements. Simply open a <p> tag at the beginning of a paragraph and put a closing </p> tag at the end. Paragraphs can contain text, images and inline elements within the p tags but make sure not to include any other block elements.
Activity: Add the paragraph tag to the paragraph of text on your index page.
Headings | <h1,2,3,4,5,6>
If you have ever made an outline you know that headings are used to communicate the hierarchy of information. Even though heading tags will change the way your text looks in HTML, you need to ignore the presentation because we will be changing that with our style sheets. Think of the heading numbers as being levels of importance. For example, if you are planning to use the heading tags:
- h1 might be used for the title of your page
- h2 might be used for section headings
- h3 might be used for sub section headings
Activity: Use a heading 1 tag for the "School Adz" title at the top. Use a heading 2 tags for the "Links" title near the bottom of the page.
Horizontal Rule | <hr />
The horizontal rule is a simple tag often used to separate section of your page. It basically puts a line across your page with a little space above and below. Horizontal rules can be formatted use style sheets. It is a self closing tag so make sure to include the "space forward slash" at the end.
Activity: Add a horizontal rule to at the bottom of all the web pages.
Lists | ol,ul,li,dl,dt,dd
There are basically three types of list in HTML.
- Unordered list: These are list who order is not structured. By default a round bullet will be placed in front of each item (just like this unordered list) but you can change it with a style sheet using the "list-style-type" property. You will use the <ul> and </ul> tags to open and close your list. Then use the <li> and </li> tags to open and close each item.
- Ordered List: These are list who have a structured order with numbers or letters. You can use a style sheet to format this type of a list and you can define the number you want to start inside the opening ordered list tag with a start attribute. (start="5" will start the list at 5) You will use the <ol> and </ol> tags to open and close your list. Then use the <li> and </li> tags to open and close each item.
- Definition List: Definition list are use to indent the meaning of a definition after the word. Start the list with an open <dl> and a close </dl> (definition list). Then use an open <dt> and a close </dt> around the definitions term. Finally, use an open <dd> and a close </dd> around the definition itself.
Activity: Use a series of unordered list to help organize the information on the businesses and form pages and the navigation links on all pages. Use a definition list to format the information on the contacts page. We will use style sheets to format these list later.
Inline Elements
Line Breaks | <br />Sometimes you want to break up a line of text but don't want that extra space above and below that a paragraph tag give you. That is where line breaks come in. The inline line break element <br /> allows you to force text or images onto the next line without that space. It is an empty element so it will be self closing.
Inline Text Elements | <em> and <strong>
We are only going to focus on the two semantic inline text elements that indicate that text should be emphasized. The cool thing about these two is that some screen readers will change the tone of voice to convey the emphasis! This are tags need to enclose the text they are formatting with an open and closing tag.
- em: Text that should be emphasized. This will usually display as italisized text.
- strong: Text that should be strongly emphasized. This will usually display as bold text.
Activity: Emphasize the word FREE on the home page.
Special Characters
Since HTML uses characters like the < (less than) sign in the coding of a web page browsers might mistake it if you try to using it in the content of your page. So there is both a "numberic" and "named" way to get these special characters onto your web page. Use the "Special Characters" chart in the Files/Coding Examples folder for reference.
Activity: Replace the quote marks on the home page with special characters.
Adding Links
The best thing about the World Wide Web is how everything is connected through hypertext or hyperlinks. In this lesson you will learn how to link to other peoples web sites, web pages within your site, links within a web page, to an email address and how to control what window those links open in. To use the anchor element or hypertext link, simply suround your text or image with an opening <a> tag and then closed with a closing </a> tag and use the href attribute to provide the URL. For example, to link to Google you would use <a href="http://www.google.com"> Google </a>. Hypertext can be typically identified by an underline and a color other than the rest of the text. A hyper linked image is sometimes surrounded by a blue border or changes when your pointer moves over it. You can tell an image or text is hyper linked when the mouse pointer changes to a hand when it moves over the link.
The href Attibute
The href attribute tells your browser which page to display. In addition to linking to web pages, you can also link to images, audio and video files.
Absolute URLs: When you want to link to someone elses web site you will need to use an absolute URL. It will always start with the protocol (http://). I suggest you copy this from a browser and then paste them into your code to ensure they are accurate.
Example: href="http://www.google.com"
Relative URLs: When you want to link to pages or media within your web site you will use relative URLs. That way they will work regardless of whether the files are on you computer at home, on the web server (FTP), or your network drive at school because their relationship to each other is "relative". The tricky part about relative linking is going up or down in your directory (folder) structure. When you want to go into a folder you will add the folder name and a forward slash before the file name. When you want to get out of a folder and link to a file you will use ../ before the file name.
Example #1: href="forms/form.html" <<This example would go into a folder to open a file called "form.html"
Example #2: href="../contacts.html" <<This example would go out of the current folder the file is in and open a file called "contacts.html"
Linking Tips:
- There is a graphic example of this in the coding examples folder in the Unit 03 "Files" folder.
- This techniques is the same for linking to images when you are putting them on your web pages.
- For more information check out this article from the Web Developers Virtual Library "Absolute and Relative Links"
- Saving a file as "index.htm" makes the file the default file in a folder. In other words, when you type in a URL that references a folder, but does not specify a particular file, then the index web page will be displayed.
Activity: Use an absolute link for the "Mount Si Home Page" link (http://www.mountsihighschool.com). Use a relative link to the contacts.html. Test the pages.
Absolute and Relative Links Tutorial
Email Links
You can create a link that will automatically launch a mail program and preaddress the message to your email address. Just include mailto: before the email address within the href value. However this only works when the viewer has their browser configured correctly. Therefore you should always include the email address as part of the hypertext.
Example: <a href="mailto:webadmin@svsd410.org"> dockeryj@svsd410.org </a>
Tips & Tricks
Here is a tutorial that will show you how to code in the subject line or send the email to additional people. More
Activity: Create a hyperlink to your email on the "contacts.html" page.
Adding Images
Images make a web page more interesting but slows the download time. Images can be displayed on a web page as an inline content or as a tiled background. We will be using style sheets for placing images into the background of our web pages so in this lesson we will concentrate on putting them on the page as an inline element.
Inline images can be used three basic ways.
- An image: You can simply place an image on the page as decoration or to help communicate an idea/concept. An example might be a company logo.
- As a Link: I am sure you have been to web sites that use images as buttons. Simply surround an image tag with the same open and closing anchor tags we learned about in the last lesson and you will have a button.
- As an Imagemap: An imagemap is a single image that has multiple hyperlinks. We will practice writing the code to create a simple image at the end of this lesson.
Image Format
Make sure that you only use GIF, JPEG, or PNG files in your web pages. All imaging applications will allow you to save your images as one of these formats. We will cover these in much more detail later in the class. For now try to follow these basic rules:
- GIF (.gif): This file format is best for computer graphics with limited numbers of colors or if you need to have transparency.
- JPEG (.jpg): This file format is best for photographs becuase it handled millions of colors well.
- PNG (.png): This is the newest file format. It can handle transparency and millions of colors well.
Just make sure that when you write your code you include the correct file extension. Example: <img src="images/photo.jpg" />
The img Element
The <img />tag is a self closing inline element. Which means a couple things. First you will need to include it within another block level element (parapgraph, heading, div). Second, that by default it does not add space above or below the image and it can be place in the flow of text. You will need to use a couple attributes that help the browser handle the img tag.
- src (source): This attribute tells the browser where to find the image file on your server or on the Internet. If you are using an images folder make sure to start your path name with it.
Example: src="images/photo.jpg" *This attribute is required by the W3C! - alt (alternate text): This attribute provides the browser and screen readers with alternate text to display if images are turned off or if the screen readers is trying to describe your image.
Example: alt="School Adz Logo" *This attribute is required by the W3C! - height: This attribute provides the browser with information so it can display the page faster.The value is the height of the image in pixels.
Example: height="100" *This attribute is required by your instructor! - width: This attribute provides the browser with information so it can display the page faster.The value is the width of the image in pixels.
Example: width="200" *This attribute is required by your instructor!
***You can find the height and width of an image by right clicking the image and going to properties, then details on a PC.
Tips
- You can use style sheets to fine tune the position. For now, experiement with how the image looks depending on where you put the tag in the flow of your current content.
- Organize your images by keeping them all in the images folder. If you are using an imaging program like Adobe Fireworks or Photoshop, make sure to keep the Fireworks/Photoshop files in a different folder outside your web site so you can continue to edit them but won't accidently upload these very large files to your web server.
- Alt text values should provide the same information as the image. For example, if the image is our School Adz company logo, the attribute would be alt="School Adz Logo". If the image is a bullet, horizontal rule or is simply decrative, leave the value blank. Example: alt=" "
- Take advantage of caching. If you have the same image on multiple pages the browser only has to download one copy of the image and can store it in the disk cache (temporary memory). Make sure to point to the same image on the server if you want to utelize caching.
- Another way to get the height and width of an image is to open the image in FireFox and look in the title bar.
File Transfer Protocol
Try using both the following applications to transfer our files to your folder on the web server. Text to make sure the web pages are displaying properly. Then delete the files from the web server.
- Filezilla FTP Tutorial (4:00)
- Internet Explorer FTP Tutorial (3:12)
All the web pages that you create for our company must include this basic structure. You will also be required to include meta tags. They give search engines information about your site. Check out the W3Schools for more information about meta tag elements. I will expect an author and generator tag on every page you make. Add keywords and description to each of the web site home pages you make. |
Doctype
The <!doctype> declaration is the very first thing in your document, before the <html> tag. This tag tells the browser which HTML or XHTML specifications the document uses.
XHTML Transitional DTD
Use this DTD when you need to use XHTML's presentational features because your readers don't have browsers that support Cascading Style Sheets (CSS):
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
XHTML Standards
Coding Terms and Company Policy
Since we have many employees working in our company, we expect all our employees to follow the same simple set of conventions.
Differences Between XHTML and HTML - Some of the tutorials in this class will be based on outdated HTML coding. Use these guidelines in updating your coding. *Rated "Excellent Resource" by our guest BCC instructor.
- All tags and attributes must be in lower case.
- XHTML elements must be properly nested
- XHTML documents must be well-formed
- All XHTML elements must be closed
- All values will be quoted.
- Table tags will use indenting (more on that later)
- All file and folder names will be lower case with no spaces (use an underscore if needed)
- Use returns to separate sections of your code
Some of the tutorials that we use, will not follow these conventions. However, since this is company policy, you will be expected to follow them. Your employee evaluations will be assessed using these conventions!
Please review this tutorial explaining all of the XHTML standards you will be expected to use in this course.
HTML Time Saver
- Create a blank web page that contains the basic structure and tags that you will need on all your web pages.
*Doctype, html, head, title, meta, body
- Then save it as "blank.html".
- When you need to start a new page, simply open up your "blank" page and save it as the new file name.
Generic Elements
Generic elements allow you to create a block level <div> or inline element <span> that has no inherent presentation but uses style sheets to do all the formatting. We are going to use the <div> tag to create block level containers for positioning each of the sections of our page. Then when we apply our cascading style sheets we can format these sections anyway we want.
Since both the div and span tags are empty you need to give them an element identifier (id or class). The id identifier is used for identifying unique or one of a kind elements. For example we are going to use the following div elements, but only once on each page. These elements must be opened and closed around the text that you want to format. The class identifier is used to identify similar elements so it can be used multiple times on the same web page.
Activity: Add the following div tags to the web pages.
- All pages: <div id="head"> | <div id="nav"> |
- Home page: <div id="content"> |
- Form page: <div id="form"> |
- Business page: <div id="buslist"> |
Activity: Add a current page span tag to the title of the current page in the navigation list.
Linking to a Specific Point on a Page
You can link to a specific point on a web page. As you have seen from navigating around on the pages in the course, I have created both links down to certain sections and multiple links back to the top of the page. This is a two step process.
Step 1 - Name the Destination: The first thing you will do is to use the id attribute to identify the target element in the document. For example, on our web page if you wanted to create a link back to the top you would add an id attribute to the heading 1 tag of the page title.
Example: <h1 id="top">School Adz Contacts </h1>
Step 2 - Link to the Destination: The second thing you will do is to create a link to the top using the a element. In the href attribute you will use the number symbol (#) and then the destination name.
Example: <a href="#top"> Click Here to Go to the Top of the Page </a>
Activity: Create give the page titles on your businesses.html and forms.html pages a unique id and then link to them from the bottom of these two web pages.
Linking to a Specific Point on a Page Tutorial
Targetting Windows
You can add an additional attribute to the anchor (a) tag that allows you to target a specific window. This is important when you design a site using frames. I have used the target="_blank" attribute in this course to open my tutorials in a new window. Don't use this technique on our School Adz site though.
Where to open the target URL.
- _blank - the target URL will open in a new window
- _self - the target URL will open in the same frame as it was clicked
- _parent - the target URL will open in the parent frameset
- _top - the target URL will open in the full body of the window
Tables
Tables are a great way to present tabular information or information that makes more sense in a table format. For example, a calendar is a great example of information that makes more sense in a table. We are going to create a very basic table and then later we are going to format it with style sheets.
Minimal Table Structure
We are going to build our tables using just the minumal table structure and then add a few elements to increase the accessiblity of the data. To start lets learn about the basic table elements.
- <table> This tag opens and closes the table
- <tr> This tag opens and closes the table rows
- <td> This tag opens and closes the table data these control how many columns you have. Make sure that all your rows have the same number of columns unless you use a colspan tag which you will learn more about later.
You will be expected to stagger the indention of your code when coding a table.
- Table tags: no indention
- Table head and body 2 spaces
- Row tags: 4 spaces
- Cell/Column tags: 6 spaces
Activity: Create a web page with the same basic structure that we have been using. Copy the table data from the "table" file in the Unit 03 "Files" folder and paste it into the web page. Above the data build a table with five rows and four columns. Then copy and paste the data from the "Table Body text" section into the table data cells. Then test the web page to see how it looks. Remember it will not look fancy but the information should be organized into rows and columns.
Table Headers
The information in a table often has a row or column that is designed as a header. In our example, we need to add a new row with the column headers from our data. By applying the <th> table header tag you will notice that the text in this row will be formatted slightly differently than the text in the rest of the table. We can always change this with style sheets later.
- STAFF MEMBER
- PHONE
- POSITION
- EMAIL ADDRESS
Activity: We will do this by adding another row at the top of the table but instead of using the <td> table data tag we are going to use the <th> table header tag.
Spanning Cells
Sometimes you will need to make a row that spans across all the columns or a column that spans across multiple rows. For this we use the colspan and the rowspan attributes.
Activity: Add another row to the bottom of the table but only include one <td> table data cell. Then add the colspan attribute to the table data tag and include the number of columns that it will need to span.
Example: <td colspan="4">
Cell Padding and Spacing
Dy default the data in are sized to fit the data in the cells. If you want to add a little more room around the data or inbetween the cells, you will use the cellpadding and cellspacing attributes in the opening table tag. Think of cellpadding as the room inside a room (jail cell). Think of cellspacing as how far apart each room is placed.
Example: <table cellpadding="10">
Captions and Summaries
There are two additional methods for providing people with information about your table, captions and summaries. Add either right below the opening table tag with an open and closing tag surrounding your text.
- Captions are displayed in the browser and are typically very brief
- Summaries are not displayed in the browser and are typically longer
Activity: Add the caption text given to you for your table.
Caption and Advanced Elements Tutorial
Advanced Table Elements
You can describe rows and groups of rows as belonging to a header, body or footer. This will help to organize your table and make it easier to read.
Activity: Add an opening and closing <thead> table head tag and <tbody> tag to define the header row and the body rows.
For more information about making your Tables Accessible go to: http://www.usability.com.au/resources/tables.cfm
Forms
Forms allow you to gather information from your web site visitors. If you have ever signed a guest book, ordered something or filled out any information online, you have used a form. Some of School Adz customers may want you to create a simple form for them.
There are two parts to a form:
- The first part is the form you put on your web page using the HTML you will learn in this lesson
- The second part is the script or program on your web server that processes the information and does something with it.
Forms gather information and then can do a variety of things with this information.
- Send the information to an email address.
- Send the information to a database.
- Allow the user to print the form.
- Post the information to a web page (like a guest book).
The <form> Element
The opening form tag is important because it directs the information gathered from the form. There are two main attributes in this tag.
- method=" Here you can put either get or post".
- Post allows you to send secure data to the server and has no character limit. We will be using post.
- Get allows viewers to book mark the results of a form. For example, a list of search results from a search engine.
- action="Here you put where the form will be posted. This is usually a URL to the program on your server"
We will use "mshs_form.php"
Don't forget to close the your form tag at the bottom with a </form> tag! Forms can contain block level elements such as headings and list but should never include another form element.
Form Controls
Web forms use a variety of controls to allow viewers to enter information. Most of these controls use the <input> element.
Form controls include:
- Text Entry Controls
- Single line
- Password
- Multi-line
- Pull-down or scrolling menus
- Radio and checkbox buttons
- File selection
- Hidden controls
- Submit and reset buttons
The Name Attribute
All of these controls require a name attribute. This attribute identifies what information is being gathered. These names are coded into the program on the server so they have to be very specific.
Example: Hours: <input type="text" name="hours"> This input might send the following information back to the server: hours=9:00%to%5:00%pm
Form Control Name Values
Name=name
Business=business
Phone=phone
Email=email
Hours=hours
Address=address
City=city
State=state
Zip Code=zip
Do you currently have a web site?=current_website
password=password
Describe your business=describe_business
Do you have any information or images in electronic form?=electronic_information (yes and no)
Text=text
Images=images
Text
- Single Line <input type="text" /> This is one of the most useful and simple form controls. The following attributes can be added to this control.
- name Of course this is a required attribute most form controls
- value specifies the default text that appears in the field when the form loads
- size allows you to change the width of the field (the default is 20 characters wide)
- maxlength allows you to set a maximum length
- Password <input type="password" /> This is just like the single line text field but it substitutes the asterisk instead of characters to hide your password as you enter it. It is not encrypted so don't consider it secure. You can apply the same attributes to this control as the single line.
- Multi-line <textarea> ... </textarea> This will create a scrollable, multi-line text area that users can enter more than one line of text. The text area is not a empty element so you can put text between the open and closing elements. This text will be displayed in the text area when the form loads.
- name Of course this is a required attribute most form controls
- row specifies the number of lines the text area will display. Scrollbars will be provided if the user types more rows than you specify.
- cols specifies the width of the text area in characters just like size did for the single line
Submit and Reset Buttons
These are the only controls that don't require a name value because they do not return any information to the server.
- Submit <input type="submit" /> The submit button send the data from the form to the program on the server.
- Reset <input type="reset" /> The reset button clears the data in the form and returns it to the way is was when it first loaded.
You can change the text on either of these buttons by using the value attribute.
Example: <input type="reset" value="Clear Form" /> will give you a button that with the text Clear Form on it.
Submit and Reset Control Tutorial
Radio and Checkbox Buttons
- Radio Buttons <input type="radio" /> This button is used when you want to give the user choices but they can only pick one! An example might be a yes or no question. The key is to make sure that the radio buttons have the same name but change the value .
Example: Gender <input type="radio"name="gender" value="male" /> Male <input type="radio"name="gender" value="female" /> Female - Checkbox Buttons <input type="checkbox" /> This button is used when you want to give the user choices and they can pick more than one. Checkboxes can have the same or different names but you should change the value.
Radio and Checkbox Control Tutorial
Menus
Menus are a more compact way to present the viewer with a bunch of choices. The <select> element opens and closes around a bunch of <options> elements. The option elements open and close around your options. Make sure to close the option element after each option and close the selection after the last option.
- Pulldown <select name="states">The default menu only shows one option until you click on the pull-down arrow and only allows you to select one option.
- Scrolling<select name="states" size="5"> By adding the size attribute you can create a scrolling list.
- Multiple <select name="states" size="5" multiple="multiple"> By both size and multiple you can create a scrolling list that allows the viewer to select more than one option.
States: Washington, Oregon, Idaho, California, Arizona, Alaska
File Selection
You can use the file selection control to allow your users to upload files to your server. You must use the POST method in your form tag and you must specify the encoding type of the form as multi-part/form-data. We will not be using this control on our form.
Example: <input type="file" enctype="multipart/form-data" name="photo" />
Hidden Controls
Hidden <input type="hidden" /> controls allow you to send information to the program on the server that doesn't come from the user. For example you might want to specify a web page that the user is directed to after they submit the form. These controls are set by the program on the server so we will have to wait until our Business Advisor has created our server side program.
<input type="hidden" name="subject" value="Joe's Test Form Data">
Accessibility
- Label elements are used to match the text we see on the page with the form field in the code.
Example: <label> Hours <input type="text" name="hours" /> </label> - Field sets & Legends allow you to organize your form into logical groups using the <fieldset> and then give them a caption using the <legend> element.
Activity: We will simply surround our text and form control with an open and close <label> tag. In our form we can use a fieldset and legend for the contact information and one for the business information.
Checking Your Form Results
I have set up a Gmail email account to check the results of your form. Just go to Google and click on "Gmail".
Username: schooladzformchecker@gmail.com
Password: U2L7form
PHP Files
We will be using php to handle our form data. You will need to download these files to your "forms" folder and edit one of them. Then upload all of them to your forms folder on the ftp server.
Activity: The "mshs_form.php" file is the only file you need to open and edit. There are two things to do here.
- Make sure that the spelling of your thank you page file name matches the php file (see tutorial)
- Change the subject line to include your name. (see tutorial)