JavaScript Programming Basics PDF - Manipal University

Introduction to Web Programming Manipal University Jaipur (MUJ) BACHELOR OF COMPUTER APPLICATIONS SEMESTER 1 INTRODUCTION TO WEB PROGRAMMING Unit 1: Introduction to HTML...

Introduction to Web Programming Manipal University Jaipur (MUJ) BACHELOR OF COMPUTER APPLICATIONS SEMESTER 1 INTRODUCTION TO WEB PROGRAMMING Unit 1: Introduction to HTML 1 Introduction to Web Programming Manipal University Jaipur (MUJ) Unit 1 Introduction to HTML Table of Contents SL Fig No / Table SAQ / Topic Page No No / Graph Activity 1 Introduction - - 3 1.1 Learning objectives - - 2 Definition - - 4 3 Features of web programming 1 - 5-9 4 Uses of HTML 2 - 9-12 5 Versions of HTML 3 - 12-17 6 HTML syntax 4, 5 - 17-21 7 Head and Body Sections of HTML - - 22-26 8 Summary - - 27 9 Questions - 1 28-29 10 Answers - - 30 Unit 1: Introduction to HTML 2 Introduction to Web Programming Manipal University Jaipur (MUJ) 1. INTRODUCTION The World Wide Web (WWW or Web) functions as an information realm where documents and diverse web resources are designated by Uniform Resource Identifiers (URIs), interconnected through hypertext links, and accessible via the Internet. This entity, colloquially known as the Web, encompasses hypertext documents termed web pages, primarily structured using Hypertext Markup Language (HTML). Webpages often incorporate links to multimedia elements like images, videos, and software, displayed coherently through web browser applications on users' computers. Embedded hyperlinks facilitate seamless navigation between web pages, while a collection of related web pages under a shared domain or theme constitutes a website. In contrast, the Internet constitutes an expansive network of computers with varying forms and functions, connected via the Transmission Control Protocol/Internet Protocol (TCP/IP), a fundamental protocol allowing universal communication. TCP/IP, established in 1982, underpins direct program-to- program communication across computers, though higher-level protocols typically operate over it for specific tasks. 1.1 Learning Objectives At the end of this topic, the students will be able to: ❖ Identify the key features of HTML and describe its role in web programming. ❖ Describe the evolution of HTML versions from its early forms to the latest standards, explaining how each version introduced new features and improvements. ❖ Compare and contrast the features and capabilities of different HTML versions, analyzing how changes in syntax and elements have enhanced the functionality and user experience of web pages. ❖ Create a simple HTML webpage using appropriate and tags, integrating basic content such as headings, paragraphs, and images, while ensuring the correct tag nesting and structure. ❖ Critically assess the significance of well-structured HTML documents for effective web programming. Unit 1: Introduction to HTML 3 Introduction to Web Programming Manipal University Jaipur (MUJ) 2. DEFINATIONS Web Programming: Web programming is the art and science of creating interactive and dynamic websites and web applications. It involves the use of programming languages, frameworks, and tools to build functionalities that can be accessed over the Internet. This process includes not only designing the visual elements of a website but also implementing the underlying logic that makes it work seamlessly. Web programming encompasses both frontend development, which deals with the user interface and how content is presented, and backend development, which involves managing server-side operations, databases, user authentication, and more. By combining various programming languages like HTML, CSS, JavaScript, Python, PHP, Ruby, and others, web programmers create digital experiences that engage users, provide information, facilitate transactions, and enable online services. HTML (Hypertext Markup Language): HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages. Hypertext refers to the way in which Web pages (HTML documents) are linked together. Thus, the link available on a webpage is called Hypertext. As its name suggests, HTML is a Markup Language which means you use HTML to simply "mark-up" a text document with tags that tell a Web browser how to structure it to display. Originally, HTML was developed with the intent of defining the structure of documents like headings, paragraphs, lists, and so forth to facilitate the sharing of scientific information between researchers. Now, HTML is being widely used to format web pages with the help of different tags available in HTML language. It uses a system of predefined tags and elements to structure and format information on web pages. When a web browser encounters an HTML document, it interprets the tags to render the content properly on the user's screen. HTML provides the basic structure and organization for a webpage, defining the hierarchy of information and how different elements relate to each other. While HTML itself doesn't handle complex interactivity or visual styling, it serves as the foundation upon which other technologies, such as CSS for styling and JavaScript for interactivity, can build. This modular approach allows for the creation of rich, responsive, and interactive web experiences. Unit 1: Introduction to HTML 4 Introduction to Web Programming Manipal University Jaipur (MUJ) 3. FEATURES OF WEB PROGRAMMING Web programming involves a variety of features that contribute to creating dynamic, interactive, and functional websites and web applications. Here are some key features of web programming: Fig 1. 1 3.1 Interactivity: Interactivity in web programming involves creating engaging user experiences by allowing users to interact with website elements. A prime example is a fitness app that lets users input their workout routines and track progress. Through web programming, users can click buttons to log exercises, view charts showcasing their fitness journey, and receive instant feedback on their achievements. Interactivity enhances user engagement, making websites more appealing and user-focused. Example: An online language learning platform lets users practice vocabulary. Through web programming, users can input translations, and the platform provides instant feedback, indicating if their answers are correct or not. Unit 1: Introduction to HTML 5 Introduction to Web Programming Manipal University Jaipur (MUJ) 3.2 Dynamic Content: Dynamic content employs web programming to display information that changes based on user actions or external sources. Consider a weather website that provides real-time weather updates. Using web programming, the site can pull data from weather APIs and display current conditions, forecasts, and radar images. As users input different locations, the content updates dynamically, offering relevant weather information. Dynamic content keeps users engaged with fresh and personalized information. Example: A social media feed displays posts from friends. As users scroll, new posts are dynamically loaded, keeping the feed fresh without requiring users to refresh the page. 3.3 Data Storage and Retrieval: Data storage and retrieval involve web programming to manage information on websites. An online booking system exemplifies this. With web programming, users can reserve hotel rooms or book appointments. The system stores these reservations in a database, and web programming ensures that users can retrieve their booking details, while administrators can manage available slots and reservations efficiently. Example: An event booking website allows users to register for workshops. Web programming stores these registrations in a database, allowing organizers to track attendance and manage resources. 3.4 Server-Side Processing: Server-side processing is a vital aspect of web programming that executes code on the server before presenting content to users. For instance, consider an e-commerce site where users add items to their cart. Through web programming, the server calculates the total cost, applies discounts, and handles payment processing securely. Server-side processing ensures accurate and secure transactions, making e-commerce operations seamless. Example: A travel booking website processes hotel reservations. After users input travel dates, web programming on the server side checks room availability, calculates total costs, and confirms the reservation. 3.5 User Authentication and Security: User authentication, supported by web programming, ensures that only authorized users access specific parts of websites. Banking apps exemplify this. When users log in, web programming verifies their credentials against a secure database. If authenticated, users can access their accounts and perform Unit 1: Introduction to HTML 6 Introduction to Web Programming Manipal University Jaipur (MUJ) transactions. Web programming's encryption and authentication layers guarantee user data protection. Example: A banking app uses web programming to enable secure logins. Users provide credentials, and the app's web programming verifies them against stored data before granting access to account information. 3.6 API Integration: API integration in web programming enables websites to access external services. For instance, integrating a mapping API like Google Maps allows users to find directions. Web programming uses API calls to retrieve mapping data, display routes, and offer interactive navigation. API integration extends website functionality by incorporating external features. Example: A weather app integrates a weather API to display forecasts. Web programming makes API requests to fetch data, and users receive current weather conditions and future predictions. 3.7 Content Management: Content management systems (CMS) simplify content creation using web programming. WordPress is a prominent example. Built with web programming, users can create and edit content without coding. Web programming empowers CMS interfaces, enabling users to publish articles, upload media, and manage site structure seamlessly. Example: An online magazine built using web programming lets editors publish articles, images, and videos. The web programming backend organizes and displays content in a user- friendly way. 3.8 Responsive Design: Responsive design, driven by web programming, adapts websites to different screen sizes. For instance, an online magazine ensures articles read well on both desktops and smartphones. Web programming's CSS media queries automatically adjust layout and font sizes, delivering a user-friendly experience on any device. Example: A restaurant's website, created with web programming, adjusts its layout for mobile users. Menus stack vertically, images resize, and buttons become touch-friendly, ensuring a seamless mobile experience. Unit 1: Introduction to HTML 7 Introduction to Web Programming Manipal University Jaipur (MUJ) 3.9 Cross-Browser Compatibility: Cross-browser compatibility ensures websites function consistently across various browsers. Web programming uses standardized code to achieve this. Imagine an online store that works on Chrome, Firefox, and Safari. Web programming ensures elements like buttons and forms render correctly on all browsers, irrespective of differences in rendering engines. Example: An e-commerce site, designed through web programming, works consistently across browsers. Users can browse products, view details, and make purchases without encountering rendering issues. 3.10 Collaboration and User Interaction: Web programming fosters collaboration by enabling user interactions. Think of a project management tool where team members edit documents simultaneously. Through web programming, changes made by one user update for others in real time. Collaboration is enhanced, making web applications more efficient and cooperative. Example: A collaborative document editing tool allows multiple users to edit a file simultaneously. Web programming syncs changes in real time, enabling efficient teamwork. 3.11 E-commerce Functionality: E-commerce functionality, enabled by web programming, offers features like online shopping. Consider an electronics store where users browse products, add items to carts, and check out. Web programming ensures seamless navigation, dynamic cart updates, secure payment processing, and order tracking, providing a complete shopping experience. Example: An online fashion store utilizes web programming to showcase products, enabling users to filter by size and color, add items to their cart, and complete purchases securely. 3.12 Scalability: Scalability in web programming involves building websites to handle increased traffic. Social media platforms illustrate this. By using efficient coding practices and scalable server architecture, web programming ensures platforms can accommodate millions of users concurrently, maintaining performance and user experience. Unit 1: Introduction to HTML 8 Introduction to Web Programming Manipal University Jaipur (MUJ) Example: A social networking platform built with web programming accommodates a growing number of users. Efficient coding and scalable server architecture ensure smooth interactions for users even as the platform scales. 4. USES OF HTML HTML (Hypertext Markup Language) is a fundamental language used in web development to structure and format content on web pages. It provides the basic building blocks for creating websites and web applications. Here are some of the key uses of HTML: Development Internet Responsive of web pages Navigation Design Creation of Offline Web Innovative web Applications Features documents Enhancing the Website's Potential Fig 1. 2 4.1 Development of Web Pages: Most of the websites we encounter online are constructed using HTML code in some manner. As previously discussed, HTML is utilized to organize web pages in diverse ways. This involves the incorporation of distinct sections, the inclusion of tables, and the segmentation of content within the web page. The advent of Semantic HTML elements in HTML5 has significantly simplified the process for developers to comprehend and modify their code. Beyond the fundamental structural components, HTML allows us to design a variety of web pages, such as landing pages, parallax-scrolling pages, and grid-based layouts. The collaboration of CSS and JavaScript enhances the manipulation and styling of HTML elements, leading to more streamlined and efficient development processes. Unit 1: Introduction to HTML 9 Introduction to Web Programming Manipal University Jaipur (MUJ) 4.2 Internet Navigation: HTML plays a critical role in facilitating the movement between web pages. This is achieved through the utilization of the hypertext concept, enabling seamless linking. From the perspective of internet users, a simple action like clicking on a text guides them to the subsequent page. HTML streamlines this navigation process by incorporating hyperlinks via anchor tags. Click here to open! Such navigation practices have the potential to bolster website traffic by attracting more visitors. This, in turn, enhances user engagement, driving heightened activity on the website. Moreover, it assists internet users in comprehending the organization and structure of content, contributing to a more user-friendly experience. 4.3 Responsive Design: An essential aspect of a web page is its ability to interact with users and adapt responsively. HTML is the driving force behind this capability. Unlike static web pages, responsive designs possess a broader accessibility, reaching users across various devices. This adaptability involves automatic resizing, concealment, reduction, or enlargement of a website's layout to ensure optimal display on diverse platforms—ranging from desktops and tablets to smartphones. Achieving responsive web design is facilitated by the collaborative use of HTML and CSS.To establish a responsive website, the tag is incorporated across all pages. Furthermore, images can be made responsive through the utilization of the CSS width property. Text content can also be rendered responsive by employing the "VW" unit, which signifies "viewport width." 4.4 Creation of Web Documents: HTML stands as the primary tool for crafting web documents across the internet. In the process of generating web documents, the Document Object Model (DOM) assumes a pivotal role. Employed in tandem with HTML, the DOM facilitates the structural composition of these documents. This involves both the utilization of HTML tags for formatting and the DOM model for organization. The initiation of an HTML web document commences with the declaration. Following this, the customary opening and closing HTML tags encapsulate the document's content. The structural blueprint of the HTML DOM model mirrors a hierarchical arrangement akin to a tree, with the root element denoted by. This root element further bifurcates into the components of "head" and "body."The "head" section encapsulates essential metadata, often including the title of the page or document. Conversely, the "body" section houses the core content, constructed by integrating diverse elements such as headings, paragraphs, line Unit 1: Introduction to HTML 10 Introduction to Web Programming Manipal University Jaipur (MUJ) breaks, and anchor links, among others. As this structural hierarchy extends, individual elements carry attributes that contribute to their distinct functionalities. For example, the anchor tag boasts an attribute named "href."In summary, HTML serves as the foundation for constructing web documents, and the DOM model, working in tandem with HTML, 4.5 Offline Web Applications: Conventionally, internet connectivity has been a prerequisite for accessing web pages. However, contemporary advancements now empower web applications to be accessible even in the absence of an active online connection. This is achieved through the utilization of HTML, which facilitates data access in offline scenarios. The mechanism hinges on the integration of a cache manifest file, guiding the storage of pertinent data for offline use.Consider circumstances where one ventures beyond the coverage realm of their Internet Service Provider. In such scenarios, the established internet connection becomes unavailable. To counter this, users furnish a manifest detailing the essential files imperative for the functioning of a web application in offline mode. Consequently, the user's web browser captures a duplicate set of these files, thereby enabling offline utilization.In situations where internet access becomes limited or non- existent, this approach guarantees that users can continue to engage with web applications seamlessly, fostering enhanced accessibility and utility orchestrates the arrangement and formatting of content within these documents. 4.6 Innovative Features: The term "cutting-edge" frequently denotes groundbreaking technologies and the most recent strides in technological progress. As we've explored thus far, HTML5 has ushered in a multitude of alterations and innovations in the realm of web development. Current trends in pioneering web design encompass dynamic HTML headers, embeddable infographics, creative incorporation of illustrations through CSS, call-to-action elements activated by scrolling, user accolades, and more. Notably, Google Chrome stands out as a prime browser choice for leveraging HTML's latest array of standards and APIs. This browser facilitates the dynamic downloading of requisite packages by libraries whenever they are needed, enhancing efficiency and accessibility. In essence, these innovative features signify a progression toward transformative technologies and design trends, with HTML5 playing a pivotal role in the contemporary landscape of web development. Unit 1: Introduction to HTML 11 Introduction to Web Programming Manipal University Jaipur (MUJ) 4.7 Enhancing the Website's Potential: HTML offers the avenue to leverage Native APIs in order to enhance the website's capabilities. In conjunction with the array of features brought forth by HTML5, a plethora of tools and functionalities have emerged that were once unforeseen. APIs such as visibility, full screen utilization, and media capture bring the potential to elevate application experiences. These APIs serve as a means to carry out background tasks autonomously, separate from other user interface scripts, thereby preserving the page's performance integrity. An integral function of these APIs revolves around the creation of personalized controls and functionalities, enabling tailored enhancements that augment the overall user experience. 5. VERSIONS OF HTML Consider HTML as the fundamental building blocks of web pages. It's similar to a language complete with its own syntax and regulations, which must be adhered to for the purposeful creation of websites. To illustrate, picture crafting a digital Christmas invitation with details like the event, date, and venue. You aspire to emphasize the event in a larger font while rendering the date and venue in a smaller font. Within HTML, various tags come into play to define distinct segments of a web page. These tags envelop your content, bestowing it with significance similar to specialized labels. For instance, for the main occasion header, you employ the heading tag:. Subsequently, for the date and venue, you employ the smaller heading tag and the paragraph tag respectivelly.Throughout its evolution, HTML has undergone numerous advancements. This discussion aims to explore the various iterations of HTML that have unfolded over the years. Unit 1: Introduction to HTML 12 Introduction to Web Programming Manipal University Jaipur (MUJ) Fig 1. 3 5.1 HTML 1.0 Introduction: Marking one of the earliest instances of HTML, HTML 1.0 emerged in 1993, setting the foundational groundwork for constructing web pages. Key attributes included: Structural Elements: HTML 1.0 introduced elements enabling the addition of structure to web page content. These elements encompassed headings, lists, paragraphs, and images. Simplicity Compared: HTML 1.0 was notably less intricate when compared to subsequent HTML iterations. It lacked styling options and the capacity to control content presentation in web browsers. Furthermore, it provided no support for table integration. Font Incorporation: Though HTML 1.0 introduced font utilization, its scope was limited. The ability to alter text style or size remained minimal. Despite its modest beginnings, HTML 1.0 catalyzed the realm of web development, with its features progressively evolving through subsequent updates. 5.2 HTML 2.0 Advancements: The release of HTML 2.0 in 1995 brought forth substantial improvements over its predecessor. Noteworthy enhancements encompassed: Standardization of HTML: HTML 2.0 transformed HTML into a standardized system by instituting universal rules and conventions binding all web browsers. This conformity ensured consistent rendering of web content across different platforms. Unit 1: Introduction to HTML 13 Introduction to Web Programming Manipal University Jaipur (MUJ) Introduction of Forms: A pivotal addition was the introduction of forms, enabling users to input data on web pages. Although rudimentary, these forms featured text boxes and buttons, serving as a rudimentary gateway for user interaction. Inclusion of Tables: HTML 2.0 unveiled the tag, facilitating the creation of tabular data arrangements on web pages. This marked a significant step towards enhanced data organization. Formation of W3C: HTML 2.0's era saw the emergence of individual browser vendors introducing their own tags. This led to inconsistencies in rendering across browsers. To mitigate this, the World Wide Web Consortium (W3C) was established, aimed at fostering standardization. This initiative bolstered consistent tag interpretation by web browsers. In sum, HTML 2.0's release in 1995 ushered in notable advancements, spanning from standardization and user interaction to data organization and the establishment of a cohesive industry consortium. 5.3 HTML 3.2 Advancements: In the continuum of HTML development, HTML 3.2 emerged as a significant successor to HTML 2.0, evolving in 1997. The revised set of features incorporated in HTML 3.2 encompassed: Enhanced Form Elements: HTML 3.2 brought forth enhanced mechanisms for crafting interactive forms on websites. Developers gained the capacity to create forms that offered heightened interactivity and dynamism, enhancing user engagement and experience. CSS Incorporation: A pivotal inclusion within HTML 3.2 was the integration of CSS (Cascading Style Sheets) support. CSS empowered designers to enhance the visual appeal of web pages by styling and personalizing HTML elements, resulting in refined and customized aesthetics. Improved Image Handling: HTML 3.2 introduced streamlined image management. This encompassed finer control over image dimensions, alignment, and the provision of descriptive text, contributing to improved image presentation and integration. Expanded Character Set: HTML 3.2 broadened the spectrum of available characters for web pages. It introduced special symbols and international characters, enhancing the diversity and inclusivity of content presentation. Unit 1: Introduction to HTML 14 Introduction to Web Programming Manipal University Jaipur (MUJ) In essence, HTML 3.2, developed in 1997, introduced a spectrum of advancements, spanning from augmented form interactions and CSS support to refined image handling and a more extensive character repertoire. 5.4 HTML 4.01 Progression: In the evolution of HTML, HTML 4.01, unveiled in 1999, introduced a slew of advancements that elevated the HTML language. Notable upgraded features encompassed: CSS Integration: HTML 4.01 streamlined CSS usage. Previously, styles had to be embedded on each page, leading to repetition. HTML 4.01 revolutionized this by enabling the linking of CSS files through the tag, thus facilitating consistent styles across multiple pages without redundant CSS coding. Incorporation of New Tags: HTML 4.01 also introduced novel tags such as , , , and. These tags, in turn, enhanced content presentation, fostering more organized and aesthetically pleasing web structures. Enhanced Table Functionality: Tables received a boost with HTML 4.01, augmenting their capabilities. Attributes like ‘colspan’ and ‘rowspan’ emerged, enabling cells within tables to span across multiple columns or rows. This enhancement simplified the creation of intricate and captivating table layouts. In essence, HTML 4.01, making its debut in 1999, ushered in a host of improvements— ranging from streamlined CSS integration and novel tags for content presentation to augmented table functionality, enriching the realm of web design and development. 5.5 XHTML 1.0 Overview: Released in 2000, XHTML 1.0, or Extensible HyperText Markup Language 1.0, introduced several distinctive attributes: Stringent Standards and Compatibility: While resembling HTML, XHTML 1.0 adheres to a more rigorous version characterized by stricter regulations governing elements, attributes, and syntax. This heightened stringency fostered the establishment of a uniform standard for web pages, mitigating the likelihood of browser incompatibilities. XML Compatibility: A significant facet of XHTML 1.0 was its compatibility with XML tools. This integration allowed XML parsing libraries and transformation utilities, Unit 1: Introduction to HTML 15 Introduction to Web Programming Manipal University Jaipur (MUJ) conventionally employed for XML document handling, to be employed with equal efficacy for working with XHTML documents. Adaptability for the Future: Another commendable aspect lay in the adaptability of XHTML 1.0 documents to potential forthcoming iterations of HTML or XML. This adaptability facilitated a seamless transition to subsequent versions, requiring minimal alterations. In essence, XHTML 1.0, introduced in 2000, embodied stringent standards for compatibility, intertwined with XML capabilities, and poised for seamless evolution with future versions of HTML and XML. 5.6 HTML5: HTML5, initially presented in a public draft by WHATWG in 2008, received its official recognition as a W3C recommendation on October 28, 2014. This version introduced an array of novel HTML tags and encompassed several noteworthy attributes: Enhanced Form Elements: HTML5 ushered in crucial advancements in form elements. The tag emerged, verifying user input as valid email addresses. Another remarkable inclusion was the tag, meticulously designed to securely capture passwords. The browser concealed user-entered characters, safeguarding passwords from exposure. Audio Integration: A defining facet was the introduction of the tag, enabling direct embedding of audio content within web pages. This innovation facilitated seamless integration of audio clips, allowing for audio playback directly on the webpage. Semantic Tags: HTML5 unveiled semantic tags, often referred to as structural tags, imparting organizational structure to HTML pages. These tags established a lucid hierarchy and semantic significance to various webpage sections. Among the introduced tags like , , and , they not only improved webpage accessibility but also optimized search engine performance. Section Definition: The tag delineates distinctive segments within an HTML page, fostering coherent content organization and logical divisions within the webpage's framework. Unit 1: Introduction to HTML 16 Introduction to Web Programming Manipal University Jaipur (MUJ) In essence, HTML5, progressing from its initial draft in 2008 to its formal recognition in 2014, marked a pivotal juncture in web development by introducing an array of innovative features and tags that revolutionized webpage design, structure, and functionality. The inaugural iteration of HTML was labeled as version 1.0, whereas the most recent iteration stands as HTML 5.3. Throughout this duration, the establishment of the World Wide Web Consortium (W3C) played a significant role in establishing standardized protocols and directives for HTML. This has resulted in a uniform set of guidelines for all web browsers to adhere to. The latest rendition, HTML5, has ushered in substantial strides in the realm of web development, and professionals anticipate its continuous expansion in the forthcoming years. 6. HTML SYNTAX HTML is the standard markup language for creating Web pages. What is HTML? HTML stands for Hyper Text Markup Language HTML is the standard markup language for creating Web pages HTML describes the structure of a Web page HTML consists of a series of elements HTML elements tell the browser how to display the content HTML elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc. This is a simple HTML document. HTML Editor: Professional HTML editors like Notepad++, Sublime Text, Visual Studio Code etc can be used to design and edit web pages. The steps to create the first web page are: Step 1: Choose an HTML Editor – Select a simple text editor (like Notepad / Sublime Text/ Visual Studio Code, etc). Unit 1: Introduction to HTML 17 Introduction to Web Programming Manipal University Jaipur (MUJ) Step 2: To write HTML Code – Open the selected/chosen editor and type the code. Below The below Snapshot shows the sample code. Step 3: Save the HTML File – Choose a location on your computer to save the file. Select File > Save As. Name the file with a.html extension, for example, “Sample.html”. Step 4: Open the HTML File in a Web Browser - Locate the saved HTML file on your computer. Double-click the file to open it in your default web browser. Step 5: Viewing the Rendered Webpage - Once the file is opened in the browser, user should see web page rendered. The browser interprets the HTML code and displays the heading and paragraph specified in the code, as shown in the snapshot below. Step 6: Editing and Updating the HTML File - If you need to make changes, go back to your HTML editor and open the.html file the user just saved. Make the necessary edits and save the file again. Refresh the browser window where the HTML file is opened to see the updates. Example Unit 1: Introduction to HTML 18 Introduction to Web Programming Manipal University Jaipur (MUJ) Page Title My First Heading My first paragraph. The explanation of the above example is as follows The declaration defines that this document is an HTML5 document The element is the root element of an HTML page The element contains meta information about the HTML page The element specifies a title for the HTML page (which is shown in the browser's title bar or in the page's tab) The element defines the document's body, and is a container for all the visible contents, such as headings, paragraphs, images, hyperlinks, tables, lists, etc. The element defines a large heading The element defines a paragraph What is an HTML Element? An HTML element is defined by a start tag, some content, and an end tag: Content goes here... The HTML element is everything from the start tag to the end tag: My First Heading My first paragraph. Note: Some HTML elements have no content (like the element). These elements are called empty elements. Empty elements do not have an end tag! Unit 1: Introduction to HTML 19 Introduction to Web Programming Manipal University Jaipur (MUJ) Start tag Element content End tag My First Heading My first paragraph. none none Web Browsers: The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly. A browser does not display the HTML tags, but uses them to determine how to display the document: Fig 1. 4 HTML Page Structure Below is a visualization of an HTML page structure: Unit 1: Introduction to HTML 20 Introduction to Web Programming Manipal University Jaipur (MUJ) Fig 1. 5 Note: The content inside the section will be displayed in a browser. The content inside the element will be shown in the browser's title bar or in the page's tab. Unit 1: Introduction to HTML 21 Introduction to Web Programming Manipal University Jaipur (MUJ) 7. HEAD AND BODY SECTION OF HTML 7.1 HTML Head Tag: The Tag and Attributes in HTML: The tag in HTML is a container element that is used to define the head section of an HTML document. The head section typically includes meta-information and resources that help the browser interpret and display the content of the webpage correctly. This meta- information includes the title of the webpage, character encoding, linked stylesheets, metadata, and more. Within the tag, various other head elements can be included to provide important information about the document: 1. : Specifies the title of the webpage, which appears in the browser's title bar or tab. It's crucial for search engine optimization (SEO) and user experience. 2. : Used to provide metadata about the document, such as character encoding, authorship, description, and keywords. This information is often used by search engines and browsers to properly interpret the content. 3. : Used to link external resources, such as stylesheets or icon files. It's commonly used to attach a CSS stylesheet for styling the webpage. 4. : Embedded CSS styles can be placed within this tag. This is an alternative to linking an external stylesheet using the tag. 5. : Used to include JavaScript code in the document, either inline or by referencing an external script file. In HTML 4.01, the presence of the element was mandatory, and it was required to include important meta-information and resources for proper rendering. However, HTML5 introduced more flexibility, allowing developers to omit the element if necessary. Browsers are now more capable of interpreting documents even if the element is not present, but it's still a good practice to include it. Tag-Specific Attribute: profile The profile attribute is an attribute that was used in earlier versions of HTML to specify the URL of a document that contains metadata profiles. Metadata profiles are sets of metadata Unit 1: Introduction to HTML 22 Introduction to Web Programming Manipal University Jaipur (MUJ) information that browsers can use to better understand the content and structure of a webpage. These profiles help browsers and other tools interpret the content more accurately. However, in HTML5, the profile attribute has been deprecated and is no longer used. Modern web development practices rely more on standardized meta tags within the section to provide metadata information. In essence, the tag is a crucial part of an HTML document, housing essential meta- information and resources that contribute to the proper interpretation, rendering, and accessibility of web content. While the profile attribute was once used to link metadata profiles, it's no longer a part of modern HTML5 practices. Syntax : Title of the document Example : HTML Head Tag Computer science is my Favourite subject. Unit 1: Introduction to HTML 23 Introduction to Web Programming Manipal University Jaipur (MUJ) Explanation : 1. : This declaration specifies that the document is written in HTML5, which is the current version of HTML. 2. : The element is the root of the HTML document. The lang attribute specifies the language of the content, in this case, English. 3. : The section contains metadata and resources related to the document, such as the title of the webpage. 4. HTML Head Tag: The element sets the title of the webpage. This title appears in the browser's title bar or tab. In this example, the title is "HTML Head Tag." 5. : The section contains the visible content of the webpage that users see in the browser. 6. Computer science is my favorite subject.: This element represents a paragraph of text. The text "Computer science is my favorite subject." is enclosed within the paragraph tags. 7. : The element is used to create a horizontal rule, a visible line that separates content on the webpage. It is often used to visually divide sections of content. So, in summary, the provided HTML code creates a simple webpage with the following structure: The webpage is written in HTML5. The title of the webpage is "HTML Head Tag." The visible content of the webpage consists of a single paragraph with the text "Computer science is my favorite subject." A horizontal rule is placed below the paragraph, visually separating it from other content. When this HTML code is rendered in a web browser, it will display the paragraph of text followed by a horizontal rule. The title "HTML Head Tag" will be displayed in the browser's title bar or tab. Unit 1: Introduction to HTML 24 Introduction to Web Programming Manipal University Jaipur (MUJ) 7.2 HTML Body Tag : The HTML tag is an essential element used to define the visible content of a web page. It contains all the information that users see when they visit a webpage. The content within the tag includes text, images, links, forms, multimedia, and any other elements that make up the actual content of the webpage. Here's an in-depth explanation of the tag: Syntax : Example : Example Page Welcome to My Web Page This is a paragraph of text. Unit 1: Introduction to HTML 25 Introduction to Web Programming Manipal University Jaipur (MUJ) In the example: 1. : The heading level 1 tag is used to create a top-level heading. It represents the main heading of the page and is often used for the page's title. 2. : The paragraph tag is used to create paragraphs of text. It's commonly used to structure and format blocks of textual content. 3. : The image tag is used to embed images within the content. The src attribute specifies the image file's source, and the alt attribute provides alternative text that is displayed if the image cannot be loaded. Attributes: There are many attributes in the tag which are depreciated from HTML5 are listed below: background: It contains the URL of the background image. It is used to set the background image. bgcolor: It is used to specify the background color of an image. alink: It is used to specify the color of the active link. link: It is used to specify the color of visited links. text: It specifies the color of the text in a document. vlink: It specifies the color of visited links. The content within the tag is what users see and interact with when they visit a webpage. It's where you place all the elements that make up the webpage's actual content, such as text, images, links, forms, videos, and more. The layout, structure, and appearance of this content are often styled using CSS (Cascading Style Sheets) to create an appealing and user-friendly design. In summary, the HTML tag plays a crucial role in defining the visual content of a web page. It encapsulates all the elements that users engage with when browsing the website, making it a fundamental element in web development. Unit 1: Introduction to HTML 26 Introduction to Web Programming Manipal University Jaipur (MUJ) 9. SUMMARY The chapter provides a comprehensive overview of HTML, focusing on its diverse uses, various versions, and the essential and tags that structure web documents. HTML, or Hypertext Markup Language, serves as the backbone of web development, enabling the creation and presentation of content on the internet. The chapter starts by exploring into the countless uses of HTML. It outlines how HTML is utilized to structure web pages, create interactive forms, embed multimedia content, and establish semantic meaning through the use of various HTML elements. The significance of HTML in web design, navigation, and content organization is emphasized, showcasing its vital role in modern web development. Subsequently, the chapter introduces the evolution of HTML through its different versions. From the foundational HTML 1.0 to the cutting-edge HTML5, each version has brought advancements in terms of features, standards, and capabilities. The chapter traces the development of HTML, highlighting how standardization efforts by organizations like W3C have ensured consistent practices across web browsers and improved the overall user experience. The chapter then focuses on the crucial and tags in HTML. The tag is explored as the container for metadata, essential for SEO, character encoding, and linking external resources. It underscores the importance of the element and the ability to include stylesheets, scripts, and other crucial information within the section. Meanwhile, the tag encapsulates the visible content of a webpage, encompassing text, images, links, and multimedia. The chapter underscores how proper use of these tags ensures proper content rendering and user engagement. In summary, this chapter provides an encompassing understanding of HTML's versatile uses, its evolution across versions, and the pivotal roles of the and tags. Unit 1: Introduction to HTML 27 Introduction to Web Programming Manipal University Jaipur (MUJ) 10. QUESTIONS SELF-ASSESSMENT QUESTIONS – 1 1. What does API integration enable? 2. What does CMS stand for? 3. What does responsive design ensure? 4. What is the purpose of the "head" section in an HTML document? a) It houses the core content of the webpage. b) It contains essential metadata, including the page title. c) It organizes the structural hierarchy of the HTML DOM. d) It is responsible for responsive design and adaptation. 5. What is the significance of the "viewport width" (VW) unit in web design? a) It denotes the vertical width of images. b) It represents the virtual window in HTML. c) It is used to measure the distance between elements. d) It renders text content responsive based on the device's screen width. 6. What is the term used for the organization that was established to foster standardization in HTML tags interpretation by web browsers? 7. What technology empowers designers to enhance the visual appeal of web pages by styling and personalizing HTML elements? 8. What HTML element is used to define the section of an HTML document that includes metadata and resources? 9. Which HTML element specifies the title of a webpage that appears in the browser's title bar or tab? 10. Which HTML attribute is used to specify the language of the content within the element? Unit 1: Introduction to HTML 28 Introduction to Web Programming Manipal University Jaipur (MUJ) Terminal Questions: 1. Explain how web programming facilitates the creation of dynamic content on websites, and provide an example of a scenario where dynamic content enhances the user experience. 2. Describe the significance of responsive design in web development and how HTML and CSS collaborate to achieve it. Provide examples of how responsive design improves user experiences on different devices. 3. Explain the concept of offline web applications and how HTML facilitates their functionality without requiring constant internet connectivity. Provide a real-world scenario where offline web applications offer practical benefits. 4. Compare and contrast the advancements introduced by HTML 4.01 and XHTML 1.0, highlighting their respective impacts on web development standards and compatibility. How did these versions contribute to improving the design and functionality of web pages, and in what ways did they address the challenges of the evolving internet landscape? 5. Explain the concept of HTML elements in detail, highlighting their structure, purpose, and how they contribute to structuring and formatting content within an HTML document. Provide examples to illustrate your explanation. 6. Elaborate on the significance of the tag in HTML documents, detailing its role in providing essential meta-information and resources for optimal rendering and accessibility of web content. Discuss the key elements that are commonly included within the tag and their respective purposes. Additionally, explain the concept of the deprecated profile attribute and its evolution in the context of modern web development practices. Unit 1: Introduction to HTML 29 Introduction to Web Programming Manipal University Jaipur (MUJ) 11. ANSWERS Self-Assessment Questions 1. Services 2. Content Management Systems 3. Adaptation 4. It contains essential metadata, including the page title. 5. It renders text content responsive based on the device's screen width. 6. W3C 7. CSS 8. 9. 10. ‘lang’ Terminal Questions 1. Refer Section 1.3 2. Refer Section 1.3 3. Refer Section 1.4 4. Refer Section 1.5 5. Refer Section 1.6 6. Refer Section 1.7 Unit 1: Introduction to HTML 30 Introduction to Web Programming Manipal University Jaipur (MUJ) BACHELOR OF COMPUTER APPLICATIONS SEMESTER 1 INTRODUCTION TO WEB PROGRAMMING Unit 2: Advanced HTML Features 1 Introduction to Web Programming Manipal University Jaipur (MUJ) Unit 2 Advanced HTML Features Table of Contents SL Topic Fig No / Table SAQ / Page No No / Graph Activity 1 Introduction - - 3-4 1.1 Learning Objectives - - 2 Inserting texts 1, 2, 3, 4, 5, 6, 7, - 5-10 8 3 Text alignment 9 - 11-12 4 Using images in pages 10 - 13-15 5 Hyperlinks – text and images - - 16-17 6 Bookmarks 11, 12 - 18-21 7 Background and colour controls 13, 14, 15, 16, - 21-27 17 8 Summary - - 27 9 Questions - 1 28-29 10 Answers - - 29 Unit 2: Advanced HTML Features 2 Introduction to Web Programming Manipal University Jaipur (MUJ) 1. INTRODUCTION HTML5 is the latest and most advanced iteration of the HTML markup language. It brings a host of innovative features that enhance both the development experience for web developers and the interactivity for users. Unlike a programming language, HTML5 is a markup language used to structure and present content on the World Wide Web. It represents a collaboration between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). HTML5 introduces numerous new elements and attributes, revolutionizing website development. Some notable features of HTML5 include: 1. Multimedia Integration: HTML5 enables the seamless embedding of video and audio files directly into web pages, eliminating the need for third-party plugins. This simplifies multimedia content delivery. 2. Canvas for Graphics: It introduces the `` element, providing a versatile two- dimensional drawing surface that can be manipulated using JavaScript. This feature is particularly useful for creating interactive graphics and visualizations. 3. Enhanced Forms: HTML5 offers advanced form elements, such as date pickers, email input validation, and range sliders, which improve the user experience. It also supports client-side form validation. 4. Offline Capabilities: Websites built with HTML5 can offer offline browsing capabilities. This means users can access certain parts of a website even without an active internet connection, enhancing accessibility. 5. Improved Interactivity:HTML5 includes features that reduce the need for extensive JavaScript coding, making it easier to create interactive elements directly within the markup. 6. Semantic Elements: It introduces semantic elements like ``, ``, and ``, which enhance the structure and semantics of web documents, benefiting both search engines and assistive technologies. 7. WebSockets: HTML5 facilitates bidirectional communication in web applications, enabling real-time updates and interactions, which is a significant advancement in web technology. Unit 2: Advanced HTML Features 3 Introduction to Web Programming Manipal University Jaipur (MUJ) Why HTML5? HTML5 offers several compelling advantages: 1. Enhanced Semantic Markup: HTML5 introduces tags that make web content more meaningful, improving accessibility and SEO. 2. Cross-Browser Compatibility: HTML5 is widely supported across modern browsers, including Internet Explorer, which recognizes the `` declaration. 3. Improved Usability and User Experience: Its technical enhancements and features empower developers to create more dynamic websites and applications, resulting in a better user experience. 4. Offline Browsing: HTML5's offline caching capabilities allow core website elements to load even without an internet connection, increasing accessibility. 5. Video and Audio Support:HTML5 eliminates the need for third-party plugins like Flash, making it easier to incorporate video and audio content using the `` and `` tags. In summary, HTML5 represents a significant step forward in web development, offering a range of advanced features that simplify development, improve usability, and enrich the overall user experience. Its widespread adoption and cross-browser compatibility make it a key technology for modern web development. 1.1 Learning Objectives At the end of this topic, the students will be able to: ❖ Define the purpose and significance of text alignment in web design. ❖ Summarize the key considerations when using images in web pages, including file formats and image optimization techniques. ❖ Create functional hyperlinks, both text-based and image-based, to connect web pages and external resources. ❖ Analyze the impact of image selection and placement on overall web page design and loading times. ❖ Synthesize cohesive web designs by using background and color controls in a way that aligns with branding and user experience goals. Unit 2: Advanced HTML Features 4 Introduction to Web Programming Manipal University Jaipur (MUJ) 2. INSERTING TEXTS Inserting text in HTML is fundamental to web development, as text forms the content of web pages. You can insert text using various HTML elements and tags. Here's a detailed explanation, along with syntax and examples: 2.1. Using Paragraphs (``): The most basic way of adding text to a web page is the paragraph element. – The `` element is used to define paragraphs of text. – Syntax: `Your text goes here.` – Example: This is a paragraph of text. The output would be like this Fig 2. 1 By default, every browser puts a bit of space above and below paragraph elements when they display them, which keeps each paragraph independent from the ones around it, just like the paragraphs you'd see printed in a book or magazine. 2.2 Using Headings (`` to ``): Heading elements are available in six default levels, ranging from to `): – Comments are not visible on the web page but are useful for adding notes to the HTML code. – Syntax: `` – Example: 2.9. Using Text Formatting (`