Here is the simplest example of an HTML webpage:
<html> <head> </head> <body> Hello World! </body> </html>
HTML is made up of series of tags around content. For example, <body> is a tag. It holds the only content on the page “Hello World!” Most tags require a closing tag, such as </body>.
<table width="400">
Tags can have attributed. For example, this is a <table> tag utilizing the width attribute.
Being that we are interested in data journalism, there are few tags we should definitely know. First is the anchor tag. The anchor tag is used to link within a page or between pages. This is one of the links from the health departments restaurant inspection database:
<a href="/Clients/TDH/State/Tennessee_Website.nsf/Food-FacilityHistor…OpenView&RestrictToCategory=64B2374EEC1440658825786500569063"></a>
Remember, the first step in my project was scraping all the links. The <a> is the anchor tag. The “href” is an attribute that denotes we are creating a hyperlink to another url.
Once I had all the links, I need to pull information from a table. Here is what the code of a basic table looks like:
<table style="width:300px"> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table>
We use the <table> tag to create the table, the <tr> tag to denote a new row and the <td> to insert a new element. The code above would make the following table.
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
Lots of structured data is in the form of tables, but sometimes it is in lists. Their code looks a lot like tables:
<ul> <li>Coffee</li> <li>Milk</li> </ul>
<ol> <li>Coffee</li> <li>Milk</li> </ol>
The first code snippet will create an unordered list (or bulleted list):
- Coffee
- Milk
The second snipper will create an ordered list (numbered):
- Coffee
- Milk
The final tag we must concern ourselves with is the <div> tag. The <div> tag generically refers to a division within the HTML code. Why we need to concern ourselves with the <div> tag is that it has become a catch-all tag for the implementation of CSS, or cascading style sheets.
Where HTML tell the computer what content to display, CSS tells the computer how to display that content. A style can be added to any tag.
<div style="color:#0000FF"> <h3>This is a heading</h3> <p>This is a paragraph.</p> </div>
The above code results in the following styled content.
This is a heading
This is a paragraph.
While in the above example, the style was applied to only the <div> to which it was attached, we can also apply styles universally via the <style> tag.
<html>
<head>
<style>
h3 {color:blue;}
p {color:blue;}
</style>
</head>
<body>
<h3> This is a heading.</h3>
<p> This is a paragraph. </p>
</body>
The above code would result in the same content as the immediately preceding example.
Finally, you can also load a stylesheet from an external “.css” file. This allows for quick, uniform application of styles to whole websites, comprised of hundreds or thousands of pages.