Pre-Work for Web Programming Summer 2019

NOTE: you will need a flash drive to submit your pre-work. These can be purchased at any store that sells computer supplies (or even ordered online, if you allow sufficient time for delivery).

This course assumes a very basic knowledge of using your computer's operating system. You should know:

• how to view the files on your computer (i.e., File Explorer on a Windows machine, or the Finder program on Mac)
• how to create a "folder" or "directory"

Please contact the instructor (crader@mines.edu) if you have questions about this.

We will be editing files (HTML, CSS and JavaScript) using a text editor. Text editors are generally easy to use, but might feel strange for anyone completely new to computing. Prior to the workshop, it is important that you can:

• run a text editor
• open a file (including navigating to find it)
• edit the file
• save the file

If you've never used a text editor, here are some options:

Windows. Notepad is preloaded on most machines, or upgrade to another option such as Notepad++ (https://notepad-plus-plus.org/). Some tutorials on using Notepad (or google to find a video, if you prefer):

• https://www.wikihow.com/Use-Notepad
• https://www.digitalcitizen.life/beginners-guide-notepad

Mac. A simple option is TextEdit:

• https://support.apple.com/guide/textedit/welcome/mac

Learning HTML

This workshop covers quite a bit of material, so it's important for everyone to have at least a minimal knowledge of HTML at the start. One of the best ways to learn is with small snippets of code that can be easily explored. An excellent online resource for learning HTML has been developed by w3schools. The pre-work consists of:

• reading specified sections of the w3schools tutorial,
• playing with the code in the provided TryIt Editor, to ensure understanding, and
• creating one HTML page with specific attributes (specified in the bullets below). NOTE: this material will be a review for some participants, but please take a few minutes to create the page as described below anyway (it is a required by the course evaluation).

The HTML page you create will be used during the first morning of the workshop, as part of the lesson on CSS (i.e., we will add color and other styling to your page). If you are unable to get through all the requirements, a file will be provided for you to use. Please note that these requirements are all straightforward modifications of the examples provided by w3schools. There are no challenges or problem solving; you will simply copy some code from the TryIt Editor and modify to fit our assignment. An example is changing the header text to something like "Welcome to Cyndi's Page".

Specific Requirements

Introduction and Overview

Read https://www.w3schools.com/html/

Read https://www.w3schools.com/html/html_intro.asp NOTE: we will use HTML 5, no need to worry about prior versions.

Test your understanding:

• what is a tag?
• what characters is at the beginning of an end tag?

Getting started with your own file.

If you are completely new to programming, this section is critical, as you need to create one .html file and run it within a browser on your computer. This is not difficult, but it does require that you understand files and folders.

Read: https://www.w3schools.com/html/html_editors.asp

OR

https://www.wikihow.com/Run-a-HTML-File

• Part 1 - how to save your file
• Part 2 - how to run your file

The Assignment

Copy the Simple HTML Document (from https://www.w3schools.com/html/html_intro.asp), then modify the title, header and paragraph to be an "about" page for yourself.

See my completed example here. At this point, all you will have is the title and first header and paragraph. We will add more elements as you walk through the tutorial.

Your completed pre-work should have all the required elements, but the content should be your own. Feel free to add/modify as you see fit - the point is for you to apply what you're learning in the tutorial.

Take a minute to review my page. Notice that I have text in various places, such as "My favorite restaurant is:" before the link to a restaurant. All of these text items are created using the paragraph (<p>) tag. The instructions below will not specify all of these text items. You should insert paragraphs as needed for your content.

Read https://www.w3schools.com/html/html_basic.asp

• Add a link that visits some page of your choice (I linked to a favorite restaurant)
• Add an image. Hint: If you specify only a width or height, browsers will resize and keep the same width/height ratio.
• Add a button. This will go at the bottom of your page (i.e., as you insert more elements, type them in BEFORE the button tag). We will add an action for this button during the first day of the workshop.
• Add a list (I listed my favorite activities)

Read https://www.w3schools.com/html/html_elements.asp

• Be sure you understand how elements can be nested. Incorrect nesting is a common source of errors.
• Develop the habit of using lowercase for all HTML tags.

Read https://www.w3schools.com/html/html_attributes.asp

• Take a minute to view each example. Try changing just the width attribute of the img.
• Do not use the color attribute. It's better practice to use external CSS for styling. We will learn about CSS the first day of the workshop.
• Get in the habit of putting quotes around attribute values.
• Do you understand why single quotes are needed in the John "Shotgun" Nelson example?

Read https://www.w3schools.com/html/html_headings.asp

• Add at least one other heading level (I used h2 for My Favorites)
• Add a Horizontal Rule
• Add the meta charset tag to the head of your document
• Read the section "How to View HTML Source?"
• View the source for my page. This can look overwhelming at first, but it's a really good tool for debugging. It's also a great way to learn new techniques.
• Spend a couple minutes and click on some of the arrows. See how you can expand the paragraph and list elements to see the details.
• Right click on my picture and choose "Inspect Element". See how the img element is highlighted.
• We will do much more with this during the workshop, so don't worry if it's confusing… it will be easier after we’ve done it in class a few times.

Read https://www.w3schools.com/html/html_paragraphs.asp

• Make sure you understand that you cannot format text by inserting line breaks into your .html file. Run the example to see how the browser removes extra spaces as well as line breaks.
• Use the <br> tag to insert a line break somewhere in your file. (I used a line break in the paragraph just before my button).
• Insert some text using the pre tag. (I inserted a haiku with unusual spacing).

Skip or skim: https://www.w3schools.com/html/html_styles.asp

• This section describes a few CSS styles. Inline styles, as illustrated here, are typically not recommended (we'll discuss during the workshop).

Read https://www.w3schools.com/html/html_formatting.asp

• Mark some of the text on your page as strong
• Mark some text as emphasized
• Include other text styles if you'd like

Read https://www.w3schools.com/html/html_quotation_elements.asp

• These features are not used quite as much, but good to know they exist

Read https://www.w3schools.com/html/html_comments.asp

• Comments are important in any type of code. We will discuss effective commenting during the workshop.
• Do you understand how comments can be used for debugging? In the Tryit Editor, see how the image displays if you remove the comment (or end it on the same line).
• Put a comment somewhere in your code.

Read https://www.w3schools.com/html/html_colors.asp

• Bring up the Tryit Editor for Color Names
• Click on the HTML Color Names
• Play with the colors in the editor (just for fun)
• As before, we will not use inline CSS. But feel free to play with these examples in the Tryit Editor, to get some idea how color styles may be applied to different HTML elements.
• Read about RGB and Hex values. Sometimes these are more convenient than using HTML color names.
• We won't be using HSL value, saturation or lightness, but you might find this interesting.
• Run the Tryit Editor for the HSBA example. Using an alpha value to specify transparency can sometimes be useful.

Skip or skim: https://www.w3schools.com/html/html_css.asp

• We will add CSS to your "about" pages during the workshop. If you're comfortable with HTML, feel free to read and explore this prior to the workshop, as we won't have a lot of time to devote to CSS (most of the focus will be JavaScript).

Read https://www.w3schools.com/html/html_links.asp

• Local links could be useful for assignments you write, if you create web pages that access other pages stored locally. We won't use in this workshop.
• Link colors is optional. If you want to know, for example, how to make the link change color when the mouse is hovering, read this section.
• Opening a page in a new window can be a useful feature.

In your "about" page:

• edit the link tag you previously created (mine was to a restaurant) to specify target="_blank"
• Add a link (to any page of interest) to the image on your page.
• Add a tooltip (link title) to your link.

Read https://www.w3schools.com/html/html_images.asp

• It's good practice to always include alt text, so that your page is accessible by anyone using a screen reader.
• It's often useful to place images in a subdirectory named images. You may want to place your image file in a subdirectory and update your img tag.
• Skip the image float, image map and picture sections (advanced features)

Skip: https://www.w3schools.com/html/html_tables.asp

• Since our focus is JavaScript, we won't be using tables. These are a common element of many websites, though, so feel free to read on your own.

Read https://www.w3schools.com/html/html_lists.asp

• Edit the list in your "about" page to have a different list-style-type
• Add a second h2 to your page (I added "Get Organized")
• Add an ordered list. Feel free to use letters, roman numerals, etc. as you desire.
• Add sub-elements to your ordered list so that it is "nested" (e.g., my "Things to do" has A/B/C elements, with sub-elements within each of those).

Description lists are not as common, and probably not as relevant for a high school audience.

Submitting your Pre-Work - IMPORTANT

To receive credit for your pre-work, and so that it is accessible during the workshop, please copy all your files (one .html and at least one image file) onto a flash drive. Your work will be reviewed briefly during the first day of the workshop.