Basic HTML Tutorial
Skip to?
Bolds, Italics, and Underlining and more
Breaks, paragraphs, and horizontal references
Changing font style, color, and size.
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> 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:
Adding Images
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”>
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%” >
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.
<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
<font color=”# A Hexadecimal color” > Your Text </font >
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>
<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):
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.
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