ITEC 50 Web Systems Technologies 1 Reviewer PDF

Reviewer for ITEC 50 – Web Systems and Technologies 1 | Midterms Examination Prepared by: Mr. Miguel Joie S. Polines | CEIT-DIT | Cavite State University Introduction to Web Development The main purpose of the internet is to be able to send messages as quickly as possible. 1960s –...

Reviewer for ITEC 50 – Web Systems and Technologies 1 | Midterms Examination Prepared by: Mr. Miguel Joie S. Polines | CEIT-DIT | Cavite State University Introduction to Web Development The main purpose of the internet is to be able to send messages as quickly as possible. 1960s – ARPANET (Advanced Research Projects Agency Network) was created. ARPANET did not use circuit switching but instead used an alternative communications method called packet switching. To promote the growth and unification of the disparate networks, a suite of protocols was invented to unify the networks. A protocol is the name given to a formal set of publicly available rules that manage data exchange between two points. Communications protocols allow any two computers to talk to one another, so long as they implement the protocol. A protocol is a set of rules that partners use when they communicate. A set of rules, for routing and addressing packets of data so that they can travel across networks and arrive at the correct destination. Protocols: New networks built in the United States began to adopt the TCP/IP (Transmission Control Protocol/Internet Protocol) communication model On January 1, 1983, TCP/IP was adopted across all of ARPANET. The next two decades, TCP/IP networking was adopted across the globe. Sir Tim Berners-Lee is the web inventor and founding director of the World Wide Web foundation. A Uniform Resource Locator (URL) to uniquely identify a resource on the WWW. The Hypertext Transfer Protocol (HTTP) to describe how requests and responses operate. It is used for web communication. SSH. The Secure Shell Protocol allows remote command-line connections to servers. FTP. The File Transfer Protocol is used for transferring files between computers. POP/IMAP/SMTP. Email-rel ated protocols for transferring and storing email. DNS. The Domain Name System protocol used for resolving domain names to IP addresses. The early web: A software program (later called web server software) that can respond to HTTP requests. Hypertext Markup Language (HTML) to publish documents. A program (later called a browser) that can make HTTP requests to URLs and that can display the HTML it receives. In late 1994, Berners-Lee helped found the World Wide Web Consortium (W3C). W3C is an international standards organization that oversees the growth of the web. What’s the difference between Intranet and Internet? Intranet refers to an internal network using Internet protocols that is local to an organization or business. Intranet resources are often private uses the internet protocols such as TCP/IP and are accessible via the web browser. The Internet is a public network that anyone can access, meaning the key difference with the Intranet is the level of access and who can use it. Page 1/12 Reviewer for ITEC 50 – Web Systems and Technologies 1 | Midterms Examination Prepared by: Mr. Miguel Joie S. Polines | CEIT-DIT | Cavite State University What’s the difference between Static and Dynamic Website? Static Website consists only of HTML pages that always look identical for all users. Users could read the pages but could not provide feedback, Dynamic Website read content from databases, interface with existing enterprise computer systems, communicate with financial institutions, output HTML that is sent to user’s browsers The Client-Server Model Server is a computer agent that active 24/7, listening for requests from clients. Client a computer agent that makes requests and receives responses from the server, in the form of response codes, images, text files, and other data. The Request – Response Loop Within the client-server model, the request-response loop is the 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. Types of Servers: A web server is a computer servicing HTTP requests. An application server is a computer that hosts and executes web applications. A database server is a computer that is devoted to running a Database Management System (DBMS), such as MySQL. A mail server is a computer creating and satisfying mail requests, typically using the Simple Mail Transfer Protocol (SMTP). A media server (also called a streaming server) is a special type of server dedicated to servicing requests for images and videos. An authentication server handles the most common security needs of web applications In-depth explanation of Protocols: 1. Transmission Control Protocol / Internet Protocol (TCP/IP) A suite of communication protocols used to interconnect network devices on the internet. It is originally abstracted as a four-layer stack. Later abstractions subdivide it further into five or seven layers. a) Physical Layer – transmit raw bit stream over the physical medium b) Data Link Layer – defines the format of data on the network c) Network Layer – decides which physical path the data will take. d) Transport Layer – transmit data using transmission protocols including TCP and UDP. e) Session Layer – maintains connections and is responsible for controlling ports and sessions. f) Presentation Layer – Ensures that data is in a usable format and is where data encryption occurs. g) Application Layer – Human-computer interaction layer, where applications can access the network services. Page 2/12 Reviewer for ITEC 50 – Web Systems and Technologies 1 | Midterms Examination Prepared by: Mr. Miguel Joie S. Polines | CEIT-DIT | Cavite State University Four-Layered Architecture 1. LINK LAYER the lowest layer, responsible for both the physical transmission of data across media (both wired and wireless) and establishing logical links. handles issues like packet creation, transmission, reception, error detection, collisions, line sharing, and more. The one term here that is sometimes used in the Internet context is that of MAC (media access control) addresses. These are unique 48- or 64-bit identifiers assigned to network. 2. INTERNET LAYER sometimes also called the IP Layer, routes packets between communication partners across networks. provides “best effort” communication. It sends out a message to its destination, but expects no reply, and provides no guarantee the message will arrive intact, or at all 3. TRANSPORT LAYER The transport layer ensures transmissions arrive in order and without error. 4. APPLICATION LAYER used by end-user software such as web browsers and email clients. provides protocols that allow software to send and receive information and present meaningful data to users. IPv4 and IPv6 IPv4 is composed of 32-bit address length and is the fourth version of the Internet Protocol (IP). IPv6 is composed of 128-bit address length and is the latest updated version of the Internet Protocol (IP). Domain Name System the Internet's system for mapping alphabetic names to numeric Internet Protocol (IP) addresses like a phone book maps a person's name to a phone number. Hypertext Transfer Protocol (HTTP) The Hypertext Transfer Protocol is an application protocol for distributed, collaborative, hypermedia information systems that allows users to communicate data on the World Wide Web. What Is HTML and Where Did It Come From? HTML is defined as a markup language. A markup language is simply a way of annotating a document in such a way as to make the annotations distinct from the text being annotated. HTML, Tex, XML, and XHTML allow users to control how text and visual elements will be laid out and displayed. At its simplest, markup is a way to indicate information about the content that is distinct from the content. This “information about content” in HTML is implemented via tags Page 3/12 Reviewer for ITEC 50 – Web Systems and Technologies 1 | Midterms Examination Prepared by: Mr. Miguel Joie S. Polines | CEIT-DIT | Cavite State University HTML Syntax Elements and Attributes HTML element is often used interchangeably with the term tag. HTML elements can also contain attributes. An HTML attribute is a name=value pair that provides more information about the HTML element. Nesting HTML Elements This underlying family tree or hierarchy of elements is called Document Object Model. Cascading Style Sheets (CSS) The principal mechanism for web authors to modify the visual presentation of their web pages A W3C standard for describing the appearance of HTML elements. With CSS, we can assign font properties, colors, sizes, borders, background images, positioning and even animate elements on the page. CSS can be added directly to any html element (via the style attribute), within the element, or, most commonly, in a separate text file that contains only CSS. Parts of a CSS Syntax: Page 4/12 Reviewer for ITEC 50 – Web Systems and Technologies 1 | Midterms Examination Prepared by: Mr. Miguel Joie S. Polines | CEIT-DIT | Cavite State University Selectors Every CSS rule begins with a selector. The selector identifies which element or elements in the HTML document will be affected by the declarations in the rule. Another way of thinking of selectors is that they are a pattern that is used by the browser to select the HTML elements that will receive the style. Properties Each individual CSS declaration must contain a property. These property names are predefined by the CSS standard. The CSS2.1 recommendation defines over a hundred different property names Values Each CSS declaration also contains a value for a property. The unit of any given value is dependent upon the property. Some property values are from a predefined list of keywords. Others are values such as length measurements, percentages, numbers without units, color values, and URLs. Location of Styles in CSS 1. Inline CSS - are style rules placed within an HTML element via the style attribute. 2. Internal CSS (Embedded Style Sheets) - are style rules placed within the element (inside the element of an HTML document). 3. External CSS - are style rules placed within an external text file with the.css extension. This is by far the most common place to locate style rules because it provides the best maintainability. When you make a change to an external style sheet, all HTML documents that reference that style sheet will automatically use the updated version. Note: In HTML5, omitting the / is technically allowed, so it's not always an error — but in some environments, validators, or XML- based processing, the missing / can cause issues. Selectors Tell the browser which elements will be affected by the property values. CSS selectors allow you to select individual or multiple html elements. Three basic selector types 1. Element Selector – Targets all elements of a specific type (e.g., all or tags). 2. Class Selector – Targets multiple elements that share the same class. 3. ID selector – Targets a unique element using the id attribute. Attribute selector - provides a way to select HTML elements either by the presence of an element attribute OR by the value of an attribute. Page 5/12 Reviewer for ITEC 50 – Web Systems and Technologies 1 | Midterms Examination Prepared by: Mr. Miguel Joie S. Polines | CEIT-DIT | Cavite State University Pseudo-element Selector A pseudo-element selector is a way to select something that does not exist explicitly as an element in the HTML document tree, but which is still a recognizable selectable object. For instance, you can select the first line or first letter of any HTML element using a pseudo- element selector. Pseudo-class Selector A pseudo-class selector does apply to an HTML element but targets either a particular state or a variety of family relationships. Pseudo-Element vs Pseudo-Class Pseudo-Element (::) – For a part of an element (example: First letter, first line, before/after content) Pseudo-Class (:) – For a state or relation of an element. (example: Hover, focus, nth-child) Page 6/12 Reviewer for ITEC 50 – Web Systems and Technologies 1 | Midterms Examination Prepared by: Mr. Miguel Joie S. Polines | CEIT-DIT | Cavite State University A contextual selector (in CSS3 also called combinators) allows you to select elements based on their ancestors, descendants, or siblings. A descendant selector matches all elements that are contained within another element. Three different types of stylesheet User style sheets - allow the individual user to tell the browser to display pages using that individual's own custom style sheet. This option can usually be found in a browser's accessibility options. Author-created style sheets Browser style sheets - defines the default styles the browser uses for each HTML element. Specificity Specificity is how the browser determines which style rule takes precedence when more than one style rule could be applied to the same element. In CSS, the more specific the selector, the more it takes precedence Location An inline style will override one defined in an external author style sheet or an embedded style sheet. When the same style property is defined multiple times within a single declaration block, the last one will take precedence. The CSS Box Model A fundamental concept in web design that describes how elements are structured and spaced on a webpage. Page 7/12 Reviewer for ITEC 50 – Web Systems and Technologies 1 | Midterms Examination Prepared by: Mr. Miguel Joie S. Polines | CEIT-DIT | Cavite State University 1. Content - The actual text or image inside the element. It the innermost part of the CSS Box Model and represents the actual data inside an element, such as text, images, videos, or other embedded elements. The size of the content is controlled by properties like width, height, and max-width. 2. Padding – It is the space between the content and the border of an element. It creates internal spacing to keep content visually separated from its edges. Unlike margin, which affects spacing between elements, padding affects the space inside an element. 3. Border – the line that surrounds the content and padding of an element. It acts as a boundary and can be customized in terms of width, style, and color. 4. Margin – the outermost layer of the CSS Box Model. It creates space between elements on a webpage, preventing them from overlapping or being too close together. Block vs. Inline Elements HTML elements behave in different ways. Block elements start on a new line and take up the full width available, they stretch out to the left and right as far as they can, while Inline elements only take up as much space as necessary. Block elements A block element always starts on a new line and takes up the full width of its container, regardless of its content size. It naturally pushes any following elements to a new line, making it useful for structuring layouts. Block elements can contain both other block elements and inline elements, and their width, height, margin, and padding can be freely adjusted. Inline elements An inline element stays within the same line as surrounding content and only takes up as much space as its content requires. Unlike block elements, inline elements do not force a line break and cannot have their width and height manually adjusted. They are primarily used for styling and formatting parts of text or embedding small elements like links and images. Inline elements can only contain other inline elements, not block elements. Border and Box Shadow Borders and shadows provide a way to visually separate elements. Borders can be put around all four sides of an element, or just one, two, or three of the sides. Font Family A series of alternate fonts to use in case the original font choice is not on the user’s computer is called web font stack. ideal, alternative, common, and then generic –@font-face selector This selector allows you to use a font on your site even if it is not installed on the end user’s computer. While @font-face has been part of CSS for quite some time, the main stumbling block has been licensing. Fonts are like software in that they are licensed and protected forms of intellectual property. Page 8/12 Reviewer for ITEC 50 – Web Systems and Technologies 1 | Midterms Examination Prepared by: Mr. Miguel Joie S. Polines | CEIT-DIT | Cavite State University Color Models – RGB The more common way to describe color in HTML and CSS is to use the hexadecimal #RRGGBB form in which a number between 0 and FF (255 in decimal) is used for the red, green, and blue values. Specify a color in CSS with decimal numbers using the notation: rgb(100,55,245). These are examples of the most commonly used color model, namely, the RGB (for Red- Green-Blue) color model. Each tiny pixel in an RGB device is composed of even tinier red, green, and blue subpixels. Because the RGB colors combine to create white, they are also called additive colors. Color Models – CMYK In traditional color printing, color is created through overlapping cyan, magenta, yellow, and black dots that, from a distance, create the illusion of the combined color. As white light strikes the color ink dots, part of the visible spectrum is absorbed, and part is reflected back to your eyes. For this reason, these colors are called subtractive colors. Color Models – HSL The HSL color model (also called the HSB color model, in which the B stands for brightness) It breaks a color down into three components: o hue (what we generally refer to as color); o saturation (the intensity or strength of a color— the less the saturation, the grayer the color); and o lightness (that is, the relative lightness or darkness of a color) Color Models – Opacity Another dimension to color that is independent of the color model and is supported by many image editors. The degree of transparency in the color. This value is also referred to as alpha transparency. Page 9/12 Reviewer for ITEC 50 – Web Systems and Technologies 1 | Midterms Examination Prepared by: Mr. Miguel Joie S. Polines | CEIT-DIT | Cavite State University The idea behind opacity is that the color that is displayed will vary depending on what colors are “behind” it. Image Concepts – Color Depth Color depth refers to the maximum number of possible colors that an image can contain. Image Concepts – Display Resolution The display resolution refers to how many pixels a device can display. This is partly a function of hardware limitations as well as settings within the underlying operating system. Like image size, it is expressed in terms of the number of pixels horizontally by the number of pixels vertically. Some common display resolutions include 1920 × 1600 px, 1280 × 1024 px, 1024 × 768 px, and 320 × 480 px. The physical size of pixels and their physical spacing will change according to the current display resolutions and monitor size. Thus, any given web page (and its parts) will appear smaller on a high-resolution system (and larger on a low-resolution system). File Formats – JPEG Joint Photographic Experts Group or JPEG or JPG is a 24-bit, true-color file format that is ideal for photographic images. It uses a sophisticated compression scheme that can dramatically reduce the file size (and hence download time) of the image A lossy compression scheme, reduces the file size by eliminating pixel information with each save. You can control the amount of compression (and hence the amount of pixel loss) when you save a JPEG. At the highest levels of compression, you will begin to see blotches and noise (also referred to as artifacts) appear at edges and in areas of flat color File Formats – GIF The GIF (Graphic Interchange Format) is an 8-bit or less format, meaning that it can contain no more than 256 colors. It is ideal for images with flat-bands of color or with limited number of colors GIF uses a simpler lossless compression system, which means that no pixel information is lost. When a color is flagged as transparent, all occurrences of that color in the GIF will be transparent, meaning that any colors “underneath” the GIF (such as colored HTML elements or CSS-set image backgrounds) will be visible, File Formats – PNG The PNG (Portable Network Graphics) format was created when it appeared that there were going to be patent issues in the late 1990s with the GIF format. Lossless compression. 8-bit (or 1-bit, 2-bit, and 4-bit) indexed color as well as full 24-bit true color (higher color depths are supported as well). From 1 to 8 bits of transparency. Page 10/12 Reviewer for ITEC 50 – Web Systems and Technologies 1 | Midterms Examination Prepared by: Mr. Miguel Joie S. Polines | CEIT-DIT | Cavite State University File Formats – SVG The SVG (Scalable Vector Graphics) file format is a vector format and now has reasonably solid browser support. Like all vector formats, SVG graphics do not lose quality when enlarged or reduced. SVG is an open-source standard, so they could potentially be created in a regular text editor, though of course it is more common to use a dedicated drawing program. SVG files end up being part of the HTML document, thus, they can be manipulated by JavaScript and CSS. File Formats – TIF The TIF (Tagged Image File) format is a cross-platform lossless image format that supports multiple color depths, 8-bit transparency, layers and color channels, the CMYK and RGB color space, and other features especially useful to print professionals. TIF files are often used as a way to move graphical information from one application to another with no loss of information. CSS Cheatsheet: Sizing width: 100px; height: 50px; max-width: 100%; min-height: 200px; Padding padding: 10px; padding: 10px 20px; padding: 10px 15px 20px 5px; Margin margin: 10px; margin: 10px auto; Border border: 1px solid black; border-radius: 8px; Colors color: #333; background-color: #f0f0f0; opacity: 0.8; Fonts & Text font-family: Arial, sans-serif; line-height: 1.5; font-size: 16px; text-decoration: underline; font-weight: bold; text-transform: uppercase; font-style: italic; text-align: center; Page 11/12 Reviewer for ITEC 50 – Web Systems and Technologies 1 | Midterms Examination Prepared by: Mr. Miguel Joie S. Polines | CEIT-DIT | Cavite State University Display & Position display: block; position: static; top: 10px; left: 20px; z-index: 10; Box Shadow box-shadow: 2px 2px 5px rgba(0,0,0,0.3); ’ Units px – pixels (fixed) % – percentage (relative to parent) em – relative to the element's font-size rem – relative to root element's font-size vh – 1% of viewport height vw – 1% of viewport width Page 12/12