Beginner’s web development series: Intro

So I’m going to be writing a series of posts that will go over a lot of really basic stuff for folks who are trying to learn HTML and CSS from scratch. My friend Dan is trying to teach himself this stuff and he has little to no experience with even HTML (“yea I think I’ve seen this before, yea”).

I’m going to categorize these posts separate from my normal posts since they will be very beginner style, but there really aren’t many books (which is what he really wanted) out there about this really basic stuff, so I offered to write some things up for him (and thought others might find the information useful as well).

That said, let’s get this show on the road.

What is HTML?

HTML is a markup language. Essentially this means that there are some pieces of code intermixed with the content of the document that provide instructions for how to present that content. HTML tag standards are set and maintained by an organization called the W3C.

A basic HTML document usually looks something like this:

<!doctype html>
<html>
  <head>
    <title>Page title in browser</title>
  </head>
  <body>
    <h1>Welcome to my web page</h1>
    <p>Here is some content.</p>
  </body>
</html>

HTML forms the structure of web pages. It instructs a web browser on what bits of content are paragraphs, what bits are lists, what bits are images, etc.

What is CSS?

If HTML is the structure of a web page, CSS is the layout. CSS stands for Cascading Style Sheet and It instructs the browser on how to style the HTML elements. Web browsers have some styles built into them for things like headings and paragraphs, but usually developers override all these styles right off the bat with what is called a reset stylesheet. Since all browsers have different default styles, a reset stylesheet levels the playing field.

CSS is so named because the styles cascade downward from the top. This means that if at the beginning of the document you tell the font color to be blue, but later you tell the font color to be red, the font color will be red. This is a rudimentary example, but that’s the concept.

CSS documents generally look something like this:

body {color: gray; background-color: yellow;}
h1 {color: red; font-size: 24px;}
p {margin: 8px 0; font-size: 12px;}

What is JavaScript?

JavaScript is a true coding language. It’s uses are manifold, but primarily it is used to add functionality and interactivity, and in many cases movement to static web pages. There are a few very good JavaScript frameworks (these make it so that you don’t have to write out every bit of JavaScript from scratch) that make using JavaScript very easy, and with as little code as possible (which means faster loading web pages). My personal framework of choice is jQuery. It’s widely used and has tons of great plugins already written for it.

What is PHP?

This is getting a little more advanced, but some people want to know. PHP is a scripting language. Like HTML, it can be used to create web pages, but more like JavaScript, PHP tells the browser to do something (generally outputting HTML code). PHP allows for more dynamic page content. PHP is different from the others, though, because all the code processing takes place on the server and only the output is presented to the user’s browser. This means you must have a server to test PHP functionalities, where the others can be created and tested locally.

That’s a basic rundown of a few common languages used for creating web pages, and what they’re for.

Coming up next: Setting up a local development environment

Trackbacks for this post

  1. BWDS: Where do I start? | my name is kristi-lynn