Login or Sign Up
X

Tripod.com logoTripod.com

close

Quick Tips

HTML Basics

HTML is a markup language that is the basic building blocks of websites. It is written in the form of HTML elements which consist of tags, like <html>.

If you're planning on building your own website from scratch, or even if you plan on using Zeeblio or another type of website building tool, a basic knowledge of HTML will help you create the website you want.

Read through that different topics that we cover to help further your understanding of HTML. If you finish and would like to learn more, check out our basic CSS tutorials as well as our HTML templates to download some pre-made HTML & CSS files with developer comments.

Setting up a blank HTML document

If you are starting with a blank html file, at the top of your document, type:

<!DOCTYPE HTML> (Declares the file as a standard HTML5 document)
<html>
<body>
your content goes here
</body>
</html> at the bottom of the document.

You'll be placing all your text and other HTML tags between these opening and closing tags.

Aligning text/images within a tag

Code:
<div style="text-align:left">
This text will be left-aligned.
</div>

Example:

This text is left-aligned. This is the default for text-alignment.

Code:
<div style="text-align:center">
This text will be centered.
</div>

Example:

This text is centered.

Code:
<div style="text-align:right">
This text will be right-aligned.
</div>

Example:

This text is right aligned.

By the way, the code to create the border and width of the div looks like this:
style="border:1px solid;"

Basic Font Styling

Bold Text:
Your Text here = <strong> Your Text here </strong>

Italic Text:
Your Text here = <em> Your Text here </em>

Bold & Italic Text:
Your Text here = <strong><em> Your Text here </em></strong>

Changing Font Size:
Your Text here = <p style="font-size:18px"> Your Text here </p>

Changing Font Color:
Your Text here = <p style="color:#f00"> Your Text here </p>

Changing Fonts:
Verdana = <p style="font-family:Verdana, Geneva, sans-serif"> Verdana </p>
Georgia = <p style="font-family:Georgia, 'Times New Roman', Times, serif"> Verdana </p>
Courier = <p style="font-family:'Courier New', Courier, monospace"> Verdana </p>
Arial / Helvetica = <p style="font-family:Arial, Helvetica, sans-serif"> Arial/Helvetica </p>
Lucida = <p style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif"> Lucida </p>

Images

Adding an image to your site:

alternative text - this is an image
<img src="path_to_your_images/exampleImage.jpg" alt="alternative text - this is an image" />


Images can be floated to the left or right within a layout or block of text by using floats.

this is an image As you can see, the image is floating to the left side of the text.

<img src="path_to_your_images/exampleImage.jpg" alt="this is an image" style="float:left" />

this is an image As you can see, the image is floating to the right side of the text.

<img src="path_to_your_images/exampleImage.jpg" alt="this is an image" style="float:right" />

Heading Tags

Here is the code to add different Heading styles to your page:
<h1>Heading 1</h1>
<h2>Heading 2</h1>
<h3>Heading 3</h1>

Heading 1

Heading 2

Heading 3

Note: Due to differences in styling from website to website, your Heading tags may look differently than what is displayed here.

Paragraphs & Lists

Code to make a new paragraph:
<p> Your text goes here </p>

Code to make an unordered list:
<ul>
<li>Your text goes here, inside a list item tag. </li>
</ul>

  • This text is inside of a <li> tag, inside of a <ul> tag.
  • Here is a second <li> tag, inside of the same <ul> tag.

Code to make an ordered list:
<ol>
<li>Your text goes here, inside a list item tag. </li>
</ol>

  1. This text is inside of a <li> tag, inside of a <ol> tag.
  2. Here is a second <li> tag, inside of the same <ol> tag.

Linking

Direct linking to an external webpage:
<a href="http://www.tripod.com"> Visit tripod.com </a>
Example: Visit tripod.com
(If you clicked on the link, you'll notice that it opened a new window. You can do that to your links too, adding a target to your link.

Here's what the code looks like:
<a href="http://www.tripod.com" target="_blank"> Visit tripod.com </a>

Linking to a local file:
<a href="about.html"> About me </a>
The above code would link to a file called 'about.html,' located in the same directory as the .html file with the link in it.

<a href="images/myphoto.jpg"> See my photo! </a>
The above code would link to a file called 'myphoto.jpg,' located in the images directory on your website.

Divs & other layout tags

Here are examples of HTML tags used in creating a website. /p>

<div> Insert your content here. Div tags are the main building blocks in creating a website's layout. </div>
<br /> - Use this tag to create returns (line breaks) in your paragraphs.
<hr /> - Use this tag to create a horizontal rule on your page.
<table> <tr> <td> </td> </tr> </table> - Use the table tags to create a space for tabular data on your website.

Table Example:
<table>
<tr>
<td> Data 1 </td>
<td> Data 2 </td>
</tr>
<tr>
<td> Data 3 </td>
<td> Data 4 </td>
</tr>
</table>


Data 1 Data 2
Data 3 Data 4

You can use CSS to make the table look much nicer.

Data 1 Data 2
Data 3 Data 4

Here's the CSS code used to edit the table:
<style>
table{border:1px solid; border-right:none; border-bottom:0; background:#CCC; border-spacing:0; width:350px}
table.td{padding:5px; border-right:1px solid; border-bottom:1px solid; text-align:center}
</style>