HTML 5 page layout enhancement

New Input type

HTML 5 provides some handy input types and it can save the developer lots of time and efforts.You may find the detailed input types here

http://www.w3schools.com/html/html5_form_input_types.asp

but be aware the new HTML feartures may not be fully supported by individual browsers. Use it carefully when design your pages.

Here are a summary:

• color:                                  user to choose the color
• date/time/datetime/datetime-local       user to choose the date and time
• email                                   contain an e-mail address.
• week/month                              choose week or month of the year
• number                                  input a number
• range                                   an number from a specific range
• search                                  input a search text
• tel                                     an telephone number
• url                                     a URL address.

A HTML page should usually organised as below

Header tags can be used any where of the HTML body. You can user id attribute to refer to it.

It can be used mutliple times.

Nav tag is used for navigation section. It is recommanded to use one nav tag in the whole page.

Usually the tag is combined with ul (unordered list)

Section tag is used for different sections. eg, in a main page, we may have sports, news, games sections.

Article tag is used for any specific articles.

Aside tag is used for some content aside from the content it is placed in.

Footer tag is used for footer but it can be in wholepage, section, article

HTML traditional user input tags introduction

1. User simple line input:

Text input is very common for single-line input, below is a simple input html segment with some attributes

<input type="text" id="username" name="username" a/>

2. Text Area input:

Sometimes you need to input some long text message into the system and a single line is not enough.

Now you may need ‘Text Area Input’:

3. Submit button:

When user finished the inputs, he may want the information to be submitted to the server for data store or verification.

Submit button is another type of input

<input type='submit' value="login" name="loginBut">

Usually it should be working with ‘form’

<form id="loginForm" name="loginForm" method="get" action="new.html">

Method is the http method and action is the target url

new.html?username=myusername&password=mypassword&loginBut=login

4. password

when you want to hide the password to be displayed on the screen, you may want the input type set as ‘passsword’

<input type="password" id="password" name="password" a/>

The user input will not be displayed as plain text.

But the information still shows in address bar when using a get method.

5.  Checkbox

Check box is used for multiple choose option, user can choose more than one options if they like

For example

<input type="checkbox" name="colorselection" id="colorselection"

value="blue" checked /> <span> blue </span>

<input type="checkbox" name="colorselection"

value="red" /> <span> red </span>

<input type="checkbox" name="colorselection"

value="yellow" /> <span> yellow </span>

<input type="checkbox" name="colorselection"

value="green" /> <span> green </span>

6. Radio

compared with checkbox button, users may only allow to choose only one option from the list, then radio or droplist (introduced next section)

<input type="radio" name="rememberme" id="rememberme" value="yes" checked /> <span> yes </span>
<input type="radio" name="rememberme" id="rememberme" value="no" /> 

<span> no </span>

7. DropDownList

last one we want to talk about is the dropdownlist

dropdown list a different from the above user input options using <input> tag, it is using <select> tag

as below:

                
<select name="colorselector" style="width:100%">
   <option id="optionAL" value="AL" selected>Alabama</option>
   <option id="optionAK" value="AK" selected>Alaska</option>
   <option id="optionAZ" value="AZ" selected>Arizona</option>
</select>

images in HTML

Image is used in HTML to display a picture.

To display image in HTML, we need to specify by <img> tag, there are some basic attributes:

• src: the local image location (relative location) or a http link.
• alt: it specifies an alternate text for an image, if the image cannot be displayed.
• style: define the width and height
• border: show the border

Sample code:

<img src="img/hadoopau.png", alt="hadoop austrlia"
style ="width:200px;height:200px" border="none;">

image display on the browser:

To make the image linked to an URL, we may use anchor tag <a>

<a href="http://www.google.com">
<img src="img/hadoopau.png", alt="hadoop austrlia"
style ="width:200px;height:200px" border="none;"/>
</a>

In major browser, when you move the mouse to the image, you will see it turns to be a hand


To make part of image linked to an URL, we may combine the image with map

<img src="img/hadoopau.png", alt="hadoop austrlia"
style ="width:200px;height:200px" border="none;" usemap="#teamlink"/>
</a>

<map name="teamlink">
<area shape="rect" coords="0, 0, 200, 100" href="http://www.google.com">
<area shape="rect" coords="0, 100, 200, 200" href="http://www.baidu.com">
</map>

HTML - 1 introduction and basic tags

HTML is language used by web world. it helps the web client to understand how the content should be display.

there are some basic items we need to understand in order to master HTML.

Tag: pre-defined command in HTML. It should be a pair of open and close tags. Breaking tag <br> is the exception which only have a open tag.

Attributes: attributes are used in the tag. The avaible attributes are closely related with the tag. For example, img tag has scr, alt, height, weight attributes.

Head block:  head block is the common block in the HTML page, it is usually for the browser tab. There are some common tags used in the head block.

• meta tag: key words usually can be referenced by the search engine
• Title: the text which shows on the browser tab.
• javascript, links and style are also common in head block.

Body block: the main block for the HTML. The main body displayed in the browser. Common layout is the

1. The image and resource used by the HTML page.
2. Text, table, form.
3. The script to rend the page.

Form: a very common tag.there are some attributes needs to understand

• id: to identify your form
• method: usually post to indicate the post HTTP method.
• action: the url for post redirection

Comments:  < !—the comments here -->

Heading: the high-lighted headings showing in the browser.  There are 6 layers of headings. From h1 (biggest) to h6 (smallest).

For example

     <h1> This is the heading one</h1>

Paragraphs:  a separated paragraphs. The text in the paragraph is a block, it ignores the line breaks in the paragraph. If you want to insert an line break, you have to use <br> tags.

Italic text: we can wrap the text by <i> and </i> to make it italic or use <em> and </em> (for emphasize) to make it italic and make the screen reader to intercept the text for disable people

HTML: some special characters

& is reserved in HTML keyword.

Some common special

&nbsp (non-breaking space)

&gt; >

&lt; <

&emsp ‘tab’

&copy ‘the copyright’ @