|
Welcome to my basic HTML tutorial. In this tutorial, you will learn what HTML is, how it works, and how to make simple web pages.
HTML is the main language used to create web pages. It stands for Hyper-Text Markup Language. Other languages commonly used are CSS, Javascript, PHP, and many others. Using only HTML, it is possible to create basic web pages with text, images, links, etc.
HTML is not a programming language, but rather a set of commands which the web browser reads and displays as the web page. It is much easier to learn than true programming, and anybody can master it with a little study and practice. In this tutorial, you will learn W3C compliant Extended HTML, or XHTML.
W3C stands for World Wide Web Consortium, and can be found at http://www.w3c.org. W3C has set standards for how HTML should be used, and the way you will learn in this tutorial is the correct way to do it. All you need is a simple text program (Notepad works just fine) and a web browser.
To begin, you need to set the doctype. Copy and paste this into the beginning of your Notepad document:
[code]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">[/code]
This specifies that you will be using XHTML 1.0 Transitional. The URL in that code verifies that your code is W3C compliant.
Now for the HTML. HTML is set up in tags. You'll soon understand what this means. Under the doctype code that you pasted into the document, put this in:
[code]<html>
<head>
<title>
</title>
</head>
<body>
</body>
</html>
[/code]
Each of those are tags. Tags consist of a word surrounded by < >. If you'll notice, there is both an opening tag and closing tag for each. So, the HTML tag has an opening tag <html> and a closing tag </html>.
The HTML tags tell the browser that it will be reading HTML. The next tag is the head tag, which also contains the title tag. The head tag is for commands that don't actually appear in the browser window, but influence what does appear. We won't be using this just yet.
The body tags are for what actually appears in the browser window. Let's start with some text. Type something in between the <body> and </body> tags, like "hello world". Now, save your file as index.html and open it with your web browser. If you did it right, the words "hello world" should appear on the screen. It should also say "index.html" on the bar ABOVE your browser window. In order to customize this, just type what you want it to say between the <title> and </title> tags. For this example, I'll
Open up your file as a text file again. Now, we're going to change some morethings. Make a customized title if you haven't already. Now, let's make the background color something other than boring old white. go to the <body> tag and change it like this: <body bgcolor="red">. This will make the background blue. You can type in any simple color (blue, green, red, etc.), but you can acttually make any possible color using the HEX code. The HEX code for red is #ff0000.
Your HTML should look like this now:
[code]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>MY WEBSITE</title>
</head>
<body bgcolor="red">
Hello World!
</body>
</html>
[/code]
Now open it back up in your browser and enjoy!
That text looks a little bland, doesn't it? Let's make it more interesting.
Place these tags around your text so it looks like this:
<div align="center"><strong>Hello World!</strong></div align="center">
The strong tag will make the text appear in boldface, and the div tags are set to center it. Altogether it will make for a more dramatic appearace.
Now, let's add a link. Say you want to link to Google.com. Here's the syntax for that link:
[code]
<a href="http://www.google.com">Google</a>
[/code]
(the itallicized text is what the text link will say on the web page. You can make it say whatever you want.
You can also link to any webpage that you want. Let's add a link under your text. First, you'll have to add a break. This will put the link on a new line. The break tag looks like this: <br />
Your page contents should look like this:
[code]
<div align="center"><strong>Hello World</strong></div>
<br />
<a href="http://www.google.com">Google</a>
[/code]
(the rest of the html should be the same, but I can't be bothered to put everything down every time.)
Now, open it up in your web browser again. You'll have a nice, bold heading and a link. Not too hard, huh?
In part two you'll learn to further customize your text, add images, and general website layout. Thanks for reading!
|
Submit Your Article
Announcements
Contact
