How to add 2 classes to 1 div?

PROBLEM:
You have one div and you want use 2 classes for whatever reasons .
What to do ?

SOLUTION:
simply add space between classes name
<div class="class1 class2">CONTENT</div>

Polite reminder:
class2 will overwrite class1 properties.

web development notes

WARNING!

This is personal notes for personal and my friends only:

http://dominiksymonowicz.blogspot.co.uk/2014/01/itnotes-information.html

You can read them,but I suggest look to link,resources only

It contains  all information about HTML,CSS and JavaScript (and their framework).

HTML

HTML notes:

• http://www.w3.org/community/webed/wiki/HTML/Elements
• list of all html elements (from http://www.w3.org)
• www.checkupdown.com/status/error1.html
• this website explains meaning of the numbers.(Useful,if you want your server return right return code
•  http://reference.sitepoint.com/html
•  Great reference for html 
• http://meyerweb.com/eric/tools/css/reset/
• How to reset css

CSS

CSS notes:

• http://reference.sitepoint.com/css

• 
  

• Prevent long word (like url ) from breaking - www.css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
• http://www.sitepoint.com/12-little-known-css-facts/

JavaScript

JavaScript notes:

• Javascript scope
• "The second important feature is that functions provide scope. In JavaScript there’s no  curly braces local scope; in other words, blocks don’t create scope. There’s only function scope. Any variable defined with var inside of a function is a local variable, invisible outside the function. Saying that curly braces don’t provide local scope means that if you define a variable with var inside of an if condition or inside of a for or a while loop, that doesn’t mean the variable is local to that if or for. It’s only local to the wrapping function, and if there’s no wrapping function, it becomes a global variable. minimizing the number of globals is a good habit, so functions are indispensable when it comes to keeping the variable scope under control." (find resource!)

JavaScript resources:

• http://reference.sitepoint.com/javascript/domcore

XPath

Definition:
XPath is a language for finding information in an XML document.
XPath is used to navigate through elements and attributes in an XML document.


Basics:

• XPath, there are seven kinds of nodes:

1. attribute,
2. comment,
3. document nodes
4. element,
5. namespace,
6. processing-instruction, 
7. text 

• XML documents are trees of nodes.
• Items are atomic values or nodes.
• Atomic values are nodes with no children or parent.
• Each element and attribute has one parent. Element nodes may have zero, one or more children.
• Nodes that have the same parent.
• Ancestors A node's parent, parent's parent, Descendants A node's children, children's children,
• XPath uses path expressions to select nodes or node-sets in an XML document.
• Predicates are used to find a specific node or a node that contains a specific value.
• XPath wildcards can be used to select unknown XML elements.
• By using the | operator in an XPath expression you can select several paths.
• An axis defines a node-set relative to the current node.
• A location path can be absolute or relative.An absolute location path starts with a slash ( / ) and a relative location path does not.
• An XPath expression returns either a node-set, a string, a Boolean, or a number.
• XQuery is used to querying XML data.
• XSLT is the style sheet language for XML files.

SOLUTIONS FOR COMMON PROBLEMS:

• Note: In IE 5,6,7,8,9 first node is[0], but according to W3C, it is [1]. To solve this problem in IE, set the SelectionLanguage to XPath.
•  How to prevent uneven linespacing  when subscripts or superscripts are used  on web pages.
• https://www.cs.tut.fi/~jkorpela/www/linespacing.html

Resources:

• 
  
• http://en.wikipedia.org/wiki/XPath
• Specifications:
• http://www.w3.org/TR/xpath/
• http://www.w3.org/TR/xpath20/
• http://blog.froont.com/brief-history-of-web-design-for-designers/
• Interesting blog entry about history of web design for designer 
• i.stack.imgur.com/whhD1.png 
• Great picture (if you know author let me know!) about work-flow which how  respond number you get http

Misc. informations:

• w3schools is quite famous website that provide web development learning content ,but there are many professionals who hats this page and they are even pages about it like http://www.w3fools.com .I am unable to jurge this,but it is worth to mention as it r

Useful link: Introduction to Bootstrap 3

Bootstrap is a tool to create front end for web application and website.

A very nice introduction to Bootstrap 3  written by Erick fromhttp://www.helloerik.com can be found here:
http://www.helloerik.com/bootstrap-3-grid-introduction


More about Bootstrap can be found here:
http://en.wikipedia.org/wiki/Bootstrap_(front-end_framework)
http://getbootstrap.com/getting-started/

How to set up utf-8 encoding in html5 ?

(This is note for myself as I like to forget about it)

My 'correct' way to set charset in HTML 5.

Code:

<meta charset="utf-8"/> 

I hope ,it helps me remember it this simple thing.

How to solve problem with error: The entity "nbsp" was referenced, but not declared. in html5 ?

Are you switching from ancient html4 to brand new html5?

Good. Me too.
However.Few things change.
If you use &nbsp; in html5 Netbeans will warn you that "The entity "nbsp" was referenced, but not declared.".

How to solve problem?

You simply need replace &nbsp; with &#160;

Why You see this error?
As (X)HTML5  no longer uses a DTD  you need  replace entity name with number.


Good news is that,  if you ignore warning,then ... nothing bad happen as all modern internet browsers will handle this smoothly.


For other characters look to my other post:
character entity references in html5

If you need learn more about  HTML entities (Reserved characters in HTML must be replaced with character entities.), look here:  w3schools or here tutorialspoint .

Useful link: character entity references in html5

As you probably notices HTML4 and HTML5 looks bit different.
For example: It is affect character entity references a little bit.

Most common character entity references in  HTML5  that You will need change:

•   " Change  &quot;  to  &#34; 
•  & Change  &amp;  to  &#38;
•  < Change &lt;  to  &#60;
•  > Change &gt;  to  &#62;
•    (space) Change &nbsp;  to  &#160;
•  © Change &copy;  to  &#169;
•  ® Change &reg;  to  &#174;
•  ™ Change &trade;  to  &#8482;

If you need know more,there is fantastic page with all character entity references in  HTML5:  http://dev.w3.org/html5/html-author/charref

How to solve issue with 'Your browser does not currently recognize any of the video formats available.' in Opera

I am user of Opera. An Outsider  Web Browser.
It means I am discriminated on many occasions . Specially with services related to Google , Microsoft and places where JavaScript are designed only for specific browser.

So i went on YouTube today and trying to play  Silence Groove - Play Out (The Cock) a very nice drum and bass tune.
But i was welcomed by upsetting message

"Your browser does not currently recognize any of the video formats available.

Click here to visit our frequently asked questions about HTML5 video."

I used few words,which were not a compliments.

What happen ? Google turn on a htm5 player version for my account,which doesn't work with Opera at the moment

SOLUTION:
Login to your YouTube account
Go to   http://www.youtube.com/html5
On bottom of page press "Leave the HTML5 Trial"  and press refresh on tab,where you had your youtube video.

BTW.
I like concept of standards for some common solution like html 5, JavaScript etc.
I am not sure about video and video streaming .

For standards changes should be a revolution (html 4 -> html 5). For some technologies like video stream, changes should be a constant evolution and I believe that is better. I am aware that many formats for video has a some serious drawbacks like security,implementation decision (support one/many/all formats), patent abuse and few more,but i think battle between few companies cause quicker evolution of video format.
It is too broad topic and it is out of scope of this blog entry anyway.[TODO finish gibberish about this]

Anyway. I understand fact that YouTube prefer support open standard that clumsy 3rd part solution like Adobe Crap Player and etc. and I understand that that support starts from Google Chrome and Firefox,but I hope that Opera and Safari will be not discriminated*.

* I do NOT think Internet Explorer as web browser .It is a tool for download a web browser. I am impressed with changes made by Microsoft ,but software that is designed for one platform and only very limited version compatibility,which makes OS feature rather standalone browser.

How justify text align works in html?

 Justify text works in different way as is work in normal word processor does. 
Text is justified only when a line of text wraps at the right edge of container( like  cell border in table and etc).
(So text remain aligned to left until text not reach right side).

I found that, when  i generate html using ckeditor but it applies to html in general

 

how to solve problem with puting file:// protocol into img tag with src attribute ?

Unfortunately due security reasons using file:// protocol in links  from remote files is impossible and disabled in most browsers.Which means it  will simply not work (except for user who switched off security polices in browsers, but i don't think so many people do that).

You can find more details in this link
http://kb.mozillazine.org/Links_to_local_pages_don't_work

Here you some quote from above site.

 "For security purposes, Mozilla applications block links to local files (and directories) from remote files. This includes linking to files on your hard drive, on mapped network drives, and accessible via Uniform Naming Convention (UNC) paths . This prevents a number of unpleasant possibilities, including: 

• Allowing sites to detect your operating system by checking default installation paths

• Allowing sites to exploit system vulnerabilities (e.g., C:\con\con in Windows 95/98)

•  Allowing sites to detect browser preferences or read sensitive data"

 So..solution for this problem is simply do NOT use file:// protocol. Sounds painful and it is,but you must live with this but believe me developer who must deal with fact that website must be IE6 friendly has worse problems.

List of hex value of color in HTML

AliceBlue has hex value -- "#F0F8FF".
AntiqueWhite has hex value -- "#FAEBD7".
Aqua has hex value -- "#00FFFF".
Aquamarine has hex value -- "#7FFFD4".
Azure has hex value -- "#F0FFFF".
Beige has hex value -- "#F5F5DC".
Bisque has hex value -- "#FFE4C4".
Black has hex value -- "#000000".
BlanchedAlmond has hex value -- "#FFEBCD".
Blue has hex value -- "#0000FF".
BlueViolet has hex value -- "#8A2BE2".
Brown has hex value -- "#A52A2A".
BurlyWood has hex value -- "#DEB887".
CadetBlue has hex value -- "#5F9EA0".
Chartreuse has hex value -- "#7FFF00".
Chocolate has hex value -- "#D2691E".
Coral has hex value -- "#FF7F50".
CornflowerBlue has hex value -- "#6495ED".
Cornsilk has hex value -- "#FFF8DC".
Crimson has hex value -- "#DC143C".
Cyan has hex value -- "#00FFFF".
DarkBlue has hex value -- "#00008B".
DarkCyan has hex value -- "#008B8B".
DarkGoldenRod has hex value -- "#B8860B".
DarkGray has hex value -- "#A9A9A9".
DarkGreen has hex value -- "#006400".
DarkKhaki has hex value -- "#BDB76B".
DarkMagenta has hex value -- "#8B008B".
DarkOliveGreen has hex value -- "#556B2F".
Darkorange has hex value -- "#FF8C00".
DarkOrchid has hex value -- "#9932CC".
DarkRed has hex value -- "#8B0000".
DarkSalmon has hex value -- "#E9967A".
DarkSeaGreen has hex value -- "#8FBC8F".
DarkSlateBlue has hex value -- "#483D8B".
DarkSlateGray has hex value -- "#2F4F4F".
DarkSlateGrey has hex value -- "#2F4F4F".
DarkTurquoise has hex value -- "#00CED1".
DarkViolet has hex value -- "#9400D3".
DeepPink has hex value -- "#FF1493".
DeepSkyBlue has hex value -- "#00BFFF".
DimGray has hex value -- "#696969".
DimGrey has hex value -- "#696969".
DodgerBlue has hex value -- "#1E90FF".
FireBrick has hex value -- "#B22222".
FloralWhite has hex value -- "#FFFAF0".
ForestGreen has hex value -- "#228B22".
Fuchsia has hex value -- "#FF00FF".
Gainsboro has hex value -- "#DCDCDC".
GhostWhite has hex value -- "#F8F8FF".
Gold has hex value -- "#FFD700".
GoldenRod has hex value -- "#DAA520".
Gray has hex value -- "#808080".
Grey has hex value -- "#808080".
Green has hex value -- "#008000".
GreenYellow has hex value -- "#ADFF2F".
HoneyDew has hex value -- "#F0FFF0".
HotPink has hex value -- "#FF69B4".
IndianRed has hex value -- "#CD5C5C".
Indigo has hex value -- "#4B0082".
Ivory has hex value -- "#FFFFF0".
Khaki has hex value -- "#F0E68C".
Lavender has hex value -- "#E6E6FA".
LavenderBlush has hex value -- "#FFF0F5".
LawnGreen has hex value -- "#7CFC00".
LemonChiffon has hex value -- "#FFFACD".
LightBlue has hex value -- "#ADD8E6".
LightCoral has hex value -- "#F08080".
LightCyan has hex value -- "#E0FFFF".
LightGoldenRodYellow LightGoldenRodYellow has hex value -- "#FAFAD2".
LightGray LightGray has hex value -- "#D3D3D3".
LightGrey LightGrey has hex value -- "#D3D3D3".
LightGreen LightGreen has hex value -- "#90EE90".
LightPink LightPink has hex value -- "#FFB6C1".
LightSalmon LightSalmon has hex value -- "#FFA07A".
LightSeaGreen LightSeaGreen has hex value -- "#20B2AA".
LightSkyBlue LightSkyBlue has hex value -- "#87CEFA".
LightSlateGray LightSlateGray has hex value -- "#778899".
LightSlateGrey LightSlateGrey has hex value -- "#778899".
LightSteelBlue LightSteelBlue has hex value -- "#B0C4DE".
LightYellow LightYellow has hex value -- "#FFFFE0".
Lime Lime has hex value -- "#00FF00".
LimeGreen LimeGreen has hex value -- "#32CD32".
Linen Linen has hex value -- "#FAF0E6".
Magenta Magenta has hex value -- "#FF00FF".
Maroon Maroon has hex value -- "#800000".
MediumAquaMarine has hex value -- "#66CDAA".
MediumBlue has hex value -- "#0000CD".
MediumOrchid has hex value -- "#BA55D3".
MediumPurple has hex value -- "#9370D8".
MediumSeaGreen has hex value -- "#3CB371".
MediumSlateBlue has hex value -- "#7B68EE".
MediumSpringGreen has hex value -- "#00FA9A".
MediumTurquoise has hex value -- "#48D1CC".
MediumVioletRed has hex value -- "#C71585".
MidnightBlue has hex value -- "#191970".
MintCream has hex value -- "#F5FFFA".
MistyRose has hex value -- "#FFE4E1".
Moccasin has hex value -- "#FFE4B5".
NavajoWhite has hex value -- "#FFDEAD".
Navy has hex value -- "#000080".
OldLace has hex value -- "#FDF5E6".
Olive has hex value -- "#808000".
OliveDrab has hex value -- "#6B8E23".
Orange has hex value -- "#FFA500".
OrangeRed has hex value -- "#FF4500".
Orchid has hex value -- "#DA70D6".
PaleGoldenRod has hex value -- "#EEE8AA".
PaleGreen has hex value -- "#98FB98".
PaleTurquoise has hex value -- "#AFEEEE".
PaleVioletRed has hex value -- "#D87093".
PapayaWhip has hex value -- "#FFEFD5".
PeachPuff has hex value -- "#FFDAB9".
Peru has hex value -- "#CD853F".
Pink has hex value -- "#FFC0CB".
Plum has hex value -- "#DDA0DD".
PowderBlue has hex value -- "#B0E0E6".
Purple has hex value -- "#800080".
Red has hex value -- "#FF0000".
RosyBrown has hex value -- "#BC8F8F".
RoyalBlue has hex value -- "#4169E1".
SaddleBrown has hex value -- "#8B4513".
Salmon has hex value -- "#FA8072".
SandyBrown has hex value -- "#F4A460".
SeaGreen has hex value -- "#2E8B57".
SeaShell has hex value -- "#FFF5EE".
Sienna has hex value -- "#A0522D".
Silver has hex value -- "#C0C0C0".
SkyBlue has hex value -- "#87CEEB".
SlateBlue has hex value -- "#6A5ACD".
SlateGray has hex value -- "#708090".
SlateGrey has hex value -- "#708090".
Snow has hex value -- "#FFFAFA".
SpringGreen has hex value -- "#00FF7F".
SteelBlue has hex value -- "#4682B4".
Tan has hex value -- "#D2B48C".
Teal has hex value -- "#008080".
Thistle has hex value -- "#D8BFD8".
Tomato has hex value -- "#FF6347".
Turquoise has hex value -- "#40E0D0".
Violet has hex value -- "#EE82EE".
Wheat has hex value -- "#F5DEB3".
White has hex value -- "#FFFFFF".
WhiteSmoke has hex value -- "#F5F5F5".
Yellow has hex value -- "#FFFF00".

Spiffy&Awsome tip: What type of font is good to convert from text to pdf/ html

Most suitable generic font family  is a monospace font (like   Courier, Lucida Console) , because each character has the same width, which is necessary if you want keep the original formatting of the plain text file.

Source: Bruno Lowagie -  iText in Action (2nd edtion)

what href stands for

When you using tags in html almost all tags name are obvious shortcut like
p stands for paragraph
a stands for anchor
etc.

but when you using a ,then you see property href and you start wondering ...
what href stands for ?

a weird “href” is for “hypertext reference”

Source: http://www.w3.org/Provider/ServerWriter.html  (the couldn't hide this in more weird place ,is it? )

How looks default css for html 4.x ?

Based on  Html 4.01 and CSS 2.x

Below you have a default css for html 4 taken from w3c organization .
(link:  http://www.w3.org/TR/CSS21/sample.html )

 html, address, blockquote, body, dd, div, dl, dt, fieldset, form, frame, frameset,
h1, h2, h3, h4, h5, h6, noframes, ol, p, ul, center, dir, hr, menu, pre {
display: block; unicode-bidi: embed
}

li {
 display: list-item
}

head {
display: none
}

table {
display: table
}

tr {
display: table-row
}

thead {
display: table-header-group
}

tbody {
display: table-row-group
}

tfoot {
display: table-footer-group
}

col {
display: table-column
}

colgroup {
display: table-column-group
}

td, th {
display: table-cell
}

caption {
display: table-caption
}

th {
font-weight: bolder;
text-align: center
}

caption {
text-align: center
}

body {
margin: 8px
}

h1 {
font-size: 2em;
margin: .67em 0
}

h2 {
font-size: 1.5em;
margin: .75em 0
}

h3 {
font-size: 1.17em;
margin: .83em 0
}

h4, p, blockquote, ul, fieldset, form, ol, dl, dir, menu {
margin: 1.12em 0
}

h5 {
font-size: .83em; margin: 1.5em 0
}

h6 {
font-size: .75em;
margin: 1.67em 0
}

h1, h2, h3, h4, h5, h6, b,strong {
font-weight: bolder
}

blockquote {
margin-left: 40px;
margin-right: 40px
}

i, cite, em,var, address {
font-style: italic
}

pre, tt, code,kbd, samp {
font-family: monospace
}

pre {
white-space: pre
}

button, textarea,input, select {
 display: inline-block
}

big {
font-size: 1.17em
}

small, sub, sup {
font-size: .83em
}

sub {
vertical-align: sub
}

sup {
vertical-align: super
}

table {
border-spacing: 2px;
}

thead, tbody,tfoot {
vertical-align: middle
}

td, th, tr {
vertical-align: inherit
}

s, strike, del {
text-decoration: line-through
}

hr {
border: 1px inset
}

ol, ul, dir,menu, dd {
margin-left: 40px
}

ol {
list-style-type: decimal
}

ol ul, ul ol,ul ul, ol ol {
margin-top: 0;
margin-bottom: 0
}

u, ins {
text-decoration: underline
}

br:before {
content: "\A";
white-space: pre-line
}

center {
text-align: center
}

:link, :visited {
text-decoration: underline
}

:focus {
outline: thin dotted invert
}

/* Begin bidirectionality settings (do not change) */
BDO[DIR="ltr"] {
direction: ltr;
unicode-bidi: bidi-override
}

BDO[DIR="rtl"] {
direction: rtl; unicode-bidi:
bidi-override
}

*[DIR="ltr"] {
direction: ltr;
unicode-bidi: embed
}

*[DIR="rtl"] {
direction: rtl;
unicode-bidi: embed
}


@media print {
h1 {
page-break-before: always
}

h1, h2, h3, h4, h5, h6 {
page-break-after: avoid
}

ul, ol, dl {
page-break-before: avoid
}

}

Source: http://www.w3.org/TR/CSS21/sample.html

how to implement two submit using one form in html

If you have amazing form but you want  2 (or more) submission with different action ..then you thinking... that is a problem,because you define action in form,so a. what you should do ?

• First create you outstanding form 

<form method="POST" name="diary" action="save.html">
<!-- (...) your marvelous form -->
</form>

• SecondlyAdd normal submit button, but add onclick   with line that will set action depend on submission 

<input type="submit" value="Save" onclick="diary.action='save.html'; return true;">   

• For each next submit only what you need to change is  action (onclick="diary.action=nameofaction;return true;" for submit button (and name that will be display and other unique setting for you submit button)

 <input type="submit" value="Load" onclick="diary.action='load.html'; return true;">   

 draft example:

<form method="POST" name="diary" action="save.html">
<!-- put all form rubbish stuff .... like this 3 lines below. -->
Title <input type="text" id="newseditor"/><br/>
Note<input type="textarea" id="newseditor"/><br/>
Is is true story<input type="checkbox" id="newseditor"/><br/>

 <!-- here is important place when you set multiple submit stuff with diffrent actions -->
<input type="submit" value="Save" onclick="diary.action='save.html'; return true;">
<input type="submit" value="Load" onclick="diary.action='load.html'; return true;">
</form>

how to make table using div in xhtml with css without using table tag

Let's say that you have allergy on using table tag and his friends ( tr td and etc) , but you have secret mission to create a amazing table.
Question is ... what to do ?
Answer is ... use div and CSS.

Easy to say, harder to do.
Many beginners spent hours on using bad language  about "why div are so f... complicated ,even for simple table".
Don't panic.
It is quite simple
You need 2 files
one with html where you
one with css where you store

In html you need to remember that
When you create div they need to have attribute class like:
<div class="sideLeft">  ,
so then browser knows where find style which should be  applied  to your specified div

In css you need to remember that class should be written in this way:
div.sideLeft
so browser can find specific div and apply defined style

How to translate my table from  table world to div world ?

In CSS you need remember to put 3 things

in div which will behave as  table tag <table> in css  should contain:
display: table;

in div which will behave as tr tag <tr> in css should contain:
display: table-row;

in div which will behave as tr tag <td> in css should contain:
display: table-cell;

 How it looks in practice ?
Here is example of table 3 x 2
(style are include in html file, however is a bad practice!)


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
div.page {
display: table;
width: 100%;
background-color: #004400;
}

div.leftSide {
display: table-cell;
}

div.middleSide {
display: table-cell;
background-color: #008800;
}

div.rightSide{
display: table-cell;
padding: 15px;
cellspacing: 5px;
text-align: right;
}
div.cell{
display: table-row;
font-family:"Verdana",Sans-serif;
font-size: 0.7em;
}
</style>
</head>
<body>
<div id="page">
<div align="left" id="leftSide" class="leftSide">
<div id="cell">
Cell 1
</div>
<div id="cell">
Cell 2
</div>
</div>

<div align="middle" id="middleSide" class="middleSide">
<div id="cell">
Cell 1
</div>
<div id="cell">
Cell 2
</div>
</div>

<div align="right" id="rightSide" class="rightSide">
<div id="cell">
Cell 1
</div>
<div id="cell">
Cell 2
</div>
</div>



</div>
</body>
</html>

How to use tab character in HTML

What is code for tab character ?
It is no HTML tab tag.

but... don't give up!

So what can you do ?
It is few ways to go around with these issue.
I will describe 2 most common ways and in the end i give 2 links to website where you have more crazy possibilities.

If you need tab once (up to few times on website) then use
&nbsp;&nbsp;&nbsp;&nbsp; (standard tab has usually 4 space equivalent )

If you planning using tab quite often ,then is better to  create css property as <p> or <span>
for
p.withTab {
 margin-left: 4em;
}

span.withTab {
 margin-left: 4em;
}

below you have 2 websites where you have more ways to implement tab in html
http://htmltab.kb-creative.net/
http://webdesign.about.com/od/intermediatetutorials/qt/tiphtmltab.htm