09 October 2014

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">
        <meta charset="utf-8">
        <title>Page Title</title>

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)

CUNY Graduate School of Journalism

© Fall 2014 Amanda Hickman