blog

Web 101

The Web is everywhere. There's no escaping it. Everything from paying bills to sharing memes to operating fancy speakers is dependent on the thing. It's not going to let up anytime soon, either. Recently in the past couple of years, huge leaps have been made, allowing co-workers to collaborate better, friends to see each other more easily, and everything in the world to get shipped to your door faster. And in this World Wide Web, who's at the helm?

Right now, if you want to put your own thing on the Web, you have to hire a developer or use a service from some company, like Facebook (status posts count), Wix, or Squarespace. This dates back all the way to the Geocities Era, if anyone remembers that. Back in the day, it was COOL to make a site with Geocities. You could make it look like anything you want! After all, it was the WEB so anything was possible.

Well, it's still the Web. Everything is still possible.

All I'm saying is, as the world gets more and more reliant on the Web, it will be more and more powerful for you and me and Joe and Sally and whoever to understand how its built, how to tinker with it, and maybe even how to make our own little homestead on the Web. My goal here is, even if you don't think of yourself as technical, a programmer, or even computer savvy, I hope these posts can empower and inspire you to go forth and make cool things.

There's a lot of support, resources, and tutorials out there to teach this stuff. But I have yet to see many materials out there that assume that we're starting from square one. Nothing in jargon-less Plain English. I hope this can fill that gap a bit.

The best part? the stuff Web pages are made from is really easy to learn. It's set up that way on purpose. So, you don't have a lot to lose. If you consider this wasted time, that's up to you. However, I see you're still reading.

So let's start with the basics.

HTML, CSS and JS

I know, I know, I said this would be in Plain English. But there are a few terms you'll need to know for the purposes of Googling later. (The best developers are usually the ones who know what to search Google for.) Anyway - HTML, CSS, and JS are the three "pillars" of the web. They're different languages that can give your plain old text superpowers.

  • HTML - This is a way for you to label or mark up your document. Remember, computers are dumb and they need to be told what everything is. HTML is how you tell the browser that this bit is a paragraph, but that bit is a link. This is the only one of the three pillars that's actually required for this Web thing to work.
  • CSS - My personal favorite of the three, CSS is how you tell the browser what all the HTML in your page actually looks like.
  • JS - Short for JavaScript. (No, nothing to do with the programming language Java.) JS is where you tell the page how to behave. This can get really complicated really fast, so this is its own topic. I might cover it later. You don't need it to start out anyway.

In this series we're really going to focus on only HTML and CSS. JavaScript is amazingly powerful, and it can completely transform the way a Web page is even made, but none of that will matter without a solid grasp of the first two.

HTML 101

You ready for this? You're about to make your first web page. To start out, we need some content - the actual words that will be on the page. So go ahead and open Notepad, TextEdit, whatever plain text editor you've got. (only, not Microsoft Word - trust me). Go ahead and write a heading and a couple paragraphs about something you like, or something you'd like to say in general. Me, I'm going to cheat a bit and use some randomly generated words:

The Bacon of my Heart

Spicy jalapeno bacon ipsum dolor amet bresaola short ribs venison landjaeger chuck ham, pig prosciutto chicken pancetta bacon alcatra burgdoggen doner brisket. Andouille tongue ribeye, meatball t-bone short ribs picanha. Kevin ribeye beef, t-bone alcatra buffalo porchetta ham capicola. T-bone swine beef, porchetta venison landjaeger short loin ham hock. Shank tenderloin picanha turkey.

Tenderloin sausage cupim, meatloaf flank drumstick sirloin. Andouille drumstick doner corned beef spare ribs ham, venison fatback frankfurter buffalo strip steak kevin. Short ribs jerky sirloin, burgdoggen doner pork chop andouille ribeye pork belly. Ribeye jowl kielbasa buffalo, alcatra chicken drumstick ball tip turkey frankfurter prosciutto meatloaf ham pastrami strip steak.

Hopefully you've got something a bit less nonsensical, but you can use this text if you like. I won't judge.

Our job right now is to tell the browser what this text actually is. You and I can tell from our highly refined sense of fine literature that this is a title heading and a couple of paragraphs. But to the browser, it looks like a string of nonsense. (We'll ignore the fact that this is, indeed, a string of nonsense.)

HTML tells the browser what a thing is by tagging it. A tag looks like this:

<p>I'm getting tagged!</p>

A tag has angle brackets on both sides, and it has a matching counterpart with an extra slash at the front. Whatever's in between the two is what's being tagged. The tag with the slash in it lets the browser know that the tag is over. In this example, the text is tagged with a "p", which is browser-speak for "paragraph."

This is actually the hardest thing about HTML to begin with. The group that decides what HTML is defined a pile of all these tags. There's a little bit of a learning curve when you're learning about what all these different tags are and what they're for. On the plus side, out of the 100-120 or so tags that are out there, you won't ever have a reason to use most of them. Stuff like <p> though? Those are everywhere. Later, I'll give a quick rundown of some of the most important, common tags and what they're for. For now, I'll show you <p> and <h1>.

You've already met the paragraph tag. <h1> is part of a set of tags, that go from <h1> to <h6>. Their job is to label headings. <h1> is the most important heading on the page, and as you go through the numbers, the headers become less important. The title of this post, for example, is an <h1>. The header of this section, "HTML 101" is an <h2>. If I had another section inside this one I would reach for the <h3> and so on.

So, knowing what we know now, we can look at our text and mark it up:

<h1>The Bacon of my Heart</h1>

<p>Spicy jalapeno bacon ipsum dolor amet bresaola short ribs venison landjaeger chuck ham, pig prosciutto chicken pancetta bacon alcatra burgdoggen doner brisket. Andouille tongue ribeye, meatball t-bone short ribs picanha. Kevin ribeye beef, t-bone alcatra buffalo porchetta ham capicola. T-bone swine beef, porchetta venison landjaeger short loin ham hock. Shank tenderloin picanha turkey.</p>

<p>Tenderloin sausage cupim, meatloaf flank drumstick sirloin. Andouille drumstick doner corned beef spare ribs ham, venison fatback frankfurter buffalo strip steak kevin. Short ribs jerky sirloin, burgdoggen doner pork chop andouille ribeye pork belly. Ribeye jowl kielbasa buffalo, alcatra chicken drumstick ball tip turkey frankfurter prosciutto meatloaf ham pastrami strip steak.</p>

Not so bad, right? Now, go ahead and save that text file, with the extension of .html. Now when you open the file, it should open in your browser instead, and BAM.

Wow! It's a boring web page!

You just made a web page. Now it's time to pretty it up.

CSS 101

Now we get to the part where we make the page look nice. This does involve a slightly different language with a different way of typing, but it will fit into the HTML just fine. Here's what some CSS looks like:

p {
  color: blue;
}

Deceptively simple, right? That because it totally is. There's three parts to this: (1) the thing you want to change the look of, (2) what about the thing you want to change, and (3) what you want to change it to. In the example, the "p" should be familiar. (Might want to reread that last section if it isn't.) This CSS "rule" will find everything that's tagged with a <p> and make it blue. There's actually a lot of different things you can change with CSS, and not only the color. Like the tags in HTML, it comes down to learning some vocabulary. Here's the same example with a couple extra pieces thrown in:

p {
  font-size: 150%;
  color: blue;
  background: pink;
}

The thing about CSS that makes it easier to work with is that you can pretty much tell what it will look like once you see it. Here we're giving it a pink background, bigger font, and the same blue from before.

Speaking of which, how do you get that CSS into your page? Another tag to the rescue:

<style>
p {
  font-size: 150%;
  color: blue;
  background: pink;
}
</style>

<h1>The Bacon of my Heart</h1>

<p>Spicy jalapeno bacon ipsum dolor amet bresaola short ribs venison landjaeger chuck ham, pig prosciutto chicken pancetta bacon alcatra burgdoggen doner brisket. Andouille tongue ribeye, meatball t-bone short ribs picanha. Kevin ribeye beef, t-bone alcatra buffalo porchetta ham capicola. T-bone swine beef, porchetta venison landjaeger short loin ham hock. Shank tenderloin picanha turkey.</p>

<p>Tenderloin sausage cupim, meatloaf flank drumstick sirloin. Andouille drumstick doner corned beef spare ribs ham, venison fatback frankfurter buffalo strip steak kevin. Short ribs jerky sirloin, burgdoggen doner pork chop andouille ribeye pork belly. Ribeye jowl kielbasa buffalo, alcatra chicken drumstick ball tip turkey frankfurter prosciutto meatloaf ham pastrami strip steak.</p>

Don't worry about that code stuff appearing in your page. Since we tagged the code with <style>, the browser knows what it is and how to use it. Speaking of which, what does the page look like now? Save that HTML file and refresh that page if it's still open:

Wow! It's a less boring web page!

Absolutely beautiful. It brings tears to my eyes. Not the happy ones, either.

Looking past the awful design decisions I've made above, I hope the general ideas made it across. Starting with plain text, you add tags with HTML. Then you can add CSS that links to those tags and gives it a certain look. Next we'll go over a more of the HTML tags you'll find yourself using, and a secret superpower HTML has. In the meantime, if you want to play around with this stuff without cluttering up your computer with files, try out CodePen. It lets you change all three pillars and reloads the page so you can see your changes as you make them. If you feel the urge to make an account to save your Pens, go ahead. I'd love to see what you guys make throughout this series!

Also, if you want some extra reading material before the next post comes out, here's some great resources:

If you want to be notified when the next post comes out, you can follow me on Twitter, or subscribe to this site with RSS. Until next time!

 

Have you written a reply to this post? Send me the URL here: