P-Elec-2-Week-1-5 PDF

P Elec 2 – Web Systems Development Week 1: Introduction to Web Development Class Objectives: Understand the basics of web development. Set up a development environment. Learn about HTML, CSS, and JavaScript. Key Concepts: Web Development: The process of cre...

P Elec 2 – Web Systems Development Week 1: Introduction to Web Development Class Objectives: Understand the basics of web development. Set up a development environment. Learn about HTML, CSS, and JavaScript. Key Concepts: Web Development: The process of creating websites or web applications. Client vs. Server: The client is your browser, and the server is where the website's files are stored. HTML, CSS, JavaScript Overview: o HTML (Hypertext Markup Language): The structure of the webpage. o CSS (Cascading Style Sheets): The design and layout of the webpage. o JavaScript: The functionality and interactivity of the webpage. Setup Activities: Install VS Code: A popular code editor. Browser Setup: Google Chrome or Firefox recommended. Basic Project Structure: o Create a folder for your project. o Create index.html, style.css, and script.js files. Example Code: html Copy code  My First Webpage Welcome to Web Development This is an introduction to HTML, CSS, and JavaScript. Assignment: Create a basic HTML page with a heading and a paragraph introducing yourself. Week 2: HTML Basics Class Objectives: Learn the basic structure of an HTML document. Understand commonly used HTML elements. Key Concepts: HTML Tags: Used to create elements like headings, paragraphs, links, images, and lists. Attributes: Provide additional information about elements, such as href for links. Common HTML Elements: Headings: to Paragraphs: Links: Link text Images: Lists: (unordered), (ordered), (list item) Example Code: html Copy code  HTML Basics HTML Basics This is a paragraph explaining HTML. Visit Example Item 1 Item 2 Assignment: Create a webpage about your favorite hobby, using headings, paragraphs, links, and images. Week 3: HTML Forms and Tables Class Objectives: Learn how to create forms and tables. Understand form inputs and table structure. Key Concepts: Forms: Used to collect user input. Common elements include , , and. Tables: Organized data in rows and columns using , , , and. Example Code: html Copy code Contact Form Name: Email: Submit Simple Table Item Price Apple $1.00 Assignment: Build a form that collects user information (name, email, message). Create a table displaying product information. Week 4: CSS Basics Class Objectives: Learn the basics of CSS for styling HTML elements. Understand how to use selectors, properties, and values. Key Concepts:  Selectors: Target HTML elements to apply styles (e.g., body, h1,.class, #id). Properties and Values: Define the style (e.g., color, font-size, background-color). Example Code: css Copy code body { font-family: Arial, sans-serif; } h1 { color: blue; } p{ font-size: 16px; color: gray; } html Copy code CSS Basics Styling with CSS This text is styled with CSS.  Assignment: Style your webpage with colors, font sizes, and different text styles. Week 5: CSS Box Model and Layouts Class Objectives: Understand the CSS box model. Learn to manipulate margins, borders, padding, and content. Key Concepts: Box Model: Describes how elements are structured with content, padding, border, and margin. Layout Properties: display, position, float, clear. Example Code: css Copy code.box { width: 300px; padding: 20px; border: 1px solid black; margin: 10px; } html Copy code This is a box model example. Assignment: Create a card layout with images and text, applying the box model concepts. The Internet and the World Wide Web The Internet is a global network of interconnected computers that communicate using a standard set of protocols. It's like a vast, interconnected web of information, allowing people to access and share data from anywhere in the world. The World Wide Web (WWW) is a system of interconnected hypertext documents accessed through the Internet. It's a way to organize and access information on the Internet using hyperlinks, which are clickable links that take you to other related pages. HTML: The Building Blocks of Web Pages HTML (HyperText Markup Language) is the standard markup language for creating web pages. It's used to structure content on a web page, such as text, images, links, and more. HTML elements are defined by tags, which are enclosed in angle brackets (). For example, and are used to define a paragraph. CSS: Styling Web Pages CSS (Cascading Style Sheets) is a language used to style HTML elements. It allows you to control the appearance of your web page, including colors, fonts, layout, and more. CSS rules are written in a syntax similar to HTML, with selectors, properties, and values. CSS Box Model and Layout The CSS Box Model is a conceptual model that represents each HTML element as a box. This box is made up of four main parts: Content: The area that contains the text, images, or other content of the element. Padding: The space between the content and the border. Border: The outline that surrounds the content and padding. Margin: The space outside the border, separating the element from other elements. Understanding the CSS Box Model is essential for creating well-structured and visually appealing web pages. Layout in CSS refers to how elements are arranged on a web page. CSS provides various properties and techniques for controlling layout, such as: Block-level elements: These elements take up the full width of their container and create new lines. Examples include , , and. Inline elements: These elements only take up the space they need and don't create new lines. Examples include and. Flexbox: A powerful layout system that allows you to arrange items in a flexible way. Grid: Another layout system that provides a grid-based structure for arranging elements. By understanding these concepts, you can effectively design and create visually appealing web pages.