Links and images are special because they deal with external sources. Links point users to somewhere else (another HTML page), while images pull another resource into the page.
Links are created with the "a" element, which stands for "anchor."
Attributes add meaning to the element they're attached to. In this case, the href attribute adds meaning to the anchor element by telling the anchor element where to send the user when they click the link that's wrapped in those anchor tags. Put your link into the opening anchor tag where it says href="#" (replacing the # with your link). Attributes live in the opening tag, with the attribute name first, then an =, then the "value" of the attribute in "" or '' marks. This info tells the browser the anchor element is a link, and should render it in its default blue underlined look.
The three different types of URLs we're dealing with today are absolute, relative, and root-relative links. These names refer to the value of the href attribute (what you put in to replace the #).
Absolute links are the most detailed way to refer to something on the web. They start with the scheme, usually http:// or https://, followed by the domain of the website, then the path of the target web page.
You can use absolute links to refer to pages on your own site, but hard-coding the domain name everywhere can make things tricky. Usually, absolute links are used only to direct users to different websites (anywhere outside your own site). Basically, absolute links take you outside your current web sphere and over to another website's area of influence.
Relative links point to another file on your site, from the POV of the file you're in/editing. It's implied that the scheme and domain names are the same as the current page, so the only thing you need to supply is the third part of the equation, the path. In this case, the href attribute represents the file path to the page you want to take users to from the page you're currently on (in this case, it's the file path to the extras page from the links page). Since the extras page isn't in the same folder as the links page, we need to include the misc folder in the url: the # gets replaced with misc/extras.html
Each folder and file on a path is separated by a forward slash, /. So for every file you need to go deeper to get to the linked page, you'll need to add another forward-slashed section or layer to the link.
The above works to refer to folders that are at the same level or below the current file, but how do you direct the link to pages that are in a directory above your current file? This is where you have to remember that our links are relative to the location of wherever we currently happen to be. To point the code in the right direction, we need the .. syntax. Two consecutive dots in a file path are a pointer that directs the code to the parent directory. In this case, we're telling the code, "I know extras.html is in the misc folder, go up a folder to the broader links-and-images folder and look for the links.html and images.html pages there instead."
When you need to navigate up through multiple directories, use multiple .. references, like this: ../../somewhere.html. Relative links are good like that because they let you move through entire folders without needing to update all the href's on your anchor elements, but it can get confusing when all your links start with lots of ..s. This is why relative links are best for referring to things in the same folder as your current stuff, or a standalone section of your site.
Root-Relative links are a lot like relative links, except instead of being relative to the current page, they're relative to the 'root' of the whole site. So if my site is hosted on site.com, all the root-relative URLs would be relative to site.com. Unfortunately, since this whole tutorial uses local HTML files instead of a site hosted on a server, this won't work for us here.
The only difference between root-relative links and relative links is that root-relative links start with a forward slash -- that starting / represents the root of the whole site. You can add more folders and files to the path after that starting /, just like you can with relative links.
Root-relative links are some of the most useful kinds of links: they're clear enough to avoid the potential confusion of relative links, but not as overly clear as absolute links. This means you'll be seeing a lot of them, especially in larger sites where it's hard to keep track of relative references.
Attributes alter the meaning of HTML elements, and sometimes you need to tweak more than one aspect of an element. Anchor elements, for example, also accept a "target" attribute that tells the webpage where to display the page that opens when the user clicks the link. Typically, browsers default to replacing the current page with the new one. We can use the "target" attribute to change this default and ask the browser to open the link in a new tab or window instead.The "target" attribute gets separated from the href part of the equation by a space (or a newline). See the code for the absolute link below for an example.
Target attributes has a few pre-defined values that carry special meaning for web browsers, but the most common one is _blank, used in the absolute link below. This specifies that the link should open in a new tab or new window.
Spaces are a bad thing in URLs, because they require special handling -- avoid them like the plague. If you try to name a .html file with spaces in it, the browser replaces those spaces with the special encoding meant to represent them: %20. Spaces aren't allowed in URLs, so the %20 is put in instead. Use hyphens instead of spaces when naming HTML files, and lowercase characters throughout for consistency. These naming conventions apply to all files on your site.
It's also important to note that there's a direct connection between our file/folder names, and the URL for the page they represent. THe names of the folders and files determine the names of the slugs for the web pages and are visible to the user, so you should put as much effort into naming the files as you do towards creating the content that's on or in them.
Images are defined outside the web page that renders them visible to the user. Images are included on pages with the img tag and its src attribute, which points to the image file you want to display. src is an empty element, so it doesn't need a closing tag (it is its own closing tag, basically).
The four main image formats used on the web are all designed to do different things.
By default, the img element uses the inherent dimensions of whatever image file you decide to call upon. So whatever size your image is, that's the size the browser will display.
NOTE: for pixel-based image formats, the dimensions need to be twice as big as you want the image to appear for retina displays. To get the pixel-based images down to the intended size of, say, 75X75, we can use the img element's width attribute. The width attribute sets an explicit dimension you want the image to show at. Just setting one of them will make the image scale proportionally, while defining both will stretch the image to fill those proportions rather than resizing the image proportionally. Dimension values for image sizes are automatically in pixels, and a unit should never be included when using the width attribute.
Adding an alt attribute to your images is best practices, because it defines a text alternative to the image. This impacts both search engines and users with text-only browsers, so anyone using text-to-speech software will be able to hear something. Basically, the alt attribute is the thing the screen reader will read for text-to-speech software.
An HTML entity is a special character that can't be represented as plain text in an HTML document. This usually means it's a reserved character in HTML, or your keyboard just doesn't have a key for it.
<, >, and & are called reserved characters because they aren't allowed to be inserted into an HTML document without being encoded. This is because they have meaning in HTML syntax: the less than carrot to start a tag, the greater than carrot to close a tag, and the ampersand to set off an HTML entity.
Entities always start with an ampersand and end with a semicolon. In between goes a special code that the browser reads as the actual symbol. In this case, lt is interpreted as the less than sign, gt is the greater than sign, and amp is the ampersand symbol.
If you're a typography nerd and want to shove curly quotes into your text, use an HTML entity.
This is an example about links and images.
This particular page is about links! There are three kinds of links: