CPS 530 Notes Webpage

CPS 530 Notes

HTML Notes

HTML stands for Hypertext Markup Language

Each block of code is enclosed by 2 tags on either end

Tags are enclosed in less than or greater than symbols

The closing tag will have a forwardslash(/)

Skeleton tags

html: Designates that this file is an html file

head: An introduction to the webpage that contain settings such as the webpage title

title: Designates the title of the webpage which will be shown in the tab of the webpage in the title bar

body: Designates the main section of the webpage were all the content is

Character Sets

Character encoding system that consists of a code that pairs each character from a list

UTF-8: Unicode is most common for encoding

To specify character set, use meta tag

Comments

Comment tag is used for comments and is ignored by browser

Comment tag is < ! -- text -- >

Colours

Colours can be used for many things like background, text, and borders

Each colour represented by 6 character hex number like #00ff00

Colour names like black or blue can be used

Nested Tags and Header Tags

Multiple tags can be nested and should never overlap

Header Tags can be used for page and sections headings

h1 is largest with h6 being smallest by default

Page Section Tags

br: Simple line break

div: Division that will share common characteristics and stand on its own

p: Paragraph that will share common characteristics and will have an empty line at top and bottom

span: Text sharing common characteristics with no line breaks at all

Semantic Tags

Describe the meaning of the section. Ex. article, aside, header, footer

Almost all behave like div

Tags like figure/figcaption and mark behave differently

Figure used to associate an image and a caption while mark highlights text

Makes code easier to read and understand

Summary tag defines a visible heading for hte details element as shown below

Example Summary

Example detail

Horizontal Rule

Used to make a horizontal bar across width of the screen

Good for separating sections

Fonts

Fonts and colours can be defined using the style attribute

Text Alignment

Allows you to change where the text is aligned on the webpage

Lists/Unordered Lists

Great way to keep a page organized and are indented from alignment

Can contain one or more items and use bullet points to list out the items

li tag is used to denote an item while the ul tag is used to denot the unordered list

Example

Ordered Lists

Uses the ol tag and uses numerical characters to list items

Example 1
Example 2

Nested Lists

Lists can be nested within another list

Each nested list will be indented from the one before

Example Superlist
- Example Nested List

Definition Lists

A type of list that has a title line and a data area

Title line uses dt tag and data area uses dd tag

Image Formats

There are 7 main supported types of images for the web

There are other types but they have limited to no support on some browsers

GIF: Stands for "Graphics Interchage Format"

Raster file format designed for relatively basic images

Supports up to 8 bits per pixel and contains 256 indexed colours for lossless compression

Allows images or frames to be combined for animations

Also supports transparency

Good for logos with limited number of colours
PNG: Stands for "Portable Graphics Format

Is most frequently used uncompressed raster image format

Lossless data compression format created to replace GIF

Ideal for flat/gradientless images with hard edges such as logos
JPG: Stands for "Joint Photographic Experts Group"

Standard format for containing lossy and compressed image data

Maintains reasonable image quality with millions of colours despite reduction in file size

Designed to efficiently store and compress images and artwork

Good at compressing images with a lot of colours and gradients

The Image tag

Represented as img and places an image on the page

Attributes src and alt are required

Attributes of img tag: src: URL of image

alt: short description of image

height: height of image in pixels or %

width: width of image in pixels or %

Favicon Images

Favicon, aka. favourite icon, is the small image displayed next to the title in the tab

Small resolution image and should be high contrast

Any image format can be used

"link" tag is used to link favicon image to the page and should be placed in head section

Links and Anchors

HTML links or hyperlinks, used to connect web pages and allow the user to navigate between pages or resources

Created using the "a" tag with "href"

Both text and images can be used as a link

Relative link uses page name as a target and is local to the host

Absolute link uses a URL as the target and must be complete using the protocol (https://)

Internal/Anchor link is useful for long pages and is used to link to another location on the same page

Example of Relative Link: Will be added soon

Example of Absolute Link: Example Absolute Link

Example of Internal Link: Go to the top

The Meta Tag

The "meta" element provides meta-information about the page

Includes things such as description, character set, viewport settings, and refresh rates

Always goes inside the head element and metadata are passed as name/value pairs

Meta tag attributes:

name: specifies a name for the metadata
content: specifies value associated with the name or http-equiv attribute
charset: specifies character set encoding
http-equiv: specifies some action to perform

Exmaples:

use "width=device-width" to make page look good on all devices
http-equiv attribute used to simulate a response header
'http-equiv="refresh" content="5"' refreshes the page every 5 seconds
'http-equiv="refresh" content="10; url=example.link"' redirects the user to a new page after 10 sec delay
Another example is for specific tool authentication

Preformatted Text

The "pre" element defines preformatted text

Unlike regular HTML, text enclosed in "pre" preserves spaces and line breaks

No attributes except style if CSS is required

                                EXAMPLE this is          an Example
                                And stuff     like this

Computer Code Tags

HTML has elements for defining user input and computer code

CSS is recommended for better effect and their only attribute is style

All are monospace except "var" is italic

These tags do not preserve spacing and line changes

Tags must be placed inside "pre" tag

"code" for general code scripts
"kbd" for keyboard input sequences
"samp" for program output
"var" for variables inside text

Special UTF-8 Characters

To make special characters and accented letters, special set of codes called character entities used to insert into HTML code

The browser will display the codes as corresponding symbols or characters

Some entities have names and others can be referenced by decimal or hex codes

HTML Tables

Arranges data into rows and columns

"table" tag defines a table

Inside "table" tag are table rows "tr" and table data cells "td"

With CSS styles you can set the borders, sizes, and spacing and padding

Tables: Rows and Captions

"caption" element defines a table caption

"tr" element defines a row in a table

It contains "td" or "th" elements inside

Table Caption
Header 1	Header 2	Header 3	Header 4
Cell 1	Cell 2		Cell 3

Tables: Header Cells

"th" elements defines table header cell in a table

The text within "th" usually centered bold text

Attributes are colspan, number of columns the cell should span, and rowspan, the number of rows the cell should span

Tables: Table Data Cells

"td" element defines a cell in a table

Like "th" it also uses colspan and rowspan attributes to create asymmetric tables

Inline Frames

"iframe" tag create an inline frame that containes another HTML document

Main attributes are:

width, height: The width or height of the frame in pixels
title: The frame title for use by screen readers
name: The name of the fram to reference it from scripts
src: The URL of the content of the frame

HTML Videos

"video" tag embeds a video content on a page

*controls* attribute adds control buttons like play, pause, and volume

"video" tag allows multiple sources(file formats) with the "source" tag

The browser will use the first recognized format

There is also a "track" tag for subtitles in WebVTT format

HTML Videos: Source

"source" tag used to specify multiple media resources for media elements such as "video", "audio", and "picture

"source" tag allows you to specify alternative sources that the browser may choose from

The browser will choose the first source it supports

Attributes are *src* for the source of the vid and *type* for the MIME type of it

HTML Videos: Formats

Video formats HTML supports are MP4(video/mp4), WebM(video/webm), and Ogg(video/ogg)

Mp4 is the most universally supported video format for all platforms

Some hosting servers require advanced configuration to allow videos

Text between the "video" tags will only be displayed when browsers does not support the video

Video Tag Attributes

*autoplay*: video will start playing as soon as it is ready

*controls*: video controls will be displayed

*height*, *width*: height and width of video in pixels. Aspect ratio must be the same as original content

*loop*: video will start over again every time it finishes

*muted*: video will play with no sound

*poster*: specifies the URL of a still image to be shown before play

HTML Audio

"audio" element embeds an audio file on a web page

Supported formats are mp3(audio/mpeg), wav(audio/wav), aac(audio/aac), and ogg(audio/ogg)

mp3 is universal and most supported audio format

Audio Tag Attributes

*autoplay*: audio will start playing as soon as it is ready

*controls*: audio controls will be displayed

*loop*: audio will repeat once it finishes

*mute*: audio will play silent

Audio tag also supports live streaming

CSS Notes

What Is CSS?

Stands for Cascading Style Sheets

This is because multiple style definitions will cascade into one

Defines how to display HTML elements

Stored in style sheets

External style sheets are stored in .css files and can save a lot of work

CSS1 made in 1996, CSS2 in 1998, CSS3 in 2012

Advantages of CSS

Allows developers to control the style and layout of multiple Web pages all at once

A style can be created for each element and applied to many webpages if necessary

To make global change, just change the style sheet and the affected pages are updated automatically

Allows style information to be specified in many ways

Styles can be specified inside a single HTML element, inside "head" element of an HTML page or externall CSS file

Multiple external style sheets can be referenced inside a single HTML document

The Cascading Effect

All styles "cascade" into a new "virtual" stylesheet

Rules are applied from lowest to highest priority:

Browser default[lowest]
External style sheet
Internal style sheet(inside the "head" tag)
Inline style(style attribute inside HTML element)[highest: overrides other rules]

CSS Syntax

CSS syntax is made up of 3 parts

selector {property:value}

Selector is HTML element/tag that will be affected or a class/id
The property is an attribute that will be changed, each property can take a value
The property and value are separated by a colon, surrounded by braces

EX: body {color:black}

If value has more than one word, quotes must be added around the value

EX: div {font-family:'Roboto Mono';}

Multiples properties are separated by a semicolon. The semicolon is optional after the last property

EX: p {text-align:center; color:red;}

Selectors that share a common style can be separated by commas

EX: h1,h2,h3,h4,h5,h6 {color:green}

Comments in CSS

To comment in CSS, place the comment in /* and */ markers

Tells browser they are notes(comments) and should not be rendered on the page

The Class Selector

Different styles can be defined for the same element using the class selector

EX: p.right {text-align:right}
p.center {text-align:center}

Class attribute is used to link the selected tag with a proper class. Specific class will apply only to the corresponding selector

EX: p class="right" /p

General Classes and IDs

A general class(no selector tag) can be used by all HTML elements that uses that class

EX: .center {text-align:center}

The id selector is also available with a # instead of . and work the same way using the id attribute in the HTML tag instead of class

EX: #blue {color:#0000ff;}

Class and ID names cannot start with a number

Attribute Selectors

It is possible to style HTML elements with specific attributes or attribute values

Examples:

All "a" tags that have a title attribute are red
a[title] {color:red;}
All links that contain torontomu are steelblue
a[href*="torontomu"] {color:steelblue;}
All links to a .org domain are in italics(not case sensitive)
a[href$=".org" i] {font-style:italic}

Class vs. Id

In most contexts class and id behave the same way

Classes can be reused and combined but ids are always unique in a web

Ids can be referred by other objects like JavaScript, classes cannot

Multiple Classes and Ids

To assign multiple classes yo an element, separate each class

ID and class can be used for the sasneen

External Style Sheets

External style sheet is ideal when a style is applied to many images