HTML for absolute beginners

On September 28, 2011, in Search Engines, Web design, by Lola B

 

As you progress in your online empire building you will need to become more acquainted with HTML or hypertext mark-up language. This is the language that is used to deliver the content of a web page. Your best is to undertake one of the courses for free run by w3 schools (what I did) which are brilliant for technophobes.

Originally HTML was used to dictate how a web page should look; now CSS code does that.

HTML works by providing predefined tag pairs which you use to ‘mark up’ your content. These tags are always written with angled brackets and in lower case. The brackets will also need to have an opening tag followed by a closing tag, eg

 

<p> This is my first paragraph. </p>

 

As you will have guessed (well the clever ones of you) <p> is the paragraph tag which tells the browser that the text that follows is a new paragraph. When the browser sees the </p> tag it knows that the paragraph has finished.

The heading tags are extremely important too, and are contained in <h1>, <h2> and <h3> tags etc. In general there should only be one <h1> tag on each page, fewer <h2> tags than <h3> tags etc.  The <h1> tag will be your main heading of the page with the closing tag looking like this </h1>

Similarly you would have <h2> and </h2>; also <h3> and </h3>

Your paragraph tags would not have numbers but would simply follow each other in the line eg

<p>   </P> for paragraph 1

<p> <p/> for paragraph 2 etc

 

To view the HTML you can go to the View menu and then choose source code; if you are using Internet Explorer. If you are using Firefox use Source, in Safari, View Source.

 

Source code

The first two lines are there to give the browser information about the website’s format. Then the entire page is contained within the <html? </html> tag pair which itself has two sections: <head> and <body>. The <head> contains the all important <title> tag which is what shows with the text that appears in the browser’s title bar and <Meta> tags.

The most important part to concentrate on in the source code of the site is that which is contained within the <body> </body> tags.

 

Other useful HTML tags

<strong> indicates the text is important and will bold the text eg

<p> Read this <strong> internet marketing tip</strong></p>

<div> This tag divides the content into blocks that can be laid out by CSS code:

Eg  <div id= “main content”><!—the content–<</div>

<a> this is a very important tag you will use to insert hyperlinks; the href attribute contains the link itself, eg

<a href= “http://www.ihubbusiness.co.uk>fabsite</>

<img>  another important one used to insert images. The src attribute specifies the picture file name. It is a single tag and not a pair as it has no content. Eg

<img src= http://www.ihubbusiness.co.uk/logo.jpg/>

 

<blockquote> this is used to indicate quoted text, for example a customer testimonial. Eg

<blockquote>I am so glad I found this site! </blockquote>

<span> this is used to style text contained within a paragraph eg Drop capitals

<p><span> D</span>rop capitals</p>

 

CSS basics

CSS will tell the browser how to render each of the tags on your web page ie how to deal with the style-wise. Your CSS is normally contained in a separate text file that is linked to your HTML this way:

<link href= “styles.css” rel= “stylesheet”

Type = “text/css”>

 

You would replace the “styles.css” bit with the name of your own CSS file. The file contains a range of rules which will be applied to styling parts of your HTML page, for example

 

P{

Font-family:Helvetica, arial, sans-serif;

Font-size: 1em;

colour: dark green

}

 

The rules will apply to all the <p> tags. Note the curly brackets which contain all the styles you are applying to a given style ‘class’. When the browser reads the CSS in conjunction with the HTML it changes the look of the document. Ems ensure proportional zoom in all browsers. Ems refer to the width of the letter “m” in the font, and it is relative so that if the user increases the zoom factor in their browser all rules that use ems will resize in proportion.

You can also target specific parts of your page, for example by using class selectors, eg

 

P:standout {

Colour:dark blue;

}

This will apply to paragraphs in a class named ‘standout’ so you would mark up the paragraphs you want to style in this way like this:

<p class=”standout”> The paragraph content here. </p>

Become an ihubbusiness subscriber!

Member benefits include: It's free! Automatic entry into our Business Directory to legitimate subscribers, our "Getting Started With Internet Marketing" e-book pack delivered to you by email

PLUS An email a day for seven days with tips to help you : Increase traffic to your site, Increase subscribers and raise the profile of your business: Get the results you deserve now!

Email Marketing by iContact
pixel HTML for absolute beginners
 

Comments are closed.



ABOUT

Ihubbusiness is an information hub for small businesses who wish to learn about internet marketing. The site was founded by Lola Bailey in 2010. Lola is a member of the Institute of Digital Marketing and has over 20 years sales and marketing experience. She is also a full-time copywriter at www.write-upcommunications.co.uk, a copywriter consultancy which she founded. Email: editor@ihubbusiness.co.uk

Revolver Maps – free 3D Visitor maps