Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org
Tumultuous Tuesday
Notes
- If you have not done so already, Create a folder for Week 9
- T Shirt Assembly tomorrow at 10am.
- HTML5 Elements quiz on Thursday. If you review the work we have been doing in class you’ll do great. Let me know if you are lost.
- Week 8 homework is due today by end of day. Check “what is due” to make sure you have correct filenames. See me if you are unsure.
9:40 Attendance & Article – Davin!
9:45 – 10:45 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
October 22nd
Cloudy
October 23rd
Cloudy chance of meatballs
October 24th
Heavy meatballs
<article class="forecast">
<h1>Weather forecast for Burlington</h1>
<article class="day-forecast">
<h2>October 22nd</h2>
<p>Cloudy</p>
</article>
<article class="day-forecast">
<h2>October 23rd</h2>
<p>Cloudy chance of meatballs</p>
</article>
<article class="day-forecast">
<h2>October 24th</h2>
<p>Heavy meatballs</p>
</article>
</article>Activity: We are going to tackle several coding on paper exercises. The focus is to identify how content is organized on a page. Follow instructions provided to you.
Additional Practice with <aside> – if you want to play around with my CodePen example, here is the link for you.
10:45 Break (15 Minutes)
11:00 – 11:50 Physics – Stay in our Room!
Class meets at 11am. Go to class immediately from break. When class is over, you will head to lunch.
11:50 – 12:20 Lunch (30 Minutes)
12:20 – 12:45 Literacy in Focus
Grab your book and chill. We’ll be reading today. No computers, no talking. Sit on the couch if you like or move your chair.
12:45 A/B Day Project – Halloween
Over the next several afternoons you are going to build a Halloween themed website and house it in your Week 9 folder. Reintroducing yourself to HTML and CSS is your primary focus. Good clean commented and validated code.
The specifics: Create a two page Halloween website. It could include scary stories, a collection of carving templates, information about costumes, a guide for planning a Halloween party, tips or steps to creating your own costume, recipes for Halloween cookies you get the idea…. Must haves:
- Two Pages, using the following tags at least once:
- <head> tag with meta data
- <header>
- <footer>
- <nav>
- <section>
- <article>
- <aside>
- <ul>
- <figure> and <figcaption>
- <a> (anchor link to something)
Some Tips to help you: Brainstorm and collect ideas, create a KanBan board to identify your “to do” list, sketch out a quick wireframe, write all your content and collect your assets first, design and code last.
Keep this simple!
Validate your HTML and your CSS
Stay Organized: Create a folder inside Week 9 for this website. Call it Halloween. Inside that folder create one for images and one for your CSS stylesheet.
If you need help, consult with W3 schools. Amazing resource to help you with your HTML coding. Do not use any templates, write your own code.
2:00 Dailies –
Link to Dailies and Link to Responses