HTML essentials
HTML essentials
An introduction to HTML.
Contents
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>
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
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
