HTMLCourse Basic/Notes: Difference between revisions

From MozillaWiki
Jump to navigation Jump to search
No edit summary
(Replaced content with "= Class Notes = == Week 1: Basic HTML == Notes/Week1")
Line 1: Line 1:
= Welcome to HTML =
= Class Notes  =


== What is it? ==
== Week 1: Basic HTML  ==


HTML is a markup language. It's not a programming language because it doesn't understand logic; it simply contains information about the structure and display of a document. HTML is a type of XML, or Extensible Markup Language, which is just a more general markup language.
[[HTMLCourse Basic/Notes/Week1|Notes/Week1]]
 
== Intro to Tags  ==
 
HTML is made up of tags. Tags give information about the content and display of text. Tags are simply little pieces of text starting with the less-than sign (<) and ending with the greater-than sign (>).
<pre>&lt;p&gt;This is the tag for a paragraph&lt;/p&gt;
</pre>
Of course, the greater than and less than signs are just text too, which means that an HTML page is essentially a text document. Look at an HTML page in a web browser, though, and it will interpret all those tags as instructions and display everything else. On the other hand, if you open a web page in a text editor like Notepad or BBEdit, you'll see the tags themselves.
 
With a few exceptions, all HTML tags must have an opening tag and a closing tag. If you want to make text bold for instance, you'll use the "strong" tag, &lt;strong&gt;, then type the text you want to make bold. When you are ready to go back to non-bold text, you'll close the strong tag like this: &lt;/strong&gt; and continue with your text.
 
So, in the text editor view, you'd see:
<pre>&lt;p&gt;This paragraph has some &lt;strong&gt;bold information&lt;/strong&gt; in it.&lt;/p&gt;
</pre>
But in the browser, you'll see:
 
This paragraph has some '''bold''' information in it.
 
== The Skeletal System  ==
 
There are a few main tags that every web page must have. They are &lt;html&gt;,&lt;head&gt;,&lt;title&gt;, and &lt;body&gt;. So the very simplest web page looks like this in text view:
<pre>&lt;html&gt;&lt;br&gt; &lt;head&gt;&lt;br&gt; &lt;title&gt;The name of my page&lt;/title&gt;&lt;br&gt; &lt;/head&gt;
&lt;br&gt; &lt;body&gt;&lt;br&gt;  &lt;p&gt;Some information here.&lt;/p&gt;&lt;br&gt; &lt;/body&gt;&lt;br&gt;&lt;/html&gt;
</pre>
Those few lines are the basics you'll need to begin any web page. In fact, you can copy and paste them into a text editor to get started making a page. Once we're copying and pasting, though, there's one more line you should add. The doctype is a special line at the beginning of an HTML document that tells the browser which version of HTML to use. In versions before HTML5, the doctype included a long URL that linked to the specification. You'll still see this type, for example:
<pre>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &lt;br&gt; "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
</pre>
However, with HTML5, things get a lot easier. Here's the doctype we'll be using:
<pre>&lt;!DOCTYPE HTML&gt;
</pre>
Our HTML skeleton now looks like this:
<pre>&lt;!DOCTYPE HTML&gt;
&lt;html&gt;&lt;br&gt; &lt;head&gt;&lt;br&gt; &lt;title&gt;The name of my page&lt;/title&gt;&lt;br&gt; &lt;/head&gt;&lt;br&gt; &lt;body&gt;&lt;br&gt;  &lt;p&gt;Some information here.&lt;/p&gt;&lt;br&gt; &lt;/body&gt;&lt;br&gt;&lt;/html&gt;
</pre> <div class="exercise">
=== Exercise ===
 
Create a basic html skeleton page in Text Wrangler, and open it in a browser.
 
Once it works in one browser, try opening it in a different browser to see if it renders differently.
</div>
== The DOM ==
 
As you can see, HTML tags are '''nested''': everything is inside html tag, the title is inside the head, and most everything else inside body.
 
&lt;img src="nestingdolls_lg.jpg" width="345" height="292"&gt;
 
The hierarchical, nested structure of HTML is sometimes referred to as the Document Object Model, or '''DOM'''.The document is represented as a tree structure, with parents and children -- think of a family tree. Being able to access elements of the tree comes into play when we want to manipulate the HTML with CSS and especially with Javascript.
 
== Some useful tags ==
 
=== &lt;title&gt; ===
 
&lt;p&gt;The title tag goes inside the head tag and is used to name the window in the browser. You don't see the title in the page itself (that's why it's in &lt;head&gt; and not &lt;body&gt;).
 
 
 
=== &lt;h1&gt;,&lt;h2&gt;,&lt;h3&gt; etc ===
 
These are header tags. h1 is the largest, then h2, etc. If you think in terms of an outline, h1 is for the top level item/s, then the next level down would use h2 tags, and so on, down to h6.
 
=== &lt;p&gt; and &lt;br/&gt; ===
 
The &lt;p&gt; tag wraps paragraphs. In general, most of the text of your page will be within p tags. The &lt;p&gt; tag makes a visible space between one paragraph and the next. Sometimes you may not want to start a whole new paragraph, and just insert a line break. The tag for that is &lt;br/&gt; , or break. You'll notice that &lt;br/&gt; has a slash at the end of it. That's because it doesn't wrap anything within it; it's just a break in the text. So instead of having an opening and closing tag like most tags do, it's all squished into one.
<pre>&lt;p&gt;Here is my paragraph. I'd like to end this line&lt;br/&gt;and move on to the next line.&lt;/p&gt;</pre>
Notice that in the html code, this is all one line. But in the browser, you'll see the line break where you put the &lt;br/&gt; tag. Similarly, if you have line breaks in your code, they won't show up unless you use the break tag.
<pre>&lt;p&gt;Here is my paragraph.
I'd like to end
this line&lt;br/&gt;and move on to
the next line.&lt;/p&gt;</pre>
The piece of code above will display in the browser exactly the same way the code before it does. Line breaks in your text don't matter.
 
== A little theory ==
 
Ideally, HTML tags should tell you something about what the different parts of the document are for. If some text is in an H1 tag, it should not be because it just needs to be a certain size, but that it is the main subject -- the first header-- of the page. To control the look of text, the best practice is to use CSS (Cascading Style Sheets) instead of relying on the HTML for the display. The idea is to separate the content and the visual display, so that an HTML page tells you about the structure of the document but can be displayed in a variety of ways. This concept is sometimes referred to as the '''Semantic Web'''.
<div class="exercise">
 
=== Exercise ===
 
Create an outline in your HTML using header and paragraph tags.
 
Some examples: a table of contents, a proposal, notes for a presentation.
</div>
<br>
 
== More tags ==
=== &lt;a&gt;&nbsp;: the link tag. The most important tag. ===
 
It wouldn't really be the web if pages and sites weren't linked together. So the link tag, the &lt;a&gt; tag is some ways the most important tag to know. This is what it looks like:
<pre>You can read more on &lt;a href="mypage.html"&gt;my page&lt;/a&gt; or just try &lt;br&gt;&lt;a href="http://google.com"&gt;googling&lt;/a&gt; it.</pre>
The a tag requires an attribute of 'href', which is short for hyperlink reference -- this is where you put the URL of the link. You can link to a page on your own site by using the name of the page, as in the first line above. (Of course, if it's in a different directory than the page you're linking from, you'll need to put the name of the directory too: "articles/brown.html".) You can also use a full URL, starting with 'http', like the link to google in the the example above.
<div class="exercise">
=== Exercise ===
 
Create a new HTML page and link to it from your first page.
</div>
=== &lt;img&gt; ===
 
The image tag is another tag that doesn't open and close. It's also a tag that requires an attribute.
<pre>&lt;img src="opal.jpg" /&gt;</pre>
In this case, the attribute you need is 'src', which is short for ''source''. In other words, the source of the image: tell the tag which image you want to display.
<div class="exercise">
=== Exercise ===
 
Add an image to your page.
</div>
=== lists &lt;ul&gt;, &lt;ol&gt;, &lt;li&gt; ===
 
There are lots of reasons to use lists in HTML. They are often used to display navigation menus, for example:
<pre>&lt;ul&gt;
&lt;br&gt;&lt;li&gt;&lt;a href="index.html"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;br&gt;&lt;li&gt;&lt;a href="news.html"&gt;Breaking News&lt;/a&gt;&lt;/li&gt;&lt;br&gt;&lt;li&gt;&lt;a href="about.html"&gt;About Us&lt;/a&gt;&lt;/li&gt;&lt;br&gt;&lt;li&gt;&lt;a href="contact.html"&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
&lt;br&gt;&lt;/ul&gt;</pre>
The &lt;ul&gt; tag, or unordered list tag, encloses each of the list items, which are wrapped in &lt;li&gt; tags. In the example above, each list item consists of a link, so you have &lt;a&gt; tags too.
 
When you need a numbered list, use the &lt;ol&gt;, or ordered list, tag:
<pre>&lt;h1&gt;Top 5 complaints&lt;/h1&gt;
&lt;ol&gt;
&lt;br&gt;&lt;li&gt;It's too loud.&lt;/li&gt;&lt;br&gt;&lt;li&gt;I am hungry.&lt;/li&gt;&lt;br&gt;&lt;li&gt;I am sleepy.&lt;/li&gt;
&lt;li&gt;I hate the phone.&lt;/li&gt;
&lt;li&gt;Facebook stole my identity&lt;/li&gt;
&lt;br&gt;&lt;/ol&gt;</pre> <div class="exercise">
=== Exercise ===
 
Create a site navigation using the &lt;ul&gt; and &lt;li&gt; tags. (Next week, when we cover CSS, we'll style these to look like a navigation bar.)
</div>
<br>
 
=== tables &lt;table&gt;,&lt;tr&gt;,&lt;td&gt;,&lt;th&gt; ===
 
Tables are used to diplay data in a grid. Think, spreadsheet. Whereas Excel and Word show you the grid literally, in HTML, you put tags around the different elements in the table.
 
The entire table begins and ends with the &lt;table&gt; tag.
 
Next come the rows, the &lt;tr&gt; tags. Within each row, there are table cells, denoted by &lt;td&gt;, or table data, tags. For your table to display properly, there should be the same number of cells in every row. (There's an exception to that: look up 'rowspan' and 'colspan' if you want to know.)
 
Because we write HTML tables one row at a time, there are no columns, per se, as there are in Excel. However, there is the table header, or, &lt;th&gt; tag, which you can use in the first row of your table to label the columns.
<pre>&lt;table&gt;
&lt;tr&gt;&lt;th&gt;Name&lt;/th&gt;&lt;th&gt;Number&lt;/th&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Jose&lt;/td&gt;&lt;td&gt;154&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Gladiola&lt;/td&gt;&lt;td&gt;231&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;Francois&lt;/td&gt;&lt;td&gt;98&lt;/td&gt;&lt;/tr&gt;
&lt;/table&gt;</pre>
In the browser, you'll see this:
 
{| border="1"
|-
! Name
! Number
|-
| Jose
| 154
|-
| Gladiola
| 231
|-
| Francois
| 98
|}
 
Back in the day, tables were used a lot to layout visual elements on a page. If you're working on a website that was coded several years ago, you may encounter a page of tables within tables. Now that CSS styles are available, we don't have to build sites that way, but it's important to recognize table-based layouts when you see them so you know what's going on.
<div class="exercise">
=== Exercise ===
 
Code a table in HTML.
</div>

Revision as of 19:40, 22 April 2011

Class Notes

Week 1: Basic HTML

Notes/Week1

Retrieved from "https://wiki.mozilla.org/index.php?title=HTMLCourse_Basic/Notes&oldid=301865"