آموزش html و css همراه با مثال عملی – قسمت دوم

اجازه بدهید قبل از شروع کمی در مورد محیطی که قرار است کار کنیم صحبت کنیم. وبسایت ها از دو قسمت تشکیل می شوند قسمت بصری که کاربر آن را میبیند و تماماً با آن درگیر خواهد بود که به آن فرانت اند (Front-End) نیز گفته می شود؛ بخش دوم قسمتی است که کاربر هیچ درکی از آن نخواهد داشت و در واقع آن را نمیبیند و تمام رخدادهای این قسمت در کامپیوتری به نام سرور انجام می‌شود.

Front-end به دو بخش طراحی وبسایت و توسعه سمت کاربر میپردازد. طراحی وبسایت قسمتی از مراحل تولید وبسایت است که طراح یا گرافیست به نوعی طرح یا ماکت وبسایت ما را ایجاد خواهد کرد و وظیفه توسعه دهنده سمت کاربر این است که نمونه واقعی این ماکت را بسازد. دوره‌ای که در حال اجرای آن هستیم مرتبط با توسعه سمت کاربر است. شما برای اینکه بتوانید یک وبسایت را ایجاد کنید باید نسبت به زبانی که همه مرورگرها آن را درک میکنند آشنایی داشته باشید تا بتوانید به مروگر بفهمانید که چه کاری باید انجام دهد؛ آن زبان همان Html است.برای شروع ساخت وبسایت، باید کمی در مورد اینکه هرکدام از عناصر html برای چه کاری استفاده می شود و یا اینکه عناصر html چه تفاوتی با هم دارند اطلاع داشته باشیم؛ همچنین بهتر است که کمی در رابطه با اینکه چطور عناصر در مرورگر ما نمایش داده می شوند بدانیم. در این جلسه فقط میخواهیم با نحوه ساخت یک صفحه وب آشنا شویم پس زیاد خود را درگیر کدهایی که در پایین می بینید نکنید؛ در آینده تک تک این عناصر را توضیح خواهم داد.

درخواست کاربر به سرور
درخواست http

تصویر بالا را ببینید؛ شما برای اینکه به وبسایت من متصل شوید از طریق مرورگری که با آن درحال مشاهده وبسایت من هستید به سروری که این وبسایت در آن قرار دارد درخواستی ارسال میکنید. این درخواست از طریق محیط اینترنت از طریق کامپیوتر یا گوشی تلفن همراه شما یا هر وسیله‌ی دیگری به سمت سرور مقصد هدایت می شود. سپس سرور پس از دریافت درخواست شما در صورتی که وبسایت درخواست داده شده موجود باشد بسته هایی را به سمت کامپیوتر شما ارسال میکند. کامپیوتر شما پس از تجزیه و تحلیل بسته ها، اطلاعات دریافت شده را به مرورگر تحویل میدهد. مرورگر شما زبان هایی مثل Html, css, javascript یا هرچیزی را که برایش تعریف شده باشد می شناسد و متوجه می شود؛ پس این داده های دریافت شده از سرور را تحلیل میکند و پس از درک محتوا به همان شکلی که توسعه دهنده سمت کاربر آن صفحه را طراحی کرده است به شما نمایش میدهد.

کد زیر را ببینید :

<!DOCTYPE html>
<html>
  <head>
<!-- قسمت سرآیند وبسایت یا HEAD -->
  </head>
  <body>

<!-- قسمت بدنه وبسایت یا BODY -->

  </body>
</html>

قطعه کد بالا ساختار کلی یک صفحه html را نمایش میدهد؛ همان چیزی که یک مرورگر میتواند آن را متوجه شود. کدهای نوشته شده در قسمت Head ساختار اچ تی ام ال که شامل اطلاعاتی درباره صفحه می باشد به کاربر نمایش داده نخواهد شد اما محتوای بدنه این ساختار شامل همان چیزی است کاربر خواهد دید. همه عناصر یک صفحه html و کاربرد آنها را در جلسات آینده توضیح خواهم داد.

تمرین: به صفحه زیر مراجعه کنید و  درون تگ H1 به جای Hello World! نام خودتان را به فارسی یا انگلیسی بنویسید و نتیجه را مشاهده کنید.

See the Pen Simple HTML Page by Ali Tajari (@AliTajari) on CodePen.0

ارسال پاسخ