Basic HTML/CSS

HTML5 is a combination of:

  • HTML (Hypertext Markup Language)
  • CSS (Cascading Style Sheets)
  • JavaScript (aka EcmaScript)

You will do the basic HTML coding using just editor and browser. You can use whatever works for you but here are recommendations:

  • for Windows: Notepad++
  • for Mac: Sublime, TextWrangler
  • for Linux: Sublime, Emacs, vim

Below is the simple hand-coded example I did in class. There are two separate files listed here. You can also view the page itself in your browser.

For more information, I recommend a reference site such as W3Schools.

hello.html

<html>
  <head>
    <link rel="stylesheet" href="hello.css">
  </head>
  <body>
    <h1>Hello world.</h1>
    <img src="penguin.png" width="500" height="500">
    <p>
    My birthday is March&nbsp;25th every year!
    Spacing  (between words) &nbsp;&nbsp;&nbsp;&nbsp;     is
    <br>
    <br>
    <br>
    t o t a l l y
    unreliable!!!!
    </p>
  </body>
</html>

hello.css

h1 {
    text-align: center;
    color: red;
    border: 4px solid pink;
}
p {
    border: 2px double #37e4fd;
}
img {
    float: right;
}