Basic HTML & CSS

Overview

Students will learn HTML and CSS in order to make a basic web site. The knowledge for creating a web page can come from several sources, including prior experience.

Purpose

The world wide web is built on a series of individual pages written in HTML. For students to understand the web.

Objectives

Students will be able to:

• Write the code for a basic web page.
• Create a series of pages that are linked together to create a site.

Preparation

Links

• For the Teacher

• For the Students

  • Code Academy: https://www.codecademy.com/
  • Free Code Camp: https://www.freecodecamp.org/
  • W3 Schools: https://www.w3schools.com/html/

Vocabulary

Teaching Guide

Getting Started

• Tim Berners-Lee (video)
  • https://www.ted.com/talks/tim_berners_lee_a_magna_carta_for_the_web

Activity:

• Learn how to make a web page.
• Use one of the tutorial sites to build sample web sites.

Activity:

• Use software like Notepad++ or similar to create a local web page on your computer.

Activity:

Make a web site:

• Build a website for yourself using the methods and techniques you’ve learned as part of the HTML tutorials you’ve done. Your site should use aspects of HTML, CSS, Bootstrap, Java Script and other tools you’ve learned.

Pages you need to build:

• Index.html – This will be the main page and should include links to your other pages. Add information about yourself to make the page have some content.

• Academic Resume – This page should include classes you’ve taken that would make you a prime cyber security hire, academic honors, service projects or other things you’ve done personally or academically to distinguish yourself from the unwashed masses also vying for the same job.

• Cyber Security Tips Page – Pick one topic and dive deep or pick several topics and give a quick “best practices”. For example, you might talk about passwords and the importance of using different passwords site-to-site, creating complex passwords that will not be guessed, how to use password managers to organize all your passwords, etc. Alternatively, you might talk a little about passwords, network security, physical security and how to stay “generally safe”.

• Contact Page – Use web forms to allow people to contact you. This way you’re not divulging your email address to potential “bots” that search the internet for email address to add to spam lists. You’ll need form elements to allow people to post a subject, their e-mail, and a message. You’ll also want buttons for submitting and clearing the fields

Since we have not done much with forms yet, use web resources to find examples you can copy from. You may not be able to actually send the info yet but should have the shell setup.

Wrap-up

Discussion:

• How does HTML get read by a web browser?
• Why do pages look slightly different in different web browsers (Firefox, Chrome, Edge, etc.)

Assessment Questions

Extended Learning

• SSH Explained - Computerphile - https://www.youtube.com/watch?v=ORcvSkgdA58
• Podcast IRL: Online Life is Real Life
  • https://irlpodcast.org/

    Standards Alignment

License

Cyber Security Curriculum is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.