web development my notes
URL is composed of
-Scheme- characters at the beginning of a URL followed by a colon ":" or colon and double slashes "://". Common schemes include http, https, mailto, and file -Hostname- the complete domain name following the scheme in a URL. Example in http://www.cdc.gov/alcohol the hostname is www.cdc.gov -Path- The characteristics to right of the hostname in a URL. Example- https://www.cdc.gov/alcohol, the path is alcohol -Query String- optional characters to the right of the question mark in a URL tht provide data for web server. -Fragment- optional characters at the end of a URL that start with #
Rounded corners:
-Single value - All four corners are equally rounded. -Two values - First value is top-left and bottom-right corners, second value is top-right and bottom-left corners. -Three values - First value is top-left, second is top-right and bottom-left, third is bottom-right. -Four values - First value is top-left, second is top-right, third is bottom-right, fourth is bottom-left
HTTP request and HTTP response are both composed of 4 parts
-Start line- specifies the HTTP version being used. A request's start lie includes a request type and path; a responses start line includes status code and phrase -Zero or more header fields- header field is a keyword followed by a colon and a value. Header fields supply additional information about the request or response -Empty line -Optional message body- message body contains data being transferred between a web browser and web server. In a request the message body may be empty or contain submitted form data. In response the message body may contain the requested resource
Tim Berners Lee invented the World Wide Web (WWW) or "web". WWW involved
-Text files, known as HTML files, containing links to other files -A program known as a browser for viewing HTML files -A set of rules, known as HTTP protocol, for transferring HTML files among computers
Display property controls the layout of the element on a webpage, this includes:
-inline - Displays the element as an inline element, like span or a elements. -block - Displays the element as a block element, like p, h1, or div elements. -none - Hides the element from being displayed, like style elements. -inline-block - Displays the contents of the element as a block element, but formats the element as an inline element. -list-item - Displays the contents of the element as a list item element
Domain names are hierarchical, domain names belong to numerous top level domain (TLD). such as
.com- commonly used for companies .net- typically used for networking/Internet focused companies .org- no-profit organizations .edu- used for colleges .gov- U.S governments Each country is assigned with a unique two-letter country code top-level domain (ccTLD). Like .uk - united kingdom .ru - russia .de - germany ICANN is the organization that manages TLDs, ICANN currently allows companies and organziations to create customized TLDs like .pizza and .church
Types of URL schemes
1. HTTPS: Hyperlink used to send requests and responses that are readable only by the client and server. 2. HTTP: Hyperlink used to send requests and responses over the Internet without encryption. 3. Mailto: Hyperlink used to send email. 4. File: Hyperlink used to refer to a document on the same computer as the web browser. 5. FTP: Hyperlink used to transfer data files
The <form> tag allows the web browser to submit information from the user to the server. The <form> tag has two primary attributes:
1. The action attribute indicates the URL where the form data should be sent. Typically the URL uses HTTPS so the form data is encrypted. 2. The method attribute indicates the HTTP request type the browser will use to communicate with the server. The method is either GET or POST. GET is the default method if no method is specified.
Padding and margin values
1st applies to the top, 2nd is left and right and 3rd is bottom. 4 values is top, right, bottom, left
pseudo-element
::after Add content after the matched element. ::before Add content before the matched element. ::first-line Match the first line of text in a block element. ::first-letter Match the first letter of text in a block element. ::selection Matches the text selected by user.
Comparator
= Attribute with exact value ~= Attribute contains whole words ^= Attribute begins with value
Responsive web design:
A web design approach that creates webpages that automatically move and resize parts depending on the display size and orientation.
-absolute -
Absolute positioning positions the element relative to the nearest positioned ancestor
Rehabilitation Act
Act that prohibits discrimination based on physical or mental disabilities.
Last modified:
DateTime the requested resource was last modified on the webserver
Date:
DateTime the response was generated by the web server
fixed -
Fixed positioning positions the element relative to the viewport in a fixed location
HTTP request methods
GET: request a representation of the specified resource HEAD: Request a response identical to GET but without the response body POST: Request the web server to accept the message body enclosed in the request as a new resource PUT: request the web server to accept the message body enclosed in the request as a modification of an existing resource DELETE: request the web server to delta the existing resource
HTTPS encrypts what?
HTTP traffic between a browser and web server so a network sniffer can not intercept sensitive information between HTTP traffic like passwords, credit card numbers and financial transaction
-relative -
Relative positioning positions the element relative to the element's default position -r
Software assistive technology:
Software, such as page readers, help users with vision or cognitive impairments.
-static -
Static positioning is the default positioning
Internet packet contains
TO and FROM IP addresses, the information to communicate, and other configuration information
Border:
The border box contains the padded content and adds an optionally colored area around the padding. property specifies the border's thickness, style, and color
Content:
The innermost box contains the content of the element, such as text and images
margin:
The margin box contains all three boxes and adds a transparent area around the border.margin property specifies the margin thickness. 20px species uniform thickness around the box. 10px 20px; specifies 10px top and bottom margins and 20px right and left margins. 10px 30px 20px; specifies 10px top margin, 30px right and left margins, and 20px bottom margin. margin: 10px 30px 20px 40px; specifies 10px top margin, 30px right margin, 20px bottom margin, and 40px left margin
Padding:
The padding box contains the content box and adds a transparent area around the content. Padding property specifies the padding thickness. The padding, border, and margin CSS properties can apply only to one side by adding a -top, -left, -bottom, or -right suffix to the CSS property. Ex: padding-top:5px; specifies 5 pixels of padding above the content
A CSS styling declaration is
a CSS property followed by a colon (:) and the property value.
A wireframe is
a blueprint, showing where the future content will be arranged
A section is
a collection of related content. <p> and <h1> are always within the <section>
Website:
a collection of related web pages
An absolute URL is
a complete URL. Ex: <a href="http://example.com/test.html">test</a> is a hyperlink using the absolute URL http://example.com/test.html
Internet Protocol (IP) address is 5
a computer's unique address on the internet. They are usually written as four numbers separated by dots. Each number represents 8 bits of the IP address, for a total of 32 bits. The smallest number in an IP address is 0 and the largest is 25
A <div> element is
a generic element for creating block containers to facilitate managing page content and is the only block element with no semantic meaning, unlike other block elements such as <p> and <table>
The <br> tag creates
a line break in a paragraph, such that the content after the line break appears on a new line. Good practice is to use <br> when the line break is essential to the content, such as lines in a poem or mailing address, and not just to add spacing for formatting a webpage
An entity is
a mechanism for writing special characters or symbols in HTML, such as mathematical symbols, characters in most languages, and many other symbols
An HTTP request is
a message sent from the web browser to the web server. Often the request asks the webserver to send back a web resource like an HTML file, image, CSS style sheet, JavaScript file, or video.
HTTP response is
a message sent from the web server back to the web browser in response to an HTTP request. Often responses contain the requested web resource.
A domain name is
a name for an IP address. Capitalization doesn't matter. So wikipedia and WIKIPEDIA are the same
A JavaScript function is
a named group of statements that can be executed by referring to that name
Hypertext Transfer Protocol (HTTP) is
a networking protocol that runs over TCP/IP and governes communication between web browsers and web servers.
An HTML comment is
a portion of the document that is not displayed by the browser. A comment begins with the <!-- character sequence and ends with the --> character sequence
Web browser:
a program that downloads an HTML document from a web server, displays the document to the user with appropriate formatting and allows users to interact with the document, such as clicking hyperlinks to access other documents. It uses HTML to understand the structure and semantics or meaning of a document
Web server:
a program that serves webpages to a web browser
JavaScript is
a programming language that runs in a browser, enabling webpages supporting actions like responding to a button click. JavaScript can be included in the HTML file's head or body parts
Transmission Control Protocol/Internet Protocol (TCP/IP) is
a protocol suite that governs how data packets are transferred over the internet from one machine to another.
An element is
a single HTML structure that is represented with HTML tags. HTML document is constructed with elements.
A favicon is
a small icon that identifies a website and typically displays in a browser tab
Internet assigned numbers authority (IANA) is
a standards organization that manages various internet number and symbols, like global IP address allocation, root zone management in DNS, and media types.
R is
a statistical programming language used to conduct data analytics, data science, and statistical work. As an open-source programming language, R relies on a network of developers to create libraries and packages with specific functionalities that extend the basic capabilities of the language
The POST method is
a technique used by a web browser to submit information to a web server by sending the information in the HTTP request body. When the user clicks the submit button in a form that uses the POST method, the browser performs the following: 1. Create an HTTP POST request using the URL from the form's action attribute. 2. Create a query string from the form data. Ex: first=Sarah&last=Connor 3. Place the query string in the HTTP request message body and send the request. 4. Display or update the web page using the HTTP response received from the server.
HTML (HyperText Markup Language) is
a textual language for creating webpages. HTML files are usually saved with a .html or .htm file extension
A radio button is
a widget for input elements with the type attribute of "radio", which allows users to select exactly one value from possibly many values. <input type="radio" name="movie" value="ET">
A tag attribute provides
additional information about the tag and is included only in the opening tag. An attribute has a name and a value, specified using the form: name="value". Ex: <meta charset="UTF-8"> has an attribute named charset with value "UTF-8
Browser cache is
an area on the computers disk where web content can be stored by the web browser for quick retrieval later. By caching web content, browsers can reduce amount of network traffic required to display previously visited webpages
A void element is
an element that only needs an opening tag. Other void elements include <img> for displaying an image and <input> for obtaining user input
entity tag (ETag) is
an identifier for specific version of a web resource
Web Hypertext Application Technology Working Group (WHATWG):
an organization that develops a variety of web standards and whose members include the major browser vendors. WHATWG produces the HTML Living Standard, a continually evolving standard without version numbers that replaces HTML5
A whitespace character is
an unprinted character such as the spaces between words and lines of text. Browsers treat all sequences of whitespace as a single space between non-whitespace characters. Whitespace characters include spaces, tabs, and newlines. So, a browser treats multiple lines of text as a single line
A container is
any part of a web document body that has opening and closing tags
Quirks mode is a
browser rendering mode that renders a webpage using non-standard layout rules emulating older web browsers.
The text-decoration property
can add or remove text decorations like underlining or a line-through. Possible values are: overline, line-through, underline, and none.
A CSS color
can be a pre-defined name like blue, or an rgb value like rgb(50, 100, 255). rgb is short for red, green, blue; all colors can be formed by combining those three colors. Values range from 0 (none) to 255 (bright).
The text-align property
changes the horizontal alignment of text for an element. Possible values are: left, right, center, and justify.
American with Disabilities Act
communication with disabled must be as effective as communication with others
Expires:
contains date.time indicating when requested resource is considered "stale"
A declaration block
contains one or more declarations separated by semicolons (;).
The text-transform property
converts letters to UPPERCASE, lowercase, or Capitalizes Initial Letters. Possible values are: uppercase, lowercase, and capitalize.
The HTML Living Standard, produced by WHATWG,
defines the minimal parts of an HTML document: 1. The <!DOCTYPE html> declaration instructs the web browser about what type of document follows. 2. The <html> opening and closing tags enclose everything but the <!DOCTYPE html> declaration. <html lang="en"> indicates that the document's language is English. 3. The <head> opening and closing tags contain the document title, document metadata, and various other elements that are typically not displayed in the webpage. 4. The <meta> tag specifies metadata, which is data that describes the document's data. <meta charset="UTF-8"> describes how characters are represented in the HTML document. Additional <meta> tags may be used to indicate when the document was saved, who the author is, etc. 5. The <title> opening and closing tags enclose the name of the document. The title is usually displayed in the browser's titlebar, is used by search engines, and is used for bookmarking. 6. The <body> opening and closing tags enclose all elements and cont
IDEA (Individuals with Disabilities Education Act)
disabled students must have the same education as others
Clear property
doesnt allow the element to float which way the code says
Relative units
em: font-size of the element (2em equal 2 times the size of the actual font) ex: x-height of the actual font ch: width of the zero rem: font-size of the root element vw: 1% of the width of the viewport vh: 1% of the height of the viewport vmin: 1% of viewport's smaller dimension vmax: 1% of viewport's larger dimension %: Fraction of parent element
Rehab Act of 1973 Section 508
federal government may not procure electronic and information technology goods and services--- including websites-- that are not fully accessible
An inline element
fills the minimum space possible in the element's parent container and can only contain text or other inline elements
A block element (sometimes called a block-level element)
fills the width of the element's parent container and can contain other block elements, inline elements, and text. Block elements include <h1>, <table>, and <p>.
A tag
has a descriptive name surrounded by < and > characters that the web browser uses to display content. Ex: <p> specifies a paragraph. Most HTML elements have an opening and closing tag
An id attribute
identifies an HTML element so JavaScript can manipulate the element
User agent:
identifies the browser making the request
Server:
identifies the web server software that generated the response
img
image
The JPEG (Joint Photographic Experts Group)
image format is commonly used for digital photographs
The PNG (Portable Network Graphics)
image format is commonly used for line art, screenshots, or images requiring transparency.
The GIF (Graphics Interchange Format)
image format is commonly used for simple animated images
Request methods
indicate the desired action to perform on a resource
Transport layer Security (TLS)
is a HTTPS protocol, which uses asymmetric public keys to encrypt data between the browser and web server.
Webpage:
is a document viewed in a web browser
Traffic sniffer:
is a software that monitors network traffic and allows users to inspect HTTP requests and responses
Cascading Style Sheets (CSS)
is a textual language for describing how a webpage is styled for visual presentation. CSS controls the look and layout of webpage content.
Second level domain
is commonly used for an organizations name such as wikipedia in wikipedia.org.
deprecated feature
is part of a language that is officially discouraged because newer or better features exist, or because the deprecated feature is no longer considered safe. Ex: The <center> tag is an officially deprecated tag that should no longer be used
The <span> element
is the generic element for creating inline containers to facilitate managing content on the page. Unlike other inline elements, such as <a> and <em>, the <span> element has no semantic meaning.
Domain names are commonly seen in URLs. A uniform resource locator (URL)
is the location of a web resource on the web, such as http://www.cdc.gov/alcohol/faqs.htm. A web resource is a retrievable item like HTML file,image,video, CSS stylesheet, etc.
Hypertext markup link (HTML):
is the standard markup language for web documents. It defines the structure and content of a webpage
Cache-control:
is used to specify a number of caching directives
When putting a negative (-) in front of the position
it would position that either to the left or higher.
Combinators:
li ~ img is a general sibling selector *.hide is a universal selector h1 + p is a adjacent sibling selector p > img is a child selector ul span, ol span is a multiple selector
a
link
Content type:
media type of the response's message body
Rehab Act of 1973 Section 504
no intentional or unintentional discrimination based upon a persons disability
Content length:
number of bytes in the response's message body, the web browser uses the content length to determine how much data to expect from the web server
Screen size:
physical dimension in pixels of a devices screen
An inline style
places CSS declarations inside a tag's style attribute. <p style="color:green"> Im green </p>
An external stylesheet
places CSS rules in a separate file that is imported into an HTML document with a <link> tag. <link href="style.css" rel="stylesheet" <p> Im purple</p>
An embedded stylesheet
places CSS rules in an HTML document's head using <style> tags
DNS servers
primary goal is to convert domain names into IP addresses
The font-size
property changes the font size, such as 120%, small, or 12px.
The font-style
property changes the text style, such as normal, italic, or oblique.
The font-family
property specifies the font family, such as "Times New Roman" or serif.
The font-weight
property specifies the font weight, such as normal or bold.
The CSS property list-style-type
provides the ability to change the bullet used in an unordered list and offers more numbering options in an ordered list
Third-level and further-level domains
refer to sub-computer systems local to an organization. As in cs.stanford .edu, the cs would be the third level. www is a commonly used third-level domain. Many orgaixnaion optionally use www, therefore www.stanford.edu would bring you to the same place as in stanford.edu
Document markup:
special marking in the document that provides additional information about links, formatting, and images
The pseudo-class selector,
specified with a colon character followed by a pseudo-class name, matches elements based on user behavior or element metainformation.Ex: :hover { color: blue; } selects elements under the mouse cursor. :enabled - Element is enabled. :hover - Mouse is hovering over the element. :empty - Element has no child elements. :lang(language) - Element contains text in a specified language
A CSS rule
specifies styling properties for specific HTML elements. CSS rules may be placed within <style> tags in the HTML file's head part. Each rule indicates the element to be styled like h1 (header1) or p (paragraph), followed by a list in braces { } of property:value items like color:blue
A CSS selector
specifies the HTML elements to which the specific style rule applies
The text-indent property
specifies the first line's indentation amount
The font-variant property
specifies the variant of the text, such as normal or small-caps.
A hyperlink, or link,
specifies where other information is located and what action the web browser should perform when a user clicks the hyperlink
200
status meaning: Standard response for a successful request status phrase: OK
302
status phrase: Found status meaning: The resource should temporarily be requested at a different URL
500
status phrase: Internal Server Error status meaning: Something unexpected happened on the web server
301
status phrase: Moved Permanently status meaning: The response should always be requested at a different URL
404
status phrase: Not Found status meaning: The resource could not be located
304
status phrase: Not Modified status meaning: The resource has not been modified since the last time the resource was requested
403
status phrase:Forbidden status meaning: The web browser does not have permission to access the resource
A variable
stores a value or a link to an element of a webpage
Hypertext:
text that has links to other texts
Web accessibility is
the ability of users with disabilities to access and use a webpage with reasonable effort
Separation of concerns is
the design principle of breaking up web content using distinct languages and documents that overlap as little as possible. In modern web design, document structure and text, visual layout, and page interaction are separately specified using three key languages. 1. HTML is the language that describes the page content. 2. CSS is the language that describes page layout. 3. JavaScript is the language that provides interactive functionality.
Host:
the domain name for the requested path
JavaScript describes
the dynamic behaviors and actions of a webpage
File Transfer Protocol (FTP):
the early way for transferring files over the internet users used FTP programs to connect to servers, look at listings of available documents, and download documents of interest. FTP is used to transfer files by logging into a computer with the files and typing commands to get the desired files
When a computer sends a packet using a domain name system over the internet,
the first step is to contact a DNS server to convert the domain name into IP address.
Linkrot is
the general name for once a valid link that now returns a 404 status code
The Internet of Things (abbreviated as IoT) is
the global collection of communicating devices that sense and control technology on behalf of humans.
World Wide Web Consortium (W3C) is
the international standards organization that traditionally has controlled a number of web standards, including HTML. HTML5 was the latest HTML standard released by the W3C in 2014
CSS specifies
the layout and visible appearance
An image's aspect ratio is
the ratio of the image width to the image height. The aspect ratio is written as width:height. Ex: An image 500 pixels wide and 250 pixels high has an aspect ratio of 500:250, which simplifies to 2:1
A relative URL specifies
the relative path to the web resource with no scheme or hostname. Ex: <a href="test.html">test</a> uses the relative URL test.html to refer to an HTML document on the same website and with the same path as the current HTML document. May use ../ in front of a filename to indicate the file is one directory above the current HTML document
404 is
the status code which is a code number for page not found
Cognitive computing is
the use of artificial intelligence techniques and access to vast amounts of data to simulate human problem solving in complex situations with ambiguity, changing data, and even conflicting information.
A heading provides a
title for each section. Headings are bold by default and are visually separated from the other text by extra spacing. Heading tags exist for the first six levels of sections: <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>
elements positioned relative to the document body scroll with the page contents
true
Affordances:
visual clues that guide the user in figuring out how to use the app
Browser redirect is
when the web server returns a 301 or 302 status code with a location header indicating the URL the browser should load next
entity: © © ©
©