Building a Web Page with HTML & CSS for Complete Beginners
Note: If you know anything at all about HTML and CSS, don’t bother reading this, it’s a guide for the uninitiated, technophobes, luddites, computer-illiterates, anyone who is more comfortable with a pen and paper than a keyboard and mouse. If making a web page seems like brain surgery to you, then this is the article for you.
What you need to know
The only prior knowledge I will assume is that you’ve used a computer before, you’re familiar with using a keyboard and a word processor, and you’ve at least seen a website. Other than that, I assume you are completely ignorant!
The Basics
When you visit a website (for example the one you’re reading now), you see a page in your web browser (the program you use to access the internet) , containing text, images and maybe some other things like videos, music etc. This page may look similar to a page you could put together in a word processor (like Microsoft Word), but alas, it’s not quite as simple as that on the web.
In order to display a page correctly, the web browser needs to know about the structure of the page, e.g. Which part is a heading, which part is a list, which part is an image etc. To give the browser this information, we need to write the page in a language the browser will understand. This language is called Hypertext Markup Language (HTML). The browser translates the HTML into a readable document which is displayed on the web.
What HTML Looks Like
HTML uses ‘tags’ to identify different parts of a page. A tag is a sequence of one or more letters contained within angle brackets, for example <p> is a paragraph tag. Most tags come in pairs, so you have an opening tag <p>, and a closing tag </p>. Closing tags are always the same as the opening tag, but with a forward slash immediately after the opening angle bracket.
Each pair of tags tells the browser what type of data to display on the page. For example, a pair of paragraph tags indicates that what comes between them is a paragraph of text, and should be displayed on the page as such.
Note: Some tags are ‘self-closing’. This means that the tag doesn’t actually contain any text to be displayed on the page, so a closing tag is not required. However, if you do omit the closing tag, you need to insert a space followed by a forward slash directly before the closing angle bracket. e.g. the ‘line-break’ tag <br /> doesn’t contain any information to be displayed on the page, it just tells the browser to insert a line break at that point.
Getting Started
To write an HTML document, it’s easiest to use a plain text editor such as Notepad. There are many code editors developed specifically for creating and editing HTML pages, but until you’re a bit more familiar with HTML, it’s probably best to keep it simple.
Open Notepad and save your file with an appropriate filename. For this example we will call it ‘example.htm’
Note: HTML files use the file extension .htm to let the browser know that it is reading an HTML page (.html is also acceptable, but since most file extensions are three letters (e.g .doc, .jpg, .mp3), I prefer to use .htm)
The first thing you need to tell the browser is that this page contains HTML. Web pages can contain all sorts of different languages, such as PHP, Javascript, ASP.NET etc. but if you include a pair of HTML tags, the browser will know that everything between them is HTML.
<html>
…
</html>
…
</html>
Next, the page must contain a HEAD section. This contains information that isn’t displayed on the page, but tells the browser various things about the page, such as what it’s about, who wrote it, and whether there are any other files this page needs to refer to in order to display and function properly.
There are many HTML tags which can appear within the HEAD section, but for the sake of simplicity we’ll just address one – the TITLE tag. This contains the title of your page, which is displayed in the title bar at the top of your browser.
<html>
<head>
<title>HTML & CSS for aliens, old-age pensioners and single-cell organisms</title>
</head>
</html>
Now we can get some actual content onto the page. For this we use the BODY tag. Everything between a pair of BODY tags is actually displayed in the browser. Let’s start with a simple example where we just display a paragraph of text.
<html>
<head>
<title>HTML & CSS for aliens, old-age pensioners and single-cell organisms</title>
</head>
<body>
<body>
<p>Hello World</p>
</body>
</html>
Let’s view the page in a browser. Open your web browser, go to File>Open and click the ‘Browse’ button to browse to your file – example.htm – Click Open, and you’ll see the web page you created. Congratulations, you’re a webmaster!
Ok, so it’s not that exciting, let’s give it a bit of style.
Cascading Style Sheets
HTML tells the browser what data to display on the page, but it doesn’t tell it what that data should look like, e.g. What color the text and background should be, what font to use, how big the text should be etc. If we leave the HTML file as it is, the browser simply uses its default styles, which for most browsers means black text on a white background in Times New Roman, or a similar font. Pretty dull. But we can specify how the page should look using Cascading Style Sheets (CSS).
CSS is another language, so it is written differently from HTML, but again it’s written in plain text, so open a new file in Notepad and save it as ‘styles.css’ (.css is the file extension for CSS files)
A CSS file contains a list of styling rules that tells the browser what certain HTML elements should look like. For example, you can specify that all text that appears within paragraph tags should be displayed in red, Arial font. Let’s see how that works.
p {color: red; font-family: Arial;}
Here, ‘p’ is the HTML element we want to style, and we put the desired styles within curly brackets, each rule separated by a semi-colon. This rule will make any text between paragraph tags display in a red Arial typeface. To see this in action, we need to link the CSS file to the HTML file we want to style.
I mentioned earlier that the HEAD section contains references to any other files the HTML page needs in order to display properly. This is where we refer to our stylesheet, using the LINK tag.
<html>
<head>
<title>HTML & CSS for aliens, old-age pensioners and single-cell organisms</title>
<link href=”styles.css” type=”text/css” rel=”stylesheet” />
<link href=”styles.css” type=”text/css” rel=”stylesheet” />
</head>
<body>
<body>
<p>Hello World</p>
</body>
</html>
The LINK tag tells the browser to link to another file. The href attribute tells it which file to link to (href=”styles.css” means “please link to the file calledstyles.css“). The type attribute tells the browser what type of file it is linking to (in this case type=”text/css” means we are linking to a text file containing CSS). And the rel attribute tells the browser the relationship between the current file and the file we are linking to (here rel=”stylesheet” means “we are linking to this file because it is a stylesheet and we want to apply the styles in it to our HTML page”). Don’t worry if you don’t fully understand this line, it’s the same for every stylesheet you want to link to, you just need to provide the right file name.
This LINK tag tells the browser to look at styles.css and apply all the rules in that stylesheet to this HTML page. Save the file and refresh the page in your browser and you should see that ‘Hello World’ is now displayed in red.
That’s all very nice, but on a real web page, it’s very unlikely that we’ll want all of our paragraph text to be styled exactly the same. So we need to use the HTML ‘class’ attribute to differeniate between elements of the same type, which we want to be styled differently. Let’s say we want to display another paragraph containing, for example, a date. We want the date to appear in blue, so we need to define a new style for dates. First let’s add the date paragraph to the HTML.
<html>
<head>
<title>HTML & CSS for aliens, old-age pensioners and single-cell organisms</title>
<link href=”styles.css” type=”text/css” rel=”stylesheet” />
<link href=”styles.css” type=”text/css” rel=”stylesheet” />
</head>
<body>
<body>
<p>Hello World</p>
<p class=”date”>Monday, 27th April, 2009</p>
<p class=”date”>Monday, 27th April, 2009</p>
</body>
</html>
I’ve added the date paragraph and used the ‘class’ attribute to apply the class “date” to this paragraph. This says to the browser “This paragraph is not just any paragraph, it’s a ‘date’ paragraph”.
Note: You can use any class name you like, but it should ideally describe the type of data contained in the tag. e.g. If your paragraph tag contains a price, you might use class=”price”.
Now in our stylesheet we can use a CSS ‘dot selector’ to tell the browser how to display ‘date’ paragraphs. This means you put the tag name, followed by a dot (period/full-stop), followed by the class name:
p {color: red; font-family: Arial;}
p.date {color: blue;}
p.date {color: blue;}
Now all p tags without a class attribute will still be displayed in red, but any p tags with class=”date” will be displayed in blue.
Specificity
There’s an interesting feature of CSS known as specificity, which refers to how specific a rule is. More specific rules will override less specific rules. This subject can get pretty complex, but using our simple example, rules with a dot selector (e.g. ‘p.date’) are more specific than rules applying to an HTML element by itself (e.g. ‘p’). So our rule that makes all paragraph text display in red will be overridden by the more specific rule that makes all ‘date’ paragraph text appear in blue.
No comments:
Post a Comment