ITEC 106 (SIR JARED) Flashcards by Eon Torres

Hyper Text Markup Language

Created by Tim Berners-Lee, Robert Cailliau, and others starting in
1989

How well did you know this?

Not at all

Perfectly

means the document contains links that allow the reader
to jump to other places in the document or to another document
altogether

Hypertext

How well did you know this?

Not at all

Perfectly

is a way that computers speak to each other to
control how text is processed and presented. To do this HTML uses
two things: tags and attributes.

A Markup Language

How well did you know this?

Not at all

Perfectly

are used to mark up the start of an HTML element and they are
usually enclosed in angle <> brackets.

Tags

How well did you know this?

Not at all

Perfectly

contain additional pieces of information. Attributes take
the form of an opening tag and additional info is placed inside.

Attributes

How well did you know this?

Not at all

Perfectly

Golden Rules To Remember

The vast majority of tags must be opened (<tag>) and closed
(</tag>) with the element information such as a title or text resting
between the tags.
2. When using multiple tags, the tags must be closed in the order in
which they were opened. For example

How well did you know this?

Not at all

Perfectly

This tag specifies the language you will write on
the page. In this case, the language is HTML 5.

<!DOCTYPE html>

How well did you know this?

Not at all

Perfectly

This tag signals that from here on we are going to write in
HTML code.

How well did you know this?

Not at all

Perfectly

This is where the content of the page goes

How well did you know this?

Not at all

Perfectly

Inside the <head> tag, there is one tag that is always included: <title>,
but there are others that are just as important</title>

Further Tags

How well did you know this?

Not at all

Perfectly

This is where we insert the page name as it will appear at the top of
the browser window or tab.

How well did you know this?

Not at all

Perfectly

This is where information about the document is stored: character
encoding, name (page context), description

How well did you know this?

Not at all

Perfectly

We also have a number of
other elements we can use
to control the text or make
it appear in a certain way

Other elements

How well did you know this?

Not at all

Perfectly

= Hypertext REFerence

href

How well did you know this?

Not at all

Perfectly

is important to ensure that your site is ranked correctly on
search sites and also for visually impaired visitors to your site.

*Alt text

How well did you know this?

Not at all

Perfectly

file types generally used for image files online are:

.jpg, .png, and
.gif

How well did you know this?

Not at all

Perfectly

is an ordered
list of contents

Ordered List

How well did you know this?

Not at all

Perfectly

This is better
known as a bullet point list and
contains no numbers.

Unordered List

How well did you know this?

Not at all

Perfectly

e is defined using the <table> element, and contains a number of
table cells ( <td>, for “table data” ) which are organized into table rows
( <tr>)

Table tag

How well did you know this?

Not at all

Perfectly

are required, when you want to collect some data from
the site visitor. For example, during user registration you would like to
collect information such as name, email address, credit card, etc

html forms

How well did you know this?

Not at all

Perfectly

always starts on a new line, and the browsers
automatically add some space (a margin) before and after the
element.

Block-level Element

How well did you know this?

Not at all

Perfectly

always takes up the full width available
(stretches out to the left and right as far as it can).

Block-level Elemen

How well did you know this?

Not at all

Perfectly

does not start on a new line.

Inline Elements

How well did you know this?

Not at all

Perfectly

only takes up as much width as necessary.

Inline Elements

How well did you know this?

Not at all

Perfectly

clearly describes its meaning to both the browser and the developer.

semantic element

element defines a section in a document.

element specifies independent, self-contained content.

should make sense on its own, and it should be possible to distribute it independently from the rest of the web site.

An article

element represents a container for introductory content or a set of navigational links.

element defines a set of navigation links.

element defines some content aside from the content it is placed in (like a sidebar).

content should be indirectly related to the surrounding content

tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.

element can be placed as the first or as the last child of a

element.

tag defines a caption for a

element

Defines a date/time

Defines a visible heading for a

element

Defines a section in a document

Specifies the main content of a document

Defines marked/highlighted text

Defines additional details that the user can view or hide

He is best known for developing Cascading Style Sheets (CSS) while working with Tim Berners-Lee and Robert Cailliau at CERN in 1994.

*Håkon Wium Lie

is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML

Cascading Style Sheets (CSS)

describes how HTML elements are to be displayed on screen, or in other media

CSS

” in CSS refers to the fact that styling rules “cascade” down from several sources.

cascading

points to the HTML element you want to style.

selector

contains one or more declarations separated by semicolons

declaration block

Multiple CSS declarations are separated with ___ , and declaration blocks are surrounded by curly braces.

semicolons

are used to "find" (or select) the HTML elements you want to style.

CSS selectors

s (select elements based on name, id, class)

Simple selectors

(select elements based on a specific relationship between them)

Combinator selectors

(select elements based on a certain state)

Pseudo-class selectors

(select and style a part of an element)

Pseudo-elements selectors

(select elements based on an attribute or attribute value

Attribute selectors

also known as a wildcard—matches any element.

Universal selector

matches a HTML element directly.

Type selector

matches any element that has that class applied to it

Class selector

uses the id attribute of an HTML element to select a specific element.

ID selector

- allows us to target a child element. This uses a space.

Descendant selector

You can look for an element that immediately follows another element

Adjacent sibling selector

selects all elements that are the children of a specified element

Child Selector (>)

selects all elements that are next siblings of a specified element

General Sibling Selector (~)

HTML elements find themselves in various states, either because they are interacted with, or one of their child elements is in a certain state. For example, an HTML element could be hovered with the mouse pointer by a user or a child element could also be hovered by the user.

Pseudo-classes

differ from pseudo-classes because instead of responding to the platform state, they act as if they are inserting a new element with CSS

Pseudo-elements

are also syntactically different from pseudo-classes, because instead of using a single colon (:), we use a double colon (::)

Pseudo-elements

Instruct CSS to look for attributes by wrapping the selector with square brackets ([ ])

Attribute selector

Everything displayed by CSS is a box. Understanding how the CSS Box Model works is therefore a core foundation of CSS.

Box model

is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.

CSS box model

The content of the box, where text and images appear

Content

Clears an area around the content. The padding is transparent

Padding

A border that goes around the padding and content

Border

- Clears an area outside the border. The margin is transparent

Margin

When we alter the natural size of an element by applying a specific value to it, as seen in the image, we refer to that sizing as

extrinsic

when the content’s size defines the element’s size, we refer to that as

intrinsic or natural size.

means that when you set dimensions, such as a width and height, they will be applied to the content box. If you then set padding and border, these values will be added to the content box's size.

Box-sizing: content-box

*If there are two or more CSS rules that point to the same element, the selector with the highest specificity value will "win", and its style declaration will be applied to that HTML element.

Specificity

JavaScript was invented by +++++ in +++++

Brendan Eich, 1995

javasript was developed for

Netscape 2

became the ECMA-262 standard in

1997

is one of the most widely used programming languages (Front-end as well as Back-end). It has it's presence in almost every area of software and web development.

Javascript

These unique names are called

identifiers

4 Ways to Declare a JavaScript Variable:

*Using var *Using let *Using const *Using nothing

javascript data types

1. String 2. number 3. Bigint 4. Boolean 5. Undefined 6. Null 7. Symbol 8. Object

Use if to specify a block of code to be executed, if a specified condition is true

Conditional Statements

* Use else to specify a block of code to be executed, if the same condition is false

Conditional Statements

* Use else if to specify a new condition to test, if the first condition is false

Conditional Statements

* Use switch to specify many alternative blocks of code to be executed

Conditional Statements

- loops through a block of code a number of times

for

- loops through the properties of an object

* for/in

loops through the values of an iterable object

for/of

loops through a block of code while a specified condition is true

while

also loops through a block of code while a specified condition is true

do/while

is a block of code designed to perform a particular task

JavaScript function

is executed when "something" invokes it (calls it).

JavaScript function

DOM

Document Object Model

If you want to access any element in an HTML page, you always start with accessing the

document object.

is an action you can do (like add or deleting an HTML element).

method

is a value that you can get or set (like changing the content of an HTML element).

property

JavaScript HTML DOM Events

*When a user clicks the mouse *When a web page has loaded *When an image has been loaded *When the mouse moves over an element *When an input field is changed *When an HTML form is submitted *When a user strokes a keY

was created in 2006 by John Resig. It was designed to handle Browser Incompatibilities and to simplify HTML DOM Manipulation, Event Handling, Animations, and Ajax.

jQuery

jQuery was created in _____ by _________.

2006 , John Resig

This is to prevent any jQuery code from running before the document is finished loading (is ready)

The Document Ready Event

jQuery Event Methods

*moving a mouse over an element *selecting a radio button * clicking on an element

text(), html(), and val()

Get/Set Content

Sets or returns the text content of selected elements

*text()

Sets or returns the content of selected elements (including HTML markup)

* html()

- Sets or returns the value of form fields

val()

was conceived sometime in the fall off 1994 by Rasmus Lerdof. Early non-released versions were used on his home page to keep track of who was looking at his online resume.

PHP

PHP was conceived sometime in the fall off ______ by ________.

1994, Rasmus Lerdof

The first version used by others was available sometime in early 1995 and was known as the ______

Personal Home Page Tools

PHP is an acronym for

"PHP: Hypertext Preprocessor

A PHP script is executed on the server, and the plain HTML result is sent back to the browser. *A PHP script can be placed anywhere in the document. *A PHP script starts with * The default file extension for PHP files is ".php". *A PHP file normally contains HTML tags, and some PHP scripting code

PHP script

is used to access a global variable from within a function.

global keyword

PHP supports the following data types:

* String * Integer * Float (floating point numbers - also called double) * Boolean * Array * Object * NULL * Resource

two operators that are specially designed for strings

CONCATENATION, CONCATENATION ASSIGNEMENT

loops through a block of code for each element in an array

* foreach

- loops through a block of code once, and then repeats the loop as long as the specified condition is true

* do...while

Arrays with a numeric index

* Indexed arrays

Arrays with named keys

Associative arrays

Arrays containing one or more arrays

Multidimensional arrays

sort arrays in ascending order

sort() -

sort arrays in descending order

*rsort()

sort associative arrays in ascending order, according to the value

asort()

sort associative arrays in ascending order, according to the key

* ksort()

sort associative arrays in descending order, according to the value

arsort() -

sort associative arrays in descending order, according to the key

krsort()

means that they are always accessible, regardless of scope - and you can access them from any function, class or file without having to do anything special.

superglobals

* $GLOBALS * $_SERVER * $_REQUEST * $_POST * $_GET * $_FILES * $_ENV * $_COOKIE * $_SESSION