package.json: How do I HTML?

HTML (Hypertext Thing Made-up Language) is just a fancy pants way to put your text, images, and now even video and audio, onto the good ol internet. I am going to teach you in hopefully something along the lines of like 15 minutes how to write your own html because let me tell you, this stuff is super easy.

So for starters, html is just a bunch of tags, with the information put in-between tags. Most tags require you to "close" them. For instance, a simple html document looks like this

<html></html>

And I would put info in the middle of them

<html>My Personal Social Justice Blog</html>

The <html> tag is used to tell the browser there's a document formatted with html. Then inside of that document you use <head> and <body> tags to organize stuff a little more. The head tag is used to contain information about that document that isn't gonna show up in the window. The body is just the opposite. You can also put comments that never render in between  Normally it'd look something like this:

<html>
<head>
You can't see this
</head>
<body>
You can see this

</body>
</html>

Usually in the body you wanna organize your text instead of just putting it in plain, so there's a couple tags made just for this kind of thing. <p> is used for paragraphs, and the <h1>, <h2>, <h3>, <h4>, <h5>, and <h6> tags are used for headings. Since these are for organizing stuff I want people to read, naturally I would put it in the body, like this:

<html>
<head>
</head>
<body>
<h1>Yiffing</h1>
<h2>What is it and how do I get started</h2>
<p>Yiffing began in the 1300's in the Ottoman empire.</p>
<p>Those Ottoman folk were a dirty bunch, truly</p>
</body>
</html>

Any tag can have attributes, and some tags take special attributes. The <img> tag is used to display pictures and uses the src attribute to decide where the image comes from. <img> is one of those tags that don't need to be closed by a second tag, but "self closes", all together a picture would be written like this:

<img src="http://imagehost.com/myimage.jpg"/>

Notice how the attribute goes on the inside? Always separate each attribute/tag name with at least a space, and all attributes look like attr="value". For instance, we can use the meta tag to tell the browser what character set your document uses, to render all of those cute Japanese emoticons.

<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<img src="cute-logo.png"/>
<p>٩(●˙▿˙●)۶…⋆ฺ</p>
</body>
</html>

We use the <title> tag to name the document. We can also use meta to say who wrote the document and what the document's about. The title shows up on the tab, and the rest are invisible when you're looking at the web page, but is important for search engines to learn about your website, and send people to it.

<title>Best Of Harsh Noise Music</title>
<meta name="description" content="Talk on the best of a genre less travelled"/>
<meta name="keywords" content="Music, Harsh Noise, Best Of, schhhshchdhht"/>
<meta name="author" content="Masami Akita"/>

But hold on a second, you say. Why put this stuff in the head tag if it isn't going to show up in the window anyways? Is it just for organization? Kind of, it's for organization, and the browser will always make sure it's loaded all the stuff you've put in the head before it starts loading stuff in the body. So say for instance you have a stylesheet to go with your document and you don't want people to see the document load until the stylesheet is in the chamber (we'll cover how to make style for your document in the next tldr lesson), you toss it in the head. Or the icon next to your tab, they both use the <link> tag:

<html>
<head>
<link rel="icon" type="image/png" href="icon.png"/>
<link rel="stylesheet" type="text=css" href="styelsheet.css"/>
</head>
<body>
<p>I won't show up until the icon and stylesheet are loaded!</p>
</body>
</html>

The <link> tag uses the rel attribute to decide what to do with the linked information, the type attribute to decide how to read it, and the href attribute to know where to find it. The href attribute is also used in the <a> tag, which you can wrap around things to make a link

<a href="http://twitter.com/packagejson">Follow me on Twitter</a>

A few last important tags include the <ul> and <ol> tags, which are used to make unordered and ordered lists respectively. Each list entry is wrapped in <li>.

<ul>
<li>Guitar</li>
<li>Beefy amp</li>
<li>Feedback pedal</li>
<li>Microphone</li>
</ul>

Would render to

Guitar
Beefy amp
Feedback pedal
Microphone

<ol>
<li>Loud song</li>
<li>Quiet song</li>
<li>Long song</li>
<li>Climatic song</li>
</ol>

Would render to

Loud song
Quiet song
Long song
Climatic song

The last important little piece, but not least important piece, is the <!DOCTYPE> tag. Always top off any of your rad documents with this to make sure the browser knows how to read your rad new coding skills

<!DOCTYPE html>
<html>
<head>
<title>The best first webpage you'll ever write</title>
<meta name="description" content="This was my first html webpage"/>
<meta name="keywords" content="Programming, Education, html"/>
<meta name="author" content="Me"/>

<link rel="icon" type="image/png" href="favicon.png"/>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<h1>I am the <a href="http://dictionary.com/browse/greatest/">greatest</a> at this and I know it.</h1>
<img src="cool-approval-guy.gif"/>
<p>I've learned so much today like</p>
<ul>
<li>html</li>
</ul>
<p>I'll learn even more in the future</p>
</body>
</html>

Now all you need to do is open up your favorite text editor, write some html, save it with the file extension .html, and open it up in your browser and marvel at your greatness. I'm already marveling, you're damn amazing. But don't stop there! There are a bunch more tags and attributes, you can look here to find out about new tags and attributes, and to learn more about the ones you already know!

Next stop on this crazy web programmer train (conductor: you) is style, with css.

Michael Keating

How do I HTML?