DTC 355

Links

Absolute vs. relative links

Links are an important part of any website. Hyperlinking is at the core of the world wide web.

Links are written using the <a> tag, or anchor tag.

Format: <a href="link path">I am a link!</a>

The href is an attribute that is applied to the anchor tag that tells the browser where to direct the link. There are two types of file path—an absolute path and a relative path.

An absolute path, or absolute URL, is a complete location address, such as "www.dtc-wsuv.org/hslocum17/dtc-355". It can link to anywhere, inluding to an address outside of your website directory.

A relative path, or relative URL, refers to a file that occurs in the same directory as your website. It is a location relative to where you are calling it from. An example of a relative URL might be "img/myimage.png".

When linking to other websites, like when we're citing sources, we would need to use an absolute URL because we are linking to a file that is not in the same directory as our website. However when we're linking to other pages within our own website, we could use a relative URL, such as <a href="about.html">Go to my about page</a>.

Anchor Links

Sometimes, we want to link to a different section of our website on the same page. We can accomplish this through anchor links.

Instead of linking to a different file, anchor links let you link to a specific section of a file using that section's ID attribute.

<a href="#section1">Jump to section 1</a>

<section id="section1"></section>

In the above example, you see our section has an ID attribute of "section1". This lets our anchor link directly to that section, instead of that page. This is very handy when creating single page websites that have a lot of content a user might not want to always scroll through to move around.

IDs

We will get further into IDs and other selectors next week when we jump into CSS, but it's important to know as you're writing your HTML and creating anchor links that an ID attribute must be unique. You cannot have two elements on the same page with the same ID.

HTML Refresh

• File structure
• Basic HTML structure & the boilerplate
• The head vs. a header
• Semantic elements
• The document tree and nested elements
• block vs. inline
• Headings 1-6
• HTML commenting

HTML tags/elements reference
HTML semantic elements reference

But do I use a section or an article?

Both sections and articles are intended to group other elements, acting as a container to better segment your website. From a code standpoint, they function exactly the same. However semanticly, they may have different contexts. There is a lot of debate about how sections and articles can be applied, but what is most important is that you're consistent in you're application of them. In general:

• An article should contain content that can stand on its own and still make sense.
• A section is a thematic grouping of content.

The "rules" are not overly specific. In general, your website will not suffer if you accidentally use a section instead of an article. As long as you're thinking through the organization of your page and are consistent, you will do great.

The Figure tag

While we can certainly add images on their own, it's often beneficial to wrap the img tag inside a figure tag. This provides additional semantic context, but also give the image a container which can neccessary once CSS is applied. It also allows you to use the figcaption tag, which is an easy way to add a caption to your image or video.

iframes

We will not use iframes much in this class, but if you embed a video from YouTube or Vimeo you will see it. Essentially, an iframe tag lets you display an webpage within a webpage. This is how YouTube is able to serve up their own video players despite them being placed on another website.

Transporting your files

Be sure you always have access to your website files. There are several ways you can do this: OneDrive, Google Drive, Slack, or a USB drive are all great tools. Late work will not be excused if you left your files on the school computer or at home.

Validate your code

It's easy to accidentally forget to close an element, or make other semantic typos when writing HTML. Code validators can help. They will not catch every mistake, but can still be very useful. Be sure you are using a validator before turning your work in.

W3 Code Validator

Starting your project

• Create a folder and title it 'explainer'
• Open VS Code, then go to File > New File...
• Title your new file 'index.html' and save it in your 'explainer' folder
• By either copying the code from the boilerplate template saved to our Slack channel or by using the '!' shortcut in VS code, add the HTML boilerplate
• Begin writing your HTML inside the body tag

Assignments