Module-1.pdf

Client-Server Department of Computer Engineering & Applications  Introduction to Client & Server Client: An application, such as Chrome or Firefox, that runs on a computer and is connected to the internet. Its primary role is to take user interactions and tran...

Client-Server Department of Computer Engineering & Applications  Introduction to Client & Server Client: An application, such as Chrome or Firefox, that runs on a computer and is connected to the internet. Its primary role is to take user interactions and translate them into requests to another computer called a web server. Although we typically use a browser to access the web, you can think of your whole computer as the “Client” piece of the client-server model. Every client computer has a unique address called an IP address that other computers can use to identify it.  Key Components of Client Requests services or resources from a server. Typically a user's device or software. Examples: Web browsers, email clients, mobile apps  Server Server: A machine that is connected to the internet and also has an IP address. A server waits for requests from other machines (e.g. a client) and responds to them. Unlike your computer (i.e. the client) which also has an IP address, the server has special server software installed and running which tells it how to respond to incoming requests from your browser  Key Components of Server Provides services or resources to clients.Can handle multiple client requests simultaneously. Examples: Web servers, database servers, file servers. Web Server A web server presents data over the internet. It enables us to host websites, e-commerce platforms or web applications. Businesses can use it to build their online presence and make themselves available to their customers. File Server A file server stores data files for multiple users, enabling quick data retrieval and efficient saving of files to a computer. File servers are commonly used by organisations to provide safe and convenient storage for files that are frequently accessed by many users, making them a basic yet essential type of server. Database Server Database servers are versatile and can operate independently of any particular database and rather run multiple programs serving as large storage spaces.  How It Works Client Request: The client sends a request to the server over a network. Server Processing: The server processes the request, which may involve querying a database, performing computations, or fetching resources. Server Response: The server sends back the requested resource or an appropriate response to the client.  Client-Server Architecture Client-server architecture is a type of computer network where multiple clients request and receive files and services from a centralized server over a local or internet connection. A client uses an application as an interface to connect to the server. After which, the server processes any further operations and information storage. Diagram of Client-Server Architecture  Client-Server architecture works in three steps 1. The client, such as a workstation or smartphone, connects to the network using a physical or wireless LAN or internet connection. 2. The client sends various requests to the server in order to submit, retrieve, or modify the data located on the server. 3. The server processes each client request.  There are three basic layers to client-server architecture 1. The presentation layer is the part of the application that the user interacts with, also known as the user interface. 2. The business logic layer represents the actual code of an application and connects and instructs the presentation and data layers. 3. The data layer is made out of database tables and the logic required to operate on them.  Real-World Examples of Client Server Architecture Email Servers: File Servers Web Servers  Email Servers The principal method of business communication has been replaced by e- mail due to its simplicity and quickness. Emails are sent and received between parties via email servers with the assistance of several brands of specialized software.  File Servers You use a file server if you store files on cloud-based services like Google Docs or Microsoft Office. Many customers access file servers, which are central places for file storage.  Web Servers Customers visit various websites hosted on these powerful servers over the Internet. Here is a detailed explanation: The client or user types the desired URL into their web browser. The browser queries the Domain Name System (DNS) for an IP address. The DNS server locates the IP address of the target server and provides it to the web browser. Either an HTTPS or HTTP request is made by the browser. The correct files are sent to the user by the server or producer. The server delivers the files to the client/user, repeating the cycle. Types of Client-Server Architecture 1.1-tier architecture 2.2-tier architecture 3.3-tier architecture 4.N-tier architecture 1-Tier Architecture  This is a software Architecture in which an application is single and self-contained on a single platform. In 1-Tier Client Server Architecture, Everything related to the application is grouped and used as a single package to deliver the application. All the logic related to the User Interface, Business Logic, Database Logic, and Database are grouped to make a single entity. 2-tier architecture  In 2-tier Client Server Architecture, the whole application logic is divided into 2 layers. Majorly database acts as a separate entity in this architecture. Databases are designed separately and then the main application has all the logic related to the user interface and the business logic and database logic to communicate with the database and process the applications. This architecture has a better environment than the 1-tier architecture. 3-tier architecture  In 3-tier system has a middleware between the client and the server. When a client requests information from the server, the request is first received by the middleware. The request will then be sent to the server for processing. Similarly, the server will send a response to the client. N-tier architecture  This is a more general type of Client-Server Architecture, where there can be more than three tiers or layers involved in the communication process. The n-tier Architecture allows for greater scalability, flexibility, and modularity of the system. Each tier or layer can be distributed across multiple machines or networks and can be replaced or updated independently. Components of client - server architecture 1. Workstations 2. Servers 3. Networking devices  Workstations Workstations, also known as client machines, are mainly distinguished by the operating systems that run them. Workstation operating systems in a server/ client network include Windows XP, Windows 2000, Windows Vista, and Windows 7. These operating systems are designed primarily for client machines, and they are also cheaper than server operating systems.  Servers Servers are identified by different sets of operating systems, such as Windows 2003, Windows 2000 Server or Windows 2008. They also have more hard drive space and memory, as well as faster computers, because they store and handle multiple (and often simultaneous) requests from workstations. A server can play various roles in a client/server network. It can act as a domain controller, file server, mail server, database server, or all four at once.  Networking devices Each networking device in the Client-Server Architecture has its own function and characteristics. a) Hubs are used to connect different workstations to a server. b) Repeaters are used to transfer data from one device to another. c) Bridges are used to segment isolated networks.  Advantages of client server architecture Centralized management: Client-server architecture involves storing and managing data in one central location. This allows for complete control over processes and activities and makes it easy to share resources and data across different platforms. Users also have the authority to access any file stored in the central storage at any time.  Cont.…… Flexibility: The data passed between the client and server and the services provided by the server are entirely at the discretion of the programmer. As a result, there are many ways to use the client-server architecture to solve future problems. Additionally, this architecture can be easily combined with other types of architectures on the client or server sides.  Cont.…… Extensibility: The system can be updated based on changes in functional and nonfunctional requirements without altering the client-server architecture or disrupting service. Transparency: Clients only make requests to the server with their input data, so they don't see how the server will handle the request. It may seem like a single, central server to the user.  Cont.…… Availability: Servers do not usually need to shut down or restart for long periods of time, so server uptime is possible during maintenance through server duplication. Additionally, there is a clear distinction between clients and servers, as clients consume services, and servers provide them. If multiple servers offer the same services, the system can still function even if one or more servers fail. Scalability: The client-server architecture is capable of adding or removing servers in the network (horizontal scaling) or migrating to larger and faster server machines (vertical scaling  Disadvantages of client server architecture Centralized control can lead to increased chances of failure. When many clients send simultaneous requests to the server, it can overload the server and slow down performance. This can also lead to server failure, causing the entire system to go down and clients not to receive any responses. Servers are more powerful than client computers, which means they are more expensive. They also require person with networking and infrastructure knowledge to manage the system.  Cont.…… The client-server architecture is vulnerable to Denial of Service (DoS) attacks because the number of servers is typically smaller than the number of clients. Data packets may be modified during transmission, leading to the potential loss of useful information. Benefits of Client Server Architecture 1. Centralized Management 2. Scalability 3. Reliability and Availability 4. Security 5. Maintainability 6. Efficiency and Performance 7. Flexibility 8. Backup and Recovery  Centralized Management Ease of Maintenance: Centralizing resources and services on servers simplifies management tasks such as updates, backups, and security policies. Data Integrity: Centralized data storage ensures consistency and integrity, as all clients access the same data repository.  Scalability Horizontal Scalability: Additional servers can be added to handle increased load, enhancing system capacity. Vertical Scalability: Existing servers can be upgraded with more powerful hardware to improve performance.  Reliability and Availability Redundancy: By implementing failover mechanisms and redundant servers, the system can maintain high availability and reliability. Load Balancing: Distributing client requests across multiple servers prevents any single server from becoming a bottleneck.  Security Controlled Access: Centralized servers can implement robust security measures, such as authentication, authorization, and encryption, to protect data and resources. Monitoring and Logging: Centralized logging and monitoring help detect and respond to security incidents promptly  Maintainability Modular Design: Separation of concerns (e.g., presentation, business logic, and data storage) makes it easier to develop, test, and maintain each component independently. Upgradability: Individual components can be updated or replaced without affecting the entire system.  Efficiency and Performance Resource Management: Centralized servers can manage resources more efficiently, optimizing performance for multiple clients. Specialization: Servers can be specialized for specific tasks, such as database management or application processing, improving overall system performance.  Flexibility Interoperability: Clients and servers can communicate over standard protocols, allowing for diverse client devices and platforms. Service Integration: Different services can be integrated into the system, enabling complex functionalities and workflows.  Backup and Recovery Centralized Backups: Regular backups can be performed on the server, ensuring data protection and quick recovery in case of failure. Disaster Recovery: Centralized systems can have robust disaster recovery plans to minimize downtime and data loss.  Use Web Applications: Centralized web servers deliver content to web browsers. Enterprise Systems: Centralized servers manage business processes and data for organizations. Email Services: Centralized email servers handle communication and data storage. Online Services: Centralized servers provide resources for online games, streaming services, and social media platforms.  Static Websites Static websites consist of web pages with fixed content. Each page is a separate HTML file stored on the server, and the content remains the same until manually updated by the webmaster.  Characteristics Fixed Content: Content does not change unless manually edited. Simple Structure: Typically consist of HTML, CSS, and sometimes JavaScript. No Server-Side Processing: No back-end processing is involved; the server just serves the HTML files to the client.  Dynamic Websites Dynamic websites generate web pages in real-time based on user interactions or other factors. The content can change dynamically, and pages are often generated using server-side scripting languages.  Characteristics Dynamic Content: Content can change based on user interactions, database queries, or other inputs. Complex Structure: Typically involve a combination of HTML, CSS, JavaScript, and server-side languages (e.g., PHP, ASP.NET, Python). Server-Side Processing: Server-side scripts generate content on-the-fly.  Difference Between Static and Dynamic Websites Static Website Dynamic Website Content of Web pages can not be change at runtime. Content of Web pages can be changed. No interaction with database possible. Interaction with database is possible It is faster to load as compared to dynamic website. It is slower than static website. Cheaper Development costs. More Development costs. No feature of Content Management. Feature of Content Management System. HTML, CSS, JavaScript is used for developing the website. Server side languages such as PHP, Node.js are used. Same content is delivered everytime the page is loaded. Content may change everytime the page is loaded.  WEB TECHNOLOGY VIKASH SAWAN Assistant Professor Dept. of CEA Department of Computer Engineering & Applications  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. Hyperlinked resources on the World Wide Web can be accessed using software interfaces provided by Web browsers.  Some web components Web – Page A document which can be displayed in a web browser such as Firefox, Google Chrome, Opera, Microsoft Internet Explorer or Edge, or Apple's Safari. These are also often called just "pages. WebSite A collection of web pages which are grouped together and usually connected together in various ways. Often called a "web site" or simply a "site.“ Web Server A special high end computer that hosts a website on the Internet. Today we have Cloud services that act as web servers.  What do you mean by World Wide Web (WWW) World wide web is a system, based on the hypertext and HTTP, for providing, organizing, and accessing a wide variety of resources  Static Pages v/s Dynamic Pages Static pages show the same content each time they are viewed. Dynamic pages have content that can change each time they are accessed. Dynamic pages are typically written in scripting languages such as PHP, Perl, ASP, or JSP. The scripts in the pages run functions on the server that return things like the date and time, and database information. All the information is returned as HTML code, so when the page gets to your browser, all the browser has to do is translate the HTML.  HTML HTML stands for HyperText Markup Language. HTML is a language which is used to create static web pages. HTML is the Language of Web Pages on the World Wide Web. HTML uses bracketed commands called ‘HTML tags’ that are integrated into a text document. HTML code can be written in a text editor (like Notepad). Save the text editor file with “.htm” or “.html” extension. Open the file with any web browser(Like Internet Explorer, Firefox) to see the HTML page output.  History of HTML HTML is a markup language used by the browser to manipulate text, images, and other content, in order to display it in the required format. HTML was created by Tim Berners-Lee in 1991. The first-ever version of HTML was HTML 1.0, but the first standard version was HTML 2.0, published in 1995. Currently, we are using HTML5, which is the latest and most recent version of HTML.  The major points of HTML HTML stands for HyperText Markup Language. HTML is used to create web pages and web applications. HTML is widely used language on the web. We can create a static website by HTML only. HTML is a Markup language rather than a programming language  HYPERTEXT Hypertext: is text which contains links to other texts. The hypertext pages are interconnected by hyperlinks, when mouse click on these link which brings you to a new webpage  Markup language Any tag based language known as markup language, for example html, xml, gml, sgml, etc.  Web Browser A web browser is an application program for retrieving, presenting and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier (URI) and may be a web page, image, video or other piece of content. Some examples of web browser: Internet Explorer, Google Chrome, Firefox, Safari  Example Web page title Write Your First Heading Write Your First Paragraph. Output:  Advantages of HTML HTML is used to build websites. It is supported by all browsers. It can be integrated with other languages like CSS, JavaScript, etc. etc.  Disadvantages of HTML HTML can only create static web pages. For dynamic web pages, other languages have to be used. A large amount of code has to be written to create a simple web page. The security feature is not good.  HTML Comments HTML comments are enclosed within , and serve to annotate code for developers. They provide explanations, reminders, or instructions that are invisible on the rendered webpage. These comments aid collaboration and enhance code readability, offering insights into the code structure and purpose. Ways to Comment in HTML  Features for Html Html is a static page. Html is not a case sensitive. Html is a error free language. Html is simple and easy language. It provides facilities to add audio, video, image on web pages. Html is platform independent language, it can be run on any platform like Window, Linux, Mac. Each and every elements of html should be enclosed within the angular brackets (). Html programs are executed by the interpreter of the browser software. Html program save with.htm or.html extension. The current version of Html is Html 5.0  HTML Headings HTML headings, from to , indicate content hierarchy and importance. Search engines use them for indexing. Users navigate by headings. Employ for main titles, for subsections, and progressively lower levels for less important content to maintain structure and readability. HTML provides six levels of heading elements, ranging from (highest level) to (lowest level).  Purpose and Usage of Heading Tags: 1. – Main Heading (Largest): Represents the primary topic of the page. Use it sparingly to maintain clarity. 2. – Subheadings: Ideal for dividing content into sections. If further subsections exist, employ elements. 3. to – Smaller Headings: Example  Customization in HTML Heading Tags The default size of HTML headings can be changed, using the style attribute. Example: In this example explains the HTML heading tags by specifying the size of the font.  HTML Paragraphs The tag in HTML signifies a paragraph. Enclosed within the opening and closing tags, any content is recognized as a paragraph. As a block- level element, a new paragraph inherently starts on a fresh line, with browsers intuitively adding space before and after a paragraph for enhanced readability. Syntax: Content  Properties of the paragraph Tag The browser reduces multiple spaces added by users to a single space If a user adds multiple lines, the browser compresses them into a single line. By default, the display of the paragraph element is set to “block,” meaning each new paragraph is placed on a new line. This behavior can be modified using CSS. Example 1 : The example explains the HTML tag Example 2: This example explains the HTML tag having multiple lines.  tag The HTML tag element creates a line break, giving you a new line without starting a new paragraph. Use when you want to move to the next line without beginning a whole new paragraph. Syntax:  tag The HTML tag is used to create a horizontal rule or line, visually separating content on a webpage. Use when you want to insert a horizontal line to signify a division between sections or elements, providing a clear visual break in the page. Syntax:  Align attribute The tag specifically supports the alignment attribute and allows us to align our paragraphs in left, right, or center alignment. Syntax:  tag The HTML tag is used for pre-formatted text. It keeps the original spaces and line breaks exactly as they are in the code. When you use , the text appears in a fixed-width font, preserving the formatting and layout just as it looks in the HTML code. Syntax: Content  HTML Elements and Tags HTML uses predefined tags and elements that instruct the browser on how to display the content. HTML elements include an opening tag, some content, and a closing tag. It’s important to remember to include closing tags. If omitted, the browser applies the effect of the opening tag until the end of the page.  Cont….. This section will dive into the basic structure of an HTML page, which includes essential building-block elements like doctype declaration, HTML, head, title, and body elements  HTML Page Structure The basic structure of an HTML page is shown below. It contains the essential building-block elements (i.e. doctype declaration, HTML, head, title, and body elements) upon which all web pages are created.  Cont… This is the document type declaration (not technically a tag). It declares a document as being an HTML document. The doctype declaration is not case-sensitive. This is called the HTML root element. All other elements are contained within it. The head tag contains the “behind the scenes” elements for a webpage. Elements within the head aren’t visible on the front end of a webpage.  HTML elements used inside the element include This HTML tag allows us to insert styling into our web pages and make them appealing to look at with the help of CSS. The title is what is displayed on the top of your browser when you visit a website and contains the title of the webpage that you are viewing. It specifies the base URL for all relative URL’s in a document. Defines a section of HTML that is inserted when the scripting has been turned off in the user’s browser. This tag is used to add functionality to the website with the help of JavaScript.  Cont…. This tag encloses the metadata of the website that must be loaded every time the website is visited. For eg:- the metadata charset allows you to use the standard UTF-8 encoding on your website. This in turn allows the users to view your webpage in the language of their choice. It is a self-closing tag. The ‘link’ tag is used to tie together HTML, CSS, and JavaScript. It is self- closing. The body tag is used to enclose all the visible content of a webpage. In other words, the body content is what the browser will show on the front end. The basic structure of HTML code  HTML Text Formatting HTML text formatting tags enhance web content’s visual presentation and semantic meaning. By using tags like , , , and , you can style text as bold, italic, emphasized, etc.  Two techniques of HTML text formatting 1. Logical Tags These tags denote the logical or semantic value of the text. They convey meaning without directly affecting the visual appearance. : Emphasizes text (commonly styled as italic). : Indicates important content (often styled as bold). 2. Physical Tags These tags directly impact the visual appearance of the text, altering font styles, sizes, and other visual properties. : Displays text in a bold format. : Italicizes text.  HTML Formatting Elements Tags Descriptions Showcases italicized text. Renders text in a smaller font size. Highlights added or inserted text. Creates subscript text. Emphasizes text with importance, often in bold. Displays text in a bold format.  Cont… Tags Descriptions Accentuates text with a background highlight. Strikes through text to signify deletion. Adds emphasis to text, commonly styled as italic. Formats text as superscript. Example of Text Formatting Example of Combining Logical and Physical Tags  HTML Tag The HTML tag defines metadata about an HTML document, including character set, description, keywords, author, and viewport settings. Placed within the element, metadata aids browsers, search engines, and web services in interpreting and displaying content. Syntax: Attributes Example: Implementation of meta tag in the head tag Highlighting Important Keywords  HTML anchor tag The tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the element is the href attribute, which indicates the link’s destination. This attribute determines where the user is directed upon clicking the link. Syntax: Link Name By default, links appear as follows in all browsers: Unvisited links: Underlined and blue. Visited links: Underlined and purple. Active links: Underlined and red.  Attributes Attributes Description It specifies the character set. It is not supported by charset HTML 5. It is used to specify the target link to download when the download user clicks. It is used to specify the language of the linked hreflang document. media It is used to specify the linked media.  Cont… media It is used to specify the linked media. It is used to specify the anchor name. It is not supported by HTML 5 you can use the name global id attribute instead. rel It is used to specify the relation between the current document and the linked document. shape It is used to specify the shape of the link. It is not supported by HTML 5. type It is used to specify the type of links. target It specifies the target link. It is used to specify the relation between the linked document and the current document. rev It is not supported by HTML 5.  Example Welcome to GLA University GLA University  Common Examples 1. Creating Basic Links: To create a link to www.gla.ac.in, use the following code: Visit GLA 2. Opening Links in New Tab: To open a link in a new browser Tab, add the target=”_blank” attribute: Visit GLA 3. Linking to Email Addresses and Phone Numbers: To link to an email address: Send email To link to a phone number: +910000000 In this example, we will use an image to redirect to the GLA Website  HTML List HTML List is a collection of related infomation. The lists can be ordered or underdered depending on the requirement. In html we can create both order and unorder lists by using and tags. There is one more list which is description list - HTML , & tag are used to create description lists.  HTML Order Lists Order list are marked with numbers by default, we can xhnage the number into alphabet, roman numbers, etc. By using html & tag we can create a order list and using type attribute we can change the default numeric marking.  HTML Unorder Lists Unorder lists are marked with bullet points, by using html & tag we can create a unorder list. This is also know as unorder list.  HTML Definition/Description Lists Tags HTML Tag: This is used to define the description list. HTML Tag: It is used to define data. HTML Tag: Used to define data definition that is description.  HTML Description Lists Description list is list of items with description, to create a desccription list we can use , & tag.  HTML Nested Lists A list created within another list is known as Nested List. HTML also allow nesting of lists within one another to generate a complex document structures.  Type Attribute of Ordered List The type attribute for tag is used to specify the type of marker for the unordered list in HTML. By default, counting numbers are used. But, we can change this with the help of following values Type Value Description 1 It is the default type of marker. I List items will be displayed with roman number marker. A It will set the marker to upper case alphabets. a It sets the marker to lower case alphabets.  HTML start Attribute Pseudo Code You can use start attribute for tag to specify the starting point of numbering you need.  4 types of unordered list in HTML disc − This creates an unordered list marked to a bullet (default). circle − This creates an unordered list marked to a circle. square − This creates an unordered list marked to a square. none − This creates an unordered list without any marker. Syntax: Following is the syntax to create an unordered list with disc bullets in HTML. Item in list… Item in list… Example to create an unordered list with disc bullets in HTML.  HTML Tables An HTML Table is an arrangement of data in rows and columns in tabular format. Tables are useful for various tasks, such as presenting text information and numerical data. A table is a useful tool for quickly and easily finding connections between different types of data.  Tags used in HTML Tables HTML Tags Descriptions Defines the structure for organizing data in rows and columns within a web page. Represents a row within an HTML table, containing individual cells. Shows a table header cell that typically holds titles or headings. Represents a standard data cell, holding content or data. Provides a title or description for the entire table.  Cont… Defines the header section of a table, often containing column labels. Represents the main content area of a table, separating it from the header or footer. Specifies the footer section of a table, typically holding summaries or totals. Defines attributes for table columns that can be applied to multiple columns at once. Groups together a set of columns in a table to which you can apply formatting or properties collectively.  Table Cells Table Cell are the building blocks for defining the Table. It is denoted with as a start tag & as a end tag. Syntax Content...  Table Rows The rows can be formed with the help of combination of Table Cells. It is denoted by and tag as a start & end tags. Syntax Content...  Table Headers The Headers are generally use to provide the Heading. The Table Headers can also be used to add the heading to the Table. This contains the & tags. Syntax Content... Example: Creating a simple table in HTML using a table tag. Example: without border to the HTML Table.  Adding a border to an HTML Table A border is set using the CSS border property. If you do not specify a border for the table, it will be displayed without borders. Syntax: table, th, td { border: 1px solid black; } Example: Addition of the border to the HTML Table. HTML  HTML colspan Attribute The colspan attribute in HTML specifies the number of columns a cell should span. It allows the single table cell to span the width of more than one cell or column. It provides the same functionality as “merge cell” in a spreadsheet program like Excel. Note: colspan=”0″ tells the browser to span the cell to the last column of the column group (colgroup). Syntax: table content... Adding Cells that Span Many Columns in HTML Tables  HTML rowspan Attribute The rowspan attribute in HTML specifies the number of rows a cell should span. That is if a row spans two rows, it means it will take up the space of two rows in that table. It allows the single table cell to span the height of more than one cell or row. It provides the same functionality as “merge cell” in a spreadsheet program like Excel. Note: The rowspan attribute when used with tag determines the number of standard cells it should span. Syntax: table content... Adding Cells that span many rows in HTML Tables  Adding a Background Colour to the Table A color can be added as a background in an HTML table using the “background-color” option. Syntax table#t01 { width: 100%; background-color: #f2f2d1; } Example: Addition of the Table background color in HTML.  HTML - Frames HTML frames are used to divide your browser window into multiple sections where each section can load a separate HTML document independently. A collection of frames in the browser window is known as a frameset. The window is divided into frames in a similar way the tables are organized: into rows and columns. Syntax:  Creating Frames in HTML To make frames on a page we use tag instead of tag. The tag defines how to divide the window into frames. The rows attribute of tag defines horizontal frames and cols attribute defines vertical frames. Each frame is indicated by tag and it defines which HTML document shall open into the frame. Example to create three horizontal frames Creating vertical Frames Frame's name and target Attributes Following is the content of menu.htm file Following is the content of main.htm file  Attribute Value Description frameborder 0 It specifies whether to display a border 1 around the frame or not, and its default value is 1 longdsec URL It specifies a page which contains the long description of the content of the frame. marginheight pixels It specifies the top and bottom margins of the frame. marginwidth pixels It defines the height of the margin between frames.  Cont… name text It is used to assign the name to the frame. noresize noresize It is used to prevent resizing of the frame by the user. scrolling yes It specifies the existence of the scrollbar for no overflowing content. auto src URL It specifies the URL of the document which we want to display in a frame.  HTML - Iframes An iframe is an inline frame that allows us to embed another document within the current HTML document. In HTML, the inline frame is defined with the tag. This tag creates a rectangular region at specified place within the HTML document in which the browser can display an external document such as a map or another web page.  Creating an iframe An inline iframe is used to embed an another document inside the current html document. Following is the example to show how to use the in HTML. Setting Height and Width of Iframes Removing border of Iframes  Iframe for a Hyperlink To create a target Iframe for a hyperlink, we use the name attribute of tag. The value of this attribute is used in the target attribute of elements like and to specify the target frame. Result  Embed YouTube video using iframe You can also add a YouTube video on your webpage using the tag. The attached video will be played at your webpage and you can also set height, width, autoplay, and many more properties for the video. Following are some steps to add YouTube video on your webpage: Goto YouTube video which you want to embed. Click on SHARE ➦ under the video. Click on Embed option. Copy HTML code. Paste the code in your HTML file Change height, width, and other properties (as per requirement). Result  Attributes of Attribute name Value Description allowfullscreen If true then that frame can be opened in full screen. height Pixels It defines the height of the embedded iframe, and the default height is 150 px. name text It gives the name to the iframe. The name attribute is important if you want to create a link in one frame. frameborder 1 or 0 It defines whether iframe should have a border or not. (Not supported in HTML5).  Cont… src URL The src attribute is used to give the path name or file name which content to be loaded into iframe. sandbox This attribute is used to apply extra restrictions for the content of the frame allow-forms It allows submission of the form if this keyword is not used then form submission is blocked. allow-popups It will enable popups, and if not applied then no popup will open. allow-scripts It will enable the script to run. allow-same-origin If this keyword is used then the embedded resource will be treated as downloaded from the same source.  Cont… srcdoc The srcdoc attribute is used to show the HTML content in the inline iframe. It overrides the src attribute (if a browser supports). scrolling It indicates that browser should provide a scroll bar for the iframe or not. (Not supported in HTML5) auto Scrollbar only shows if the content of iframe is larger than its dimensions. yes Always shows scroll bar for the iframe. no Never shows scrollbar for the iframe.  HTML - Images HTML Images provides a visual content for web pages, enhancing user experiences and conveying information. They can be photographs, graphics, icons, or illustrations. To insert an image on HTML document we can use tag.  Reason to use Images HTML offers various elements for embedding, manipulating, and controlling images, contributing to the aesthetics and functionality of websites. Understanding image tags, attributes, and responsive design principles is essential for effective web development. We usually use images within hero section on the product page, it required src and alt attributes.  Inserting an Image in HTML You can insert any image in your web page by using tag. The tag is an empty tag, which means that, it can contain only list of attributes and it has no closing tag.  Importing images from another folder Usually, we keep all the images in a separate directory. So let's keep HTML file test.htm in our home directory and create a subdirectory images inside the home directory where we will keep our image as test.png. Assuming our image location is "/html/images/test.png", try the following example. Set Image Width and Height  Set Image Border By default, image will have a border around it, you can specify border thickness in terms of pixels using border attribute. A thickness of 0 means, no border around the picture.  Set Image Alignment By default, image will align at the left side of the page, but you can use align attribute to set it in the center or right.  HTML Form An HTML Form is a section of the document that collects input from the user. The input from the user is generally sent to a server (Web servers, Mail clients, etc). We use the HTML element to create forms in HTML. Syntax:  Form Elements Elements Descriptions It defines labels for elements. It is used to get input data from the form in various types such as text, password, email, etc by changing its type. It defines a clickable button to control other elements or execute a functionality. It is used to create a drop-down list.  Cont… It is used to get input long text content. It is used to draw a box around other form elements and group the related data. It defines a caption for fieldset elements It is used to specify pre-defined list options for input controls. It displays the output of performed calculations. It is used to define options in a drop-down list. It is used to define group-related options in a drop-down list.  Commonly Used Input Types in HTML Forms In HTML forms, various input types are used to collect different types of data from users. Here are some commonly used input types:  Cont.. Input Type Description Defines a one-line text input field Defines a password field Defines a submit button Defines a reset button Defines a radio button  Cont… Validates that the input is a valid email address. Allows the user to enter a number. You can specify min, max, and step attributes for range. Used for checkboxes where the user can select multiple options. Allows the user to select a date from a calendar. Allows the user to select a time. Allows the user to select a file to upload. Example: HTML Form  Introduction to HTML5 HTML stands for Hyper Text Markup Language. It is used to design web pages using a markup language. HTML is an abbreviation of Hypertext and Markup language. Hypertext defines the link between the web pages. The markup language is used to define the text document within the tag which defines the structure of web pages. HTML 5 is the fifth and current version of HTML. It has improved the markup available for documents and has introduced application programming interfaces (API) and Document Object Model (DOM).  Features It has introduced new multimedia features which supports both audio and video controls by using and tags. There are new graphics elements including vector graphics and tags. Enrich semantic content by including , , and are added. Drag and Drop- The user can grab an object and drag it further dropping it to a new location. Geo-location services- It helps to locate the geographical location of a client. Web storage facility which provides web application methods to store data on the web browser. Uses SQL database to store data offline. Allows drawing various shapes like triangle, rectangle, circle, etc. Capable of handling incorrect syntax. Easy DOCTYPE declaration i.e., Easy character encoding i.e.,  Removed elements from HTML 5 Removed Elements Use Instead Elements CSS CSS CSS CSS  New Added Elements in HTML 5 : The tag is used to represent an article. More specifically, the content within the tag is independent from the other content of the site (even though it can be related). : The tag is used to describe the main object of the web page in a shorter way like a highlighter. It basically identifies the content that is related to the primary content of the web page but does not constitute the main intent of the primary page. The tag contains mainly author information, links, related content and so on. : The tag in HTML is used to set a caption to the figure element in a document.  Cont… : The tag in HTML is used to add self-contained content like illustrations, diagrams, photos or codes listing in a document. It is related to main flow, but it can be used in any position of a document and the figure goes with the flow of the document and if it is removed it should not affect the flow of the document. : It contains the section heading as well as other content, such as a navigation links, table of contents, etc. : Delineates the main content of the body of a document or web app.  Cont.. : The tag in HTML is used to define the marked text. It is used to highlight the part of the text in the paragraph. : The tag is used to declaring the navigational section in HTML documents. Websites typically have sections dedicated to navigational links, which enables user to navigate the site. These links can be placed inside a nav tag. : It demarcates a thematic grouping of content.  Cont… : It is the Scalable Vector Graphics. : The tag in HTML is used to draw graphics on web page using JavaScript. It can be used to draw paths, boxes, texts, gradient and adding images. By default, it does not contain border and text. : It defines the music or audio content. : Defines containers for external applications (usually a video player). : It defines the sources for and. : It defines the tracks for and. : It defines the video content.  Cont.. : The tag in HTML is used to represent the result of a calculation performed by the client-side script such as JavaScript. : The tag in HTML is used to specify a key-pair generator field in a form. The purpose of element is to provide a secure way to authenticate users. When a form is submitted then two keys are generated, private key and public key. The private key stored locally, and the public key is sent to the server. The public key is used to generate client certificate to authenticate user in future.  Cont… : It is used to represent the progress of a task. It also defines how much work is done and how much is left to download a task. It is not used to represent the disk space or relevant query. : The tag in HTML stands for word break opportunity and is used to define the position within the text which is treated as a line break by the browser. It is mostly used when the used word is too long and there are chances that the browser may break lines at the wrong place for fitting the text. : The tag is used to display the human-readable data/time. It can also be used to encode dates and times in a machine-readable form. The main advantage for users is that they can offer to add birthday reminders or scheduled events in their calendars and search engines can produce smarter search results.  Advantages & Disadvantages Advantages: All browsers supported. More device friendly. Easy to use and implement. HTML 5 in integration with CSS, JavaScript, etc. can help build beautiful websites. Disadvantages: Long codes have to be written which is time consuming. Only modern browsers support it. Example Example  HTML Spell Check The Spell Check feature in HTML is used to detect grammatical or spelling mistakes in the text fields. The Spell Check feature can be applied to HTML forms using the spellcheck attribute. The spellcheck attribute is an enumerated attribute which defines whether the HTML element will be checked for errors or not. It can be used with “input” and “textarea” fields in HTML. Syntax for spellcheck attribute in an input field in html: Syntax for spellcheck in a textarea field in html: Example  Example Disabling Spell Check in a HTML Form: To disable spellcheck in a HTML form the spellcheck attribute is set to “false”.  HTML5 Form Validation Required Attribute Email Attribute Number Attribute URL Attribute Length Attributes  Required Attribute This input type, when present, specifies that an input field must be filled out before submitting the form.  Email Attribute This input type guarantees an email address is formatted correctly.  Number Attribute This input type ensures a number with a range  URL Attribute This input type guarantees a URL is formatted correctly.  Length Attributes With these attributes, you can limit the characters in a text input or text area.  Checkbox Handling on HTML Form You can easily handle the checkbox data on Getform. If you have a checkbox field on your form, simply add a hidden input field for the "not selected" case and set its value to value="no". For the selected case, do the same with value="yes” The sample form should look like this:  Handling Multiple Choice Fields If you want to handle multiple choice fields in your HTML form, you can use array by adding [ ] to your name attributes. The sample form should look like this:  HTML Form Select Option The element is used to create a drop-down list. Only the value(s) of the selected option(s) will be forwarded when your form is submitted.  Multiple Option You can also use the multiple attribute to specify whether multiple options can be selected at once when your form is submitted.  Handling Radio Buttons using Getform In HTML, a radio button is used to select one of many given choices. Radio buttons with the same name property are grouped, forming a radio group. You can simply submit radio input values using Getform. The sample form should look like this:  Hidden Fields on HTML Form A hidden field lets you include data that cannot be seen or modified by users when a form is submitted.  Submit HTML Form in Different Tab If you would like to redirect your submitters to another after they submit the forms, set the target attribute to _blank, then the form will be submitted in a new tab.  CSS Introduction CSS (Cascading Style Sheets) is a language designed to simplify the process of making web pages presentable. It allows you to apply styles to HTML documents, describing how a webpage should look by prescribing colors, fonts, spacing, and positioning. CSS provides developers and designers with powerful control over the presentation of HTML elements. HTML uses tags and CSS uses rulesets. CSS styles are applied to the HTML element using selectors. CSS is easy to learn and understand, but it provides powerful control over the presentation of an HTML document. CSS Versions Release Year  Why CSS? Saves Time: Write CSS once and reuse it across multiple HTML pages. Easy Maintenance: Change the style globally with a single modification. Search Engine Friendly: Clean coding technique that improves readability for search engines. Superior Styles: Offers a wider array of attributes compared to HTML. Offline Browsing: CSS can store web applications locally using offline cache, allowing offline viewing.  CSS Comments CSS Comments. Comments are essential for documenting code, providing clarity during development and maintenance. They begin with ``, allowing for multiline or inline annotations. Browsers ignore comments, ensuring they don’t affect the rendering of web pages. Syntax: Comments can be single-line or multi-line. The comment syntax can be used for both single and multiline comments. We may use syntax for hiding in CSS for older browsers, but this is no longer recommended for use. Example describes the Single-line comment Example describes the multi-line comment.  CSS Syntax CSS consists of style rules that are interpreted by the browser and applied to the corresponding elements. A style rule set includes a selector and a declaration block. Selector: Targets specific HTML elements to apply styles. Declaration: Combination of a property and its corresponding value.  CSS Syntax A CSS Syntax rule consists of a selector, property, and its value. The selector points to the HTML element where the CSS style is to be applied. The CSS property is separated by semicolons. It is a combination of the selector name followed by the property: value pair that is defined for the specific selector. let us see the syntax and how we can use the CSS to modernize the website. Syntax: selector { Property: value; } Cont…  Cont… Every declaration has a CSS property name and a value, separated by a colon(:) and is surrounded by curly braces({ }). For declaring the multiple CSS properties, it can be separated by the semicolon(;). Let’s define each of these: Declaration: A combination of a property and its corresponding value. Selector: Used to target and select specific HTML elements to apply styles to. Property: Defines the specific aspect or characteristic of an element that you want to modify. Value: Assigned setting or parameter for a given property, determining how the selected element should appear or behave Cont….  Example p { color: blue; text-align: center; } Example Web Page with & without CSS Using CSS  Understanding the role of CSS Styling and Layout: CSS defines how HTML elements should be displayed. This includes colors, fonts, spacing, and positioning. For example, you can use CSS to set the background color of a page, specify font styles, and create complex layouts with grids or flexbox. Separation of Content and Design: By separating content (HTML) from design (CSS), it makes maintaining and updating websites more efficient. You can change the look of your site without altering the HTML structure. Responsive Design: CSS enables responsive design, allowing web pages to adapt to different screen sizes and devices. Using media queries, you can apply different styles based on device characteristics, like screen width.  Cont… Consistency and Reusability: CSS allows for consistent styling across multiple pages of a website. By using classes, IDs, and external style sheets, you can apply the same styles to multiple elements, promoting design consistency and reducing redundancy. Performance: Properly structured CSS can contribute to better performance by reducing page load times. Minifying and optimizing CSS files, as well as using techniques like lazy loading for images, can improve overall website speed. Design Flexibility: CSS provides a wide range of design options, from basic styling to advanced animations and transitions. This flexibility allows designers to create unique and engaging user interfaces.  Type of CSS Inline CSS: Using style attribute within HTML. Internal CSS: Using block in. External CSS: Linking a CSS file with tag. 1. Inline CSS  2. Internal CSS Internal or Embedded CSS is defined within the HTML document’s element. It applies styles to specified HTML elements. The CSS rule set should be within the HTML file in the head section i.e. the CSS is embedded within the tag inside the head section of the HTML file. Example  3. External CSS External CSS contains separate CSS files that contain only style properties with the help of tag attributes (For example class, id, heading, … etc). CSS property is written in a separate file with a.css extension and should be linked to the HTML document using a link tag. It means that, for each element, style can be set only once and will be applied across web pages. Example Cont….  Some Important points Inline CSS has the highest priority, then comes Internal/Embedded followed by External CSS which has the least priority. Multiple style sheets can be defined on one page. For an HTML tag, styles can be defined in multiple style types and follow the below order. As Inline has the highest priority, any styles that are defined in the internal and external style sheets are overridden by Inline styles. Internal or Embedded stands second in the priority list and overrides the styles in the external style sheet. External style sheets have the least priority. If there are no styles defined either in inline or internal style sheet then external style sheet rules are applied for the HTML tags.  CSS Selectors CSS selectors target the HTML elements on your pages, allowing you to add styles based on their ID, class, type, attribute, and more. This guide will help you to understand the intricacies of CSS selectors and their important role in enhancing the user experience of your web pages. Understanding these selectors - such as the universal selector, attribute selector, pseudo-class selector, and combinator selectors—enables more efficient and dynamic web design.  Types of CSS Selectors CSS Selectors Description It is used to select the HTML elements based on their element Simple Selectors name, id, attributes, etc Universal Selector Selects all elements on the page. Attribute Selector Targets elements based on their attribute values. Selects elements based on their state or position, such Pseudo-Class Selector as :hover for hover effects. Combine selectors to specify relationships between elements, Combinator Selectors such as descendants ( ) or child (>). Pseudo-Element Selector Selects specific parts of an element, such as ::before or ::after.  Simple Selectors Simple Selector Description Element Selector Selects HTML elements based on their tag names. Id Selector Targets an HTML element with a specific id attribute. Class Selector Selects elements with a particular class attribute. Example  Element Selector The element selector selects HTML elements based on the element name (or tag) for example p, h1, div, span, etc.  Id Selector The id selector uses the id attribute of an HTML element to select a specific element. An id of the element is unique on a page to use the id selector.  Class Selector The class selector selects HTML elements with a specific class attribute. Note: The following code is used in the above Example using the class selector. To use a class selector you must use (. ) followed by class name in CSS. This rule will be applied to the HTML element with the class attribute “paragraph-class“  Universal Selector The Universal selector (*) in CSS is used to select all the elements in an HTML document. It also includes other elements which are inside under another element. Note: The following code is used in the above Example using the universal selector. This CSS rule will be applied to each and every HTML element on the page:  Group Selector The Group selector is used to style all comma-separated elements with the same style. Note: Suppose you want to apply common styles to different selectors, instead of writing rules separately you can write them in groups as shown below.  Attribute Selector The attribute selector [attribute] is used to select the elements with a specified attribute or attribute value. Note: The following code is used in the above Example using the attribute selector. This CSS rule will be applied to each and every HTML element on the page:  Pseudo-Class Selector It is used to style a special type of state of any element. For example- It is used to style an element when a mouse cursor hovers over it. Note: We use a single colon(:) in the case of a Pseudo-Class Selector.  Pseudo-Element Selector It is used to style any specific part of the element. For Example- It is used to style the first letter or the first line of any element. Note: We use a double colon(::) in the case of a Pseudo-Element Selector. Cont…  CSS Colors CSS Colors are an essential part of web design, providing the ability to bring your HTML elements to life. This feature allows developers to set the color of various HTML elements, including font color, background color, and more  Color Formats in CSS Color Format Description These are a set of predefined colors which are used by their names. For Color Name example: red, blue, green etc. The RGB (Red, Green, Blue) format is used to define the color of an HTML RGB Format element by specifying the R, G, and B values range between 0 to 255. RGBA The RGBA format is similar to the RGB, but it includes an Alpha component Format that specifies the transparency of elements.  Cont…. Hexadecimal The hexadecimal notation begins with a # symbol followed by 6 characters Notation each ranging from 0 to F. HSL stands for Hue, Saturation, and Lightness respectively. This format HSL uses the cylindrical coordinate system. The HSLA color property is similar to the HSL property, but it includes an HSLA Alpha component that specifies the transparency of elements.  Color Name These are a set of predefined colors which are used by its name. For example: red, blue, green, etc. Syntax: h1 { color: color-name; }  Example In this example, we will use the color property with the specified color name to set the text color.  Hexadecimal Colors (Hex) Hexadecimal color codes are a popular way to define colors in CSS. They are represented by a hash symbol followed by six hexadecimal digits. The digits represent the red, green, and blue (RGB) components of the color. Format: #RRGGBB RR stands for the red component (00 to FF in hexadecimal). GG stands for the green component (00 to FF in hexadecimal). BB stands for the blue component (00 to FF in hexadecimal). Example: #FF5733 is a color with maximum red (FF), medium green (57), and low blue (33), resulting in a shade of orange.  RGB Colors RGB (Red, Green, Blue) color values are another common format. You specify the red, green, and blue components of a color using decimal values ranging from 0 to 255. Format: rgb(red, green, blue) red, green, and blue are integers between 0 and 255. Example: rgb(255, 87, 51) creates a color similar to the hex code #FF5733.  RGBA Colors RGBA is an extension of RGB that includes an alpha (opacity) value. This allows for colors with varying degrees of transparency. Format: rgba(red, green, blue, alpha) red, green, and blue are integers between 0 and 255. alpha is a decimal number between 0 (fully transparent) and 1 (fully opaque). Example: rgba(255, 87, 51, 0.5) produces a semi-transparent orange color.  HSL Colors HSL stands for Hue, Saturation, and Lightness. This format is often more intuitive for creating and adjusting colors. Format: hsl(hue, saturation%, lightness%) hue is an angle on the color wheel (0 to 360 degrees). saturation is a percentage (0% to 100%), where 100% is full color saturation. lightness is a percentage (0% to 100%), where 0% is black and 100% is white. Example: hsl(9, 100%, 60%) corresponds to a bright, vivid orange.  HSLA Colors HSLA is an extension of HSL that includes an alpha (opacity) value for transparency. Format: hsla(hue, saturation%, lightness%, alpha) hue, saturation, and lightness work the same as in HSL. alpha is a decimal number between 0 and 1. Example: hsla(9, 100%, 60%, 0.5) gives a semi-transparent vivid orange.  Summary Hexadecimal: #RRGGBB (e.g., #FF5733) RGB: rgb(red, green, blue) (e.g., rgb(255, 87, 51)) RGBA: rgba(red, green, blue, alpha) (e.g., rgba(255, 87, 51, 0.5)) HSL: hsl(hue, saturation%, lightness%) (e.g., hsl(9, 100%, 60%)) HSLA: hsla(hue, saturation%, lightness%, alpha) (e.g., hsla(9, 100%, 60%, 0.5))  CSS Box Model CSS Box Model is a Fundamental concept in CSS that governs how elements are structured and positioned on a webpage. By learning this model, you’ll create elements visually appealing that adjust seamlessly to various screen sizes. It is used to create the design and layout of web pages.  What is the CSS Box Model? The box model in CSS is a container that contains various properties, including borders, margins, padding, and the content itself. These properties collectively determine the dimensions and spacing of an element.  Key Components Content: The actual data in text, images, or other media forms can be sized using the width and height property. Padding: Padding is used to create space around the element, inside any defined border. Border: The border is used to cover the content & any padding, & also allows setting the style, color, and width of the border. Margin: Margin is used to create space around the element ie., around the border area.  Syntax p{ width: 80px; height: 70px; margin: 0; border: 2px solid black; padding: 5px; }  Total Width Calculation Total element width = width + left padding + right padding + left border + right border Total width of the element is 94px. Total width = 80px (width) + 10px (left padding + right padding) + 4px (left border + right border) = 94px.  Total Height Calculation Total element height = height + top padding + bottom padding + top border + bottom border Total height of the element is 84px. Total height = 70px (height) + 10px (top padding + bottom padding) + 4px (top border + bottom border) = 84px.  Content width: Sets the width of the content area. height: Sets the height of the content area.  Padding Padding: Sets the space between the content and the border. You can specify values for all sides or individually.  Border border: Defines the border around the padding. You can set the width, style, and color.  Margin margin: Sets the space outside the border. Margins can also be specified for individual sides. Example of the CSS box model  CSS units There are various units in CSS to express the measurement and length. A CSS unit is used to determine the property size, which we set for an element or its content. The units in CSS are required to define the measurement such as margin: 20px; in which the px (or pixel) is the CSS unit. They are used to set margin, padding, lengths, and so on. We cannot apply the whitespace between the number and the unit. The unit can be omitted for the value 0. Some properties of CSS allow the negative values of length. The length unit in CSS is of two types: 1. Absolute length. 2. Relative length.  Absolute lengths These are the fixed-length units, and the length expressed using the absolute units will appear as exactly that size. It is not recommended to use on-screen, because the size of the screen varies too much. So, the absolute units should be used when the medium of output is known, such as the print layout. Absolute units are useful when the responsiveness is not considered in a project. They are less favorable for the responsive sites because they do not scale when the screen changes.  The absolute length units are tabulated as follows: Unit Name Explanation cm Centimeters It is used to define the measurement in centimeters. mm Millimeters It is used to define the measurement in millimeters. in Inches It is used to define the measurement in inches. 1in = 96px = 2.54cm pt Points It is used to define the measurement in points. 1pt = 1/72 of 1 inch. pc Picas It is used to define the measurement in picas. 1pc = 12pt so, there 6 picas is equivalent to 1 inch. px Pixels It is used to define the measurement in pixels. 1px = 1/96th of inch Example  Relative lengths Relative units are good to style the responsive site because they scale relative to the window size or the parent. They specify the length, which is relative to another length property. Depending on the device, if the size of the screen varies too much, then the relative length units are the best because they scale better between the different rendering mediums. We can use the relative units as the default for the responsive units. It helps us to avoid update styles for different screen sizes.  The relative length units are tabulated as follows: Unit Name em It is relative to the font-size of the element. ex It is relative to the x-height of the font of the element. It is rarely used. The x-height is determined by the height of the lowercase letter 'x'. ch It is similar to the unit ex, but instead of using the height of the letter x, it measures the width of the integer "0" (zero). rem It is the font-size of the root element  vh It is relative to the height of the viewport. 1vh = 1% or 1/100 of the height of the viewport. vw It is relative to the width of the viewport. 1vw = 1% or 1/100 of the width of viewport vmin It is relative to the smaller dimension of the viewport. 1vmin = 1% or 1/100 of the viewport's smaller dimension. vmax It is relative to the larger dimension of the viewport. 1vmax = 1% or 1/100 of the viewport's larger dimension. % It is used to define the measurement as a percentage that is relative to another value. Example  Time-Based Units in CSS time-based units are used primarily for animations and transitions. They define the duration or delay of animations and transitions, allowing you to control the timing and speed of these effects. Unit Explanation s It is the duration of time in seconds. ms It is the duration of time in milliseconds. 1ms = 1/100 of a second  s (Seconds) s (Seconds) Definition: Represents seconds. Usage: Commonly used to specify the duration or delay of animations and transitions.  ms (Milliseconds) Definition: Represents milliseconds (1 second = 1000 milliseconds). Usage: Useful for more granular control over timing, especially for quick transitions or animations.  Animations The animation property allows you to create complex animations by defining keyframes and controlling their timing.  Properties animation-name: Specifies the name of the @keyframes animation. animation-duration: Specifies how long the animation should take to complete one cycle. animation-timing-function: Describes how the intermediate property values are calculated (e.g., ease-in, linear). animation-delay: Defines when the animation should start. Animation-iteration-count: Specifies the number of times the animation should repeat (infinite for endless). animation-direction: Defines whether the animation should play in reverse on alternate cycles (normal, reverse, alternate, alternate-reverse).  Transitions The transition property allows you to create smooth transitions between property values when an element changes state.  Properties transition-property: Specifies the CSS property to which the transition effect is applied. transition-duration: Defines how long the transition should take. transition-timing-function: Describes the speed curve of the transition. transition-delay: Defines the delay before the transition starts. Example of Using Time Units in Animations and Transitions  CSS units: Angles The transform properties in CSS require values to express in angles Unit Explanation Deg: It expresses the angles in degrees. Grad: It expresses the angles in gradians, i.e., 1/400 of a turn. Turn: It expresses the angles in turns, i.e., 360 degrees. Example  Changing Layout Flow with display Property The display property controls how elements are rendered on the page, affecting their layout and interaction with other elements. block: The default for block-level elements (e.g., ). Elements with display: block; take up the full width available and start on a new line. Syntax:  inline inline: Elements with display: inline; only take up as much width as necessary and do not start on a new line (e.g., ).  inline-block inline-block: Combines features of both block and inline. Elements with display: inline-block; respect width and height but do not start on a new line.  none none: The element is not rendered at all (it does not occupy any space)  flex flex: Allows for flexible layouts. Elements with display: flex; become flex containers, and their children become flex items.  grid grid: Creates a grid layout. Elements with display: grid; become grid containers, and their children become grid items.  Positioning Elements with position Property The position property affects the positioning of an element within its container. absolute sticky  Using Flexbox for Layouts Flexbox is a layout model that allows you to design complex layouts with ease. It provides flexible sizing and spacing options. Flex Wrap Flex Align Items  Using Grid for Layouts CSS Grid Layout is a powerful layout system that provides a two-dimensional grid-based approach. Named Grid Lines  Creating Responsive Layouts with Media Queries Media queries allow you to apply different styles based on the viewport size or device characteristics. Orientation Media Query Example of a Responsive Layout  Bootstrap Bootstrap is a popular open-source front-end framework that is used to create responsive and mobile-first websites and web applications. It provides a collection of CSS and JavaScript components, such as grids, forms, buttons, navigation bars, and more, which can be easily implemented and customized to create responsive and visually appealing web interfaces. With Bootstrap, developers can save time and effort by utilizing pre-designed components, as well as the grid system for creating responsive layouts. It also provides numerous styling options and utilities to enhance the overall appearance and functionality of websites. Bootstrap is widely used by web developers to streamline the web development process and create consistent and visually appealing user interfaces.  History of Bootstrap Mark Otto and Jacob Thornton developed the Bootstrap, at Twitter. In August 2011, Bootstrap was released as an open source product, on GitHub.  Key points in Bootstrap 5 and later versions Smaller file size: Bootstrap 5.* is designed to be more lightweight, with the removal of jQuery and other dependencies. It has switched to Vanilla JavaScript. This leads to faster load times. Improved grid system: The grid system in Bootstrap 5.* comes with a new, more flexible layout. It introduces a new gap utility and no longer relies on floats. Updated default colors and theming: Bootstrap 5.* introduces a new default color palette and theme. The new colors are more modern and visually appealing.  Cont… Improved form controls: The form controls in Bootstrap 5.* have been enhanced with new styles and options. There are new styles for checkboxes and radio buttons, as well as improved custom select menus. New helpers and utilities: Bootstrap 5.* introduces new utility classes and helpers, such as vertical centering, stretched link utility, and more. Improved documentation and accessibility: The documentation for Bootstrap 5 has been updated and improved, making it easier to use and understand. Additionally, Bootstrap 5 focuses more on accessibility, with better ARIA support and improved keyboard navigation.  Benefits Advantages Description Bootstrap’s ready-made components accelerate development, enabling faster Speedy Development project completion. The built-in grid system ensures websites adapt seamlessly to diverse screen Responsive by Design sizes and devices. Bootstrap maintains a uniform look and feel across various elements, ensuring a Consistent UI Elements cohesive user experience. Cross-Browser Bootstrap handles browser differences, minimizing the need for extensive testing Compatibility and ensuring a consistent user experience. Customizable themes, variables, and mixins provide flexibility to match specific Flexible Customization project requirements and branding. Bootstrap - important globals  Viewport meta Bootstrap follows a "mobile-first" development approach, where the code is initially optimized for mobile devices, and then components are scaled up as needed through CSS media queries. To ensure accurate rendering and touch zooming on all devices, it's essential to include the responsive viewport meta tag in the section of your webpage.  Box-sizing The global box-sizing value is switched from content-box to border-box, for extensive sizing in CSS. It ensures that the final width of an element is not affected by the padding. The following code will let all the nested elements, including the ones with generated content via ::before and ::after, inherit the specified box-sizing for that.selector-for-some-widget:  Setting up the development Bootstrap environment 1. Install a Code Editor VS Code: Highly recommended for its extensions and Bootstrap snippets. Sublime Text: Lightweight and fast.Atom: A good alternative, especially for front-end development  2. Set Up Node.js and npm Install Node.js: Download and install Node.js from https://nodejs.org/ , which includes npm (Node Package Manager). Verify Installation: Check if Node.js and npm are installed correctly by running: node –v npm -v  Install Bootstrap Using npm: npm install bootstrap Using a CDN: If you prefer not to install locally, you can include Bootstrap via a CDN in your HTML file: Create a Project Structure HTML Template: Create a basic index.html file  Customizing Bootstrap Custom CSS: Override Bootstrap styles in custom.css. Sass for Advanced Customization: Install Sass: If you want to customize Bootstrap's variables, you can use Sass: npm install sass Modify Variables: Create a _custom.scss file and modify Bootstrap variables: $primary: #ff5733; @import "node_modules/bootstrap/scss/bootstrap”; Compile Sass: Compile your custom Sass: sass _custom.scss css/custom.css  Install Live Server for Hot Reloading VS Code Extension: Install the "Live Server" extension in VS Code. Start Live Server: Right-click index.html and select "Open with Live Server" to see your changes in real-time.  Add Bootstrap Icons (Optional) Install via npm: npm install bootstrap-icons Using a CDN:  Using Bootstrap with JavaScript Custom JS: Add interactivity with your custom JavaScript in custom.js. Bootstrap Components: Use Bootstrap's JavaScript components like modals, tooltips, and carousels. Testing and Debugging Bootstrap DevTools: Use browser DevTools to inspect and debug your Bootstrap components. Linting: Use linters like ESLint and Stylelint for maintaining code quality.  Version Control Initialize Git: Set up a Git repository for your project: git init Commit Changes: git add. git commit -m "Initial commit with Bootstrap setup" Deployment GitHub Pages, Netlify, or Vercel: Easily deploy your Bootstrap project for free. Components of Bootstrap  List of components Component Description It simply puts extra attention to particular content or information by making it Jumbotron larger and more eye-catching. Alerts It is a popup with a predefined message that appears after a particular action. Customized buttons used to perform an action in forms, dialogue boxes, etc. Buttons They come in multiple states, sizes, and predefined styles. Button group A group of buttons aligned in a single line, arranged vertically or horizontally.  Cont… Badge A labeling component used to add additional information. Used to show the progress of a particular operation with a custom progress Progress Bar bar. It may have text labels, stacked bars, and animated backgrounds. Displays the loading state of websites or projects. Built with HTML and CSS, Spinner doesn’t require JavaScript. Keeps updating the navigation bar to the currently active link based on the Scrollspy scroll position in the viewport. List group Displays an unordered series of content in a proper way.  Cont… Card Provides a customizable, extensible, and flexible content container. Drops the menu in the format of a list of links. Contextual and toggleable Dropdown overlays. Navs Creates a basic and simple navigation menu with a.nav base class. Navbar The navigation bar at the top of a website or webpage. Used to take multiple inputs at once from the user. Bootstrap has two Forms layouts available: stacked and inline  Cont… Extend form controls by adding a button, button group, or text on either side of Input groups inputs. Provides the location of the current page in a navigational hierarchy and adds Breadcrumb separators through CSS. Carousel A slideshow of image or text content built with CSS 3D and JavaScript. Displays a message for a small amount of time, usually a few seconds. Alert Toast messages designed to imitate push notifications popular in desktop and mobile systems. Tooltip Provides small information about the element/link when the mouse hovers over it.  Cont… Popovers Displays extra information about the element/link when clicked on it. Collapse A JavaScript plugin used to show or hide content. Modal A small popup window positioned over the actual window. Used to easily navigate between different pages, typically presented as a Pagination large block of connected links for accessibility. Used for repetitive and complex components like tweets or blogs. Images or Media Object videos are placed/aligned to the left or right of the content. Examples of Bootstrap components Cont… Alerts Example Cont….  Alerts Purpose: Display important messages to users. Basic Usage: This is a success alert—check it out! Variants: Alerts can be styled with different classes for different contexts like alert-primary, alert- secondary, alert-success, alert-danger, alert-warning, alert-info, alert-light, alert-dark. Dismissible Alerts: Can be made dismissible by adding a close button This is a warning alert—check it out!  Badge Purpose: Display a small piece of information or indicator, often used with lists, buttons, or nav items. Basic Usage: Primary Variants: Similar to alerts, badges can have different styles like bg-primary, bg-secondary, bg- success, bg-danger, bg-warning, bg-info, bg-light, bg-dark. Using with Buttons: You can attach badges to buttons: Notifications 4  Buttons Purpose: Trigger actions or events when clicked. Basic Usage: Primary Button Variants: Different styles include btn-primary, btn-secondary, btn-success, btn-danger, btn- warning, btn-info, btn-light, btn-dark.Button Sizes: Adjust the size of buttons using classes like btn-lg, btn-sm. Large button Small button Outline Buttons: Buttons with outline styles: Primary Carousel Navigation Bars Example Dropdown Cont…