• Table of Contents
  • Next Chapter

Web technology fundamentals

Web technologies are in a constant state of flux. It’s impossible to predict which will fail, which will shine brightly then quickly fade away, and which have real longevity. Rapid innovation is what makes web app development so exciting, but shiny new things shouldn’t be pursued without a solid understanding of the underlying web platform.

The ups and downs of web technologies, by Google search volume

In the web developer job interviews I conducted over the past ten years, interviewees could usually easily explain how to create the latest interactive interfaces, but often couldn’t describe the basics of character encoding or HTTP. These topics certainly aren’t as sexy as modern CSS and HTML canvas animations, but they are essential knowledge for those wishing to create a stable, high performance web app.

Web architecture primer

Let’s start with DNS (domain name system) and HTTP (hypertext transfer protocol). These are the underlying systems that web browsers use to send and fetch data to and from web apps. Familiarity with these protocols is essential for later discussions on application programming interfaces (APIs), performance and security.

When you type an address into a web browser or follow a link, the browser first has to identify which computer server in the world to ask for the content. Although web addresses use domain names like fivesimplesteps.com to make them easier for people to remember them, computers use unique numbers to identify each other 1 .

To convert names to numbers, the browser queries a series of DNS servers, which are distributed directories of names and numbers for all web servers. To speed up this process, the lookups are cached at a number of locations: your internet service provider (ISP) will hold a cache, your operating system may hold a cache and even your web browser software will hold a short lifetime cache.

Google Chrome’s integrated DNS cache

HTTP requests

Once your browser has identified the correct number associated with the domain name, it connects to the server with the equivalent of, “Hello, can I ask you something?” The connection is agreed and your browser sends a message to request the content. As a single web server can host thousands of websites, the message has to be specific about the content that it is looking for.

Your browser will add supplementary information to the request message, much of which is designed to improve the speed and format of the returned content. For example, it might include data about the browser’s compression capabilities and your preferred language.

An HTTP request message for the BBC technology news page will look similar to the example below. Each separate line of the message is known as an HTTP header.

The first line states the method of request (GET), the local path to the requested resource, and the version of HTTP used. GET is the most common HTTP method and asks the server to return the content found at the specified location. POST is another common method, which sends data collected in the browser to the server.

The Host header field tells the server which of the potentially thousands of locally hosted websites to check for the resource, and the User-Agent describes the browser making the request.

The various Accept fields define preferences for the returned content. Rather than waste time with numerous back and forth messages (“Can I have it in this format? No? OK, how about this format?”), Accept header fields can specify multiple preferences separated by commas. Each can be assigned a degree of preference defined by a quality score q of between 0 and 1. If a q value isn’t specified it is assumed to be 1. In the example above, the browser is asking for HTML or XHTML with equal full preference (q=1), followed by XML (0.9), and finally any format (0.8).

The Keep-Alive and Connection fields ask the web server to temporarily create a persistent connection. This speeds up requests that immediately follow this request, as they don’t need to each perform the initial connection handshake of “Hello, can I ask you something?” An added benefit of persistence is that the server can stream back the content in chunks over the same connection, rather than waiting for it all to be ready for a single response.

HTTP responses

The response from the server to the browser also contains an HTTP message, prefixed to the requested content.

The opening status line contains the HTTP version number, a numeric response code and a textual description of the response code. The web browser is designed to recognise the numeric response code and proceed accordingly. Common response codes include:

  • 200: OK Successful request
  • 301: Moved Permanently The requested content has been moved permanently to a new given location. This and all future requests should be redirected to the new address.
  • 302: Found The requested content has been moved temporarily to a given address. Future requests should use the original location.
  • 404: Not Found The server cannot find the resource at the requested location.
  • 500: Internal Server Error A generic error message, shown when an unexpected condition prevents the request from being fulfilled.

The browser doesn’t understand the textual part of the line. It can be used by the web server to elaborate on a response, and is intended for users or developers who read the HTTP headers. For example, a 200 OK response could also be sent as 200 Page Found .

The Keep-Alive and Connection header fields establish rules for the persistent connection that the browser requested. In the example, the Keep-Alive field tells the browser that the server will hold the connection open for up to 10 seconds in anticipation of the next request. It also specifies that up to 796 additional requests can be made on the connection.

The Cache-Control and Expires fields control caching of the returned content, which might occur within the browser or at any number of intermediate proxy servers that exist between the web server and the user’s computer. In the example, the immediate expiry date and cache age of zero inform the browser that it should check for a new copy of the page before using a locally cached version on subsequent requests.

The Transfer-Encoding value of chunked notifies the browser that the content will be transferred in pieces. The content begins after the final header field and is separated from the HTTP header by two newlines. Each chunk of content starts with a hexadecimal value of its size expressed in octets (units of 8 bits): 125 in the example.

Statelessness and cookies

HTTP is stateless . This means that multiple requests from the browser to the server are independent of one another, and the server has no memory of requests from one to the next. But most web apps need to track state to allow users to remain logged in across requests and to personalise pages across sessions.

HTTP cookies are the most common solution to this problem. A cookie is a small text file that the browser stores on your computer. It contains a name and a value associated with a specific website (for example, a name of age and a value of 43 ). Cookies can be temporary or can persist for years.

Each website domain can create 20 cookies of up to 4kb each. Cookies are created and read through HTTP headers. In the BBC HTTP response, the Set-Cookie header field demonstrates the creation of a cookie.

In this example, the web server asks the browser to create a cookie with the name BBC-UID and a value of d4fd96e01cf7083 . The cookie is valid for all domains that end with bbc.co.uk and all directories. The expiry date for the cookie has been set to a year after the time of the response.

Subsequent HTTP requests from the browser that match the valid domain and path will include the cookie as an HTTP header, which the server can read:

What does this random-looking BBC cookie mean?

Although cookies enable real user data to be stored and read across requests, in practice they are usually used to store unique identifiers for users rather than actual user data. The small size of cookies, the additional bandwidth overhead in HTTP headers and the security risk of storing sensitive data in plain text cookie files all combine to make unique identifiers a better solution for cookie data. With this model, user data is stored securely on the server and associated with a short unique identifier; it is the identifier that is subsequently used in cookies for persistence.

If the expiry date for a cookie isn’t set it becomes a session cookie and is deleted when the user ends their current session on the website. Due to privacy concerns, some users may configure their web browser to allow session cookies but disallow standard persistent cookies.

Content type

Your browser now has the content it requested, thanks to the HTTP response from the server. Before the content can be processed and displayed though, the browser needs to determine what type of content it is: an image, PDF file, webpage, or something else.

One way a browser can achieve this is through content sniffing. The browser examines the first few bytes (and sometimes more) of the content to see if it recognises a pattern in the data, such as a PDF or JPG header. Apart from the accuracy and performance issues that this may introduce, it can also have security implications 2 .

The better solution is for the server to tell the browser what the content is with an HTTP header field in the response, such as the one in the BBC example:

The Content-Type field specifies the internet media type 3 of the content. Media types can identify most common file formats 4 , including videos, images, webpages, spreadsheets and audio files. The web server is normally configured to send the correct content type header field based on the file extension. If your app delivers any special data or file formats, ensure that the relevant media types are configured on the web server.

Character encoding and Unicode

At this point, images and other binary files can be correctly interpreted and displayed by the browser. However, HTML pages and other text-based content are still unreadable by the browser due to the different character encodings that can be used.

Like all other files, text files are streams of bytes of data. In an image file, a set of bytes might define the colour of a single pixel. In a text file, a set of bytes might define a single character, perhaps a Japanese kanji character, the uppercase letter B of the Latin alphabet, or a semicolon. How exactly do the bytes map to characters? The answer is: it depends on the character encoding. Until the browser knows what the character encoding is, it doesn’t know how to create characters from the bytes.

In the early days of computing most text was stored in ASCII encoding, which can represent the basic Latin alphabet with only seven bits per character. Additional encodings followed, each designed to handle a specific set of characters: Windows-1251 for the Cyrillic alphabet, ISO 8859-8 for Hebrew, among many others.

Each encoding standard stored one character in one 8-bit byte. ISO 8859-1, also referred to as Latin-1, became a popular encoding that remains widely in use. It uses the eighth bit to extend ASCII with accents and currency symbols found in many of the western European languages. Thanks in part to the internet, this system became increasingly unworkable as multiple diverse alphabets were required in a single file. The sensible way to achieve this was to start using more than eight bits to represent a single character.

Unicode was born. Rather than defining a specific encoding, Unicode sets out over one million code points , which are numbers that represent characters. For example, the Greek capital letter Sigma Σ is Unicode number 931, the Arabic letter Yeh ي is 1610, and the dingbat envelope character ✉ is code point 9993.

Multiple encodings of Unicode exist that define how to store the code point numbers in bytes of data. UTF-8 and UTF-16 are two such encodings. Both can encode the full range of more than one million characters and both use a variable number of bytes per character. The main practical difference between the two is that UTF-8 uses between one and four bytes per character, whereas UTF-16 uses two or four bytes per character.

Most importantly, because the first 128 characters defined by Unicode exactly match those of ASCII, UTF-8 is backwards compatible with ASCII, as it only uses one byte per character for these lower code points. This is not so for UTF-16, which uses a minimum of two bytes per character and therefore uses twice as many bytes to store standard ASCII characters.

A web server can notify a browser of the character encoding through an additional parameter in the Content-Type HTTP header field:

This allows the browser to decode the content immediately. Alternatively, the character encoding can be specified inside the HTML <head> element with an HTTP equivalent <meta> tag:

or the HTML5 version:

This is useful if you don’t have access to the web server to configure the correct HTTP header. The browser will usually be able to read this directive no matter what the encoding is, as most encodings extend ASCII, which are the only characters used in the <meta> tag. However, the browser may consequently have to reparse the document a second time with the correct encoding. For this reason, the HTTP header field is the preferred option, but if you do use the <meta> tag ensure that it is the first element inside the <head> element so that the browser reads it as soon as possible.

As with media types, omission of the character encoding is not recommended and can be a security risk.

Document object model (DOM)

With knowledge of the encoding, the browser can convert the incoming bytes into the characters of the webpage. It runs a parser through the content which recognises HTML elements and converts them into a tree-like hierarchy of nodes in memory called the document object model 5 (DOM) or content tree.

DOM nodes for HTML elements become element nodes , text strings within tags are text nodes , and attributes of an element are converted to attribute nodes .

Apart from structure, the DOM defines a standard interface (API) that scripts can use to access, modify and move between nodes, though this interface is implemented with varying degrees of completeness across different browsers.

When the HTML parser reaches a reference to an external resource like an <img> , it requests the file from the web server even if it is still downloading the remainder of the HTML content. Most modern browsers allow six simultaneous requests per host and over thirty requests in total at any one time.

Style sheets and JavaScript files are notable exceptions to this rule. When the parser encounters an external style sheet file, it may block further downloads until the style sheet is downloaded, although this is now rare in modern browsers.

JavaScript files are a little more problematic. At the time of writing, Internet Explorer 9 and earlier block the download of subsequent image files until a JavaScript file is downloaded and executed 6 . What’s more, all browsers will stop any rendering of the page until the JavaScript is processed, in case the code makes a change to the DOM. We’ll discuss this in more detail shortly.

If your JavaScript doesn’t modify the DOM, you can add an async or defer attribute or both to your <script> elements to prevent blocking. As these attributes aren’t currently supported in all popular browsers, the best cross-browser advice at the moment is to:

  • Include style sheets before scripts so that they can begin to download before any JavaScript blocks.
  • Place scripts at the end of the HTML, just before the </body> , so that they don’t block downloads or rendering.
  • Force scripts to download asynchronously using one of many workarounds; search the web for loading scripts without blocking to find a variety of options.

The render tree and layout

After the style sheets have downloaded, the browser starts to build a second tree of nodes, even if the DOM is not yet complete. The render tree is a visual representation of the DOM with a node for each visual element 7 . Style data is combined from external style sheets, inline styles, outdated HTML attributes (such as bgcolor ) and the browser’s default style sheet.

Render tree nodes are rectangles whose structure is defined by the CSS box model with content, padding, borders, margins and position:

The CSS Box Model

Render nodes are initially created without the geometric properties of position and size. These are established in a subsequent layout process that iterates through the render tree and uses the CSS visual flow model 8 to position and size each node. When the layout is complete the browser finally draws the nodes to screen with a paint process.

If a geometric change is made to a DOM element post-layout, by JavaScript for instance, its relevant part of the render tree is invalidated, rebuilt, reflowed and repainted. Conversely, changes to non-geometric DOM node properties such as background colour do not trigger a reflow and are, therefore, faster.

*Layout rendering is the biggest difference between the modes, but there are also some minor non-layout differences too, such as HTML parsing.

Historically, some browsers didn’t fully conform to the CSS specification for the layout process, causing inconsistency in HTML layout between browsers. In an effort to fix the situation while providing backwards compatibility, this gave way to three layout modes: standards , quirks and almost standards * (which is identical to standards mode except for the layout of images inside table cells).

Unless your app is specifically designed for an environment that exclusively uses old web browsers, you should trigger the browser into standards mode by including a valid DOCTYPE at the start of the HTML:

HTML 5, but backwards compatible with most popular web browsers, down to IE6

HTML 4 Strict

If necessary, use conditional comments 9 to resolve layout issues in older versions of Internet Explorer, the main quirks mode villain:

JavaScript and the browser object model

Most web apps need to modify the DOM to deliver interactive content without the cost of a new page request. The DOM provides an API for this purpose but it isn’t a programming language. Instead, client-side scripts are written in JavaScript, which interfaces with the DOM API. The DOM is separate from the JavaScript engine in a web browser and consequently there is some overhead for each JavaScript request to the DOM.

As far as JavaScript sees the world, the DOM is part of the larger browser object model (BOM), which contains several sets of data about the browser. Unlike the DOM, the BOM is not an agreed industry standard and it exhibits greater discrepancy between browser vendors.

The BOM is represented in JavaScript by the window object and typically contains the navigator , frames , location , history , screen and document (DOM) objects. The global window object is the default context of JavaScript, which means that it is the default location to store variables and functions.

Two key security policies limit JavaScript’s access to the browser. Firstly, the JavaScript sandbox restricts functionality to the scope of the web, to prevent scripts from opening or deleting files on the user’s local operating system. Secondly, the same origin policy prevents communication between scripts on different domains or protocols: that is, between dissimilar pages or third-party embedded frames. A notable exception is that scripts included from other hosts behave as if they originate on the main page host. This exception allows third-party widgets to modify the DOM if they are included within a <script> element.

We’ve seen that client-side JavaScript code can interface with the DOM inside the browser to modify the webpage without a page refresh, but what if it needs to modify part of the page with additional data from the web server?

This is where Ajax comes in. The term originates 10 from a contraction of asynchronous JavaScript and XML, though in modern usage it requires neither asynchronicity nor XML, and is used as a catch-all term for the various technologies and methods that enable communication between JavaScript and a web server.

The heart of most Ajax is the XMLHttpRequest API inside JavaScript. This feature enables JavaScript code to send invisible, customisable HTTP requests to the web server without altering the current page, and the asynchronous nature of JavaScript and XMLHttpRequest (XHR) allows other processing to continue while the web server responds. If the response is chunked into pieces, the XHR can trigger multiple responses in the JavaScript code to process the content as it is received. It’s worth noting that, as with full page requests, the browser may cache the data returned from XHR GET requests, depending on the HTTP header returned.

XML data is neither particularly lightweight nor quick to process. It is now common practice to use the alternative JSON (JavaScript object notation) data format for Ajax communication, which is smaller to transmit and faster to process in JavaScript. Most modern web browsers can natively parse JSON data into JavaScript objects, and all popular server-side technologies offer JSON libraries.

Alternatively, an XHR response may contain a section of ready-made HTML. This may be larger than an equivalent JSON response but it reduces client-side processing and can be inserted directly into the DOM.

XHR is restricted by the same origin policy and cannot communicate with a server on a different domain. The restriction is removed if the server includes an explicit instruction to allow cross-domain requests for a resource:

Allows cross-domain requests to the resource from fivesimplesteps.com

This header is supported in most modern browsers: IE8+, Firefox 3.5+, Safari 4+ and Chrome. Cross-domain Ajax requests in older browsers require workarounds, of which JSONP 11 is the most popular option, albeit the most convoluted.

The JSONP technique (JSON with padding) uses JavaScript to dynamically insert a <script> element into the page, the source of which is loaded from the third-party domain.

This is valid because, as we noted earlier, scripts loaded into the page don’t face the same cross-domain restrictions. Still, so far the returned data (typically JSON) will simply be inserted into the <script> element, which isn’t accessible to the JavaScript:

This is where the padding comes in. In the earlier <script> element, the URL specified an existing function name as a parameter: in our case, responseFunction . The server-side code processing the request takes this name and wraps it around the JSON output, to modify the response from a simple line of data to a function call:

When the script is processed, the requested function will automatically execute with the returned data as entered, enabling the data to be processed.

While workable, the JSONP hack has major drawbacks compared to XHR. HTTP headers cannot be modified in the request or examined in the response, which limits communication to GET only, and complicates error handling and retries. Response data cannot be processed in chunks and must be formatted as executable JavaScript code. Perhaps most importantly, the browser executes the returned code immediately and therefore the trust and ongoing security of the third-party server must be considered.

Knowledge of the underlying web technologies enables you to develop workarounds for web browser restrictions and optimise performance and security.

  • DNS converts domain names to computer-usable identification numbers.
  • HTTP messages govern the requests and responses between web browsers and web servers.
  • HTTP is stateless, but cookies can be used to remember a computer from one request to another.
  • Content-type HTTP header fields tell the browser what type of content is being sent.
  • Character encoding headers tell the browser how to understand text files.
  • UTF-8 is the most practical character encoding for the web.
  • Web browsers convert HTML into a document object model (DOM) tree in memory.
  • A second render tree is created in browser memory from the DOM, to represent the visual page layout.
  • Use a DOCTYPE to tell the browser which layout mode to use.
  • JavaScript can modify the DOM, and Ajax techniques can request additional data from the server and make partial updates to the DOM.

This work is licensed under a Creative Commons Attribution 4.0 International License .

  • 1 I cunningly sidestep the IPv4 vs IPv6 issue here, as IPv4 was exhausted a week before I wrote this chapter. See http://en.wikipedia.org/wiki/IPv6#IPv4_exhaustion
  • 2 http://code.google.com/p/browsersec/wiki/Part2#Survey_of_content_sniffing_behaviors
  • 3 http://en.wikipedia.org/wiki/Internet_media_type
  • 4 http://www.iana.org/assignments/media-types/index.html
  • 5 http://www.w3.org/DOM/
  • 6 http://www.browserscope.org/?category=network
  • 7 And sometimes more than one node in the render tree per DOM node, e.g. for multiple lines of text
  • 8 http://www.w3.org/TR/CSS2/visuren.html
  • 9 http://www.quirksmode.org/css/condcom.html
  • 10 http://blog.jjg.net/weblog/2005/02/ajax.html
  • 11 http://en.wikipedia.org/wiki/JSON#JSONP

Geektonight

Web Technologies Notes | PDF, Syllabus, Book | B Tech 2021

  • Post last modified: 9 July 2021
  • Reading time: 26 mins read
  • Post category: B Tech Study Material

Download Web Technologies Notes PDF, syllabus for B Tech, BCA, MCA 2021. We provide complete web technologies pdf . Web Technologies lecture notes include web technologies notes , web technologies book , web technologies courses, web technologies syllabus , web technologies question paper , MCQ, case study, web technologies interview questions and available in web technologies pdf form.

Web Technologies subject is included in B Tech CSE, BCA, MCA, M Tech. So, students can able to download web technologies notes pdf .

Web Technologies Notes

Table of Content

  • 1 Web Technologies Syllabus
  • 2 Web Technologies PDF
  • 3.1 What is Web Technologies?
  • 4 Web Technologies Interview Questions
  • 5 Web Technologies Question Paper
  • 6 Web Technologies Book

Web Technologies Notes can be downloaded in web technologies pdf from the below article

Web Technologies Syllabus

Detailed web technologies syllabus as prescribed by various Universities and colleges in India are as under. You can download the syllabus in web technologies pdf form.

Web Essentials : Clients, Servers, and Communication. The Internet-Basic Internet Protocols The World Wide Web-HTTP request message-response message-Web Clients Web Servers-Case Study.

Markup Languages: XHTML.An Introduction to HTML History-Versions-Basic XHTML Syntax and Semantics- Some Fundamental HTML Elements-Relative URLs-Lists-tables-Frames-Forms-XML Creating HTML Documents CaseStudy.

Style Sheets : CSS-Introduction to Cascading Style Sheets-Features-Core Syntax-Style Sheets and HTML Style Rule Cascading and Inheritance-Text Properties-Box Model Normal Flow Box Layout-Beyond the Normal Flow-Other Properties-Case Study.

Client- Side Programming: The JavaScript Language-History and Versions Introduction JavaScript in Perspective-Syntax Variables and Data Types-Statements- Operators- Literals-Functions-Objects-Arrays-Built-in Objects-JavaScript Debuggers.

Host Objects : Browsers and the DOM-Introduction to the Document Object Model DOM History and Levels-Intrinsic Event Handling-Modifying Element Style-The Document Tree-DOM Event Handling- Accommodating Noncompliant Browsers Properties of window-Case Study.

Server-Side Programming: Java Servlets- Architecture -Overview-A Servelet-Generating Dynamic Content-Life Cycle-Parameter Data-Sessions-Cookies- URL Rewriting-Other Capabilities-Data Storage Servelets and Concurrency-Case Study- Related Technologies.

Representing Web Data : XML-Documents and Vocabularies-Versions and Declaration -Namespaces JavaScript and XML: Ajax-DOM based XML processing Event-oriented Parsing: SAX-Transforming XML Documents-Selecting XML Data: XPATH-Template-based

Transformations: XSLT-Displaying XML Documents in Browsers-Case Study- Related Technologies. Separating Programming and Presentation: JSP Technology Introduction-JSP and Servlets-Running JSP Applications Basic JSPJavaBeans Classes and JSP-Tag Libraries and Files-Support for the Model-View-Controller Paradigm- Case Study-Related Technologies.

Web Services : JAX-RPC-Concepts-Writing a Java Web Service-Writing a Java Web Service Client- Describing Web Services: WSDL- Representing Data Types: XML Schema-Communicating Object Data: SOAP Related Technologies-Software Installation-Storing Java Objects as Files-Databases and Java Servlets.

Web Technologies PDF

Web technologies notes, what is web technologies.

Web technology is defined as the process of communication between two computers means by which two computers communicate between them using a Markup language and different multimedia packages is called web technology.

web technology assignment

Web technology can also be defined as mediator or medium between a server (webserver) and client (web client). Web technology is a front-end programming language used for web development (front end development of a website).

Web Technologies Interview Questions

Some of the web technologies interview questions are mentioned below. You can download the QnA in web technologies pdf form.

  • What is the use of Webkit in CSS3?
  • What are the CSS Box Model and its components?
  • What is the difference between undefined value and Null value in JavaScript?
  • Mentions the APIs which are approved by HTML5 recently?
  • How JavaScript handles automatic type conversion of variables?
  • What is the difference between session storage and local storage objects in HTML?
  • What are the different types of popup boxes available in JavaScript?
  • What is Z-index in CSS?
  • What is the difference between Canvas and SVG?
  • What are the new form elements in HTML5?

Web Technologies Question Paper

If you have already studied the web technologies notes, now it’s time to move ahead and go through previous year web technologies question paper .

It will help you to understand question paper pattern and type of web technologies questions and answers asked in B Tech, BCA, MCA, M Tech web technologies exam. You can download the syllabus in web technologies pdf form.

Web Technologies Book

Below is the list of web technologies book recommended by the top university in India.

  • Jeffrey C.Jackson, “Web Technologies–A Computer Science Perspective”, Pearson Education, 2006.
  • Robert. W. Sebesta, “Programming the World Wide Web”, Fourth Edition, Pearson Education, 2007.
  • Deitel, Deitel, Goldberg, “Internet & World Wide Web How To Program”, Third Edition, Pearson Education, 2006.
  • Marty Hall and Larry Brown, “Core Web Programming” Second Edition, Volume I and II, Pearson Education, 2001.
  • Bates, “Developing Web Applications”, Wiley, 2006.

Download B Tech (CS) Study Material

Computer Networks Notes ✅ [2020] PDF – Download

Computer Networks Notes [2020] PDF, Syllabus, PPT, Book, Interview questions, Question Paper ( Download Computer Networks Notes )

Computer Graphics Notes ✅ [2020] PDF – Download

Computer Graphics Notes [2020] PDF, Syllabus, PPT, Book, Interview questions, Question Paper ( Download Computer Graphics Notes )

Operating System Notes ✅ [2020] PDF – Download

Operating System Notes [2020] PDF, Syllabus, PPT, Book, Interview questions, Question Paper ( Download Operating System Notes )

Compiler Design Notes ✅ [2020] PDF – Download

Compiler Design Notes [2020] PDF, Syllabus, PPT, Book, Interview questions, Question Paper ( Download Compiler Design Notes )

Data Structures Notes ✅ [2020] PDF – Download

Data Structures Notes [2020] PDF, Syllabus, PPT, Book, Interview questions, Question Paper ( Download Data Structures Notes )

Digital Image Processing Notes ✅ [2020] PDF – Download

Digital Image Processing Notes [2020] PDF, Syllabus, PPT, Book, Interview questions, Question Paper ( Download Digital Image Processing Notes )

Theory of Computation Notes ✅ [2020] PDF – Download

Theory of Computation Notes [2020] PDF, Syllabus, PPT, Book, Interview questions, Question Paper ( Download Theory of Computation Notes )

Computer Organization and Architecture Notes ✅ [2020] PDF – Download

Computer Organization and Architecture Notes [2020] PDF, Syllabus, PPT, Book, Interview questions, Question Paper ( Download Computer Organization and Architecture Notes )

Cloud Computing Notes ✅ [2020] PDF – Download

Cloud Computing Notes [2020] PDF, Syllabus, PPT, Book, Interview questions, Question Paper ( Download Cloud Computing Notes )

Data Communication and Networking Notes ✅ [2020] PDF – Download

Data Communication and Networking Notes [2020] PDF, Syllabus, PPT, Book, Interview questions, Question Paper ( Download Data Communication and Networking Notes )

Software Engineering Notes ✅ [2020] PDF – Download

Software Engineering Notes [2020] PDF, Syllabus, PPT, Book, Interview questions, Question Paper ( Download Software Engineering Notes )

Web Technologies Notes ✅ [2020] PDF – Download

Web Technologies Notes [2020] PDF, Syllabus, PPT, Book, Interview questions, Question Paper ( Download Web Technologies Notes )

Microprocessor and Microcontrollers Notes ✅ [2020] PDF – Download

Microprocessor and Microcontrollers Notes [2020] PDF, Syllabus, PPT, Book, Interview questions, Question Paper ( Download Microprocessor and Microcontrollers Notes )

Design and Analysis of Algorithm Notes ✅ [2020] PDF – Download

Design and Analysis of Algorithm Notes [2020] PDF, Syllabus, PPT, Book, Interview questions, Question Paper ( Download Design and Analysis of Algorithm Notes )

Operation Research Notes ✅ [2020] PDF – Download

Operation Research Notes [2020] PDF, Syllabus, PPT, Book, Interview questions, Question Paper ( Download Operation Research Notes )

Database Management Systems Notes ✅ [2020] PDF – Download

Database Management Systems Notes [2020] PDF, Syllabus, PPT, Book, Interview questions, Question Paper ( Download Database Management Systems Notes )

In the above article, a student can download web technologies notes for B Tech, BCA, MCA, M Tech . Web Technologies lecture notes and study material includes web technologies notes , web technologies books , web technologies syllabus , web technologies question paper , web technologies case study , web technologies interview questions , web technologies courses in web technologies pdf form.

Go On, Share & Help your Friend

Did we miss something in B.Tech Computer Science Notes or You want something More? Come on! Tell us what you think about our post on Web Technologies Notes | PDF, Syllabus, Book | B Tech 2021 in the comments section and Share this post with your friends.

You Might Also Like

Advanced java programming notes | pdf | b tech (2024).

Read more about the article Compiler Design Notes | PDF, Syllabus, Book | B Tech 2021

Compiler Design Notes | PDF, Syllabus, Book | B Tech 2021

Read more about the article Digital Image Processing Notes | PDF, Syllabus | B Tech 2021

Digital Image Processing Notes | PDF, Syllabus | B Tech 2021

Digital signal processing notes | pdf, syllabus | b tech 2021.

Read more about the article Data Structures Notes | PDF, Book, Syllabus | B Tech [2021]

Data Structures Notes | PDF, Book, Syllabus | B Tech [2021]

Wireless networks notes | pdf, syllabus | b tech 2021, analog communication pdf | notes, syllabus b tech 2021, electromagnetic theory pdf | notes, syllabus | b tech 2021.

Read more about the article Data Structures and Algorithms Notes | PDF | B Tech 2021

Data Structures and Algorithms Notes | PDF | B Tech 2021

Read more about the article Design and Analysis of Algorithm Notes  PDF | B Tech (2024)

Design and Analysis of Algorithm Notes PDF | B Tech (2024)

Control systems pdf | notes, syllabus, book | b tech 2021.

Read more about the article Software Engineering Notes | PDF, Syllabus | B Tech 2021

Software Engineering Notes | PDF, Syllabus | B Tech 2021

Leave a reply cancel reply.

You must be logged in to post a comment.

World's Best Online Courses at One Place

We’ve spent the time in finding, so you can spend your time in learning

Digital Marketing

Personal growth.

web technology assignment

Development

web technology assignment

  • CSS Frameworks
  • JS Frameworks
  • Web Development

Related Articles

  • Solve Coding Problems
  • Web technologies Questions | Node.js Quiz | Set-2 | Question 2
  • Web technologies Questions | React.js Quiz | Set-2 | Question 3
  • Web Technology
  • Web technologies Questions | JavaScript Course Quiz 1 | Question 25
  • Web technologies Questions | JavaScript Course Quiz 1 | Question 24
  • Web technologies Questions | JavaScript Course Quiz 1 | Question 23
  • Introduction to Web Scraping
  • Web technologies Questions | JavaScript Course Quiz 1 | Question 22
  • Web technologies Questions | JavaScript Course Quiz 1 | Question 21
  • Web technologies Questions | JavaScript Course Quiz 1 | Question 20
  • Web technologies Questions | JavaScript Course Quiz 1 | Question 19
  • Web technologies Questions | JavaScript Course Quiz 1 | Question 18
  • Why Linux Hosting is Cheaper than Windows Hosting ?
  • Web technologies Questions | React.js Quiz | Set-2 | Question 8
  • Web technologies Questions | JavaScript Course Quiz 1 | Question 17
  • Web technologies Questions | JavaScript Course Quiz 1 | Question 16
  • Different ways to Improve Website Navigation
  • Web technologies Questions | JavaScript Course Quiz 1 | Question 26
  • Web technologies Questions | JavaScript Course Quiz 1 | Question 27

Web technologies Questions | | Question 1

Please login to comment....

  • Web Technologies

Improve your Coding Skills with Practice

 alt=

What kind of Experience do you want to share?

Assignment 1

  • You are here »

Deadline for submission of assignment: 22nd March 2014

Instructions:   Submit the answers of assignment questions on white A4 sheets placed inside a stick file. Don’t forget to write your rollno, name and section at the top right corner of the first page.

a) What is HTML? What are differences between HTML and HTTP? What are the essential or fundamental HTML tags in a web page?

b) Create a web page using frames which contains two columns. The left frame contains five hyperlinks namely: books, pens, watches, bags and shoes. When the user clicks on a link (for example books) in the left frame, a webpage should load in the right frame which contains details about the items like book cover image, book publisher name, book price and add to cart button for books category. Initially, display a welcome page in the right frame.

a) What is CSS? What are the differences between HTML and CSS? What are the different ways for specifying CSS in developing web pages?

b) Create a webpage which contains a table for displaying your personal details like name, age, father name, mobile no, address, branch, email and gender. Follow the below requirements: i. Display your picture in the top right corner of the web page as a background image. ii. Display the table header background in red color and the text in white color. iii. Display email row in bold font. iv. Table should have a dashed, 1px width, grey color border. Use only external CSS to specify the styling information in the above webpage.

a) What is Javascript? What are the differences between HTML and Javascript? Display a login form and validate the username and password fields using Javascript.

b) What is PHP? What are its uses? Using PHP insert the following details of a book into MYSQL database: i. Book name ii. Book author(s) iii. Book description iv. Book price v. Book image url

a) Create a login form and store the username and password details in cookies if they are valid. Display a welcome message in other page(s) by retrieving the data stored in cookies using servlets.

b) Create a cart page containing details of 2 books. When the user clicks on ‘Add to Cart’ button, the details of the book should be stored in a session. Create another page and display the selected book details by retrieving them from the session using JSPs.

How useful was this post?

Click on a star to rate it!

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?

Suryateja Pericherla

Suryateja Pericherla, at present is a Research Scholar (full-time Ph.D.) in the Dept. of Computer Science & Systems Engineering at Andhra University, Visakhapatnam. Previously worked as an Associate Professor in the Dept. of CSE at Vishnu Institute of Technology, India.

He has 11+ years of teaching experience and is an individual researcher whose research interests are Cloud Computing, Internet of Things, Computer Security, Network Security and Blockchain.

He is a member of professional societies like IEEE, ACM, CSI and ISCA. He published several research papers which are indexed by SCIE, WoS, Scopus, Springer and others.

Related Posts

  • AJWT mid 1 descriptive exam paper
  • Week 9 Lab Exercise
  • Week 2 Lab Exercise
  • AJWT mid 2 descriptive exam paper
  • Week 3 Lab Exercise
  • « Previous Post
  • Next Post »

You can follow any responses to this entry through the RSS 2.0 feed.

'  data-srcset=

Great job sir can I have answers for the above assignment for revision

'  data-srcset=

I don’t think I have the answers for this assignment with me now as it has been a long time since I posted this.

'  data-srcset=

Can l have answers?

I can’t find them with me as it has been a long time since I had posted this. Sorry.

Can l have the answers, wanna revise?

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

web technology assignment

CS-4004/CSC-404

Web technology, slide/notes links, unit i- web essentials.

Introduction to the Web 📓

Web Roles & Design 📓

Protocols 📓

Server - Client 📓

Application Development 📓 ❓

UNIT II- HTML, CSS & JavaScript

Introduction to the HTML 📓

JavaScript🖺

Course Objectives

To comprehend the basics of the internet and web terminologies.

To introduce scripting language concepts for developing client-side applications.

To practice server-side programming features – PHP, JSP.

To be familiar with database applications

To know the usefulness of web services. 

Course Outcomes

Upon successful completion of this course, students should be able to:

CO1. Design and develop web applications. 

CO2. Explain client and server-side scripting and their applicability. 

CO3. Create scripts using JavaScript in a web page. 

CO4. Integrate JavaScript in a web page 

CO5. Design forms and check for data accuracy 

Create your resume using  HTML & CSS.

Download Visual Studio Code 

Link to Lab Exercises   

Lab END TERM

Question Bank

Unit i web essentials: clients, servers and communication.

Internet and World Wide Web: Introduction to Internet, www, Internet browsers Netscape & Explorer, Introduction to Client-Server Architecture/Computing, History of the web, Growth of the web, Protocols governing the web, resources of Internet, H/W & S/W requirements of the Internet, Internet service providers, Internet Services, Internet Clients, and Internet Servers.

Unit II HTML, CSS & JavaScript

Markup Languages: Introduction to HTML, Formatting Tags, Links, Lists, Tables, Frames, Forms, Comments in HTML, DHTML and XML Documents, Data Interchange with an XML document, Document type definition, Features and Applications, Working with Style sheets. Client-Side Scripting: Scripting basics, Introducing JavaScript, Documents, Statements,  Functions, Objects in JavaScript, Events and Event handling, Arrays, Forms, Buttons, Checkboxes, Text Fields and Text Area

Unit III JSP

Server Side Scripting: Introduction to server side scripting language, RMI, The Problem with Servelet. JSP Application Design with MVC Setting Up and JSP Environment: Installing the Java Software Development Kit, Tomcat Server & Testing Tomcat- Generating Dynamic Content, Using Scripting Elements Implicit JSP Objects, Conditional Processing – Displaying Values Using an Expression to Set an Attribute, Declaring Variables and Methods Error Handling and Debugging - Sharing Data Between JSP pages, Requests and Users Passing Control and Date between Pages – Sharing Session and Application Data – Memory Usage Considerations

Unit IV PHP

PHP Basic command with PHP examples, Connection to the server, creating a database, selecting a database, listing database, listing table names creating a table, inserting data, altering tables, queries, deleting the database, deleting data and tables, PHPmyadmin and database bugs.

Web Technologies: A Computer Science Perspective , Jeffrey C. Jackson, Pearson Education 

Robert. W. Sebesta, " Programming the World Wide Web ", Fourth Edition, Pearson Education.

Deitel, Deitel, Goldberg, " Internet & World Wide Web How To Program ", Third Edition, Pearson Education, 2006.

Search code, repositories, users, issues, pull requests...

Provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

  • Notifications

Web Technology LAB Assignments for Practical Examinations 3rd Year

hashtagpalak/WebTech-Lab-Assignments

Folders and files, repository files navigation, webtech-lab-assignments.

To VIEW eash assignments visit the given links

Lab-Assignment-1-(Educational Details) : https://hashtagpalak.github.io/WebTech-Lab-Assignments/Assignment-1.html

Lab-Assignment-2-(CV - Palak Srivastava) : https://hashtagpalak.github.io/WebTech-Lab-Assignments/Assignment-2.html

Lab-Assignment-3-(List Usage) : https://hashtagpalak.github.io/WebTech-Lab-Assignments/Assignment-3.html

Lab-Assignment-4,Lab-Assignment-5,Lab-Assignment-6-(Inline, Internal, External CSS) : https://hashtagpalak.github.io/WebTech-Lab-Assignments/Assignment-4-5-6.html

Lab-Assignment-7-(BrowserInformation) : https://hashtagpalak.github.io/WebTech-Lab-Assignments/Assignment-7.html

Lab-Assignment-8-(Applet Demo) : Java Code Added

IMAGES

  1. Web Technology Assignment.pptx

    web technology assignment

  2. WEB Technology Assignment

    web technology assignment

  3. Unit 35 Web Application Development Sample Assignment hELP

    web technology assignment

  4. Suhailwtassignment

    web technology assignment

  5. Web T Assignment

    web technology assignment

  6. GitHub

    web technology assignment

VIDEO

  1. Web technology important questions list for degree all universities#web#html#important list

  2. WEB TECHNOLOGY

  3. Communication and technology assignment

  4. Web Development Course Projects 2021

  5. WEB TECHNOLOGY

  6. WEB TECHNOLOGY

COMMENTS

  1. Web Technology

    Web Technology refers to the various tools and techniques that are utilized in the process of communication between different types of devices over the Internet. A web browser is used to access web pages. Web browsers can be defined as programs that display text, data, pictures, animation, and video on the Internet.

  2. Web Technologies Questions

    Courses The following Web Technologies Questions section contains a wide collection of web-based questions. These questions are categorized based on the topics HTML, CSS, JavaScript, and many more. Each section contains a bulk of questions with multiple approaches solutions. Web Technologies Questions Topics: HTML Questions CSS Questions

  3. SumedhaZaware/Web-Technology-SPPU-2019-Pattern

    This repository contains the assignments💻 of Web Technology provided by Savitribai Phule Pune University (SPPU)🎓 Assignment-1

  4. Web Technology Assignment 1

    Web Technology Laboratory Assignment 1 NarendraDwivedi Case study: Before coding of the website, planning is important, students should visit different websites (Min. 5) for the different client projects and note down the evaluation results for these websites, either good website or bad website in following format Sr.

  5. Web Technology 512 Assignment

    FACULTY OF INFORMATION TECHNOLOGY WEB TECHNOLOGY 512 ASSIGNMENT Name & Surname: _ ICAS / ITS No: Qualification: Semester: Module Name: Date Submitted: ASSESSMENT CRITERIA MARK ALLOCATION. EXAMINER MARKS. MODERATOR MARKS MARKS FOR CONTENT QUESTION ONE 15 QUESTION TWO 25 QUESTION THREE 50.

  6. Webtech 512 assignment

    Web Technology 511 Assignment; Intro to web 500 2021 - web tech; Information Systems 511; MY MCQ - This semester we have covered the all of the topics we discussed in Web Tech. Web Tech 511 Ashleen Naidoo 402202556; 402203227 Alutha Ndaye; Preview text. RICHFIELD FACULTY OF INFORMATION TECHNOLOGY

  7. Web technology fundamentals

    UTF-8 is the most practical character encoding for the web. Web browsers convert HTML into a document object model (DOM) tree in memory. A second render tree is created in browser memory from the DOM, to represent the visual page layout. Use a DOCTYPE to tell the browser which layout mode to use.

  8. What is Web Technology?

    Web technology is a method of communication unique to computers through the use of binary codes and directions. Learn the definition and trends of web technology through examples. Web...

  9. PDF WEB TECHNOLOGIES UNIT WISE QUESTION BANK

    2. Define Frameset, Frame Tag. Divide the web page into four equal parts each individual part displays different web page. 3. Define Form tag. Design a Registration page by using all Form controls. 4. Define Table tag and their attributes with an example. 5. Explain about Cascading Style Sheets with an example. 6.

  10. Web Technologies Notes

    9 July 2021 26 mins read B Tech Study Material Download Web Technologies Notes PDF, syllabus for B Tech, BCA, MCA 2021. We provide complete web technologies pdf.

  11. Web Technology 511 Assignment 2.pdf

    RICHFIELD GRADUATE INSTITUTE OF TECHNOLOGY (PTY)LTD FACULTY OF INFORMATION TECHNOLOGY Web Technology 511 1 ST SEMESTER ASSIGNMENT Name & Surname: Luyanda Louis Tsikedi Student No: 138218 Qualification: Bsc in Information Technology Semester: 1 Module Name: Web Technology 511 Date Submitted: 17/09/2018 ASSESSMENT CRITERIA MARK ALLOCATION ...

  12. Web technologies Questions

    Answer: (A) Explanation: The full form of PHP is Hypertext Preprocessor, earlier it was called Personal Home Page, So the answer is Option A. PHP is called Hypertext Preprocessor because it is well documented and Open source means anyone can download it without any paying cost. Quiz of this Question. Please comment below if you find anything ...

  13. Assignment 1

    Assignment 1. You are here. Suryateja Pericherla Categories: Assignments. Deadline for submission of assignment: 22nd March 2014. Instructions: Submit the answers of assignment questions on white A4 sheets placed inside a stick file. Don't forget to write your rollno, name and section at the top right corner of the first page. 1.

  14. Rutuja1602/Web_Technology_Assignment_TE_2022

    main README Web_Technology_Assignment_TE_2022 This repository contains the assignments prescribed by SPPU for TE (Computer Engineering Branch) under the course 'Web Technology'

  15. Web Technology Lab Manual

    Web Technology Lab Manual - Complete. Course. Computer programming (5316) 166 Documents. Students shared 166 documents in this course. University Savitribai Phule Pune University. Academic year: 2017/2018. Uploaded by: sakshi lale. Savitribai Phule Pune University. 0 followers. 1 Uploads 69 upvotes. Follow.

  16. Atul Nag

    Course Objectives. To comprehend the basics of the internet and web terminologies. To introduce scripting language concepts for developing client-side applications. To practice server-side programming features - PHP, JSP. To be familiar with database applications. To know the usefulness of web services.

  17. Web Technology 1 Assignment.pdf

    Web Technology 1 Assignment.pdf - 9/16/22 10:14 AM Web... Doc Preview Pages 3 Total views 10 Kenyatta University TECHNOLOGY TECHNOLOGY 1 writermaiden 9/15/2022 View full document Students also studied Exam1.pdf Solutions Available Harrisburg University of Science and Technology ISEM 540 report.pdf Solutions Available Georgia Institute Of Technology

  18. GitHub

    Web Technology Website Assignment. An assignment where we have to create a webiste using HTML, CSS and other technologies that we need. Topic. I have made a mock up of our college website with all the included features working. All the pages are interconnected and the externals links are also properly attached.

  19. Richfield

    Web Technology 512 - These are assignments for first year's first semester; Mthokozisi Eugene DUBE 1694941 0; 402108244- Web Technology 512 - assignments; Web Technology 511 Assignment; 4022017 56 webtech-511; Webtech Assingment - kelly brown; Html Question 3; WEB TECH Assignment; 402203529 Web Technology 23; Web teck 511I 1506538 0 - Assignment

  20. GitHub

    Web Technology Assignments. Contribute to vaibhav870/webtech development by creating an account on GitHub.

  21. "love programming_" on Instagram: "True story ‍ Follow us

    776 likes, 3 comments - computersciencelife on February 22, 2024: "True story ‍ Follow us @computersciencelife for such more posts related to prog..."

  22. Web Technology 512

    41 Web Tech 511 Ashleen Naidoo 402202556 Web tech Mandatory assignments 100% (2) 25 MY MCQ - This semester we have covered the all of the topics we discussed in Web Tech. Web tech Mandatory assignments 100% (2) 91 Intro to web 500 2021 - web tech

  23. GitHub

    A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior.

  24. Web technology Assignment

    Write an HTML program to create the following list: (I) C (II) C++ (III) Fortran (IV) COBOL Answer: - Coding for above list- <!DOCTYPE html> <html> <head><title> list format </title> </head> <body> <ol type="I"> <li> C </li> <li> Java</li> <li> Visual Basic </li> <li> BASIC </li> <li> COBOL </li> </ol> </body> </html> Output:- Q4.