IT302 Internet Technology Lecture 3 PDF

IT302 Internet Technology Module I Introduction to Computers and the Internet Moore’s Law ◻ Every year or two, the capacities of computers have approximately doubled inexpensively. HTML5, CSS3, JavaScript, Canvas and jQuery HTML 5 : specify the content and structure of web pages in a por...

IT302 Internet Technology Module I Introduction to Computers and the Internet Moore’s Law ◻ Every year or two, the capacities of computers have approximately doubled inexpensively. HTML5, CSS3, JavaScript, Canvas and jQuery HTML 5 : specify the content and structure of web pages in a portable manner. Cascading Style Sheets (CSS) : to specify the presentation, or styling, of elements on a web page JavaScript : to build dynamic web pages Canvas : javascript API to draw 2D objects jQuery : provides a library of custom GUI controls that can be used to enhance the look and feel of your web pages.  Language of web page - HTML (Hypertext Markup Language)  Web Basics The fundamentals of web-based interactions between a client web browser and a web server. web page ◻ HTML (HyperText Markup Language) document (with the extension.html or.htm) that describes to a web browser the document’s content and structure. Hyperlinks ◻ HTML documents normally contain hyperlinks, which, when clicked, load a specified web document. ◻ Both images and text may be hyperlinked. ◻ When the user clicks a hyperlink, a web server locates the requested web page and sends it to the user’s web browser. URIs and URLs- URIs that start with http:// are called URLs (Uniform Resource Locators). Common URLs refer to files, directories or server-side code that performs tasks such as database lookups, Internet searches and business-application processing. Parts of a URL A URL contains information that directs a browser to the resource that the user wishes to access. Eg: http://www.deitel.com/books/downloads.html http:// indicates that the HyperText Transfer Protocol (HTTP) should be used to obtain the resource. hostname (for eg: www.deitel.com)-name of the web-server computer on which the resource resides. This computer is referred to as the host, because it houses and maintains resources. The hostname www.deitel.com is translated into an IP (Internet Protocol) address—a numerical value that uniquely identifies the server on the Internet. An Internet Domain Name System (DNS) server maintains a database of hostnames and their corresponding IP addresses and performs the translations automatically Request Fig: Client requesting a resource from a web server  The request will be of the form ◻ GET /books/downloads.html HTTP/1.1 The word GET is an HTTP method indicating that the client wishes to obtain a resource from the server. The remainder of the request provides the path name of the resource (e.g., an HTML5 document) and the protocol’s name and version number (HTTP/1.1). The client’s request also contains some required and optional headers. Response Response … The server first sends a line of text that indicates the HTTP version, followed by a numeric code and a phrase describing the status of the transaction. HTTP/1.1 200 OK- ◻ indicates success, HTTP/1.1 404 Not found ◻ informs the client that the web server could not locate the requested resource  HTTP Headers The server sends one or more HTTP headers, which provide additional information about the data that will be sent. In this case, the server is sending an HTML5 text document, so one HTTP header Eg:Content-type: text/html, text/plain, image/jpeg The information provided in this header specifies the Multipurpose Internet Mail Extensions (MIME) type of the content that the server is transmitting to the browser. What is MIME? MIME enriches email communication by allowing a variety of content types, making messages more interactive. Purpose: Allows emails to send and receive different types of content (not just plain text). How Does MIME Work? Headers: Uses special headers to indicate content type. Content-Type: Specifies the type of file (e.g., text/plain, image/jpeg). Content-Disposition: Tells how to handle attachments (inline or downloadable). Common MIME Types Text: text/plain (plain text) Images: image/jpeg (JPEG), image/png (PNG) Audio: audio/mpeg (MP3) Video: video/mp4 (MP4) Application: application/pdf (PDF) HTTP Headers … The MIME standard specifies data formats, which programs can use to interpret data correctly. The MIME type text/plain indicates that the sent information is text that can be displayed directly. MIME type image/jpeg indicates that the content is a JPEG image. HTTP get and post Requests The two most common HTTP request types (also known as request methods) are get and post. A get request typically gets (or retrieves) information from a server, such as an HTML document, an image or search results based on a user-submitted search term. A post request typically posts (or sends) data to a server.  Client-Side Caching Browsers often cache (save on disk) recently viewed web pages for quick reloading. If there are no changes between the version stored in the cache and the current version on the web, this speeds up your browsing experience. Overview of Multitier Architecture Also known as n-tier architecture Divides an application into layers (tiers) for scalability, maintainability, and separation of concerns Key Tiers in Multitier Architecture Presentation Tier (Client Layer) - User interface and interaction - Technologies: HTML, CSS, JavaScript frameworks (React, Angular) Application Tier (Business Logic Layer) - Processes business logic and computations - Technologies: Java,.NET, Python, Node.js Data Tier (Database Layer) - Manages data storage and retrieval - Technologies: MySQL, PostgreSQL, MongoDB Multitier Application Architecture Additional Layers in Complex Architectures Integration Layer (for external systems) Caching Layer (for performance optimization) Benefits Scalability – Scale layers independently Maintainability – Update layers without impacting others Security – Enhanced security controls per layer Drawbacks Complexity in setup and management Potential latency due to multiple layers Resource-intensive (can be costly) Web Scripting Approaches Client-side scripting with JavaScript can be used to validate user input, server-side scripts - often generate custom responses for clients. Client-Side Scripting Execution Location: Runs in the user's browser on their local machine Purpose: Handles user interactions, displays data, provides immediate feedback Common Languages: JavaScript, HTML, CSS Examples: - Form validation, animations, dynamically updating content Advantages: - Quick response, reduced server load Disadvantages: - Security concerns, browser dependency Server-Side Scripting Execution Location: Runs on the web server Purpose: Handles data processing, database interactions, generates content Common Languages: PHP, Python, Ruby, Java, Node.js Examples: - Database access, form processing, generating dynamic pages Advantages: - Enhanced security, cross-browser consistency Disadvantages: - Slower response due to server dependency, increased server load Client-Side vs Server-Side Scripting: Client-Side Scripting: - Runs in the browser, immediate feedback, but exposed to users Server-Side Scripting: - Runs on the server, secure and consistent, but can be slower  What is HTML HTML describes the content and format of web pages using tags. Ex. Title Tag: A title It’s the job of the web browser to interpret tags and display the content accordingly. HTML Syntax An HTML file contains both formatting tags and content Document content is what we see on the webpage. Tags are the HTML codes that control the appearance of the document content. HTML Syntax HTML syntax: Closing tag two-sided tag: document content Properties of the Starting Actual content appears in tag. webpage. It could be empty tag Optional! Examples: CGS 2100 UCF HTML Syntax comments start with Structure of the web page Starting with the tag... Everything about the web page should be....... enclosed here Structure of the web page Inside the tag ◻ Each web page has a head part described in tag: The title of the web page should be put CGS 2100 here  Head Section Information about the ◻Character set(UTF-8, the most popular character-encoding scheme for the web) which helps the browser determine how to render the content. ◻the title(nested element) ◻can contain special document-formatting instructions called CSS style sheets Structure of the web page Inside the tag ◻ Each web page has a body part described in tag: The content of the whole web CGS 2100 page should be put here This is a sample HTML file.  Title Body Create a basic HTML file Open your text editor (notepad). Type the following lines of code into the document: CGS2100 lab section This is a sample HTML file. save as: filename.html Introduction to some common tags Headings Paragraph tag- ….. define the structure of a document. List tag Hyperlink tags  Heading six heading tags(h1 to h6) for specifying the relative importance of information. Page Title My First Heading My First Heading My First Heading My First Heading My First Heading My First Heading My first paragraph. Linking - hyperlink Link to another location or file Syntax: Link to UCF Content displayed on the page Starting Attribute of the tag: the address of Ending tag Tag the hyperlink Result : Hyperlink Page Title Facebook google Facebook Images E.g. Page Title Images alt Attribute Void Elements Using Images as Hyperlinks Paragraph tags... CGS 2100 Here is the first paragraph. Here is the second paragraph. result First paragraph Space between paragraphs Second paragraph Special Characters and Horizontal Rules Horizontal Rules... horline.htm List tags Ordered list: used to display information in a numeric order. The syntax for creating an ordered list is: e.g. item1 Name: Your name item2 Section: ### … Instructor: Yuping Result: List tags Unordered list: list items are not listed in a particular order. The syntax is: e.g. item1 Name: Your name item2 Section: ### … Instructor: Yuping Result  Table Page Title Table of fruits and its price fruit price Apple 70 Mango 100  Forms When browsing websites, users often need to provide information such as search queries, e-mail addresses and zip codes. HTML5 provides a mechanism, called a form, for collecting data from a user. Data that users enter on a web page is normally sent to a web server that provides access to a site’s resources  Form Attribute method specifies how the form’s data is sent to the web server. Method=“get” (appends the form data directly to the end of the URL of the script, where it’s visible in the browser’s Address field). Method=“post”(appends form data to the browser request, which contains the protocol (HTTP) and the requested resource’s URL the user doesn’t see the data after the form is submitted.  Forms Action-The action attribute in the form element specifies the URL of a script on the web server that will be invoked to process the form’s data. Input-input elements that specify data to provide to the script that processes the form. ◻ An input’s type is determined by its type attribute ◻form uses different types of input such as text input, a submit input, reset input etc.  Text input Element The text input inserts a text field in the form. Users can type data in text fields. The label element provides users with information about the input element’s purpose. The input element’s size attribute specifies the number of characters visible in the text field. Optional attribute maxlength limits the number of characters input into the text field—in this case, the user is not permitted to type more than 30 characters Submit and Reset input Elements The submit input element is a button. When the submit button is pressed, the form’s data is sent to the location specified in the form’s action attribute. The value attribute sets the text displayed on the button. The reset input element allows a user to reset all form elements to their default values.  Additional Form tags Textarea- insert multiple text areas into the form. Enter comments here Checkbox-enable users to select an option. When a user selects a checkbox, a check mark appears in the checkbox. Otherwise,the checkbox remains empty  Form tags Radio button- Dropdown list- Select element provides a dropdown list from which user can select an item. Option element adds items into the list. 1 2  Internal Linking Internal linking—a mechanism that enables the user to jump between locations in the same document. Internal linking is useful for long documents that contain many sections. Clicking an internal link enables the user to find a section without scrolling through the entire document.  meta Elements Search engines catalog sites by following links from page to and saving identification and classification information for each page. One way that search engines catalog pages is by reading the content in each page’s meta elements, which specify information about a document. The meta element is one of many methods of search engine optimization (SEO)—the process of designing and tuning your website to maximize your findability and improve your rankings in organic search engine results.  meta Elements Search engines catalog sites by following links from page to page (often known as spidering or crawling the site) One way that search engines catalog pages is by reading the content in each page’s meta elements Two important attributes of the meta element are Name content Name-which identifies the type of meta element content- which provides the information search engines use to catalog pages. Eg: The content attribute keyword meta element provides search engines with a list of words that describe the page These words are compared with words in search requests. New HTML5 Form input Types input Type color input Type date input Type datetime input Type datetime-local input Type email input Type month input Type number input Type range input Type search input Type tel input Type time input Type url input Type week New HTML5 Form input Types enable users to enter color Autofocus- it specifies that an element should automatically get focus when the page loads.