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

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