Home Accessibility Courses Twitter The Mouth Facebook Resources Site Map About Us Contact
 
Python and Tcl - public course schedule [here]
Private courses on your site - see [here]
Please ask about maintenance training for Perl, PHP, Lua, etc
 
The VERY basics of a web page ... and web site

"Go look after this site - it's quite a small one". But even a small web site can have a lot of complexity these days, and that can often hide the basics.

Background

When a user calls up a web page, he's asking the browser on his computer (typically Firefox, Chrome or Internet Explorer; maybe Safari or Opera) to contact a server computer (i.e. a computer running server software) and collect a page of HTML (HyperText Markup Language) for display. This page of HTML - in its most straightforward form - is held on the server computer as a file of plain text, and the server simply returns it to the browser when asked.

What's in a page of HTML?

An HTML page is split into two main sections - the head which contains information that the server wants to tell the browser about the page and its content, and the body which contains the actual information that's to be displayed, and suggestions about how the page should be formatted / displayed. Within these sections, the page is very likely to contain pieces of program (in Javascript) which are to be run within the browser to help the user's interaction - for example to change menus on rollovers, and references to other files / pages which the browser will also need to complete the display and use of the page, such as images, common page layout information to be shared between many pages, and Javascript to be shared too.

Elements within the page are marked up (described) with tags which provide information to the browser about how to handle the data. These tags start with a < (less than) symbol, and end with a > (greater than symbol). There's an opening and a closing tag for each markup element, with the closing tag having a / in addition to the same keyword as the opening tag. Let's put that together so far:

  <html>
  <head></head>
  <body><p>A very simple web page</p></body>
  </html>

Some extra things you'll want to know early on

a) There's a shorthand you can use for a tag which opens and immediately close - a single tag with a trailing slash. So
  <hr></hr>
becomes
  <hr />

b) Tags will often require extra information ("attributes") to describe how they're to work, and these are written before the >, in the form of
  name="value"
where the names are from a predefined list which is different for each type of tag, and the value is in quote marks. Example:
  <body bgcolor="#FFEEDD">

c) Where there's a requirement within the text for a character that means something special to the tag interpretter (e.g. <), you can use an ampersand (&) followed by a 2/3/4/5 letter abbreviation and a semicolon. This also works for some special characters not in the standard set. Examples:
  < &lt;
  & &amp;
  © &copy;
  £ &pound;

How do I do Images, Links, and Forms?

All of these are done using tags. In the case of images, it's an <img> tag with an attribute to give the URL of where the image is to bel loaded from, and that loading is a separate request back to the server. Links to other pages are done with an <a> tag with an attribute to give the URL that's to be linked to when the user clicks on the link.

Forms are written between a <form> and </form> tag pair, with attributes giving the URL of the page that's to process the data when it's submitted (and how that data is to be submitted too) and then other tags are provided for use between the open and close tags which provide the various form elements such as input boxes, check boxes, text areas, selectors, etc.

Examples:
  <img src="http://www.welho.net/pix/closebell.jpg" align="right" />
  <a href="http://www.wwuu.co.uk/museum.html">our museum</a>
  <form action="http://www.wellho.net/net/quote.html"><input name="where" size="6" /><input type="submit" /></form>

How do I do bold, italic, coloured text, and so on?

Tags such as <b> to </b> were traditionally used to indicate bold, and there are hosts of others too. But a more modern alternative is to set a whole load of such text display elements in one go, by defining a whole lot of settings for a particular use of text through a style, with these styles defined in style sheets, with overall styles and settings defined first and then with more specialised styles set for more specific uses.

Styles and style sheets expand beyond the look and feel of characters and character groups to the whole page layout - for which you would traditionally have used <table> tags, and on some occasions still will. Each of these is very much a topic in its own right!

Do I really need to know about all of these tags as I code?

Not really for many sites these days - tools such as content management systems will allow most web site content providers to enter data that's to go within a standard (templated) look and feel on a web site to be entered at a higher level, with softwate such as Wordpress, Joomla, Drupal (or one of dozens more - see [here]) doing most of the hard work. But is is useful for users to have something of an idea of what goes on.

What else should I know about (or at least be aware of!)?

• On the simplest of setups, a request for a page by name results in a file of that same name within the web site directory on the web server being returned and displayed. However, routing instructions can be provided on the web server to divert requests elsewhere, including to programs which grab the actual HTML from databases, or make up pages from templates and database records dynamically.

• If a browser calls up a directory / folder rather than an individual file, the server will return the "home page" for that directory - usually a file called index.html. If that home page does not exist, an error may be generated, or a directory listing displayed, depending on how the web server is configured.

• A very high proportion of traffic to your web site will be from automated programs such as search engines, which visit pages all around the web to index them and then (later on) send people to you if you match their searches. Such automated programs will follow all of your links to find all of your pages. If you want to advise the spiders / robots where they should NOT go, you can do so via a file called robots.txt which well-mannered spiders will check from time to time.

• The little icon that goes in the bookmark and location bar comes from the favicon.ico file if you have one.

• If the server can't provide what the browser has asked for because there'e something wrong with the request, an error page is generated which is sent out with a special code to tell the browser what the type of error is. The most common of these is 404 - "file not found" and others are in the 400 series. If a request reveals an error within the server, it will return a 500 series error page.

• If the web server sees certain patterns in the URL, it may be configured to run the file that it points to as a program and return the result of running that program. You'll see words like "cgi" (Common Gateway Interface) and .php used for such programs.

• A single web server may serve many different web sites, each with its own set of files and directories. When that's happening, each of the sites hosted is known as a "virtual server".

• Browser requests for pages / resources within a page won't always result in a page being sent out - if the request duplicates one made a little earlier, the browser may simply use a stored (cached) page, or the server may just tell the browser that it's not changed. If you get "cache headers" wrong, this can result in the display of outated content.

• Away from the web site pages themselves, you should be aware of the following if you're looking after a site:
- the log files, which may record each access to each URL for you
- you should have good backups of your website, and remember to keep them up to date if you have user contributed content being added
- you might want to keep track of the number and pattern of accesses, and how many visitors the site can handle at onceA

If you're lookiing for information as to the most popular browsers, servers and CMS Systems, here are some links:
Browsers: http://en.wikipedia.org/wiki/Usage_share_of_web_browsers
Content Management Systems: http://www.makeuseof.com/tag/10-popular-content-management-systems-online/
Servers: http://news.netcraft.com/archives/2012/01/03/january-2012-web-server-survey.html
Servers: http://w3techs.com/blog/entry/most_popular_web_servers_by_country
(written 2013-03-09, updated 2013-03-30)

 
Associated topics are indexed as below, or enter http://melksh.am/nnnn for individual articles
Q624 - Object Orientation and General technical topics - HTML - An Overview
  [1831] Text formating for HTML, with PHP - (2008-10-11)
  [1463] All the special characters in HTML ... - (2007-12-07)
  [1160] HTML - example of a simple web page - (2007-04-24)
  [857] Strikingly busy - (2006-09-06)
  [433] FTP - how to make the right transfers - (2005-09-01)

W502 - Web and Intranet - HTML Document Anatomy
  [3563] How big is a web page these days? Does the size of your pages matter? - (2011-12-26)
  [3517] Tags used in writing this blog - (2011-11-12)
  [2675] Redirecting to your main domain for correct security keys - (2010-03-13)
  [2246] What difference does using the XHTML standard really make? - (2009-06-18)
  [1811] Alternative URLs using % symbol encoding - (2008-09-27)
  [1431] Getting the community on line - some basics - (2007-11-13)
  [1187] Updating a page strictly every minute (PHP, Perl) - (2007-05-14)
  [993] Positioning with Cascading Style Sheets - (2006-12-16)


Back to
Official Star ratings for hotels - still worth having?
Previous and next
or
Horse's mouth home
Forward to
Special characters in HTML
Some other Articles
Using Pygments to colour our training examples
Cascading Style Sheets and formatting your web page
HTML tags uses in these blog articles
Special characters in HTML
The VERY basics of a web page ... and web site
Official Star ratings for hotels - still worth having?
Easier public transport from Melksham to Bristol Airport
Showing what programming errors look like - web site pitfall
What is on OUR pond?
Exception, Lambda, Generator, Slice, Dict - examples in one Python program
4759 posts, page by page
Link to page ... 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63, 64, 65, 66, 67, 68, 69, 70, 71, 72, 73, 74, 75, 76, 77, 78, 79, 80, 81, 82, 83, 84, 85, 86, 87, 88, 89, 90, 91, 92, 93, 94, 95, 96 at 50 posts per page


This is a page archived from The Horse's Mouth at http://www.wellho.net/horse/ - the diary and writings of Graham Ellis. Every attempt was made to provide current information at the time the page was written, but things do move forward in our business - new software releases, price changes, new techniques. Please check back via our main site for current courses, prices, versions, etc - any mention of a price in "The Horse's Mouth" cannot be taken as an offer to supply at that price.

Link to Ezine home page (for reading).
Link to Blogging home page (to add comments).

1 unpublished comment pending on this page

edit your own (not yet published) comments

© WELL HOUSE CONSULTANTS LTD., 2019: 404 The Spa • Melksham, Wiltshire • United Kingdom • SN12 6QL
PH: 01225 708225 • EMAIL: info@wellho.net • WEB: http://www.wellho.net • SKYPE: wellho

PAGE: http://www.wellho.net/mouth/4034_The ... -site.html • PAGE BUILT: Sat May 27 16:49:10 2017 • BUILD SYSTEM: WomanWithCat