Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Session #1: HTML Basics

No description
by

Joel McCandless

on 20 September 2013

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Session #1: HTML Basics

HTML Tags
Text Content
Child Elements
In order for a document to be useful, there needs to be content. The content is what is stored inside of elements, with the element itself providing the semantics for the content.
Content
Elements (Tags)
Attributes
Basic
Components of HTML

HTML: What is it?
Crash Course Series
Session 1

HTML
Just as it sounds, this is just text contained in the element.

After all, most documents have no value without some sort of text in them.
HyperText Markup Language
By Joel McCandless
Markup Language: A means of annotating a document to provide enhanced meaning beyond that of the textual content it contains

HyperText: Some of the text links to other documents or other parts of the same document. The textual content can be navigated in a non-linear fashion.

HTML is the means of specifying the presentational and procedural annotations of a document on the World Wide Web.
Numeric Character References
Entity Character References
Sometimes a character is needed in the page that is one of the characters used to define HTML structure. Character references allow a way of specifying that character without it being confused for HTML markup.
Entity Character References
Entity character references are human-readable character references, making them easier to remember. Typically for symbolic characters that are commonly used.
Numeric character references use a number code for each character, allowing pretty much any character to be specified via a character reference rather than with plain text
Σ
©
The basic structural components of an HTML document.
Elements have a tag name, a start tag, and an end tag.
<title>HTML Page</title>
Elements may have the following:
Attributes are modifiers of elements used to augment them with additional information.
id
- gives the element a document-wide unique identifier
class
- classifies similar elements, either semantically or for presentation purposes
style
- applies inline CSS styling to the element
title
- subtextual explanation of the element, usually for a tooltip
They are usually name/value pairs, separated by an =
Some attributes need no value, but affect the element merely by their presence. Ex: ismap for img elements
<span

id="myspan"
>Hello</span>
Content can generally be of one of two types:
<div>
<img src="userpic.jpg" /><br />
Username
</div>
<span>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin nec tincidunt nulla. Etiam erat est, tincidunt a odio nec, varius.
</span>
Elements may contain other elements, giving the HTML document a hierarchical structure.
Placing an element inside of another element gives it context.
<div>
<img src="userpic.jpg" /><br />
<a href="userinfo.html">User Info</a>
</div>
Document
Structure Elements
<html>
This is the root element of all HTML documents.

All other elements in an HTML document are contained within this tag.
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
<head>
This element contains processing information and metadata for the HTML document.
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
Children: <head>, <body>
Common children:
Common attributes
<title>
Specifies the title for the document.
Most browsers show this in the title bar.
Cannot contain any child elements.
<html>
<head>
<title>My Page Title</title>
</head>
<body>
</body>
</html>
<meta>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
</body>
</html>
Provides metadata about the web page.
Example above defines the character set used in the content.
Can also be used for keywords, geographical data, and SEO (Search Engine Optimization)
<link>
<html>
<head>
<link rel="stylesheet" type="text/css" href="doc.css" title="description_of_style">
<body>
</body>
</html>
Links to external documents.
Most common usage is to link to CSS stylesheets to be applied to this document.
<script>
<html>
<head>
<script src="app.js"></script>
<script type="text/javascript">
document.write("Hello World!");
</script>
<body>
</body>
</html>
Loads a script from an external file if 'src' attribute is used (content must be empty).
Defines embedded script to be used in the document.
<style>
<html>
<head>
<style type="text/css">
h1 {color:red;}
p {color:blue;}
</style>
<body>
</body>
</html>
Specifies a style for the document.
Is an alternative to linking to an external CSS file
Can also load external CSS files via the @import directive.
<body>
The container element for all displayable content in the HTML document.
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>My Content</div>
</body>
</html>
Children: Too many to show here
Document
Head Elements
<title> <meta> <link> <style> <script>
Document
Body Elements
These make up the presentational structure of the HTML document
They can be grouped into a few main categories:
Block elements
Inline elements
Table elements
Frame elements
Form elements
Image & Object elements
HTML Body Elements Reference
Block elements
Inline elements
Image & Object
elements

Table elements
Form elements
Frame elements
Block elements are presentational structure elements
They are contained by the bounds of their parents.
They can have margins, width, height, and do not break across the lines of the textual flow of the document.
They always have a rectangular structure, often referred to as the
box model
.
The box model consists or
padding
,
margin
,
border
, and
content
About the Box Model
Padding
Content
Margin
Border
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo sapien et sem dignissim porta. In vitae mattis arcu, sit amet porta mi. Donec scelerisque non magna sit amet placerat. Nulla a tellus commodo arcu vestibulum cursus. Ut suscipit libero sed nisl vehicula
Basic Text
Lists
Other Block
Elements
<p>
Headers
<ul>
<ol>
<li>
<div>
<blockquote>
<pre>
<hr>
<del>
<ins>
<noscript>
Inline elements are treated as part of the flow of a document
They can wrap from one line to the next
They cannot have margins, width, or height
They do not have to remain confined to their parent's bounds. They can extend outside of their parent if the document flow dictates it
Example
<a>
Phrase
<span>
Other Inline
Elements
Elements
Phrase Elements
Computer
Phrase Elements
Presentation
Phrase Elements
General
<em>
<strong>
<code>
<samp>
<strike>
<s>
<small>
<b>
<i>
<u>
<del>
<ins>
<br>
<q>
<sub>
<sup>
<object>
<img>
<map>
<area>
<thead>
<tfoot>
<tbody>
<colgroup>, <col>
<tr>
<table>
<caption>
<th>
<td>
<select>
<form>
<legend>
<fieldset>
<input>
<label>
<button>
<textarea>
<option>
<optgroup>
<iframe>
Creates a paragraph. Paragraphs automatically have spacing added between them.
<h1>, <h2>, <h3>, <h4>, <h5>, <h6>
Section headings at different levels.
<h1> is the highest-level (largest) heading
<h2> is the lowest-level (smallest) heading
An unordered (bulleted) list
Bullet markers can be specified using CSS
An ordered (enumerated, or numbered) list
The type of ordering (numbered, lettered, Roman numerals) can be specified using CSS
A list item in an ordered or unordered list
Used to indicate a single item in the list
A logical division (section) to the document
A generic element with no semantic meaning
Used for logical ordering, presentation purposes, or controlling behavior with stylesheets or DOM calls
A block-level quotation
Used for quotations that contain block-level elements, such as paragraphs
The default presentation indents the content on both the left and right
Pre-formatted text
Usually browsers ignore whitespace in elements, and collapse it all to a single space
This instructs the browser to render all whitespace exactly as it is authored
A horizontal rule
Usually rendered as some sort of line between sections in a page
Marks a section of deleted content
The content is still visible, but is indicated as having been deleted
Useful for indicating edits to a document
Marks a section of inserted content
The content is indicated that it has been added since a previous version of the document
Useful for indicating edits to a document
Replacement content for scripts
If a section of the document is managed by javascript, and the browser has javascript disabled, this will be displayed in it's place
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo sapien et sem dignissim porta. In vitae mattis arcu, sit amet porta mi. Donec scelerisque non magna sit amet placerat.
Anchor element
Called an anchor because web designers/developers can use it to anchor a URL to some text or other content on the page
When users click the text/content, it activates the link and allows them to visit the page whose URL is in the link
The anchor can be either the origin or the target of the hyperlink
Use the 'href' attribute to make it the origin
Use the 'name' or 'id' attributes to make it a target
Indicates that the content is a snippet of code
Can be used to show HTML, javascript, etc. without it being interpreted as part of the page
Indicates the contents are some sample output from a program or script
The code is what is executed, but it can output text to a console. This allows you to show it within an HTML page.
In HTML 4, this meant 'bold'
In HTML 5 it means "text to which attention is being drawn for utilitarian purposes without conveying any extra importance and with no implication of an alternate voice or mood".
Often still rendered as bold, but could be rendered differently now through CSS.
In HTML 4, this meant 'italic'
In HTML 5, this means "a different quality of text" or "an alternative voice or mood"—e.g., a thought, a ship name, a binary species name, a foreign-language phrase, etc.
Often still rendered as italic, but could have a different rendering through CSS.
In HTML 4, this meant 'underlined'
In HTML 5, this means "a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labelling the text as being a proper name in Chinese text (a Chinese proper name mark), or labelling the text as being misspelt."
Other elements are almost always more appropriate than u in HTML5
Designers/developers should not to use underlined text where it could be confused for a hyper-link.
Default rendering is still usually underlined, but could be different using CSS
In HTML 4, this made the contained text smaller than the surrounding text
In HTML 5, this denotes "side comments such as small print."
Default rendering is still smaller text, but could be changed via CSS
In HTML 4, this meant 'strike-through' and was equivalent to <strike>
In HTML 5, it denotes information that is "no longer accurate or no longer relevant"
Default rendering is still a strike-through, but could be changed via CSS
Strike-through text/content
Gives emphasis to the text. Usually rendered using italics.
Rendering can be changed via CSS
Give text strong emphasis
Typical rendering is bold
Rendering can be changed via CSS
And inline (non-block) logical division
Generic element with no semantic meaning used to distinguish a document section
Usually used for purposes or presentation or behavior controlled by CSS or DOM calls
A forced line-break
Much like using the 'return' key in a word processor
Inserted text.
Used to indicate that the contents were inserted after a previous version of the document
Often used to indicate the replacement text for text that was indicated as deleted by the <del> element
Deleted text.
Indicates that the content was deleted since a previous version of the document
Usually indicated with a strike-through
Useful for showing changes in a document
A quote
Used for quotations that do not contain block-level elements such as <p> (paragraph) tags.
Quotations that require block-level tags should use the <blockquote> tag
Typically rendered using quotation marks.
Can be nested within other <q> tags
Can be used for each non-block-level portion of a quotation inside a <blockquote> tag if you wish to have both indentation as well as quotation marks
Subscript
Makes the content render at roughly half the line-height, shifted to the lower half the the line
Superscript
Makes the content render at roughly half the line-height, shifted to the upper half of the line
Inserts an image into the document
The 'src' attribute indicates the URL to the image
The 'alt' attribute indicates alternate text to be displayed if the image cannot be displayed
Safari and Google Chrome do not display the 'alt' attribute at all
Includes an object (such as a Flash object, or a Java applet) in the page
The 'type' of object is indicated by the 'type' attribute
Can be any type the browser understands, such as an embedded HTML page, a sound file, or an object to be handled by a plug-in (Flash, Java)
Specifies a client-side image map
Image maps are single images where different areas of the image can be clicked or focused with different results
Indicates a single area within an image map
Each area can have different results when focused, or point to a different hyperlink
Specifies a table
Tables used to be used a lot for layout, but the preferred method now is using <div> tags and CSS for positioning
Tables should typically only be used now for a literal/traditional table of values
Specifies a caption for a table
Specifies that the contents are the header part of the table
Indicates that the contents are a single cell in the table header
Traditionally the rendering is bold and centered
Can be made to span multiple columns using the 'colspan' attribute
Specifies that the contents are the footer part of the table
Specifies the body of a table
Technically, this element is optional, but it is good practice to include it for good semantic structure
<colgroup> groups a set of columns (<col> elements)
<col> specifies a column in a table
Usually not used, as columns are typically kept track of by the cells within rows
Specifies that the contents are row of cells within a table
Table data
Indicates that the contents are a single cell of data within the table
Can span multiple columns using the 'colspan' attribute
Can span multiple rows using the 'rowspan' tag
Creates a form
Indicates that all of the contents are grouped as a single form, to be handled together
There is a required 'action' attribute that indicates the overall operation of the form
A container to give structure to a form
Used to group a set of related elements within a form
CSS can be used to render the style of the grouping
A legend (or caption) for a <fieldset> in a <form>
Implements one of a variety of standard form controls
Type is controlled by the 'type' attribute
Types include: checkbox, radio, button, submit (button), image (button), reset (button), text (single line), password, file, hidden (not visible to the user)
Creates a label for a single <input> element
Clicking the label fires the same event as clicking on the element itself
A generic form button
Unlike the <input> element type button, this can contain a range of other elements, allowing for the creation of complex buttons
A multiple-line text input
The height is controlled by the 'rows' attribute
The width is controlled by the 'cols' attribute
The content can only be plain (not-formatted) text
Creates a selection list
Allows for only a single selection
Typically rendered as a drop-down list
Creates a single option in a <select> selection list
Used to group related <option> elements in a <select> selection list
Previous HTML versions supported <frameset>, <frame>, and <noframes> tags
HTML 5 only supports the <iframe> tag
iframes are generally frowned upon these days, and present difficulties, as javascript cannot access content between the main frame and the iframe (they are sandboxed) to prevent javascript cross-site scripting attacks (a means of hacking)
An inline frame
Places another HTML document in the frame
This frame can be the target for hyperlinks
Any content within the tag will be used as alternate text in browsers not supporting frames
<p>This is some text in a paragraph.</p>
<p>This is some other text in a paragraph.</p>
This is some text in a paragraph

This is some other text in a paragraph
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<ul>
<li>An Item</li>
<li>Other Item</li>
<li>Yet Another Item</li>
</ul>
An Item
Other Item
Yet Another Item
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
1. Item 1
2. Item 2
3. Item 3
<ul>
<li>Item Foo</li>
<li>Item Bar</li>
</ul>
Item Foo
Item Bar
<div style="color:#0000FF">
<h3>This is a heading</h3>
<p>This is a paragraph.</p>
</div>
This is a heading
This is a paragraph
<p>Here is a quote from WWF's website:</p>

<blockquote>
WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
</blockquote>
Here's a quote from WWF's website:

WWF works in 100 countries and is supported by 1.2 milltion members in the United States and close to 5 million globally.
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
<h1>HTML</h1>
<p>HTML is a language for describing web pages.</p>

<hr>

<h1>CSS</h1>
<p>CSS defines how to display HTML elements.</p>
HTML
CSS
HTML is a language for describing web pages.
CSS defines how to display HTML elements.
<p>My favorite color is
<del>blue</del>
<ins>red</ins>!</p>
My favorite color is blue red!
<p>My favorite color is
<del>blue</del>
<ins>red</ins>
!</p>
My favorite color is blue red!
<script>
document.write("Hello World!")
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
Hello World!
Sorry, your browser does not support JavaScript!
Browser with javascript enabled
Browser without javascript enabled
<a href="http://www.w3schools.com">Visit W3Schools.com!</a>
Visit W3 Schools.com!
<code>A piece of computer code</code>
<samp>Sample output from a computer program</samp>
<p>This is normal text -
<b>and this is bold text</b>
.</p>
<p>He named his car
<i>The lightning</i>
, because it was very fast.</p>
<p>This is a
<u>parragraph</u>
.</p>
<p>W3Schools.com - the world's largest web development site.</p>
<p>
<small>Copyright 1999-2050 by Refsnes Data</small>
</p>
W3Scools.com - the world's largest web development site.
Copyright 1999-2050 by Refsnes Data
<p>Version 2.0 is
<strike>not yet available!</strike>
now available!</p>
<p>Version 2.0 is
<s>not yet available!</s>
now available!</p>
The following is
<em>Emphasized text</em>
The following is
<strong>Strong text</strong>
<p>I like the color
<span style="color:red">RED</span>
most.</p>
I like the color
RED
most.
<img src="smiley.gif" alt="Smiley face" width="42" height="42">
<object type="video/quicktime" data="/web_design/paris_vegas.mov" width="350" height="95"></object>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">

<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
<table border="1">
<tr> <th>Month</th><th>Savings</th> </tr>
<tr> <td>January</td><td>$100</td> </tr>
<tr> <td>February</td><td>$80</td> </tr>
</table>
<table border="1">
<caption>Monthly savings</caption>
<tr> <th>Month</th><th>Savings</th> </tr>
<tr> <td>January</td><td>$100</td> </tr>
<tr> <td>February</td><td>$80</td> </tr>
</table>
<table border="1">
<thead>
<tr> <th>Month</th><th>Savings</th> </tr>
</thead>
<tbody> <tr> <td>January</td><td>$100</td> </tr>
<tr> <td>February</td><td>$80</td> </tr> </tbody>
</table>
<table border="1">
<thead> <tr>
<th>Month</th>
<th>Savings</th> </tr> </thead>
<tbody> <tr> <td>January</td><td>$100</td> </tr>
<tr> <td>February</td><td>$80</td> </tr> </tbody>
</table>
<table border="1">
<thead> <tr>
<th>Month</th> <th>Savings</th>
</tr> </thead>
<tfoot>
<tr> <td>Sum</td><td>$180</td> </tr>
</tfoot>
<tbody>
<tr> <td>January</td><td>$100</td> </tr>
<tr> <td>February</td><td>$80</td> </tr>
</tbody>
</table>
<table border="1">
<thead> <tr>
<th>Month</th> <th>Savings</th>
</tr> </thead>
<tfoot>
<tr> <td>Sum</td><td>$180</td> </tr>
</tfoot>
<tbody>
<tr> <td>January</td><td>$100</td> </tr>
<tr> <td>February</td><td>$80</td> </tr>
</tbody>
</table>
<table border="1">

<colgroup>
<col span="2" style="background-color:red">
<col style="background-color:yellow">
</colgroup>
<tr><th>ISBN</th><th>Title</th><th>Price</th></tr>
<tr><td>3476896</td><td>My first HTML</td><td>$53</td></tr>
<tr><td>5869207</td><td>My first CSS</td><td>$49</td></tr>
</table>
<table border="1">
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tbody>
<tr> <td>January</td><td>$100</td> </tr>
<tr> <td>February</td><td>$80</td> </tr>
</tbody>
</table>
<table border="1">
<thead>
<tr><th>Month</th><th>Savings</th></tr>
</thead>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr> <td>February</td><td>$80</td> </tr>
</tbody>
</table>
<form action="demo_form.asp">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>
<form>

<fieldset>
<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">

</fieldset>
</form>
<form>
<fieldset>

<legend>Personalia:</legend>
Name: <input type="text"><br>
Email: <input type="text"><br>
Date of birth: <input type="text">
</fieldset>
</form>
<form action="demo_form.asp">
First name:
<input type="text" name="FirstName" value="Mickey">
<br>
Last name:
<input type="text" name="LastName" value="Mouse">
<br>
<input type="submit" value="Submit">
</form>
<form action="demo_form.asp">

<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male"><br>

<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female"><br><br>
<input type="submit" value="Submit">
</form>
<button type="button">
<img src="icon.svg.png" >Ok!
</button>
<textarea rows="4" cols="50">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam commodo sapien et sem dignissim porta. In vitae mattis arcu, sit amet porta mi. Donec scelerisque non magna sit amet placerat.
</textarea>
<select>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
<select>

<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>

<option value="audi">Audi</option>
</select>
<select>

<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>

</optgroup>

<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>

</optgroup>
</select>
<h3>This is the main document</h3>
<p>This is document text</p>
<h3>Below is the embedded iframe</h3>
<iframe src="http://www.w3schools.com">
</iframe>
<p>
To break lines
<br>
in a text,
<br>
use the br element.
</p>
To break lines
in a text,
use the br element.
<p>My favorite color is
<del>blue</del>
<ins>red</ins>!</p>
<p>My favorite color is <del>blue</del>
<ins>red</ins>
!</p>
<p>WWF's goal is to:
<q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>
WWF's goal is to: "Build a future where people live in harmony with nature." We hope they succeed.
<p>This text contains
<sub>subscript</sub>
text.</p>
<p>This text contains
<sup>superscript</sup>
text.</p>
New Elements in HTML 5
<canvas> - Used to draw graphics, on the fly, via scripting (usually JavaScript)

Semantic elements:
<article> - Defines an article
<aside> - Defines content aside from the page content
<details> - Defines additional details that the user can view or hide
<dialog> - Defines a dialog box or window
<summary> - Defines a visible heading for a <details> element
<figure> - Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<header> - Defines a header for a document or section
<footer> - Defines a footer for a document or section
<nav> - Defines navigation links
<progress> - Represents the progress of a task
<section> - Defines a section in a document
<time> - Defines a date/time

Media elements:
<audio> - Defines sound content
<video> - Defines a video or movie
<track> - Defines text tracks for <video> and <audio>

Thank
You!
Full transcript