Understanding the Web
How to create a website
Parts of an HTML page
Structure of an HTML Document
- The Outer Structure of an HTML Document
- Parents, Children, Descendants and Siblings
- Setting Up the Basic Document Structure
Creating and viewing a WEB PAGE
Text formatting in HTML
- Basic text formatting elements
- Creating Breaks
- Abbreviations, Definitions, Quotations and Citations
- Working with language elements
- Other text elements
- More formatting elements
Organising information using lists
Structure content with tables
Data collection with forms
- How a form looks like?
- Creating forms
- Input tags
- Text fields
- Password fields
- Checkboxes and radio buttons
- Hidden fields
- File upload fields
- Drop-down list fields
- Multiline text boxes
- Submit and Reset buttons
Navigation with links
Locations within web pages can be marked for direct access by links on:
- The same page.
- The same website.
Keep these considerations in mind when adding links to web pages:
- Several short pages may present information more conveniently for readers than one long page with internal links.
- Links within large pages work nicely for quick access to directories, tables of contents, and glossaries.
- Intra document linking works best on your own website, where you can create and control the markup.
When you link to spots on someone else’s website, you’re at its manager’s mercy because that person controls linkable spots. Your links will break if a site designer removes or renames a spot to which you link.
Naming link locations
To identify and create a location within a page for direct access from other links, use an empty anchor element with the name attribute, like this:
The id attribute also works as an anchor element. It’s often cleaner to use this method depending on your page design approach. (If you use id attributes for CSS, it may be easier to remember and more consistent overall). The anchor element that marks the spot doesn’t affect the appearance of any surrounding content. You can mark spots wherever you need them without worrying about how your pages look (or change) as a result.
Linking within the same page
Links can help users navigate a single web page. Intra document hyperlinks include such familiar features as:
- Back to Top links.
- Tables of contents.
An intra document hyperlink, also known as a named document link, uses a URL like this:
<a href="#top">Back to top</a>
The hash sign (#) indicates that you’re pointing to a spot on the same page, not on another page.
The following code shows how two anchor elements combine to link to a spot on the same page. (Documents that use intra document links are usually longer. This document is short so you can easily see how to use the top anchor element).
<html> <head> </head> <body> <h1><a name="top"></a>Web-Based Training</h1> <p> Given the importance of the Web to businesses and other organizations, individuals who seek to improve job skills, or fulfill essential job functions, are turning to HTML and XML for training, particularly to HTML5. We believe this provides an outstanding opportunity for participation in an active and lucrative adult and continuing education market. </p> <p><a href="#top">Back to top</a></p> </body> </html>
Given the importance of the Web to businesses and other organizations, individuals who seek to improve job skills, or fulfill essential job functions, are turning to HTML and XML for training, particularly to HTML5. We believe this provides an outstanding opportunity for participation in an active and lucrative adult and continuing education market.
We can see how this HTML markup appears in a web browser. If the user clicks the Back to Top link, the browser jumps back to the top spot — marked by <a name=”top”></a>. The text for this example is short, but you can see how it works by resizing your browser window (making it tall and narrow) to display only two or three words per line of text.
Linking within the same website
You can combine intra document and inter document links to send visitors to a spot on a different web page on your site. Thus, to link to a spot named descriptions on a page named home.html on your site, use this markup:
<p>Review the <a href="home.html#descriptions">document descriptions</a> to find the documentation for your particular product.</p>
Linking on other websites
If you know that a page on another site has spots marked, you can use an absolute URL to point to a particular spot on that page, like this:
<p>Find out how to <a href="http://www.yourcompany.com/training/online.htm#register"> register</a> for upcoming training courses led by our instructors.</p>
Be sure to check all links regularly to catch and fix the broken ones.