Basics of HTML Code
Using Inspector & Exploring Code on HTC’s Website:
https://hennepintech.edu/
Notes Link: https://html.com
Editor Link: https://codepen.io/ (Create Free Account)
Basic HTML Page Structure: https://codepen.io/dustingrice/pen/podJzgq
(Click FORK to create your own duplicated CodePen)
Empty HTML Page Template:
https://codepen.io/dustingrice/pen/YzEXKZV
W3Schools:
https://www.w3schools.com/html/
How to add images into HTML:
https://www.w3schools.com/html/html_images.asp
How to add links into HTML:
https://www.w3schools.com/html/html_links.asp
Placeholder Images:
https://placeholder.com/
https://via.placeholder.com/500×120?text=Hennepin%20Tech
HTML Cheat Sheet:
https://share.getcloudapp.com/z8urlx5d
HTML Infographics:
https://share.getcloudapp.com/8Lu5gjgY
https://share.getcloudapp.com/Z4ujmLnx
https://share.getcloudapp.com/RBuLBvrL
AI Coding Tools:
https://chatgpt.com/
Discussion 2 - Worst Looking Websites
*Submit Discussion into D2L
What horrible websites can we find online? Share a link or two, and why it is so bad!
Assignment 2: Win a Trip Single Page HTML Website
*Submit Assignment into D2L
Win a TRIP! Simple Landing Page Exercise:
You have been contacted to write the basic HTML code for a simple website page where people can sign up to win a trip somewhere… You can even decide where the trip is, and what it all includes!
After our lesson for this week, start a brand new HTML website in a new codepen… And don’t forget to use your new coding assistant… ChatGPT! Or any other AI tool.
You should start with the following code:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<body>
</html>
In the middle of your <head> tag, your website page must include the following:
1. An opening and closing <title> tag, so that all Browser Tabs and Google has a Title for your Website
In the middle of your <body> tag, your website page must include the following:
1. An opening and closing <h1> Heading Tag saying Win a Trip To…
2. One <img> Image Tag of a Photo of The Location
3. An opening and closing <p> Paragraph Tag about The Trip
4. An opening and closing <h3> Heading Tag with a Title for What The Trip Includes
5. An opening and closing <ul> List Tag including <li> List Items for each Feature of The Trip
6. An opening and closing <h3> Heading Tag with a Title for The Total Trip Value
7. An opening and closing <h2> Heading Tag with The Actual Total Trip Value Amount
8. An opening and closing <a> Anchor Link Tag with a Sign Up Now Link that Links to an email address, however you need also need to include this before the email address… mailto:[INSERT YOUR EMAIL ADDRESS HERE]
FOR EXAMPLE: <a href=mailto:[email protected]>Sign Up Now via Email</a>
See this for help with email links:
https://www.w3schools.com/html/html_links.asp
https://www.tutorialspoint.com/html/html_email_links.htm
Here is some sample code we have done in class in the past, feel free to use this code to help you too!
https://codepen.io/dustingrice/pen/podJzgq
https://codepen.io/dustingrice/pen/YzEXKZV
Sample Screenshot of what this page may start to look like:
https://share.getcloudapp.com/9ZuX6O92
When finished, please submit a link to your codepen where you created this!
Thank you and Good Luck! Excited to see where I can win a trip to!
Sample Student Work
