Lernmaterialien für Web Development Fundamentals an der University of British Columbia

An attribute in HTML is a property and can provide information on how this property acts. 

For example: width =350px

The  tag goes inbetween the  tag of an html document and contains a rel=' stylehseet' and href=' ' attributes with the path to the css file. 

* rel - establishes relationship between html and css file

* href - links to the external css file

Chaining is requiring certain elements to have a style in order to apply it to another element. This is done as follows:

* h1.orange {

    color: orange;

}

this selects all h1's with a class of orange. 

this can also work with descendants / nested elements. ex:

<ul class = 'test'>

.test li {

    color: grey;

}

<em> - italic

<strong> - bold

<a></a> - the href=' ' attribute adds a hyperlink to the enclosing text

target='_blank' opens the link in a new window

The <a> tag canalso link somewhere to the internal site href='/path'

<sup> - used as suffix date, math concepts, etc

<sub> - contains characters like foot notes Such as H2O

<hr /> - creates a break like when starting a new topic

<blockquote><p></p></blockquote> - used to show longer quotes 

<p><q></q></p> - used for shorter quotes wihtin a paragraph

<p><abbr></abbr></p> - used to abbreviate things such as titles ex: Prof instead of proffesor

<p><cite></cite></p> - used for citations

<p><dfn></dfn></p> - used for definitions

<address><p></p></address> - used for an email 

<span> - is used as an inline container

<nav></nav> - defines a block containing links, tables of content. It can be contained inside the header element or on its own. 

<main></main> - contains the most important part of the body

<figure></figure> - used to encapsulate media like images, illiustrations, diagrams, code snippets, etc. 

</figcaption> - figcaption is used in order to describe media encapsulated by figure

<section></section> - defines a section of the document such as a chapter, or something of such importance 

<article></article> - contains data such as media, blogs, etc. (all article related.)

<aside></aside> - information that is not required, but can enhance another element such as bibliogrpahies, endnotes, comments, pull quotes, editorial sidebars, additional information. 

<audio></audio> - encapsulates source tags containing audio files

<source> - contains source to media and attribute type containing media type

<video></video> - controls attribute adds basic video controls, autoplay plays the video as soon as the page is loaded, loop loops the video over and over, the message between the video tags is displayed in case the video file is not able to be shown 

<embed> - can be used to add media from other websites 

tota11y: http://khan.github.io/tota11y/

is a tool that helps check if the HTML written is consistent. 

Pesudo class selectors are selectors that style an element after an action has been performed on them. LIike visiting a link and then having it display a purple color, or greying out a submit button in a form when it's incomplete.

This can be accessed via:

*  a:visited
* button:focus

*  x:disabled

*  x:active

* x:hover

Web `1.0 is static and user input generally meant having the page either realoading or taking the user into a new iste. 

Web 2.0 is dynamic and allows the user to generate content and interact with the website without needing it to reload whole. 

* !important - overrides any style despite specificity 

* inherit - ex: p {padding :inherit;} this will cause the p element to inherit values from their parent element