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