Practice 2

note

You can see a completed example here:

https://40px.github.io/webdev1/2/

Right-click on the page and select View Page Source to see the HTML code in the file.

Start up Visual Studio Code.
If your "webdev1" repository is not already opened, you can go to File -> Open Folder and find the folder.
Create a new folder named "2".

Inside the "2" folder, create a new file named index.html
Make sure to name the file in all lowercase. No capital letters!

Copy the HTML code below and paste it into your index.html file.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>REPLACE THIS WITH A TITLE FOR YOUR PAGE</title>
    <meta name="description" content="REPLACE THIS WITH A DESCRIPTION OF THIS PAGE IN SENTENCE FORM.">
</head>

<body>

<!-- REPLACE THIS COMMENT WITH THE CONTENT FOR THE PAGE -->

</body>
</html>

After saving the file, view it in a web browser.
You can do this by dragging the index.html file to an open browser window.
Since we haven't yet added anything within the body, the page will appear blank in a browser.

Find an article that has several headings. It could be one that you have written or something you found on the internet.

If the article is really long, you might choose to only use a portion of the article.

If you are not in the mood to find an article...

:) Here you go:

Issues at the Reference Desk
The Blernbuckle Public Library began in 1905 in a Carnegie-funded facility in downtown Blernbuckle, Mississippi. Later renamed the Blernbuckle-Poodlebean County Public Library, the system has expanded to eight branch locations with a total annual circulation of over 1.5 million items and holdings containing nearly half a million volumes.
I really want to emphasize something here. It is not easy typing paragraphs of text for practice exercise examples. This article is about a made-up library. This is not a real study.
Dana Silvermoon began working for the district in 1984 on a project to digitize the library catalog. Seven years ago, she was promoted to her current position as district reference manager. This is a profile of reference services at the Downtown Terrific (DT) branch, where Silvermoon's office is located and the branch for which she provides immediate oversight. The information in this profile was obtained during an interview with Dana Silvermoon that took place in her office on November 29, 2007.
At the Reference Desk
The reference desk at the DT branch is staffed every hour that the library is open (Monday-Friday, 8:30am-9pm and Sunday, 1pm-5pm). Although, their goal is to have a professional librarian on duty at all times, due to the small number of professionals employed, sometimes the reference desk is staffed only by paraprofessionals. However, Silvermoon emphasizes that only the most capable paraprofessionals staff the desk on their own.
During off-hours when management is not present, the reference staff is also responsible for the overall supervision of the library facility. The staffing schedule is not always consistent, with professionals on duty at varying times. There are two part-time professionals that work together to make sure the desk is staffed on the weekends. Volunteers are never used to staff the reference desk. In fact, Silvermoon says that they rarely get any volunteers in their department. There are few tasks that the average volunteer can do in the reference department because most functions require extensive training and reference expertise. Volunteers are used more often in circulation for processing materials and reshelving.
As well as face-to-face reference transactions, the library also answers questions on the phone and by email. The library uses QuestionPoint to handle email reference questions which accounts for about 400 transactions on a monthly basis. QuestionPoint is a collaborative service that networks librarians from around the world. This makes it possible for patrons to have their questions answered even when the library is closed—as long as it is not something specific to the local library. These questions can include research questions, reader advisory or even questions about a patron's account.
There is no chat service available to patrons, although attempts have been made in the past. After researching the possibilities of chat reference, the reference department came to the conclusion that a consortial service on a state-wide basis would function best. However, the program never got off the ground because the state librarian of Mississippi, who was trying to implement the program, felt that there wasn't enough support around the state to follow through.
The most commonly asked questions at the reference desk deal with reader's advisory. These questions are usually about fiction literature, such as recommendations of books by particular authors, about certain subjects, or how to find a specific book in the stacks. Silvermoon says that this has been a major change over the last few years. The reference staff used to receive more ready reference and research questions. It could be assumed that the prevalence of the Internet has led many patrons to turn to online resources for answers to their reference questions rather than consulting the reference librarian. However, the reference staff still provides patrons with research assistance on many topics.
Reference on the Run
The district instituted a roving reference policy about a year and a half ago after conducting research of policies implemented at other libraries. Roving reference requires staff to be proactive rather than waiting for patrons to approach the reference desk. They roam the facility at least twice per hour and ask patrons if they are in need of assistance. The reference staff is encouraged to make eye contact with patrons, which signals an invitation for service. If the patron is engrossed in what they are doing, the staff member will not approach them.
Additional Reference Services
There are several additional reference services offered at the DT branch that are beyond the parameters of the reference department. There is a large local history department and a genealogy department, which is by far the most widely-used reference service at the library. However, the reference department does offer its own services that extend beyond the typical day-to-day reference transactions. They offer one-on-one sessions with individuals who need assistance conducting in-depth research, as well as special services to businesses and nonprofit organizations in the community. The department also produces web-based subject guides and special web content that provides authoritative resources for research and assists patrons in staying informed about topical issues.

In the head of the HTML, enter the title of the article within the <title> element. For example:
```
<title>Issues at the Reference Desk</title>
```

For the meta description, enter a brief description of the article, such as:

<meta name="description" content="Raymond Dean analyzes issues confronted at a public library reference desk.">

Within the body of the page, paste the text of the article.

Feel free to use this text...

Issues at the Reference Desk
The Blernbuckle Public Library began in 1905 in a Carnegie-funded facility in downtown Blernbuckle, Mississippi. Later renamed the Blernbuckle-Poodlebean County Public Library, the system has expanded to eight branch locations with a total annual circulation of over 1.5 million items and holdings containing nearly half a million volumes.
I really want to emphasize something here. It is not easy typing paragraphs of text for practice exercise examples. This article is about a made-up library. This is not a real study.
Dana Silvermoon began working for the district in 1984 on a project to digitize the library catalog. Seven years ago, she was promoted to her current position as district reference manager. This is a profile of reference services at the Downtown Terrific (DT) branch, where Silvermoon's office is located and the branch for which she provides immediate oversight. The information in this profile was obtained during an interview with Dana Silvermoon that took place in her office on November 29, 2007.
At the Reference Desk
The reference desk at the DT branch is staffed every hour that the library is open (Monday-Friday, 8:30am-9pm and Sunday, 1pm-5pm). Although, their goal is to have a professional librarian on duty at all times, due to the small number of professionals employed, sometimes the reference desk is staffed only by paraprofessionals. However, Silvermoon emphasizes that only the most capable paraprofessionals staff the desk on their own.
During off-hours when management is not present, the reference staff is also responsible for the overall supervision of the library facility. The staffing schedule is not always consistent, with professionals on duty at varying times. There are two part-time professionals that work together to make sure the desk is staffed on the weekends. Volunteers are never used to staff the reference desk. In fact, Silvermoon says that they rarely get any volunteers in their department. There are few tasks that the average volunteer can do in the reference department because most functions require extensive training and reference expertise. Volunteers are used more often in circulation for processing materials and reshelving.
As well as face-to-face reference transactions, the library also answers questions on the phone and by email. The library uses QuestionPoint to handle email reference questions which accounts for about 400 transactions on a monthly basis. QuestionPoint is a collaborative service that networks librarians from around the world. This makes it possible for patrons to have their questions answered even when the library is closed—as long as it is not something specific to the local library. These questions can include research questions, reader advisory or even questions about a patron's account.
There is no chat service available to patrons, although attempts have been made in the past. After researching the possibilities of chat reference, the reference department came to the conclusion that a consortial service on a state-wide basis would function best. However, the program never got off the ground because the state librarian of Mississippi, who was trying to implement the program, felt that there wasn't enough support around the state to follow through.
The most commonly asked questions at the reference desk deal with reader's advisory. These questions are usually about fiction literature, such as recommendations of books by particular authors, about certain subjects, or how to find a specific book in the stacks. Silvermoon says that this has been a major change over the last few years. The reference staff used to receive more ready reference and research questions. It could be assumed that the prevalence of the Internet has led many patrons to turn to online resources for answers to their reference questions rather than consulting the reference librarian. However, the reference staff still provides patrons with research assistance on many topics.
Reference on the Run
The district instituted a roving reference policy about a year and a half ago after conducting research of policies implemented at other libraries. Roving reference requires staff to be proactive rather than waiting for patrons to approach the reference desk. They roam the facility at least twice per hour and ask patrons if they are in need of assistance. The reference staff is encouraged to make eye contact with patrons, which signals an invitation for service. If the patron is engrossed in what they are doing, the staff member will not approach them.
Additional Reference Services
There are several additional reference services offered at the DT branch that are beyond the parameters of the reference department. There is a large local history department and a genealogy department, which is by far the most widely-used reference service at the library. However, the reference department does offer its own services that extend beyond the typical day-to-day reference transactions. They offer one-on-one sessions with individuals who need assistance conducting in-depth research, as well as special services to businesses and nonprofit organizations in the community. The department also produces web-based subject guides and special web content that provides authoritative resources for research and assists patrons in staying informed about topical issues.

If the text is going way off to the right in your text editor, you need to enable Word Wrap.
To do this, go to View -> Word Wrap.
After making changes to the index.html file, you can save the file and then refresh the browser window to see your latest changes.
Use the appropriate heading element for each article heading.
Use the <h1> element for the title of the article.
Use <h2> elements for each major heading in the article.
If appropriate, add other heading elements using the proper semantic structure described in the lesson.
Use each of the following elements:
- Use the <p> element for each paragraph in the article.
- Use the <a> element to create at least one link to another web page.
  Use the title attribute to describe the link.
  And/or use the target attribute so it opens in a new tab.
- Use the <ul> or <ol> element to create a simple unordered or ordered list of least 2 items.
  Use the <li> element for each of the list items.
  It's fine if there are no lists of items already in your article. You could add text for this or just use some words from the article to make a list of items, even if it isn't logical.
  Should you put a list inside of a paragraph element?
  NO!
  A ul or ol element should not be inside of a paragraph element.
  This is not valid HTML:
  <p> <ul> <li>First item.</li> <li>Second item.</li> </ul> </p>
  Why?
  Because a list is not a paragraph :)
  But you could create a list of paragraphs, such as:
  <ul> <li><p>First item.</p></li> <li><p>Second item.</p></li> </ul>
- Use the <strong> element.
- Use the <em> element.
- And feel free to experiment with other HTML elements.
note
You can see a completed example here:
https://40px.github.io/webdev1/2/
Right-click on the page and select View Page Source to see the HTML code in the file.
Inside your "2" folder, create a folder named "images".
Make sure the folder is named in all lowercase. No capital letters!
Find an image file and place it in the "images" folder.
Embed the image using a relative URL. For example:
```
<img src="images/monkey.jpg" alt="A monkey riding an emu">
```
caution
File and folder names are case-sensitive on most web servers.
For example, monkey.jpg and Monkey.jpg are not equivalent. Those are 2 different file names.
This is also true for file extensions. monkey.jpg and monkey.JPG are not the same thing!
And don't forget about the folder names. images and Images are also not the same.
A simple solution is to always name your files and folders in all lowercase. And then make sure to use all lowercase in your URLs in the HTML.
If you use that practice, you can completely eliminate case-sensitivity issues.
Check HTML validation at https://validator.w3.org
You can choose from 3 options to validate your HTML code:
- Enter URL
- Upload file
- Copy/Paste HTML code
If any message says "Error", go back and correct the mistake(s).
See Lesson 2 for validation information.
And a Google search for the error message might be helpful.
Once you have completed the exercise and it passes validation, push your latest changes to the GitHub repository.
Make sure you are logged into your GitHub.com account in your web browser.
You can stage, commit, and push as separate steps, as we did for the first practice exercise. Or you can select Commit & Push from the dropdown as shown in the video below.
If you forget to type a commit message...
If you forget to type a message before committing, a scary file will appear :)
No worries. Simply type your commit message on a line that does not begin with a hash symbol.
Then save and close the file.
View your page on the web:
https://github_user_name_here.github.io/webdev1/2/
note
You can see a completed example here:
https://40px.github.io/webdev1/2/
Right-click on the page and select View Page Source to see the HTML code in the file.