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:

  • cross-platform: Atom, Sublime, VS Code, Emacs
  • for Windows only: Notepad++

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.

example.html

<html>
  <head>
    <title>My example page</title>
    <style type="text/css">
      body {
      margin-left: 30%;
      margin-right: 30%;
      background-color: #afa;
      color: red;
      }
      h1, p {
        border-left: 8px solid #000;
      }
      h1 {
      text-align: center;
      padding-bottom: 2px;
      border-bottom: 4px solid red;
      }
      p {
        text-indent: 20px;
      }
      p#first {
        text-indent: 0px;
      }
    </style>
  </head>
  <body>
    <h1>My example page</h1>
    <p id="first">Aliquam erat volutpat. Nunc eleifend leo vitae magna. In id
    erat non orci commodo lobortis. Proin neque massa, cursus ut,
    gravida ut, lobortis eget, lacus. Sed diam. Praesent fermentum
    tempor tellus. Nullam tempus. Mauris ac felis vel velit tristique
    imperdiet. Donec at pede. Etiam vel neque nec dui dignissim
    bibendum. Vivamus id enim. Phasellus neque orci, porta a, aliquet
    quis, semper a, massa. Phasellus purus. Pellentesque tristique
      imperdiet tortor. Nam euismod tellus id erat.
    </p>

<p>Pellentesque dapibus suscipit ligula. Donec posuere augue in quam.
Etiam vel tortor sodales tellus ultricies commodo. Suspendisse
potenti. Aenean in sem ac leo mollis blandit. Donec neque quam,
dignissim in, mollis nec, sagittis eu, wisi. Phasellus lacus. Etiam
laoreet quam sed arcu. Phasellus at dui in ligula mollis ultricies.
Integer placerat tristique nisl. Praesent augue. Fusce commodo.
Vestibulum convallis, lorem a tempus semper, dui dui euismod elit,
vitae placerat urna tortor vitae lacus. Nullam libero mauris,
consequat quis, varius et, dictum id, arcu. Mauris mollis tincidunt
felis. Aliquam feugiat tellus ut neque. Nulla facilisis, risus a
rhoncus fermentum, tellus tellus lacinia purus, et dictum nunc justo
sit amet elit.
</p>


  </body>
</html>
PDF