Embedded Files
REWORK SECTION/UNIT
Intro to HTML
In pairs, find out:
1. What is HTML?
2. What does HTML stand for?
3. What is a browser?
4. What are some examples of browsers?
5. Find some examples of HTML tags.
6. How can you view the code of a web page?
In class we'll use this link to talk about the first steps in creating a new site. Steps 4 & 5 will be the start of a tutorial site we'll add to throughout the semester. We will create the content of our sites first, then change how it looks later on.
HTML Syntax - Info about common HTML tags, we'll just look at the overview for now
Practice - Intro to HTML
Basic Examples - Practice these basic examples using the live HTML editor
View Page Source - How to view source and see examples using Chrome
Basic HTML Page & Home Page Setup
Essential Tags - Basic HTML structure
Common Tags - Home page setup
In class we'll cover how to edit and view your index.html page. We'll also cover info from the two links above. You will be creating a tutorial site that we will add to throughout the semester. Here is an example of a div container (box) that we will talk about. Make sure to include all the required parts (#2) from the Common Tags link. Here is what it will look like when your done. Here is what your HTML will look like.
We are setting up the foundation for our tutorial site, which we will add to and build on throughout the semester.
Lists
In this lesson we see that many HTML tags are containers. Lists are containers. Also, remember to indent your HTML code, for example when adding lists. Most navigation menus are lists as well. Right now these navigation menus won't look very pretty, but we'll change that when we cover CSS.
In class we'll cover the info from the following two links.
Lists - Follow the direction for #4 and modify your tutorial page. Here is what your HTML will look like.
Navigation Menus - Follow the directions to modify your tutorial page. Here is what your HTML will look like.
Links
External Links
Link to External Sites - We'll cover the info from this link in class. Follow the directions to add an external link to your tutorial page. Here is what the HTML will look like.
Absolute VS Relative Links
This link covers the difference between absolute and relative links (highlights below). It also has an example of a relative link.
Absolute = Full web address (best for external links)
VS
Relative = Link to portion of web address (best for internal links)
**If you don't have your files organized in a folder, your relative links won't work**
Your Mission ...
- Add relative links to your tutorial page as described here. This is what your HTML will look like.
Special Links
In class we'll talk about special links, like jump-to and email links. These are not as common in today's web design world, but still valuable to know how to use if needed.
Jump-to links allows users to skip to certain parts within your page. This is another area where we can make our sites more accessible to all users. For example, a person with disabilities might want to jump to the main content of your page.
Accessibility Skip to Main Content Examples
Back to Top Example - View page source back to top vs mail to
Email (mailto) links provide users a way to quickly contact a person/organization. Depending on how email is set up on the users computer, these might not work. Also these can be a target of spambots.
Your Mission ...
- Add skip navigation and email links to your tutorial page as described here. This is what your HTML will look like.
Data Tables
In class we'll cover the information from this link about data tables. Tables used to be used to control a page's layout. This is NOT how they should be used. Tables should be used to display data.
If you need to add a table to display data, find an example and customize it.
Video
What would web designers use for videos (and other media) before HTML 5?
Different web browsers support different video file types. The file types we'll look at and where they're supported are listed below:
- MP4 file - the video file, for browsers that support MP4 (e.g., Internet Explorer, Safari, and Chrome)
- WebM file - the video file, for browsers that don't support, or were late to support, MP4 (e.g., Firefox and Opera)
- JPG file - a still image to be used in the poster attribute, as a placeholder that's displayed before the user starts playing the video
- VTT file - the closed caption file in WebVTT format
Video Lesson - In class we'll walk through the material on this link and cover the different parts of a video tag. It's important to remember to test your page in different browsers when you are done.
You will need to download the following files for your tutorial page:
You will need to create a videos folder and put the above files in that folder. Copy the path of the folder and use it in your video tag. I'll show you how to do this in class.
Internet Archive Videos - Find videos to use on your news site.
Your Mission ...
- Add video to your tutorial site. Here are the tutorial site instructions and HTML example.
Captions & Accessibility
Add Captions to Video - We'll cover the info from this link in class. We'll talk about how the <track> element/tag can be used and look at an example to break down the different attributes.
You will need to download the following file for your tutorial page:
Make sure to put this file in your Videos folder. Add the path to your <track> tag. You might need to enable local file access in Chrome.
Your Mission ...
- Use the <track> element/tag to add captions to your tutorial site. Here are the instructions and HTML example.
YouTube
Audio
HTML 5 Audio - We'll cover how to add audio to your site in class.
1. Find audio using the links on my Course Docs & Links page
2. Create a new audio folder in your tutorial_site folder
3. Download the sound file you found and put it in the audio folder
3. Use the link above and info in class to add audio to the bottom of your index page
QR CODES
Add a QR Code to your tutorial site home page. Use this info from this link.
1. Create a QR code message or url to add to your site https://www.the-qrcode-generator.com/
2. Test your QR code using a bar code scan app. When scanned, the QR code should reveal your message or link. If this doesn’t work, go back and revise your QR code and test it until it works.
3. Embed your QR code on your web page. Click on the button between the save icon and the print icon (looks like a wishbone) and copy that code.
4. Put the QR code somewhere logical on your tutorial site home page.
Create QR Code - Colorful QR code generator
Font Awesome
Add some Font Awesome icons to your site.
2. Follow these directions for Easy: Default CSS
<head>
<meta charset="utf-8">
<title>Web Portfolio: Your Name</title>
<link rel="stylesheet" href="H:\tutorial_site\font-awesome-4.5.0\css\font-awesome.min.css">
</head>
3. Check out the examples on how to use the icons
Lists Example:
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>List icons</li> <li><i class="fa-li fa fa-check-square"></i>can be used</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li> <li><i class="fa-li fa fa-square"></i>in lists</li></ul>4. All the icons that can be used
5. Update the bullets on your site to use Font Awesome icons
Favicon
Add a favicon to your site. Follow the instructions on this link.
Favicon Generator - Try code at the bottom of the page
Geolocation
Use the info on this site to learn about and explore geolocation. Geolocation uses JavaScript, which we will cover later this semester. Use the example from the link below to add geolocation to the bottom of your tutorial site home (index) page.
Geolocation Example - Copy all the info in the body section and add it to your page. Customize it as needed.
Rubrics
Your tutorial site should include all the HTML sections from this page. You will send it to me as a zip file on Schoology.
HTML COMIC
Now that you are an HTML expert, use your knowledge to create an HTML Comic. Use this link as a guide on what to customize.
The Assignment
Customize the HTML Comic linked above. All the text and images need to be changed. The comic should make sense, all the images and text should be related.
Finding Images - I would recommend Pexels & Unsplash
Requirements
- 8 Frames or more
- Custom images
- Custom text
- 1 External link
- No Copyrighted images
Page updated
Report abuse