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 |
0

A Hassle-free Way to Install IIS, SQL Server, .NET Framework, etc.

by Eyre Austero 16. December 2009 09:33

     If you are currently into web development (or are considering of exploring it) using Microsoft's web platform, here's a nice application that will install IIS, the .NET framework, SQL Server, Visual Web Developer Express, and web applications such as BlogEngine.NET and Wordpress the hassle-free way.  It is called the Microsoft Web Platform Installer (Web PI). Quoting from Microsoft's website ,"Web PI handles the heavy-lifting by installing and configuring each component of the platform from top to bottom."

     I personally used it to install BlogEngine.NET after doing a clean install of Windows 7. To my delight, it worked out of the box without me having to configure anything. 

     Attached below are some screenshots of the Web PI.

Web PI Web Platform Tab Web PI Web Applications Tab

Please click images to view larger version.

     For more information about this application, visit  Microsoft's website.

Tags:

Computer Software | Web Development

Share |
2

Unexpected: My Wap Site is Listed in Que's Official Internet Yellow Pages 2006 Edition

by Eyre Austero 30. November 2009 09:09

     This is quite unexpected.  After doing a google search of my wap site (Wap Hangout)  which I created way back in college, I was surpised to know that it is listed in Que's Official Internet Yellow Pages 2006 Edition.  It can be found within the Foreword under the Wireless Web Primer section and is described  among others such as Google Wireless and Yahoo! Mobile as "some of the most useful wireless web portals".

     When I created this wap site way back then, what I had in mind is to create a  comprehensive directory of wap sites available at that time.  Convinced that I was successful in doing so and of its potential of being useful to wap surfers, I submitted it to a number of search engines to increase its hit points. Least did I expect  that it will catch the eyes of the author of the mentioned yellow pages book. 

      If there is something that I learned from this, it's that hardwork indeed pays off.  I hope that the same will happen to my future works.

     For a preview of how my wap site looks like when viewed using a mobile phone , please refer to the attached screenshots. Mobile phone emulator used is that of dotMobi's.

Wap Hangout Homepage Wap Hangout Menu1 Wap Hangout Menu2
Wap Hangout Bantay-Bayan Wap Hangout Contact Information

     In case your interested in creating your own wap site, here is how it looks like using Tagtag.com's wap site editor.    

Wap Hangout as viewed using the Tagtag.com Wap Editor

Please click image to view its larger version.

Tags:

Web Development

Share |
0

My Unpublished Website (coded using XHTML and CSS)

by Eyre Austero 30. November 2009 05:30

      This is probably what we call serendipity.  Middle of last year, a colleague of mine asked me if I can help improve an application (written using Visual Basic) that is being used by the manufacturing line to gather data for Statistical Process Control. Knowing that those who developed it are not professional programmers (i.e. they just learned how to do it on their own), I became interested; gave a noncommital response; and searched the internet  as to whether the programming concepts in Turbo C, the lone one-semester programming subject that I had way back in college, would apply to Visual Basic. In the process of searching the web, I  stumbled across the MSDN site and instead  ended up liking another thing.  Yes, I was looking for Visual Basic but ended up with Visual Web Developer 2008 Express.  This resulted to a series of chain reactions which eventually led me to build from scratch my very own static website.

My Personal Website

Please click image to view its larger version.

      Having no background in web development, building this site did not come easy.  It required a good deal of dedication  and willingness to learn.  For my case, not only did I complete Tier 1 of MSDN's Beginner Developer's Learning Center Web Development Track  but also did the extra mile of reading entire books on XHTML and CSS.  This website, albeit unpublished, is a self-imposed project meant to gauge how much I understood Tier 1. Now that I've completed it, I guess I now earned the right to claim that I've graduated from Tier 1 and is now ready to move to Tier 2.

     In case you're wondering how this site looks like in VWD 2008 Express, attached below is a screenshot.  Although one can build this site using notepad alone, VWD however offers a lot of tools that can make one's life easier especially in managing CSS.

My personal website when viewed using Visual Web Developer 2008 Express

Please click image to view its larger version.

     For those who are interested in exploring web development using VWD 2008 Express, please visit MSDN's Beginner Developer's Learning Center and share with me your experiences.

     P.S.  This website was completed last year (2008), I didn't however have it published because my goal after all is to create a .aspx website.

 

Tags:

Web Development

Share |

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