Fourni par Blogger.

jeudi 15 septembre 2016

HTML Headers... which size to choose for your article's Title ?

HTML Headings


❮ PreviousNext ❯
Headings are important in HTML documents.

  HTML Headings



Headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.








Example


<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
                                   <h6>This is heading 6</h6>
Note: Browsers automatically add some white space (a margin) before and after a heading.

Headings Are Important


Search engines use the headings to index the structure and content of your web pages.
Users skim your pages by its headings. It is important to use headings to show the document structure.
<h1> headings should be used for main headings, followed by <h2> headings, then the less important <h3>, and so on.
Note: Use HTML headings for headings only. Don't use headings to make text BIG or bold.

HTML Horizontal Rules



The <hr> tag defines a thematic break in an HTML page, and is most often displayed as a horizontal rule.
The <hr> element is used to separate content (or define a change) in an HTML page:

Example


<h1>This is heading 1</h1>
<p>This is some text.</p>
<hr>
<h2>This is heading 2</h2>
<p>This is some other text.</p>
<hr>
GOT IT 

The HTML <head> Element


The HTML <head> element has nothing to do with HTML headings.
The <head> element is a container for metadata. HTML metadata is data about the HTML document. Metadata is not displayed.
The <head> element is placed between the <html> tag and the <body> tag:

Example

<!DOCTYPE html>
<html>

<head>
  <title>My First HTML</title>
  <meta charset="UTF-8">
</head>

<body>
.
.
.
Note: Metadata typically define the document title, character set, styles, links, scripts, and other meta information.

HTML Tip - How to View HTML Source


Have you ever seen a Web page and wondered "Hey! How did they do that?"
To find out, right-click in the page and select "View Page Source" (in Chrome) or "View Source" (in IE), or similar in another browser. This will open a window containing the HTML code of the page.

HTML Tag Reference


learntocode's tag reference contains additional information about these tags and their attributes.
You will learn more about HTML tags and attributes in the next chapters of this tutorial.
TagDescription

<html>Defines the root of an HTML document
<body>Defines the document's body
<head>A container for all the head elements (title, scripts, styles, meta information, and more)
<h1> to <h6>Defines HTML headings
<hr>Defines a thematic change in the content
 Published: By: ERRAZKI - 06:40

Html Formatting..



This text is bold
This text is italic
This is subscript and superscript







HTML Formatting Elements

In the previous chapter, you learned about the HTML style attribute.
HTML also defines special elements for defining text with a special meaning.
HTML uses elements like <b> and <i> for formatting output, like bold or italic text.
Formatting elements were designed to display special types of text:
  • <b> - Bold text
  • <strong> - Important text
  • <i> - Italic text
  • <em> - Emphasized text
  • <mark> - Marked text
  • <small> - Small text
  • <del> - Deleted text
  • <ins> - Inserted text
  • <sub> - Subscript text
  • <sup> - Superscript text

HTML <b> and <strong> Elements

The HTML <b> element defines bold text, without any extra importance.

<b>This text is bold</b>


The HTML <strong> element defines strong text, with added semantic "strong" importance.
<strong>This text is strong</strong>



HTML <i> and <em> Elements


The HTML <i> element defines italic text, without any extra importance.



<i>This text is italic</i>
The HTML <em> element defines emphasized text, with added semantic importance.


<em>This text is emphasized</em>
Note: Browsers display <strong> as <b>, and <em> as <i>. However, there is a difference in the meaning of these tags: <b> and <i> defines bold and italic text, but <strong> and <em> means that the text is "important".

HTML <small> Element

The HTML <small> element defines smaller text:

Example

<h2>HTML <small>Small</small> Formatting</h2>


HTML <mark> Element

The HTML <mark> element defines marked or highlighted text:

Example

<h2>HTML <mark>Marked</mark> Formatting</h2>

HTML <del> Element

The HTML <del> element defines
deleted (removed) text.

Example

<p>My favorite color is <del>blue</del> red.</p>

HTML <ins> Element

The HTML <ins> element defines
inserted (added) text.

Example

<p>My favorite <ins>color</ins> is red.</p>

HTML <sub> Element

The HTML <sub> element defines subscripted text.

Example

<p>This is <sub>subscripted</sub> text.</p>

HTML <sup> Element

The HTML <sup> element defines superscripted text.

Example

<p>This is <sup>superscripted</sup> text.</p>

HTML Text Formatting Elements

TagDescription
<b>Defines bold text
<em>Defines emphasized text 
<i>Defines italic text
<small>Defines smaller text
<strong>Defines important text
<sub>Defines subscripted text
<sup>Defines superscripted text
<ins>Defines inserted text
<del>Defines deleted text
<mark>Defines marked/highlighted text














 Published: By: ERRAZKI - 06:39

mercredi 14 septembre 2016

HTML Quotation and Citation Elements

Here is a quote from WWF's website:
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.

HTML <q> for Short Quotations

The HTML <q> element defines a short quotation.
Browsers usually insert quotation marks around the <q> element.

Example

<p>WWF's goal is to: <q>Build a future where people live in harmony with nature.</q></p>

HTML <blockquote> for Quotations

The HTML <blockquote> element defines a section that is quoted from another source.
Browsers usually indent <blockquote> elements.

Example

<p>Here is a quote from WWF's website:</p>
<blockquote cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature.
The world's leading conservation organization,
WWF works in 100 countries and is supported by
1.2 million members in the United States and
close to 5 million globally.
</blockquote>

HTML <abbr> for Abbreviations

The HTML <abbr> element defines an abbreviation or an acronym.
Marking abbreviations can give useful information to browsers, translation systems and search-engines.

Example

<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
The HTML <address> element defines contact information (author/owner) of a document or an article.
The <address> element is usually displayed in italic. Most browsers will add a line break before and after the element.

Example

<address>
Written by John Doe.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>

HTML <cite> for Work Title

The HTML <cite> element defines the title of a work.
Browsers usually display <cite> elements in italic.

Example

<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>

HTML <bdo> for Bi-Directional Override

The HTML <bdo> element defines bi-directional override.
The <bdo> element is used to override the current text direction:

Example

<bdo dir="rtl">This text will be written from right to left</bdo>

HTML Quotation and Citation Elements

TagDescription
<abbr>Defines an abbreviation or acronym
<address>Defines contact information for the author/owner of a document
<bdo>Defines the text direction
<blockquote>Defines a section that is quoted from another source
<cite>Defines the title of a work
<q>Defines a short inline quotation
 Published: By: ERRAZKI - 10:23

mardi 13 septembre 2016

Html computer code

HTML Computer Code Elements

computer Code

<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>

HTML Computer Code Formatting

HTML normally uses variable letter size and spacing.
This is not what we want when displaying computer code.
The <kbd>, <samp>, and <code> elements are all displayed in fixed letter size and spacing.

HTML <kbd> For Keyboard Input

The HTML <kbd> element defines keyboard input:

Example

<kbd>File | Open...</kbd>
Result:
File | Open...

HTML <samp> For Computer Output

The HTML <samp> element defines sample output from a computer program:

Example

<samp>
demo.example.com login: Apr 12 09:10:17
Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>
Result:
demo.example.com login: Apr 12 09:10:17 Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189

HTML <code> For Computer Code

The HTML <code> element defines a piece of programming code:

Example

<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>
Result:
var x = 5; var y = 6; document.getElementById("demo").innerHTML = x + y;
Notice that the <code> element does not preserve extra whitespace and line-breaks.
To fix this, you can put the <code> element inside a <pre> element:

Example

<pre>
<code>
var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;
</code>
</pre>
Result:

var x = 5;
var y = 6;
document.getElementById("demo").innerHTML = x + y;

HTML <var> For Variables

The HTML <var> element defines a variable.
The variable could be a variable in a mathematical expression or a variable in programming context:

Example

Einstein wrote: <var>E</var> = <var>m</var><var>c</var><sup>2</sup>.
Result:
Einstein wrote: E = mc2.

HTML Computer Code Elements

TagDescription
<code>Defines programming code
<kbd>Defines keyboard input 
<samp>Defines computer output
<var>Defines a variable
<pre>Defines preformatted text
 Published: By: ERRAZKI - 11:04
Inscription à : Articles (Atom)