HTML [Basic] --by Abdulla-al Baset

HTML [Basic]
--Abdulla-al Baset

HTML __ Beginning
HTML __ Element Name

<!DOCTYPE>

Effect/Example

Description

<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01
Transitional//EN“
"http://www.w3.org/TR/html4
/frameset.dtd>

Define browser, Version of HTML.

<html>…….. </html>

All Tag sit inside(except
!DOCTYPE).

<head>……..</head>

“HTML Tag”

Contain info, which view in
browser.

<title>………..</title>

<title>Title Name</title>

Define title name.

<body>………..</body>

<footer>Footer
Name</footer>

Contain, HTML document.

<footer>Copyright by &copy
rehan </footer>

Define writer/developer/editor
name of page/page designer.

HTML __ Head Tag
Tag Name

Example & Description/Some About

Title Tag

<title> W3 Programmers l Most Popular Online……………..</title>
•The word no. of title tag should be prefer within 40-80.
•This is most Important for Indexing our page in SEO.

Meta Tag

<meta name=“page type” meta content=“type related”> Or
<meta http-equiv=“expires” meta
content=“sat,30dec,2013,12am,12:00,GMT+6”>
• Meta Tag contain almost 3 Attribute_
1.name: It contain a keyword, which define the type of web page.
2.content: It contain content, that related with meta name/equiv.
3.http-equiv: It used for update page within a specified time.

Base Tag

<base href="http://www.w3schools.com/images/" target="_blank"/>
•Base tag specifie a default target for all links on a page.

Script Tag

<script>
</script>
•Script Tag used to define the client side script such as java script.

Style Tag

<style type="text/css">body {background-color:yellow}p {color:blue}</style>
•Style Tag define Style Information of an HTML Document.

HTML __ Link
HTML__Link

Description

<a href=“Source Name“ target=“_blank”
title=“click this”> Link Name</a>

Create a page Link by <a> or Anchor Tag,
with define a target (ex: _self) & Link Title.

<img src=“ImageName” alt="Pulpit rock" />

Create a Image Link with define Image type.

<a href=mailto:albaset11@yahoo.com”>E-Mail
Me</a>

Create E-Mail Address Link.
href _means URI for Linked Resource.

<a name=“tips”>Tips Section</a>

Define a Tip Section.

<a href="#tips">Tips Section</a>

Create a link inside the same document.

<ahref="http://google.com/html_links.htm#tips"
>Tips Section</a>

Create a link from another page.

<link rel="stylesheet" type="text/css"
href="mystyle.css" media=“screen,projection”/>

For CSS Link. “type” _advisory content type.
Rel_ forword Link & media _redering media.

HTML _ Font Tag
Font Tag

Example

Detail

<b><i><u>…WHAT…</u></i></b>

WHAT

Use for Font bold, italic & underlined.

<em>……..</em>

Defines emphasized text.

<pre>………………….</pre>

Defines preformatted text.

H<sub>2</sub>

H2O

Use for Subscript.

22<sup>nd</sup> June.

22nd June

Use for Superscript.

<font color=“red” align=“left” face=“sansserif, arial” size=“20”>GOOD</font>

GOOD

For Internal Font Design (Color,
Alignment, Face & Size).

<p style="color:blue;marginleft:20px;">BAD</p>

BAD

For Internal Style.

<strong>………….</strong>
<abbr title=“…..”>Abbrviation Word</abbr>
<s>……………….</s>

Write a Strike Word.

<blockquote>

Defines a long quotation

HTML __ Document
HTML Tag

Describe

<hr>

For Horizontal Line

<br>

For making a break on line.

<marquee>.. <marquee>

Create an Animated Horizontal Line.

<…………………..>

Comment For no Display.

<p>…….paragraph…….</p> Use for paragraph.
<h1>..Heading Tag..</h1>

Heading Tag are 6 types.<h1>……….</h6>

<li>……………</li>
<acronym>….</acronym>

Create a Animated horizontal Line.

<address>……..</address>

Defines contact/address information.

HTML l Common Attribute
Attribute

Attribute Type

http-equiv

Response the Header Name.

Style & title

Associated style & title Info.

id & class

Define an unique id & class of Element.

Target

Define the target: _self/_blank/#/

align

Define Position: left/center/right.

valign

Define : top/middle/bottom/baseline.

border

Define Border Size.

width & hight

Define Element’s Width & Hight.

bgcolor

Define Back-ground Color.

HTML _ List Tag
List Tag

Example

Describe

<ul type=“circle”>
<li>Un-Ordered List</li>
<li> Ordered List</li>
<li>Defination List</li>
</ul>

•Un-Ordered List
•Ordered List
•Defination List

Making An Un-Ordered List
Within define a type.
Type may be circle, square,
arrow, round & so on.

<ol>
<li>Un-Ordered List</li>
<li> Ordered List</li>
<li>Defination List</li>
</ol>

1. Un-Ordered List.
2. Ordered List.
3. Defination List.

Making An Ordered List.

<dl>
List Tag:
<dt>List Tag:</dt>
_Un-Ordered List.
<dd>_Un-Ordered List.</dd>
_Ordered List.
<dd>_Ordered List</dd>
Other:
<dt>Other:</dt>
_Defination List.
<dd>_Defination List
</dl>

Create a Defination List by use
of dl.
<dt> define Item of the List.
<dd> define describe the item.

HTML __ Table Tag
Table Tag
<table width=“2” border=“2”
cellspacing=“10”>
<tr><th>row</th>
<th>row2</th>
</tr><tr>
<td>Data01</td>
<td>Data02</td>
</tr></table>

Example

row01

row02

Data01

Data02

Describe Attribute
Making a table with define Width,
Border & Cell-spacing.
<tr> means Table Row.
<th> means Table Heading
<td> means Table Data.
<border> define border size.
<cellspacing> define space of cell.
<width> Define Table’s Width.
<hight> Define Table’s Hight.

HTML _ Table Attribute
Table Tag

Description

cellpadding

For Define Table Attribute.

rowspan

For define Attributes of Row of the Table.

colspan

Define the Attributes of Data of the Table.

CAPTION

Define a Table Caption.

<colgroup>

Defines a group of columns in a table, for formatting

<col />

Defines attribute values for one or more columns in a table

<thead>
<tbody>
<tfoot>

Groups the header content in a table.
Groups the body content in a table.
Groups the footer content in a table.

HTML __ Div Layout
Tag

Attribute

<div>…..</div>

Create a Division with div Tag.

<div class=“box”>

Define a unique Class for re-ordering.

<div id=“header”>

Define a unique ID of Division.

<div style= “color: blue; backgroundcolor=green”>

Define a Style of Division with Color & Background.

HTML __ Div Style$heet
Tag

Attribute

padding:

Create a padding size of Division .

Margin:

Define margin Division.

<div style= “color: blue; backgroundcolor=green”>

Define a Style of Division with Color & Background.

HTML __ Form Design
<form id='login' action='login.php' method='post' acceptcharset='UTF-8'>
<fieldset >
<legend>Login</legend>
<input type='hidden' name='submitted' id='submitted'
value='1'/>
<label for='username' >UserName*:</label>
<input type='text' name='username'
id='username' maxlength="50" />
<label for='password' >Password*:</label>
<input type='password' name='password' id='password'
maxlength="50" />
<input type='submit' name='Submit' value='Submit' />

</fieldset>
</form>

HTML l Font Family
Font Family

Attribute

Arial Rounded MT Bold

HTML Font Check.

Algerian

HTML Font Check

David

HTML Font Check

Acidic

HTML Font Check.

Acid Bath

HTML Font Check.

Adobe Arabic

HTML Font Check.

Adler

HTML Font Check.

Agency FB

HTML Font Check.

Bell MT

HTML Font Check.

HTML __ Some Word
• HTML pages always start with a DTD, or
document type definition.
• SEO means “Search Engine Optimization”

HTML [Basic] --by Abdulla-al Baset

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Ähnlich wie HTML [Basic] --by Abdulla-al Baset

Ähnlich wie HTML [Basic] --by Abdulla-al Baset (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

HTML [Basic] --by Abdulla-al Baset