Step Two

1. Tags

Two Types of Tags There are tags for structure (think of them as boxes), and there are tags for text.

STRUCTURE TAGS

Structure tags function as boxes, they developed from <div> tags.

Note: 99.9% of all tags work in pairs — a beginning and an end tag. Example: <h1>Title</h1>

Common strucuture tags include:

<header> </header>

<nav> </nav>

<main> </main>

<article> </article>

<section> </section>

<footer> </footer>

<aside> </aside>

Note: any name can be used for a class or ID <div> (division) tag.

TEXT TAGS

Text tags give hierarchy to the text. They were part of the original concept for HTML.

Common text tags include:

<h1> </h1> (largest title)

<h2> </h2>

<h3> </h3>

<h4> </h4>

<h5> </h5>

<h6> </h6> (smallest title)

Note: "h" stands for headline.

Other text tags include

Bold

<b> </b>

Another form of bold

<strong> </strong>

Italic

<i> </i>

Emphasis/another form of italic

<em> </em>

Paragraph, used for all body copy

<p> </p>

Display code (You still must replace the angle brackets with html symbols)

<code> </code>

Give a section or span of text a slightly different style

<span> </span>

Forced line break (Strangely this tag only has one part)

<br>

2. Links (Anchors)/Linking Pages

Some HTML History

- In 1989: Tim Burners-Lee invented the World Wide Web to share text information

- He originally called links anchors, which is why we use <a> to represent links

Creating a Hyperlink in Dreamweaver

1. In Dreamweaver, open the page where you want to create a link.

2. Select the text (highlight) or image (click on) that you want to serve as the link (meaning the text or image that a user clicks to trigger the link).

3. Click the drag-down menu "Insert". Then choose Hyperlink.

4. The Hyperlink dialog box will open. In that box, click the file folder icon, and browse for the HTML page or file you want to link to. (Note: if you pick a file, choose one such as a PDF from the "documents" folder, then visitors to your site will be able to download files). Optionally you can paste in the URL in the "link" text field and not use the file folder icon at all.

5. If you do choose use the file folder icon, you will browse your site root folder and find the HTML page that you want your text or image to link to. Once selected, click "Choose" (Mac) or click "OK" for (Windows), then dialog box will close.

6. Optionally, before closing the hyperlink dialog box, you could also set the Target field in the Hyperlink dialog box to define if your page opens in the existing web page, or if it opens a new web page.

There you have the following options:

_blank option - the linked page will open a new browser window or in a new tab within a browser.

new - this option is not recommended because it is not standard.

_parent option – this is almost never used, but if your page is within a frameset, you can select this option to open the linked page a level above the current page in the frame structure.

_self - the linked page in the same window (this is the standard default method, no need to select).

_top - the page to open in a fresh browser window, even if the page is displayed within a frame.

7. Optionally, before closing the hyperlink dialog box, you could also set the Title field in the Hyperlink dialog box to define what the title of the link should be. This is very helpful for ADA Accessibility standards. The link will be read to those who have difficulty seeing the page.

8. It is suggested that you leave the "Access key" and "Tab index" text fields blank. They are for setting a link by the use of the keyboard. For example you could make the f1 key the active link button on the keyboard. Because this is rarely used, we recommend avoiding this option.

7. When you are done entering the information, click "OK". The Hyperlink dialog box closes and the link is set automatically. The code will be automatically written in your HTML. Test your links but uploading the page, and testing it in a web browser.

3. Media Queries

Purpose

Media Queries enable websites to seamlessly adjust to various screen sizes, improving usability across devices like smartphones, tablets, and desktops. They allow for adjustments in layout, font size, color, and element visibility without the need to alter HTML code, ensuring content is accessible and legible on any device.

The Code

Media queries are incorporated within the CSS file of a website. Their syntax begins as follows:

@media only screen and (max-width: ___px) {
/* CSS rules */
}

☛ IMPORTANT: Be careful not to remove the closing curly brace }. It’s a common error that can disrupt the functionality of your CSS.

In development environments, media query syntax often appears in teal, distinguishing it easily. The closing curly brace, though it may seem extraneous, is essential for the proper execution of your CSS.

Best Practices

Focus on modifying only what's necessary across different screen sizes. Avoid replicating CSS rules that are consistent across devices. Implement a foundational CSS for all devices, and use media queries for specific alterations.

Example: To hide an image on screens narrower than 990px:

@media only screen and (max-width: 990px) {
.image-selector {
display: none;
}
}

CSS cascades; styles in your foundational CSS (the bundle) extend to all screen sizes unless overridden in a media query. This ensures a smooth transition across various devices.