|
Atryeu Designs » Web Design » Tutorials & Guides » The Basics Part 1 |
Welcome to the Basic HTML guide! This is more for complete beginners who have no idea
how to write any code yet. If an HTML term comes up that has not been mentioned before,
it will be shown in italics and will be followed with a short description of it like this:
Term (Description).
HTML stands for Hyper Text Markup Language and is very widely used across the world wide
web as a way to create documents. It may seem hard to understand at first, but with some
practice it becomes easy to memorize.
HTML coding is made up of Tags (A tag is a small piece of code; for example: <br>)
to create an overall document. Nearly 99.9% of the webpages you view will all be
created with the same few opening and closing tags (A closing tag is written exactly the
same as regular/opening tag except it has a forward slash in front) seen below:
<html>
<head>
</head>
<body>
</body>
</html>
|
In the above code, the HTML opening and closing tags tell the browser where the document
starts and were it ends. Within the "head" tags, you can place the title of your site,
meta tags to help search engines and such, as well as stylesheets and javascript codes.
Usually most anything placed within the head tags are not actually visible on the website
aside from a few exceptions. Within the "body" tags you place your actual website content
which would be the images, links, text, etc.
The Head Tag
There are lots of things you can place within the head tag, but for now I will only show
the site title. For further information about the content of the head tag, you can view the
other tutorials/guides.
Title Tag
The "title tag" is how you add your website's title to the document normally. Anything
placed within the title tag will be displayed at the very top of the browser you are
using. If you look at the top of it now, it should say "Atryeu Designs...."
The above code is what the title tags look like. Pretty simple. Just remember that this
code always needs to go between the head tags! When you add it into your
basic website document you have so far, the code should look something like the below:
<html>
<head>
<title>Your Website Title</title>
</head>
<body>
</body>
</html>
|
The Body Tag
Within the body tag you will place all of your website's content. There is no limit to how
much information and coding can be placed here and there are hundreds of different things
you can do to change the appearance of your webpage from here as well. In this guide, I
will only be covering a few things however. To continue on after this, feel free to check
out the other HTML guides I have written.
Backgrounds
A lot of people, especially people building small personal sites, like to have something
other than the plain white background that is default for all pages. As almost everybody
has most likely seen online, you can change your background to a very large variety of
colors. You can even place an image in the backgound if you prefer it to a plain solid
color. To change the background's solid color, see the below code:
<html>
<head>
<title> Your Website Title </title>
</head>
<body bgcolor="black">
</body>
</html>
|
The above code, as you can probably guess, will change your website's background color
to solid black. You have a large selection of color names you can use, or you can use a
hex code (A hex code is a code for a color; example: #000000 is the same as writing
black). In my opinion, a hex code is better to use because you have a larger range of
colors to use rather than using certain color names. What if you do not want a solid color
and prefer an image instead? Here's an example:
<html>
<head>
<title> Your Website Title </title>
</head>
<body background="image.jpg">
</body>
</html>
|
The above code would add the image "image.jpg" to the background of your website instead.
When using an image, you want to make sure the image name is spelled correctly, it is on
the host (A website host is a place to put your website. There are many free ones
online but also many paid ones without banner ads) and the file size is not very large.
Tips for Backgrounds
Think ahead so the text will be readable over your background!
If you use an image, make sure it's a small file so it loads quickly (remember some people still use dial up!)
Don't use blinding colors (such as yellow). It's hard on the eyes.
Font Tags
A Font tag will allow you to change your text's face (font face is the type of font used,
such as Arial or Verdana), size and color. There are many other types of tags that will
change the look of your text and those will be covered in the second HTML guide instead.
As before, I will show you the codes but I will also show you what they look like
afterwards since they will not interfere with my current layout.
<html>
<head>
<title> Your Website Title </title>
</head>
<body>
<font face="Times New Roman">Your Text</font>
</body>
</html>
The above would look like: Your Text
|
If you wanted to change the size of the text, it would look like this:
<html>
<head>
<title> Your Website Title </title>
</head>
<body>
<font size="3">Your Text</font>
</body>
</html>
The above would look like: Your Text
|
Changing the color is basically the same as everything else. You can also combine
properties (a property for an HTML code tells that particular tag to have a
certain attribute, like a certain color, size, etc) into one tag like this:
<html>
<head>
<title> Your Website Title </title>
</head>
<body>
<font color="pink" size="3" face="Times New Roman">Your Text</font>
</body>
</html>
The above would look like: Your Text
|
Tips for Fonts
Make sure the color, size and face are easy to read
Make sure the color is visible on your background
Use basic fonts everybody has (such as Arial, Times New Roman, Verdana...)
ALWAYS close the font tag otherwise it will continue through the page.
Adding Images
A website with nothing more than plain text can get a little boring. It is nice to have
a few images, with the content or a layout image, just to add something extra to the site.
An image is very simple to add and has some interesting properties you can setup such as
the size and adding a border.
Let's say you are wanting to display an image on your web host called "puppy.gif"
on one of your pages. To do that, you would use the below code:
<html>
<head>
<title> Your Website Title </title>
</head>
<body>
<img src="puppy.gif">
</body>
</html>
|
When you view the page, if the image is located on the host and spelled correctly, you
should see it displayed where you placed it. Is the image to large for the page and
it needs to be smaller? No problem!
<html>
<head>
<title> Your Website Title </title>
</head>
<body>
<img src="puppy.gif" width="200" height="200">
</body>
</html>
|
The above code will use that same image from the last code but would resize the image
so it is only 200x200 pixels (a pixel is a very small dot that helps make up a small
piece of an image). You can enter any size you like into the width and height
properties but you do not want to make the numbers higher than the actual size of the image
itself. Trying to enlarge an image this will can distort it so it does not look correct.
Let's say you want to decorate the image a little and add a bit of a border to it as well
as setup a code to when you move the mouse over the image, some text is displayed.
<html>
<head>
<title> Your Website Title </title>
</head>
<body>
<img src="puppy.gif" width="200" height="200" border="2" alt="This is my Puppy">
</body>
</html>
|
Using the above code will create a "size 2" border around the image. (*Note: You
can change the color of the border by adding the property: bordercolor="black).
When you move the mouse over the image, the text "This is my Puppy" will be displayed.
As you can see, these simple codes to get you started are very easy to learn and will not
take much to memorize so you can use them constantly while writing code for a website.
Remember that there are far more properties and types of code that can be added to these
but I have only listed the basics to get you started.
HTML Basics Part 2 will cover more information about ways to change your text, how to add
links to other pages/sites and other little extras. If you are just beginning, be sure you
read through the Part 2 guide as well!!
|
|
|