There is a line in The Matrix where Cypher is explaining to Keanu Reeves that when he looks at those green numbers on his screen aka The Matrix he doesn’t?even see the code what he sees is people sitting on park benches, dogs walking, and so on and so on. This is ultimately what is going to happen when you start to study and learn HTML and CSS, but many people think that this is the hardest part of being a web developer but in this article, I hope to debunk some of its myths and get you excited to learn some code.
01 What is HTML?
Before we begin I first recommend you getting Sublime text by clicking here you can use a notepad but make sure you save your document in plain text and as?an HTML?document. Ok good? Too bad we are moving on. HTML is the skeleton of every webpage you see. Invented by Tim Burners Lee HTML every line of text you see, it’s every box, image, link, and by itself it is very very simple looking. In fact here is a link to Mr. Lee’s Website that was made almost entirely?of HTML and you will see what I mean. While it may not look pretty that is not the point of HTML the point is to organize the webpage?so it is easier to read.
02 Some Simple HTML Code
<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<title>Theater Bill</title>
</head>
<body>
<h1> THE ADDAMS FAMILY: A NEW MUSICAL</h1>
<h2>Book by <b>MARSHALL BRICKMAN</b> and <b>RICK ELICE</b></h2>
<h2>Music and Lyrics by <b>ANDREW LIPPA</b></h2>
<h3>Based on characters created by Charles Addams</h3>
<h4>An Everett <b>KIDSTAGE</b> TeenSelect Production</h4>
<p>Now grown up, Wednesday Addams, the ultimate princess of darkness, has gone and done the unthinkable by falling in love with a sweet young man from a normal family.</p>
<h3>October 30 – November 15, 2015</h3>
<h4>Thursdays – Saturdays: 7:30 PM</h4>
<h4>Sundays: 2:00 PM</h4>
<h3>Tickets: $14 General | $12 Youth and Seniors</h3>
<h4>Location:</h4>
<p><i>Second Stage Theatre, 2730 Wetmore Ave
Everett WA 98201</i></p>
</body>
</html>
Now then if you copy and paste this in notpade or sublime text it should look like this minus a few sentences. So you made your first webpage hurayy now what does any of the code mean. Well to start anything that has these <> is called a tag think of it as a label for the web to read and give attributes to. <h1> is a header tag and makes the font bolder and bigger on the webpage. So I I type make this <h1>Big</h1> then that will be the main header on the page. So what is <h2>, well that is a subheader and you’ll notice the higher the number the smaller the text. The <p> tag is a paragraph tag it’s currently what all this text is wrapped in</p> the main thing to notice here is every tag has a starting<> and a closing</> tag if one tag is left open then it could effect the entire site. Go ahead and remove the </h1> tag to see what I mean. Since there is no loger a closing tag on the h1 the entire page minus what is before it aquires the h1 properties so be sure to close all your tags.
Ok, I think that is good for today in the next post we will start messing with CSS. Other tags if you haven’t figured it out yet <i> means italics and <b> means bold. Other than that have fun messing with this code and have a good rest of the day.
?Resources
HTML and CSS: Design and Build Websites– If you read this book I can almost guarantee you will learn everything you need to know about CSS and HTML.
W3schools.com– This is where a lot of basic CSS and HTML is so if you have a question like how to do a image overlay then your first stop should be W3 schools
Sublime Text– Free coder that is better than notepad
