Over the next three Tech Tuesdays we will cover the three essential technologies that together make up the bulk of most web sites: HTML, CSS and Javascript. This is Step 7 of the web cycle where the web browser uses these three (which were all retrieved from one or more web servers) to construct a web page. The easiest way to think of how these three make up a page is as follows: HTML is the content of the page, CSS is the look-and-feel of the page and Javascript is the behavior of the page (i.e. how the page acts on its own and in response to events such as mouse clicks).
HTML stands for HyperText Markup Language and it was part of Tim Berners-Lee’s original design for the World Wide Web. As a markup language, HTML consists of a series of tags which “mark up” the content, i.e., the tags indicate what the different parts of a page are. For instance, here is a list in html:
The tags are the parts enclosed in the so-called “angle brackets” - the “”. The “” tag starts the list (the “opening tag”) and the “” tag ends it (the “closing tag”). Every list item starts with “” and ends with “”. You can see here that generally speaking HTML consists of opening and matching closing tags. There are tags to describe various content elements such as headings, paragraphs and lists. There are also tags that relate directly to the HTTP protocol. Most important of these is the hyperlink. Here is an example: Here you see the opening tag contain a so-called attribute with the name href. The value of the href attribute is the URL of that the link points to. The text which will be displayed for the link is “Visit Dailylit!" Here you can see the whole thing in action: Visit Dailylit! So far I have shown what are called HTML fragments – pieces of HTML that together form the contents of a page. The overall structure of an HTML page looks roughly as follows: This is a very simple page that illustrates the basic structure, including the head and body sections. The title in the head section is what shows up as the title of the window or tab when the page is displayed in a web browser. The body section has the actual contents of the page itself. There are quite a few different tags to learn about, such as tags to describe forms with labeled input fields, tags for showing images, and more. You can learn more about the available tags at W3Schools where you can try them out right in your browser. Next Tech Tuesday we will look at how CSS can be used to change the look and feel of the content described by the HTML.
