Untitled Document

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.

<header> </header>
<nav> </nav>
<main> </main>
<article> </article>
<section> </section>
<footer> </footer>
<aside> </aside>

Text Tags

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

<h1> to <h6> (headlines)
<b> and <strong> (bold)
<i> and <em> (italic)
<p> (paragraph)
<code> (for displaying code)
<span> (for inline styling)
<br> (line break)

2. Links (Anchors)/Linking Pages

Some HTML History

In 1989, Tim Berners-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

Open the page where you want to create a link.
Select the text or image that you want to serve as the link.
Click the drag-down menu "Insert". Then choose Hyperlink.
In the Hyperlink dialog box, click the file folder icon and browse for the HTML page or file you want to link to.
Set the Target field if needed (e.g., _blank for a new window).
Optionally set the Title field for accessibility.
Click "OK" to create the link.

3. Media Queries

Purpose

Media Queries enable websites to seamlessly adjust to various screen sizes, improving usability across devices like smartphones, tablets, and desktops.

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 */

                    }

Best Practices

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