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 1: Open your home page (index.html)

In the previous lesson you created a file named index.html. This file will become the homepage of your entire website for this course?  If you are wondering about the name, it is called index.html because most web servers will automatically load a file named index.html or home.html when someone navigates to a folder on your site. That way, visitors to your site can type in the url, https://johndoe.com for example, without have to enter the file name as well. https://johndoe.com instead of https://johndoe.com/index.html 

Now let's examine index.html.

  1. As you can see, your index.html page starts with <!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. The next tag <html lang=""> encases all of the content in the document. The lang value can be used to declare the language of your Web page, but the web page will work just fine without language information. If this tag simply reads <html>, everything will work just fine.
  3. Now look at the very bottom of your document at the </html> tag. Click on it and

    you should see that Brackets highlights both it and the <html lang=""> tag. That's because the </html> tag is the ending tag for the <html lang=""> tag.  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>.  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.

  4. Now let's look at the "head" section, encased by the  <head> and </head> tags.  Content in the "head" section never actually appears on a webpage, but contains settings and other important things that affect the webpage, such as links to css files. As you can see, the head section contains meta tags, which we won't get into for now, as well as <title> </title> tags. The title tags define the text that appears at the very top of your browser's window.  </title>student list</title> for example, will yield a tab that looks like this:
  5. Add a title to your page now.
  6. Finally, take note of the <body> </body> section. This section is where you enter content that actually appears on the web page.
  7. 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.
  8. Save index.html 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.

    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.

CSS Intro

  1. 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 that you created earlier. 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.

6. Just for fun let's add one more property to mydiv:  border-radius: 90% .  Test again and you should see your squares turn into circles.

Print Friendly, PDF & Email