CCC-Web Worksheet

Uni of Portsmouth Logo

HTML

This is a worksheet.
  • Worksheets are designed for you to work through prior to the next face-to-face session.
  • Each task helps you gain experience.
  • When you have questions about the tasks ask on Discord in #ccc-web.
  • Bring your work to the next workshop to discuss.
  • Note that tasks 4 and 5 are are key tasks that you should be discussing the results of next week with others in the workshop.
  • Be prepared to talk about what you learned, what you thought you knew, and what was reinforced through this process.

Task 0: Keep a log of what you do

  1. Create a document whatever app you prefer to keep notes in.
  2. Give it the title Discovery Log.
  3. Record what you do / learn / observe in each task, paying special attention to anything unexpected - the process of reflecting upon your work and recording it both helps you to remember it and improves your understanding by forcing you to be clear about exactly what you have done.
  4. Continue to record the things you discover (or problems you encounter) whilst in lectures, when completing worksheets, or when undertaking self-directed study.
  5. Keeping a log will slow your progress down. Don't let this put you off: by the end of the module your log will be an excellent personalised revision aid.

Task 1: Your Editor

You can use whichever tools you wish when creating web pages. There are many editors out there, and you should start to get an idea of some of them. You may already have a favourite, but there are new tools coming out weekly, so always be curious about whether you can be more efficient or efective with another tool.

Task 2: Create a Web Page

  1. Use a text/code editor to create a file called index.html.
  2. Copy this content changing the title and h1 elements to contain your name.
  3. Change the content of the p (paragraph) element to contain whatever you like. For example, if Darth Vader were to take this module he might write: <!doctype html> <title>Darth Vader</title> <h1>Darth Vader</h1> <p>Fear will keep the local systems in line.</p>

Task 3: View your page in a browser

  1. Using a browser of your choice, load your page.
  2. Does it look how you expected? If not, can you work out why not? If you can't, the workshop sessions are here to help!

Task 4: Create your own web page

  1. Using the template above as an example, create a new page called modules.html
  2. It should include a heading and a few paragraphs describing each of the modules on your course.
  3. Investigate which HTML elements you can use to correctly markup such information - there is no perfect answer, so discuss your approach with others.
  4. When you see cool things other people are doing, copy their ideas (this is one of the few times when plagiarism is ok).

Task 5: Read and Experiment