Skip to content

cjohnhanson/int-u2l1-23-24-student-exercises

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

20 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Lesson 2.1: HTML Tags

🎯 Objectives

  • Understand the purpose and structure of HTML.
  • Create HTML tags on a webpage.

Table of Contents

  1. Getting Started
  2. Do Now
  3. HTML Tags Introduction
  4. Code Along
  5. Code Solo
  6. Exit Ticket & Closing

Getting Started

  • Login to Google Classroom for today’s lesson.
  • Fork today’s exercises from GitHub.

Do Now

After opening the index.html file and completing the tasks, be ready to discuss the following:

  1. What happened when you added text to the code? Where did it show up?
  2. What was different about the text between the <h1>’s and the <p>’s?

HTML Tags Introduction

HTML is a computer language that is used to create the structure for web pages on the internet. Like humans, computers understand many languages, and today, we'll dive into HTML (HyperText Markup Language), which is used on virtually every website you visit!

HTML is created with tags using angle brackets. The tag name goes inside the bracket. Closing tags go at the end of your content and need a slash before the tag name.

There are over 100 HTML tags that allow you to add various elements to a webpage like headers, images, links, lists, videos, and more.

Here are some HTML tags we'll practice today:

  • Paragraph: <p> </p>
  • Headings: <h1> </h1> (up to <h6> </h6>)
  • Button: <button> </button>
  • Ordered List: <ol> </ol>
  • Unordered List: <ul> </ul>
  • List Item: <li> </li>
  • Break: <br>
  • Input: <input>

Remember, if you want content to show up on the webpage, it MUST be nested inside the <body> tag.

Code Along

Open the code-along.html file and complete the tasks. As I write code, make sure you are writing along with me.

Code Solo

Next, open the code-solo.html file and complete the tasks. Again, as I write code, you should also be writing along with me.

Exit Ticket & Closing

For your Exit Ticket today, please upload a link to your updated project and post it to Google Classroom.


Thank you for your dedication and hard work in today's session! Keep practicing and don't hesitate to ask questions. We're excited to see your progress in Code Nation!

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • HTML 100.0%