A complete HTML page has a few basic components – it has a head and a body nested inside of <html> tags. The very most basic template looks something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Page Title</title>
</head>
<body>
</body>
</html>
The DOCTYPE declaration tells browsers that this page really is written in HTML. The lang attribute tells search engines (mostly) that this page is in the english language. And the charset attribute tells the browser what characters to use – in our case mostly the English alphabet and numerals. This won’t be on the test, though, so don’t worry too much about it.
You’re going to want much more layout control than you can get from an unstyled HTML page, but we’re not here to learn CSS, at least not this semester. We’re going to use a template called Bootstrap to give our pages a cleaner look and to help us incorporate some interactivity into them.
Bootstrap Template
Bootstrap will let you build out a clean page that moves easily between large and small screens, and their templating system makes it easy to build out things like slideshows. Which we’ll get to.
I’ve put together a Bootstrap template that you can just copy and paste to get started:
Copy that template into a new, blank text file, save it with an .html extension and open it in your browser.
Basic HTML Tags
Browsers ignore linebreaks and white space in an HTML page. That’s handy, because it means you can organize and indent your code however you like, but it also means that you have to do more than just hit return to start a new paragraph.
paragraphs Without any markup, the contents of an HTML page will just flow together into one big blob. Wrap them in <p>…</p> tags to make paragraphs.
links use the “anchor” tag. Anything between the opening <a ...> and the closing </a> will be a link. Anchors need at least one attribute, too: the URL of the page to link to. That attribute is href. So create a link with:
<a href="https://journalism.cuny.edu">CUNY Graduate School of Journalism</a>
headings are available in six levels: <h1> through <h6>.
More HTML Tags
DOCTYPE - document type
html - “what follows is HTML”
head - invisible part of your page
link - to attach CSS stylesheets
title - title of the page
meta - information about your page, ()like the character set)
style - for inline CSS styling
body - visible part of your page
a - anchors a link (important attribute: href)
blockquote - for large quotes
br - line break
cite - citation
div - content block or “division”
em - text w/ emphasis (aka italics)
h1 - first header
h2, h3,…h6
img - image (important attribute: src; always include the alt attribute for accessibility) ul - unordered list
ol - ordered list
li - list item
p - paragraph
span - inline content divider – think of this as a highlighter.
strong - strong text emphasis (aka bold)