Web Development Fundamentals

Pseudo Classes

Pseudo classes are selectors that can be used to style elements based on their state or position in the document. For example, the :hover pseudo class can be used to style an element when the user hovers over it with the mouse.

:nth-of-type(an+b || even || a || an)

The :nth-of-type pseudo class is used to select elements based on their position in a group of siblings. It takes an argument that specifies which elements to select. The argument can be one of the following:

• an+b: Selects every nth element, starting with the bth element. For example, 2n would select every other element, and 2n+1 would select every odd element.
• even: Selects every even-numbered element.
• odd: Selects every odd-numbered element.
• a: Selects every element.

For example, the following CSS would select every other div element that is a child of an element with the class example:

.example div:nth-child(2) { background: #ffdb3a; }

This would apply the style definitions to all div elements that are the last child elements in any parent element.

1. Select all the child elements of .example, which acts as a container for the content.
2. Find the second element in that list, irrespective of type.
3. Check if that element is a type of div.

---> why nth-of-type() is useful  "I am a bear"

Type-independent | Type-dependent
nth-child() | nth-of-type()
nth-last-child() | nth-last-of-type()
first-child() | first-of-type()
last-child() | last-of-type()
only-child() | only-of-type()

div:last-child { … style definitions … }

Image Maps

Image maps allow you to define various sections on an image and create new links in these sections.

Markup

• Structural: Content-only markup focuses on the structure of the content.
• Semantic: Semantic markup focuses on the meaning of the content.
• Style: Style markup is used to make content presentable.

Generic Containers

• div: Used for grouping other block-level elements.
• span: Used to wrap/group elements that appear within paragraphs.

Videos

Standards Compliant Websites

A website is considered standards compliant if it meets the following criteria:

• It must be compliant with the web standards of the World Wide Web Consortium (W3C).
• It must ensure interoperability, meaning it should not use any proprietary software functions and must not depend on features of a specific browser.
• It must have content (in HTML) separate from styling/formatting (in CSS).

For audio and inline frames, alt-text goes between tags.

Document Object Model (DOM)

The DOM is an object-oriented representation of a web page. It allows you to interact with the elements of a web page using JavaScript. With the DOM, you can:

• Look at each HTML element as an object.
• Create, change, or remove (hide) these elements.
• Modify elements based on user interaction or other conditions (e.g., time or changes in another web resource).

Audio

iFrames

JavaScript Event Handlers

• onclick
• onmouseover
• onload