s2

Simple project application

Simple project application

When you learn the basic fundamentals of the programming language, implement the simple step-by-step project. You can start with a simple program that prints “Hello, World!” Then it evolved from there.

Project useful links:

Python Project for Beginners: Hello World Program
Develop a simple web application using HTML and CSS.

Important: In order for a CSS file to be accessible, the href attribute must contain the correct path to the file. This in turn means that if the CSS file is in a subdirectory, we must include that subdirectory in the file path as shown. You can review this topic in Lesson 1 in the Relative and Absolute URLs section.

Colors

So far, the CSS file is still empty, so let’s start writing our first CSS. CSS contains what are known as CSS Rules. Using a CSS rule, we can tell the browser how to treat a specific part of the HTML document.

As an example, we’ll change the background color and text color of the h2 heading within the index.html file. Add the following to a file:

Structure and Style

Let’s remember: HTML expresses the structure of a web page, while CSS defines the overall look of a page. Separating page structure from layout is very important and has many advantages, although it is not mandatory. So we will always keep our HTML and CSS in separate files.

Linking to a CSS file

A CSS file is a plain text file with the extension (.css, and we link to it from within the HTML file.

Create a new file in the Portfolio directory and name it main.css.

Important: In order for a CSS file to be accessible, the attribute must contain the correct path to the file. This in turn means that if the CSS file is in a subdirectory, we must include that subdirectory in the file path as shown. You can review this topic in Lesson 1 in the Relative and Absolute URLs section.

s2

تطبيق المشروع البسيط

تطبيق المشروع البسيط

عندما تتعلم الأساسيات الأساسية للغة البرمجة، قم بتطبيق المشروع البسيط خطوة بخطوة. يمكنك بدءًا من برنامج بسيط يقوم بطباعة “Hello, World!” ثم تطور من هناك.

روابط مفيدة المشروع

:

ملاحظة مهمّة: لكي يكون من الممكن الوصول لملف CSS، يجب أن تحتوي السمة href على المسار الصحيح للملف. وهذا يعني بدوره أنّه إذا كان ملف CSS في مجلّد فرعي، يحب أن نضم هذا المجلّد الفرعي إلى مسار الملف كما هو واضح. يمكنك مراجعة هذا الموضوع في الدرس الأوّل في فقرة عناوين URL النسبيّة والمطلقة.

الألوان

إلى الآن ما يزال ملف CSS فارغًا، لنبدأ الآن بكتابة أولى تنسيقات CSS. تحوي CSS ما يُعرف بالقواعد CSS Rules. يمكننا باستخدام قاعدة CSS أن نُخبر المتصفّح كيف يُعالج جزءًا مُحدّدًا من مستند HTML.

كمثال على ذلك، سنغيّر لون الخلفيّة ولون النص للعنوان من المستوى الثاني h2 ضمن الملف index.html . أضف ما يلي إلى ملف

البنية والتنسيق Structure and Style

لنتذكّر معًا: يُعبّر HTML عن بنية صفحة الويب، في حين تُعرّف CSS المظهر العامّ للصفحة. يُعتبر فصل بنية الصفحة عن تنسيقها أمر في غاية الأهميّة وله الكثير من المزايا رغم أنّه ليس إلزاميًّا. لذلك سنعمل دومًا على جعل رُماز HTML وتنسيقات CSS في ملفات منفصلة.

الربط مع ملف CSS

ملف CSS هو ملف نص عادي له الامتداد (css.) ونربط معه من داخل ملف HTML.

أنشئ ملف جديد ضمن المجلّد Portfolio وسمّه main.css.

ملاحظة مهمّة: لكي يكون من الممكن الوصول لملف CSS، يجب أن تحتوي السمة href على المسار الصحيح للملف. وهذا يعني بدوره أنّه إذا كان ملف CSS في مجلّد فرعي، يحب أن نضم هذا المجلّد الفرعي إلى مسار الملف كما هو واضح. يمكنك مراجعة هذا الموضوع في الدرس الأوّل في فقرة عناوين URL النسبيّة والمطلقة.