Web Design/Basic HTML and CSS Tutorial

From Wikiversity
Jump to navigation Jump to search
Web Design Basic HTML and CSS Tutorial
This page is part of the Web Design project.

HTML stands for Hypertext Markup Language and is composed of many things called tags. An example of a tag is <tag>. Tags are used to tell a browser how to format text, mark different areas, and other thing. However, more recently many HTML formatting tags such as the <font> tag have been removed from HTML in favour of CSS. CSS stands for Cascading Style Sheets. We will go over that later in this chapter.

Basic HTML[edit | edit source]

Ok, so you are ready to start making a simple website. Alright then let's start:

There are two kinds of tags, a beginning tag <tag> and an end tag </tag>. Now that you know that we can start your first web document.

Load up your HTML Editor. The screenshot examples are up CSE HTML Validator lite v6.52.

The first tag you need is a beginning <html> tag. This tells your browser that this is an HTML document. Next you will need a beginning <head> tag. This marks the head of your document. In the head exists many elements many of which you will learn more about later in this Wikibook.
One of the things that is in the head is the title. The title is what appears at the top of your browser. A title is very important and should describe in as few words as possible the content of your page. To make a title you should add a <title> tag followed by the text you want to use as a title and then a </title> tag to close it off.

Now you have to close the head of you document. That's right you need to add a </head> tag. Now you need to create a body. The body is where the content that the browser displays exists. To make it you need a <body> tag. Now we need to close our body and end the HTML Document and a </body> then a </html> tag to your document. Now between the <body> tags type some text and save your document. When you save you document save it as "index.html". Now that it is saved load up you HTML file in a browser.

There you have created a web page. Go pat yourself on the back. It may not be much yet but you will learn more in the next chapter.

Basic CSS[edit | edit source]