---
# System prepended metadata

title: ACIT 1620 Week One
tags: ['1620']

---

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

# ACIT 1620 Fundamental Web Technologies

## Week One

---

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

- Overview of web landscape
    - How the web works
    - Web technologies

----

- Learn:
    - [x] ==HTML== (content)
    - [x] ==CSS== (presentation)
    - [x] a bit of ==Javascript== (behavior)

---

<!-- .slide: data-transition="zoom convex-out" -->
What you will learn:

<ul>    

<li>Web and internet terminology (keep your eye out for acronyms)<!-- .element: class="fragment" data-fragment-index="1" --></li>
<li>How to mark-up pages by hand using HTML
    <!-- .element: class="fragment" data-fragment-index="2" --></li>
<li>Basic interface design and usability principles <!-- .element: class="fragment" data-fragment-index="3" --></li>
    
</ul>

----

<ul>    
    <li>Cascading Style Sheets (CSS) and web scripting concepts <!-- .element: class="fragment" data-fragment-index="1" -->
    </li>
    <li>Best practices <!-- .element: class="fragment" data-fragment-index="2" -->
    </li>
    <li>Workflow: how to start, iterate through development, and test. How to automate processes
    <!-- .element: class="fragment" data-fragment-index="3" -->
    </li>
    <li>Accessibility (producing web pages that are optimized for search engines and screen readers)
    <!-- .element: class="fragment" data-fragment-index="4" -->
    </li>
    
</ul>

---

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

- Web `Browser`: Chrome, Safari or Firefox
- Text Editor: `VSCode` (recommended) or your preferred editor ([grab the installer](https://code.visualstudio.com/download))
- `Git & Github` ([grab the git installer here](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git))
- A `terminal` emulator (if you're on Windows, [grab the installer here](https://apps.microsoft.com/detail/9N0DX20HK701?hl=en-us&gl=US))
- Postman (for hand-making web requests. [grab the installer](https://www.postman.com/downloads/))

---

<!-- .slide: data-transition="zoom convex-out" -->
## Learning Hub

- All content and in-class examples are located on the ==Content== page.

- All labs/assignments will be submitted to the ==Activities > Assignments== page.

- Quizzes and exams will be access from the ==Activities > Quizzes== page.

----

:::info
:books: You will be expected to prepare for the class ahead of time by working through assigned required reading material. Typically, required reading will be assigned at least a week before the next class. Each class will start with a quiz based on the assigned reading.
:::

---

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

## How the web works

<ul>    
    <li><code>How</code> do we surf the web <!-- .element: class="fragment" data-fragment-index="1" -->
    </li>
    <li><code>What</code> is a URL <!-- .element: class="fragment" data-fragment-index="2" -->
    </li>
    <li><code>Where</code> web content comes from
    <!-- .element: class="fragment" data-fragment-index="3" -->
    </li>
    <li>
        DNS
        <!-- .element: class="fragment" data-fragment-index="4" -->
    </li>
    <li>
        HTTP
        <!-- .element: class="fragment" data-fragment-index="5" -->
    </li>    
</ul>

---

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

> "A markup language is one that is designed for defining and presenting text.
> 
> ...Within a text file such as an HTML file, elements are marked up using tags which explain the purpose of that part of the content." <cite><a href="https://developer.mozilla.org/en-US/docs/Glossary/Markup">MDN</a></cite>


----

- Foundation of the web
- HTML `tags` describe structure and meaning of content
    - instruct the browser how to display the content

---

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

- Every tag has at minimum a name

``` html [2]
<!-- The tag name is 'p' for paragraph -->
<p>Hello World</p>
```

----

- Tags can either be self-closing or container tags

```html [2|5]
<!-- p is a container tag, it has a start <p> and end </p> (note the slash before the tag name in the closing tag) -->
<p>Hello World</p>

<!-- img is a self-closing tag, used to display images (note that the slash is optional in self-closing tags) -->
<img />
```

----

- Tags may optionally have “attributes”, some of which are useful for us and some that are outdated and should be avoided (any presentational attributes)

``` html [2]
<!-- The img element has one *required* attribute, src, which tells the browser where to find the file to display -->
<img src="dog.jpeg">
```

----

- Tags can have multiple attributes

``` html [2]
<!-- This img element has a second attribute, alt, which defines the text that should display if the image cannot be displayed -->
<img src="dog.jpeg" alt="A pug chewing on a stick">
```

----

- Tags can be nested inside other tags

``` html [1|3-4]
<p>
    <!-- The a (anchor) element is used to create to links to other pages, or other locations in the same page -->
    <a href="www.bcit.ca">BCIT</a>
</p>
```

---

<!-- .slide: data-transition="zoom convex-out" -->
## Basic Page Structure

HTML documents must follow a strict basic structure

``` html [1|2-7|3-4|5-6]
<!DOCTYPE html><!-- tells the browser which version of html we are using (HTML 5) -->
<html>
    <head>
    </head>
    <body>			
    </body>
</html>
```

---

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

- Week One (yes, this week!)
    - [:link: How the web works](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/How_the_Web_works)
    - [:link: HTML basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/HTML_basics)
    

----

- Week Two (read this before next class)
    - [:link: Creating links](https://developer.mozilla.org/en-US/docs/Learn/HTML/Introduction_to_HTML/Creating_hyperlinks)
    - [:link: Ordered and unordered lists](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li)
    - [:link: Embedding images](https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Images_in_HTML)

---

<!-- .slide: data-transition="zoom convex-out" -->
## Lab: Practice creating web pages

- Setup
    - Create a folder named `acit1620` somewhere on your computer
        - This is the folder where you will keep all the work you do in this course
    - Create another folder named `week1` inside `acit1610`

----

- Launch Visual Studio Code and open `week` folder
- create a new file and give it a name, making sure it has the `.html` file extension
- Add content to this file
    - Add a heading
    - One or two paragraphs
    - Keep building your page

----

- Launch a terminal and initialize a git repository inside `week1` folder
    - `git init`

- Begin versioning your work by tracking your web page with git
- Commit your work
- Create a new repository on Github and push your work there.

---

