HTML Code Sheet 2

HTML Code Sheet 2 (You can type the code or cut paste and edit it)

Effect

Start tag

End tag

Example

What it would look like

Paragraph of text

<p>

</p>

<p>Start to my story.</p>

Start to my story.

Heading

<h1>

</h1>

<h1>The Amazing Adventure</h1>

The Amazing Adventure

Bold

<b>

</b>

<p> That was<b>Amazing</b></p>

That was Amazing

Italics

<i>

</i>

<p><i>Italy</i>is a great country</p>

Italy is a great country

Big

<big>

</big>

<p><big>HELP</big></p>

HELP

Bullet Point List

(unordered list)

<ul>

<li>

</ul>

</li>

<ul>

<li>Dog</li>

<li>Cat</li>

</ul>

· Dog

· Cat

Numbered List

(Ordered list)

<ol>

<li>

</ol>

</li>

<ol>

<li>Fry the fish</li>

<li>Eat the fish</li>

</ol>

1. Fry the fish

2. Eat the fish

Line Gap

<br />

No end tag

<p>My Text</p>

<br />

<p>My Text</p>

My Text

My Text

Horizontal Line

<hr />

No end tag

<p>My Text</p>

<hr />

<p>My Text</p>

My Text


My Text

Setting up an HTML document

<html>

<body>

</body>

</html>

<html>

<body>

<p>Great work here</p>

</body>

</html>

Great work here

Inserting a web link

<a href=”url“>Link text</a>

<a href=”http://starwars.com“>Star Wars</a>

Star Wars

Copy the web link. Paste it into your web page. Copy the address of the website you want to link to. Highlight the read url. Right click and paste to insert it into the same place as the red url text. Delete the green link text and write your own link words.

Inserting an image

<img src=”url” alt=”some_text“/>

<img src=”boat.jpg” alt=”Boat” />

(boat.jpg needs to be in the same folder)

Find a picture that is less than 200kb. Rename it to have no spaces or capital letters. Place it in the same folder as your index file. Highlight the purple url and replace it with the full name of your picture. Change the orange some text for a picture description.