Now that you have an overall idea of the components of a web application, and before we advance further into JavaScript, where we will spend considerable more time, it would be a good to take a closer look at the structure of an HTML page.
Try reading the following code and understand what each <tag> is for.
<!DOCTYPE html>
<HTML>
<!-- This is a comment. It won't be displayed in the document. -->
<!-- An HTML document contains different sorts of "elements", which are indicated by HTML "tags".
Most elements start with an opening tag, a word inside angle brackets, like this: <TITLE>, and end with a closing tag, which is the same as the opening tag, but with a forward slash after the first angle bracket, like this: </TITLE>. Some elements have only a single tag instead of an opening and closing tag. In this document you can see examples of elements that have a single tag, such as !DOCTYPE, BR, and HR, and you can see examples of elements that have opening and closing tags, such as HTML, HEAD, TITLE, BODY, H1, H2, H3, and P. Elements with a single tag are sometimes called "empty elements" because they don't contain anything else, whereas most elements contain text between the start and end tags, and those tags indicate something about how the intervening text should be formatted or used. -->
<HEAD>
<TITLE>This is the Title in the Title Bar</TITLE>
</HEAD>
<BODY>
<H1>This is the primary Heading text in the document itself</H1>
<H2>You can have a secondary-level Heading, too</H2>
<H3>Or even a tertiary-level Heading, and so on</H3>
<P>Each paragraph of text is usually in its own Paragraph element.</P>
<P>So you'll usually have severals Paragraphs. You can give individual words or phrases added <EM>emphasis</EM>, which usually means <I>italicization</I>, or you can make them more <B>bold</B>.</P>
<P>You might want a line break within a Paragraph, without starting a whole new paragraph, like right here...<BR>
and you might want a horizontal line between objects in the document, like here:</P>
<HR>
<H2>You may use multiple instances of any particular level of Heading</H2>
<P>It's traditional practice to put some contact info for the author somewhere, so readers can give feedback.<BR>
Here is how you might do that: Christopher Dobrian <A HREF="mailto:dobrian@uci.edu">dobrian@uci.edu</A></P>
</BODY>
</HTML>
To see this file in action, you can either open this page here or, just like before, copy this content, save it as a .html file, and open it with your web browser of choice.
You can think of CSS as a layer of code on top of HTML. Its purpose is only to describe how the elements on a HTML page should look.
Again, try to read through the following HTML and CSS code, and follow up with displaying it in the browser to see how it looks like.
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE>Formatting Using CSS</TITLE>
<LINK rel="stylesheet" href="CSSfile01.css">
</HEAD>
<!-- This shows how to link to a CSS file that defines formatting styles for the
HTML elements that are in this document. Notice how the formatting of this document
is very different from that of HTML-Lesson01.htm, just because of the CSS.
All of the elements have the same generic tags, but traits of those elements are defined elsewhere. -->
<BODY>
<!-- In the CSS file, the background color of the document, and the default font and font color for the document, are defined for the entire document in the definition of the BODY element. -->
<H1>Formatting Using CSS</H1>
<H2>Lesson 1</H2>
<H3>The basics of getting the document to look the way you want</H3>
<!-- Note that the Headings have a particular color, size and alignment. -->
<P>Note that the Headings have a particular color, size and alignment. The paragraph text uses the default font and color and alignment of the document, and its own particular font size, 12 pt. A paragraph can have any amount of text in it, and normally it will wrap around in the way that the browser determines, based on the window size. It's possible to specify different margins, paddings, etc., in the CSS file, but that hasn't been done in this case, so the margins and wrapping are determined by the browser.</P>
<P class="center">In the CSS file a particular class of paragraph has also been defined that is center-aligned and uses a slightly smaller font size, like this.</P>
<P>By default Paragraphs use the style defined in the CSS: the default style traits that are defined for the whole document, plus whatever additional traits are defined for the Paragraph element. You can still give individual words <I>italicization</I> or make them <B>bold</B>. In this case, in the CSS file the definition of <EM>emphasis</EM> includes both italicization and bold weighting.</P>
<HR>
<P class="center">Christopher Dobrian <A HREF="mailto:dobrian@uci.edu">dobrian@uci.edu</A></P>
</BODY>
</HTML>
The following is the content of the actual CSS file containing the information that will change the look of the HTML page. If trying it on your machine, make sure to copy this content to a "CSSfile01.css" file (referred to on the <link> tag) that is saved in the same folder as the .html file.
/* This is how you make a comment in a CSS document.
Text between these symbols won't be interpreted as CSS information. */
/* A CSS file can define attributes and stylistic characteristics of HTML elements.
An HTML file can then refer to a CSS file to get stylistic details
about how to format the text that's in the HTML file's elements. */
body {
background-color: rgb(239, 247, 255);
/* A color attribute can also be described in RGB hexademical, like this: #DFFFFF. */
font-family: arial, helvetica, sans-serif;
text-align: left;
color: #000000;
}
h1 {
color: #000080;
text-align: center;
font-size: 24px;
}
h2 {
color: #000080;
text-align: center;
font-size: 18px;
}
h3 {
color: #000080;
text-align: center;
font-size: 14px;
}
p {
font-size: 12px;
}
p.center {
text-align: center;
font-size: 10px;
}
em {
font-style: italic;
font-weight: bold;
}
See how different you can make the same HTML structure look, just by adding this CSS code layer? There is much more that you can do with these tools but for now let's move on to javascript.