Experimenting with HTML links: Absolute and Relative links

Welcome to our sample website on GitHub Pages!

Here is a sample link to another website outside of this site. This link holds an absolute URL Penn State Erie, The Behrend College. Here is another link for an absolute URL that takes you to the "code view" of the introDH-Hub GitHub repository. Can you change this to point to the code view of your own GitHub repository?

But here is a link to another page inside my website: this is a relative URL: inner page on this website.

Here is another relative link to a page inside my website (inside the same docs/ directory that holds this index.html file)..

We are writing HTML in the XHTML syntax, which means that all elements (including self-closing elements like <img>) must indicate how they close. All elements in XHTML syntax must have a start tag and an end tag, or indicate that they are self-closing.

Lists: ordered and unordered

The heading above is smaller than the first one on this page, because I selected an h2 element for a second-level heading.

1. dawn
2. afternoon
3. evening
4. midnight

A third-level heading just to see what that looks like

HTML code has lower-level headings like from h2 to h6, but use them in order as you create subsections! You can control the size, position, color, font, and more of headings (and any HTML display elements) using CSS.

When should I use bold vs. strong in HTML code? These are inline elements.

Other HTML elements like the p (for paragraph) or the heading level elements, or ordered and unorderd lists, or img elements make blocks on the page and are known as block elements.

An unordered list of amphibians

• salamander (also known as newt)
• frog
• toad

Introducing images

Images can be tricky to format. First let's just include them on the website. In your code, you point to an image file in your file directory to make it appear on the page when it is published.

The img element is the basic code for including an image file on your page. The @src attribute points to a filepath to your image. The @alt attribute provides a text description for screen readers, helping your images to be accessible to non-sighted readers and also to assist with search retrievals (say, google searches) by providing some context of what's in the image. Writing code on a site to assist with search retrieval is called Search Engine Optimization (SEO).

Other code is here for styling and blocking on the page. A figure element is intended to help organize images and captions in a little nested structure, that makes it convenient to style for proportion on the page. I am also adding a @class attribute to help me with styling different kinds of images (photos vs. small icons on my site). I write CSS code to find elements with a class="photo" and style them all the same way, and I put that code in a separate file so it can handle styling the same way across all the pages on my website. I link that CSS stylesheet to my HTML files up in the head element. Can you find the CSS link line in this file?