Module-2-Week-3.pptx.pdf

KOLEHIYO NG LUNGSOD NG DASMARIÑAS BRGY. BUROL MAIN, CITY OF DASMARIÑAS, CAVITE, PHILIPPINES 4114  WEB SYSTEMS AND TECHNOLOGIES  MODULE 2 (Week 3) Refresher Review for Front-end Programming Module Objectives Discuss the fundamentals of HTML5. Identify the basic HTML...

KOLEHIYO NG LUNGSOD NG DASMARIÑAS BRGY. BUROL MAIN, CITY OF DASMARIÑAS, CAVITE, PHILIPPINES 4114  WEB SYSTEMS AND TECHNOLOGIES  MODULE 2 (Week 3) Refresher Review for Front-end Programming Module Objectives Discuss the fundamentals of HTML5. Identify the basic HTML5 document structure. Explain the different HTML5 elements and attributes. Discuss the basics of forms and input elements Module Objectives Discuss the basic syntax of CSS3. Applying CSS to HTML. Explain the fundamentals of Selectors, Properties, and Colors using CSS. Discuss the overview of Javascript. HTML Basics HTML is used to create the structure and content of web pages. It provides a framework for organizing text, images, links, and other elements in a web document. HTML documents have a specific structure with elements such as , , and. The section typically includes metadata, links to stylesheets, and scripts, while the contains the visible content. HTML Basics HTML is used to create the structure and content of web pages. It provides a framework for organizing text, images, links, and other elements in a web document. HTML documents have a specific structure with elements such as , , and. The section typically includes metadata, links to stylesheets, and scripts, while the contains the visible content. HTML Basics Elements - Defined by opening and closing tags, such as (a container) and (paragraph). Elements can also be self-closing, such as (for images) and (for line breaks). Tags - Tags are enclosed in angle brackets and come in pairs for most elements (e.g., and ). Some elements are self-closing and do not have closing tags (e.g., ). HTML Basics Attributes - Provide additional information about elements. Common attributes include id (for unique identification), class (for applying styles), and href (for hyperlinks). For example, Example creates a hyperlink. CSS Basics CSS stands for Cascading Style Sheets CSS is used to style and layout web pages. It allows designers to control the appearance of HTML elements, including colors, fonts, spacing, and positioning. CSS describes how HTML elements are to be displayed on screen, paper, or in other media CSS saves a lot of work. It can control the layout of multiple web pages all at once External stylesheets are stored in CSS files CSS Selectors, Properties, and Values Selectors: Used to target specific HTML elements for styling. Examples include type selectors (e.g., p for paragraphs), class selectors (e.g.,.class for elements with a specific class), and ID selectors (e.g., #id for elements with a unique ID). Properties and Values: Define the style to be applied. For example, color: red; sets the text color to red, while font-size: 16px; adjusts the text size. CSS Selectors, Properties, and Values Box Model and Layout Techniques 1. Box Model Concept Content: The innermost area where the actual content of the element is displayed. It is affected by padding and border properties. Padding: The space between the content and the element’s border. It can be adjusted using properties like padding-top, padding-right, padding-bottom, and padding-left. Border: Surrounds the padding and content area. It can be customized with properties such as border-width, border-style, and border-color. Margin: The outermost space around the element, separating it from other elements. Margins can be set using margin-top, margin-right, margin-bottom, and margin-left. Box Model and Layout Techniques 2. Layout Technique Flexbox ❑ A layout model designed for arranging items along a single axis (either horizontally or vertically). Flexbox makes it easier to create responsive and adaptive layouts. ❑ Key Properties: display: flex; defines a flex container, while properties like justify-content, align-items, and flex-direction control item alignment and direction. Box Model and Layout Techniques 2. Layout Technique Grid Layout ❑ A powerful two-dimensional layout system for creating complex web designs with rows and columns. It provides precise control over layout and alignment. ❑ Key Properties: display: grid; defines a grid container. Properties such as grid-template-rows, grid-template-columns, and grid-area allow for the design of intricate layouts. Javascript Basics JavaScript is a versatile scripting language that enhances web pages with interactive and dynamic features. It enables client-side scripting to respond to user actions and manipulate the DOM. Syntax: JavaScript code is composed of statements and expressions. Proper syntax is crucial for ensuring code runs correctly, including the use of semicolons, braces, and parentheses. Operators: Perform operations on variables and values. Examples include arithmetic operators (+, -, *, /), comparison operators (==, ===, !=), and logical operators (&&, ||)  MODULE 2 (Week 3) Any questions? Be ready for our Week 4 topics