Showing posts with label Tutorials. Show all posts
Showing posts with label Tutorials. Show all posts

Thursday, May 15, 2014

CSS Background

CSS Tutorial Tutorials


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
  • The background-color property is used to set the background color of an element.
  • The background-image property is used to set the background image of an element.
  • The background-repeat property is used to control the repetition of an image in the background.
  • The background-position property is used to control the position of an image in the background.
  • The background-attachment property is used to control the scrolling of an image in the background.
  • The background property is used as shorthand to specify a number of other background properties.
Background-color:

<!DOCTYPE html>
<html>
<head>
<style>
div
{
background-color:#999;
width:400px;
height:250px;
}
p{
text-align:center;
top:45%;
position:relative;
}
</style>
</head>
<body>
<div>
<p>Hello this is div background color</p>
</div>
</body>
</html>
Background-Image:

<!DOCTYPE html>
<html>
<head>
<style>
body { background-image:url('bg.png'); }
</style>
</head>
<body>
<h1>background Image</h1>
</body>
</html>
Background Image repeat Horizontally or Vertically:

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('gradient2.png');
background-repeat: repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
If the image is repeated only horizontally (repeat-x), the background will look better:

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
If the image is repeated only vertically (repeat-y), the background will look better:

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('gradient2.png');
background-repeat:repeat-y;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>

Background Image - Set position and no-repeat

Note: When using a background image, use an image that does not disturb the text.
Showing the image only once is specified by the background-repeat property:
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>W3Schools background image example.</p>
<p>The background image is only showing once, but it is disturbing the reader!</p>
</body>
</html>
The position of the image is specified by the background-position property:
<!DOCTYPE html>
<html>
<head>
<style>
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>W3Schools background no-repeat, set position example.</p>
<p>Now the background image is only shown once, and positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so the background image will never disturb the text.</p>
</body>
</html>

Background - Shorthand property

<!DOCTYPE html>
<html>
<head>
<style>
body
{
background:#ffffff url('img_tree.png') no-repeat right top;
margin-right:200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>Now the background image is only shown once, and it is also positioned away from the text.</p>
<p>In this example we have also added a margin on the right side, so that the background image will not disturb the text.</p>
</body>
</html>
When using the shorthand property the order of the property values is:
  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position
Read More

How to include CSS

CSS Tutorial Tutorials

There are four ways to associate styles with your HTML document. Most commonly used methods are inline CSS and External CSS.
  1. Inline Style
  2. Internal Style Sheet
  3. External Style Sheet
  4. Import Style Sheet
External Style Sheet:
An external style sheet is ideal when the style is applied to many pages.
External style sheet include using <link> tag. The <link> tag goes inside the head section.

<head>
<link type=”text/css” rel=”stylesheet” href=”style.css” />
</head>
Your style sheet should be saved with a .css extension Example: style.css
Internal Style Sheet:
An style sheet should be used when a single document has a unique style. Internal style sheet using inside head section.
Example:
<head>
<style type=”text/css”>
.paragraph{ color:red: text-align:center; }
</style>
</head>
Inline CSS
Inline Style use the style attribute in the revelant tag.
Example:
<h1 style=”color:blue; font-size:20px”>Hello world!</h1>

Imported CSS - @import Rule:

@import is used to import an external stylesheet in a manner similar to the <link> element. Here is the generic syntax of @import rule.
<head>
<@import "URL";
</head>
Here URL is the URL of the style sheet file having style rules. You can use another syntax as well:
<head>
<@import url("URL");
</head>

Example:

Following is the example showing you how to import a style sheet file into HTML document:
<head>
@import "mystyle.css";
</head>
Read More

CSS Class & Id Selector

CSS Tutorial Tutorials

The id and class Selectors

In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class".

The id Selector

The id selector is used to specify a style for a single, unique element.
The id selector uses the id attribute of the HTML element, and is defined with a "#".
The style rule below will be applied to the element with id="heading":
Example:
<!DOCTYPE html>
<html>
<head>
<style>
#heading
{
color:red;
}
</style>
</head>
<body>
<h1 id="heading">Hello World!</h1>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
Do NOT start an ID name with a number!

The class Selector

The class selector is used to specify a style for a group of elements. Unlike the id selector, the class selector is most often used on several elements.
This allows you to set a particular style for many HTML elements with the same class.
The class selector uses the HTML class attribute, and is defined with a "."
In the example below, all HTML elements with class="center" will be center-aligned:
<!DOCTYPE html>
<html>
<head>
<style>
.heading
{
text-align:center;
color:#FF0000;
}
.para{
text-align:center;
color:#777;
}
</style>
</head>
<body>
<h1 class="heading">Center-aligned heading</h1>
<p class="para">Center-aligned paragraph.</p>
</body>
</html>
Do NOT start a class name with a number!

Other CSS Selectors:

The Universal Selectors:

Rather than selecting elements of a specific type, the universal selector quite simply matches the name of any element type :
* { 
  color: #000000; 
}
This rule renders the content of every element in our document in black.

The Descendant Selectors:

Suppose you want to apply a style rule to a particular element only when it lies inside a particular element. As given in the following example, style rule will apply to <em> element only when it lies inside <ul> tag.

ul em {
color: #000000;
}
Read More

CSS Syntax

CSS Tutorial Tutorials


CSS Syntax:

A CSS comprises of style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule is made of three parts:
  • Selector: A selector is an HTML tag at which style will be applied. This could be any tag like <h1> or <table> etc.
  • Property: A property is a type of attribute of HTML tag. Put simply, all the HTML attributes are converted into CSS properties. They could be color or border etc.
  • Value: Values are assigned to properties. For example color property can have value either red or #F1F1F1 etc.
Example:

<!DOCTYPE html>
<html>
<head>
<style>
h1
{
color:#FFC000;
text-align:center;
}
p{
color:#CCF;
text-align:center;
font-family:'arial';
font-size:'20px';
}
</style>
</head>
<body>
<h1>this is heading styled with CSS</h1>
<p>This paragraph is styled with CSS.</p>
</body>
</html>
Read More

CSS Introduction

CSS Tutorial Tutorials


What You Should Already Know

Before you continue you should have a basic understanding of the following:
  • HTML / XHTML
If you want to study these subjects first, Here are the tutorial link Html Tutorial.

What is CSS?

Cascading Style Sheets, fondly referred to as CSS, is a simple design language intended to simplify the process of making web pages presentable.
CSS handles the look and feel part of a web page. Using CSS, you can control the color of the text, the style of fonts, the spacing between paragraphs, how columns are sized and laid out, what background images or colors are used, as well as a variety of other effects.
CSS is easy to learn and understand but it provides powerful control over the presentation of an HTML document. Most commonly, CSS is combined with the markup languages HTML or XHTML.

Advantages of CSS:

  • CSS saves time - You can write CSS once and then reuse same sheet in multiple HTML pages. You can define a style for each HTML element and apply it to as many Web pages as you want.
  • Pages load faster - If you are using CSS, you do not need to write HTML tag attributes every time. Just write one CSS rule of a tag and apply to all the occurrences of that tag. So less code means faster download times.
  • Easy maintenance - To make a global change, simply change the style, and all elements in all the web pages will be updated automatically.
  • Superior styles to HTML - CSS has a much wider array of attributes than HTML so you can give far better look to your HTML page in comparison of HTML attributes.
  • Multiple Device Compatibility - Style sheets allow content to be optimized for more than one type of device. By using the same HTML document, different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing.
  • Global web standards - Now HTML attributes are being deprecated and it is being recommended to use CSS. So its a good idea to start using CSS in all the HTML pages to make them compatible to future browsers.

CSS Saves a Lot of Work!

CSS defines HOW HTML elements are to be displayed.
Styles are normally saved in external .css files. External style sheets enable you to change the appearance and layout of all the pages in a Web site, just by editing one single file!
Read More

Tuesday, May 13, 2014

HTML Iframes

HTML-Tutorial Tutorials

An iframe is used to display a web page within a web page.
Sytax for adding an Iframe:
<iframe src=”url”></iframe>
Url using for display website or webpage in Iframe.
Iframe attributes:
Height and Width attribute:
Set height and Width of the iframe.
Example:
<iframe src=”google.com” height=”200” width=”400”></iframe>
Border attribute:
<iframe src=”google.com”  frameborder=”0”></iframe>
Target attribute:
The target attribute of a link must refer to the name attribute of the iframe.
<iframe src=”demo.html” name=”iframe_a”></iframe>
<a href=”http://google.com” target =”iframe_a”>google.com</a>

Read More

HTML Forms

HTML-Tutorial Tutorials

Forms are used to collect data input by a user. They can be used as an interface for a web application for example or to send data across the web.
An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements.
The <form> tag is used to create an HTML form:
<form>
Input elements
</form>
Input elements:
Text fields:
<form>
<input type=”text” name=”firstname” /> : First Name <br />
<input type=”” name==”lastname” />: Last Name
Note: the form itself is not visible. Also note that the default width of a text field is 20 characters.
Password field:
<form>
<input type=”password” name=”pwd” />: Password
Note: the characters in a password field are masked(shown as asterisks or circles).

Radio Buttons

<input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices:
<form>
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
How the HTML code above looks in a browser:


Male
Female

Checkboxes

<input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices.
<form>
<input type="checkbox" name="vehicle" value="Bike">I have a bike<br>
<input type="checkbox" name="vehicle" value="Car">I have a car 
</form>
How the HTML code above looks in a browser:


I have a bike
I have a car

Submit Button

<input type="submit"> defines a submit button.
A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input:
<form name="input" action="html_form_action.asp" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
How the HTML code above looks in a browser:


Username: 

If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". The page will show you the received input.

Read More

HTML Div Element

HTML-Tutorial Tutorials

The div element is a block level element used for grouping HTML elements.
The following example uses five div elements to create a multiple column layout, creating the same result as in the previous example:
<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#CCF;">
<h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

<div id="menu" style="background-color:#FFC;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#ccc;height:200px;width:400px;float:left;">
Content goes here</div>

<div id="footer" style="background-color:#777;clear:both;text-align:center;">
Copyright © developerspplatform.byethost5.com</div>

</div>

</body>
</html>

Read More

HTML Lists

HTML-Tutorial Tutorials

There are three types of list; unordered lists, ordered lists, definition lists.
Unordered lists and ordered lists work the same way, except that the former is used for non-sequential lists with list items usually preceded by bullets and the latter is for sequential lists, which are normally represented by incremental numbers.
The ul tag is used to define unordered lists and the ol tag is used to define ordered lists. Inside the lists, the li tag is used to define each list item.
Example:
<!DOCTYPE html>
<html>
<head>
<title>My first web page</title>
</head>
<body>
<h1>My first web page</h1>
    <h2>What this is</h2>
<p>A simple page put together using HTML</p>
    <h2>Why this is</h2>
<ul>
<li>To learn HTML</li>
<li>To show off</li>
<li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>
</ul>
</body>
</html>
If you look at this in your browser, you will see a bulleted list. Simply change the ul tags to ol and you will see that the list will become numbered.
Lists can also be included in lists to form a structured hierarchy of items.
Replace the above list code with the following:
<ul>
<li>To learn HTML</li>
<li>
To show off
<ol>
<li>To my boss</li>
<li>To my friends</li>
<li>To my cat</li>
<li>To the little talking duck in my brain</li>
</ol>
</li>
<li>Because I've fallen in love with my computer and want to give her some HTML loving.</li>
</ul>

HTML Description Lists

A description list is a list of terms/names, with a description of each term/name.
The <dl> tag defines a description list.
The <dl> tag is used in conjunction with <dt> (defines terms/names) and <dd> (describes each term/name):
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
How the HTML code above looks in a browser:
Coffee
- black hot drink
Milk
- white cold drink

Basic Notes - Useful Tips

Tip: Inside a list item you can put text, line breaks, images, links, other lists, etc.
Read More

HTML Tables

HTML-Tutorial Tutorials

There are a number of tags used in tables, and to fully get to grips with how they work is probably the most difficult area of this HTML Beginner Tutorial.
Copy the following code into the body of your document and then we will go through what each tag is doing:

<table>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</table>
The table element defines the table.
The tr element defines a table row.
The td element defines a data cell. These must be enclosed in tr tags, as shown above.
If you imagine a 3x4 table, which is 12 cells, there should be four tr elements to define the rows and three td elements within each of the rows, making a total of 12 td elements.

Read More

HTML Images

HTML-Tutorial Tutorials

Syntax for defining an image:
<img src=”url” alt=”some text” />
The img tag is used to put an image in an HTML document and it looks like this:
<img src="http://webcodemaster.blogspot.in/logo.gif" width="120" height="90" alt="webcodemaster">

HTML Images - The Alt Attribute

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.
The value of the alt attribute is an author-defined text:
<img src="developersplatform.gif" alt="logo">
The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

HTML Images - Set Height and Width of an Image

The height and width attributes are used to specify the height and width of an image.
The attribute values are specified in pixels by default:
<img src="developersplatform.gif" alt="logo" width="42" height="42">
Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).
Read More

HTML CSS

HTML-Tutorial Tutorials

CSS(Cascading Style Sheets) is used to style HTML elements.
CSS can be added to the HTML in the following ways:

  1. Inline – using the style attribute in HTML elements
  2. Internal – using the <style> element in the <head> section.
  3. External – using an external CSS file.

Inline CSS Style:
<p style=”color:blue; margin-left:10px;”>this is a paragraph</p>
Internal CSS Style:
<!DOCTYPE html>
<html>
<head>
<style type=”text/css”>
body{ background-color:yellow;}
p{color:blue;}
</style>
</head>
<body>
<p>this is paragraph</p>
</body>
</html>
External CSS Style:
<!DOCTYPE html>
<html>
<head>
<link href=”mystyle.css” rel=”stylesheet” type=”css/text” />
</head>
<body>
<p>this is paragraph</p>
</body>
</html>
Note: Create CSS file like mystyle.css save with (.css) extension and link in the HTML page under the head section.

Read More

HTML Links

HTML-Tutorial Tutorials

An anchor tag (a) is used to define a link, but you also need to add something to the anchor tag - the destination of the link.

HTML Link Syntax

The HTML code for a link is simple. It looks like this:
<a href="url">Link text</a>
The href attribute specifies the destination of a link.
Example:
<a href=”http://www.developersplatform.byethost5.com/”>Visit Developers Platform</a>
This will be look like this: Visit Developers Platform

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.
The example below will open the linked document in a new browser window or a new tab:
<a href="http://www.developersplatform.byethost5.com/" target="_blank">Visit Developersplatforma</a>

HTML Head

The <head> element is container for all the head elements.
The following tags can be added to the head section:
<title>, <meta>, <style>, <script>, <link>, <noscript>, <base>
<!DOCTYPE html>
<html>
<head>
<title>title of the document</title>
<meta name=”keywords” content=”HTML, CSS, HTML5, CSS3”>
<body>

The HTML <base> Element

The <base> tag specifies the base URL/target for all relative URLs in a page:
<head>
<base href="http://www.developersplatform.byethost5.com/images/" target="_blank">
</head>

The HTML <link> Element

The <link> tag defines the relationship between a document and an external resource.
The <link> tag is most used to link to style sheets:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

The HTML <style> Element

The <style> tag is used to define style information for an HTML document.
Inside the <style> element you specify how HTML elements should render in a browser:
<head>
<style type="text/css">
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

The HTML <meta> Element

Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.
<meta> tags always go inside the <head> element.
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
Define a description of your web page:
<meta name="description" content="Free Web tutorials on HTML and CSS">
Define the author of a page:
<meta name="author" content="Hege Refsnes">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">

Read More

HTML Formatting

HTML-Tutorial Tutorials

Example:
<!DOCTYPE html>
<html>
<body>
<p><b>This text is bold</b></p>
<p><strong>This text is strong</strong></p>
<p><i>This text is italic</i></p>
<p><em>This text is emphasized</em></p>
<p><code>This is computer output</code></p>
<p>This is<sub> subscript</sub> and <sup>superscript</sup></p>
</body>
</html>
Result:
This text is bold
This text is strong
This text is italic
This text is emphasized
This is computer output
This is subscript and superscript
Often <strong> renders as <b>, and <em> renders as <i>.

However, there is a difference in the meaning of these tags:

<b> or <i> defines bold or italic text only.

<strong> or <em> means that you want the text to be rendered in a way that the user understands as "important". Today, all major browsers render strong as bold and em as italics. However, if a browser one day wants to make a text highlighted with the strong feature, it might be cursive for example and not bold!
Try some text formatting tags:

Tag		 Description
<b> Define bold text
<em> Defines emphasized text
<i> Defines a italic text
<small> Defines a smaller text
<strong> Defines a important text
<sub> Defines a subscripted text
<sup> Defines a superscripted text
<Ins> Defines a inserted text
<del> Defines deleted text
<mark> Defines marked/highlighted text
<code> Defines computer code text
<kbd> Defines keyboard text
<samp> Defines sample computer code
<var> Defines variable
<pre> Defines preformatted text
<abbr> Defines abbreviation or acronym
<address> Defines contact information for the author or the owner of the document
<bdo> Defines the text direction
Example: <bdo dir=”rtl>right to left</bdo>
<blockquote> Defines a section that is quoted from another source
<q> Define a inline short quotation
<cite> Defines a title of the work
<dfn> Defines a definition term
Read More

HTML Lines and Comments

HTML-Tutorial Tutorials


HTML Lines

The <hr> tag creates a horizontal line in an HTML page.
The hr element can be used to separate content:
<!DOCTYPE html>
<html>
<body>
<p>this is a paragraph</p>
<hr />
<p>this is a paragraph</p>
<hr />
</body>
</html>

HTML Comments

Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed.
Comments are written like this: <!—this is a comment -->
Note: comment tag start with (!) sign but end with (!) sign.


<!DOCTYPE html>
<html>
<body>
<p>this is a paragraph</p>
<br /><!—br tag break the line -->
<p>this is a second paragraph</p>
</body>
</html>
Read More

HTML Headings and Paragraph

HTML-Tutorial Tutorials

Headings are defined with the <h1> to <h6> tag.
Example:
<h1>first heading</h1>
<h2>second heading</h2>
<h3>third heading</h3>
<h4>fourth heading</h4>
<h5>fifth heading</h5>
<h6>sixth heading</h6>
Result:

first heading

second heading

third heading

fourth heading

fifth heading
sixth heading
Note: Browsers automatically add some empty space (a margin) before and after each heading.

HTML Paragraph

Paragraph aare defined with the <p> tag
<!DOCTYPE html>
<html>
<body>
<p>this is a paragraph</p>
</body>
</html>
Note: Browsers automatically add an empty line before and after a paragraph.
Read More

HTML Attributes

HTML-Tutorial Tutorials

What is an attribute?


As you probably remember, elements give structure to a HTML document and tells the browser how you want your website to be presented (for example,<br /> informs the browser to make a line break). In some elements you can add more information. Such additional information is called an attribute.
Example:
HTML links are defined with the <a> tag. The link address is specified in the href attribute:
<!DOCTYPE html>
<html>
<body>
<a href="http://www.developersplatform.byethost5.com">This is a link</a>
</body>
</html>
Below is a list of some attributes that can be used on any HTML element:

Atttributes		 Description
Class Specifies one or more classnames for an element (refers to a class in a style sheet)
Id Specifies a unique id for an element
Style Specifies an inline CSS style for an element
Title Specifies extra information about an element (displayed as a tool tip)
Read More

HTML Elements

HTML-Tutorial Tutorials

An HTML element is everything from the start tag to end tag. Tags tend not to do much more than mark the beginning and end of an element. Elements are the bits that make up web pages. You would say, for example, that everything that is in between (and includes) the <body> and </body> tags is the body element. As another example, whereas “<title>” and “</title>” are tags, “<title> Rumple Stiltskin </title>” is a title element.
Start tag(opening tag)*
Element Content
End tag(closing tag)*
&lt;p&gt;
This is a paragraph
&lt;/p&gt;
&lt;a href=”default.html”&gt;
Click here
&lt;/a&gt;
&lt;br&gt;



  Example:
<!DOCTYPE html>
<html>

<body>
<p>This is my first paragraph.</p>
</body>

</html>
The <p> element defines a paragraph in the HTML document.
The <body> element defines the body of the HTML document.
The <html> element defines the whole HTML document.
Note: Don’t forget the closing tag(</tagname>).

Empty HTML Elements

HTML elements with no contents are called empty elements.
<br> is an empty element without a closing tag(<br> tag defines a line break)
<br /> you are also written a <br> tag(<br /> its define br tag with closing).


Read More

Monday, May 12, 2014

HTML - What is needed?

HTML-Tutorial Tutorials
Lets get started


What is needed?
  •     Web Browser like (internet explorer, Mozilla firefox, google chrome etc).
It is not important which browser you use. The most common is Microsoft Internet Explorer.
  •     HTML Editor
  •     Adobe Dreamweaver
  •     Notepad
  •     Notepad ++
 If you are using Windows you can use Notepad, which is usually found in the start menu under Programs in Accessories.

But I am using Adobe Dreamweaver.

1.    Edit your HTML with Notepad/Adobe Dreamweaver

Type your HTML code into your editor(notepad/dreamweaver)

<!DOCTYPE html> <html> <body> <h1>My first heading</h1> <p>My first paragraph</p> </body> </html>

2. Save your HTML
Select save as.. in notepad /dreamweaver file menu.
When you save an HTML file, you can use either the .htm or the .html file extension. There is no difference, it is entirely up to you.

Save the file in a folder that is easy to remember, like HTMl TUTS.

3.    Run the HTML in your browser
Open your HTML TUTS folder and right click on html page and open with your favourite browser.
The result should look much like this:



The first line on the top, <!DOCTYPE html>, is a document type declaration and browser know which flavor of HTML you are using(HTML 5, in this case). The >!DOCTYPE> declaration must be the very first thing in your HTML Document, before the <html> tag. The <!DOCTYPE> declaration is not and HTML tag; it is an instruction to the web browser about what version of HTML page is written in.

Common DOCTYPE Declarations

&lt!DOCTYPE html> HTML 4.01 Strict This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. The markup must also be written as well-formed XML.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset This DTD is equal to XHTML 1.0 Transitional, but allows the use of frameset content.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 This DTD is equal to XHTML 1.0 Strict, but allows you to add modules (for example to provide ruby support for East-Asian languages).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
To get back to the point, <html> is the opening tag that kicks things off and tells the browser that everything between that and the </html> closing tag is an HTML document. The stuff between <body> and </body> is the main content of the document that will appear in the browser window.
Read More

HTML Introduction

HTML-Tutorial Tutorials

What is HTML?
  •     HTML stands for Hyper Text Markup Language
  •     HTML is a Markup language.
  •     Markup language means sets of markup tags
  •     Markup tags describe document content
  •     HTML documents(web pages) contain HTML tags and plain text
What are tags?

HTML markup tags are usually called HTML tags
  •     HTML tags are keywords or tag names surrounded by angle brackets(<, >)
  •     HTML tags normally come in pairs like and
  •     The first tage is start tag and second tag is end tag
  •     <p>(start tag),
    </p>(end tag) end tag use with a forward slash before the tag name
Example: <p>content</p>

HTML Versions:


Version
Year
HTML
1991
HTML+
1993
HTML 2.0
1995
HTML 3.2
1997
HTML 4.0.1
1999
XHTML 1.0
2000
HTML 5
2012
XHTML 5
2013


Read More

Copyright 2013 WebCodeMaster

designed by WebCodeMaster | WebCodeMaster Published..WebCodeMaster