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
Study
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.
HTML Style Guide by Mark Otto, one of the creators of Bootstrap.
Add Some!