CINF201-Week 4 Solved

Week 4: HTML II

 

Agenda 
Overview o Project Proposal
o Previous Participation Questions/Responses o What’s Due?

More HTML Fun (Lecture/Class Activity) o HTML Review o Semantic Tags in HTML o HTML Validation o Publishing Our Web Pages
Validation Exercise (CW)
Second HTML Exercise (HW)
Participation Questions (4)
Next Week
 

Overview
This week we will learn about semantic tags in HTML. These are tags which help define our content more appropriately and can be helpful for usability/accessibility. We will also cover validating our HTML and how to make our web pages live so that other people can visit them.

 

More HTML Fun (Lecture/Class Activity)
HTML Review
Last week, we learned about HTML and discussed the various components which make up an HTML element. Below is an example that was included in last week’s lecture notes. There are 4 total parts to an HTML element:

 

<p class=“para”>This is a paragraph.</p>
 

<p> and </p> are the opening and closing tags.

 

class is an attribute.

 

“para” is the value provided for the attribute.

 

“This is a paragraph.” is the content between the tags.

 

Tags, attributes, values, and content can all be used to build an HTML element. At the very least, you will need to utilize tags/content to get items displaying on your page.

 

Feel free to follow along with me as I do a brief demonstration of the tags again to recap some of what was covered last week. Afterward, I will introduce new HTML tags (semantic tags).

 

Semantic Tags in HTML
For web pages, the browser interprets the tags used in the .html file and displays them as it comes across them. We can do things like create headings, paragraphs, images, etc. using specific tags intended for those purposes. If we choose to use tags for purposes they weren’t intended for, it could have consequences for users. Of course, we can use things like CSS/JS to cover up poor HTML structure but that only works for entirely visual users.

 

One example of improper tag usage is when a developer uses table-related tags to create a layout for a page. Div, section, main, aside, and other semantic tags are better suited for the purposes of creating a layout. Screen readers most likely will not read the content in the order you intended if you use a table for layouts.

 

If we want our page to be as accessible/usable for as many users as possible, it is important to use semantic markup correctly. Any tags we use should help define the document structure in a clear manner and separate content from styles. This will allow users that utilize tools like screen readers to access our content and create a better experience overall.

 

A lot of web developers tend to use div tags to markup their content as they are useful as containers. However, divs aren’t very useful for non-visual users as they don’t offer any information as to the nature of the content inside of them. It can be difficult to build a complete page without using divs, but you should do your best to use semantic markup when possible.

 

 

 

 

Examples of common semantic tags:

 

Tag Names 
Purpose 
Header
Represents introductory content such as navigation menus
Nav
Contains navigation-based links in major blocks
Aside
Usually used for content aside from the main content such as sidebars
Main
Contains the main content for a document
Article
Independent content such as forum or blog posts
Section
This identifies sections in a document and is sometimes used in article tags
Footer
Defines a footer for a document or section
 

Additional Reading

https://html.com/semantic-markup/
https://www.lifewire.com/why-use-semantic-html-3468271
https://internetingishard.com/html-and-css/semantic-html/
 

HTML Validation
For our pages to present themselves correctly and behave in expected ways, it is important to validate our documents. A document’s code is considered valid when the tags are nested correctly, and everything is placed according to W3C specifications. An example would be a <ul> tag containing only <li> elements inside of it. One rule that trips up students a lot is that <ul> cannot be a direct child of another <ul> (same for <ol>). The sample code below demonstrates good and bad structures for lists.

 

 

Good List Structure 
Bad List Structure 
<ul>

<li>Item 1</li>

<li>Item 2

<ul>

<li>Sub Item 1</li>

</ul>

</li>

<li>Item 3</li>

</ul>

 
<ul>

<li>Item 1</li>

<li>Item 2</li>

<ul>

<li>Sub Item 1</li>

 

</ul>

<li>Item 3</li>

</ul>

 
 

In the example above, the left side has the 2nd <ul> tag nested inside of the 2nd <li> tag. The </li> tag is closed after the 2nd <ul> set is closed. In the bad list portion, the 2nd <ul> is a direct child of the 1st <ul> and therefore not valid. This is just a rule that is a standard in HTML and there are many others like it.

 

I don’t expect you all to memorize all rules; you can use a validator instead. It will tell you what lines of code are wrong, so you can fix them and improve your document’s markup. To check your code, copy all of it and paste it directly into the validator. You can also upload files or provide a link but copy/pasting code is quicker.

 

Use the website below to validate your code in the assignment mentioned below. I would recommend bookmarking it in your favorite browser for the semester. Chrome is my browser of choice, but Edge and Firefox are pretty good as well. A green bar means your document validates perfectly.

 

https://validator.w3.org/#validate_by_input

 

Publishing Our Web Pages
To publish our web pages, we need to use FTP software to place our files on the UAlbany server. Each of you has space reserved for hosting files and we will use that space for our coursework this semester.

 

Follow along with me as I demonstrate how to upload files using FileZilla. If you get lost or I’m going too fast, feel free to refer to the “Viewing our Web Pages.docx” document that has been provided with today’s lecture notes. If you ever forget how to do the file upload, this document is also available on Blackboard through Course Materials à Additional Resources.

 

Validation Exercise (CW)
Download the validation-exercise.zip folder from Blackboard under today’s lecture notes or the assignments folder. After you have downloaded the folder, extract the files to somewhere else on your computer where you’ll be able to find them.

Your task is to fix the HTML in the document which contains numerous errors. To see what your page should look like after you have fixed it, there is an image included in the zip folder.

The content on the page goes beyond the height of the screen so the image provided will look small as I took a scrolling screenshot of it. However, you can zoom in on the image and everything should be clear to see. If you experience issues with image visibility, please contact me.

No text content inside of tags should be added/removed from the page, but you will need to add, delete, alter, or move around tags.

To validate your page, visit the following link and enter your code:  https://validator.w3.org/#validate_by_input

Once your page is validated, place it on your UAlbany server area as explained earlier in class today. To earn credit for this assignment, you will need to submit a link to a validated page to Blackboard. You will know the page is validated when you use the validator link and it displays a green bar with the text: Document checking completed. No errors or warnings to show.  

Tips

There are at least 20 errors to fix (I created these errors based on what I’ve seen students struggle with or on previously submitted assignments)
Make sure tags are nested correctly
Some tags require the presence of another tag (especially <dl> tag)
Some opening/closing tags may not be required
Some tags may be misspelled
Compare your page to my image before submitting to ensure everything is the same. If your page validates correctly, it should look just like the image provided.
Submit a live link from your UAlbany server: albany.edu/~username/cinf201/validationexercise.html where “username” is replaced by your NetID.
 

 

Second HTML Exercise (HW)
Download the html-exercise-2.zip folder from Blackboard under today’s lecture notes or the assignments folder. Using the HTML file in this folder, create a web page based on the image provided. Your page should validate entirely (green bar on the validator website) and contain the content exactly as I have it. This means all text should be bolded/italicized or linked as depicted on the page. You can also use your own HTML file if you prefer to do it that way. Just make sure it validates by the time you finish.

The list below contains the tags that should be used for this assignment:

title em    • textarea
p strong           • br
img table • html
h1-h3 tr       • body
ul td      • a
li th
ol form  
hr input/button
 

For the purposes of this assignment, you can use “#” for the value of the href attribute in your link tags (<a href=“#”>link text</a>). For the elements inside of the form, you can use the <br> tag to put them on different lines. The last input for the form is a textarea and not a regular input tag.