Class hours: 9:40 – 2:05
Mr. Bohmann
wbohmann@ewsd.org
Week Ten
Today’s Notes
- Today is an EHS B Day
- LTA Presentations Hayden, Emma
- CCV Classes on Friday – don’t forget to catch the bus
9:40 Attendance
9:45 Graph of the Day
10:00 LTA Presentations
10:10 Logo Showcase
Tell us about your design and why it should be the CAWD design for the year. You have the floor.
After all of the designs are in, I’ll pull together a Google Form and we’ll vote to the top three designs in CAWD2.
The final three designs will go out to Year One and this class for a final round of voting to select the winner.
Once the final version is selected, Mr. Cronin and I will help the designer with the final version for the printer.
10:35 – 10:45 Break
10:45 Web – The Head Tag
The <head> tag of your document is a busy place. Lots of great information can be housed there which provides essential information for the browser (IE, Safari, Firefox, Chrome, Opera)
This information is essential so that indexing browser bots and spiders can cache keywords, character type, viewport information, meta data and links to your style sheets. Here is a snippet that you can copy. Go to my repository (called a repo) on GitHub. If you create your own GitHub account you can fork this and have a snippet for yourself.
Below is a sample of what might go in the <head> element.
<!DOCTYPE html>
<html lang="en" dir="ltr"> <!--Means language, English, Direction, Left to Right -->
<head>
<meta charset="UTF-8">
<title>Title of your Page Here</title>
<meta name="description" content="What is your site about">
<meta name="keywords" content="what are keywords in your site">
<meta name="author" content="who owns or authors this page">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<!-- The viewport is the user's visible area of a web page. It varies with the device, and will be smaller on a mobile phone than on a computer screen.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. -->
</html>Head Tag Slides for Reference
Activity: EB Elixirs
- Create a Folder on your desktop. Call it WebPractice
- Open VS Code
- Create a new document and <head> tag for the Company I’m showing on the screen
- Be sure to include all of the correct meta data to help out with Search Engine Optimization
- In the <body> create a list of flavors
- Save the file as index.html
- Right click on your file and Open in Preview.
- Rick click your preview and choose “View Page Source”
- You should see all your code and your meta tags
- So I can see your work, Open the Snipping Tool and take a screen shot of your head tag. Drop in Cawd2 Dailies so I can have a peek.
11:30 Digital Resume – HTML Version
Link to the list of Semantic HTML Elements
Project #1 Your HTML 5 Resume
- Create a New Folder on your Desktop. Name it WebPortfolio
- Create a new html document. Name it resume.html
Take your Resume (Paper Version) and mark up your document with HTML tags. I’ll demo for you. Do this first!
After you mark up a paper version of your resume, translate that into an updated HTML5 resume. You may have done 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 that you just finished.
The process should be pretty easy considering you have final version of your resume completed. This resume will be part of your senior portfolio we will be building as a class.
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.
Next week I will show you how to FTP your WebPortfolio folder with your resume.html to the our server so it can be published as a real website.
Did you check the HTML Validation service? You should!
This assignment is due by Wednesday, November 9th.
Tips:
- Create a header with a big ol’ h1 stating your name
- Add an address tag with your address
- Add an anchor tag with your email and an href with mailto:your@email.here
- Create and use the section element 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 footer to 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 a href=”mailto:…”
11:45 Final Viewing – Final Version – The FORCE
Let’s have a final look at your projects after one round of revisions. Please share:
- What you are proud of
- What you found challenging?
- What you take away from the experience and can apply to your next group projects…
12:15
12:45 Web – Bonus – The Aside Element
The <aside> element can be used as a compliment to information found on a webpage, but perhaps the content might be better as a standalone option.
Let’s do one together and we’ll add some CSS for fun and practice (and review). First we’ll use some semantic HTML elements to structure the code.
Here’s some content for us to use:
Salamanders
Salamanders are a group of amphibians with a lizard-like appearance, including short legs and a tail in both larval and adult forms.
Did you know?
The Rough-skinned Newt defends itself with a deadly neurotoxin. This is not the type of toxin you want to have a run-in with. Try not to agitate.
Several species of salamander inhabit the temperate rainforest of the Pacific Northwest, including the Ensatina, the Northwestern Salamander and the Rough-skinned Newt. Most salamanders are nocturnal, and hunt for insects, worms and other small creatures.
An adult salamander generally resembles a small lizard, having a basal tetrapod body form with a cylindrical trunk, four limbs, and a long tail. Except in the family Salamandridae, the head, body, and tail have a number of vertical depressions in the surface which run from the mid-dorsal region to the ventral area and are known as costal grooves. Their function seems to be to help keep the skin moist by channeling water over the surface of the body.
Mr. B. did you say “Extra fun” – Show us the <details> and <summary> elements…
1:10 Break
1:20 20% Production Time & Guided Support
- HTML Resume – remember no styling!
- 20% Production / Exploration
- Python / Drawing Assignments