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 < 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> </td>
<td> </td>
</tr>
</table>
|
|
| <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> |
 This 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> |
- good
- better
- 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>
|
|
| <li> |
list item |
|
refer to above codes |
refer to above |