Subscribe
In this chapter, we will cover
• the basic structure of an HTML document
• the html, head, title, script, style, body, img, and a elements
• a Cascading Style Sheet (CSS) example
• a JavaScript code example, using Date and document.write
Introduction
Hypertext Markup Language (HTML) is the language for delivering content on the Web. HTML is not owned
by anyone, but is the result of people working in many countries and many organizations to define the
features of the language. An HTML document is a text document which you can produce using any text
editor. HTML documents contain elements surrounded by tags—text that starts with a < symbol and ends
with a > symbol. An example of a tag is
. This particular tag will display the imageheld in the file home.gif. These tags are the markup. It is through the use of tags that hyperlinks, images,
and other media are included in web pages.
Basic HTML can include directives for formatting in a language called Cascading Style Sheets (CSS) and
programs for interaction in a language called JavaScript. Browsers, such as Firefox and Chrome, interpret
the HTML along with any CSS and JavaScript to produce what we experience when we visit a web site.
HTML holds the content of the web site, with tags providing information on the nature and structure of the
content as well as references to images and other media. CSS specifies the formatting. The same content
can be formatted in different ways. JavaScript is a programming language that��s used to make the web
site dynamic and interactive. In all but the smallest working groups, different people may be responsible
for the HTML, CSS, and JavaScript, but it��s always a good idea to have a basic understanding of how
these different tools work together. If you are already familiar with the basics of HTML and how CSS and
JavaScript can be added together, you may want to skip ahead to the next chapter. Still, it may be worth
casting your eye over the content in this chapter, to make sure you are up to speed on everything before
we start on the first core examples
The latest version of HTML (and its associated CSS and JavaScript) is HTML5. It is generating
considerable excitement because of features such as the canvas for displaying pictures and animation;
support for video and audio; and new tags for defining common document elements such as header,
section, and footer. You can create a sophisticated, highly interactive web site with the new HTML5. As
of this writing, not all browsers accept all the features, but you can get started learning HTML5, CSS, and
JavaScript now. Learning JavaScript will introduce you to general programming concepts that will be
beneficial if you try to learn any other programming language or if you work with programmers as part of a
team.
The approach I��ll use in this book is to explain HTML5, CSS, and JavaScript concepts in the context of
specific examples, most of which will be familiar games. Along the way, I��ll use small examples to
demonstrate specific features. Hopefully, this will help you both understand what you want to do and
appreciate how to do it. You will know where we are headed as I explain the concepts and details.
The task for this chapter is to build a web page of links to other web sites. In this way, you��ll get a basic
understanding of the structure of an HTML document, with a small amount of CSS code and JavaScript
code. For this and other examples, please think of how to make the project meaningful to you. The page
could be a list of your own projects, favorite sites, or sites on a particular topic. For each site, you��ll see
text and a hyperlink. The second example includes some extra formatting in the form of boxes around the
text, pictures, and the day's date and time. Figure 1-1 and Figure 1-2 show the different examples I��ve
created.
Figure 1-1. An annotated list of games
Figure 1-2. Favorite sites, with extra formatting
When you reload the Favorite Sites page, the date and time will change to the current date and time
according to your computer.
Critical requirements
The requirements for the list of links application are the very fundamental requirements for building a web
page containing text, links, and images. For the example shown in Figure 1-1, each entry appears as a
paragraph. In the example shown in Figure 1-2, in contrast, each entry has a box around it. The second
example also includes images and a way to obtain the current day, date, and time. Later applications will
require more discussion, but for this one we��ll go straight to how to implement it using HTML, CSS, and
JavaScript.
CHAPTER 1
4
HTML5, CSS, and JavaScript features
As I noted, HTML documents are text, so how do we specify links, pictures, formatting, and coding? The
answer is in the markup, that is, the tags. Along with the HTML that defines the content, you��ll typically
find CSS styles, which can be specified either inside the HTML document or in an external document. You
might also include JavaScript for interactivity, again specified in the HTML document or in an external
document. We��ll start with a look at how you can build simple HTML tags, and how you can add inline CSS
and JavaScript all within the same document.
Basic HTML structure and tags
An HTML element begins with a starting tag, which is followed by the element content and an ending tag.
The ending tag includes a / symbol followed by the element type, for example /head. Elements can be
nested within elements. A standard HTML document looks like this:
This will appear as is.
Note that I��ve indented the nested tags here to make them more obvious, but HTML itself ignores this
indentation (or whitespace, as it��s known), and you don��t need to add it to your own files. In fact, for most
of the examples throughout this book I won��t be indenting my code.
This document consists of the html element, indicated by the starting tag and ending with the
closing tag: .
HTML documents typically have a head and a body element, as this one has. This head element contains
one element, title. The HTML title shows up different places in different browsers. Figure 1-3 shows the
title, "Very Simple Example" at the top-left portion of the screen and also on a tab in Firefox.
Post
