Difference between revisions of "HTML Basics and Web Standards Concepts teaching materials"

From Web Education Community Group
Jump to: navigation, search
(Teaching notes)
(The anatomy of an HTML element)
Line 163: Line 163:
 
Remember these parts well:
 
Remember these parts well:
  
* <code>&lt;a href="http://www.amazon.co.uk"&gt;</code> — the opening tag of the element - this is where it begins.
+
* <code>&lt;a href="http://www.amazon.co.uk"&gt;</code> — the opening tag of the element this is where it begins.
 
* <code>&lt;/a&gt;</code> — the closing tag of the element: this is where it ends.
 
* <code>&lt;/a&gt;</code> — the closing tag of the element: this is where it ends.
 
* <code>Link to Amazon</code> — the content of the element. In this case, the opening and closing tags are wrapping this content and turning it into a link.
 
* <code>Link to Amazon</code> — the content of the element. In this case, the opening and closing tags are wrapping this content and turning it into a link.

Revision as of 17:45, 27 April 2012

Curriculum: Web Design 1 | Learning Module: HTML Basics, Web Standards Concepts


Current Learner competencies:

  • Create a site folder
  • Identify the appropriate use of attributes and the syntax of attributes
  • Recognize the difference between HTML and XHTML
  • Identify the various DOCTYPES
  • Explain the need for web standards
  • Identify deprecated tags.

Update Suggestions:

  • Explain what web standards are, and why they are needed
  • Know what files comprise a web site
  • Create a site folder
  • Understand the anatomy of an HTML element — tags, content, attributes
  • Understand what an empty element is
  • Identify the appropriate use of attributes and the syntax of attributes
  • Recognize the difference between HTML and XHTML
  • Identify the various DOCTYPES, including HTML5
  • Identify deprecated tags
  • Know the structure of a basic HTML page

Student Prerequisites

  • Basic familiarity with using a computer operating system and surfing the web is expected, but nothing more.

Tools required for students and teachers

  • A computer (Linux, Mac or PC will do)
  • One or more modern web browsers. We'd recommend that you install the latest versions of Opera, Firefox, Safari, Chrome, and Internet Explorer, depending on what is available for your OS.
  • An internet connection
  • A text editor. The free ones we'd recommend are:
  • An FTP client. The free ones we'd recommend are:


Additional tools required for teachers

  • Example files to demonstrate discussed concepts
  • An installed server-side testing environment, like [MAMP] or [WAMP]
  • Available web space for the students to connect to and host their own work (but for now, to show how FTP works)

Slidedecks

Teaching notes

Intro

Web standards concepts and HTML basics

16th April 2012

[INSERT YOUR NAME]

What we'll cover

  • What are web standards?
  • And why do we use them to build web sites?
  • What is HTML and how does it work?
  • Anatomy of an HTML page.
  • HTML versions; the difference between HTML and XHTML.

What are open web standards?

Technologies that form the web infrastructure (such as HTTP and TCP/IP), and technologies we can use to build web sites (HTML, CSS, JavaScript, PHP).

Are all web technologies open?

  • No. Open web technologies are developed in cooperation between lots of different companies, and curated by the W3C and other standards bodies.
  • They are free to use by anybody, and not controlled by any one company.
  • Technologies like Flash and Silverlight are developed by a single company.

Why is it good to have open standards?

Because we want the web to be open to be used by anybody, not only by those who have the right political influence, or money to buy expensive software.

Can you imagine it if, to develop a web page, you had to buy an expensive IDE? And if web technologies were controlled by a single company?

Standards?

Standard are all around us, from traffic lights to common icons on signs to clothing sizes to plugs and screws. They make our life easy because we know that, generally speaking, things will just work.

From standards to web standards

These technologies are standards because they are defined in big specification documents curated by standards bodies such as the [W3C], which define how they should work. These are usually used by web browser makers to work out how their browsers should interpret web technologies.

These days browsers interpret web technologies pretty evenly, so they really are standards. It was not always that way. We used to have the browser wars.

Browser wars

In the late nineties we had the browser wars. Netscape and IE were trying to gain web browser market share by implementing better, shinier features, often in incompatible ways.

This caused lots of pain for developers, and users. Web sites were either only compatible with one of the popular browsers, or they were forked horribly to provide a different version for each!

What is a web site made up of?

A web site is made up of many different files, placed on a web server, and linked with a domain name.

Domain names

A domain name is obtained from a domain registration company, like godaddy or 123-reg.

You find a domain name that isn't already owned by someone, and buy it.

[GO THROUGH OBTAINING A DOMAIN NAME WITH STUDENTS]

Hosting space

  • You need some hosting space on which to put your web files.
  • This is sometimes bought with the domain name, and sometimes separately.
  • The hosting space is connected to the domain name by giving the domain name the right nameservers.

FTP

The files that comprise a site are put on a web server, often by FTP.

FTP is a web standard too — File Transfer Protocol.

[AT THIS POINT, IDEALLY YOU WANT AN FTP LOCATION FOR STUDENTS TO LOG ON TO, SO THEY CAN SEE HOW TO LOG ON, HOW THE FILES ARE THERE ON FTP, HOW THE URL BRINGS UP THAT SITE]

Types of file on the web

Returning to our example site, we can see the following common file types:

  • HTML — contains the content of our pages.
  • CSS — contains styling information to define how the content should look.
  • JavaScript — contains code that applies dynamic interactive behaviour to the content.
  • PHP, .NET and other server-side languages - these files contain dynamic code that generates HTML/CSS/JS to display on the client, which varies depending on variables given to the code.
  • Images and video — media assets that are used as part of the content.
  • Non-web files — Word files, PDFs and other types of content that are not interpreted by the web browser instead, they are downloaded and then given to a native program to handle, should one exist.

Client versus server-side

  • HTML/CSS/JS is static — it is downloaded, then rendered by the browser. The source looks the same on the server as it does on the client.
  • Server-side code is executed on the server. It contains many variables filled in from a database or other data source, and generates different HTML/CSS/JS, depending on their values. It then sends the generated client-side code to the client to render.

[SHOW SIMPLE HTML AND PHP EXAMPLES — SOURCE CODE, AND CODE AT RUNTIME, SERVED THROUGH A MAMP INSTALL, PERHAPS?]

Creating a site folder

A simple site folder generally contains:

  • index.html
  • other pages (sometimes in other folders)
  • styles folder
  • scripts folder
  • folders for assets - fonts, images, videos, etc.

[GET STUDENTS TO CREATE A DIRECTORY FOR THEMSELVES, AND PROVIDE THEM WITH A SIMPLE HTML INDEX FILE IN PREPARATION FOR THE NEXT SECTION]

The anatomy of an HTML element

<a href="http://www.amazon.co.uk">Link to Amazon</a>

Remember these parts well:

  • <a href="http://www.amazon.co.uk"> — the opening tag of the element — this is where it begins.
  • </a> — the closing tag of the element: this is where it ends.
  • Link to Amazon — the content of the element. In this case, the opening and closing tags are wrapping this content and turning it into a link.
  • href="http://www.amazon.co.uk" — an attribute. Attributes provide more data to shape the element's behaviour. In this case, it defines that the link is going to point to amazon.co.uk.
  • href — the attribute name.
  • http://www.amazon.co.uk — the attribute value.

Some simple rules:

  • It is advised that you always put attribute values in quotes, even if you don't have to. It makes you code easier to read, for both humans and machines.
  • You should always close tags that you open. <p>This is a paragraph is not ok. It causes the browser to work harder and might lead to unexpected results when you start applying CSS and JavaScript to your content.
  • You should also nest tags correctly —<p><a>Content</a></p> is ok, but <p><a>Content</p></a> is not. Again, it can lead to unexpected results.

Not all elements have content!

Some elements don't surround and modify content. Some elements do something else, like pull an image onto the page, insert a line break, or apply a stylesheet to the page.

<img src="kittens.jpg">

These elements are called empty elements, or sometimes "self-closing" elements.

Block versus inline

[RETURN TO THE INDEX.HTML EXAMPLE FILE. SETTING A BORDER ON ALL ELEMENTS SO YOU CAN SEE WHAT SPACE THEY AL TAKE UP WOULD BE HELPFUL]

Looking at the example file, and the rendering in the browser, you can see that some elements start on a new line and stretch across the browse window, and some just take up as much space as the text they encapsulate.

  • The former — <p>, <div>, <ul>, etc. — are called block level elements.
  • The latter — <em>, <span>, <acronym>, etc. — are called inline elements.

Attributes in more detail

We looked at attributes earlier. Let's look at them a little more:

<img src="kittens.jpg" alt="a beautiful black kitten" class="animal masthead">

Note that you can have multiple attributes. they should all have a space between them, and the attribute name, equals sign, quotes and value shouldn't have any spaces in between.

THE STRUCTURE OF AN HTML PAGE

[GO BACK TO THE EXAMPLE PAGE AGAIN]

  • First you have the DOCTYPE, as explained earlier.
  • Then you have an <html> element that wraps all other content.
  • Then you have the <head> — this doesn't contain any of the content that is shown on the page. This is where you put meta data - data about your data. Here you include things like CSS and JavaScript you want to apply to your HTML, specifying keywords and a description about your content, etc.
  • Last, you have the <body>, which is where all the page content goes.


DOCTYPES

The thing at the top of the example file is a DOCTYPE. Historically, this is there to define the version of HTML the document is being written in. The idea was to validate the HTML against a defined ruleset.

HTML 4.01 strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

XHTML 1.0 transitional

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

But really all it ever did was put browsers into standards mode so they will render HTML properly. If a DOCTYPE is not included, browsers render HTML in "quirksmode", which assumes badly-formed markup and acts accordingly. This gives unexpected results, so is not good.

Because of this, you need a DOCTYPE, but the old DOCTYPES were so long and unwieldy. Therefore, HTML5 was rewritten to include the shortest DOCTYPE possible that will still put browsers in standards mode:

<!DOCTYPE html>

HTML versus XHTML

Way back when, we used to talk about which style of HTML you wrote, and whether you favoured HTML or XHTML:

  • HTML is a specialised markup (based on SGML) language designed for marking up documents.
  • XHTML is a reformulation of HTML, as an XML vocabulary.

Historically, XHTML got a lot of support because it has stricter rules than HTML. HTML allows all sorts of omissions, such as breaking the rules we mentioned above. XHTML on the other hand wouldn't allow such errors.

But this wasn't ultimately great. XHTML never caught on because:

  1. Old versions of IE were buggy, and wouldn't serve it properly
  2. Proper XHTML completely refuses to display if it even contains a single small error, which is not necessarily good for the web.
  3. The last version of XHTML, 2.0, was not backwards compatible with the existing web.

In reality, professional developers tend to write their HTML as a mixture of HTML and XML rules. HTML5 allows you to use whichever style you like.

Differences you might note between XHTML and HTML rules

XHTML:

  • self closing tags include trailing slash — <img src="kittens.jpg" />.
  • attribute values always have quotes around them.
  • attributes can't be minimized — checked="checked".
  • code should all be lower case.

HTML:

  • self closing tags needn't include trailing slash — <img src="kittens.jpg">.
  • attribute values don't always have to have quotes around them.
  • attributes can be minimized — checked.
  • code can be lower or upper case.

Deprecated elements

Back in the old days, before CSS was popular, we used to use HTML to do all of our styling/layout. Some elements were just abused to do this (for example, HTML tables were used for layout, which is just wrong and evil), and a lot of presentational elements were used, which have since been deprecated (removed from the spec). For example:

  • <bgcolor> for setting background colour.
  • <font> for setting fonts.
  • <center> for centering content.
  • <strike> for striking through text.

Note: some deprecated elements have been brought back into HTML5, and repurposed. For example:

  • <small> is now specifically for fine print, not just to make text small.
  • <b> is now for drawing attention to text with no stylistic differences, not just bold text.