Post on 18-Jan-2015
description
Introduction to HTML
By Brandon Himpfen
What is HTML?
HTML stands for HyperText Markup Language
The initial release of HTML was in 1993
The current version of HTML is 5, which was released on 4 February 2014
HTML is developed by W3C and WHATWG
Websites
A website consists of one web page or more than one web page.
An HTML document consists of HTML elements (tags with attributes).
A web browser will interpret the HTML elements to display the page.
HTML Elements
HTML elements in a web page is what the web browser will read and interpret to display the web page.
HTML elements will have a tag and one or more attributes (if supported).
Each HTML element will have a opening and closing – depends on the tag.
HTML Elements (Syntax)
In general:
<tag attribute=“value”> </tag>
Or
<tag attribute=“value” />
Remember, a tag can have one or more attributes.
HTML Elements Layout
A web page has a structure of how elements are laid out.
Defining a HTML Web Page
A HTML web page will start and end with a HTML tag, like so:
<HTML>
… more elements and content ..
</HTML>
HTML Head
After the opening of the <HTML> element, we will add the head HTML element.
The head element is a wrapper for other elements that define web page preferences.
What you add in between the head elements will not be shown in the web browser, as it is not web page content.
<HEAD>
… head related tags ...
</HEAD>
HTML Head … cont’d
The following HTML element tags can be used within the <head></head> element: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>
Title Tag
Each document should have a title tag: <title>Title of Web Page</title>
The title tag will only show on the web browser’s tab, not in the body on the web page itself.
The title tag should be in between the head tag:
<HEAD>
<TITLE>Title of Web Page</TITLE>
</HEAD>
Body Tag
The body tag is used after the closing of the title tag and before the closing of the HTML tag.
Anything within the body tag will be rendered (to display) on the web page.
<BODY>
… stuff to show website visitors …
</BODY>
Putting it All Together
We’ve just created a necessary HTML elements’ layout of a web page.
<HTML><HEAD>
<TITLE>Title of the Web Page</TITLE></HEAD><BODY>
… content shown to visitor in the web browser …</BODY>
</HTML>
Common HTML Tags
Let’s explore common HTML tags in a web page.
CSS related HTML Tags
CSS can be added to a web page in three (3) ways:
1. Inline
2. Internal
3. External
Inline CSS Example
Inline CSS will use a tag attribute called “style” and the CSS is held within that attribute.
Let’s say we want to add CSS to the paragraph tag, which is <p></p>
<p style=“color:#000;”>Paragraph text goes here.</p>
Inline CSS goes only to the opening of the tag.
In this example, color:#000 is the CSS.
Internal CSS Example
Internal CSS uses the <style></style> tag, with the CSS being held within that tag.
< STYLE >
… CSS goes here…
</STYLE>
The style tag can be used in between the head and body tags.
External CSS Example
External CSS is where a CSS file is references using the link tag.
<link rel="stylesheet" type="text/css" href=“path-to-file/filename.css">
The link tag can be used in between the head and body tags, but preferably in the head tags.
In the example, link tag uses a attribute of rel (relationship) with a value of stylesheet, aka a CSS file.
In the example, the attribute type, states the type of document being referenced (linked to).
Href attribute refers to link location.
Meta Tags
Meta tags should be used only within the <head></head> tags.
Metadata is data (information) about data.
Metadata will not be displayed on the page.
Syntax:
<meta name="" content="">
The name attribute is the name of the meta and the content attribute defines content of the name attribute.
You can have multiple meta tags in the head of the web page.
Meta tags are not required for the web page for render.
Common Meta Tags
Common meta tags’ names include:
<meta name="keywords" content="">
Keywords defines common words of a web page.
<meta name="description" content="">
Description defines what the web page is about.
<meta name="author" content="">
Author defines who made the web page.
Script Tags
Script tags define a client-side script.
The script tag is common for referencing (linking) to JavaScript files.
Should be at the bottom of a web page, just before the closing body tag, </body>, but can be used in between the <head></head> tags.
The script tag can also be used anywhere in between the body tags.
Google Analytics Javascript code will commonly be put in between the <head></head> tags.
Why it is preferred in the bottom, before the </body>? Because these files are generally not required to load a web page, but are used to enhance the web page functionality.
Heading Tags
Heading tags define titles of a web page, which is display to the visitor.
<hX>Title</hX>
Where X is the number of the heading.
The number of the heading can be from 1 to 6, where 1 is the highest level (biggest) and 6 being the least level (smallest).
The highest level should be used the least in a web page, where to the least level, h6, should be used the most (if needed.)
Paragraph Tags
Paragraphs use the p tag.
<p>The text of each paragraph will go here.</p>
Formatting Tags
Formatting tags fit into one of three categories:1. Text
2. Computer Output
3. Citations, Quotations, and Definition
Text Formatting Tags
Tag Example Usage Description<b> <b>text</b> Bold – You should be <strong> for HTML5 documents.
<em> <em>text</em> Emphasize
<i> <i>text</i> Italic
<small> <small>text</small> Small
<strong> <strong>text</strong> Newer version of bold
<sub> <sub>text</sub> Subscript
<sup> <sup>text</sup> Superscript
<ins> <ins>text</ins> Inserted text
<del> <del>text</del> Deleted text
<mark> <mark>text</mark> Marked text
Computer Output Formatting Tags
Tag Description<code> Code
<kbd> Keyboard text
<samp> Sample code
<var> Variable
<pre> Preformatted text
Syntax:
<tag>Text</tag>
Citations, Quotations, and Definition Tags
Tag Description<abbr> Abbreviation
<address> Address
<bdo> Bi-Directional Override - Text direction
<blockquote> Quote
<q> Short quotation
<cite> Citation
<dfn> Definition (term)
Images
To add an image to a web page, we will use the img tag.
<img src="" alt="" width="" height="“ />
The img tag does not have a closing tag, </img> but instead a closing in the opening tag.
Src attribute is the path to the image.
Alt should be a description of the image. Commonly seen when you hover over the image.
Width and height attributes should be included! It is a best practice.
Tables
<table width=“” cellpadding=“” cellspacing=“”><thead>
<tr><th></th>
</tr></thead><tbody>
<tr><td></td>
</tr></tbody>
</table>
Tables consist of opening and closing tag, with table specific tags within it.
thead is the header group of a table tr stands for table row th stands for table heding, usually the first row. td is a table cell, which contains data. tbody stands for the table body.
Use table, thead and tbody once. tr, th, and td can be used multiple times. tr wraps around th and td tags.
Links
Links use the a tag.
Links can be made to internal or external web pages.
<a href="“ title=“” target="">Link Text</a>
Href attribute is the URL
Title is the title of the link
You can add target, if you want, to open a link in a new web browser window.
The End
There is more to HTML then this, but this should give you a good foundation.
I hope you enjoyed this presentation!