Essential Question: How can I use DIVs to create a blog?
Mastery Objectives:
SWBAT create DIVs in their web page.
SWBAT hyperlink images.
SWBAT create a bookmark to a section in their web page.
SWBAT create a email link.
Your friend HD is a budding video game blogger, and he’s asked you to build him a new website, just in time for PAX!
Use your new HTML knowledge to create the underlying structure of the blog. Make sure to include plenty of pictures, links, lists, and other HTML elements that you’ve learned so that his fans have plenty to read.
To start, add the <!DOCTYPE html> declaration as the very first line of code at the top of the index.html file. Add the <html> element below. https://www.w3schools.com/html/html_intro.asp
Below the <html> opening tag, add a <head> element. Below the <head> element, add the <body> element. https://www.w3schools.com/html/html_intro.asp
Within the <head> tags, add a <title> element. Title the website “Video Games with HD”. https://www.w3schools.com/html/html_head.asp
Directly below the opening <body> tag, add an <h1> that says:
“An Insider’s Guide to PAX”
Below that, add an <h2> that says:
“Getting Tickets & Picking the Events”
Below that, add an <h2> that says:
“Cosplay FAQs”
https://www.w3schools.com/html/html_headings.asp
Here’s HD’s first dispatch from PAX! Let’s add a blog post. Between the <h1> and first <h2> tag, add a <p> tag that says:
“PAX can be both amazingly fun & incredibly overwhelming, especially if you’ve never been. Luckily, I’m here to give you an insider’s guide and make your first time a great experience. By taking my tips and tricks, and following your gut, you’ll have an unforgettable experience!”
https://www.w3schools.com/html/html_paragraphs.asp
Between the first and second <h2> tags, add another paragraph to the post using the <p> tag:
“If you’re lucky or connected you can get an invite, sans the price tag. But I wasn’t so lucky or connected my first 2 years so I’m here to help you out. First, plan out which events are most important to you and make a schedule and this is a biggie: SET A BUDGET. If you’re worrying about blowing your cash the whole time you won’t have fun. Then check out prices, days, and times and prioritize the gamers you want to see most. Lastly, purchase your tickets and get excited!”
After the last <h2> tag, add a final paragraph that says:
“Always be true to your own sense of style, if you don’t you’ll be uncomfortable the whole time and it will show. Remember, PAX is about expressing yourself and taking in what the game designers are presenting. Also it’s important to wear shoes you’ll be comfortable in all day. Obviously you want to look good, but you’ll be on your feet all day long, so be prepared.”
Of course, this wouldn’t be a video game blog without some images. Above each paragraph, add an <img> tag and set its src to be one of the following links: https://www.w3schools.com/html/html_images.asp
https://upload.wikimedia.org/wikipedia/en/thumb/4/4e/Logo_of_PAX_East.svg/1280px-Logo_of_PAX_East.svg.png
https://upload.wikimedia.org/wikipedia/commons/thumb/b/b7/Universum_TV_Multispiel_2006.jpg/1280px-Universum_TV_Multispiel_2006.jpg
https://upload.wikimedia.org/wikipedia/commons/6/62/Pong_Game_Test2.gif
Your first blog post is complete! Now let’s add an image of HD, so his readers get to know him. Below the opening body tag, add an <img> tag with the following source:
https://upload.wikimedia.org/wikipedia/commons/2/21/Johnny_Depp_2020.jpg
Below the <img> tag, add an <h3> that says “by HD Quin | 1 day ago”
HD wants his readers to know that he’s written a lot more than one post. Let’s make a list of some related blog posts. Beneath the last paragraph, add a <h4> tag that says “Related Content”. Underneath that header tag, create an unordered list.
The unordered list should have the following four items: https://www.w3schools.com/html/html_lists.asp
“How To Make a Cosplay Wig”
“History of Video Games”
“Indie Game Movie Review”
“Fez, Worth the Hype?”
Let’s get HD’s blog connected to the rest of the web! In the first paragraph, turn ‘PAX’ into a link and have it go to: https://www.paxsite.com/global/en-us.html.
Make sure to include the target="_blank" attribute so that it opens in a new page. https://www.w3schools.com/html/html_links.asp
HD wants to make sure that his friends can get in touch with him. At the bottom of your body, add a new <div> and set its id='contact'. Inside the <div>, create a new <p> tag and put the following contact information inside of it:
email: HD@videogameblog.com | phone: 917-555-1098 | address: 371 284th St, New York, NY, 10001
https://www.w3schools.com/html/html_div.asp
https://www.w3schools.com/html/html_id.asp
Inside the contact <div>, put <strong> opening and closing tags around “email”, “phone”, and “address”.
Create a hyperlink for the email using mailto:hd@videogameblog.com.
Let’s make the profile picture a link to the contact section of the webpage. Find the profile <img> tag, and surround it by opening and closing <a> tags. In the <a> tag, set href="#contact".