APznzaYRiBHln5LK9XBIvnEJZvtsbiYc3aIjyg4Jg-qadYKr26ueS9v5drLTQ00_88I7K-2Z5nUxumycd4M_ELRFqQK6MLGWkgxRt8B6BnTfNNN9IUXAeE61KV3snR8DWKnL1D5F7FljaPOGdYwfrPL_C83pR6r4EOQCVB7j-nIYzg5_ko9AtVS0IPIEEbDt_8Luyz1aybnARenaT3JrWUA.pdf

Course: Web Technologies Course Code: NPMC102 UNIT 2: HTML AND CSS Module: 1 Introduction to HTML HTML (HyperText Markup Language) is the standard language used to create and design d...

Course: Web Technologies Course Code: NPMC102 UNIT 2: HTML AND CSS Module: 1 Introduction to HTML HTML (HyperText Markup Language) is the standard language used to create and design documents on the web. It provides the basic structure for web pages and applications, allowing developers to define the content and layout of a webpage. HTML is fundamental to web development, serving as the backbone upon which CSS (Cascading Style Sheets) and JavaScript build to create fully functional and interactive websites. Key Concepts of HTML 1. Basic Structure An HTML document has a standard structure that includes several key elements: : Declares the document type and version of HTML (HTML5 in this case). It helps browsers to render the page correctly. : The root element that contains all other HTML elements. : Contains meta-information about the document, such as title, character encoding, and links to CSS files. : Sets the title of the webpage, which appears in the browser tab. : Contains the content of the web page, such as text, images, links, and other elements. HTML Document Structure An HTML document is structured with a specific set of elements and tags that organize and define the content of a webpage. Understanding this structure is crucial for creating well-formed HTML documents that render correctly in web browsers. 1. Basic HTML Document Structure Every HTML document follows a standard structure, which includes several key elements: : This declaration defines the document type and version of HTML being used. It helps browsers understand how to render the document. For HTML5, it is simply. : The root element that contains all other HTML elements. It has a lang attribute to specify the language of the document. : Contains meta-information about the document. This section is not displayed on the webpage itself but provides important details and links to external resources. : Provides metadata about the document, such as character encoding and viewport settings. : Sets the title of the webpage, which appears in the browser’s title bar or tab. : Contains the content of the webpage that is displayed to users, such as text, images, and links. 2. Example of Basic HTML Document Here’s a basic example of an HTML document with the standard structure: html Copy code My Web Page Welcome to My Web Page Home About Contact Home Section This is the home section of the webpage. About Section This is the about section of the webpage. Contact Section This is the contact section of the webpage. © 2024 My Web Page 3. Detailed Breakdown of the Structure 1. Purpose: Declares the document type and HTML version. For HTML5, it ensures the browser uses the latest standards. Syntax: 2. Purpose: The root element that wraps the entire document. Attributes: lang: Specifies the language of the document (e.g., lang="en" for English). Syntax: 3. Purpose: Contains metadata and links to external resources. Common Tags: : Defines the character encoding for the document. : Ensures proper rendering on mobile devices by setting the viewport width. : Links to an external CSS file for styling. : Links to an external JavaScript file (if included in the head, with defer to ensure it loads after the HTML is parsed). 4. Purpose: Contains the visible content of the webpage. Common Tags: : Defines introductory content or navigation. : Contains navigation links. : Represents the main content of the document. : Defines sections within the main content. : Represents self-contained content. : Contains footer information. 4. HTML Semantic Elements Semantic elements convey meaning about the content they enclose, enhancing accessibility and SEO. Examples include: : Contains introductory content or navigational links. : Contains footer information, such as author details or copyright statements. : Represents a self-contained piece of content that could be distributed or reused independently. : Represents a thematic grouping of content, typically with a heading. : Contains content that is tangentially related to the content around it (e.g., sidebars). : Contains navigation links. 5. HTML Document Types There are different document types (or DOCTYPEs) for different versions of HTML: HTML5: HTML 4.01: XHTML 1.0: HTML Editors HTML editors are specialized tools designed to assist developers in creating and editing HTML documents. They offer various features that facilitate writing clean, organized code and can range from simple text editors to sophisticated integrated development environments (IDEs). Types of HTML Editors Text Editors: Basic text editors are suitable for writing and editing HTML code without additional features. They are lightweight and fast but lack advanced functionalities. Examples: Notepad (Windows), TextEdit (Mac), Nano (Unix-based systems). Code Editors: Code editors are more advanced than basic text editors and include features such as syntax highlighting, code completion, and error detection. They are designed specifically for coding and support various programming languages, including HTML. Examples: Visual Studio Code (VS Code): A highly popular, free code editor from Microsoft with robust support for HTML, CSS, JavaScript, and many other languages. Features include extensions, integrated terminal, and debugging tools. Sublime Text: Known for its speed and versatility, Sublime Text supports HTML and various other languages. It includes features like multiple selections, command palette, and a distraction-free writing mode. Atom: An open-source editor developed by GitHub that offers customizable features, a built-in package manager, and support for various programming languages. Integrated Development Environments (IDEs): IDEs are comprehensive development environments that provide extensive tools for coding, debugging, and managing projects. They typically include features such as version control integration, project management, and advanced code analysis. Examples: WebStorm: A powerful IDE from JetBrains tailored for JavaScript development, but also supports HTML and CSS. Features include intelligent code completion, on-the-fly error checking, and integrated debugging tools. Adobe Dreamweaver: A commercial HTML editor that combines a WYSIWYG (What You See Is What You Get) editor with a code editor. It is designed for both design and coding perspectives and integrates with other Adobe products. Online HTML Editors: Online HTML editors are web-based tools that allow you to write, edit, and preview HTML code directly in your browser. They are useful for quick edits or when working on a different machine. Examples: CodePen: An online code editor and social development environment for front- end designers and developers. It allows users to write HTML, CSS, and JavaScript and see the results live. JSFiddle: An online tool for testing and showcasing user-created HTML, CSS, and JavaScript code snippets. JSBin: A tool for experimenting with HTML, CSS, and JavaScript in real-time. HTML Elements, Tags, and Attributes In HTML (HyperText Markup Language), elements, tags, and attributes are fundamental concepts that define the structure and content of a web page. Here’s a detailed explanation of each: 1. HTML Elements An HTML element is a fundamental building block of HTML. It defines a specific part of the web page, such as a paragraph, heading, link, or image. An HTML element generally consists of three parts: Opening Tag: Marks the beginning of the element. It includes the element name enclosed in angle brackets. Content: The actual data or text that the element contains. This can be text, images, or other elements. Closing Tag: Marks the end of the element. It includes the element name preceded by a slash (/) and enclosed in angle brackets. Example of an HTML Element: html This is a paragraph. Opening Tag: Content: This is a paragraph. Closing Tag: 2. HTML Tags Tags are the syntax used to define HTML elements. Tags are enclosed in angle brackets and usually come in pairs (opening and closing tags). Opening Tag: (e.g., ) Closing Tag: (e.g., ) Self-closing Tags: Some HTML elements do not have closing tags. They are self-contained and end with a slash before the closing angle bracket (e.g., ). Examples of Tags: Heading Tag: , , , etc. Paragraph Tag: Anchor Tag (Link): Link Image Tag: 3. HTML Attributes Attributes provide additional information about HTML elements. They are specified within the opening tag of an element and come in name-value pairs. Attributes modify the behavior or appearance of an element. Syntax of Attributes: html Content Attribute Name: The name of the attribute (e.g., href, src, alt). Attribute Value: The value assigned to the attribute, enclosed in quotes (e.g., "https://example.com", "image.jpg"). Examples of Attributes: (Anchor Tag) with href Attribute: html Visit Example href: Specifies the URL of the page the link goes to. (Image Tag) with src and alt Attributes: html src: Specifies the path to the image file. alt: Provides alternative text for the image, which is displayed if the image cannot be loaded. (Form Input) with type, name, and value Attributes: html type: Specifies the type of input (e.g., text, password, email). name: Provides a name for the input field, used when submitting form data. value: Sets the default value of the input field. 4. Attribute Types Attributes can be categorized based on their functionality: Global Attributes: Attributes that can be used on any HTML element. Examples include class, id, style, and title. class: Specifies one or more class names for an element. id: Provides a unique identifier for an element. style: Allows inline CSS styling of the element. title: Provides additional information about an element, typically displayed as a tooltip. Event Attributes: Attributes that handle events triggered by user actions. Examples include onclick, onmouseover, onchange. onclick: Executes JavaScript code when the element is clicked. onmouseover: Executes JavaScript code when the mouse pointer hovers over the element. Designing simple page – tag. Purpose: The root element of an HTML document. Syntax:... Example: html  tag Purpose: Contains meta-information about the document, such as the title, character encoding, and links to stylesheets. Syntax:... Example: html Document Title Tag The tag in HTML is a crucial component of a web page. It contains all the content that is visible to users when they visit a website. This includes text, images, videos, links, and other elements that make up the main content of the page. Purpose of the Tag Defines the Main Content: All the content that appears on the web page, such as headings, paragraphs, images, links, and multimedia elements, should be placed inside the tag. Organizes Content: It helps in separating the document’s content from its metadata and styling (which are placed inside the tag). Basic Syntax html Attributes of the Tag The tag supports several attributes, although many of them are not commonly used today. Modern practices focus on using CSS for styling rather than inline attributes. Common Attributes: background: (Deprecated) Specifies a background image for the page. html bgcolor: (Deprecated) Specifies the background color of the page. html text: (Deprecated) Specifies the text color. html link: (Deprecated) Specifies the color of unvisited links. html alink: (Deprecated) Specifies the color of active links. html 1. Anchor Tag () The anchor tag is used to create hyperlinks, which allow users to navigate to other web pages, sections within the same page, or external resources. Syntax: html Link Text Attributes: href: Specifies the URL of the page the link goes to. target: Specifies where to open the linked document (e.g., _blank for a new tab). title: Provides additional information about the link (displayed as a tooltip). Example: html Visit Example *2. Image Tag () The image tag is used to embed images in a web page. It’s a self-closing tag. Syntax: html Attributes: src: Specifies the path to the image file. alt: Provides alternative text for the image if it cannot be displayed. width: Sets the width of the image. height: Sets the height of the image. Example: html 3. Table Tags Tables are used to display data in a grid format. Purpose: Defines a table. Syntax:... Table Row Purpose: Defines a table row. Syntax:... Table Head Purpose: Defines a table header cell, usually bold and centered. Syntax:... Table Data Purpose: Defines a table data cell. Syntax:... Example: html Copy code Name Age John Doe 30 Jane Smith 25 4. List Tags Lists are used to group items. (Unordered List) Purpose: Defines an unordered (bulleted) list. Syntax:... (Ordered List) Purpose: Defines an ordered (numbered) list. Syntax:... (List Item) Purpose: Defines an item in a list (used inside or ). Syntax:... Example: html Item 1 Item 2 First item Second item *5. Frame Tag () The tag is used to embed another HTML document within the current document. Syntax: html Attributes of Frame Tag: src: Specifies the URL of the document to embed. width: Sets the width of the iframe. height: Sets the height of the iframe. frameborder: Specifies whether to display a border around the iframe (0 for no border). title: Provides a title for the iframe (used for accessibility). Example: html 6. Div Tag () The tag is a block-level container used to group content and apply styles. Syntax: html Attributes: id: Assigns a unique identifier to the. class: Assigns one or more class names to the for styling. Example: html Section Title This is a section within a div. 7. HTML Forms Forms are used to collect user input. Purpose: Defines a form for user input. Attributes: action (URL to submit the form data), method (HTTP method, e.g., GET, POST). Input Types : Text input field. html : Password input field. html : Email input field. html : Submit button. html Tag Purpose: Defines a multiline text input field. Attributes: rows (number of rows), cols (number of columns). Syntax: html tag Purpose: Defines a dropdown list. Attributes: name (name of the select box). Syntax: html Option 1 Option 2 Tag Purpose: Defines a clickable button. Attributes: type (button type, e.g., submit, button), name, value. Syntax: html Click Me Purpose: Defines an image as a submit button. Attributes: src (source of the image), alt (alternative text). Syntax: html Course: Web Technologies Course Code: NPMC102 UNIT 2: HTML AND CSS Module: 2 Introduction to CSS CSS (Cascading Style Sheets) is a stylesheet language used to describe the presentation of a document written in HTML or XML (including XHTML). CSS controls the layout, colors, fonts, and overall appearance of web pages, allowing for a separation of content from design. This separation enhances accessibility and provides greater flexibility and control over the appearance of web documents. Key Concepts of CSS Separation of Concerns Content vs. Presentation: HTML provides the structure and content, while CSS handles the styling and layout. This separation simplifies maintenance and improves the flexibility of design changes. Selectors Purpose: Identify the HTML elements to which styles will be applied. Examples: Properties and Values Properties: Define the style to be applied (e.g., color, font-size, margin). Values: Specify the settings for the properties (e.g., red, 16px, 10px). Basic Syntax CSS syntax consists of a selector and a declaration block: css selector { property: value; } Example: css body { background-color: #f0f0f0; font-family: Arial, sans-serif; } h1 { color: #333; text-align: center; } CSS Selectors CSS selectors are patterns used to select and style HTML elements. Understanding selectors is crucial for applying styles effectively to different parts of your web page. Here’s a comprehensive guide to the various types of CSS selectors: Element Selector Purpose: Targets all elements of a specific type. Syntax: element { property: value; } Example: css p{ color: blue; } This targets all elements and sets their text color to blue. Class Selector Purpose: Targets elements with a specific class attribute. Useful for applying styles to multiple elements. Syntax:.class-name { property: value; } Example: css.highlight { background-color: yellow; } This targets all elements with the class highlight and sets their background color to yellow. ID Selector Purpose: Targets a single element with a specific ID attribute. IDs should be unique within a page. Syntax: #id-name { property: value; } Example: css #header { font-size: 24px; } This targets the element with the ID header and sets its font size to 24px. Universal Selector in CSS The universal selector in CSS is a powerful tool that applies styles to all elements within a document. It is represented by the asterisk (*) symbol. Syntax css *{ property: value; } Purpose and Use Cases Resetting or Normalizing Styles The universal selector The universal selector is often used in CSS resets or normalization stylesheets to ensure consistent rendering across different browsers by removing default margins, paddings, and other styles. Example: css Copy code *{ margin: 0; padding: 0; box-sizing: border-box; } This example removes default margin and padding from all elements and sets box-sizing to border-box, ensuring that padding and border are included in the element's total width and height. Applying Global Styles It can be used to apply styles that should affect all elements on a page, such as setting a global font-family or color. Example: css Copy code *{ font-family: Arial, sans-serif; color: #333; } This sets the font family and text color for all elements on the page. Formatting fonts in CSS Formatting fonts in CSS allows you to control various aspects of how text appears on your web pages. Here’s a comprehensive guide to formatting fonts using CSS: 1. Basic Font Properties Font Family: Specifies the typeface to be used. css p{ font-family: Arial, sans-serif; } Font Size: Defines the size of the font. css p{ font-size: 16px; } Font Weight: Determines the thickness of the font. css p{ font-weight: bold; } Font Style: Applies styles like italic or oblique. css p{ font-style: italic; } Text Decoration: Adds decorations like underline, overline, or line-through. css p{ text-decoration: underline; } Text Transform: Controls the capitalization of text. css p{ text-transform: uppercase; } Letter Spacing: Adjusts the spacing between characters. css p{ letter-spacing: 1px; } Line Height: Sets the distance between lines of text. css p{ line-height: 1.5; } Text Align: Aligns text horizontally. css p{ text-align: center; } 2. Font Shorthand Property You can combine multiple font properties into a single shorthand property: css p{ font: italic small-caps bold 16px Arial, sans-serif; } Syntax: css font: [font-style] [font-variant] [font-weight] [font-size] [line-height] [font-family]; font-style: normal, italic, oblique font-variant: normal, small-caps font-weight: normal, bold, bolder, lighter, or numerical values (100–900) font-size: e.g., 16px, 1em, large line-height: optional, e.g., 1.5, 1.5em font-family: e.g., Arial, sans-serif 3. Web Fonts To use custom fonts from the web, you can use the @font-face rule or external font services like Google Fonts or Adobe Fonts. Using @font-face: css @font-face { font-family: 'MyCustomFont'; src: url('path-to-font-file.woff2') format('woff2'), url('path-to-font-file.woff') format('woff'); } body { font-family: 'MyCustomFont', sans-serif; } Using Google Fonts: Go to Google Fonts and select a font. Copy the provided element into your HTML’s. html Apply the font in your CSS. css body { font-family: 'Roboto', sans-serif; } Text & background colour Setting text and background colors in CSS is fundamental for styling web pages. You can use color values in various formats, such as named colors, hexadecimal values, RGB, RGBA, HSL, and HSLA. Here’s a guide on how to apply text and background colors: ### 1. Text Color To set the color of text, use the `color` property in CSS. **Example:** ```css p{ color: #333; } h1 { color: rgb(255, 0, 0); } h2 { color: rgba(0, 0, 255, 0.5); } h3 { color: hsl(120, 100%, 50%); } h4 { color: hsla(300, 100%, 50%, 0.7); } ``` ### 2. Background Color To set the background color of an element, use the `background-color` property. **Example:** ```css body { background-color: #f0f0f0; } header { background-color: rgb(0, 255, 0); } section { background-color: rgba(255, 255, 0, 0.3); } article { background-color: hsl(200, 100%, 90%); } footer { background-color: hsla(50, 100%, 50%, 0.4); } ``` ### 3. Combining Text and Background Colors You can combine both text and background colors for different HTML elements. **Example:** ```html Text and Background Colors  body { background-color: #e0e0e0; font-family: Arial, sans-serif; }.container { background-color: #ffffff; color: #333333; padding: 20px; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); }.highlight { background-color: rgba(255, 215, 0, 0.5); color: #000; padding: 5px; border-radius: 4px; } h1 { color: hsl(200, 100%, 40%); } p{ color: hsl(0, 0%, 20%); } Welcome to My Page This is a paragraph with some highlighted text. ``` ### 4. Color Formats - **Named Colors**: Like `red`, `blue`, `green`. - **Hexadecimal Values**: `#RRGGBB` or `#RGB`. Example: `#ff5733` or `#f53`. - **RGB**: `rgb(red, green, blue)`. Example: `rgb(255, 0, 0)`. - **RGBA**: `rgba(red, green, blue, alpha)`. Example: `rgba(0, 255, 0, 0.3)`. - **HSL**: `hsl(hue, saturation, lightness)`. Example: `hsl(120, 100%, 50%)`. - **HSLA**: `hsla(hue, saturation, lightness, alpha)`. Example: `hsla(300, 100%, 50%, 0.7)`. ### 5. Example with All Color Formats Here’s a comprehensive example showing various color formats: ```html  Color Formats Example.color-box { width: 200px; height: 100px; margin: 10px; display: inline-block; text-align: center; line-height: 100px; color: white; font-weight: bold; border-radius: 5px; }.named { background-color: red; }.hex { background-color: #00ff00; }.rgb { background-color: rgb(0, 0, 255); }.rgba { background-color: rgba(255, 255, 0, 0.5); }.hsl { background-color: hsl(120, 100%, 50%); }.hsla { background-color: hsla(240, 100%, 50%, 0.7); } Named Color Hex Color RGB Color RGBA Color HSL Color HSLA Color ``` This example showcases the different ways to set colors in CSS and demonstrates how to use each format effectively for both text and background colors. CSS (Cascading Style Sheets) CSS (Cascading Style Sheets) is used to style HTML documents, and there are three main ways to apply CSS to a webpage: inline styles, internal styles, and external styles. Each method has its use cases, advantages, and disadvantages. 1. Inline Styles Definition: Inline styles are CSS rules applied directly within an HTML element's style attribute. Example: html This is a red colored paragraph with a font size of 20px. Advantages: Specificity: Inline styles have the highest specificity, so they override other CSS rules. Quick Changes: Useful for quick, one-off styling changes. Disadvantages: Maintenance: Difficult to maintain for large projects or when the same style is needed in multiple places. Separation of Concerns: Mixes content with presentation, which goes against the principle of separation of concerns. Redundancy: Can lead to repetitive code if the same styles are needed for multiple elements. 2. Internal Style Sheets Definition: Internal styles are CSS rules placed within a element in the section of an HTML document. Example: html Internal Styles Example p{ color: blue; font-size: 18px; } This is a blue colored paragraph with a font size of 18px. Advantages: Organization: Keeps all styles in one place within the HTML document, making it easier to manage styles specific to that document. Overrides External Styles: Internal styles override external styles if both are applied to the same elements. Disadvantages: Not Reusable: Styles defined in an internal style sheet apply only to the specific HTML document and are not available for other pages. Performance: Larger HTML documents can become less performant due to embedded CSS, though this is generally less of an issue compared to inline styles. 3. External Style Sheets Definition: External styles are CSS rules placed in a separate.css file, which is linked to the HTML document using a element in the section. Example: html External Styles Example This is a paragraph styled using an external CSS file. css p{ color: green; font-size: 16px; } Advantages: Reusability: The same stylesheet can be applied to multiple HTML documents, ensuring consistent styling across a website. Maintenance: Easier to manage and update styles in one place without altering the HTML files. Separation of Concerns: Keeps the content (HTML) separate from the presentation (CSS), adhering to best practices. Disadvantages: Loading Time: Requires an additional HTTP request to fetch the external stylesheet, though this is typically mitigated by caching. Specificity: External styles might be overridden by inline or internal styles, requiring careful management of CSS specificity. CSS BORDERS: In CSS, borders and boxing are fundamental concepts for styling elements on a webpage. Understanding how to manipulate borders and the box model is crucial for layout and design. Here’s a detailed breakdown: Borders Borders define the boundary around an HTML element. You can control their style, width, and color using CSS properties. CSS Properties for Borders: border: A shorthand property for setting the width, style, and color of the border. css border: 2px solid black; border-width: Specifies the width of the border. css border-width: 2px; border-style: Specifies the style of the border. Common values include solid, dotted, dashed, double, groove, ridge, inset, and outset. css border-style: solid; border-color: Specifies the color of the border. css border-color: blue; border-top, border-right, border-bottom, border-left: These properties allow you to set borders for individual sides. css border-top: 2px dashed red; border-right: 3px solid green; border-bottom: 4px dotted blue; border-left: 5px double black; border-radius: Rounds the corners of the border. You can set a uniform radius for all corners or specify different radii for each corner. css border-radius: 10px; border-radius: 10px 20px 30px 40px; Example: html Border Example.box { border: 5px solid black; border-radius: 15px; padding: 20px; margin: 10px; }  This is a box with a border. The Box Model The CSS box model describes how the dimensions of an element are calculated, including content, padding, border, and margin. Understanding the box model helps in controlling layout and spacing. Components of the Box Model: Content: The actual content of the box, where text and images appear. Padding: Space between the content and the border. It increases the size of the box but does not affect the layout of surrounding elements. css padding: 20px; padding-top: 10px; padding-right: 15px; padding-bottom: 20px; padding-left: 25px; Border: The line surrounding the padding (if any) and content. Its width, style, and color are customizable. css border: 2px solid black; Margin: Space outside the border. It separates the element from other elements. Margins are transparent and do not affect the element’s size but affect its position relative to other elements. css margin: 20px; margin-top: 10px; margin-right: 15px; margin-bottom: 20px; margin-left: 25px; Box Model Calculation: The total width of an element can be calculated as: css total width = content width + padding-left + padding-right + border-left + border-right + margin-left + margin-right Similarly, the total height is calculated using: css total height = content height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom Box-Sizing Property: The box-sizing property allows you to include padding and border in the element’s total width and height. content-box: Default value. Width and height apply only to the content box. Padding and border are added to the total size. border-box: Width and height include padding and border. css box-sizing: border-box; Example: html Box Model Example.box { width: 200px; padding: 20px; border: 5px solid black; margin: 15px; box-sizing: border-box; } This box has padding, border, and margin applied.