1

Basic HTML for Bloggers

by Eyre Austero 10. January 2010 18:04

     For the bloggers out there who have no or little background in HTML (Hypertext Markup Language) but  would like to have a temporary break from using their blogging software's WYSIWYG editors in writing posts to instead give the 'raw HTML' option a try, I've prepared a collection of some useful HTML tags and attributes to help one get started. Hopefully, this will stir the interest of some, enough to make them join me in further exploring the world of web development. 

HTML Overview 

     As you might have already known by now,  HTML stands for Hypertext Markup Language-the language for coding web pages. These HTML instructions (markup) are the ones that direct web browsers (such as Firefox) how  the contents of our web pages are to be displayed on the screen. To illustrate, let us consider the sample code shown below:

Code View Browser View

< p style="color:Blue;">Welcome to my site.</p>

Welcome to my site.

     Looking at the Code View vs. the Browser View, one can easily see what set of instructions the code directed the browser to display.  The <p>...</p> element tells the browser that the text enclosed within the tag should be displayed as a paragraph. It also uses the 'style' attribute to, in addition, tell the browser that the font should be in blue.

     From the above example, we can also say then that elements and attributes are the basic components of an HTML code. Elements describe every piece of text in our pages.  They are made up of tags (<tag>...</tag>) and the content within those tags. Attributes, on the other hand, allow variety in how an element describes content or works.

     There is still a third component called entities.  These are special characters that you  can display on your web page, an example of which  is the less than (<) sign .  For this to be displayed in the above example, the &lt; entity was used.

      Now armed with a basic understanding of HTML, let us now explore it a bit further through working on the  sample codes listed below the next time we write our posts.

Working with Paragraphs and Texts 

Element Name Attributes Sample Code Browser View
 <p>  paragraph

style (specifies an inline style to an element)

syntax: style="property: value; property: value;"

some examples (properties and values):

font-family: Verdana,sans-serif (etc.);
color: Green (or other colors); 
text-align: right (or left, center, justify);
font-size: x-large (or medium, small, etc.)

 

 

<p style="font-family: Fantasy; font-size: x-large; color: Green;text-align:center;">Welcome to my site.</p>

 

 

 

Welcome to my site.

 <br /> line break    

<p>This is the first sentence of this paragraph.<br />This is the next sentence of this paragraph.</p>

This is the first sentence of this paragraph.
This is the next sentence of this paragraph.

 <b>  bold   <b>bold</b> bold
 <i>  italic   <i>italic</i> italic
 <u>  underline   < u>underline</u> underline

Working with Tables

Element Name Attributes Sample Code Browser View
 <table>  table align (deprecated): determines the alignment of the table relative to the page.
possible values: center, left, right (e.g. align="center")

border:allows you to specify the size of the border for the table, specified as an absolute value (e.g. border="1")

cellspacing:determines the amound of space to put between cells (e.g. cellspacing="1").

cellpadding: determines the amount of space to put between the edge of a cell and its contents (e.g. cellpadding="1")

width: specifies the width of the table (e.g. width="50%" or width="300")

style: specifies an inline style to an element (e.g. style="background: silver; text-align: center;")
<table align="center" border="1">
<tr style="background-color: Silver; text-align: center; color: red;">
<td>Column 1</td>
<td>Column 2</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
Column 1 Column 2
   
 <tr>  table row
style: e.g. style="background: silver; text-align: center;"  refer to above code
 refer to above
 <td>  table data
align (deprecated)

width : specifies the maximum with of a cell

colspan: allows you to create a cell that is more than one column wide by specifying the number of columns it runs across (e.g. colspan="2")

rowspan: allows you to create a cell that is more than one row high by specifying the number of rows it runs across (e.g. rowspan="2")

style: e.g. style="background: silver; text-align: center;"
 refer to above code
 refer to above

Working with Links

Element Name Attributes Sample Code Browser View
 <a>  anchor href: defines the link "address"

target: defines where the linked document will be opened (e.g target="a_blank" directs the browser to open the document in a new window)

name: defines a named anchor inside a HTML document
Example:
<a name="top">HTML Overview</a>
<a href="#top">Back to HTML Overview</a>

Link Snytax:
<a href="url">Link text</a>
<a href="http://www.
w3schools.com"  target="a_blank"
>w3schools</a>
w3schools

Working with Images

Element Name Attributes Sample Code Browser View
 <img>  image src (source): specifies the location for the image that you want to dispaly on your page

alt (alt text) : provides a description of an image; useful when a browser is unable to load the images of your page or if a user is using a text-only browser

style: specifies an inline style to an element
Sample properties and values:

style="float:left (or none or right);"--the float property specifies whether a box (element) should float or not

style="width: 100px; height:100px;"--the width/height property specifies the size of the image

style="margin-right: 10px;"--the margin property sets the distance between the img box and adjacent elements

style="border: blue dashed 3px;"--the border property allows you to assign a border to an image

Syntax:

<img src="url" />
<p><img src=
"http://www.eyreaustero.com
/pics/eryeaustero.com.jpg"
alt="My Photo" style="width: 73px; height: 79px; float: left;" /></p> 

My PhotoThis is my photo.

Working with Lists

Element Name Attributes Sample Code Browser View
 <ol>  ordered list style: specifies and inline style to an element (e.g. style="list-style-type: upper-roman (or lower-roman, decimal, lower-alpha, upper-alpha, none, etc.,);")
<ol style="list-style-type:
upper-roman;
text-align: center;"
>

<li>good</li>
<li>better</li>
<li>best</li>
</ol>
  1. good
  2. better
  3. best
 <ul>  unordered list style--specifies an inline style to an element (e.g. style="list-style-type: circle (or square, disc, none, etc.);") <ul style="list-style-type: 
circle; text-align: center;">

<li>bad</li>
<li>worse</li>
<li>worst</li>
</ul>
  • good
  • better
  • best
 <li>  list item    refer to above codes  refer to above

Tags: ,

Resources for Bloggers | Web Development

Share |

Powered by BlogEngine.NET 1.6.0.0
Original Design by Laptop Geek, Adapted by onesoft