Intro to HTML
Back to main menu
Block 1: Intro to HTML
Block 1 Overall Goals
- Introduce the concept of programming
- Attain comfort with programming environment (unix/emacs)
- Learn basics of HTML and give tools to enable continued study
- Put programming into a real world context
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.
- Goals of the course
- Basic Vocabulary: Terminal, Browser, HTML
- Emacs basic editing: open, write, save, quit
- Viewing edits in the browser
- What are HTML tags?
- 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.
- Tags: <i>, <p> <br> <h1>, <h2>
- Nested Tags
Lesson 3: Links and Images
Students will learn how to add links and images from the web to their website.
- Tag: <center>
- What is a url
- Tag: <a href = "..">..</a>
- 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.
- Review Game
- Tag: <span style=“background-color:[color name]”>
- Tag: <body style=“background-color:[color name]”>
- Tag: <span style=“color:[color name]”>
- Tag: <body style=“color:[color name]”>
- Combine tags: <span style=“background-color:red;color:white”>
Lesson 5: Formatting Images
Students will learn how to resize and align their images.
- Image resize tag: <img width=100 src="...">
- Image align tag: <img style=”float:right” src=”…”>
- Presentation Practice