Intro to 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.
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, you’ll use the “strong” tag, <strong>, 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: </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.
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. In versions before HTML5, the doctype included a long URL that linked to the specification. In HTML5, all you need is:
<!DOCTYPE HTML>
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.
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.
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>).
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.
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 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.
<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.
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.
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.
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.
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 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:
