Monday, May 5, 2014

zend coding guidelines and shortcut

Based on HTML 5 specification draft.


Root Element


html


<html></html>

 


html:xml


<htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="ru"></html>

 


html:4t


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><htmllang="ru"><head>
   
<title></title>
   
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"></head><body></body></html>

html:4s


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><htmllang="ru"><head>
   
<title></title>
   
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"></head><body></body></html>

html:xt


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="ru"><head>
   
<title></title>
   
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/></head><body></body></html>

html:xs


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="ru"><head>
   
<title></title>
   
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/></head><body></body></html>

html:xxs


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"xml:lang="ru"><head>
   
<title></title>
   
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/></head><body></body></html>

html:5


<!DOCTYPE HTML><htmllang="ru-RU"><head>
   
<title></title>
   
<metacharset="UTF-8"></head><body></body></html>

Document Metadata


head


<head></head>

title


<title></title>

base


<basehref="">

link


<link>

link:css


<linkrel="stylesheet"type="text/css"href="style.css"media="all">

link:print


<linkrel="stylesheet"type="text/css"href="print.css"media="print">

link:favicon


<linkrel="shortcut icon"type="image/x-icon"href="favicon.ico">

link:touch


<linkrel="apple-touch-icon"href="favicon.png">

link:rss


<linkrel="alternate"type="application/rss+xml"title="RSS"href="rss.xml">

link:atom


<linkrel="alternate"type="application/atom+xml"title="Atom"href="atom.xml">

meta


<meta>

meta:utf


<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">

meta:win


<metahttp-equiv="Content-Type"content="text/html;charset=Win-1251">

meta:compat


<metahttp-equiv="X-UA-Compatible"content="IE=7">

style


<styletype="text/css"></style>

Scripting


script


<scripttype="text/javascript"></script>

script:src


<scripttype="text/javascript"src=""></script>

noscript


<noscript></noscript>

Sections


body


<body></body>

section, sect


<section></section>

nav


<nav></nav>

article, art


<article></article>

aside


<aside></aside>

h1


<h1></h1>

h2


<h2></h2>

h3


<h3></h3>

h4


<h4></h4>

h5


<h5></h5>

h6


<h6></h6>

hgroup, hgr


<hgroup></hgroup>

header, hdr


<header></header>

footer, ftr


<footer></footer>

address, adr


<address></address>

div


<div></div>

Grouping Content


p


<p></p>

hr


<hr>

br


<br>

pre


<pre></pre>

dialog, dlg


<dialog></dialog>

blockquote, bq


<blockquote></blockquote>

ol


<ol></ol>

ol+


<ol>
   
<li></li></ol>

ul


<ul></ul>

ul+


<ul>
   
<li></li></ul>

li


<li></li>

dl


<dl></dl>

dl+


<dl>
   
<dt></dt>
   
<dd></dd></dl>

dt


<dt></dt>

dd


<dd></dd>

Text-level Semantics


a


<ahref=""></a>

a:link


<ahref="http://"></a>

a:mail


<ahref="mailto:"></a>

q


<q></q>

cite


<cite></cite>

em


<em></em>

strong, str


<strong></strong>

small


<small></small>

mark


<mark></mark>

dfn


<dfn></dfn>

abbr


<abbrtitle=""></abbr>

acronym, acr


<acronymtitle=""></acronym>

time


<time></time>

progress, prog


<progress></progress>

meter


<meter></meter>

code


<code></code>

var


<var></var>

samp


<samp></samp>

kbd


<kbd></kbd>

sub


<sub></sub>

sup


<sup></sup>

span


<span></span>

i


<i></i>

b


<b></b>

bdo


<bdodir=""></bdo>

bdo:r


<bdodir="rtl"></bdo>

bdo:l


<bdodir="ltr"></bdo>

ruby


<ruby></ruby>

rt


<rt></rt>

rp


<rp></rp>

Edits


ins


<ins></ins>

del


<del></del>

Embedded Content


figure, fig


<figure></figure>

img


<imgsrc=""alt="">

iframe, ifr


<iframesrc=""frameborder="0"></iframe>

embed, emb


<embedsrc=""type="">

object, obj


<objectdata=""type=""></object>

param


<paramname=""value="">

video


<videosrc=""></video>

audio


<audiosrc=""></audio>

source, src


<source>

canvas


<canvas></canvas>

map


<mapname=""></map>

map+


<mapname="">
   
<areashape=""coords=""href=""alt=""></map>

area


<areashape=""coords=""href=""alt="">

area:d


<areashape="default"href=""alt="">

area:c


<areashape="circle"coords=""href=""alt="">

area:r


<areashape="rect"coords=""href=""alt="">

area:p


<areashape="poly"coords=""href=""alt="">

Tabular Data


table


<table></table>

table+


<table><tr>
   
<td></td></tr></table>

caption, cap


<caption></caption>

colgroup, colg


<colgroup></colgroup>

colgroup+, colg+


<colgroup>
   
<col></colgroup>

col


<col>

tbody


<tbody></tbody>

thead


<thead></thead>

tfoot


<tfoot></tfoot>

tr


<tr></tr>

tr+


<tr>
   
<td></td></tr>

th


<th></th>

td


<td></td>

Forms


form


<formaction=""></form>

form:get


<formaction=""method="get"></form>

form:post


<formaction=""method="post"></form>

fieldset, fset


<fieldset></fieldset>

legend, leg


<legend></legend>

label


<labelfor=""></label>

input


<inputtype="">

input:hidden, input:h


<inputtype="hidden"value="">

input:text, input:t


<inputtype="text"value=""id="">

input:search


<inputtype="search"value=""id="">

input:email


<inputtype="email"value=""id="">

input:url


<inputtype="url"value=""id="">

input:password, input:p


<inputtype="password"value=""id="">

input:datetime


<inputtype="datetime"value=""id="">

input:datetime-local


<inputtype="datetime-local"value=""id="">

input:date


<inputtype="date"value=""id="">

input:month


<inputtype="month"value=""id="">

input:week


<inputtype="week"value=""id="">

input:time


<inputtype="time"value=""id="">

input:number


<inputtype="number"value=""id="">

input:range


<inputtype="range"value=""id="">

input:color


<inputtype="color"value=""id="">

input:checkbox, input:c


<inputtype="checkbox"id="">

input:radio, input:r


<inputtype="radio"id="">

input:file, input:f


<inputtype="file"id="">

input:submit, input:s


<inputtype="submit"value="">

input:image, input:i


<inputtype="image"src=""alt="">

input:reset


<inputtype="reset"value="">

input:button, input:b


<inputtype="button"value="">

button, btn


<button></button>

select


<selectid=""></select>

select+


<selectid="">
   
<optionvalue=""></option></select>

optgroup, optg


<optgroup></optgroup>

optgroup+, optg+


<optgroup>
   
<option></option></optgroup>

option, opt


<option></option>

Interactive Elements


datagrid, datag


<datagrid></datagrid>

datalist, datal


<datalist></datalist>

textarea, tarea


<textareaid=""cols="30"rows="10"></textarea>

keygen, kg


<keygen>

output, out


<output></output>

details, det


<details></details>

command, cmd


<command>

bb


<bb></bb>

menu


<menu></menu>

menu:context, menu:c


<menutype="context"></menu>

menu:toolbar, menu:t


<menutype="toolbar"></menu>

Conditional Comments


cc:ie


<!--[if IE]><![endif]-->

cc:noie


<!--[if !IE]><!--><!--<![endif]-->


zend coding guidelines and shortcut

How To Install & Use Zen Coding In Notepad++

Zen coding is a pretty cool library that allows web developers to write html and css code faster then normal coding speed. i have use zend coding plugin into my notepad++


Notepad++ is one of my favorite tool and thanks to zen coding is available as a plugin.


 


screenshot


How to Install zendcoding plugin in notepad ++:


v0.7 which is based on javascript and can be downloaded here


After download just unzip your file into a folder. go to your notepad++ install folder.


There you see a folder called plugins. just past the unzip file into this folder and restart your notepad ++


Tutorial


How to use notepad++ :



div#specs>p.intro+div>ul>li*5>a.items



And Press CTRL-E and you will get back the following thanks to zen coding


Untitled-2


Happy Coding :)



How To Install & Use Zen Coding In Notepad++