Web Fundamentals and UX Design PDF

NEW-AGE GLOBAL UNIVERSITY FOR LIBERAL EDUCATION Web Fundamentals and UX Design TEXTBOOKS 3 UNIT 1: HyperText Markup Language (HTML), Tables and Forms  Internet It is the largest network in the world that connects hundreds of thou...

NEW-AGE GLOBAL UNIVERSITY FOR LIBERAL EDUCATION Web Fundamentals and UX Design TEXTBOOKS 3 UNIT 1: HyperText Markup Language (HTML), Tables and Forms  Internet It is the largest network in the world that connects hundreds of thousands of individual networks all over the world. Rather than moving through geographical space, it moves your ideas and information through cyberspace – the space of electronic movement of ideas and information. Send e-mail messages. Send (upload) or receive (download) files between computers. Surfing the web  History of the internet 1. 1950s and 1960s: The Precursors The U.S. Department of Defense's ARPA (Advanced Research Projects Agency) starts work on ARPANET, the predecessor to the internet. 2. 1969: Birth of ARPANET ARPANET becomes operational, connecting four universities in the United States. The first message sent over ARPANET is "LOGIN." 3. 1970s: TCP/IP and Email Vint Cerf and Bob Kahn develop TCP/IP (Transmission Control Protocol/Internet Protocol), the foundational technology of the internet. The first email program is created. 6  History of the internet 4. 1980s: Expanding the Network The term "Internet" is used to describe interconnected networks. Domain Name System (DNS) is introduced, allowing the use of human-readable domain names. TCP/IP becomes the standard for internet communication. 5. 1990s: Commercialization and the World Wide Web The World Wide Web (WWW) is invented by Tim Berners-Lee. Web browsers like Mosaic and Netscape Navigator are introduced, making the web accessible to the public. 6. 2000s: Broadband and Social Media Broadband internet becomes widely available, improving internet speed. Social media platforms like Facebook, Twitter, and YouTube emerge, reshaping online communication. 7  History of the internet 7. 2010s: Mobile Internet and Cloud Computing The proliferation of smartphones and mobile internet access transforms how people use the internet. Cloud computing becomes mainstream, enabling scalable online services. Internet of Things (IoT) devices become increasingly connected to the internet. services. 8. 2020s: Ongoing Evolution Internet connectivity continues to grow, reaching more remote areas. The development of 5G networks promises even faster wireless internet speeds. Emerging technologies like AI, blockchain(Steemit), and augmented reality impact internet 8  IP Addressing IP Address: An IP address is a numerical label assigned to each device connected to a network that uses the Internet Protocol for communication. IP addresses are made up of four numbers, each of which can range from 0 to 255. IPv4 IPv6 The above diagram shows the address format of IPv4 and IPv6. An IPv4 is a 32-bit decimal address. It contains 4 octets or fields separated by 'dot', and each field is 8-bit in size. The number that each field contains should be in the range of 0-255. Whereas an IPv6 is a 128-bit hexadecimal address. It contains 8 fields separated by a colon, and each field is 16-bit in size. 9  Uniform Resource Locators The IP address and the domain name each identify a particular computer on the Internet. However, they do not indicate where a Web page’s HTML document resides on that computer. To identify a Web pages exact location, Web browsers rely on Uniform Resource Locator (URL). URL is a four-part addressing scheme that tells the Web browser: What transfer protocol to use for transporting the file The domain name of the computer on which the file resides The pathname of the folder or directory on the computer on which the file resides The name of the file Structure of a Uniform Resource Locators http => Hypertext Transfer Protocol  DNS(Domain Name System) Resolve the Name to IP Address DNS(Domain Name System) DNS Parts  DNS Parts A domain name consists of several parts, which are separated by dots (periods). Each part of a domain name has a specific significance. Here's a breakdown of the parts of a domain name using the example "www.example.com": Subdomain: In the example "www," the "www" is a subdomain. Subdomains are optional and represent a specific section or function of a website. Common subdomains include "www" (for the World Wide Web), "mail" (for email services), and "blog" (for a blog section). Second-Level Domain (SLD): In "example.com," "example" is the second-level domain. This is the core part of the domain name that typically represents the website or organization. It can be chosen by the domain owner and is often used to convey the website's identity or purpose. Top-Level Domain (TLD): The "com" in "example.com" is the top-level domain. TLDs are the highest level in the domain hierarchy and are used to categorize and differentiate domain names. They can indicate the type, purpose, or geographic location of the website. Examples of TLDs include ".com," ".org," ".net," ".gov," and ".edu."  HTTP(Hypertext Transfer Protocol) HTTP is an essential protocol used for communication on the World Wide Web. It is an application layer protocol that governs how data is transferred between a web client (typically a web browser) and a web server. HTTP is designed to enable the retrieval and exchange of various types of data, primarily in the form of text, images, and multimedia content. Request-Response Model: HTTP follows a request-response model, where a web client initiates communication by sending an HTTP request to a web server. The server processes the request and sends back an HTTP response containing the requested data or information.  Stateless Protocol: HTTP is stateless, meaning that each HTTP request is independent and carries no knowledge of previous requests. Each request is treated as a standalone transaction. Text-Based Protocol: HTTP messages are text-based. Methods (HTTP Verbs): HTTP requests use methods (also known as HTTP verbs) to specify the action to be performed on a resource hosted on the server. Common HTTP methods include: GET: Retrieve data from the server (e.g., requesting a web page). POST: Send data to the server to create or update a resource (e.g., submitting a form). PUT: Update an existing resource on the server. DELETE: Remove a resource from the server. HEAD: Retrieve only the headers of a resource without the body.  HTTP(Hypertext Transfer Protocol) OPTIONS: Retrieve information about the communication options available for a resource Status Codes: HTTP responses include status codes that indicate the outcome of the request. Some common status codes include: 200 OK: The request was successful, and the server is returning the requested data. 404 Not Found: The requested resource could not be found on the server. 500 Internal Server Error: The server encountered an error while processing the request. URL (Uniform Resource Locator): HTTP requests specify the resource to be accessed using URLs. A URL consists of a protocol (e.g., http:// or https://), a domain name (e.g., www.example.com), and a path to the resource (e.g., /page.html). HTTP(Hypertext Transfer Protocol)  TCP/IP Protocol TCP/IP (Transmission Control Protocol/Internet Protocol) is a suite of networking protocols that serves as the foundation for communication on the internet and most private networks. It provides a set of rules and conventions for the exchange of data between devices on a network. TCP/IP is a fundamental part of modern networking, and it is designed to ensure reliable and efficient data transmission. TCP/IP Protocol Client/Server Structure of the Web Web is a collection of files that reside on computers, called Web servers, that are located all over the world and are connected to each other through the Internet. When you use your Internet connection to become part of the Web, your computer becomes a Web client in a worldwide client/server network. A Web browser is the software that you run on your computer to make it work as a web client  Web Server A web server is a computer program that delivers web pages to users' web browsers. 1. Hosting: The web server stores website files, which can include HTML documents, images, videos, stylesheets, scripts, and other assets. These files are organized into a directory structure. 2. Listening for Requests: A web server continuously listens for incoming requests from web clients, usually over the HTTP or HTTPS protocol. It waits for client requests to arrive on a specific port (commonly port 80 for HTTP and port 443 for HTTPS). 3. Processing Requests: When a request is received, the web server processes it by examining the requested resource (usually specified in the URL) and determining which file or script should handle the request. 4. Generating Responses: Based on the request, the web server generates an HTTP response that includes the requested content. It may involve executing server-side scripts (e.g., PHP, Python, or Node.js) to dynamically generate web pages. 5. Content Delivery: Once the response is generated, the web server sends it back to the requesting client over the internet using the appropriate protocol (HTTP or HTTPS).  Web Server Software Apache HTTP Server Nginx Microsoft Internet Information Services (IIS) LiteSpeed  Web Client A web client, often referred to as a web browser, is a software application installed on a user's device (e.g., computer, smartphone, or tablet) that enables them to access and interact with web content hosted on web servers. Requesting Web Pages: When a user enters a web address (URL) into the browser's address bar or clicks on a link, the web client sends an HTTP request to the appropriate web server to retrieve the requested web page or resource. Rendering Content: The web client receives the HTTP response from the server, which includes HTML, CSS, JavaScript, and other assets. The browser parses and renders this content to display the web page to the user, ensuring proper layout and interactivity.  Supporting User Interactions: Web clients provide user-friendly interfaces for navigating websites, interacting with forms, clicking links, submitting data, and handling user input. Caching: To optimize performance, web clients may cache web page assets (e.g., images and scripts) locally. This reduces the need to repeatedly download the same content from the server.  Web Browser Example Google Chrome Mozilla Firefox Microsoft Edge Apple Safari  Understand Internet When you access the URL https://rvu.edu.in/school-of-computer-science-and-engineering, a series of steps occur to retrieve a response. How does this process unfold? DNS Resolution: The browser first needs to translate the domain name "rvu.edu.in" in the URL into an IP address. It does this by sending a DNS (Domain Name System) query to a DNS server. The DNS server responds with the IP address associated with "rvu.edu.in." Establishing a Secure Connection (HTTPS): Since the URL begins with "https://," it indicates that the browser should establish a secure connection using the HTTPS (Hypertext Transfer Protocol Secure) protocol. This involves a process called the TLS/SSL handshake, where the browser and the web server exchange encryption keys to secure the data transmission. Sending an HTTP Request: Once a secure connection is established, the browser sends an HTTP GET request to the server for the resource specified in the URL path ("/school-of-computer-science-and-engineering" in this case). Web Server Processing: The web server at "rvu.edu.in" receives the HTTP request and processes it. It looks for the requested resource (in this case, a web page related to the School of Computer Science and Engineering) and prepares an HTTP response. HTTP Response: The server sends back an HTTP response to the browser. This response typically includes an HTML document that represents the web page content, along with other resources such as stylesheets, images, and JavaScript files.  Rendering the Web Page: The browser receives the HTML content from the server and begins to parse it. It then renders the web page on your screen, interpreting HTML tags, applying styles, and executing JavaScript code as necessary to create the visual representation of the page. Displaying the Web Page: The final rendered web page is displayed in your web browser, allowing you to interact with the content. IETF (Internet Engineering Task Force) The IETF is an open, international community of network designers, operators, vendors, and researchers. It is responsible for developing and promoting voluntary internet standards, protocols, and technologies. The IETF's primary mission is to ensure the smooth operation and evolution of the internet. To achieve this, it develops and maintains the technical specifications that underpin the internet's infrastructure.  W3C (World Wide Web Consortium) The W3C is an international community of organizations and individuals involved in the development and standardization of web-related technologies. It was founded by Tim Berners-Lee, the inventor of the World Wide Web, and is hosted by the Massachusetts Institute of Technology (MIT). The W3C's main focus is to develop and maintain open web standards and recommendations to ensure the long-term growth and accessibility of the World Wide Web.  Technologies That Drive The Web HTML CSS Javascript Structure Style Behavior  HTML HTML stands for Hyper Text Markup Language HTML is the standard markup language for creating Web pages HTML describes the structure of a Web page HTML consists of a series of elements HTML elements tell the browser how to display the content HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc  Structure of HTML content Why I Love This Course [...]  Anatomy of an HTML tag content Element name Opening tag Closing tag  HTML Hello World! Hello World! ✘ ✔ Line Break Horizontal Rule Only opening tag Only opening tag  HTML Elements An HTML element is defined by a start tag, some content, and an end tag. The HTML element is everything from the start tag to the end tag: Content goes here.... Examples of some HTML elements: My First Heading My first paragraph. Nested HTML Elements HTML elements can be nested (this means that elements can contain other elements i.e. , , and ). HTML is Not Case Sensitive HTML tags are not case sensitive: means the same as.  HTML Semantic Elements A semantic element clearly describes its meaning to both the browser and the developer. Examples of non-semantic elements: and - Tells nothing about its content. Examples of semantic elements: , , and - Clearly defines its content. In HTML there are some semantic elements that can be used to define different parts of a web page:  The element It defines a section in a document. Examples of where a element can be used: WWF The World Wide Fund for Nature (WWF) is an international organization WWF's Panda symbol The Panda has become the symbol of WWF. HTML Element The element specifies independent, self-contained content. Examples of where the element can be used: Forum posts Blog posts User comments Newspaper articles Example: Google Chrome Google Chrome is a web browser developed by Google, released in 2008.  Mozilla Firefox Mozilla Firefox is an open-source web browser developed by Mozilla. HTML Element The element defines a set of navigation links. Example: A set of navigation links: HTML | jQuery HTML Element The element represents a container for introductory content or a set of navigational links. What Does WWF Do? HTML Element The element defines a footer for a document or section. Author: Hege Refsnes [email protected]  Block –Level vs Inline Elements Block-Level Elements Inline Elements ✧ Render to begin on a new line ✧ Render on the same line (by default) (by default) ✧ May contain inline or other ✧ May only contain other inline block-level elements elements Block-level elements in HTML Inline Element  Heading Elements Well chosen content of H1 element is crucial to SEO Semantic elements allow for a more meaningful expression of the structure of our HTML page  Lists Lists provide a natural and commonly used grouping of content Very often, Lists are used for structuring navigation portions of the web page  Creating Links Internal linking to other pages in the site External linking to other web sites Linking to sections of a document  Displaying Images Images can enhance your site Remember to specify width and height attributes whenever possible  Tables HTML tables allow web developers to arrange data into rows and columns. A simple HTML table: Company Contact Country Alfreds Futterkiste Maria Anders Germany Table Rows Each table row starts with a and ends with a tag. tr stands for table row. Table Cells Each table cell is defined by a and a tag. td stands for table data. Table Headers Sometimes you want your cells to be table header cells. In those cases use the tag instead of the tag: th stands for table header. 56  HTML formatting tags HTML formatting tags are used to apply various formatting styles to text and elements within a web page. These tags allow you to control the appearance of text, such as making it bold, italic, underlined, or changing its color. Refer->H8 Folder Attribute Semantic meaning Strong importance Stress emphasis Typical visual rendering Bold Italics When to use To highlight important text To emphasize text The Mona Lisa is a famous Examples Warning! This is dangerous! painting. DOM  HTML File path Absolute File Paths: An absolute file path specifies the full and complete path to a file from the root directory of the file system. Example (Windows): C:\Users\John\Documents\mywebsite\index.html Relative File Paths: A relative file path specifies the location of a file relative to the current working directory or the location of the file referencing it. Example index.html in the same directory as the referencing file. Relative References  HTML attributes HTML attributes are additional information added to HTML elements that provide extra details or properties about the element. Attributes are used to modify or define the behavior, appearance, or characteristics of HTML elements. Attributes are always specified in the opening tag of an HTML element and consist of a name and a value, separated by an equals sign (=) and enclosed in double or single quotation marks. href: The href attribute is used with elements like to specify the URL to which the user should be directed when clicking the link. HTML attributes  HTML Forms Forms allow users to input various types of information, such as text, numbers, selections, and more, which can be submitted to a web server for processing. HTML forms are created using a combination of HTML elements and attributes.  ❖ Forms are used to collect information from people viewing your web site. ❖ For example, you can use forms to find out details about your visitors through surveys and feedback, or engage in e-commerce by selling your goods and services to people. ❖ Forms are defined by the tags and are made up of different elements to collect data. ❖ Once the user inputs all of the information, they submit the form by using the "submit" button that you create. ❖ What happens with the data is a decision you will need to make. ❖ You can use a script to manage the data, sent the data to database, or even receive data via e-mail. 65  ❖ Forms can contain; ▪ Text boxes ▪ Password boxes ▪ Check boxes ▪ Radio buttons ▪ Buttons ▪ Select lists ▪ Text areas ▪ Labels ▪ Fieldsets ▪ Legends 66  Form Elements ❖ All form elements should be written in between the.. tags. Tag Description Defines an HTML form for user input Defines an input control Defines a label for an element Defines a multiline input control Defines a drop-down list Defines an option in a drop-down list Groups related elements in a form Defines a caption for a element Defines a clickable button 67  ❖ The element is used to create an HTML form and act as a container for form elements. Although the form element itself isn’t usually a visible part of the page (like the body tag), it could be with appropriate CSS. Most commonly used FORM element Attributes Attribute Description method Specifies the HTTP method used when submitting the form action Specifies an address (url) where to submit the form autocomplet Specifies if the browser should autocomplete the form e novalidate Specifies that the browser should not validate the form. name Specifies a name used to identify the form 68  ❖ The METHOD attribute specifies the HTTP method to be used when submitting the form data: ▪ GET ▪ POST ❖ GET ▪ The default method when submitting form data ▪ Submitted form data will be visible in the page address field ▪ The length of a URL is limited (about 3000 characters) ▪ Never used to send sensitive data! Better for non-secure data ▪ Useful for form submissions where a user want to bookmark the result ❖ POST ▪ The POST method does not display the submitted form data in the page address field. ▪ Used for sensitive or personal information. ▪ Has no size limitations, and can be used to send large amounts of data. 69  ❖ The ACTION attribute defines the action to be performed when the form is submitted. ❖ Normally, the form data is sent to a web page on the server when the user clicks on the submit button. ❖ In the example below, the form data is sent to a page on the server called "action_page.php". This page contains a server-side script that handles the form data: ▪ 70  ❖ AUTOCOMPLETE attribute is used to provide an autocompletion option to user, when user visit the form page. Default value is "on" ❖ If autocompletion is on, it will autocomplete the form and if autocompletion is off, the user have to fill the form field mannual. ❖ It is possible to have autocomplete “on” and “off” for the form, and “off” and “on” for specific input fields. ❖ The autocomplete attribute works with and the following types: ▪ text ▪ search ▪ url ▪ tel ▪ password ▪ datepickers ▪ color 71  Form Elements - ❖ The most important form element is the input element. ❖ An input element can vary in many ways, depending on the type attribute. ❖ An input element can be of type ▪ text, ▪ checkbox, ▪ password, ▪ radio, ▪ submit, ▪ reset and more.. 72  INPUT element Attributes: ❖ TYPE (required) ▪ Defines the usage of the INPUT element. ❖ NAME provides a unique identification for INPUT element. ▪ Each input field must have a name attribute to be submitted. ▪ If the name attribute is omitted, the data of that input field will not be sent at all. ❖ VALUE indicates the value that the INPUT element sends to the server upon submission. ❖ SIZE attribute specifies the size for the input field. (in characters) ❖ MAXLENGTH attribute specifies the maximum number of characters that the input field will accept. 73  INPUT element Attributes: ❖ The READONLY attribute specifies that the input field is read only (cannot be changed) ▪ ❖ The DISABLED attribute specifies that the input field is disabled. ▪ A disabled input field is unusable and un-clickable, and its value will not be sent when submitting the form ▪ 74  Text boxes allow the users to enter a single-line text. Default width of a text field is 20 characters. Example First name: Last name: Result 75  Password boxes are like text boxes, except the characters in a password field are automatically masked (shown as asterisks or circles) Example User Name: Password: Result 76  Radio Button Usually found in a group of options, only one radio button in a group can be selected at a time. Selecting one radio button deselects the others in its group. Each radio button within a group should have the same name and different values. (Otherwise, browsers cannot distinguish between them) CHECKED attribute indicates which radio button is selected initially Example Male Female Result 77  Check Boxes Check boxes let a user select NONE/ONE/MORE options of a limited number of choices. Each check box within a group should have the same name and different values. (Otherwise, browsers cannot distinguish between them) CHECKED attribute indicates initially selected checkboxes. Example Sandwich Pancake Donuts Result 78  Submit Button defines a submit button. A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file (form-handler) defined in the action attribute usually does something with the received input. (include script for processing input data). VALUE attribute changes the text displayed on the button (default is “Submit”). 79  Example Username: Result If you type some characters in the text field above, and click the "Submit" button, the browser will send your input to a page called "html_form_action.asp". 80  Reset Button A reset button is used to clear all the entries user entered into the form and reset the form-data to its default values. VALUE attribute changes the text displayed on the button (default is “Reset”) Example Username: Password: Result 81  Label The tag defines a label for an element. The element does not render as anything special for the user. However, it provides a usability improvement for mouse users, because if the user clicks on the text within the element, it toggles the control. The for attribute of the tag should be equal to the id attribute of the related element to bind them together. A label can be bound to an element either by using the "for" attribute, or by placing the element inside the element. 82  Example Male Female Other Result 83  Button The element defines a clickable button. Example Click Me! Result 84  Text Area Inserts a scrollable text box into FORM for entering multi-line text. It is commonly used in situations where you ask for info that may require multiple sentences. You control the dimension of the text area by using the ROWS and COLS attributes. The rows attribute specifies the visible number of lines in a text area. The cols attribute specifies the visible width of a text area. 85  Example Doğu Akdeniz Üniversitesi Gazimağusa, Kuzey Kıbrıs Mersin 10, Turkey Result 86  List Box tag presents a drop-down list with choices indicated by the tags Include NAME attribute By default, the first item in the drop-down list is selected. To define a pre-selected option, add the selected attribute to the option Change the number of list options visible by including the SIZE = “x” attribute inside the tag x number of options visible Use the multiple attribute to allow the user to select more than one value: if you use multiple attribute, you should also assign different values for each of the value attributes of option tags 87  Example BMW Mercedes Audi Result 88  Example Red Green Blue Purple Result 89  The element is used to group related data in a form. The element defines a caption for the element. Example Personal Information: Name: Surname: Result 90  Output 91  HTML5 Input Types ❖ HTML5 added several new input types: ▪ color range ▪ date search ▪ datetime-local tel ▪ email time url ▪ month week ▪ number ❖ New input types that are not supported by older web browsers, will behave as. 92  color Is used for input fields that should contain a color. The color tool allows the user to choose a color using standard web formats. Depending on browser support, a color-picker can show up in the input field like the ones 93  Example Select your favorite color: Result 94  date Setting the input type to date indicates that you wish the user to enter a date. Depending on browser support, a date picker can show up in the input field. You can restrict the dates allowed to a specific range by applying the min and max attributes to the element. 95  Example Birthday: Enter a date before 2017-11-23: Enter a date after 2010-12-16: Result 96  time The purpose of the time input type is to allow the user to enter a time. Depending on browser support a time picker might pop-up when you enter the input field. Example Select a time: Result 97  datetime-local The datetime-local element combines date and time in a single input field, with no time zone. Depending on browser support a time picker might pop-up when you enter the input field. Example Birthday (date and time): Result 98  month Allows the user to select a month and year. Depending on browser support, a date picker can show up in the input field. Example Birthday (month and year): Result 99  week Allows the user to select a week and year. Depending on browser support, a date picker can show up in the input field. Example Select a week and year: Result 100  email Used for input fields that should contain an e-mail address. Depending on browser support, the e-mail address can be automatically validated when submitted. Example E-mail: Result 101  number Defines a numeric input field. You can also set restrictions on what numbers are accepted by using minand max attributes. Example Enter Your Office No. (between 101 and 112): Result 102  range Defines a control for entering a number whose exact value is not important. Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min and max attributes. Depending on browser support, the input type "range" can be displayed as a slider control. Example Grade: Result 103  tel Used for input fields that should contain a telephone number. The tel type is currently supported only in Safari 8. Example Telephone: Result 104  search Used for search fields. A search field behaves like a regular text field. Example Search Google: Result 105  url Used for input fields that should contain a URL address. Depending on browser support, the url field can be automatically validated when submitted. Example Add your homepage: Result 106