Lession 2 to 5.pdf

Session 02 Introduction to Web Technologies Session Outline 2.1 Introduction to Web Technologies 2.2 Websites and Web Pages 2.3 Web Page Content 2.4. Dynamic Content vs. Static Content 2.5. HTML vs. CSS 2.6. Scripting Languages and Dynamic Web Content 2.7. The Basic languages...

Session 02 Introduction to Web Technologies Session Outline 2.1 Introduction to Web Technologies 2.2 Websites and Web Pages 2.3 Web Page Content 2.4. Dynamic Content vs. Static Content 2.5. HTML vs. CSS 2.6. Scripting Languages and Dynamic Web Content 2.7. The Basic languages for web development 2.8. What is happening with web browser requests to web server 2.9. Different combinations of technologies are used to develop dynamic websites 2.10. Web Development Related Job Roles 2.11. Activities Aim To provide students with a comprehensive introduction to web technologies Objectives: Having followed this lesson you will be able to  Differentiate Between Websites and Web Pages  Explain Static vs. Dynamic Content  Understand Server-Side vs. Client-Side Scripting  Explore Web Development Related Job Roles  Practice Web hosting 2.1. Introduction to Web Technologies Web technologies refer to the tools and techniques used to create, manage, and interact with websites and web applications. These technologies enable developers to design, build, and deploy web pages and applications that can be accessed via the internet. They include a variety of programming languages, frameworks, servers, and databases. 2.2. Websites and Web Pages Website: A collection of related web pages, usually under a single domain name, accessible via the internet. Websites can be as simple as a single static page or as complex as a dynamic, database-driven web application. Web Page: An individual document that can be displayed in a web browser. It typically includes content such as text, images, videos, and links to other web pages. Binding web pages together to create a cohesive website involves organizing individual web pages and linking them so that users can navigate between them easily. To link to another page using the tag in HTML, you can use the following example: Figure 1 2.3. Web Page Content  Text: The primary content of most web pages, providing information to the user.  Images: Visual content that enhances the text and adds visual appeal.  Videos and Audio: Multimedia content that can be embedded within a web page.  Links: Hyperlinks that connect one web page to another, either within the same website or across different websites. Web page content typically consists of various elements that work together to create an engaging and informative user experience. The primary content is often text, which provides essential information to the user and forms the backbone of most web pages. Complementing the text are images, which not only enhance the visual appeal of the page but also help to illustrate and reinforce the written content. Additionally, multimedia elements such as videos and audio can be embedded within the web page to offer dynamic and interactive experiences, catering to different learning styles and preferences. Links, or hyperlinks, play a crucial role by connecting the web page to other pages, either within the same website or across different websites, facilitating easy navigation and access to related information. Together, these components create a well-rounded web page that effectively communicates its message while keeping users engaged. 2.4. Dynamic Content vs. Static Content Static Content: Content that remains the same for all users and does not change unless manually updated. It is typically written in HTML and CSS. Dynamic Content: Content that changes based on user interaction, preferences, or other variables. It is usually generated on the server-side using scripting languages like PHP, Python, or Node.js, often with the help of databases. 2.4.1. Database Involvement in Dynamic Websites Dynamic websites often rely on databases to store and retrieve content dynamically. Databases like MySQL, MongoDB, or PostgreSQL are used to manage user data, site content, and other resources. When a user requests a web page, the server-side script retrieves the necessary data from the database, processes it, and then generates the HTML to be displayed in the browser.  Figure 2 2.5. HTML vs. CSS HTML (HyperText Markup Language): The standard language for creating web pages. It provides the structure and content of the page, using tags to define elements such as headings, paragraphs, links, and images. CSS (Cascading Style Sheets): A language used to style HTML elements. CSS allows developers to define the visual appearance of the page, including layout, colors, fonts, and other design aspects. Figure 3 2.5.1. HTML/CSS Static Web Pages Static web pages are simple web pages created using only HTML and CSS. These pages do not interact with databases or change based on user input; they are ideal for small, informational websites where content does not need to be updated frequently. 2.6. Scripting Languages and Dynamic Web Content Scripting languages play a crucial role in adding interactivity and dynamic features to web pages, enhancing the user experience and functionality of websites. Client-Side Scripting involves scripts that run directly in the user's browser, allowing for immediate interactions without needing to communicate with the server. A common example of client-side scripting is JavaScript, which can be used to create interactive features such as validating form inputs before submission, creating animations like image sliders, and dynamically updating content without reloading the page. For instance, a JavaScript function might enable a drop-down menu to appear when a user hovers over a navigation item. On the other hand, Server-Side Scripting involves scripts that run on the web server before the page is sent to the user's browser. These scripts are responsible for processing data and generating content that is then sent to the client. Languages such as PHP, Python, and Ruby are often used for server-side scripting. For example, PHP can be used to query a database to retrieve user information, authenticate users during login, or manage content on a blog by dynamically displaying posts based on user preferences. When a user requests a web page, the server processes the PHP script, interacts with the database, and then sends the final HTML/CSS/JavaScript page to the user's browser. Together, client-side and server-side scripting languages work in tandem to create rich, dynamic web content that is both interactive and responsive to user actions. 2.7. The Basic languages for web development HTML, CSS, and JavaScript are the foundational technologies that form the basis of website development. Each of these plays a crucial role in how websites are created and how they function, working together to deliver a complete web experience. HTML (HyperText Markup Language) HTML is the backbone of any website, providing the structure and content of a web page. It uses a series of tags and elements to define various types of content, such as headings, paragraphs, images, links, and more. HTML is responsible for the layout of the page, organizing content into sections, and defining the overall structure that browsers render to users. For example, an HTML document might include headings with tags, paragraphs with tags, and images with tags. Without HTML, there would be no content on a web page, making it an essential component of website development. CSS (Cascading Style Sheets) CSS is used to control the appearance and design of a web page. While HTML defines the structure and content, CSS handles the styling—such as colors, fonts, spacing, and layout. CSS allows developers to create visually appealing and consistent designs across multiple pages of a website. For instance, CSS can be used to change the background color of a page, set the font size for text, or adjust the spacing between elements. By separating the content (HTML) from the design (CSS), developers can easily maintain and update the look of a website without altering the underlying structure. JavaScript JavaScript is the programming language that adds interactivity and dynamic behavior to web pages. Unlike HTML and CSS, which are static, JavaScript allows a website to respond to user actions in real-time. For example, JavaScript can be used to validate form inputs before they are submitted, create image sliders, load new content without refreshing the page (using AJAX), or display interactive maps. JavaScript can manipulate both the HTML and CSS of a page, enabling dynamic updates to content and design based on user interactions. This makes websites more engaging and user-friendly. Integration of HTML, CSS, and JavaScript Together, HTML, CSS, and JavaScript form the core of front-end web development. HTML provides the structure, CSS ensures that the content looks good, and JavaScript makes the content interactive. When a user visits a website, the browser first loads the HTML, then applies the CSS to style the content, and finally runs any JavaScript to add interactivity. Understanding how these three technologies work together is essential for building modern, responsive, and interactive websites. By mastering HTML, CSS, and JavaScript, developers can create complete web experiences that are not only functional but also visually appealing and engaging for users. 2.8. What is happening with web browser requests to web server When a web browser requests dynamic content from a web server, a series of steps take place to process the request and deliver the appropriate content to the user's browser. Here's a step-by- step explanation of what happens: Step 1: User Enters a URL or Clicks a Link   The process begins when the user types a URL into the browser's address bar or clicks a link on a web page. This URL typically points to a web server that hosts the website.  Step 2: DNS Resolution  The browser sends a request to a Domain Name System (DNS) server to resolve the domain name (e.g., www.example.com) into an IP address. The IP address is the numerical representation of the web server's location on the internet Step 3: Browser Sends an HTTP/HTTPS Request  Once the IP address is obtained, the browser sends an HTTP or HTTPS request to the web server. This request includes information such as the specific page or resource requested, the browser type, cookies, and other relevant data. Step 4: Web Server Receives the Request  The web server receives the request and begins processing it. If the requested content is static (e.g., an image or plain HTML file), the server will retrieve it and send it back to the browser. However, if the content is dynamic (e.g., a web page that requires data from a database), further processing is needed. Step 5: Server-Side Scripting Execution  For dynamic content, the server invokes server-side scripts written in languages like PHP, Python, or Ruby. These scripts are responsible for generating the content on-the-fly. The script might interact with a database to retrieve or update information, process form submissions, or perform user authentication. o Example: A PHP script on the server might query a MySQL database to retrieve the latest blog posts. It then formats this data into HTML. Step 6: Server Generates HTML  After the server-side script has processed the request, it generates an HTML document (or other appropriate content like JSON for APIs). Step 7: Server Sends Response to Browser  The server sends the generated HTML document, along with any other resources (like CSS, JavaScript files, and images), back to the user's browser as the response to the initial HTTP/HTTPS request. Step 8: Browser Renders the Web Page   The browser receives the response and begins to render the web page. It processes the HTML, applies CSS for styling, and executes any client-side JavaScript to create an interactive experience Step 9: User Interacts with the Web Page  The user can now interact with the dynamically generated content. Actions like filling out forms, clicking buttons, or navigating through the site can trigger further requests to the server, leading to additional dynamic content being loaded or processed. Step 10: Server Logs the Interaction (Optional)  Finally, the server might log the interaction, recording details such as the request made, the time it was processed, and any errors encountered. This information can be used for analytics, debugging, or security purposes. This entire process happens very quickly, often in a matter of seconds, allowing users to interact with dynamic, up-to-date content seamlessly. Figure 4 2.9. Different combinations of technologies are used to develop dynamic websites Developing dynamic websites often involves combining various technologies, each playing a specific role in the website's functionality. Below are some common combinations of technologies used to develop dynamic websites, along with examples: 2.9.1. HTML, CSS, JavaScript + PHP + MySQL  HTML/CSS/JavaScript: Used for the front-end to structure, style, and add interactivity to the website.  PHP: A server-side scripting language used to handle the back-end logic, interact with databases, and generate dynamic content.  MySQL: A relational database management system used to store and manage the website’s data.  Example: A content management system (CMS) like WordPress, where PHP generates HTML content based on data retrieved from a MySQL database. JavaScript enhances user interactions, such as updating content dynamically without refreshing the page. 2.9.2. HTML, CSS, JavaScript + Python + Django + PostgreSQL  HTML/CSS/JavaScript: Front-end technologies for creating the user interface.  Python: A powerful, versatile programming language used for the back-end.  Django: A Python web framework that handles server-side logic, routing, and database management.  PostgreSQL: An advanced relational database system used to manage complex data.  Example: A social media platform where Django handles user authentication, data processing, and serving dynamic content. JavaScript might be used for real-time notifications or asynchronous data loading. 2.9.3. HTML, CSS, JavaScript + Ruby + Ruby on Rails + SQLite  HTML/CSS/JavaScript: The foundation for the user-facing part of the website.  Ruby: A dynamic, object-oriented programming language for back-end development.  Ruby on Rails: A web application framework written in Ruby, following the MVC (Model-View-Controller) architecture.  SQLite: A lightweight database often used for small to medium-sized applications.  Example: An e-commerce website where Ruby on Rails manages product listings, user sessions, and orders, while JavaScript provides dynamic shopping cart updates and checkout processes. 2.9.4. HTML, CSS, JavaScript + Node.js + Express + MongoDB  HTML/CSS/JavaScript: Used for building the front-end and client-side functionality.   Node.js: A JavaScript runtime used for building scalable network applications and handling server-side operations.  Express: A minimal and flexible Node.js web application framework that provides a robust set of features for web and mobile applications.  MongoDB: A NoSQL database used to store data in flexible, JSON-like documents.  Example: A real-time chat application where Node.js and Express handle incoming messages, MongoDB stores user and chat data, and JavaScript updates the chat interface instantly without page reloads. 2.9.5. HTML, CSS, JavaScript + ASP.NET + SQL Server  HTML/CSS/JavaScript: Front-end technologies for creating the visual and interactive elements of the website.  ASP.NET: A web framework developed by Microsoft for building dynamic web applications and services.  SQL Server: A relational database management system from Microsoft used to store and retrieve data.  Example: A corporate intranet portal where ASP.NET manages user access, document storage, and reporting, while JavaScript enhances the user interface with features like data visualization and interactive dashboards. 2.9.6. HTML, CSS, JavaScript + Java + Spring Boot + Oracle Database  HTML/CSS/JavaScript: Used for designing the front-end interface.  Java: A robust programming language for back-end development.  Spring Boot: A Java-based framework that simplifies the development of production- ready applications.  Oracle Database: A multi-model database management system commonly used in enterprise environments.  Example: A banking application where Spring Boot handles complex business logic, user transactions, and interactions with the Oracle database, while JavaScript facilitates real- time updates and user notifications. Each of these combinations leverages the strengths of different technologies to create dynamic, interactive, and data-driven websites tailored to specific needs and use cases. 2.10. Web Development Related Job Roles Web development is a broad field that encompasses various roles, each focusing on different aspects of building and maintaining websites and web applications. Here are some key web development-related job roles: 2.10.1. Front-End Developer Front-end developers specialize in creating the visual and interactive elements of a website that users directly interact with. They work with HTML, CSS, and JavaScript to build and style web pages, ensuring that the site is both functional and visually appealing. They also focus on optimizing the website for different devices and browsers, ensuring a consistent user experience across platforms. Skills Required:  Proficiency in HTML, CSS, and JavaScript  Experience with front-end frameworks like React, Angular, or Vue.js  Understanding of responsive design and cross-browser compatibility  Familiarity with version control systems like Git 2.10.2. Back-End Developer Back-end developers are responsible for the server-side logic of web applications. They manage databases, server configuration, and application programming interfaces (APIs). Back-end developers ensure that the website's functionality is seamless, handling tasks like user authentication, data storage, and server-side scripting. Skills Required:  Proficiency in server-side languages like Python, PHP, Ruby, Java, or Node.js  Knowledge of databases like MySQL, PostgreSQL, MongoDB, or SQL Server  Experience with web frameworks like Django, Laravel, or Express.js  Understanding of server, network, and hosting environments 2.10.3. Full-Stack Developer Full-stack developers have expertise in both front-end and back-end development. They can build and manage both the client-side and server-side aspects of a web application, making them versatile and capable of handling a wide range of development tasks. Skills Required:   Strong knowledge of front-end and back-end technologies  Proficiency in HTML, CSS, JavaScript, and a back-end language (e.g., Python, PHP)  Experience with databases and server management  Familiarity with web frameworks and version control 2.10.4. Web Designer Web designers focus on the aesthetics and user experience (UX) of a website. They create the layout, design elements, and overall look and feel of the site. While they may not be deeply involved in coding, they often work closely with front-end developers to implement their designs. Skills Required:  Proficiency in design tools like Adobe Photoshop, Illustrator, or Sketch  Knowledge of UX/UI design principles  Basic understanding of HTML, CSS, and JavaScript  Creativity and a strong sense of visual aesthetics 2.10.5. UI/UX Designer UI (User Interface) and UX (User Experience) designers are specialized roles focused on optimizing the usability and effectiveness of a website. UX designers research user behavior and design wireframes and prototypes to enhance user satisfaction, while UI designers focus on the look and feel of the website. Skills Required:  Proficiency in design and prototyping tools like Figma, Adobe XD, or InVision  Strong understanding of user-centered design principles  Experience with user research and usability testing  Knowledge of interaction design and information architecture 2.10.6. Web Developer A web developer is a generalist who can take on various tasks related to building and maintaining websites. Depending on the organization's size, a web developer may handle both front-end and back-end development or specialize in one area. Skills Required:  Proficiency in front-end and/or back-end technologies  Experience with web development frameworks and tools  Knowledge of databases, version control, and deployment processes  Ability to troubleshoot and solve technical problems 2.10.7. DevOps Engineer DevOps engineers focus on the deployment, automation, and continuous integration/continuous deployment (CI/CD) processes of web applications. They work to streamline the development lifecycle, ensuring that code can be efficiently deployed and managed in production environments. Skills Required:  Proficiency in automation tools like Jenkins, Docker, or Kubernetes  Experience with cloud services like AWS, Azure, or Google Cloud  Knowledge of scripting languages like Bash or Python  Understanding of infrastructure as code (IaC) and configuration management 2.10.8. Content Management System (CMS) Developer CMS developers specialize in building and maintaining websites using platforms like WordPress, Joomla, or Drupal. They customize themes, develop plugins, and ensure that the website meets the client’s content management needs. Skills Required:  Proficiency in CMS platforms like WordPress, Joomla, or Drupal  Knowledge of PHP, HTML, CSS, and JavaScript  Experience with theme and plugin development  Understanding of SEO best practices 2.10.9. SEO Specialist An SEO (Search Engine Optimization) specialist focuses on optimizing websites to rank higher in search engine results. They analyze and implement strategies to improve website visibility, driving more organic traffic to the site. Skills Required:   Knowledge of SEO tools like Google Analytics, SEMrush, or Ahrefs  Understanding of on-page and off-page SEO techniques  Familiarity with HTML, CSS, and JavaScript for technical SEO  Strong analytical and keyword research skills 2.10.10. Webmaster A webmaster is responsible for the overall management and maintenance of a website. They ensure that the site is functioning properly, monitor performance, handle updates, and address any technical issues that arise. Skills Required:  Proficiency in web technologies and content management systems  Knowledge of server management and hosting environments  Experience with website analytics and monitoring tools  Strong troubleshooting and problem-solving skills Each of these roles plays a critical part in the web development process, and they often collaborate to create, maintain, and optimize websites and web applications. The specific skills and technologies required can vary depending on the project and the organization’s needs. 2.11. Activities To reinforce the concepts covered in this study note, students can engage in the following practical activities: Activity 1: Install a Local Development Environment Using XAMPP Objective: To set up a local web development environment that includes a web server, database server, and scripting language. Steps:  Download the XAMPP installer from the official website.  Install XAMPP on your local machine.  Start the Apache and MySQL modules from the XAMPP control panel.  Create a simple HTML page and place it in the htdocs directory.  Access the page via your web browser using http://localhost/ or http//127.0.0.1 or your’ PC IP address Outcome: Students will have a fully functioning local development environment where they can practice web development using PHP and MySQL. Activity 2: Research Alternatives to XAMPP Objective: To explore other options for setting up a local development environment and understand the benefits and limitations of different tools. Tasks:  Research and list at least three alternatives to XAMPP (e.g., WAMP, MAMP, LAMP, Docker).  Compare their features, ease of use, platform compatibility, and typical use cases.  Present your findings in a brief report or presentation. Outcome: Students will gain knowledge of various tools available for local web development and be able to choose the most suitable option for their needs. Activity 3: Configure Nginx Web Server on Ubuntu (Latest Version) Using Oracle Sun VirtualBox Objective: To set up and configure an Nginx web server on a virtualized Ubuntu server, simulating a real-world web server environment. Steps:  Install Oracle Sun VirtualBox on your local machine.  Download the latest Ubuntu Server ISO and create a new virtual machine in VirtualBox.  Install Ubuntu Server on the virtual machine.  Use the terminal to install Nginx with the command: sudo apt-get install nginx.  Start the Nginx service and configure it to start on boot.  Create a simple HTML page in the /var/www/html directory.  Access the page from your host machine’s browser using the virtual machine’s IP address. Outcome: Students will learn how to configure and manage a web server in a virtualized environment, gaining experience with both server administration and virtualization tools. These activities will help students apply the theoretical concepts they've learned, providing hands-on experience with setting up web servers, exploring development tools, and managing web environments. Session 03 HTML (HyperText Markup Language) Session Outline 3.1. Introduction to HTML 3.2 What is HTML? 3.3 Basic Structure of an HTML Document 3.4. Basic HTML Elements 3.5. HTML Links and Navigation 3.6. Attributes of HTML Elements 3.7. HTML Images 3.8. HTML Lists 3.9. HTML Tables 3.10. HTML Forms 3.11. HTML Forms Validation 3.12. HTML Multimedia 3.13. HTML Iframes 3.14. HTML Semantic Elements 3.15. HTML Block and Inline Elements 3.16. Activity: Creating a Simple HTML Website for a News Blog Using Only HTML (with Tables for Layout) 3.17. Activity: Adding Images to Your Simple HTML News Blog Aim To provide a clear and structured guide for beginners to understand the basics of HTML. The goal is to build foundational knowledge, enabling learners to create well-structured, responsive, and accessible web pages. Objectives:  To introduce the core concepts of HTML, including its purpose and importance in web development.   To explain the structure of an HTML document, highlighting key elements like , , and.  To provide a comprehensive overview of commonly used HTML elements such as headings, paragraphs, links, images, and forms.  To explore the use of HTML attributes, including global attributes, event attributes, and form-specific attributes, with practical examples.  To demonstrate how to apply inline styles and classes to HTML elements for layout and styling.  To empower learners to create semantically correct and accessible web content by following best practices.  To provide hands-on examples and exercises to reinforce understanding and promote practical learning. 3.1. Introduction to HTML What is HTML? HTML (HyperText Markup Language) is the standard language used to create web pages. It describes the structure of a web page and is the foundation of web development. History of HTML HTML was created by Tim Berners-Lee in 1991. Since then, it has evolved significantly, with HTML5 being the latest version, offering more features and functionalities. Importance of HTML in Web Development HTML provides the basic structure of a web page, which is then enhanced and modified by other technologies like CSS (Cascading Style Sheets) and JavaScript. 3.2. Basic Structure of an HTML Document My First Web Page Welcome to My Website This is a simple HTML page. The Declaration The declaration defines the document type and version of HTML. It ensures that the browser renders the page correctly. The Element The element is the root element of an HTML page and wraps all the content. The Element The element contains meta-information about the HTML document, such as the title and links to CSS and JavaScript files. My First Web Page The Element The element contains the actual content of the HTML document that is displayed in the browser. Welcome to My Website This is a simple HTML page. 3.3. Basic HTML Elements Headings ( to ) Headings are used to define the structure and hierarchy of content on the page. is the highest level heading, and is the lowest. Main Heading Subheading Sub-subheading Paragraphs () The tag defines a paragraph of text.  This is a paragraph of text. This is a sentence.This is a new line. Line Breaks () The tag inserts a line break within the text. Horizontal Rules () The tag creates a horizontal line, often used to separate content. Comments () Comments are used to add notes in the code that are not displayed on the web page. 3.4. HTML Links and Navigation What are HTML Links? HTML links, created using the tag, are used to navigate between web pages or different sections of a page. The href attribute in the tag specifies the destination of the link. Visit Example.com  href: Specifies the URL of the page the link goes to.  Text between tags: This is the clickable text that appears as a link. Linking to Another Website Go to Google This link will take the user to Google's website. Linking to another Page on the Same Website About Us This link will take the user to the "about.html" page within the same website. Opening Links in a New Tab To open a link in a new tab, add the target="_blank" attribute: Visit Example.com in a new tab Linking to a Specific Section of a Page To link to a specific section of a page, use the id attribute to identify the section and the href attribute with a # symbol to reference it: Contact Us Go to Contact Us Section Clicking this link will scroll the page to the "Contact Us" section. Email Links You can create a link that opens the user's email client to send an email: Email Support 3.5. Attributes of HTML Elements What are HTML Attributes? Attributes provide additional information about HTML elements. They are always placed in the opening tag and consist of a name and value pair. Common HTML Attributes Welcome to My Site  This is the introduction paragraph. This text is blue. Example This is English text. User Info id Attribute: Provides a unique identifier for an element. class Attribute: Groups elements for styling or scripting. style Attribute: Applies inline CSS styles to an element. title Attribute: Adds a tooltip that appears when the mouse hovers over the element. lang Attribute: Specifies the language of the element's content. data-* Attributes: Custom attributes for embedding custom data. 3.5.1. Global Attributes These attributes can be applied to most HTML elements: id: Identifies an element uniquely within a document. class: Classifies elements into groups for styling or behavior. style: Adds inline styling. title: Provides extra information as a tooltip. lang: Sets the language for the element's content. dir: Defines text direction (e.g., ltr for left-to-right, rtl for right-to-left). 3.5.2. Event Attributes These attributes define event actions, such as what happens when a user clicks a button. Click Me Hover over me! onclick: Executes JavaScript when an element is clicked onmouseover: Executes JavaScript when the mouse pointer hovers over an element. onload: Executes JavaScript when the page finishes loading. 3.5.3. Form-Specific Attributes Attributes commonly used in forms: name: Specifies the name of an input element. value: Sets the default value for an input element. placeholder: Provides a hint to the user about what to enter. required: Specifies that an input field must be filled out before submitting the form. disabled: Disables an input element, making it unclickable and uneditable. readonly: Makes an input element read-only. 3.5.4. Link-Specific Attributes Attributes commonly used with links: Open in New Tab href: Specifies the URL of the page the link goes to. target: Specifies where to open the linked document. rel: Specifies the relationship between the current and linked document. 3.5.5. Image-Specific Attributes Attributes used with images: src: Specifies the path to the image. alt: Provides alternative text for the image. width and height: Set the width and height of the image. Using Multiple Attributes Attributes can be combined within a single element. Their order does not matter, but the syntax must be correct. 3.6. HTML Images Adding Images to a Web Page Images are added to HTML documents using the tag. The src attribute specifies the path to the image, and the alt attribute provides alternative text for the image if it cannot be displayed. Basic Image Syntax  src: The source of the image (URL or file path).  alt: Alternative text for the image, important for accessibility and SEO. Specifying Image Dimensions You can specify the width and height of an image using the width and height attributes: This sets the image's dimensions to 300 pixels wide and 200 pixels high. Using Images as Links You can use an image as a link by wrapping the tag with an tag: Clicking the image will navigate to the specified URL. 3.6.1. Absolute or a Relative Path When adding images to an HTML page using the tag, the src attribute specifies the path to the image file. This path can be defined as either an absolute or a relative URL. The difference between these two types of paths is important for how the browser locates and loads the image. Absolute Path An absolute path provides the complete URL to the image, including the protocol (http:// or https://), domain name, and the directory path where the image is stored. It specifies the exact location of the image on the web, regardless of the current location of the HTML file. In this example, the browser will look for the image at the specific URL https://www.example.com/images/photo.jpg. This path is useful when you are linking to images hosted on external websites or when you want to ensure that the image is loaded from a specific server. Pros:  The image can be accessed from anywhere, as long as the URL is correct.  Useful for linking to images hosted on different domains. Cons:  If the URL changes or the image is moved, the link will break.  Requires the full URL, which can be longer and harder to manage. Relative Path A relative path provides a URL relative to the location of the HTML file. It tells the browser to look for the image in a location relative to the current page or directory structure. In this case, the browser looks for the photo.jpg file in the images folder within the same directory where the HTML file is located. If the HTML file is moved, the relative path might need to be adjusted. Pros:  Easier to maintain when working with files in the same project or directory structure.  The path can be shorter, making it easier to manage. Cons:  If the directory structure changes, the path may break, requiring updates to the HTML code.   The image cannot be accessed if the HTML file is moved to a different location without adjusting the path. Summary Absolute Path: Refers to the full URL of the image, including the domain name. It is independent of the location of the HTML file. Relative Path: Refers to the location of the image relative to the location of the HTML file. It depends on the directory structure and can change if the file structure is altered. Choosing between absolute and relative paths depends on your project needs. For example, if you're linking to an image on a remote server, an absolute path is necessary. For images within your project directory, a relative path is usually more convenient and easier to maintain. 3.7. HTML Lists Ordered Lists An ordered list uses the tag, with each item inside an tag: First item Second item Third item This will display a list with numbers 1, 2, and 3 preceding each item. Unordered Lists An unordered list uses the tag, with each item inside an tag: First item Second item Third item This will display a list with bullet points before each item. Nested Lists You can create nested lists by placing one list inside another list item: Item 1 Sub-item 1 Sub-item 2  Item 2 This creates a list where "Sub-item 1" and "Sub-item 2" are nested under "Item 1." 3.8. HTML Tables What are HTML Tables? HTML tables are used to display data in a grid format, consisting of rows and columns. Basic Table Structure: Header 1 Header 2 Row 1, Cell 1 Row 1, Cell 2 Row 2, Cell 1 Row 2, Cell 2  : The container for the table.  : Defines a table row.  : Defines a header cell (bold and centered by default).  : Defines a standard data cell. Adding a Table Caption You can add a caption to a table using the tag: Monthly Sales Report Product  Sales Product A $1000 Spanning Columns and Rows You can merge cells horizontally using the colspan attribute and vertically using the rowspan attribute: Merged Header Merged Row Cell 2 Cell 3 3.9. HTML Forms Creating Forms in HTML Forms are used to collect user input and are created using the tag. Basic Form Structure Name: Email:   : The container for the form elements.  action: Specifies the URL to which the form data will be sent.  method: Specifies the HTTP method to use (GET or POST). Common Form Elements Text Input (): A single-line text field. Password Input (): A password field that hides the entered text. Radio Buttons (): Allows the user to select one option from a group. Male Female Checkboxes (): Allows the user to select multiple options. Subscribe to newsletter Drop-down List (): Provides a list of options in a drop-down menu. United States United Kingdom Canada Text Area (): A multi-line text input. Submit Button (): A button to submit the form. 3.10. HTML Forms Validation What is Form Validation? Form validation ensures that users provide valid and expected inputs before submitting a form. This process helps prevent errors and malicious data submissions. HTML5 provides built-in form validation features that can be easily applied using attributes. Required Fields To make a form field mandatory, you can use the required attribute. If the user tries to submit the form without filling out the required fields, the browser will prevent submission and prompt the user to complete the fields. Username: In this example, the username field is required, and the form will not be submitted unless this field is filled out. Pattern Validation The pattern attribute allows you to define a regular expression that the input must match. This is useful for validating specific formats like phone numbers, postal codes, or custom formats. Phone Number (Format: 123-456-7890): Here, the phone input must match the pattern 123-456-7890. If the format does not match, the browser will prompt the user to correct the input. Email Validation The type="email" attribute ensures that the input value is a valid email format. This built-in validation checks for the presence of an "@" symbol and a domain name. Email: In this case, the form will validate that the input is in the correct email format before submission. Number Validation The type="number" attribute allows only numerical input. You can also specify the minimum and maximum values using the min and max attributes. Age (between 18 and 99): This example requires the user to enter a number between 18 and 99. Custom Validation Messages HTML5 also allows you to customize validation messages using the title attribute. The message will be displayed when the input does not match the required pattern. Password (8-16 characters): If the password does not meet the specified length, the custom message "Password must be between 8 and 16 characters" will be shown. 3.11. HTML Multimedia Adding Audio to a Web Page HTML allows you to embed audio files in your web pages using the tag. You can provide multiple audio formats for better browser compatibility and control playback using attributes. Your browser does not support the audio element.   controls: Adds play, pause, and volume controls to the audio player.  : Specifies the audio file and format. This code creates an audio player with controls. If the browser doesn't support the element, the text "Your browser does not support the audio element." will be displayed. Adding Video to a Web Page To embed a video, use the tag, similar to the tag. You can specify multiple video sources for better browser compatibility. Your browser does not support the video tag.  controls: Adds play, pause, and volume controls to the video player.  width and height: Specify the size of the video player. This code creates a video player with controls for playback. If the browser doesn't support the element, the text "Your browser does not support the video tag." will be displayed. 3.12. HTML Iframes What is an Iframe? An iframe (inline frame) is used to embed another HTML document within the current one. The embedded document can be a separate webpage, a video, a map, or any other type of content.  src: The URL of the page to be embedded.  width and height: Set the size of the iframe.  title: Provides a title for the iframe content (important for accessibility). This code embeds the content from "https://www.example.com" within a 600x400 pixel frame. Embedding YouTube Videos You can embed YouTube videos in your web pages using the tag, which allows you to display content from another source within your page.  src: The URL of the YouTube video.  width and height: Specify the size of the video player.  allowfullscreen: Allows the video to be viewed in full-screen mode. This code embeds a YouTube video player directly into your web page. 3.13. HTML Semantic Elements What are Semantic Elements? Semantic elements clearly describe their meaning in a human- and machine-readable way. Examples include , , , and. Website Title Home About Contact  : Represents the header of a document or section.  : Represents a section containing navigation links.  : Represents an independent piece of content.  : Represents a thematic grouping of content.  : Represents the footer of a document or section Why Use Semantic Elements?  Improved Accessibility: Screen readers and other assistive technologies can better understand and navigate the content.  Better SEO: Search engines can more accurately interpret and index your content.   Code Readability: Makes your code easier to read and maintain. 3.14. HTML Block and Inline Elements What are Block Elements? Block elements are elements that take up the full width available, starting on a new line and stacking vertically. Common block elements include:  : A generic container for grouping content.  to : Headings.  : Paragraphs.  , , : Lists.  , , , , : Semantic sections. What are Inline Elements? Inline elements only take up as much width as necessary and do not start on a new line. They are typically used within block elements. Common inline elements include:  : A generic inline container.  : Links.  : Images.  , , , : Text formatting.  , : Form elements. 3.15. Activity: Creating a Simple HTML Website for a News Blog Using Only HTML (with Tables for Layout) In this activity, you will create a basic HTML website for a news blog without using any CSS. Instead, you will use HTML tables for layout purposes. The website will include an index page that lists a few news articles with "Read More" buttons, a header with navigation, and a footer. You’ll also create a few pages to display the full details of each news article. Step 1: Setting Up the Project Structure Create a folder for your project. Inside this folder, create the following files:  index.html (for the homepage with the news listings)  news1.html, news2.html, news3.html (for the individual news pages) Step 2: Create the Index Page (index.html) This page will serve as the homepage of your news blog. It will include a header, navigation, a list of news articles with "Read More" buttons, and a footer, all organized using a table. Step 3: Create the Individual News Pages (news1.html, news2.html, news3.html) These pages will display the full content of each news article. Step 4: Test Your Website Open each of your HTML files in a web browser to see how your news blog looks and functions. You should be able to navigate between the homepage and the individual news pages. Summary In this activity, you created a basic HTML website for a news blog using tables for layout. The project includes a homepage with a list of news articles and "Read More" buttons, individual pages for full news articles, and a simple table-based layout structure. This exercise helps you understand how to build simple, functional websites using only HTML. 3.16. Activity: Adding Images to Your Simple HTML News Blog In this section, you will enhance your news blog by adding a thumbnail image for each news article on the listing page and a full-size image on the individual news pages. This will help you understand how to include and manage images in HTML. Step 1: Prepare Your Images  Prepare three thumbnail images for the news articles (e.g., thumb1.jpg, thumb2.jpg, thumb3.jpg).  Prepare three full-size images for the individual news pages (e.g., news1.jpg, news2.jpg, news3.jpg).  Save all images in an images folder within your project directory. Step 2: Modify the Index Page (index.html) Update the homepage to include thumbnail images for each news article. Step 3: Modify the Individual News Pages (news1.html, news2.html, news3.html) Update each news page to include a full-size image at the top of the article. Repeat the same structure for news2.html and news3.html, changing the image file names and content accordingly. Step 4: Test Your Website with Images Open the updated index.html in a web browser and navigate through the pages. You should see thumbnail images on the homepage and full-size images on the individual news pages. Summary In this activity, you learned how to incorporate images into your HTML news blog. You added thumbnail images to the news listings on the index page and full-size images to the individual news articles. This enhances the visual appeal of your website and provides a more engaging experience for users. Session 04 HTML Comments and Good Practices Session Outline 2.28. Basic Syntax: 2.29. Examples of HTML Comments 2.30. Why Use Comments? 2.31. Good Practices for Writing HTML Comments 2.32. Sample Code Demonstrating Good Practices Aim To provide students with a comprehensive understanding of how to effectively use HTML comments to document their code and implement best practices in web development. This will help students write clean, maintainable, and professional-quality HTML code. Objectives: By the end of this chapter, students will be able to:  Understand the Purpose of HTML Comments  Learn How to Implement HTML Comments  Identify Good Practices in HTML Development  Apply Comments to Document Code Structure  Understand the Impact of Good Practices on Web Development  Practice Writing Well-Commented and Organized HTML Code 4.1. Basic Syntax: Multi-line Comment: 4.2. Examples of HTML Comments Example 1: Commenting Out a Line of Code In this example, the paragraph is commented out, so it won't be visible on the web page. Example 2: Section Headers Welcome to My Website This is the main content of the page. © 2024 My Website. All rights reserved. Here, comments are used to label different sections of the HTML document, making the structure easier to understand. 4.3. Why Use Comments?  Documentation: Comments help in explaining the purpose of code sections, making it easier for others (or yourself in the future) to understand what the code does.  Debugging: When troubleshooting, you can use comments to temporarily disable code without deleting it, helping you isolate issues.  Code Organization: Comments can be used to mark different sections of your HTML document, making it easier to navigate large files. 4.4. Good Practices for Writing HTML Comments Be Clear and Concise: Write comments that are easy to understand. Avoid overly verbose explanations; focus on key points.  Use Comments for Important Information: Comment on parts of the code that are complex, or contain important information that isn’t immediately obvious. Item 1 Item 2 Avoid Over-Commenting: Do not comment on every single line of code, especially when the code is self-explanatory. This can clutter your HTML file. This is a paragraph. This is a div. Commenting Out Code: When testing or debugging, you can comment out sections of code temporarily to see how the page behaves without them. Consistent Style: Adopt a consistent style for writing comments. For example, always start with a capital letter and end with a period, or follow a specific indentation pattern. Use Section Headers: Use comments to divide your HTML into sections, especially for larger documents. This makes it easier to find and edit specific parts of your code. 4.5. Sample Code Demonstrating Good Practices My Awesome Website  Home About Contact Welcome to My Website This website is all about HTML best practices. About This Website This section contains information about the website and its purpose. © 2024 My Awesome Website. All rights reserved. In this example:  Comments are used to label sections of the HTML document (Header Section, Main Content Section, Footer Section).  Descriptive comments are added to clarify the purpose of specific elements (Main navigation, Welcome message).  The code is organized and easy to read, with clear comments indicating the structure and purpose of different sections. Session 05 Editors for Web Development and Integrated Development Environments (IDEs) Session Outline 5.1 Introduction to Editors for Web Development 5.2 Types of Editors and IDEs 5.3. Categories of IDEs 5.4. Visual Studio Code (VS Code) 5.6. How to Install VS Code 5.7. Working with VS Code 5.8. Important Extensions for VS Code 5.9. Virtual Server Extension Aim To provide an in-depth understanding of the various editors and Integrated Development Environments (IDEs) available for web development, focusing on their features, categories, and practical applications. Special emphasis is placed on Visual Studio Code (VS Code) as a versatile tool, along with guidance on its installation, usage, and important extensions to enhance web development productivity. Objectives: By the end of this chapter, students will be able to:  To explore the different types of editors and IDEs used in web development, highlighting their respective advantages and limitations.  To categorize IDEs into free, open-source, and paid options, providing examples and explaining their relevance in various web development scenarios.  To introduce Visual Studio Code (VS Code) as a leading free and open-source code editor, detailing its key features and benefits for developers.  To provide a step-by-step guide on installing and setting up VS Code 5.1. Introduction to Editors for Web Development Editors are essential tools for writing and editing code in web development. They range from simple text editors to fully-fledged Integrated Development Environments (IDEs) that offer advanced features like code completion, debugging, and version control integration. 5.2. Types of Editors and IDEs Text Editors: Basic tools like Notepad++ and Sublime Text are lightweight and ideal for simple coding tasks. They are typically faster to open and use but may lack advanced features. IDEs: These are comprehensive environments that provide a wide range of tools and features. Examples include Visual Studio Code, WebStorm, and Adobe Dreamweaver. IDEs are more suited for complex projects due to their additional functionalities. 5.3. Categories of IDEs Free Open Source IDEs: These are available at no cost and source code publicly, it provides essential features for web development.  Visual Studio Code (VS Code)  Atom  Eclipse  Atom  Brackets Paid IDEs: These typically offer advanced features and support that free IDEs may not.  WebStorm  Adobe Dreamweaver  Sublime Text (licensed after a free trial) 5.4. Visual Studio Code (VS Code) Overview: VS Code is a free, open-source code editor developed by Microsoft. It’s known for its speed, flexibility, and a vast ecosystem of extensions. Features:  IntelliSense: Provides intelligent code completion based on variable types, function definitions, and imported modules.  Integrated Terminal: Allows you to run command-line tasks directly within the editor.  Source Control: Integrated Git support for version control.  Extensions: A rich library of extensions that enhance functionality. 5.5. How to Install VS Code  Step 1: Go to the official VS Code website.( https://code.visualstudio.com/)  Step 2: Download the installer suitable for your operating system (Windows, macOS, or Linux).  Step 3: Run the installer and follow the on-screen instructions to complete the installation.  Step 4: Once installed, launch VS Code. 5.6. Working with VS Code Creating a New Project:  Open VS Code.  Go to `File > Open` Folder and select the directory where your project files will be stored.  Start creating new files using `File > New File`. Using the Integrated Terminal:  Open the terminal within VS Code by going to `View > Terminal` or pressing `Ctrl + backtick.`  You can run commands such as git, npm, and others directly within the editor. Debugging:  Use the built-in debugger by setting breakpoints in your code and running the debugger from the sidebar. 5.7. Important Extensions for VS Code Extensions are additional software modules that enhance the functionality of the editor by adding new features, tools, and customization options. Extensions allow developers to tailor their coding environment to meet specific needs, whether for a particular programming language, workflow, or development task. A few sample extensions:  Prettier: A code formatter that enforces a consistent style by parsing your code and reprinting it with its own rules.  ESLint: Integrates ESLint into VS Code, providing real-time linting feedback in your JavaScript code.  Live Server: Launches a local development server with a live reload feature for static and dynamic pages.  GitLens: Enhances Git capabilities within VS Code by providing visualizations, history, and more. 5.8. Virtual Server Extension This extension is crucial for web developers as it enables a local server environment directly within VS Code. It automatically reloads your page when files are saved, allowing for quick previewing of changes.  Installation:  Go to the Extensions view by clicking on the Extensions icon in the Activity Bar on the side of the window.  Search for "Live Server" and click Install. Usage:  Once installed, open your HTML file in VS Code and right-click to select Open with Live Server.  A new browser window will open with your web page, and any changes you make in VS Code will be reflected in real-time. Choosing the right editor or IDE is crucial for web development, as it impacts productivity and ease of use. VS Code is a popular choice due to its balance of features, flexibility, and the extensive range of extensions available. Whether you’re a beginner or an experienced developer, understanding how to utilize these tools effectively can significantly improve your development workflow.