What is HTML?
HTML stand for HyperText Markup Language which is the basic language used to format a webpage.
What is CSS?
CSS stands for Cascading Style Sheets which is another language used for more advanced formatting of a webpage. It also makes it easier to change the look of all pages on your site as you can edit just the style sheet and, when properly used, it will change everything on the site. I will touch on this later though.
How do I use HTML?
To edit HTML, all you need is Notepad which is a VERY basic text editor that windows comes with. I do not recommend using Wordpad or any fancy text editor like Microsoft Word as it will not always keep your text the way you write it.
If you want a bit fancier editor, I like to use EditPlus. When you open a new text document, it will highlight the the code in different colors. This can help make finding mistakes easier.
Formatting Your Text
<u>This is my underlined text.</u>
will produce:
This is my underlined text.
<i>This is my italized text.</i>
will produce:
This is my italized text.
<b>This is my bold text.</b>
will produce:
This is my bold text.
Now, you can combine any of the three formats above. However, the last thing you open needs to be the first thing you closed. I opened the italics tag first, then I opened the underline tag. So, when I am at the end of the text I want to format, I need to close the underline tag and then the italics text.
<i><u>This is my underlined & italized text.</u></i>
will produce:
This is my underlined & italized text.
You can close one before you close the other as seen here:
<b>This is some <i>bold</i> text with an italized word.</b>
This is some <b>bold</b> text and this is an <u>underlined</u> word.
which will produce:
This is some bold text with an italized word.
This is some bold text and this is an underlined word.
Another way to make bold text is to use the strong tag.
<strong>This is bold text using the strong tag.</strong>
will produce:
This is bold text using the strong tag.
Making a link in your text.
What is a link? A link is something that a user clicks to go to a website or page of your website.
A basic link tag looks like this:
<a href="http://www.bisidesigns.com">BISI Designs' BuyItSellIt Templates</a>
which will produce:
BISI Designs' BuyItSellIt Templates
*Note: I have pre-formatted all links in my website to be bold and not underlined. If you do not format your links, they will be blue or purple and underlined.
Additional things you can put inside the link tag but are not required:
- target="new" - This will open the link in a new window.
- title="Check Out Our BuyItSellIt Templates" - This puts a title on the link but will not be visible to the shopper. This helps your site in accessability and can help increase your rank.
- style="text-decoration: none;" - You can add a variety of inline styles to your link. The example will take the underlining off the link.
To add an image to a regular page requires you to have uploaded the image to a picture or web host.
A basic image tag looks like this:
<img src="http://mywebsitename.com/pictures/myimage.jpg" />
You can add this between the opening and closing tag of a link to make your image a link. When you do so, you need to add the border formatting to your image tag (see below).
Additional things you can put in an image tag:
- border="none" - This will remove a border from your image if you decide to make it a link.
- alt="4 or 5 words about the image" - This is very important to search engines. A search bot can not read an image. That is why you put alt text which VERY briefly describes the image or what it is linked to. Think of it as if you did not have an image there. What would you write in place of that image? What is in the image?
For more information about HTML, we recommmend the following resources:
- Boogie Jack's Website
- Website Design Made Easy - Third Edition - by, Dennis Gaskill (aka. Boogie Jack)
- Easy Online Color Picker & Matcher