CodeEd

Curriculum

Intro to HTML

Block 1: Intro to HTML

Block 1 Overall Goals

  1. Introduce the concept of programming
  2. Attain comfort with programming environment (unix/emacs)
  3. Learn basics of HTML and give tools to enable continued study
  4. Put programming into a real world context

Methodology

This is a project-based course where students will build personal websites that they will launch on day one and will continue to develop throughout the course. Each week, the lessons taught in class will be incorporated into their project.

Lesson 1: Build a Text-Only Web Page

Introduce concept of building websites and have students edit a simple HTML file with text.

Topics Covered:
  1. Goals of the course
  2. Basic Vocabulary: Terminal, Browser, HTML
  3. Emacs basic editing: open, write, save, quit
  4. Viewing edits in the browser
  5. What are HTML tags?
  6. Tags: <html>, </html>

Lesson 2: Add Basic HTML Tags to Web Page

Students will decide what they want their web page to be about, learn how to do some basic formatting of their text, and learn nested tags.

Topics Covered:
  1. Review
  2. Tags: <i>, <p> <br>  <h1>, <h2>
  3. Nested Tags

Lesson 3: Links and Images

Students will learn how to add links and images from the web to their website.

Topics Covered:
  1. Review
  2. Tag: <center>
  3. What is a url
  4. Tag: <a href = "..">..</a>
  5. Tag: <img src="...">

Lesson 4: Background Color and Font Color

Students will learn how to change the color of their fonts and background color using the <span> and <body> tags.

Topics Covered:
  1. Review Game
  2. Tag: <span style=“background-color:[color name]”>
  3. Tag: <body style=“background-color:[color name]”>
  4. Tag: <span style=“color:[color name]”>
  5. Tag: <body style=“color:[color name]”>
  6. Combine tags: <span style=“background-color:red;color:white”>

Lesson 5: Formatting Images

Students will learn how to resize and align their images.

Topics Covered:
  1. Image resize tag: <img width=100 src="...">
  2. Image align tag: <img style=”float:right” src=”…”>
  3. Presentation Practice