Mind Diary

Links and Images

Links and images are fundamentally different from other HTML elements in that they deal with external resources. Links point the user to a different HTML document, and images pull another resource into the page.

To use links and images, we need to learn about another component of the HTML syntax: attributes.

When we add links and images to a website we actually deal with file and folder organization. As we start working with multiple files, we discover the importance of being an organized web developer.

The Anchor Tag:

Links are created using the <a> element, which stands for "anchor". It works like all other HTML elements: when we wrap some text in <a> tags, they alter the meaning of that content.

If we would loading a web page containing a link in a web browser, we will notice that the <a> element does not look like a link at all:
On its own, the <a> element does not do much of anything.

Attributes:

As tags add meaning to their content, an HTML "attribute" also adds meaning to the element it is attached to. But, take care: different elements allow different attributes.
For details about which elements accept which attributes, refer to MDN.

Attributes live inside opening tags. First comes the attribute name, then anequal sign, then the "value" of that attribute, either in single or in double quotation marks.
This syntax distinguishes attributes from content (which goes between tags).

Links:

In order to turn an <a> element into a link we add the href attribute to its opening tag, like this:

The information provided by (i.e. the value of) the href attribute determines where the user goes when he or she clicks an <a> element.

Absolute, Relative and Root‐Relative Links:

How is a website structured ?

A website is just a collection of HTML files organized into folders.

To refer to those files from inside of another file, the Internet uses three types of "uniform resource locators" (URLs): absolute, relative and root‐relative.

Absolute, relative, and root‐relative links refer to the value of the href attribute.

Absolute Links:

Absolute links are the most detailed way to refer to a web resource.
They start with the "scheme" (typically http:// or https://), followed by the domain name of the website, then the path of the target web page.

Although it is possible to use absolute links to refer to pages in your own website, it is usually better to reserve absolute links only for directing users to a different website.

Relative Links:

A relative link is used to direct the user from a web page to another one within the same website.
Since the user is directed toward a web page that exists within the same website, it is implied that both the "scheme" and the "domain name" are the same for all the files (i.e. pages) the website contains; thus, the value of the href attribute of that relative link will be only the path, like this:

The value of the href attribute represents just the path to the "extras.html" file which, in our case, is located inside a folder called "misc".

Root‐Relative Links:

"Root–relative" links are similar to the relative ones, but instead of being relative to the current page, they are relative to the "root" of the entire website.

In a website hosted on a web server the only difference between a root–relative link and a relative one is that the former starts with an initial forward slash which represents the root of your site.
You can add more folders and files to the path after that initial slash, just like relative links.

[!] The following path will work correctly no matter where the current page is located:

Root–relative links are some of the most useful kinds of links. They are explicit enough to avoid the potential confusion of relative links.

Link Targets:

When a user clicks a link, most web browsers, by default, replace the current page with that new one.

However, as attributes alter the meaning of HTML elements, we can use the target attribute in order to modify such default behaviour, i.e. to ask the web browser to open the link in a new window/tab.

Thus, by adding the target attribute to the opening tag of an <a> element we determine where to display the page when the user clicks a link.

Naming Conventions:

None of the files or folders should have spaces in their names. That is on purpose. Spaces in URLs require special handling and should be avoided at all costs.

If you would create an HTML file and leave spaces in its name, for example, like this:
"this is my website.html".
You will get the following result in the address bar when you try to open it in a web browser.

Spaces are not allowed in URLs, and that is the special encoding used to represent them — all spaces have been replaced with %20, as shown above.

Instead of a space:

• Always use a hyphen.
• Use all lowercase characters for consistency.

These naming conventions do not apply only to HTML files. CSS files, JavaScript files, and images should also avoid spaces and have consistent capitalization.

Notice that:
the names of our folders and files are visible to the user (i.e. in the web browser's address bar), which means you should put in as much effort into naming your files as you put into creating the content they contain.

Images:

Unlike all other HTML elements, images are "external resources" to which we refer, from within an HTML document, by using either "absolute", "relative" or "root–relative" URLs.

In a web page images are included using the <img/> tag and its src attribute, which points to the image file we want to display.
Like other elements such as <br/> and <hr/>, the <img/> is also an empty element.

Image Formats:

There are four main image formats in use on the web. All of them were designed to do different things, i.e. there is an ideal use for each of these image formats.

JPG Images:

JPG images are designed for handling large colour palettes without extremely increasing file size. This makes them great for photos and images with lots of gradients in them.
On the other hand, JPGs do not allow for transparent pixels !

GIF Images:

GIFs are the go–to option for simple animations, but the trade–off is that they are somewhat limited in terms of color palette — never use them for photos.

PNG Images:

PNGs are great for anything that is not a photo or animated [!]

For photos, a PNG file of the same quality (as perceived by the human eye) would generally be bigger than an equivalent JPG file.

However, they do deal with opacity just fine, and they have no color palette limitations. This makes them an excellent fit for icons, technical diagrams, logos, etc.

SVG Images:

Unlike the pixel–based image formats above, SVG is a vector–based graphics format, meaning it can scale up or down to any dimension without loss of quality. This property makes SVG images a wonderful tool for responsive design.

SVGs are good for pretty much all the same use cases as PNGs, and you should use them whenever you can.

Image Dimensions:

By default, the <img> element uses the inherit dimensions of its image file.

[!] Pixel–based image formats need to be twice as big as you want them to appear on retina displays.

In order to set the width of an image we use the width attribute, like this:

There is a corresponding height attribute, too.
Setting only one of these two attributes will cause the image to scale proportionally, while defining both will stretch the image.

Dimension values are specified in pixels, and you should never include a unit (e.g., width="150px" would be incorrect).

While the width and height attributes can be useful, it is usually better to set image dimensions with CSS so you can alter them with media queries.

Text Alternatives:

Adding alt attributes to your <img> elements is a best practice. It defines a "text alternative" to the image being displayed.

Adding such "descriptive" alt attributes has an impact on both search engines and users with text–only web browsers (e.g., people that use text–to–speech software due to vision impairment).

More HTML Attributes:

Every web page you create should define the language it is written in and its character set.

The Document Language:

The default language of a web page is defined by the lang attribute on the top–level <html> element.
Thus, because our document is in English, we use the "en" country code as the value of the lang attribute like this:

Character Sets:

A "character set" is like a kind of a digital alphabet for your web browser. It only affects how the letters themselves are rendered, not the language of the content.

If you happen to view some weird stuff in your web browser, it is because the default character set for most browsers does not accommodate these "special" characters.

In order to fix this, we need to specify a "UTF–8" character encoding by adding a <meta> element with a charset attribute to the <head> element of our HTML document, like this:

UTF–8 is sort of like a universal alphabet for the Internet. Every web page you create should have this previous line in its <head> element.

HTML Entities:

An "HTML entity" is a special character that cannot be represented as a plain text in an HTML document. This typically either means it is a reserved character in HTML or you do not have a key on your keyboard for it.

Reserved Characters:

Because they mean something in the HTML syntax, some characters, such as "<" (begins a new tag), ">" (ends a tag) and "&" (sets off an HTML entity), are not allowed to be inserted into an HTML document without being encoded. They are called "reserved characters".

These "reserved characters" or HTML "entities" begin with an ampersand (&) and end with a semicolon (;).
In between, we put a special code which the web browser will interpret as a "symbol".

Thus, for example, a web browser interprets the "lt" and "gt" in < and > as less–than, greater–than symbols, respectively.

Here is a ridiculously very long list of such HTML entities.

Quotes:

If you care about typography, then curly quotes will be some of the most common HTML entities you would use. Unlike straight quotes, these curly quote entities should hug the text.

There are four different kinds of curly quotes (opening and closing single and double quotes):

• “
• ”
• ‘
• ’

These special characters can be used in place of ' and " straight quotes, like this:

Summary:

As a website is basically just a number of HTML, image, and CSS files linked together, it should be clear that maintaining a well–organized file system is a critical aspect of creating a website. The ability to work with multiple files and link them to each other in intelligent ways is quite important.