Latest Videos

abc

download
Google+ Facebook Twitter

HTML EDITORS

HTML Editors:

Write HTML Using Notepad or TextEdit

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.
Follow the 4 steps below to create your first web page with Notepad.

Step 1: Open Notepad

To open Notepad in Windows 7 or earlier:
Click Start (bottom left on your screen). Click All Programs. Click Accessories. Click Notepad.
To open Notepad in Windows 8 or later:
Open the Start Screen (the window symbol at the bottom left on your screen). Type Notepad.

Step 2: Write Some HTML

Write or copy some HTML into Notepad.
<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My Name is Zeeshan</p>

</body>
</html>

Step 3: Save the HTML Page

Save the file on your computer.
Select File > Save as in the Notepad menu.
Name the file "index.html" or any other name ending with html or htm.
UTF-8 is the preferred encoding for HTML files.
ANSI encoding covers US and Western European characters only.
View in Browser

Step 4: View HTML Page in Your Browser
Open the saved HTML file in your favorite browser. The result will look much like this:



Google+ Facebook Twitter

BASIC TAGS OF HTML

Basic Html Tags
Paragraph Tags
Tag: <p> </p> (Has a closing tag) </> means closed. What it Does: Puts 2 breaks between lines of text.
Attributes:  Align=left, right, center
Code Example: <p align=left>This is a paragraph tag</p> <p align=left >This is a paragraph tag</p>
What it looks like: This is a paragraph tag.
This is a paragraph tag.
Break Tags
Tag: <br> (Has no closing tag)
What it Does: Puts a one line break between text.
Code Example: This is a break tag. <br> This is another break tag.
What it looks like: This is a break tag. This is another break tag.
Bold Tags
Tag: <b></b>(Has closing tag) </> means closed.
What it Does: Creates bold text
Code Example: <b>this is bold. </b>   What it looks like:  
this is bold.
Italic Tags
Tag: <i></i>(Has closing tag) </> means closed.
What it Does: Creates Italic text.
Code Example:  <i> This text is italic. </i>   What it looks like:  This text is italic.  
Unordered List Tags
Tag: <ul> </ul> (Has closing tag) </> means closed.
What it Does:  The UL tag lists items using bullets. Also indents your list tags.
Code Example: <ul>This is a ul tag</ul>   What it looks like:  This is a ul tag.  
List Tags
Tag: <li> </li> (Has closing tag) </> means closed.
What it Does: Creates a bulleted list.
Code Example: <li>Apple</li> <li>Orange</li> <li>Peach</li>
What it looks like: • Apple • Orange • Peach  
Hyperlink Tag
Tag: <a href="URL"></a> Has closing tag) </> means closed.
What it does: Creates a hyperlink to another page.
Attributes: Target=”new” This opens up a new window.
Code Example: <a href=”doc.html”>document</a>
What it looks like:
Document
To create a “hotlink” email reference: <a href=mailto:janiceg@projecta.com>janiceg@projecta.com</a> Table Tags
Tag: <table></table> Creates a table Tag: <tr></tr> Sets off each row in a table Tag: <td></td> Sets off Each cell in a table>
Attributes:  align=left, right, center border=x cellpadding=x cellspacing=x width=
height=
How these work and look: All these tags must be closed. </>
<table border=1 cellpadding=2 cellspacing=2> <tr> <td>cell 1</td> <td>cell 2</td> </tr> </table> How it looks:
Cell 1 Cell 2  
Image Tags
Tag: <img src=”imagename.gif” alt=”description”> there is no closing tag   Attributes:  alt=”description”  Align=right or left Border=0
What it does: Inserts an image into the page. Always have an alt tag in your images. Alt tags are part of priority one ADA compliance. The site will not be compliant without this tag.
Code Example: This is an image <img src=”images/arrow.gif” alt=”arrow”>.
What it looks like:  This is an image .  
1. Always use alt tags (alternative text) in images 2. Close your tags </>
Email Tags
<a href=”mailto:gordon@sno-cat.com” class=”links” >Gordon@sno-cat.com </a>  
Image Tags with locations
To insert an image into text area
<img src=”images/imagemanager/filename.gif(jpg)”alt=”Title of Image”>
To place this in a left, center or right position you would:
<center><img src=”images/imagemanager/filename.gif(jpg)”alt=”Title of Image”></center>

Note:  Sometimes the code is particular about the image name being all on one line.  If your image doesn’t display properly on the page, then check for the file name being split on two lines.



Google+ Facebook Twitter

INTRODUCTION TO CSS 3

What is CSS?

  • CSS stands for Cascading Style Sheets
  • CSS describes how HTML elements are to be displayed on screen, on paper, or in other media
  • CSS saves a lot of work. It can control the layout of multiple Web pages all at once
  • External Style Sheets are stored in CSS files


CSS Syntax:

A CSS rule set consists of a selector and a declaration block:
CSS selector
The selector points to the HTML element you want to style.
The declaration block contains one or more declarations separated by semicolons.
Each declaration includes a property name and a value, separated by a colon.



CSS Example:

A CSS declaration always ends with a semicolon, and declaration groups are surrounded by curly braces:
p {color:red;text-align:center;}
To make the CSS code more readable, you can put one declaration on each line.
In the following example all <p> elements will be center-aligned, with a red text color:




Google+ Facebook Twitter

LEARN HTML 5

Learn HTML 5 In 12 Minutes.

Google+ Facebook Twitter

INTRODUCTION TO HTML 5

INTRIDUCTION HTML(5)

HTML
With HTML you can create your own Web site.
This tutorial teaches you everything about HTML.
HTML is easy to learn - You will enjoy it.






What is HTML?

HTML is a markup language for describing web documents (web pages).
  • HTML stands for Hyper Text Markup Language
  • A markup language is a set of markup tags
  • HTML documents are described by HTML tags
  • Each HTML tag describes different document content

HTML Tags:

HTML tags are keywords (tag names) surrounded by angle brackets:
<tagname>content</tagname>
  • HTML tags normally come in pairs like <p> and </p>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The end tag is written like the start tag, but with a slash before the tag name

A small HTML document:

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

<h1>First Heading</h1>
<p>My Name is Zeeshan.</p>

</body>
</html>
Google+ Facebook Twitter
Subscribe to: Posts (Atom)