NAME: Pamela Jessiman
STUDENT NUMBER: #6
VQG Assignment 1--Intro, Ch 1, Ch 4
From textbook: Visual Quickstart Guide (VQG): HTML & CSS
Save this file in your VQG folder, then follow the instructions below.
PART 1: QUESTIONS & ANSWERS: Read pages xv through xxi in the INTRODUCTION of the VQG book, and then
fill in the answers to these questions in the row after the question.
1. What is HTML?
Answer here HypertText Markup Language
2. Look up HTML in the index of the book. What does HTML stand for?
HTML – Hypertext markup Language consist of elements, attributes, and values.
3. What are some of the new features of HTML 5.0?
Some of the new features: New Semantic/Structural Elements – New Form Elements – New Attribute
Syntax – allows 4 different syntax for attributes, also defines JavaScript for graphic drawings and New
Media Elements.
4. Look up CSS in the index of the book. What does CSS stand for?
Cascading Style Sheets
5. List at least five browsers (Note: for this course, we will use Google CHROME):
Internet Explorer, Firefox, Chrome, Safari, Opera and Netscape Navigator
6. Use Google search to define these terms:
1. 1.) Unicode: An international encoding standard for use with different languages and scripts, by which
each letter, digit, or symbol is assigned a unique numeric value that applies across different platforms and
programs.
2.) Utf-8: Is a compromise character encoding that can be as compact as ASCII (if the file is just plain
English text) but can also contain any unicode characters (with some increase in file size). UTF stands for
Unicode Transformation Format. The '8' means it uses 8-bit blocks to represent a character.
7. What does progressive enhancement mean with regard to web sites?
Progressive Enhancement means that each layer (content, followed by markup,
styles, and then behavior) builds upon the next, ensuring that the core content is
accessible along the way for less capable browsers and devices.
PART 2: FIRST WEB PAGE: Read pages 1 through 7 in the VQG CHAPTER 1: WEBPAGE BUILDING BLOCKS, then
follow the instructions below to create your first web page.
Create the HTML file:
1. Make sure you have created the folder structure indicated in the course syllabus.
2. Download the blueflax.jpg image from D2L CONTENT and save in your HTML folder (do not save in the
GRAPHICS folder).
3. Open NOTEPAD from Windows Accessories (or TEXTEDIT on Mac).
4. Carefully type in all the HTML code found in the box at the bottom of page 6.
NOTE: Each character in this code is important. Check your code over for any missing characters or errors
in the text!
5. Save the file in your HTML folder with this name (don’t forget the .html extension or this won’t work):
myblueflax.html
Open your web page:
1. Open the CHROME browser. Hold the CTRL key down and tap the letter O (for open). Navigate to your
HTML folder and open it. Double-click on the myblueflax.html file.
2. The file should open so you see a web page similar to the one shown on page 7; if so, you have now
successfully created your first HTML web page! (NOTE: Your text may stretch out wider than the text
shown in the book, as text will stretch across the width of the window.)
3. Test the Blue Flax link by clicking on it.
4. What if it does not properly display the web page? You must have an error in your code. Go back to your
NOTEPAD file and carefully check through each character. When you find the error, fix it, save the file
again, and open it again in CHROME.
Edit the page:
1. Go back to the code in Notepad. Just before the </article> at the end of the code, add these lines
of code:
<p><strong>Ephemeral:</strong> Lasting for a very short time, transitory, existing only briefly.
Ephemeral is from the Greek word <em>ephemeros</em>, which literally means "lasting only one
day."</p>
CRITICAL NOTE about MS WORD: If you copy the code above and paste into an HTML program in a text editor
(like Notepad), MS Word may include formatting codes that are not compatible with HTML. If code copied
from a MS Word document (such as this one) does not work correctly, examine the code closely to see if odd
characters appear in the code. Delete them and type in the correct characters, save, and test in the browser.
2. Save the file, open the page again in the browser. Errors? Fix the code & refresh the page.
3. Open your code again and change the <strong> tag to <dfn> . Be sure to change the </strong> to </dfn>
also. Reopen the page in CHROME to how the page is now rendered in the browser.
4. SCREENSHOT: When you view the completed web page in CHROME, press the PRTSC (Print Screen) button
on your keyboard to copy a screen shot of the page onto the Clipboard. Click in the space below to paste
the screenshot (CTRL P).
5. Now select all the instructions from this section of the assignment (beginning with Create the HTML file
through this sentence, and delete it. Save this file again.
Screenshot of the Blue Flax web page rendered in CHROME:
PART 3: Chapter 4: TEXT: Answers are found in the VQG book, Chapter 4.
1. Explain the purpose of each of the following HTML tags (HTML tags are what web programmers call the
HTML code found in the < > brackets; the book calls them “elements”):
NOTE: Chapter 4 also contains many new HTML 5.0 tags which have specialized usage; the tags below are
general usage tags you will use in most of your HTML programs.
1. <p> For creating a paragraph
2. <small> Small print – such as legal print
3. <strong> Indicating content of strong importance
4. <em> To mark text with stress emphasis
5. <i> For marking a span of text that is in an alternate voice or mood or that is otherwise offset from the
normal prose in a manner indicating a different quality of text.
6. <b> For identifying a span of text to which attention is being drawn for utilitarian purposes, without
conveying any extra importance and with no implication of an alternate voice or mood.
7. <figure> For identifying content that is referenced within the main flow of the page but that could be
moved elsewhere without affecting the flow.
8. <blockquote> For identifying a section quoted from another source.
9. <time> For identifying specifying a date, a time, or both
10. <dfn> For specifying the defining instance of a term
11. <sub> For marking subscripts
12. <sup> For marking superscripts
13. <code> For marking text that is computer code or a file name.
14. <pre> For representing a block of preformatted text.
15. <br /> For creating a line break.
2. What is the purpose of the tags with a slash at the beginning (as in </strong>)?
It means the end of the command.
3. PDF: When you have completed this assignment, save this file as usual, then save as a PDF file in your VQG
folder (press F12 for SAVE AS, then choose PDF from the SAVE AS TYPE dropdown list).
NOTE: You will upload your PDF file, share with your instructor, and link to your index page when you have
learned to do this.