HTML


With HTML you can create your own Web site.
This tutorial teaches you everything about HTML.
HTML is easy to learn - You will enjoy it.

Example (Webpage)

<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

type the above and save as "page.html"

Locate the file and launch it.


Notepad is a common text editor (on Windows this is usually found under the Programs > Accessories menu).
Type this in to your text editor:


This is my first web page
Now create a folder called 'html' in your C drive (or anywhere else you fancy) and save the file as "myfirstpage.html". It is important that the extension ".html" is specified - some text editors, such as Notepad, will automatically save it as ".txt" otherwise.
To look at HTML files, they don't even need to be on the web. Open a web browser such as Firefox or Internet Explorer and in the address bar, where you usually type web addresses, type in the location of the file you just saved (for example, "c:\html\myfirstpage.html") and hit return. Alternatively, go to the File menu of the browser, select Open, and browse for the file.
Pow. There it is. Your first web page. How exciting. And all it took was a few typed words.


HTML files are nothing more than simple text files, so to start writing in HTML, you need nothing more than a simple text editor.



Tags

The basic structure of an HTML document includes tags, which surround content and apply meaning to it.


Change your document so that it looks like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<body>
 This is my first web page
</body>
</html>
Now save the document again, go back to the web browser and select "refresh" (which will reload the page).
The appearance of the page will not have changed at all, but the purpose of HTML is to apply meaning, not presentation, and this example has now defined some fundamental elements of a web page.
The first line on the top that starts <!DOCTYPE... is to let the browser know that you know what the hell you're doing. You may think that you don't actually know what you're doing yet, but it's important to stick this in. If you don't, browsers will switch into "quirks mode" and act in a very peculiar way. Don't worry about this just yet, you can learn more about "document types" in the HTML Advanced Tutorial if you really want to. For the moment, just remember to shove this line at the top of your web pages and you're laughin'.
To get back to the point, <html> is the opening tag that kicks things off and tells the browser that everything between that and the</html> closing tag is an HTML document. The stuff between <body> and </body> is the main content of the document that will appear in the browser window.

Closing tags

The </body> and </html> close their respective tags. ALL HTML tags should be closed. Although older versions of HTML lazily allowed some tags not to be closed, latest standards require all tags to be closed. This is a good habit to get into anyway.
Not all tags have closing tags like this (<html></html>) some tags, which do not wrap around content will close themselves. The line-break tag for example, looks like this : <br />. We will come across these examples later. All you need to remember is that all tags must be closed and most (those with content between them) are in the format of opening tag → content → closing tag.

Attributes

Tags can also have attributes, which are extra bits of information. Attributes appear inside the opening tag and their value is always inside quotation marks. They look something like <tag attribute="value">Margarine</tag>. We will come across tags with attributes later.

Elements

Tags tend not to do much more than mark the beginning and end of an element. Elements are the bits that make up web pages. You would say, for example, that everything that is in-between and includes the <body> and </body> tags is the body element. As another example, whereas '<title>' and '</title>' aretags, '<title>Rumple Stiltskin</title>' is a title element.

coming soon... Page Title, links, 

1 comment:

Leave you comment here...