Part 2: Edit the content of your page

Contents of this part

This second chapter supports you as you edit your resumé.

• You’ll first learn about common HTML elements so you understand the function of each of these building blocks and can add, remove or change parts of your résumé.
• Your browser’s developer tools can help you fix errors or draw inspiration from other websites.
• We are all humans, and typos happen when writing HTML code. Learn how to recognize, find and fix them by keeping your HTML code clean and a good folder structure.
• You then learn how to use hyperlinks to direct your visitors to other pages or sites and to show them images.
• Your images will be hosted in your repository alongside your HTML code. The final section teaches you the best practices for resizing and delivering images.

Previously in this course…

In part 1.5, you’ve already encountered quite a few elements:

You already know that some elements need an opening and a closing tag, for example a paragraph starts with <p> and ends with </p>.

Other elements are self-closing and cannot contain anything. Within the list above, only <meta> and <br> are self-closing, they do not need an end tag.

“Block” elements

This is a first list of very common HTML elements (the underlined parts explain what the tag name stands for):

• Heading levels 1 to 6: <h1>, <h2>, <h3>, <h4>, <h5> and <h6>
• Lists, which exist in two flavours:
  1. unordered lists, a.k.a. bullet points, with the <ul> element
  2. ordered (or numbered) ones, with <ol>
• Within either <ul> or <ol>, each list item uses the <li> tag.
• <hr> is an horizontal rule. It is self-closing
• The most used HTML element on the web is <div>, which is used to create logical divisions within content. <div> is often used in combination with CSS styles (which you’ll learn about in the next part) to group elements visually. This page alone has such div elements.

All these tags, as well as <p> and <br>, have in common that opening them creates a new “block”. This means that you break the flow of the text and move to a new line. This behaviour will become clearer when you compare these with inline tags.

“Inline” elements

Here is a second list of elements:

• <em>, standing for emphasis and <i>, which both turn your text in italics.
• <b>, like <strong>, makes your text bold.
• <u> for underline.
• <a>, meaning anchor, which is used in hyperlinks with the href (hypertext reference) attribute.
• <img>, the image tag, which needs a src (source) attribute to link it to an image file, and an alt attribute to provide a textual alternative. <img> is self-closing.
• <span> is also a common, generic way of identifying a span of text

The biggest difference with the first list of tags is that inline ones do not interrupt the flow of text but rather make it continue on the same line.

“Semantic” elements

With over 100 elements, you’ve already noticed that some of them are very similar and what they do. For example:

• <b> and <strong> look the same
• <i> and <em> also have an identical effect
• Alongside <div>, there are several tags that can be used to create a division in the page, e.g. <header>, <main>, <article>, etc.

The difference between these similar tags is called semantics. In other words, each of these tags ascribes a meaning, or a function, to its content.

The rationale behind semantics is that the structure of your HTML page should reflect the structure of your content independently of how your page looks in the browser. This is important for:

• Accessibility purposes: Some people rely on screen reading software to be able to access the web. This software will in turn rely on the structure of the page to identify key elements and say out loud what they are.
• Search Engine Optimization (SEO): Every search engine ascribes a ranking to determine how relevant a page is with regards to search keywords. This ranking is partly based on whether a keyword appears in relevant parts (e.g. headings). Search engines also rely on the page structure to identify important information like business addresses and opening hours.
• Collaboration: Well-structured code that clearly signposts what each part of the page means will be easier for other web developers to read and to work on.

Some tags are considered to be generic, which means that they have no specific structural meaning and are generally used purely for layout and styling purposes. This is the case for <div> and <span>

Other elements

We’re still far from the 100+ elements we mentioned at the start. Some elements that you may use for the purpose of your assignment include:

• Media elements, such as <audio> and <video> can be used to embed media.
• Tables like the one above (with semantic elements) can be made using the following tags: <table>, <tr> (table row) and <td> (table data). Check the Mozilla Developer Network for a tutorial on tables.
• Forms are found everywhere a website asks visitors for data: login screens, contact forms, shopping carts. Check W3Schools for a tutorial on forms.

Some of these elements are present in this page as well as in other templates for this course. Don’t hesitate to check the source code!

Where to find Developer Tools?

Check the official documentation for your browser. Keyboard shortcuts vary depending on the operating system.

Another way to access the Developer Tools is to choose an element within your page, then Right-Click on it and choose “Inspect” in the contextual menu that appears. Why not try it here?CONGRATULATIONS! You've found hidden content!

Try it out!

Using the Elements tag in Developer Tools, try answering the following questions:

1. Which heading level is used just above (<h1>, <h2>… <h6>)?
2. Which class(es) does this heading have?
3. Which element does it have as a parent?
4. How deep/far is it in the whole document’s tree?

Using the Sources tab, check the following:

1. How many additional resources are loaded alongside this page?
2. Which of these are images?
3. Which of these are loaded from the same website (buas-media-interactive.github.io)?
4. From which other websites are resources loaded? These are called CDNs (Content Delivery Networks).

File and folder good practices

In order to avoid issues, the first thing to do is to follow good practices when naming and structuring files and folders. There are multiple reasons to do so:

• If all workers in the same company, or all students in the same course follow the same naming conventions, it becomes easier to collaborate. In industry, companies may have their own conventions which might be different from the ones below.
• Different operating systems letter case (i.e. capital vs. lowercase), accents and other special characters differently, so your files might not work identically on a Mac, on a PC or when you upload it to GitHub
• One very common mistake is to work on the wrong file. This can be avoided in part by having a clear and sensible folder structure.
• This will also be very convenient when, as described in the next section, you start adding images and making links to other pages within your folder.

In this course, we require that you stick to the following conventions:

• Your landing page must be in the root folder of your website and named index.html.
• All other HTML pages are in the same folder.
• All CSS style files are within a folder named css.
• All image files are within a folder named images.
• All file names are lowercase only. This means that you might have to rename external images before adding them to your website.
• No spaces, no accents. The only special characters you can use are hyphen (-) and underscore (_).

Common HTML mistakes

These are errors that everyone makes, including experienced web developers. Being able to identify and correct mistakes is one of the hardest skills in HTML development.

• Missing closing tags. For example, you start a link with <a href="…"> but then you forget to close it and the rest of your page becomes one giant link.
• Mismatch between an opening tag and a closing tag: For example, you start with <h1> and you finish with </h2>. This often happens when you try to substitute an element for another but you don’t do it completely.
• Typos or incorrect tag names. <h1> and <p> exist, but not <p1>, this is considered an error.
• Errors with attributes: When writing an attribute, such the source of an image or a class on an element (e.g. <p class="my-class">), spaces, quotation marks and/or the equal sign are missing.

Many errors won’t be visible because your browser will try to fix them — note that this is specific to HTML, other languages are not error-tolerant and will break if there is an error.

However, computers rely on binary logic and cannot guess your intent if your code is wrong. In other words, code that doesn’t follow standards may give unpredictable results.

Preventing errors: Indentation

Indentation is a very simple good practice that helps you keep track of the structure of your code and avoid errors.

To use indentation, make sure you add spaces or tabs at the start of a line every time you go down one level in the structure of the tree, and remove them when you go up one level.

Indentation has no impact on the output of your code: your page will look exactly the same in the browser if you have no spaces at the start of a line.

When do you need this?

There are several cases when you need to create links between your page and other resources. In each of these cases, you need to put the address of the resource in the form of an URL or path.

• When creating a clickable hyperlink, to navigate from a page to another page. In that case, you use an a tag with the href attribute: <a href="URL or path">
• When displaying an image on a page, use an img tag with the src attribute: <img src="URL or path">
• This also works when embedding a video or an audio file (see example in part 2.1): <audio src="URL or path"></audio>, <video src="URL or path"></video>
• When you need to add CSS styles to your page (this is what you’ll learn in part 3), you need to create a link between your page and the CSS file using <link rel="stylesheet" href="URL or path">
• In this course’s templates, you will also find the script tag, used to load JavaScript files that add interactive behaviour: <script src="URL or path"></script>

Absolute URLs

An absolute URL refers to the precise location of a resource online. It starts with http:// or https:// (known as the “protocol”) followed by the name of the web server (e.g. www.buas.nl).

Pros of absolute URLs:

• They are the same regardless of which page they are used on. The links above will work just as well here or on your own website.
• You can get them easily by copying URLs from your browser and pasting them in Dreamweaver.

Cons of absolute URLs:

• If you are not in control of the destination of your link, it may stop working someday.
• Not suitable for internal links

Use absolute URLs when: linking to an external resource (page or file).

Determining relative paths

A relative path is the path from the HTML page you are currently editing, also known as the source, to the resource you want to point to. If this is a link, the destination is another HTML page. It this is an image, the destination is the image file.

Relative path rules

The starting point of the path is always the folder containing the source file. Think of what you would have to do to navigate to the destination. Do you need to enter another folder? Do you need to go up one level?

• If the source and the destination are in the same folder at the same level, just write the name of the destination file, e.g. destination.html
• If the destination is in a subfolder in relation from source same folder at the same level, type in the name of the subfolder, followed by a slash (/), followed by the name of the destination file, e.g. subfolder/destination.html
• If the destination is in a folder at a level above the source, type two full stops (..) followed by a slash (/) to move up one level, e.g. ../destination.html
• You can combine these rules, e.g. ../folder/subfolder/destination.html

Relative paths with Dreamweaver

Dreamweaver has a browse option to let you pick an image file, or the destination of a hyperlink. When possible, Dreamweaver will determine the relative path for you.

This doesn’t work if:

• You’re working on an HTML file that has never been saved and shows as “Untitled” (because Dreamweaver doesn”t know where the file is).
• Your image files are too far away from your HTML file, e.g. if they are still in your Downloads folder. You need to keep everything within the same project/website folder.

IMPORTANT: If Dreamweaver creates a path that starts with file:///, it will not work when published online via GitHub pages. For example, file:///C:/Users/velt.r/Documents/HTML/prj4-guide/ is where I keep this file on my laptop, and won’t work from anywhere else.

Why use images?

Our brains’ attention is attracted by visual content, in particular:

• Pictures of human and animal faces, especially when they’re looking at you.
• Bright colours and moving images.
• Images displaying food, creating a sense of danger, or generating sexual arousal.

Attracting one’s attention is what you want to do with your audience, therefore images are essential for web design.

File formats

The file format you’ll use depends on the type of image you have.

JPEG (Joint Photography Expert Group)

• JPEG is the most appropriate format for photos
• It uses a “lossy” compression algorithm that is very efficient at making photos smaller.
• The “lossy” compression will degrade the quality of your image, and this will be especially visible on geometric shapes.
• It shouldn“t be used for images that contain logos, infographics, gradients and text.

SVG (Scalable Vector Graphics)

• SVG is a vector format, therefore the quality of an image is not dependent on its dimensions.
• SVG files can be exported directly from Adobe Illustrator.
• SVG can be used for logos, illustrations and infographics.
• However, it doesn’t work very consistently with text.

PNG (Portable Network Graphics)

• PNG is a format that uses lossless compression: images retain their original quality.
• PNG is very performant can be used for logos, illustrations, geometric shapes, text and infographics.
• Use PNG also when you have mixed content that doesn’t necessarily work well with SVG or JPEG.
• The PNG compression is not very efficient with photos.

Check images before publishing

Please check the file size of all your images before publishing! Note that there is no strict guideline on how big an image should be, because it depends on the whole page.

For example, you could have 2 large images of 500KB each, or 50 small images of 20KB each, and reach a total size of 1 megabyte, which is a reasonable total size.

I have developed an image checker that you can use to check the properties of your image files before publishing them.