Lab 4: Publishing with 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
2. 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 folder inside your existingfolder. 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. Selectfrom the menu and choose yourfolder.
4. Selectto create a new file.
5. Select, and name this file _.txt, where and are your own first and last name respectively.
6. Copy & paste the contents of,, andinto your new file, leaving some blank space between each.
7. In your web browser (where you are reading this lab), choosefrom the menu, and select your_.txtfile. 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_.txtfile and choose. Change thepart of the filename to .
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 at the very beginning of your document, and 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" tagsrespectively, and together these particular tags define theelement. 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
    lightning bolt
    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".
12. 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.

1. Add just before each paragraph, and 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.
2. Indent your paragraph elements so that it is visually clear they are insideof 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>
               

3. Add a section (or create a fancy heading) with some creative ASCII art. Wrap the text with and tags to preserve the layout of the text.Whitespace within theelement is considered part of the contentand 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 ofalso uses a "fixed-width" font in which characters will line up consistantly, making it easier to build multi-line pictures.
4. Markup a heading for each section using 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.
5. Create a heading at the top of your document
   1. Add an element at the top of your document, just inside the.
   2. Use and elements inside of theto 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).
   Theelement groups multiple heading elements into a single effective heading. When multiple heading elements are used outside of an, they represent separate headings and sub-headings.
6. Add title metadata to your document.
   1. Add a element before the
   2. Add a element containg the full name of the lab inside of the
   3. Wrap the entire document (including theand) in an element.
   So far all the content of your document has been in the, and all of it is directly displayed by the browser. However, it is often useful to record metadataabout the document in the same file which we don't want to be directly displayed. Theof 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.Theelement 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.
7. Add 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.
8. 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
  • awith a
  • acontaining all other content
  • ancontaining at least two elements
  • at least one otherelement
  • severalelements
  • severalelements
• 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 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,,,, andelements.
3. Create a newwith the header
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.
   diagram of table structure
   Structural layout of an HTML table
   1. wrap each cell in a ("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 ("table row") element
   4. wrap all of the rows together with a element
   5. replaceelements that contain header content with ("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 element to contain all the steps
   2. Insert an element for each step
   HTML also has aelement for unorderedlists. The items in the list are marked up withelements 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
  • useandappropriately 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 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,,,, andelements.
3. Create a newwith the header
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 yourfolder.
5. For each of your found images:
   1. Create a element
   2. Add a element inside the, with the a caption that describes the image
   3. Add the markup inside the figureThepart of that tag is called an attribute. Attributes can be added to the opening tag of any element, and consist of a name (), followed by an equals sign (), followed by a value in quotes ().Also note that theelement 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 theattribute with the filename of your image (eg.)Theattribute of theelement is a referenceto an image file that will be embedded in the document at the position where thetag occurs
   5. Add anattribute to the image whose value breifly describes what it is a picture of (eg.)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"), whereastext 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 firstor) in a 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 element at the bottom of this header
   3. Add an unorderedlist () to the, 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 at the front of the item, and at the end. Each item should now look something like <li><a href=".">Task 1: Basic Structure</a></li>Theelement 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 theattribute 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 onewith aand an embedded image
  • acontaining awith 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 yourfolder 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.