EXAM IDENTIFICATION AND ESSAY
Client server model = client requests and server responses
Html element = it encompasses the element within angle brackets
Internet protocol/transmission control protocol = fast web development possible
CSS = style rules
<div> = container element
http(hypertext transfer protocol) = requests and response operate
link layer = physical transmission of data across media establish logical links
selector = which html element will be affected by de1clarations in the rule
<article> =potentially be read or consumed independently
Declaration block = series of declaration
CSS rule = selector, property:value, declaration
DNS(Domain name system) = resolving domain name to ip addresses
FTP (File transfer protocol) = transferring files between computers
Markup = way to indicate information about the content that is distinct from the content
URL = uniquely identify a resource on WWW
Browser = http request to URL
Aside = sidebars
CSS = w3c standard, appearance
Internet layer = best effort communication
Router = uses a routing table
Static vs Dynamic Websites
➢ Static websites present the same fixed content to every user (ex. Wikipedia). Dynamic
websites generate content in real-time, adapting based on user interactions or data,
this page content can vary from user to user (ex. Facebook)
Difference between IPv4 and IPv6
➢ IPv4 and IPv6 are internet protocols for identifying devices, but IPv6 is more
advanced. IPv4 uses 32-bit addresses (e.g., [Link]), supporting 4.3 billion
devices, while IPv6 uses 128-bit hexadecimal addresses (e.g., [Link]), offering
virtually unlimited addresses.
Proper nesting of HTML elements
➢ In HTML, proper nesting ensures that elements are opened and closed in the correct
order, maintaining a well-structured document. The key rule is that child elements
must be fully contained within their parent elements and closed before the parent
closes. An element that contains other elements is called a parent, while the contained
elements are children. Additionally, children of a parent's child are referred to as
descendants, and any parent of a child is considered an ancestor.
Non-semantic vs semantic HTML
➢ Semantic HTML (footer, header, nav) uses tags that clearly define the meaning and
purpose of content, while non-semantic HTML uses generic tags (div, span) primarily
for styling or layout, without conveying specific meaning
Inline, Embedded, and External CSS
➢ Inline is written directly within an HTML element using the style attribute. Embedded
is defined within a <style> tag inside the <head> section of an HTML file. External is
stored in a separate .css file and linked using <link> in the HTML <head>.
Advantage of box model in CSS
➢ The CSS Box Model controls element size, spacing, and positioning using content,
padding, border, and margin. It ensures consistent layouts, improves readability,
enhances responsiveness, and simplifies debugging.
CHAPTER 1
▪ WWW – subset of the internet
▪ Telephone network – example of circuit switching and requires more bandwidth
▪ Packet networks – does not require a continuous connection, more robust, efficient
use of network resources
▪ URLs (Uniform Resource Locator) – uniquely identify a resource on the WWW
▪ HTTP (Hypertext Transfer Protocol) – request and response operate
▪ Servers – respond to HTTP requests
▪ Browser – make HTTP request to URLs and that can display HTML
▪ HTML (Hypertext Markup Language) – publish documents
▪ Static websites – consists of HTML pages that look identical to all users
▪ Dynamic websites – displays different content and it vary from user to user based on
their actions, preferences, or other variables.
▪ Client-Server Model
o Server – 24/7 computer agent that listens request from clients
o Client – computer agent that makes request and receives response from the
server
o Request-Response Loop – most basic mechanism on the server for receiving
requests and transmitting data in response. The client initiates a request to a
server and gets a response that could include some resource like an HTML
file, an image, or some other data.
o Peer-to-Peer Alternative – where each computer is functionally identical, each
node (i.e., computer) is able to send and receive data directly with one another.
In such a model, each peer acts as both a client and server, able to upload and
download information.
▪ Web servers – servicing HTTP requests
▪ Application servers – hosts and executes web app. (PHP)
▪ Database servers – devoted to running a Database Management System (DBMS)
▪ Mail servers – a server creating and satisfying mail requests, typically using the
Simple Mail Transfer Protocol (SMTP).
▪ Media servers – streaming server, special type of server dedicated to servicing
requests for images and videos
▪ Authentication servers – handles the most common security needs of web
applications
CHAPTER 2
▪ Protocol – a set of rules that partners use when they communicate
▪ Internet Protocols/ TCP (Transmission Control Protocol) – implemented in every
operating system, and make fast web development possible.
▪ Link layer - responsible for both the physical transmission of data across media (both
wired and wireless) and establishing logical links
▪ Internet layer – makes use of IP addresses and provides best effort communication
▪ Transport layer – ensures transmissions arrive in order and without error.
▪ Application layer
o HTTP – for web communication
o SSH (Secure Shell Protocol) – allows remote command-line connections to
servers.
o FTP (File Transfer Protocol) – transferring files between computers.
o POP/IMAP/SMTP – Email-related protocols for transferring and storing
email.
o DNS (Domain Name System) – sed for resolving domain names to IP
addresses.
▪ DNS Name Levels
o [Link]
- Server1 – fourth level domain
- www – third level domain
- funweb – second level domain
- .com – top level domain
▪ Types of Top-Level Domain
o Generic top-level domain (gTLD)
o Country code TLD (CCTLD)
o Arpa – first assigned TLD, used for reverse DNS lookups
▪ Uniform Resource Locators
o Domain – identifies the server from which we are requesting resources.
o Path – root of a web server corresponds to a folder somewhere on that server
o Query String – critical way of passing information
o Fragment – used as a way of requesting a portion of a page
o Port – The optional port attribute allows us to specify connections to ports
other than the defaults. The syntax for the port is to add a colon after the
domain
▪ HTTP Headers - are sent in the request from the client and received in the response
from the server.
o Request headers – include data about client machine
o Response headers – have information about the server answering the request
and the data being sent
▪ GET Request – common type of HTTP request and asking for a resource located at a
specified URL to be retrieved
▪ POST Request – transmit data to a server using an HTML form
▪ HTTP Response Codes
o 2## - successful responses
o 3## - redirection-related responses
o 4## - client errors
o 5## - server errors
▪ Web browsers – users visit a URL which results in a web page displayed
▪ Browser rendering – interpreting the entire HTML with assets for display
▪ Browser caching – significant impact in reducing network traffic
▪ Browser extensions – extends basic browser functionality
▪ Web servers – a computer that responds to HTTP requests and must choose an
application stack to run a website
o Application stacks
- LAMP – Linux (OS), Apache (webserver), MySQL (database), PHP
(scripting language)
- WAMP
- WISA
- MEAN
CHAPTER 3
▪ HTML – markup language
▪ Markup – way to indicate information about the content that is distinct from the
content
▪ XHTML – uses stricter extensive markup language
▪ HTML5 – in modern browsers, new and not always taught, and W3C
recommendation
▪ W3C (World Wide Web Consortium) – is the main international standards
organization for the World Wide Web.
▪ HTML documents – are composed of textual content and HTML elements
▪ HTML elements – encompasses the element name within angle brackets (i.e., tag)
and HTML elements can also contain attributes as well the content within the tag.
▪ Empty element – does not contain any text content instead it is an instruction to the
browser to do something. In XHTML, empty elements had to be terminated by a
trailing slash. In HTML5, the trailing slash is optional
▪ Nesting HTML elements
o Correct: <p>Remedial pa<strong>Hahaha</strong></p>
o Incorrect: <p>Remedial pa<strong>Hahaha</p></strong>
▪ Semantic markup – focus on the structure of the document, not the visual
o Advantages
- Maintainability
- Performance
- Accessibility
- Search engine optimization
▪ HTML Document Structure
o DOCTYPE – tells browser what type of document to process
o <html> – contains all elements
o <head> – descriptive elements
o <body> – content to be displayed
o <meta> – declares character encoding is UTF-8
o <link> – specifies an external CSS
o <script> – external javascript
▪ Headings – six levels (h1-h6), document outline
▪ <p> – text container
▪ <div> – container for grouping content
▪ <a> – stands for anchor and it’s for links
▪ HTML5 Semantic Structure
o Header – usually contain section’s heading but not required. It can also be
used to wrap section’s table, form or logos
o Nav – navigation
o Main – meant to contain the main unique content of the document
o Section – broader element
o Article – used for blocks of content
o Figure and figcaption – for images or any type of essential content and
annotations
o Aside – used for sidebars, pull quotes or groups of advertising images
CHAPTER 4
▪ CSS (Cascading Style Sheets) – W3C standard for describing the appearance of
HTML elements
o Benefits of CSS
- Improve control over formatting
- Improve site maintainability
- Improve accessibility
- Improve page download speed
- Improve output flexibility
▪ CSS document – consists of one or more style rules
▪ Rule/ CSS rule – consists of a selector that identifies the HTML element or elements
that will be affected by a series of property:value pairs (each pair is also called a
declaration)
▪ Declaration block – series of declaration
▪ Selector – beginning of every CSS rule, it identifies which element in the HTML
document will be affected
▪ Properties – each individual CSS declaration must contain a property
▪ Values – dependent upon the property, some property values are from predefined list
of keywords and others are values such as length, measurements, percentages and etc.
▪ Colors
o Name
o RGB
o Hexadecimal
o RGBa
o HSL
▪ Relative unit
o px
o cm
o %
o vw, vh
▪ Absolute unit
o in
o cm
o pt
▪ Location of Styles
o Inline – within an HTML element
o Embedded – inside the <head> of an HTML document
o External – external text file with the .css extension
▪ Three different stylesheets
o Author-created stylesheet
o User SS
o Browser SS
▪ Selectors
o Element selectors – select all instances of a given HTML element
o Class selector – simultaneously target different HTML elements
o Id selector – target specific element
o Attribute selector – select HTML elements either by the presence of an
element attribute or by the value
o Pseudo-element selector – select something that does not exist explicitly as an
element in the HTML tee but recognizable
o Pseudo-class selector – targets either a particular state or in CSS3, a variety of
family relationship
▪ Contextual selectors
o Descendant – a specified element that is contained somewhere within another
specified element. (div p)
o Child – direct child of the specified element. (div>h2)
o Adjacent sibling – next sibling (i.e., comes directly after) of the specified
element (h3+p)
o General sibling – shares the same parent as the specified element. (h3~p)
▪ Box Model
▪ CSS Text Styling
o Font – A combined shorthand property that allows you to set the family, style,
size, variant, and weight in one property. style weight variant size font-family
o Font-family
o Font-size
o Font-style
o Font-variant
o Font-weight
CHAPTER 5
▪ Table – represents information that exist in 2d grid
▪ Forms – provide user to interact with a web server and cannot contain another
<form> element.
▪ Query strings – a series of name=value pairs separated by ampersands (the &
character). The values in the query string are the data entered by the user.
▪ GET and POST – The difference resides in where the browser locates the user's form
input in the subsequent HTTP request. With GET (useful for testing and developing) ,
the browser locates the data in the URL of the request; with POST , the form data is
located in the HTTP header after the HTTP variables.
▪ Form Control Elements
o <button>
o <datalist> - list of predefined values
o <fieldset> - groups related element
o <form> - form container
o <input>
o <label> - label for form input element
o <legend> - label for fieldset group
o <optgroup> - groups related options in multi-item list
o <option>
o <select> - a multi-item list
o <textarea> - multiline text entry box
o <output> - result of calculation
▪ Select list – one or more items
▪ Radio buttons – single item selection
▪ Checkboxes – yes/no responses
▪ Microformats – hCard, common microformat. Sematically markup contact
information for a person. A small patter of HTML markup and attributes to represent
common blocks of information
CHAPTER 6
▪ Raster – composed of pixels and it has a fixed set number of pixels, dramatically
increasing or decreasing its size can dramatically affect its quality
▪ Vector – not composed of pixels but instead is composed of objects such as lines,
circles, Bezier curves, and polygons. They are resolution independent, only vector
images can be shrunken or enlarged without a loss of quality.
▪ Color Models
o RGB – best for digital images
o CMYK (Cyan, Magenta, Yellow, Key (Black)) – ideal for designs that will be
printed
o HSL
o Opacity
o Gradients
▪ Color Relationship (just keywords)
o Complementary – opposite ends
o Analogous – adjacent to one another
o Split complementary – uses primary and two colors on each side of its
complementary color.
o Triad – three colors in an equilateral triangle
o Tetradic (rectangle) – double complement, combines two set
▪ Color depth – maximum number of colors that an image can contain
▪ Dithering – monitors with limited color capacity create the illusion of more colors by
blending available colors in a diffuse pixel pattern, obvious on screen than on paper
▪ Image size – how many pixels it contains. Whenever resizing a raster image, it needs
the program to interpolate.
▪ Enlarging – noticeable reduce its quality
▪ Decreasing – reduce quality but not noticeable
▪ JPEG (Joint Photographic Experts Group) – 24-bit, true-color, ideal for
photographic img
▪ GIF (Graphic Interchange Format) – 1st image format, 8-bit or less, not great for
photos
▪ PNG (Portable Network Graphics) – lossless compression, 8-bit, 24-bit
▪ SVG (Scalable Vector Graphics – vector format, no loss of quality when resized
▪ TIF (Tagged Image File) – cross-platform lossless image format
▪ WebP – new image file promoted by Google, lossy and lossless compression
▪ Codec – media is encoded using compression/decompression software
▪ Container formats – second key concept for understanding media formats
