Basic HTML

Every page on the internet is made up of HTML and CSS--Hypertext Markup Language and Cascading Style Sheets.

 

(You don't need to remember that).

 

Most modern websites, like our course blog, are made of HTML generated by a Content Management System (like wordpress) and you'll only rarely need to write HTML+CSS yourself.  However, it's useful to know the building blocks so that you can interact with them like we will later in the semester.

 

In this assignment, we'll learn to write the basic skeleton of an HTML page and dress it up with CSS.

How HTML Tags work

Tags surround the content text and tell the browser how to display it.  Tags are used to organize and style text and sections of the page.

Italics
<i>text</i>
Italicizes text

Bold
<b>text</b>
Makes text bold

Paragraph
<p>text</p>
Creates and ends a paragraph.  Used for formatting spacing.

Link
<a href="http://www.google.com">text</a>
Creates a link.  Clicking "text" will take you to google.com when the page is displayed

Image
<img src="http://www.flickr.com/myimage.png">
Adds an image stored at the specified link

Header
<h1>text</h1>
Formats your text as a header, which usually means "text" will be larger and
have space around it.  You can also use h2 through h6 for smaller headers.

Div
<div>
    <p>text</p>
    <p>text</p>
</div>
Divs are used to contain multiple pieces of content and organize them together.

Useful tags

Create a File in your Text Editor and save as an .html file

Save it somewhere you can find later and name it with index.html

Type in your HTML file

HTML documents are nested.  <!DOCTYPE html><html></html> tells the browser to interpret everything within it as html.

 

<head></head> tells the browser about the page, like the title. Think of it as a book's cover.

 

<body></body> contains the book's content.

<!DOCTYPE html>
<html>
  <head>
    <title>Your Name</title>
  </head>
  <body>
    
  </body>
</html>

Make sure to title your page with your name!

If you open your HTML file in a browser, it doesn't look like anything yet.  But it does have your name as a title!

Add some content

Add a header using <h1></h1> stating your name.

 

Use <div></div> to contain and organize your paragraphs.  In some text editors, the long paragraph text might wrap, and in others it might extend off the screen.  Both are ok and won't affect the final page.

<!DOCTYPE html>
<html>
  <head>
    <title>Your Name</title>
  </head>
  <body>
    <h1>Your Name</h1>
    <div>
      <p>I am interested in cats and dubstep. I would like to run away and
join the circus when I grow up.</p>
      <p>I am very good at googling things and very bad at writing things.</p>
      <p>I would like to improve my skills in finding cat pictures.</p>
    </div>
  </body>
</html>

Refresh your html file in the browser

How does it look now?

Experiment

Try adding <b></b> and <i></i> tags around different sections.  Remember to close the tags!  If all of your text is suddenly bold, you might not have closed a tag, or you might have a typo.  You can nest <b><i></i></b> tags within each other too!

<!DOCTYPE html>
<html>
  <head>
    <title>Your Name</title>
  </head>
  <body>
    <h1>Your Name</h1>
    <div>
      <p>I am interested in <b>cats</b> and <i>dubstep</i>. I would like to run away and 
<b>join the circus</b> when I grow up.</p>
      <p>I am very good at googling things and very bad at <i>writing things</i>.</p>
      <p><b>I would like to improve my skills in finding <i>cat pictures</i>.</b></p>
    </div>
  </body>
</html>

How's it look?

If your changes don't show up in the browser, double check that you saved your HTML file!

Add an Image

Create another <div></div> and add an image tag.  The filename inside <img src="filename.jpg"> tells the browser where to find the image.  Make sure to type your filename exactly with the correct file type.  If you type filename.jpg when it's actually filename.png, your image won't show up!

<!DOCTYPE html>
<html>
  <head>
    <title>Your Name</title>
  </head>
  <body>
    <h1>Your Name</h1>
    <div>
      <p>I am interested in <b>cats</b> and <i>dubstep</i>. I would like to run away and 
<b>join the circus</b> when I grow up.</p>
      <p>I am very good at googling things and very bad at <i>writing things</i>.</p>
      <p><b>I would like to improve my skills in finding <i>cat pictures</i>.</b></p>
    </div>
    <div>
      <img src="cat.jpg">
    </div>
  </body>
</html>

Oh No!  Too big!

Sometimes you need to tell the browser how to display images.  Tell the browser that the image should be 100% the width of the window, and the height should be proportional to the width.

<div>
    <img src="cat.jpg" width=100% height=auto>
</div>

Better

You can also specify the exact height and width of elements using pixel measurements.  Play around. What do the the below measurements do? (Hint: height=auto without quotes is useful for keeping an image proportional)

<div>
    <img src="cat.jpg" width=600px height=800px>
</div>

Add a Link

Create another <div></div> and add a link tag (<a href="www.link.com">text<a/>).  The url in quotes tells the browser where the link goes--make sure this includes https:// or www. as it appears in the address bar, or your link may not work!

  <body>
    <h1>Your Name</h1>
    <div>
      <p>I am interested in <b>cats</b> and <i>dubstep</i>. I would like to run away and <b>join the circus</b> when I grow up.</p>
      <p>I am very good at googling things and very bad at <i>writing things</i>.</p>
      <p><b>I would like to improve my skills in finding <i>cat pictures</i>.</b></p>
    </div>
    <div>
      <img src="cat.jpg" width=500px height=auto>
    </div>
    <div>
      <p><a href="https://twitter.com/MaeveKane">My Twitter</a></p>
    </div>
  </body>

Looks good!

What's next?

Right now our page looks pretty plain.  There's no style, no way to change how things look.  Continue to the next lesson on Cascading Style Sheets to jazz up your page.

 

Did you get stuck somewhere? Ask in the Slack channel for help.

 

Want to see how your HTML file should look before moving on? Check out the next slide.

<!DOCTYPE html>
<html>
  <head>
    <title>Your Name</title>
  </head>
  <body>
    <h1>Your Name</h1>
    <div>
      <p>I am interested in <b>cats</b> and <i>dubstep</i>. I would like to run away and <b>join the circus</b> when I grow up.</p>
      <p>I am very good at googling things and very bad at <i>writing things</i>.</p>
      <p><b>I would like to improve my skills in finding <i>cat pictures</i>.</b></p>
    </div>
    <div>
      <img src="cat.jpg" width=500px height=auto>
    </div>
    <div>
      <p><a href="https://twitter.com/MaeveKane">My Twitter</a></p>
    </div>
  </body>
</html>