12 - HTML 5 and CSS

HTML 5

Question : If I do not put <! DOCTYPE html> will HTML 5 work?
Answer : No, browser will not be able to identify that it’s a HTML document and HTML 5 tags will not function properly.

Diff between HTML 5 Layout and HTML 4 or previous HTML?
Answer : A typical web page has headers, footers, navigation, central area and side bars. Now if we want to represent the same in HTML 4 with proper names to the HTML section we would probably use a DIV tag.

But in HTML 5 they have made it more clear by creating element names for those sections which makes your HTML more readable.

Below are more details of the HTML 5 elements which form the page structure.
<header>: Represents header data of HTML.
<footer>: Footer section of the page.
<nav>: Navigation elements in the page.
<article>: Self-contained content.
<section>: Used inside article to define sections or group content in to sections.
<aside>: Represent side bar contents of a page.

Question : What is datalist in HTML 5?
Answer : Datalist element in HTML 5 helps to provide autocomplete feature in a textbox as shown below.
Below is the HTML code for DataList feature:-

<input list="Country">
<datalist id="Country">
<option value="India">
<option value="Italy">
<option value="Iran">
<option value="Israel">
<option value="Indonesia">
</datalist>

Question : What are the different new form element types in HTML 5?
Answer : There are 10 important new form elements introduced in HTML 5:-

Color.
Date
Datetime-local
Email
Time
Url
Range
Telephone
Number
Search
Let’s understand these elements step by step.

If you want to show color picker dialog box.
<input type="color" name="favcolor">

If you want to show calendar dialog box.
<input type="date" name="bday">

If you want to show calendar with local time.
<input type="datetime-local" name="bdaytime">

If you want to create a HTML text with email validation we can set the type as “email”.
<input type="email" name="email">

For URL validation set the type as “url” as shown in the below HTML code.
<input type="url" name="sitename">

If you want to display textbox with number range you can set type to number.
<input type="number" name="quantity" min="1" max="5">

If you want to display a range control you can use type as range.
<input type="range" min="0" max="10" step="2" value="6">

Want to make text box as search engine box.
<input type="search" name="googleengine">

Want to only take time input.
<input type="time" name="usr_time">

If you want to make text box to accept telephone numbers.
<input type="tel" name="mytel">

Question : What is the use of column layout in CSS?
Answer : CSS column layout helps you to divide your text in to columns. For example consider the below magazine news which is one big text but we need to divide the same in to 3 columns with a border in between. That’s where HTML 5 column layout comes to help.

To implement column layout we need to specify the following:-

How many columns we want to divide the text in to?
To specify number of columns we need to us column-count. “webkit” and “moz-column” are needed for chrome and firefox respectively.
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3; 

How much gap we want to give between those columns ?
-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:20px; 

Do you want to draw a line between those columns , if yes how much thick ?
-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:6px outset #ff00ff; 

Below is the complete code for the same.
<style>
.magazine
{
-moz-column-count:3; /* Firefox */
-webkit-column-count:3; /* Safari and Chrome */
column-count:3;

-moz-column-gap:40px; /* Firefox */
-webkit-column-gap:40px; /* Safari and Chrome */
column-gap:20px;

-moz-column-rule:4px outset #ff00ff; /* Firefox */
-webkit-column-rule:4px outset #ff00ff; /* Safari and Chrome */
column-rule:6px outset #ff00ff;
}
</style> 

You can then apply the style to the text by using the class attribute.

<div class="magazine">
Your text goes here which you want to divide in to 3 columns.
</div> 

Question : What is WebSQL?
Answer : WebSQL is a structured relational database at the client browser side. It’s a local RDBMS inside the browser on which you can fire SQL queries.

Question : What are some of the key new features in HTML5?
Key new features of HTML5 include:
Improved support for embedding graphics, audio, and video content via the new <canvas>, <audio>, and <video> tags.
Extensions to the JavaScript API such as geolocation and drag-and-drop as well for storage and caching.
Introduction of “web workers”.
Several new semantic tags were also added to complement the structural logic of modern web applications. These include the <main>, <nav>, <article>, <section>, <header>, <footer>, and <aside> tags.
New form controls, such as <calendar>, <date>, <time>, <email>, <url>, and <search>.

Question : What are “web workers”?
Answer : Web workers at long last bring multi-threading to JavaScript.
A web worker is a script that runs in the background (i.e., in another thread) without the page needing to wait for it to complete. The user can continue to interact with the page while the web worker runs in the background. Workers utilize thread-like message passing to achieve parallelism.

Question : Briefly describe the correct usage of the following HTML5 semantic elements: <header>, <article>, <section>, <footer>.

Answer : The <header> element is used to contain introductory and navigational information about a section of the page. This can include the section heading, the author’s name, time and date of publication, table of contents, or other navigational information.

The <article> element is meant to house a self-contained composition that can logically be independently recreated outside of the page without losing it’s meaning. Individual blog posts or news stories are good examples.

The <section> element is a flexible container for holding content that shares a common informational theme or purpose.

The <footer> element is used to hold information that should appear at the end of a section of content and contain additional information about the section. Author’s name, copyright information, and related links are typical examples of such content.

Question : What’s the difference between standards mode and quirks mode?
Answer : Quirks Mode is a default compatibility mode and may be different from browser to browser, which may result to a lack of consistency in appearance from browser to browser.

CSS

Question : What is the tag where we declare css class?
Answer : style tag is used to declare the css class, e.g.
<style type="text/css"></style>

What is Universal Selector?
Pattern:*
Description: This selector matches any element name in the document’s language. If a rule does not have an explicit selector, the universal selector is inferred.
* {color: red;}
div * p {color: blue;}

What is Descendant Selector? 
Pattern: element1 element2
Description: This allows the author to select an element based on its status as a descendant of another element. The matched element can be a child, grandchild, great-grandchild, etc., of the ancestor element.(CSS1 referred to these as “contextual selectors.”)
Examples:
body h1 {font-size: 200%;}
table tr td div ul li {color: purple;}

What is Child Selector?
Pattern: element1 > element2
Description: This type of selector is used to match an element based on its status as a child of another element. It is more restrictive than a descendant selector, as only a child will be matched.
Examples:
div > p {color: cyan;}
ul > li {font-weight: bold;}


Question : What is The element Selector?
Answer : if we declare the css class as follows
p {
    text-align: center;
    color: red;
} 
Means all the paragraph in the page will have text-align as center and text color will be red.

Question : What is the Id selector ?
Answer : if we declar a css class preceded with the # then any element having the
#para1 {
    text-align: center;
    color: red;
}

Question : What is class selector?
Answer : if we declare the class preceded with the dot(.) then it is class selector, so if you apply this class with the class attribute then styling will be applied.
.center {
    text-align: center;
    color: red;
}

Question : List down Structural Pseudo-Classes.
:empty-> Matches elements that have no child nodes; that is, no child elements or content nodes. Content nodes are defined as any text, whitespace, entity reference, or CDATA nodes. Thus, <p> </p> is not empty; nor is the element empty if the space is replaced with a newline. Note that this pseudo-class does not apply to empty elements such as br, img, input, and so on.
Example :
p:empty {padding: 1em; background: red;}
li:empty {display: none;}

:first-child->Matches an element when it is the first child of another element. Thus, div:first-child will select any div that is the first child of another element, not the first child element of any div.
Examples:
td:first-child {border-left: 1px solid;}
p:first-child {text-indent: 0; margin-top: 2em;}

:first-of-type -> Matches an element when it is the first child of its type of another element. Thus, div:first-of-type will select any div that is the first child div of another element.
Examples:
td:first-of-type {border-left: 1px dotted;}
h2:first-of-type {color: fuchsia;}

:last-child -> Matches an element when it is the last child of another element. Thus, div:last-child will select any div that is the last child of another element, not the last child element of any div.

:last-of-type -> Matches an element when it is the last child of its type of another element. Thus, div:last-of-type will select any div that is the last child div of another element.

:only-child -> Matches an element that is the only child element of its parent element. A common use case for this selector is to remove the border from any linked image, assuming that said image is the only element in the link. Note that an element can be selected by :only-child even if it has its own child or children. It must only be the only child of its parent.

Question : List down Interaction Pseudo-Classes?
:active -> This applies to an element during the period in which it is being activated. The most common example is clicking on a hyperlink in an HTML document: while the mouse button is being held down, the link is active. There are other ways to activate elements, and other elements can in theory be activated, although CSS doesn’t define them.

:checked -> Matches any user interface element that has been “toggled on,” such as a checked checkbox or a filled radio button.

:disabled -> Matches user interface elements that are not able to accept user input because of language attributes or other nonpresentational means; for example, <input type="text" disabled> in HTML5. Note that :disabled does not apply when an input element has simply been removed from the viewport with properties like posi tion or display.
Examples:
input:disabled {opacity: 0.5;}

:enabled -> Matches user interface elements that are able to accept user input and that can be set to “enabled” and “disabled” states through the markup language itself. This includes any form input element in (X)HTML, but does not include hyperlinks.

:focus -> This applies to an element during the period in which it has focus. One example from HTML is an input box that has the text-input cursor within it such that when the user starts typing, text will be entered into that box. Other elements, such as hyperlinks, can also have focus; however, CSS does not define which elements may have focus.

:hover-> This applies to an element during the period in which it is being hovered (when the user is designating an element without activating it). The most common example of this is moving the mouse pointer inside the boundaries of a hyperlink in an HTML document. Other elements can in theory be hovered, although CSS doesn’t define which ones.

:target -> Matches an element which is itself matched by the fragment identifier portion of the URI used to access the page. Thus, http:// www.w3.org/TR/css3-selectors/#target-pseudo would be matched by :target and would apply the declared styles to any element with the id of target-pseudo. If that element was a paragraph, it would also be matched by p:target.

What is media Query?
The @media rule is used to define different style rules for different media types/devices.

In CSS2 this was called media types, while in CSS3 it is called media queries.

Media queries look at the capability of the device, and can be used to check many things, such as:

• width and height of the browser window
• width and height of the device
• orientation (is the tablet/phone in landscape or portrait mode?)
• resolution
• and much more

Question : List down some example for the attribute selectors.
Answer : 
1) Simple Attribute Selector
Pattern: element1[attr]

Description: This allows authors to select any element based on the presence of an attribute, regardless of the attribute’s value.

Examples:
a[rel] {border-bottom: 3px double gray;}
p[class] {border: 1px dotted silver;}

2) Exact Attribute Value Selector
Pattern: element1[attr="value"]

Description: This allows authors to select any element based on the precise and complete value of an attribute.

Examples:
a[rel="Start"] {font-weight: bold;}
p[class="urgent"] {color: red;}

3) Partial Attribute Value Selector
Pattern: element1[attr~="value"]

Description: This allows authors to select any element based on a portion of the space-separated value of an attribute. Note that [class~="value"] is equivalent to .value (see above).

Examples:
a[rel~="friend"] {text-transform: uppercase;}
p[class~="warning"] {background: yellow;}

4) Beginning Substring Attribute Value Selector
Pattern: element1[attr^="substring"]

Description: This allows authors to select any element based on a substring at the very beginning of an attribute’s value.

Examples:
a[href^="/blog"] {text-transform: uppercase;}
p[class^="test-"] {background: yellow;}

5) Ending Substring Attribute Value Selector
Pattern: element1[attr$="substring"]

Description: This allows authors to select any element based on a substring at the very end of an attribute’s value.

Example:
a[href$=".pdf"] {font-style: italic;}

6) Arbitrary Substring Attribute Value Selector

Pattern: element1[attr*="substring"]

Description: This allows authors to select any element based on a substring found anywhere within an attribute’s value.

Examples:
a[href*="oreilly.com"] {font-weight: bold;}
div [class*="port"] {border: 1px solid red;}

7) Language Attribute Selector
Pattern: element1[lang|="lc"]

Description: This allows authors to select any element with a lang attribute whose value is a hyphen-separated list of values, starting with the value provided in the selector.

Example:
html[lang|="tr"] {color: red;}

Question : Can give the precedence between id selector, element selector, class , in line style?
Answer : following is order in which they are calculated.
 

Question : Do you have code to demonstrate the same?
Answer : Following is the code and the ouput

<style type="text/css"> p {        color: green; } #blueid {        color: blue; } .redClass {        color: red; } </style> <meta charset="ISO-8859-1"> <title>CSS Selector Example</title> </head> <body>        <p>Vikash Chandra Mishra In red</p>        <!-- As it is <P> then color is green -->        <p class="redClass">Vikash Chandra Mishra In Red</p>        <!-- As it us <P> with the class Redclass then color is red -->        <p id="blueid" class="redClass">Vikash Chandra Mishra In Blue</p>        <!-- Now even though it is <P> and class is red but it has id as blueid so the color is blue -->        <p style="color: pink;" id="blueid" class="redClass">Vikash Chandra               Mishra In Blue</p>        <!-- Now even though it is <P> and class is red but and also id as blue id but it has one inline style so the color is pink --> </body>

Output

 

Question :  How can you group the selectors.

Answer : declare the selectors separated by commas(,) e.g. 

<head> <style type="text/css"> p, #redId, .redClass{        color : red;        text-align:center;        background-color : orange; } </style> </head> <body> <p>vikash</p> <div id="redId">vikash</div> <div></div> <div class="redClass">vikash</div> </body>

  

Output

Question : What style will be used when there is more than one style specified for an HTML element?
Answer : Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number four has the highest priority:

1. Browser default
2. External style sheet
3. Internal style sheet (in the head section)
4. Inline style (inside an HTML element)

Question : How to align text in HTMl?
Answer  : text-align with the following property left, right, center and justify.

Question : How to decorate the text?
Answer : with the text-decoration property and values with the underline, overline, line-through.

Question : Can we apply multiple decoration for same line?
Answer : Yes,  following is the example
#main.decorateme{
    text-decoration : underline overline line-through
}
Output :



Question : How can you transform the text?
Answer : Using text-transform property, the values can be uppercase, lowercase and capitalize, the capitalize is one of the good utility where we want to display the heading of field label for the forms where want to capitalize first character of the word.

Question : Wha is white space property?
Answer : This property will help the us to define on how to handle the white space, following are the common usage of white space.

value	Description
normal	Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary. This is default
nowrap	Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered
pre	Whitespace is preserved by the browser. Text will only wrap on line breaks. Acts like the <pre> tag in HTML.
pre-line	Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks.
pre-wrap	Whitespace is preserved by the browser. Text will wrap when necessary, and on line breaks.

Below is example of white-space

<!DOCTYPE html> <html> <head> <meta charset="ISO-8859-1"> <style type="text/css"> .defaultClass {        width:350px;        border: solid;        } .normalWhiteSpace{        white-space : normal; } .nowrpaWhiteSpace{        white-space : nowrap; } .preWhiteSpace{        white-space : pre; } .prelineWhiteSpace{        white-space : pre-line; } .prewrapWhiteSpace{        white-space : pre-wrap; } </style> <title>Insert title here</title> </head> <body> <div class="defaultClass normalWhiteSpace">Hi How are you if you are not well then let me know I am not a doctor but I can call the doctor because<BR/>     I know so many doctors<BR/></div> <br/> <div class="defaultClass nowrpaWhiteSpace">Hi How are you if you are not well then let me know I am not a doctor but I can call the doctor because<BR/>     I know so many doctors<BR/></div> <br/> <div class="defaultClass preWhiteSpace">Hi How are you if you are not well then let me know I am not a doctor but I can call the doctor because<BR/>        I know so many doctors<BR/></div> <br/> <div class="defaultClass prelineWhiteSpace">Hi How are you if you are not well then let me know I am not a doctor but I can call the doctor because<BR/>    I know so many doctors<BR/></div> <br/> <div class="defaultClass prewrapWhiteSpace">Hi How are you if you are not well then let me know I am not a doctor but I can call the doctor because<BR/>    I know so many doctors<BR/></div> <br/> </body> </html>

 







Question : What is the diff between font-variant : small-caps and text-transform : uppercase?
Answer : Here is the code and output
 
output: 

 


 So as you can see the all the alphabets are capital but all the letters apart from H in Hello is having similar height to the lowercase counter part, HELLO and Hello so bot the in the above example is having same height but in case of text transform it's plain and simple capital letters, no height diff between any character.

Question : Give the demo of  font weight?



















Question : How do you style the link?
Answer : Following is the properties related to the styling of the link.

• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked

Following is the example, there is one catch, we have till now used .(dot) #(hash) and element selector starting from the link i.e. a (anchor) tag, we are using : (colon).
Example for that are as follows.

a:link {
    color: #FF0000;
}
/* visited link */
a:visited {
    color: #00FF00;
}
/* mouse over link */
a:hover {
    color: #FF00FF;
}
/* selected link */
a:active {
    color: #0000FF;
}

So based on the current link status, the color of the text will get change.

What are Pseudo-classes?
A pseudo-class is used to define a special state of an element.
For example, it can be used to:

• Style an element when a user mouses over it
• Style visited and unvisited links differently

Question : What is the diff between UL and OL?

Answer : As name suggest one is ordered list hence the list will be preceded with the number, and for <UL> i.e. the unordered list, the list will be preceded with bullets.

The output will be

Question : List down the css style for un ordered list?

Answer : 

• circle
• square
• disc

Question : List down the css style for ordered list?
Answer : 

• decimal;
• decimal-leading-zero;
• upper-roman;
• upper-alpha;
• upper-latin;
• lower-roman;
• lower-greek;
• lower-alpha;
• lower-latin;  

Question : How to fix the border with the two lines?
 

Answer : The following style can be applied on the table to make the table border to be collapse as single line.
 

Question : Explain the Box Model
 

Answer : As per the above image find the explanation of the box model

• Content - The content of the box, where text and images appear
• Padding - Clears an area around the content. The padding is transparent
• Border - A border that goes around the padding and content
• Margin - Clears an area outside the border. The margin is transparent.

Question : What is CSS Outline Property.
Answer : An outline is a line that is drawn around elements (outside the borders) to make the element "stand out". However, the outline property is different from the border property.The outline is not a part of an element's dimensions; the element's total width and height is not affected by the width of the outline.

Question : What is diff between outline and border?
Answer : The main diff is the outline doesn't take up the space but border will take, the outline doesn't have any width property, so all we get is the style of outline, e.g. to demonstrate the border and outline, below is the line without any styling like border or outline

Now we will apply the following style




 

to show the space difference we kept the border color as white. 

 

 

to show the outline we added following css




 


 

So as it can be seen no space taken by the outline, each element is at the same place as it was. 

Question : What is the diff between display:none and visibility:hidden?
Answer : Diff is as follows,

• visibility:hidden hides an element, but it will still take up the same space as before. The element will be hidden, but still affect the layout.
• display:none hides an element, and it will not take up any space. The element will be hidden, and the page will be displayed as if the element is not there. 

Question : What is the diff between inline and block?
Answer :

A block element is an element that takes up the full width available, and has a line break before and after it.

Examples of block elements:

• <h1>
• <p>
• <li>
• <div>

An inline element only takes up as much width as necessary, and does not force line breaks.

Examples of inline elements:

• <span>
• <a>

Question : What is overflow in css?
Answer : This property specify, what will happen if the element tries to occupy more space than allocation, 

• visible: The overflow is not clipped. It renders outside the element's box. This is default
• hidden: The overflow is clipped, and the rest of the content will be invisible.
• scroll:   The overflow is clipped, but a scroll-bar is added to see the rest of the content
• auto:     If overflow is clipped, a scroll-bar should be added to see the rest of the content
• initial:   Sets this property to its default value. Read about initial  

Question : Difference between HTML overflow : auto and overflow : scroll.
Answer :  Auto will only show a scrollbar when any content is clipped. Scroll will however always show the scrollbar even if all content fits and you cant scroll it.



circularnavigation
http://java-is-the-new-c.blogspot.de/2015/07/polymer-webcomponents-served-with-java.html
http://webdesign.about.com/od/faqsandhelp/f/bl_faq5_7a.htm
https://www.youtube.com/watch?v=eU5t3MuzFQk