- Understand the purpose and structure of HTML.
- Create HTML tags on a webpage.
- Login to Google Classroom for today’s lesson.
- Fork today’s exercises from GitHub.
After opening the index.html file and completing the tasks, be ready to discuss the following:
- What happened when you added text to the code? Where did it show up?
- What was different about the text between the
<h1>
’s and the<p>
’s?
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.
Open the code-along.html
file and complete the tasks. As I write code, make sure you are writing along with me.
Next, open the code-solo.html
file and complete the tasks. Again, as I write code, you should also be writing along with me.
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!