HTML Basics

HTML works in a very simple, very logical, format. It reads like you do, from top to bottom, and left to right. HTML is written with normal English text. What you use to set certain sections apart as headings, subtitles, bold text, underlined text, etc is a series of what we call “tags”.

Think of tags as making your structure.

Tag Format

All tag formats are the same. They begin with a less-than sign: < and end with a greater-than sign. What goes inside the < and > is the tag.

for example, to make a font appear bolder, I can use the tag “strong”.

HTML:

I like my words <strong>bold</strong>

APPEARS AS:

I like my words bold

other tags often used:

<p> (paragraph)
<br> (line break)/
<em> (emphasis / italics)
<strike> (strikethrough)

HYPERLINKS:

<a href=”URL”>text</a<

The core “skeleton” of an HTML page:

<html>
<head>
<title>Your Page Title</title>
</head>
<body>

This area will contain everything that will be visible through a web browser, such as text and graphics. All of the information will be HTML coded.
</body>

</html>

IMAGE TAGS:

Basic Image tag – <img src=”url”> (where url = the url of the image you want to show)
Image with sizing <img src=”url” width=”200″ height=”150″>
Align image left – <img src=”name” align=left> (substitute ‘left’ with ‘right’ to align it right)
Alt Tags – <img src=”url” alt=”short description of image”> (an alt tag tells the reader what they are missing if the image doesn’t load in their browser.
Image as a link – <a href=”link url”><img src=”url”></a> (where ‘link url’ is the url of the page you want the image to link to and ‘url’ is the image location).
Image with border – <img border=”1″ src=”url”> (the larger the number in the border “” the thicker the border)
Space Around Image <img src=”url” hspace=10 vspace=10> (hspace is the horizontal space and vspace is the verticle space. The numbers are the amount of pixels sounding the image)

Unordered Lists (usually bullet point type lists)

<ul>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ul>

Ordered Lists (usually numbered lists)

<ol>
<li>the first list item</li>
<li>the second list item</li>
<li>the third list item</li>
</ol>

for more see HTML for journalists

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s