Basic Flashcards
With HTML you can create your own Web site. This tutorial teaches you everything about HTML. HTML is easy to learn - You will enjoy it.
What is HTML?
HTML stands for Hyper Text Markup Language
HTML Elements
An HTML element is everything between the start tag and the end tag.
The <!DOCTYPE> Declaration
The <!DOCTYPE> declaration helps the browser to display a web page correctly.
Doctype for HTML5
<!DOCTYPE html>
HTML Images
HTML images are defined with the <img></img> tag.
<img></img>
HTML Links
HTML links are defined with the <a> tag.</a>
<a>This is a link</a>
HTML Paragraphs
HTML paragraphs are defined with the <p> tag.
HTML Headings
HTML headings are defined with the <h1> to <h6> tags.
HTML Element Syntax
An HTML element starts with a start tag / opening tag
An HTML element ends with an end tag / closing tag
The element content is everything between the start and the end tag
Some HTML elements have empty content
Empty elements are closed in the start tag
Most HTML elements can have attributes
Proper way of closing empty elements in XHTML
HTML elements with no content are called empty elements.
<br></br> is an empty element without a closing tag (the <br></br> tag defines a line break).
Tip: In XHTML, all elements must be closed. Adding a slash inside the start tag, like <br></br>, is the proper way of closing empty elements in XHTML (and XML).
Use Lowercase Tags, Why?
W3Schools use lowercase tags because the World Wide Web Consortium (W3C) recommends lowercase in HTML 4, and demands lowercase tags in XHTML.
HTML Attributes
HTML elements can have attributes
Attributes provide additional information about an element
Attributes are always specified in the start tag
Attributes come in name/value pairs like: name=”value”
HTML Lines
The <hr>tag creates a horizontal line in an HTML page.
HTML Comments
Comments can be inserted into the HTML code to make it more readable and understandable. Comments are ignored by the browser and are not displayed.
Example:
<!-- This is a comment -->
HTML Line Breaks
Use the <br></br> tag if you want a line break (a new line) without starting a new paragraph.
The <br></br> element is an empty HTML element. It has no end tag.
<p>
</p>
Defines a paragraph.
<br></br>
Inserts a single line break.
Defines an HTML document.
Defines the document’s body.
<hr></hr>
Defines a horizontal line.
<!–>
Defines a comment.
class
Specifies one or more classnames for an element (refers to a class in a style sheet).
id
Specifies a unique id for an element.
style
Specifies an inline CSS style for an element.
title
Specifies extra information about an element (displayed as a tool tip).
Often <strong> renders as <b>, and <em> renders as <i>.</i></em></b></strong>
However, there is a difference in the meaning of these tags
<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!</em></strong>
<b></b>
Defines bold text.
<em></em>
Defines emphasized text.
<i></i>
Defines a part of text in an alternate voice or mood.
<small></small>
Defines smaller text.
<strong></strong>
Defines important text.
Defines subscripted text.
Defines superscripted text.
<ins></ins>
Defines inserted text.
<del></del>
Defines deleted text.
<code></code>
Defines computer code text.
<kbd></kbd>
Defines keyboard text.
<samp></samp>
Defines sample computer code.
<var></var>
Defines a variable.
<pre>
</pre>
Defines preformatted text.
<abbr></abbr>
Defines an abbreviation or acronym.
<address>
</address>
Defines contact information for the author/owner of a document.
Defines the text direction.
<blockquote>
</blockquote>
Defines a section that is quoted from another source.
Defines an inline (short) quotation.
<cite></cite>
Defines the title of a work.
<dfn></dfn>
Defines a definition term.
A hyperlink (or link)
Is a word, group of words, or image that you can click on to jump to another document.
HTML Link Syntax
The HTML code for a link is simple. It looks like this:
<a>Link text</a>
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>Visit W3Schools!</a>
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.
HTML Links - The id Attribute Examples
Example
An anchor with an id inside an HTML document:
<a>Useful Tips Section</a>
Create a link to the “Useful Tips Section” inside the same document:
<a>Visit the Useful Tips Section</a>
Or, create a link to the “Useful Tips Section” from another page:
<a>
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/”.
<a></a>
Defines a hyperlink
