Daily Archives: 30/06/2011

HTML Meta

Th6 30

Posted by

The HTML meta Element

Metadata is 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 <meta> tag always goes inside the head element.

The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

Keywords for Search Engines

Some search engines will use the name and content attributes of the meta element to index your pages.

The following meta element defines a description of a page:

<meta name=”description” content=”Free Web tutorials on HTML, CSS, XML” />

The following meta element defines keywords for a page:

<meta name=”keywords” content=”HTML, CSS, XML” />

The intention of the name and content attributes is to describe the content of a page.

Remark Note: A lot of webmasters have used <meta> tags for spamming, like repeating keywords (or using wrong keywords) for higher ranking. Therefore, most search engines have stopped using <meta> tags to index/rank pages.

Posted in Html advanced

Bình luận về bài viết này

HTML head Elements

Th6 30

Posted by

The HTML head Element

The head element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.

The following tags can be added to the head section: <title>, <base>, <link>, <meta>, <script>, and <style>.

The HTML title Element

The <title> tag defines the title of the document.

The title element is required in all HTML/XHTML documents.

The title element:

  • defines a title in the browser toolbar
  • provides a title for the page when it is added to favorites
  • displays a title for the page in search-engine results

A simplified HTML document:

<html>
<head>
<title>Title of the document</title>
</head>

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

</html>

 

The HTML base Element

The <base> tag specifies a default address or a default target for all links on a page:

<head>
<base href=”http://www.w3schools.com/images/&#8221; />
<base 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

The <meta> tag provides metadata about the HTML document.

The meta element will be explained in the next chapter.

The HTML script Element

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

The script element will be explained in a later chapter.

HTML head Elements

Tag Description
<head> Defines information about the document
<title> Defines the title of a document
<base /> Defines a default address or a default target for all links on a page
<link /> Defines the relationship between a document and an external resource
<meta /> Defines metadata about an HTML document
<script> Defines a client-side script
<style> Defines style information for a document

Posted in Html advanced

Bình luận về bài viết này

HTML CSS

Th6 30

Posted by

In HTML 4.0, all formatting can be removed from the HTML document, and stored in a style sheet.

Examples

Try-It-Yourself Examples

Using styles in HTML
How to add style information into the <head> section.

Link that is not underlined
How to make a link that is not underlined, with the style attribute.

Link to an external style sheet
How to use the <link> tag to link to an external style sheet.

How to Use Styles

When a browser reads a style sheet, it will format the document according to it.

There are three ways of inserting a style sheet:

  • External style sheet
  • Internal style sheet
  • Inline styles

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>

 

Internal Style Sheet

An internal style sheet can be used if one single document has a unique style. Internal styles are defined in the <head> section of an HTML page, by using the <style> tag, like this:

<head>
<style type=”text/css”>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

 

Inline Styles

An inline style can be used if a unique style is to be applied to one single occurrence of an element.

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

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

To learn more about style sheets, visit our CSS tutorial.

HTML Style Tags

Tag Description
<style> Defines style information for a document
<link /> Defines the relationship between a document and an external resource

Posted in Html advanced

Bình luận về bài viết này

HTML Doctypes

Th6 30

Posted by

A doctype declaration refers to the rules for the markup language, so that the browsers render the content correctly.

Example

An HTML document with a doctype of HTML 4.01 Transitional:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”&gt;
<html>
<head>
<title>Title of the document</title>
</head>

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

</html>

HTML Different Doctypes

The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in.

The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly.

The doctype declaration should be the very first thing in an HTML document, before the <html> tag.

Remark Tip: Always add a doctype to your pages. This helps the browsers to render the page correctly!

HTML 4.01 Strict

This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font and center). Framesets are not allowed:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”&gt;

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”&gt;

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”&gt;

 

Tips and Notes

Look at our table of all HTML/XHTML elements, and which DTD each element appear in.

Use W3C’s Validator to check that you have written a valid HTML / XHTML document!

HTML DOCTYPE Element

Tag Description
<!DOCTYPE> Defines the document type. This declaration goes before the <html> start tag

Posted in Html advanced

Bình luận về bài viết này

Icon chat trong zingplay

/<c=ff0000>/<s=12>/<t=i>/<t=b>/<t=u>  ghi thông tin

s: là cỡ chứ

c: là màu (red green blue theo ký tự hex ví dụ màu đen: 000000)

Bánh kem /<I>

Dưa hấu: /<W>

ly kem /<V>

pespi /<U>

món quà /<G>

hoa hồng : /<Y1>

men : /<M>

ngôi sao /<C>

trời nắng /<~>

trời mưa /<!!>

hoa héo /<Y2>

trái tim tan vỡ /<X>

trái tim /<@@>

con gái /<J>

nháy mắt /:P

mắt kiếng ngầu /8-)

đổ mồ hôi /:-|

mặt giận  /:@

nụ hôn /<%>

ngôi sao bay /<*>

con khỉ /<$>

hiếp mắt /:$

/:D là cười khoe răng

/:) là vui

/: ( là khóc

/:* là thèm chảy nước miếng

/>: là mắt trợn ngược

/<OK> là giỏi

/<NO>là tệ

/:-/ là nhăn mặt

/:-z ngủ

Posted on | Trích dẫn

HTML Layouts

Th6 30

Posted by

Web page layout is very important to make your website look good.

Design your webpage layout very carefully.

Website Layouts

Most websites have put their content in multiple columns (formatted like a magazine or newspaper).

Multiple columns is created by using <table> or <div> tags. Some CSS are normally also added to position elements, or to create backgrounds or colorful look for the pages.

HTML Layouts – Using Tables

The simplest way of creating layouts is by using the HTML <table> tag.

The following example uses a table with 3 rows and 2 columns – the first and last row spans both columns using the colspan attribute:

Example

<html>
<body><table width=”500″ border=”0″>
<tr>
<td colspan=”2″ style=”background-color:#FFA500;”>
<h1>Main Title of Web Page</h1>
</td>
</tr>

<tr valign=”top”>
<td style=”background-color:#FFD700;width:100px;text-align:top;”>
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript
</td>
<td style=”background-color:#EEEEEE;height:200px;width:400px;text-align:top;”>
Content goes here</td>
</tr>

<tr>
<td colspan=”2″ style=”background-color:#FFA500;text-align:center;”>
Copyright © 2011 W3Schools.com</td>
</tr>
</table>

</body>
</html>

 

The HTML code above will produce the following result:

Main Title of Web Page
Menu
HTML
CSS
JavaScript		 Content goes here
Copyright © 2011 W3Schools.com

Remark Note: Even though it is possible to create nice layouts with HTML tables, tables were designed for presenting tabular data – NOT as a layout tool!

HTML Layouts – Using Div Elements

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:

Example

<html>
<body><div id=”container” style=”width:500px”>

<div id=”header” style=”background-color:#FFA500;”>
<h1 style=”margin-bottom:0;”>Main Title of Web Page</h1></div>

<div id=”menu” style=”background-color:#FFD700;height:200px;width:100px;float:left;”>
<b>Menu</b><br />
HTML<br />
CSS<br />
JavaScript</div>

<div id=”content” style=”background-color:#EEEEEE;height:200px;width:400px;float:left;”>
Content goes here</div>

<div id=”footer” style=”background-color:#FFA500;clear:both;text-align:center;”>
Copyright © 2011 W3Schools.com</div>

</div>

</body>
</html>

 

The HTML code above will produce the following result:

Main Title of Web Page

Menu
HTML
CSS
JavaScript
Content goes here
Copyright © 2011 W3Schools.com

HTML Layout – Useful Tips

Tip: The biggest advantage of using CSS is that, if you place the CSS code in an external style sheet, your site becomes MUCH EASIER to maintain. You can change the layout of all your pages by editing one file. To learn more about CSS, study our CSS tutorial.

Tip: Because advanced layouts take time to create, a quicker option is to use a template. Search Google for free website templates (these are pre-built website layouts you can use and customize).

HTML Layout Tags

Tag Description
<table> Defines a table
<div> Defines a section in a document

Posted in Html advanced

Bình luận về bài viết này

HTML Quick List

Th6 30

Posted by

HTML Basic Document

<html>
<head>
<title>Title of document goes here</title>
</head>

<body>
Visible text goes here…
</body>

</html>

Heading Elements

<h1>Largest Heading</h1>

<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>

<h6>Smallest Heading</h6>

Text Elements

<p>This is a paragraph</p>
<br /> (line break)
<hr /> (horizontal rule)
<pre>This text is preformatted</pre>

Logical Styles

<em>This text is emphasized</em>
<strong>This text is strong</strong>
<code>This is some computer code</code>

Physical Styles

<b>This text is bold</b>
<i>This text is italic</i>

Links

Ordinary link: <a href=”http://www.example.com/”>Link-text goes here</a>
Image-link: <a href=”http://www.example.com/”><img src=”URL” alt=”Alternate Text” /></a>
Mailto link: <a href=”mailto:webmaster@example.com”>Send e-mail</a>

A named anchor:
<a name=”tips”>Tips Section</a>
<a href=”#tips”>Jump to the Tips Section</a>

Unordered list

<ul>
<li>Item</li>
<li>Item</li>
</ul>

Ordered list

<ol>
<li>First item</li>
<li>Second item</li>
</ol>

Definition list

<dl>
<dt>First term</dt>
<dd>Definition</dd>
<dt>Next term</dt>
<dd>Definition</dd>
</dl>

Tables

<table border=”1″>
<tr>
<th>Tableheader</th>
<th>Tableheader</th>
</tr>
<tr>
<td>sometext</td>
<td>sometext</td>
</tr>
</table>

Frames

<frameset cols=”25%,75%”>
<frame src=”page1.htm” />
<frame src=”page2.htm” />
</frameset>

Forms

<form action=”http://www.example.com/test.asp&#8221; method=”post/get”>

<input type=”text” name=”email” size=”40″ maxlength=”50″ />
<input type=”password” />
<input type=”checkbox” checked=”checked” />
<input type=”radio” checked=”checked” />
<input type=”submit” value=”Send” />
<input type=”reset” />
<input type=”hidden” />

<select>
<option>Apples</option>
<option selected=”selected”>Bananas</option>
<option>Cherries</option>
</select>

<textarea name=”comment” rows=”60″ cols=”20″></textarea>

</form>

Entities

&lt; is the same as <
&gt; is the same as >
© is the same as ©

Other Elements

<!– This is a comment –>

<blockquote>
Text quoted from a source.
</blockquote>

<address>
Written by W3Schools.com<br />
<a href=”mailto:us@example.org”>Email us</a><br />
Address: Box 564, Disneyland<br />
Phone: +12 34 56 78
</address>

Posted in Html basic

Bình luận về bài viết này