Introduction to HTML and CSS

Web development can be extremely complex, but the underlying structure of all web pages is nothing more than raw unformatted text that is tied together with a formatting language known as HTML (HyperText Markup Language). The term HyperText comes from the idea that webpages contain hyperlinks that are used to move from one webpage to another. One way to conceive of HTML is to think of it as the skeleton of a webpage.

CSS (Cascading Style Sheets) is another key component of web development. While HTML provides the skeleton of a page, CSS is used to control the format. The various colors of a webpage, the position of images, the way that text reacts when you click, tap, or roll over it; all of these features are typically determined by CSS. 

 

Step 2: Create a home page

Html is nothing more than unformatted text. Therefore, the only tool we are going to use for editing is a text editor named Brackets which you can easily find by searching for it. (please note: there are any number of text editors such as NotePad (Windows), TextWrangler (Mac), Sublime Text, Atom, etc. that will also do the job).

1. Find and open Brackets. Then create a new document and type

<html>     </html> 

In HTML, anything enclosed in carrots or "brackets" are what we call "tags". These are the building blocks of HTML.  The first building blocks of a webpage are the <html> tags that encase all other tags and all of the page's content.

But why two tags? In most cases, tags come in pairs: an opening tag and a closing tag. Closing tags are always indicated by a forward slash / as in </html>. 1

 

2. In between the two html tags (<html> and </html>), type 

<head> </head>
<body> </body>

Notice again that both these tags are pairs. The head and body are the two main parts of any html document. The "head" section never actually appears on a webpage, but contains settings and other important things that affect the webpage. The "body" section contains all of the actual content (words, pictures, css) that will go on the page.

At this point, your code should now look like this:

<html>
 <head>  </head>
 <body>   </body>
</html>

2.a) At the very top of your document, just above the <html> tag, add

<!doctype html>

Although not strictly necessary, the <!doctype html> is there to tell your browser that your page is written in the very latest version of html: html5.

2.b) Immediately after the <head> tag, add these tags:

<title>  </title>

In between the tags, type your name, "my first webpage", or something of the sort, as in

 <title>my first webpage  </title>

The title tags define the text that appears at the very top of your browser's window.

 

3. Save the file as index.html, and open it with your web browser (Safari, Chrome, Firefox, etc.) Although it's a blank webpage because there is no content, you should see your title. What you have here is the foundation that you should use for ANY web page that you create in the future. So create an additional copy of this page and name it starter.html. In future lessons you can create a new web page by simply making a copy of starter.html. 

4. At this point, your code should look identical (except for the title) to the code below. 

<!doctype html>
 <html>
 <head>
 <title>my first page</title>
 </head>
 <body>
 </body>
 </html> 

If things seem a little crowded for actually working, feel free to use your tab key or to hit return a few times to spread everything out, because whitespace within HTML code is completely ignored! It makes no difference if you place your tags one line apart or 20 lines apart. As long as they're in the order you want, the final page will look the same in the browser. Tabbing and spacing your tags can make your code easier to read and to work, so use as much whitespace as you need.

 5. Time for content. To speed things up, paste the dummy text shown below into the body section (between the two body tags):

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. 

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

 

6. Save index.html inside of your mysite folder and reload it with your browser.
Hmm...all of the text is there, but the two paragraphs should run together in spite of having a space between them. Remember, all white space in code is ignored, so we have to tell the web browser what's what by marking up our content with tags.

7. Add a <p> between the paragraphs, and a corresponding </p> tag at the end of the last paragraph. Save your document and reload again. This time, the paragraphs should be separated by a line. The <p> tag is the paragraph tag and specifically denotes paragraphs on a page.

8. Now it's time for a very basic introduction to CSS. Create a new file and save it as style.css inside of the css folder in the mysite folder (the mysite folder is the same folder that contains your index.html file). Return to index.html and add this code immediately after the </title> tag: 

<link href="css/style.css" rel="stylesheet" type="text/css">

The purpose of this line of code is to attach the CSS file to your document.  The part that says css/style.css tells the browser to look for style.css inside of the css folder. If, for some reason, you should move style.css outside of the css folder, the browser will not be able to find style.css and your document suddenly will appear very different!

9. The next step is to create a 'style' within your new CSS stylesheet that will affect your document.  Return to style.css and type in the following code:

body {
 font-size: 30px;
 }

10. Save both style.css and index.html and refresh your browser. Your text should suddenly get a lot bigger because you just instructed your browser to display ALL text between the body tags at 30px. Because the <body> tags encompass the entire document, all text in the document will appear at this size. 

30px is kind of big and you may not want to display everything at that size. Let's create what is known as a 'class' and add it to style.css as shown below. 

body {
 font-size: 30px;
 }
 .smaller {
 font-size: 12px;
 }

Notice that smaller starts with a dot (.smaller) and begins just after the closing bracket for the body style. Any time you add a new style to a css document it should begin after the closing bracket of the previous style.  

11. Return to index.html and add the smaller class to your <p> tag, like this:

<p class="smaller">

Once again, save both documents and refresh your browser. The second paragraph should shrink a lot.

12. Just for fun let's add an ugly red background to our page. Return to style.css and add the following code to your body style (before or after font-size: 30px;):

background-color: #F00;

Save style.css and refresh your browser one more time. Ugly?  Find yourself wanting another background color?  Right-click or control-click on #F00 and select Quick Edit to open Bracket's color picker. Pick the color you want by using the tools that are suddenly at your disposal and shut the color picker window once you have the one that you want. 

 While you are picking colors, be aware that you can easily change text color well. To change the text color for your entire document to yellow, for example, add this line to the body rule that  you created earlier

color:#FFFF00;

What's a Div Tag?

Div tags are are the principal tool that web developers have for formatting content. One way to envision div tags is to think of them as boxes or rectangles full of text and pictures that can be moved around and placed in different locations on a web page. Div tags can be as big or small as you define them to be, can have different font and background colors than the rest of the page, borders,  and lots more. As you may already suspect, all of these characteristics are controlled via CSS. So, let's make a CSS rule and apply it.

1. Return to style.css and add a new class named .mydiv after the closing bracket of  the .smaller class, as shown below:

.mydiv {
 height: 300px;
 width: 300px;
 }

2. Return to the html document and 'wrap' the div tag around the first sentence:

<div class="mydiv">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>

3. Save both the html and css files and preview the html file in your browser again. Things probably look a little different but you can't really see the div tag. Let's change that by adding a background color. Return to the css file and add background-color: #000; to the .mydiv class:

.mydiv {
 height: 300px;
 width: 300px;
 background-color: #000;
 }

Save the css file and preview everything in the browser again. At this point you should be seeing UGA colors but why did the text disappear? Answer: black text; black background. Change the text to white by adding color: #FFF; to .mydiv, save the css file and check it again in the browser. See the text?

4. Now add the same div tag to the second sentence, the same way that you added it to the first sentence. When you save everything and preview yet again, the two div tags should be stacked on top of each other. Let's make one more small change by adding float: left; to the .mydiv class. Once again, save and preview. This time the div tags should appear right next to each other. In fact, they look like one div tag instead of two.

5. Let's go for broke by adding a right margin to separate the div tags and a white border to give them some distinction. To do so, add these 4 lines of code to the .mydiv class:

margin-right: 5px;
 border-width: 2px;
 border-style: solid;
 border-color: #FFF;

This time when you save and preview all of this in the browser, things should look quite vastly improved.

Print Friendly, PDF & Email

  1.  Tags are invisible to anyone who is simply browsing a page but anyone who wishes to can  "view source", and view all tags within the page. The ability to view source code is one reason that the World Wide Web grew so quickly, because web developers can, and do, copy and modify each other's work.