Sunday 15 March 2015

Javascript Output

JavaScript does not have any built-in print or display functions.

JavaScript Display Possibilities

JavaScript can "display" data in different ways:

Writing into an alert box, using window.alert().
Writing into the HTML output using document.write().
Writing into an HTML element, using innerHTML.
Writing into the browser console, using console.log().

Using window.alert()

You can use an alert box to display data:.

Using document.write()

For testing purposes, it is convenient to use document.write():

Using innerHTML

To access an HTML element, JavaScript can use the document.getElementById(id) method.
The id attribute defines the HTML element. The innerHTML property defines the HTML content:

Using console.log()

In your browser, you can use the console.log() method to display data.
Activate the browser console with F12, and select "Console" in the menu.

JavaScript is the programming language of the Web.
All modern HTML pages are using JavaScript.

JavaScript Can Change HTML Content
One of many HTML methods is document.getElementById().
This example "finds" the HTML element with id="demo", and changes its content (innerHTML):

Example

document.getElementById("demo").innerHTML = "Hello JavaScript";

JavaScript Can Change HTML Styles (CSS)

Changing the style of an HTML element, is a variant of changing an HTML attribute:

Example

document.getElementById("demo").style.fontSize = "25px";

JavaScript can be placed in the <body> and the <head> sections of an HTML page.

The <script> Tag

In HTML, JavaScript code must be inserted between <script> and </script> tags.

Example

JavaScript Functions and Events

A JavaScript function is a block of JavaScript code, that can be executed when "asked" for.
For example, a function can be executed when an event occurs, like when the user clicks a button.
You will learn much more about functions and events in later chapters.

JavaScript in <head> or <body>

You can place any number of scripts in an HTML document.
Scripts can be placed in the <body>, or in the <head> section of an HTML page, or in both.

External JavaScript

Scripts can also be placed in external files.
External scripts are practical when the same code is used in many different web pages.
JavaScript files have the file extension .js.
To use an external script, put the name of the script file in the src (source) attribute of the <script> tag:

Css Floating

How Elements Float

Elements are floated horizontally, this means that an element can only be floated left or right, not up or down.
A floated element will move as far to the left or right as it can. Usually this means all the way to the left or right of the containing element.
The elements after the floating element will flow around it.
The elements before the floating element will not be affected.
If an image is floated to the right, a following text flows around it, to the left:

Turning off Float - Using Clear

Elements after the floating element will flow around it. To avoid this, use the clear property.
The clear property specifies which sides of an element other floating elements are not allowed.
Add a text line into the image gallery, using the clear property:

Css Positioning

Positioning

The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big.
Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method.
There are four different positioning methods.

Static Positioning

HTML elements are positioned static by default. A static positioned element is always positioned according to the normal flow of the page.
Static positioned elements are not affected by the top, bottom, left, and right properties.

Fixed Positioning

An element with a fixed position is positioned relative to the browser window, and will not move even if the window is scrolled:

Fixed positioned elements are removed from the normal flow. The document and other elements behave like the fixed positioned element does not exist.
Fixed positioned elements can overlap other elements.

Relative Positioning

A relative positioned element is positioned relative to its normal position:

Relatively positioned elements are often used as container blocks for absolutely positioned elements.

Absolute Positioning

An absolute position element is positioned relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>:

Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist.
Absolutely positioned elements can overlap other elements.

Overlapping Elements

When elements are positioned outside the normal flow, they can overlap other elements.
The z-index property specifies the stack order of an element (which element should be placed in front of, or behind, the others).
An element can have a positive or negative stack order:

Css Dimension

The CSS dimension properties allow you to control the height and width of an element.

All CSS Dimension Properties

Property	Description	Values
height	Sets the height of an element	auto length % inherit
max-height	Sets the maximum height of an element	none length % inherit
max-width	Sets the maximum width of an element	none length % inherit
min-height	Sets the minimum height of an element	length % inherit
min-width	Sets the minimum width of an element	length % inherit
width	Sets the width of an element	auto length % inherit

Css Padding

The CSS padding properties define the space between the element border and the element content.

Padding

The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element.
The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once.

Possible Values

Value	Description
length	Defines a fixed padding (in pixels, pt, em, etc.)
%	Defines a padding in % of the containing element

The padding property can have from one to four values.

padding: 25px 50px 75px 100px;
- top padding is 25px
- right padding is 50px
- bottom padding is 75px
- left padding is 100px
padding: 25px 50px 75px;
- top padding is 25px
- right and left paddings are 50px
- bottom padding is 75px
padding: 25px 50px;
- top and bottom paddings are 25px
- right and left paddings are 50px
padding: 25px;
- all four paddings are 25px

Css Margin

The CSS margin properties define the space around elements.

Margin

The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent.
The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once.

Possible Values

Value	Description
auto	The browser calculates a margin
length	Specifies a margin in px, pt, cm, etc. Default value is 0px
%	Specifies a margin in percent of the width of the containing element
inherit	Specifies that the margin should be inherited from the parent element

The margin property can have from one to four values.

margin: 25px 50px 75px 100px;
- top margin is 25px
- right margin is 50px
- bottom margin is 75px
- left margin is 100px
margin: 25px 50px 75px;
- top margin is 25px
- right and left margins are 50px
- bottom margin is 75px
margin: 25px 50px;
- top and bottom margins are 25px
- right and left margins are 50px
margin: 25px;
- all four margins are 25px

Css Lists

List

In HTML, there are two types of lists:

unordered lists (<ul>) - the list items are marked with bullets
ordered lists (<ol>) - the list items are marked with numbers or letters

With CSS, lists can be styled further, and images can be used as the list item marker.

Different List Item Markers

The type of list item marker is specified with the list-style-type property:

List - Shorthand property

The list-style property is a shorthand property. It is used to set all the list properties in one declaration:

When using the shorthand property, the order of the property values are:

list-style-type (if a list-style-image is specified, the value of this property will be displayed if the image for some reason cannot be displayed)
list-style-position (specifies whether the list-item markers should appear inside or outside the content flow)
list-style-image (specifies an image as the list item marker)

If one of the property values above are missing, the default value for the missing property will be inserted, if any.

Css Links

Links can be styled in different ways.

Styling Links

Links can be styled with any CSS property (e.g. color, font-family, background, etc.).

In addition, links can be styled differently depending on what state they are in.
The four links states are:

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

When setting the style for several link states, there are some order rules:

a:hover MUST come after a:link and a:visited
a:active MUST come after a:hover

Text Decoration

The text-decoration property is mostly used to remove underlines from links:

Background Color

The background-color property specifies the background color for links:

Css Fonts

CSS font properties define the font family, boldness, size, and the style of a text.

CSS Font Families

In CSS, there are two types of font family names:

generic family - a group of font families with a similar look (like "Serif" or "Monospace")
font family - a specific font family (like "Times New Roman" or "Arial")

Font Family

The font family of a text is set with the font-family property.
The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font.
Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available.
Note: If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman".
More than one font family is specified in a comma-separated list:

Font Style

The font-style property is mostly used to specify italic text.
This property has three values:

normal - The text is shown normally
italic - The text is shown in italics
oblique - The text is "leaning" (oblique is very similar to italic, but less supported)

The font-size property sets the size of the text.
Being able to manage the text size is important in web design. However, you should not use font size adjustments to make paragraphs look like headings, or headings look like paragraphs.
Always use the proper HTML tags, like <h1> - <h6> for headings and <p> for paragraphs.
The font-size value can be an absolute, or relative size.
Absolute size:

Sets the text to a specified size
Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
Absolute size is useful when the physical size of the output is known

Relative size:

Sets the size relative to surrounding elements
Allows a user to change the text size in browsers

Css Text

Text Color

The color property is used to set the color of the text.
With CSS, a color is most often specified by:

a HEX value - like "#ff0000"
an RGB value - like "rgb(255,0,0)"
a color name - like "red"

Text Alignment

The text-align property is used to set the horizontal alignment of a text.
Text can be centered, or aligned to the left or right, or justified.
When text-align is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight

Text Decoration

The text-decoration property is used to set or remove decorations from text.
The text-decoration property is mostly used to remove underlines from links for design purposes:

Text Transformation

The text-transform property is used to specify uppercase and lowercase letters in a text.
It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word.

Text Indentation

The text-indent property is used to specify the indentation of the first line of a text.

CSS Backgrounds

CSS background properties are used to define the background effects of an element.

CSS properties used for background effects:

background-color
background-image
background-repeat
background-attachment
background-position

Background Color

The background-color property specifies the background color of an element.

Background Image

The background-image property specifies an image to use as the background of an element.
By default, the image is repeated so it covers the entire element.

CSS

When a browser reads a style sheet, it will format the document according to the information in the style sheet.

Three Ways to Insert CSS

There are three ways of inserting a style sheet:

External style sheet
Internal style sheet
Inline style

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing just one file.
Each page must include a link to the style sheet with the <link> tag. The <link> tag goes inside the head section:

An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension. An example of a style sheet file called "myStyle.css", is shown below:

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, inside the <style> tag, like this:

Inline Styles

An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly!
To use inline styles, add the style attribute to the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a h1 element:

HTML5 You Tube

Playing a YouTube Video in HTML

To play your video on a web page, you can upload it to YouTube, and then insert the proper HTML code in your web page to display it:

there is two method for display youtube video in a web page

1)Iframe tag

2)Embed tag

HTML Multimedia

Multimedia on the web, is sound, music, videos, movies, and animations.

What is Multimedia?

Multimedia comes in many different formats. It can be almost anything you can hear or see.
Examples: Pictures, music, sound, videos, records, films, animations, and more.
Web pages often contains multimedia elements of different types and formats.
In this chapter you will learn about the different multimedia formats.

Playing Videos in HTML

Before HTML5, there was no standard for showing videos on a web page.
Before HTML5, videos could only be played with a plug-in (like flash).
The HTML5 <video> element specifies a standard way to embed a video in a web page.

HTML5 Video Tags

Tag	Description
<video>	Defines a video or movie
<source>	Defines multiple media resources for media elements, such as <video> and <audio>
<track>	Defines text tracks in media players

HTML5 provides a standard for playing audio files.

Audio on the Web

Before HTML5, there was no standard for playing audio files on a web page.
Before HTML5, audio files could only be played with a plug-in (like flash).
The HTML5 <audio> element specifies a standard way to embed audio in a web page.

The HTML <audio> Element

To play an audio file in HTML, use the <audio> element:

HTML5 Audio Tags

Tag	Description
<audio>	Defines sound content
<source>	Defines multiple media resources for media elements, such as <video> and <audio>

HTML5 Canvas

What is HTML Canvas?

The HTML <canvas> element is used to draw graphics, on the fly, via scripting (usually JavaScript).
The <canvas> element is only a container for graphics. You must use a script to actually draw the graphics.
Canvas has several methods for drawing paths, boxes, circles, text, and adding images.

A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content.
The markup looks like this:

Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas.
To add a border, use the style attribute:

HTML5 Semantic Elements

What are Semantic Elements?

A semantic element clearly describes its meaning to both the browser and the developer.
Examples of non-semantic elements: <div> and <span> - Tells nothing about its content.
Examples of semantic elements: <form>, <table>, and <img> - Clearly defines its content.

New Semantic Elements in HTML5

Many web sites contain HTML code like: <div id="nav"> <div class="header"> <div id="footer">
to indicate navigation, header, and footer.
HTML5 offers new semantic elements to define different parts of a web page:

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

HTML5 <section> Element

The <section> element defines a section in a document.
According to W3C's HTML5 documentation: "A section is a thematic grouping of content, typically with a heading."
A Web site's home page could be split into sections for introduction, content, and contact information.

HTML5 <article> Element

The <article> element specifies independent, self-contained content.
An article should make sense on its own, and it should be possible to read it independently from the rest of the web site.
Examples of where an <article> element can be used:

Forum post
Blog post
Newspaper article

HTML5 <header> Element

The <header> element specifies a header for a document or section.
The <header> element should be used as a container for introductory content.
You can have several <header> elements in one document.
The following example defines a header for an article:

HTML5 <footer> Element

The <footer> element specifies a footer for a document or section.
A <footer> element should contain information about its containing element.
A footer typically contains the author of the document, copyright information, links to terms of use, contact information, etc.
You can have several <footer> elements in one document.

HTML5 <nav> Element

The <nav> element defines a set of navigation links.
The <nav> element is intended for large blocks of navigation links. However, not all links in a document should be inside a <nav> element!

Tag	Description
<article>	Defines an article
<aside>	Defines content aside from the page content
<details>	Defines additional details that the user can view or hide
<figcaption>	Defines a caption for a <figure> element
<figure>	Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer>	Defines a footer for a document or section
<header>	Specifies a header for a document or section
<main>	Specifies the main content of a document
<mark>	Defines marked/highlighted text
<nav>	Defines navigation links
<section>	Defines a section in a document
<summary>	Defines a visible heading for a <details> element
<time>	Defines a date/time

Defines pre-defined options for input controls Defines a key-pair generator field (for forms) Defines the result of a calculation

HTML5 Elements

New Elements in HTML5

Below is a list of the new HTML5 elements, and a description of what they are used for.

New Semantic/Structural Elements

HTML5 offers new elements for better document structure:

Tag	Description
<article>	Defines an article in the document
<aside>	Defines content aside from the page content
<bdi>	Defines a part of text that might be formatted in a different direction from other text
<details>	Defines additional details that the user can view or hide
<dialog>	Defines a dialog box or window
<figcaption>	Defines a caption for a <figure> element
<figure>	Defines self-contained content, like illustrations, diagrams, photos, code listings, etc.
<footer>	Defines a footer for the document or a section
<header>	Defines a header for the document or a section
<main>	Defines the main content of a document
<mark>	Defines marked or highlighted text
<menuitem>	Defines a command/menu item that the user can invoke from a popup menu
<meter>	Defines a scalar measurement within a known range (a gauge)
<nav>	Defines navigation links in the document
<progress>	Defines the progress of a task
<rp>	Defines what to show in browsers that do not support ruby annotations
<rt>	Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby>	Defines a ruby annotation (for East Asian typography)
<section>	Defines a section in the document
<summary>	Defines a visible heading for a <details> element
<time>	Defines a date/time
<wbr>	Defines a possible line-break

HTML5

What is New in HTML5?

The DOCTYPE declaration for HTML5 is very simple:

<!DOCTYPE html>

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

HTML5 Example:

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

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

</html>

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

HTML Input Types

Input Type: text

<input type="text"> defines a one-line input field for text input:

Input Type: password

<input type="password"> defines a password field:

Input Type: submit

<input type="submit"> defines a button for submitting form input to a form-handler.
The form-handler is typically a server page with a script for processing input data.
The form-handler is specified in the form's action attribute:

Input Type: radio

<input type="radio"> defines a radio button.
Radio buttons let a user select ONLY ONE of a limited number of choices:

Input Type: checkbox

<input type="checkbox"> defines a checkbox.
Checkboxes let a user select ZERO or MORE options of a limited number of choices

Input Type: button

<input type="button"> defines a button:

HTML Forms Elements

The <input> Element

The most important form element is the <input> element.
The <input> element can vary in many ways, depending on the type attribute.

The <select> Element (Drop-Down List)

The <select> element defines a drop-down list:

The <option> elements defines the options to select.
The list will normally show the first item as selected.
You can add a selected attribute to define a predefined option.

The <textarea> Element

The <textarea> element defines a multi-line input field (a text area):

The <button> Element

The <button> element defines a clickable button:

HTML Forms Part2

The Action Attribute

The action attribute defines the action to be performed when the form is submitted.
The common way to submit a form to a server, is by using a submit button.
Normally, the form is submitted to a web page on a web server.
In the example above, a server-side script is specified to handle the submitted form:

The Method Attribute

The method attribute specifies the HTTP method (GET or POST) to be used when submitting the forms:

When to Use GET?

You can use GET (the default method):
If the form submission is passive (like a search engine query), and without sensitive information.
When you use GET, the form data will be visible in the page address:

When to Use POST?

You should use POST:
If the form is updating data, or includes sensitive information (password).
POST offers better security because the submitted data is not visible in the page address.

Grouping Form Data with <fieldset>

The <fieldset> element groups related data in a form.
The <legend> element defines a caption for the <fieldset> element.

Here is the list of <form> attributes:

Attribute	Description
accept-charset	Specifies the charset used in the submitted form (default: the page charset).
action	Specifies an address (url) where to submit the form (default: the submitting page).
autocomplete	Specifies if the browser should autocomplete the form (default: on).
enctype	Specifies the encoding of the submitted data (default: is url-encoded).
method	Specifies the HTTP method used when submitting the form (default: GET).
name	Specifies a name used to identify the form (for DOM usage: document.forms.name).
novalidate	Specifies that the browser should not validate the form.
target	Specifies the target of the address in the action attribute (default: _self).

HTML Forms Part1

The <form> Element

HTML forms are used to collect user input.
The <form> element defines an HTML form:

Example

<form>
.
form elements
.
</form>

HTML forms contain form elements.
Form elements are different types of input elements, checkboxes, radio buttons, submit buttons, and more.

The <input> Element

The <input> element is the most important form element.
The <input> element has many variations, depending on the type attribute.
Here are the types used in this chapter:

Type	Description
text	Defines normal text input
radio	Defines radio button input (for selecting one of many choices)
submit	Defines a submit button (for submitting the form)

HTML Head

The HTML <head> Element

The <head> element is a container for meta data (data about data).
HTML meta data is data about the HTML document. Metadata is not displayed.
Meta data typically define document title, styles, links, scripts, and other meta information.
The following tags describes meta data: <title>, <style>, <meta>, <link>, <script>, and <base>.

HTML head Elements

Tag	Description
<head>	Defines information about the document
<title>	Defines the title of a document
<base>	Defines a default address or a default target for all links on a page
<link>	Defines the relationship between a document and an external resource
<meta>	Defines metadata about an HTML document
<script>	Defines a client-side script
<style>	Defines style information for a document

HTML Iframes

An iframe is used to display a web page within a web page.

Iframe Syntax

The syntax for adding an iframe is:

The src attribute specifies the URL (web address) of the iframe page.

Iframe - Set Height and Width

Use the height and width attributes to specify the size.
The attribute values are specified in pixels by default, but they can also be in percent (like "80%").

Iframe - Remove the Border

By default, an iframe has a black border around it.
To remove the border, add the style attribute and use the CSS border property: border:none

HTML Blocks

HTML Block Elements and Inline Elements

Most HTML elements are defined as block level elements or inline elements.
Block level elements normally start (and end) with a new line, when displayed in a browser.
Examples: <h1>, <p>, <ul>, <table>
Inline elements are normally displayed without line breaks.
Examples: <b>, <td>, <a>, <img>

The HTML <div> Element

The HTML <div> element is a block level element that can be used as a container for other HTML elements.
The <div> element has no special meaning. It has no required attributes, but style and class are common.
Because it is a block level element, the browser will display line breaks before and after it.
When used together with CSS, the <div> element can be used to style blocks of content.

The HTML <span> Element

The HTML <span> element is an inline element that can be used as a container for text.
The <span> element has no special meaning. It has no required attributes, but style and class are common.
Unlike <div>, which is formatted with line breaks, the <span> element does not have any automatic formatting.
When used together with CSS, the <span> element can be used to style parts of the text:

HTML Lists

HTML can have Unordered lists, Ordered lists, or Description lists:

Unordered List

The first item
The second item
The third item
The fourth item

Ordered List

The first item
The second item
The third item
The fourth item

Description List

The first item

Description of item

The second item

Description of item

Unordered HTML 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).

Unordered HTML Lists - The Style Attribute

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

Style	Description
list-style-type:disc	The list items will be marked with bullets (default)
list-style-type:circle	The list items will be marked with circles
list-style-type:square	The list items will be marked with squares
list-style-type:none	The list items will not be marked

Ordered HTML 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.

Ordered HTML Lists - The Type Attribute

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

Type	Description
type="1"	The list items will be numbered with numbers (default)
type="A"	The list items will be numbered with uppercase letters
type="a"	The list items will be numbered with lowercase letters
type="I"	The list items will be numbered with uppercase roman numbers
type="i"	The list items will be numbered with lowercase roman numbers

HTML Description Lists

A description list, is a list of terms, with a description of each term.
The <dl> tag defines a description list.
The <dt> tag defines the term (name), and the <dd> tag defines the data (description).

HTML Tables

Tables are defined with the <table> tag.
Tables are divided into table rows with the <tr> tag.
Table rows are divided into table data with the <td> tag.
A table row can also be divided into table headings with the <th> tag.

<table style="width:100%">
<tr>
<td>First Name</td>
    <td>Last Name</td>
    <td>Age</td>
</tr>
<tr>
    <td>First Name</td>
    <td>Last Name</td>
    <td>Age</td>
</tr>
</table>

An HTML Table with a Border Attribute

If you do not specify a border for the table, it will be displayed without borders.
A border can be added using the border attribute:

<table style="width:100%" border="1">
<tr>
<td>First Name</td>
    <td>Last Name</td>
    <td>Age</td>
</tr>
<tr>
    <td>First Name</td>
    <td>Last Name</td>
    <td>Age</td>
</tr>
</table>

HTML Images

HTML Images Syntax

In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute defines the url (web address) of the image:

The alt Attribute

The alt attribute specifies an alternate text for the image, if it cannot be displayed.
The value of the alt attribute should describe the image in words:

Image Size - Width and Height

You can use the style attribute to specify the width and height of an image.

HTML Links

HTML Links - Hyperlinks

HTML links are hyperlinks.
A hyperlink is a text or an image you can click on, and jump to another document.

HTML Links - Syntax

In HTML, links are defined with the <a> tag:

HTML Links - Colors and Icons

When you move the mouse cursor over a link, two things will normally happen:

The mouse arrow will turn into a little hand
The color of the link element will change

By default, links will appear as this in all browsers:

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

You can change the defaults, using styles:

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.
This example will open the linked document in a new browser window or in a new tab

Saturday 14 March 2015

HTML CSS

Styling HTML with CSS

CSS stands for Cascading Style Sheets
Styling can be added to HTML elements in 3 ways:

Inline - using a style attribute in HTML elements
Internal - using a <style> element in the HTML <head> section
External - using one or more external CSS files

The most common way to add styling, is to keep the styles in separate CSS files. But, in this tutorial, we use internal styling, because it is easier to demonstrate, and easier for you to try it yourself.

CSS Syntax

CSS styling has the following syntax:

element { property:value; property:value }

The element is an HTML element name. The property is a CSS property. The value is a CSS value.
Multiple styles are separated with semicolon.

Inline Styling (Inline CSS)

Inline styling is useful for applying a unique style to a single HTML element:
Inline styling uses the style attribute.
This inline styling changes the text color of a single heading:

Internal Styling (Internal CSS)

An internal style sheet can be used to define a common style for all HTML elements on a page.
Internal styling is defined in the <head> section of an HTML page, using a <style> element:

External Styling (External CSS)

External style sheet are ideal when the style is applied to many pages.
With external style sheets, you can change the look of an entire web site by changing one file.
External styles are defined in an external CSS file, and then linked to in the <head> section of an HTML page:

HTML Comments

Comment tags  are used to insert comments in HTML.

HTML Comment Tags

You can add comments to your HTML source by using the following syntax:



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:

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

Conditional Comments

You might stumble upon conditional comments in HTML:

HTML Formatting

HTML Formatting Elements

HTML also defines special elements, for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
Formatting elements were designed to display special types of text:

Bold text
Important text
Italic text
Emphasized text
Marked text
Small text
Deleted text
Inserted text
Subscripts
Superscripts

HTML Bold and Strong Formatting

The HTML <b> element defines bold text, without any extra importance

The HTML <strong> element defines strong text, with added semantic "strong" importance.

HTML Italic and Emphasized Formatting

The HTML <i> element defines italic text, without any extra importance.

HTML Small Formatting

The HTML <small> element defines small text:

HTML Marked Formatting

The HTML <mark> element defines marked or highlighted text

HTML Deleted Formatting

The HTML <del> element defines deleted (removed) of text.

HTML Inserted Formatting

The HTML <ins> element defines inserted (added) text.

HTML _Subscript Formatting

The HTML <sub> element defines subscripted text.

HTML ^Superscript Formatting

The HTML <sup> element defines superscripted text.

HTML Styles

HTML Paragraphs

The HTML <p> element defines a paragraph.

HTML Styling

Every HTML element has a default style (background color is white and text color is black).
Changing the default style of an HTML element, can be done with the style attribute.
This example changes the default background color from white to red

<body style="background-color:#ff0000;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

The HTML style attribute has the following syntax:

style="property:value"

HTML Text Color

The color property defines the text color to be used for an HTML element:

HTML Fonts

The font-family property defines the font to be used for an HTML element:

HTML Text Size

The font-size property defines the text size to be used for an HTML element:

HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element:

HTML Headings

Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.

Headings Are Important

Use HTML headings for headings only. Don't use headings to make text BIG or bold.
Search engines use your headings to index the structure and content of your web pages.
Users skim your pages by its headings. It is important to use headings to show the document structure.
h1 headings should be main headings, followed by h2 headings, then the less important h3, and so on.

The HTML <head> Element

The HTML <head> element has nothing to do with HTML headings.
The HTML <head> element contains meta data. Meta data are not displayed.
The HTML <head> element is placed between the <html> tag and the <body> tag:

HTML Attributes

Attributes provide additional information about HTML elements.

HTML Attributes

HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name="value"

The href Attribute HTML links are defined with the tag. The link address is specified in the href attribute:

<a href="http://webgurunow.blogspot.in">Web Guru Now</a>

where href in attrubutes for <a> tag

HTML Elements

HTML elements are written with a start tag, with an end tag, with the content in between:

for example

if tag starts with <p> tag and it must end with </p> tag means <p> is a start tag and </p> is end tag.

all html elements must have start tag and an end tag and with content in between

HTML Basics

HTML Documents

All HTML documents must start with a type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.

HTML Headings

HTML headings are defined with the <h1> to <h6> tags:

HTML Paragraphs
HTML paragraphs are defined with the <p> tag:

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

HTML Links

HTML links are defined with the <a> tag:

The link address is specified in the href attribute.
Attributes are used to provide additional information about HTML elements.

HTML Images

HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), and size (width and height) are provided as attributes:

HTML Editors

Write HTML Using Notepad or TextEdit

HTML can be edited by using a professional HTML editor like:

Adobe Dreamweaver
Microsoft Expression Web
CoffeeCup HTML Editor

However, for learning HTML we recommend a text editor like Notepad (PC) or TextEdit (Mac).
We believe using a simple text editor is a good way to learn HTML.

What is HTML

What is HTML?

HTML is stand for Hyper Text Mark Up Language

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 example

<!DOCTYPE html>

<html>
<head>
<title>Page Title</title>
</head>

<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>

</html>

Pages

Sunday 15 March 2015

JavaScript Display Possibilities

Using window.alert()

Using document.write()

Using innerHTML

Using console.log()

Example

JavaScript Can Change HTML Styles (CSS)

Example

The <script> Tag

Example

JavaScript Functions and Events

JavaScript in <head> or <body>

External JavaScript

How Elements Float

Turning off Float - Using Clear

Positioning

Static Positioning

Fixed Positioning

Relative Positioning

Absolute Positioning

Overlapping Elements

All CSS Dimension Properties

Padding

Possible Values

Margin

Possible Values

List

Different List Item Markers

List - Shorthand property

Styling Links

Text Decoration

Background Color

CSS Font Families

Font Family

Font Style

Font Size

Text Color

Text Alignment

Text Decoration

Text Transformation

Text Indentation

Background Color

Background Image

Three Ways to Insert CSS

External Style Sheet

Internal Style Sheet

Inline Styles

Playing a YouTube Video in HTML

What is Multimedia?

Playing Videos in HTML

HTML5 Video Tags

Audio on the Web

The HTML <audio> Element

HTML5 Audio Tags

What is HTML Canvas?

What are Semantic Elements?

New Semantic Elements in HTML5

HTML5 <section> Element

HTML5 <article> Element

HTML5 <header> Element

HTML5 <footer> Element

HTML5 <nav> Element

New Elements in HTML5

New Semantic/Structural Elements

What is New in HTML5?

HTML5 Example:

New HTML5 Elements

New HTML5 API's (Application Programming Interfaces)

Input Type: text

Input Type: password

Input Type: submit

Input Type: radio

Input Type: checkbox

Input Type: button

The <input> Element

The <select> Element (Drop-Down List)

The <textarea> Element

The <button> Element