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

Combatting Software Piracy through the use of FLOSS

by Eyre Austero 21. December 2009 06:38

     According to the IDC Global Software Piracy Study conducted during the years 2004 and 2005, the software piracy rate of the Philippines remained at 71%. Losses due to this was also found to  increase from 69 million USD to 76 million USD. 

     This only goes to show the obvious: that, indeed, software piracy is rampant in our country.  And the sad thing is, it is also hurting the economy. As concerned citizens who would like to abide with our existing Intellectual Porperty laws (RA 8293 (Intellectual Property Code) and RA 9239 (Optical Media Act)) , what can we do to help? For me, one solution is through the use of free/libre/open source softwares (FLOSS) as alternatives  to commercial softwares that are sometimes difficult to afford.

    My first encounter with FLOSS was during my university days. This was in my one-semester programming class where we created and compiled programs on PCs powered by a Linux OS. My first impression was that the GUI looks nice but at the back of my mind, I did not really think that it can work as well as Windows.  My next encounter is with OpenOffice.org.  Again, this was during my university days when some of the computer facilities (like those in the main library) were starting to have it as the default office software suite.  As with before, I thought that it looks nice (even comparable to Microsoft Office) but was not really convinced that it can work as well as MS Office. 

     I can't fault myself for thinking that way in the past. For one, I did not have much opportunity to explore their functionalities at length. Second, I had this notion that since they're free, something might be wrong with them somewhere.

     Now, things have changed.  Almost all softwares installed in my PC are either open source or freeware. This is because I've used them myself and found them to work fine for my everyday needs. 

     Let me now show you some of the free/libre/open source softwares that I am currently using. I'm inviting you to give them a try to see for yourselves if they're enough for your needs. If ever you don't like them or can't live with their limitations there's always a commercial software out there for you.

Category Software Type
Operating Sytem (Dual-boot with Win7) Ubuntu 9.10 (Karmic Koala)
Open Source
Office Software Suite OpenOffice.org Open Source
Photo Editing GIMP 2 Open Source
Media Player VLC Media Player Open Source
FTP Client FileZilla Open Source
Encryption TrueCrypt Open Source
Graphics Viewer InfranView Freeware

Tags: , , , , ,

Computer Software

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

My Beginner Photographer Starter Kit

by Eyre Austero 10. December 2009 06:47

     Inspired by the creative controls for taking photos available in my Canon PowerShot G9, an advanced point and shoot camera, I am now finally completely decided in moving a notch higher.  I am now going into the DSLR plunge and the biggest question now is: What camera  should I get and what accessories at a budget of only around Php 50k (~1000 USD)?

     If only the Canon 40D, a semi-pro (prosumer) camera, were still available in the Philippine market, I would have gone for it considering the steep drop in prices (for even as low as PHP 45k with the kit lens and a local Canon warranty) before it got phased out. As for its successor, the Canon 50D, the camera body alone already exceeds PHP 50K so I'm  removing it out of the picture. With the prosumer model out of my budget's reach, this now leaves me with the next best thing (or should we say cheaper alternative): the latest models in the mid-range segment namely the Canon 500D and the Nikon D5000.

Photos of the D5000 and the 500D

     In terms of performance and features, these two models are in a tight neck-to-neck battle. In the 500D's favor, it sports a 15.1 MP sensor as opposed to the D5000's 12.9 MP; a 920,000 dots LCD monitor resolution as opposed to Nikon's 230,000 dots; a 1080p movie mode as opposed to Nikon's 720p; a maximum sensitivity of 12800 ISO compared to the D5000's 6400 ISO; a greater tonal depth (14 bits vs 12bit); a slightly larger viewfinder; a live histogram in live view; an autofocus motor built into the body; and an optional battery grip.  In D5000's favor on the other hand is its slightly more sophisticated AF system (11-point vs. 9-point); its quicker continuous shooting (4 fps vs 3.4 fps); its on demand grid lines in the optical viewfinder; its fully articulated screen; its lower noise level at higher sensitivities; its time-lapse movie mode; interval shooting; and a more user-friendly interface for beginners.  For a more detailed comparison between these two models, please refer to this article. Over-all, these cameras are very decent performers at their price points.

     For my first DSLR camera then, it would be either of the two. To complete my "starter kit", i'll be needing the kit lens as my temporary walkaround lens (if budget were not an issue, I would go for the Tamron 17-50mm f/2.8 XR Di II Lens); a cheap prime lens; and a tripod. Other accessories such as filters, battery grips, external flashes, etc. will have to follow after I fully learned the basics of photography.

     For a preview of how much my  planned "starter kit" (camera+kit lens+accessories) will cost, summarized below are the components plus the corresponding prices (as of Dec 10, 2009).

Item Canon Nikon Notes
Canon 500D kit (EF-S 18-55mm IS Lens) 42,500   3 yrs. Canon Warranty (parts and service)
Nikon D5000 kit (Nikkor DX 18-55mm VR)   45,800 2 yrs. Columbia Warranty (parts and service)
Canon EF 50mm f/1.8 II 4,000   1 yr. Canon Warranty
Nikkor 50mm 1.8   8000 1 yr. Warranty
Velbon Sherpa 435 5,100 5,100  
Total 51,600  58,900  

     Given the PHP 7k difference between "my" Nikon and Canon "starter kits", I'll go for the Canon 500D,hopefully, within January of next year. 

    

Tags: , , ,

Photography

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

Upscaling DVD to Near HD Resolution

by Eyre Austero 27. November 2009 07:17

TotalMedia Theatre 3

      A trip to your nearest appliance shop will say it all. What you'll be seeing are HDTVs on one side; HD ready camcorders on the other; and more HD compliant gadgets scattered all throughout. It can no longer be denied.  Indeed, HD nowadays is the next thing. But reality check would also show you how expensive it is, well as far as average 'Juans' like me are concerned. Even if we work on the assumption that we were lucky to have saved enough to complete the hardware requirements to enjoy Full HD (1080p), we are still faced with the problem of whether we can afford a lifestyle of shelling out at least around Php 1.3k on a regular basis just to be able to  purchase at least one BD title. Luckily however, there is a way to experience HD or near HD resolution using the cheaper DVD format. The technology is called DVD upscaling/upconverting.

     Just what is this upscaling thing all about?  Simply put, DVD upscaling is a complex process of  upconverting the standard DVD resolution of 480i/p to at least 720p or to a higher one that one's display can support (such as 1080p) . Unlike a mere resizing of image from a lower to a higher resolution, upscaling involves the creation of interpolated data so as to make the resulting image appear to have a notably higher quality.

     If you're like me who is using a PC for movie viewing, a promising solution caught my eyes after spending a bit of my time googling. I'm now going to show  my experience with the trial version of Arcsoft's TotalMedia Theatre 3 with SimHD plugin. SimHD is Arcsoft's upscaling technology that promises to bring standard definition multimedia files or DVDs to high definition ones in real time using its advanced post processing technology. Efficient balance between GPU and CPU usage is achieved through utilizing the NVIDIA CUDA and ATI Stream computing technologies " to solve complex calculations in a fraction of the time required on a CPU".

     There are two options to choose from in using SimHD in TotalMedia Theatre 3: CPU-processing or GPU-processing.  For my purposes, I used the latter option.  After all, this is what my newly purchased Radeon HD4770 is for.

SimHD Options GPU-processing SimHD Options CPU-processing

     Using the splitting video mode wherein the screen is split into two with the left side rendered with SimHD off and the right with SimHD on, the images below will speak for themselves. Clearly, the images on the right screen appear to be shaper and to have more details compared with those on the left.

TotalMedia Theatre 3 Split Mode

TotalMedia Theatre 3 Split Mode

     Although I'm not yet availing this technology for now, it's re-assuring to know that that technology is there and that it keeps on evolving for the better.  

     PS: The video  'captures' presented in this article were taken from The Lord of the Rings: The Two Towers.      

Tags: , ,

Computer Software

Share |
0

Preparing my PC for Casual Gaming and Smooth BD Playback

by Eyre Austero 25. November 2009 08:13

     I just got for myself the Sapphire Radeon HD4770. This is to replace my onboard Intel GMA X3000 video adapter which I have been using for more than two years.  In fairness to the X3000, it served me well throughout those years. It's just that, it can no longer keep up with my current needs hence the necessity of letting it go.

     For my case, there are mainly two things that I wish my PC to be which it currently is not: one is readiness for casual gaming and the other is readiness for BD (blu-ray disk) playback. Now, I'm going to share with you the things that I learned about the HD4770 from my online research and how it convinced me that it is indeed the right card for my current needs.

Sapphire HD4770 Front Cover
Sapphire HD4770 Back Cover

     For my casual gaming needs, assessing the HD4770 was an easy one since a number of tech-related review sites gave it the thumbs up sign.  Here's what at least two of them has to say regarding this card. Ian Barling of Guru3d.com found the HD4770 to perform pretty much the same as the HD4850. He in fact also found it to be able to compete with the GeForce GTS 250 in various scenarios. Steven Walton of Techspot.com on the other hand found it to offer 10% more performance than its direct competitor, the 9800GT. With these, I can't help but feel certain that I can't go wrong with this card as far as PC gaming is concerned.

      With regards to its potential of making my PC ready for BD playback, this card features a set of video and display technology called the ATI Avivo HD. A subset of this is the Universal Video Decoder 2 (UVD 2) which, as I understand it, is the technology needed for hardware acceleration using ATI cards. With hardware accleration, decoding of the H.264 ,VC-1 and MPEG2 codecs is offloaded from the CPU leading to lower CPU utilization.  Assuming that I understand the whole concept right, this to me means the ability to use my current  1.86 GHz Intel Core 2 Duo processor for smooth BD playback without the need to upgrade to a more powerful processor.

    I am pleased with the initial results of my exploration with this card. On the aspect of gaming, the previous games that run slow are now decently playable. I cannot however test its BD playback performance since I do not yet have the required hardware such as an internal BD drive. For the meantime, I'll give DVD upscaling a try  using a trial version of the TotalMedia Theatre 3 with SimHD. The SimHD plugin utilizes the ATI stream technology to upscale DVD content to near HD resolution. I'll tell you more about this in my next post.   

      PS: For those who are technically inclined, I've attached below the specs of the Sapphire Radeon HD4770 for reference purposes.

Sapphire HD4770 Technical Specifications

Tags: , , ,

Computer Hardware

Share |

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