tutorial: html & css

Resources

A Very Basic Webpage

  1. Open a Text Editor (I recommend TextWrangler)
  2. Cut n’ paste the following text into a new document:

    <    !DOCTYPE html>
    <html>
    <head>
    <title>Page Title</title>
    </head>
    <body><h1>This is a Heading</h1>
    <p>This is a paragraph.</p></body>
    </html>
  3. Save the file with the extension .html.
  4. Open the file in your web browser.

Adding an Image

Add this text after the first paragraph:

<h2>A Picture from the 2015 Boston Book Festival</h2>
<img src=”https://www.postroadmag.com//wp-content/uploads/2015/11/bbf_2015_2.jpg” alt=”Boston Book Festival” style=”width: 50%;”>

A Very Basic Stylesheet

Add the following code to the header of the html document, after the page title and before the </head>:

<style>
p{
font-family: Courier;
color: blue;
}
</style>

<<Back to pr.edu