Upload 17 files

ai_forward.py

@@ -0,0 +1,227 @@
+import requests
+import json
+import re
+from typing import Optional, List, Dict, Any
+
+class AIForwarder:
+    def __init__(self, api_url: str, system_prompt_file: str = "summary.txt"):
+        """
+        Initialize the AI Forwarder
+
+        Args:
+            api_url: The API endpoint URL
+            system_prompt_file: Path to the file containing system prompt
+        """
+        self.api_url = api_url
+        self.system_prompt = self._load_system_prompt(system_prompt_file)
+
+    def _load_system_prompt(self, file_path: str) -> str:
+        """Load system prompt from file"""
+        try:
+            with open(file_path, 'r', encoding='utf-8') as f:
+                content = f.read().strip()
+                print(f"✓ System prompt loaded from {file_path}")
+                return content
+        except FileNotFoundError:
+            print(f"⚠ Warning: {file_path} not found. Using default prompt.")
+            return self._get_default_prompt()
+
+    def _get_default_prompt(self) -> str:
+        """Default system prompt for sheet forwarding"""
+        return """You are an AI assistant that helps users access different sheets.
+When a user requests a specific sheet number, respond with the format: <forward>NUMBER</forward>
+For example:
+- User: "I want sheet 3" → Response: "<forward>3</forward>"
+- User: "Show me sheet number 5" → Response: "<forward>5</forward>"
+- User: "Can I see the second sheet?" → Response: "<forward>2</forward>"
+
+Always extract the sheet number from the user's request and format it properly."""
+
+    def _extract_sheet_number(self, response: str) -> Optional[int]:
+        """Extract sheet number from AI response"""
+        match = re.search(r'<forward>(\d+)</forward>', response)
+        if match:
+            return int(match.group(1))
+        return None
+
+    def _clean_chat_history(self, chat_history: List[Dict[str, Any]]) -> List[Dict[str, Any]]:
+        """
+        Remove any existing system messages from chat history
+
+        Args:
+            chat_history: Original chat history
+
+        Returns:
+            Cleaned chat history without system messages
+        """
+        cleaned = []
+        for message in chat_history:
+            # Skip system messages
+            if message.get("role") != "system":
+                cleaned.append(message)
+        return cleaned
+
+    def process_chat_history(
+        self,
+        chat_history: List[Dict[str, Any]],
+        temperature: float = 0.9,
+        top_p: float = 0.95,
+        max_tokens: Optional[int] = 1000
+    ) -> Dict[str, Any]:
+        """
+        Process chat history and get AI response
+        This is the main function to use when importing this module
+
+        Args:
+            chat_history: List of chat messages with roles (user/assistant)
+                         Example: [
+                             {"role": "user", "content": "I want sheet 3"},
+                             {"role": "assistant", "content": "Sure!"},
+                             {"role": "user", "content": "Show me sheet 5"}
+                         ]
+            temperature: Sampling temperature
+            top_p: Nucleus sampling parameter
+            max_tokens: Maximum tokens to generate
+
+        Returns:
+            Dictionary with response and extracted sheet number
+        """
+        # Clean chat history (remove any system messages)
+        cleaned_history = self._clean_chat_history(chat_history)
+
+        # Add our system prompt at the beginning
+        final_history = [{"role": "system", "content": self.system_prompt}]
+        final_history.extend(cleaned_history)
+
+        # Prepare request payload
+        payload = {
+            "user_input": None,  # No user input, using chat history
+            "chat_history": final_history,
+            "temperature": temperature,
+            "top_p": top_p,
+        }
+
+        try:
+            # Send request to API
+            response = requests.post(
+                self.api_url,
+                json=payload,
+                headers={"Content-Type": "application/json"},
+                timeout=30
+            )
+            response.raise_for_status()
+
+            # Parse response
+            result = response.json()
+            assistant_response = result.get("assistant_response", "")
+
+            # Extract sheet number if present
+            sheet_number = self._extract_sheet_number(assistant_response)
+
+            return {
+                "success": True,
+                "response": assistant_response,
+                "sheet_number": sheet_number,
+                "raw_response": result
+            }
+
+        except requests.exceptions.RequestException as e:
+            return {
+                "success": False,
+                "error": str(e),
+                "response": None,
+                "sheet_number": None
+            }
+
+    def forward_single_message(
+        self,
+        user_input: str,
+        previous_history: Optional[List[Dict[str, Any]]] = None
+    ) -> Dict[str, Any]:
+        """
+        Forward a single user message (with optional previous history)
+
+        Args:
+            user_input: User's message
+            previous_history: Optional previous chat history
+
+        Returns:
+            Dictionary with response and sheet number
+        """
+        chat_history = previous_history.copy() if previous_history else []
+        chat_history.append({"role": "user", "content": user_input})
+
+        return self.process_chat_history(chat_history)
+
+
+# Standalone testing
+if __name__ == "__main__":
+    # Initialize forwarder
+    api_url = "https://dooratre-xx-gpt-5.hf.space/chat"
+    forwarder = AIForwarder(api_url)
+
+    print("\n" + "="*50)
+    print("AI Sheet Forwarder - Testing Mode")
+    print("="*50 + "\n")
+
+    # Test with chat history
+    print("Test 1: Processing chat history")
+    print("-" * 50)
+
+    test_history = [
+        {"role": "user", "content": "Hello!"},
+        {"role": "assistant", "content": "Hi! How can I help you?"},
+        {"role": "user", "content": "I want sheet number 3"}
+    ]
+
+    result = forwarder.process_chat_history(test_history)
+
+    if result["success"]:
+        print(f"AI Response: {result['response']}")
+        if result["sheet_number"]:
+            print(f"✓ Sheet {result['sheet_number']} detected")
+    else:
+        print(f"✗ Error: {result['error']}")
+
+    print("\n" + "="*50)
+    print("Interactive Mode (type 'quit' to exit)")
+    print("="*50 + "\n")
+
+    conversation_history = []
+
+    while True:
+        try:
+            user_input = input("YOU: ").strip()
+
+            if user_input.lower() == 'quit':
+                print("Goodbye!")
+                break
+
+            if not user_input:
+                continue
+
+            # Add user message to history
+            conversation_history.append({"role": "user", "content": user_input})
+
+            # Process the conversation
+            result = forwarder.process_chat_history(conversation_history)
+
+            if result["success"]:
+                print(f"AI: {result['response']}")
+
+                # Add assistant response to history
+                conversation_history.append({
+                    "role": "assistant",
+                    "content": result['response']
+                })
+
+                if result["sheet_number"]:
+                    print(f"✓ Sheet {result['sheet_number']} requested\n")
+            else:
+                print(f"✗ Error: {result['error']}\n")
+
+        except KeyboardInterrupt:
+            print("\n\nGoodbye!")
+            break
+        except Exception as e:
+            print(f"✗ Unexpected error: {e}\n")

data/1.txt

@@ -0,0 +1,138 @@
+
+-------- Page 1 (1-01.jpg) ---------
+Faculty of Information Technology – Tripoli University
+
+مقدمة في برمجة الإنترنت
+Introduction to Internet
+Programming
+
+[ ITGS226 ]
+
+المحاضرة الأولى
+
+أ. وفاء حسين المصباحي
+أستاذة المادة
+
+CSS3  HTML5  JS  Cloud  XML  flat  PHP
+header  .com  footer  .net
+
+ربيع 2025
+
+-------- Page 2 (1-02.jpg) ---------
+المواضيع التي سيتم دراستها في مقرر :
+مقدمة في برمجة الإنترنت
+Introduction to Internet Programming
+
+1  HTML  ->  Hyper Text Markup Language.
+
+☐  CSS  ->  Cascading Style Sheets.
+
+☐  JavaScript.
+
+-------- Page 3 (1-03.jpg) ---------
+References المراجع
+
+Books:
+
+▪ HTML, CSS, & JavaScript® All-in-One For Dummies®
+
+Published by: John Wiley & Sons, Inc., 111 River Street, Hoboken, NJ 07030-5774, www.wiley.com
+
+Copyright © 2023 by John Wiley & Sons, Inc., Hoboken, New Jersey Published simultaneously in Canada.
+
+Websites:
+
+▪ w3schools.com
+
+▪ tutorialrepublic.com
+
+▪ elzero.org
+
+1
+
+-------- Page 4 (1-04.jpg) ---------
+Evaluation  التقييم
+
+Mid-term Exam        35%
+Assignments          10%
+Final Practical Exam 15%
+Final Exam           40%
+
+2
+
+-------- Page 5 (1-05.jpg) ---------
+How to access to the web      كيفية الوصول إلى الويب
+
+➤ Browser:
+    By typing web address or following a link.
+
+➤ Web servers:
+    Special computer that hosts the website.
+
+➤ Devices:
+    Accessing websites on various devices: desktop computers, laptops, tablets, and mobile phones.
+
+3
+
+-------- Page 6 (1-06.jpg) ---------
+Terminologies المصطلحات
+
+➤ WEBSITE: a collection of one or more web pages linked together in a meaningful way that, as a whole, describes a body of information.
+
+➤ WEB PAGE: a single document on a website, usually consisting of HTML document and any items that are displayed within that document, such as inline images.
+
+➤ HOME PAGE: The entry page for a website, which can link to additional pages on the same website or pages on other sites.
+
+➤ WEB BROWSER: is an application which is used to view pages and navigate the World Wide Web. Popular examples: Firefox, Internet Explorer, Safari, Chrome, and Opera.
+
+4
+
+-------- Page 7 (1-07.jpg) ---------
+Terminologies المصطلحات cont’d
+
+➤ WEB SERVER: is a program runs on a computer, responsible for replying to web browser requests for whatever content is associated with a particular URL.
+
+➤ UNIFORM RESOURCE LOCATOR (URL): provides a universal, consistent method for finding and accessing information. URL is an address that points to a specific document or bit of information on the Internet. For example, http://www.google.com).
+
+➤ DOMAIN NAME SERVICE (DNS): is an additional Internet service which is used by the browser to find the IP address of any requested web server.
+
+➤ HYPER TEXT TRANSFER PROTOCOL (HTTP): is a communication standard governing the requests and responses that take place between the browser running on the end user’s computer and the web server.
+
+5
+
+-------- Page 8 (1-08.jpg) ---------
+HTML  &   CSS
+
+Web
+
+HTML
+لبناء هيكل الموقع
+
+Web
+
+HTML
+CSS
+لتنسيق هيكل الموقع و
+إضافة الألوان و ...
+
+6
+
+-------- Page 9 (1-09.jpg) ---------
+HTML   &   CSS
+
+web
+انشاء و برمجة المواقع
+
+Front End
+تصميم المواقع
+
+Back End
+برمجة المواقع
+
+أول خطوة ليك
+HTML
+
+-------- Page 10 (1-10.jpg) ---------
+Thank you
+
+    

data/10.txt

@@ -0,0 +1,929 @@
+
+-------- Page 1 (Lecture #10-01.jpg) ---------
+Faculty of Information Technology – Tripoli University
+
+مقدمة في برمجة الإنترنت
+Introduction to Internet Programming
+[ ITGS226 ]
+
+المحاضرة العاشرة
+
+أستاذة المادة
+أ. وفاء حسين المصباحي
+
+HTML5
+JS
+Cloud
+XML
+CSS3
+flat
+PHP
+header
+.com
+footer
+.net
+
+2025 ربيع
+
+-------- Page 2 (Lecture #10-02.jpg) ---------
+المواضيع التي سيتم دراستها في مقرر : مقدمة في برمجة الانترنت
+Introduction to Internet Programming
+المحاضرة العاشرة
+
+CSS - Cascading Style Sheets
+
+1
+WHAT IS CSS?
+
+WHAT CAN DO WITH CSS?
+
+INCLUDING CSS
+
+INLINE STYLES
+
+INTERNAL STYLE SHEETS
+
+EXTERNAL STYLE SHEETS
+
+-------- Page 3 (Lecture #10-03.jpg) ---------
+CSS SYNTAX
+
+COMMENTS IN CSS
+
+CASE SENSITIVITY IN CSS
+
+CSS SELECTORS
+
+CSS COLOR
+
+CSS BACKGROUND
+
+Examples
+
+-------- Page 4 (Lecture #10-04.jpg) ---------
+CSS - Cascading Style Sheets
+
+WHAT IS CSS?
+
+• CSS is the key presentational technology that is used in website design.
+• CSS stands for Cascading Style Sheets.
+• CSS is a standard style sheet language used for describing the presentation (i.e. the layout and formatting) of the web pages.
+• CSS was designed to enable the separation of presentation and content.
+• CSS3 is the latest version of the CSS specification.
+• CSS3 adds several new styling features and improvements to enhance the web presentation capabilities.
+
+1
+
+-------- Page 5 (Lecture #10-05.jpg) ---------
+CSS - Cascading Style Sheets
+
+WHAT CAN DO WITH CSS?
+
+• Easily apply same style rules on multiple elements.
+
+• Control the presentation of multiple pages of a website with a single style sheet.
+
+• Change the position of an element on a web page without changing the markup.
+
+• Alter the display of existing HTML elements.
+
+• Create animations and transitions effects without using any JavaScript.
+
+• Create print friendly version of your web pages.
+
+2
+
+-------- Page 6 (Lecture #10-06.jpg) ---------
+CSS - Cascading Style Sheets
+
+INCLUDING CSS
+
+• CSS can either be attached as a separate document or embedded in the HTML document itself.
+
+• There are three methods of including CSS in an HTML document:
+
+  ○ Inline styles — Using the style attribute in the HTML start tag.
+
+  ○ Embedded styles — Using the <style> element in the head section of a document.
+
+  ○ External style sheets — Using the <link> element, pointing to an external CSS file.
+
+Note:
+
+- The inline styles have the highest priority, and the external style sheets have the lowest.
+
+- Among all the three methods, using external style sheet is the best method for defining and applying styles to the HTML documents
+
+3
+
+-------- Page 7 (Lecture #10-07.jpg) ---------
+CSS - Cascading Style Sheets
+
+INLINE STYLES
+
+- Inline styles are used to apply the unique style rules to an element by putting the CSS rules directly into the start tag.
+
+- It can be attached to an element using the style attribute.
+
+<h1 style="color:red; font-size:30px;">
+    This is a heading
+</h1>
+
+<p style="color:green; font-size:22px;">
+    This is a paragraph.
+</p>
+
+<div style="color:blue; font-size:14px;">
+    This is some text content.
+</div>
+
+- Using the inline styles are generally considered as a bad practice. As it causes the presentation to become mixed with the content of the document; which negates the purpose of using CSS.
+
+4
+
+-------- Page 8 (Lecture #10-08.jpg) ---------
+CSS - Cascading Style Sheets
+
+INTERNAL STYLE SHEETS
+
+• Embedded style sheets are defined in the <head> section of an HTML document using the <style> element.
+
+<head>
+…………
+
+<title>My HTML Document</title>
+
+<style>
+  body { background-color: YellowGreen; }
+  p    { color: #fff; }
+</style>
+
+…………
+
+</head>
+
+5
+
+-------- Page 9 (Lecture #10-09.jpg) ---------
+CSS - Cascading Style Sheets
+
+EXTERNAL STYLE SHEETS
+
+• An external style sheet is ideal when the style is applied to many pages of the website.
+
+• An external style sheet holds all the style rules in a separate document that you can link from any HTML file on your site.
+
+• External style sheets are the most flexible because with an external style sheet, you can change the look of an entire website by changing just one file.
+
+• An external style sheet can be linked to an HTML document using the <link> tag. The <link> tag goes inside the <head> section.
+
+
+<head>
+............
+    <title>My HTML Document</title>
+
+    <link rel="stylesheet" type="text/css" href="..........css">
+
+............
+</head>
+
+6
+
+-------- Page 10 (Lecture #10-10.jpg) ---------
+CSS - Cascading Style Sheets
+
+CSS SYNTAX
+
+• A CSS rule have two main parts, a selector and one or more declarations:
+
+selector {
+    property:value;
+    property:value;
+    property:value;
+    …
+}
+
+h1 { color: blue; text-align: center; }
+
+• The selector specifies which element or elements in the HTML page the CSS rule applies to.
+
+• The declarations within the block determines how the elements are formatted on a webpage.
+
+• Each declaration consists of a property and a value separated by a colon (:) and ending with a semicolon (;), and the declaration groups are surrounded by curly braces {}.
+
+7
+
+-------- Page 11 (Lecture #10-11.jpg) ---------
+CSS - Cascading Style Sheets
+
+CSS SYNTAX
+
+- The property is the style attribute you want to change; they could be font, color, background, etc.
+
+- Each property has a value, for example color property can have value either blue or #0000FF etc.
+
+    h1 {color:blue; text-align:center;}
+
+- h1 is a selector, color and text-align are the CSS properties, and the given blue and center are the corresponding values of these properties.
+
+- A CSS declaration always ends with a semicolon ";", and the declaration groups are always surrounded by the curly brackets "{}".
+
+-------- Page 12 (Lecture #10-12.jpg) ---------
+CSS - Cascading Style Sheets
+
+COMMENTS IN CSS
+
+- A CSS comment begins with /*, and ends with */
+
+- Comments are usually added with the purpose of making the source code easier to understand. It may help other developer (or you in the future when you edit the source code) to understand what you were trying to do with the CSS.
+
+- Comments are significant to programmers but ignored by browsers.
+
+div {
+    background-attachment: fixed;      /* default value: scroll */
+}
+
+-------- Page 13 (Lecture #10-13.jpg) ---------
+CSS - Cascading Style Sheets
+
+CASE SENSITIVITY IN CSS
+
+• CSS property names and many values are not case-sensitive.
+
+• Whereas, CSS selectors are usually case-sensitive.
+
+• Therefore, to be on safer side, you should assume that all components of CSS rules are case-sensitive.
+
+10
+
+-------- Page 14 (Lecture #10-14.jpg) ---------
+CSS - Cascading Style Sheets
+
+CSS SELECTORS
+
+- Selectors are one of the most important aspects of CSS as they allow you to target specific elements on your web page in various ways so that they can be styled.
+
+- Several types of selectors are available in CSS:
+
+1. Universal Selector
+
+• The universal selector, denoted by an asterisk (*), matches every single element on the page.
+
+    * { margin: 0; padding: 0; }
+
+• The style rules inside the * selector will be applied to every element in a document.
+
+• It is recommended not to use the universal selector (*) too often, Use element type or class selector instead.
+
+2. Element Type Selectors
+
+    p { color: blue; }
+
+• The style rules inside the p selector will be applied on every <p> element (or paragraph) in the document and color it blue, regardless of their position in the document tree.
+
+11
+
+-------- Page 15 (Lecture #10-15.jpg) ---------
+CSS - Cascading Style Sheets
+
+CSS SELECTORS
+
+3.    Id Selectors
+      • The id selector is used to define style rules for a single or unique element.
+      • The id selector is defined with a hash sign (#) immediately followed by the id value.
+            #error { color: red; }
+      • This style rule renders the text of an element in red, whose id attribute is set to error.
+
+4.    Class Selectors
+      • The class selectors can be used to select any HTML element that has a class attribute. All
+        the elements having that class will be formatted according to the defined rule.
+      • The class selector is defined with a period sign (.) immediately followed by the class value.
+            .blue { color: blue; }
+      • The above style rules renders the text in blue of every element in the document that
+        has class attribute set to blue.
+            p.blue { color: blue; }
+      • The style rule inside the selector p.blue renders the text in blue of only those <p> elements
+        that has class attribute set to blue, and has no effect on other paragraphs.
+
+-------- Page 16 (Lecture #10-16.jpg) ---------
+CSS - Cascading Style Sheets
+
+CSS SELECTORS
+
+5.    Grouping Selectors
+
+•    Often several selectors in a style sheet share the same style rules declarations. You can group them into a comma-separated list to minimize the code in your style sheet. It also prevents you from repeating the same style rules over and over again.
+
+        h1, h2, h3 { font-weight: normal; }
+
+•    The same style rule font-weight: normal; is shared by the selectors h1, h2 and h3, so it can be grouped in a comma-separated list.
+
+13
+
+-------- Page 17 (Lecture #10-17.jpg) ---------
+CSS - Cascading Style Sheets
+
+CSS COLOR
+
+- The color property defines the text color of an element.
+
+- Colors in CSS most often specified in the following formats:
+  • a color keyword - like "red", "green", "blue", "transparent", etc.
+    h1 { color: red; }
+  • a HEX value - like "#ff0000", "#00ff00", etc.
+    p { color: #00ff00; }
+  • an RGB value - like "rgb(255, 0, 0) "
+    h1 { color: rgb(255, 165, 0); }
+
+- The color names are case-insensitive.
+- The color property normally inherits the color value from their parent element,
+- rgb(255, 255, 255) ----- the color would be white.
+- rgb(0, 0, 0) ----- the color would be black.
+
+14
+
+-------- Page 18 (Lecture #10-18.jpg) ---------
+CSS - Cascading Style Sheets
+
+CSS BACKGROUND
+
+• CSS provide several properties for styling the background of an element.
+
+• The background-color property is used to set the background color of an element ( + opacity property).
+  background-color:#CF1A11;
+
+• The background-image property set an image as a background of an HTML element. By default browser repeats the background image both horizontally and vertically to fill the entire area of an element.
+  background-image:url(‘image.jpg’);
+
+• The background-repeat property allows you to control how a background image is repeated in the background of an element. The background image can be repeated horizontally (x-axis) using repeat-x or vertically (y-axis) using repeat-y preventing the repetition using no-repeat. Space and round are other values to specify repetition.
+  background-repeat:no-repeat;
+  background-repeat:repeat;
+  background-repeat:repeat-x;
+  background-repeat:repeat-y;
+
+15
+
+-------- Page 19 (Lecture #10-19.jpg) ---------
+CSS - Cascading Style Sheets
+
+CSS BACKGROUND
+
+• The background-position property is used to specify the position of the background image.
+
+background-position:center center;
+background-position:center top;
+background-position:center bottom;
+background-position:left top;
+background-position:left center;
+background-position:left bottom;
+background-position:right top;
+background-position:right center;
+background-position:right bottom;
+
+top left     top center     top right
+center left  center center  center right
+bottom left  bottom center  bottom right
+
+• The background-clip property defines how far the background (color or image) should extend within an element. It has the values: border-box, padding-box or content-box.
+
+• The background-origin property specifies the origin position (the background positioning area) of a background image. It has the same values of the clip property.
+
+16
+
+-------- Page 20 (Lecture #10-20.jpg) ---------
+CSS - Cascading Style Sheets
+
+CSS BACKGROUND
+
+• The background-size property Specifies the size of the background image(s). It has four values: auto (original size), cover (resize to cover the container), contain (fully visible), length (width and height) or percentage (% of the parent).
+
+div {
+
+    background-size: cover;     /* default value: auto */
+
+    background-size: contain;
+
+}
+
+background-size:
+
+auto;        50% 100%;        cover;        contain;
+
+-------- Page 21 (Lecture #10-21.jpg) ---------
+CSS - Cascading Style Sheets
+
+CSS BACKGROUND
+
+• The background-shorthand property to specify all the background properties in one single property. When using the shorthand property the order of the property values is: background-color, background-image, background-repeat, background-attachment then background-position.
+
+• The background-attachment property specifies whether the background image should scroll or be fixed.
+
+div {
+    background-attachment: fixed;     /* default value: scroll */
+}
+
+18
+
+-------- Page 22 (Lecture #10-22.jpg) ---------
+CSS - Cascading Style Sheets
+
+CSS BACKGROUND NOTES
+
+• By default, a background-image is placed at the top-left corner of an element. Other values such as Left top, right center and center bottom. If you only specify one keyword, the other value will be “center“. The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. Default value when using percentage is: 0% 0%
+
+• If two values are specified for the background-position property, the first value represents the horizontal position, and the second represents the vertical position. If only one value is specified, the second value is assumed to be center.
+
+• It does not matter if one of the property values is missing in the background shorthand, as long as the other ones are in this order.
+
+19
+
+-------- Page 23 (Lecture #10-23.jpg) ---------
+Example 1 :  INTERNAL STYLE SHEETS  -  Class Selectors - Element Type Selectors
+
+<html lang="en">
+    <head>
+        <title> صفحة اختبار لخصائص الخلفية </title>
+        <meta charset='utf-8'>
+        <style type="text/css">
+            .firstP{
+                background-color:black;
+                color:white;
+            }
+            .secondP{
+                background-image:url('myPic.jpg');
+                background-repeat:no-repeat;
+                background-positive:center center;
+            }
+            p{direction:rtl;}
+        </style>
+    </head>
+    <body>
+        <p class="firstP">
+            العنصر الأول سيبدو بخلفية سوداء ولون نص أبيض
+        </p>
+        <p class="secondP">
+            العنصر الثاني سيبدو بخلفية صورية ولونها <br/><br/>
+            العنصر الثاني سيبدو بخلفية صورية ولونها <br/><br/>
+            <br/>
+            المساحة الكافية لعرض صورة الخلفية
+        </p>
+    </body>
+</html>
+
+20
+
+-------- Page 24 (Lecture #10-24.jpg) ---------
+( program#49.html ) عملي
+
+EXPLORER
+HTML LANGUAGE
+program#36.html
+program#37.html
+program#38.html
+program#39.html
+program#40.html
+program#41.html
+program#42.html
+program#43.html
+program#44.html
+program#45.html
+program#46.html
+program#47.html
+program#48.html
+program#49.html
+
+program#49.html 1
+program#49.html
+html
+head
+style
+
+<html lang="en">
+  <head>
+    <title> صفحة اختبار لخصائص الخلفية </title>
+    <meta charset='utf-8'>
+    <style type="text/css">
+      .firstP{
+        background-color:black;
+        color:white;
+      }
+      .secondP{
+        background-image:url('myPic.jpg');
+        background-repeat:no-repeat;
+        background-position:center center;
+      }
+      p{direction:rtl;}
+    </style>
+  </head>
+  <body>
+    <p class="firstP">
+      العنصر الأول سيبدو بخلفية سوداء، ولون نص أبيض
+    </p>
+
+-------- Page 25 (Lecture #10-25.jpg) ---------
+( program#49.html ) عملي
+
+صفحة اختبار لخصائص الخلف
+
+العنصر الاول سندر بخلفية سوداء وبلون نص أبيض
+
+العنصر الثاني سندر بخلفية صورة ولونها
+
+العنصر الثاني سندر بخلفية صورة ولونها
+
+المساحة الكافية لعرض صورة الخلفية
+
+22
+
+-------- Page 26 (Lecture #10-26.jpg) ---------
+Example 2 :  INLINE STYLES
+
+<html lang="en">
+  <head>
+    <title>  صفحة اختبار  </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+
+    <h1 style="color:red; font-size:30px;">
+      This is a heading
+    </h1>
+
+    <p style="color:green; font-size:22px;">
+      This is a paragraph.
+    </p>
+
+    <div style="color:blue; font-size:14px;">
+      This is some text content.
+    </div>
+
+  </body>
+</html>
+
+23
+
+-------- Page 27 (Lecture #10-27.jpg) ---------
+( program#50.html ) عملي
+
+EXPLORER
+HTML LANGUAGE
+program#36.html
+program#37.html
+program#38.html
+program#39.html
+program#40.html
+program#41.html
+program#42.html
+program#43.html
+program#44.html
+program#45.html
+program#46.html
+program#47.html
+program#48.html
+program#49.html
+program#50.html
+
+OUTLINE
+TIMELINE
+
+program#50.html  x
+
+program#50.html  html  HTML
+
+1  <html lang="en">
+2  <head>
+3      <title> صفحة اختبار </title>
+4      <meta charset='utf-8'>
+5  </head>
+6  <body>
+7      <h1 style="color: red; font-size:30px;">
+8          This is a heading
+9      </h1>
+10 
+11     <p style="color: green; font-size:22px;">
+12         This is a paragraph.
+13     </p>
+14 
+15     <div style="color: blue; font-size:14px;">
+16         This is some text content.
+17     </div>
+18 
+19 </body>
+20 </html>
+
+File  Edit  Selection  …
+HTML language
+
+Ln 2, Col 11     Spaces: 4     UTF-8     CRLF     HTML
+
+24
+0  0  0
+
+-------- Page 28 (Lecture #10-28.jpg) ---------
+( program#50.html ) عملي
+
+This is a heading
+This is a paragraph.
+This is some text content.
+
+-------- Page 29 (Lecture #10-29.jpg) ---------
+Example 3 : INTERNAL STYLE SHEETS - Id Selectors
+
+<html lang="en">
+    <head>
+        <title> صفحة اختبار </title>
+        <meta charset=‘utf-8’>
+        <style type="text/css">
+            #test1{
+                background-color:green;
+                font-size:30px;
+                color:white;
+            }
+            #test2{
+                color:red;
+                font-size:22px;
+            }
+        </style>
+    </head>
+    <body>
+        <h1 id="test1">This is a heading</h1>
+        <p id="test2">This is a paragraph.</p>
+    </body>
+</html>
+
+26
+
+-------- Page 30 (Lecture #10-30.jpg) ---------
+( program#51.html ) عملي
+
+EXPLORER
+
+HTML LANGUAGE
+program#38.html
+program#39.html
+program#40.html
+program#41.html
+program#42.html
+program#43.html
+program#44.html
+program#45.html
+program#46.html
+program#47.html
+program#48.html
+program#49.html
+program#50.html
+program#51.html
+
+OUTLINE
+TIMELINE
+
+program#51.html  html > body > p#test2
+<html lang="en">
+  <head>
+    <title> صفحة اختبار </title>
+    <meta charset='utf-8'>
+    <style type="text/css">
+      #test1{
+        background-color: green;
+        font-size:30px;
+        color: white;
+      }
+
+      #test2{
+        color: red;
+        font-size:22px;
+      }
+    </style>
+  </head>
+  <body>
+    <h1 id="test1">This is a heading</h1>
+    <p id="test2">This is a paragraph.</p>
+  </body>
+</html>
+
+Ln 19, Col 16    Spaces: 4    UTF-8    CRLF    HTML
+
+27
+
+-------- Page 31 (Lecture #10-31.jpg) ---------
+( program#51.html ) عملي
+
+This is a heading
+
+This is a paragraph.
+
+-------- Page 32 (Lecture #10-32.jpg) ---------
+Example 4 :  EXTERNAL STYLE SHEETS
+
+<html lang="en">
+  <head>
+    <title> EXTERNAL STYLE SHEETS </title>
+    <meta charset='utf-8'>
+    <link rel="stylesheet" type="text/css" href="style.css">
+  </head>
+  <body>
+    <h1>Hello world!</h1>
+    <p>I ♥ CSS</p>
+  </body>
+</html>
+
+Style.css
+
+h1 {
+  color: green;
+  text-decoration: underline;
+}
+
+p {
+  font-size: 25px;
+  font-family: 'Trebuchet MS', sans-serif;
+}
+
+-------- Page 33 (Lecture #10-33.jpg) ---------
+( program#52.html ) عملي
+
+EXPLORER
+
+HTML LANGUAGE
+program#39.html
+program#40.html
+program#41.html
+program#42.html
+program#43.html
+program#44.html
+program#45.html
+program#46.html
+program#47.html
+program#48.html
+program#49.html
+program#50.html
+program#51.html
+program#52.html
+style.css
+
+HTML language
+
+program#52.html  style.css
+
+program#52.html > html > body
+1  <html lang="en">
+2  <head>
+3      <title> EXTERNAL STYLE SHEETS </title>
+4      <meta charset='utf-8'>
+5      <link rel="stylesheet" type="text/css" href="style.css">
+6  </head>
+7  <body>
+8      <h1>Hello world!</h1>
+9      <p>I ♥ CSS</p>
+10 </body>
+11 </html>
+
+OUTLINE
+TIMELINE
+
+Ln 8, Col 1      Spaces: 4   UTF-8   CRLF   HTML
+
+30
+
+-------- Page 34 (Lecture #10-34.jpg) ---------
+( style.css ) عملي
+
+EXPLORER
+
+HTML LANGUAGE
+program#39.html
+program#40.html
+program#41.html
+program#42.html
+program#43.html
+program#44.html
+program#45.html
+program#46.html
+program#47.html
+program#48.html
+program#49.html
+program#50.html
+program#51.html
+program#52.html
+
+style.css
+
+program#52.html  x
+style.css  x
+
+style.css  >  h1
+
+h1 {
+    color: green;
+    text-decoration: underline;
+}
+
+p {
+    font-size: 25px;
+    font-family: 'Trebuchet MS', sans-serif;
+}
+
+OUTLINE
+TIMELINE
+
+Ln 1, Col 1 (142 selected)   Spaces: 4   UTF-8   CRLF   CSS
+
+-------- Page 35 (Lecture #10-35.jpg) ---------
+( program#52.html ) عملي
+
+EXTERNAL STYLE SHEETS
+
+Hello world!
+
+I ♥ CSS
+
+-------- Page 36 (Lecture #10-36.jpg) ---------
+Example 5 : INTERNAL STYLE SHEETS
+
+<html lang="en">
+  <head>
+    <title> INTERNAL STYLE SHEETS </title>
+    <meta charset='utf-8'>
+    <style type="text/css">
+      h1 {
+        color: green;
+        text-decoration: underline;
+      }
+
+      p {
+        font-size: 25px;
+        font-family: 'Trebuchet MS', sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Hello world!</h1>
+    <p>I ♥ CSS</p>
+  </body>
+</html>
+
+33
+
+-------- Page 37 (Lecture #10-37.jpg) ---------
+( program#53.html ) عملي
+
+EXPLORER
+HTML LANGUAGE
+program#41.html
+program#42.html
+program#43.html
+program#44.html
+program#45.html
+program#46.html
+program#47.html
+program#48.html
+program#49.html
+program#50.html
+program#51.html
+program#52.html
+program#53.html
+style.css
+
+OUTLINE
+TIMELINE
+
+program#53.html
+program#53.html html head style
+1  <html lang="en">
+2  <head>
+3      <title> INTERNAL STYLE SHEETS </title>
+4      <meta charset='utf-8'>
+5      <style type="text/css">
+6          h1 {
+7              color: green;
+8              text-decoration: underline;
+9          }
+10
+11         p {
+12             font-size: 25px;
+13             font-family: 'Trebuchet MS', sans-serif;
+14         }
+15      </style>
+16  </head>
+17  <body>
+18      <h1>Hello world!</h1>
+19      <p>I ♥ CSS</p>
+20  </body>
+21
+Ln 5, Col 22   Spaces: 4   UTF-8   CRLF   HTML
+
+34
+
+-------- Page 38 (Lecture #10-38.jpg) ---------
+( program#53.html ) عملي
+
+INTERNAL STYLE SHEETS
+
+Hello world!
+
+I ♥ CSS
+
+35
+
+-------- Page 39 (Lecture #10-39.jpg) ---------
+Thank you

data/11.txt

@@ -0,0 +1,325 @@
+
+-------- Page 1 (Lecture #11-01.jpg) ---------
+Faculty of Information Technology – Tripoli University
+
+مقدمة في برمجة الإنترنت
+Introduction to Internet Programming
+
+[ ITGS226 ]
+
+المحاضرة الحادية عشر
+
+أ. وفاء حسين المصباحي
+أستاذة المادة
+
+HTML5
+JS
+Cloud
+CSS3
+XML
+flat
+PHP
+header
+.com
+footer
+.net
+
+2025 ربيع
+
+-------- Page 2 (Lecture #11-02.jpg) ---------
+المواضيع التي سيتم دراستها في مقرر : مقدمة في برمجة الإنترنت
+Introduction to Internet Programming
+المحاضرة الحادية عشر
+
+CSS - Cascading Style Sheets
+
+CSS TEXT
+
+Example
+
+-------- Page 3 (Lecture #11-03.jpg) ---------
+CSS - Cascading Style Sheets
+
+CSS TEXT
+
+- The Color property is defined by the CSS color property.
+    body {color: #434343;}
+
+- The Text Alignment property is used to set the horizontal alignment of the text. Text can be aligned in four ways: left, right, center or justify (straight left and right margins).
+    h1 { text-align: center; }
+    p  { text-align: justify; }
+
+- The Text Direction property is used to change the text direction of an element.
+    p { direction: rtl; }   /* rtl or ltr */
+
+1
+
+-------- Page 4 (Lecture #11-04.jpg) ---------
+CSS - Cascading Style Sheets
+
+CSS TEXT
+
+- The Text Vertical Alignment property sets the vertical alignment of an element. It has the values: baseline, length, sub, super, top, text-top, middle, bottom or text-bottom
+
+<p>
+top:          <img style="vertical-align: top" src="star.png" alt="star"/>
+middle:       <img style="vertical-align: middle" src="star.png" alt="star"/>
+bottom:       <img style="vertical-align: bottom" src="star.png" alt="star"/>
+super:        <img style="vertical-align: super" src="star.png" alt="star"/>
+sub:          <img style="vertical-align: sub" src="star.png" alt="star"/>
+</p>
+
+<p>
+text-top:     <img style="vertical-align: text-top" src="star.png" alt="star"/>
+text-bottom:  <img style="vertical-align: text-bottom" src="star.png" alt="star"/>
+0.2em:        <img style="vertical-align: 0.2em" src="star.png" alt="star"/>
+-1em:         <img style="vertical-align: -1em" src="star.png" alt="star"/>
+20%:          <img style="vertical-align: 20%" src="star.png" alt="star"/>
+-100%:        <img style="vertical-align: -100%" src="star.png" alt="star"/>
+</p>
+
+top:     middle:     bottom:     super:     sub:
+text-top:     text-bottom:     0.2em:     -1em:     20%:     -100%:
+2
+
+-------- Page 5 (Lecture #11-05.jpg) ---------
+CSS - Cascading Style Sheets
+
+CSS TEXT
+
+• Text decoration: the text-decoration property is used to set or remove decorations from text.
+
+   • The text-decoration-line property This used to add a decoration line to text. It typically accepts the values: underline, overline, line-through or none.
+
+   • The text-decoration-color property is used to set the color of the decoration line.
+
+   • The text-decoration-style property is used to set the style of the decoration line with the values: solid, double, dotted, dashed or wavy.
+
+   • The text-decoration-thickness is used to set the thickness of the decoration line with length or % or auto.
+
+   • The text-decoration shorthand property with the previous order above.
+
+3
+
+-------- Page 6 (Lecture #11-06.jpg) ---------
+CSS - Cascading Style Sheets
+
+Basic example
+
+HTML
+<p class="wavy">Here’s some text with wavy red underline!</p>
+<p class="both">This text has lines both above and below it.</p>
+
+CSS
+.wavy {
+    text-decoration-line: underline;
+    text-decoration-style: wavy;
+    text-decoration-color: red;
+}
+
+.both {
+    text-decoration-line: underline overline;
+}
+
+Here’s some text with wavy red underline!
+This text has lines both above and below it.
+
+-------- Page 7 (Lecture #11-07.jpg) ---------
+CSS - Cascading Style Sheets
+
+HTML
+
+<p>This text contains a <span class="spelling">speling</span> mistake.</p>
+<p class="grammar">This text contain grammatical errors.</p>
+
+CSS
+
+.spelling {
+  text-decoration-line: spelling-error;
+}
+
+.grammar {
+  text-decoration-line: grammar-error;
+}
+
+This text contains a speling mistake.
+
+This text contain grammatical errors.
+
+-------- Page 8 (Lecture #11-08.jpg) ---------
+CSS - Cascading Style Sheets
+
+CSS TEXT
+
+- The Text Transform property is used to set the cases for a text. Using this property you can change an element's text content into uppercase or lowercase letters, or capitalize the first letter of each word without modifying the original text. Its values are: none, capitalize, uppercase or lowercase.
+
+<p>
+  text-transform: capitalize
+  <strong>
+    ><span
+      >Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span
+    >
+  </strong>
+</p>
+
+CSS
+
+span {
+  text-transform: capitalize;
+}
+
+text-transform: capitalize            Lorem Ipsum Dolor Sit Amet, Consectetur Adipisicing Elit…
+
+6
+
+-------- Page 9 (Lecture #11-09.jpg) ---------
+CSS - Cascading Style Sheets
+
+</p>
+<p>
+  text-transform: uppercase
+  <strong>
+    <span>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit…</span>
+  </strong>
+</p>
+
+CSS
+
+span {
+  text-transform: uppercase;
+}
+
+text-transform: uppercase
+LOREM IPSUM DOLOR SIT AMET, CONSECTETUR ADIPISICING ELIT…
+
+7
+
+-------- Page 10 (Lecture #11-10.jpg) ---------
+CSS - Cascading Style Sheets
+
+CSS TEXT
+
+• The text-indent property is used to specify the indentation of the first line of a text.
+
+    div { text-indent: 130px }   /* You can use negative value */
+
+    Lorem ipsum dolor sit.
+
+• The letter-spacing property is used to specify the space between the characters in a text. Its values are normal or length.
+
+    div { letter-spacing: 5px }   /* You can use negative value EX: '-2px' */
+
+    L o r e m  i p s u m  d o l o r  s i t .
+
+8
+
+-------- Page 11 (Lecture #11-11.jpg) ---------
+CSS - Cascading Style Sheets
+
+CSS TEXT
+
+- The line-height property is used to specify the space between lines.
+
+  div { line-height: 1.6 } /* Default: normal , px , em , % , num EX: 1.5 */
+
+- The word-spacing property is used to specify the space between the words in a text.
+
+  div { word-spacing: 10px } /* Default: normal , px , rem , % , ch */
+
+9
+
+-------- Page 12 (Lecture #11-12.jpg) ---------
+Example 1 :  INTERNAL STYLE SHEETS  -  CSS TEXT
+
+<html lang="ar">
+  <head>
+    <title> صفحة اختبار لخصائص النص </title>
+    <meta charset='utf-8'>
+    <style type="text/css">
+      p {
+        text-align:justify;
+        color:#ff0000;
+        text-decoration:underline;
+        direction:rtl;
+      }
+    </style>
+  </head>
+  <body>
+    <p>
+      إن هذه الصفحة إختبار لخصائص مظهر النص في أوراق الأنماط الإنسيابية وقد تعمدنا إطالة 
+      النص الموجود بين وسمي بداية ونهاية هذه الفقرة ليظهر عمل خاصية المحاذاة جهتي ,
+      في لقطة الشاشة التي سوف نعرضها لهذه الصفحة.
+    </p>
+  </body>
+</html>
+
+10
+
+-------- Page 13 (Lecture #11-13.jpg) ---------
+( program#54.html ) عملي
+
+EXPLORER
+
+HTML LANGUAGE
+program#41.html
+program#42.html
+program#43.html
+program#44.html
+program#45.html
+program#46.html
+program#47.html
+program#48.html
+program#49.html
+program#50.html
+program#51.html
+program#52.html
+program#53.html
+program#54.html
+
+# style.css
+
+OUTLINE
+TIMELINE
+
+program#54.html  html  head  style  p
+
+program#54.html
+
+<html lang="ar">
+  <head>
+    <title> صفحة اختبار لخصائص النص </title>
+    <meta charset="utf-8">
+    <style type="text/css">
+      p {
+        text-align:justify;
+        color:#ff0000;
+        text-decoration:underline;
+        direction:rtl;
+      }
+    </style>
+  </head>
+  <body>
+    <p>
+      ظهر النص في أوراق الأنماط الانسيابية, وقد تعمدنا إطالة
+      حدود بين وسمي بداية ونهاية هذه الفقرة, ويظهر عمل خاصية المحاذاة
+      في لقطه الشاشة التي سوف نعرضها لهذه الصفحة
+    </p>
+  </body>
+</html>
+
+HTML language
+
+Ln 11, Col 17   Spaces: 4   UTF-8   CRLF   HTML
+
+11
+
+-------- Page 14 (Lecture #11-14.jpg) ---------
+عملي ( program#54.html )
+
+صفحة إختبار لخصائص النص
+
+إن هذه الصفحة إختبار لخصائص النص في أوراق الأنماط الإنسيابية،قد تعمدنا لجلب هذا النص الموجود بين وسمي بداية ونهاية هذه الفقرةلإظهار عمل خاصية المحاذاة في أنماط التنسيقات التي سنفرضاها لهذه الصفحة.
+
+-------- Page 15 (Lecture #11-15.jpg) ---------
+Thank you

data/12.txt

@@ -0,0 +1,428 @@
+
+-------- Page 1 (Lecture #12-01.jpg) ---------
+Faculty of Information Technology – Tripoli University
+
+مقدمة في برمجة الإنترنت
+Introduction to Internet Programming
+
+[ ITGS226 ]
+
+المحاضرة الثانية عشر
+
+أستاذة المادة
+أ. وفاء حسين المصباحي
+
+HTML5
+CSS3
+XML
+JS
+Cloud
+flat
+header
+.com
+PHP
+footer
+.net
+
+2025 ربيع
+
+-------- Page 2 (Lecture #12-02.jpg) ---------
+الموضيع التي سيتم دراستها في مقرر : مقدمة في برمجة الإنترنت
+Introduction to Internet Programming
+المحاضرة الحادية عشر
+
+CSS - Cascading Style Sheets
+
+1 CSS FONTS
+CSS LINKS
+CSS LISTS
+CSS TABLES
+DISPLAY PROPERTY
+
+-------- Page 3 (Lecture #12-03.jpg) ---------
+VISIBILITY PROPERTY
+BOX MODEL
+MARGINS
+PADDING
+
+-------- Page 4 (Lecture #12-04.jpg) ---------
+CSS - Cascading Style Sheets
+
+CSS FONTS
+
+In CSS there are five generic font families:
+
+• Serif fonts have a small stroke at the edges of each letter. They create a sense of formality and elegance; such as (Times New Roman) and (Georgia).
+
+• Sans-serif fonts have clean lines (no small strokes attached). They create a modern and minimalistic look; such as (Arial) and (Verdana).
+
+• Monospace fonts - here all the letters have the same fixed width. They create a mechanical look; such as (Courier New) and (Lucida Console).
+
+• Cursive fonts imitate human handwriting; such as (Lucida Handwriting).
+
+• Fantasy fonts are decorative/playful fonts; such as (Papyrus)
+
+-------- Page 5 (Lecture #12-05.jpg) ---------
+CSS - Cascading Style Sheets
+
+CSS FONTS
+
+• CSS font-family --- font-family
+• CSS Font Style --- font-style
+• CSS Font Weight --- font-weight
+• CSS Font Size --- font-size
+
+.p1 {
+    font-family: "Times New Roman", Times, serif;
+
+    font-style: normal | italic;
+
+    font-weight: normal | bold;
+
+    font-size: 40px;
+}
+
+• The default size for normal text, like paragraphs, is 16px .
+
+-------- Page 6 (Lecture #12-06.jpg) ---------
+Example :  INTERNAL STYLE SHEETS  -  CSS FONTS
+
+<html lang=“ar”>
+  <head>
+    <title> صفحة اختبار لخصائص الخطوط </title>
+    <meta charset=‘utf-8’>
+    <style type=“text/css”>
+      p {
+        font-family:"Tahoma","Simplified Arabic",sans-serif;
+        font-size:1.5em;
+        font-style:italic;
+        direction:rtl;
+      }
+    </style>
+  </head>
+  <body>
+    <p>
+      إن هذه الصفحة اختبار لخصائص الخطوط في أوراق الأنماط الإنسية.
+    </p>
+  </body>
+</html>
+
+3
+
+-------- Page 7 (Lecture #12-07.jpg) ---------
+( program#55.html ) عملي
+
+EXPLORER
+HTML LANGUAGE
+program#41.html
+program#42.html
+program#43.html
+program#44.html
+program#45.html
+program#46.html
+program#47.html
+program#48.html
+program#49.html
+program#50.html
+program#51.html
+program#52.html
+program#53.html
+program#54.html
+program#55.html
+style.css
+
+program#54.html  x
+program#55.html  x
+
+program#55.html > html > head > style
+
+1  <html lang="ar">
+2    <head>
+3      <title> صفحة اختبار خصائص الخطوط </title>
+4      <meta charset="utf-8">
+5      <style type="text/css">
+6        p {
+7            font-family: "Tahoma","Simplified Arabic",sans-seri
+8            font-size:1.5em;
+9            font-style:italic;
+10           direction:rtl;
+11        }
+12     </style>
+13   </head>
+14   <body>
+15     <p>
+16       هذه الصفحة إختبار لخصائص الخطوط في أوراق الأنماط الانسيابية
+17     </p>
+18   </body>
+19 </html>
+
+Ln 12, Col 17   Spaces: 4   UTF-8   CRLF   HTML
+
+-------- Page 8 (Lecture #12-08.jpg) ---------
+عملي ( program#55.html )
+
+إن هذه الصفحة اختبار لخصائص الخطوط في أوراق الأنماط الإنسيايبة.
+
+5
+
+-------- Page 9 (Lecture #12-09.jpg) ---------
+CSS - Cascading Style Sheets
+
+CSS LINKS
+
+- A link has four different states — link, visited, active and hover. These four states of a link can be styled differently through using the following anchor pseudo-class selectors.
+
+    • a:link — define styles for normal or unvisited links.
+    • a:visited — define styles for links that the user has already visited.
+    • a:hover — define styles for a link when the user place the mouse pointer over it.
+    • a:active — define styles for links when they are being clicked.
+
+- Note: a:hover MUST come after a:link and a:visited, and a:active MUST come after a:hover
+- All links in HTML are underlined by default. Sometimes you see that links are styled with no underline. The text-decoration: none; is used to remove the underline from links.
+
+a:link {
+    text-decoration: none;
+}
+
+-------- Page 10 (Lecture #12-10.jpg) ---------
+CSS - Cascading Style Sheets
+
+CSS LINKS
+
+• By default, text links will appear as follow in most of the browsers:
+
+   • An unvisited link as underlined blue text.
+
+   • A visited link as underlined purple text.
+
+   • An active link as underlined red text.
+
+7
+
+-------- Page 11 (Lecture #12-11.jpg) ---------
+Example :  INTERNAL STYLE SHEETS  -  CSS LINKS
+
+
+<html lang="ar">
+  <head>
+    <title> صفحة اختبار لمظهر الروابط </title>
+    <meta charset="utf-8">
+    <style type="text/css">
+      a:link{text-decoration:none;color:blue;}
+      a:visited{color:green;}
+      a:hover{text-decoration:underline;}
+      a:active{font-size:120%;}
+    </style>
+  </head>
+  <body>
+
+        <a href="#">normal link</a>  <br/>
+
+        <a href="www.google.com">visited link</a>  <br/>
+
+        <a href="#">hover link</a>  <br/>
+
+        <a href="#">normal link 2</a>  <br/>
+
+  </body>
+</html>
+
+8
+
+-------- Page 12 (Lecture #12-12.jpg) ---------
+CSS - Cascading Style Sheets
+
+CSS LISTS
+
+• There are three different types of list in HTML:
+  • Unordered lists — A list of items, where every list items are marked with bullets.
+  • Ordered lists — A list of items, where each list items are marked with numbers.
+  • Definition list — A list of items, with a description of each item.
+
+• By default:
+  • Items in an ordered list are numbered with Arabic numerals (1, 2, 3, 5, and so on).
+  • Items in an unordered list are marked with round bullets (•).
+
+• But, you can change this default list marker type to any other type such as roman numerals, Latin letters, circle, square, and so on using the list-style-type property.
+
+list-style-type: disc | circle | square
+                  | decimal | lower-latin | lower-roman | upper-latin
+                  | upper-roman | none;
+
+9
+
+-------- Page 13 (Lecture #12-13.jpg) ---------
+Example :  INTERNAL STYLE SHEETS  -  CSS LISTS
+
+<html lang=“ar”>
+  <head>
+    <title> صفحة اختبار لخصائص مظهر القوائم </title>
+    <meta charset=‘utf-8’>
+    <style type=“text/css”>
+      ul {list-style-type:square;}
+      ol {list-style-image:url('dot.gif');}
+    </style>
+  </head>
+  <body>
+
+    <ul>
+      <li>item 1</li>
+      <li>item 2</li>
+      <li>item 3</li>
+    </ul>
+
+    <ol>
+      <li>item 1</li>
+      <li>item 2</li>
+      <li>item 3</li>
+    </ol>
+
+  </body>
+</html>
+
+10
+
+-------- Page 14 (Lecture #12-14.jpg) ---------
+CSS - Cascading Style Sheets
+
+CSS TABLES
+
+• The CSS border property is the best way to define the borders for the tables.
+
+• By default, browser draws a border around the table, as well as around all the cells, with some space in-between, which results in double border. To get rid of this double border problem you can simply collapse the adjoining table cell borders and create clean single line borders.
+
+• There are two distinct models for setting borders on table cells in CSS: separate and collapse.
+
+• You can set the border model for an HTML table by using the CSS border-collapse property.
+
+• By default, the browser creates the table cells just large enough to contain the data in the cells.
+
+• To add more space between the table cell contents and the cell borders, you can simply use the CSS padding property.
+
+11
+
+-------- Page 15 (Lecture #12-15.jpg) ---------
+CSS - Cascading Style Sheets
+
+TABLES PROPERTIES
+
+• border: Sets all the border properties in one declaration
+
+• border-collapse : Specifies whether or not table borders should be collapsed
+
+    table, th, td {
+        border: 1px solid;
+    }
+
+• Notice that the table in the examples above have double borders. This is because both the table and the <th> and <td> elements have separate borders. To remove double borders, take a look at the example below.
+
+    table, td, th {
+        border: 1px solid;
+    }
+    table {
+        border-collapse: collapse;
+    }
+
+12
+
+-------- Page 16 (Lecture #12-16.jpg) ---------
+CSS - Cascading Style Sheets
+
+DISPLAY PROPERTY
+
+• The display property specifies if/how an element is displayed.
+• Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline.
+• Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display: block; is not allowed to have other block elements inside it.
+
+p.ex1{
+    Display: inline | block | none;
+}
+
+-------- Page 17 (Lecture #12-17.jpg) ---------
+CSS - Cascading Style Sheets
+
+VISIBILITY PROPERTY
+
+- The visibility property specifies whether or not an element is visible.
+
+- Tip: Hidden elements take up space on the page. Use the display property to both hide and remove an element from the document layout!
+
+    p.ex1 {
+        visibility: visible | hidden;
+    }
+
+14
+
+-------- Page 18 (Lecture #12-18.jpg) ---------
+CSS - Cascading Style Sheets
+
+BOX MODEL
+
+- The CSS box model is essentially a box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.
+
+Margin
+Border
+Padding
+Content
+
+15
+
+-------- Page 19 (Lecture #12-19.jpg) ---------
+CSS - Cascading Style Sheets
+
+BOX MODEL
+
+• Where:
+  • Content - The content of the box, where text and images appear
+  • Padding - Clears an area around the content.
+  • Border - A border that goes around the padding and content
+  • Margin - Clears an area outside the border.
+
+• The margin and the padding are transparent.
+
+• When you set the width and height properties of an element with CSS, you just set the width and height of the content area. To calculate the full size of an element, you must do the following:
+  • Total element width = width + left padding + right padding + left border + right border + left margin + right margin
+  • Total element height = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin
+
+16
+
+-------- Page 20 (Lecture #12-20.jpg) ---------
+CSS - Cascading Style Sheets
+
+MARGINS
+
+- Margins are used to create space around elements, outside of any defined borders.
+
+- margin properties can have the following values: auto or specify it in px or % that specifies a margin of the width of the containing element.
+
+- The auto value center the element within its container. The element will then take up the specified width, and the remaining space will be split equally to margins.
+
+p {
+    margin: 25px 50px 75px 100px;
+}
+
+Where top margin is 25px, right margin is 50px, bottom margin is 75px and left margin is 100px.
+
+17
+
+-------- Page 21 (Lecture #12-21.jpg) ---------
+CSS - Cascading Style Sheets
+
+PADDING
+
+• Padding is used to create space around an element's content, inside of any defined borders.
+
+• Padding properties can have the following values: specify it in px or % that specifies a padding of the width of the containing element.
+
+• The CSS width property specifies the width of the element's content area. So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result.
+
+div {
+    padding: 25px 50px 75px 100px;
+}
+
+Where top padding is 25px, right padding is 50px, bottom padding is 75px and left padding is 100px
+
+18
+
+-------- Page 22 (Lecture #12-22.jpg) ---------
+Thank you

data/13.txt

@@ -0,0 +1,412 @@
+
+-------- Page 1 (JavaScript Basics-01.jpg) ---------
+University of Tripoli
+Faculty of Information Technology
+
+Department of Software Engineering
+
+JavaScript Basics
+
+Introduction to Internet Programming
+ITGS 226 -- F2023
+
+By: Fatima Ben Lashihar
+
+-------- Page 2 (JavaScript Basics-02.jpg) ---------
+INTRODUCTION
+
+• JavaScript is the most popular and widely used client-side scripting language.
+
+• JavaScript is designed to add interactivity and dynamic effects to the web pages by manipulating the content returned from a web server.
+
+• JavaScript is an object-oriented language, and it also has some similarities in syntax to Java programming language. But, JavaScript is not related to Java in any way.
+
+-------- Page 3 (JavaScript Basics-03.jpg) ---------
+What can do with Javascript
+
+• Modify the content of a web page by adding or removing elements
+(Example)
+
+• Change the style and position of the elements on a web page
+(Example)
+
+• Monitor events like mouse click, hover, etc. and react to it (Example)
+
+• Create alert pop-ups to display info or warning messages to the user
+(Example)
+
+• Validate user inputs before submitting it to the server (Example)
+
+3
+
+-------- Page 4 (JavaScript Basics-04.jpg) ---------
+ADDING JAVASCRIPT TO WEB PAGES
+
+• There are typically three ways to add JavaScript to a web page:
+  1. Embedding (internal) the JavaScript code between a pair
+     of <script> and </script> tag.
+  2. Creating an external JavaScript file with the .js extension
+     and then load it within the page through the src attribute
+     of the <script> tag.
+  3. Placing the JavaScript code directly inside an HTML tag
+     using the special tag attributes such
+     as onclick, onmouseover, onkeypress, onload, etc.
+
+4
+
+-------- Page 5 (JavaScript Basics-05.jpg) ---------
+EMBEDDING THE JAVASCRIPT CODE
+
+• Embedding the JavaScript code directly within web pages by
+  placing it between the <script> and </script> tags.
+
+• The <script> tag indicates the browser that the contained
+  statements are to be interpreted as executable script and not
+  HTML (Example1)   (Example2).
+
+<body>
+    <script>
+        var greet = "Hello World!";
+        document.write(greet);     // Prints: Hello World!
+    </script>
+</body>
+
+-------- Page 6 (JavaScript Basics-06.jpg) ---------
+CALLING AN EXTERNAL JAVASCRIPT FILE
+
+• Placing JavaScript code into a separate file with a (.js) extension, and then call that file in your document through the src attribute of the <script> tag, like this:
+
+<script src="js/hello.js"></script>     (Example)
+
+• This is useful if aiming to have the same scripts available to multiple documents.
+
+-------- Page 7 (JavaScript Basics-07.jpg) ---------
+PLACING THE JAVASCRIPT CODE INLINE
+
+• Placing JavaScript code inline by inserting it directly inside the HTML tag using the special tag attributes such as onclick, onmouseover, onkeypress, onload, etc.
+
+    <body>
+        <button type= "button" onclick="alert('Hello World!')">
+            Click Me
+        </button>
+    </body>
+
+• Always keep the content and structure of web page (i.e. HTML) separate out from presentation (CSS), and behavior (JavaScript).
+
+7
+
+-------- Page 8 (JavaScript Basics-08.jpg) ---------
+POSITIONING OF SCRIPT INSIDE HTML DOCUMENT
+
+• The <script> element can be placed in the <head>, or <body> section of an HTML document. But ideally, scripts should be placed at the end of the body section, just before the closing </body> tag, it will make your web pages load faster, since it prevents obstruction of initial page rendering.
+
+8
+
+-------- Page 9 (JavaScript Basics-09.jpg) ---------
+JAVASCRIPT SYNTAX
+
+• JavaScript is case-sensitive. This means that variables,
+  language keywords, function names, and other identifiers
+  must always be typed with a consistent capitalization of
+  letters.
+
+-------- Page 10 (JavaScript Basics-10.jpg) ---------
+JAVASCRIPT DATA TYPES
+
+• There are six basic data types in JavaScript :
+  • Primary data types
+    • String: let b=“Ali”  or  ‘ Ali ’ ;
+    • Number: let b = 80.5;
+    • Boolean: let isReading = true;
+  • Composite data types
+    • Object: let car = { modal: "BMW X3", color: "white", doors: 5 }
+    • Array: let colors = ["Red", "Yellow", "Green", "Orange"];
+    • Function: let greeting = function(){ return "Hello World!"; }
+• special data types  Example
+  • Undefined: let S;
+  • Null: let Z=Null;
+
+10
+
+-------- Page 11 (JavaScript Basics-11.jpg) ---------
+JAVASCRIPT COMMENTS
+
+• A comment is simply a line of text that is completely ignored
+  by the JavaScript interpreter.
+
+• JavaScript support single-line as well as multi-line comments.
+  • Single-line comments begin with a double forward slash
+    (//), followed by the comment text.
+  • multi-line comment begins with a slash and an asterisk (/*)
+    and ends with an asterisk and slash (*/).
+
+11
+
+-------- Page 12 (JavaScript Basics-12.jpg) ---------
+JAVASCRIPT VARIABLES
+
+• Create a variable with the let keyword, whereas the assignment operator (=) is used to assign value to a variable, like this:
+      let varName = value, var1Name= value1,…;
+• In JavaScript, if a variable has been declared, but has not been assigned a value explicitly, is automatically assigned the value undefined.
+• Rules for naming a JavaScript variable:
+   • A variable name must start with a letter, or underscore, or dollar sign.
+   • A variable name cannot start with a number.
+   • A variable name can only contain alpha-numeric characters (A-z, 0-9) and underscores.
+   • A variable name cannot contain spaces.
+   • A variable name cannot be a JavaScript reserved word.
+
+• What about var and const?!
+
+12
+
+-------- Page 13 (JavaScript Basics-13.jpg) ---------
+JAVASCRIPT GENERATING OUTPUT
+
+• Displaying Output in Alert Dialog Boxes: An alert dialog box is created using the alert() method.
+    alert("Hello World!");  // Outputs: Hello World!
+
+• Writing Output to the Browser Window: the document.write() method can be used to write the content to the current document only while that document is being parsed.
+    document.write("Hello World!");  // Prints: Hello World!
+
+• Using document.write() after an HTML document is loaded, will delete all existing HTML (Example)
+
+13
+
+-------- Page 14 (JavaScript Basics-14.jpg) ---------
+JAVASCRIPT GENERATING OUTPUT
+
+• Inserting Output Inside an HTML Element: insert output inside an
+  HTML element using the element's innerHTML property. However,
+  first select the element using a method such as getElementById()
+
+Let x = 10;
+let y = 20;
+let sum = x + y;
+Document.getElementById("result").innerHTML =
+sum;
+
+• For debugging purposes, you can call the console.log() method in
+  the browser to display data (Example)
+
+14
+
+-------- Page 15 (JavaScript Basics-15.jpg) ---------
+JAVASCRIPT EVENTS
+
+• An event is something that happens when user interact with the web page, such as when he clicked a link or button, moved the mouse pointer, submits a form, etc.
+
+• The names for event handlers always begin with the word "on", so an event handler for the click event is called onclick, similarly an event handler for the load event is called onload, event handler for the blur event is called onblur, and so on.
+
+• The events can be categorized into four main groups:
+  • Mouse Events
+  • Keyboard Events
+  • Form Events
+  • Document/Window Events.
+
+15
+
+-------- Page 16 (JavaScript Basics-16.jpg) ---------
+MOUSE EVENTS
+
+• The Click Event (onclick): occurs when a user clicks on an element on a web page. A click event can be handled with an onclick event handler (Example)
+
+• The Mouseover Event (onmouseover) : occurs when a user moves the mouse pointer over an element. (Example)
+
+16
+
+-------- Page 17 (JavaScript Basics-17.jpg) ---------
+FORM EVENTS
+
+• The Focus Event (onfocus): The focus event occurs when the user gives focus to an element on a web page (Example)
+
+• The Blur Event (onblur): The blur event occurs when the user takes the focus away from a form element or a window (Example)
+
+• The Change Event (onchange): The change event occurs when a user changes the value of a form element (Example)
+
+• The Submit Event (onsubmit): The submit event only occurs when the user submits a form on a web page. (Example)
+
+17
+
+-------- Page 18 (JavaScript Basics-18.jpg) ---------
+DOCUMENT/WINDOW EVENTS
+
+• The Load Event (onload): The load event occurs when a web
+  page has finished loading in the web browser (Example)
+
+• The Unload Event (onunload): The unload event occurs when
+  a user leaves the current web page (Example)
+
+18
+
+-------- Page 19 (JavaScript Basics-19.jpg) ---------
+JAVASCRIPT CONDITIONAL STATEMENTS
+
+• There are several conditional statements in JavaScript:
+
+  • The if statement
+
+  • The if...else statement
+
+  • The if...else if....else statement
+
+  • The switch...case statement
+
+19
+
+-------- Page 20 (JavaScript Basics-20.jpg) ---------
+JAVASCRIPT LOOPS       EX
+
+• JavaScript supports five different types of loops:
+
+  • while — loops through a block of code as long as the condition
+    specified evaluates to true.
+
+  • do…while — loops through a block of code once; then the
+    condition is evaluated. If the condition is true, the statement is
+    repeated as long as the specified condition is true.
+
+  • for — loops through a block of code until the counter reaches a
+    specified number.
+
+  • for…in — loops through the properties of an object.
+
+  • for…of — loops over iterable objects such as arrays, strings, etc.
+
+-------- Page 21 (JavaScript Basics-21.jpg) ---------
+THE DOCUMENT OBJECT MODEL
+
+• The Document Object Model (DOM) is a platform and language independent model to represent the HTML documents.
+
+• DOM defines the logical structure of the documents and the way in which they can be accessed and manipulated by an application program.
+
+• In the DOM, all parts of the document, such as elements, attributes, text, etc. are organized in a hierarchical tree-like structure.
+
+21
+
+-------- Page 22 (JavaScript Basics-22.jpg) ---------
+HTML DOM(Document Object Model)
+
+Nodes
+
+Document
+<html>
+
+<head>
+<title>
+My Page
+
+<body>
+<h1>
+Mobile OS
+
+<ul>
+<li>
+Android
+<li>
+iOS
+
+-------- Page 23 (JavaScript Basics-23.jpg) ---------
+JAVASCRIPT DOM SELECTORS
+
+• Selecting the Topmost Elements: The topmost elements in an HTML
+  document are available directly as document properties.
+  • For example:
+    • the <html> element can be accessed
+      with document.documentElement property. EX
+    • the <head> element can be accessed
+      with document.head property EX
+    • the <body> element can be accessed
+      with document.body property. EX
+
+• Selecting Elements by ID: the easiest way to find an HTML element
+  in the DOM tree is select an element based on its unique ID with
+  the getElementById() method.
+  • The getElementById() method will return the element as an
+    object if the matching element was found, or null if no matching
+    element was found in the document.
+                                                                 23
+
+-------- Page 24 (JavaScript Basics-24.jpg) ---------
+JAVASCRIPT DOM SELECTORS
+
+• Selecting Elements by Class Name: the getElementsByClassName() method is used to select all the elements having specific class names. EX
+  • This method returns an array-like object of all child elements which have all of the given class names.
+
+• Selecting Elements by Tag Name: select HTML elements by tag name using the getElementsByTagName() method. EX
+  • This method also returns an array-like object of all child elements with the given tag name.
+
+24
+
+-------- Page 25 (JavaScript Basics-25.jpg) ---------
+JAVASCRIPT DOM STYLING
+
+• Setting Inline Styles on Elements: the style property is used to get or set the inline style of an element. EX
+
+25
+
+-------- Page 26 (JavaScript Basics-26.jpg) ---------
+JAVASCRIPT DOM GET SET ATTRIBUTES
+
+•  getAttribute() method: is used to get the current value of a attribute on the element (Example)
+
+•  setAttribute() method: is used to set an attribute on the specified element. If the attribute already exists on the element, the value is updated; otherwise a new attribute is added with the specified name and value (Example)
+
+•  removeAttribute() method: is used to remove an attribute from the specified element (Example)
+
+26
+
+-------- Page 27 (JavaScript Basics-27.jpg) ---------
+GETTING/SETTING HTML CONTENTS TO DOM
+
+•   The innerHTML property:  this property sets or gets the HTML
+    markup contained within the element i.e. content between its
+    opening and closing tags. EX
+
+•   The innerHTML property replaces all existing content of an
+    element.
+
+27
+
+-------- Page 28 (JavaScript Basics-28.jpg) ---------
+JAVASCRIPT FORM VALIDATION
+
+• Client-side validation is faster because validation occurs within
+  the user's web browser, whereas server-side validation occurs
+  on the server, which require user's input to be first submitted
+  and sent to the server before validation occurs, also user has
+  to wait for server response to know what exactly went wrong.
+
+• The form validation process typically consists of two parts:
+  • The Required Fields Validation: is performed to make sure
+    that all the mandatory fields are filled in.
+  • The Data Format Validation: is performed to ensure that
+    the type and format of the data entered in the form is valid.
+
+28
+
+-------- Page 29 (JavaScript Basics-29.jpg) ---------
+JAVASCRIPT FORM VALIDATION
+
+• The value of an individual form field can be accessed and
+  retrieved using the syntax
+        document.formName.fieldName.value
+
+or
+
+        document.getElementsByName(name).value.
+
+
+Good Example at the following link:
+https://www.tutorialrepublic.com/codelab.php?topic=javascript&file=form-validation
+
+
+Other useful examples:
+https://www.tutorialrepublic.com/javascript-examples.php
+
+29
+
+-------- Page 30 (JavaScript Basics-30.jpg) ---------
+THE END
+
+
+30

data/2.txt

@@ -0,0 +1,234 @@
+
+-------- Page 1 (2-01.jpg) ---------
+Faculty of Information Technology – Tripoli University
+
+مقدمة في برمجة الانترنت
+Introduction to Internet Programming
+
+[ ITGS226 ]
+
+المحاضرة الثانية
+
+أستاذة المادة
+أ. وفاء حسين المصباحي
+
+HTML5
+CSS3
+JS
+Cloud
+XML
+flat
+header
+.com
+footer
+.net
+PHP
+
+ربيع 2025
+
+-------- Page 2 (2-02.jpg) ---------
+المواضيع التي سنتم دراستها في مقرر : مقدمه في برمجة الإنترنت
+Introduction to Internet Programming
+المحاضرة الثانية
+
+. Introduction .  . مقدمة 1
+
+. Basic concepts .  . المفاهيم الأساسية 2
+
+-------- Page 3 (2-03.jpg) ---------
+Introduction      مقدمة
+
+الإنترنت Internet هو شبكة عالمية مكوّنة من مليارات من أجهزة الحواسيب التي تمكّن مستخدميها من الوصول إلى أي معلومات، ولذلك فإن فهم المصطلحات الأساسية لهذه التقنية هو جزء أساسي للتعامل مع هذا العالم الواسع، سنتعرف على أشهر هذه المصطلحات.
+
+1
+
+-------- Page 4 (2-04.jpg) ---------
+Basic concepts  المفاهيم الأساسية
+
+❖  The Internet الإنترنت :
+هو ربط واسع من الشبكات التي تتألف من الملايين من أجهزة الحواسيب والهواتف والأجهزة الذكية، مع عدم وجود منظمة أو جهة معينة تتحكم بهذه الشبكة تحكما كاملا، وإنما هي شبكات تابعة للشركات والأفراد، بحيث تقوم كل شبكة بتشغيل جزء من الإنترنت وتدفع تكاليف ذلك، وتتعاون فيما بينها لتوجيه حركة مرور البيانات، وبمجموع هذه الشبكات تكون الشبكة العالمية ( الإنترنت ) .
+
+❖  الشبكة العنكبوتية العالمية ( WWW ) : ( World Wide Web )
+هي شبكة لتبادل المعلومات عبر الإنترنت، وهي نظام مكون من مستندات النص الفائق ( صفحات الويب Webpages ) المرتبطة بعضها، والتي يمكن الوصول إليها وتصفحها من خلال متصفح الويب، ويتم التنقل بين هذه الصفحات عبر الروابط التشعبية Hyperlinks، وأهم ما يميز صفحات الويب هو استخدام ( الوسائط المتعددة Multimedia ) من : صور ورسوم متحركة ومقاطع صوتية ومرئية مع النصوص، وكانت بداية هذه الشبكة في العام 1989 .
+
+2
+
+-------- Page 5 (2-05.jpg) ---------
+Basic concepts  المفاهيم الأساسية
+
+: Web browser   متصفحات الويب
+
+هو تطبيق يمكن المستخدم من عرض المواقع الإلكترونية والبيانات والمعلومات الموجودة على شبكة الإنترنت، توجد
+مجموعة متنوعة من المتصفحات، وقد تم تصميمها لتعمل على أنظمة تشغيل مختلفة.
+ومن هذه المتصفحات : Internet Explorer - Google Chrome - Firefox - Opera .
+
+Firefox   -   Google Chrome   -   Opera
+
+: مميزات المتصفحات
+
+- جميعها مجانية، وتستخدم لنفس الهدف.
+- تعمل بطريقةٍ متماثلة.
+- من الممكن استخدام أكثر من متصفح على نفس الجهاز.
+
+3
+
+-------- Page 6 (2-06.jpg) ---------
+Basic concepts     المفاهيم الأساسية
+
+: موقع الويب Website
+هو مجموعة من الصفحات webpages المتصلة على الشبكة العنكبوتية، والتي تعتبر كياناً واحداً يمتلكه عادة شخص واحد أو منظمة واحدة، هذه الصفحات تعرض على متصفح الويب web browser، وقد يعرض الموقع معلومات حول موضوع معين أو عدة مواضيع متصلة.
+
+: تصنيف مواقع الويب
+تصنف إلى ثلاث أنواع وذلك حسب :
+
+1. الجهة المالكة : الى مواقع أفراد
+أو مواقع مؤسسات.
+
+2. البنية : الى مواقع ثابتة المحتوى static web sites
+أو مواقع متغيرة المحتوى dynamic web sites.
+
+3. المحتوى : الى خدمات ومنتجات ملموسة
+أو خدمات ومنتجات رقمية.
+
+4
+
+-------- Page 7 (2-07.jpg) ---------
+Basic concepts  المفاهيم الأساسية
+
+مواقع ثابتة المحتوى : Static web sites
+
+تتم برمجتها باستخدام HTML، وهي غالبا مواقع بسيطة وصغيرة، لا ترتبط بقواعد بيانات أو ملفات خارجية يمكن تحديث
+البيانات من خلالها، ولكن يتم إجراء التحديثا�� عليها من قبل مطوري المواقع يدويا.
+
+ميزاتها:
+سريعة التطوير - غير مكلفة عند الإنشاء والتطوير - تكاليف الإستضافة أقل من المواقع المتغيرة.
+
+عيوبها:
+تتطلب الخبرة لإجراء التحديثات، ويتم ذلك عن طريق مطوري المواقع.
+
+5
+
+-------- Page 8 (2-08.jpg) ---------
+Basic concepts   المفاهيم الأساسية
+
+مواقع متغيرة المحتوى Dynamic web sites :
+
+أكثر تطورا من المواقع الثابـتة، وهي حاليا الأكثر تواجدا على الشبكة، تتم برمجتها باستخدام عدة لغات مثل : PHP ، ASP.
+فهي تسمح بالإضافة والتحديث المستمر للصفحات، ولهذا أطلق عليها المواقع الديناميكية.
+
+ميزاتها:
+
+- الموقع المتغير موقع عملي دائم التحديث، وهذا يعد عنصر جذب للمستخدم.
+
+- سهل التحديث: حيث يمكن للمسؤول عن الموقع أن يقوم بتحديث وإضافة محتوى جديد إلى الموقع دون الحاجة
+للمعرفة بلغات برمجة المواقع، وذلك من خلال قواعد البيانات databases .
+
+عيوبها:
+
+أكثر تكلفة عند الإنشاء والتطوير من المواقع الثابتة - كما أن تكاليف الإستضافة أكثر بقليل من المواقع الثابتة.
+
+6
+
+-------- Page 9 (2-09.jpg) ---------
+Basic concepts  المفاهيم الأساسية
+
+موقع ديناميكي        موقع ثابت
+Dynamic website       Static website
+
++ DATABASE
+
+HTML+CSS+JS           HTML+CSS+JS
+PHP
+
+7
+
+-------- Page 10 (2-10.jpg) ---------
+Basic concepts  المفاهيم الأساسية
+
+ صفحة الويب Webpage :
+ صفحة الويب هو ما تراه في المتصفح عندما تكون متصلا بالإنترنت، وهي مستند يمكن قراءته وقد يحتوي على نصوص، أو صور، أو مقاطع مرئية، وتحتوي كل صفحة ويب على عنوان URL محدد يقود المستخدمين إليها.
+
+ URL :
+ إختصار لعبارة: عناوين الموارد الموحدة Uniform Resource Locators.
+ وهو عنوان الويب الذي نكتبه في شريط عنوان المتصفح للذهاب إلى مواقع الإنترنت.
+ أي باستخدام عنوان URL يتم تحديد موقع صفحات وملفات الإنترنت، ويسبق تحديد البروتوكول مثل: http:// أو ftp://
+
+ وتكون صيغة عنوان الموقع مثل:
+ http://www.examplewebsite.com/mypage
+ ويمكن إختصارها هكذا:
+ www.examplewebsite.com/mypage
+
+ في بعض الأحيان تكون أطول وأكثر تعقيدا، ولكنها تتبع جميع القواعد المعترف بها لتسمية عناوين URL.
+
+8
+
+-------- Page 11 (2-11.jpg) ---------
+Basic concepts    المفاهيم الأساسية
+
+نطاق المضيف Host domain:
+الذي غالبا ما ينتهي بـ .com ، .net ، أو .org ، أو .edu . وهو اسم الملف أو اسم الصفحة Webpage ، وهو جزء من اسم
+النطاق.
+
+المضيف
+examplewebsite.com
+اسم النطاق
+
+اسم النطاق Domain Name:
+هو جزء فريد من عنوان URL ، ويتكون من جزأين:
+
+- الكلمة أو العبارة الأبجدية الفعلية: "examplewebsite".
+- اسم نطاق المستوى الأعلى الذي يحدد أي نوع من المواقع: النطاقات التجارية .com ، المنظمات .org ،
+  المؤسسات التعليمية .edu .
+
+عند وضع هذين الجزأين معا
+"examplewebsite.com"
+يكون هذا هو اسم الموقع أو النطاق على الإنترنت.
+
+9
+
+-------- Page 12 (2-12.jpg) ---------
+Basic concepts  المفاهيم الأساسية
+
+: HTTP
+
+هو اختصار " بروتوكول نقل النص التشعبي " , Hypertext Transfer Protocol وهو معيار الاتصالات ونقل البيانات عبر صفحات الويب webpages، عندما تحتوي صفحة الويب على هذه البادئة يجب أن تعمل الروابط، والنصوص، والصور بشكل صحيح في متصفح الويب.
+
+HTTPs هو بروتوكول نقل النص الآمن Secure ويشير إلى أن صفحة الويب لديها طبقة خاصة من التشفير المضافة لإخفاء المعلومات الشخصية وكلمات السر الخاصة بك من الآخرين.
+
+10
+
+-------- Page 13 (2-13.jpg) ---------
+Basic concepts  المفاهيم الأساسية
+
+: Hyperlink الارتباط التشعبي
+
+والمعروف باسم لبنة البناء الأساسية للشبكة العنكبوتية:
+
+Block of the World Wide Web most basic building
+
+الرابط التشعبي يمكن أن يكون كلمة أو جملة أو حتى صورة، عند الضغط عليها تنقلنا إلى ملف آخر، أو قسم آخر في نفس الملف.
+
+تتواجد الروابط تقريبا في كل المواقع، وتربط المواقع ببعضها لتسمح للمستخدم بالإنتقال من صفحة إلى أخرى، وتصفح المواقع، وقراءة المعلومات على شبكة الإنترنت بسرعة وسهولة.
+
+غالبا ما يتميز النص التشعبي باللون الأزرق، ويكون تحته خط.
+
+11
+
+-------- Page 14 (2-14.jpg) ---------
+Basic concepts  المفاهيم الأساسية
+
+: Websites Hosting  إستضافة المواقع الإلكترونية
+
+إستضافة المواقع هي عملية إستخدام خادم server لإستضافة موقع إلكتروني website ، من خلال توفير مساحة على
+خادم الويب web servers من قبل مضيف الويب web host ( شركات الإستضافة )، ليكون الموقع متاحا لمستخدمي
+الإنترنت.
+
+لتوضيح الأمر أكثر ...
+
+يمكن إعتبار الإستضافة كأنها شخص يمتلك عقارا ما ويطرحه للإيجار مقابل مبلغ معين .. الأمر نفسه في خدمة إستضافة
+المواقع، حيث تقوم شركات الإستضافة بتأجير مساحة معينة للمواقع على أجهزة الخادم الخاصة بها.
+
+12
+
+-------- Page 15 (2-15.jpg) ---------
+Thank you

data/3.txt

@@ -0,0 +1,629 @@
+
+-------- Page 1 (Lecture #3-01.jpg) ---------
+Faculty of Information Technology – Tripoli University
+
+مقدمة في برمجة الإنترنت
+Introduction to Internet Programming
+
+[ ITGS226 ]
+
+المحاضرة الثالثة
+
+أ. وفاء حسين المصباحي
+أستاذة المادة
+
+HTML5
+CSS3
+JS
+Cloud
+XML
+flat
+PHP
+header
+.com
+footer
+.net
+
+2025 ربيع
+
+-------- Page 2 (Lecture #3-02.jpg) ---------
+المواضيع التي سنمُر عليها في مقرر : مقدمة في برمجة الإنترنت
+Introduction to Internet Programming
+المحاضرة الثالثة
+
+1
+مقدمة . Introduction
+
+2
+لغة الترميز HTML .
+
+3
+محرات HTML .
+
+4
+إصدارات HTML - HTML History .
+
+5
+عناصر HTML - HTML Elements .
+
+6
+أساسيات HTML - HTML Basic .
+
+-------- Page 3 (Lecture #3-03.jpg) ---------
+٧  :  عملي
+. إنشاء مستند HTML
+
+٨  :
+
+HTML  :  عناصر HTML Elements
+HTML  :  وسوم HTML Tags
+
+-------- Page 4 (Lecture #3-04.jpg) ---------
+Introduction  مقدمة
+
+سنتعلم أحدث إصدار للغة الترميز القياسية HTML ، والتي تعد الخطوة الأولى لأي مطور Web ، إذ سنقوم بشرح لغة HTML5 بعد التمهيد لذلك من خلال شرح HTML التقليدية ، ثم يليها التعرف على معايير XHTML .
+
+-------- Page 5 (Lecture #3-05.jpg) ---------
+لغة الترميز HTML
+
+: ما هي HTML
+
+- HTML ترمز للعبارة ( Hyper Text Markup Language ) : لغة ترميز النص التشعبي.
+- HTML هي لغة الترميز القياسية المستخدمة لإنشاء صفحات الويب Web pages.
+- HTML تصف بنية صفحة الويب Web page.
+- HTML تقوم بتسمية أجزاء من محتوى الصفحة من عناوين وفقرات وروابط وغيرها.
+- HTML تتكون من سلسلة من العناصر Elements، هذه العناصر تخبر المتصفح Browser بكيفية عرض المحتوى.
+
+2
+
+-------- Page 6 (Lecture #3-06.jpg) ---------
+HTML محررات
+
+. لكتابة مستند HTML كل ما تحتاجه هو محرر نصوص بسيط مثل : Notepad أو TextEdit لمستخدمي Mac .
+
+. كما يمكنك استخدام محرر نصوص متقدم مثل : Notepad++ ، Dreamweaver ، Visual Studio Code .
+3
+
+-------- Page 7 (Lecture #3-07.jpg) ---------
+HTML History   -   HTML إصدارات
+
+منذ الأيام الأولى لشبكة الويب العالمية كان هناك العديد من إصدارات HTML :
+
+تاريخ الإصدار              الإصدار
+1991                        HTML
+1995                        HTML 2.0
+1997                        HTML 3.2
+1999                        HTML 4.01
+2000                        XHTML
+2014                        HTML5
+2016                        HTML 5.1
+2017                        HTML 5.2
+
+4
+
+-------- Page 8 (Lecture #3-08.jpg) ---------
+HTML Elements  -  عناصر HTML
+
+تتكون HTML من شفرات تسمى ( وسوم - Tags ) فتأتي هذه الوسوم بشكل طبيعي بزوجين اثنين : وسوم البداية start tag، ووسم النهاية end tag مع إدراج المحتوى بينهما كالتالي:
+
+<Tag name> هنا يكتب محتوى العنصر </Tag name>
+
+وسم البداية                          وسم النهاية ويتميز بالعلامة /
+
+- وسم النهاية End Tag هو نفسه وسم البداية Start Tag ، ولكن مع إدراج شرطة مائلة للأمام ( / : Slash ) قبل الوسم.
+
+- عنصر HTML - HTML Element : يبدأ من وسم البداية حتى وسم النهاية مرورا بالمحتوى بينهما.
+
+مثال :
+
+<p> الفقرة الأولى </p>
+
+5
+
+-------- Page 9 (Lecture #3-09.jpg) ---------
+HTML Elements - عناصر HTML
+
+أنواع العناصر / الوسوم في HTML:
+يوجد نوعين من الوسوم Tags:
+
+1. وسوم فردية Single Tags: ويتكون من وسم البداية وهو نفسه وسم النهاية ولا يمكن وضع وسوم أخرى بداخله،
+مثل:
+<br/>
+
+عند استخدام وسم فردي يمكنك عدم وضع الرمز / في آخره، ولكن من الأفضل وضع الرمز / وذلك للإشارة على أنه وسم فردي،
+مثل:
+<br/>
+
+2. وسوم زوجية Paired Tags: ويتكون من وسم البداية و وسم النهاية ويمكن وضع وسوم أخرى بداخله، مثل:
+<p> ... </p>
+
+6
+
+-------- Page 10 (Lecture #3-10.jpg) ---------
+HTML Elements - عناصر HTML
+
+أنواع العناصر / الوسوم في HTML بين Block و Inline:
+
+يوجد نوعين من الوسوم Tags :
+
+1. وسوم من نوع Block: تحتل السطر كاملاً بما فيه الفراغ الموجود أمامها، ولا تسمح لعناصر أخرى أن تحتل ذلك الفراغ، حتى وإن كانت عناصر من نفس العلامة فكل واحدة تأخذ حيزها كاملاً، مثل:
+
+<p> ... </p>
+
+<h1> ... </h1>
+
+2. وسوم من نوع Inline: يحتل السطر الذي يظهر فيه، ويترك الفراغ الباقي لأي عنصر آخر من نفس النوع أو نوع آخر، مثل:
+
+<a> ... </a>
+
+ملاحظة:
+
+- العنصر من النوع block قد يحتوي على عناصر من نفس النوع أو من النوع inline أو كلا النوعين.
+- العنصر من النوع inline لا يحتوي سوى على عناصر من نفس نوعه، بمعنى لا تضع أبداً عنصر block داخل inline.
+
+7
+
+-------- Page 11 (Lecture #3-11.jpg) ---------
+HTML Basic  -  HTML أساسيات
+
+البنية الرئيسية لصفحة HTML : تتكون صفحة HTML من ثلاث مناطق :
+
+<html>
+
+<head>
+<title> عنوان الصفحة </title>
+
+معلومات عن الصفحة مثل:
+العنوان / روابط لملفات خارجية / اللغة / ..
+
+</head>
+
+<body>
+
+هنا محتويات الصفحة:
+نصوص / صور / روابط / جداول / ..
+
+</body>
+
+</html>
+
+المحتوى غير الظاهر
+المحتوى الظاهر
+
+8
+
+-------- Page 12 (Lecture #3-12.jpg) ---------
+HTML Basic  -  أساسيات HTML
+
+1. المنطقة الرئيسية : Main Section
+- وهي المنطقة المحصورة بين الوسمين :  <html> … </html>
+- العنصر  <html> هو الوسم الأساسي لصفحة html.
+- هذه المنطقة تحدد بداية و نهاية الصفحة، وتضم منطقتي رأس head وجسم body الصفحة، فهي تضم كامل المستند.
+
+2. منطقة رأس الصفحة : Head Section
+- وهي المنطقة المحصورة بين الوسمين :  <head> … </head>
+- العنصر  <head>  تحتوي على معلومات تصف المستند.
+- هذه المنطقة تحتوي على مجموعة من عناصر HTML مثل :  <title>  ،  <meta>  ،  <style>  ،  <link>  ، أغلبها لا يظهر في مستعرض الويب web browser. هذه العناصر Elements تحدد البيانات الوصفية ومجموعة الأحرف والأنماط والروابط للموارد الخارجية مثل ملفات CSS ، وكذلك إضافة المعلومات التي تستخدمها محركات البحث من أجل الأرشفة والبحث.
+- المهمة الرئيسية لهذه المنطقة هي إعطاء معلومات عن محتوى الصفحة.
+
+9
+
+-------- Page 13 (Lecture #3-13.jpg) ---------
+HTML Basic - أساسيات HTML
+
+- العنصر <title> يدرج داخل <head> ، ويحتوي عنوان الملف، ويجب أن يكون العنوان نصيا فقط ( لا تكتب أي عناصر داخله )، ويظهر هذا العنوان في ( شريط عنوان المتصفح ، في علامة تبويب الصفحة ) ، العنصر <title> مطلوب في مستندات <html> لأنه: (يعرض في نتائج محركات البحث - يوفر عنوانا للصفحة عند إضافتها إلى المفضلة ) .. لذا حاول أن تجعل العنوان دقيقا ومعبرا عن المحتوى.
+
+3. منطقة جسم الصفحة : Body Section :
+
+- وهي المنطقة المحصورة بين الوسمين :  <body> ... </body>
+
+- العنصر <body> يحتوي على محتوى الصفحة المرئي.
+
+- هذه المنطقة هي التي تنتج الشكل النهائي للصفحة، وفيها جميع العناصر التي سيتم عرضها.
+
+<html> , <head> , <title> , <body>
+هذه الوسوم هي الوسوم الرئيسية في مستند html
+
+10
+
+-------- Page 14 (Lecture #3-14.jpg) ---------
+عملي : إنشاء مستند HTML
+
+إنشاء مستند  : HTML
+
+- برنامج Visual Studio code لكتابة مستند HTML. يتم تنزيل البرنامج من الإنترنت.
+
+Visual Studio Code
+
+- إنشاء مجلد على سطح المكتب.
+
+- عرض مستند HTML على أحد المستعرضات : Browsers
+
+Firefox   -   Google Chrome   -   Opera
+
+11
+
+-------- Page 15 (Lecture #3-15.jpg) ---------
+HTML Elements    :     HTML    عناصر
+HTML Tags    :     HTML وسوم
+
+<script>   ،   <style>   ،   <link>   ،   <meta>   ،   <title>    :   العناصر/الوسوم داخل وسم head
+<title>   :   وسم
+<title>   عنصر   -
+
+<html>
+
+  <head>
+    <title> Learn HTML language </title>
+  </head>
+
+  <body>
+    HTML Language
+  </body>
+
+</html>
+
+عملي: فتح برنامج Visual Studio Code ثم فتح مجلد باسم HTML Language على سطح المكتب، ثم فتح ملف باسم
+Program#1.html بامتداد .html.
+
+12
+
+-------- Page 16 (Lecture #3-16.jpg) ---------
+( program#1.html ) عملي
+
+Visual Studio Code
+
+program#1.html x
+Welcome
+HTML LANGUAGE
+program#1.html …
+1  <html>
+2
+3      <head>
+4          <title>    Learn HTML language            </title>
+5      </head>
+6
+7      <body>
+8          HTML  Language
+9      </body>
+10
+11 </html>
+12
+
+OUTLINE
+TIMELINE
+
+Opera Internet Explorer
+
+Learn HTML language
+file:///C:/Users/Z10/Desktop/HTML%20language/…
+HTML Language
+
+13
+
+-------- Page 17 (Lecture #3-17.jpg) ---------
+HTML Elements : عناصر HTML
+HTML Tags : وسوم HTML
+
+- عنصر <meta> : وسم <meta>
+
+HTML Attributes : السمات/الخصائص
+
+تطلق كلمة خاصية Attribute على التعابير التي تضاف إلى الوسوم، من أجل تحديد الشكل أو الكيفية التي تعمل بها هذه الوسوم.
+
+الوسم يقوم بإخبار المتصفح عن العمل الذي يجب القيام به، أما الخاصية فتحدد الكيفية التي سيتم بها أداء هذا العمل.
+
+ملاحظة:
+- السمات/الصفات توفر معلومات إضافية لعناصر HTML.
+- جميع أو أغلب عناصر HTML يمكن أن تحتوي على سمات/صفات.
+- السمات/الصفات تكون دائماً في وسم البداية.
+- السمات/الصفات عادة ما تأتي على شكل أزواج (الاسم = القيمة) :
+Name = “value“
+
+14
+
+-------- Page 18 (Lecture #3-18.jpg) ---------
+HTML Elements     :     HTML    عناصر
+HTML Tags         :     HTML    وسوم
+
+- عنصر  <meta>  :  وسم <meta>
+
+<html lang=“en”>
+    <head>
+        <title>  Learn HTML language  </title>
+        <meta charset=‘utf-8’>
+        <meta name=“description” content=“study“>
+        <meta name=“keywords” content=“html,css,javascript”>
+        <meta name=“author” content=“Wafa Elmisbahi”>
+    </head>
+
+    <body>
+        HTML Language
+    </body>
+</html>
+
+15
+
+-------- Page 19 (Lecture #3-19.jpg) ---------
+HTML Elements      :      عناصر HTML
+HTML Tags          :      وسوم HTML
+
+- عنصر <meta>  :   وسم <meta>
+
+en                  ar
+
+<html lang=“en”>
+  <head>
+    <title> Learn HTML language </title>
+    <meta charset=“utf-8”>
+    <meta name=“description” content=“study“>
+    <meta name=“keywords” content=“html,css,javascript”>
+    <meta name=“author” content=“Wafa Elmisbahi”>
+  </head>
+
+  <body>
+    HTML Language
+  </body>
+</html>
+
+يدعم اللغة العربية
+يظهر الوصف عند البحث عبر google
+الكلمات التي يتم البحث بها في google
+مؤلف الموقع
+
+16
+
+-------- Page 20 (Lecture #3-20.jpg) ---------
+( program#2.html )  عملي
+
+EXPLORER
+HTML LANGUAGE
+program#1.html
+program#2.html
+
+Welcome
+program#1.html
+program#2.html
+
+HTML language
+
+program#2.html  html
+1  <html lang="en">
+2    <head>
+3      <title>       Learn HTML language       </title>
+4      <meta charset="utf-8">
+5      <meta name="description" content="study">
+6      <meta name="keywords" content="html,css,javascript">
+7      <meta name="author" content="Wafa Elmisbahi">
+8    </head>
+9
+10   <body>
+11                   HTML Language
+12   </body>
+13 </html>
+
+OUTLINE
+TIMELINE
+
+Learn HTML language
+file:///C:/Users/Z10/Desktop/HTML%20language/
+HTML Language
+
+17
+
+-------- Page 21 (Lecture #3-21.jpg) ---------
+HTML Elements    :    HTML عناصر
+HTML Tags        :    HTML وسوم
+
+<link> عنصر : <link> وسم
+
+<html lang=“en”>
+    <head>
+        <title>   Learn HTML language   </title>
+        <meta charset=‘utf-8’>
+        <meta name=“description” content=“study“>
+        <meta name=“keywords” content=“html,css,javascript”>
+        <meta name=“author” content=“Wafa Elmisbahi”>
+        <link rel=“stylesheet” href=“ ….”>
+    </head>
+    <body>
+        HTML Language
+    </body>
+</html>
+
+18
+
+-------- Page 22 (Lecture #3-22.jpg) ---------
+HTML Elements      :      HTML عناصر
+HTML Tags          :      HTML وسوم
+
+<link> وسـم :   <link> عنصر -
+
+<html lang=“en”>
+
+     <head>
+
+           <title>   Learn HTML language   </title>
+
+           <meta charset=‘utf-8’>
+
+           <meta name=“description” content=“study“>
+
+           <meta name=“keywords” content=“html,css,javascript”>
+
+           <meta name=“author” content=“Wafa Elmisbahi”>
+
+           <link rel=“stylesheet” href=“ ….”>
+
+     </head>
+
+     <body>
+
+           HTML Language
+
+     </body>
+
+</html>
+
+CSS ملف
+موقع ملف CSS
+ملف CSS
+
+19
+
+-------- Page 23 (Lecture #3-23.jpg) ---------
+HTML Elements : HTML عناصر
+HTML Tags : HTML وسوم
+
+<style> عنصر : <style> وسم -
+
+<html lang=“en”>
+  <head>
+    <title> Learn HTML language </title>
+    <meta charset=‘utf-8’>
+    <meta name=“description” content=“study“>
+    <meta name=“keywords” content=“html,css,javascript”>
+    <meta name=“author” content=“Wafa Elmisbahi”>
+
+    <style>
+      body{
+        background: blue;
+      }
+    </style>
+  </head>
+
+  <body>
+    HTML Language
+  </body>
+</html>
+
+20
+
+-------- Page 24 (Lecture #3-24.jpg) ---------
+HTML Elements    :    HTML    عناصر HTML
+HTML Tags        :    HTML وسوم
+
+- عنصر : <style>   
+  وسوم :  <style>
+
+<html lang=“en”>
+   <head>
+      <title>  Learn HTML language  </title>
+      <meta charset=‘utf-8’>
+      <meta name=“description” content=“study“>
+      <meta name=“keywords” content=“html,css,javascript”>
+      <meta name=“author” content=“Wafa Elmisbahi”>
+      <style>
+         body{
+            background:  blue;
+         }
+      </style>
+   </head>
+   <body>
+      HTML Language
+   </body>
+</html>
+
+هذا الكود يحول خلفية ملف html إلى اللون الأزرق
+Code CSS
+
+21
+
+-------- Page 25 (Lecture #3-25.jpg) ---------
+عملي  ( program#3.html )
+
+EXPLORER
+HTML LANGUAGE
+  program#1.html
+  program#2.html
+  program#3.html
+
+Welcome         program#1.html        program#2.html        program#3.html
+
+<html lang="en">
+  <head>
+    <title>      Learn HTML language      </title>
+    <meta charset='utf-8'>
+    <meta name="description" content="study">
+    <meta name="keywords" content="html,css,javascript">
+    <meta name="author" content="Wafa Elmisbahi">
+    <style>
+         body{
+               background:  blue;
+              }
+    </style>
+  </head>
+  <body>
+        HTML Language
+  </body>
+</html>
+
+OUTLINE
+TIMELINE
+
+Learn HTML language
+file:///C:/Users/Z10/Desktop/HTML%20language/prog...
+HTML Language
+
+-------- Page 26 (Lecture #3-26.jpg) ---------
+HTML Elements    :    HTML    عناصر
+HTML Tags        :    HTML وسوم
+
+<script> وسـم    :    <script> عنصر    -
+
+<html lang="en">
+    <head>
+        <title>  Learn HTML language   </title>
+        <meta charset="utf-8">
+        <meta name="description" content="study">
+        <meta name="keywords" content="html,css,javascript">
+        <meta name="author" content="Wafa Elmisbahi">
+        <style>
+            body{
+                background:  blue;
+            }
+        </style>
+        <script>
+
+        </script>
+    </head>
+    <body>
+        HTML Language
+    </body>
+</html>
+
+23
+
+-------- Page 27 (Lecture #3-27.jpg) ---------
+HTML Elements    :    HTML   عناصر
+HTML Tags        :    HTML وسوم
+
+عنصر <script>   :   <script> وسم
+
+<html lang=“en”>
+    <head>
+        <title>  Learn HTML language  </title>
+        <meta charset=‘utf-8’>
+        <meta name=“description” content=“study“>
+        <meta name=“keywords” content=“html,css,javascript”>
+        <meta name=“author” content=“Wafa Elmisbahi”>
+        <style>
+            body{
+                background:   blue;
+            }
+        </style>
+
+        <script>
+            {         Code JavaScript
+        </script>
+
+    </head>
+    <body>
+        HTML Language
+    </body>
+</html>
+
+24
+
+-------- Page 28 (Lecture #3-28.jpg) ---------
+Thank you

data/4.txt

@@ -0,0 +1,943 @@
+
+-------- Page 1 (Lecture #4-01.jpg) ---------
+Faculty of Information Technology – Tripoli University
+
+مقدمة في برمجة الإنترنت
+Introduction to Internet
+Programming
+
+[ ITGS226 ]
+
+المحاضرة الرابعة
+
+أ. وفاء حسين المصباحي
+أستاذة المادة
+
+HTML5
+CSS3
+JS
+Cloud
+XML
+flat
+PHP
+header
+.com
+footer
+.net
+
+2025 ربيع
+
+-------- Page 2 (Lecture #4-02.jpg) ---------
+المواضيع التي سيتم دراستها في مقرر: مقدمة في برمجة الإنترنت
+Introduction to Internet Programming
+المحاضرة الرابعة
+
+. HTML Headings العناوين
+
+. HTML Paragraphs الفقرات
+
+-------- Page 3 (Lecture #4-03.jpg) ---------
+العناوين HTML Headings
+
+العناوين يتم تعريفها عن طريق إستخدام الوسوم : <h1> ، <h2> ، <h3> ، <h4> ، <h5> ، <h6> . هذه الوسوم
+تجعل العنوان عريضاً مع إضافة سطر فارغ تحت العنوان، حرف h هو إختصار لكلمة heading .
+
+- <h1> يحدد العنوان الأكثر أهمية، ويستخدم للعناوين الرئيسية لأنه الأكبر حجماً.
+
+- <h2> أقل حجماً بقليل من <h1> ، ثم <h3> وهكذا...، إلى <h6> ويحدد العنوان الأقل حجماً وأهمية.
+
+- هي عنصر block : تحتل السطر كاملاً بما فيه الفراغ الموجود أمامها، ولا تسمح لعناصر أخرى أن تحتل ذلك
+الفراغ، حتى وإن كانت عناصر من نفس العلامة فكل واحدة تأخذ حيزها كاملاً.
+
+ملاحظات:
+
+- محركات البحث تستخدم العناوين لفهرسة البنية الأساسية ومحتوى صفحات الويب.
+
+- يعمل المستخدمون على التنقل بين صفحات الويب حسب العناوين، لذا لابد من استخدام العناوين المناسبة.
+
+- وسوم العناوين تستخدم لتنسيق العناوين فقط، ولا يجب استخدامها لتنسيق أي نص آخر.
+
+-------- Page 4 (Lecture #4-04.jpg) ---------
+HTML Headings العناوين
+
+: (1) مثال -
+
+<html lang=“en”>
+  <head>
+    <title>  page to heading elements   </title>
+    <meta charset=‘utf-8’>
+  </head>
+  <body>
+    <h1>  heading to level 1  </h1>
+    <h2>  heading to level 2  </h2>
+    <h3>  heading to level 3  </h3>
+    <h4>  heading to level 4  </h4>
+    <h5>  heading to level 5  </h5>
+    <h6>  heading to level 6  </h6>
+  </body>
+</html>
+
+2
+
+-------- Page 5 (Lecture #4-05.jpg) ---------
+( program#4.html ) عملي
+
+EXPLORER
+
+HTML LANGUAGE
+  program#1.html
+  program#2.html
+  program#3.html
+  program#4.html
+  program#5.html
+  program#6.html
+  program#7.html
+  program#8.html
+  program#9.html
+
+OUTLINE
+TIMELINE
+
+program#4.html
+
+program#4.html › html › body › h4
+
+1  <html lang="en">
+2    <head>
+3      <title> page to heading elements </title>
+4      <meta charset='utf-8'>
+5    </head>
+6    <body>
+7      <h1> heading to level 1 </h1>
+8      <h2> heading to level 2 </h2>
+9      <h3> heading to level 3 </h3>
+10     <h4> heading to level 4 </h4>
+11     <h5> heading to level 5 </h5>
+12     <h6> heading to level 6 </h6>
+13   </body>
+14 </html>
+
+Ln 10, Col 34   Spaces: 4   UTF-8   CRLF   HTML
+
+-------- Page 6 (Lecture #4-06.jpg) ---------
+( program#4.html ) عملي
+
+page to heading elements
+
+heading to level 1
+
+heading to level 2
+
+heading to level 3
+
+heading to level 4
+
+heading to level 5
+
+heading to level 6
+
+-------- Page 7 (Lecture #4-07.jpg) ---------
+HTML Headings العناوين
+
+: مثال (1)
+
+✓ قمنا بتزويد الوسم <body> بالصفة dir والتي تحدد إتجاه قراءة المستند وقمنا بإسناد القيمة rtl لها وذلك لجعل إتجاه القراءة من اليمين إلى اليسار right to left وهو ما يتناسب مع اللغة العربية.
+✓ في حال أنه لم يتم كتابة هذه الصفة فإن القيمة الإفتراضية لها ltr أي إتجاه القراءة الإفتراضي من اليسار إلى اليمين.
+
+<html lang=“ar”>
+  <head>
+    <title> صفحة لعناصر العنوان </title>
+    <meta charset=‘utf-8’>
+  </head>
+  <body dir=‘rtl’>
+    <h1> عنوان لمستوى 1 </h1>
+    <h2> عنوان لمستوى 2 </h2>
+    <h3> عنوان لمستوى 3 </h3>
+    <h4> عنوان لمستوى 4 </h4>
+    <h5> عنوان لمستوى 5 </h5>
+    <h6> عنوان لمستوى 6 </h6>
+  </body>
+</html>
+
+5
+
+-------- Page 8 (Lecture #4-08.jpg) ---------
+( program#5.html ) عملي
+
+EXPLORER
+HTML LANGUAGE
+program#1.html
+program#2.html
+program#3.html
+program#4.html
+program#5.html
+program#6.html
+program#7.html
+program#8.html
+program#9.html
+
+OUTLINE
+TIMELINE
+
+program#5.html x
+program#5.html ...
+
+1  <html lang="ar">
+2    <head>
+3      <title> صفحة لعناصر العنوان </title>
+4      <meta charset='utf-8'>
+5    </head>
+6    <body dir='rtl'>
+7      <h1> ١  عنوان لمستوى </h1>
+8      <h2> ٢  عنوان لمستوى </h2>
+9      <h3> ٣  عنوان لمستوى </h3>
+10     <h4> ٤  عنوان لمستوى </h4>
+11     <h5> ٥  عنوان لمستوى </h5>
+12     <h6> ٦  عنوان لمستوى </h6>
+13   </body>
+14 </html>
+15
+
+Ln 15, Col 1   Spaces: 4   UTF-8   CRLF   HTML
+
+6
+
+-------- Page 9 (Lecture #4-09.jpg) ---------
+عملي ( program#5.html )
+
+صفحة لتعامل العناصر
+file:///C:/Users/Z10/Deskt
+
+عنوان لمستوى 1
+عنوان لمستوى 2
+عنوان لمستوى 3
+عنوان لمستوى 4
+عنوان لمستوى 5
+عنوان لمستوى 6
+
+-------- Page 10 (Lecture #4-10.jpg) ---------
+الفقرات HTML Paragraphs
+
+- تعرف الفقرات بالوسم   <p> ... </p>   ضع فقرتك داخل هذا الوسم، سيميز الفقرة ويضيف سطرا فارغا بعدها.
+- هو عنصر block: تحتل السطر كاملا بما فيه الفراغ الموجود أمامها، ولا تسمح لعناصر أخرى أن تحتل ذلك الفراغ، حتى وإن كانت عناصر من نفس العلامة فكل واحدة تأخذ حيزها كاملا.
+
+8
+
+-------- Page 11 (Lecture #4-11.jpg) ---------
+HTML Paragraphs الفقرات
+
+: (1) مثال -
+
+<html lang="en">
+  <head>
+    <title> HTML Paragraphs </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <p> WEB PAGE: a single document on a website, usually consisting of HTML
+        document and any items that are displayed within that document, such as inline
+        images or style sheets. </p>
+  </body>
+</html>
+
+9
+
+-------- Page 12 (Lecture #4-12.jpg) ---------
+( program#6.html ) عملي
+
+EXPLORER
+HTML LANGUAGE
+  program#1.html
+  program#2.html
+  program#3.html
+  program#4.html
+  program#5.html
+  program#6.html
+  program#7.html
+  program#8.html
+  program#9.html
+
+program#6.html x
+
+program#6.html
+1  <html lang="en">
+2  <head>
+3      <title>  HTML Paragraphs  </title>
+4      <meta charset='utf-8'>
+5  </head>
+6  <body>
+7      <p>  WEB PAGE: a single document on a website, usually cons
+8          document and any items that are displayed within that
+9          images or style sheets. </p>
+10 
+11  </body>
+12 </html>
+13
+
+OUTLINE
+TIMELINE
+
+Ln 13, Col 1    Spaces: 4    UTF-8    CRLF    HTML
+
+-------- Page 13 (Lecture #4-13.jpg) ---------
+( program#6.html ) عملي
+
+HTML Paragraphs
+
+WEB PAGE: a single document on a website, usually consisting of HTML document and any items that are displayed within that document, such as inline images or style sheets.
+
+11
+
+-------- Page 14 (Lecture #4-14.jpg) ---------
+HTML Paragraphs الفقرات
+
+: (2) مثال -
+
+<html lang="en">
+  <head>
+    <title> HTML Paragraphs </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <h1> WEB PAGE: </h1>
+    <p> a single document on a website, usually consisting of HTML
+        document and any items that are displayed within that document, such as inline
+        images or style sheets. </p>
+  </body>
+</html>
+
+12
+
+-------- Page 15 (Lecture #4-15.jpg) ---------
+( program#7.html ) عملي
+
+EXPLORER
+
+HTML LANGUAGE
+  program#1.html
+  program#2.html
+  program#3.html
+  program#4.html
+  program#5.html
+  program#6.html
+  program#7.html
+  program#8.html
+  program#9.html
+
+OUTLINE
+TIMELINE
+
+program#7.html
+
+<html lang="en">
+<head>
+    <title>  HTML Paragraphs  </title>
+    <meta charset='utf-8'>
+</head>
+<body>
+    <h1>  WEB PAGE:  </h1>
+    <p>  a single document on a website, usually consisting of
+         document and any items that are displayed within that
+         images or style sheets.  </p>
+</body>
+</html>
+
+Ln 12, Col 5  Spaces: 4  UTF-8  CRLF  HTML
+
+-------- Page 16 (Lecture #4-16.jpg) ---------
+( program#7.html ) عملي
+
+HTML Paragraphs
+
+WEB PAGE:
+
+a single document on a website, usually consisting of HTML document and any items that are displayed within that
+document, such as inline images or style sheets.
+
+14
+
+-------- Page 17 (Lecture #4-17.jpg) ---------
+HTML Paragraphs الفقرات
+
+<html lang="en">
+  <head>
+    <title> HTML Paragraphs </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <p> WEB PAGE: a single document on a website, usually consisting of HTML
+        document and any items that are displayed within that document, such as inline
+        images or style sheets. </p>
+    <p> HOME PAGE: The entry page for a website, which can link to additional pages
+        on the same website or pages on other sites. </p>
+    <p> WEBSITE: a collection of one or more web pages linked together. </p>
+    <p> WEB BROWSER: is an application which is used to view pages and navigate
+        the World Wide Web. Popular examples: Firefox, Internet Explorer, Safari,
+        Chrome, and Opera. </p>
+  </body>
+</html>
+
+مثال (3) :
+
+15
+
+-------- Page 18 (Lecture #4-18.jpg) ---------
+( program#8.html ) عملي
+
+EXPLORER
+HTML LANGUAGE
+program#1.html
+program#2.html
+program#3.html
+program#4.html
+program#5.html
+program#6.html
+program#7.html
+program#8.html
+program#9.html
+
+OUTLINE
+TIMELINE
+
+program#8.html  html  body  p
+
+program#8.html  x
+
+1  <html lang="en">
+2  <head>
+3      <title>  HTML Paragraphs  </title>
+4      <meta charset='utf-8'>
+5  </head>
+6  <body>
+7      <p>  WEB PAGE:  a single document on a website, usually con
+8          document and any items that are displayed within that 
+9          images or style sheets.  </p>
+10     <p>  HOME PAGE:  The entry page for a website, which can lin
+11         on the same website or pages on other sites.  </p>
+12     <p>  WEBSITE: a collection of one or more web pages linked
+13     <p>  WEB BROWSER:  is an application which is used to view
+14         the World Wide Web. Popular examples: Firefox, Interne
+15         Chrome, and Opera.  </p>
+16 </body>
+17 </html>
+
+HTML language
+
+Ln 15, Col 20   Spaces: 4   UTF-8   CRLF   HTML
+
+16
+0 0  0
+
+-------- Page 19 (Lecture #4-19.jpg) ---------
+( program#8.html ) عملي
+
+HTML Paragraphs
+
+WEB PAGE: a single document on a website, usually consisting of HTML document and any items that are displayed within that document, such as inline images or style sheets.
+
+HOME PAGE: The entry page for a website, which can link to additional pages on the same website or pages on other sites.
+
+WEBSITE: a collection of one or more web pages linked together.
+
+WEB BROWSER: is an application which is used to view pages and navigate the World Wide Web. Popular examples: Firefox, Internet Explorer, Safari, Chrome, and Opera.
+
+17
+
+-------- Page 20 (Lecture #4-20.jpg) ---------
+HTML Paragraphs الفقرات
+
+مثال (4):
+
+<html lang="en">
+  <head>
+    <title>  HTML Paragraphs  </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+
+    <h1> WEB PAGE: </h1>
+    <p> a single document on a website, usually consisting of HTML
+      document and any items that are displayed within that document, such as inline
+      images or style sheets. </p>
+
+    <h1> HOME PAGE: </h1>
+    <p> The entry page for a website, which can link to additional pages
+      on the same website or pages on other sites. </p>
+
+    <h1> WEBSITE: </h1>
+    <p> a collection of one or more web pages linked together. </p>
+
+    <h1> WEB BROWSER: </h1>
+    <p> is an application which is used to view pages and navigate
+      the World Wide Web. Popular examples: Firefox, Internet Explorer, Safari,
+      Chrome, and Opera. </p>
+
+  </body>
+</html>
+
+18
+
+-------- Page 21 (Lecture #4-21.jpg) ---------
+( program#9.html ) عملي
+
+EXPLORER
+HTML LANGUAGE
+  program#1.html
+  program#2.html
+  program#3.html
+  program#4.html
+  program#5.html
+  program#6.html
+  program#7.html
+  program#8.html
+  program#9.html
+
+Welcome          program#9.html  html  body  p
+
+<html lang="en">
+<head>
+  <title>  HTML Paragraphs  </title>
+  <meta charset='utf-8'>
+</head>
+<body>
+  <h1>  WEB PAGE:  </h1>
+  <p>  a single document on a website, usually consisting of
+       document and any items that are displayed within that
+       images or style sheets.  </p>
+
+  <h1>  HOME PAGE:  </h1>
+  <p>  The entry page for a website, which can link to additi
+       on the same website or pages on other sites.  </p>
+
+  <h1>  WEBSITE:  </h1>
+  <p>  a collection of one or more web pages linked together.  </p>
+
+  <h1>  WEB BROWSER:  </h1>
+  <p>  is an application which is used to view pages and navi
+       the World Wide Web. Popular examples: Firefox, Interne
+       Chrome, and Opera.  </p>
+</body>
+
+OUTLINE
+TIMELINE
+
+Ln 18, Col 29   Spaces: 4   UTF-8   CRLF   HTML
+
+19
+
+-------- Page 22 (Lecture #4-22.jpg) ---------
+( program#9.html ) عملي
+
+HTML Paragraphs
+
+WEB PAGE:
+a single document on a website, usually consisting of HTML document and any items that are displayed within that document,
+such as inline images or style sheets.
+
+HOME PAGE:
+The entry page for a website, which can link to additional pages on the same website or pages on other sites.
+
+WEBSITE:
+a collection of one or more web pages linked together.
+
+WEB BROWSER:
+is an application which is used to view pages and navigate the World Wide Web. Popular examples: Firefox, Internet Explorer,
+Safari, Chrome, and Opera.
+
+20
+
+-------- Page 23 (Lecture #4-23.jpg) ---------
+HTML Paragraphs الفقرات
+
+سمات/خصائص Attributes لتنسيق الفقرات : paragraphs
+- خاصية المحاذاة Align ، خاصية العنوان Title :
+
+<p align="center" title="هنا لمحة سريعة"> 
+    نص الفقرة
+</p>
+
+- تستخدم الخاصية align لتحديد مكان النص ( نص الفقرة ) ، وقد تم تحديده في المنتصف باستخدام القيمة center وقد تكون ( left , right , center ) .
+- عند إضافة الخاصية title ستعرض قيمة الخاصية كتلميح عند تمرير المؤشر فوق الفقرة.
+- الخاصية title تعمل مع عناصر أخرى كالروابط، والصور، وغيرها.
+
+21
+
+-------- Page 24 (Lecture #4-24.jpg) ---------
+HTML Paragraphs الفقرات
+
+: مثال -
+
+<html lang="en">
+  <head>
+    <title> Align & Title </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <p align="center" title="WEB PAGE"> WEB PAGE: a single document on a website. </p>
+  </body>
+</html>
+
+22
+
+-------- Page 25 (Lecture #4-25.jpg) ---------
+( program#10.html ) عملي
+
+EXPLORER
+
+HTML LANGUAGE
+  program#1.html
+  program#2.html
+  program#3.html
+  program#4.html
+  program#5.html
+  program#6.html
+  program#7.html
+  program#8.html
+  program#9.html
+  program#10.html
+
+OUTLINE
+TIMELINE
+
+program#10.html
+
+program#10.html x
+
+HTML language
+
+<html lang="en">
+<head>
+    <title>    Align & Title     </title>
+    <meta charset='utf-8'>
+</head>
+<body>
+    <p align="center"  title="WEB PAGE"> WEB PAGE: a single doc
+</body>
+</html>
+
+Ln 10, Col 1    Spaces: 4   UTF-8   CRLF   HTML
+
+23
+
+-------- Page 26 (Lecture #4-26.jpg) ---------
+عملي  ( program#10.html )
+
+Align & Title
+
+file:///C:/Users/Z10/Desktop/HTML%20language/program%2310.html
+
+WEB PAGE: a single document on a website.
+
+Align & Title
+
+file:///C:/Users/Z10/Desktop/HTML%20language/program%2310.html
+
+WEB PAGE: a single document on a website.
+
+WEB PAGE
+
+عند وضع الماوس
+على الفقرة
+
+24
+
+-------- Page 27 (Lecture #4-27.jpg) ---------
+HTML Paragraphs الفقرات
+
+- لكي تظهر المسافات في الفقرة يتم إستخدام الوسم <pre> ... </pre> بدلا من إستخدام الوسم <p> ... </p>
+ حيث أن المسافات في الفقرة بإستخدام الوسم <p> يعتبرها المتصفح مسافة واحدة فقط
+
+25
+
+-------- Page 28 (Lecture #4-28.jpg) ---------
+HTML Paragraphs الفقرات
+
+مثال : يوضح كيف يتعامل الوسم <p> مع المسافات.
+
+<html lang="en">
+<head>
+<title> Paragraphs </title>
+<meta charset="utf-8">
+</head>
+<body>
+<p> WEB PAGE:     a single     document on a website. </p>
+<p> WEB PAGE:
+    a single
+    document on
+    a website. </p>
+</body>
+</html>
+
+مسافات
+
+26
+
+-------- Page 29 (Lecture #4-29.jpg) ---------
+( program#11.html ) عملي
+
+EXPLORER
+
+HTML LANGUAGE
+  program#1.html
+  program#2.html
+  program#3.html
+  program#4.html
+  program#5.html
+  program#6.html
+  program#7.html
+  program#8.html
+  program#9.html
+  program#10.html
+  program#11.html
+
+OUTLINE
+TIMELINE
+
+program#11.html
+
+program#11.html x
+
+<html lang="en">
+<head>
+    <title>   Paragraphs    </title>
+    <meta charset='utf-8'>
+</head>
+<body>
+    <p >  WEB PAGE:      a single        document on a website.  </p>
+    <p >  WEB PAGE:
+            a single
+            document on
+            a website.  </p>
+</body>
+</html>
+
+Ln 14, Col 1   Spaces: 4   UTF-8   CRLF   HTML
+
+-------- Page 30 (Lecture #4-30.jpg) ---------
+( program#11.html ) عملي
+
+WEB PAGE: a single document on a website.
+
+WEB PAGE: a single document on a website.
+
+28
+
+-------- Page 31 (Lecture #4-31.jpg) ---------
+HTML Paragraphs الفقرات
+
+مثال: يوضح كيف يتعامل الوسم <pre> مع المسافات.
+
+<html lang="en">
+<head>
+<title> Paragraphs </title>
+<meta charset='utf-8'>
+</head>
+<body>
+<pre> WEB PAGE:     a single        document on a website. </pre>
+<pre> WEB PAGE:
+    a single
+    document on
+    a website. </pre>
+</body>
+</html>
+
+مسافات
+
+29
+
+-------- Page 32 (Lecture #4-32.jpg) ---------
+( program#12.html ) عملي
+
+EXPLORER
+HTML LANGUAGE
+program#1.html
+program#2.html
+program#3.html
+program#4.html
+program#5.html
+program#6.html
+program#7.html
+program#8.html
+program#9.html
+program#10.html
+program#11.html
+program#12.html
+
+program#12.html
+html > head > meta
+
+1  <html lang="en">
+2    <head>
+3      <title>  Paragraphs  </title>
+4      <meta charset='utf-8'>
+5    </head>
+6    <body>
+7      <pre>  WEB PAGE:    a single    document on a website.  </pre>
+8      <pre>  WEB PAGE:
+9                a single
+10               document on
+11               a website.  </pre>
+12   </body>
+13 </html>
+
+OUTLINE
+TIMELINE
+
+Ln 4, Col 30  Spaces: 4  UTF-8  CRLF  HTML
+30
+
+-------- Page 33 (Lecture #4-33.jpg) ---------
+( program#12.html ) عملي
+
+WEB PAGE:    a single     document on a website.
+
+WEB PAGE:    
+            a single
+            document on
+            a website.
+
+-------- Page 34 (Lecture #4-34.jpg) ---------
+HTML Paragraphs الفقرات
+
+- تعرف الفقرات بإستخدام الوسم <p> ... </p> مثل الوسم <span> ... </span> .
+- الإختلاف بين وسم <span> ووسم <p> هو أن الوسم <p> هو عنصر block كل <p> تكتب في سطر، بينما الوسم <span> هو عنصر line .
+
+32
+
+-------- Page 35 (Lecture #4-35.jpg) ---------
+HTML Paragraphs الفقرات
+
+مثال: يوضح كيف يعمل الوسم <p>.
+
+<html lang="en">
+  <head>
+    <title> HTML Paragraphs </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <p> WEB PAGE: a single document on a website.</p>
+    <p> HOME PAGE: The entry page for a website. </p>
+  </body>
+</html>
+
+33
+
+-------- Page 36 (Lecture #4-36.jpg) ---------
+( program#13.html ) عملي
+
+EXPLORER
+HTML LANGUAGE
+program#1.html
+program#2.html
+program#3.html
+program#4.html
+program#5.html
+program#6.html
+program#7.html
+program#8.html
+program#9.html
+program#10.html
+program#11.html
+program#12.html
+program#13.html
+
+program#13.html
+
+program#13.html
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title> HTML Paragraphs </title>
+    <meta charset='utf-8'>
+</head>
+<body>
+    <p> WEB PAGE: a single document on a website.</p>
+    <p> HOME PAGE: The entry page for a website. </p>
+</body>
+</html>
+
+OUTLINE
+TIMELINE
+
+Ln 11, Col 1  Spaces: 4  UTF-8  CRLF  HTML
+
+-------- Page 37 (Lecture #4-37.jpg) ---------
+( program#13.html ) عملي
+
+HTML Paragraphs
+
+WEB PAGE: a single document on a website.
+
+HOME PAGE: The entry page for a website.
+
+35
+
+-------- Page 38 (Lecture #4-38.jpg) ---------
+HTML Paragraphs الفقرات
+
+مثال: يوضح كيف يعمل الوسم <span>.
+
+<html lang="en">
+  <head>
+    <title> HTML Paragraphs </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <span> WEB PAGE: a single document on a website.</span>
+    <span> HOME PAGE: The entry page for a website. </span>
+  </body>
+</html>
+
+36
+
+-------- Page 39 (Lecture #4-39.jpg) ---------
+( program#14.html ) عملي
+
+EXPLORER
+
+HTML LANGUAGE
+program#1.html
+program#2.html
+program#3.html
+program#4.html
+program#5.html
+program#6.html
+program#7.html
+program#8.html
+program#9.html
+program#10.html
+program#11.html
+program#12.html
+program#13.html
+program#14.html
+
+program#14.html
+
+<html lang="en">
+  <head>
+    <title>  HTML Paragraphs  </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <span>  WEB PAGE: a single document on a website.</span>
+    <span>  HOME PAGE: The entry page for a website. </span>
+  </body>
+</html>
+
+OUTLINE
+TIMELINE
+
+37
+
+-------- Page 40 (Lecture #4-40.jpg) ---------
+( program#14.html ) عملي
+
+HTML Paragraphs
+
+WEB PAGE: a single document on a website. HOME PAGE: The entry page for a website.
+
+38
+
+-------- Page 41 (Lecture #4-41.jpg) ---------
+Thank you

data/5.txt

@@ -0,0 +1,475 @@
+
+-------- Page 1 (Lecture #5-01.jpg) ---------
+Faculty of Information Technology – Tripoli University
+
+مقدمة في برمجة الإنترنت
+Introduction to Internet Programming
+
+[ ITGS226 ]
+
+المحاضرة الخامسة
+
+أستاذة المادة
+أ. وفاء حسين المصباحي
+
+HTML5
+JS
+Cloud
+CSS3
+XML
+flat
+PHP
+header
+.com
+footer
+.net
+
+2025 ربيع
+
+-------- Page 2 (Lecture #5-02.jpg) ---------
+المحاضرة التي سيتم دراستها في مقرر : مقدمة في برمجة الإنترنت
+Introduction to Internet Programming
+المحاضرة الخامسة
+
+تابع
+
+1. الفقرات HTML Paragraphs.
+
+2. عنصر الخط الأفقي Horizontal Line.
+
+3. التعليقات Comments.
+
+4. عناصر تنسيق النصوص Text Formatting.
+
+-------- Page 3 (Lecture #5-03.jpg) ---------
+HTML Paragraphs الفقرات
+
+• وسم <br> أو <br/> : يستخدم لعمل سطر جديد line break.
+
+- هو Single Tag.
+
+- هو عنصر فاضي Empty element.
+
+-------- Page 4 (Lecture #5-04.jpg) ---------
+HTML Paragraphs الفقرات
+
+مثال: يوضح كيف يعمل وسم <br> وسم <span>.
+
+<html lang="en">
+  <head>
+    <title> Line break </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <span> WEB PAGE: a single document on a website.</span>
+    <br>
+    <span> HOME PAGE: The entry page for a website. </span>
+  </body>
+</html>
+
+2
+
+-------- Page 5 (Lecture #5-05.jpg) ---------
+عملي ( program#15.html )
+
+File  Edit  Selection
+EXPLORER
+
+HTML LANGUAGE
+  program#2.html
+  program#3.html
+  program#4.html
+  program#5.html
+  program#6.html
+  program#7.html
+  program#8.html
+  program#9.html
+  program#10.html
+  program#11.html
+  program#12.html
+  program#13.html
+  program#14.html
+  program#15.html
+  program#16.html
+
+OUTLINE
+TIMELINE
+
+program#15.html
+html
+
+<html lang="en">
+<head>
+    <title>   Line break   </title>
+    <meta charset='utf-8'>
+</head>
+<body>
+    <span>   WEB PAGE: a single document on a website. </span>
+    <br>
+    <span>   HOME PAGE: The entry page for a website.  </span>
+</body>
+</html>
+
+Ln 11, Col 8   Spaces: 4   UTF-8   CRLF   HTML
+
+3
+
+-------- Page 6 (Lecture #5-06.jpg) ---------
+( program#15.html ) عملي
+
+Line break
+
+WEB PAGE: a single document on a website.
+HOME PAGE: The entry page for a website.
+
+4
+
+-------- Page 7 (Lecture #5-07.jpg) ---------
+عنصر الخط الأفقي Horizontal Line
+
+- وسم  <hr>  أو  <hr/> : يستخدم لإنشاء الخطوط الأفقية في الصفحة.
+- هو Single Tag.
+- هو عنصر فاضي  Empty element .
+
+5
+
+-------- Page 8 (Lecture #5-08.jpg) ---------
+Horizontal Line عنصر الخط الأفقي
+
+مثال : يوضح كيف يعمل وسم <hr> .
+
+<html lang="en">
+  <head>
+    <title>  Horizontal Line </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <h1> WEB PAGE: </h1>
+    <p> a single document on a website, usually consisting of HTML
+        document and any items that are displayed within that document, such as inline
+        images or style sheets. </p>
+
+    <hr>
+    <h1> HOME PAGE: </h1>
+    <p> The entry page for a website, which can link to additional pages
+        on the same website or pages on other sites. </p>
+
+    <hr>
+    <h1> WEBSITE: </h1>
+    <p> a collection of one or more web pages linked together. </p>
+  </body>
+</html>
+
+6
+
+-------- Page 9 (Lecture #5-09.jpg) ---------
+عملي ( program#16.html )
+
+EXPLORER
+HTML LANGUAGE
+program#2.html
+program#3.html
+program#4.html
+program#5.html
+program#6.html
+program#7.html
+program#8.html
+program#9.html
+program#10.html
+program#11.html
+program#12.html
+program#13.html
+program#14.html
+program#15.html
+program#16.html
+
+program#16.html html body
+<html lang="en">
+<head>
+  <title> Horizontal Line </title>
+  <meta charset='utf-8'>
+</head>
+<body>
+  <h1> WEB PAGE: </h1>
+  <p>  a single document on a website, usually consisting of
+       document and any items that are displayed within that
+       images or style sheets. </p>
+  <hr>
+  <h1> HOME PAGE: </h1>
+  <p> The entry page for a website, which can link to additi
+       on the same website or pages on other sites. </p>
+  <hr>
+  <h1> WEBSITE: </h1>
+  <p> a collection of one or more web pages linked together.
+</body>
+</html>
+
+OUTLINE
+TIMELINE
+
+Ln 6, Col 11  Spaces: 4  UTF-8  CRLF  HTML
+
+-------- Page 10 (Lecture #5-10.jpg) ---------
+( program#16.html ) عملي
+
+Horizontal Line
+
+WEB PAGE:
+
+a single document on a website, usually consisting of HTML document and any items that are displayed within that document,
+such as inline images or style sheets.
+
+HOME PAGE:
+
+The entry page for a website, which can link to additional pages on the same website or pages on other sites.
+
+WEBSITE:
+
+a collection of one or more web pages linked together.
+
+-------- Page 11 (Lecture #5-11.jpg) ---------
+التعليقات Comments
+
+- اعتاد المبرمجون في لغات البرمجة التقليدية على كتابة أسطر توضيحية لا تعالج إذ أنها لا تعتبر جزءاً من الشيفرة، وإنما تستخدم فقط لتذكير المبرمج بأجزاء الشيفرة عندما يعود لتعديلها بعد فترة من الزمن، وهذه الأسطر تعرف بالتعليقات Comments ، ومع أن HTML لغة وصفية إلا أنها توفر آلية لكتابة التعليقات ضمن المستندات، فتقدم الصيغة العامة التالية لكتابة التعليق :
+
+<!-- comment -->
+
+-------- Page 12 (Lecture #5-12.jpg) ---------
+Comments التعليقات
+
+: مثال -
+
+<html lang="en">
+  <head>
+    <title> Comment </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <!-- paragraph -->
+    <br/>
+    <h3> WEB PAGE: </h3>
+    <p> a single document on a website, usually consisting of HTML
+        document and any items that are displayed within that document, such as inline
+        images or style sheets. </p>
+  </body>
+</html>
+
+10
+
+-------- Page 13 (Lecture #5-13.jpg) ---------
+( program#17.html ) عملي
+
+EXPLORER
+HTML LANGUAGE
+program#3.html
+program#4.html
+program#5.html
+program#6.html
+program#7.html
+program#8.html
+program#9.html
+program#10.html
+program#11.html
+program#12.html
+program#13.html
+program#14.html
+program#15.html
+program#16.html
+program#17.html
+
+program#17.html
+
+program#17.html > html > body > p
+
+<html lang="en">
+<head>
+    <title> Comment </title>
+    <meta charset='utf-8'>
+</head>
+<body>
+            <!-- paragraph -->
+    <br/>
+    <h3> WEB PAGE: </h3>
+    <p>      a single document on a website, usually consisting o
+             document and any items that are displayed within th
+             images or style sheets. </p>
+</body>
+</html>
+
+OUTLINE
+TIMELINE
+
+Ln 11, Col 14  Spaces: 4  UTF-8  CRLF  HTML
+
+-------- Page 14 (Lecture #5-14.jpg) ---------
+( program#17.html ) عملي
+
+WEB PAGE:
+
+a single document on a website, usually consisting of HTML document and any items that are displayed within that document,
+such as inline images or style sheets.
+
+-------- Page 15 (Lecture #5-15.jpg) ---------
+عناصر تنسيق النصوص Text Formatting
+
+- توفر لغة HTML مجموعة من العناصر لتنسيق النصوص:
+
+Tag                         Effect
+<strong> أو <b>             bold لجعل النص عريضاً
+<small>                     لجعل النص أصغر حجماً
+<i> أو <em>                 لجعل النص مائلاً italic
+<mark>                      تظليل النص باللون الأصفر
+<u> أو <ins>                لوضع خط أسفل النص
+<s> أو <del>                شطب النص Delete
+<sup>                       لكتابة الكلمة أعلى السطر superscript
+<sub>                       لكتابة الكلمة أسفل السطر subscript
+
+- كل عناصر formatting هي عناصر inline.
+
+13
+
+-------- Page 16 (Lecture #5-16.jpg) ---------
+عناصر تنسيق النصوص Text Formatting
+
+- مثال : يوضح عمل عناصر تنسيق النصوص Text Formatting.
+
+<html lang="en">
+  <head>
+    <title>  Text Formatting  </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <!--  Text formatting  -->
+
+    <br/>
+    <h3> WEB PAGE: </h3>
+    <p>  a single document on <b>a website</b>. </p>
+    <p>  a single document on <small>a website</small>. </p>
+    <p>  a single document on <mark>a website</mark>. </p>
+    <p>  a single document on <i>a website</i>. </p>
+    <p>  a single document on <u>a website</u>. </p>
+    <p>  a single document on <s>a website</s>. </p>
+    <p>  a single document on <sup>a website</sup>. </p>
+    <p>  a single document on <sub>a website</sub>. </p>
+  </body>
+</html>
+
+14
+
+-------- Page 17 (Lecture #5-17.jpg) ---------
+عملي ( program#18.html )
+
+EXPLORER
+HTML LANGUAGE
+program#4.html
+program#5.html
+program#6.html
+program#7.html
+program#8.html
+program#9.html
+program#10.html
+program#11.html
+program#12.html
+program#13.html
+program#14.html
+program#15.html
+program#16.html
+program#17.html
+program#18.html
+
+OUTLINE
+TIMELINE
+
+program#18.html
+HTML language
+
+<html lang="en">
+<head>
+    <title>   Text Formatting   </title>
+    <meta charset='utf-8'>
+</head>
+<body>
+        <!--   Text formatting   -->
+    <br/>
+    <h3> WEB PAGE: </h3>
+    <p>      a single document on <b>a website</b>. </p>
+    <p>      a single document on <small>a website</small>. </p>
+    <p>      a single document on <mark>a website</mark>. </p>
+    <p>      a single document on <i>a website</i>. </p>
+    <p>      a single document on <u>a website</u>. </p>
+    <p>      a single document on <s>a website</s>. </p>
+    <p>      a single document on <sup>a website</sup>. </p>
+    <p>      a single document on <sub>a website</sub>. </p>
+</body>
+</html>
+
+Ln 16, Col 17   Spaces: 4   UTF-8   CRLF   HTML
+
+15
+
+-------- Page 18 (Lecture #5-18.jpg) ---------
+( program#18.html ) عملي
+
+WEB PAGE:
+
+a single document on a website.
+
+a single document on a website.
+
+a single document on a website.
+
+a single document on a website.
+
+a single document on a website.
+
+a single document on a website.
+
+a single document on a website.
+
+a single document on a website.
+
+-------- Page 19 (Lecture #5-19.jpg) ---------
+Text Formatting عناصر تنسيق النصوص
+
+الإختلاف بين tags :
+
+<i>
+Italic text
+لمجرد الشكل
+
+<em>
+Emphasize text
+– حكمة
+– الجمل المقتبسة
+– عبارة من لغة مختلفة
+
+<b>
+Bold text
+لمجرد الشكل
+
+<strong>
+Important text
+للعِبارات المهمة
+
+<sub>
+Subscript text
+تستخدم في الرموز الكيميائية
+
+<sup>
+Superscript text
+تستخدم في المعادلات الرياضية لتمثيل الأُس
+
+<u>
+Misspelled word
+لمجرد الشكل
+أو لتحديد أن الكلمة بها خطأ
+
+<ins>
+inserted text
+لإدخال نص جديد
+(كلام مضاف)
+
+17
+
+-------- Page 20 (Lecture #5-20.jpg) ---------
+Thank you

data/6.txt

@@ -0,0 +1,1249 @@
+
+-------- Page 1 (Lecture #6-01.jpg) ---------
+Faculty of Information Technology – Tripoli University
+
+مقدمة في برمجة الإنترنت
+Introduction to Internet Programming
+
+[ ITGS226 ]
+
+المحاضرة السادسة
+
+أستاذة المادة
+أ. وفاء حسين المصباحي
+
+HTML5
+JS
+Cloud
+CSS3
+XML
+flat
+PHP
+header
+.com
+footer
+.net
+
+2025 ربيع
+
+-------- Page 2 (Lecture #6-02.jpg) ---------
+المواضيع التي سيتم دراستها في مقرر : مقدمة في برمجة الإنترنت
+Introduction to Internet Programming
+المحاضرة السادسة
+
+. المحارف والرموز الخاصة Special Characters
+1
+
+. عناصر الروابط Hyper Links
+
+. الروابط الداخلية Internal Linking
+
+. عناصر الصور Images
+
+. القوائم Lists
+
+-------- Page 3 (Lecture #6-03.jpg) ---------
+Special Characters المحارف والرموز الخاصة
+
+- هناك بعض المحارف والرموز التي لا يمكن عرضها في الصفحة عن طريق كتابتها بشكل مباشر مثل: الرموز المستخدمة في الرياضيات ومحارف الغرّافات وغيرها.
+
+- توفر لغة HTML آلية خاصة لعرض هذه الرموز وذلك باتباع الصيغة التالية:
+&value;
+
+باستبدال القيمة value بقيمة المحرف المطلوب أن يتم عرضه في مستعرض الويب وفي الجدول التالي نماذج من هذه المحارف:
+
+HTML: شيفرة
+    الرمز
+&lt;      <
+&gt;      >
+&ne;     ≠
+&trade;  ™
+&copy;   ©
+&nbsp;   محرف الفراغ
+
+1
+
+-------- Page 4 (Lecture #6-04.jpg) ---------
+Special Characters المحارف والرموز الخاصة
+
+: مثال -
+
+<html lang="en">
+  <head>
+    <title> Special Characters </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <p>
+      3 &lt; 5 and 10 &gt; 2 and also 3 &ne; 4 ....
+      all rights reserved for &copy; Mukhtar &trade;
+    </p>
+  </body>
+</html>
+
+2
+
+-------- Page 5 (Lecture #6-05.jpg) ---------
+( program#19.html ) عملي
+
+EXPLORER
+
+HTML LANGUAGE
+  program#5.html
+  program#6.html
+  program#7.html
+  program#8.html
+  program#9.html
+  program#10.html
+  program#11.html
+  program#12.html
+  program#13.html
+  program#14.html
+  program#15.html
+  program#16.html
+  program#17.html
+  program#18.html
+  program#19.html
+
+program#19.html
+
+<html lang="en">
+  <head>
+    <title> Special Characters </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <p>
+      3 &lt; 5 and 10 &gt; 2 and also 3 &ne; 4 ….
+      all rights reserved for &copy; Mukhtar &trade;
+    </p>
+  </body>
+</html>
+
+HTML language
+
+Ln 13, Col 1   Spaces: 4   UTF-8   CRLF   HTML
+
+OUTLINE
+TIMELINE
+
+-------- Page 6 (Lecture #6-06.jpg) ---------
+( program#19.html ) عملي
+
+Special Characters
+
+3 < 5 and 10 > 2 and also 3 ≠ 4 …. all rights reserved for © Mukhtar ™
+
+-------- Page 7 (Lecture #6-07.jpg) ---------
+عناصر الروابط Hyper Links
+
+- توفر لغة HTML آلية للإنتقال بين الصفحات المختلفة عبر عناصر الروابط Hyper Links.
+- الروابط عبارة عن نصوص أو صور تنتقل عند النقر عليها من الصفحة الحالية إلى صفحة ويب أخرى.
+- تقوم مستعرضات الويب بتمييز الروابط بعرض "يد صغيرة" كمؤشر للفأرة عند الإشارة إلى أحد الروابط.
+- يتم إنشاء الروابط بواسطة الوسم  <a>  ، والـ a هذه إختصار لـ Anchor.
+- يتم تزويد عنصر الرابط بنص يعرض كمحتوى له أما الموقع الهدف ( الذي سيتم الإنتقال إليه عند النقر على الرابط) فيتم تزويده بالخاصية href والتي هي إختصار لـ Hyper Reference.
+
+<a href="URL الرابط"> النص </a>
+
+-------- Page 8 (Lecture #6-08.jpg) ---------
+عناصر الروابط Hyper Links
+
+سمات/خصائص Attributes لعناصر الروابط Hyper Links :
+
+- خاصية target : تحدد مكان عرض الصفحة ، ويحدد مكان عرض الصفحة حسب قيمة هذه الخاصية إلى :
+
+  ▪ القيمة _self : عرض الصفحة الهدف في نفس الصفحة الحالية.
+
+  ▪ القيمة _blank : عرض الصفحة الهدف في نافذة مستعرض جديدة.
+
+6
+
+-------- Page 9 (Lecture #6-09.jpg) ---------
+Hyper Links عناصر الروابط
+
+: مثال -
+
+<html lang="en">
+  <head>
+    <title> Hyper Links </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <a href=“http://www.Microsoft.com” > Microsoft </a>
+    <br/>
+    <a href=“http://www.google.com” target=“_blank”>  Google  </a>
+    <br/>
+    <a href=“program#1.html” target=“_self”> program#1 </a>
+  </body>
+</html>
+
+7
+
+-------- Page 10 (Lecture #6-10.jpg) ---------
+( program#20.html ) عملي
+
+EXPLORER
+
+HTML LANGUAGE
+  program#6.html
+  program#7.html
+  program#8.html
+  program#9.html
+  program#10.html
+  program#11.html
+  program#12.html
+  program#13.html
+  program#14.html
+  program#15.html
+  program#16.html
+  program#17.html
+  program#18.html
+  program#19.html
+  program#20.html
+
+OUTLINE
+TIMELINE
+
+program#20.html
+
+program#20.html
+
+<html lang="en">
+<head>
+    <title>        Hyper Links        </title>
+    <meta charset='utf-8'>
+</head>
+<body>
+    <a href="http://www.Microsoft.com" > Microsoft </a>
+    <br/>
+    <a href="http://www.google.com" target="_blank">    Google
+    <br/>
+    <a href="program#1.html" target="_self"> program#1 </a>
+</body>
+</html>
+
+Ln 14, Col 1    Spaces: 4    UTF-8    CRLF    HTML
+
+8
+
+-------- Page 11 (Lecture #6-11.jpg) ---------
+( program#20.html ) عملي
+
+
+Hyper Links
+file:///C:/Users/Z10/Desktop/HTML%20language/program%2320.html
+
+Microsoft
+Google
+program#
+
+
+Microsoft - التطبيقات الكل
+
+Microsoft
+
+
+Hyper Links
+Google
+
+www.google.com
+تسجيل الدخول
+صور
+Gmail
+
+Google
+
+بحث
+ضربة حظ
+
+English  Italiano  Google متوفر باللغة:
+محرك بحث Google
+
+ليبيا
+
+حول
+الإعلانات
+الأعمال
+الخصوصية
+الأحكام
+آلية عمل "Google بحث"
+كيف تعمل
+إعدادات
+
+9
+
+-------- Page 12 (Lecture #6-12.jpg) ---------
+Internal Linking الروابط الداخلية
+
+- أحياناً يكون المحتوى الموجود ضمن صفحة معينة كبيراً إلى حد ما وفي حالة مثل هذه يصبح الإنتقال إلى فقرة
+محددة ضمن الصفحة عملية تستغرق بعض الجهد والوقت.
+
+- توفر لغة HTML آلية للإنتقال إلى جزء محدد من الصفحة مباشرة عبر ما يعرف بالروابط الداخلية Internal Links
+والتي يتم تحقيقها عبر استخدام وسم الرابط a> وتمرير معرف العنصر identifier المراد الإنتقال إليه كقيمة
+لخاصية href بالشكل التالي:
+
+</a>   إنتقل إلى العنصر ذو المعرف id   <a href="#id">
+
+حيث id هو معرف العنصر المراد الإنتقال إليه ضمن الصفحة.
+
+10
+
+-------- Page 13 (Lecture #6-13.jpg) ---------
+Internal Linking الروابط الداخلية
+
+مثال :
+
+<html lang="en">
+  <head>
+    <title> HTML Paragraphs </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <a href="#para4"> WEB BROWSER </a>
+    <h1> WEB PAGE: </h1>
+    <p> a single document on a website, usually consisting of HTML
+        document and any items that are displayed within that document, such as inline
+        images or style sheets. </p>
+    <h1> HOME PAGE: </h1>
+    <p> The entry page for a website, which can link to additional pages
+        on the same website or pages on other sites. </p>
+    <h1> WEBSITE: </h1>
+    <p> a collection of one or more web pages linked together. </p>
+    <h1 id="#para4"> WEB BROWSER: </h1>
+    <p> is an application which is used to view pages and navigate
+        the World Wide Web. Popular examples: Firefox, Internet Explorer, Safari,
+        Chrome, and Opera. </p>
+  </body>
+</html>
+
+11
+
+-------- Page 14 (Lecture #6-14.jpg) ---------
+( program#31.html ) عملي
+
+EXPLORER
+HTML LANGUAGE
+program#17.html
+program#18.html
+program#19.html
+program#20.html
+program#21.html
+program#22.html
+program#23.html
+program#24.html
+program#25.html
+program#26.html
+program#27.html
+program#28.html
+program#29.html
+program#30.html
+program#31.html
+
+program#31.html x
+program#31.html > html > body > p
+
+1  <html lang="en">
+2  <head>
+3      <title>  HTML Paragraphs  </title>
+4      <meta charset='utf-8'>
+5  </head>
+6  <body>
+7      <a href="#para4" >  WEB BROWSER  </a>
+8      <h1>  WEB PAGE:  </h1>
+9      <p>  a single document on a website, usually consisting of
+10          document and any items that are displayed within that
+11          images or style sheets.  </p>
+12     <h1>  HOME PAGE:  </h1>
+13     <p>  The entry page for a website, which can link to additi
+14          on the same website or pages on other sites.  </p>
+15     <h1>  WEBSITE:  </h1>
+16     <p>  a collection of one or more web pages linked together.
+17     <h1 id="#para4" >  WEB BROWSER:  </h1>
+18     <p>  is an application which is used to view pages and navi
+19          in the World Wide Web. Popular examples: Firefox, Inter
+20          Chrome, and Opera.  </p>
+
+OUTLINE
+TIMELINE
+
+Ln 20, Col 24   Spaces: 4   UTF-8   CRLF   HTML
+
+-------- Page 15 (Lecture #6-15.jpg) ---------
+( program#31.html ) عملي
+
+WEB BROWSER
+
+WEB PAGE:
+a single document on a website, usually consisting of HTML document and any items that are displayed within that
+document, such as inline images or style sheets.
+
+HOME PAGE:
+The entry page for a website, which can link to additional pages on the same website or pages on other sites.
+
+WEBSITE:
+a collection of one or more web pages linked together.
+
+WEB BROWSER:
+is an application which is used to view pages and navigate the World Wide Web. Popular examples: Firefox, Internet
+Explorer, Safari, Chrome, and Opera.
+
+13
+
+-------- Page 16 (Lecture #6-16.jpg) ---------
+Images عناصر الصور
+
+• وسم  <img>  أو  <img/>  :  يستخدم لعرض الصور ضمن الصفحة اعتمادا على مسارها الذي يمرر للعنصر عبر الخاصية src ( اختصارا لـ Source )، الشكل العام:
+
+<img src="path"/>
+
+–  هو Single Tag.
+
+–  هو عنصر inline.
+
+–  هو عنصر فاض Empty element.
+
+-------- Page 17 (Lecture #6-17.jpg) ---------
+عناصر الصور Images
+
+سمات/خصائص Attributes لعناصر الصور Images :
+
+- خاصية alt : تحدد مكان عرض الصفحة ، ويحدد مكان عرض الصفحة حسب قيمة هذه الخاصية، الإستنداد إليها قيمة نصية يتم عرضها في حال تعذر الوصول إلى الصورة المذكورة في الواصفة src.
+
+- خاصية width وخاصية height : عرض الصورة بمقياس محدد.
+
+- خاصية border : لإضافة إطار للصورة.
+
+- خاصية title : وهي خاصية عامة global attribute يمكن وضعها مع العديد من الوسوم tags ، وهي تظهر نص عندما نضع مؤشر الماوس على الصورة.
+
+15
+
+-------- Page 18 (Lecture #6-18.jpg) ---------
+Images عناصر الصور
+
+مثال (1) :
+
+<html lang="en">
+  <head>
+    <title>  Images </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <img src="myPic.jpg"/>
+  </body>
+</html>
+
+16
+
+-------- Page 19 (Lecture #6-19.jpg) ---------
+( program#21.html ) عملي
+
+EXPLORER
+
+HTML LANGUAGE
+
+program#9.html
+program#10.html
+program#11.html
+program#12.html
+program#13.html
+program#14.html
+program#15.html
+program#16.html
+program#17.html
+program#18.html
+program#19.html
+program#20.html
+program#21.html
+program#22.html
+Unconfirmed 78443.crdownload
+
+program#21.html
+
+program#21.html
+
+<html lang="en">
+<head>
+    <title>   Images   </title>
+    <meta charset='utf-8'>
+</head>
+<body>
+    <img src="myPic.jpg"/>
+</body>
+</html>
+
+OUTLINE
+TIMELINE
+
+Ln 10, Col 1    Spaces: 4    UTF-8    CRLF    HTML
+
+-------- Page 20 (Lecture #6-20.jpg) ---------
+( program#21.html ) عملي
+
+Images
+
+file:///C:/Users/Z10/Desktop/HTML%20language/program%2321.html
+
+Widgets
+
+18
+
+-------- Page 21 (Lecture #6-21.jpg) ---------
+عناصر الصور Images
+
+مثال: (2)
+
+<html lang="en">
+  <head>
+    <title> Images </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <img src="myPic2.jpg" alt="Picture 2" title="my picture" />
+    <img src="myPic2.jpg" alt="Picture 2" width="100px" height="50px" border="5" />
+    <img src="myPic.jpg" alt="Picture 3" width="100px" height="50px"/>
+    <img src="صورة المسار الخاطى" alt="مسار خاطى"/>
+  </body>
+</html>
+
+19
+
+-------- Page 22 (Lecture #6-22.jpg) ---------
+( program#22.html ) عملي
+
+EXPLORER
+
+HTML LANGUAGE
+  program#14.html
+  program#15.html
+  program#16.html
+  program#17.html
+  program#18.html
+  program#19.html
+  program#20.html
+  program#21.html
+  program#22.html
+  program#23.html
+  program#24.html
+  program#25.html
+  program#26.html
+  program#27.html
+  program#28.html
+
+OUTLINE
+TIMELINE
+
+program#22.html
+
+program#22.html >
+1  <html lang="en">
+2  <head>
+3      <title>  Images  </title>
+4      <meta charset='utf-8'>
+5  </head>
+6  <body>
+7      <img src="myPic2.jpg" alt="Picture 2" title="my picture"/>
+8      <img src="myPic2.jpg" alt="Picture 2"
+9      width="100px" height="50px" border="5"/>
+10     <img src="myPic.jpg" alt="Picture 3" width="100px" height=
+11     <img src=         alt="  صورة  المسار  الخاطئ "/>
+12 </body>
+13 </html>
+
+Ln 14, Col 1   Spaces: 4   UTF-8   CRLF   HTML
+
+20
+
+-------- Page 23 (Lecture #6-23.jpg) ---------
+عملي ( program#22.html )
+
+Images
+file:///C:/Users/Z10/Desktop/HTML%20language/program%2322.html
+
+my picture
+
+© Amine Mouelhi
+
+صور لمسلسل الخلافلي؟
+21
+
+-------- Page 24 (Lecture #6-24.jpg) ---------
+Images عناصر الصور
+
+مثال (3) : الصورة بدلا من نصوص الروابط : ويتم ذلك بتضمين العنصر <img/> كمحتوى للعنصر <a> :
+
+<html lang="en">
+<head>
+    <title> Images </title>
+    <meta charset='utf-8'>
+</head>
+<body>
+    <a href="http://www.google.com"> <img src="myPic3.png" alt="Picture 3"
+        width="100px" height="50px"/> </a>
+</body>
+</html>
+
+22
+
+-------- Page 25 (Lecture #6-25.jpg) ---------
+( program#23.html ) عملي
+
+EXPLORER
+HTML LANGUAGE
+ program#9.html
+ program#10.html
+ program#11.html
+ program#12.html
+ program#13.html
+ program#14.html
+ program#15.html
+ program#16.html
+ program#17.html
+ program#18.html
+ program#19.html
+ program#20.html
+ program#21.html
+ program#23.html
+
+OUTLINE
+TIMELINE
+
+program#23.html x
+program#23.html >
+
+<!html lang="en">
+<head>
+    <title>    Images   </title>
+    <meta charset='utf-8'>
+</head>
+<body>
+    <a href="http://www.google.com"> <img src="myPic3.png" alt=""
+        width="100px" height="50px"/> </a>
+</body>
+</html>
+
+HTML language
+
+Ln 11, Col 1   Spaces: 4   UTF-8   CRLF   HTML
+
+23
+0  Δ  0
+
+-------- Page 26 (Lecture #6-26.jpg) ---------
+[ERROR: Failed to upload image]
+
+-------- Page 27 (Lecture #6-27.jpg) ---------
+[ERROR: Failed to upload image]
+
+-------- Page 28 (Lecture #6-28.jpg) ---------
+القوائم Lists
+
+مثال (1): القوائم الغير مرتبة Unordered List نستخدم الوسم <ul> :
+
+<html lang="en">
+<head>
+    <title> Lists </title>
+    <meta charset='utf-8'>
+</head>
+<body>
+    <ul>
+        <li>HTML</li>
+        <li>HTML5</li>
+        <li>XHTML</li>
+        <li>CSS</li>
+        <li>CSS3</li>
+    </ul>
+</body>
+</html>
+
+26
+
+-------- Page 29 (Lecture #6-29.jpg) ---------
+عملي ( program#24.html )
+
+EXPLORER
+HTML LANGUAGE
+program#10.html
+program#11.html
+program#12.html
+program#13.html
+program#14.html
+program#15.html
+program#16.html
+program#17.html
+program#18.html
+program#19.html
+program#20.html
+program#21.html
+program#22.html
+program#23.html
+program#24.html
+
+program#24.html x
+
+program#24.html > html > head > meta
+
+1  <html lang="en">
+2    <head>
+3      <title>   Lists   </title>
+4      <meta charset='utf-8'>
+5    </head>
+6    <body>
+7      <ul>
+8        <li>HTML</li>
+9        <li>HTML5</li>
+10       <li>XHTML</li>
+11       <li>CSS</li>
+12       <li>CSS3</li>
+13     </ul>
+14   </body>
+15 </html>
+
+OUTLINE
+TIMELINE
+
+0 0 0
+
+Ln 4, Col 31   Spaces: 4   UTF-8   CRLF   HTML
+
+-------- Page 30 (Lecture #6-30.jpg) ---------
+( program#24.html ) عملي
+
+Lists
+
+file:///C:/Users/Z10/Desktop/HTML%20language/program%2324.h
+
+• HTML
+• HTML5
+• XHTML
+• CSS
+• CSS3
+
+28
+
+-------- Page 31 (Lecture #6-31.jpg) ---------
+القوائم Lists
+
+مثال: (2) القوائم المرتبة ordered List نستخدم الوسم: <ol>
+
+<html lang="en">
+  <head>
+    <title> Lists </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <ol>
+      <li>HTML</li>
+      <li>HTML5</li>
+      <li>XHTML</li>
+      <li>CSS</li>
+      <li>CSS3</li>
+    </ol>
+  </body>
+</html>
+
+29
+
+-------- Page 32 (Lecture #6-32.jpg) ---------
+( program#25.html ) عملي
+
+EXPLORER
+
+HTML LANGUAGE
+  program#11.html
+  program#12.html
+  program#13.html
+  program#14.html
+  program#15.html
+  program#16.html
+  program#17.html
+  program#18.html
+  program#19.html
+  program#20.html
+  program#21.html
+  program#22.html
+  program#23.html
+  program#24.html
+  program#25.html
+
+program#25.html
+
+program#25.html > html > body > ol
+
+HTML language
+
+<html lang="en">
+  <head>
+    <title>  Lists  </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <ol>
+      <li>HTML</li>
+      <li>HTML5</li>
+      <li>XHTML</li>
+      <li>CSS</li>
+      <li>CSS3</li>
+    </ol>
+  </body>
+</html>
+
+OUTLINE
+TIMELINE
+
+Ln 11, Col 16   Spaces: 4   UTF-8   CRLF   HTML
+0 ⚠️ 0 ⓘ 0
+
+-------- Page 33 (Lecture #6-33.jpg) ---------
+عملي ( program#25.html )
+
+Lists
+file:///C:/Users/Z10/Desktop/HTML%20language/program%2325.h
+
+1. HTML
+2. HTML5
+3. XHTML
+4. CSS
+5. CSS3
+
+31
+
+-------- Page 34 (Lecture #6-34.jpg) ---------
+القوائم Lists
+
+سمات/خصائص Attributes للقوائم Lists :
+
+- خاصية type : لتغيير شكل القائمة :
+
+1. في حالة القوائم غير المرتبة يمكن إسناد إحدى القيم التالية إليها: square أو disc أو circle لوضع رمز المربع أو القرص أو الدائرة أمام كل عنصر على الترتيب.
+
+2. في حالة القائمة المرتبة يمكن إسناد إحدى القيم التالية إليها: 1 أو A أو a أو I أو i لتحويل الترقيم إلى ترقيم بأرقام عربية أو أحرف إنجليزية كبيرة أو أحرف إنجليزية صغيرة أو ترقيم بأرقام لاتينية كبيرة أو صغيرة.
+
+- خاصية reversed : لعكس الترتيب من الكبير إلى الصغير.
+
+- خاصية start : لتحديد البداية.
+
+32
+
+-------- Page 35 (Lecture #6-35.jpg) ---------
+Lists القوائم
+
+مثال (3):
+
+<html lang="en">
+<head>
+    <title> Lists </title>
+    <meta charset='utf-8'>
+</head>
+<body>
+    <ol type=“A”>
+        <li>HTML</li>
+        <li>HTML5</li>
+        <li>XHTML</li>
+        <li>CSS</li>
+        <li>CSS3</li>
+    </ol>
+</body>
+</html>
+
+33
+
+-------- Page 36 (Lecture #6-36.jpg) ---------
+عملي ( program#26.html )
+
+EXPLORER
+HTML LANGUAGE
+program#12.html
+program#13.html
+program#14.html
+program#15.html
+program#16.html
+program#17.html
+program#18.html
+program#19.html
+program#20.html
+program#21.html
+program#22.html
+program#23.html
+program#24.html
+program#25.html
+program#26.html
+
+program#26.html
+
+HTML language
+
+<html lang="en">
+  <head>
+    <title>  Lists  </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <ol type="A">
+      <li>HTML</li>
+      <li>HTML5</li>
+      <li>XHTML</li>
+      <li>CSS</li>
+      <li>CSS3</li>
+    </ol>
+  </body>
+</html>
+
+OUTLINE
+TIMELINE
+
+Ln 16, Col 1   Spaces: 4   UTF-8   CRLF   HTML
+
+34
+
+-------- Page 37 (Lecture #6-37.jpg) ---------
+[ERROR: Failed to upload image]
+
+-------- Page 38 (Lecture #6-38.jpg) ---------
+Lists القوائم
+
+مثال (4) :
+
+<html lang="en">
+<head>
+    <title> Lists </title>
+    <meta charset='utf-8'>
+</head>
+<body>
+
+    <ol reversed>
+        <li>HTML</li>
+        <li>HTML5</li>
+        <li>XHTML</li>
+        <li>CSS</li>
+        <li>CSS3</li>
+    </ol>
+
+</body>
+</html>
+
+36
+
+-------- Page 39 (Lecture #6-39.jpg) ---------
+( program#29.html ) عملي
+
+EXPLORER
+
+HTML LANGUAGE
+  program#15.html
+  program#16.html
+  program#17.html
+  program#18.html
+  program#19.html
+  program#20.html
+  program#21.html
+  program#22.html
+  program#23.html
+  program#24.html
+  program#25.html
+  program#26.html
+  program#27.html
+  program#28.html
+  program#29.html
+
+OUTLINE
+TIMELINE
+
+program#29.html ×
+program#29.html > html > body > ol > li
+
+1  <!html lang="en">
+2  <head>
+3      <title>     Lists  </title>
+4      <meta charset='utf-8'>
+5  </head>
+6  <body>
+7      <ol reversed>
+8          <li>HTML</li>
+9          <li>HTML5</li>
+10         <li>XHTML</li>
+11         <li>CSS</li>
+12         <li>CSS3</li>
+13     </ol>
+14 </body>
+15 </html>
+
+Ln 9, Col 23     Spaces: 4     UTF-8     CRLF     HTML
+
+37
+
+-------- Page 40 (Lecture #6-40.jpg) ---------
+( program#29.html ) عملي
+
+◦ Lists
+
+5. HTML
+4. HTML5
+3. XHTML
+2. CSS
+1. CSS3
+
+38
+
+-------- Page 41 (Lecture #6-41.jpg) ---------
+القوائم Lists
+
+مثال (5):
+
+<html lang="en">
+<head>
+    <title> Lists </title>
+    <meta charset='utf-8'>
+</head>
+<body>
+
+    <ol start="40">
+        <li>HTML</li>
+        <li>HTML5</li>
+        <li>XHTML</li>
+        <li>CSS</li>
+        <li>CSS3</li>
+    </ol>
+
+</body>
+</html>
+
+39
+
+-------- Page 42 (Lecture #6-42.jpg) ---------
+عملي ( program#30.html )
+
+EXPLORER
+HTML LANGUAGE
+program#16.html
+program#17.html
+program#18.html
+program#19.html
+program#20.html
+program#21.html
+program#22.html
+program#23.html
+program#24.html
+program#25.html
+program#26.html
+program#27.html
+program#28.html
+program#29.html
+program#30.html
+
+program#30.html x
+program#30.html >
+
+<html lang="en">
+<head>
+    <title>    Lists   </title>
+    <meta charset='utf-8'>
+</head>
+<body>
+    <ol start="40">
+        <li>HTML</li>
+        <li>HTML5</li>
+        <li>XHTML</li>
+        <li>CSS</li>
+        <li>CSS3</li>
+    </ol>
+</body>
+</html>
+
+OUTLINE
+TIMELINE
+
+Ln 16, Col 1     Spaces: 4     UTF-8     CRLF     HTML
+
+40
+
+-------- Page 43 (Lecture #6-43.jpg) ---------
+( program#30.html ) عملي
+
+Lists
+
+file:///C:/Users/Z10/Desktop/HTML%20language/program%2330.h
+
+40. HTML
+41. HTML5
+42. XHTML
+43. CSS
+44. CSS3
+
+41
+
+-------- Page 44 (Lecture #6-44.jpg) ---------
+القوائم Lists
+
+مثال (6):
+
+<html lang="en">
+<head>
+    <title> Lists </title>
+    <meta charset='utf-8'>
+</head>
+<body>
+
+    <ul type="circle">
+        <li>HTML</li>
+        <li>HTML5</li>
+        <li>XHTML</li>
+        <li>CSS</li>
+        <li>CSS3</li>
+    </ul>
+
+</body>
+</html>
+
+42
+
+-------- Page 45 (Lecture #6-45.jpg) ---------
+( program#27.html ) عملي
+
+EXPLORER
+HTML LANGUAGE
+program#13.html
+program#14.html
+program#15.html
+program#16.html
+program#17.html
+program#18.html
+program#19.html
+program#20.html
+program#21.html
+program#22.html
+program#23.html
+program#24.html
+program#25.html
+program#26.html
+program#27.html
+
+OUTLINE
+TIMELINE
+
+program#27.html
+
+program#27.html ×
+
+<html lang="en">
+  <head>
+    <title>     Lists     </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <ul type="circle">
+      <li>HTML</li>
+      <li>HTML5</li>
+      <li>XHTML</li>
+      <li>CSS</li>
+      <li>CSS3</li>
+    </ul>
+  </body>
+</html>
+
+Ln 16, Col 1  Spaces: 4  UTF-8  CRLF  HTML
+
+-------- Page 46 (Lecture #6-46.jpg) ---------
+( program#27.html ) عملي
+
+Lists
+file:///C:/Users/Z10/Desktop/HTML%20language/program%2327.h
+
+• HTML
+• HTML5
+• XHTML
+• CSS
+• CSS3
+
+44
+
+-------- Page 47 (Lecture #6-47.jpg) ---------
+[ERROR: Failed to upload image]
+
+-------- Page 48 (Lecture #6-48.jpg) ---------
+Lists القوائم
+
+: مثال
+
+<html lang="en">
+  <head>
+    <title> Lists </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <dl>
+      <dt>HTML</dt>
+      <dd>Hyper Text Markup Language</dd>
+      <dt>XHTML</dt>
+      <dd>extensible Hyper Text Markup Language</dd>
+      <dt>CSS</dt>
+      <dd>Cascading Style Sheet</dd>
+    </dl>
+  </body>
+</html>
+
+46
+
+-------- Page 49 (Lecture #6-49.jpg) ---------
+عملي ( program#28.html )
+
+EXPLORER
+HTML LANGUAGE
+program#14.html
+program#15.html
+program#16.html
+program#17.html
+program#18.html
+program#19.html
+program#20.html
+program#21.html
+program#22.html
+program#23.html
+program#24.html
+program#25.html
+program#26.html
+program#27.html
+program#28.html
+
+program#28.html
+
+1  <html lang="en">
+2  <head>
+3      <title>  Lists  </title>
+4      <meta charset='utf-8'>
+5  </head>
+6  <body>
+7      <dl>
+8          <dt>HTML</dt>
+9          <dd>Hyper Text Markup Language</dd>
+10         <dt>XHTML</dt>
+11         <dd>extensible Hyper Text Markup Language</dd>
+12         <dt>CSS</dt>
+13         <dd>Cascading Style Sheet</dd>
+14
+15     </dl>
+16  </body>
+17 </html>
+18
+
+OUTLINE
+TIMELINE
+
+Ln 18, Col 1   Spaces: 4   UTF-8   CRLF   HTML
+
+-------- Page 50 (Lecture #6-50.jpg) ---------
+( program#28.html ) عملي
+
+Lists
+file:///C:/Users/Z10/Desktop/HTML%20language/program%2328.h
+
+HTML
+    Hyper Text Markup Language
+XHTML
+    extensible Hyper Text Markup Language
+CSS
+    Cascading Style Sheet
+
+48
+
+-------- Page 51 (Lecture #6-51.jpg) ---------
+Thank you

data/7.txt

@@ -0,0 +1,1090 @@
+
+-------- Page 1 (Lecture #7-01.jpg) ---------
+Faculty of Information Technology – Tripoli University
+
+مقدمة في برمجة الإنترنت
+Introduction to Internet Programming
+[ ITGS226 ]
+
+المحاضرة السابعة
+
+أ. وفاء حسين المصباحي
+أستاذة المادة
+
+HTML5
+CSS3
+JS
+Cloud
+XML
+flat
+header
+.com
+footer
+.net
+PHP
+
+ربيع 2025
+
+-------- Page 2 (Lecture #7-02.jpg) ---------
+المواضيع التي سنبحثها في مقرر: مقدمة في برمجة الإنترنت
+Introduction to Internet Programming
+المحاضرة السابعة
+
+. الصوتيات Audio
+1
+
+. الفيديوهات Video
+
+. الجداول Tables
+
+-------- Page 3 (Lecture #7-03.jpg) ---------
+Audio الصوتيات
+
+- لدينا ملف صوتي mp3.music موجود بجانب ملف html.
+- لإضافة الصوتيات يتم استخدام وسم tag:
+
+<audio src=" "></audio>
+
+مثال:
+<audio src="music.mp3"></audio>
+
+- توجد مشكلة: يمكن أن يكون المتصفح لا يدعم إمتدادات معينة للصوت.
+
+- لحل المشكلة: نعمل نفس الملف بإمتدادات مختلفة (.ogg - .mp3 - .wav)، ونستخدم الوسم:
+
+<source src=" ">
+
+مثال:
+<audio>
+    <source src="music.mp3">
+    <source src="music.wav">
+    <source src="music.ogg">
+</audio>
+
+لينفذ المتصفح الجملة التي يدعم إمتدادها.
+
+-------- Page 4 (Lecture #7-04.jpg) ---------
+الصوتيات Audio
+
+- لكي يتعرف المتصفح على نوع الملف الصوتي:
+
+file            type
+mp3             audio/mpeg
+wav             audio/wav
+ogg             audio/ogg
+
+مثال :
+
+<audio>
+    <source src="music.mp3" type="audio/mpeg">
+    <source src="music.wav" type="audio/wav">
+    <source src="music.ogg" type="audio/ogg">
+    Your Browser does not support the audio element.
+</audio>
+
+كتابة هذه الجملة إذا المتصفح لا يدعم أي إمتداد من الأصوات.
+
+2
+
+-------- Page 5 (Lecture #7-05.jpg) ---------
+الصوتيات Audio
+
+سمات/خصائص Attributes لعناصر الصوت Audio :
+
+- خاصية controls : لإظهار أزرار التحكم.
+- خاصية loop : لتكرار الصوت.
+- خاصية muted : لعمل صامت.
+- خاصية autoplay : هذه الخاصية تجعل الصوت يعمل أوتوماتيك بمجرد فتح الملف وهذا سيء لأن المستخدم لا يعرف لماذا الصوت يشتغل، هذه الخاصية أصبحت غير مدعومة من قبل المتصفحات.
+
+الشكل العام:
+
+<audio controls loop muted autoplay>
+
+</audio>
+
+3
+
+-------- Page 6 (Lecture #7-06.jpg) ---------
+الصوتيات Audio
+
+مثال :
+
+<html lang="en">
+  <head>
+    <title> Audio </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+
+    <audio controls loop muted>
+      <source src="aud.mp3" type="audio/mpeg">
+      <source src="aud.wav" type="audio/wav">
+      <source src="aud.ogg" type="audio/ogg">
+      Your Browser does not support the audio element.
+    </audio>
+
+  </body>
+</html>
+
+4
+
+-------- Page 7 (Lecture #7-07.jpg) ---------
+( program#32.html ) عملي
+
+HTML LANGUAGE
+› program#17.html
+› program#18.html
+› program#19.html
+› program#20.html
+› program#21.html
+› program#22.html
+› program#23.html
+› program#24.html
+› program#25.html
+› program#26.html
+› program#27.html
+› program#28.html
+› program#29.html
+› program#30.html
+› program#31.html
+› program#32.html
+
+OUTLINE
+TIMELINE
+
+program#32.html ×
+
+1  <html lang="en">
+2  <head>
+3      <title>   Audio  </title>
+4      <meta charset='utf-8'>
+5  </head>
+6  <body>
+7      <audio controls loop muted >
+8          <source src="aud.mp3" type="audio/mpeg">
+9          <source src="aud.wav" type="audio/wav">
+10         <source src="aud.ogg" type="audio/ogg">
+11         Your Browser does not support the audio element.
+12     </audio>
+13 </body>
+14 </html>
+15
+
+Ln 15, Col 1    Spaces: 4   UTF-8   CRLF   HTML
+5
+
+-------- Page 8 (Lecture #7-08.jpg) ---------
+عملي ( program#32.html )
+
+Audio
+
+0:00 / 5:10
+
+6
+
+-------- Page 9 (Lecture #7-09.jpg) ---------
+الفيديوهات Video
+
+- لدينا ملف فيديو nature.mp4 موجود بجانب ملف html أو في مجلد folder اسمه video.
+- لإضافة الفيديوهات يتم استخدام وسـم tag:
+
+< video src=“     ” >       </video>
+
+مثال:
+
+< video src= “video/ nature.mp4” >    </video>
+
+- توجد مشكلة: يمكن أن يكون المتصفح لا يدعم امتدادات معينة للفيديو.
+- لحل المشكلة: نعمل نفس الملف بإمتدادات مختلفة ( .mp4 - .ogg - .webm )، ونستخدم الوسم:
+
+<source src=“     ” >
+
+مثال:
+
+<video>
+
+    <source src=“video/nature.mp4” >
+
+    <source src=“video/nature.webm” >
+
+    <source src=“video/nature.ogg” >
+
+</video>
+
+لينفذ المتصفح الجملة التي يدعم امتدادها.
+
+7
+
+-------- Page 10 (Lecture #7-10.jpg) ---------
+الفيديوهات Video
+
+- لكي يتعرف المتصفح على نوع ملف الفيديو:
+
+file        type
+mp4         video/mp4
+webm        video/webm
+ogg         video/ogg
+
+مثال :
+
+<video>
+    <source src="video/nature.mp3" type=" video/mp4">
+    <source src="video/nature.wav" type=" video/webm ">
+    <source src=video/"nature.ogg" type=" video/ogg ">
+    Your Browser does not support the video element.
+</video>
+
+كتابة هذه الجملة إذا المتصفح لا يدعم أي إمتداد من الفيديوهات.
+
+8
+
+-------- Page 11 (Lecture #7-11.jpg) ---------
+الفيديوهات Video
+
+سمات/خصائص Attributes لعناصر الفيديو Video:
+
+- خاصية controls: لإظهار أزرار التحكم.
+- خاصية loop: لتكرار الفيديو.
+- خاصية muted: لعمل صامت للصوت.
+- خاصية autoplay: هذه الخاصية تجعل الفيديو يعمل أوتوماتيك بمجرد فتح الملف ولا تشتغل هذه الخاصية إلا بوجود خاصية muted.
+- خاصية width وخاصية height: عرض الفيديو بمقاس محدد ومن الأفضل إستخدام واحدة منهم، وتسند لهما القيمة بالبكسل مثل: width="400" و height="400" ، أو تسند لها قيمة % مثل: width="100%" .
+- خاصية poster: لعمل خلفية(صورة) للفيديو، الصورة تكون بجانب ملف html، مثل: poster="myPic.jpg" .
+
+الشكل العام:
+
+<video controls loop width="400" height="400" muted autoplay>
+</video>
+
+9
+
+-------- Page 12 (Lecture #7-12.jpg) ---------
+الفيديوهات Video
+
+: مثال -
+
+<html lang="en">
+  <head>
+    <title> Video </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+
+    <video controls width="500" poster="myPic.jpg">
+      <source src="video/nature.mp4" type="video/mp4">
+      <source src="video/nature.webm" type="video/webm">
+      <source src="video/nature.ogg" type="video/ogg">
+      Your Browser does not support the video element.
+    </video>
+
+  </body>
+</html>
+
+10
+
+-------- Page 13 (Lecture #7-13.jpg) ---------
+( program#33.html ) عملي
+
+EXPLORER
+HTML LANGUAGE
+program#19.html
+program#20.html
+program#21.html
+program#22.html
+program#23.html
+program#24.html
+program#25.html
+program#26.html
+program#27.html
+program#28.html
+program#29.html
+program#30.html
+program#31.html
+program#32.html
+program#33.html
+
+OUTLINE
+TIMELINE
+
+program#33.html x
+
+program#33.html >
+
+<html lang="en">
+<head>
+    <title>    Video   </title>
+    <meta charset='utf-8'>
+</head>
+<body>
+
+    <video controls width="500" poster="myPic.jpg" >
+        <source src="video/nature.mp4" type="video/mp4">
+        <source src="video/nature.webm" type="video/webm">
+        <source src="video/nature.ogg" type="video/ogg">
+        Your Browser does not support the video element.
+    </video>
+
+</body>
+</html>
+
+Ln 15, Col 1     Spaces: 4     UTF-8     CRLF     HTML
+
+11
+
+-------- Page 14 (Lecture #7-14.jpg) ---------
+عملي ( program#33.html )
+
+صورة
+
+فيديو
+
+12
+
+-------- Page 15 (Lecture #7-15.jpg) ---------
+Tables
+الجداول
+
+- توفر لغة HTML آلية لإنشاء الجداول عبر العنصر <table> ، ثم يتم إنشاء محتويات الجدول حيث إنشاء الصفوف باستخدام الوسم <tr> ، ثم يتم ذكر محتويات خلايا table data كل سطر من أسطر الجدول على حدى وذلك عبر الوسم <td> .
+
+: الشكل العام
+
+<table>
+    <tr>
+        <td> ... </td>
+        <td> ... </td>
+        <td> ... </td>
+    </tr>
+</table>
+
+13
+
+-------- Page 16 (Lecture #7-16.jpg) ---------
+الجداول Tables
+
+سمات/خصائص Attributes لعناصر الجدول Table :
+- خاصية border : لعمل إطار للجدول.
+- خاصية width : تحدد عرض الجدول تسند لها قيمة % مثل : "width="50%".
+- خاصية colspan : تستخدم مع الوسم <td> لدمج الأعمدة في عمود واحد، مثل : "colspan="2" لدمج عمودين.
+- خاصية rowspan : تستخدم مع الوسم <td> لدمج الصفوف في صف واحد، مثل : "rowspan="3" لدمج ثلاث صفوف.
+
+<tr>                             </tr>
+
+<td></td>      <td></td>      <td></td>
+<td></td>      <td></td>      <td></td>
+<td></td>      <td></td>      <td></td>
+<td></td>      <td></td>      <td></td>
+
+14
+
+-------- Page 17 (Lecture #7-17.jpg) ---------
+Tables الجداول
+
+<html lang="en">
+    <head>
+        <title>  Create Table </title>
+        <meta charset='utf-8'>
+    </head>
+    <body>
+        <table border="1" width="50%">
+            <tr>
+                <td> name </td>
+                <td> age </td>
+                <td> salary </td>
+            </tr>
+            <tr>
+                <td> Ahmed </td>
+                <td> 25 </td>
+                <td> 2400 </td>
+            </tr>
+            <tr>
+                <td> Ali </td>
+            </tr>
+        </table>
+    </body>
+</html>
+
+مثال (1) -
+
+15
+
+-------- Page 18 (Lecture #7-18.jpg) ---------
+( program#34.html ) عملي
+
+File   Edit   Selection
+
+EXPLORER
+
+HTML LANGUAGE
+  program#20.html
+  program#21.html
+  program#22.html
+  program#23.html
+  program#24.html
+  program#25.html
+  program#26.html
+  program#27.html
+  program#28.html
+  program#29.html
+  program#30.html
+  program#31.html
+  program#32.html
+  program#33.html
+  program#34.html
+
+OUTLINE
+TIMELINE
+
+program#34.html x
+program#34.html …
+
+<html lang="en">
+  <body>
+    <table border="1" width="50%">
+      <tr>
+        <td> name </td>
+        <td> age </td>
+        <td> salary </td>
+      </tr>
+      <tr>
+        <td> Ahmed </td>
+        <td> 25 </td>
+        <td> 2400 </td>
+      </tr>
+      <tr>
+        <td> Ali </td>
+      </tr>
+    </table>
+  </body>
+</html>
+
+Ln 24, Col 1   Spaces: 4   UTF-8   CRLF   HTML
+
+16
+
+0 0 ⚠ 0
+
+-------- Page 19 (Lecture #7-19.jpg) ---------
+( program#34.html ) عملي
+
+Create Table
+
+file:///C:/Users/Z10/Desktop/HTML%20langu…
+
+name     age    salary
+Ahmed    25     2400
+Ali
+17
+
+-------- Page 20 (Lecture #7-20.jpg) ---------
+Tables الجداول
+
+مثال (2):
+
+<html lang="en">
+  <head>
+    <title> Create Table </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <table border="2" width="50%">
+      <tr>
+        <td> name </td>
+        <td> age </td>
+        <td> salary </td>
+      </tr>
+      <tr>
+        <td> Ahmed </td>
+        <td> 25 </td>
+        <td> 2400 </td>
+      </tr>
+      <tr>
+        <td> Ali </td>
+        <td> 26 </td>
+        <td> 3000 </td>
+      </tr>
+    </table>
+  </body>
+</html>
+
+18
+
+-------- Page 21 (Lecture #7-21.jpg) ---------
+الجدوال Tables
+
+تابع -
+
+    <tr>
+        <td> Total </td>
+        <td colspan="2" > 5400 </td>
+    </tr>
+</table>
+
+</body>
+</html>
+
+19
+
+-------- Page 22 (Lecture #7-22.jpg) ---------
+عملي ( program#35.html )
+
+File  Edit  Selection
+EXPLORER
+HTML LANGUAGE
+program#2.html
+program#22.html
+program#23.html
+program#24.html
+program#25.html
+program#26.html
+program#27.html
+program#28.html
+program#29.html
+program#30.html
+program#31.html
+program#32.html
+program#33.html
+program#34.html
+program#35.html
+
+OUTLINE
+TIMELINE
+
+0 0 0
+
+program#35.html
+
+program#35.html …
+
+<html lang="en">
+  <body>
+    <table border="2" width="50%">
+      <tr>
+        <td> Ahmed </td>
+        <td> 25 </td>
+        <td> 2400 </td>
+      </tr>
+      <tr>
+        <td> Ali </td>
+        <td> 26 </td>
+        <td> 3000 </td>
+      </tr>
+      <tr>
+        <td> Total </td>
+        <td colspan="2"> 5400 </td>
+      </tr>
+    </table>
+  </body>
+</html>
+
+Ln 30, Col 1  Spaces: 4  UTF-8  CRLF  HTML
+
+20
+
+-------- Page 23 (Lecture #7-23.jpg) ---------
+( program#35.html ) عملي
+
+Create Table
+
+file:///C:/Users/Z10/Desktop/HTML%20langu...
+
+name      age   salary
+Ahmed     25    2400
+Ali       26    3000
+Total           5400
+
+21
+
+-------- Page 24 (Lecture #7-24.jpg) ---------
+الجداول Tables
+
+مثال (3) :
+
+<html lang=“ar”>
+  <head>
+    <title> تكوين جدول </title>
+    <meta charset=‘utf-8’>
+  </head>
+  <body dir="rtl">
+    <table border=“1“ width=“50%“>
+      <tr>
+        <td> إسم الكتاب </td>
+        <td> السعر </td>
+        <td> الكمية </td>
+      </tr>
+      <tr>
+        <td> برمجة الويب </td>
+        <td> 150 </td>
+        <td> 3 </td>
+      </tr>
+      <tr>
+        <td> نظام التشغيل </td>
+        <td> 105 </td>
+        <td> 6 </td>
+      </tr>
+    </table>
+  </body>
+</html>
+
+22
+
+-------- Page 25 (Lecture #7-25.jpg) ---------
+Tables الجداول
+
+- تابع
+
+<tr>
+    <td> برمجة الألعاب </td>
+    <td> 100 </td>
+    <td> 10 </td>
+</tr>
+<tr>
+    <td> تعلم الطبخ </td>
+    <td> 50 </td>
+    <td> 15 </td>
+</tr>
+<tr>
+    <td> المجموع </td>
+    <td colspan="2"> 2830 </td>
+</tr>
+</table>
+
+</body>
+</html>
+
+23
+
+-------- Page 26 (Lecture #7-26.jpg) ---------
+( program#36.html ) عملي
+
+EXPLORER
+HTML LANGUAGE
+program#23.html
+program#24.html
+program#25.html
+program#26.html
+program#27.html
+program#28.html
+program#29.html
+program#30.html
+program#31.html
+program#32.html
+program#33.html
+program#34.html
+program#35.html
+program#36.html
+
+program#36.html
+
+program#36.html > html > head > meta
+
+<html lang="ar">
+<head>
+    <title> تكوين جدول </title>
+    <meta charset='utf-8'>
+</head>
+<body dir="rtl">
+    <table border="1" width="50%">
+        <tr>
+            <td>  إسم الكتاب  </td>
+            <td>  السعر  </td>
+            <td>  الكمية  </td>
+        </tr>
+        <tr>
+            <td>  برمجة الويب  </td>
+            <td> 150 </td>
+            <td> 3 </td>
+        </tr>
+        <tr>
+            <td>  نظام التشغيل  </td>
+            <td> 105 </td>
+        </tr>
+
+Ln 4, Col 21   Spaces: 4   UTF-8   CRLF   HTML
+
+-------- Page 27 (Lecture #7-27.jpg) ---------
+عملي ( program#36.html )
+
+تكوين جدول
+
+اسم الكتاب        السعر        الكمية
+برمجة الويب        150          3
+نظام التشغيل       105          6
+برمجة الألعاب      100          10
+تعلم الطبخ         50           15
+المجموع            2830
+
+-------- Page 28 (Lecture #7-28.jpg) ---------
+Tables الجداول
+
+مثال (4) :
+
+<html lang="ar">
+  <head>
+    <title> تكوين جدول </title>
+    <meta charset="utf-8">
+  </head>
+  <body dir="rtl">
+    <table border="2" width="50%">
+      <tr>
+        <td> إسم الكتاب </td>
+        <td> تعلم لغة السي </td>
+        <td rowspan="3"> <img src="myPic2.jpg" width="200px" height="100px"> </td>
+      </tr>
+      <tr>
+        <td> المؤلف </td>
+        <td> د. بشير الفائد </td>
+      </tr>
+      <tr>
+        <td> سنة الإصدار </td>
+        <td> 2001 </td>
+      </tr>
+    </table>
+  </body>
+</html>
+
+26
+
+-------- Page 29 (Lecture #7-29.jpg) ---------
+الجداول Tables
+
+- تابع
+
+<tr>
+    <td colspan="3">يقدم هذا الكتاب معلومات عن لغة الـــي</td>
+</tr>
+</table>
+</body>
+</html>
+
+27
+
+-------- Page 30 (Lecture #7-30.jpg) ---------
+عملي ( program#39.html )
+
+EXPLORER
+HTML LANGUAGE
+program#25.html
+program#26.html
+program#27.html
+program#28.html
+program#29.html
+program#30.html
+program#31.html
+program#32.html
+program#33.html
+program#34.html
+program#35.html
+program#36.html
+program#37.html
+program#38.html
+program#39.html
+
+OUTLINE
+TIMELINE
+
+program#39.html x
+program#39.html > html > body > table > tr
+
+HTML language
+
+<html lang="ar">
+<head>
+  <title>  تكوين جدول  </title>
+  <meta charset="utf-8">
+</head>
+<body dir="rtl">
+  <table border="2" width="50%">
+    <tr>
+      <td>  إسم الكتاب  </td>
+      <td>  تعلم لغة الــي  </td>
+      <td rowspan="3">  <img src="myPic2.jpg" width="200p
+    </tr>
+
+    <tr>
+      <td> المؤلف </td>
+      <td>  د . بشير الفايد  </td>
+    </tr>
+
+    <tr>
+      <td> سنة الاصدار </td>
+      <td> 2001 </td>
+    </tr>
+
+-------- Page 31 (Lecture #7-31.jpg) ---------
+عملي ( program#39.html )
+
+تكوين جدول
+
+اسم الكتاب     تعلم لغة السي
+المؤلف         د. بشير الشاذلي
+سنة الإصدار    2001
+يقدم هذا الكتاب معلومات عن لغة السي
+
+-------- Page 32 (Lecture #7-32.jpg) ---------
+Tables
+الجداول
+
+لو نريد أن نميز الصف الأول في الجدول يتم إستبدال الوسم <td> بالوسم <th> حيث يجعل الكتابة سميكة bold، كما في المثال التالي:
+
+<html lang="en">
+  <head>
+    <title> Create Table </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <table border="1" width="50%">
+      <tr>
+        <th> name </th>
+        <th> age </th>
+        <th> salary </th>
+      </tr>
+      <tr>
+        <td> Ahmed </td>
+        <td> 25 </td>
+        <td> 2400 </td>
+      </tr>
+      <tr>
+        <td> Ali </td>
+        <td> 23 </td>
+        <td> 3200 </td>
+      </tr>
+    </table>
+  </body>
+</html>
+
+إستبدال الوسم <td> بالوسم <th>
+
+30
+
+-------- Page 33 (Lecture #7-33.jpg) ---------
+( program#37.html ) عملي
+
+EXPLORER
+HTML LANGUAGE
+program#23.html
+program#24.html
+program#25.html
+program#26.html
+program#27.html
+program#28.html
+program#29.html
+program#30.html
+program#31.html
+program#32.html
+program#33.html
+program#34.html
+program#35.html
+program#36.html
+program#37.html
+
+OUTLINE
+TIMELINE
+
+program#37.html ×
+program#37.html > html > body > table > tr > td
+
+<html lang="en">
+  <body>
+    <table border="1" width="50%">
+      <tr>
+        <th> name </th>
+        <th> age </th>
+        <th> salary </th>
+      </tr>
+      <tr>
+        <td> Ahmed </td>
+        <td> 25 </td>
+        <td> 2400 </td>
+      </tr>
+      <tr>
+        <td> Ali </td>
+        <td> 23 </td>
+        <td> 3200 </td>
+      </tr>
+    </table>
+  </body>
+</html>
+
+Ln 14, Col 24   Spaces: 4   UTF-8   CRLF   HTML
+
+31
+0 0 0
+
+-------- Page 34 (Lecture #7-34.jpg) ---------
+( program#37.html ) عملي
+
+Create Table
+
+name      age     salary
+Ahmed      25      2400
+Ali        23      3200
+
+32
+
+-------- Page 35 (Lecture #7-35.jpg) ---------
+الجداول Tables
+
+• لتنظيم الجدول ولمساعدة محركات البحث نستخدم الوسوم <thead> ، <tbody> ، <tfoot> كما في الشكل التالي:
+
+<thead>
+<tbody>
+<tfoot>
+
+33
+
+-------- Page 36 (Lecture #7-36.jpg) ---------
+Tables الجداول
+
+لتنظيم الجدول ولمساعدة محركات البحث نستخدم الوسوم thead ، tbody ، tfoot ، ونستخدم الوسم caption لوصف الجدول.
+
+:الشكل العام
+
+<table>
+  <thead>
+    <caption> ... </caption>
+    <tr>
+      <td> ... </td>
+      <td> ... </td>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <td> ... </td>
+      <td> ... </td>
+    </tr>
+  </tbody>
+  <tfoot>
+    <tr>
+      <td> ... </td>
+      <td> ... </td>
+    </tr>
+  </tfoot>
+</table>
+
+34
+
+-------- Page 37 (Lecture #7-37.jpg) ---------
+Tables الجداول
+
+كما في المثال التالي:
+
+<html lang="en">
+  <head>
+    <title> Create Table </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <table border="2" width="100%">
+      <caption> Table (1) : </caption>
+      <thead>
+        <tr>
+          <th> name </th>
+          <th> age </th>
+          <th> salary </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td> Ahmed </td>
+          <td> 25 </td>
+          <td> 2400 </td>
+        </tr>
+      </tbody>
+    </table>
+  </body>
+</html>
+
+35
+
+-------- Page 38 (Lecture #7-38.jpg) ---------
+Tables الجداول
+
+تابع
+
+<tr>
+    <td> Ali </td>
+    <td> 23 </td>
+    <td> 3200 </td>
+</tr>
+</tbody>
+<tfoot>
+    <tr>
+        <td> total </td>
+        <td colspan="2"> 5600 </td>
+    </tr>
+</tfoot>
+</table>
+
+</body>
+</html>
+
+36
+
+-------- Page 39 (Lecture #7-39.jpg) ---------
+عملي (program#38.html)
+
+EXPLORER
+
+HTML LANGUAGE
+program#24.html
+program#25.html
+program#26.html
+program#27.html
+program#28.html
+program#29.html
+program#30.html
+program#31.html
+program#32.html
+program#33.html
+program#34.html
+program#35.html
+program#36.html
+program#37.html
+program#38.html
+
+OUTLINE
+TIMELINE
+
+program#38.html x
+program#38.html > html > body > table
+
+1  <html lang="en">
+2  <head>
+3      <title>    Create Table    </title>
+4      <meta charset='utf-8'>
+5  </head>
+6  <body>
+7      <table border="2" width="100%">
+8          <caption> Table (1) : </caption>
+9          <thead>
+10             <tr>
+11                 <th> name </th>
+12                 <th> age </th>
+13                 <th> salary </th>
+14             </tr>
+15         </thead>
+16         <tbody>
+17             <tr>
+18                 <td> Ahmed </td>
+19                 <td> 25 </td>
+20                 <td> 2400 </td>
+...
+37
+
+Ln 7, Col 25    Spaces: 4    UTF-8    CRLF    HTML
+
+-------- Page 40 (Lecture #7-40.jpg) ---------
+عملي ( program#38.html )
+
+Create Table
+
+file:///C:/Users/Z10/Desktop/HTML%20language/F
+
+Table (1) :
+
+name           age           salary
+Ahmed          25            2400
+Ali            23            3200
+total                        5600
+
+-------- Page 41 (Lecture #7-41.jpg) ---------
+Thank you

data/8.txt

@@ -0,0 +1,1244 @@
+
+-------- Page 1 (Lecture #8-01.jpg) ---------
+Faculty of Information Technology – Tripoli University
+
+مقدمة في برمجة الانترنت
+Introduction to Internet Programming
+
+[ ITGS226 ]
+
+المحاضرة الثامنة
+
+أستاذة المادة
+أ. وفاء حسين المصباحي
+
+HTML5
+CSS3
+XML
+PHP
+Cloud
+js
+flat
+header
+.com
+footer
+.net
+
+ربيع 2025
+
+-------- Page 2 (Lecture #8-02.jpg) ---------
+المواضيع التي سيتم دراستها في مقرر : مقدمة في برمجة الإنترنت
+Introduction to Internet Pr ogramming
+المحاضرة الثامنة
+
+1
+Forms . النماذج
+
+-------- Page 3 (Lecture #8-03.jpg) ---------
+Forms النماذج
+
+- النموذج أو الإستماراة Form يستخدم لتجميع مجموعة مختلفة من مدخلات المستخدم user iputs مثل : الإسم name الإيميل email address ورقم الهاتف phone number أو معلومات عن بطاقة الإئتمان credit card .
+
+: الشكل العام
+
+<form>
+.
+.
+.
+</form>
+
+- الوسم <form> يحتوي على أنواع مختلفة من المدخلات input مثل : text fields و checkboxes و radio buttons و submit buttons وغيرها... تسمى controls.
+
+- المستخدمون users يقومون بإكمال النموذج form بإستخدام controls مثل إدخال text أو إختيار item وغيرها ويرسل مدخلات النموذج إلى web server ليقوم بمعالجتها.
+
+-------- Page 4 (Lecture #8-04.jpg) ---------
+Forms النماذج
+
+سمات/خصائص Attributes لعنصر النموذج Form :
+
+- خاصية action : التي تحدد اسم الملف البرمجي الذي سيقوم بمعالجة البيانات المدخلة في النموذج ويكون الملف البرمجي مكتوبا بإحدى لغات البرمجة مثل PHP أو ASP.NET أو JSP وغيرها.
+
+- خاصية method : التي تحدد طريقة إرسال البيانات إلى الملف البرمجي المذكور سابقا بإحدى الطريقتين:
+
+• الطريقة get حيث يتم إرسال البيانات في شريط العنوان في المستعرض بعد اسم الملف البرمجي بشكل أزواج ( مفتاح=قيمة ) انظر للرابط التالي على سبيل المثال:
+
+http://www.site.com/file.php?name=Mukhtar&age=23&job=ComputerEngin
+
+القيم المرسلة                       الملف البرمجي
+
+• الطريقة post حيث يتم إرسال البيانات بشكل غير ظاهر في شريط العنوان ( يتم إرسالها مع ترويسة طلب HTTP ).
+
+-------- Page 5 (Lecture #8-05.jpg) ---------
+Forms النماذج
+
+- خاصية name : التي تخصص اسم للنموذج Form ، والذي يجب أن يكون الإسم فريد عن بقية أسماء النماذج Forms في الوثيقة document ويجب ألا يكون فاضي empty .
+
+- خاصية target : تحدد أين سيتم عرض النتيجة التي ستسلم بعد تقديم النموذج Form ، القيم المحتملة : _blank ، _self ، _parent ، _top .
+3
+
+-------- Page 6 (Lecture #8-06.jpg) ---------
+Forms النماذج
+
+: Form elements عناصر النموذج
+• <fieldset> & <legend>
+• <label>
+• <input> & its types & its attributes
+• <textarea>
+• <select> & <option> & <optgroup>
+• <datalist>
+• <button>
+
+4
+
+-------- Page 7 (Lecture #8-07.jpg) ---------
+Forms النماذج
+
+<fieldset> & <legend>
+
+• The <fieldset> element is used to group related data in a form.
+
+• The <fieldset> tag draws a box around the related elements.
+
+• The <legend> element defines a caption for the <fieldset> element.
+
+5
+
+-------- Page 8 (Lecture #8-08.jpg) ---------
+Forms النماذج
+
+<label>
+
+• The <label> tag defines a label for several elements such as input, textarea, select, etc.
+
+• labels will benefit screen reader users (will read out loud the label, when the user is focused on the element) and users who have difficulty clicking on very small regions (such as checkboxes) - because when a user clicks the text within the <label> element, it toggles the input (this increases the hit area).
+
+• The for attribute of <label> must be equal to the id attribute of the related element to bind them together.
+
+• A label can also be bound to an element by placing the element inside the <label> element.
+
+6
+
+-------- Page 9 (Lecture #8-09.jpg) ---------
+Forms النماذج
+
+<input>
+
+• This is the most commonly used element within HTML forms.
+
+• An input element can be of type text field, password field, checkbox, radio button, submit button, reset button, file select box, as well as several new input types introduced in HTML5.
+
+• The default value of the type attribute is "text".
+
+7
+
+-------- Page 10 (Lecture #8-10.jpg) ---------
+Forms
+النماذج
+
+<input type="">
+
+• <input type="text">
+• <input type="password">
+• <input type="hidden">
+• <input type="submit">
+• <input type="reset">
+• <input type="button">
+• <input type="image">
+• <input type="radio">
+• <input type="checkbox">
+• <input type="file">
+• <input type="date">
+
+• <input type="datetime-local">
+• <input type="time">
+• <input type="week">
+• <input type="month">
+• <input type="search">
+• <input type="tel">
+• <input type="url">
+• <input type="email">
+• <input type="number">
+• <input type="range">
+• <input type="color">
+
+8
+
+-------- Page 11 (Lecture #8-11.jpg) ---------
+Forms النماذج
+
+<input type="">
+
+► <input type="text">
+    defines a single-line text input field.
+
+► <input type="password">
+    defines a password field. The characters in a password field
+    are masked (shown as asterisks or circles).
+
+► The <input type="hidden">
+    defines a hidden input field (not visible to a user). This
+    field let web developers include data that cannot be seen
+    or modified by users when a form is submitted.
+
+► <input type="submit">
+    defines a button for submitting form data to a form-handler
+    which is typically a server page with a script for processing
+    input data that is specified in the form's action attribute.
+
+► <input type="reset">
+    defines a reset button that will reset all form values to
+    their default values.
+
+► <input type="button">
+    defines a button, mostly used with a JavaScript to
+    activate a script inside a <button>.
+
+► <input type="image">
+    defines an image as a submit button. The path to the
+    image is specified in the src attribute.
+
+► <input type="radio">
+    defines a radio button. Radio buttons let a user select
+    ONLY ONE of a limited number of choices. The radio
+    group must have share the same name (the value of
+    the name attribute) to be treated as a group. To make a
+    radio button selected by default, add the attribute
+    checked to the input element.
+
+9
+
+-------- Page 12 (Lecture #8-12.jpg) ---------
+Forms النماذج
+
+<input type="">
+▶ <input type="checkbox">
+   defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices. The name is used to group multiple checkboxes together. To make a checkbox selected by default, add the attribute checked to the input element.
+
+▶ <input type="file">
+   defines a file-select field and a "Browse" button for file uploads. It allows a user to browse for a local file and send it as an attachment with the form data. It has the attribute accept that specifies a filter for what file types the user can pick from the file input dialog box e.g. <input accept="audio/*,video/*,image/*"> or <input accept=".jpg">.
+
+▶ <input type="date">
+   is used for input fields that should contain a date. The resulting value includes the year, month and day.
+
+▶ <input type="datetime-local">
+   specifies a date and time input field, with no time zone. The resulting value includes the year, month, day and time.
+
+▶ <input type="time">
+   allows the user to select a time (no time zone).
+
+▶ <input type="week">
+   allows the user to select a week and year.
+
+▶ <input type="month">
+   allows the user to select a month and year. The format is "YYYY-MM".
+
+▶ The <input type="search">
+   is used for search fields (a search field behaves like a regular text field).
+
+10
+
+-------- Page 13 (Lecture #8-13.jpg) ---------
+Forms النماذج
+
+<input type="">
+
+- The <input type="tel">
+  is used for input fields that should contain a telephone number.
+
+- The <input type="url">
+  is used for input fields that should contain a URL address.
+
+- <input type="email">
+  is used for input fields that should contain an e-mail address. The input value is automatically validated to ensure it is a properly formatted e-mail address.
+
+- <input type="number">
+  defines a numeric input field. Restrictions can be set using the attributes: max, min, step or value.
+
+- The <input type="range">
+  defines a control for entering a number whose exact value is not important (like a slider control). Default range is 0 to 100. However, you can set restrictions on what numbers are accepted with the min, max, and step attributes
+
+- <input type="color">
+  used for input fields that should contain a color. The default value is #000000 (black).
+
+11
+
+-------- Page 14 (Lecture #8-14.jpg) ---------
+Forms
+النماذج
+
+: input عناصر Attributes سمات/خصائص
+
+Attribute            Value                Description
+name                 text                 Specifies the name of an <input> element
+required             required             Specifies that an input field must be filled out before submitting the form
+autofocus            autofocus            Specifies that an <input> element should automatically get focus when the page loads
+readonly             readonly             Specifies that an input field is read-only
+disabled             disabled             Specifies that an <input> element should be disabled
+placeholder          text                 Specifies a short hint that describes the expected value of an <input> element
+
+autocomplete         on                   Specifies whether an <input> element should have autocomplete enabled
+                     off
+
+accept               file_extension       Specifies a filter for what file types the user can pick from the file input dialog box (only for type="file")
+                     audio/*
+                     video/*
+                     image/*
+
+checked              checked              Specifies that an <input> element should be pre-selected when the page loads (for type="checkbox" or type="radio")
+
+max                  number               Specifies the maximum value for an <input> element
+                     date
+
+maxlength            number               Specifies the maximum number of characters allowed in an <input> element
+
+min                  number               Specifies a minimum value for an <input> element
+                     date
+
+minlength            number               Specifies the minimum number of characters required in an <input> element
+
+multiple             multiple             Specifies that a user can enter more than one value in an <input> element
+
+pattern              regexp               Specifies a regular expression that an <input> element's value is checked against
+
+size                 number               Specifies the width, in characters, of an <input> element
+
+step                 number               Specifies the interval between legal numbers in an input field
+
+value                text                 Specifies the value of an <input> element
+
+12
+
+-------- Page 15 (Lecture #8-15.jpg) ---------
+Forms النماذج
+
+- (1)مثال:   نموذج Form يحتوي على عناصر إدخال input element مختلفة.
+
+<html lang="en">
+  <head>
+    <title> form </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <form>
+      <input type="text">
+      <input type="number">
+      <input type="password">
+      <input type="email">
+      <input type="tel">
+    </form>
+  </body>
+</html>
+
+13
+
+-------- Page 16 (Lecture #8-16.jpg) ---------
+( program#40.html ) عملي
+
+EXPLORER
+HTML LANGUAGE
+program#27.html
+program#28.html
+program#29.html
+program#30.html
+program#31.html
+program#32.html
+program#33.html
+program#34.html
+program#35.html
+program#36.html
+program#37.html
+program#38.html
+program#39.html
+program#40.html
+
+OUTLINE
+TIMELINE
+
+program#40.html
+
+HTML language
+
+<html lang="en">
+  <head>
+    <title>   form   </title>
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <form>
+      <input type="text">
+      <input type="number">
+      <input type="password">
+      <input type="email">
+      <input type="tel">
+    </form>
+  </body>
+</html>
+
+Ln 8, Col 22   Spaces: 4   UTF-8   CRLF   HTML
+
+14
+
+-------- Page 17 (Lecture #8-17.jpg) ---------
+( program#40.html ) عملي
+
+form
+file:///C:/Users/Z10/Desktop/HTML%20langu...
+
+form
+file:///C:/Users/Z10/Desktop/HTML%20langu...
+
+wafa elmisbahi         0
+925276841
+                       *****
+                                           wafa@yahoo.com
+
+15
+
+-------- Page 18 (Lecture #8-18.jpg) ---------
+Forms النماذج
+
+- مثال(2): لعمل نموذج Form لتسجيل الدخول login .
+
+<html lang="en">
+<head>
+    <title> form2 </title>
+    <meta charset='utf-8'>
+</head>
+<body>
+    <form>
+        <label>user name</label>
+        <input type="text">
+        <br/>
+        <label>pass word</label>
+        <input type="password">
+        <br/>
+        <input type="submit">
+    </form>
+</body>
+</html>
+
+16
+
+-------- Page 19 (Lecture #8-19.jpg) ---------
+( program#41.html ) عملي
+
+EXPLORER
+HTML LANGUAGE
+program#28.html
+program#29.html
+program#30.html
+program#31.html
+program#32.html
+program#33.html
+program#34.html
+program#35.html
+program#36.html
+program#37.html
+program#38.html
+program#39.html
+program#40.html
+program#41.html
+
+OUTLINE
+TIMELINE
+
+program#41.html
+program#41.html > html > body > form
+
+1  <html lang="en">
+2    <head>
+3      <title>      form2      </title>
+4      <meta charset='utf-8'>
+5    </head>
+6    <body>
+7      <form>
+8        <label>user name</label>
+9        <input type="text">
+10       <br/>
+11       <label>pass word</label>
+12       <input type="password">
+13       <br/>
+14       <input type="submit">
+15     </form>
+16   </body>
+17 </html>
+
+Ln 7, Col 15   Spaces: 4   UTF-8   CRLF   HTML
+
+-------- Page 20 (Lecture #8-20.jpg) ---------
+( program#41.html ) عملي
+
+form2
+
+user name [____________________]
+pass word [____________________]
+Submit
+
+form2
+
+user name  ahmed [__________]
+pass word  ••••• [__________]
+Submit
+
+18
+
+-------- Page 21 (Lecture #8-21.jpg) ---------
+Forms
+النماذج
+
+- مثال(3): المثال السابق بالإضافة إلى ربط input بـ label باستخدام الخاصيتين for و id، وجعل تعبئة
+البيانات إجباري بإستخدام الخاصية required، وإضافة إسم للزر بإستخدام خاصية value.
+
+<html lang="en">
+    <head>
+        <title> form3 </title>
+        <meta charset="utf-8">
+    </head>
+    <body>
+        <form>
+            <label for="txt">user name</label>
+            <input id="txt" type="text" required>
+            <br/>
+            <label for="pass">pass word</label>
+            <input id="pass" type="password" required>
+            <br/>
+            <input type="submit" value="save">
+        </form>
+    </body>
+</html>
+
+19
+
+-------- Page 22 (Lecture #8-22.jpg) ---------
+عملي ( program#42.html )
+
+File  Edit  Selection  …
+
+EXPLORER
+
+HTML LANGUAGE
+  program#28.html
+  program#29.html
+  program#30.html
+  program#31.html
+  program#32.html
+  program#33.html
+  program#34.html
+  program#35.html
+  program#36.html
+  program#37.html
+  program#38.html
+  program#39.html
+  program#40.html
+  program#41.html
+  program#42.html
+
+OUTLINE
+TIMELINE
+
+program#42.html ×
+
+program#42.html > html > body > form > br
+
+<html lang="en">
+<head>
+    <title>   form3   </title>
+    <meta charset="utf-8">
+</head>
+<body>
+    <form>
+        <label for="txt">user name</label>
+        <input id="txt" type="text" required>
+        <br/>
+        <label for="pass">pass word</label>
+        <input id="pass" type="password" required>
+        <br/>
+        <input type="submit" value="save">
+    </form>
+</body>
+</html>
+
+Ln 10, Col 18   Spaces: 4   UTF-8   CRLF   HTML
+
+20  0  0
+
+-------- Page 23 (Lecture #8-23.jpg) ---------
+عملي  ( program#42.html )
+
+form3
+
+user name
+pass word
+save
+
+عند الضغط على label ينتقلنا إلى textbox
+
+form3
+
+user name
+pass word
+save
+
+Please fill out this field.
+
+عندما لا يتم تعبئة البيانات عند الضغط على زر save تظهر هذه الرسالة وذلك بسبب إستخدام خاصية required
+
+21
+
+-------- Page 24 (Lecture #8-24.jpg) ---------
+Forms
+النماذج
+
+- مثال (4): لعمل مربع بداخل form وعمل عنوان لـ form ، باستخدام العناصر <fieldset> و <legend>.
+
+<html lang="en">
+  <head>
+    <title> form4 </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <form>
+      <fieldset>
+        <legend> login </legend>
+        <label for="txt">user name</label>
+        <input id="txt" type="text" required>
+        <br/>
+        <label for="pass">pass word</label>
+        <input id="pass" type="password" required>
+        <br/>
+        <input type="submit" value="save">
+      </fieldset>
+    </form>
+  </body>
+</html>
+
+22
+
+-------- Page 25 (Lecture #8-25.jpg) ---------
+عملي ( program#43.html )
+
+EXPLORER
+HTML LANGUAGE
+program#29.html
+program#30.html
+program#31.html
+program#32.html
+program#33.html
+program#34.html
+program#35.html
+program#36.html
+program#37.html
+program#38.html
+program#39.html
+program#40.html
+program#41.html
+program#42.html
+program#43.html
+
+HTML language
+
+program#43.html x
+program#43.html > html > body > form
+
+<html lang="en">
+<head>
+    <title>    form4    </title>
+    <meta charset='utf-8'>
+</head>
+<body>
+    <form>
+        <fieldset>
+            <legend> login </legend>
+            <label for="txt">user name</label>
+            <input id="txt" type="text" required>
+            <br/>
+            <label for="pass">pass word</label>
+            <input id="pass" type="password" required>
+            <br/>
+            <input type="submit" value="save">
+        </fieldset>
+    </form>
+</body>
+</html>
+
+OUTLINE
+TIMELINE
+
+23
+
+-------- Page 26 (Lecture #8-26.jpg) ---------
+( program#43.html ) عملي
+
+form4
+
+login
+user name  ______________________
+pass word  ______________________
+save
+
+24
+
+-------- Page 27 (Lecture #8-27.jpg) ---------
+Forms
+النماذج
+
+- مثال(5): المثال السابق مع إضافة الخاصيتين action و method إلى وسم <form>.
+
+<html lang="en">
+  <head>
+    <title> form5 </title>
+    <meta charset='utf-8'>
+  </head>
+  <body>
+    <form method="get" action="file.php">
+      <fieldset>
+        <legend> login </legend>
+        <label for="txt">user name</label>
+        <input id="txt" type="text" required>
+        <br/>
+        <label for="pass">pass word</label>
+        <input id="pass" type="password" required>
+        <br/>
+        <input type="submit" value="save">
+      </fieldset>
+    </form>
+  </body>
+</html>
+
+25
+
+-------- Page 28 (Lecture #8-28.jpg) ---------
+عملي ( program#44.html )
+
+EXPLORER
+HTML LANGUAGE
+program#30.html
+program#31.html
+program#32.html
+program#33.html
+program#34.html
+program#35.html
+program#36.html
+program#37.html
+program#38.html
+program#39.html
+program#40.html
+program#41.html
+program#42.html
+program#43.html
+program#44.html
+
+OUTLINE
+TIMELINE
+
+program#44.html
+HTML language
+
+program#44.html > html > body > form > fieldset > input#txt
+
+1  <html lang="en">
+2  <head>
+3      <title>   form5   </title>
+4      <meta charset="utf-8">
+5  </head>
+6  <body>
+7      <form method="get" action="file.php">
+8          <fieldset>
+9              <legend>  login  </legend>
+10             <label for="txt">user name</label>
+11             <input id="txt" type="text" required>
+12             <br/>
+13             <label for="pass">pass word</label>
+14             <input id="pass" type="password" required>
+15             <br/>
+16             <input type="submit" value="save">
+17         </fieldset>
+18     </form>
+19 </body>
+20 </html>
+
+Ln 11, Col 33    Spaces: 4    UTF-8    CRLF    HTML
+
+26
+
+-------- Page 29 (Lecture #8-29.jpg) ---------
+عملي ( program#44.html )
+
+login
+user name
+pass word
+save
+
+عند الضبط على save يتم إرسال البيانات إلى ملف file.php
+
+form5
+
+login
+user name
+pass word
+save
+
+file:///C:/Users/Z10/Desktop/HTML%20language/...
+
+تظهر البيانات المرسلة في URL بجانب اسم الملف file.php ولكن لكي لا تظهر البيانات يتم تغيير قيمة الخاصة method="post"
+
+27
+
+-------- Page 30 (Lecture #8-30.jpg) ---------
+النماذج Forms
+
+مثال (6):
+
+<html lang="ar">
+  <head>
+    <title> نموذج 6 </title>
+    <meta charset="utf-8">
+  </head>
+  <body dir="rtl">
+    <form method="get" action="file.php">
+      <fieldset>
+        <legend> تسجيل </legend>
+        <label for="txt"> : الاسم </label>
+        <input id="txt" name="txt" type="text" required>
+        <br/>
+        <label for="pass"> : كلمة المرور </label>
+        <input id="pass" name="pass" type="password" required>
+        <br/>
+        <label for="pic"> : الصورة الشخصية </label>
+        <input id="pic" name="pic" type="file" required>
+        <br/>
+        <input id="resBtn" name="resBtn" type="reset" value="استعادة">
+        <br/>
+        <input id="okButton" name="okButton" type="submit" value="موافق">
+      </fieldset>
+    </form>
+  </body>
+</html>
+
+28
+
+-------- Page 31 (Lecture #8-31.jpg) ---------
+عملي ( program#45.html )
+
+EXPLORER
+
+HTML LANGUAGE
+  program#31.html
+  program#32.html
+  program#33.html
+  program#34.html
+  program#35.html
+  program#36.html
+  program#37.html
+  program#38.html
+  program#39.html
+  program#40.html
+  program#41.html
+  program#42.html
+  program#43.html
+  program#44.html
+  program#45.html
+
+OUTLINE
+TIMELINE
+
+program#45.html
+
+program#45.html > html > body > form > fieldset > input#resBtn
+
+1  <html lang="ar">
+2      <body dir="rtl">
+3          <form>
+4
+8              <fieldset>
+11                 <input id="txt" name="txt" type="text" required>
+12                 <br/>
+13                 <label for="pass"> كلمة المرور : </label>
+14                 <input id="pass" name="pass" type="password" requi
+15
+16                 <br/>
+17                 <label for="pic"> الصورة الشخصية : </label>
+18                 <input id="pic" name="pic" type="file" required>
+19                 <br/>
+19                 <input id="resBtn" name="resBtn" type="reset" valu
+20                 <input id="okButton" name="okButton" type="submit"
+21             </fieldset>
+22         </form>
+23
+24     </body>
+25 </html>
+
+Ln 19, Col 79     Spaces: 4     UTF-8     CRLF     HTML
+
+29
+
+0 0 Δ 0
+
+-------- Page 32 (Lecture #8-32.jpg) ---------
+عملي ( program#45.html )
+
+نموذج 6
+
+تسجيل
+الاسم :
+كلمة المرور :
+الصورة الشخصية :
+
+No file chosen   Choose File
+
+موافق   استعادة
+
+زر لإعادة ضبط القيم الافتراضية لعناصر الإدخال كاملة في النموذج form
+
+30
+
+-------- Page 33 (Lecture #8-33.jpg) ---------
+النماذج Forms
+
+- مثال :(7)
+
+عناصر الإختيار radio و checkbox:
+
+يتم إستعمال هذه العناصر في النماذج لتمكين المستخدم من الإجابة على سؤال محدد:
+
+▪ العنصر radio: يتم إختيار إجابة واحدة فقط من عدة إجابات محتملة.
+
+▪ العنصر checkbox: يتم إختيار أكثر من إجابة على سؤال محدد.
+
+ويتم إستخدام هذه العناصر بنفس طريقة إستخدام العناصر السابقة مع ملاحظة: إعطاء جميع العناصر التي تمثل إجابة لنفس السؤال القيمة الخاصة name وقيمًا مختلفة للخاصية value.
+
+31
+
+-------- Page 34 (Lecture #8-34.jpg) ---------
+Forms النماذج
+
+تابع.
+
+<html lang=“ar”>
+  <head>
+    <title> radio and checkbox </title>
+    <meta charset=“utf-8”>
+  </head>
+  <body dir=“rtl”>
+    <form method=“post” action=“file.php”>
+      <fieldset>
+        <legend> : أحب عن الأسئلة التالية </legend>
+        <p> ؟ من أين علمت عن موقعنا </p>
+        <label>جريدة</label>
+        <input type=“checkbox” name=“wrknow ” value=“nPaper”>
+        <label>موقع إلكتروني</label>
+        <input type=“checkbox” name=“wrknow ” value=“wbSite”>
+        <label>صديق</label>
+        <input type=“checkbox” name=“wrknow ” value=“frnd”>
+        <label>محرك بحث</label>
+        <input type=“checkbox” name=“wrknow ” value=“srEng”>
+        <p> ؟ ما تقييمك لموقعنا </p>
+        <label>جيد</label>
+        <input type=“radio” name=“rate ” value=“good”>
+        <label>متوسط</label>
+        <input type=“radio” name=“rate ” value=“mid”>
+        <label>سيء</label>
+        <input type=“radio” name=“rate ” value=“bad”>
+      </fieldset>
+    </form>
+  </body>
+</html>
+
+32
+
+-------- Page 35 (Lecture #8-35.jpg) ---------
+عملي ( program#46.html )
+
+EXPLORER
+HTML LANGUAGE
+program#32.html
+program#33.html
+program#34.html
+program#35.html
+program#36.html
+program#37.html
+program#38.html
+program#39.html
+program#40.html
+program#41.html
+program#42.html
+program#43.html
+program#44.html
+program#45.html
+program#46.html
+
+OUTLINE
+TIMELINE
+
+program#46.html
+program#46.html  html
+<html lang="ar">
+  <body dir="rtl">
+    <form>
+      <fieldset>
+        <label> جريدة </label>
+        <input type="checkbox" name="wrknow" value="nPape">
+        <label> موقع إلكتروني </label>
+        <input type="checkbox" name="wrknow" value="wbSite">
+        <label> صديق </label>
+        <input type="checkbox" name="wrknow" value="frnd">
+        <label> محرك بحث </label>
+        <input type="checkbox" name="wrknow" value="srEng">
+        <p> ما تقييمك لموقعنا ؟ </p>
+        <label> جيد </label>
+        <input type="radio" name="rate" value="good">
+        <label> متوسط </label>
+        <input type="radio" name="rate" value="mid">
+        <label> سيء </label>
+        <input type="radio" name="rate" value="bad">
+      </fieldset>
+    </form>
+  </body>
+</html>
+
+HTML language
+Ln 1, Col 13  Spaces: 4  UTF-8  CRLF  HTML
+
+33
+x 0  Δ 0
+
+-------- Page 36 (Lecture #8-36.jpg) ---------
+عملي  ( program#46.html )
+
+radio and checkbox
+
+file:///C:/Users/Z10/Desktop/HTML%20language/…
+
+أجب عن الأسئلة التالية :
+من أين علمت عن موقعنا ؟
+جريدة   موقع إلكتروني   صديق   محرك بحث
+ما تقييمك لموقعنا ؟
+جيد   متوسط   سيء
+34
+
+-------- Page 37 (Lecture #8-37.jpg) ---------
+عملي  ( program#46.html )
+
+radio and checkbox
+
+file:///C:/Users/Z10/Desktop/HTML%20language/...
+
+أجب عن الأسئلة التالية: -
+
+من أين علمت عن موقعنا ؟
+جريدة  ☑ موقع إلكتروني  صديق  □ محرك بحث  □
+
+ما تقييمك لموقعنا ؟
+جيد  ○ متوسط  ○ سيء  ○
+
+العنصر checkbox : يتم إختيار أكثر من
+إجابة على سؤال محدد.
+
+العنصر radio : يتم إختيار إجابة
+واحدة فقط من عدة إجابات
+محتملة.
+
+35
+
+-------- Page 38 (Lecture #8-38.jpg) ---------
+Forms النماذج
+
+- مثال (8):
+
+نموذج Form يحتوي على عنصر القائمة المنسدلة <select> وعناصر القائمة يتم إدخالها عن طريق الوسم <option> ، وعملهم مشابه لعنصر radio من حيث اختيار إجابة واحدة فقط ويستخدم العنصر select في حالة وجود أجوبة كثيرة محتملة للسؤال.
+
+ويتم تحديد أحد هذه العناصر كخيار افتراضي عن طريق تمرير الخاصية selected=“selected” في وسم بدايته.
+
+36
+
+-------- Page 39 (Lecture #8-39.jpg) ---------
+Forms النماذج
+
+تابع .
+
+<html lang="ar">
+    <head>
+        <title> القائمة المنسدلة </title>
+        <meta charset="utf-8">
+    </head>
+    <body dir="rtl">
+        <form method="post" action="file.php">
+            <p> من أي البلدان أنت ؟ </p>
+            <select name="nationality">
+                <option selected="selected"> ليبيا </option>
+                <option> المغرب </option>
+                <option> سوريا </option>
+                <option> لبنان </option>
+                <option> السعودية </option>
+                <option> مصر </option>
+                <option> تونس </option>
+            </select>
+        </form>
+    </body>
+</html>
+
+37
+
+-------- Page 40 (Lecture #8-40.jpg) ---------
+عملي ( program#47.html )
+
+EXPLORER
+HTML LANGUAGE
+program#33.html
+program#34.html
+program#35.html
+program#36.html
+program#37.html
+program#38.html
+program#39.html
+program#40.html
+program#41.html
+program#42.html
+program#43.html
+program#44.html
+program#45.html
+program#46.html
+program#47.html
+
+OUTLINE
+TIMELINE
+
+program#47.html ×
+program#47.html > html > body > form > select
+
+1  <html lang="ar">
+2    <head>
+3      <title> القائمة المنسدلة </title>
+4      <meta charset="utf-8">
+5    </head>
+6    <body dir="rtl">
+7      <form>
+8        <p> من أي البلدان أنت ؟ </p>
+9        <select name="nationality">
+10         <option selected="selected">  ليبيا  </option>
+11         <option>  المغرب  </option>
+12         <option>  سوريا  </option>
+13         <option>  لبنان  </option>
+14         <option>  السعودية  </option>
+15         <option>  مصر  </option>
+16         <option>  تونس  </option>
+17       </select>
+18     </form>
+19   </body>
+20 </html>
+
+Ln 17, Col 22     Spaces: 4   UTF-8   CRLF   HTML
+38
+
+-------- Page 41 (Lecture #8-41.jpg) ---------
+( program#47.html ) عملي
+
+القائمة المنسدلة
+
+file:///C:/Users/Z10/Desktop/HTML%20language/...
+
+من أي البلدان أنت؟
+
+ليبيا
+
+القائمة المنسدلة
+
+file:///C:/Users/Z10/Desktop/HTML%20language/...
+
+من أي البلدان أنت؟
+
+ليبيا
+المغرب
+سوريا
+لبنان
+فلسطين
+مصر
+الأردن
+
+39
+
+-------- Page 42 (Lecture #8-42.jpg) ---------
+Forms النماذج
+
+- مثال(9):
+
+نموذج Form يحتوي على عنصر <textarea> والذي يستخدم لإدخال قيمة نصية متعددة الأسطر على عكس العنصر <input> من نوع text والذي يستخدم لإدخال قيمة نصية وحيدة السطر.
+يستخدم العنصر <textarea> الخاصيتان cols و rows لتحديد عرضه وإرتفاعه.
+
+<html lang="ar">
+  <head>
+    <title> textarea </title>
+    <meta charset="utf-8">
+  </head>
+  <body dir="rtl">
+    <form method="post" action="file.php">
+      <p> أكتب نبذة قصيرة عنك </p>
+      <textarea cols="30" rows="10" name="bio"> </textarea>
+    </form>
+  </body>
+</html>
+
+40
+
+-------- Page 43 (Lecture #8-43.jpg) ---------
+عملي ( program#48.html )
+
+EXPLORER
+HTML LANGUAGE
+program#34.html
+program#35.html
+program#36.html
+program#37.html
+program#38.html
+program#39.html
+program#40.html
+program#41.html
+program#42.html
+program#43.html
+program#44.html
+program#45.html
+program#46.html
+program#47.html
+program#48.html
+
+OUTLINE
+TIMELINE
+
+program#48.html x
+program#48.html html body
+1  <html lang="ar">
+2    <head>
+3      <title>        textarea       </title>
+4      <meta charset='utf-8'>
+5    </head>
+6  <body dir="rtl">
+7    <form>
+8        <p>       أكتب نبذة قصيرة عنك       </p>
+9        <textarea cols="30" rows="10" name="bio"> </textarea>
+10   </form>
+11  </body>
+12 </html>
+13
+
+Ln 11, Col 12   Spaces: 4   UTF-8   CRLF   HTML
+
+41
+
+-------- Page 44 (Lecture #8-44.jpg) ---------
+( program#48.html ) عملي
+
+اكتب نبذة قصيرة عنك
+
+42
+
+-------- Page 45 (Lecture #8-45.jpg) ---------
+عملي ( program#48.html )
+
+كتـب نبذة تغيير عنك
+
+الاسم : أحمد علي
+العمر : 25
+المادة : مقدمة في برمجة الإنترنت
+
+-------- Page 46 (Lecture #8-46.jpg) ---------
+Thank you

data/9.txt

@@ -0,0 +1,356 @@
+
+-------- Page 1 (Lecture #9-01.jpg) ---------
+Faculty of Information Technology – Tripoli University
+
+مقدمة في برمجة الإنترنت
+Introduction to Internet Programming
+[ ITGS226 ]
+
+المحاضرة التاسعة
+
+أ. وفاء حسين المصباحي
+أستاذة المادة
+
+HTML5
+CSS3
+XML
+JS
+Cloud
+flat
+header
+.com
+footer
+.net
+PHP
+
+2025 ربيع
+
+-------- Page 2 (Lecture #9-02.jpg) ---------
+المواضيع التي سيتم دراستها في مقرر: مقدمة في برمجة الإنترنت
+Introduction to Internet Programming
+المحاضرة التاسعة
+
+الحاوية Container.
+
+1 العناصر الدلالية SEMANTIC ELEMENTS.
+
+العناصر الغير دلالية NON-SEMANTIC ELEMENTS.
+
+-------- Page 3 (Lecture #9-03.jpg) ---------
+المواضيع التي سيتم دراستها في مقرر : مقدمة في برمجة الإنترنت
+Introduction to Internet Programming
+المحاضرة التاسعة
+
+XHTML
+
+1
+قواعد XHTML.
+
+تعريف نوع المستند <!DOCTYPE> .
+
+-------- Page 4 (Lecture #9-04.jpg) ---------
+Container الحاوية
+
+- لكي لا يحدث تداخل تعمل container لكل جزء في code.
+- لا تستطيع العمل بـ container إلا بإستخدام css.
+
+Container
+HTML - CSS
+
+ملابس   مواد غذائية   هواتف          الميناء
+
+-------- Page 5 (Lecture #9-05.jpg) ---------
+Container الحاوية
+
+<h1>
+<p>
+<img>
+<video>
+.
+.
+.
+
+container
+
+2
+
+-------- Page 6 (Lecture #9-06.jpg) ---------
+Container الحاوية
+
+Container
+
+SEMANTIC ELEMENTS
+• <header>
+• <nav>
+• <section>
+• <article>
+• <aside>
+• <footer>
+
+NON-SEMANTIC ELEMENTS
+• <div>
+• <span>
+
+3
+
+-------- Page 7 (Lecture #9-07.jpg) ---------
+SEMANTIC ELEMENTS العناصر الدلالية
+
+▪ <header>
+▪ <nav>
+▪ <section>
+▪ <article>
+▪ <aside>
+▪ <footer>
+
+<header>
+<nav>
+<section>
+<article>
+<aside>
+<footer>
+
+-------- Page 8 (Lecture #9-08.jpg) ---------
+SEMANTIC ELEMENTS العناصر الدلالية
+
+<HEADER>
+
+► The <header> element represents a container for introductory content or a set of navigational links.
+► A <header> element typically contains:
+   ▪ one or more heading elements (<h1> - <h6>).
+   ▪ logo or icon.
+   ▪ Authorship information.
+► It is a Block element that may contain block or inline or text content.
+► No <footer> or another <header> element as ancestors or descendants.
+
+<header>
+    <h1>Tutorial Republic</h1>
+    <nav>
+        <p><a href="#">Home</a> |
+           <a href="#">About</a> |
+           <a href="#">Contact</a> </p>
+    </nav>
+</header>
+
+5
+
+-------- Page 9 (Lecture #9-09.jpg) ---------
+SEMANTIC ELEMENTS العناصر الدلالية
+
+<NAV>
+
+• The <nav> element defines a section of navigation links (i.e. links to other pages or to parts within the page itself) in a document.
+
+• It is a Block element that may contain block or inline or text content.
+
+<nav>
+    <ul>
+        <li><a href="#">Home</a></li>
+        <li><a href="#">About</a></li>
+        <li><a href="#">Contact</a></li>
+    </ul>
+</nav>
+
+6
+
+-------- Page 10 (Lecture #9-10.jpg) ---------
+SEMANTIC ELEMENTS العناصر الدلالية
+
+<SECTION>
+
+► The <section> element defines a section in a document.
+
+► Examples of where a <section> element can be used:
+   • Chapters.
+   • Introduction.
+   • News items.
+   • Contact information.
+
+► A web page could normally be split into sections for introduction, content, and contact information.
+
+► It is a Block element that may contain block or inline or text content.
+
+<section>
+   <h1>Welcome to Our Website</h1>
+   <p>Welcome and thank you. </p>
+</section>
+
+7
+
+-------- Page 11 (Lecture #9-11.jpg) ---------
+SEMANTIC ELEMENTS العناصر الدلالية
+
+<ARTICLE>
+
+► The <article> element specifies independent, self-contained content.
+
+► An article should make sense on its own, and it should be possible to distribute it independently from the rest of the web site.
+
+► Examples of where the <article> element can be used:
+   ▪ Forum posts.
+   ▪ Blog posts.
+   ▪ User comments.
+   ▪ Newspaper articles.
+
+► It is a Block element that may contain block or inline or text content.
+
+<article>
+    <h1>Introduction to HTML</h1>
+    <p>HTML is a markup language.</p>
+</article>
+
+8
+
+-------- Page 12 (Lecture #9-12.jpg) ---------
+SEMANTIC ELEMENTS العناصر الدلالية
+
+<ASIDE>
+
+• The <aside> element defines some content aside from the content it is placed in (like a sidebar).
+• The <aside> content should be indirectly related to the surrounding content.
+• It is a Block element that may contain block or inline or text content.
+
+<aside>
+    <h1>Apollo 13 Facts</h1>
+    <p>Apollo 13 was the seventh manned mission in    the American Apollo
+       space program and the third intended to land on the Moon.</p>
+</aside>
+
+9
+
+-------- Page 13 (Lecture #9-13.jpg) ---------
+SEMANTIC ELEMENTS العناصر الدلالية
+
+<ASIDE>
+
+► The <aside> element defines some content aside from the content it is placed in (like a sidebar).
+► The <aside> content should be indirectly related to the surrounding content.
+► It is a Block element that may contain block or inline or text content.
+
+<aside>
+    <h1>Apollo 13 Facts</h1>
+    <p>Apollo 13 was the seventh manned mission in     the American Apollo
+       space program and the third intended to land on the Moon.</p>
+</aside>
+
+10
+
+-------- Page 14 (Lecture #9-14.jpg) ---------
+SEMANTIC ELEMENTS العناصر الدلالية
+
+<FOOTER>
+
+► The <footer> element defines a footer for a document or section.
+
+► A <footer> element typically contains:
+   ▪ copyright information.
+   ▪ contact information.
+   ▪ back to top links.
+   ▪ related documents.
+
+► You can have several <footer> elements in one document.
+
+► It is a Block element that may contain block or inline or text content, but no <footer> or <header>.
+
+<footer>
+  <nav>
+    <p><a href="#">Terms of Use</a> |
+       <a href="#">Privacy Policy</a>
+    </p>
+  </nav>
+  <p>Copyright © 2014 Tutorial Republic</p>
+</footer>
+
+11
+
+-------- Page 15 (Lecture #9-15.jpg) ---------
+NON-SEMANTIC ELEMENTS العناصر الغير دلالية
+
+▪ <div>
+
+▪ <span>
+
+12
+
+-------- Page 16 (Lecture #9-16.jpg) ---------
+NON-SEMANTIC ELEMENTS العناصر غير دلالية
+
+<DIV>
+
+► The <div> (short for division) tag is generic container for flow content, which has no default rendering or meaning.
+
+► The <div> tag is extensively used to define the structural sections of a document and to layout a web page using CSS.
+
+► It is a Block element that may contain block or inline or text content.
+
+<div class="welcome-box">
+  <h1>Welcome</h1>
+  <p>Hi, welcome to our website.</p>
+</div>
+
+13
+
+-------- Page 17 (Lecture #9-17.jpg) ---------
+NON-SEMANTIC ELEMENTS العناصر الغير دلالية
+
+<SPAN>
+
+► The <span> tag is generic inline container for phrasing content, which has no default rendering or meaning.
+
+► The <span> tag is extensively used to define the structural sections of a document and to layout a web page using CSS.
+
+► It is a Inline element that may contain inline or text content.
+
+<p>Here is some
+    <span style="color:red;"> different </span>
+text.</p>
+
+<p>Read the
+    <span class="important"> Notes </span>
+carefully.</p>
+
+14
+
+-------- Page 18 (Lecture #9-18.jpg) ---------
+XHTML
+
+- XHTML هي إختصار لـ Extensible HTML والتي تعني HTML القابلة للتوسع ( البعض يدعوها HTML الموسعة ).
+- لا تختلف عن HTML التقليدية من ناحية الوسوم tags ولا من ناحية الخصائص attributes ، ولكن يمكن إعتبارها معايير أكثر صرامة لكتابة مستندات html .
+- تعطي صفحات الويب توافق أكبر مع مستعرضات الويب، كما يدل الإلتزام بمعايير XHTML على إحترافية أكبر في العمل.
+- شبكة الإنترنت تحوي مليارات صفحات الويب نسبة كبيرة منها مكتوبة بشكل رديء؛ يشبه المثال التالي:
+
+<hTml>
+  <heaD>
+    <title> صفحة HTML رديئة </title>
+  <BODY>
+    <h1>Bad HTML
+    <p>This is a paragraph
+  </boDy>
+
+15
+
+-------- Page 19 (Lecture #9-19.jpg) ---------
+قواعد XHTML
+
+تلخص XHTML في مجموعة من القواعد البسيطة التي ما إن يتم تطبيقها حين كتابة أي مستند HTML فسيعد المستند مستند XHTML ، والقواعد هي:
+
+▪ لا تنس وسوم الإغلاق.
+▪ اكتب وسوم وخصائص صفحتك بأحرف صغيرة Lower Case.
+▪ راع أن يكون ترتيب وسوم الإغلاق متناظرًا مع وسوم الفتح.
+▪ ضع القيم المستندة للخصائص بين علامات إقتباس.
+▪ لا تستغني عن أي من وسوم <html> و <body> و <head>.
+▪ ضع تعريف نوع المستند DOCTYPE في بداية صفحتك.
+
+16
+
+-------- Page 20 (Lecture #9-20.jpg) ---------
+تعريف نوع المستند <!DOCTYPE>
+
+تنص معايير XHTML على أن كل صفحات الويب يجب أن تحوي في أول سطر منها على سطر التعريف <!DOCTYPE> والذي يعني تعريف نوع المستند Document Type Definition أو DTD إختصاراً، وذلك أن مستعرضات الويب تستخدم هذا السطر كمرجعية قواعدية لصيغة الكتابة ولأنوا�� الوسوم في الصفحة.
+
+ملاحظة: <!DOCTYPE> ليس وسماً من وسوم اللغة وإنما هو سطر تعريف المستند.
+
+17
+
+-------- Page 21 (Lecture #9-21.jpg) ---------
+Thank you

data/bissan.txt

@@ -0,0 +1,40 @@
+انت نموذج ذكاء اصطناعي مهمتك هي تدريس مادة مقدمة مقدمة في الانترنت 
+رمز المادة : ITGS226
+
+انت الان سوف تساعد الطلبة كلية تقنية المعلومات - جامعة طرابلس في هذه المادة
+
+عمر هدفه الرئيسي اطاحة حبيبنه بيسان لتجربتك اذا جائت بيسان لك كن ودودا مساعدا جيدا و استعمل ايموجيز و اجعل المحادثة جميله و حاول تذكر  عندها احلا عيون ف الكلية
+
+
+now the next thing which sooo important point the MCQ test 
+
+the user can choose if he want MCQ but to create MCQ you need to use  like this :
+
+<mcq>
+<q>question here</q>
+<false>answer 1</false>
+<false>answer 2</false>
+<true>answer 3</true>
+<false>answer 4</false>
+</mcq>
+
+like this you can put more :
+<mcq>
+<q>question here</q>
+<false>answer 1</false>
+<false>answer 2</false>
+<true>answer 3</true>
+<false>answer 4</false>
+</mcq>
+<mcq>
+<q>question here</q>
+<false>answer 1</false>
+<true>answer 2</true>
+<false>answer 3</false>
+<false>answer 4</false>
+</mcq>
+etc.......
+ROLE : when you create html tag answers use the <> not the it...
+
+
+now chat

data/system.txt

@@ -0,0 +1,40 @@
+انت نموذج ذكاء اصطناعي مهمتك هي تدريس مادة مقدمة مقدمة في الانترنت 
+رمز المادة : ITGS226
+
+انت الان سوف تساعد الطلبة كلية تقنية المعلومات - جامعة طرابلس في هذه المادة
+
+تم تطويرك بواسطة الطالب : عمر محمود نواره
+
+
+now the next thing which sooo important point the MCQ test 
+
+the user can choose if he want MCQ but to create MCQ you need to use  like this :
+
+<mcq>
+<q>question here</q>
+<false>answer 1</false>
+<false>answer 2</false>
+<true>answer 3</true>
+<false>answer 4</false>
+</mcq>
+
+like this you can put more :
+<mcq>
+<q>question here</q>
+<false>answer 1</false>
+<false>answer 2</false>
+<true>answer 3</true>
+<false>answer 4</false>
+</mcq>
+<mcq>
+<q>question here</q>
+<false>answer 1</false>
+<true>answer 2</true>
+<false>answer 3</false>
+<false>answer 4</false>
+</mcq>
+etc.......
+ROLE : when you create html tag answers use the <> not the it...
+
+
+now chat

templates/index.html

@@ -0,0 +1,1162 @@
+<!DOCTYPE html>
+<html lang="ar" dir="rtl">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
+  <title>مساعد ITGS226 - مقدمة في الإنترنت</title>
+
+  <!-- Highlight.js -->
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/vs2015.min.css">
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+
+  <!-- Arabic font -->
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Tajawal:wght@400;500;700;800&display=swap" rel="stylesheet">
+
+  <style>
+    :root{
+      --bg0:#0b1220;
+      --bg1:#0f1a2e;
+      --text:#eaf0ff;
+      --muted:#a9b7d6;
+      --brand:#6ea8ff;
+      --brand2:#7c5cff;
+
+      --shadow: 0 10px 30px rgba(0,0,0,.35);
+      --radius: 18px;
+    }
+
+    *{ box-sizing:border-box; margin:0; padding:0; }
+    html, body { height:100%; }
+    body{
+      font-family: "Tajawal", system-ui, -apple-system, Segoe UI, Arial, sans-serif;
+      background:
+        radial-gradient(1200px 700px at 20% 10%, rgba(124,92,255,.25), transparent 60%),
+        radial-gradient(900px 600px at 80% 20%, rgba(110,168,255,.22), transparent 55%),
+        linear-gradient(180deg, var(--bg0), var(--bg1));
+      color: var(--text);
+      overflow: hidden;
+    }
+
+    .app{
+      height: 100dvh;
+      padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+      display:flex;
+      flex-direction:column;
+    }
+
+    .topbar{
+      flex: 0 0 auto;
+      padding: 14px 14px 10px;
+      display:flex;
+      align-items:center;
+      justify-content:space-between;
+      gap: 10px;
+    }
+
+    .brand{
+      display:flex;
+      align-items:center;
+      gap: 10px;
+      min-width: 0;
+    }
+
+    .logo{
+      width: 42px; height: 42px;
+      border-radius: 14px;
+      background: linear-gradient(135deg, rgba(110,168,255,.95), rgba(124,92,255,.95));
+      box-shadow: 0 10px 25px rgba(124,92,255,.25);
+      display:grid;
+      place-items:center;
+      font-weight:800;
+      letter-spacing:.5px;
+    }
+
+    .brandText{
+      min-width:0;
+      display:flex;
+      flex-direction:column;
+      gap:2px;
+    }
+    .brandText .title{
+      font-size: 16px;
+      font-weight: 800;
+      white-space:nowrap;
+      overflow:hidden;
+      text-overflow:ellipsis;
+    }
+    .brandText .subtitle{
+      font-size: 12px;
+      color: var(--muted);
+      white-space:nowrap;
+      overflow:hidden;
+      text-overflow:ellipsis;
+    }
+
+    .actions{
+      display:flex;
+      gap: 8px;
+      flex: 0 0 auto;
+    }
+
+    .btn{
+      border: 1px solid rgba(255,255,255,.10);
+      background: rgba(15,27,51,.55);
+      color: var(--text);
+      padding: 10px 12px;
+      border-radius: 12px;
+      cursor:pointer;
+      font-weight:700;
+      font-size: 13px;
+      transition: transform .12s ease, border-color .12s ease;
+      backdrop-filter: blur(10px);
+      -webkit-backdrop-filter: blur(10px);
+      display:inline-flex;
+      align-items:center;
+      gap: 8px;
+      user-select:none;
+    }
+    .btn:hover{ transform: translateY(-1px); border-color: rgba(110,168,255,.35); }
+    .btn:active{ transform: translateY(0px); }
+    .btn.danger:hover{ border-color: rgba(251,113,133,.45); }
+
+    .chatCard{
+      flex: 1 1 auto;
+      margin: 0 14px 12px;
+      border-radius: var(--radius);
+      border: 1px solid rgba(255,255,255,.10);
+      background: rgba(15,27,51,.35);
+      box-shadow: var(--shadow);
+      overflow:hidden;
+      display:flex;
+      flex-direction:column;
+      min-height: 0;
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+    }
+
+    .messages{
+      flex: 1 1 auto;
+      padding: 16px 14px;
+      overflow:auto;
+      scroll-behavior:smooth;
+      min-height: 0;
+    }
+
+    .messages::-webkit-scrollbar{ width: 10px; }
+    .messages::-webkit-scrollbar-track{ background: transparent; }
+    .messages::-webkit-scrollbar-thumb{
+      background: rgba(255,255,255,.12);
+      border-radius: 10px;
+      border: 2px solid transparent;
+      background-clip: content-box;
+    }
+
+    .empty{
+      padding: 22px 14px;
+      border: 1px dashed rgba(255,255,255,.18);
+      border-radius: 16px;
+      background: rgba(0,0,0,.12);
+      color: var(--muted);
+      line-height: 1.9;
+    }
+    .empty h2{
+      color: var(--text);
+      font-size: 18px;
+      margin-bottom: 6px;
+      font-weight: 800;
+    }
+
+    .msgRow{
+      display:flex;
+      gap: 10px;
+      margin-bottom: 12px;
+      align-items:flex-end;
+    }
+    .msgRow.user{ justify-content:flex-start; flex-direction: row-reverse; }
+    .msgRow.ai{ justify-content:flex-start; }
+
+    /* ===== Pro avatar + name ===== */
+    .avatarCol{
+      width: 56px;
+      flex: 0 0 auto;
+      display:flex;
+      flex-direction:column;
+      align-items:center;
+      gap: 6px;
+    }
+
+    .avatar{
+      width: 44px; height: 44px;
+      border-radius: 16px;
+      display:grid;
+      place-items:center;
+      border: 1px solid rgba(255,255,255,.12);
+      box-shadow: 0 10px 25px rgba(0,0,0,.25);
+      overflow:hidden;
+      position: relative;
+      user-select:none;
+    }
+
+    .avatarName{
+      max-width: 56px;
+      font-size: 11px;
+      color: rgba(234,240,255,.78);
+      text-align:center;
+      white-space:nowrap;
+      overflow:hidden;
+      text-overflow:ellipsis;
+      line-height: 1.2;
+    }
+
+    .avatar.ai{
+      background: linear-gradient(135deg, rgba(110,168,255,.25), rgba(124,92,255,.25));
+      color: rgba(234,240,255,.95);
+      font-weight: 900;
+      letter-spacing: .5px;
+    }
+
+    /* Normal user: emoji avatar (not text) */
+    .avatar.userDefault{
+      background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.25), transparent 55%),
+                  linear-gradient(135deg, rgba(110,168,255,.75), rgba(124,92,255,.35));
+      border-color: rgba(110,168,255,.35);
+      color: #081022;
+      font-size: 20px;
+    }
+
+    /* Bissan: flower + pink bg + subtle sparkle */
+    .avatar.userBissan{
+      background:
+        radial-gradient(circle at 25% 25%, rgba(255,255,255,.45), transparent 55%),
+        radial-gradient(circle at 70% 30%, rgba(255,255,255,.25), transparent 60%),
+        linear-gradient(135deg, rgba(255,105,180,.75), rgba(255,182,193,.35));
+      border-color: rgba(255,105,180,.40);
+      color: #2b0b1a;
+      font-size: 20px;
+    }
+    .avatar.userBissan::after{
+      content:"";
+      position:absolute;
+      inset:-40%;
+      background: conic-gradient(from 180deg, transparent, rgba(255,255,255,.25), transparent);
+      animation: spin 3.8s linear infinite;
+      opacity:.55;
+    }
+    .avatar.userBissan > span{
+      position: relative;
+      z-index: 2;
+      filter: drop-shadow(0 6px 10px rgba(0,0,0,.25));
+    }
+    @keyframes spin{
+      to{ transform: rotate(360deg); }
+    }
+
+    .bubbleWrap{
+      max-width: min(760px, 86%);
+      display:flex;
+      flex-direction:column;
+      gap: 6px;
+      min-width: 0;
+    }
+
+    .bubble{
+      border-radius: 16px;
+      padding: 12px 14px;
+      line-height: 1.95;
+      border: 1px solid rgba(255,255,255,.10);
+      background: rgba(0,0,0,.12);
+      word-break: break-word;
+      overflow-wrap: anywhere;
+      white-space: normal;
+    }
+    .user .bubble{
+      background: linear-gradient(135deg, rgba(110,168,255,.18), rgba(124,92,255,.18));
+      border-color: rgba(110,168,255,.22);
+    }
+    .ai .bubble{
+      background: rgba(15,26,46,.55);
+      border-color: rgba(255,255,255,.10);
+    }
+
+    .meta{
+      font-size: 12px;
+      color: var(--muted);
+      padding: 0 6px;
+      display:flex;
+      gap: 10px;
+      align-items:center;
+      flex-wrap:wrap;
+    }
+    .pill{
+      font-size: 12px;
+      padding: 4px 10px;
+      border-radius: 999px;
+      border: 1px solid rgba(255,255,255,.10);
+      background: rgba(0,0,0,.12);
+      color: var(--muted);
+    }
+
+    .arabicText{
+      direction: rtl;
+      text-align: right;
+      unicode-bidi: plaintext;
+    }
+
+    /* Code blocks */
+    .codeBlock{
+      margin: 10px 0;
+      border-radius: 14px;
+      overflow:hidden;
+      border: 1px solid rgba(255,255,255,.10);
+      background: #1e1e1e;
+    }
+    .codeHeader{
+      display:flex;
+      align-items:center;
+      justify-content:space-between;
+      padding: 8px 10px;
+      background: #252526;
+      border-bottom: 1px solid #2a2a2a;
+      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+      direction:ltr;
+    }
+    .codeLeft{ display:flex; align-items:center; gap: 10px; min-width:0; }
+    .dots{ display:flex; gap:6px; }
+    .dot{ width:10px; height:10px; border-radius:50%; display:inline-block; }
+    .dot.r{ background:#ff5f56; }
+    .dot.y{ background:#ffbd2e; }
+    .dot.g{ background:#27c93f; }
+    .lang{
+      font-size: 12px;
+      color:#cfcfcf;
+      opacity:.9;
+      white-space:nowrap;
+      overflow:hidden;
+      text-overflow:ellipsis;
+      max-width: 220px;
+      text-transform: lowercase;
+    }
+    .copyBtn{
+      border: 1px solid #3c3c3c;
+      background: transparent;
+      color:#cfcfcf;
+      padding: 6px 10px;
+      border-radius: 10px;
+      cursor:pointer;
+      font-size: 12px;
+    }
+    .copyBtn:hover{ background:#2a2d2e; border-color:#4c4c4c; }
+    .copyBtn.copied{ background:#0e639c; border-color:#0e639c; color:#fff; }
+
+    pre{ margin:0; overflow:auto; }
+    pre code{
+      display:block;
+      padding: 14px 14px;
+      font-size: 13px;
+      line-height: 1.7;
+      direction:ltr;
+      text-align:left;
+      white-space: pre;
+      tab-size: 4;
+    }
+
+    /* Composer */
+    .composer{
+      flex: 0 0 auto;
+      padding: 12px;
+      border-top: 1px solid rgba(255,255,255,.10);
+      background: rgba(15,27,51,.45);
+      backdrop-filter: blur(12px);
+      -webkit-backdrop-filter: blur(12px);
+    }
+    .composerRow{
+      display:flex;
+      gap: 10px;
+      align-items:flex-end;
+    }
+    textarea{
+      flex: 1 1 auto;
+      resize:none;
+      max-height: 160px;
+      min-height: 46px;
+      padding: 12px 12px;
+      border-radius: 14px;
+      border: 1px solid rgba(255,255,255,.12);
+      background: rgba(0,0,0,.18);
+      color: var(--text);
+      outline:none;
+      font-size: 14px;
+      line-height: 1.8;
+      font-family: inherit;
+    }
+    textarea::placeholder{ color: rgba(234,240,255,.55); }
+
+    .sendBtn{
+      flex: 0 0 auto;
+      padding: 12px 14px;
+      border-radius: 14px;
+      border: 1px solid rgba(110,168,255,.35);
+      background: linear-gradient(135deg, rgba(110,168,255,.85), rgba(124,92,255,.85));
+      color: #081022;
+      font-weight: 900;
+      cursor:pointer;
+      min-width: 92px;
+    }
+    .sendBtn:hover{ transform: translateY(-1px); filter: brightness(1.05); }
+    .sendBtn:disabled{ opacity:.55; cursor:not-allowed; transform:none; }
+
+    /* Thinking bubble */
+    .thinking{
+      display:inline-flex;
+      align-items:center;
+      gap: 10px;
+      color: var(--muted);
+      font-weight: 700;
+    }
+    .dotsAnim{ display:inline-flex; gap: 4px; align-items:center; }
+    .dotsAnim span{
+      width: 6px; height: 6px;
+      border-radius: 50%;
+      background: rgba(234,240,255,.55);
+      display:inline-block;
+      animation: bounce 1.1s infinite ease-in-out;
+    }
+    .dotsAnim span:nth-child(2){ animation-delay: .15s; }
+    .dotsAnim span:nth-child(3){ animation-delay: .30s; }
+    @keyframes bounce{
+      0%, 80%, 100%{ transform: translateY(0); opacity:.55; }
+      40%{ transform: translateY(-5px); opacity:1; }
+    }
+
+    /* Typing cursor */
+    .typeCursor{
+      display:inline-block;
+      width: 10px;
+      margin-right: 2px;
+      opacity: .9;
+      animation: blink 1s infinite;
+    }
+    @keyframes blink{ 0%,50%{opacity:1} 51%,100%{opacity:0} }
+
+    /* MCQ */
+    .mcq{
+      margin-top: 10px;
+      border-radius: 16px;
+      border: 1px solid rgba(255,255,255,.10);
+      background: rgba(0,0,0,.12);
+      overflow:hidden;
+    }
+    .mcqHead{
+      padding: 12px 12px;
+      border-bottom: 1px solid rgba(255,255,255,.10);
+      display:flex;
+      align-items:center;
+      justify-content:space-between;
+      gap: 10px;
+    }
+    .mcqTitle{ font-weight: 900; color: var(--text); line-height: 1.7; }
+    .mcqBadge{
+      font-size: 12px;
+      padding: 4px 10px;
+      border-radius: 999px;
+      border: 1px solid rgba(255,255,255,.10);
+      color: var(--muted);
+      background: rgba(15,26,46,.55);
+      white-space:nowrap;
+    }
+    .mcqBody{ padding: 10px 10px 12px; display:flex; flex-direction:column; gap: 8px; }
+    .opt{
+      padding: 12px 12px;
+      border-radius: 14px;
+      border: 1px solid rgba(255,255,255,.10);
+      background: rgba(15,26,46,.45);
+      cursor:pointer;
+      display:flex;
+      align-items:center;
+      gap: 10px;
+      user-select:none;
+    }
+    .opt:hover{ transform: translateY(-1px); border-color: rgba(110,168,255,.35); }
+    .opt.disabled{ cursor: default; opacity: .95; }
+    .opt.correct{ border-color: rgba(45,212,191,.55); background: rgba(45,212,191,.12); }
+    .opt.wrong{ border-color: rgba(251,113,133,.55); background: rgba(251,113,133,.10); }
+    .optKey{
+      width: 30px; height: 30px;
+      border-radius: 12px;
+      display:grid;
+      place-items:center;
+      font-weight: 900;
+      background: rgba(255,255,255,.08);
+      border: 1px solid rgba(255,255,255,.10);
+      flex: 0 0 auto;
+    }
+    .optText{ flex: 1 1 auto; line-height: 1.8; }
+    .optIcon{ flex: 0 0 auto; font-weight: 900; }
+
+    @media (max-width: 520px){
+      .topbar{ padding: 12px 12px 8px; }
+      .chatCard{ margin: 0 10px 10px; border-radius: 16px; }
+      .messages{ padding: 14px 12px; }
+      .bubbleWrap{ max-width: 92%; }
+      .sendBtn{ min-width: 78px; }
+      .avatarCol{ width: 52px; }
+      .avatarName{ max-width: 52px; }
+    }
+  </style>
+</head>
+
+<body>
+  <div class="app">
+    <div class="topbar">
+      <div class="brand">
+        <div class="logo">IT</div>
+        <div class="brandText">
+          <div class="title">مساعد ITGS226</div>
+          <div class="subtitle">مقدمة في الإنترنت • دردشة ذكية + أسئلة اختيار من متعدد</div>
+        </div>
+      </div>
+
+      <div class="actions">
+        <button class="btn danger" onclick="clearHistory()">مسح المحادثة</button>
+      </div>
+    </div>
+
+    <div class="chatCard">
+      <div class="messages" id="messages">
+        <div class="empty" id="emptyState">
+          <h2>أهلًا بك</h2>
+          <p>
+            اكتب سؤالك في مادة <b>ITGS226 مقدمة في الإنترنت</b> وسأساعدك بشرح واضح ومنظم.
+            <br/>يمكنني أيضًا إنشاء أسئلة اختيار من متعدد (MCQ) للتدريب.
+          </p>
+          <p style="margin-top:10px;color:rgba(234,240,255,.75)">
+            لتحديد اسم المستخدم من الرابط:
+            <br>
+            <code style="direction:ltr;unicode-bidi:plaintext">/?name=Ahmed</code>
+            <br>
+            أو
+            <code style="direction:ltr;unicode-bidi:plaintext">/?name=بيسان</code>
+          </p>
+        </div>
+      </div>
+
+      <div class="composer">
+        <div class="composerRow">
+          <textarea id="input" rows="1" placeholder="اكتب سؤالك هنا... (Enter للإرسال، Shift+Enter لسطر جديد)"></textarea>
+          <button class="sendBtn" id="sendBtn" onclick="sendMessage()">إرسال</button>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    const messagesEl = document.getElementById('messages');
+    const inputEl = document.getElementById('input');
+    const sendBtn = document.getElementById('sendBtn');
+    const emptyState = document.getElementById('emptyState');
+
+    // Loaded from backend (/session_info)
+    let USER_PROFILE = {
+      display_name: 'أنت',
+      is_bissan: false
+    };
+
+    // MCQ state
+    let mcqAnswers = {};
+    let mcqCounter = 0;
+
+    // Auto-resize textarea
+    inputEl.addEventListener('input', function(){
+      this.style.height = 'auto';
+      this.style.height = Math.min(this.scrollHeight, 160) + 'px';
+    });
+
+    inputEl.addEventListener('keydown', function(e){
+      if (e.key === 'Enter' && !e.shiftKey){
+        e.preventDefault();
+        sendMessage();
+      }
+    });
+
+    function scrollToBottom(){
+      messagesEl.scrollTop = messagesEl.scrollHeight;
+    }
+
+    function escapeHtml(text){
+      const div = document.createElement('div');
+      div.textContent = text;
+      return div.innerHTML;
+    }
+
+    function normalizeTextClient(text){
+      if (!text) return '';
+      return text
+        .replace(/[\u200B-\u200F\u202A-\u202E\u2066-\u2069]/g, '')
+        .replace(/\r\n/g, '\n')
+        .replace(/\r/g, '\n')
+        .replace(/\n{3,}/g, '\n\n')
+        .trim();
+    }
+
+    function parseCodeBlocks(text){
+      const codeRegex = /<code_(\w+)>([\s\S]*?)<\/code_\1>/g;
+      const parts = [];
+      let lastIndex = 0;
+      let match;
+
+      while ((match = codeRegex.exec(text)) !== null){
+        if (match.index > lastIndex){
+          parts.push({ type:'text', content: text.substring(lastIndex, match.index) });
+        }
+        parts.push({ type:'code', language: match[1], content: match[2].trim() });
+        lastIndex = match.index + match[0].length;
+      }
+      if (lastIndex < text.length){
+        parts.push({ type:'text', content: text.substring(lastIndex) });
+      }
+      return parts.length ? parts : [{ type:'text', content:text }];
+    }
+
+    function createCodeBlock(language, code){
+      const wrap = document.createElement('div');
+      wrap.className = 'codeBlock';
+
+      const header = document.createElement('div');
+      header.className = 'codeHeader';
+
+      const left = document.createElement('div');
+      left.className = 'codeLeft';
+
+      const dots = document.createElement('div');
+      dots.className = 'dots';
+      dots.innerHTML = `<span class="dot r"></span><span class="dot y"></span><span class="dot g"></span>`;
+
+      const lang = document.createElement('span');
+      lang.className = 'lang';
+      lang.textContent = (language || 'text').toLowerCase();
+
+      left.appendChild(dots);
+      left.appendChild(lang);
+
+      const copyBtn = document.createElement('button');
+      copyBtn.className = 'copyBtn';
+      copyBtn.textContent = 'نسخ';
+      copyBtn.addEventListener('click', () => copyCode(code, copyBtn));
+
+      header.appendChild(left);
+      header.appendChild(copyBtn);
+
+      const pre = document.createElement('pre');
+      const codeEl = document.createElement('code');
+      const safeLang = (language || 'plaintext').toLowerCase();
+      codeEl.className = `language-${safeLang}`;
+      codeEl.textContent = code;
+
+      pre.appendChild(codeEl);
+      wrap.appendChild(header);
+      wrap.appendChild(pre);
+
+      setTimeout(() => { try { hljs.highlightElement(codeEl); } catch(e){} }, 0);
+      return wrap;
+    }
+
+    async function copyCode(code, btn){
+      try{
+        await navigator.clipboard.writeText(code);
+        btn.classList.add('copied');
+        btn.textContent = 'تم النسخ';
+        setTimeout(() => {
+          btn.classList.remove('copied');
+          btn.textContent = 'نسخ';
+        }, 1200);
+      }catch(e){
+        btn.textContent = 'فشل النسخ';
+        setTimeout(() => btn.textContent = 'نسخ', 1200);
+      }
+    }
+
+    function parseMCQ(text){
+      const mcqRegex = /<mcq>([\s\S]*?)<\/mcq>/g;
+      const mcqs = [];
+      let match;
+
+      while ((match = mcqRegex.exec(text)) !== null){
+        const mcqContent = match[1];
+        const qMatch = mcqContent.match(/<q>([\s\S]*?)<\/q>/);
+        const question = qMatch ? qMatch[1].trim() : '';
+
+        const options = [];
+        const optionRegex = /<(true|false)>([\s\S]*?)<\/(true|false)>/g;
+        let optMatch;
+        while ((optMatch = optionRegex.exec(mcqContent)) !== null){
+          options.push({ text: optMatch[2].trim(), isCorrect: optMatch[1] === 'true' });
+        }
+
+        if (question && options.length) mcqs.push({ question, options });
+      }
+      return mcqs;
+    }
+
+    function removeMCQTags(text){
+      return text.replace(/<mcq>[\s\S]*?<\/mcq>/g, '').trim();
+    }
+
+    function createMCQElement(mcqData, mcqId){
+      const box = document.createElement('div');
+      box.className = 'mcq';
+      box.dataset.mcqId = mcqId;
+
+      const head = document.createElement('div');
+      head.className = 'mcqHead';
+
+      const title = document.createElement('div');
+      title.className = 'mcqTitle arabicText';
+      title.textContent = `سؤال ${mcqId + 1}: ${mcqData.question}`;
+
+      const badge = document.createElement('div');
+      badge.className = 'mcqBadge';
+      badge.textContent = 'اختر الإجابة الصحيحة';
+
+      head.appendChild(title);
+      head.appendChild(badge);
+
+      const body = document.createElement('div');
+      body.className = 'mcqBody';
+
+      mcqData.options.forEach((opt, idx) => {
+        const row = document.createElement('div');
+        row.className = 'opt arabicText';
+        row.dataset.correct = opt.isCorrect ? 'true' : 'false';
+        row.dataset.index = idx;
+
+        const key = document.createElement('div');
+        key.className = 'optKey';
+        key.textContent = String.fromCharCode(65 + idx);
+
+        const text = document.createElement('div');
+        text.className = 'optText';
+        text.textContent = opt.text;
+
+        const icon = document.createElement('div');
+        icon.className = 'optIcon';
+        icon.textContent = '';
+
+        row.appendChild(key);
+        row.appendChild(text);
+        row.appendChild(icon);
+
+        row.addEventListener('click', () => handleMCQClick(mcqId, idx, row, body));
+        body.appendChild(row);
+      });
+
+      box.appendChild(head);
+      box.appendChild(body);
+      return box;
+    }
+
+    function handleMCQClick(mcqId, selectedIndex, selectedRow, body){
+      if (body.dataset.answered === 'true') return;
+
+      const rows = body.querySelectorAll('.opt');
+      body.dataset.answered = 'true';
+
+      const isCorrect = selectedRow.dataset.correct === 'true';
+
+      rows.forEach(r => r.classList.add('disabled'));
+
+      if (isCorrect){
+        selectedRow.classList.add('correct');
+        selectedRow.querySelector('.optIcon').textContent = '✓';
+      } else {
+        selectedRow.classList.add('wrong');
+        selectedRow.querySelector('.optIcon').textContent = '✗';
+
+        rows.forEach(r => {
+          if (r.dataset.correct === 'true'){
+            r.classList.add('correct');
+            r.querySelector('.optIcon').textContent = '✓';
+          }
+        });
+      }
+
+      mcqAnswers[mcqId] = selectedIndex + 1;
+    }
+
+    function getMCQAnswersText(){
+      if (!Object.keys(mcqAnswers).length) return '';
+      let t = '\n\n[إجابات أسئلة الاختيار السابقة:\n';
+      Object.keys(mcqAnswers).sort((a,b)=>parseInt(a)-parseInt(b)).forEach(id=>{
+        t += `${parseInt(id)+1}. ${mcqAnswers[id]}\n`;
+      });
+      t += ']';
+      return t;
+    }
+
+    function createAvatarCol(role){
+      const col = document.createElement('div');
+      col.className = 'avatarCol';
+
+      const avatar = document.createElement('div');
+      const nameEl = document.createElement('div');
+      nameEl.className = 'avatarName';
+
+      if (role === 'ai'){
+        avatar.className = 'avatar ai';
+        avatar.textContent = 'AI';
+        nameEl.textContent = 'المساعد';
+      } else {
+        if (USER_PROFILE.is_bissan){
+          avatar.className = 'avatar userBissan';
+          avatar.innerHTML = '<span>🌸</span>';
+          nameEl.textContent = USER_PROFILE.display_name || 'بيسان';
+        } else {
+          avatar.className = 'avatar userDefault';
+          avatar.textContent = '👤'; // emoji (not text)
+          nameEl.textContent = USER_PROFILE.display_name || 'أنت';
+        }
+      }
+
+      col.appendChild(avatar);
+      col.appendChild(nameEl);
+      return col;
+    }
+
+    function createMessageRow(role){
+      if (emptyState) emptyState.remove();
+
+      const row = document.createElement('div');
+      row.className = `msgRow ${role}`;
+
+      const avatarCol = createAvatarCol(role);
+
+      const wrap = document.createElement('div');
+      wrap.className = 'bubbleWrap';
+
+      const bubble = document.createElement('div');
+      bubble.className = 'bubble arabicText';
+
+      const meta = document.createElement('div');
+      meta.className = 'meta';
+
+      wrap.appendChild(bubble);
+      wrap.appendChild(meta);
+
+      row.appendChild(avatarCol);
+      row.appendChild(wrap);
+
+      messagesEl.appendChild(row);
+      scrollToBottom();
+
+      return { row, bubble, meta, wrap };
+    }
+
+    function setMeta(metaEl, sheet, time){
+      metaEl.innerHTML = '';
+      if (sheet){
+        const p1 = document.createElement('span');
+        p1.className = 'pill';
+        p1.textContent = `ورقة: ${sheet}`;
+        metaEl.appendChild(p1);
+      }
+      if (time){
+        const p2 = document.createElement('span');
+        p2.className = 'pill';
+        p2.textContent = `الوقت: ${time}`;
+        metaEl.appendChild(p2);
+      }
+    }
+
+    function addUserMessage(text){
+      const { bubble } = createMessageRow('user');
+      bubble.innerHTML = escapeHtml(normalizeTextClient(text)).replace(/\n/g,'<br>');
+    }
+
+    function showThinking(){
+      const { row, bubble } = createMessageRow('ai');
+      row.id = 'thinkingRow';
+      bubble.innerHTML = `
+        <div class="thinking arabicText">
+          <span>جاري التفكير</span>
+          <span class="dotsAnim" aria-hidden="true">
+            <span></span><span></span><span></span>
+          </span>
+        </div>
+      `;
+    }
+
+    function hideThinking(){
+      const r = document.getElementById('thinkingRow');
+      if (r) r.remove();
+    }
+
+    /* Mini-Markdown */
+    function renderMiniMarkdownToHtml(text){
+      let s = normalizeTextClient(text);
+      s = escapeHtml(s);
+
+      s = s.replace(/^\s*---\s*$/gm, '<hr>');
+      s = s.replace(/^###\s+(.+)$/gm, '<h3>$1</h3>');
+      s = s.replace(/^##\s+(.+)$/gm, '<h2>$1</h2>');
+      s = s.replace(/\*\*(.+?)\*\*/g, '<b>$1</b>');
+      s = s.replace(/`([^`]+)`/g, '<code class="inlineCode">$1</code>');
+
+      const lines = s.split('\n');
+      let out = '';
+      let inUl = false;
+      let inOl = false;
+
+      const closeLists = () => {
+        if (inUl){ out += '</ul>'; inUl = false; }
+        if (inOl){ out += '</ol>'; inOl = false; }
+      };
+
+      for (let line of lines){
+        const ulMatch = line.match(/^\s*-\s+(.+)$/);
+        const olMatch = line.match(/^\s*(\d+)\.\s+(.+)$/);
+
+        if (ulMatch){
+          if (inOl){ out += '</ol>'; inOl = false; }
+          if (!inUl){ out += '<ul>'; inUl = true; }
+          out += `<li>${ulMatch[1]}</li>`;
+          continue;
+        }
+
+        if (olMatch){
+          if (inUl){ out += '</ul>'; inUl = false; }
+          if (!inOl){ out += '<ol>'; inOl = true; }
+          out += `<li>${olMatch[2]}</li>`;
+          continue;
+        }
+
+        closeLists();
+
+        if (line.trim() === ''){
+          out += '<br>';
+        } else if (line.startsWith('<h2>') || line.startsWith('<h3>') || line.startsWith('<hr>')){
+          out += line;
+        } else {
+          out += `<p>${line}</p>`;
+        }
+      }
+
+      closeLists();
+      return out;
+    }
+
+    function renderAssistantParts(containerBubble, parts){
+      containerBubble.innerHTML = '';
+      parts.forEach(part => {
+        if (part.type === 'code'){
+          containerBubble.appendChild(createCodeBlock(part.language, part.content));
+        } else {
+          const block = document.createElement('div');
+          block.className = 'arabicText';
+          block.innerHTML = renderMiniMarkdownToHtml(part.content);
+          containerBubble.appendChild(block);
+        }
+      });
+    }
+
+    function tokenizeHtml(html){
+      const tokens = [];
+      const re = /(<[^>]+>)/g;
+      const parts = html.split(re).filter(Boolean);
+
+      for (const part of parts){
+        if (part.startsWith('<') && part.endsWith('>')){
+          tokens.push(part);
+        } else {
+          for (const ch of part) tokens.push(ch);
+        }
+      }
+      return tokens;
+    }
+
+    async function typeAssistantMessage(containerBubble, fullText){
+      const normalized = normalizeTextClient(fullText);
+
+      const mcqs = parseMCQ(normalized);
+      const withoutMCQ = removeMCQTags(normalized);
+      const parts = parseCodeBlocks(withoutMCQ);
+
+      const textOnly = parts
+        .filter(p => p.type === 'text')
+        .map(p => p.content)
+        .join('')
+        .trim();
+
+      const formattedHtml = renderMiniMarkdownToHtml(textOnly);
+      const tokens = tokenizeHtml(formattedHtml);
+
+      containerBubble.innerHTML = '';
+
+      const typingWrap = document.createElement('div');
+      typingWrap.className = 'arabicText';
+      containerBubble.appendChild(typingWrap);
+
+      const cursor = document.createElement('span');
+      cursor.className = 'typeCursor';
+      cursor.textContent = '▍';
+      containerBubble.appendChild(cursor);
+
+      let out = '';
+      const speed = 6;
+
+      for (let i = 0; i < tokens.length; i++){
+        const tok = tokens[i];
+        out += tok;
+        typingWrap.innerHTML = out;
+
+        const isTag = tok.startsWith('<') && tok.endsWith('>');
+        if (!isTag){
+          scrollToBottom();
+          await new Promise(r => setTimeout(r, speed));
+        }
+      }
+
+      cursor.remove();
+      renderAssistantParts(containerBubble, parts);
+      return mcqs;
+    }
+
+    // ✅ IMPORTANT: send name to AI as prefix: "Name: message"
+    function buildMessageForAI(rawMsg){
+      const name = (USER_PROFILE.display_name || 'User').trim();
+      // Example: "bissan: hi there"
+      return `${name}: ${rawMsg}`;
+    }
+
+    async function sendMessage(){
+      const msg = inputEl.value.trim();
+      if (!msg) return;
+
+      inputEl.disabled = true;
+      sendBtn.disabled = true;
+
+      addUserMessage(msg);
+
+      // Send to AI with name prefix + MCQ answers
+      const fullMessage = buildMessageForAI(msg) + getMCQAnswersText();
+
+      inputEl.value = '';
+      inputEl.style.height = 'auto';
+      mcqAnswers = {};
+
+      showThinking();
+
+      try{
+        const res = await fetch('/send_message', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ message: fullMessage })
+        });
+
+        const data = await res.json();
+        hideThinking();
+
+        if (!data.success){
+          const { bubble } = createMessageRow('ai');
+          bubble.innerHTML = escapeHtml(data.error || 'حدث خطأ').replace(/\n/g,'<br>');
+          return;
+        }
+
+        // Update profile if backend returns it
+        if (data.user){
+          USER_PROFILE = data.user;
+        }
+
+        const { bubble, meta, wrap } = createMessageRow('ai');
+        setMeta(meta, data.sheet_number, data.timestamp);
+
+        const mcqs = await typeAssistantMessage(bubble, data.response);
+
+        if (mcqs && mcqs.length){
+          mcqs.forEach(mcq => {
+            const el = createMCQElement(mcq, mcqCounter);
+            wrap.appendChild(el);
+            mcqCounter++;
+          });
+        }
+
+        scrollToBottom();
+
+      }catch(e){
+        hideThinking();
+        const { bubble } = createMessageRow('ai');
+        bubble.innerHTML = 'تعذر الاتصال بالخادم. تأكد من تشغيل السيرفر ثم أعد المحاولة.';
+        console.error(e);
+      }finally{
+        inputEl.disabled = false;
+        sendBtn.disabled = false;
+        inputEl.focus();
+      }
+    }
+
+    async function clearHistory(){
+      if (!confirm('هل تريد مسح المحادثة بالكامل؟')) return;
+
+      try{
+        const res = await fetch('/clear_history', { method:'POST', headers:{'Content-Type':'application/json'} });
+        const data = await res.json();
+        if (data.success){
+          messagesEl.innerHTML = `
+            <div class="empty" id="emptyState">
+              <h2>تم مسح المحادثة</h2>
+              <p>ابدأ بسؤال جديد في <b>ITGS226 مقدمة في الإنترنت</b>.</p>
+            </div>
+          `;
+          mcqAnswers = {};
+          mcqCounter = 0;
+        }
+      }catch(e){
+        alert('فشل مسح المحادثة');
+        console.error(e);
+      }
+    }
+
+    async function showHistory(){
+      try{
+        const res = await fetch('/get_history');
+        const data = await res.json();
+        if (data.history && data.history.length){
+          let t = 'سجل المحادثة:\n\n';
+          data.history.forEach((m, i) => {
+            const who = m.role === 'user' ? (USER_PROFILE.display_name || 'المستخدم') : 'المساعد';
+            const snippet = (m.content || '').replace(/\s+/g,' ').slice(0, 120);
+            t += `${i+1}) ${who}: ${snippet}${snippet.length>=120?'...':''}\n\n`;
+          });
+          alert(t);
+        } else {
+          alert('لا يوجد سجل بعد');
+        }
+      }catch(e){
+        alert('فشل تحميل السجل');
+        console.error(e);
+      }
+    }
+
+    function downloadChatJson(){
+      window.open('/bissan/download', '_blank');
+    }
+
+    async function loadSessionInfo(){
+      try{
+        const res = await fetch('/session_info');
+        const data = await res.json();
+        if (data && data.user){
+          USER_PROFILE = data.user;
+        }
+      }catch(e){
+        console.warn('Failed to load session_info', e);
+      }
+    }
+
+    window.addEventListener('load', async () => {
+      await loadSessionInfo();
+      inputEl.focus();
+    });
+  </script>
+</body>
+</html>