Getting Started with HTML
HTML is an acronym for Hyper Text Markup Language. It's the basic language used to create web pages. Other languages and tools exist to add new dimensions to the Web, but HTML remains the foundation for webpage development.
To experiment with HTML, you don't need a server or even an internet connection – all you need is a text editing program and a web browser. Since you're viewing this article on the web, you presumably have a web browser, and nearly all computers come with a basic text editor – Notepad for Windows machines and TextEdit for Macs (called Simple Text on pre-OSX machines).
An HTML page is made up of sections of text surrounded by tags. These tags always look something like this:
<html></html>
The opening tag of an element is composed of the tag name between a lesser-than sign (<) on the left and a greater-than sign (>) on the right. The closing tag (which tells the computer that the element is finished) is composed of a lesser-than sign (<), a slash (/), the tag name (in this case, html) and the greater-than sign (>). Tags can be either upper case or lower case; it makes no difference to the computer, so it's up to you.
The first and most basic tag is the HTML tag, shown in the example above. The HTML tag opens and closes every HTML page.
Within the HTML tag, pages are divided into two main parts: the head and the body. The head of an HTML page tells the browser how to build the page. It gives information about the character set to use (Latin characters, Chinese characters, Cyrillic characters, etc.) and may also have links to other documents that provide template information about the page. The head section begins and ends, fittingly enough, with the head tags:
<head></head>
The body section is the meat and potatoes of the page. This is where you'll find the text and images which show up in a visitor's browser. It probably won't surprise you by now to hear that the body section is bracketed by the body tags:
<body></body>
Putting together the tags we've discussed so far, an extremely basic HTML page would look like this:
<html>
<head>
</head>
<body>
</body>
</html>
This is a valid HTML page but it wouldn't actually do anything, since there's nothing inside the tags. Tags exist to tell your visitor's browser how to handle whatever is between the opening and closing tag. For example, if you were to write the code…
<p>Hello world!</p>
… a browser would see the <p></p> tags, which indicate a paragraph, and display the text between the tags accordingly.
Let's incorporate the new tag into that basic HTML page:
<html>
<head>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
To see what this will do, open Notepad or another text editor and paste the above code into it (everything from <html> to </html>). If you're using an OSX Mac, go to the Format menu in TextEdit and select Plain Text, then open the Preferences menu and select "Ignore rich text commands in HTML files." Save the file as homepage.html. Then open your web browser and select the Open option from the File menu. Browse to homepage.html and click OK. You should now be able to view this page in your browser!
To experiment with HTML, you don't need a server or even an internet connection – all you need is a text editing program and a web browser. Since you're viewing this article on the web, you presumably have a web browser, and nearly all computers come with a basic text editor – Notepad for Windows machines and TextEdit for Macs (called Simple Text on pre-OSX machines).
An HTML page is made up of sections of text surrounded by tags. These tags always look something like this:
<html></html>
The opening tag of an element is composed of the tag name between a lesser-than sign (<) on the left and a greater-than sign (>) on the right. The closing tag (which tells the computer that the element is finished) is composed of a lesser-than sign (<), a slash (/), the tag name (in this case, html) and the greater-than sign (>). Tags can be either upper case or lower case; it makes no difference to the computer, so it's up to you.
The first and most basic tag is the HTML tag, shown in the example above. The HTML tag opens and closes every HTML page.
Within the HTML tag, pages are divided into two main parts: the head and the body. The head of an HTML page tells the browser how to build the page. It gives information about the character set to use (Latin characters, Chinese characters, Cyrillic characters, etc.) and may also have links to other documents that provide template information about the page. The head section begins and ends, fittingly enough, with the head tags:
<head></head>
The body section is the meat and potatoes of the page. This is where you'll find the text and images which show up in a visitor's browser. It probably won't surprise you by now to hear that the body section is bracketed by the body tags:
<body></body>
Putting together the tags we've discussed so far, an extremely basic HTML page would look like this:
<html>
<head>
</head>
<body>
</body>
</html>
This is a valid HTML page but it wouldn't actually do anything, since there's nothing inside the tags. Tags exist to tell your visitor's browser how to handle whatever is between the opening and closing tag. For example, if you were to write the code…
<p>Hello world!</p>
… a browser would see the <p></p> tags, which indicate a paragraph, and display the text between the tags accordingly.
Let's incorporate the new tag into that basic HTML page:
<html>
<head>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
To see what this will do, open Notepad or another text editor and paste the above code into it (everything from <html> to </html>). If you're using an OSX Mac, go to the Format menu in TextEdit and select Plain Text, then open the Preferences menu and select "Ignore rich text commands in HTML files." Save the file as homepage.html. Then open your web browser and select the Open option from the File menu. Browse to homepage.html and click OK. You should now be able to view this page in your browser!
This site needs an editor - click to learn more!
Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map
Content copyright © 2023 by Elizabeth Connick. All rights reserved.
This content was written by Elizabeth Connick. If you wish to use this content in any manner, you need written permission. Contact
BellaOnline Administration
for details.
