Web Development – Step 1: HTML

Web Development – Step 1: HTML

Comments 0 Comment

The first thing a web developer needs to learn is HTML. There are many HTML tutorials on the web. The best one I found is from w3schools  https://www.w3schools.com/html/.

A few things to note…

  • Make sure you click on the ‘Try it Yourself’ and see for yourself how the tag will display on the web page. Things may feel disjoined at first but things will come together once you start creating web pages.
  • Remember what the tag stands for. For example, <h1> tag is for header 1. <p> tag is paragraph. This will guide you what tag to use where. Semantics (https://www.w3schools.com/html/html5_semantic_elements.asp) is good for SEO and improve accessibility.
  • Note whether the tag display in same line or in a different line. You’ll learn more about this in CSS.
  • Take quizzes (https://www.w3schools.com/html/html_quiz.asp) and do exercises (https://www.w3schools.com/html/html_exercises.asp) to test your knowledge.
  • All html pages follow the same DOCTYPE, html, head, body structure. Read the Basic HTML Structure section from http://bethsoderberg.com/blog/html-basics-elements-tags-and-document-structure/ on how the HTML page structure looks and what can be included in head section. Always include <title> and <meta charset=”UTF-8″> in <head> section. Note: meta is self closing tag.
  • File naming conventions:
    • Do not use spaces. Use dash(-) or underscore(_) instead.
    • Do not use special characters. Only use alpha numeric.
    • Only use lowercase letters.
    • Use descriptive name.

If you have questions about HTML, sign up and add comment to this post. I’ll post answer comment as soon as I can.

 

Assignment:

Do the following assignment once you’re confident about your skill with HTML. The purpose of this assignment is to learn to create HTML pages and correctly using HTML tags.

Convert the PDF article http://www.accaglobal.com/content/dam/acca/global/business-finance/airport-cafe.pdf into HTML pages.

Create a directory for this assignment and do all your work in that directory.

Start from the content page (page 2). You must name this page index.html. (Note. Landing page/home page of website are almost always named index.[extension]. The extension can be html or php or any other server side language.

Each of the section must be created as separate HTML page. For example, the first section is Executive Summary. You’ll create an HTML page for executive summary and link to it from the content page (index.html).

There are 8 sections + content page. So you’ll be creating 9 HTML pages. The content page will link to all the other pages.

The HTML pages and PDF file should have similar display format. For example, bulleted list in PDF file should come out as bulleted list in HTML. No need to follow the exact line break. Only follow the paragraph display.

Validate your HTML pages @ https://validator.w3.org/ and fix all errors and warnings you encounter.

Upload your whole assignment work directory to hosting server that I provided.

Test your work on hosting server.

Sent me each page as you’re done with it and uploaded it to server. I’ll take a look and give you feedbacks. This way you can incorporate my feedback into your development of the next page.

 

 

Leave a Reply