ملخص: My Digital Project for My School

Learning Objectives

• Explain the concept of the digital project using HTML.
• Write the project code correctly.
• Design the school page in an attractive way.

The Project

You write the HTML code for two web pages (school data and student data) and the CSS code that formats both.

Step 1: Prepare the project folder

Create a folder named project and, using a text editor, create these files:

Step 2: The HTML of the school page

The page structure explained:

• <html>: the main element that contains the whole page.
• <head>: information for the browser that does not appear in the page content, such as the <title> (shown in the browser bar, here "School Data") and <link rel="stylesheet" href="style.css">, which connects the page to the external CSS file.
• <body>: the content the user sees.
• <div class="container">: a container that organizes and groups the page content; the class name refers to code in the CSS file.
• <header>: the top of the page or container, usually holding the main heading <h1>.
• <section>: the container is divided into two sections, basic information and school activities, each with an <h2> subheading. The first section includes an image with width and height, then the school name, address, phone number and email.
• <footer>: the bottom of the page, usually copyright or contact information, with the © symbol for the copyright sign. The student page (Student.htm) is built the same way, with personal information (name, date of birth, grade, residence) and contact information (parent phone number, student email).

Step 3: The CSS that formats both pages

• body: text-align: center centers the text; font-weight: bold makes it bold.
• .container: width: 80% makes it 80% of the page width; margin: auto centers it horizontally; background-color: lightcyan colors it light cyan.
• header: padding: 10px adds inner space; white text on a dark blue background.
• section: padding: 15px adds space between content and border.
• h2: padding-bottom: 10px, blue color and border-bottom: 5px solid blue draws a 5px blue line under the subheading.
• footer: nearly the same as the header: padding: 5px 0, white text on a black background.

Key Idea

Because both pages link to the same style.css, the formatting is written once and gives a uniform look to both pages.