{"id":202,"date":"2012-04-21T21:42:51","date_gmt":"2012-04-21T13:42:51","guid":{"rendered":"https:\/\/www.techcoil.com\/blog\/?p=202"},"modified":"2018-09-03T22:04:53","modified_gmt":"2018-09-03T14:04:53","slug":"code-segments-for-rendering-html-4-0-pages","status":"publish","type":"post","link":"https:\/\/www.techcoil.com\/blog\/code-segments-for-rendering-html-4-0-pages\/","title":{"rendered":"Code segments for rendering html 4.0 pages"},"content":{"rendered":"

Very often, I find myself creating HTMl pages from scratch. Those could have been situations when I want to try out some javascripts or write some php proof of concepts. <\/p>\n

Although there are many frameworks around, I still prefer the pristine way of rendering HTML pages as I can be certain that there will not be conflicting javascripts or php scripts when I need to try something out.<\/p>\n

In this post, I put together pieces of HTML codes that I find myself using often. This will make HTML development more convenient as I do not have to wade through the many search results from google to look for them.<\/p>\n

Skeletal HTML codes to render a webpage<\/h3>\n
\r\n<?xml version="1.0" encoding="UTF-8"?>\r\n<!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD XHTML 1.0 Strict\/\/EN" \r\n    "http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-strict.dtd">\r\n<html xmlns="http:\/\/www.w3.org\/1999\/xhtml" xml:lang="en" lang="en">\r\n<head>\r\n    <title><!-- Insert your title here --><\/title>\r\n<\/head>\r\n<body>\r\n    <!-- Insert your content here -->\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n
Meta information<\/h3>\n
HTML codes for including external stylesheet<\/h4>\n
\r\n<link rel="stylesheet" href="external.css" type="text\/css" media="all"\/>\r\n<\/pre>\n
HTML codes for including internal stylesheet<\/h4>\n
\r\n<style type="text\/css">\r\nbody {\r\n    margin:0;\r\n    padding:0;\r\n}\r\n#mainContent {\r\n    width: 1024px;\r\n}\r\n<\/style>\r\n<\/pre>\n
Note that we use the link<\/code> tag to specify external style sheets but we use the style<\/code> tag to specify internal ones. <\/strong><\/p>\n
HTML codes for including external javascript<\/h4>\n
\r\n<script type="text\/javascript" src="external.js"><\/script>\r\n<\/pre>\n
HTML codes for including internal javascript<\/h4>\n
\r\n<script type="text\/javascript">\r\n    alert('Internal javascript.');\r\n<\/script>\r\n<\/pre>\n
HTML codes for including apple touch icon<\/h4>\n
\r\n<link rel="apple-touch-icon" href="http:\/\/www.techcoil.com\/img\/appletouchicon.png">\r\n<\/pre>\n
HTML codes for specifying view ports of mobile browers<\/h4>\n
\r\n<meta name="viewport" content="width=1024">\r\n<\/pre>\n
This meta tag is used to prevent mobile browsers from setting the wrong dimensions when displaying your webpage. In this example, I specify the width of the viewport to be 1024 pixels so that my webpage do not look like this:
\n<\/p>\n
Without the meta tag, the container that fills the sky color was being shrunk to the default view port size of my mobile browser. However, the overall content width is much larger than that, which reveals the background color of the body container.<\/p>\n
After indicating the view port size, my webpage rendered according to what I had intially wanted:
\n <\/p>\n
HTML body (forms)<\/h3>\n
Forms<\/h4>\n
\r\n<!--\r\nBrowser will take the input from the fields \r\nand do a HTTP post to httpPostHandler.php\r\n-->\r\n<form method="post" action="httpPostHandler.php">\r\n<fieldset>\r\n    <label for="nameTextField">Name:<\/label>\r\n    <input name="nameTextField" type="text"\/>\r\n<\/fieldset>\r\n<!--More form elements...-->\r\n<fieldset>\r\n        <input name="submitButton" type="submit" value="submit"\/>\r\n<\/fieldset>\r\n<\/form>\r\n\r\n<!--\r\nBrowser will take the input from the fields \r\nand do a HTTP get to httpGetHandler.php\r\n-->\r\n<form method="get" action="httpGetHandler.php">\r\n<fieldset>\r\n    <label for="nameTextField">Name:<\/label>\r\n    <input name="nameTextField" type="text"\/>\r\n<\/fieldset>\r\n<!--More form elements...-->\r\n<fieldset>\r\n        <input name="submitButton" type="submit" value="submit"\/>\r\n<\/fieldset>\r\n<\/form>\r\n<\/pre>\n
Drop down \/ selection lists<\/h4>\n
\r\n<!--\r\nSingle selection drop down list\r\nBrowser will send the value in the \r\nvalue attribute to the server script\r\nwhen the form is submitted.\r\n-->\r\n<select name="fruitsList">\r\n    <option value="noSelection">Please select one<\/option>\r\n    <option value="apple">Apple<\/option>\r\n    <option value="guava">Guava<\/option>\r\n    <option value="orange">Orange<\/option>\r\n    <option value="watermelon">Watermelon<\/option>\r\n<\/select>\r\n\r\n<!--\r\nMutiple selection drop down list\r\nBrowser will send the value(s) in the \r\nvalue attribute to the server script\r\nwhen the form is submitted.\r\n-->\r\n<select name="fruitsList[]" multiple="multiple">\r\n    <option value="apple">Apple<\/option>\r\n    <option value="guava">Guava<\/option>\r\n    <option value="orange">Orange<\/option>\r\n    <option value="watermelon">Watermelon<\/option>\r\n<\/select>\r\n<\/pre>\n
Note that the square brackets are included after the name of the multiple selection list so that the PHP script can read the selected values as an array, instead of as a single value.<\/strong><\/p>\n
Textfield<\/h4>\n
\r\n<input name="nameTextField" type="text" size="30" maxlength="50"\/>\r\n<\/pre>\n
Textarea<\/h4>\n
\r\n<textarea name="aboutYourselfTextArea" cols="30" rows="20">Some initial values.<\/textarea>\r\n<\/pre>\n
Checkbox<\/p>\n
\n
\r\n<input type="checkbox" name="lovesToCodeCheckbox" value="yes"\/>I love to code\r\n<\/pre>\n
HTML codes for radio button<\/h4>\n
\r\n<input type="radio" name="gender" value="Male"\/>Male\r\n<input type="radio" name="gender" value="Female"\/>Female\r\n<\/pre>\n
Note that the name is the same for each radio button that you wish to group together. <\/strong><\/p>\n
Hidden fields<\/h4>\n
\r\n<input type="hidden" name="sessionId" value="ABCD1234"\/>\r\n<\/pre>\n
Form submission button<\/h4>\n
\r\n<input name="submitButton" type="submit" value="Name of the button"\/>\r\n<\/pre>\n
Note that the display name<\/strong> of the button is indicated by the value<\/code> attribute and not by<\/strong> the name<\/code> attribute. <\/p>\n
HTML body (data representation)<\/h3>\n
Table<\/h4>\n
\r\n<table>\r\n<tr>\r\n    <th>Fruit<\/th>\r\n    <th>Color<\/th>\r\n<\/tr>\r\n<tr>\r\n    <td>Apple<\/td>\r\n    <td>Red<\/td>\r\n<\/tr>\r\n<tr>\r\n    <td>Kiwi<\/td>\r\n    <td>Green<\/td>\r\n<\/tr>\r\n<tr>\r\n    <td>Orange<\/td>\r\n    <td>Orange<\/td>\r\n<\/tr>\r\n<\/table>\r\n<\/pre>\n
Numbered \/ ordered list<\/h4>\n
\r\n<ol>\r\n    <li>Create skeleton of HTML page.<\/li>\r\n    <li>Fill in visual elements.<\/li>\r\n    <li>Add in CSS style to style the visual elements.<\/li>\r\n<\/ol>\r\n<\/pre>\n
Bullet-ed \/ unordered list<\/h4>\n
\r\n<ul>\r\n    <li>Apple<\/li>\r\n    <li>Orange<\/li>\r\n    <li>Pear<\/li>\r\n<\/ul>\r\n<\/pre>\n
Hyperlink<\/h4>\n
\r\n<a href="http:\/\/www.techcoil.com" title="The home page of techcoil.com" target="_blank">\r\n    My homepage\r\n<\/a>\r\n<\/pre>\n
Paragraphs<\/h4>\n
\r\n<p>\r\nThe HTML codes for paragraphs is one of the most intuitive for me.\r\n<\/p>\r\n<p>\r\nBut that may not be the case for everyone. \r\nI guess I shall include HTML codes for rendering paragraphs as well. \r\n<\/p>\r\n<\/pre>\n
Image<\/h4>\n
\r\n<img src="http:\/\/www.techcoil.com\/logo.png" alt="My logo"\/>\r\n<\/pre>\n
Custom click-able points on an image<\/h4>\n
\r\n<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" \/>\r\n\r\n<map name="planetmap">\r\n  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" \/>\r\n  <area shape="circle" coords="90,58,3" href="mercury.htm" alt="Mercury" \/>\r\n  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" \/>\r\n<\/map>\r\n<\/pre>\n
References<\/h3>\n
This post is for people to copy and paste HTML codes easily and does not delve deep into HTML. If you need to learn more about HTML, you can visit w3schools<\/a>. If you prefer books, I strongly recommend the following book:<\/p>\n
<\/a><\/p>\n
Related posts<\/h3>\n