Web Design Essentials 1

Class 2

AGENDA

• Class 1 Review
• HTML, HTML Elements & Tags (contd)
  • Links
• Semantic HTML
• Accessibility Basics
• Intro to CSS
• Class 3 Preview
• Class Feedback and Q&A

Stretch - "Bio" Break

8:00p EST / 7:00p CST / 5:00p PST

HTML, HTML Elements & Tags (contd)

Links

Links connect an HTML page to other pages in the same project or parent directory, or to external sites.

Anchor Tag

Links are created with the anchor or "a" tag: <a></a>

Note: The <a> should not be confused with the <link> tag.

Creating a Link

• The <a></a> tag
• An href attribute: Destination where the link points to
• Content: Text or image that becomes the clickable link

<a href="http://www.girldevelopit.com">Girl Develop It</a>
        

href Attribute

href attribute can point to:

• an external URL
• an internal page (same root directory or project)
• a telephone number
• an email address
• a section on the same page (a bookmark)

Link Styles and States

The default appearance of a link is underlined text.

The state or status of a link also affects its appearance:

• An unvisited link is blue
• A visited link is purple
• An active link is red

Link Targets

The link target is an optional attribute that tells the browser where to open the link.

<a href="home.html" target="_self">Link Text</a>

<a href="home.html" target="_blank">Link Text</a>

Absolute & Relative Paths

Absolute Path:
• Points to the full name or address (including the root directory) of a file or page
• Ex: "https://girldevelopit.com/community/some-file.html"

Relative Path:
• Points to content from within the same domain or directory
• Ex: "community/some-file.html"

Bookmark Links

The anchor tag can be used to create links to specific parts of a page.

Creating a Bookmark Link

• Use the id attribute to create and name a bookmark

<h3 id="seasons">Season 1 Episodes</h3>

• Add a link/anchor to the bookmark

<a href="#seasons">Watch Season 1</a>

Practice

Add a few external links and bookmark links to your project page.

HTML Elements

There are over 100 HTML elements:

Other Common HTML Elements

table, form, button,

header, footer, nav,

section, main, article,

video, figure, embed,

div, span, ...

Semantic HTML

What is Semantic HTML?

Using HTML elements that give meaning to or describe the content of a page.

Non-Semantic HTML

HTML elements that do not describe content or have any meaning.

Semantic vs. Non-Semantic Code

<div>Watch Season 1</div>

<button>Watch Season 1</button>

Semantic vs. Non-Semantic Code

Image source: SeekBrevit.com

Non-Semantic HTML Elements

Two common non-semantic elements:

• div: Often used as a generic container for grouping content
• span: Often used as a generic wrapper to style inline content

Using Divs & Spans

<div>
  <h2>Season 1</h2>
  <h3>Episode 5</h3>
  <p>While on a mission, Lorca is captured by the Klingons 
  and unexpectedly finds himself in the company of prisoner of war 
  Starfleet Lieutenant Ash Tyler and notorious criminal Harry Mudd.</p>
</div>

<p>Watch Season 1 and stay tuned for <span>Season 2</span></p>

Why Use Semantic HTML?

• Makes our code accessible
• Improves SEO ranking
• Easier to read and maintain

Make writing semantic HTML your default practice

Sooo, say no to divs?

• There are still good and reasonable use cases for divs
  • Ex: Grouping items for a card component
  • Ex: A div can live inside a semantic parent element and be used to organize/group other children elements
• When necessary, a div can be made semantic by adding accessibility attributes such as role or aria properties

Emphasis vs Presentation

Need to call out important text?

Use semantic HTML elements:

heading tags (h1, h2, etc), strong, em

Otherwise, use CSS for visual or stylistic effects

A Short Semantic HTML Exercise

Test Your Skills: HTML Accessibility (MDN)

Attempt the first exercise: "HTML Accessibility 1"

Accessiblity (A11Y)

No longer an after-thought!

A11Y Mindset

• Cultivate an A11Y-first development practice
  • Accessibility before aesthetics
  • Using semantic HTML
• Run sites/projects through A11Y plugins, such as:
  • WAVE - Web Accessibility Evaluation Tool
  • SiteImprove Accessibility Checker
  • Google Lighthouse (In Chrome Developer Tools)
  • axe DevTools
• Take User Experience and/or A11Y courses

A11Y Resources

A11Y-101

Web Content Accessibility Guidelines (WCAG)

Accessibility Overview (MDN)

CSS

Cascading Style Sheets

What is CSS?

CSS is a "style sheet language" that lets us apply design and layout to content on an HTML page.

Anatomy of CSS

CSS syntax or rule consists of a selector and declarations of property-value pairs:

selector {
  property: value;
  property: value;
}

For example:

p {
  color: yellow;
  background-color: black;
}

CSS & HTML

Some HTML elements have default style, but CSS allows for added customization.

Without CSS, an HTML page is merely a page with text, images and links.

Connecting CSS to HTML

Inline CSS

Embedded or Internal CSS

External CSS Stylesheet

Inline CSS

<p style="color:red">Some text.</p>

• Uses the style attribute.
• Only applies to one element at a time.
• Not preferred.

Practice

Add an inline color style to any element in your HTML document.

Embedded or Internal CSS

<head>
  ...
  <style>
    p {
      color: blue;
      font-size: 12px;
    }
  </style>
</head>

• Inside <head> element
• Uses <style> tag
• Only applies to the HTML page referencing it

Practice

Undo the inline style and make it an embedded style instead.

External CSS

<head>
  ...
  <link rel="stylesheet" href="style.css">
</head>

• CSS lives in a separate file or files
• Can be referenced from multiple pages
• Easier to maintain in larger projects

Practice

• In the index.html of your REPL project, copy the CSS declaration you created previously in the style tags, and paste the code to the style.css file in your REPL project folder
• Delete the style block in the index.html file

Home Practice

1. Continue to build out your project fan page
2. Reorganize your page using semantic HTML where possible or appropriate
3. Install one or two accessibility browser plugins
   • Use the tool to evaluate your page and see what changes or improvements you can make to your site's accessibility
4. Download and install Visual Studio Code or any code/text editor of your choice

Class 3

• Moving our projects to Visual Studio Code
• Intro CSS (contd)
  • CSS Selectors
  • Basic CSS Properties
• CSS Cascade & Specificity
• CSS Box Model

Q&A

Class Feedback

https://forms.gle/MzMndG5s52a2HiB77

Thank You!