HTML stands for HyperText Markup Language. It’s a way to format your text for viewing in web browsers. If you find yourself in a situation where you don’t have a WYSIWYG (What You See Is What You Get) editor, and you need to know a bit of HTML to format your text, here are some bits of code that you may find helpful.
To format a word, a paragraph, or an entire document, all you need to do is enclose it within two HTML tags – one to start the formatting, and one to stop it – main rule: you must close every tag you open! An opening tag looks like this: <p> and a closing tag is like this: </p>. When you’re opening and closing all of your tags make sure to avoid overlapping them – close them in the order you opened them. For example, don’t do this:
Do not <i><b>overlap</i></b> your tags.
Keep your tags in <i><b>order.</b></i>
Be sure to close all tags that you open – if you try to make a single word bold, but forget to close your <b> tag, you’ll find that the whole rest of the page becomes bold as well.
<p>TEXT</p> – this surrounds paragraphs and creates space between them.
<i>TEXT</i> – italics
<b>TEXT</b> – bold
TEXT<br /> – this creates a line break after a line of text
15″ wide at the top<br />
7″ tall<br />
<p>The straps are 20″ long so it is perfect to wear on your shoulder or in your hand without touching the ground. <i>This style has a zipper closure and an interior pocket.</i></p>
Maybe you want a list of item features with bullet points. Here is how you do that:
<li>bullet point one</li>
<li>bullet point two</li>
<li>bullet point three</li>
“ul” stands for “unordered list”. If you want numbers instead, use “ol” – “ordered list.” “li” stands for “list item”. Start and end each list item tag.
Here is the most basic code for putting an image on your page:
<img src=”picture.gif” />
Here it is again, with more detail:
<img src=”images/picture.gif” height=”60″ width=”20″ alt=”picture name “title=”picture name” border=”0″ />
Here are some of the variables:
- src – your image source, which is the path to your image on your server.
- width and height – specify the width & height of your image in pixels. This makes your page appear to load faster and is just generally a good thing to do. It’s usually not a good idea to take a big image and just shrink the height and width in the link to it.
- alt/title – this is the text that will show on browsers that aren’t loading images. It also makes the little floaty-box thing when you hover over the image, and is important to people who have their images turned off or can’t view images. Describe your image here.
- border – this is the border (or lack of border) of your image – it shows up when you make your image a link.
The anchor (<a>) tag is the tag you use to make links.
1) To another one of the pages on your site:
<a href=”page2.html”>go to page two</a>
you don’t have to type in the entire address, just the name of the file (and the path, if it’s in a different directory than your HTML page).
2) To a page on another website:
<a href=”http://www.site.com/page/”>learn some web stuff</a>
here you have to type in the whole URL (including “http://”) or it will try to go somewhere in your directory.
3) To email you:
I hope this was helpful! You can check out the W3Schools HTML tutorials to learn more. Would you like to see more like this? What kinds of help do you need with HTML, and what more would you like to know?