Lab 4: Publishing with HTML

Lab4_SH_Publishing (HTML)/Lab4_SH(Follow THis!).html

Lab 4: Publishing with HTML

1. Learning Outcomes and Introduction
2. Set Up:Integrated Development Environment
3. Task 1: Basic Structure
4. Task 2: Lists and Tabular Data
5. Task 3: Images and Linking
6. Submission

Learning Outcomes and Introduction

In this Lab you will learn how to :

• Set up an IDE environment for Code development
• Create a document for publishing on the Web
• Insert Mark up Tags in text files
• Create a an ordered or unordered list
• Create a tabular Data
• Insert images in your file
• Link to other files or websites file
• Test a live preview before publishing on the Web
• How to fix the tags when markup is wrong :(

Plan a Web Publication

There are many authoring tools, like MS Word, that allow you create documents visually and export the result as an HTML file. However, because these tools don't work with HTML directly, they usually produce poor markup that is hard for a human to read and that does not make good use of the features of the language. For this lab, you must use an editor that allows you to hand-craft the markup.

As you progress through the lab, your document will slowly become more and more complex. Save and check your work in a web browser frequently to catch errors early. You will also see how changing your markup changes the presentation of the document in your browser. However, don't worry to much about how it looks right now; what you are seeing is only the defaults – we will learn how to override these defaults in a later lab.

Web browsers are often very forgiving of errors in your code, but your marker will not be! Be careful to double-check your work and ask for help when you need it. Task 1 will show you one way to validate your code, using an online tool. It would be a good idea to make use of this tool for subsequent tasks as well!

Note:When preparing to publish a document over the WWW, you need to ask your self some of the following questions:

• What is the purpose of this Web presentation?
• What audience am I trying to reach and how does that affect my presentation?
• What information am I trying to convey?
• How will I organize the information?

Web Document Design Checklist

• Be brief and– use lists whenever possible
• Be clear - avoid vague words
• Use simple language
• Check your spelling and grammar
• Try your web page in more than one browser

Set Up: IDE (Integrated Development Environment)(8 marks)

To create an IDE envrionement. The following is as example of a few options for code development. you need to have a code editor for generating the code and a browser for viewing the output. Here is an example of how your Programming Environment should look like

You will be creating an HTML document from scratch using a code editor. These are some of the code editors your can use. In the lab we will use NotePad++. You should make sure you have an good editor with syntax highlighting

You need a Code editor and a browser in order to test your code.

1. Code Editors

• NotePad++
• Brackets
• NVU Kompozer

• Browsers

• Google Chrome
• FireFox
• Internet Explorer

You will begin with unstructured plain text, and slowly improve upon it by adding semantic markup. During this process, you will learn:

This lab document is written in HTML, and has examples of all of the topics covered in its own markup. Take a look at its source code (or use your browser's "web inspector") to see how it works!

Task 2: Basic Structure (7 marks)

Instructions

1. Create a Lab4 folder inside your existing COMP152 folder. All of your work for this lab will be stored here.
2. Note: You may complete the lab assignment using any plain-text editor, but because different editors work differently, not all the instructions will be directly applicable. Open the "NotePad++" code editor.
3. Select File > Open Folder... from the menu and choose your COMP152/Lab4/ folder.
4. Select File > New to create a new file.
5. Select File > Save, and name this file Lab04_1_Firstname_Lastname.txt, where Firstname and Lastname are your own first and last name respectively.
6. Copy & paste the contents of computer1.txt, computer2.txt, and computer3.txt into your new file, leaving some blank space between each.
7. In your web browser (where you are reading this lab), choose File > Open from the menu, and select your COMP152/Lab4/Lab04_1_Firstname_Lastname.txt file. Notice that your browser displays this file exactly as it appears in your editor, including line breaks, empty lines, and indenting.
8. Back in NotePad++, right-click on your COMP152/Lab4/Lab04_1_Firstname_Lastname.txt file and choose Rename. Change the .txt part of the filename to .html.
9. Open your renamed lab file in your browser, and notice how the browser's treatment of it has changed! Whitespace is usually not meaninful in HTML; this allows you to arrange text in whatever way makes it easiest to read and edit without affecting the end result. Without markup, an HTML has no structure, and the browser displays its content as one… long… paragraph…
10. Add <body> at the very beginning of your document, and </body> at the very end. Note: Brackets will try to be helpful and insert closing tags for you as soon as you've finished typing the opening tag. When adding tags to existing content this probably isn't what you want, so make sure to remove them! These are called "opening" and "closing" tags respectively, and together these particular tags define the body element. This element contains the "main content" of a document – usually the only content visible in the main scrolling area of a browser.
11. insert the code to include the image in your document.

If you do not see your image, check to see where did you save your image "lightning-off.svg".

• Open your file in your browser, and see if you can see the image you just placed in your code.

Keep your browser and code editor side by side on your screen. It will save you some time and effort by showing the changes you make to your document in the browser as you make them! Normally, web browsers will only show you what a document looks like at the time you open it, and You need to manually "refresh" to notice any changes.

Keep this window open for the remainder of the Task, and watch how subsequent changes to your document are reflected in the browser.

• Add <p> just before each paragraph, and </p> just after. Notice in your browser that each block of text that is marked up as with a paragraph element now starts on a new line and has some whitespace separating it from other paragraphs. Not all of your content is really a paragraph; use your judgement to decide which blocks of text are paragraphs and only apply this element to them.
• Indent your paragraph elements so that it is visually clear they are inside of your sections. For example,

  <section>
      <p>My code is great!</p>
      <p>
         It is nicely lined up so that
         you can tell which parts are
         nested.
      </p>
  </section>
              

• Add a section (or create a fancy heading) with some creative ASCII art. Wrap the text with &ltpre> and </pre> tags to preserve the layout of the text. Whitespace within the pre element is considered part of the content and is not collapsed. Because of this, you won't want to indent your ASCII art; if you do, the result will be indented! The default styling of pre also uses a "fixed-width" font in which characters will line up consistantly, making it easier to build multi-line pictures.
• Markup a heading for each section using <h1> tags. Some of your existing content may already be suitable for use as a heading, but you may need to create new ones as well. Indent your headings the same amount as the paragraphs that are in their section to show that they are part of the same structure.
• Create a heading at the top of your document
  1. Add an hgroup element at the top of your document, just inside the body.
  2. Use h1 and h2 elements inside of the hgroup to create a title and subtitle for your lab (eg. "Lab 4" and "Publishing with HTML"), as well as any other heading information you think is appropriate (such as your name).
  The hgroup element groups multiple heading elements into a single effective heading. When multiple heading elements are used outside of an hgroup, they represent separate headings and sub-headings.
• Add title metadata to your document.
  1. Add a head element before the body
  2. Add a title element containg the full name of the lab inside of the head
  3. Wrap the entire document (including the head and body) in an html element.
  So far all the content of your document has been in the body, and all of it is directly displayed by the browser. However, it is often useful to record metadata about the document in the same file which we don't want to be directly displayed. The title of a document is used by the browser for bookmark and window labels. It may also be used by search engines if they provide links to your page. The html element doesn't do or mean much on it's own, but its good practice to only have a single "root" element for the entire document.
• Add <!DOCTYPE html> at the very top of your document. This is called a "document type declaration". It re-affirms that this is an HTML document, and helps browsers and other tools to parse your document in a consistent way.
• Validate your document using the W3C Markup Validation Service
  1. Follow the link above in your browser.
  2. Select the "Validate by File Upload" tab.
  3. Choose your lab document with the file picker, and press "Check"
  4. Read over the errors and warnings that are reported, fix what you can, and repeat the process until there are no errors (warnings are okay).

Deliverables

• A single HTML file including:
  • a document type declaration
  • a head with a title
  • a body containing all other content
  • an hgroup containing at least two elements
  • at least one other h1 element
  • several p elements
  • several section elements
• Your document must
  • pass the W3C Markup Validation checker with no errors
  • use sections, headers, and paragraphs in an appropriate way for the content
  • be properly indented to highlight its structure

Task 2: Lists and Tabular Data (7 marks)

Unlike paper publishing, web pages do not have pre-defined "pages". However, it is common to break apart topics into individual files based on the content, so that each "page" will be more focussed in its subject matter. Related documents are then grouped together using folders.

Instructions

1. Create a new file called Lab04_2_Firstname_Lastname.html in same lab folder. Refer to the instructions in Task 1 if you have trouble with any of these intial steps.
2. Fill in the basic structure of your document, including a document type definition, html, head, title, and body elements.
3. Create a new section with the header Digital computers work in binary, humans work in decimal!
4. Copy your table of binary/decimal/hex conversions from the previous lab assignment into this new section. You won't be able to preserve the structure of your table when copying it, this is expected. However, your rows and columns should still be somewhat recognizable by the whitespace around your data, and copying should still save you some typing in the long run.
5. Markup your tabular data using an HTML table. Structural layout of an HTML table
   1. wrap each cell in a td ("table data") element
   2. if necessary, reorganize your data so that cells in the same row are next to each each other in your document (instead of being organized by column)
   3. wrap each row of cells in a tr ("table row") element
   4. wrap all of the rows together with a table element
   5. replace td elements that contain header content with th ("table header") elements, or create new rows and headers as required.
   Even after adding the right markup, your table will probably look rather plain in the browser. Don't worry about it for now, we will make it look nicer in a future lab on CSS
6. Add an ordered list after your table to describe the steps you can use to convert from decimal to binary
   1. Create an ol element to contain all the steps
   2. Insert an li element for each step
   HTML also has a ul element for unordered lists. The items in the list are marked up with li elements in the same way as ordered lists. Use ordered lists when the order is relevant to understanding the content (eg. a list of instructions), and unordered lists when it is not (eg. a list of equipment).

Deliverables

• A single HTML file including:
  • proper basic structure, including a document type declaration, header, title, and body
  • a table with at least one header
  • an ordered list
• Your document must
  • pass the W3C Markup Validation checker with no errors
  • use sections, headers, and paragraphs in an appropriate way for the content
  • be properly indented to highlight its structure
  • use td and th appropriately according to the content of your table.

Task 3: Images and Linking (7 marks)

Because most images are stored in a binary (not plain text) format, it usually doesn't make sense to directly insert them into an HTML document as content (they're not human-readable). Instead, they can be embedded in or linked to the document using a reference. Many other resources can be embedded or linked in similar ways, including video, other HTML documents, or entire applications! In this Task we will embed an image and link to other HTML documents.

Instructions

1. Create a new file called Lab04_3_Firstname_Lastname.html in same lab folder. Refer to the instructions in Task 1 and the file management exercises from Lab 1 if you have trouble with any of these intial steps.
2. Fill in the basic structure of your document, including a document type definition, html, head, title, and body elements.
3. Create a new section with the header Computation through Time
4. Find two or three images of computing devices or components that have changed significantly over time from the Wikimedia Commons (eg. an analog (tube) transistor, a digital transistor, and a microchip containing millions of transistors), and save them in your COMP152/Lab4/ folder.
5. For each of your found images:
   1. Create a figure element
   2. Add a figcaption element inside the figure, with the a caption that describes the image
   3. Add the markup <img src="."> inside the figure The src="." part of that tag is called an attribute. Attributes can be added to the opening tag of any element, and consist of a name (src), followed by an equals sign (=), followed by a value in quotes ("."). Also note that the img element does not have a closing tag. This is because it may not contain any text inside of it, and so a closing tag would be redundant! Only a few elements in HTML are like this; most require the closing tag regardless of whether they are empty or not.
   4. Replace the "." in the src attribute with the filename of your image (eg. <img src="my_image.jpg">) The src attribute of the img element is a reference to an image file that will be embedded in the document at the position where the img tag occurs
   5. Add an alt attribute to the image whose value breifly describes what it is a picture of (eg. <img src="my_image.jpg" alt="My cat, purring">) alt text is important for cases when the image does not load, or for users who are unable to see it for any reason (eg. vision impairment or using a "eyes-free" device). Captions should be used to describe an image in its context (eg. "Figure 2: a typical car"), whereas alt text should serve as a replacement for the image itself (eg. "a compact, 4-door passenger vehicle").
6. Construct a menu of links to allow easy navigation between the documents from this and each of the previous Tasks.
   1. Wrap the header of this document (the first h1 or hgroup) in a header element. We're adding an additional layer of structure to our header so that the title and navigation can be logically grouped together as the "header" of the document. Groupings like this might not seem to add a lot at first glance, but we'll be able to use this additional structure in a later Lab to visually differential the header from the rest of the document content.
   2. Add a nav element at the bottom of this header
   3. Add an unordered list (ul) to the nav, with a list item naming each of your lab documents.
   4. For every list item except the one for this document, add the opening tag <a href="."> at the front of the item, and </a> at the end. Each item should now look something like <li><a href=".">Task 1: Basic Structure</a></li> The a element represents an "anchor", or in this case, a link. We'll leave it out for the current document's item, since a link to where we currently are wouldn't be very useful.
   5. Replace the "." value of the href attribute in each item with the filename of the document which that item should link to (eg. <a href="Lab4_1_Firstname_Lastname.html">)
   6. Check that the links work by clicking on them in your browser.
7. Add a similar menu to the documents from Task 1 and Task2.

Deliverables

• A new HTML file including:
  • proper basic structure, including a document type declaration, header, title, and body
  • a least one figure with a figcaption and an embedded image
  • a header containing a nav with an unordered list of links to the other Lab files.
• Update the deliverable from each previous Task to include a similar menu of links as the new document.
• All your documents must
  • pass the W3C Markup Validation checker with no errors
  • use sections, headers, and paragraphs in an appropriate way for the content
  • be properly indented to highlight their structure
  • link to every other document in their navigation menu

Submission

ZIP and submit your COMP152/Lab4/ folder with work from each Task.

NOTE: This assignment is to be done individually. You can help one another with problems and questions, but in the end everyone must do their own assignment.

Criteria	Marks
All tasks
IDE Set up	8
well formed (validates)	3
good indenting	3
thoughtful use of sections and headings	3
no unnecessary markup	1
Task 1
creative ASCII art using pre	2
proper use of hgroup	2
Task 2
proper use of tr and td	2
appropriate use of th	1
binary to decimal conversion steps	1
Task 3
proper use of figure, figCaption, img, nav and a	2
good use of img alt text	1
modifed menu appropriately for each page	1
Total	30