Skip to content

Intro to HTML

Jump to bottom Edit New page
Robyn edited this page Oct 21, 2014 · 19 revisions

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.

Using 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 (>).

	<p>This is the tag for a paragraph</p>

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 it won't display them. On the other hand, if you open a web page in a text editor, 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, use the <strong> tag, then type the text you want to make bold. When you are ready to go back to non-bold text, close the strong tag like this: </strong> and continue with your text.

So, in the text editor view, you’d see:

	<p>This paragraph has some <strong>bold information</strong> in it.</p>

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 <html>, <head>, <title>, and <body>. So the very simplest web page looks like this:

	<!DOCTYPE HTML>
	<html>
	 <head>
		<title>The name of my page</title>
	 </head>

	 <body>
	  <p>Some information here.</p>
	 </body>
	</html>

Those few lines are the basics you’ll need to begin any web page. The first tag is the doctype, a special tag which tells the browser which version of HTML to use.

The <head> section contains information about the page and does not show up in the page itself. It can contain links to outside files that are used in the page, such as CSS and Javascript files. In this example, we just have the <title> tag -- more info on that below.

The <body> section holds everything that is visible in the browser window.

The DOM

HTML tags are nested. In the example above, everything is inside <html> tag, the title is inside the <head>, and most everything else inside <body>.

nesting dolls

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 Javascript.

Some useful tags

Title <title>

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 <head> and not <body>).

Headers <h1>, <h2>, 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 items, then the next level down would use <h2> tags, and so on, down to <h6>.

Paragraphs and Line Breaks <p> and <br/>

The <p> tag wraps paragraphs. In general, most of the text of your page will be within <p> tags. The <p> 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 <br/> , or break. You’ll notice that <br/> has a slash at the end of it. That’s because it doesn’t wrap anything inside it. So instead of having an opening and closing tag like most tags do, it’s all squished into one.

    <p>Here is my paragraph. I'd like to end this line<br/>and move on to the next line.</p>

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 <br/> tag. Similarly, if you have line breaks in your code, they won’t show up unless you use the break tag.

    <p>Here is my paragraph. 
    I'd like to end 
    this line<br/>and move on to 
    the next line.</p>

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.

Links <a>

The link tag, or <a> tag, is in some ways the most important tag This is what it looks like:

    You can read more on <a href="mypage.html">my page</a> or just try <a href="http://google.com">googling</a> it.

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.

###Attributes

Attributes provide extra information necessary to a tag to work properly (such as the srcattribute on the <img> tag or the href attribute on the <a> tag) or just provide some optional information. An attribute generally consists of an attribute name and an attribute value (usually surrounded by quotes), with an = sign between them.

You can see all the attributes and the tags they are associated with in the MDN attribute reference.

Images <img>

The image tag is another tag that doesn’t open and close. It’s also a tag that requires an attribute.

    <img src="opal.jpg" />

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.

Lists <ul>, <ol>, <li>

There are lots of reasons to use lists in HTML. They are often used to display navigation menus, for example:

    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="news.html">Breaking News</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="contact.html">Contact Us</a></li>
    </ul>

The <ul> tag, or unordered list tag, encloses each of the list items, which are wrapped in <li> tags. In the example above, each list item consists of a link, so you have <a> tags too.

When you need a numbered list, use the <ol>, or ordered list, tag:

    <h1>Top 5 complaints</h1>
    <ol>
        <li>It's too loud.</li>
        <li>I am hungry.</li>
        <li>I am sleepy.</li>
        <li>I hate the phone.</li>
        <li>Facebook stole my identity</li>
    </ol>

Tables <table>,<tr>,<td>,<th>

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 <table> tag.

Next come the rows, the <tr> tags. Within each row, there are table cells, denoted by <td>, 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, <th> tag, which you can use in the first row of your table to label the columns.

    <table>
        <tr><th>Name</th><th>Number</th></tr>
        <tr><td>Jose</td><td>154</td></tr>
        <tr><td>Gladiola</td><td>231</td></tr>
        <tr><td>Francois</td><td>98</td></tr>
    </table>

In the browser, you'll see this:

HTML Reference

Add a custom footer

Syllabus

Schedule & Assignments

Resources

Class Blogs

Week 1

Week 2

Week 3

Week 4

Week 5

Week 6

Clone this wiki locally