HTML Basics (v1)

Introduction

Most of this should be review since you’ve already completed the Web Development 101 HTML/CSS Lesson (Right??) but it’s a good idea to make sure you’ve got it covered so you make sure you’re starting from a strong base. It’s impossible to separate HTML from CSS, so there will be some overlap before we get heavily into the CSS in later sections.

Learning Objectives

  • How is an HTML5 document structured?
  • What are elements/tags?
  • What are element attributes?
  • How do you link to external files?
  • When should you use IDs vs Classes?
  • What attributes are required by image and links for them to be effective and accessible?
  • Where should your CSS live?

An important note about absolute and relative paths

Let’s say that you have the following structure on your development server:

/index.html
/images/protocol.png

The following image tag is placed in the web page:

<img src="/images/protocol.png" alt="protocol layer image">

The above absolute path will work, and the image will be displayed when the site is being served from a root folder, for example: http://127.0.0.1/index.html

The image link will be converted to:

  • Domain + Absolute Path;
    • Domain: http://127.0.0.1
    • Absolute Path: /images/protocol.png

Result: http://127.0.0.1/images/protocol.png

Where things can go wrong

If the website is served from a sub folder (let’s say we move the index.html and the images/ folder in a new folder name client) this absolute path will not work and the image will not be displayed.

For example if the website is served from the sub folder client:

/client/index.html
/client/images/protocol.png

The path /images/protocol.png will once again be loaded this way:

  • Domain + Absolute Path;
    • Domain: http://127.0.0.1
    • Absolute Path: /images/protocol.png

Since there is no images folder in the root web folder, the image will not be loaded, as the file will not be found.

The correct URL to load the image, would be: http://127.0.0.1/client/images/protocol.png

Solution?

In this case, you can use a relative path instead:

<img src="images/protocol.png" alt="protocol layer image">

The image link will be converted to:

  • Domain + Current Path + Relative Path;
    • Domain: http://127.0.0.1
    • Current Path: /client/
    • Relative Path: images/protocol.png

Result: http://12.0.0.1/client/images/protocol.png

Keep in mind that folder and file names are case sensitive in URLs! Domain names are not.

References and resources

Absolute vs Relative Paths

Study

  1. Read Shay Howe’s Introduction to Terminology & Syntax

  2. Read Shay Howe on the HTML Basics

  3. Read Shay Howe on Best Practices

  4. Read Absolute vs Relative Path – Which Should You Be Using?

Additional Resources

This section contains helpful links to other content. It isn’t required, so consider it supplemental for if you need to dive deeper into something.

LOOKING FOR HELP?

When looking for help, try doing so in the following order:

  • Did you try everything you could?
  • Did you read the documentation?
  • Did you Google for it?
  • Did you post your question on Slack/Forum?
  • Did you ask your fellow students for help?
  • Did you ask your Mentors for help?
  • Did you leave a comment on the comments section of this page?
  • Did you ask your Instructor for help?
    • Did you arrange and appointment with your instructor using Calendly? Visit this URL and set up an appointment: https://calendly.com/kostasx
    • Is it urgent? Did you try reaching him on Slack

UPDATED: 16.03.2021

CONTRIBUTORS