WEB TECHNOLOGY BCS502 Tear a ce treony paUiee bern) finitior eran Presenting and u: me s: DOM and S, BCS502 Web Technology Unit Topic Introduction: Introduction and Web Development Strategies, History of Web and Internet, [Protocols Governing Web, Writing Web Projects, Connecting to Internet, Introduction t I [Internet services and tools, Introduction to client-server computing. |Web Page Designing: HTML: List, Table, Images, Frames, forms, XML: Document ar definition (DTD), XML schemes, Object Models, presenting and using XML, Using XML [Processors: DOM and SAX Creating Style Sheet, CSS Properties, CSS Styling (Background, Text Format, Ml \Controlling Fonts), Working with block elements and objects, Working with Lists and Tables, (CSS Id and Class, Box Model (Introduction, Border properties, Padding Properties, Margi roperties) '$§ Advanced (Grouping, Dimension, Display, Positioning, Floatin; avigation Bar, Image Sprites, Attribute sector), CSS Color, Creating po [Designs un, Pseudo class, ayout and Site |Scripting: Java script: Introduction, documents, forms, statements, functions, objects, HIE introduction to AJAX |Networking: Internet Addressing, InetAddress, Factory Methods, Instance Methods, TCP/IP) JRL, URL Conncetion, TCP/IP Server So: [Enterprise Java Bean: Creating a JavaBeans, JavaBeans Properties ession bean, Stateless Session bean, Entity bean. ‘ode.js: Introduction, Environment Setup, REPL Terminal, NPM (Node Package Manager) ‘allbacks Concept, Events, Packaging, Express Framework, Restful API ode.js with MongoDB: MongoDB Create Database, Create Collection, Insert, delete, jupdate. join, sort, query. [Serviets: Servet Overview and Architecture, Interface Serviet and the Serviet Life Cycle, |Handling HTTP get Requests, Handling HTTP post Requests, Redirecting Requests to Othe \Resources, Session Tracking, Cookies, Session Tracking with Http Session \Java Server Pages (JSP): Introduction, Java Server Pages Overview, A First Java Server [Page Example, Implicit Objects, Scripting, Standard Actions, Directives, Custom Tag ibraries , Types of beans, StatefulEngineering Express ©@ Web Technology is a subject that focuses on the tools and Ou echniques used to create and manage websites and web application E help nderstand how the web works and teaches us how to | develop websites that people can access through a web browser Clike | Chrome_or Firefox). Web development Web development refers to the process of creating websites and web applications thet people can access on the internet using a web browser (like Chrome or Firefox) It involves building, designing, and _| maintaining websites, ensuring that they are functional, user-friendly, and visually appealing 1 ee fa become. a vital ica See development has become one of the most in-demand skills. ompanies today are looking for web developers to build and maintain | websites to.meet.the wants and needs af their online customers. | ollowing are the main technologies used to design a website: LEE, fava Script Advance Web Technologies CNode,js, Servlet, JSP, ASP.net, PhP, ete.) _| * WW CWorld Wide Web); The Web (short for the World Wide Web) is a system that allows people to access and share information over the internet, it consist: of billions of websites, It allows users to browse and acce: information like websites, images, videos, and more using a web browser (such as Chrome, Firefox, or Safari).| Engineering Express ©@ > Key Features of the World Wide Web: Hypertext: [he wep es hypertext, which allow é. Q ick on }— inks to navigate between pages. This makes it B information, 2.1 Interactivity: The web isn't just. for reading static information; it allow ers to interact with conten has filling out forms, playing videos, and making purchase 3. Multimedia: The web integrates various forms of media, including | text, images, audio, and video, to make content more engaging. obal Reach: The web commects people from all over the world allowing for global communication and access to information from | anywhere with an internet connection. How Does the World Wide Web Work? Web Pages: The web is made up of millions of web pages, which are _| documents written in HTML CHyperText Markup Language) that nclude text, images, videos, and links to other pages. Web Browser: A web browser is software that allows you to view web pages, When you type a website address (iil n0gh our _| browser fetches the page from the web and displays iton your __| screen, URL (Uniform Resource Locator): Each web page has a unique address called a URL. This tells the browser where to find the pag on the web, For example, the URL for Google's homepage i: "https://www google.com".Engineering Express ©@ __4, || HTTP/HTTPS CHyperText Transfer Protocol): This is the protocol ____|| Cset_0 e. hat defines how data is transferred between you zt v ||HTTP is a request/response protocol between clients and servers, || __ ¥ _\|HTTP is the standard proteco!, while HTTPS adds an extra layer of E ___|| security by encrypting the data, __S. || Web Servers: A web server is a computer stores web pages and ||_ ___| sods thay Lil crane entering: | ____|| URL. For example, when you visit www.wikipediaorg, the server F ____|| hosting. Wikipedia's pages sends the information to your browser. | __6. || Hyperlinks: Web pages are connected through hyperlinks, which allow —_—||yo Le eel agai Foci ata ere Thece || ____|Uinks are the "web" part_of the World Wide Web, connecting millions | - of _web_pages. “|| Internet: The Intemet is a_network of networks, It is a global network of | computers that are connected to each other, allowing them to share | information is the technology that makes communication between | devices possible, enabling 0 access websites, send emails, watch ideos, and much more, It uses the Internet protocol suite (TCP/IP) _| o-link devices worldwide| Engineering Express ©@ ____|| Web development strategies refe | ____|lused to plan, design, build, and maintain websites or web applications || ___|leffectively. A well-thought-out str L ____|| meets its goals, is user-friendly, performs well, and can be easily || _ naintained over time, > || Here are key components of web development strategies: 1, || Planning: Purpose and Goals: ___+_|| Identity why the website is being developed and what it aims to __|\__ ____|l achieve (e.g. increase sales, provide information, or offer services). || __ + || Set measurable goals such as improving user engagement, generating __|l leads, or enhancing brand visibility. _2] oy Tages ds a. Bet __»_|| Unde unas the website is far. Cap acustamers ctu Me) ___»_|| Consider_user_needs, preferences, and behaviours to_create a user- st iend experience __3_|| Techno ogy Stack: + _|| Select tools and frameworks thot are scalable, reliable, and suited to || he project requirements ___ || Frontend technologies like HTML, CSS, JavaScript for designing the _||_ ___||user_ interface. ___._|| Backend technologies like Node,js, Java, or Python for handling the _||_ server-side logic. Databases like MySQL or MongoDB to store and manage data, 4, || Content Designing: + || Plan what kind of content will be featured on the site (eg., blogs, product descriptions, videos).Engineering Express ©@ nsure the content aligns with the website’s goals and provides value | er Experience (UX) and User Interface CUI) Design. 0 on Ua ta make sure the. site is 2054. to use and navigate, __| UU T|TTTTH?TFHS?TfFSFSHFsFfFSFsFsFSfFSomaheFSM ponsive and works « 6, || Markup and Coding: ___+_||/t includes the coding and-senipting for development. 7. || SEO. eae Engine Crimean: 5 op an SEO strategy to improve the website’ b on search — mA |S eet +] 1s UN tacos text for images, and other SEO. | ___|| practices to increase organic traffic... 3._|| Performance Optimization: + | mm. times and efficient use of Aachen a ymooth user experience, z 2 techniques like image compression, caching, and code | optimization to improve performance 9, || Security: Implement security measures to protect the website from threats __| such as hacking or data breaches, Use HTTPS for secure communication, protect against SQL injections, | and ensure proper authentication and authorization processe:Engineering Express ©@ 10. || Testing. +_|| Continuou est the website during development to identify and fix || | bugs or i * ong abilit esting to ensure tha he site i— __|len_ different devices and_browse! Le H._|| Hosting: oose a domain name and arrange for web hosting to make the web application accessible over the Internet. Maintenance and Updates: Plan for regular updates to. the website to fix bugs, add new features, | and ensure compatibility with new technologies. _ Ensure that the website is regularly maintained for optimal performance and (|__=#=s ab Histony-c of the 929 — fy Bemers-Lep_invevted.the tie introducing: Hopt DR, and HTTP to link documents and_make them accessible via the pternet, _|}1994 —Companies launched the first commercial websites, and 990 -The first web page was created at CERN, and the first web | browser, WorldWideWeb, was launched. 991 = Writing Web Projects u Writing web projects involves planning, designing, developing, and deploying websites or web applications, It encompasses various stages _| and tasks to create functional, user-friendly, and visually appealing | web solutions. Here's a breakdown of the key steps and considerations: Planning Define the purpose, goals, and target audience of your web project. This includes the type of site you're building (e.g., blog, e-commerce, or web application)Engineering Express ©@ eate wireframes and mockups for the user interface design ools like Figma or Sketch are often used for this stage. nsure the design adopts to various screen sizes and devices _| desktop, hoose Technolog. ack: ontend: HTM and JavaScript are essential, Modern web frameworks like React,js, Angular, or Vue,js are also popular for ___—_—| building dynamic user interfaces. Ba chend: Choose backend technologies CNode js, Tava, Pyt “Java, Python) and databases (I MySQL, MongoDB) for managing server logic and data pat Devel opyneit Ne ontend: Write the code to build the layout and design the user will _| interact Wt PAE. BITS eBites RS SUBIR CSS SEE? a T 1 lavaScript adds interactivity. 9 Backend: Write server-side code to handle the logic, data processing, | and communication with the database Testing nsure all features work correctly and meet the project requirements, | heck for user-friendliness and ease of navigation Test the site’s speed and responsiveness under various conditions. Test the project across multiple browsers (Chrome, Firefox, Safari, and devices (desktop, tablet, mobile) for compatibility and responsivene:Engineering Express ©@ Deployment hoo proje: purpose elect a Hosting Provider: the vebsite accessible on the interne Deploy the Website; Upload files to th ver ani environment for the website to go live. Documentation and Maintenance After deployment, update and maintain the website regularly to fix | bugs, intreduce new features, and_ensure security, ee Provide detailed documentation for the codebase, features, and usage nee oT ; te Connecting to internet | o_access the intermet, devices_must connect through various. methods and technologies. Here's how it works: devices within a network, often via Wi-Fi or Ethernet cables. omponents: cae nternne eV ig E 1e) P. He COMMPON Gt Provide. Nlerme acce. amples include AT&T, Comcast, or Vodafone, |_ hat connects your local network CLAN) to your Modern: The device P via a cable er DSL connection, Router: A router distributes the Internet connection to multiple _| + _|| Internet Access Methods: |, || Dial-up: An older, slower method using telephone lines 2._|| Broadband (DSL, Cable, Fiber): Faster methods using dedicated lines DSL uses telephone lines, cable uses TV lines, and fiber optics provide the fastest speeds).— Engineering Express ©@ Lt Mobile Data 9G, SG): Cellular networks provide Internet access || en_mobil device. Wi-Fi: A irele ecnnolog hat allows device. oO conne Qo tne n vi Pica @_local network. = ntroductio io_Internei. Services_and_Taols —_____ the_lntemet offers a wide range of services and tools that facilitate communication, file sharing, content creation, and entertainrnent. internet service provides a way for data to be transferred from internet servers to our computer, 4948 internet service allows us toaccess huge amount of information such_| as text, graphics, sound and software over the internet. ommon Internet Services: oe communication services: Thee various communication semices | available that_offer exchange of infonmation with individuals or groups which areas follows: a. Electronic_mail co Mailing list: b. Telnet -d. Internet telephony CvolP) Web Browsing: Browsers like Chrome, Firefox, and Safari enable users | 0.40 é. websites, a | File Transfer: Tools like Dropbox, Google Drive, and FIP clients acilitate the exchange and storage of large files == === social Media: Platforms like Facebook, Twitter, and Instagram allow | users to share information and connect globally. Streaming Services; Platforms like YouTube, Netilix, and Spotify allow users to watch videos or listen to music online. Cloud Computing: Services like AWS and Google Cloud provid |» RREPEETTN alable storage and computing power over the Internet. World Wide Web (WWW): WWW offers a way te access documents spread over the several servers over the internet. These documents| Engineering PRpregs Q ina a audio, video, dllow the users to navigate between the documeni earch Engines: Google, Bing, and DuckDuckGo allow users to search | for information, N irtua vate Network): Provides secure, encrypted Interne connections to protect user privacy. Antivirus Software: Tools like Norton, McAfee, or Kaspersky protect devices from malicious software. 0 web applications, where lent-serve ormputing i: NE _DACKDO asks are divided between clients (user devices) and servers _ (machines hosting-resources). A_client-server process usually manages the user-interface portion of he application; validate data entered by the user, dispatch requests 0 server programs. Client process also manages the local resources that the user __| ntera with such a he monitor, keyboard, worksta ion, CPU and otner pe, iphe a This model ensures efficien: entra g resource management on servers whi di SSRae a Mets inutile devices, | 2y Concepts: Client: The client is the user's device (e.g, a browser) that makes requests to the server for information Sewer: The server is a machine (or group of machines) that stores resources (web pages, databases) and responds to client requestsEngineering Express ©@ How It Works: Request-Response Model: The clien webpage), and the server processes the request and sends back the appropriate response (the webpage). statelessness: HTTP is a stateless protocol, meaning the server _| “1 remernboer post requests. However, web opplicetions ase echnolagies like co user logs into-a website Examples of Client-Server Applications; 9 Web Browsing: The browser (client) requests web pages from web | Servers. mail: Email clien mail) request email data from email ing IMA P/POP2 | eaten Ne > eee layout, content,.and visual elements of a web page to make it _| n al, user-friendly, and visually. sal Je ives using - HTML (Hypertext Markup Language) = | HTML is the language interpreted by a browser, Web pages are also called HTML documents. Hence, we can say thot HTML is the language of the web. HTML is the standard markup language which is used to create web pageEngineering Express ©@ HTML 1941 H | a a a NN HTML 3.2 1997 | ATMEL G07 7999 XHTML 2000 | HTML S 2012 HTML Tags /Elements: HTML tags are used to mark-up HTML elements. HTML tag is a keyword which is command giving instruction about how to display the content i.e. define the structure or layout ofa website. HTML tags are surrounded by the two characters < and >. These are called angle brackets. HTML is a case insensitive language, je,

is same as

. A tag is like a container for either content or other HTML tags, __| Tags may also enclose further tag markup between the start and end, including a mixture of tags and text. This indicates further nested elements as children of the parent element. The start tag may also include attributes within the tag which indicate other information, such as identifiers for sections within the a document, identifiers used to bind style information to theEngineering Express presentation of the document, and for some tags such as used to embed images, the reference to the image resource. HTML tags are of two types: | Paired tags: |HTML tags most commoniy.comein-pairs ie, they have opening and | closing tag with content m between those tags, like

,.

. HTML Element= opening tag + Content + closing tag

; opening paragraph tag | Content: paragraph words |

. closing paragraph tag || Singular tags: | Some elements do not permit any embedded content, either text or |further tags. Singular tag isa standalone tag. They do not have end tag or closing tag. These are called singular tags or empty tags, like -
-tag. = HIML Basic Structure: SEs e at A eae ed Sed Tete Ee Sah aac Cee ET To Se ee Mae ae) eed Ear edEngineering Express " HTML Comments: In HTML, comments ore used to add notes or explanations within the code that are not visible to users when the page is rendered by a browser, They are helpful for documenting the code or temporarily | disabling parts of it. HTML comments start with , Anything between these togs is treated as a comment. > Syntax: *_HTML Attributes: Used to add more information correspending to an HTML tag. Various HTML_Tags:. — " _*__shtml> Tag 2 This tag defines the topmost element, identifying-itas-an HTML document. It is a container tag that has a start and an end tag and lall the other tags and text are nested within it. Syntax: " Tag | This tag contains information about your HTML file, it may also contain other tags that helps you to identify your HTML file to the outside world. The head tag is nested within the html tag. Syntax: =Engineering Express ed olor Teer STZ " Bae " Tag This tag is used after the tag to specify the body/contents of the web_page..This tag contains all of the tags-that a browser actually displa Syntax: s_as the body of your him! document. Led Te ed ere Ta = to (Heading) Tags These tags define HTML headings, from (the most important/large heading) to (the least important/smallest) | Headings are used for structuring content hierarchically on a ||webpogeEngineering Express Syntax: ST ered SPE Sue ES) Heading | "

Paragraph Tag This tag defines a poragraph in HTML, It is used to group blocks of text into separate paragraphs, Browsers autornatically add some space before and after each_

element. | Syntax: «
(Line Break) Tag This tag is used to insert a single line break in the text, without | creating a new paragraph. Unlike the

tag, it does not add extra |_space around the line Syntax: eres Line one
Line two ele = (Anchor) Tag The tag is used to create hyperlinks. It allows users to navigate to another web page or section within the same page. The most |_important_attribute_is href, which specifies the URL Syntax: =

Tag The

tag is used to define sections in a document, such as | chapters, headers, or any thematic grouping of content. it helps || structure the content of the webpage.Engineering Express || Syntax: a rat teed ree a ead co sad ol Se ||_ Syntax: See ae lied ea ae a fel Se ac =_ Tag Syntax; Syntax:Engineering Express © = Tag syntax: | - —— Attribute Description H BGCOLOR Change the default pacsrou color to whatever | color is specified with this attribute fF : Specifies the name of the picture fle that will be | BACKGROUND a used as the background of the document. TEXT Changes the body text color from its default value to the color specified with this attribute. LINK Specifies the color of unvisited links in a || document || ALINE Specifies the color of an active link in a docurnent || 4 VLINK sree the color of visited Jinks in a document Ques) |\hich html tag is used for drawing lines? _Ans)|| a) The tog

---

draws lines ond horizontal rules, b) This tag draws a horizontal line wherever specified. c) The attributes to the

---

tag are : ¥ ALIGN : This attribute specifies the alignment of the horizontal rule, It can have three values as left, right and center. SIZE ; Changes the height of the horizontal rule. WIDTH . Sets the width of the horizontal rule,Engineering Express SHTML Lists A list is a collection of items. Basically there are following two types | of lists: 1, Unordered list 2. Ordered List |Unordered List/Bulleted List_: Tag

is used to define an unordered list. |» Attributes of
Tag: Attribute Description Value . Specifies the kind of bullet to use | Dise, square, circle ‘ape in the list. Ordered List/Numbered List: |Tag_
is used to define an ordered list. Tag
1. is used to define an item of an ordered list within
   tag. & Syntax: ob Cem erat ead Cea gre Md STi bg » Attributes of
   Tag:Engineering Express Attribute Description Value Specifies the kind of numbering to use ae in the list, Asaf I/! | Specifies the start value of an ordered y Any number list. 7 start | | reverse | Specifies that the list order should be | reversed descending (,8,7...) There_is also_an additional type of list: Dictionary List/ Description List: Tag_

   is used to define a description _list_This tag contains terms. jand_their corresponding descriptions. |Tag

   _is_used.to_define.a_term_or.namewithin_the description list, placed_inside the

   tag. Tag_

   _is used_to define the description, which follows the term defined by

   Syntax: eeEngineering Express ©@ | HTML Table. ___«]| Tag is used to define a table in HTM acts as a u ____|| container for all other table-related tags like , is used to define row ino toble, It is placed inside

   , and	. «|| Tag

   ||_ ___||tag and contains either header cells C

   ) or data cells (	). ie +|| Tag_sth> is used to define a table header, It represents the heading for a column or row, and the text inside this tag is bold and entered by default. ag	is used to define a table data cel), It represents the content of a cell within atable row, Attributes of , Tags. Tag Attribute Description Value Specifies the width of the | Any number border . table's borders. Gi, 2, ete) Specifies the alignment of | left, center, align 7 the table on the page. right Specifies the background bgenlor color for a table ealor Specifies the wiath of width ee Eee Pixels% table Specifies the space cellpadding | between the cell wall and Pixels the cell content 5 Specifies the space Pixels lI. OOPS | pet ween adjacent cells r Merges multiple columns Any number cop" nto a single cell, (eg, 2, 3) | Sd I a HTML images || isan empty tag, me > || Attributes of Tag: Attribute Description Value | Syntax: i Me ell RNR Rd ML cel eM eat eel Ce Mel eT ed || Corresponding XML Document: John Doe ele cela (clo REEngineering Express ©@ An_XML Object Model is a way to represent the e and data of an XML document in a programming ee muakag aban o work with Think of it! like a_blueprint or map | that shows how the XML document is organized, with.its-elements, attributes, and text. | When you use an-X Object Model, you can treat parts of the XML document Clike tags, data, and attributes) os objects, just like you would in a programming language, B snot oP using Ogee Madd a i Provides a structured and hierarchical way to represent XML. nables the manipulation, navigation, and -guerying of XML data Object models like DOM allow for more complex operations such as | aversing or modifying XML structures. AX, being event-based, is more memory efficient for large XML docurnent. Read the XML_content. Navigate through different parts of the XML. _ yan Modify the XML by adding, changing, or deleting elements. There are two main types of XML Object Models: DOM (Document Object Model): The Document Object Model (DOM) is a platform-independent and | language-independent standard object model for representing HTML or XML and related formats. The DOM is a W3C (World Wide Web consortium) standard. The DOM defines a standard for accessing documents. ||_it allows programs and scripts te dynamically access and update the content, structure, and style of document.Engineering Express Key Features of bol: + You can change - You can access ¢ Prete OT eC ee eae Ce mea ead Bookmart aes Sere ed Se eae SN ae ea se oa ee DOM t book-order et custom shop goods | { 4 “Karamveer” “Bookmart” “book” name “Web appligation development with XML and Java”Engineering Express © ___2.|| SAX CSimple API for XML): __i._|| SAX CSimple API for XML) works dire ___fi.|| SAX is an event-driven AP/ that allows us to interpret a web fil jat_uses XML. __iti.|| SAX takes the control of event specifies by the programmer and | handles the situation, __iv.|| SAX is a simpler interface than DOM and Is appropriate where many | or very large files are to be processed, v.||_it also helps in manipulating the data content, __vi.]| SAX is faster and uses less memory than DOM > || How it works: SAX doesnt load the whole docurnent into memory. | nstead, it read he XM Q0 mer: ine _ by and Igoe! ____|| events Clike “start of an element,” "end of an ean. | _>_||__Example: Imagine you are reading a book one page at a time. Once || — ou_finisha page, you can't_go back to it, but you make notes | of important parts as you read. ___» || Key Features of SAX: ___||. Memory efficient: lt doesn't store the entire document in memory. | ____||+ Best for large XML files. LL, can only read the document, not change it, (SAX) ‘ startElement: book-order | endElement: startElement: customer | book characters: Karamveer | endElement: endElement: customer | goods start Element: shop characters: Bookmart | endElement: end Element: book-order start Element: start Element : startElement: name character: ‘Webapplication development withXMLand Java endElement: name| Engineering Express ©@ nting and Using XML Presenting XML Data: x by itself is not vis presentable or, ores data in a hin pine mapa caminermet nas Siemens | i ransformed or styled using technologies like: xtensible Stylesheet Language CX Sk is'a language used to transform XML documents into other formats, suchas HTML, PDF, or text, XSL stylesheets define how an XML document should be presented, including its layout, formatting, and styling. XSLT_(XSL Transformations): A language for transforming XML documents into different formats like HTML, text, or other XM documents. X is a subset of XSL that is used to transform XML _| documents into other XMl documents or text documents. XSLT _| esheets canbe used to perform a_variety of tasks, such as filtering data, sorting data, and merging data from multiple sources. | a. — hee Model): The DOM is a pilgramntog Path. XPath is a language that_is used to navigate through the | odes of an XML document. XPath can be used to select nodes based on their content, attributes, or relationships with other nodes. ascading Style Sheets): CSS can be used to apply style rule o XML documents, though this is more commonly used in conjunction with HTML. XML documents can link to an external CSS | file to define how elements should be styled,Engineering Express © Ising XML: Data Exchange: XML_is wide ed for exchanging data between | differen ems and applications because it is platform and language-independent. onfiguration Files: XML is often used to store configuration __| ettings for applications Ce.g..pomxml_in Maven, Android's AndroidManifest.xm Web Services; XML is used in web services, especially in SOAP- based services, where the request and response data is structured in XML, — XML Processors: DOM Ba SAX XML_processors a are components that parse, interpret, and ansform XML documents. They are responsible for reading KML | a_and making it_accessible to applications or other systems ina | ructured manner. XML processors ensure that the XML document is well-formed and, if necessary, valid according to_its DID. Document Type. Definition) or XML Schema. XML Parsers: An XML parser_is a software component that reads and interprets | XML documents, transforming the data from XML format into a orm that applications can understand and manipulate. The primary | netion of an XML parser is to ensure that an XML document is | well-formed and. optionally, valid according to a specified Document | Type Definition (DTD) or XML Schema. pes of XML Parsers: ee-Based Parsers:Tree-based parsers read the entire XML document and build an in-memory tree structure that represents the document, It allows for full document traversal and manipulation.| Engineering Express ©@ Common Example: DOM (Document Object Model) parser. DOM allows you to load an entire XML document into memory as a tree where you can easily navigate and modify elemen ___+_|| How it Works: The XML_file_is parsed into a tree of nodes. Each part_of the document (elements, attributes, text, etc.) is represented as_a_node, allowing igatic ificatic f document, Key Feature; You can add, edit, or delete elements ___||_frequently access: or change data. + _||_ Usage: ideal for smaller XML documents where you need to ____| 2 vent-Driven Parsers: ____||_Event-drive parsers (also called streaming parsers) read the XML | document sequentially and_trigger events Clike start of an element, | ___||_end_of an element, etc.) _as they encounter different parts of the ___+_|| Common Example: SAX (Simple API for XML) oe ee XML documents line by line, triggering events as it pro he documen ee eterno, | How it Works: SAX doesn't build a tree in memory but triggers ___||_callbacks or events while parsing the document, For example, when _| ____|| the parser encounters the start of an element, it will trigger a __| ___||_ "startElement" event. Key Feature: it’s fast and uses less memory but does not allow: modifications during reading. Usage: Best for large XML files where memory efficiency i important, and you only need to read the dataEngineering Express Join us and subscribe our ChenalTECHNOLOGY (BCS502) HANDWRITTEN ~_Web Technology Topic \Introduction: Introduction and Web Development Strategies, History of Web and Internet, rotocols Governing Web, Writing Web Projects, Connecting to Internet, Introduction t Internet services and tools, Introduction to client-server computing. |Web Page Designing: HTML: List, Table, Images, Frames, forms, XML: Document ype definition (DTD), XML schemes, Object Models, presenting and using XML, Using XML Processors: DOM and SAX Creating Siyle Sheet, CSS Properties, CSS Siyling (Background, Text Format, Controlling Fonts), Working with block elements and objects, Working with Lists and Tables, CSS Id and Class, Box Model (Introduction, Border propertics, Padding Properties, Margit roperties) '$§ Advanced (Grouping, Dimension, Display, Positioning, Floatin; avigation Bar, Image Sprites, Attribute sector), CSS Color, Creatin [Designs. gn, Pseudo class, ‘out and Site Iv Scripting: Java script: Introduction, documents, forms, statements, functions, objects, lintroduction to AJAX I iz: Internet Addressing, InetAddress, Factory Methods, Instance Methods, TCP/IP |Enterprise Java Bean: Creating a JavaBeans, JavaBeans Properties, ession bean, Stateless Session bean, Entity bean, ode.js: Introduction, Environment Setup, REPL Terminal, NPM (Node Package Manager) ‘allbacks Concept, Events, Packaging, Express Framework, Restful API ode.js with MongoDB: MongoDB Create Database, Create Collection, Insert, delete, lupdate, join, sort, query ‘Types of beans, Stateful [Serviets: Servlet Overview and Architecture, Interface Servict and the Servlet Life Cycle, , Session Tracking with Hutp Session n, Java Server Pages Overview, A First Java Server Scripting, Standard Actions, Directives, Custom Tag [Page Example, Implicit Objects, ibrariesEngineering Express © Soa i nk oD tes pa ele th econ | like_adding colors, fonts, and spacing, without changing the HTML ontent. CSS fae but.it-converts_an_off looking HTML page improves Consistency: Ensures same look-feel across all web pages. Declaration (color: blue; font-size Property Value Property Value The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value.Engineering Express © A Creating Style Sheet A_Style Sheet isa file or section of code that defines the styles (e.g. colors, fonts, spacing) applied to HTML elements on a web page. CSS || (Cascading Style Sheets) is the language used to style HTML content. You can create styles directly inthe HTML file or link an external CSS file, It helps inmaking the web page look attractive and well-organized, There ave three main ways to create and apply a style sheet in CSS: DD See css cl eg Embedded CSS inline CSS: This method is used to apply styles directly inside the HTML tag. Jt is not often used because it mixes HTML and CSS together, but it can_be useful for small_changes. Example:3) al Engineering Express Lateral CS. ae OTe cre a Sed See ee Cl ned | 2 See External CSS:| Engineering Express > Steps to create External CSS. Cn fi t_|| Create a CSS file. UAL eer ae et Tere eee TT ae eS ta LM Ig SITE Coe eB eee SteEngineering Express Q) AD | Example: CSS_Comments: CSS comments are used to add notes or explanations ia the code, They are ignored by the browser and do not affect the styling. Why Use External CSS? Separation of Concerns: The HIML-file handles the content, while | the CSS file handles the design. This keeps the code clean and |_arganized. Reusability: You can use the same CSS_file on multiple web pages. For example, if you have a website with 10 pages, you can use one CSS. file for-all_of them. Easier to Maintain. If you want to change the look of your entire website, you can just edit the CSS file, and the changes will_be |_applied to all linked HTML pages. | Write a program in HTML to display a heading and a paragraph. | Then use CSS to display heading in_red colour and text of the paragraph in blue colour. Try it yourself.Engineering Express t CSS Selectors: CSS selectors are used to target HTML elements so that you can apply styles to them. Here are the most common types of selectors: | Universal Selector C*): Selects all elements onthe page. Example: TCL Poel Element Selector Cag Selector): Targets_all elements. of a specific type. Example: Ae Group Selector (Grouping): Allows you to apply the same styles to multiple elements by separating them with commas without repeating the CSS rule for | each element. This is efficient for maintaining clean code, Exarnple: aE eCEngineering Express & CSS id and Class Class Selector C.classname): Targets elements with a specific class attribute. The class can be applied to multiple elements. Exarnple, ae Po ID Selector (#idname): = Targets a specific element with-an id-attribute. Unlike a class, the id must be uniqueto one_element. Exarnple: cer ae eee ACSS Properties and Styling [css properties are the rules you can apply to elements to control how | they look, Each property is followed by a value that defines how that | specific aspect af the element should be styled. Here are some common CSS properties: Background Properties; background-color: Sets the background color of an element. background-image: Adds an image as the background, | background-repeat: Defines if the background image repeats (e.g, repeat-x, repeat-y, no-repeat and the default is repeat).the size of the backgr (katt attachment: iB Cong: ee ee oem background-image: urlCbackground jj De ee Sc Le background- ee ee aaa ae en Rea || Text Properties:Engineering Express © word-spacing: Controls the space between words. Common values include: positive or negative values. Example: Cn bee ect eee ima ae Taig a ae word-spacing: Spx; Font. Properties: font-family: It lets you choose which font to use on your webpage. You_can_list_several fonts, so if one isn't available, the browser tries the next one. Fonts can be specific ones like Arial or lmpact and you can also use generic names, ¥___ Sans-serif — Arial, Futura ¥__Serif- Time New Roman, Garaynond y¥___Fantasy- Impact, Comic Sans | ¥ Monospace - Courier, Consolas font-size: The font-size property in CSS specifies the size of the text You can use predefined size names like large, small, medium, or specify a custom size using units like pt, px, %, em, or rem font-variant; The font-variant property in CSS is used to change the appearance of text, specifically how the text is displayed. It_is | commonly used to create small-caps text, where lowercase letters are ltransformed into smaller uppercase letters.Engineering Express « || Example: font-style: It is used to define various types of font styles like italics, oblique, normal (default text style), etc. Example: ACSS Color | Color in CSS is used to define the color of text, backgrounds, borders, land other elements.it can be specified in several different ways, allowing for flexibility and_customization_in_web design. Types_of color values: Named Colors: CSS supports a list of predefined color names like red, blue, green, etc. Example. fae Coen Hexadecimal (Hex) Colors: A _6-digit code where the first two characters represent _red, the next two green, and last two blue, Values range from 00 to FF,Engineering Express - || Example: RGB (Red, Green, Blue): Specifies the intensity of red, green, and blue using numbers between 0 and 25S. aaa LRGBA (Red, Green, Blue, Alpha). Similar to RGB, but with an extra value called alpha for transparency. The alpha value ranges from_0 (completely transparent) to | | Ccompletely opaque) | Example, |HSL CHue, Saturation, Lightness): | Uses hue (color), saturation Gutensity), and_lightness Chrightness) Hue is a degree from 0 to 360, saturation isa percentage from 0% \to 100%, ond _lightness_is alsa_a_percentage. Example: Working with Block Elements and Objects | Block Elements: Block elements are HTML elements thet occupy the full width available, creating a new line before and after themselves, They are primarily used for structural purposes in a webpage. Common block elements include , to , , , You might also like Data Analytics New Quantum AKTU No ratings yet Data Analytics New Quantum AKTU 210 pages Adobe Scan Sep 03, 20 No ratings yet Adobe Scan Sep 03, 20 9 pages UNIT 4 No ratings yet UNIT 4 20 pages web technology bsc 6 sem No ratings yet web technology bsc 6 sem 26 pages Module 1 No ratings yet Module 1 39 pages Web Design-Lecture1-Theory No ratings yet Web Design-Lecture1-Theory 32 pages IFT 203 Lecture Note - Copy No ratings yet IFT 203 Lecture Note - Copy 45 pages 3-World Wide Web No ratings yet 3-World Wide Web 11 pages Unit 4 Web Devlopment - Student Handbook-1 No ratings yet Unit 4 Web Devlopment - Student Handbook-1 103 pages WEB-SYSTEM-REVIEWER No ratings yet WEB-SYSTEM-REVIEWER 5 pages WT Unit-I No ratings yet WT Unit-I 49 pages Web Development - Lec1 - Eng - Ebtisam ALselwi No ratings yet Web Development - Lec1 - Eng - Ebtisam ALselwi 46 pages Merged Till Lec 17 No ratings yet Merged Till Lec 17 309 pages Web Design HTML No ratings yet Web Design HTML 18 pages COM225 WEB TECH 2024 No ratings yet COM225 WEB TECH 2024 9 pages CCS114 Notes No ratings yet CCS114 Notes 7 pages Unit 1 No ratings yet Unit 1 113 pages Unit 1 Introduction To Web Technologies No ratings yet Unit 1 Introduction To Web Technologies 12 pages Chapter 1 The World Wide Web No ratings yet Chapter 1 The World Wide Web 23 pages Prezentare Licenta No ratings yet Prezentare Licenta 20 pages ALX Week 12 No ratings yet ALX Week 12 10 pages ITEC 87 - Web Introduction No ratings yet ITEC 87 - Web Introduction 53 pages L01 - Web Technologies No ratings yet L01 - Web Technologies 29 pages Lec 01 No ratings yet Lec 01 20 pages Bilimbay Zarina033 No ratings yet Bilimbay Zarina033 11 pages Web Engineering: DR Naima Iltaf Naima@mcs - Edu.pk No ratings yet Web Engineering: DR Naima Iltaf Naima@mcs - Edu.pk 52 pages Introduction Concept of WWW No ratings yet Introduction Concept of WWW 19 pages Introduction To Web Development ICT10 No ratings yet Introduction To Web Development ICT10 21 pages unit 1 notes No ratings yet unit 1 notes 19 pages 4020 Week 1 No ratings yet 4020 Week 1 56 pages Web designing notes No ratings yet Web designing notes 18 pages Web Development 100% (1) Web Development 29 pages HTML Unit-1 - 1 No ratings yet HTML Unit-1 - 1 50 pages Unit 5 World Wide Web No ratings yet Unit 5 World Wide Web 25 pages Fundamentals of Web No ratings yet Fundamentals of Web 16 pages Lecture 1 No ratings yet Lecture 1 33 pages Web Technology and applications No ratings yet Web Technology and applications 10 pages UNIT 4-The World Wide Web No ratings yet UNIT 4-The World Wide Web 5 pages Web Technology-1 No ratings yet Web Technology-1 145 pages Web Technologies Notes No ratings yet Web Technologies Notes 130 pages Web Technology Notes No ratings yet Web Technology Notes 128 pages Web Design and Technology Handouts - 1709657863 No ratings yet Web Design and Technology Handouts - 1709657863 53 pages Introduction To Internet Web Technology No ratings yet Introduction To Internet Web Technology 10 pages UNIT1pptx 2023 07 28 13 01 57 No ratings yet UNIT1pptx 2023 07 28 13 01 57 209 pages Introduction To Internet It's Protocols No ratings yet Introduction To Internet It's Protocols 26 pages Wdm-Unit-1 Notes No ratings yet Wdm-Unit-1 Notes 33 pages 01 Introduction To Web Programming Updated No ratings yet 01 Introduction To Web Programming Updated 87 pages WT Unit 1 Ppts Web Development Process No ratings yet WT Unit 1 Ppts Web Development Process 142 pages Web Technology No ratings yet Web Technology 225 pages Web Design and Management No ratings yet Web Design and Management 34 pages Copy of Module1-INTRODUCTION TO WEB.docx No ratings yet Copy of Module1-INTRODUCTION TO WEB.docx 12 pages Coding 10 Class No ratings yet Coding 10 Class 57 pages Unit 1 Tutorials Introduction To Web Development No ratings yet Unit 1 Tutorials Introduction To Web Development 45 pages Chapter 2 No ratings yet Chapter 2 24 pages Web Engineering - SEN 301: Instructor: Usman Shafique No ratings yet Web Engineering - SEN 301: Instructor: Usman Shafique 33 pages Internet VS The Web Confusion Between Terms: Internet and Web No ratings yet Internet VS The Web Confusion Between Terms: Internet and Web 12 pages Web Technology Complete Notes No ratings yet Web Technology Complete Notes 228 pages Web Technologies PDF No ratings yet Web Technologies PDF 46 pages Unit 1 No ratings yet Unit 1 277 pages Web Technology No ratings yet Web Technology 64 pages Constitution of India AKTU No ratings yet Constitution of India AKTU 13 pages Ai Kcs071 Question Bank Unit Wise AKTU No ratings yet Ai Kcs071 Question Bank Unit Wise AKTU 12 pages DATA ANALYTICS (DA) ALL UNIT BY BREVILEARNING No ratings yet DATA ANALYTICS (DA) ALL UNIT BY BREVILEARNING 42 pages AI UNIT 4&5 BY MULTI ATOM No ratings yet AI UNIT 4&5 BY MULTI ATOM 31 pages Anmol Cloud Computing Notes 3rd Yr 5th Sem (2) AKTU No ratings yet Anmol Cloud Computing Notes 3rd Yr 5th Sem (2) AKTU 35 pages Data Analytics Merged AKTU No ratings yet Data Analytics Merged AKTU 45 pages Cloud Computing Unit 1(Anmol) (2) No ratings yet Cloud Computing Unit 1(Anmol) (2) 9 pages Da Unit 4 Notes for One Shot Video by Brevilearning Yt Compressed 1 AKTU No ratings yet Da Unit 4 Notes for One Shot Video by Brevilearning Yt Compressed 1 AKTU 8 pages Physics Unit One Pyq With Solution(Quantum) No ratings yet Physics Unit One Pyq With Solution(Quantum) 4 pages Computer Network Unit 4 multi atom No ratings yet Computer Network Unit 4 multi atom 21 pages a4d8c56187c1981568cf0a3144b50a93 No ratings yet a4d8c56187c1981568cf0a3144b50a93 1 page Computer Network Unit 1 multi atom No ratings yet Computer Network Unit 1 multi atom 36 pages 8ac1c49d278c1a3b6ef92d092dc35c6a No ratings yet 8ac1c49d278c1a3b6ef92d092dc35c6a 1 page OD332211899589907100 No ratings yet OD332211899589907100 2 pages DAA U-5 One Shot AKTU B.TECH No ratings yet DAA U-5 One Shot AKTU B.TECH 88 pages subject codes No ratings yet subject codes 2 pages a94df930342e6aafd5b1618660bcf311 No ratings yet a94df930342e6aafd5b1618660bcf311 17 pages f45464ab59e9b9c6d1f87312000c11c6 No ratings yet f45464ab59e9b9c6d1f87312000c11c6 155 pages Partial-Differential-Equations No ratings yet Partial-Differential-Equations 4 pages Daa No ratings yet Daa 8 pages External Practical Examination Schedule_3rd and 4th Year_Department of AIML No ratings yet External Practical Examination Schedule_3rd and 4th Year_Department of AIML 1 page / aa Merges multiple rows into | Any number me lg single cell. (eg, 2, 2Engineering Express || Syntax: Sell aes eae | Some catae Peres Re reea ead Scere Pa cog | Sieg cae) Cee EP eye mad Taare es