Finals Review Site
WORLD WIDE WEB
- Briefly describe how the internet has evolved from its start until now.
-
- Internet Browsers: What are they? List some examples?
- They are places where you can communicate and research things that yuo could not find out where you are, some examples are google, yahoo, and firefox.
- URL: What does it stand for? Give an example. Code it to be clickable.
- Uniform Resource Locator
FILE MANAGEMENT
- Check that all of your files are named with lowercase letters and no spaces. Keep thenames short.
- DONE
- Run a hyperlink check and fix broken links. right click on a file check links.
- DONE
- What is an orphaned file? Run an orphaned file check and remove orphaned images.
- An orphaned file is a file that is not linked to anything ad does not serve a purpose
- File Extensions – List the file extensions for the following:
- Web page
- HTML
- Style Sheet
- CSS
- List 4 possible file extensions for an image
- JPG
- PNG
- GIF
PLANNING A WEBSITE
- How do you find a color scheme?
- https://color.adobe.com/create/color-wheel
- Using and image, generate a color scheme. Take a screenshot of the color scheme, save the image, and insert on this page.
- Apply the colors from your new color scheme to this page.
HTML
- What is it?
- Hypertext Markup Language, a standardized system for tagging text files to achieve font, color, graphic, and hyperlink effects on World Wide Web pages.
- What does HTML stand for?
- Hypertext Markup Language
LESSON 1: MAIN ELEMENTS
- What are the 4 main elements that always need to be included in an HTML file?
- Head, title, html, and body
- Which of the 4 main elements contains the visible page content?
- Body
- Text inside of this main element shows up on the tabs of your browser. Fill in this tag with “Final Exam Review Site”
- Which heading is largest? Add all 6 headings to this section. Add a CSS style for each one. Use your color scheme.
- h1 (is the largest)
- h2
- h3
- h4
- h5
- h6
- List some web page editors. Which one do we use in this class?
- Abobe dreamweaver(what we use),Notepad++, and Sublime text.
LESSON 2: Head Tag
- What types of tags go into the head tag?
- <title>, <meta>, <link>, <style>,and <link>
- What is the purpose of the document declaration?
- it states what version of html this site is coded in to the web browser.
- What is the purpose of the meta data? Add meta data to this page and change its contents to apply.
- it gives the web browser info on you site so that your site may show up more often on a browser.
- Use HTML code to add a line below the main heading on this page.
- In this section, add the school’s address and use html code to move each line of the address to its own line.
LESSON 3: CSS
- CSS – What does it stand for?
- Cascading style sheet
- What does cascading mean?
- Adding or flowing down
- Which of the following will take precedence over the rest, internal, inline, external?
- inline
- Give an example of a (selector, property, & value.
What selector would you use to change the background color for the entire page?
- body( backround-color: Green;)
- Link an external style sheet to this review page.
Style your page using a color scheme. Use the following styles
- Background-color
- Color
- Text-align
- Font-size, font-family
- Padding, margin, float
- Border
LESSON 4: LISTS
- Insert a short unordered, ordered, and definition list.
- Style your list by changing the following:
- Style the bullet of the unordered list as a square
- Style the ordered list to be roman numerals
- Style the DT to be underlined. (text-decoration)
LESSON 5: IMAGES
- Types of Images
- List 3 different image types.
- PNG, JPG, GIF
- What is the best place to save pictures on your site?
- Images folder
- What are the copyright rules?
- You must ask for permission before using the image
- Coding Images
- Insert an image in this section that is accessible to all users.
- Explain the difference between Alt text & title text.
- alt text describes an image and title text names it
- Styling Images
- Use CSS to add a border to your image.
- Float your image to the right style it to be responsive. (use %)
- Add padding and margins to your image.
LESSON 6: LINKS
- What is the difference between an internal and an external link.
- internal in the head tag in the html code and the external is from a CSS
- Insert a hyperlink here that takes us to your portfolio. Make the clickable text say “Click to view my projects”.
- Insert an image & link it to Google.
- Style the link above
- Change the link color. Use the text-decoration property to remove the underline
- Give it a hover effect. (a:hover)
LESSON 7: EXTERNAL STYLES
- Which style sheet wins, inline or external?
Which style wins, one at the top of the sheet or at the bottom?
- ANSWER
- Check to be sure you have linked an external style sheet.
- Make sure you have the body selector at the top of the sheet.
- Group like items together.
- Add some comment code to your sheet to identify each section.
LESSON 8: DIV
- How are div tags used on a web page?
- ANSWER
- When would you use an id instead of a class?
- ANSWER
- If you had an id=”bob” what would the selector look like.
- ANSWER
- Insert a row with 2 responsive divs that are side by side. Give them each a name using an ID or class. Give them each a different background color.
LESSON 9: LAYOUTS
- What is the purpose of the viewport?
- ANSWER
- What does it mean for a site to be responsive?
- ANSWER
- If you want a div or an image to be responsive, should you use pixels or percentages?
- To make a 4 column layout, your divs should be set to ____ %.
- ANSWER
- To make your divs move side by side, use the ______ property.
- ANSWER
- Style all the divs on this page to be either a 2, 3 or 4 column layout.
LESSON 10: NAVIGATION BARS
- What html tag would you use to create a navigation bar?
- ANSWER
- What property & value make the items move into one row beside each other?
- ANSWER
- Insert a navigation bar at the top of this page that takes us to your portfolio and each of your review pages.
- Add a bookmark link at the bottom of this page that takes you to the top.
CSS BACKGROUNDS
- Add a responsive background image to the body selector. (use cover, 100% 100% or contain)
- What is the difference between cover, contain, and 100%, 100% values?
- ANSWER
ODDS AND ENDS L12
- Insert at least 3 different symbols
- Embed your favorite website.