Merged.pdf

WPR1X1 Web Application Architecture 1 Outcomes Students should understand the following outcomes, upon successful completion of this module: ▪ Web clients and servers ▪ Web application N-Tier architecture ▪ HTTPS and URL ▪ HTTP Content-negotiation...

WPR1X1 Web Application Architecture 1 Outcomes Students should understand the following outcomes, upon successful completion of this module: ▪ Web clients and servers ▪ Web application N-Tier architecture ▪ HTTPS and URL ▪ HTTP Content-negotiation ▪ HTTP Messages Additional Reading: pp. 31-43 2  Client-Server Architecture The World Wide Web is about communication between web clients and web servers. Clients are often browsers (Chrome, Edge, Safari), but they can be any type of program or device. Servers are most often computers in the cloud. 3  Client-Server Architecture Client server architecture is a computing model in which the server hosts, delivers, and manages most of the resources and services requested by the client. It is also known as the networking computing model or client server network as all requests and services are delivered over a network. 4  Types of Client-Server Architecture 1-tier architecture The functionality of client server architecture is in various tiers. 1-tier architecture consists of several layers, such as presentation layer, business layer, and data layer, that are combined with the help of a unique software package. The data present in this layer is usually stored in local systems or on a shared drive. 5  Types of Client-Server Architecture 2-tier architecture The user interface is stored on the client’s side and the database is stored on the server, while database logic and business logic is maintained either on the client’s side or on the server’s side. The 2-tier architecture is faster in comparison to the 1-tier architecture; this is because the 2-tier architecture does not have any intermediary between the client and the server. It is often utilized to avoid confusion between clients. 6  Types of Client-Server Architecture 3-tier architecture A 3-tier application architecture is a modular client-server architecture that consists of a presentation tier, an application tier and a data tier. In dividing the project into three layers, we separate user Interface, business logic, and data layer in three divisions. 7  Types of Client-Server Architecture 3-tier architecture A 3-tier application architecture is a modular client-server architecture that consists of a presentation tier, an application tier and a data tier. All three layers are controlled at different ends, with the presentation layer controlled at the client’s device, the middleware and the server handle the application layer and the database tier respectively. Due to the presence of a third layer that provides data control, 3-tier architecture is more secure, has invisible database structure, and provides data integrity. 8  Types of Client-Server Architecture N-tier architecture Also called multi-tier architecture - it is the scaled form of the other three types of architecture. This architecture has each function as an isolated layer that includes presentation, application processing, and management of data functionalities. 9  HTTP The HyperText Transfer Protocol (HTTP) is the underlying network protocol that enables transfer of hypermedia documents on the Web, typically between a browser and a server so that humans can read them. Clients and servers communicate by exchanging individual messages - as opposed to a stream of data. The messages sent by the client are called requests and the messages sent by the server as an answer are called responses. 10  HTTP A complete document is reconstructed from the different sub-documents fetched, for instance, text, layout description, images, videos, scripts, and more. 11  HTTPS & URL The scheme tells web servers which protocol to use when it accesses a page on your website. https is Hypertext Transfer Protocol Secure — is the most common scheme. https tells your web browser to encrypt any information you enter onto the page, like your passwords or credit card information, so cybercriminals can’t access it. https is a security protocol that protects your website visitors and implementing it will help your site rank better on Google (via SEOs) 12  HTTPS & URL If your website is like a house, your subdomains are like specific rooms in that house Subdomain -. A subdomain in a URL indicates which particular page of your website the web browser should serve up. Subdomains also bucket your website into its main content categories and shows Google and your visitors that there's more information on your site than just a homepage. 13  HTTPS & URL Second level domain – This defines the name of your website on the URL. It helps people know they’re visiting a certain brand’s site. For instance, people who visit “belgiumcampus.ac.za” know they’re on Belgium Campus’s website, without needing any more information. 14  HTTPS & URL Top level domain - The top-level domain (TLD) specifies what type of entity your organization registers as on the internet. For example, “.com” is intended for commercial business organizations. Similarly “.edu” or “.ac.za” are intended for academic institutions like colleges and universities when registering their URL. 15  HTTPS & URL Subdirectory - A subdirectory — also known as a subfolder — helps people, as well as web crawlers, understand which part or section of a webpage they’re on. For instance, if you own an online store that sells t-shirts, hats, and mugs, one of your website’s URLs could look like “https://shop.yourstore.com/hats”. Notice that the subdomain is “shop” and the subdirectory is “hats." That means this URL would serve up the “Hats” page, which is a subfolder of the “Shop” page. T-shirts and mugs would be other subfolders of this page, https://shop.yourstore.com/t-shirts and “https://shop.yourstore.com/mugs”. 16  HTTP Content-negotiation HTTP is a client-server protocol: requests are sent by a client entity and responses are returned to the calling entity from the server entity. HTTP utilizes content negotiation - the mechanism that is used for serving different versions of a resource at the same URI, so that the user agent can specify which is best suited for the user (e.g., which language of a document, which image format, or which content encoding). 17  HTTP Messages During Content-negotiation There are two types of HTTP messages, requests and responses, each with its own format. HTTP Request 18  HTTP Messages During Content-negotiation Requests consists of the following elements: ▪ An HTTP method, usually a verb like GET, POST, or a noun like OPTIONS or HEAD that defines the operation the client wants to perform. Typically, a client wants to fetch a resource (using GET) or post the value of an HTML form (using POST), though more operations may be needed in other cases. ▪ The path of the resource to fetch; the URL of the resource stripped from elements that are obvious from the context, for example without the protocol (http://), the domain (here, developer.mozilla.org), or the TCP port (here, 80). ▪ The version of the HTTP protocol. ▪ Optional headers that convey additional information for the servers. ▪ A body, for some methods like POST, similar to those in responses, which contain the resource sent. 19  HTTP Messages During Content-negotiation There are two types of HTTP messages, requests and responses, each with its own format. HTTP Response 20  HTTP Messages During Content-negotiation There are two types of HTTP messages, requests and responses, each with its own format. Responses consist of the following elements: ▪ The version of the HTTP protocol they follow. ▪ A status code, indicating if the request was successful or not, and why. ▪ A status message, a non-authoritative short description of the status code. ▪ HTTP headers, like those for requests. ▪ Optionally, a body containing the fetched resource. 21  22 Thank You! The End /belgiumcampusSA #Belgium Campus [email protected] +27 10 593 53 68 /belgiumcampus 22 www.belgiumcampus.ac.za 22  WPR1X1 Intro to HTML 23 Outcomes Students should understand the following outcomes, upon successful completion of this module: ▪ Defining HTML and CSS ▪ Appreciating the need for HTML ▪ HTML tags, elements and attributes ▪ Introduction to HTML5 ▪ Overview of HTML5 semantics ▪ HTML5 vs. core HTML family ▪ Textbook: pp. 41 - 42 Html & CSS introduction ▪ Textbook: pp. 55 - 65 Html Syntax and structure 24 HTML & CSS ▪ HTML, short for HyperText Markup Language, is the foundation of all web pages. ▪ It was created by Tim Berneres-Lee in 1993 to define the structure of a web page. ▪ Without it, you wouldn’t be able to organize text or add images or videos to your pages – it is the beginning of everything you need to know to make your first website. ▪ CSS, short for Cascading Style Sheets, is a style sheet language used to style websites. ▪ Colors, fonts, and page layouts for a site can all be managed using CSS to create an appealing website. 25 HTML & CSS 26 HTML Structure ▪ The declaration tells the browser that a given file is a markup.html file and that a set of web standards must be applied to it. ▪ It is the first line of code that go at the top of every HTML or XHTML file. 27 HTML Tags 28  HTML Tags & Elements ▪ HTML tags are the starting and ending parts of an HTML element. ▪ They begin with < symbol and end with > symbol. Whatever is written inside < and > are called tags ▪ HTML elements enclose the contents in between the tags. ▪ They consist of some kind of structure or expression and generally consists of a start tag, content and an end tag. 29  HTML Attributes Attributes can be added to the opening tag of an HTML element to change its default behavior or provide additional data about it. Attributes consist of a name and a value in the format name="value“: So for example, the image element has a mandatory src attribute that contains the image file path/URL: 30 Breakdown of HTML element 31  Nested Elements HTML elements can be nested, which means that elements can contain other elements inside them, or nested. All HTML documents consist of nested HTML elements. 32  HTML Element Reference https://developer.mozilla.org/en-US/docs/Web/HTML/Element https://www.codecademy.com/resources/docs/html/elements 33  Exercise Day 2 HTML Elements Exercise 1.pdf on Moodle 34  13 Thank You! The End /belgiumcampusSA #Belgium Campus [email protected] +27 10 593 53 68 /belgiumcampus 13 www.belgiumcampus.ac.za 35  WPR1X1 HTML - Images, Hyperlinks & Lists 36 Outcomes Students should understand the following outcomes, upon successful completion of this module: ▪ Adding Images ▪ Using Hyperlinks ▪ Using Lists ▪ Exercise ▪ Textbook: pp. 122-128 Lists ▪ Textbook: pp. 177-192 Hyperlinks ▪ Textbook: pp. 196-213 Images 37  Adding Images ▪ Images can improve the design and the appearance of a web page. ▪ The HTML tag is used to embed an image in a web page. ▪ Images are not technically inserted into a web page; images are linked to web pages. The tag creates a holding space for the referenced image. ▪ The tag is empty, it contains attributes only, and does not have a closing tag. ▪ The tag has two required attributes: ❖ src - Specifies the path (URL) to the image ❖ alt - Specifies an alternate text for the image 38  Adding Images Create image.html file in your html folder on your desktop in VS Code Add a new folder, called images 39  Adding Images In images folder, add the Wakanda.jpg picture Add an image tag in the body of your images.html file: 40  Adding Images In images folder, add the Wakanda.jpg picture Add an image tag in the body of your images.html file: 41  Adding Images Run with Live Server: Image will not load 42  Adding Images Solution: The pic is present in the 'images' folder. This folder is in the same location as the HTML file. It wont appear because it needs: i. A proper directory/path set for the image ii. The extension of the image should also be present after the name. 43  Adding Images Run with Live Server: 44  Adding Images via URL The image is can also be found online, using this URL: https://e00-marca.uecdn.es/assets/multimedia/imagenes/2022/04/28/16511668805764.jpg Similarly, we can add images from the web server hosting the image, by setting the src attribute to be the URL above: 45  Adding Images Run with Live Server: 46  Sizing an Image It is recommended to specify the image’s width and height using the percent of the current screen size to best support both smaller mobile devices as well as larger workstations. You can use the style attribute to specify the width and height of an image. Alternatively, you can use the width and height attributes: Note: Always specify the width and height of an image. If width and height are not specified, the web page might flicker while the image loads. 47 Common Image Formats 48  Using Hyperlinks Links are found in nearly all web pages. HTML links are hyperlinks. The links in HTML allow a user to navigate from one web page to another. The is used to create hyperlinks in HTML. ▪ The most important attribute of the element is the href attribute, which indicates the link's destination. ▪ The link text is the part that will be visible to the reader. ▪ Clicking on the link text, will send the reader to the specified URL address. 49  Adding Hyperlinks The URL should be written within the quotes. Example: Output: The text will appear on the screen and when clicked on it, the URL specified for the href attribute will open. 50  Target Attribute By default, the linked page will be displayed in the current browser window. To change this, you must specify another target for the link. The target attribute specifies where to open the linked document. The target attribute can have one of the following values: ▪ _self - Default. Opens the document in the same window/tab as it was clicked ▪ _blank - Opens the document in a new window or tab ▪ _parent - Opens the document in the parent frame ▪ _top - Opens the document in the full body of the window 51  Absolute URLs vs. Relative URLs examples so far are using an absolute URL (a full web address) in the href attribute. To create a local link (a link to a page within the same website), you specify with a relative URL (without the "https://www" part): Add 2.html files in VS Code On secondPage.html, include: 52  Absolute URLs vs. Relative URLs On index.html: Setting relative URL Run index.html file on Live Server > click the link to open second page in new tab. 53  Title Attribute The title attribute provides a title for a hyperlink. Whenever the mouse hovers over the hyperlink, it will display a text which is called the title. By default, it does not show anything. The title is usually extra information about the hyperlink in a very short form. 54  Working with Lists Lists allow web developers to group a set of related items in lists. There are three types of lists in HTML - ordered, unordered, and description. Items preceded by dots Items preceded by numbers Items with terms and details (default) 55  Ordered list An ordered list starts with the tag. Each list item starts with the tag. The list items will be marked with numbers by default: 56  Type Attribute with Ordered list Every option starts with a number in ordered list. We can change this to alphabets and roman numbers - both lowercase and uppercase. To do this, use the type attribute: 57  Start Attribute with Ordered list A numerical list always starts from 1. Similarly, an alphabetic list starts from 'a' or 'A’. We can also control the starting point of an ordered list by using the start attribute: 58  Unordered list An unordered list does not have any order and it is a bulleted list. Uses the tag and the tag is used for options just like the ordered list. The type attribute in the unordered list has four values; disc, circle, square, and none. By default, the type of unordered list is disc. 59  Description list The description list is used to create a list in which, each option has a description with it. The tag defines a description list. There are two additional tags - and.The tag defines a term/name and the tag gives a description of the term: 60  Exercise Day 2 HTML Images, Lists, Links Exercise 2.pdf on Moodle 61  27 Thank You! The End /belgiumcampusSA #Belgium Campus [email protected] +27 10 593 53 68 /belgiumcampus 27 www.belgiumcampus.ac.za 62  WPR1X1 Working with Internal CSS 63 Outcomes Students should understand the following outcomes, upon successful completion of this module: ▪ Defining CSS ▪ Inline CSS ▪ Internal CSS ▪ Exercise Textbook: pp 280 – 287 Internal CSS 64  Defining CSS ▪ CSS is a language for setting the design or appearance of a website's content. ▪ HTML isn't concerned with these things and instead focuses on defining the meaning and structure of the content. ▪ With CSS, you can control: o color, o font, o the size of text, o the spacing between elements, o how elements are positioned and laid out, o what background images or background colors are to be used, o different displays for different devices and screen sizes etc.… 65  Defining CSS ▪ Without CSS, your website will appear as a plain HTML page. Here’s what Twitter will look with and without CSS: 66  Using CSS ▪ CSS can be added to HTML documents in 3 ways: 1. Inline - by using the style attribute inside HTML elements 2. Internal - by using a element in the section 67  Using CSS 3. External - by using a element to link to an external CSS file 68  Inline CSS Inline CSS is used to style a specific HTML element. For this CSS style, you’ll only need to add the style attribute to each HTML tag. This means each HTML tag needs to be styled individually 69  Inline CSS Advantages of Inline CSS: Disadvantages of Inline CSS: 70  Internal CSS Selectors Internal CSS makes use of Selectors. A CSS selector selects the HTML element(s) you want to style. Internal CSS selectors are referred to as Simple Selectors and they select elements based on element, id, class etc. The selector specifies which element(s) in the HTML page, the CSS rule applies to. Using h1 Selector in CSS tag in HTML 71  Internal CSS Internal or embedded CSS requires you to add a tag in the section of your HTML document. 72  Internal CSS The major issue with internal CSS is that; we will most likely have more than one similar tag on an HTML document, (e.g., we can have 3 tags or 2 tags) This means, styling in the using internal CSS will apply to all elements on the HTML file. 73  Internal CSS: #id Selector To avoid this, we can utilize id Selectors. The id selector uses the id attribute of an HTML element to select a specific element. Id Selectors are mostly used for a single unique element on an HTML page. This means, the element must be unique within the HTML page, so when the id selector is used, it selects only that unique element it is referencing. To select an element with a specific id, write a hash (#) character, followed by the id of the element. 74  Internal CSS: #id Selector Only one ID selector can be attached to an element. 75  Internal CSS: #id Selector Using id Selector example: 76  Internal CSS:.class Selector id Selectors must be unique within a single HTML document. This means, it is not good practice to use the same id on more than one element. class Selectors solves this. They can be used if you have multiple elements that want to share characteristics, without using id Selectors 77  Internal CSS:.class Selector Same CSS Class can be used in multiple elements to style. 78  Internal CSS:.class Selector Using class Selector example: Class Selectors are preceded by a dot (.) to identify them) 79 Comparing #id &.class Selectors 80 Comparing #id &.class Selectors 81 #id and.class example CSS Create the following using id for the heading and class for the boxes. Set height and width attributes of the boxes to 50px, background color to red, and float the boxes to the left. 82  #id and.class example CSS HTML CSS 83  Exercise Day 3 Exercise: External CSS and Cascading.pdf on Moodle 84  23 Thank You! The End /belgiumcampusSA #Belgium Campus [email protected] +27 10 593 53 68 /belgiumcampus 23 www.belgiumcampus.ac.za 85  WPR1X1 External CSS - Selector Conflicts & The Cascade 86 Outcomes Students should understand the following outcomes, upon successful completion of this module: ▪ Linking to External CSS ▪ CSS Selector Conflicts ▪ Specificity in CSS ▪ Defining the Cascade ▪ Exercise Textbook: pp.288 - 293 87  Linking to External CSS We have looked at inline and internal CSS so far. Now we move to external CSS. You can link an external CSS style sheet to multiple HTML files, to apply your styles uniformly. 88  Linking to External CSS An external style sheet is a plain text file that contain CSS Style formats only. The extension of the external file should end with.css extension (e.g. style.css). The external Style Sheet (.css file) is separate from HTML file. You can link this external file (.css file) to your HTML document file using the < link > tag. You can place this < link > tag within the < head > section, and after the < title > element of your HTML file. 89 Linking to External CSS 90  Linking to External CSS Open html folder on desktop, create the following files: On HTML file: 91  Linking to External CSS On styles.css file: Output: 92  CSS Selector Conflicts Most times in CSS, we will encounter selector conflicts. CSS selector conflicts happen when you have two selectors (two rules) in CSS, targeting the same element in HTML. Example: Rule 1 targeting p element to blue Rule 2, also targeting p element to red This demonstrate a CSS Selector Conflict than can occur in your CSS. 93  CSS Cascade When CSS is being run in the browser, it reads from top to bottom, in order. This order, has different priorities. ▪ Priority 1: Inline styles. ▪ Priority 2: External and internal style sheets. ▪ Priority 3: Browser default. If different styles are defined on the same priority level, the last one has the highest priority. 94  CSS Cascade 1) User styles - Most Web browsers allow users to specify their own default style sheets. In principle, these always have precedence over other styles. 2) Inline styles - If the style is inline (see Chapter 3), it is always applied regardless of all other factors. That’s why you should never use them in your final HTML code. 3) Media type - Obviously, if the media type is set for a style and element that is not being displayed in that media type, the style will not be used. 4) Specificity - The more contextually specific a rule is, the higher its cascade priority. So the more HTML, class, and ID selectors a particular rule has, the more important it is. 95  CSS Cascade 5) Order - If the conflicting declarations applied to an element are equal at this point, CSS gives priority to the last rule listed, in order. Remember that inline styles always win. 6) Inherited - These styles are inherited from the parent. 7) Inherent - These styles are applied by the browser to HTML tags and are the least important. Summary: CSS cascade runs from top to bottom, and if the selectors are identical, then the bottom most rule always wins. 96  CSS Cascade Example CSS specificity is a measure of how specific the selector of a CSS rule is. The selector with the highest specificity wins and is applied to the HTML element over other less specific ones. Example: We shall apply different styling to the following webpage: 97  CSS Cascade Example Example: External CSS 98  CSS Cascade Example Example: External vs Internal CSS Internal styling overrides external CSS 99  CSS Cascade Example Example: External vs Internal vs Inline CSS Internal styling cascades next, and overrides external CSS to put brown color. Inline styling cascades last, and overrides both internal and external CSS to set color of first p element to green external styling cascades first, to put blue color on all p elements. 100  Exercise Day 3 Exercise: External CSS and Cascading.pdf on Moodle 101  17 Thank You! The End /belgiumcampusSA #Belgium Campus [email protected] +27 10 593 53 68 /belgiumcampus 17 www.belgiumcampus.ac.za 102  WPR1X1 CSS Inheritance and Selector Specificity 103 Outcomes Students should understand the following outcomes, upon successful completion of this module: ▪ CSS Selector Inheritance ▪ CSS Selector Specificity ▪ Exercise Textbook: pp. 298 - 330 Simple Selectors Textbook: pp. 345 - 353 Inheritance 104  CSS Selector Inheritance When you are using CSS styling you should always keep in mind just how a CSS document works. The Idea of a Cascading Style Sheet is that it is CASCADING. This means that your CSS will be applied from most general to most specific. This works both in regards to nested elements as well as specific classes and IDs. For example , we cab create the following website, and add the border styling to the body of the entire webpage: 105  CSS Selector Inheritance In HTML In CSS 106  CSS Selector Inheritance However, if you were to set a specific border to affect all the div elements to display as green: In CSS, the div selector will override the red border set by the body selector, as it is more specific as to which element to cause effect on 107  CSS Selector Inheritance We can also use #id to apply more specificity: e.g. - remove the border of a specific div (2nd div) The more specific ID would take prominence over the general div stylings. 108  CSS Selector Inheritance CSS Code: 109  CSS Selector Inheritance Let us add an anchor element to the HTML file: Question: What color will the anchor element be? 110  CSS Selector Inheritance Solution: The anchor element is not red, but blue. This is because some elements, like the anchor element, will first utilize default browser styles, of which in this case, the browser styles all with color blue. Visit: https://browserdefaultstyles.com/ and search for default browser element styles. 111  CSS Selector Specificity The Cascading Nature of CSS Cascading in CSS means that the order in which CSS rules are applied to an element actually matters. Ideally, if two rules are applied to the same element, the one that comes last is the one that will be used. Example: Which rule wins? blue wins 112  CSS Selector Specificity The Cascading Nature of CSS Let us now add an id to the second div element: Example: Which rule wins? red wins – more specific 113  CCS Specificity Points System CSS decides which on rule to apply by going through the points system: Example: 100 + 1 = 101 points 1 = 1 point 114  CSS Selector Specificity Specificity is the algorithm used by browsers to determine the CSS declaration that is the most relevant to an element, which in turn, determines the property value to apply to the element. The specificity algorithm calculates the weight of a CSS selector to determine which rule from competing CSS declarations gets applied to an element. You can think of specificity as a total score and each selector type earns points towards that score. The selector with the highest score wins. 115  CSS Selector Specificity Let us set the following in the second div element: Which rule wins in second div? Strong = 1 point, but it is targeting the strong element and not the p element. 116 Output 117  CSS Selector Specificity with Chaining Consider the following HTML code: In CSS, we can apply the rule to effect p element with class name one. What will happen? 118  CSS Selector Specificity with Chaining Output of rule: All 4 p element have a.one class, hence the rule is applied to all paragraph elements. To be more specific, and change/customize the other paragraphs with two or more classes, we can utilize chaining. 119  CSS Selector Specificity with Chaining Consider the following CSS code: Output: With chaining, we are saying the element which contains classes one, two, three and four should have the rule applied. If an element does not have all the four classes, then the rule will not apply. In this case, chaining using classes helps to be more specific as to which element on the HTML file to target, in this case, it is the p element for paragraph 4. 120  CSS Selector Specificity with Chaining Consider the following CSS code: Output: In this case, paragraph three is targeted because it have #id three, and class three. No other element has those specific selectors. 121  CSS Selector Specificity with Chaining Consider the following CSS code: Output: Using same reasoning, explain why…? 122  Exercise Day 3 Exercise - Using id and class selectors.pdf on Moodle 123  22 Thank You! The End /belgiumcampusSA #Belgium Campus [email protected] +27 10 593 53 68 /belgiumcampus 22 www.belgiumcampus.ac.za 124