Basic HTML - Getting Started with Your Website

Robyn Norgan

Jun 8, 2012 • 8 min read

Getting started with your website can be a daunting task. This is especially true if you have limited experience with website building. To get you started, Dynadot provides free one page hosting with every domain purchase. Our one page hosting features a "wizard" to help people who don't know HTML with building their websites. However, our wizard doesn't allow you to do as much for your site as HTML does, so here are some basics to get you started*:

bold
italics
underline

Font Size
The easiest way to change the font size is using these tags:

<big>increases font by one size</big>
decreases font by one size

If you need to go even larger or smaller with your font, you can use these more specific tags:

increases font size by the # in the quotes
decreases font size by the # in the quotes

You can also be even more specific with your font size by specifying a number 1-7 as the font size with 1 being the smallest size and 7 being the largest:

smallest font 8 pt
largest font 36 pt

Another option with font size is using header tags 1-6, which also puts in spacing around the text:

<h1>largest header</h1>

<h6>smallest header</h6>

Font Color
In addition to changing the size of your font, you can also adjust the color.

blue
red

If you want to use a difference shade of red or blue, you can input a six digit hexadecimal number instead of the world "red" or "blue." All colors are made up of red, blue, and green and each color has it's own "code." The first two numbers (or sometimes letters) of the code represent red, then the next two represent green, and the last two represent blue. You can download Color Cop for PC or Digital Color Meter for Mac and use these products to hover over any color on your screen and it will give you the code you need. For example if you were to use the code for the blue you see above, it would look like this:

same blue
and here is an example of another shade of blue you can choose using the code

Font Typeface
Finally, you can change the typeface of your font. You can use Microsoft Word if you need ideas.

arial font
comic sans ms font
lucida handwriting

Now you'll need to put it all together. For anything with the word "font" you can simply put all the information in one tag. If you want to use the header tags or add bold, italics, or underline you can add that in their own tag.

you can put it all together

you can bold all of it

or you can bold part of it

Spacing
Now that you're able to adjust your font, you'll want to create paragraphs, line breaks, and in some cases you may need to manually add spaces:

using the paragraph tags puts your text in it's own paragraph...

...and on the next line

Using line breaks is like... 
...pressing enter to get to the next line and unlike everything else on this page it doesn't need a closing tag (this is a closing tag ). You can just input it again... 
...to go to the next line again.

You won't need to use code for spaces between text (like from the spacebar) unless you want to add additional spaces because HTML will only recognize one even if you put in more than one with your spacebar. To give you space between text you can use the code:  

Links
One thing you'll probably want to add to your website are links to other pages on your website or even other websites. Links are easy to add using this code:

<a href="http://www.dynadot.com">this links to Dynadot's homepage</a>

You may notice that if you click on the link above it opens in either a separate tab or window in your browser depending on your browser settings. This is an easy thing to add and is recommended if you are linking away from your website or don't want to lose people on a certain page (like a blog) because it keeps that page open for your customers to go back to without having to click the back button in their browser. All you need to do is add target="_blank" after your link:

<a href="http://www.dynadot.com" target="_blank">this links to Dynadot's homepage</a>

Images
Finally, you may want to add images to your site. To add an image with HTML you will need to host it somewhere. If you don't have a place to host the image yourself you can use a service like TinyPic.com that lets you upload your images for free and generates the HTML tag for you. If you don't want to create an account you can just save the HTML it generates (just don't save it in Microsoft Word as Word sometimes adds things that make the code no longer work). Keep in mind some images are very large and you may want to optimize them so they take up less space. There are some free image optimizers you can use to reduce the file size of your images such as ImageOptimizer.net. Here is an example of a basic image tag:
<img src="https://i45.tinypic.com/9bkglk.jpg"> which looks like this: Dynadot logo

You can also add borders to your image, change the size, and add spacing around it:

<img src="https://i45.tinypic.com/9bkglk.jpg" border="2" width="100" height="30" vspace="10" hspace="20" align="left">

As you can see the image has a border, is wider and shorter, and has been spaced around the top and bottom and right and left. It is also aligned left, so the text is now appearing beside the image.

You can also add a link to your image. You just need to put the link tags around the image tag like so:

<a href="http://www.dynadot.com" target="_blank"><img src="https://i45.tinypic.com/9bkglk.jpg" border="0"></a>
Now you can click on this image and it takes you to our homepage:

This will sometimes add a border around the image in the blue color you see on text links. To remove it just add border="0" to your image tag. You may also notice that the HTML that is generated by TinyPic.com has alt="Image and video hosting by TinyPic" within the image tag. You can use this to put text with your image in case it doesn't show properly on someones browser. Adding alternate text can also help with Search Engine Optimization (SEO).

Now that you are hopefully feeling better about HTML, you can put your skills to the test on your website. But before you hit save with potentially imperfect HTML we suggest testing your HTML with a free service like onlinehtmleditor.net. It even has some easy HTML buttons at the top to help you. Now you just need to get your domain if you don't have one already and get started with your website today!

*Please note that the font tag is deprecated and may not show correctly in all browsers. It is best to define font style in CSS, which we will cover in a later blog post.

Post by Robyn Norgan

Comments