Wednesday, December 26, 2012

There are three ways of inserting a style sheet:

External style sheet

Internal style sheet

Inline style

External Style Sheet

An external style sheet is ideal when the style is applied to many pages. With an external style sheet, you can change the look of an entire Web site by changing one file. Each page must link to the style sheet using the <link> tag. The <link> tag goes inside the head section:

<head>

<link rel="stylesheet" type="text/css" href="mystyle.css">

</head>

An external style sheet can be written in any text editor. The file should not contain any html tags. Your style sheet should be saved with a .css extension. An example of a style sheet file is shown below:

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

Do not add a space between the property value and the unit (such as margin-left:20 px). The correct way is: margin-left:20px

Internal Style Sheet

An internal style sheet should be used when a single document has a unique style. You define internal styles in the head section of an HTML page, by using the <style> tag, like this:

<head>

<style>

hr {color:sienna;}

p {margin-left:20px;}

body {background-image:url("images/back40.gif");}

</style>

</head>

Inline Styles

An inline style loses many of the advantages of style sheets by mixing content with presentation. Use this method sparingly!

To use inline styles you use the style attribute in the relevant tag. The style attribute can contain any CSS property. The example shows how to change the color and the left margin of a paragraph:

<p style="color:sienna;margin-left:20px">This is a paragraph.</p>

Multiple Style Sheets

If some properties have been set for the same selector in different style sheets, the values will be inherited from the more specific style sheet.

For example, an external style sheet has these properties for the h3 selector:

h3

{

color:red;

text-align:left;

font-size:8pt;

}

And an internal style sheet has these properties for the h3 selector:

h3

{

text-align:right;

font-size:20pt;

}

If the page with the internal style sheet also links to the external style sheet the properties for h3 will be:

color:red;

text-align:right;

font-size:20pt;

The color is inherited from the external style sheet and the text-alignment and the font-size is replaced by the internal style sheet.

CSS Id and Class

<!DOCTYPE html>

<html>

<head>

<style>

.center

{

text-align:center;

}

</style>

</head>

<body>

<h1 class="center">Center-aligned heading</h1>

<p class="center">Center-aligned paragraph.</p>

</body>

</html>

ANOTHER EXAMPLE

<!DOCTYPE html>
<html>
<head>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>

<body>
<p id="para1">Hello World!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<style>
p.center
{
text-align:center;
}
</style>
</head>

<body>
<h1 class="center">This heading will not be affected</h1>
<p class="center">This paragraph will be center-aligned.</p>
</body>
</html>

CSS Syntax

<!DOCTYPE html>
<html>
<head>
<style>
p
{
color:red;
text-align:center;
}
</style>
</head>

<body>
<p>Hello World!</p>
<p>This paragraph is styled with CSS.</p>
</body>
</html>

CSS Introduction

What is CSS?

CSS stands for Cascading Style Sheets
Styles define how to display HTML elements
Styles were added to HTML 4.0 to solve a problem
External Style Sheets can save a lot of work
External Style Sheets are stored in CSS file

Thursday, December 20, 2012

DRAG AND DROP IMAGES IN HTML5

THE FIRST TUTORIAL I HTML5

THE CODE

WHAT IS HTML5

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>
<script>
function allowDrop(ev)
{
ev.preventDefault();
}

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
ev.preventDefault();
var data=ev.dataTransfer.getData("Text");
ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Drag the W3Schools image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="http://i47.tinypic.com/165s8x.jpg" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

and save it .html

HOW TO SAVE /HTML

WEB SITE WARING MESSAGES

HERE ARE THE CODES:

When a browser requests a service from a web server, an error might occur.

This is a list of HTTP status messages that might be returned:

1xx: Information

Message:Description:

100 Continue The server has received the request headers, and the client should proceed to send the request body

101 Switching Protocols The requester has asked the server to switch protocols

103 Checkpoint Used in the resumable requests proposal to resume aborted PUT or POST requests

2xx: Successful

Message:Description:

200 OK The request is OK (this is the standard response for successful HTTP requests)

201 Created The request has been fulfilled, and a new resource is created

202 Accepted The request has been accepted for processing, but the processing has not been completed

203 Non-Authoritative Information The request has been successfully processed, but is returning information that may be from another source

204 No Content The request has been successfully processed, but is not returning any content

205 Reset Content The request has been successfully processed, but is not returning any content, and requires that the requester reset the document view

206 Partial Content The server is delivering only part of the resource due to a range header sent by the client

3xx: Redirection

Message:Description:

300 Multiple Choices A link list. The user can select a link and go to that location. Maximum five addresses

301 Moved Permanently The requested page has moved to a new URL

302 Found The requested page has moved temporarily to a new URL

303 See Other The requested page can be found under a different URL

304 Not Modified Indicates the requested page has not been modified since last requested

306 Switch Proxy No longer used

307 Temporary Redirect The requested page has moved temporarily to a new URL

308 Resume Incomplete Used in the resumable requests proposal to resume aborted PUT or POST requests

4xx: Client Error

Message:Description:

400 Bad Request The request cannot be fulfilled due to bad syntax

401 Unauthorized The request was a legal request, but the server is refusing to respond to it. For use when authentication is possible but has failed or not yet been provided

402 Payment Required Reserved for future use

403 Forbidden The request was a legal request, but the server is refusing to respond to it

404 Not Found The requested page could not be found but may be available again in the future

405 Method Not Allowed A request was made of a page using a request method not supported by that page

406 Not Acceptable The server can only generate a response that is not accepted by the client

407 Proxy Authentication Required The client must first authenticate itself with the proxy

408 Request Timeout The server timed out waiting for the request

409 Conflict The request could not be completed because of a conflict in the request

410 Gone The requested page is no longer available

411 Length Required The "Content-Length" is not defined. The server will not accept the request without it

412 Precondition Failed The precondition given in the request evaluated to false by the server

413 Request Entity Too Large The server will not accept the request, because the request entity is too large

414 Request-URI Too Long The server will not accept the request, because the URL is too long. Occurs when you convert a POST request to a GET request with a long query information

415 Unsupported Media Type The server will not accept the request, because the media type is not supported

416 Requested Range Not Satisfiable The client has asked for a portion of the file, but the server cannot supply that portion

417 Expectation Failed The server cannot meet the requirements of the Expect request-header field

5xx: Server Error

Message:Description:

500 Internal Server Error A generic error message, given when no more specific message is suitable

501 Not Implemented The server either does not recognize the request method, or it lacks the ability to fulfill the request

502 Bad Gateway The server was acting as a gateway or proxy and received an invalid response from the upstream server

503 Service Unavailable The server is currently unavailable (overloaded or down)

504 Gateway Timeout The server was acting as a gateway or proxy and did not receive a timely response from the upstream server

505 HTTP Version Not Supported The server does not support the HTTP protocol version used in the request

511 Network Authentication Required The client needs to authenticate to gain network access

YouTube Video in HTML

TODAY I WILL SHOW TO YOU HOW TO PUT YOUTUBE VIDEOS IN YOUR WEBSITES

HERE THE CODES:

EXAMPLE

Wednesday, December 19, 2012

HOW TO HOST EMEBED FLASHIN HTML

THIS TIME I WILL SHOW TO YOU HOW TO EMEBED SWF IN YOUR WEBSITE:

<!DOCTYPE html><html>
<body>
<object width="400" height="40"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="LINK OF THE SWF">
<embed src="bookmark.swf" width="400" height="40"></embed>
</object>
</body></html>

JAVA SCRIPT IN HTML WRITING

OK THIS IS A LITLE BIT HARD BUT LEARNING FAST IS A COOL THING

The <script> tag is used to define a client-side script, such as a JavaScript.

The <script> element either contains scripting statements or it points to an external script file through the src attribute.

The required type attribute specifies the MIME type of the script.

Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.

The script below writes Hello World! to the HTML output:

Color Values in HTML

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

Color	Color HEX	Color RGB
	#000000	rgb(0,0,0)
	#FF0000	rgb(255,0,0)
	#00FF00	rgb(0,255,0)
	#0000FF	rgb(0,0,255)
	#FFFF00	rgb(255,255,0)
	#00FFFF	rgb(0,255,255)
	#FF00FF	rgb(255,0,255)
	#C0C0C0	rgb(192,192,192)
	#FFFFFF	rgb(255,255,255)

All Colors

HTML Attributes

HTML Tip: Use Lowercase Attributes

Attribute names and attribute values are case-insensitive.

However, the World Wide Web Consortium (W3C) recommends lowercase attributes/attribute values in their HTML 4 recommendation.

Newer versions of (X)HTML will demand lowercase attributes.

HTML Attributes Reference

A complete list of legal attributes for each HTML element is listed in our: HTML Tag Reference.

Below is a list of some attributes that can be used on any HTML element:

AttributeDescription

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)

Drag Over the mouse to "heelo" and see title funsction

<your tag object title="any hting">hello</tagboject>
heelo

HTML Headings

Headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading. <h6> defines the least important heading.

<h1>The Techs Tip</h1>
<h2>The Techs Tip</h2>
<h3>The Techs Tip</h3>

<h4>The Techs Tip</h4>
<h5>The Techs Tip</h5>
<h6>The Techs Tips</h6>

The Techs Tips h1

The Techs Tips h2

The Techs Tips h3

HTML Paragraphs

Paragraphs are usualy defined with the <p> tag.Example

<p>The Techs Tips</p>
<p>Again The Techs Tips</p>

Tuesday, December 18, 2012

HTML Iframes

NOW HOW TO SHOW ANOTHER WEB PAGE IN YOUR WEB SITE WITH IFRAME:

<iframe src="WB SITE URL"></iframe>

EXAMPLE

BIGER SIZE

<iframe src="demo_iframe.htm" width="320" height="400"></iframe>

HTML Forms

Text Fields

<input type="text"> defines a one-line input field that a user can enter text into:

<form>
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
</form>

EXAMPLE

HTML IMAGES

THIS TIME YOU WILL LEARN HOW TO AD IMAGES TO YOUR WEBSITE
<img border="0" src="LINK OF IMAGE HERE" alt="THE TECH TIPS">

EXAMPLE
!!!!!
HOW TO HOST IMAGES GOTO TO TINYPIC.COMUPLOAD AND COPY THE LAST LINK OF YOUR PHOTO

WELL NOW SOMETHING VERY USEFULL

Most HTML elements are defined as block level elements or as inline elements.

Block level elements normally start (and end) with a new line when displayed in a browser.

Examples: <h1>, <p>, <ul>, <table>

HTML Inline Elements

Inline elements are normally displayed without starting a new line.

Examples: <b>, <td>, <a>, <img>

The HTML <div> Element

The HTML <div> element is a block level element that can be used as a container for grouping other HTML elements.

The <div> element has no special meaning. Except that, because it is a block level element, the browser will display a line break before and after it.

When used together with CSS, the <div> element can be used to set style attributes to large blocks of content.

Another common use of the <div> element, is for document layout. It replaces the "old way" of defining layout using tables. Using tables is not the correct use of the <table> element. The purpose of the <table> element is to display tabular data.

The HTML <span> Element

The HTML <span> element is an inline element that can be used as a container for text.

The <span> element has no special meaning.

When used together with CSS, the <span> element can be used to set style attributes to parts of the text.

HTML Tables

<table border="1">
<tr>
<td>HELLO</td>
<td>THE TECH</td>
</tr>
<tr>
<td>TIPS</td>
<td>VISIT US</td>
</tr>
</table>

HELLO	THE TECH
TIPS	VISIT US

HTML HEAD TUTRIAL

IN THIS TUTORIAL YOU WILL LEARN HOW TO AD TITLE TO YOUR WEBSITE

HERE IS THE CODE

"<!DOCTYPE html><html>
<head>
<title>THE TECH TIPS</title>
</head>

<body>
The content of the document......
</body>

</html>"

HTML Text Formatting

NOW YOU WILL LEARN SOMETHING PERTY COOL

<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>

SAVE THAT .HTML AND SEE WHAT HAPENDS :)))))

ADMIN

HOW TO CREATE A HTML FILE??

WELL UNTIL NOW WE LEARNED WHAT IS HTML HOW TO UNDERSTANDIT AND ALL HES TAGS
BUT HOW TO CREATE ONE???

THATS SO SIMPLE FOLLOW THIS SIMPLE STEPS :

WE NEED A SOFTWARE TO CODE INSIEDIT THE HTML CODEI USE NORMALY NOTEPAD++ WICH IS A POWER FULL TOOL FOR CODING IN ANY LANGUAGE.
NOW GO TO THE TOP AND GO>TO LANGUAGE TOOLBAR AND SCROLL DOWN TO H AND SELECT HTML AS YOUR DEFAULT LANGUAGE.

YOU NOW WILL START AUTOMATICLLY TO CODE IN HTML.
WHEN YOU FINISHED CLICK THE SAVE BUTTON
YOU WILL NEED TO SAVE-IT .HTML TO BE A HTML DOCUMENT!
AND YOU ARE DONE.

HTML LINKS

The HTML <a> tag defines a hyperlink.

A hyperlink (or link) is a word, group of words, or image that you can click on to jump to another document.

When you move the cursor over a link in a Web page, the arrow will turn into a little hand.

The most important attribute of the <a> element is the href attribute, which indicates the link’s destination.

By default, links will appear as follows in all browsers:

An unvisited link is underlined and blue
A visited link is underlined and purple
An active link is underlined and red

EXAPMLE

<a href="WEB SITE URL" target="_blank">WEBSITE NAME!</a>

EXAMPLE

HTML

NEW TUTORIAL YOU WILL LEARN HERE HTML TAGS

Tag Description

 Defines a comment

<!DOCTYPE> Defines the document type

<a> Defines a hyperlink

<abbr> Defines an abbreviation

<acronym> Not supported in HTML5. Defines an acronym

<address> Defines contact information for the author/owner of a document

<applet> Not supported in HTML5. Deprecated in HTML 4.01. Defines an embedded applet

<area> Defines an area inside an image-map

<article> Defines an article

<aside> Defines content aside from the page content

<audio> Defines sound content

<b> Defines bold text

<base> Specifies the base URL/target for all relative URLs in a document

<basefont> Not supported in HTML5. Deprecated in HTML 4.01. Specifies a default color, size, and font for all text in a document

<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it

<bdo> Overrides the current text direction

<big> Not supported in HTML5. Defines big text

<blockquote> Defines a section that is quoted from another source

<body> Defines the document's body

<br> Defines a single line break

<button> Defines a clickable button

<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)

<caption> Defines a table caption

<center> Not supported in HTML5. Deprecated in HTML 4.01. Defines centered text

<cite> Defines the title of a work

<code> Defines a piece of computer code

<col> Specifies column properties for each column within a <colgroup> element

<colgroup> Specifies a group of one or more columns in a table for formatting

<command> Defines a command button that a user can invoke

<datalist> Specifies a list of pre-defined options for input controls

<dd> Defines a description of an item in a definition list

<del> Defines text that has been deleted from a document

<details> Defines additional details that the user can view or hide

<dfn> Defines a definition term

<dir> Not supported in HTML5. Deprecated in HTML 4.01. Defines a directory list

<div> Defines a section in a document

<dl> Defines a definition list

<dt> Defines a term (an item) in a definition list

<em> Defines emphasized text

<embed> Defines a container for an external (non-HTML) application

<fieldset> Groups related elements in a form

<figcaption> Defines a caption for a <figure> element

<figure> Specifies self-contained content

<font> Not supported in HTML5. Deprecated in HTML 4.01. Defines font, color, and size for text

<footer> Defines a footer for a document or section

<form> Defines an HTML form for user input

<frame> Not supported in HTML5. Defines a window (a frame) in a frameset

<frameset> Not supported in HTML5. Defines a set of frames

<h1> to <h6> Defines HTML headings

<head> Defines information about the document

<header> Defines a header for a document or section

<hgroup> Groups heading (<h1> to <h6>) elements

<hr> Defines a thematic change in the content

<html> Defines the root of an HTML document

<i> Defines a part of text in an alternate voice or mood

<iframe> Defines an inline frame

<img> Defines an image

<input> Defines an input control

<ins> Defines a text that has been inserted into a document

<kbd> Defines keyboard input

<keygen> Defines a key-pair generator field (for forms)

<label> Defines a label for an <input> element

<legend> Defines a caption for a <fieldset>, < figure>, or <details> element

<li> Defines a list item

<link> Defines the relationship between a document and an external resource (most used to link to style sheets)

<map> Defines a client-side image-map

<mark> Defines marked/highlighted text

<menu> Defines a list/menu of commands

<meta> Defines metadata about an HTML document

<meter> Defines a scalar measurement within a known range (a gauge)

<nav> Defines navigation links

<noframes> Not supported in HTML5. Defines an alternate content for users that do not support frames

<noscript> Defines an alternate content for users that do not support client-side scripts

<object> Defines an embedded object

<ol> Defines an ordered list

<optgroup> Defines a group of related options in a drop-down list

<option> Defines an option in a drop-down list

<output> Defines the result of a calculation

<p> Defines a paragraph

<param> Defines a parameter for an object

<pre> Defines preformatted text

<progress> Represents the progress of a task

<q> Defines a short quotation

<rp> Defines what to show in browsers that do not support ruby annotations

<rt> Defines an explanation/pronunciation of characters (for East Asian typography)

<ruby> Defines a ruby annotation (for East Asian typography)

<s> Defines text that is no longer correct

<samp> Defines sample output from a computer program

<script> Defines a client-side script

<section> Defines a section in a document

<select> Defines a drop-down list

<small> Defines smaller text

<source> Defines multiple media resources for media elements (<video> and <audio>)

<span> Defines a section in a document

<strike> Not supported in HTML5. Deprecated in HTML 4.01. Defines strikethrough text

<strong> Defines important text

<style> Defines style information for a document

<sub> Defines subscripted text

<summary> Defines a visible heading for a <details> element

<sup> Defines superscripted text

<table> Defines a table

<tbody> Groups the body content in a table

<td> Defines a cell in a table

<textarea> Defines a multiline input control (text area)

<tfoot> Groups the footer content in a table

<th> Defines a header cell in a table

<thead> Groups the header content in a table

<time> Defines a date/time

<title> Defines a title for the document

<tr> Defines a row in a table

<track> Defines text tracks for media elements (<video> and <audio>)

<tt> Not supported in HTML5. Defines teletype text

<u> Defines text that should be stylistically different from normal text

<ul> Defines an unordered list

<var> Defines a variable

<video> Defines a video or movie

<wbr> Defines a possible line-break

ALL DEFINITED HTML HTML5 XHTML TAGS

Pages