Summary of "10 B728 09M تصميم وبناء مواقع الإنترنت بكـــ م 02 فــ 05 نظم المعلومات + الشبكات الأمن السيب"

Summary of the YouTube Video:

“10 B728 09M تصميم وبناء مواقع الإنترنت بكـــ م 02 فــ 05 نظم المعلومات + الشبكات الأمن السيب”

Main Ideas and Concepts

1. Course Context and Progress

This is the 10th lecture in a web design course.
Students are expected to start working on projects by the 12th lecture.
The 12th lecture will focus on project presentations or review.
The instructor may or may not be present for the final lecture but emphasizes readiness.

2. Review of HTML Basics

HTML (Hypertext Markup Language) is the fundamental language for designing web pages.
Web pages mainly consist of two parts: the header and the body.
Tags are written with opening and closing angular brackets (e.g., <h1> and </h1>).
Covered elements include paragraphs, headings (H1 to H6), lists (ordered and unordered), images, tables, and hyperlinks.
Concepts like SEO (Search Engine Optimization) were introduced.
Proper usage of URLs for different link types (external, PDF, email, phone) was discussed.
Table formatting techniques such as merging rows and columns were explained.
Emphasis on the importance of these foundational skills for building a functional website.

3. Introduction to CSS (Cascading Style Sheets)

CSS is introduced as the language used for formatting and styling web pages.
CSS separates content (HTML) from presentation (style), allowing easier updates and consistent design.
Benefits include easier UX/UI optimization and maintaining design consistency.
CSS enables changing colors, alignment, borders, and other visual properties.

4. Three Ways to Apply CSS

Inline CSS: Style applied directly within an HTML element tag using the style attribute.
Internal CSS: Style rules written within a <style> tag inside the <head> section of the HTML document.
External CSS: Mentioned but not covered in detail to avoid confusion; styles linked from an external .css file.

5. CSS Syntax and Selectors

CSS uses selectors (e.g., p, h1, table) to target HTML elements.
Properties and values are written inside curly braces {} with a colon separating property and value (e.g., color: red;).
Semi-colons separate multiple properties; the last property can omit the semi-colon but it’s recommended to include it.
Specificity and overriding styles explained: inline styles override internal styles, which override default browser styles.

6. Practical CSS Examples

Changing text color and alignment (e.g., centering text with text-align: center;).
Styling images by adjusting width, height, and borders.
- Border properties include thickness, style (solid, dotted, dashed), and color.
- border-radius property to create rounded corners or circles (50% border-radius creates a perfect circle if width = height).
Styling tables by targeting table, th (table header), and td (table data) elements.
Use of div containers to group elements and apply background colors or other styles.

7. Tips and Best Practices

Use CSS to improve website appearance and user experience.
Avoid confusion by sticking to simple CSS usage initially.
Learn to use classes and IDs later for more specific styling.
Encourage students to practice and experiment with CSS properties.
Emphasize that CSS transforms a plain HTML structure (like an unpainted apartment) into a visually appealing website.

8. Encouragement and Closing

Students encouraged to practice and submit assignments.
Instructor expresses hope for students’ success and prays for blessings.
The session ends with a motivational note on the importance of learning and applying these skills.

Detailed Methodology / Instructions Presented

How to Apply CSS

Inline Style:

```html

This is a brown paragraph.

```

Internal Style (within <head>):

```html p { color: red; text-align: center; } h5 { color: blue; }

```

CSS Syntax:
- Format: Selector { property: value; property2: value2; }
- Example:
css p { color: red; text-align: center; }

Styling Images

Set width and height:

css img { width: 200px; height: 200px; }

Add border:

css img { border: 5px solid green; /* thickness, style, color */ }

Rounded corners / circle:

css img { border-radius: 50%; /* circle if width = height */ }

Styling Tables

Target table and headers:

css table { width: 100%; background-color: lightgray; } th { background-color: darkgray; }

Text Alignment

Use text-align property with values like left, right, or center:

css p { text-align: center; }

Using Multiple Styles and Overriding

Inline styles override internal styles.
Specific selectors target specific elements.
Example:

```html

This paragraph is blue.

```

Overrides:

css p { color: red; }

Speakers / Sources

Primary Speaker: The course instructor (referred to as “Doctor” or “Engineer” by students).
Students/Participants: Various students including:
- Engineer Rawya
- Engineer Rahaf
- Engineer Khawla
- Engineer Ali
- Khalil Al-Tarnet Tight (mentioned briefly)
- Hassan (mentioned in context of inline CSS)
Audience: Approximately 200 male and female students attending the lecture.