Download web technology notes and more Study notes Web Application Development in PDF only on Docsity!
Web Technology (BCS502)
Unit – 1
Introduction
Web technology refers to the tools and techniques used to create and manage websites and web applications. It encompasses various languages, frameworks, protocols, and software that make the internet interactive and functional for users. Web technology allows for communication over the internet between clients (users) and servers (data providers). Key components of web technology include: Web Browsers: Software like Google Chrome, Firefox, Safari, and Edge that users interact with to access websites. Web Servers: Computers that store, process, and deliver web pages to clients. Examples include Apache, Nginx, and Microsoft IIS. Web Pages: Documents on the web, typically built using HTML (Hypertext Markup Language), CSS (Cascading Style Sheets), and JavaScript. Protocols: These define how data is transferred over the web. Common protocols include HTTP (Hypertext Transfer Protocol) and HTTPS (the secure version of HTTP). Web Development Strategies Web development can be broadly divided into frontend and backend development. Each has its specific strategies to ensure that websites and web applications are effective, efficient, and user- friendly. Frontend development focuses on everything that the user interacts with directly in their browser. The goal is to create visually appealing, responsive, and interactive user experiences. Also refer as Client-Side of the application. Here are some key frontend strategies:
- Responsive Web Design (RWD): Ensure that websites adapt to different screen sizes using CSS media queries, flexible grids, and layouts to provide a seamless experience across devices.
- Performance Optimization: Minimize load times by using techniques like file minification, lazy loading for images, and caching resources.
- JavaScript Frameworks: Leverage modern frameworks like React.js, Vue.js, or Angular to create interactive and dynamic web pages efficiently.
- Cross-Browser Compatibility: Test and ensure that your website works smoothly across various browsers, using tools like BrowserStack to avoid inconsistencies. Backend development handles the server-side operations, databases, and business logic that power the frontend. Backend strategies are focused on ensuring that the application runs smoothly, efficiently, and securely. Also refer as Server-Side of the application. Here are some key frontend strategies: Microservices Architecture: Break down the backend into smaller, independent services that can be developed, deployed, and scaled separately for greater flexibility and fault tolerance.
API-First Development: Design RESTful APIs services to provide data to the frontend, enabling better separation of concerns and scalability. Database Optimization: Use indexing, caching, and normalization to speed up database queries and reduce load on the server. Security: Implement robust authentication (OAuth, JWT), encrypt sensitive data, and sanitize inputs to protect against SQL injection, XSS, and CSRF attacks. Cloud Computing & Serverless: Use cloud platforms (AWS, Google Cloud) and serverless functions to scale applications automatically and reduce infrastructure management. History of Web The World Wide Web was invented by Tim Berners-Lee in 1989 while working at CERN. It officially went live in 1991 and introduced the concepts of HTML (Hypertext Markup Language), HTTP (Hypertext Transfer Protocol), and the first web browser. This period is known as Web 1.0, where websites were static, primarily displaying information without much user interaction. History of Internet Collection of interconnected networks. The Internet started in the 1960s as a way for government researchers to share information. Computers in the '60s were large and immobile and in order to make use of information stored in any one computer, one had to either travel to the site of the computer or have magnetic computer tapes sent through the conventional postal system. The Soviet Union's launch of the Sputnik satellite spurred the U.S. Defense Department to consider ways information could still be disseminated even after a nuclear attack. This eventually led to the formation of the ARPANET (Advanced Research Projects Agency Network), the network that ultimately evolved into what we now know as the Internet. ARPANET was a great success but membership was limited to certain academic and research organizations who had contracts with the Defense Department. In response to this, other networks were created to provide information sharing. January 1, 1983 is considered the official birthday of the Internet. Prior to this, the various computer networks did not have a standard way to communicate with each other. A new communications protocol was established called Transfer Control Protocol/Internetwork Protocol (TCP/IP). This allowed different kinds of computers on different networks to "talk" to each other. ARPANET and the Defense Data Network officially changed to the TCP/IP standard on January 1, 1983, hence the birth of the Internet. All networks could now be connected by a universal language. Protocols Governing the Web The term "protocol governing the web" typically refers to the set of rules and standards that define how data is transmitted and accessed over the internet. some protocols are: TCP/IP (Transmission Control Protocol/Internet Protocol) TCP: Responsible for establishing a connection between devices and ensuring the reliable transmission of data. It breaks down large data sets into smaller packets and guarantees their delivery by reassembling them in the correct order at the destination.
- Determine the Goal : Clarify the primary objective of the web project (e.g., a blog, e- commerce site, portfolio, etc.).
- Identify the Target Audience : Know who will use the website and tailor the design and content accordingly.
- Set Project Requirements : List the features and functionalities needed (e.g., user authentication, database integration, APIs, etc.). 2. Plan the Project Structure
- Information Architecture (IA) : Plan the layout of the website, defining how content will be structured. Create a sitemap that outlines the main sections and pages.
- Wireframes and Mockups : Use wireframes to create a low-fidelity representation of the website's layout. Optionally, create high-fidelity mockups to show what the final design will look like.
- Technology Stack Selection : Choose the technologies you’ll use, including: o Frontend : HTML, CSS, JavaScript, frameworks like React, Vue.js, or Angular. o Backend : Server-side language (e.g., Node.js, Python, Ruby, PHP, java). o Database : MySQL, MongoDB, PostgreSQL, etc. o Version Control : Git and platforms like GitHub. 3. Set Up the Development Environment
- Install Required Tools : o Code editor (e.g., Visual Studio Code, Sublime Text). o Node.js for package management and JavaScript runtime (if needed). o Web browser and development tools (e.g., Chrome DevTools).
- Set Up Version Control : Initialize a Git repository to track code changes.
- Framework and Library Setup : Install necessary libraries or frameworks using package managers like npm (Node.js), pip (Python), etc. 4. Design and Develop the Frontend
- HTML : Structure the content of your web pages using semantic HTML elements (e.g., headers, paragraphs, forms).
- CSS : Style the website using CSS or preprocessors like Sass/SCSS. Focus on responsiveness, creating layouts that adapt to different screen sizes (mobile, tablet, desktop).
- JavaScript : Add interactivity to the site (e.g., form validation, animations, etc.). Use modern JavaScript (ES6+), and if necessary, leverage a frontend framework like React, Vue, or Angular.
- Testing : Ensure the frontend works properly across different browsers (Chrome, Firefox, Edge, Safari) and devices (desktop, mobile).
5. Backend Development - Server-Side Logic : Develop the server-side logic using your chosen language (e.g., Node.js, Python, Ruby, PHP). This might involve processing form submissions, handling file uploads, or executing business logic. - Database Setup : o Choose the appropriate database (relational or NoSQL). o Design database schemas and relationships between entities (tables, collections). o Set up database connection and ORM (Object-Relational Mapping) if needed. - APIs : If your application needs to interact with external services, build or consume APIs. You may create RESTful APIs to manage data flow between the frontend and backend. 6. Authentication and Authorization - User Authentication : Implement a user authentication system (e.g., sign up, log in, log out). This can involve OAuth, JWT (JSON Web Tokens), or session-based authentication. - Authorization : Define user roles and permissions to restrict access to certain parts of the website (e.g., admin panel) 7. Testing and Debugging - Unit Testing : Write tests for individual components of your application to ensure they work as expected. - Integration Testing : Test how different modules of your application work together. - End-to-End Testing : Simulate real-world usage of the website to make sure everything works from the user's perspective. - Debugging : Use browser developer tools and logging to identify and fix any bugs or performance issues. 8. Optimize for Performance - Minify CSS and JavaScript : Reduce the file size of your assets to improve load times. - Image Optimization : Compress images and use modern formats (e.g., WebP) to improve loading speed. - Lazy Loading : Load images, scripts, and other content only when they are needed. - Content Delivery Network (CDN) : Use a CDN to serve static files from servers closer to your users, improving site performance. 9. Deploy the Web Project - Select a Hosting Provider : Choose a hosting service based on your project’s needs (e.g., shared hosting, VPS, or cloud platforms like AWS, Google Cloud, Heroku). - Set Up a Domain Name : Register a domain name for your website and link it to your hosting provider.
frequencies and allows the phone line to be used for both voice calls and internet simultaneously.
- Cable internet uses the same coaxial cables that deliver television services to provide internet access. It is a widely used form of broadband that offers faster speeds than DSL, especially in urban and suburban areas. Introduction to Internet services and tools Internet Services allows us to access huge amount of information such as text, graphics, sound and software over the internet. Following diagram shows the four different categories of Internet Services. Communication Services There are various Communication Services available that offer exchange of information with individuals or groups. The following table gives a brief introduction to these services:
Web Services Web services allow exchange of information between applications on the web. Using web services, applications can easily interact with each other. World Wide Web (WWW) WWW is also known as W3. It offers a way to access documents spread over the several servers over the internet. These documents may contain texts, graphics, audio, video, hyperlinks. The hyperlinks allow the users to navigate between the documents. Video Conferencing Video conferencing or Video teleconferencing is a method of communicating by two-way video and audio transmission with help of telecommunication technologies. Modes of Video Conferencing Point-to-Point This mode of conferencing connects two locations only. Multi-point This mode of conferencing connects more than two locations through Multi-point Control Unit (MCU). Introduction to Client-Server Computing
Basic Structure of an HTML Document
Page Title
Hello, World!
This is a paragraph.
- **** : The root element of the document.
- **** : Contains metadata about the document, such as the title.
- **** : Specifies the title of the webpage.
- <body> : Contains the main content of the webpage HTML Tags and Elements HTML elements consist of opening tags , content , and closing tags. Here are some common HTML tags: 1. Headings (<h1> to <h6>) Defines headings in different sizes, where <h1> is the largest and <h6> is the smallest. <h1>Main Heading</h1> <h2>Sub Heading</h2> <h3>Smaller Heading</h3> 2. Paragraph (<p>) Defines a paragraph. <p>This is a paragraph of text.</p> 3. <pre> tag in HTML is used to define preformatted text. Text within this tag is displayed exactly as it is written, with all the whitespace (spaces, tabs, and line breaks) preserved. <pre> This text will preserve:
- Indentation
- Line breaks
- Multiple spaces </pre> 4. <sub> Tag Subscript text appears half a character below the normal line, and is sometimes rendered in a smaller font. Subscript text can be used for chemical formulas, like H2O. 5. <sup> Tag defines superscript text. Superscript text appears half a character above the normal line, and is sometimes rendered in a smaller font. Superscript text can be used for footnotes, like WWW[1].
6. Anchor () Creates a hyperlink to another webpage or a section within the same page. Click here Attributes :
- href: The URL or link to navigate to.
- target: Defines where to open the linked document (_blank for a new tab, _self for the same tab). 7. Italic () Italicizes the text This text is italic. 8. Underline () Underlines the text. This text is underlined. 9. Bold () Makes the text bold. This text is bold.
10. Line Break () Inserts a line break. It is a self-closing tag.
This is line one.This is line two after the break.
11. Horizontal Rule () Inserts a horizontal line (often used as a thematic break).
Text above the line.
<p>Text below the line.</p>
12. Images () Displays an image on the webpage. The src attribute specifies the image source, and alt provides alternative text.
13. Division () Defines a block-level container or division in the document. Often used for layout purposes and grouping elements together.
Title inside div <p>This is a paragraph inside a div block.</p>
14. Span () Defines an inline container or group of text. It is mainly used for styling small parts of text or grouping inline elements.
This is a highlighted text inside a paragraph.
Lists (, , ) -
Unordered List () : A list of items with bullet points. -
Ordered List () : A list of items with numbering. -
List Item () : Defines an item within a list.
Item 1 Item 2
Email Input (type="email") This input is used for collecting email addresses. Browsers may validate that the entered text is in a valid email format (e.g., [email protected]).
Password(type=”password”) The password input type in HTML creates a text field where the entered characters are masked (hidden), typically with dots or asterisks, to protect sensitive information like passwords.
Radio Button (type="radio") Radio buttons allow users to select one option from a set. Since both buttons share the same name ("gender"), only one option can be selected at a time.
Checkbox (type="checkbox") Checkboxes allow users to select one or more options. Each checkbox is independent, so multiple boxes can be checked.
File Input (type="file") This creates a button to upload a file from the user’s computer. It opens the file selection dialog for the user to choose a file. ** Tag** The element creates a dropdown list where users can select one option from a set of predefined options. ** Tag The element creates a clickable button.
Submit Button (type="submit") This button submits the form data to the server or the action specified by the form (if any).
Reset Button (type="reset") The reset button clears all input fields in the form, resetting them to their default values. Attributes:
name : This attribute is important for identifying the input data when the form is submitted. The name attribute defines the key of the data sent in the HTTP request.
When the form is submitted, the value entered in the text input will be associated with the key "name".
id : This is used to uniquely identify an element on the page. It's also used to link inputs with their corresponding labels using the for attribute of the tag.
value : For inputs like radio buttons and checkboxes, the value attribute specifies the data that will be sent to the server when the user selects that option. Example :
Name
Phone
Email
Gender
Male
Female
skills
JAVA
C++
PYTHON
Branch
Upload doc
There are three important characteristics of XML that make it useful in a variety of systems and solutions: XML is extensible: XML allows you to create your own self-descriptive tags, or language, that suits your application. XML carries the data, does not present it: XML allows you to store the data irrespective of how it will be presented. XML is a public standard: XML was developed by an organization called the World Wide Web Consortium (W3C) and is available as an open standard. Following is a complete XML document:
vivek jaiswal [email protected]
XML Declaration The XML document can optionally have an XML declaration. It is written as below
Where version is the XML version and encoding specifies the character encoding used in the document.
Root element : An XML document can have only one root element. For example, following is not a correct XML document, because both the x and y elements occur at the top level without a root element: …. …. The following example shows a correctly formed XML document:
…. ….
Case sensitivity: The names of XML-elements are case-sensitive. That means the name of the start and the end elements need to be exactly in the same case. For example is different from . Attributes An attribute specifies a single property for the element, using a name/value pair. An XML- element can have one or more attributes. abc Same attribute cannot have two values in a syntax.
Xml Tree Structure
An Example XML Document XML documents are formed as element trees. An XML tree starts at a root element and branches from the root to child elements. All elements can have sub elements (child elements)
- URI (Uniform Resource Identifier) : The namespace is identified by a URI, which serves as a unique reference but does not need to be a resolvable link.
- Prefixes : Namespaces are often associated with a prefix to differentiate between elements or attributes from different namespaces.
XML DTD: (Document Type Definition) is used to define the structure, rules, and
constraints for XML documents. It helps ensure that the data within an XML document is consistent and valid according to predefined rules. Types of DTD: Internal DTD: Defined within the XML document itself.
]>
John Jane Reminder Don't forget the meeting tomorrow!
External DTD: Defined in a separate file and referenced from the XML document. An external DTD is defined in a separate .dtd file and linked from the XML document using the SYSTEM or PUBLIC keyword. note.dtd (the external DTD file):
XML document:
John Jane Reminder Don't forget the meeting tomorrow!
XML Schema (XSD) for the XML: XML Schemas provide a more powerful and flexible
alternative to DTDs. They define the structure of an XML document using XML syntax itself. XML Schema Definition (XSD) can specify the data types, number of elements, and constraints on data within an XML document.
- XSD supports data types (e.g., integers, strings, etc.) and namespaces.
- It allows for more precise validation and is extensible and reusable.
Xml document
vivek jaiswal [email protected]
Schema Example
