Home
HTML and CSS
Articles
HTML Basics
Level: Beginner Software:
1.Welcome, this
tutorial will hopefully teach you the basic necessities for making your
very own webpage. Now contrary to what people tell you, html (Hypertext
Markup Language)
is not a programming language, its simply instructions telling the browser
what to do. Yes, different programming languages can be incorprated into
html, but html itself is just instructions for browsers. We will first talk about tags. All html documents have tags and they must be opened and closed. Some examples of tags are: <br>, <font>, <b>.
Now before we start off, you must know that in html, every bit of code you type has an opening and a closing tag. The opening tag simply has the word <html>, telling the browser that you are opening a html document. And when the browser reads </html> the forward slash symbolizes the end of your webpage. Now we will talk about the code in between. You can open up notepad or use one of the many html programs which defeats the purpose or learning html.
2.Now to make your first webpage put the following code in notepad, then save it as 'webpage.html'.
| <html> <head> <title>My First Webpage</title> </head> <body> </body> </html> |
Now in the head tags it has parameters set that the browser reads before the webpage is loaded. The title tag is located in teh head tags. Title message is the text that appears in the upper left bar of your browser. For example I use <title>.: Infinite Designs :.</title>
3. Now your
probably thinking 'What the heck does all that do?' well, this is what it
does:
<html> - This tag tells the browser that
it is opening an HTML document
<head> - This is the HEAD of a webpage,
however nothing inside the HEAD tags is shown in the webpage aside from
the TITLE
<title></title> - Whatever normal
text is written in here is normally shown in the upper left of the window
above the File Menu
</head> - Closes the HEAD of the document
<body> </body>
- This is the opening for the content that the user actually sees.
</html> - this closes the HTML document,
telling the browser ther eis nothing left to interpret.
4. Now that
you can make a basic html page how do you add text, links, images etc..?
Well here are the following most commonly used elements to a webpage.
Text
<font> This tag displays text and many
parameters can be added to the opening font tag to edit text. ie.. ( <font
size="10" color="blue" weight="bold">Text
Here</font>) </font>
Hyperlink (Link to another webpage)
<a href="http://www.yourdomain.com">
This is where you would write the text that you wish to link to the specified
page. </a>
E-mail
<a href="mailto:address@yourdomain.com">
This is the same tag as the hyperlink except the address starts with mailto:
telling the browser to open the default mail client when clicked on</a>
Body Parameters
<body Parameters placed in here>oIf your
wondering how to change the background colour or have a background image,
or other stuff, heres how. To change the colour after the opening body put
bgcolor="#FF0000" ie..( <body
bgcolor="#FF0000">) I believe this changes the page color to
red. To add a background image instead of color, use background="imagename.jpg
or .gif" . Now you can change the color of links by 3 parameters
(alink ,link, and vlink) a link means active link, so if they click on it
and a new window opens, the link in the origional window will remain a certain
color as long as the link is open. Link is just the color of the links,
and vlink means visited link, which are links you have already visited.
you can add them with the following code, alink="#3399FF"
link="#FFCC33" vlink="#FF0000". And finally the
closing tag always looks the same.</body>
Bold
<b> Simply makes the text bold. </b>
Italics
<i> Simply makes the text italics. </i>
Underline
<u> Simply makes the text underlined. </u>
Line Break
<br> This tag does NOT need a closing.
It simply brings you down a line when used, similar to pressing the 'enter'
key in a word processor..
More HTML and CSS: Most Popular Materials | Fresh Materials
| More HTML Tutorials at Markuptutorials.com