HTML & CSS
- What Is HTML?
- What does HTML Look Like?
- What is CSS?
- What does CSS Look Like?
- Validation of Web Pages
- What is Validation
- Why is Validation Important?
See Also
Further Reading & Resources
What is HTML?
HyperText Markup Language (HTML) is the predominant markup language used for writing web pages. A markup language is simply a set of annotations added to text to describe how it should be structured, displayed and formatted. HTML works in this way, it provides a means to describe the structure of text-based information in a document - by denoting, for example, certain text as headings, paragraphs, links, line breaks and lists. It is also used to supplement that text with interactive forms, embedded images, and other objects.
An HTML document is divided up into two main parts; a declarative header section and a body section. The header section contains information about the document, such as the page title, keywords and document author. The body section contains the document's actual content.
What does HTML look like?
An example of the HTML for a basic page may look like this:
<html>
<head>
<title>Introduction to Flowers</title>
</head>
<body>
<h1>Introduction to Flowers</h1>
<p><img src="images/flower.jpg" alt="White and purple flower" />
There are many varieties of flowers.</p>
<h2>Popular Flower Varieties</h2>
<ul>
<li>Rose</li>
<li>Tulip</li>
<li>Lily</li>
</ul>
</body>
</html>In a browser this markup would look like this:
Introduction to Flowers
There
are many varieties of flowers.
Popular Flower Varieties
- Rose
- Tulip
- Lily
The HTML example above shows some common HTML structural elements such as:
<title></title>- Page title tag<h1></h1>- Heading 1 opening and closing tags<h2></h2>- Heading 2 opening and closing tags<p></p>- Opening and closing paragraph tags<img />- Image tag<br />- Line break tag<ul></ul>- Opening and closing unordered list tags
As you can see, all of these tags must be closed, the img (image)
and br (line
break) tags
are both self closing because all of the code needed to display these
items is contained within the tag itself.
These element tags can also have attributes, for example, an image tag should
also have src (source) and alt (alternative) tags.
The src tag tells the browser where to find the image and the
alt tag tells the browser what text to display if the image cannot
be displayed.
You can view the HTML for a web page you are viewing by going to View › Source/Page Source.
ˆ TopWhat is CSS?
CSS (Cascading Style Sheets) is a computer language used to add design and presentational features to the content contained within an HTML document.
Website design differs from traditional visual design mediums in the sense that the structure of the content being presented (in this case the HTML) is kept separate from the presentational elements such as layout and colour (the CSS). This enables greater flexibility in the way the information can be delivered to the end user.
What Does CSS Look Like?
In the HTML section on this page we showed you the following Example of a basic Web page:
Introduction to Flowers
There
are many varieties of flowers.
Popular Flower Varieties
- Rose
- Tulip
- Lily
In order to 'style' this HTML we link the HTML document to a separate CSS file which may look like this:
body {background: gray; color: black; font-family: Verdana; font-size: 12px;}
h1 {font-weight: bold; font-size: 22px; margin-bottom: 18px;}
h2 {font-weight: bold; font-size: 18px; margin-bottom: 14px;}
p {margin-bottom: 18px; text-align: left;}
img {float: left; margin-right: 10px; margin-bottom: 10px;}
li {list-style: disc;}The advantage of using a style sheet is that several web pages can be altered universally at once. In order to maintain consistency of design through a number of pages we can simply change an element in the style sheet.
If we wanted the background of the page body to be green and the body text to be a white serif font, we would simply change the style sheet to be:
body {background: green; color: white; font-family: Times; font-size: 12px;}Introduction to Flowers
There
are many varieties of flowers.
Popular Flower Varieties
- Rose
- Tulip
- Lily
Validation of Web Pages
What is validation?
As for every language HTML and CSS have their own grammar, vocabulary and syntax, and every document written with these computer languages are supposed to follow these rules.
The process of verifying whether a document follows the rules for the language(s) it uses is called validation. A document that passes this process successfully is deemed valid which, in effect, ensures that it meets the quality criteria, or standards compliance, for a Web page as proposed by the World Wide Web Consortium (W3C).
Why is Validation Important?
Writing valid HTML and CSS allows your site to be accessible to more people, across more web browsers, operating systems, and search engines, helping to ensure that it can be seen by the widest possible audience.
In addition, creating Web pages according to a widely accepted coding style makes them easier to maintain and update, even if the maintenance and evolution is performed by someone else.
ˆ Top