---
# System prepended metadata

title: ACIT 1620 Week 2 notes
tags: ['1620']

---

---
type: slide
slideOptions:
  display: block
---

# ACIT 1620

## Week 2

---

<!-- .slide: data-transition="zoom convex-out" -->
Objectives:

- Generic and semantic HTML elements
- Creating links
- Creating lists
- Embedding images
- Publishing your web pages

---

<!-- .slide: data-transition="zoom convex-out" -->
# HTML Elements

- HTML provides a wide range of elements for different purposes
- Some of these elements have specific meaning while other act as generic wrappers

----

## Generic elements

- `<div>`: sectioning generic wrapper
- `<span>`: inline generic wrapper
- Mostly used for styling purposes

----

## semantic elements

- Block elements:
    - headings (`<h[1-6]>`)
    - `<p>`, `<blockquote>`
    - sectioning: (`<main>`, `<section>`, `<article>`, `<aside>`, `<header>`, `<footer>`, etc)
    - `<figure>`, `<figcaption>`
    - lists: (`<ol>`, `<ul>`, `<dl>`)

----

- Inline elements:
    - `<a>`, `<time>`, `<cite>`, ...
    - accents: `<em>`, `<b>`, `<strong>`, `<i>`, ...
    - multimedia: `<img>`, `<audio>`, `<video>`, ...

---

## Creating lists:

Unordered list:

``` html
<ul>
    <li>item 1</li>
    <li>item 1</li>
</ul>
```

<ul>
    <li>item1</li>
    <li>item 2</li>
</ul>

----

Ordered list:

``` html
<ol>
    <li>item 1</li>
    <li>item 2</li>
</ol>
```

<ol>
    <li>item 1</li>
    <li>item 2</li>
</ol>


----

Definition list:

``` html
<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
</dl>
```

<dl>
    <dt>HTML</dt>
    <dd>HyperText Markup Language</dd>
    <dt>CSS</dt>
    <dd>Cascading Style Sheets</dd>
</dl>

---

## Creating links

The anchor element (`<a>`) is used to create links to other documents. The `href` attribute specifies the URL the link navigates to. URLs can be absolute or relative, and can even point to a section on the same page.

``` html
<!-- Link to a full url -->
<a href="https://bcit.ca">BCIT</a>

<!-- Link to a page on the same site -->
<a href="about.html">About me</a>
```

----

It is possible to point to a section on the same page or another page. This kind of links are called fragment links.

``` html
<!-- Link to a section on the same page -->
<a href="#chapter-2">Chapter 2</a>
...
<h2 id="chapter-2">Chapter 2</h2>

<!-- Link to a section on another page -->
<a href="about.html#contact">Contact details</a>

<!-- Link to top of the page -->
<a href="#">Back to top</a>
```

---

## Embedding images

The `<img>` element is used to embed images in an HTML document, either in stand-alone mode or as part of `<figure>` element. The value of the `src` attribute can be an absolute or relative url (such as when the image is served from a subdirectory within the site's root)

```
<img src="images/logo.png" alt="company logo" />
```

__It is important for accessibility to always include the `alt` attribute__.

---

<!-- .slide: data-transition="zoom convex-out" -->
## Reading List


- [CSS: Getting Started](https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/Getting_started)
- [CSS selectors](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Selectors)
- [The Box Model](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model)
- [Layout](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction)
- [Positioning](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Positioning)