Tuesday, May 13, 2014

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

Copyright 2013 WebCodeMaster

designed by WebCodeMaster | WebCodeMaster Published..WebCodeMaster