Wednesday, July 30, 2014

HTML Images

Example

Norwegian Mountain Trip

Try it Yourself - Examples

Insert images
How to insert images into an HTML document.
Insert images from different locations
How to insert an image from another folder or another server.
(You can find more examples at the bottom of this page).

HTML Images - The <img> Tag and the Src Attribute

In HTML, images are defined with the <img> tag.
The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
To display an image on a page, you need to use the src attribute. Src stands for "source". The value of the src attribute is the URL of the image you want to display.
Syntax for defining an image:

The URL points to the location where the image is stored. An image named "boat.gif", located in the "images" directory on "www.w3schools.com" has the URL: http://www.w3schools.com/images/boat.gif.
The browser displays the image where the <img> tag occurs in the document. If you put an image tag between two paragraphs, the browser shows the first paragraph, then the image, and then the second paragraph.

HTML Images - The Alt Attribute

The required alt attribute specifies an alternate text for an image, if the image cannot be displayed.
The value of the alt attribute is an author-defined text:

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

HTML Images - Set Height and Width of an Image

The height and width attributes are used to specify the height and width of an image.
The attribute values are specified in pixels by default:

Tip: It is a good practice to specify both the height and width attributes for an image. If these attributes are set, the space required for the image is reserved when the page is loaded. However, without these attributes, the browser does not know the size of the image. The effect will be that the page layout will change during loading (while the images load).

Basic Notes - Useful Tips

Note: If an HTML file contains ten images - eleven files are required to display the page right. Loading images takes time, so my best advice is: Use images carefully.
Note: When a web page is loaded, it is the browser, at that moment, that actually gets the image from a web server and inserts it into the page. Therefore, make sure that the images actually stay in the same spot in relation to the web page, otherwise your visitors will get a broken link icon. The broken link icon is shown if the browser cannot find the image.

All css and css3 for css tools and css3 tools with css code generator and css3 code generator. All css generator and css3 generator for css button gerator and css3 button generator, css gradient generator and css3 gradient generator, css menu maker and css menu maker, css button maker and css3 button maker other help css editor and css3 editor.

HTML Styles - CSS

CSS (Cascading Style Sheets) is used to style HTML elements.

Look! Styles and colors

Manipulate Text

Colors, Boxes

and more...

Try it yourself

Try it Yourself - Examples

Using styles in HTML
How to add style information inside 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.

Styling HTML with CSS

CSS was introduced together with HTML 4, to provide a better way to style HTML elements.
CSS can be added to HTML in the following ways:

Inline - using the style attribute in HTML elements
Internal - using the <style> element in the <head> section
External - using an external CSS file

The preferred way to add CSS to HTML, is to put CSS syntax in separate CSS files.
However, in this HTML tutorial we will introduce you to CSS using the style attribute. This is done to simplify the examples. It also makes it easier for you to edit the code and try it yourself.
You can learn everything about CSS in our CSS Tutorial.

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 Example - Background Color

The background-color property defines the background color for an element:

Example

<!DOCTYPE html>
<html>

<body style="background-color:yellow;">
<h2 style="background-color:red;">This is a heading</h2>
<p style="background-color:green;">This is a paragraph.</p>
</body>

</html>

Try it yourself »

The background-color property makes the "old" bgcolor attribute obsolete.

HTML Style Example - Font, Color and Size

The font-family, color, and font-size properties defines the font, color, and size of the text in an element:

Example

<!DOCTYPE html>
<html>

<body>
<h1 style="font-family:verdana;">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>

</html>

Try it yourself »

The font-family, color, and font-size properties make the old <font> tag obsolete.

HTML Style Example - Text Alignment

The text-align property specifies the horizontal alignment of text in an element:

Example

<!DOCTYPE html>
<html>

<body>
<h1 style="text-align:center;">Center-aligned heading</h1>
<p>This is a paragraph.</p>
</body>

</html>

Try it yourself »

The text-align property makes the old <center> tag obsolete.

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>
body {background-color:yellow;}
p {color:blue;}
</style>
</head>

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:

HTML Style Tags

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

Deprecated Tags and Attributes

In HTML 4, several tags and attributes were used to style documents. These tags are not supported in newer versions of HTML.
Avoid using the elements: <font>, <center> and <strike>, and the attributes: color and bgcolor.

All css and css3 for css tools and css3 tools with css code generator and css3 code generator. All css generator and css3 generator for css button gerator and css3 button generator, css gradient generator and css3 gradient generator, css menu maker and css menu maker, css button maker and css3 button maker other help css editor and css3 editor.

HTML Head

Try it Yourself - Examples

<title> - Define a title for an HTML document
Use the <title> tag to define a title for a document.
<base> - Default URL and target for all links
Use the <base> tag to specify a default URL and a default target for all links on a page.
<meta> - Provide metadata for an HTML document
Use <meta> elements to specify a description, keywords, author, and character set of a document.

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>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.

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:

<!DOCTYPE html>
<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 the base URL/target for all relative URLs in a page:

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:

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

Metadata is data (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 metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.
<meta> tags always go inside the <head> element.

<meta> Tags - Examples of Use

Define keywords for search engines:

Define a description of your web page:

Define the author of a page:

Refresh document every 30 seconds:

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

HTML Links

Links are found in nearly all Web pages. Links allow users to click their way from page to page.

Try it Yourself - Examples

HTML links
How to create links in an HTML document.
(You can find more examples at the bottom of this page)

HTML Hyperlinks (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

HTML Link Syntax

The HTML code for a link is simple. It looks like this:

The href attribute specifies the destination of a link.

Example

<a href="http://www.w3schools.com/">Visit W3Schools</a>

which will display like this: Visit W3Schools
Clicking on this hyperlink will send the user to W3Schools' homepage.
Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML element.

HTML Links - The target Attribute

The target attribute specifies where to open the linked document.
The example below will open the linked document in a new browser window or a new tab:

Example

<a href="http://www.w3schools.com/" target="_blank">Visit W3Schools!</a>

Try it yourself »

HTML Links - The id Attribute

The id attribute can be used to create a bookmark inside an HTML document.
Tip: Bookmarks are not displayed in any special way. They are invisible to the reader.

Example

An anchor with an id inside an HTML document:

<a id="tips">Useful Tips Section</a>

Create a link to the "Useful Tips Section" inside the same document:

<a href="#tips">Visit the Useful Tips Section</a>

Or, create a link to the "Useful Tips Section" from another page:

<a href="http://www.w3schools.com/html_links.htm#tips">
Visit the Useful Tips Section</a>

Basic Notes - Useful Tips

Note: Always add a trailing slash to subfolder references. If you link like this: href="http://www.w3schools.com/html", you will generate two requests to the server, the server will first add a slash to the address, and then create a new request like this: href="http://www.w3schools.com/html/".

More Examples

An image as a link
How to use an image as a link.
Link to a location on the same page
How to link to a bookmark.
Break out of a frame
How to break out of a frame (if your site is locked in a frame).
Create a mailto link
How to link to a mail message (will only work if you have mail installed).
Create a mailto link 2
Another mailto link.

HTML Link Tags

Tag	Description
<a>	Defines a hyperlink

HTML Comments

Comment tags  are used to insert comments in HTML.

HTML Comment Tags

You can add comments to your HTML source by using the following syntax:

	Note: There is an exclamation point (!) in the opening tag, but not in the closing tag.

Comments are not displayed by the browser, but they can help document your HTML.
With comments you can place notifications and reminders in your HTML:

Example

<p>This is a paragraph.</p>

Try it yourself »

Comments are also great for debugging HTML, because you can comment out HTML lines of code, one at a time, to search for errors:

Example

Try it yourself »

Conditional Comments

You might stumble upon conditional comments in HTML:

Conditional comments defines HTML tags to be executed by IE only. We will not use conditional comments in this tutorial.

Software Program Tags

HTML comments tags can also be generated by various HTML software programs.
For example  tags wrapped inside HTML comments by FrontPage and Expression Web.
As a rule, let these tags stay, to help support the software that created them.

All css and css3 for css tools and css3 tools with css code generator and css3 code generator. All css generator and css3 generator for css button gerator and css3 button generator, css gradient generator and css3 gradient generator, css menu maker and css menu maker, css button maker and css3 button maker other help css editor and css3 editor.

HTML Text Formatting

This text is bold

This text is italic

This is computer output

This is_subscript and ^superscript

Try it yourself »

HTML Formatting Tags

HTML uses tags like <b> and <i> for formatting output, like bold or italic text.
These HTML tags are called formatting tags (look at the bottom of this page for a complete reference).

	Often <strong> renders as <b>, and <em> renders as <i>. However, there is a difference in the meaning of these tags: <b> or <i> defines bold or italic text only. <strong> or <em> means that you want the text to be rendered in a way that the user understands as "important". Today, all major browsers render strong as bold and em as italics. However, if a browser one day wants to make a text highlighted with the strong feature, it might be cursive for example and not bold!

Often <strong> renders as <b>, and <em> renders as <i>.

However, there is a difference in the meaning of these tags:

<b> or <i> defines bold or italic text only.

<strong> or <em> means that you want the text to be rendered in a way that the user understands as "important". Today, all major browsers render strong as bold and em as italics. However, if a browser one day wants to make a text highlighted with the strong feature, it might be cursive for example and not bold!

Try it Yourself - Examples

Text formatting
How to format text in an HTML document.
Preformatted text
How to control the line breaks and spaces with the <pre> tag.
"Computer output" tags
How different "computer output" tags will be displayed.
Address
How to define contact information for the author/owner of an HTML document.
Abbreviations and acronyms
How to handle abbreviations and acronyms.
Text direction
How to change the text direction.
Quotations
How to handle long and short quotations.
Deleted and inserted text
How to mark deleted and inserted text.
Marked/Highlighted text
How to mark/highlight text.

HTML Text Formatting Tags

Tag	Description
<b>	Defines bold text
<em>	Defines emphasized text
<i>	Defines a part of text in an alternate voice or mood
<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

HTML "Computer Output" Tags

Tag	Description
<code>	Defines computer code text
<kbd>	Defines keyboard text
<samp>	Defines sample computer code
<var>	Defines a variable
<pre>	Defines preformatted text

HTML Citations, Quotations, and Definition Tags

Tag	Description
<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
<q>	Defines an inline (short) quotation
<cite>	Defines the title of a work
<dfn>	Defines a definition term

HTML Paragraphs

HTML documents are divided into paragraphs.

HTML Paragraphs

Paragraphs are defined with the <p> tag.

Example

<p>This is a paragraph</p>
<p>This is another paragraph</p>

Try it yourself »

Note: Browsers automatically add an empty line before and after a paragraph.

Don't Forget the End Tag

Most browsers will display HTML correctly even if you forget the end tag:

Example

<p>This is a paragraph
<p>This is another paragraph

Try it yourself »

The example above will work in most browsers, but don't rely on it. Forgetting the end tag can produce unexpected results or errors.
Note: Future version of HTML will not allow you to skip end tags.

HTML Line Breaks

Use the <br> tag if you want a line break (a new line) without starting a new paragraph:

Example

<p>This is<br>a para<br>graph with line breaks</p>

Try it yourself »

The <br> element is an empty HTML element. It has no end tag.

HTML Output - Useful Tips

You cannot be sure how HTML will be displayed. Large or small screens, and resized windows will create different results.
With HTML, you cannot change the output by adding extra spaces or extra lines in your HTML code.
The browser will remove extra spaces and extra lines when the page is displayed. Any number of lines count as one line, and any number of spaces count as one space.
Try it yourself »
(The example demonstrates some HTML formatting problems)

All css and css3 for css tools and css3 tools with css code generator and css3 code generator. All css generator and css3 generator for css button gerator and css3 button generator, css gradient generator and css3 gradient generator, css menu maker and css menu maker, css button maker and css3 button maker other help css editor and css3 editor.

Wednesday, July 30, 2014

HTML Images

Example

Norwegian Mountain Trip

Try it Yourself - Examples

HTML Images - The <img> Tag and the Src Attribute

HTML Images - The Alt Attribute

HTML Images - Set Height and Width of an Image

Basic Notes - Useful Tips

HTML Styles - CSS

Look! Styles and colors

Try it Yourself - Examples

Styling HTML with CSS

Inline Styles

HTML Style Example - Background Color

Example

HTML Style Example - Font, Color and Size

Example

HTML Style Example - Text Alignment

Example

Internal Style Sheet

External Style Sheet

HTML Style Tags

Deprecated Tags and Attributes

HTML Head

Try it Yourself - Examples

The HTML <head> Element

The HTML <title> Element

The HTML <base> Element

The HTML <link> Element

The HTML <style> Element

The HTML <meta> Element

<meta> Tags - Examples of Use

The HTML <script> Element

HTML head Elements

HTML Links

Try it Yourself - Examples

HTML Hyperlinks (Links)

HTML Link Syntax

Example

HTML Links - The target Attribute

Example

HTML Links - The id Attribute

Example

Basic Notes - Useful Tips

More Examples

HTML Link Tags

HTML Comments

HTML Comment Tags

Example

Example

Conditional Comments

Software Program Tags

HTML Text Formatting

HTML Formatting Tags

Try it Yourself - Examples

HTML Text Formatting Tags

HTML "Computer Output" Tags

HTML Citations, Quotations, and Definition Tags

HTML Paragraphs

HTML Paragraphs

Example

Don't Forget the End Tag

Example

HTML Line Breaks

Example

HTML Output - Useful Tips

My First Heading