HTML

Since HTML is the textual part of a website, we will need to use Notepad++. This is where you will do your coding for HTML and CSS, but for now let’s wraps our heads around HTML first.

  1. Open Notepad++.
  2. Copy and Paste this code into Notepad++ (click to enlarge):
    3. HTML Example
  3. Click Save As…
  4. Save the document as an hypertext markup language file in lowercase letters like, test.html to your Drive or Desktop.
  5. You will see once you save it as a HTML file the text look like this:
    6. HTML Example2
  6. You have completed the beginning of an HTML file!
  7. Keep this open

It has changed because the file is now in HTML formatting. See the lines? Those indicate the containers of tags. As in, it’s showing the link where the tag begins and ends—pay close attention to this.

The is basically the title and everything you want to signify the important of the page. See where the title is:What to Expect When You’re Expecting…to Learn HTML! This means on your website this will appear in text.

The body is where the general information and text will be typed. See the tag with the letter p in brackets? That tag signifies a ‘paragraph.’Look here for a ton of tags you will need to know. Don’t be overwhelmed with the process of remembering tags by memory—somehow it just becomes committed to memory! Also, Notepad++ will autopopulate what it think you are about to type as a tag, so that can be helpful.

Hint: Remember to close your codes…I can’t tell you how many times I have made this tiny error and spent hours figuring out where I went wrong! So when you begin a new be sure to just proceed it with its closing tag, like so

Tag
CSS

Since CSS is the design part of a website, we will need to use Notepad++. Since you have your HTML document up, lets open a new document.

  1. Click File.
  2. Click Open.
  3. Click Save As…
  4. Save the document as an cascading style sheet file in lowercase letters like, test.css to your Drive or Desktop.

(We saved the file first, for a specific reason, I promise).

  • Go back to test.html
  • Enter this code within the head:
    • CSS Example

    When you insert this code you are telling the HTML file that it will follow whatever the CSS file will indicate. When you insert the div tag you are telling the CSS file it will whatever the design permits. A div can be classified as an id or a class.

    Read up on the differences!

  • Go back to the CSS and enter:

    • This code indicates the Header will be colored, in a box with a solid border.

    CSS is where things start to get interesting because you can customize what YOU want. Sometimes it’s a bit of trial and error with the CSS. Maybe the font, color or padding isn’t what you want it to be or it just visually doesn’t look like what you expected—no fear, the CSS is every changing during the process in my opinion. Just be sure that your

    tags in HTML correlate with your CSS file

    Hint:The CSS can make or break the user experience of a page. Think about it—the text from HTML is important, but the design from CSS speaks louder. Do you really want a bright, highlighter yellow background with lime green text? *Tim Gun Voice* Make it work!

    Tim Gun