COMP 1850 Lesson Two

--- tags: COMP-1850 --- <style> .markdown-body h1:first-of-type { margin-top: 24px; } .markdown-body h1 { margin-top: 64px; } .markdown-body h1 + h2 { margin-top: 32px; } .markdown-body h2 { margin-top: 48px; } .markdown-body h3 { color: cornflowerblue; } .exercise { font-size: 150%; font-weight: bold; color: rgb(227,112,183); } .note { color: red; } </style> # COMP 1850 Lesson Two ## Review HTML (Hypertext Markup Language) is a set of tags (a.k.a elements) used to add structure and meaning to content. A _tag_ consists of a tagname and optionally attributes. Below is the tag used to display images: ```img``` is the tag name and ```src``` is the attribute that tells the browser where the file is located: ``` <img src="dog.jpg"> ``` HTML provides several tags used to markup text: - The paragraph tag (\<p>) for body text - Heading tags (\<h1> through \<h6>) for titles, subtitles, etc. - Blockquote (\<blockquote>) - \<strong> and \<em> for important and emphasized text respectively HTML elements are either _block_ (they take up 100% of the width of their parent element and force a line break) or _inline_ (they only occupy as much width as the content and do not force a line break) Each HTML document must follow a strict basic structure: ``` <!DOCTYPE html> <html> <head></head> <body></body> </html> ``` The \<head> element contains metadata about the document itself, e.g. the title of the page. The \<body> element contains all the content that the user sees. ## Comments HTML _comments_ allow us to add information to our .html document that is not displayed to a user. Comments can be used to help explain and organize code. HTML comments begin with the `````` symbol. Any tags and/or content in between the opening and closing symbol will not be displayed. HTML comments can span multiple lines: ``` <!DOCTYPE html> <html> <head> <title>Lesson 2</title> </head> <body> <h1>This is visible to the user</h1>  </body> </html> ``` ## Semantic and Structural Tags HTML5 (the current _version_ of HTML) provides new tags that add additional _meaning_ to our documents: ```<header></header``` is used to enclose the main page title and navigation. The header element is typically placed, only once, at the top of the page. ```<footer></footer>``` is used to enclose any content that should be located at the _bottom_ of the page. This typically contains additional navigation, contact and copyright information, and social media links ```<main></main>``` is used to enclose the _main_ content of the page, i.e. the most important content. ```<aside></aside>``` is used for _secondary_ content, i.e. content that is related to the main content, but not the main content itself. The aside is typically styled as a sidebar, and may contain links to other pages or other parts of the document. ```<section></section>``` denotes a logical section of content within a page. It typically contains a heading as its first child, as well as any related content ```<article></article>``` is used for any content that is self-contained and (commonly) intended for distribution in other formats, e.g. tweets, blog posts ```<nav></nav>``` is used to enclose site navigation – a collection of links to other pages or other parts of the document <p class="note">Note that not all of the semantic tags listed above are required, but the first three: header, footer, and main are good practice</p> Incorporating the semantic elements above gives us the following basic page structure – this should be the basis for any page that you create from now on: ``` <!DOCTYPE html> <html> <head> <title></title> </head> <body> <header> <h1>Page Title</h1> <nav>  </nav> </header> <main> <p>Your page content goes here</p> </main> <footer>  </footer> </body> </html> ``` In addition to the above semantic elements, HTML also has generic structural tags: ```<div></div>``` a generic block-level element ```<span></span>``` a generic inline element These two structural elements are very common, but should only be used when another more appropriate (and meaningful) element is not available (or as additional structure that our CSS needs – more on this next week!) ## Lists HTML provides several tags for marking up _lists of information_, specifically: ```<ul></ul>``` the unordered list element, for any list of things that are (not surprisingly) not ordered or sequential ```<ol></ol>``` the ordered list element, for any list of things that _are_ ordered and/or sequential Both types of lists are only allowed to have ```<li></li>``` list item elements as their direct children (one level of nesting deeper) – any other element is not valid HTML. ``` <ul> <li>This is</li> <li>a valid</li> <li>list</li> </ul> <ul> <p>This</p> <li>is not</li> <h2>a valid</h2> <p>list</p> </ul> ``` We _can_ include other elements _inside_ the \<li> elements, but not as direct children of the \<ul> or \<ol> For example: ``` <ul> <li> <span>This is</span> </li> <li>perfectly</li> <li>fine</li> </ul> ``` ## Links Links are one of the most fundamental tags in all HTML - they allow us to navigate between sites, between pages, and between parts of a document. The ```<a></a>``` anchor element is used to create links, and has a required attribute ```href``` which contains the address that the link should navigate to ``` <a href="www.bcit.ca">This text will be seen by the user</a> ``` There are two main _types_ of links that we will use as values in our ```href``` attribute: relative and absolute. ### Relative URLs Relative URLs specify a target _relative to the current page and site_. If we were writing the HTML for BCIT, and assuming there is an admissions page at www.bcit.ca/admission, we could create a relative link to it using the URL: ``` <a href="/admission.html">Go to Admissions</a> ``` This link could be placed on any page within the BCIT site, and always correctly point to the admission page because: - The browser interprets the leading slash ```/``` as meaning "start at the root of the site". The _root_ is the base URL (typically the home page), in this case www.bcit.ca - it then searches for the file or folder specified after the slash, in this case _admission.html_ Relative URLs can also navigate up and down between files and folders on a website – see the in-class notes for examples ### Absolute URLs Absolute URLs are simpler because they always contain the full path, for example: ``` <a href="http://www.bcit.ca">Home</a> <a href="http://www.bcit.ca/admission">Admissions</a> ``` Absolute URLs are the only way for us to link to a site other than our own. ## --- <span class="exercise" id="a2">Assignment 2: Creating a simple multi-page site with navigation</span> For assignment 2 you must take the page you created in assignment 1 and break it up into multiple pages, all linked together via consistent header navigation. Begin by creating several blank .html documents, each named according to the section of content you would like them to contain, for example: index.html (this will be your 'home' page) double-coat.html smooth-coat.html etc. Then add all the necessary structural tags (head, title, body, header, nav, main), correctly nested and located in the document. Use the in-class examples as a starting point. Once you have the basic structure complete for all pages, you must fill the \<nav> element with markup similar to the following: ``` <ul> <li> <a href="/double-coat.html">Double Coat</a> </li> <li> <a href="/smooth-coat.html">Smooth Coat</a> </li>  </ul> ``` Test that you can open up your home page (index.html) and navigate between pages. Note that you may need to change the links slightly for each page that you create! For your submission, zip your .html files and submit them to the assignment 2 dropbox as firstname-lastname-a2.zip (where firstname and lastname are your actual first and last names) ## Optional Reading Before Next Class - [CSS Basics](https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/CSS_basics) ## Tasks To Complete Before Next Class - [ ] Complete the [second assignment](#a2) - [ ] (Optionally) complete the [readings](#Optional-Reading-Before-Next-Class) ---