HTML
Showing posts with label HTML. Show all posts
Showing posts with label HTML. Show all posts

HTML5 Browser Support

3/24/2016 01:19:00 PM Add Comment

HTML5 Browser Support


HTML5 is supported in all modern browsers.

In addition, all browsers, old and new, automatically handle unrecognized elements as inline elements.

Because of this, you can "teach" older browsers to handle "unknown" HTML elements.

Define HTML5 Elements as Block Elements

HTML5 defines eight new semantic HTML elements. All these are block-level elements.

To secure correct behavior in older browsers, you can set the CSS display property to block:

header, section, footer, aside, nav, main, article, figure {
    display: block;
}

Adding New Elements to HTML

You can also add any new element to HTML with a browser trick.

This example adds a new element called <myHero> to HTML, and defines a display style for it:

Example

 <!DOCTYPE html>
<html>
<head>
  <title>Creating an HTML Element</title>
  <script>document.createElement("myHero")</script>
  <style>
  myHero {
      display: block;
      background-color: #ddd;
      padding: 50px;
      font-size: 30px;
  }
  </style>
</head>
<body>

 <h1>My First Heading</h1>

 <p>My first paragraph.</p>

 <myHero>My First Hero</myHero>

 </body>
</html>

Problem With Internet Explorer

You could use the solution described above, for all new HTML5 elements, but:

Thankfully, Sjoerd Visscher created the "HTML5 Enabling JavaScript", "the shiv":

<!--[if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

The code above is a comment, but versions previous to IE9 will read it (and understand it).

The Complete Shiv Solution



For detail please visit w3schools

HTML5 Introduction

3/10/2016 11:28:00 AM Add Comment

HTML5 Introduction

What is New in HTML5?

The DOCTYPE declaration for HTML5 is very simple:

<!DOCTYPE html>

The character encoding (charset) declaration is also very simple:

<meta charset="UTF-8">
HTML5 Example:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title of the document</title>
</head>

<body>
Content of the document......
</body>

</html>

Note The default character encoding in HTML5 is UTF-8.

New HTML5 Elements

The most interesting new elements are:
New semantic elements like <header>, <footer>, <article>, and <section>.
New form control attributes like number, date, time, calendar, and range.
New graphic elements: <svg> and <canvas>.
New multimedia elements: <audio> and <video>.

New HTML5 API's (Application Programming Interfaces)

The most interesting new API's are:


  • HTML Geolocation
  • HTML Drag and Drop
  • HTML Local Storage
  • HTML Application Cache
  • HTML Web Workers
  • HTML SSE


Elements Removed in HTML5

The following HTML4 elements have been removed from HTML5:

Element Use instead
<acronym> <abbr>
<applet> <object>
<basefont> CSS
<big> CSS
<center> CSS
<dir> <ul>
<font> CSS
<frame>
<frameset>
<noframes>
<strike> CSS
<tt> CSS


HTML History
Since the early days of the web, there have been many versions of HTML:



Tim Berners-Lee invented the "World Wide Web" in 1989, and the Internet took off in the 1990s.

From 1991 to 1998, HTML developed from version 1 to version 4.

In 2000, the World Wide Web Consortium (W3C) recommended XHTML 1.0.

The XHTML syntax was strict, and the developers were forced to write valid and "well-formed" code.

In 2004, WHATWG (Web Hypertext Application Technology Working Group) was formed in response to slow W3C development, and W3C's decision to close down the development of HTML, in favor of XHTML.

WHATWG wanted to develop HTML, consistent with how the web was used, while being backward compatible with older versions of HTML.

In the period 2004-2006, the WHATWG initiative gained support by the major browser vendors.

In 2006, W3C announced that they would support WHATWG.

In 2008, the first HTML5 public draft was released.

In 2012, WHATWG and W3C decided on a separation:

WHATWG will develop HTML as a "Living Standard".

A living standard is never fully complete, but always updated and improved. New features can be added, but old functionality can not be removed.

The WHATWG Living Standard was published in 2012, and is continuously updated.

W3C will develop a definitive HTML5 and XHTML5 standard, as a "snapshot" of WHATWG.

The W3C HTML5 recommendation was released 28 October 2014.

Reference Link

HTML Comment Tags

3/09/2016 06:33:00 AM Add Comment

HTML Comment Tags

You can add comments to your HTML source by using the following syntax:
<!-- Write your comments here -->

Comments are not displayed by the browser, but they can help document your HTML.

With comments you can place notifications and reminders in your HTML:

Example
<!-- This is a comment -->

 <p>This is a paragraph.</p>

 <!-- Remember to add more information here -->

Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors:

Example
<!-- Do not display this at the moment
<img border="0" src="pic_mountain.jpg" alt="Mountain">
-->

Conditional Comments

You might stumble upon conditional comments in HTML:



<!--[if IE 8]>
    .... some HTML here ....
<![endif]-->

 Conditional comments defines HTML tags to be executed by Internet Explorer only.

Software Program Tags

HTML comments tags can also be generated by various HTML software programs.

For example <!--webbot bot--> tags wrapped inside HTML comments by FrontPage and Expression Web.

As a rule, let these tags stay, to help support the software that created them.

HTML Block and Inline Elements

3/02/2016 03:32:00 AM Add Comment

HTML Block and Inline Elements

HTML elements can be categorized into two categories

  1. Block Level Elements
  2. Inline Elements

Block-level Elements

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

Block elements appear on the screen as if they have a line break before and after them. For example the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> elements are all block level elements. They all start on their own new line, and anything that follows them appears on its own new line.

Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary.
Inline elements, on the other hand, can appear within sentences and do not have to appear on a new line of their own. The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> elements are all inline elements.

Grouping HTML Elements

There are two important tags which we use very frequently to group various other HTML tags (i) <div> tag and (ii) <span> tag

The <div> tag

This is the very important block level tag which plays a big role in grouping various other HTML tags and applying CSS on group of elements. Even now <div> tag can be used to create webpage layout where we define different parts ( Left, Right, Top etc) of the page using <div> tag. This tag does not provide any visual change on the block but this has more meaning when it is used with CSS.

Example
Following is a simple example of <div> tag.

The <span> tag

The HTML <span> is an inline element and it can be used to group inline-elements in an HTML document. This tag also does not provide any visual change on the block but has more meaning when it is used with CSS.

The difference between the <span> tag and the <div> tag is that the <span> tag is used with inline elements where as the <div> tag is used with block-level elements.

Example
Following is a simple example of <span> tag.

<h1>My <span style="color:red">Important</span> Heading</h1>

HTML Lists

3/01/2016 10:32:00 AM Add Comment

HTML Lists

HTML offers web authors three ways for specifying lists of information. All lists must contain one or more list elements. Lists may contain:

<ul> - An unordered list. This will list items using plain bullets.
<ol> - An ordered list. This will use different schemes of numbers to list your items.
<dl> - A definition list. This arranges your items in the same way as they are arranged in a dictionary.

HTML Unordered Lists

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.

The list items will be marked with bullets (small black circles):

<ul>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Unordered HTML Lists - The Style Attribute

A style attribute can be added to an unordered list, to define the style of the marker:


Disc:
<ul style="list-style-type:disc">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Circle:
<ul style="list-style-type:circle">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

Square:
<ul style="list-style-type:square">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

None:
<ul style="list-style-type:none">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ul>

HTML Ordered Lists

An ordered list starts with the <ol> tag. Each list item starts with the <li> tag.

The list items will be marked with numbers:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Ordered HTML Lists - The Type Attribute

A type attribute can be added to an ordered list, to define the type of the marker:

<ol type="1"> - Default-Case Numerals.
<ol type="I"> - Upper-Case Numerals.
<ol type="i"> - Lower-Case Numerals.
<ol type="a"> - Lower-Case Letters.
<ol type="A"> - Upper-Case Letters.

Uppercase Letters:
<ol type="A">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Lowercase Letters:
<ol type="a">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Uppercase Roman Numbers:
<ol type="I">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Lowercase Roman Numbers:
<ol type="i">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

HTML Definition Lists

HTML and XHTML support a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia. The definition list is the ideal way to present a glossary, list of terms, or other name/value list.

Definition List makes use of following three tags.

<dl> - Defines the start of the list
<dt> - A term
<dd> - Term definition
</dl> - Defines the end of the list

Example:

<!DOCTYPE html>
<html>
<head>
<title>HTML Definition List</title>
</head>
<body>
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer Protocol</dd>
</dl>
</body>
</html>

HTML Introduction

2/20/2016 10:57:00 PM Add Comment
HTML Introduction

What is HTML?

HTML is a markup language for describing web documents (web pages).

HTML stands for Hyper Text Markup Language
A markup language is a set of markup tags
HTML documents are described by HTML tags
Each HTML tag describes different document content

HTML Files

Every web page is actually a HTML file. Each HTML file is just a plain-text file, but with a .html file extension instead of .txt, and is made up of many HTML tags as well as the content for a web page.

A web site will often contain many html files that link to each other. You can edit HTML files with your favourite editor.

HTML Tags

HTML tags are the hidden keywords within a web page that define how the browser must format and display the content.

Most tags must have two parts, an opening and a closing part. For example, <html> is the opening tag and </html> is the closing tag. Note that the closing tag has the same text as the opening tag, but has an additional forward-slash ( / ) character. I tend to interperet this as the "end" or "close" character.

There are some tags that are an exception to this rule, and where a closing tag is not required. The <img> tag for showing images is one example of this.

Each HTML file must have the essential tags for it to be valid, so that web browsers can understand it and display it correctly.

The rest of the HTML file can contain as little or as many tags as you want to display your content.

Tag Attributes

Attributes allow you to customise a tag, and are defined within the opening tag, for example:
<img src="image1.jpg"> or <p align="center"> ... </p>

Attributes are often assigned a value using the equals sign, such as border="0" or width="50%", but there are some that only need to be declared in the tag like this: <hr noshade>.

Most attributes are optional for most tags, and are only used when you want to change something about the default way a tag is displayed by the browser. However, some tags such as the <img> tag has required attributes such as src and alt which are needed in order for the browser to display the web page properly.

HTML Example


<!DOCTYPE html>
<html>
<head>
<title>Here Page Title</title>
</head>
<body>

<h1>Heading Here</h1>
<p>Start Paragraph.</p>

</body>
</html>

Web Browsers
The purpose of a web browser (Chrome, IE, Firefox, Safari) is to read HTML documents and display them.

The browser does not display the HTML tags, but uses them to determine how to display the document:




The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration helps the browser to display a web page correctly.

There are different document types on the web.

To display a document correctly, the browser must know both type and version.

The doctype declaration is not case sensitive. All cases are acceptable:

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>



Common Declarations

HTML5
<!DOCTYPE html>

HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">


HTML Versions
Since the early days of the web, there have been many versions of HTML:



Version
Year
HTML
1991
HTML 2.0
1995
HTML 3.2
1997
HTML 4.01
1999
XHTML
2000
HTML5
2014





Subscribe to: Posts (Atom)