Sebway.net's HTML/CSS Tutorial
This page will show you what some HTML and CSS codes do. We will start at a very basic level,
and work up to more complicated codes. Have fun learning!
1. Create & View Your File
Open up Notepad or some basic text editor. Make a new file and save it as "testpage.html".
You can save the file as .html
. There is no difference.
To view what the codes in your file produced, at any time during
this tutorial, go to your computer's file explorer, and find where you saved your file. Open up the .html
file, and it should open in your default internet browser.
2. The Main Tags
To make any HTML page, you need to have at least the <html> tag
the <body> tag
. The code below should be inserted into your .html
3. Make a Page Title
Almost every page on the web has a page title
. For now, let's just make the title "Test Page". Insert this code between the <html> tag and the <body> tag.
As you see, there is a new tag: the <head> tag
4. Put Text in the Page
Let's write some basic text. Without any text changes, the text below should appear the default font and size for your browser, when you view your webpage. Put the text below between <body> and </body>.
If you want to make the text bigger, you can put the font size in a style attribute
, like this:
is a CSS snippet that makes the text have a size of 36 points.
is the same text as above, but changed to Calibri font:
makes the text change from the default font to Calibri
If you want to make the text a little bit more exciting, you can make the text be a different
Note: You can replace color:Orange
with whatever color you want; I
am just giving an example.
5. Create a HyperLink
There is almost no
webpage on the internet that doesn't have links. Here
is an example of a very basic hyperlink:
To have the link be the same font
as the text in part four, write the same
code(s) in the style category.
To make your links have different looks, (not the default link look
), follow the codes below...
To make one
link be a different color and not have an
underline, do the same as in part four, then add text-decoration:none
to get rid of the underline:
To make all
links on the page be a different color and
not have an underline, use the following example code. Insert the code below
. After you insert
this code, put multiple links in the body
(make sure they don't have
any style changes) to test it out.
Now that you understand how to make a link and decorate it, let's make a link to a local webpage.
6. Insert a Picture
If you want to link to a page that is in the same directory as the current page,
all you have to do is link to the filename (no "http://" and ".com" stuff)...
If you want to link to a page that is in a sub-directory,
you have to have a link with the directory name, put a forward slash, and then put the filename...
Down 2 levels...
If you want to link to a page that is up a level,
you have to put two periods and a forward slash (for each level up), and then put the filename...
Up 2 levels...
Tip: You can use these methods for any filetype (images, scripts, etc.).
Now, we're going to put a picture onto your page. Use the <img> tag
The picture above shows the picture with its original/default/automatic size.
To make a picture have different sizes, add these codes to the <img> tag:
means 500 pixels. You can specify the number of pixels high/wide you want your image to be.
7. More Extensive Learning / Cool Effects
Now that you have got down the basics, you can learn how to do more things with website coding.
is one of the best websites on the web for learning and understanding W3
(world wide web) coding languages. You can also add more snazzy effects
Dynamic Drive is one of many good sources for adding effects to webpages.
8. Publish the Webpage to the Web
If you not only want to see what these codes can do, but want to go one step further by allowing
anyone on the internet to visit your webpage/website (like the page you are reading right now), you can register your own domain name,
or paste the HTML code you made into an HTML input field on an online website maker, such as webs.com
*Webs.com has an HTML input field, but not a full HTML mode. For beginning web developers, this shouldn't be a problem.