HTML, CSS, WEBSITE DEVELOPMENT AND DESIGN (2015)

Chapter 2: Getting Started

Okay now that you have kind of an idea of what your dealing with here we can begin. The first thing I want you to do so that you don't have to do it a few chapters from now is go to your desktop, right click, and create a new folder. Name it website. This is the way you would set up your web pages, images, videos, etc. if you were making a website. So we might as well start right from there. Now hopefully you downloaded notepad++ because it will help. Trust me you'll thank me for it later. After you have your website folder made, Open up notepad++ or notepad. Whichever one you decided to use. From the top menu click File and then Save as. Now you want to save your new page as index.html. This will eventually become your homepage for your website. But for now we will use it to learn. And don't forget to add the .html. Its very important because your browser needs to know this. It can't be .txt or any other file format.

Creating Your First Web Page

So let's begin. Enter this text into you text editor. And then we'll break it down piece by piece. Remember to use lowercase letters in your HTML tags.

<!doctype html>

<html>

<body>

</body>

</html>

¨And that's it. This is the same code that you will use for every HTML page you ever create. You will only add in any extra content you want.

¨<!doctype html> This is called the doctype declaration as you already know and will always be the very first line you write for every HTML page you create.

¨<html> The opening HTML tag. This tag tells the browser that everything you put in between this tag and it's closing tag is HTML code.

¨<head><title>Main Page</title></head> These are your opening and closing head tags and title tags. I wanted to show you that they could be entered like this as an example. The title tags here would be considered a nested element or nested tags because they are nested inside of the head tags. Just like the body element is nested inside of the HTML element. Remember an HTML document is read from top to bottom so this would be okay for the browser to understand. But a better, more clear way to write it would be:

<head>

</head>

There a few things to go over here. Notice how I indented the title element line. Indenting your code will help keep it more organized and readable too. Especially when you have a bunch of code on the page. It is up to you how you want to organize your code but this is the way that an experienced coder might enter it. Now back to the tags. Also you will hear coders refer to this, <title>Main Page</title> in different ways. They might call it the tag, the element, or even the tag element. Later in this book when we have two tags with content in between I will refer to it as an element. But for learning purposes I'm going to refer to it as both tag and/or element for now. Okay the head tags are used for a few things. First is to hold the title of the page like in the above example. They are also used for other things like keywords for the search engine, meta data, etc. We'll talk about these things later. For now their just holding the title element of our page.

¨And then we have the title tags. The title Main Page that we entered here would be the click-able link that would show up in a search engine. It's also on the little tab at the top left of the browser when your page is being viewed on the internet. The title Main Page is just for an example. You would want to put something in here that would describe your page. We'll get into this a lot more later on.

¨The <body></body> tags is where your gonna be entering 99% of your code. Everything that you put in between these two tags is what the viewer of your web page will see. So all of the text, images, menu's, etc. will go in here.

¨Finally we add our closing HTML tag. </html> This tells the browser that this is the end of our HTML document. And that basically means the end of our web page.

Like I said above this is the very basic framework of every single web page on the internet.

Adding Some Content To Your Page

Let's add some content to our HTML document so that when we run it in the browser we'll have something to see. Right now if we ran it our page would be empty. So add this to your code from the above exercise.

<!doctype html>

<html>

<head>

</head>

<body>

<h1>Welcome to my first web page!</h1>

<p>This is going to be epic!!!!</p>

</body>

</html>

After you have the new code entered. Make sure you save it. You should already have your page saved as index.html so now you can just click save when you edit your code. You will have to re-save your code any time you change it before you can see the changes take affect in the browser. Now to run your web page in a browser. In the top menu of your text editor click on Run and then click on Launch in Chrome if the internet browser you use is Google Chrome. If you use a different browser like Internet Explorer, or Mozilla Firefox then choose Launch in one of those. Know that you must have the browser downloaded if you want to run your code in that browser. And this brings up something I want to talk about. It is a good idea to run your code in at least two browsers when testing or making changes. I use Google Chrome and Internet Explorer for my code. And the reason for this is that two different browsers might not display your web page in the same way. In those instances you might have to change your coding slightly to get the same result. And it's a lot better to find little things like this as they happen so that you don't have to clean up a whole bunch of code at once. So a good thing to get used to is to save you code often and run it in a couple of browsers occasionally.

So hopefully you successfully ran your HTML in a browser and can see your web page with a header and two lines of text. You should have also noticed that I took the head and title elements and put them on their own lines. Just like in the above examples you could have entered them all on one line or like in they are in this example. It's up to you. I have introduced two tags here.

¨<h1>Welcome to my first web page!</h1> - This is a heading 1 element. And as you can see it makes the text bold and increases the size. There are 6 heading elements you can use and I will show you the examples in a minute.

¨<p>This is going to be epic!!!!</p> <p>Oh, yes it is.</p> - And these are paragraph elements. You will use this element very often for anything from one line of text to an entire paragraph. As you probably have noticed even though we added a whole bunch of spaces in between the words yes and it in the second paragraph the browser displayed the text with only one space in between each word. It does this by default. All of these spaces are called white-space and your browser will ignore any extra spacing unless you specify that you want the extra spaces. There are a few ways to do that and we'll get into that later. One other thing you may have noticed here is that after the first paragraph we have a line break just like if you hit return on your keyboard and then the next paragraph starts. The p element does this automatically. There are ways to manipulate line breaking, spacing, indenting, and so on. But I wanted to point out that with the p element you don't have to worry about including a line break yourself in between your paragraphs.

Examples Of The Heading Elements

In your text editor underneath the second p element add this code to see the six available default headings:

<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

Now save your work and run it in the browser again. If you kept your browser window open you can just re-save your HTML and hit the refresh button to see the new stuff we just added. You should see the six different headings displayed. Also there was a line break in between each one. Again that's done by the browser automatically. Heading 1 has the biggest and boldest font. They decrease in size all the way down to Heading 6. When we get into some more advanced stuff and start using CSS we will be able to change these default sizes. So for example, we will be able to use the <h1></h1> element many times and have each of the headings displayed in different sizes if we wanted to. This control over the elements is one of the ways to make your pages unique. Experienced coder's consider it standard to use the h1 element at least once on every page. I also want to point out early on in this book here that the HTML content we will be creating over the next eight to nine chapters or so is what we're going to be using when we start learning how to style. So your gonna want to keep the elements you add to your page for now. Your page will start looking a little sloppy but were only using it for learning purposes and later on we will be creating an actual website layout that is usable and looks good.

Quiz Chapter 2

1.How does your browser read HTML?

2.Which set of tags or element do we put all of our behind the scenes directions for the browser in?

3.What happens to your text if you add a bunch of spaces in between two words in the text editor when it is rendered and displayed in the browser window?

4.Why is it good to save and run your code in multiple browsers often?