Essential Question: What do HTML tags do?
Mastery Objectives:
SWBAT create websites using HTML tags.
SWBAT format text in HTML.
SWBAT understand how to use HTML tags in their website with other HTML tags.
Directions:
Start by exploring the HTML cheat sheet. Take a few minutes to skim through the different sections and elements listed. HTML Reference
Participants will need to find the following HTML elements and
complete the corresponding tasks:
Heading Elements (h1, h2, h3):
Task: Write a mini-title using <h1>, <h2>, and <h3>elements.
Example: Create a title for your favorite book or movie.
Paragraph Element (p):
Task: Write a short paragraph about your favorite hobby using the <p> tag.
Image Element (img):
Task: Find an image online and write the HTML code to embed it using the <img> tag.
Tip: Remember to include the src attribute!
Link Element (a):
Task: Create a hyperlink using the <a> tag that links to your favorite website.
Example: <a href="https://www.example.com">Visit My Favorite Site</a>
List Elements (ul, ol, li):
Task: Create an unordered list using <ul> and at least three <li> items that represent your top three favorite foods.
Div Element (div):
Task: Write a <div> element that could contain a section of your webpage, like a header or footer.
Example: Label it appropriately, like "About Me".
Table Element (table):
Task: Create a simple table using the <table>, <tr>, and <td> tags. Include at least two rows and two columns.
Example: A table for your daily schedule.
Form Elements (form, input):
Task: Draft a simple contact form using the <form> and <input> elements. Include at least one text input and one submit button.
Comments:
Task: Create 5 comments and put them in your page.
Favicon:
Task: insert a favicon into your page.
iFrame:
Task: Create a second page and insert the iFrame into the first page.
Example: <iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>
id:
Task: add an id to your <p> tag.
Example: <h1 id="myHeader">My Header</h1>
Emoji's:
Task: Insert an emoji in your page.
Example: 😀
Class Attribute:
Task: Insert a class attribute to your page using <div>
Example: <div class="city">