--- 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)