website building

download sublime, responsive web template, and start with w3c tutorial about html

alt: provide the info about element in case the element itself can’t display

HTML elements are written with a start tag, with an end tag, with the content in between:

<tagname>content</tagname>
Some HTML elements do not have an end tag.

HTML Tip: Use Lowercase Tags

Single or Double Quotes?

Double style quotes are the most common in HTML, but single style can also be used.

In some situations, when the attribute value itself contains double quotes, it is necessary to use single quotes:

<p title=‘John “ShotGun” Nelson’>

Or vice versa:

<p title=“John ‘ShotGun’ Nelson”>

The <hr> tag creates a horizontal line in an HTML page.

Example

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

The HTML <head> element has nothing to do with HTML headings.

The HTML <head> element contains meta data. Meta data are not displayed.

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

More Meta Elements

In the chapter about HTML styles you discover more meta elements:

The HTML <style> element is used to define internal CSS style sheets.

The HTML <link> element is used to define external CSS style sheets.

Attribute Description
alt Specifies an alternative text for an image
disabled Specifies that an input element should be disabled
href Specifies the URL (web address) for a link
id Specifies a unique id for an element
src Specifies the URL (web address) for an image
style Specifies an inline CSS style for an element
title Specifies extra information about an element (displayed as a tool tip)
value Specifies the value (text content) for an input element.
Tag Description
<html> Defines an HTML document
<body> Defines the document’s body
<head> Defines the document’s head element
<h1> to <h6> Defines HTML headings
<hr> Defines a horizontal line

HTML Line Breaks

The HTML <br> element defines a line break.

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

The HTML <pre> Element

The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks:

Tag Description
<p> Defines a paragraph
<br> Inserts a single line break
<pre> Defines pre-formatted text

HTML Styling

Every HTML element has a default style (background color is white and text color is black).

Changing the default style of an HTML element, can be done with the style attribute.

This example changes the default background color from white to lightgrey:

Example

<body style=“background-color:lightgrey”>

<h1 style=“color:blue”>This is a heading</h1>
<p style=“color:red”>This is a paragraph.</p>

</body>

The HTML Style Attribute

The HTML style attribute has the following syntax:

style=”property:value

The property is a CSS property. The value is a CSS value.

  • Use the style attribute for styling HTML elements
  • Use background-color for background color
  • Use color for text colors
  • Use font-family for text fonts
  • Use font-size for text sizes
  • Use text-align for text alignment

HTML Text Formatting Elements

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

HTML Quotation and Citation Elements

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
<cite> Defines the title of a work
<q> Defines a short inline quotation

HTML Computer Code Elements

Tag Description
<code> Defines programming code
<kbd> Defines keyboard input
<samp> Defines computer output
<var> Defines a mathematical variable
<pre> Defines preformatted text

HTML Comment Tags

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

<!– Write your comments here –>
Note Note: There is an exclamation point (!) in the opening tag, but not in the closing tag.

Inline Styling (Inline CSS)

Inline styling is useful for applying a unique style to a single HTML element:

Inline styling uses the style attribute.

This inline styling changes the text color of a single heading:

Example

<h1 style=“color:blue”>This is a Blue Heading</h1>

Internal Styling (Internal CSS)

An internal style sheet can be used to define a common style for all HTML elements on a page.

Internal styling is defined in the <head> section of an HTML page, using a <style>element:

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey}
h1   {color:blue}
p    {color:green}
</style>
</head>
<body>

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

</body>
</html>

The id Attribute

All the examples above use CSS to style HTML elements in a general way.

To define a special style for one special element, first add an id attribute to the element:

<!DOCTYPE html>
<html>
<head>
<style>
p#p01 {
color: blue;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p id=”p01″>I am different.</p>

</body>
</html>

The class Attribute

To define a style for a special type (class) of elements, add a class attribute to the element:

<!DOCTYPE html>
<html>
<head>
<style>
p.error {
color:red;
}
</style>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p class=”error”>I am different.</p>
<p>This is a paragraph.</p>
<p class=”error”>I am different too.</p>

</body>
</html>

Use id to address single elements. Use class to address groups of elements.

HTML Style Tags

Tag Description
<style> Defines style information for a document
<link> Defines a link between a document and an external resource
Advertisements
website building

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s