A Review to Everything you have Learned
In this HTML5 Tutorial, You will get a full review of what you have learned in the previous tutorials and this is the second last tutorial of our HTML5 Course.
Elements and Tags
In the start, we learned about Elements and tags. Tags are basically labels you use to mark up the beginning and end of an element. All tags have the same format: they begin with a less-than sign "<" and end with a greater-than sign ">". Generally speaking, there are two kinds of tags — opening tags:
<html> and closing tags: </html>. The only difference between an opening tag and a closing tag is the forward slash "/". You label content by putting it between an opening tag and a closing tag.
Most browsers might not care if you type your tags in upper, lower or mixed cases.
<HTML>, <html> or <HtMl> it will normally give the same result. However, the correct way is to type tags in lowercase. So get into the habit of writing your tags in lowercase.
You type your tags in an HTML document. A website contains one or more HTML documents. When you surf the Web, you merely open different HTML documents.
Making your own simple site
Then we learned about making our own simple site. Here's a review for it.
Let us start with something simple. How about a page that says: "Hurrah! This is my first website."
The first thing you need to do is to tell the browser that you will "talk" to it in the language HTML. This is done with the tag
<html> (no surprises there). So before you do anything else type "<html>" in the first line of your document in Notepad. And also don't forget the HTML close tag now type </html> a couple of lines down and write the rest of the document between <html> and </html>.
The next thing your document needs is a "head", which provides information about your document, and a "body", which is the content of the document. Since HTML is nothing if not logical, the head (
<head> and </head>) is on top of the body (<body> and </body>).
We strongly recommend that you structure your HTML in a neat way with line breaks and indents.
your HTML document has two parts: a head and a body. In the head section you write information about the page, while the body contains the information that constitutes the page.
For example, if you want to give the page a title that will appear in the top bar of the browser, it should be done in the "head" section. The element used for a title is title. So write the
title of the page between the opening tag <title> and the closing tag </title>.
we want the page to say "Hurrah! This is my first website." This is the text that we want to communicate and it therefore belongs in the body section. So in the body section, in between the paragraph tag <p> and </p> type "Hurrah! This is my first website."
Done! You have now made your first real website!
Next all you have to do is to save it to your hard drive and then open it in your browser:
- In Notepad choose File > Save as.Note: If you are on a Mac using something like TextEdit, then convert to plain text first and then save the file: Format > Make Plain Text and then Save as.
- In the Save as type box, choose All Files. Note: This is very important. Otherwise, you save it as a text document and not as an HTML document.
- Save your document as page1.html or page1.htm.The ending .html indicates that it is an HTML document. .htm has the same result. I always use .html but you can choose whichever of the two extensions you prefer. It doesn't matter where you save the document on your hard drive as long as you remember where you saved it so you can find it again.
- Open your browser and press CTRL+O.
- Click Browse in the box that appears.
- 6. Find your HTML document and click Open and then click OK.
It now should say "Hurrah! This is my first website." in your browser and the title of the browser page should be "My first website". Congratulations!
Attributes
As you probably know, elements give structure to a HTML document and tells the browser how you want your website to be presented (for example,
<br> tells the browser to insert a line break). In some elements, you can add more information. This additional information is called an attribute.
Attributes are always written within a start tag and are followed by an equal sign and the attribute details written between quotes.
The
title attribute is used to type a short description of the content that displays when you hover over it.Links
If you want to make a link between pages on the same website, you do not need to spell out the entire address (URL) for the document. For example, if you have made two pages (let us call them page1.htm and page2.htm) and saved them in the same folder you can make a link from one page to the other by only typing the name of the file in the link.
You can also create internal links within a page. For example a table of contents at the top with links to each chapter below. All you need to use is a very useful attribute called
id (identification) and the pound symbol "#".Layout (CSS)
Use Cascading Style Sheets (CSS) to give your website layout, style, and the formats you want. In this lesson you will get a short introduction to CSS. But later you can learn all about CSS from us after the HTML 5 Tutorial Ends. So please consider this lesson only as an appetizer.
CSS is the better half of HTML. And in coding, there is no equality of status: HTML takes care of the rough stuff (the structure), while CSS gives it a nice touch (layout).
One of the smart features of CSS is the possibility to manage your layout centrally. Instead of using the
style attribute in each tag, you can tell the browser once how it must layout all the text on the page.
CSS can be used for much more than specifying font types and sizes. For example, you can add columns, colours and backgrounds.
Besides adding layout such as colors, font types etc., CSS are also used to control the page layout and presentation (margins, float, alignment, width, height, etc.). By regulating the different elements with CSS you are able to layout your pages elegantly and precisely.
Web standards and validation
HTML can be coded in many different ways. And browsers can read HTML in just as many ways. You could say that HTML has many dialects. That is why some websites look different in different browsers.
There have been attempts to make a common standard of HTML through the World Wide Web Consortium (W3C) founded by Tim Berners-Lee (yep! the great guy who invented HTML). But it has been a long and tough road.
In the old days - when browsers where something you had to pay for - Netscape was the dominate browser. Back then, the most supported HTML standard where called 2.0 and later 3.2. But with a market share of over 90% Netscape did not have to - and did not - care much about common standards. On the contrary, Netscape invented their own strange elements, which did not function in other browsers.
For many years Microsoft almost completely ignored the Internet. After a while they took up the competition with Netscape and introduced a browser. The first versions of Microsoft's browser, Internet Explorer, was not any better than Netscape at supporting the HTML standards. But Microsoft chose to give away their browser for free (always a popular thing to do) and Internet Explorer soon became the most popular browser.
Validate
Insert a DTD in your pages and you can always check your HTML for errors by using W3C's free validator.
To test this out, make a page and upload it to the Internet. Now, go to validator.w3.org and type the address (the URL) of your page and validate it. If your HTML is correct you will get a congratulations message. Otherwise you will get an error report telling you exactly what and where you have done something wrong. Make some errors on purpose to see what happens.
The validator is not just helpful to locate an error. Some browsers try to compensate for lack of skills among web developers by trying to fix errors in the HTML and showing the page as they guess it should look. With such browsers, you might never see an error in your own browser. However, other browsers might guess differently or not show the page at all. The validator can help you find errors you did not even know existed.
Always validate your pages to be sure they will always be shown correctly.
About
Tags
Popular
0 comments:
Post a Comment
We’re eager to see your comment. However, Please Keep in mind that comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.