Basic HTML Tutorial

Basic HTML Tutorial

Skip to?

Bolds, Italics, and Underlining and more

Breaks, paragraphs, and horizontal references

Adding Images

Changing font style, color, and size.

Linking

Bolds, Italics, and Underlining and more

 

Most HTML commands need to be opened and closed with. Here are a few of the most common commands.

Name Code How to use it What it does
Bold B <B> Bold </B> Bold
Italics I <i> Italics </i> Italics
Underline U <u> Underline </u> Underline
Typewriter TT <tt> Typewriter </tt> Typewriter

Incase you’re wondering, you are able to use those flags in any kind of combination, .

Example: <tt><u><i> <b> Example <b></i></u></tt> Example

Breaks, paragraphs, and horizontal references

 

Breaks and horizontal references don’t need to be closed. Paragraphs can be closed if you want them to be, but it doesn’t really matter that much.

Breaks <BR> : I use them all the time to BReak the lines in my text,. If you use two breaks in a row it will make your text skip a line. If you use 3 breaks in a row you’ll skip 2 lines and so on. It’s pretty much just like pressing enter when you’re typing.

Hoizontal References <HR> : I don’t use these at all since I really don’t need them. You can put a WIDTH tag inside the < > along with the HR tag to make it longer or shorter. Anyways here’s a few examples of horizontal references.


That is a horizontal reference without a WIDTH tag. Code: <HR>


That is a horizontal reference at 50% width. Code: <HR WIDTH=”50%”>

Paragraphs <P> to open and </P&gt to close: I use these a lot when I’m coding in HTML. Some people choose to close paragraph flags and some people don’t. I don’t think that it matters that much though. Paragraph flags are the equivalent of using 2 breaks in a row. Paragraph tags can also be used to align things.

Example:

<P ALIGN=”RIGHT”> Blah blah blah bla blah</P>

Centers <CENTER> to open, </CENTER> to close. Centers center text.

Example:

<CENTER>Centered text</CENTER>

Adding Images
Adding an image to your web pages is fairly simple.

All you need to code is <img src=”Image Name.Type” alt=”Description of the Image”>

Example. <img src=”1-1.png” alt=”Build A Website”>

Build a Website

If you want to shrink or expand the image a little bit you can also use the WIDTH tag. It will make your image take up that percentage of the space in that cell of a table, frame, or page.

Note: The height of the image also changes!

Code: <img src=”Image Name.Type” alt=”Description of the Image” width=”Width in pixels or percent of original size ” >

\
Example. <img src=”1.png” alt=”Description of the Image” width=”40%” >

Description of the Image

Changing font style, color, and size.

 

There are many ways to change font size, style and or color. One way is through CSS or you always change it with normal HTML.

To change style/font:

<font face=”the name of the font” > Your Text </font >

Example fonts: ( just enter the font name in the quotes exactly as they are )

comic sans ms

verdana, helvetica

To change color:

<font color=”# A Hexadecimal color” > Your Text </font >

 

To change size:

There are two ways that I know how to change font size one is with heading commands and the other is with <font size=””>.

With H flags: FYI the H commands go up to 8.

<H1> HTML Tutorial </H1>

<H3> By </H3>

<H5> Build a Website </H5>

FYI: The font sizes can go up to 10, with the font command.

<font size=a number>

Example:

<font size=5> Blah </font>

<font size=3> Bla blah </font>

<font size=1> blaahhh </font>

BTW, you can use the SIZE, COLOR, and FACE tags in the same font command if you want to.

Linking

 

Linking is really easy. For a basic link all you need to do is type in the command <A HREF=”the location of the page including the http://!”>
If you are linking to a page in the same directory as the page you are linking to it from you only need to type in the name and type of file it is.

<A HREF=”index.html”> This links to my index page </A>

To link an image

<A HREF=”the page you want to link it to”>

<img src=”the image name” alt=”Description of the page” border=0>

</A>

Example (Without a border=0 tag):


dont click

The border=0 tag isn’t needed unless you want a blue, or whatever color your links are supposed to be, box to surround the image.

Email Linking

To link to an email use <A HREF=”mailto:your email address”> Fake email address </A>

Yay! Congratulations you’ve learned most of the basic HTML commands! Feel free to bookmark this page in case you forget some of the commands.

Go on to…

HTML Tutorials
Frame Tutorial
Table Tutorial
Hex Color Codes