إنشاء صفحة HTML بسيطة

This translation is incomplete. Please help translate this article from English.

فى هذا المقال سوف تتعلم كيق تنشئ صفحة ويب بسيطة باستخدام HTML

المتطلبات الأساسية: يجب ان يكون لديك محرر نصوص و أن تعلم كيف  كيف تفتح ملف فى متصفح.
الهدف: إنشاء صفحة ويب يمكنك عرضها باستخدام متصفحك.

الملخص

أن أبسط صفحة ويب هى فقط ملف HTML . فقط ملف HTML صحيح واحد موجود على حاسبك و متصفح ويب هى كل ما تحتاجه. سوف نرى كبف كيف يمكن استخدام HTML tags و سوف تكون فادر على عرض الصفحة التى أنشأتها فى متصفحك.

التعلم النشط

أول شئ؛ تأكد أنه يوجد لديك محرر نصوص تجيد استخدامه و متصفح ويب. على الأغلب أى محرر نصوص سوف يكون كافى؛ على سبيل المثال Notepad فى Windows أو TextEdit فى Mac ؛ ولكن تأكد أنك ستنشئ ملفات نصوص بسيطة (حروف فقط بدون تنسيق). إذا كنت تستخدم TextEdit فى Mac يمكنك اختيار "Make Plain Text" من قائمة "Format".

الخطوة الأولى: ملف

صفحة الويب الواحدة تتكون (على الأقل) من ملف HTML ؛ لذلك سنبدأ بإنشاء واحد. قم بفتح محرر النصوص و قم بإنشاء ملف نصى ؛ ثم اكتب شئ مثل هذا:

<!DOCTYPE html>
<html>
<head>
  <title>Hi there</title>
</head>
<body>
  This is a page
  a simple page
</body>
</html>

يمكنك تعديل هذا كما تشاء؛ أنت حر فى أن تضيف أو تغير النص بين وسمى <title></title> و <body></body>. تأكد أن تعطى الملف اسم ينتهى بالإضافة ".html" . على سبيل المثال يمكنك تسميتها "my_page.html".

الآن لديك ملف على حاسبك ؛ من الممكن أن يكون شكله يشبه هذا (هذا يتوقف على نظام التشغيل الذى تستخدمه) :

Screenshot of a file explorer with a html file for local test

إذا قمت فقط بالضغط مرتين على هذا الملف سوف يُفتح فى متصفحك. إذا أردت فتحه فى محرر النصوص لتعديله قم بالضغط عليه بزر الفأرة الأيمن و اختر فتح الملف فى محرر النصوص. (أو قم بسحبه و إفلاته فى المحرر؛ أو قم بفتح الملف باختيار "open" من قائمة "File" فى المحرر.) ,حسب محررك الملف سوف يبدو مثل هذا:

Screenshot of a file explorer with a html file for local test

الخطوة الثانية: متصفح ويب

داخل متصفح الملفات الخاص بك(مثل Explorer فى Windows؛ أو Finder فى Mac أو Files فى Ubuntu)، اعثر على الملف الذى أنشأته و قم بفتحه فى متصفحك (بالضغط عليه مرتين؛ أو سحبه و إفلاته على أيقونة المتصفح) الآن المتصفح يعرض النص من ملف HTML الذى أنشأته والتبويب يعرض عنوان الصفحة. هذا يجب أن يشبه هذا؛ حسب نظام تشغيلك و متصفحك:

Screenshot of a file explorer with a html file for local test

يمكنك أن ترى محتوى جسم الصفحة (بين وسمى <body></body>)؛ و العنوان الذى اخترته (بين وسمى <title></title>) يظهر فى التبويب ولكن لا يوجد فاصل بين سطرى النص. شئ مثير للاهتمام.

الخطوة الثالثة: التجربة والتعلم

جرب أن تحذف بعض أجزاء ملف HTML وشاهد ما يحدث. بعض الأخطاء لن تؤثر كثيرًا والصفحة ستظل قابلة للعرض فى المتصفح، البعض الاَخر سوف يسبب مشاكل واضحة للنتائج. هذا يحدث لأن المتصفحات تحاول أن تعوض عن بعض الأخطاء الشائعة.

The first thing you should notice is that the only thing you see displayed on screen is the text that's not inside angled brackets (otherwise known as the greater-than and less-than symbols, but we call them angled brackets when talking about HTML). Everything inside angled brackets is a tag, which represents the structure or skeleton of your webpage. All displayed content appears between tags.

Our example HTML page has two main sections: a header, contained within the <head> block, and a body, contained within the <body>. The body contains the text displayed within the page.

Each tag has a specific meaning and should be used accordingly; for example, <title> is used to indicate the page title, which can differ from the filename. Notice also that tags can occur within the content of other tags. The <title> is contained inside the page's <head>, for instance.

If you want to add something like a picture to your page, you need to add a tag for the image and the image itself. For example:

<!DOCTYPE html>
<html>
<head>
  <title>Hi there</title>
</head>
<body>
  This is a page
  a simple page
  <img src="unicorn_pic.png" alt="Unicorn picture :)" />
  now with a unicorn
</body>
</html>

Edit your file to include the tag, like this:

<img src="unicorn_pic.png" alt="Unicorn picture :)" />

It can go anywhere inside the <body>. Don't forget to save your changed page!

Then put a file named "unicorn_pic.png" in the same folder as your HTML file. When you refresh your browser window (or re-open the HTML file in your browser), you should see the changed content, complete with unicorn! (don't forget to save your page).

Original file for the unicorn image

Note: You can get a copy of the unicorn picture to use in your experiments by right-clicking above on the image and choosing the "Save Image As..." option from the menu that appears.

The files needed for this page to work now look something like this in your desktop:

Screenshot of the explorer with 2 files : a html file and a picture file

The resulting page should look something like this in your browser:

Screenshot for the example with a picture

You might have noticed that the <img> tag here has attributes which provide additional information needed to build the requested object, in this case, the filename of the image to display and alternative text to show when the image can't be loaded.

This is an example of how to add a picture to your page, but you can use similar techniques to add music, videos, and more, all using nothing more than HTML.

Deeper dive

This is not a very pretty web page

As you may have noticed, this web page is not a miracle of design and beauty. This is because HTML is all about the content and what the content means (in terms of its context and the relationships between content blocks), rather than design.

CSS enables you to make the content sparkle, by adding layout, color, fonts, and so forth. Pure HTML is good enough for making simple webpages, but more complex pages (or even simple ones with attractive designs) typically need CSS and possibly JavaScript. HTML builds content, CSS styles the content, and JavaScript makes the content dynamic.

Let's experiment a bit with CSS by making the body text of the page blue:

<!DOCTYPE html>
<html>
<head>
  <title>Hi there</title>
  <style>
    body {
      color: blue;
    }
  </style>
</head>
  <body>
    <p>This is a some blue text</p>
    <img src="unicorn_pic.png" alt="Unicorn picture :)" />
  </body>
</html>

Note the addition of the <style> element to the page's <head>. This specifies the CSS to apply to the body text.

You want the text to be underlined? Try adding "text-decoration: underline;" rule to your style:

body {
  color: blue;
  text-decoration: underline;
}

You want the text to have a specific size? Try adding "font-size: 42px;" like this:

body {
  color: blue;
  text-decoration: underline;
  font-size: 42px;
}

The end result looks like this:

<html>
<head>
  <title>Hi there</title>
  <style>
  body {
    color: blue;
    text-decoration: underline;
    font-size: 42px;
  }
  </style>
</head>
<body>
  <p>This is a blue underlined big text</p>
  <img src="unicorn_pic.png" alt="Unicorn picture :)" />
</body>
</html>

And if you save the page in your editor, then refresh your browser, the page should now look like this:

Screenshot of the browser with the page with some CSS

Growing to two pages

When you browse the Web, you often come across links, the most useful way to navigate from page to page. Since HTML is about content and links are a form of content, you can create links among pages using only HTML.

Linking between two local pages

For this exercise, you will need to create a second HTML file on your computer. We'll add a link to each page so you can quickly switch back and forth between them.

In the first file you can keep the same general structure as before. The important thing is to add a new tag, <a>, like this:

<!DOCTYPE html>
<html>
<head>
  <title>Page 1 to ground control</title>
</head>
<body>
  This is page 1.
  <a href="page2.html" title="to page 2">What is going on on page 2?</a>
</body>
</html>

The second page should link back to the first page:

<!DOCTYPE html>
<html>
<head>
  <title>Page 2 :)</title>
</head>
<body>
  This is a page 2.
  <a href="page1.html" title="to page 1">Want to go back to page 1? Click here</a>
</body>
</html>

Note: Make sure the filenames specified in the <a> tag's href attribute match the names of the files you created on your computer.

You can now navigate between the two HTML documents. Open page 1 in your browser and click the link to open page 2, and vice versa. You can also test the "previous" button in your browser; it will bring you back to the last page you were looking at.

Your file manager should have the two HTML files in the same folder, like this:

Screenshot of the file explorer with two HTML documents in one directory/folder

Page 1 looks like this in the browser:

Screenshot of a file explorer with a html file for local test

And Page 2 looks like this in the browser, after clicking the link on Page 1:

Screenshot of the 2nd page of the 2 pages example in the browser

Note: The link back to page 1 is violet because the browser "knows" that we've previously visited the first page.

If you want, you can try this with more than two pages, or continue on to the next section to take this to the next level.

Linking to another website

In this exercise, we will add a link to the HTML file so that the reader can quickly get to some useful page on the Web. You can link to anything available on the public Web. Let's try linking to Wikipedia:

<!DOCTYPE html>
<html>
<head>
  <title>My page</title>
</head>
<body>
  One day,...Unicorns are great...See you.
  <a href="https://en.wikipedia.org/wiki/Unicorn" title="Unicorn page on Wikipedia">Want to go know more about unicorns? Wikipedia is right here</a>
</body>
</html>

This should look more or less like this in the browser:

Screenshot of the example page with a link to Wikipedia in the browser

Hover the mouse pointer over the link; you'll see the title attribute displayed in a hovering tooltip. This can be used to provide more information about the link, so the user can make an informed decision about whether or not to click on it.

Reminder: Whenever you edit the page, don't forget to save the file on your editor and to refresh the page on your browser so that you can see the changes you made.

Next steps

  • How to use HTML tags: There are a lot of tags in HTML; we've only looked at the basics here! You will find more resources about what is possible here.
  • Anatomy of a web page: HTML has some rules and a page may have a lot of content; this can help you understand more complex pages, such as those used on some of the most popular sites on the Web!
  • Understanding links: We used some very simple examples with links; this article is for you if you want to know understand why "links" are the origin of the name "Web".
  • Using images and adding audio and video are useful for adding multimedia content with simple HTML.

Document Tags and Contributors

 Contributors to this page: mhmdiaa
 Last updated by: mhmdiaa,