Introduction to Web Development: Structure, Content, and Core Technologies
مقدمة عن تطوير الويب، الطبقات الثلاث (Front-End, Back-End, Database)، وبنية HTML الأساسية.
ملخص المحاضرة
Lecture 1: Introduction to Web Development: Structure, Content, and Core Technologies
This lecture introduces the foundational concepts of web development, focusing on the three main layers of any web application: Front-End, Back-End, and Database Management. It then dives deep into the structure and essential tags of HTML, the backbone of web content.
1. Overview of Web Development
Web development is the process of creating and maintaining websites and web applications. It's broadly categorized into three areas:
- Front-End Development (What the user sees): Focuses on the User Interface (UI) and User Experience (UX). It accounts for approximately 20% of the total effort but provides high user value. Technologies include HTML, CSS, and JavaScript.
- Back-End Development (What the user doesn't see): Handles server-side logic, databases, and application business logic. It accounts for about 80% of the total effort and is often more repetitive. Languages include PHP, Node.js, Python, Ruby, and Java.
- Database Management: Systems like MySQL, PostgreSQL, and MongoDB are used to store and manage all application data.
2. Web Browsers and HTML Rendering
Web browsers (like Chrome, Firefox, Opera) act as the gateway between the user and the internet. They interpret different types of content:
- HTML Rendering: The browser interprets the HTML code to create the Document Object Model (DOM), which represents the page's structure.
- CSS Rendering: Applies CSS styles to format and style elements (colors, fonts, layout).
- JavaScript Execution: Runs embedded JavaScript code to enable interactivity and dynamic content.
3. HTML Document Structure
Every basic HTML document follows a strict structure defined by four main components:
<!DOCTYPE html>: The document type declaration, defining the HTML version (HTML5).<html>: The root element that wraps all content.<head>: Contains non-visible metadata, such as the page title (<title>), character set (<meta charset="UTF-8">), and links to external resources (e.g., stylesheets via<link>).<body>: Contains the visible content of the web page, including headings, paragraphs, images, and other elements.
4. Essential HTML Tags
The content within the <body> is structured using essential tags:
- Headings:
<h1>to<h6>.<h1>represents the highest level of heading (largest size and highest importance), and<h6>represents the lowest. - Paragraphs: The
<p>tag is used for organizing text content into logical paragraphs. - Lists:
<ul>(Unordered List): Creates a bulleted list.<ol>(Ordered List): Creates a numbered list.<li>(List Item): Defines an individual item within either an<ul>or<ol>.
- Text Formatting (Legacy): The
<b>tag (bold) and<i>tag (italic) are demonstrated for formatting text within a paragraph.