أنت هنا: html 5

html 5




نتيجة بحث الصور عن ‪html5‬‏


HTML The class Attribute

Using The class Attribute

The HTML class attribute makes it possible to define equal styles for elements with the same class name.
Here we have three <div> elements that points to the same class name:

Example

<!DOCTYPE html>
<html>
<head>
<style>
div.cities {
    background-color: black;
    color: white;
    margin: 20px 0 20px 0;
    padding: 20px;} </style>
</head>
<body>

<div class="cities">
<h2>London</h2>
<p>London is the capital of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="cities">
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</div>

<div class="cities">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>

</body>
</html>

London

London is the capital of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

Paris

Paris is the capital and most populous city of France.
Situated on the Seine River, it is at the heart of the Île-de-France region, also known as the région parisienne.
Within its metropolitan area is one of the largest population centers in Europe, with over 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.
It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.
The Tokyo prefecture is part of the world's most populous metropolitan area with 38 million people and the world's largest urban economy.

Using The class Attribute on Inline Elements

The HTML class attribute can also be used for inline elements:

Example

<!DOCTYPE html>
<html>
<head>
<style>
span.note {
    font-size: 120%;
    color: red;}
</style>
</head>
<body>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>

Test Yourself with Exercises!

 

HTML Iframes

An iframe is used to display a web page within a web page.

Iframe Syntax

An HTML iframe is defined with the <iframe> tag:
<iframe src="URL"></iframe>
The src attribute specifies the URL (web address) of the inline frame page.

Iframe - Set Height and Width

Use the height and width attributes to specify the size of the iframe.
The attribute values are specified in pixels by default, but they can also be in percent (like "80%").

Example

<iframe src="demo_iframe.htm" height="200" width="300"></iframe>

Iframe - Remove the Border

By default, an iframe has a border around it.
To remove the border, add the style attribute and use the CSS border property:

Example

<iframe src="demo_iframe.htm" style="border:none;"></iframe>
With CSS, you can also change the size, style and color of the iframe's border:

Example

<iframe src="demo_iframe.htm" style="border:2px solid grey;"></iframe>

Iframe - Target for a Link

An iframe can be used as the target frame for a link.
The target attribute of the link must refer to the name attribute of the iframe:

Example

<iframe src="demo_iframe.htm" name="iframe_a"></iframe>

<p><a href="http://www.w3schools.com" target="iframe_a">W3Schools.com</a></p>

HTML iframe Tag

TagDescription
<iframe>Defines an inline frame

Test Yourself with Exercises!

 

HTML JavaScript

JavaScript makes HTML pages more dynamic and interactive.

Example

My First JavaScript

The HTML <script> Tag

The <script> tag is used to define a client-side script (JavaScript).
The <script> element either contains scripting statements, or it points to an external script file through the src attribute.
Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content.
To select an HTML element, JavaScript very often use the document.getElementById(id) method.
This JavaScript example writes "Hello JavaScript!" into an HTML element with id="demo":

Example

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
Tip: You can learn much more about JavaScript in our JavaScript Tutorial.

A Taste of JavaScript

Here are some examples of what JavaScript can do:

JavaScript can change HTML content

document.getElementById("demo").innerHTML = "Hello JavaScript!";

JavaScript can change HTML styles

document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";

JavaScript can change HTML attributes

document.getElementById("image").src = "picture.gif";

The HTML <noscript> Tag

The <noscript> tag is used to provide an alternate content for users that have disabled scripts in their browser or have a browser that doesn't support client-side scripts:

Example

<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>

<noscript>Sorry, your browser does not support JavaScript!</noscript>

HTML Script Tags

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

Test Yourself with Exercises!

 

HTML Head

The HTML <head> Element

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag.
HTML metadata is data about the HTML document. Metadata is not displayed.
Metadata typically define the document title, character set, styles, links, scripts, and other meta information.
The following tags describe metadata: <title>, <style>, <meta>, <link>, <script>, and <base>.

The HTML <title> Element

The <title> element defines the title of the document, and is required in all HTML/XHTML documents.
The <title> element:
  • defines a title in the browser tab
  • provides a title for the page when it is added to favorites
  • displays a title for the page in search engine results
A simple HTML document:

Example

<!DOCTYPE html>
<html>

<head>
  <title>Page Title</title>
</head>

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

</html>

The HTML <style> Element

The <style> element is used to define style information for a single HTML page:

Example

<style>
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>

The HTML <link> Element

The <link> element is used to link to external style sheets:

Example

<link rel="stylesheet" href="mystyle.css">
Tip: To learn all about CSS, visit our CSS Tutorial.

The HTML <meta> Element

The <meta> element is used to specify which character set is used, page description, keywords, author, and other metadata.
Metadata is used by browsers (how to display content), by search engines (keywords), and other web services.
Define the character set used:
<meta charset="UTF-8">
Define a description of your web page:
<meta name="description" content="Free Web tutorials">
Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, JavaScript">
Define the author of a page:
<meta name="author" content="Hege Refsnes">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
Example of <meta> tags:

Example

<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">

The HTML <script> Element

The <script> element is used to define client-side JavaScripts.
This JavaScript writes "Hello JavaScript!" into an HTML element with id="demo":

Example

<script>
function myFunction {
    document.getElementById("demo").innerHTML = "Hello JavaScript!";
}</script>
Tip: To learn all about JavaScript, visit our JavaScript Tutorial.

The HTML <base> Element

The <base> element specifies the base URL and base target for all relative URLs in a page:

Example

<base href="http://www.w3schools.com/images/" target="_blank">

Omitting <html>, <head> and <body>?

According to the HTML5 standard; the <html>, the <body>, and the <head> tag can be omitted.
The following code will validate as HTML5:

Example

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

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
Note:
W3Schools does not recommend omitting the <html> and <body> tags. Omitting these tags can crash DOM or XML software and produce errors in older browsers (IE9).
However, omitting the <head> tag has been a common practice for quite some time now.

HTML head Elements

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


HTML Layouts

HTML Layout Example

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

HTML Layout Elements

Websites often display content in multiple columns (like a magazine or newspaper).
HTML5 offers new semantic elements that define the different parts of a web page:
HTML5 Semantic Elements
  • <header> - Defines a header for a document or a section
  • <nav> - Defines a container for navigation links
  • <section> - Defines a section in a document
  • <article> - Defines an independent self-contained article
  • <aside> - Defines content aside from the content (like a sidebar)
  • <footer> - Defines a footer for a document or a section
  • <details> - Defines additional details
  • <summary> - Defines a heading for the <details> element

HTML Layout Techniques

There are four different ways to create multicolumn layouts. Each way has its pros and cons:
  • HTML tables
  • CSS float property
  • CSS framework
  • CSS flexbox

Which One to Choose?

HTML Tables

The <table> element was not designed to be a layout tool! The purpose of the <table> element is to display tabular data. So, do not use tables for your page layout! They will bring a mess into your code. And imagine how hard it will be to redesign your site after a couple of months.
Tip: Do NOT use tables for your page layout!

CSS Frameworks

If you want to create your layout fast, you can use a framework, like W3.CSS or Bootstrap.

CSS Floats

It is common to do entire web layouts using the CSS float property. Float is easy to learn - you just need to remember how the float and clear properties work. Disadvantages: Floating elements are tied to the document flow, which may harm the flexibility. Learn more about float in our CSS Float and Clear chapter.

Float Example

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.

CSS Flexbox

Flexbox is a new layout mode in CSS3.
Use of flexbox ensures that elements behave predictably when the page layout must accommodate different screen sizes and different display devices. Disadvantages: Does not work in IE10 and earlier.
Learn more about flexbox in our CSS Flexbox chapter.

Flexbox Example

City Gallery

London

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.
Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
Copyright © W3Schools.com
 
 

HTML Responsive Web Design

What is Responsive Web Design?

Responsive Web Design makes your web page look good on all devices (desktops, tablets, and phones).
Responsive Web Design is about using CSS and HTML to resize, hide, shrink, enlarge, or move the content to make it look good on any screen:
Note: A web page should look good, and be easy to use, regardless of the device!

Create Your Own Responsive Design

One way to create a responsive design, is to create it yourself:

Example

<!DOCTYPE html>
<html lang="en-us">
<head>
<style>
.city {
    float: left;
    margin: 5px;
    padding: 15px;
    max-width: 300px;
    height: 300px;
    border: 1px solid black;} </style>
</head>
<body>

<h1>Responsive Web Design Demo</h1>

<div class="city">
  <h2>London</h2>
  <p>London is the capital city of England.</p>
  <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
  <p>The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
  <p>It is the center of the Greater Tokyo Area,  and the most populous metropolitan area in the world.</p>
</div>

<div class="city">
  <h2>New York</h2>
  <p>The City of New York is the most populous city in the United States.</p>
  <p>New York is an important center for international diplomacy and has been described as the cultural and financial capital of the world.</p>
</div>

</body>
</html>

Using W3.CSS

Another way to create a responsive design, is to use a responsive style sheet, like W3.CSS
W3.CSS makes it easy to develop sites that look nice at any size; desktop, laptop, tablet, or phone:

W3.CSS Demo

Resize this responsive page!

London

London is the capital of England.
It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Paris

Paris is the capital of France.
The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.

Tokyo

Tokyo is the capital of Japan.
It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.

Example

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>

<div class="w3-container w3-orange">
  <h1>W3.CSS Demo</h1>
  <p>Resize this responsive page!</p>
</div>

<div class="w3-row-padding">

<div class="w3-third">
  <h2>London</h2>
  <p>London is the capital of England.</p>
  <p>It is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
</div>

<div class="w3-third">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
  <p>The Paris area is one of the largest population centers in Europe,
  with more than 12 million inhabitants.</p>
</div>

<div class="w3-third">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
  <p>It is the center of the Greater Tokyo Area,
  and the most populous metropolitan area in the world.</p>
</div>

</div>

</body>
</html>
To learn more about W3.CSS, read our W3.CSS Tutorial.
 
 

HTML Entities

Reserved characters in HTML must be replaced with character entities.
Characters that are not present on your keyboard can also be replaced by entities.

HTML Entities

Some characters are reserved in HTML.
If you use the less than (<) or greater than (>) signs in your text, the browser might mix them with tags.
Character entities are used to display reserved characters in HTML.
A character entity looks like this:
&entity_name; OR
&#entity_number;
To display a less than sign (<) we must write: &lt; or &#60;
Advantage of using an entity name: An entity name is easy to remember.
Disadvantage of using an entity name: Browsers may not support all entity names, but the support for numbers is good.

Non-breaking Space

A common character entity used in HTML is the non-breaking space: &nbsp;
A non-breaking space is a space that will not break into a new line.
Two words separated by a non-breaking space will stick together (not break into a new line). This is handy when breaking the words might be disruptive.
Examples:
  • § 10
  • 10 km/h
  • 10 PM
Another common use of the non-breaking space is to prevent that browsers truncate spaces in HTML pages.
If you write 10 spaces in your text, the browser will remove 9 of them. To add real spaces to your text, you can use the &nbsp; character entity.
The non-breaking hyphen (&#8209;) lets you use a hyphen character (‑) that won't break.

Some Other Useful HTML Character Entities

Result Description Entity Name Entity Number

non-breaking space &nbsp; &#160;
< less than &lt; &#60;
> greater than &gt; &#62;
& ampersand &amp; &#38;
" double quotation mark &quot; &#34;
' single quotation mark (apostrophe) &apos; &#39;
¢ cent &cent; &#162;
£ pound &pound; &#163;
¥ yen &yen; &#165;
€ euro &euro; &#8364;
© copyright &copy; &#169;
® registered trademark &reg; &#174;
Note: Entity names are case sensitive.

Combining Diacritical Marks

A diacritical mark is a "glyph" added to a letter.
Some diacritical marks, like grave (  ̀) and acute (  ́) are called accents.
Diacritical marks can appear both above and below a letter, inside a letter, and between two letters.
Diacritical marks can be used in combination with alphanumeric characters, to produce a character that is not present in the character set (encoding) used in the page.
Here are some examples:
MarkCharacterConstructResult
 ̀ a a&#768; à
 ́ a a&#769; á
̂ a a&#770; â
 ̃ a a&#771; ã
 ̀ O O&#768; Ò
 ́ O O&#769; Ó
̂ O O&#770; Ô
 ̃ O O&#771; Õ
You will see more HTML symbols in the next chapter of this tutorial.

HTML Symbols

HTML Symbol Entities

HTML entities were described in the previous chapter.
Many mathematical, technical, and currency symbols, are not present on a normal keyboard.
To add such symbols to an HTML page, you can use an HTML entity name.
If no entity name exists, you can use an entity number, a decimal, or hexadecimal reference.

Example

<p>I will display &euro;</p>
<p>I will display &#8364;</p>
<p>I will display &#x20AC;</p>

Will display as:

I will display €
I will display €
I will display €

Some Mathematical Symbols Supported by HTML

CharNumberEntityDescription
∀&#8704;&forall;FOR ALL
∂&#8706;&part;PARTIAL DIFFERENTIAL
∃&#8707;&exist;THERE EXISTS
∅&#8709;&empty;EMPTY SETS
∇&#8711;&nabla;NABLA
∈&#8712;&isin;ELEMENT OF
∉&#8713;&notin;NOT AN ELEMENT OF
∋&#8715;&ni;CONTAINS AS MEMBER
∏&#8719;&prod;N-ARY PRODUCT
∑&#8721;&sum;N-ARY SUMMATION
Full Math Reference

Some Greek Letters Supported by HTML

CharNumberEntityDescription
Α&#913;&Alpha;GREEK CAPITAL LETTER ALPHA
Β&#914;&Beta;GREEK CAPITAL LETTER BETA
Γ&#915;&Gamma;GREEK CAPITAL LETTER GAMMA
Δ&#916;&Delta;GREEK CAPITAL LETTER DELTA
Ε&#917;&Epsilon;GREEK CAPITAL LETTER EPSILON
Ζ&#918;&Zeta;GREEK CAPITAL LETTER ZETA
Full Greek Reference

Some Other Entities Supported by HTML

CharNumberEntityDescription
©&#169;&copy;COPYRIGHT SIGN
®&#174;&reg;REGISTERED SIGN
€&#8364;&euro;EURO SIGN
™&#8482;&trade;TRADEMARK
←&#8592;&larr;LEFTWARDS ARROW
↑&#8593;&uarr;UPWARDS ARROW
→&#8594;&rarr;RIGHTWARDS ARROW
↓&#8595;&darr;DOWNWARDS ARROW
♠&#9824;&spades;BLACK SPADE SUIT
♣&#9827;&clubs;BLACK CLUB SUIT
♥&#9829;&hearts;BLACK HEART SUIT
♦&#9830;&diams;BLACK DIAMOND SUIT
Full Currency Reference
Full Arrows Reference
Full Symbols Reference
 

HTML Encoding (Character Sets)

To display an HTML page correctly, a web browser must know which character set (character encoding) to use.

What is Character Encoding?

ASCII was the first character encoding standard (also called character set). ASCII defined 127 different alphanumeric characters that could be used on the internet: numbers (0-9), English letters (A-Z), and some special characters like ! $ + - ( ) @ < > .
ANSI (Windows-1252) was the original Windows character set, with support for 256 different character codes.
ISO-8859-1 was the default character set for HTML 4. This character set also supported 256 different character codes.
Because ANSI and ISO-8859-1 were so limited, the default character encoding was changed to UTF-8 in HTML5.
UTF-8 (Unicode) covers almost all of the characters and symbols in the world.
All HTML 4 processors also support UTF-8 encoding.

The HTML charset Attribute

To display an HTML page correctly, a web browser must know the character set used in the page.
This is specified in the <meta> tag:

For HTML4:

<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">

For HTML5:

<meta charset="UTF-8">

If a browser detects ISO-8859-1 in a web page, it defaults to ANSI, because ANSI is identical to ISO-8859-1 except that ANSI has 32 extra characters.

Differences Between Character Sets

The following table displays the differences between the character sets described above:
NumbASCIIANSI8859UTF-8Description
32 space
33!!!!exclamation mark
34""""quotation mark
35####number sign
36$$$$dollar sign
37%%%%percent sign
38&&&&ampersand
39''''apostrophe
40((((left parenthesis
41))))right parenthesis
42****asterisk
43++++plus sign
44,,,,comma
45----hyphen-minus
46....full stop
47////solidus
480000digit zero
491111digit one
502222digit two
513333digit three
524444digit four
535555digit five
546666digit six
557777digit seven
568888digit eight
579999digit nine
58::::colon
59;;;;semicolon
60<<<<less-than sign
61====equals sign
62>>>>greater-than sign
63????question mark
64@@@@commercial at
65AAAALatin capital letter A
66BBBBLatin capital letter B
67CCCCLatin capital letter C
68DDDDLatin capital letter D
69EEEELatin capital letter E
70FFFFLatin capital letter F
71GGGGLatin capital letter G
72HHHHLatin capital letter H
73IIIILatin capital letter I
74JJJJLatin capital letter J
75KKKKLatin capital letter K
76LLLLLatin capital letter L
77MMMMLatin capital letter M
78NNNNLatin capital letter N
79OOOOLatin capital letter O
80PPPPLatin capital letter P
81QQQQLatin capital letter Q
82RRRRLatin capital letter R
83SSSSLatin capital letter S
84TTTTLatin capital letter T
85UUUULatin capital letter U
86VVVVLatin capital letter V
87WWWWLatin capital letter W
88XXXXLatin capital letter X
89YYYYLatin capital letter Y
90ZZZZLatin capital letter Z
91[[[[left square bracket
92\\\\reverse solidus
93]]]]right square bracket
94^^^^circumflex accent
95____low line
96````grave accent
97aaaaLatin small letter a
98bbbbLatin small letter b
99ccccLatin small letter c
100ddddLatin small letter d
101eeeeLatin small letter e
102ffffLatin small letter f
103ggggLatin small letter g
104hhhhLatin small letter h
105iiiiLatin small letter i
106jjjjLatin small letter j
107kkkkLatin small letter k
108llllLatin small letter l
109mmmmLatin small letter m
110nnnnLatin small letter n
111ooooLatin small letter o
112ppppLatin small letter p
113qqqqLatin small letter q
114rrrrLatin small letter r
115ssssLatin small letter s
116ttttLatin small letter t
117uuuuLatin small letter u
118vvvvLatin small letter v
119wwwwLatin small letter w
120xxxxLatin small letter x
121yyyyLatin small letter y
122zzzzLatin small letter z
123{{{{left curly bracket
124||||vertical line
125}}}}right curly bracket
126~~~~tilde
127DEL    
128 €  euro sign
129 NOT USED
130 ‚  single low-9 quotation mark
131 ƒ  Latin small letter f with hook
132 „  double low-9 quotation mark
133 …  horizontal ellipsis
134 †  dagger
135 ‡  double dagger
136 ˆ  modifier letter circumflex accent
137 ‰  per mille sign
138 Š  Latin capital letter S with caron
139 ‹  single left-pointing angle quotation mark
140 Œ  Latin capital ligature OE
141 NOT USED
142 Ž  Latin capital letter Z with caron
143 NOT USED
144 NOT USED
145 ‘  left single quotation mark
146 ’  right single quotation mark
147 “  left double quotation mark
148 ”  right double quotation mark
149 •  bullet
150 –  en dash
151 —  em dash
152 ˜  small tilde
153 ™  trade mark sign
154 š  Latin small letter s with caron
155 ›  single right-pointing angle quotation mark
156 œ  Latin small ligature oe
157 NOT USED
158 ž  Latin small letter z with caron
159 Ÿ  Latin capital letter Y with diaeresis
160    no-break space
161 ¡¡¡inverted exclamation mark
162 ¢¢¢cent sign
163 £££pound sign
164 ¤¤¤currency sign
165 ¥¥¥yen sign
166 ¦¦¦broken bar
167 §§§section sign
168 ¨¨¨diaeresis
169 ©©©copyright sign
170 ªªªfeminine ordinal indicator
171 «««left-pointing double angle quotation mark
172 ¬¬¬not sign
173 ­­­soft hyphen
174 ®®®registered sign
175 ¯¯¯macron
176 °°°degree sign
177 ±±±plus-minus sign
178 ²²²superscript two
179 ³³³superscript three
180 ´´´acute accent
181 µµµmicro sign
182 pilcrow sign
183 ···middle dot
184 ¸¸¸cedilla
185 ¹¹¹superscript one
186 ºººmasculine ordinal indicator
187 »»»right-pointing double angle quotation mark
188 ¼¼¼vulgar fraction one quarter
189 ½½½vulgar fraction one half
190 ¾¾¾vulgar fraction three quarters
191 ¿¿¿inverted question mark
192 ÀÀÀLatin capital letter A with grave
193 ÁÁÁLatin capital letter A with acute
194 ÂÂÂLatin capital letter A with circumflex
195 ÃÃÃLatin capital letter A with tilde
196 ÄÄÄLatin capital letter A with diaeresis
197 ÅÅÅLatin capital letter A with ring above
198 ÆÆÆLatin capital letter AE
199 ÇÇÇLatin capital letter C with cedilla
200 ÈÈÈLatin capital letter E with grave
201 ÉÉÉLatin capital letter E with acute
202 ÊÊÊLatin capital letter E with circumflex
203 ËËËLatin capital letter E with diaeresis
204 ÌÌÌLatin capital letter I with grave
205 ÍÍÍLatin capital letter I with acute
206 ÎÎÎLatin capital letter I with circumflex
207 ÏÏÏLatin capital letter I with diaeresis
208 ÐÐÐLatin capital letter Eth
209 ÑÑÑLatin capital letter N with tilde
210 ÒÒÒLatin capital letter O with grave
211 ÓÓÓLatin capital letter O with acute
212 ÔÔÔLatin capital letter O with circumflex
213 ÕÕÕLatin capital letter O with tilde
214 ÖÖÖLatin capital letter O with diaeresis
215 ×××multiplication sign
216 ØØØLatin capital letter O with stroke
217 ÙÙÙLatin capital letter U with grave
218 ÚÚÚLatin capital letter U with acute
219 ÛÛÛLatin capital letter U with circumflex
220 ÜÜÜLatin capital letter U with diaeresis
221 ÝÝÝLatin capital letter Y with acute
222 ÞÞÞLatin capital letter Thorn
223 ßßßLatin small letter sharp s
224 àààLatin small letter a with grave
225 áááLatin small letter a with acute
226 âââLatin small letter a with circumflex
227 ãããLatin small letter a with tilde
228 äääLatin small letter a with diaeresis
229 åååLatin small letter a with ring above
230 æææLatin small letter ae
231 çççLatin small letter c with cedilla
232 èèèLatin small letter e with grave
233 éééLatin small letter e with acute
234 êêêLatin small letter e with circumflex
235 ëëëLatin small letter e with diaeresis
236 ìììLatin small letter i with grave
237 íííLatin small letter i with acute
238 îîîLatin small letter i with circumflex
239 ïïïLatin small letter i with diaeresis
240 ðððLatin small letter eth
241 ñññLatin small letter n with tilde
242 òòòLatin small letter o with grave
243 óóóLatin small letter o with acute
244 ôôôLatin small letter o with circumflex
245 õõõLatin small letter o with tilde
246 öööLatin small letter o with diaeresis
247 ÷÷÷division sign
248 øøøLatin small letter o with stroke
249 ùùùLatin small letter u with grave
250 úúúLatin small letter u with acute
251 ûûûLatin small letter with circumflex
252 üüüLatin small letter u with diaeresis
253 ýýýLatin small letter y with acute
254 þþþLatin small letter thorn
255 ÿÿÿLatin small letter y with diaeresis

The ASCII Character Set

ASCII uses the values from 0 to 31 (and 127) for control characters.
ASCII uses the values from 32 to 126 for letters, digits, and symbols.
ASCII does not use the values from 128 to 255.

The ANSI Character Set (Windows-1252)

ANSI is identical to ASCII for the values from 0 to 127.
ANSI has a proprietary set of characters for the values from 128 to 159.
ANSI is identical to UTF-8 for the values from 160 to 255.

The ISO-8859-1 Character Set

8859-1 is identical to ASCII for the values from 0 to 127.
8859-1 does not use the values from 128 to 159.
8859-1 is identical to UTF-8 for the values from 160 to 255.

The UTF-8 Character Set

UTF-8 is identical to ASCII for the values from 0 to 127.
UTF-8 does not use the values from 128 to 159. 
UTF-8 is identical to both ANSI and 8859-1 for the values from 160 to 255.
UTF-8 continues from the value 256 with more than 10 000 different characters.
For a closer look, study our Complete HTML Character Set Reference.

HTML Uniform Resource Locators

A URL is another word for a web address.
A URL can be composed of words (w3schools.com), or an Internet Protocol (IP) address (192.68.20.50).
Most people enter the name when surfing, because names are easier to remember than numbers.

URL - Uniform Resource Locator

Web browsers request pages from web servers by using a URL.
A Uniform Resource Locator (URL) is used to address a document (or other data) on the web.
A web address, like http://www.w3schools.com/html/default.aspfollows these syntax rules:
scheme://prefix.domain:port/path/filename
Explanation:
  • scheme - defines the type of Internet service (most common is http or https)
  • prefix - defines a domain prefix (default for http is www)
  • domain - defines the Internet domain name (like w3schools.com)
  • port - defines the port number at the host (default for http is 80)
  • path - defines a path at the server (If omitted: the root directory of the site)
  • filename - defines the name of a document or resource

Common URL Schemes

The table below lists some common schemes:
SchemeShort forUsed for
httpHyperText Transfer ProtocolCommon web pages. Not encrypted
httpsSecure HyperText Transfer ProtocolSecure web pages. Encrypted
ftpFile Transfer ProtocolDownloading or uploading files
file A file on your computer

URL Encoding

URLs can only be sent over the Internet using the ASCII character-set. If a URL contains characters outside the ASCII set, the URL has to be converted.
URL encoding converts non-ASCII characters into a format that can be transmitted over the Internet.
URL encoding replaces non-ASCII characters with a "%" followed by hexadecimal digits.
URLs cannot contain spaces. URL encoding normally replaces a space with a plus (+) sign, or %20.

Try It Yourself


If you click "Submit", the browser will URL encode the input before it is sent to the server.
A page at the server will display the received input.
Try some other input and click Submit again.

ASCII Encoding Examples

Your browser will encode input, according to the character-set used in your page.
The default character-set in HTML5 is UTF-8.
Character From Windows-1252 From UTF-8
€ %80 %E2%82%AC
£ %A3 %C2%A3
© %A9 %C2%A9
® %AE %C2%AE
À %C0 %C3%80
Á %C1 %C3%81
 %C2 %C3%82
à %C3 %C3%83
Ä %C4 %C3%84
Å %C5 %C3%85
For a complete reference of all URL encodings, visit our URL Encoding Reference.

HTML and XHTML

XHTML is HTML written as XML.

What Is XHTML?

  • XHTML stands for EXtensible HyperText Markup Language
  • XHTML is almost identical to HTML
  • XHTML is stricter than HTML
  • XHTML is HTML defined as an XML application
  • XHTML is supported by all major browsers

Why XHTML?

Many pages on the internet contain "bad" HTML.
This HTML code works fine in most browsers (even if it does not follow the HTML rules):
<html>
<head>
  <title>This is bad HTML</title>

<body>
  <h1>Bad HTML
  <p>This is a paragraph
</body>
Today's market consists of different browser technologies. Some browsers run on computers, and some browsers run on mobile phones or other small devices. Smaller devices often lack the resources or power to interpret "bad" markup.
XML is a markup language where documents must be marked up correctly (be "well-formed").
If you want to study XML, please read our XML tutorial.
By combining the strengths of HTML and XML, XHTML was developed.
XHTML is HTML redesigned as XML.

The Most Important Differences from HTML:

Document Structure

  • XHTML DOCTYPE is mandatory
  • The xmlns attribute in <html> is mandatory
  • <html>, <head>, <title>, and <body> are mandatory

XHTML Elements

  • XHTML elements must be properly nested
  • XHTML elements must always be closed
  • XHTML elements must be in lowercase
  • XHTML documents must have one root element

XHTML Attributes

  • Attribute names must be in lower case
  • Attribute values must be quoted
  • Attribute minimization is forbidden

<!DOCTYPE ....> Is Mandatory

An XHTML document must have an XHTML DOCTYPE declaration.
A complete list of all the XHTML Doctypes is found in our HTML Tags Reference.
The <html>, <head>, <title>, and <body> elements must also be present, and the xmlns attribute in <html> must specify the xml namespace for the document.
This example shows an XHTML document with a minimum of required tags:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

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

<body>
  some content
</body>

</html>

XHTML Elements Must Be Properly Nested

In HTML, some elements can be improperly nested within each other, like this:
<b><i>This text is bold and italic</b></i>
In XHTML, all elements must be properly nested within each other, like this:
<b><i>This text is bold and italic</i></b>

XHTML Elements Must Always Be Closed

This is wrong:
<p>This is a paragraph
<p>This is another paragraph
This is correct:
<p>This is a paragraph</p>
<p>This is another paragraph</p>

Empty Elements Must Also Be Closed

This is wrong:
A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">
This is correct:
A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />

XHTML Elements Must Be In Lower Case

This is wrong:
<BODY>
<P>This is a paragraph</P>
</BODY>
This is correct:
<body>
<p>This is a paragraph</p>
</body>

XHTML Attribute Names Must Be In Lower Case

This is wrong:
<table WIDTH="100%">
This is correct:
<table width="100%">

Attribute Values Must Be Quoted

This is wrong:
<table width=100%>
This is correct:
<table width="100%">

Attribute Minimization Is Forbidden

Wrong:
<input type="checkbox" name="vehicle" value="car" checked />
Correct:
<input type="checkbox" name="vehicle" value="car" checked="checked" />
Wrong:
<input type="text" name="lastname" disabled />
Correct:
<input type="text" name="lastname" disabled="disabled" />

How to Convert from HTML to XHTML

  1. Add an XHTML <!DOCTYPE> to the first line of every page
  2. Add an xmlns attribute to the html element of every page
  3. Change all element names to lowercase
  4. Close all empty elements
  5. Change all attribute names to lowercase
  6. Quote all attribute values

Validate HTML With The W3C Validator

Put your web address in the box below:


the source
http://www.w3schools.com 



 
 
 

 

 


الموضوع من قسم:

technology
تنويه : الصور والفيديوهات في هذا الموضوع على هذا الموقع مستمده أحيانا من مجموعة متنوعة من المصادر الإعلامية الأخرى. حقوق الطبع محفوظة بالكامل من قبل المصدر. إذا كان هناك مشكلة في هذا الصدد، يمكنك الاتصال بنا من هنا.

0 التعليقات لموضوع "html 5"


الابتسامات الابتسامات