Week 22 Vocab and Terminology

Class hours: 9:40am – 2:05pm
Mr. Cronin
Mr. Moore

Quizzes on Friday morning.  15% of your grade are the quizzes, typically 9 new, 1 review, and 1 extra credit question from our weekly articles.

Quizzes not only help determine grade, but also help show me who is ready for design competitions and sitting for our certification exams.

Sat / act prep

  • Digression – a message that departs from the main subject.  Josh tried to bring the discussion of web coding best practices to his WOW mains.  This was a digression.
  • Diligent – quietly and steadily persevering in detail or exactness.  The student took their time in their “Life” sketch to really outline their daily routine in exacting time segments.  The student was diligent.
  • Discredit – the state of being held in low esteem.  The student was discredited when it turned out he cheated on the SAT’s.


  • Infographics make complex information eye-catching, shareable and easily digestible.


  • A clipping mask in Photoshop is where content (the higher layer) is only revealed through a mask element (the lower layer).  You can think of this as pushing the content through the shape of the lower layer – only where the lower layer exists will the upper layer content show through.
  • Layer Styles are artistic additions you can add to layers.  They can be copied and pasted to additional layers without having to recreate them.  Some example layer styles we used last week include:
    • Gradient Overlay – put a gradient over your layer content.
    • Stroke – put an outline around your layer content.

Web Design

  • The html5 doctype is <!DOCTYPE html> and appears on line 1 of your html file.  This instructs the browser that the following lines of code (your file) is a specific html5 page.
  • The web page is broken up roughly into two distinct areas, the <head> and the <body>
  • The <head> section of your html document is for content that typically doesn’t show up in the main browser window.  Some examples of what does go into the head section include:
    • Links to external resources such as css, js, etc.
    • Search Engine tools such as keywords.
    • Title tag which is used in the the tab of the web browser, search engines, as well as bookmarking.
    • A link to for the character set.  <meta charset=UTF-8is declared by default to tell the browser that content in the page uses the UTF-8 character set.  
  • The <body> section of your html document is what renders on the main browser window.  If you want a text element, or image, or video to show up in your page you put it in the body.
  • html5 tags are predominantly created with <open> and </close> tags.  For example, the title tag is built with:
    • <title>(Title information goes here)</title>
  • Some Week 1 html 5 tags we used:
    • <p>  for paragraphs.
    • <h1>  through <h6> for headings.  The lower the number, the larger the heading.
    • <ul> for unordered lists (bullets).  This vocab extensively uses <ul>’s.
    • <ol> for ordered lists (numeric lists, 1, 2 3).
    • <li> for listed items.  These go inside of both <ul>’s and <ol>’s and define the specific items to be listed.
    • <img> for images.  The full code is <img src=”path to image” alt=”Alternate description”>  Notice this tag does not need to be closed.  In html5 the code has actually become a little more flexible and accommodating.
    • <hr> for horizontal rule
    • <title> for page title.
    • <a> for linking.  The full code is <a href=”target to load” title=”description of link”>Clickable element</a>.  Notice this two part tag wraps around the element you wish to make a link, be it test, or an image.
    • <strong> to make a piece of text bold.
  • Files named “index.html” are told to typically auto-load on a web server.  Often the main page of a web site is called “index.html” so when you visit Bbcnews, or Polygon you don’t have to click on a file.  It loads automatically, creating a seamless user experience.
  • FTP stands for File Transfer Protocol and is how we move file from local machines to the Web Server.
  • In best practice Web Design and Development you want to be organized and to this end we in Cawd emulate this.  Going forward I an going to expect separate folders (per project) for:
    • images
    • css
    • javascript
    • other grouped elements.  We do not want junk drawers of content.
Copyright © 2004 - 17 cawd by Steven Herr. All rights reserved.