Make it a real page · تحويلها لصفحة حقيقية
This page needs a recent browser (with SharedArrayBuffer support). Please update Chrome, Edge, Firefox or Safari to the latest version. · تحتاج هذه الصفحة إلى متصفح حديث (يدعم SharedArrayBuffer). يرجى تحديث Chrome أو Edge أو Firefox أو Safari إلى أحدث إصدار.
English
A real web page
- So far you wrote pieces of HTML. A full page wraps them in a frame.
- That frame is almost the same on every web page in the world.
- Let's meet it once — then it becomes a habit.
العربية
صفحة ويب حقيقية
- حتى الآن كتبت قطعاً من HTML. الصفحة الكاملة تحيط بها بإطار.
- هذا الإطار متطابق تقريباً في كل صفحة ويب في العالم.
- لنلتقي به مرة واحدة — ثم يصبح عادة.
English
The four parts
<!DOCTYPE html>— the first line. It says: this is modern HTML.<html>— wraps the whole page.<head>— hidden information about the page (like its<title>).<body>— everything you see on the page.
العربية
الأجزاء الأربعة
<!DOCTYPE html>— السطر الأول. يقول: هذا هو HTML الحديث.<html>— يحيط بـ كلّ الصفحة.<head>— معلومات مخفية حول الصفحة (مثل<title>الخاص بها).<body>— كل ما تراه على الصفحة.
Explore · استكشف
The page skeleton as a tree · هيكل الصفحة كشجرة
Every page is a tree: <html> holds <head> (setup) and <body> (what you see). · كل صفحة شجرة: <html> يحتوي على <head> (الإعدادات) و<body> (ما تراه).
<!DOCTYPE html>
<html>
<head>
<title>My first page</title>
</head>
<body>
<h1>Hello!</h1>
<p>This is a real web page.</p>
</body>
</html>
English
The title shows in the tab
- The
<title>does not appear on the page itself. - It is the name shown on the browser tab and in search results.
- Every page should have one.
العربية
العنوان يظهر في التبويب
- لا يظهر
<title>بشكل مباشر على الصفحة نفسها. - هو الاسم الذي يظهر في تبويب المتصفح وفي نتائج البحث.
- يجب أن تحتوي كل صفحة على واحد.
English
Common mistakes
- A page needs
<html>, a<head>and a<body>. - The tab title comes from
<title>inside<head>.
العربية
أخطاء شائعة
- تحتاج الصفحة إلى
<html>، و<head>، و<body>. - يأتي عنوان التبويب من
<title>الموجودة داخل<head>.
English
Now you try
- Notice how
<head>and<body>sit inside<html>. - Add a title, then give a page its doctype line.
العربية
الآن جرب بنفسك
- لاحظ كيف أن
<head>و<body>يقعان داخل<html>. - أضف عنواناً، ثم قدّم لصفحة السطر الخاص بنوع المستند.
Give the page a title. Add <title>My Page</title> inside the <head>. · أعطِ الصفحة عنواناً. أضف <title>My Page</title> داخل <head>.
Start this page properly. Add <!DOCTYPE html> as the very first line. · ابدأ هذه الصفحة بشكل صحيح. أضف <!DOCTYPE html>作为第一行.