Difference between revisions of "HTML 1"

From FreekiWiki
Jump to navigation Jump to search
m (incremental)
(syntax details)
 
(14 intermediate revisions by the same user not shown)
Line 1: Line 1:
−
* Point out and discuss that web browsers can load HTML from any source; server or local file.
+
HTML is the language which drives the entire web. All webpages are created using HTML.
−
* Discuss HTML syntax;
 
−
** less than, greater than symbols are boundaries
 
−
** tag is the first word or letters found
 
−
** attributes provide additional description information
 
−
* Discuss basic HTML structure (head, body)
 
−
** HEAD is used to load other assets (css, js)
 
  
−
*
+
= History =
 +
 
 +
== What does HTML mean, anyway? ==
 +
 
 +
=== Acronym ===
 +
The acronym HTML stands for '''H'''yper'''T'''ext '''M'''arkup '''L'''anguage. The very beginnings of HTML is rooted in a Macintosh application known as HyperCard, where one could click "HyperLinks" to other HyperCards.  This is the basis for how we interact with webpages today.
 +
 
 +
=== Markup ===
 +
The M in HTML stands for Markup, which means that the actual text in a document (or page) is plainly available -- but it is annotated, or marked-up, to add additional information or instruction on how to display the text.
 +
 
 +
=== Language Interpretation ===
 +
The L in HTML stands for Language, which is an important point.  Like spoken language, HTML can be interpreted differently, depending on whom (or, what computer program) is doing the interpretation. This is why webpages can look different in Firefox vs. Internet Explorer.
 +
 
 +
== What's the big deal with HTML 5? ==
 +
 
 +
=== Versions ===
 +
In the early 1990s, HTML was written with style inline -- things like bold/italic, colors, fonts, backgrounds were written as normal HTML.  By 1999, CSS was being more commonly used, and these style elements began to move out of HTML and to CSS. This process is called deprecation; where certain features are still available, but are noted that they'll be removed in o future version.
 +
 
 +
=== Standards ===
 +
HTML is, at it's core, an engineering specification.  It is developed, and agreed-upon by representatives from large companies in the industry, such as Microsoft, Apple, Adobe, Google and so on. And HTML 5 isn't a ratified standard yet -- it's only a draft spec.
 +
 
 +
= Syntax =
 +
 
 +
== Tags ==
 +
An HTML tag is written with "angle braces" surrounding the element.
 +
<html>
 +
 
 +
HTML tags typically come in pairs. The twin, or closing tag, is indicated by a back slash, and the element being closed.  There are some exceptions where a second, closing tag isn't appropriate (such as images), but as a rule, there should usually be a pair.
 +
<html></html>
 +
 
 +
== Attributes ==
 +
Once a webpage is complete, there will be many hundreds of elements. We use attributes to add descriptive information to tags. These attributes should be single-spaced apart from each other, have an equal sign, and use double-quotes around the value.
 +
key="value"
 +
 
 +
These attributes need to be added to the first of the tag pairs. This is important, because it's the first element which declares everything. The second tag is just for closing purposes.
 +
<html id="freegeek" lang="en-US"></html>
 +
 
 +
= Structure =
 +
== Head and Body ==
 +
All HTML documents must have <code><html></html></code> tags surrounding the whole of the entire document. Within those, we have 2 tags -- <code><head></code> and <code><body></code>. We're indenting with a single space here, for readability, but HTML can be strung out on a single line with a minimum of spaces, or can be generously indented as you please.
 +
<html>
 +
  <head>
 +
  </head>
 +
  <body>
 +
  </body>
 +
</html>
 +
 
 +
Within the <head>, we provide information to the browser, so it can render the webpage as we would like.  Things like CSS and JavaScript are added here, as well as metadata like keywords, title, author and more.
 +
<html>
 +
  <head>
 +
  <title>Free Geek HTML Class</title>
 +
  <meta name="author" content="Free Geek">
 +
  <meta name="description" content="">
 +
  </head>
 +
  <body>
 +
  This is going to be an exciting class.
 +
  </body>
 +
</html>
 +
 
 +
== Headlines and Paragraphs ==
 +
Recalling the term "markup" from earlier, we now proceed to use paragraph and headline tags to inform the browser where and how text should be displayed.
 +
<nowiki> <html>
 +
  <head>
 +
  <title>Free Geek HTML Class</title>
 +
  <meta name="author" content="Free Geek">
 +
  <meta name="description" content="">
 +
  </head>
 +
  <body>
 +
  <h1>Welcome!</h1>
 +
  <p>This is going to be an exciting class.</p>
 +
  <h2>Agenda</h2>
 +
  <p>Here's how it's going to go:</p>
 +
  <h3>Introductions</h3>
 +
  <p>Get to know your fellow classmates.</p>
 +
  <h3>Project</h3>
 +
  <p>Do something fun together.</p>
 +
  <h3>Report</h3>
 +
  <p>How did the project go?</p>
 +
  <h2>Closing</h2>
 +
  <p>Well, that was fun, wasn't it?</p>
 +
  </body>
 +
</html></nowiki>
 +
 
 +
== Links ==
 +
To link to another page, we use the anchor, or <code><a></a></code> tag. This tag needs attributes to be really useful. For links, that would be the <code>href=""</code> attribute.
 +
<nowiki><p>Hi, mom. How are you? <a href="mailto:dormroom@school.edu">Please email me</a>.</p></nowiki>
 +
 
 +
When linking to another site, we must always include the http:// prefix.
 +
<nowiki><p>Please <a href="http://www.freegeek.org/">click here</a>.</p></nowiki>
 +
 
 +
If we want, we can force a link to open in a new tab, by using the <code>target="_blank"</code> attribute.
 +
<nowiki><p>Please <a href="http://www.freegeek.org/" target="_blank">click here</a> to see our fancy site.</p></nowiki>

Latest revision as of 04:02, 15 November 2013

HTML is the language which drives the entire web. All webpages are created using HTML.

History

What does HTML mean, anyway?

Acronym

The acronym HTML stands for HyperText Markup Language. The very beginnings of HTML is rooted in a Macintosh application known as HyperCard, where one could click "HyperLinks" to other HyperCards. This is the basis for how we interact with webpages today.

Markup

The M in HTML stands for Markup, which means that the actual text in a document (or page) is plainly available -- but it is annotated, or marked-up, to add additional information or instruction on how to display the text.

Language Interpretation

The L in HTML stands for Language, which is an important point. Like spoken language, HTML can be interpreted differently, depending on whom (or, what computer program) is doing the interpretation. This is why webpages can look different in Firefox vs. Internet Explorer.

What's the big deal with HTML 5?

Versions

In the early 1990s, HTML was written with style inline -- things like bold/italic, colors, fonts, backgrounds were written as normal HTML. By 1999, CSS was being more commonly used, and these style elements began to move out of HTML and to CSS. This process is called deprecation; where certain features are still available, but are noted that they'll be removed in o future version.

Standards

HTML is, at it's core, an engineering specification. It is developed, and agreed-upon by representatives from large companies in the industry, such as Microsoft, Apple, Adobe, Google and so on. And HTML 5 isn't a ratified standard yet -- it's only a draft spec.

Syntax

Tags

An HTML tag is written with "angle braces" surrounding the element. 

<html>

HTML tags typically come in pairs. The twin, or closing tag, is indicated by a back slash, and the element being closed. There are some exceptions where a second, closing tag isn't appropriate (such as images), but as a rule, there should usually be a pair. 

<html></html>

Attributes

Once a webpage is complete, there will be many hundreds of elements. We use attributes to add descriptive information to tags. These attributes should be single-spaced apart from each other, have an equal sign, and use double-quotes around the value. 

key="value"

These attributes need to be added to the first of the tag pairs. This is important, because it's the first element which declares everything. The second tag is just for closing purposes. 

<html id="freegeek" lang="en-US"></html>

Structure

Head and Body

All HTML documents must have <html></html> tags surrounding the whole of the entire document. Within those, we have 2 tags -- <head> and <body>. We're indenting with a single space here, for readability, but HTML can be strung out on a single line with a minimum of spaces, or can be generously indented as you please. 

<html>
 <head>
 </head>
 <body>
 </body>
</html>

Within the <head>, we provide information to the browser, so it can render the webpage as we would like. Things like CSS and JavaScript are added here, as well as metadata like keywords, title, author and more. 

<html>
 <head>
  <title>Free Geek HTML Class</title>
  <meta name="author" content="Free Geek">
  <meta name="description" content="">
 </head>
 <body>
  This is going to be an exciting class.
 </body>
</html>

Headlines and Paragraphs

Recalling the term "markup" from earlier, we now proceed to use paragraph and headline tags to inform the browser where and how text should be displayed. 

 <html>
  <head>
   <title>Free Geek HTML Class</title>
   <meta name="author" content="Free Geek">
   <meta name="description" content="">
  </head>
  <body>
   <h1>Welcome!</h1>
   <p>This is going to be an exciting class.</p>
   <h2>Agenda</h2>
   <p>Here's how it's going to go:</p>
   <h3>Introductions</h3>
   <p>Get to know your fellow classmates.</p>
   <h3>Project</h3>
   <p>Do something fun together.</p>
   <h3>Report</h3>
   <p>How did the project go?</p>
   <h2>Closing</h2>
   <p>Well, that was fun, wasn't it?</p>
  </body>
 </html>

Links

To link to another page, we use the anchor, or <a></a> tag. This tag needs attributes to be really useful. For links, that would be the href="" attribute. 

<p>Hi, mom. How are you? <a href="mailto:dormroom@school.edu">Please email me</a>.</p>

When linking to another site, we must always include the http:// prefix. 

<p>Please <a href="http://www.freegeek.org/">click here</a>.</p>

If we want, we can force a link to open in a new tab, by using the target="_blank" attribute. 

<p>Please <a href="http://www.freegeek.org/" target="_blank">click here</a> to see our fancy site.</p>
Retrieved from "http://wiki.freegeek.org/index.php?title=HTML_1&oldid=69206"