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