Hand-to-HTML Combat and Other Prerequisites

20.06.2017 |

Episode #3 of the course Responsive design: An undead introduction by John Rhea


HTML and CSS could easily be courses in their own rights and often are. The quick zombie headlock here should be enough for you to understand the thrust of what we need for this course. If this whets your appetite, you should check out Highbrow’s Premium HTML and CSS intro course or Interneting Is Hard’s free HTML/CSS course.


HTML for the Quick and the UnDead

HTML (HyperText Markup Language) is a way to mark up text so it shows formatting and structural information. HTML tags are how we mark up the text, and an opening and closing tag shows where the formatting should begin and end. (Closing tags are just an opening tag with a / in front of them.) The p tag denotes a paragraph while the i tag is for italics:

<p>Why, hello, scary zombie! I was not expecting <i>you</i>.</p>

And would be rendered in its own paragraph with italics, like this:

Why, hello, scary zombie! I was not expecting you.

There’s a whole horde of other tags, including some that don’t make a direct/visual impact on the text. These tags affect the HTML page as a whole and are usually the braaains of the page (mostly because they literally reside in the <head> tag). Tags like the paragraph reside in the <body> tag. All of this, of course, is wrapped in a <html> tag, but even before that, there’s a special tag called the doctype that’s sort of a cheat sheet for your browser, letting it know what kind of document it’s dealing with.

There’s also a tag for displaying images. It’s a “void” tag, meaning it has no closing tag and requires an attribute “src” that gives the file path to the image you want to display. It’s also good to include an alternative text attribute that gives a written description of the graphic content, so search engines and humans (and zombies) who are using screen readers can have some idea of the content (or meet their maker). Here’s an example:

<Img src=“/some/file/path/zombie_horde.jpg” alt=“Horde of zombies attacking”>

Before we bring it all together, let me also tell you about the tag that determines the text shown in your browser tab. That’s the <title> tag.

Thus, a super basic yet undead-annihilating HTML page looks something like this:

<!DOCTYPE html>
<title>Awesome Web Page of Zombie Death</title>
<p>Read this and die, undead <i>scum!</i></p>
<Img src=“/some/file/path/zombie_leaving.jpg” alt=“Zombies shuffling away from your awesome website”>

In case you thought having tags about other tags was too meta, don’t worry, we also have a <meta> tag. It’s one of the tags specific to making a page responsive, but we’ll get to that later in the course.


Cascading Styles Sheets (of Doom)

If HTML is a survivor of the apocalypse, CSS is the flare that wins over the last cute guy or girl on Earth. CSS lets you do a whole host of things (horde of things?).

Many of them are visual, such as turning text red, but some of them more layout oriented, such as aligning the text right. And sometimes, as we’ll see with media queries, it allows you to make those changes at different times and under different sets of rules (e.g. throwing a grenade at a zombie is usually a good thing, but if that zombie is in the middle of your camp, it might be better to use something more precise, like a rifle. Similarly, the context your site finds itself in could determine how it reacts or what layout it uses.)

CSS rules look like this:

p { color: red; }

P is the selector and is saying that wherever there’s a p tag on this html page, execute what’s between the curly brackets—i.e. make the text color red.

Now that we’ve hit the two most basic building blocks, let’s “Suit Up for Your First Zombie Fight” by looking at the viewport meta tag and some helpful CSS.


Recommended book

HTML and CSS: Design and Build Websites by Jon Duckett


Share with friends