Web Technology Notes Complete PDF

The history of the World Wide Web (often referred to as the "web") is a fascinating journey that has transformed the way we communicate, share information, and conduct business. Here's a brief overview of its evolution: 1. 1960s-1970s: The Precursors - The concept of hypertext, the foundation of...

The history of the World Wide Web (often referred to as the "web") is a fascinating journey that has transformed the way we communicate, share information, and conduct business. Here's a brief overview of its evolution: 1. 1960s-1970s: The Precursors - The concept of hypertext, the foundation of the web, was introduced by Ted Nelson in the 1960s. Hypertext is a system of linking text and media in a non-linear fashion. - The ARPANET, a precursor to the internet, was established in the late 1960s by the U.S. Department of Défense’s Advanced Research Projects Agency (ARPA). It allowed researchers to share information and resources across connected computers. 2. 1980s: Birth of the Web - Tim Berners-Lee, a British computer scientist, proposed the idea of a "mesh" of hypertext documents that could be accessed through "browsers" in March 1989. - In 1990, Berners-Lee wrote the first web browser/editor, called "WorldWideWeb," and developed the first web server software. - In 1991, he introduced the concept of URLs (Uniform Resource Locators), HTTP (Hypertext Transfer Protocol), and HTML (Hypertext Markup Language). 3. 1990s: Commercialization and Expansion - The first website, "http://info.cern.ch," went live in 1991, providing information about the World Wide Web project. - The NCSA Mosaic web browser, released in 1993, popularized the web by introducing images and a user- friendly interface. - Commercial websites began to emerge, and web development accelerated. Companies like Amazon (1995) and eBay (1995) were founded, changing the landscape of online commerce. - Netscape Navigator became the dominant web browser during this era. 4. Late 1990s: Dot-com Bubble and Standards - The late 1990s saw the rapid growth of internet companies, leading to the dot-com bubble. Many companies experienced significant valuation increases before the bubble burst in the early 2000s. - Web standards became important for ensuring consistency and interoperability. The W3C (World Wide Web Consortium) was founded in 1994 to develop and promote these standards. 5. 2000s: Web 2.0 and Social Media - The term "Web 2.0" emerged to describe the shift from static web pages to dynamic and interactive content. Social media platforms like Facebook (2004) and YouTube (2005) gained popularity. - Blogs, wikis, and user-generated content became integral to the web's evolution. Collaboration and sharing were key themes. 6. 2010s: Mobile and Beyond - The proliferation of smartphones and mobile devices led to the need for responsive web design and mobile- friendly content.  - Web technologies like HTML5, CSS3, and JavaScript frameworks continued to advance, enabling richer and more immersive web experiences. 7. Present and Future: Web 3.0 and Beyond - The concept of "Web 3.0" envisions a semantic web, where data is more interconnected and machine- readable, allowing for more intelligent and context-aware applications. - Emerging technologies like virtual reality (VR), augmented reality (AR), and the Internet of Things (IoT) are reshaping how we interact with the web. The history of the web is a story of continuous innovation, collaboration, and adaptation. It has not only transformed the way we access information but has also created new avenues for communication, commerce, education, and entertainment. Growth of the World Wide Web The growth of the World Wide Web (often simply referred to as the "web") has been nothing short of phenomenal. Since its inception, the web has transformed from a simple collection of linked documents to a vast and interconnected network that plays an integral role in nearly every aspect of modern life. Here's a look at the key stages of the web's growth: 1. Early Days (1990s): The web began as a text-based system for sharing documents and information. Tim Berners-Lee's invention of the World Wide Web in the early 1990s laid the foundation for what would become a global phenomenon. 2. Web Browsers and Commercialization (Mid-1990s): The release of user-friendly web browsers like Netscape Navigator and Microsoft Internet Explorer made the web accessible to a broader audience. This era also saw the emergence of commercial websites, e-commerce, and the "dot-com" boom. 3. The Dot-Com Bubble (Late 1990s - Early 2000s): The late 1990s saw rapid growth in internet-based companies, leading to inflated valuations and speculative investments. While the bubble eventually burst, it marked a significant phase in the commercialization of the web. 4. Web 2.0 and User-Generated Content (Mid-2000s): The term "Web 2.0" was coined to describe the shift from static websites to dynamic and interactive platforms. Social media, blogging, and user-generated content became integral to the web's growth during this period. Websites like Facebook, YouTube, and Wikipedia gained massive popularity. 5. Mobile Revolution (Late 2000s - Early 2010s): The proliferation of smartphones and mobile devices led to a fundamental change in web usage patterns. Websites and applications had to adapt to responsive design and mobile-friendly interfaces to accommodate users on various devices. 6. Emergence of New Technologies (2010s): The 2010s saw the rise of HTML5, CSS3, and JavaScript frameworks, enabling more sophisticated and interactive web experiences. Rich multimedia, animations, and complex applications became possible within web browsers. 7. Rise of E-Commerce and Online Services (2010s): Online shopping became more prevalent, and services like streaming platforms (Netflix, Spotify), food delivery apps (Uber Eats, DoorDash), and cloud-based software (Google Workspace, Microsoft 365) became central to many people's lives. 8. Web Accessibility and Inclusivity (2010s): There was a growing emphasis on making the web accessible to individuals with disabilities. Standards like the Web Content Accessibility Guidelines (WCAG) were established to ensure that web content is usable by everyone. 9. Web of Things and IoT (2010s): The integration of everyday objects with the web, known as the Internet of Things (IoT), brought about new possibilities for connected devices, smart homes, and data-driven insights. 10. Advancements in AI and Web Personalization: Artificial intelligence and machine learning technologies contributed to personalized web experiences, as algorithms analyzed user behavior to recommend content, products, and services tailored to individual preferences. 11. Continued Innovation (Present and Future): As of my last knowledge update in September 2021, the web continues to evolve with emerging technologies like Web 3.0 (semantic web), virtual reality (VR), augmented reality (AR), blockchain, and more. The boundaries between the physical and digital worlds are becoming increasingly blurred. Throughout its growth, the web has become a cornerstone of communication, commerce, education, entertainment, and more. Its ongoing evolution presents exciting opportunities and challenges as technology continues to reshape how we interact with information and each other. Protocols governing the web Several protocols govern the functioning of the World Wide Web, ensuring seamless communication between web browsers, servers, and various other components. These protocols enable the retrieval and display of web content, as well as the interaction between users and websites. Some of the fundamental protocols that play a crucial role in governing the web include: 1. HTTP (Hypertext Transfer Protocol): HTTP is the foundation of data communication on the web. It facilitates the transfer of hypertext (linked) documents and other resources between web servers and browsers. HTTP defines how requests and responses should be formatted and how clients (web browsers) and servers should interact. 2. HTTPS (Hypertext Transfer Protocol Secure): HTTPS is an extension of HTTP that adds a layer of security through the use of SSL/TLS encryption. It ensures that data exchanged between the client and the server remains private and protected from potential eavesdropping and tampering. 3. URL (Uniform Resource Locator): A URL is a standardized way to specify the address of a resource on the web. It consists of various components, including the protocol (HTTP/HTTPS), domain name, path, query parameters, and fragment identifier. URLs are what you enter in your browser's address bar to access web pages. 4. HTML (Hypertext Markup Language): HTML is the standard markup language used to structure and format content on the web. It defines the structure of a web page by using elements and tags that describe headings, paragraphs, images, links, and other elements. 5. CSS (Cascading Style Sheets): CSS is used to control the presentation and layout of HTML documents. It allows designers to define how elements should appear, including aspects like colors, fonts, spacing, and positioning. 6. XML (Extensible Markup Language): XML is a markup language used for structuring data, often used in web services and data interchange. It's not limited to web pages and can be used to define custom data formats. 7. SMTP (Simple Mail Transfer Protocol): While not specific to web browsing, SMTP is a crucial protocol for sending and receiving email over the internet. It's used for sending outgoing mail from a client to a server or between servers. 8. DNS (Domain Name System): DNS translates human-readable domain names (like www.example.com) into IP addresses that computers understand. It's the system that allows you to access websites using domain names instead of numeric IP addresses. 9. FTP (File Transfer Protocol): FTP is used for transferring files between computers on a network. While it's less common in web browsing today, it has historical significance in how content was once uploaded to and downloaded from servers. 10. WebSocket: WebSocket is a protocol that enables bidirectional, real-time communication between a web browser and a server over a single, long-lived connection. This is useful for applications that require constant updates, such as chat apps or online games. These protocols work together to enable the functioning of the web, allowing users to access, interact with, and contribute to a vast range of content and services. Cyber Laws in India Imagine there are rules for the digital world, just like there are rules in the real world. These rules are called cyber laws. In India, cyber laws are like a guidebook that tells us how to behave online and how to stay safe. Cyber laws in India encompass a set of legal regulations and provisions that govern various aspects of digital activities, cybersecurity, and online interactions. These laws are designed to address the challenges and risks posed by digital technologies, as well as to protect individuals, organizations, and the country's digital infrastructure. Some key aspects of cyber laws in India include: 1. Information Technology Act, 2000 (IT Act): The IT Act is the primary legislation dealing with cybercrimes, electronic commerce, and digital signatures in India. It defines offenses related to hacking, unauthorized access, data breaches, and computer-related fraud. It also recognizes electronic records and signatures as legally valid. This is a special law that talks about things like hacking into computers, stealing information from computers, and cheating people online. It also says that electronic signatures are as good as real signatures. 2. Data Protection and Privacy: The Personal Data Protection Bill, 2019 aims to regulate the collection, storage, processing, and transfer of personal data. It provides individuals with control over their personal information and imposes obligations on organizations handling such data. This is like a privacy shield for your personal information when you're online. There's a new law that's being talked about, which will make sure companies take care of your personal data and can't misuse it. 3. Cybersecurity and Critical Information Infrastructure: India's National Cyber Security Policy aims to secure cyberspace and protect critical information infrastructure. It emphasizes enhancing cybersecurity awareness, developing cybersecurity infrastructure, and creating incident response mechanisms. Just like we lock our doors to keep our homes safe, this law talks about how to protect important online things and make sure bad people can't mess with them. 4. Cybercrimes and Punishments: The IT Act outlines various cybercrimes and their corresponding penalties. These include unauthorized access to computer systems, identity theft, phishing, spreading malware, and more. If someone does something bad online, like hacking or stealing, this law says what kind of punishment they can get. 5. Digital Signatures: The IT Act recognizes digital signatures as legally valid and equivalent to physical signatures, allowing electronic documents to be authenticated. This is like a special code that shows a document online is real and not fake. The law says that digital signatures are like magic stamps that make online documents legit. 6. Electronic Contracts and Transactions: The IT Act facilitates the formation and validity of electronic contracts, ensuring that online transactions are legally enforceable. This is about making sure that if you buy something or do something important online, it's like a real deal and nobody can cheat you. 7. Jurisdiction and International Cooperation: The IT Act provides provisions for handling cybercrimes with international implications, including mutual legal assistance and extradition. If someone does a bad thing online from another country, this law helps us catch them and make them face the consequences. International Cyber Laws International cyber laws refer to legal frameworks, agreements, and norms that govern digital activities across borders. Given the borderless nature of the internet, international cooperation and agreements are essential to addressing cyber threats and promoting responsible behavior. Some key aspects of international cyber laws include: 1. United Nations (UN) Initiatives: The United Nations has been active in promoting cybersecurity and addressing cyber threats through various initiatives, such as the Group of Governmental Experts (GGE) on Developments in the Field of Information and Telecommunications in the Context of International Security. Just like schools have teachers to make sure everyone behaves well, the UN helps countries work together to stop cyber bad guys and keep the internet safe. 2. Council of Europe's Convention on Cybercrime: Also known as the Budapest Convention, this treaty aims to harmonize cybercrime laws and enhance international cooperation in investigating and prosecuting cybercrimes. Imagine all the countries signing a big agreement to work together against online crimes like stealing, cheating, and hacking. 3. International Telecommunication Union (ITU): The ITU works to establish standards and guidelines for secure and resilient information and communication technologies (ICTs) and to foster international collaboration in addressing cyber threats. This is like a club where countries meet and talk about how to make sure the internet works well for everyone and is safe from trouble. 4. Regional Initiatives: Different regions have developed their own initiatives and agreements to address cybersecurity challenges. For example, the European Union's General Data Protection Regulation (GDPR) sets standards for data protection and privacy across its member states. Different groups of countries have their own special rules to make sure everyone plays nicely in their part of the world. 5. Bilateral and Multilateral Agreements: Countries often engage in bilateral and multilateral agreements to enhance cooperation on cybersecurity issues, information sharing, and addressing cybercrimes that transcend national boundaries. This is like making deals between countries to help each other when there's a problem online. 6. Norms of Responsible State Behaviour: Various international initiatives and frameworks promote norms of responsible behaviour in cyberspace. These include principles of not targeting critical infrastructure, not conducting cyberattacks on other countries' sovereignty, and cooperating in investigating cyber incidents. These are like good manners for countries in the online world. They agree not to do bad things online and to work together to keep everyone safe. It's important to note that the field of international cyber laws is continually evolving as technology advances and new challenges emerge. International cooperation, diplomatic efforts, and agreements are crucial for effectively addressing the complex and dynamic nature of cyber threats and opportunities. Just like how we learn to share and be kind in the real world, these cyber laws and agreements help us do the same in the digital world. They make sure that we can enjoy the benefits of the internet while staying safe and responsible. Web Project Imagine you want to build a special kind of house called a website on the internet. This website can show information, pictures, and videos, and even let people do things like buying stuff or leaving comments. This whole thing is called a web project. It's like building a digital space where people can visit and explore. Web Team To build this website, you need a group of people with different skills. This group is called a web team. Just like building a real house needs different experts like architects, plumbers, and painters, a web project needs different experts too. 1. Web Designer: This person is like the artist of the team. They decide how the website should look, where things should go, and how it should feel when people visit. 2. Web Developer: This person is like the builder. They take the designs from the designer and use special codes to create the actual website that people can click and interact with. 3. Content Creator: This person is like the writer and photographer. They create the words, pictures, and videos that will be on the website to tell visitors about what it's all about. 4. Project Manager: This person is like the team captain. They make sure everyone knows what they're supposed to do, keeps track of the timeline, and makes sure the project stays on track. Team Dynamics Now, imagine the web team is like a sports team that's working together to win a game. How they work together is called team dynamics. 1. Communication: Just like players on a sports team talk to each other, the web team needs to communicate well. They share ideas, ask questions, and give updates on what they're doing. 2. Collaboration: This means working together like a puzzle. The designer, developer, and content creator need to fit their pieces together so the website makes sense and looks great. 3. Problem-Solving: Sometimes things don't go as planned. Maybe there's a technical issue or a design doesn't work well. The team needs to figure out solutions together. 4. Time Management: Just like in a game, there's a clock ticking. The team needs to manage their time well to finish the project on time. 5. Respect: Everyone's skills are important. The team needs to respect each other's expertise and ideas. 6. Adaptability: If something changes or there's a new idea, the team should be flexible and adapt to it. 7. Celebration: When the website is done and live on the internet, the team celebrates their hard work and success together. So, building a website is like creating a digital space with the help of a team, where each member brings their own skills and works together like a well-organized game. Internet The internet is a global network of interconnected computers and devices. It allows these devices to communicate with each other, share information, and access various services. Just like roads connect cities, the internet connects computers worldwide, enabling people to exchange data, communicate, and access online resources. Think of the internet as a giant web that connects all the computers and devices in the world. It's like a huge playground where you can find information, play games, and talk to your friends, no matter where they are. HTTP Protocol HTTP, or Hypertext Transfer Protocol, is a set of rules that computers follow to communicate on the web. It's the language they use to request and exchange information. When you enter a URL (web address) in your browser and hit "Enter," your browser sends an HTTP request to a web server, asking for a specific webpage. The web server then sends an HTTP response containing the requested content back to your browser, allowing you to view the webpage. HTTP is like a special language that computers use to talk to each other on the internet. It's how your computer asks for information from a website and how the website sends that information back to your computer. It's like saying "please" and "thank you" between your computer and the website. DNS (Domain Name System) DNS is like the internet's phonebook. Instead of remembering IP addresses (numbers) for websites, you can use human-friendly domain names (like www.example.com). When you enter a domain name in your browser, your computer sends a request to a DNS server to translate that name into the corresponding IP address. This allows your computer to locate the server hosting the website you want to visit. Imagine you want to visit a website, but instead of typing a long number (like a phone number), you just type a friendly name like "www.example.com." DNS is like a phonebook for the internet. When you type a name, it looks up the right number (IP address) so your computer can find the website. URL (Uniform Resource Locator) A URL is the web address that identifies a specific resource on the internet. It's like the combination of a street address and room number in a building. A URL consists of different parts: - Protocol (e.g., "http://" or "https://"): This indicates how the data should be transferred between your browser and the server. - Domain name (e.g., "www.example.com"): This is the unique name of the website's location on the internet. - Path (e.g., "/page"): This specifies the specific location or file you want to access on the website. A URL is like the address of a house. It's what you type in your web browser to find a specific webpage. A URL has different parts, like "http://www.example.com/page," where "http://" is the protocol, "www.example.com" is the address, and "/page" is the specific room you want to visit. Web Browser A web browser is a software application that allows you to access and interact with content on the internet. It interprets and displays web content, such as text, images, videos, and interactive elements. When you type a URL or click on a link, the browser sends an HTTP request to the appropriate web server. It then receives the HTTP response containing the webpage's content and displays it on your screen. A web browser is like a magic window that lets you see and interact with the internet. When you type a URL or click a link, the browser uses the HTTP language to ask the website for the information you want. It then shows that information on your screen, like a virtual book that you can read and explore. Web Servers Web servers are powerful computers that store and serve websites to users over the internet. They handle incoming HTTP requests from web browsers and deliver the requested content, such as HTML, images, videos, and other files. Web servers store website files and make them accessible to users by responding to their requests. Think of web servers as helpful librarians. When your browser asks for information, like a webpage, the web server finds that information and sends it to your browser. Web servers store all the websites and make them available to anyone who wants to visit them. Imagine you're at home, and you want to read a story online. You open your magic window (web browser), type the name of the story's house (URL), and press "Go." Your browser talks to the helpful librarian (web server) using the special language (HTTP) and asks for the story. The librarian finds the story in their big book of stories and sends it back to your magic window. Now you can read and enjoy the story from anywhere in the world, thanks to the internet! Putting it all together: Imagine you're sitting at your computer. You open your web browser and type in the URL of a website you want to visit. The browser uses the DNS to find the IP address of the web server hosting that website. It then sends an HTTP request to the server, asking for the specific page you want. The web server receives the request, fetches the requested page, and sends back an HTTP response containing the webpage's content. Your browser interprets the content and displays it on your screen, allowing you to explore and interact with the website's information and features. Sure, let's break down user-centric design, sitemaps, and the process of planning and publishing a website in easy language: User-Centric Design Imagine you're building a playground. You wouldn't just put anything you like there; you'd think about what kids would enjoy the most. Similarly, when we design a website, we think about what visitors will like and find useful. This is called user-centric design. 1. Understanding Users: First, we think about who will visit the website and what they might want. It's like understanding what games kids like before building the playground. 2. Easy to Use: Just like a playground with clear signs, a website should be easy to use. We arrange things in a way that makes sense, so visitors can find what they need without getting lost. 3. Visual Appeal: Just like making the playground colorful and fun, we make the website look good with attractive colors, images, and fonts. 4. Responsive Design: Just as a playground fits kids of all ages, a website should work well on different devices like phones, tablets, and computers. Sitemap Think of a sitemap as a map that shows all the places in a big garden. Similarly, a website's sitemap is like a map that shows all the pages on the website. 1. Page List: A sitemap lists all the pages of the website, like Home, About Us, Services, Contact, etc. 2. Hierarchy: It shows how the pages are connected, like which pages are main and which are sub-pages. Planning and Publishing a Website: Building a website is like creating a recipe. You need to gather ingredients, follow steps, and then serve the delicious dish to everyone. 1. Gathering Information: Just like getting ingredients, gather all the content you want on the website - text, images, videos, and any other stuff. 2. Creating a Sitemap: Plan how you want the pages to be organized on the website. This is your sitemap. 3. Designing: Design the website using user-centric principles. Make it look good and easy to use. 4. Development: Just like cooking, this is where you put everything together. Web developers use codes to build the website and make it work. 5. Testing: Before serving the dish, you taste it to make sure it's perfect. Similarly, test the website to make sure it works well on different devices and browsers. 6. Review: Like checking if your dish is seasoned right, review the website for any mistakes or improvements. 7. Publishing: When you're satisfied, it's time to put the website online for everyone to see. This is like serving the dish on the table. 8. Maintenance: Just like keeping your recipe updated, websites need updates too. Regularly check and update content to keep it fresh and relevant. Putting it all together: Building a website is like creating a fun and useful place for people to visit on the internet. You plan everything, design it to be attractive and user-friendly, and then serve it to the online world for everyone to enjoy!  UNIT 2: HTML Basics of HTML (Hypertext Markup Language): HTML is the standard language used to create web pages. It stands for "Hypertext Markup Language," and it uses special codes (markup) to structure content on web pages. HTML Documents: A web page is usually a file with an ".html" extension. It contains text, images, links, and more. HTML Tags: Tags are used to define elements on a web page. Tags are enclosed in angle brackets, like. Most tags come in pairs: an opening tag and a closing tag. HTML Editors: HTML files can be created and edited with a simple text editor like Notepad. However, specialized HTML editors like Visual Studio Code, Sublime Text, and Dreamweaver offer features like code highlighting, auto- completion, and preview. HTML Elements: HTML elements are the building blocks of a webpage. They define the structure and content of a page. An HTML file is made of elements. These elements are responsible for creating web pages and define content in that webpage. An element in HTML usually consist of a start tag , close tag and content inserted between them. Technically, an element is a collection of start tag, attributes, end tag, content between them. Here are some common HTML elements: - `` to ``: Headings are used to define headings or titles on a page, with `` being the highest level (most important) and `` the lowest. ```html Main Heading Subheading ``` - ``: The `` element defines paragraphs of text. It's used to separate blocks of text. ```html This is a paragraph of text. ``` - `` and ``: These elements are used for emphasizing text. `` typically italicizes text, while `` makes it bold. ```html Italic Text and Bold Text ``` - ``: The `` element underlines text. ```html Underlined Text ``` - ``: The `` element adds a strikethrough to text, indicating that it's no longer relevant or valid. ```html Old Text ``` o All the content written between body elements are visible on web page. Void element: All the elements in HTML do not require to have start tag and end tag, some elements does not have content and end tag such elements are known as Void elements or empty elements. These elements are also called as unpaired tag. Some Void elements are (represents a line break) , (represents a horizontal line), etc. Nested HTML Elements: HTML can be nested, which means an element can contain another element. Block-level and Inline HTML elements For the default display and styling purpose in HTML, all the elements are divided into two categories: o Block-level element o Inline element Block-level element: o These are the elements, that structure the main part of web page, by dividing a page into coherent blocks. o A block-level element always start with new line and takes the full width of web page, from left to right. Following are the block-level elements in HTML. , , , , , , , , , , , , , , -, , , , , , , , , , , , , , and. This is first div This is second div This is a block level element Inline elements: o Inline elements are those elements, which differentiate the part of a given text and provide it a particular function. o These elements do not start with new line and take width as per requirement. o The Inline elements are mostly used with other elements. , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,. Example:  Click on link this is inline element This will take width of text only Following is the list of the main elements used in HTML: Start tag Content End tag Description...... These are headings of ??.. These elements are used to provide the HTML headings of page. This is the paragraph This element is used to display a content in form of paragraph. This is div section This element is used to provide a section in web page. This element is used to provide a line break. ( void element) This element is used to provide a horizontal line. (void element) HTML Attribute: o HTML attributes are special words which provide additional information about the elements or attributes are the modifier of the HTML element. o Each element or tag can have attributes, which defines the behaviour of that element. o Attributes should always be applied with start tag. o The Attribute should always be applied with its name and value pair. o The Attributes name and values are case sensitive, and it should be written in Lowercase only. o You can add multiple attributes in one HTML element, but need to give space between two attributes. Syntax content Example  This is Style attribute It will add style property in element It will change the color of content The title attribute in HTML Description: The title attribute is used as text tooltip in most of the browsers. It display its text when user move the cursor over a link or any text. You can use it with any text or link to show the description about that link or text. In our example, we are taking this with paragraph tag and heading tag. Example Example of title attribute Move the cursor over the heading and paragraph, and you will see a d escription as a tooltip Output: The href attribute in HTML Description: The href attribute is the main attribute of anchor tag. This attribute gives the link address which is specified in that link. The href attribute provides the hyperlink, and if it is blank, then it will remain in same page. Example With link address: This is a link The src Attribute The src attribute is one of the important and required attribute of element. It is source for the image which is required to display on browser. This attribute can contain image in same directory or another directory. The image name or source should be correct else browser will not display the image. Example Note: The above example also have height and width attribute, which define the height and width of image on web page. Output: HTML Heading: A HTML heading or HTML h tag can be defined as a title or a subtitle which you want to display on the webpage. When you place the text within the heading tags........., it is displayed on the browser in the bold format and size of the text depends on the number of heading. There are six different HTML headings which are defined with the to tags, from highest level h1 (main heading) to the least level h6 (least important heading). h1 is the largest heading tag and h6 is the smallest one. So h1 is used for most important heading and h6 is used for least important. Headings in HTML helps the search engine to understand and index the structure of web page. Heading no. 1 Heading no. 2 Heading no. 3 Heading no. 4 Heading no. 5 Heading no. 6 HTML Paragraph: HTML paragraph or HTML p tag is used to define a paragraph in a webpage. Let's take a simple example to see how it work. It is a notable point that a browser itself add an empty line before and after a paragraph. An HTML tag indicates starting of new paragraph. Note: If we are using various tags in one HTML file then browser automatically adds a single blank line between the two paragraphs. See this example: This is first paragraph. Space inside HTML Paragraph If you put a lot of spaces inside the HTML p tag, browser removes extra spaces and extra line while displaying the page. The browser counts number of spaces and lines as a single one.  I am going to provide you a tutorial on HTML and hope that it will be very beneficial for you. Look, I put here a lot of spaces but I know, Browser will ignore it. You cannot determine the display of HTML because resized windows may create different result. Output: I am going to provide you a tutorial on HTML and hope that it will be very beneficial for you. Look, I put here a lot of spaces but I know, Browser will ignore it. You cannot determine the display of HTML because resized windows may create different result. As you can see, all the extra lines and unnecessary spaces are removed by the browser. How to Use and tag with paragraph? An HTML tag is used for line break and it can be used with paragraph elements. Following is the example to show how to use with element. Example Use of line break with pragraph tag Papa and mama, and baby and Dot, Willie and me?the whole of the lot Of us all went over in Bimberlie's sleigh, To grandmama's house on Christmas day.  Output: An HTML tag is used to apply a horizontal line between two statements or two paragraphs. Following is the example which is showing use of tag with paragraph. Example: Example to show a horizontal line with paragraphs An HTML hr tag draw a horizontal line and separate two paragraphs with that line. it will st art a new paragraph. Output: HTML Style: HTML Style is used to change or add the style on existing HTML elements. There is a default style for every HTML element e.g. background color is white, text color is black etc. The style attribute can by used with any HTML tag. To apply style on HTML tag, you should have the basic knowledge of css properties e.g. color, background-color, text-align, font-family, font-size etc. The syntax of style attribute is given below: style= "property:value" HTML Style color The color property is used to define the text color. Let's see a simple example of styling html tags by color property of css. This is Green Color This is Red Color Output: This is Green Color This is Red Color HTML Style background-color The background-color property is used to define background color for the HTML tag. Let's see an example of styling html tag by of css background-color property  1. This is yellow background 2. This is red background Output: This is yellow background This is red background HTML Style font-family The font-family property specifies the font family of the HTML tag. Let's see an example of styling html tag by css font-family property This is times new roman font family This is arial font family Output: This is times new roman font family This is arial font family HTML Style font-size The font-size property is used to define the text size of the HTML tag. Let's see an example of font-size property 1. This is 200% h3 tag 2. This is 200% p tag Output: This is 200% h3 tag This is 200% p tag HTML Style text-align The text-align property is used to define the horizontal text alignment for the HTML element. Let's see an example of styling html tag by css text-align property 1. This text is located at right side 2. This text is located at center side If you want to put heading at center or left, use "text-align:center" or "text-align:left" respectively. Output: This text is located at right side This text is located at center side HTML5 doesn't support tag which is supported in older version of HTML. HTML Formatting: HTML Formatting is a process of formatting text for better look and feel. HTML provides us ability to format text without using CSS. There are many formatting tags in HTML. These tags are used to make text bold, italicized, or underlined. There are almost 14 options available that how text appears in HTML and XHTML. In HTML the formatting tags are divided into two categories: o Physical tag: These tags are used to provide the visual appearance to the text. o Logical tag: These tags are used to add some logical or semantic value to the text. NOTE: There are some physical and logical tags which may give same visual appearance, but they will be different in semantics. Here, we are going to learn 14 HTML formatting tags. Following is the list of HTML formatting text. Element name Description This is a physical tag, which is used to bold the text written between it. This is a logical tag, which tells the browser that the text is important. This is a physical tag which is used to make text italic. This is a logical tag which is used to display content in italic. This tag is used to highlight text. This tag is used to underline text written between it.  This tag is used to appear a text in teletype. (not supported in HTML5) This tag is used to draw a strikethrough on a section of text. (Not supported in HTML5) It displays the content slightly above the normal line. It displays the content slightly below the normal line. This tag is used to display the deleted content. This tag is used to increase the font size by one conventional unit. This tag is used to decrease the font size by one unit from base font size. Quotations: HTML q tag HTML q tag is used to put small quotation. To do so, write your text within............. tag. 1. Great quote on love and life. 2. Dr. Seuss once said : Reality is finally better than your dreams. Output: Great quote on love and life. Dr. Seuss once said : “Reality is finally better than your dreams.” - ``: The `` element is used for inline quotations. Browsers typically surround the quoted text with double quotation marks. ```html She said, This is a quotation. ``` HTML blockquote tag HTML blockquote tag is used to define a large quoted section. If you have a large quotation then put the entire text within............. tag.  Read this inspirational story. According to scientists, the bumblebee's body is too heavy and its wing span too small. A erodynamically, the bumblebee cannot fly. But the bumblebee doesn't know that and it keeps flying. Wh en you don't know your limitations, you go out and surpriseyourself. In hindsight, you wonder if you had any limitations. The only limitations a person has are those that are self- imposed. Don't let education put limitations on you. OUTPUT Read this inspirational story. According to scientists, the bumblebee's body is too heavy and its wing span too small. Aerodynamically, the bumblebee cannot fly. But the bumblebee doesn't know that and it keeps flying. When you don't know your limitations, you go out and surprise yourself. In hindsight, you wonder if you had any limitations. The only limitations a person has are those that are self- imposed. Don't let education put limitations on you. - ``: The `` element is used for longer quotations, often displayed in an indented block. ```html This is a longer quote that spans multiple lines. ``` HTML Comments: Comments are some text or code written in your code to give an explanation about the code, and not visible to the user. Comments which are used for HTML file are known as HTML comments. Anything written between these tags will be ignored by the browser, so comments will not be visible on the webpage. Comments of any code make code easy to understand and increase readability of code. Comments are also part of the code, which gives an explanation of the code. How to add comment In HTML You can add comments in your HTML file using tag. So if you will write anything between theses comment tag that will be treated as comment and browser will not read it. Syntax 1. Note: The commented code will not be visible to a webpage, and hence you can use comment tag for documentation purpose, and debugging purpose: Such as: 1. Example: body{ text-align: center; background-color: #f0f8ff; font-size: 30px; color: red; } First WebPage Write your Content here!!! HTML comments are not visible on the webpage but are useful for adding notes to the code for yourself or other developers. They are enclosed in ``. ```html ``` Multiline Comment In HTML code, we can also comments multiple lines at a time. In multiline comment we can use any description about code or multiple line code to debug, etc. Syntax Colors: In HTML, a color can be specified by using a color name Colors can be applied to HTML elements using the `style` attribute and CSS properties. CSS (Cascading Style Sheets) is a separate language for styling web content. Here's how you can apply color: Text Color You can set the color of text ```html This text is red. ``` In this example, `style="color: red;"` sets the text color to red. Hello World Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. OUTPUT:l Hello World Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Background Color You can set the background color for HTML elements Tomato Orange DodgerBlue MediumSeaGreen Gray SlateBlue Violet LightGray OUTPUT; Tomato Orange DodgerBlue MediumSeaGreen Gray SlateBlue Violet LightGray Border Color You can set the color of borders: Hello World Hello World Hello World OUTPUT: Hello World Hello World Hello World MORE EXAMPLES: Same as color name "Tomato": rgb(255, 99, 71) #ff6347 hsl(9, 100%, 64%) Same as color name "Tomato", but 50% transparent: rgba(255, 99, 71, 0.5) hsla(9, 100%, 64%, 0.5) In addition to the predefined color names, colors can be specified using RGB, HEX, HSL, or even transparent colors using RGBA or HSLA color values. Links: Links, created with the `` element, allow users to navigate between different webpages. You specify the destination URL in the `href` attribute: ```html Visit Example.com ``` Links are found in nearly all web pages. Links allow users to click their way from page to page. HTML Links - Hyperlinks HTML links are hyperlinks. You can click on a link and jump to another document. When you move the mouse over a link, the mouse arrow will turn into a little hand. Note: A link does not have to be text. A link can be an image or any other HTML element! HTML Links - Syntax The HTML tag defines a hyperlink. It has the following syntax: link text The most important attribute of the element is the href attribute, which indicates the link's destination. The link text is the part that will be visible to the reader. Clicking on the link text, will send the reader to the specified URL address. Example Visit DBUU.com! By default, links will appear as follows in all browsers: An unvisited link is underlined and blue A visited link is underlined and purple Tip: Links can of course be styled with CSS, to get another look! Absolute URLs vs. Relative URLs Both examples above are using an absolute URL (a full web address) in the href attribute. A local link (a link to a page within the same website) is specified with a relative URL (without the "https://www" part): Example Absolute URLs W3C Google Relative URLs HTML Images CSS Tutorial HTML Links - Use an Image as a Link To use an image as a link, just put the tag inside the tag: Example Image as a Link The image below is a link. Try to click on it. Images: Images are displayed using the `` element, and the source (URL of the image) is specified in the `src` attribute: ```html ``` To center the Image Tables: Tables are used to display data in rows and columns. You create a table with the `` element and define rows with `` (table row), headers with `` (table header), and data cells with `` (table data): , ```html Header 1 Header 2 Data 1 Data 2 ``` HTML Table - Colspan To make a cell span over multiple columns, use the colspan attribute. The value of the colspan attribute represents the number of columns to span. In HTML, the colspan attribute is used within table elements to specify how many columns a table cell should span horizontally. This attribute allows you to create table cells that occupy multiple columns in a table. Here's how you use the colspan attribute: table, th, td { border: 1px solid black; border-collapse: collapse; }  Cell that spans two columns To make a cell span more than one column, use the colspan attribute. Name Age Jill Smith 43 Eve Jackson 57 OUTPUT: Cell that spans two columns To make a cell span more than one column, use the colspan attribute. Name Age Jill Smith 43 Eve Jackson 57 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. Usage: It can be used with and element while creating an HTML Table. Attribute Values: It contains a value i.e number Which specify the number of columns that a cell should span. Note: colspan=”0″ tells the browser to span the cell to the last column of the column group (colgroup). : The colspan attribute when used with tag determines the number of standard cells it should span. Syntax: table content... The value specifies the number of columns that the cell fills. The value must be an integer. Example: html HTML colspan Attribute table, th, td { border: 1px solid black; border-collapse: collapse; text-align:center; } HTML colspan Attribute Name Expense Arun $10 Priya $8  Sum: $18 Output: : The colspan attribute when used with tag determines the number of header cells it should span. Syntax: table content... The value specifies the number of columns that the cell fills. The value must be a integer. Example: html HTML colspan Attribute table, th, td { border: 1px solid black; border-collapse: collapse; text-align: center; }  HTML colspan Attribute Expense Arun $10 Priya $8 Output: Supported Browsers: The browser supported by colspan attribute are listed below: Google Chrome Internet Explorer Firefox Opera Safari HTML Table - Rowspan To make a cell span over multiple rows, use the rowspan attribute. In HTML, the rowspan attribute is used within table elements to specify how many rows a table cell should span vertically. This attribute allows you to create table cells that occupy multiple rows in a table. table, th, td { border: 1px solid black; border-collapse: collapse; } Cell that spans two rows To make a cell span more than one row, use the rowspan attribute. Name Jill Phone 555-1234 555-8745 OUTPUT: Cell that spans two rows To make a cell span more than one row, use the rowspan attribute. Name Jill 555-1234 Phone 555-8745 Usage: It can be used with and element in an HTML Table. Attribute Values: It contains a value i.e number Which specify the number of rows that a table cell should span. : The rowspan attribute when used with tag determines the number of standard cells it should span. Syntax: table content... The value specifies the number of rows that the cell fills. The value must be a integer. Example: html HTML rowspan Attribute table, th, td { border: 1px solid black; border-collapse: collapse; padding: 6px; } HTML rowspan Attribute Name Age Ajay 24 Priya  Output: : The rowspan attribute when used with tag determines the number of header cells it should span. Syntax: table content... The value specifies the number of rows that the cell fills. The value must be a integer. Example: html HTML rowspan Attribute table, th, td { border: 1px solid black; border-collapse: collapse; padding: 6px; } HTML rowspan Attribute Name Age GeeksforGeeks  Arun 24 Priya 25 Output: Supported Browsers: The browser supported by rowspan attribute are listed below: Google Chrome Internet Explorer Firefox Opera Safari HTML Classes and IDs: Classes and IDs are attributes used to apply styles or JavaScript behaviors to specific HTML elements. They are useful for targeting elements with CSS or JavaScript. ```html This is an important paragraph. This element has a unique ID. ``` The HTML id attribute is used to specify a unique id for an HTML element. You cannot have more than one element with the same id in an HTML document. HTML id Attribute: The id attribute is a unique identifier that is used to specify the document. It is used by CSS and JavaScript to perform a certain task for a unique element. In CSS, the id attribute is written using the # symbol followed by id. Syntax: In CSS Stylesheet: #id_name { // CSS Property } HTML id attribute #dbuu{ color: green; font-size: 25px; } Welcome to DBUU School of Computer Science and Engineering HTML class Attribute: The class attribute is used to specify one or more class names for an HTML element. The class attribute can be used on any HTML element. The class name can be used by CSS and JavaScript to perform certain tasks for elements with the specified class name. The class name in CSS stylesheet using “.” symbol. Syntax:  In CSS Stylesheet:.class { // CSS Property } HTML class attribute.dbuu{ color: green; font-size: 25px; } Welcome to DBUU School of Computer Science and Engineering The only difference between them is that “id” is unique in a page and can only apply to at most one element, while “class” selector can apply to multiple elements. HTML Lists: HTML Lists are used to specify lists of information. All lists may contain one or more list elements. There are three different types of HTML lists: 1. Ordered List or Numbered List (ol) 2. Unordered List or Bulleted List (ul) 3. Description List or Definition List (dl) Note: We can create a list inside another list, which will be termed as nested List. HTML Ordered List or Numbered List In the ordered HTML lists, all the list items are marked with numbers by default. It is known as numbered list also. The ordered list starts with tag and the list items start with tag. HTML Ordered List or Numbered List displays elements in numbered format. The HTML ol tag is used for ordered list. We can use ordered list to represent items either in numerical order format or alphabetical order format, or any format where an order is emphasized. There can be different types of numbered list: o Numeric Number (1, 2, 3) o Capital Roman Number (I II III) o Small Romal Number (i ii iii) o Capital Alphabet (A B C) o Small Alphabet (a b c) To represent different ordered lists, there are 5 types of attributes in tag. Type Description Type "1" This is the default type. In this type, the list items are numbered with numbers. Type "I" In this type, the list items are numbered with upper case roman numbers. Type "i" In this type, the list items are numbered with lower case roman numbers. Type "A" In this type, the list items are numbered with upper case letters. Type "a" In this type, the list items are numbered with lower case letters. HTML Ordered List Example Let's see the example of HTML ordered list that displays 4 topics in numbered list. Here we are not defining type="1" because it is the default type. Aries Bingo Leo Oracle Output: 1. Aries 2. Bingo 3. Leo 4. Oracle ol type="I" Let's see the example to display list in roman number uppercase. HTML Java JavaScript SQL Output: I. HTML II. Java III. JavaScript IV. SQL ol type="i" Let's see the example to display list in roman number lowercase. HTML Java JavaScript SQL Output: i. HTML ii. Java iii. JavaScript iv. SQL ol type="A" Let's see the example to display list in alphabet uppercase. HTML Java JavaScript SQL Output:  A. HTML B. Java C. JavaScript D. SQL ol type="a" Let's see the example to display list in alphabet lowercase. HTML Java JavaScript SQL Output: a. HTML b. Java c. JavaScript d. SQL Start attribute The start attribute is used with ol tag to specify from where to start the list items. : It will show numeric values starting with "5". : It will show capital alphabets starting with "E". : It will show lower case alphabets starting with "e". : It will show Roman upper case value starting with "V". : It will show Roman lower case value starting with "v". HTML Java JavaScript SQL Output:  v. HTML vi. Java vii. JavaScript viii. SQL Reversed Attribute: This is a Boolean attribute of HTML tag, and it is new in HTML5 version. If you use the reversed attribute with tag then it will numbered the list in descending order (7, 6, 5, 4......1). HTML Java JavaScript SQL Output: 1. HTML 2. Java 3. JavaScript 4. SQL HTML Unordered List or Bulleted List In HTML Unordered list, all the list items are marked with bullets. It is also known as bulleted list also. The Unordered list starts with tag and list items start with the tag. HTML Unordered List or Bulleted List displays elements in bulleted format. We can use unordered list where we do not need to display items in any particular order. The HTML ul tag is used for the unordered list. There can be 4 types of bulleted list: o disc o circle o square o none To represent different ordered lists, there are 4 types of attributes in tag. Type Description Type "disc" This is the default style. In this style, the list items are marked with bullets. Type "circle" In this style, the list items are marked with circles. Type "square" In this style, the list items are marked with squares. Type "none" In this style, the list items are not marked. HTML Unordered List Example HTML Java JavaScript SQL Output: HTML Java JavaScript SQL ul type="circle" HTML Java JavaScript SQL Output: o HTML o Java o JavaScript o SQL ul type="square"  HTML Java JavaScript SQL Output: ▪ HTML ▪ Java ▪ JavaScript ▪ SQL ul type="none" HTML Java JavaScript SQL Output: HTML Java JavaScript SQL Note: The type attribute is not supported in HTML5, instead of type you can use CSS property of list-style- type. Following is the example to show the CSS property for ul tag.  The type attribute with CSS property HTML Java JavaScript SQL Output: HTML Description List or Definition List HTML Description list is also a list style which is supported by HTML and XHTML. It is also known as definition list where entries are listed like a dictionary or encyclopedia. The definition list is very appropriate when you want to present glossary, list of terms or other name-value list. HTML Description List or Definition List displays elements in definition form like in dictionary. The , and tags are used to define description list. The 3 HTML description list tags are given below: 1. tag defines the description list. 2. tag defines data term. 3. tag defines data definition (description).  HTML is a markup language Java is a programming language and platform JavaScript is a scripting language SQL is a query language Output: HTML is a markup language Java is a programming language and platform JavaScript is a scripting language SQL is a query language HTML Nested List A list within another list is termed as nested list. If you want a bullet list inside a numbered list then such type of list will called as nested list. Code: Nested list List of Indian States with thier capital  Delhi NewDelhi Haryana Chandigarh Gujarat Gandhinagar Rajasthan Jaipur Maharashtra Mumbai Uttarpradesh Lucknow Output: HTML Layout Elements: HTML has several semantic elements that define the different parts of a web page: - Defines a header for a document or a section - Defines a set of navigation links - Defines a section in a document - Defines an independent, self-contained content - Defines content aside from the content (like a sidebar) - Defines a footer for a document or a section - Defines additional details that the user can open and close on demand - Defines a heading for the element Description of various Layout elements HTML The element is used to create header section of web pages. The header contains the introductory content, heading element, logo or icon for the webpage, and authorship information. Example: First Webpage Welcome to My First Webpage HTML The elements is a container for the main block of navigation links. It can contain links for the same page or for other pages. Example: li{ display: inline-block; padding: 10px } Navgation Links link1 link2 link3  link4 HTML HTML elements represent a separate section of a web page which contains related element grouped together. It can contain: text, images, tables, videos, etc. Example: Page Section Introduction to HTML HTML is a markup language which is used for creating attractive web pages with the help of styling, and which looks in a nice format on a web browser. HTML The HTML tag is used to contain a self-contained article such as big story, huge article, etc. Example: Article Example  History of Computer Write your content here for the history of computer HTML HTML define aside content related to primary content. The content must be related to the primary content. It can function as side bar for the main content of web page. Example: Sidebar information This conatins information which will represent like a side bar for a webpage HTML HTML element defines the footer for that document or web page. It mostly contains information about author, copyright, other links, etc. Example: Footer Example © Copyright 2018-2020. HTML & HTML HTML element is used to add extra details about the web page and use can hide or show the details as per requirement. HTML element is used with the element in a web page. It is used as summary, captions about the content of element. Example: This is visible section: click to show other details This section only shows if user want to see it. HTML iframes: HTML Iframe is used to display a nested webpage (a webpage within a webpage). The HTML tag defines an inline frame, hence it is also called as an Inline frame. An HTML iframe embeds another document within the current HTML document in the rectangular region. The webpage content and iframe contents can interact with each other using JavaScript. Iframe Syntax An HTML iframe is defined with the tag: Here, "src" attribute specifies the web address (URL) of the inline frame page. HTML Iframes Use the CSS height and width properties to specify the size of the iframe: HTML Iframes Use the CSS height and width properties to specify the size of the iframe: Remove the border of iframe By default, an iframe contains a border around it. You can remove the border by using attribute and CSS border property. Example:  Remove the Iframe Border This iframe example doesn't have any border You can also change the size, color, style of the iframe's border. Example: Custom Iframe Border Iframe Target for a link You can set a target frame for a link by using iframe. Your specified target attribute of the link must refer to the name attribute of the iframe. Example: Iframe - Target for a Link DBUU.com The name of iframe and link target must have same value else link will not open as a frame. HTML Head The HTML element is used as a container for metadata (data about data). It is used between tag and tag. The head of an HTML document is a part whose content is not displayed in the browser on page loading. It just contains metadata about the HTML document which specifies data about the HTML document. An HTML head can contain lots of metadata information or can have very less or no information, it depends on our requirement. But head part has a crucial role an HTML document while creating a website. Following is a list of tags used in metadata: o o o o o HTML Element The HTML element is used to define the title of the document. It is used in all HTML/XHTML documents. The element must be placed between element, and one document can only have one title element. What does element do? 1. It defines a title in the browser tab. 2. It provides a title for the page when it is added to favorites. 3. It displays a title for the page in search engine results. Note: The title element must be specific about the document and its recommended length is 65 to 70 characters including spaces. Example: This Page Title The body's content is displayed in the browser window. The content of the title element is displayed in the browser tab, in favorites and in search engine resu lts.  HTML Element The HTML element is used to style the HTML page. The element can have CSS properties for that HTML page only. If we want to apply CSS for multiple pages then we should use separate CSS file. Example: This is Page Title body {background-color: pink;} h1 {color: red;} p {color: blue;} This is a Heading This is a paragraph. HTML Element The HTML element is used to link an external style sheet to your webpage. The element contains main two attributes which are "rel" and "href". The rel attribute indicates that it is a stylesheet, and href gives the path to that external file. Example: This is title Web-page with external CSS This is looking a cool page  The HTML Element The element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings. The metadata will not be displayed on the page, but is used by browsers (how to display content or reload page), by search engines (keywords), and other web services. HTML tag HTML tag defines the main content of an HTML document which displays on the browser. It can contain text content, paragraphs, headings, images, tables, links, videos, etc. The must be the second element after the tag or it should be placed between and tags. This tag is required for every HTML document and should only use once in the whole HTML document. Syntax Place your Content here........ Following are some specifications about the tag Display Inline Start tag/End tag Both start and End tag Usage Structural Example Body Tag  Example of body tag This paragraph is written between the body tag HTML Forms: HTML forms allow users to input data that can be sent to a server for processing. They are created with the `` element and can contain various input elements like text fields, radio buttons, checkboxes, and buttons. HTML Form An HTML form is a section of a document which contains controls such as text fields, password fields, checkboxes, radio buttons, submit button, menus etc. An HTML form facilitates the user to enter data that is to be sent to the server for processing such as name, email address, password, phone number, etc.. Why use HTML Form HTML forms are required if you want to collect some data from of the site visitor. For example: If a user want to purchase some items on internet, he/she must fill the form such as shipping address and credit/debit card details so that item can be sent to the given address. ```html Name: Email: ``` - `action` specifies where the form data is sent. - `method` defines how the data is sent (e.g., `post` or `get`). HTML Form Tags Let's see the list of HTML 5 form tags. Tag Description It defines an HTML form to enter inputs by the used side. It defines an input control. It defines a multi-line input control. It defines a label for an input element. It groups the related element in a form. It defines a caption for a element. It defines a drop-down list. It defines a group of related options in a drop-down list. It defines an option in a drop-down list. It defines a clickable button. HTML element The HTML element provide a document section to take input from user. It provides various interactive controls for submitting information to web server such as text field, text area, password field, etc. Note: The element does not itself create a form but it is container to contain all required form elements, such as , , etc. Syntax: 1. 2. //Form elements  3. Form Attributes and Elements: - `input` elements are used to create form fields like text boxes, radio buttons, and checkboxes. - `` elements provide a label for form fields. - `` is used for multi-line text input. - `` creates a dropdown menu. - `` creates clickable buttons within forms. HTML element The HTML element is fundamental form element. It is used to create form fields, to take input from user. We can apply different input filed to gather different information form user. Following is the example to show the simple text input. Example: Enter your name Output: HTML TextField Control The type="text" attribute of input tag creates textfield control also known as single line textfield control. The name attribute is optional, but it is required for the server side component such as JSP, ASP, PHP etc. First Name: Last Name: Output: Note: If you will omit 'name' attribute then the text filed input will not be submitted to server. HTML tag in form The tag in HTML is used to insert multiple-line text in a form. The size of can be specify either using "rows" or "cols" attribute or by CSS. Example: 1. 2. 3. 4. Form in HTML 5. 6. 7. 8. Enter your address: 9. 10. 11. 12. Output: Label Tag in Form It is considered better to have label in form. As it makes the code parser/browser/user friendly. If you click on the label tag, it will focus on the text control. To do so, you need to have for attribute in label tag that must be same as id attribute of input tag. NOTE: It is good to use tag with form, although it is optional but if you will use it, then it will provide a focus when you tap or click on label tag. It is more worthy with touchscreens. 1. 2. First Name: 3. 4. Last Name: 5. 6. Output: HTML Password Field Control The password is not visible to the user in password field control. 1. 2. Password: 3. 4. Output: HTML 5 Email Field Control The email field in new in HTML 5. It validates the text for correct email address. You must use @ and. in this field. 1. 2. Email: 3. 4. It will display in browser like below: Note: If we will not enter the correct email, it will display error like: Radio Button Control The radio button is used to select one option from multiple options. It is used for selection of gender, quiz questions etc. If you use one name for all the radio buttons, only one radio button can be selected at a time. Using radio buttons for multiple options, you can only choose a single option at a time. 1. 2. Gender: 3. Male 4. Female 5. Checkbox Control The checkbox control is used to check multiple options from given checkboxes.  Hobby: Cricket Football Hockey Submit button control HTML are used to add a submit button on web page. When user clicks on submit button, then form get submit to the server. Syntax: 1. The type = submit , specifying that it is a submit button The value attribute can be anything which we write on button on web page. The name attribute can be omit here. Example: Enter name Enter Password Output: Form Validation: Form validation ensures that user-submitted data meets certain criteria before it's sent to the server. It can be done using JavaScript or HTML5 attributes like `required`, `minlength`, `maxlength`, and more. For example, to make a text field required: ```html ``` This ensures that users must fill in the "name" field before submitting the form. //how to write html code for registration form Registration Form Registration Form Name: Email:  Password: UNIT 3: CSS Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independently of the HTML that makes up each web page. It describes how a webpage should look: it prescribes colours, fonts, spacing, and much more. In short, you can make your website look however you want. CSS lets developers and designers define how it behaves, including how elements are positioned in the browser. While HTML uses tags, CSS uses rulesets. CSS is easy to learn and understand, but it provides powerful control over the presentation of an HTML document. Why CSS? CSS saves time: You can write CSS once and reuse the same sheet in multiple HTML pages. Easy Maintenance: To make a global change simply change the style, and all elements in all the webpages will be updated automatically. Search Engines: CSS is considered a clean coding technique, which means search engines won’t have to struggle to “read” its content. CSS Syntax: CSS comprises style rules that are interpreted by the browser and then applied to the corresponding elements in your document. A style rule set consists of a selector and declaration block. Selector: A selector in CSS is used to target and select specific HTML elements to apply styles to. Declaration: A declaration in CSS is a combination of a property and its corresponding value. Selector -- h1 Declaration -- {color:blue;font size:12px;} The selector points to the HTML element you want to style. The declaration block contains one or more declarations separated by semicolons. Each declaration includes a CSS property name and a value, separated by a colon. For example : selector { property1: value1; property2: value2; } CSS declaration always ends with a semicolon, and declaration blocks are surrounded by curly braces. Here is a more specific example: In the following example all p elements will be centre-aligned, with a blue text colour: p{ color: blue; text-align: center; } Example div { width: 600px;  height: 200px; padding: 10px; background: beige; } h1 { color: olivedrab; border-bottom: 1px dotted darkgreen; } p{ font-family: sans-serif; color: orange; } My first Page This is a basic web page. COMMENTS The Comments in CSS, are the statements in your code that are ignored by the compiler and are not executed. Comments are used to explain the code. They make the program more readable and understandable. Syntax: CSS Backgrounds CSS background-color The background-color property sets the background color of an element. The background of an element is the total size of the element, including padding and border (but not the margin). Tip: Use a background color and a text color that makes the text easy to read. Opacity / Transparency The opacity property specifies the opacity/transparency of an element. It can take a value from 0.0 - 1.0. The lower value, the more transparent: div { background-color: red; }.first { opacity: 0.1; }.second { opacity: 0.3; }.third { opacity: 0.6; } Transparent Boxes When using the opacity property to add transparency to the background of an element, all of its child elements become transparent as well. This can make the text inside a fully transparent element hard to read: opacity 0.1 opacity 0.3  opacity 0.6 opacity 1 (default) div { background: rgb(0, 128, 0); } div.first { background: rgba(0, 128, 0, 0.1); } div.second { background: rgba(0, 128, 0, 0.3); } div.third { background: rgba(0, 128, 0, 0.6); } Transparent Boxes 2 Result with opacity: 10% opacity 30% opacity 60% opacity opacity 1 Result with rgba(): 10% opacity 30% opacity  60% opacity default Notice how the text gets transparent as well as the background color when using the opacity property. CSS background-image body, html { height: 100%; margin: 0; }.bg { background-image: url("img_girl.jpg"); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } This example creates a full page background image. Try to resize the browser window to see how it always will cover the full screen (when scrolled to top), and that it scales nicely on all screen sizes. CSS background-size Property #example1 { border: 2px solid black; padding: 25px; background: url(mountain.jpg); background-repeat: no-repeat; background-size: auto; } #example2 { border: 2px solid black; padding: 25px; background: url(mountain.jpg); background-repeat: no-repeat; background-size: 300px 100px; } background-size: auto (default): Hello World The background image is displayed in its original size. background-size: 300px 100px: Hello World Here, the background image is set to 300px wide and 100px high.  div { background-color: lightblue; border: solid black 1px; width: 100px; block-size: 200px; } The block-size Property Hello CSS Border h1 { border: 5px solid red; } h2 { border: 4px dotted blue; } div { border: double; } A heading with a solid red border A heading with a dotted blue border A div element with a double border.  div { background-color: lightgreen; inline-size: 70%; border-block-width: 10px; } #example1 { border-block-style: solid; border-block-color: pink; } #example2 { border-block-style: solid; border-block-color: pink lightblue; } border-block-color: pink: The border-block-color property defines the color of the borders in the block direction. border-block-color: pink lightblue: If two values are set; the first one is for the start in the block direction, and the second one is for the end in the block direction. CSS Margins The CSS margin properties are used to create space around elements, outside of any defined borders. With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left). Margin - Individual Sides CSS has properties for specifying the margin for each side of an element: margin-top margin-right margin-bottom margin-left All the margin properties can have the following values: auto - the browser calculates the margin length - specifies a margin in px, pt, cm, etc. % - specifies a margin in % of the width of the containing element inherit - specifies that the margin should be inherited from the parent element Tip: Negative values are allowed. Example Set different margins for all four sides of a element: div { border: 1px solid black; margin-top: 100px; margin-bottom: 100px; margin-right: 150px; margin-left: 80px; background-color: lightblue; } Using individual margin properties This div element has a top margin of 100px, a right margin of 150px, a bottom margin of 100px, and a left margin of 80px. Margin - Shorthand Property To shorten the code, it is possible to specify all the margin properties in one property. The margin property is a shorthand property for the following individual margin properties: margin-top  margin-right margin-bottom margin-left So, here is how it works: If the margin property has four values: margin: 25px 50px 75px 100px; o top margin is 25px o right margin is 50px o bottom margin is 75px o left margin is 100px Example Use the margin shorthand property with four values: p{ margin: 25px 50px 75px 100px; } If the margin property has three values: margin: 25px 50px 75px; o top margin is 25px o right and left margins are 50px o bottom margin is 75px Example Use the margin shorthand property with three values: p{ margin: 25px 50px 75px; } If the margin property has two values: margin: 25px 50px; o top and bottom margins are 25px o right and left margins are 50px Example Use the margin shorthand property with two values: p{ margin: 25px 50px; } If the margin property has one value: margin: 25px; o all four margins are 25px Example Use the margin shorthand property with one value: p{ margin: 25px; } div { width: 300px; margin: auto; border: 1px solid red; } Use of margin: auto You can set the margin property to auto to horizontally center the element within its container. The element will then take up the specified width, and the remaining space will be split equally between the left and right margins: This div will be horizontally centered because it has margin: auto; CSS Padding The CSS padding properties are used to generate space around an element's content, inside of any defined borders. With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left). Padding - Individual Sides CSS has properties for specifying the padding for each side of an element: padding-top padding-right padding-bottom padding-left All the padding properties can have the following values:  length - specifies a padding in px, pt, cm, etc. % - specifies a padding in % of the width of the containing element inherit - specifies that the padding should be inherited from the parent element Note: Negative values are not allowed. Example Set different padding for all four sides of a element: div { border: 1px solid black; background-color: lightblue; padding-top: 50px; padding-right: 30px; padding-bottom: 50px; padding-left: 80px; } Using individual padding properties This div element has a top padding of 50px, a right padding of 30px, a bottom padding of 50px, and a left padding of 80px. Padding - Shorthand Property To shorten the code, it is possible to specify all the padding properties in one property. The padding property is a shorthand property for the following individual padding properties: padding-top padding-right padding-bottom padding-left So, here is how it works: If the padding property has four values: padding: 25px 50px 75px 100px; o top padding is 25px o right padding is 50px o bottom padding is 75px o left padding is 100px Example Use the padding shorthand property with four values: div { padding: 25px 50px 75px 100px; } If the padding property has three values: padding: 25px 50px 75px; o top padding is 25px o right and left paddings are 50px o bottom padding is 75px Example Use the padding shorthand property with three values: div { padding: 25px 50px 75px; } If the padding property has two values: padding: 25px 50px; o top and bottom paddings are 25px o right and left paddings are 50px Example Use the padding shorthand property with two values: div { padding: 25px 50px; } If the padding property has one value:  padding: 25px; o all four paddings are 25px Example Use the padding shorthand property with one value: div { padding: 25px; } CSS Setting height and width The height and width properties are used to set the height and width of an element. The height and width properties do not include padding, borders, or margins. It sets the height/width of the area inside the padding, border, and margin of the element. CSS height and width Values The height and width properties may have the following values: auto - This is default. The browser calculates the height and width length - Defines the height/width in px, cm, etc. % - Defines the height/width in percent of the containing block initial - Sets the height/width to its default value inherit - The height/width will be inherited from its parent value div { height: 200px; width: 50%; background-color: powderblue; } Set the height and width of an element This div element has a height of 200px and a width of 50%. The CSS Box Model In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content. The image below illustrates the box model: Explanation of the different parts: Content - The content of the box, where text and images appear Padding - Clears an area around the content. The padding is transparent Border - A border that goes around the padding and content Margin - Clears an area outside the border. The margin is transparent The box model allows us to add a border around elements, and to define space between elements. Example Demonstration of the box model: div { background-color: lightgrey; width: 300px; border: 15px solid red; padding: 50px; margin: 20px; } Demonstrating the Box Model The CSS box model is essentially a box that wraps around every HTML element. It consists of: borders, padding, margins, and the actual content. This text is the content of the box. We have added a 50px padding, 20px margin and a 15px green border. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. div { width: 320px;  padding: 10px; border: 5px solid gray; margin: 0; } Calculate the total width: The picture above is 350px wide. The total width of this element is also 350px. CSS Outline Style The outline-style property specifies the style of the outline, and can have one of the following values: dotted - Defines a dotted outline dashed - Defines a dashed outline solid - Defines a solid outline double - Defines a double outline groove - Defines a 3D grooved outline ridge - Defines a 3D ridged outline inset - Defines a 3D inset outline outset - Defines a 3D outset outline none - Defines no outline hidden - Defines a hidden outline The following example shows the different outline-style values: p {outline-color:red;} p.dotted {outline-style: dotted;} p.dashed {outline-style: dashed;} p.solid {outline-style: solid;} p.double {outline-style: double;} p.groove {outline-style: groove;} p.ridge {outline-style: ridge;} p.inset {outline-style: inset;} p.outset {outline-style: outset;} The outline-style Property A dotted outline A dashed outline A solid outline A double outline A groove outline. The effect depends on the outline-color value. A ridge outline. The effect depends on the outline-color value. An inset outline. The effect depends on the outline-color value. An outset outline. The effect depends on the outline-color value. p.ex1 { border: 1px solid black; outline-style: solid; outline-color: red; outline-width: thin; } p.ex2 { border: 1px solid black; outline-style: solid; outline-color: red; outline-width: medium; } p.ex3 { border: 1px solid black; outline-style: solid; outline-color: red; outline-width: thick; } p.ex4 { border: 1px solid black; outline-style: solid; outline-color: red; outline-width: 4px; } The outline-width Property A thin outline. A medium outline. A thick outline. A 4px thick outline. p.ex1 { border: 2px solid black; outline-style: solid; outline-color: red; } p.ex2 { border: 2px solid black;  outline-style: dotted; outline-color: blue; } p.ex3 { border: 2px solid black; outline-style: outset; outline-color: grey; } The outline-color Property The outline-color property is used to set the color of the outline. A solid red outline. A dotted blue outline. An outset grey outline. CSS TEXT Text Color The color property is used to set the color of the text. The color is specified by: a color name - like "red" a HEX value - like "#ff0000" an RGB value - like "rgb(255,0,0)" Look at CSS Color Values for a complete list of possible color values. The default text color for a page is defined in the body selector. body { color: blue; } h1 { color: green; } This is heading 1 This is an ordinary paragraph. Notice that this text is blue. The default text color for a page is defined in the body selector. Another paragraph.  body { background-color: lightgrey; color: blue; } h1 { background-color: black; color: white; } div { background-color: blue; color: white; } This is a Heading This page has a grey background color and a blue text. This is a div. Text Alignment The text-align property is used to set the horizontal alignment of a text. A text can be left or right aligned, centered, or justified. The following example shows center aligned, and left and right aligned text (left alignment is default if text direction is left-to-right, and right alignment is default if text direction is right-to-left): Example h1 { text-align: center; } h2 { text-align: left; } h3 { text-align: right; } Heading 1 (center) Heading 2 (left) Heading 3 (right) The three headings above are aligned center, left and right. Add a Decoration Line to Text The text-decoration-line property is used to add a decoration line to text. Tip: You can combine more than one value, like overline and underline to display lines both over and under a text. h1 { text-decoration: overline; } h2 { text-decoration: line-through; } h3 { text-decoration: underline; } p.ex { text-decoration: overline underline; }  Overline text decoration Line-through text decoration Underline text decoration Overline and underline text decoration. Note: It is not recommended to underline text that is not a link, as this often confuses the reader. h1 { text-decoration-line: overline; text-decoration-color: red; } h2 { text-decoration-line: line-through; text-decoration-color: blue; } h3 { text-decoration-line: underline; text-decoration-color: green; } p{ text-decoration-line: overline underline; text-decoration-color: purple; } Overline text decoration Line-through text decoration Underline text decoration Overline and underline text decoration. h1 { text-decoration-line: underline; text-decoration-style: solid; } h2 { text-decoration-line: underline; text-decoration-style: double; } h3 { text-decoration-line: underline; text-decoration-style: dotted; } p.ex1 { text-decoration-line: underline; text-decoration-style: dashed; } p.ex2 { text-decoration-line: underline; text-decoration-style: wavy; } p.ex3 { text-decoration-line: underline; text-decoration-color: red; text-decoration-style: wavy; } Heading 1 Heading 2 Heading 3 A paragraph. Another paragraph. Another paragraph. All links in HTML are underlined by default. Sometimes you see that links are styled with no underline. The text-decoration: none; is used to remove the underline from links, like this: a{ text-decoration: none; } Using text-decoration: none A link with no underline: W3Schools.com Text Transformation The text-transform property is used to specify uppercase and lowercase letters in a text. It can be used to turn everything into uppercase or lowercase letters, or capitalize the first letter of each word:  p.uppercase { text-transform: uppercase; } p.lowercase { text-transform: lowercase; } p.capitalize { text-transform: capitalize; } Using the text-transform property This text is transformed to uppercase. This text is transformed to lowercase. This text is capitalized. Using the text-transform property THIS TEXT IS TRANSFORMED TO UPPERCASE. this text is transformed to lowercase. This Text Is Capitalized. Text Spacing In this chapter you will learn about the following properties: text-indent letter-spacing line-height word-spacing white-space Text Indentation The text-indent property is used to specify the indentation of the first line of a text: Example p{ text-indent: 50px; } Using text-indent In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.' Using text-indent In my younger and more vulnerable years my father gave me some advice that I've been turning over in my mind ever since. 'Whenever you feel like criticizing anyone,' he told me, 'just remember that all the people in this world haven't had the advantages that you've had.' Letter Spacing The letter-spacing property is used to specify the space between the characters in a text. The following example demonstrates how to increase or decrease the space between characters: Example h2 { letter-spacing: 5px; } h3 { letter-spacing: -2px; } Using letter-spacing  This is heading 1 This is heading 2 Using letter-spacing This is heading 1 Thisisheading2 Line Height The line-height property is used to specify the space between lines: p.small { line-height: 0.7; } p.big { line-height: 1.8; } Using line-height This is a paragraph with a standard line-height. The default line height in most browsers is about 110% to 120%. This is a paragraph with a smaller line-height. This is a paragraph with a smaller line-height. This i