November 9th – November 13th
Class hours: 9:40 – 2:05
Mr. Bohmann | wbohmann@ewsd.org
Week Ten
9:40 Notes
- Fire Drill Procedures – Quick Review
- Portrait or Head shot. Bring to class (digitally of course) Must be at least 640 x 480 pixels
- Head Tag Slide from yesterday or fork on GitHub
- My HTML Basics on CodePen
Atom Packages we added yesterday:
- Open in Browser
- Atom-Beautify
- Color-Picker
- File-Icons
- Minimap
9:45 Attendance & Graph of the Day
Open up a Google Doc. Label it Graph of the Day with today’s date.
When looking at graphs, we’ll be guided by the following questions:
- What do you notice?
- What do you wonder?
- What’s going on in this graph? Write a catchy headline that captures the graph’s main idea.
- What impact does this topic have on you and your community?
Take 5 minutes to write responses to these prompts
10:00 The Head element cont….
Yesterday we discussed the value of the <head> element. Let’s practice writing a new head tag for EB Elixer Juice Company
Activity: You are hired to create a home page for EB Elixer Juice Company. EB Elixer squeezes and bottles fresh juice. Flavors like lemonade, watermelon ginger, hibiscus lime, peachmint and blueberry. EB elixer is located in Vermont. Using only the best ingredients.
(create a new folder on your desktop called webpractice)
In Atom –
Create a quick document and <head tag> for EB Elixer‘s home page
Be sure to include all of the meta data to help out with Search Engine Optimization just like we did yesterday
When you are done. Take a screenshot* of your code and place the capture in the Public Folders: Cawd2/WebGoofin
*Be sure to include your name on your capture
10:15 MarkUp Exercise
Using the most recent version of your resume, go through and mark-up your document with our semantic HTML elements. You should include some of the new elements (new to you). For more information on formatting, check out W3C
<address> <hr> <section> <header> <footer> <br> What other elements can you use?<b>- Bold text<strong>- Important text<i>- Italic text<em>- Emphasized text<small>- Smaller text <h1> - <h6> <ul> <ol>, <li> <a>
10:25 Mask Break
10:35 Academics
11:25 Lunch
12:00 HTML 5 Layout Elements
Websites often display content in multiple columns (like a magazine or newspaper).
HTML offers several semantic elements that define different parts of a webpage:
<header> Defines the header for a document or a section
<nav> Defines a container for navigation links
<section> Defines a section in a document
<article> Defines an independent self-contained article
<aside> Defines content aside from the content (like a sidebar)
<footer> Defines a footer for a document or a section
1:05 Mask Break
1:15 Why the <section> and <article> are useful HTML Elements
Before HTML5, web developers created a <div> to organize items on a webpage.
A <div> could have an ID or a class. ID’s can be used once. Classes can be used more than once. IDs and classes are helpful “handles” for CSS styling.
So, to minimize lots of divs and “divitis”, The <section> and <article> elements were added in HTML5. You don’t have to use them, however they are very useful.
The <section> element defines sections in a document, such as chapters, headers, footers, or any other sections of the document.
Your resume could be divided into sections as an example (Objective, Education, Work Experience, References, Awards)
Here is an example of the sections element in use from a page I built years ago. Use the inspector to see how each part of the page is divided into sections and how the sections are set up as IDs that aid in navigation.
The <article> element is a specialized kind of <section> in that it is independent, self contained block of related content.
The weather widget below is self contained and is just one kind of example of an <article>. In this case, one article houses a bunch of other articles. Tip, don’t think of the <article> element as a literal article.
Weather forecast for Burlington
November 10th
Cloudy
November 11th
Cloudy chance of meatballs
November 12th
Heavy meatballs
<article class="forecast">
<h1>Weather forecast for Burlington</h1>
<article class="day-forecast">
<h2>November 10th</h2>
<p>Cloudy</p>
</article>
<article class="day-forecast">
<h2>November 11th</h2>
<p>Cloudy chance of meatballs</p>
</article>
<article class="day-forecast">
<h2>November 12th</h2>
<p>Heavy meatballs</p>
</article>
</article>Additional Practice with <aside> – Let’s do one together and even add some CSS for fun, here is the link for you.
2:05 Dismissal
Remote Days – Homework
Posted at the end of the second in class day of the week will be the remote homework you are to complete. This work will be due at the start of the next in person cohort meeting.
This homework be an extension of learning from the week and may comprise of assigned and independent projects.
Remember, you must be completing articles by 2:05 for each remote day (except Wednesdays) to count for CTE attendance.
#1. Your HTML5 Resume
Using the markup from today’s exercise, translate that into an updated HTML5 resume. You did something similar to this last year, however now you are using updated and improved content. Don’t worry about styling. Just get a digital markup of your most recent resume.
The process should be pretty easy considering you have a final version completed. This resume will be part of a portfolio we will be building as a class. Use your completed final resume as your reference.
You should use exactly zero styling. This exercise is all about using raw HTML. We will make it look pretty later with CSS.
Commenting is good practice. Comment out each section with a section start and end. Just for practice.
Remember your markup should be structured semantically using proper tags and indentation levels.
- Create a
headerwith a big ol’h1stating your name - Add an
addresstag with your address - Add an anchor tag with your email and an
hrefwithmailto:your@email.here - Add an
hrtag below to give your header a nice big underline for emphasis! - Create and use the
sectionelement for each section of your resume (Goals, Work Experience, Skills) - Deploy the best heading elements that match your resume, bulleted lists, bold, italics, etc…
- Add a
footerto the bottom of your resume
Put similar information in the footer as you did the header only make it smaller by using tags that print normal sized text.
Don’t forget to make your email link clickable with ahref="mailto:..."
Your html document will need a head tag. What we did in class. Review the Google Slide for meta content.
Create a New Folder on the Server. Name it WebPortfolio.
Upload to your Resume to that folder. Filename: htmlresume.html
#2. AboutMe.html
We started this in class. Complete the aboutme.html page and upload to your newly created WebPortfolio folder on the server. You should now have two unlinked pages in that folder on the server.
Don’t forget to have all the meta data in your aboutme page head tag!
#3. Best Work Catalog
During Cawd 1 and 2 you have done quite a few projects. I’d like you to create a folder of evidence. This may be screen shots, PNGs of illustrations you are proud of or Blender captures, JPG of your best photography, etc..
Review your work from the last 5 quarters of CAWD. Place your favorite 12 pieces of evidence in a folder on Week 10 on the server.
Filename:BW_what it is. file extension that fits. (BW stands for Best Work)
#4. Head Shot
Portrait or Head shot. Bring to class (digitally of course) Must be at least 640 x 480 pixels.
Filename:Headshot.jpg Place in your week 10 folder.