ITEC 106 (SIR JARED) Flashcards
Hyper Text Markup Language
Created by Tim Berners-Lee, Robert Cailliau, and others starting in
1989
means the document contains links that allow the reader
to jump to other places in the document or to another document
altogether
Hypertext
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
are used to mark up the start of an HTML element and they are
usually enclosed in angle <> brackets.
Tags
contain additional pieces of information. Attributes take
the form of an opening tag and additional info is placed inside.
Attributes
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
This tag specifies the language you will write on
the page. In this case, the language is HTML 5.
<!DOCTYPE html>
This tag signals that from here on we are going to write in
HTML code.
<html>
</html>
This is where the content of the page goes
<body>
</body>
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
This is where we insert the page name as it will appear at the top of
the browser window or tab.
<title>
</title>
This is where information about the document is stored: character
encoding, name (page context), description
<meta></meta>
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
= Hypertext REFerence
- href
is important to ensure that your site is ranked correctly on
search sites and also for visually impaired visitors to your site.
*Alt text
file types generally used for image files online are:
.jpg, .png, and
.gif
is an ordered
list of contents
Ordered List
This is better
known as a bullet point list and
contains no numbers.
Unordered List
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
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
always starts on a new line, and the browsers
automatically add some space (a margin) before and after the
element.
Block-level Element
always takes up the full width available
(stretches out to the left and right as far as it can).
Block-level Elemen
does not start on a new line.
Inline Elements
only takes up as much width as necessary.
Inline Elements
clearly describes its meaning to both the browser
and the developer.
semantic element
element defines a section in a document.
<section>
</section>
element specifies independent, self-contained content.
<article>
</article>
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.
<header>
</header>
<header>
</header>
<footer>
</footer>
element defines a set of navigation links.
<nav>
</nav>
element defines some content aside from the content it is placed in (like a sidebar).
<aside>
</aside>
content should be indirectly related to the surrounding content
<aside>
</aside>
tag specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figure>
</figure>
element can be placed as the first or as the last child of a <figure> element.</figure>
<figcaption>
</figcaption>
tag defines a caption for a <figure> element</figure>
<figcaption>
</figcaption>
Defines a date/time
<time>
</time>
Defines a visible heading for a <details> element</details>
<summary>
</summary>
Defines a section in a document
<section>
</section>
Specifies the main content of a document
<main>
</main>
Defines marked/highlighted text
<mark></mark>
Defines additional details that the user can view or hide
<details>
</details>
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
- String
- number
- Bigint
- Boolean
- Undefined
- Null
- Symbol
- 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 <?php and ends 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
superglobals
- $GLOBALS
- $_SERVER
- $_REQUEST
- $_POST
- $_GET
- $_FILES
- $_ENV
- $_COOKIE
- $_SESSION
