#8: Add/Update Content

You can find great tutorials on the HTML Kit website. You should definitely check those out but I'll walk you through the common things such as editing the content and adding images. You've already got the hard part done with putting together the starter pages. Now you just need to fill the pages up! Don't worry about getting all your content perfect on the first try. You should expect to be updating and tweaking your content often to keep it fresh and relevant.

Adding Text

The main thing you want to remember as you add text to your site is to use the right tag for the right job. For most of your text, use the paragraph tag. For headers and subheaders, use the heading tags. For quotes, use the blockquote tag. For extra emphasis, use either the strong tag or the emphasis tag. For links, use the anchor tag. For a single space, use the BR tag. Below, I've listed out these tags and how to use them.

Paragraph Tag (p tag)

<p>Paragraph goes here.</p>

All of your paragraphs should be placed within these tags. An extra space is added after the closing tag when viewed.

Heading & Subheading Tags (h1,h2,h3,h4,h5,h6 tags)

<h1>Main Heading goes here.</h1>
<h2>Heading 2 goes here.</h2>
<h3>Heading 3 goes here.</h3>
<h4>Heading 4 goes here.</h4>
<h5>Heading 5 goes here.</h5>
<h6>Heading 6 goes here.</h6>

You should use headings to separate your content because it makes it more readable and allows visitors to quickly scan the page and get to the information that they are looking for.

Blockquote Tag

<blockquote>Quote or other notable text goes here.</blockquote>

Strong Tag (bold tag, replaces the b tag)

<strong>Bolded text goes here.</strong>

You can use this tag where ever you want bolded text. It replaces the b tag.

Emphasis Tag (italics tag, replaces the i tag)

<em>Emphasized text goes here.</em>

You can use this tag where ever you want italicized text. It replaces the i tag.

Anchor Tag (a tag, or link tag)

<a href="http://www.2daysSolutions.com" target="_blank" >Link text goes here.</a>

This is the tag you'll use for links. Replace the 2Days link with your own URL link. You can either link to another page or file on your own site or a different site. If the page or file is in the same directory as the page you're working on, you can simply use the file name. For the target parameter, there are two main options here: "_blank" will open the link in new browser window, "_self" (or leaving out this parameter" will open the link in the same window.

BR Tag (return tag)

<br />

"BR" stands for "breaking return" - this will put in a return. Using multiple br tags will create vertical spacing. You should use <br /> instead of <br >.

Adding Images

Image Tag (img tag)

The image tag allows you to add an image to your web page. The sample code below uses the full URL for the image. By including the entire URL, you can add images hosted on other websites onto your own website. The border parameter will put a border around the image, by pixels (I went with 0 pixels so no border is shown).

<img src="http://www.2daysSolutions.com/images/2days_logo.jpg" alt="2Days Solutions Logo" border="0" />

The code below is very similar but uses a relative URL to the image. Since the image is on the same site but in the "images" directory, I just needed to include "images/" for the source location.

<img src="images/2days_logo.jpg" alt="2Days Solutions Logo" border="0" />

Image Links

Creating an image that links to either a web page or perhaps a larger image is easy. It's just a combination of the image and anchor tag like the sample below.

<a href="http://www.2daysSolutions.com" target="_blank" ><img src="images/2days_logo.jpg" alt="2Days Solutions Logo" border="0" /></a>