Build Your First Web Page

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

1. Create a folder called web-tutorial on your computer or a flash drive. This is where you will save the two files and images for this tutorial. Notice that there are NO spaces NOR capital letters in the folder name.

2. Open a text editor and save a new page as index.html into your web-tutorial folder. Notice that there are NO spaces NOR capitals in the file name. This will be your "home" page. Always name your "home" page index.html and NEVER anything else.

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 Goes Here</title>
</head>
<body>
  
</body>
</html>

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

index.html content

Security and Privacy

In our digital age computer security and information privacy are hugely 
important issues. Most people don't take them as seriously as the should. Here 
is some information that we should all have.

Computer Security

Computer security relates to any interaction we have with an electronic device 
such as a computer or a smart phone. There are five major areas that must be 
considered, hardware, software, data, people, and procedures. The 
interconnectedness of our digital devices makes security more important than 
ever.

Here are a few basic rules to follow. Update your software regularly. Software 
is updated for many reasons, one of which is for security patches. All computers 
should have some type of login. At the minimum have a pin number to access a 
smart phone and have a username and password required to log in to your 
computer. Passwords should include lower and upper case letters, numbers, and 
other characters, and be at least 8 characters long. Don't give out your 
password and be vary cautious about reusing them for different accounts. 
We often use computers that are not our own. Always log out of any service that 
you log in to. Just closing a browser is often not sufficient. 
You should backup all important data and store it in a safe location 
other than where you store you computer. 

You should notice that most web sites you exchange information with do so 
through a secure protocol, https. You will either see https at the beginning of 
the URL or see a lock icon by the URL. Never exchange sensitive information 
through a web page that is not secured. The https protocol ensures that all 
traffic to and from your computer is encrypted.

Next: Information Privacy

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

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, save them, then refreshing the page to see the changes, change, save, 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 and view your pages now.

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..

General Outline

  1. You 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 or capital letters.
  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.
  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.