Build Your Second Web page

Here is what you do to get started with a new web page.

1. You already have a folder to save this new file into, web-tutorial.

2. Open a text editor and save a new page as privacy.html into your web-tutorial folder. Notice that there are NO spaces NOR capitals in the file name.

3. Copy and paste the html template here into your new file and save it again.

HTML Template Links to an external site.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Page Title</title>
</head>
<body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
</body>
</html>

4a. Copy the 7 titles and paragraphs into your page index.html between the body tags.

privacy.html

Information Privacy

Privacy relates to how data concerning you is used and shared. It is a good 
idea to read the privacy policies of organizations that you interact with on 
the Internet, from email providers and social media sites to banking and 
medical sites.

Most browsers have a privacy mode. This restricts websites from saving cookies, 
getting information about you from your browser, and eliminates the browsing history 
and any cached files. Although you often want some of this history and 
exchange, there are times when this privacy is important.

For more information got to https://en.wikipedia.org/wiki/Information_privacy

4b. Next we edit this content by "marking it up" with HTML.

For the privacy.html page

You should have tested your pages and reviewed them to make sure you made all the edits above.

Testing Web Pages

If any < or > or <p> or </p> or " is out of place, then your content will not display correctly. Because of this we must test out pages. 

You must view your web pages in a web browser on your computer as you design them. To do so, open the folder on your computer that holds your files. Find the page you want to open (e.g. index.html and right-click it and choose "Open with"; then choose a browser (for this class, please use Chrome or Firefox to view your pages). Your page should open in a new tab in the browser you chose.

If you make any changes to your page, you will need to refresh the browser page (hit F5 or click the refresh button in the toolbar) to see your changes. Use a cycle of making changes to your markup in the text editor, then refreshing the page to see the changes, change, refresh, etc. to design your pages.

5. Test your page now.

Publishing pages

Once you've finished designing your pages, you can publish them on the web so they can be viewed by others. There are many ways to publish web pages to the internet.

This term we will publish pages through our WordPress sites with the WP File Manager. To publish your folder there, log in to WordPress Links to an external site. then click the "WP File Manager" link in your dashboard. You can upload a folder from you computer by dragging and dropping it into the WordPress File Manager window.

Any folders that you upload there will be publicly available at https://math.bluecc.edu/wordpress/user_data/FirstLast/.

Note: Make sure you test the link to your folder before you submit any assignments. Check that all pages and images load correctly and that your links work. If images or links are broken, check your HTML to make sure you're using correct image filenames in the image src attribute; also check that the links between your pages are relative and not absolute.

6. Publish your folder now. This time when you drag your web-tutorial folder into your WP File Manager, you will overwrite the folder that your previously uploaded. You will be asked if you want to overwrite the files index.html and securelock.png. This is usually a good idea.

WP File Manager Tutorial Video Links to an external site.

Some sample pages Links to an external site. and sample pages with blocks Links to an external site..

Outline

  1. You should always use a dedicated folder on your flash drive or hard drive for any web project you work on. The folder name should not contain spaces. For this tutorial, I have a folder on my flash drive called web-tutorial.
  2. In a text editor, save a new, empty file with an appropriate name into the folder, e.g., index.html.
    A web folder will usually have a "home page" named index.html.
  3. Add the basic tags for an html documents, like the template below.
  4. Save again and add your content.
  5. Save often and test your edits by viewing in a browser.
  6. Upload your folder to your web server.