HTML essentials

From "A B C"
Jump to navigation Jump to search

HTML essentials


The contents of this page has recently been imported from an older version of this Wiki. This page may contain outdated information, information that is irrelevant for this Wiki, information that needs to be differently structured, outdated syntax, and/or broken links. Use with caution!


An introduction to HTML.



 

Introductory reading



  HTML - the HyperText Markup Language - is a convention to structure documents for display in Web browsers. It consists of markup in text documents. In it's simplest form it is quite readable and documents can be read, marked-up or edited with a simple text browser.

In your Web browser, the "view source" function shows the actual markup and contents of the page that is being displayed.

Initially, HTML documents were very simple. However, the original design of HTML was focused on structuring documents, not defining their representation. Thus the support of typography and precise layout was very limited. That was not what many users wanted; the need for precise graphical layout, and the support for dynamic content was gradually layered over the old standard, with ever increasing of sophistication and loss of intuitive readability. Many Web pages today are no less complicated than other "real" programs.


Basic structure

The most basic structure of an HTML document consists of a header, a body, and some contents. Here is an example:

<text> Web page Entia non sunt multiplicanda praeter necessitatem. (W. Occam 1288-1347) </text>

HTML is agnostic of whitespace - the indentations are purely for readability and to emphasize how tags are nested. In fact all single and multiple whitespace(s) are collapsed into a single blank by the Web-browser

Once such a file has been created, it can be opened as a file with a Webbrowser on your computer, or it can be served as a response to a HTTP request to a Webserver.


Markup

Markup in HTML is done by enclosing elements in tags. Two types of tags are distinguished: start tags (<tag>) and end tags (</tag>). Except for a very small number of exceptions, all start tags have to be matched with an end tag. (The exceptions are for tags that do not enclose an element, such as linebreaks (<br>), images (<img src="file.jpg">), and comments (<!-- comment -->). In addition to tags defining a type of element, most can also carry attributes, such as the URL of a hyperlink (<a href="mailto:user@host.com">Click to send e-mail</a>).


Structural markup

Structural markup describes the semantic structure of the document. Examples include headings (<h1>Chapter 1</h1>), lists (<ul><li>Item 1</li></ul>), or tables.


Presentational markup

Presentational markup describes how contents should be formatted. Examples include bold (<b>bold</b>) or italic text (<i>italic</i>), or tables.


Hypertext markup

hyperlinks

images

mail

Special characters

http://turner.faculty.swau.edu/webstuff/htmlsymbols.html

Tables

Stylesheets

Maintaining state

Dynamic HTML

Web


Exercises

  • Create a simple HTML document. Save it on your harddisk and open it with your Webbrowser, to demonstrate that it is correctly structured and can be displayed.
  • Save the file into a folder in your http tree. Then type it's URL into your browser. Confirm that the file is once again correctly displayed, after it has been served by the apache Webserver running on your computer. (Click here for a step-by-step solution, only in case you are not sure what to do.)
  • Edit the file in the following way:
    • Enter some text
    • Format words in the text with bold and italic and bold-italic markup.
    • Attach a hyperlink to an external website to one word in the text.
    • Insert an image.
    • Write the following special characters: 37,4°C, 10.4Å, A→B; long    space.
    • Construct a table with four cells in two columns and two rows.
    • Add a third row.
    • Add a third column.
    • Color the background of the central cell red.

Resources

I don't keep track of HTML resources any longer. I simply type the formatting question I have into a google search. For example this link searches how to specify background colour in table cells, and the top hit has the answer.


   

Further reading and resources