HTML5 cheat codes part.02

 www.shellows.blogspot.com

Table of contant

03.Links and images

04.Lists forms input type of attributes

For web developers, it is crucial to be proficient in HTML

 And while HTML is not the most difficult to get accustomed to one can still manage

 to forget all the nooks and crannies it has to offer. 

A good solution, therefore, is to always have a cheat sheet at hand helping you in your most troubling moments.

03.links and images

Let us see how we can break the code up in different componen

LINKS

<a href=""> ... </a>

Anchor tag. Primarily used for including hyperlinks.

<a href="mailto:"> ... </a> 

Tag dedicated to sending emails.

<a href="tel://###-###"> ... </a>

Anchor tag for mentioning contact numbers. As the numbers are clickable, this can be particularly beneficial for mobile users.

<a name="name"> ... </a>

This tag can be used to quickly navigate to a different part of the webpage.

<a href="#name"> ... </a>

A variation of the above tag, this is only meant to navigate to a div section of the webpage.

Images

<img />

A tag to display images in the webpage.

src="url"

The URL or path where the image is located on your drive or on the web.

alt="text"

The text written here is displayed when user hovers mouse over the image. Can be used to give additional details of the image.

height=""

Specifies image height in pixels or percentages.

width=""

Specifies image width in pixels or percentages.

align=""

The relative alignment of the image. Can change with changes to other elements in the webpage.

border=""

Specifies border thickness of the image. If not mentioned, defaults to 0.

<map> ... </map>

Denotes an interactive (clickable) image.

<map name=""> ... </map>

Name of the map associated between the image and the map

<area />

Specifies image map area.

shape=""

Shape of the area.

coords=m""

Coordinates of the vital information of the shape. Example: vertices for rectangles, center/radius for circles.

EXAMPLE

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap"> <map name="planetmap"><area shape="rect" coords="0,0,60,100" href="sun.htm" alt="Sun"><area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury"><area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus"></map>

02.Lists forms input type of attributes

Lists

<ol> ... </ol>

Tag for ordered or numbered list of items.

<ul> ... </ul>

Contrary to the above tag, used for unordered list of items.

<li> ... </li>

Individual item as part of a list.

<dl> ... </dl>

Tag for list of items with definitions,

<dt> ... </dt>

The definition of a single term inline with body content

<dd> ... </dd>

The description for the defined term.

Example

<ol><li>Monday</li>

<li>Tuesday</li> <li>Wednesday</li>

</ol> <ul>

<li>France</li>

<li>Germany</li> <li>Italy</li>

</ul> <dl>

<dt>Toyota</dt>

<dd>Japanese car brand</dd> <dt>Armani</dt>

<dd>Italian fashion brand</dd>

Forms

<form> ... </form>

The parent tag for an HTML form.

action="url"

The URL listed here is where the form data will be submitted once user fills it.

method=""

it specifies which HTTP method (POSTorGET) would be used to submit the form

enctype=""

Only for POST method, this dictates the data encoding scheme to be used when form is submitted

autocomplete=""

Determines if the form has auto-complete enabled.

novalidate

Determines whether the form should be validated before submission.

accept-charsets

Determines character encodings when form is submitted

target

After submission, the form response is displayed wherever this refers to, usually has the following values: _blank, _self, _parent,_top

<fieldset> ... </fieldset>

Identifies the group of all fields on the form.

<label> ... </label>

This is used to label a field in the form.

<legend>...</legend>

This operates as a caption for the <fieldset> element.

<input>...<input />

This tag is used to take input from the user. Input type is determined by a number of attributes.

Input Type Attributes

type=""

Determines which type of input (text, dates, password) is requested from the user.

name=""

Specifies the name of the input field.

value=""

Specifies the value contained currently in the input field.

size=""

detrmines the input element width (number of cheracters)

maxlength=""

Specifies the most input field characters allowed.

required=""

Makes an input field compulsory to be filled by the user. The form cannot be submitted if a required field is left empty.

width=""

Determines the width of the input element, in pixel values

height=""

Determines the height of the input element, in pixel values.

placeholder=""

Can be used to give hints to the user about the nature of the requested data.

pattern=""

Specifies a regular expression, which can be used to look for patterns in the user's text.

min=""

The minimum value allowed for an <input> element.

max=""

The maximum value allowed for an <input> element.

autofocus

Forces focus on the input element when webpage loads completely.

disabled

Disables the input element. User can no longer enter data.

<textarea> ... </textarea>

For longer strings of input. Can be used to get multi-sentence text from the user.

<select> ... </select>

This tag specifies a list of options which the user can choose from.