با ما همراه باشید

منتشر شده

در

آموزش طراحی وب صفرتاده (html – قسمت اول)
5 (100%) 1

با سلام در خدمت شما هستیم با آموزش طراحی صفحات وب صفرتاده .تیم مهستان با هدف آموزش،و پیشرفت خیلی سریع و تغییردر سطح علمی شما دوستان عزیز بخش صفر تا ده را راه اندازی کرده،تا شما بتونید خیلی راحت و با کمترین امکانات پیشرفت کنید،پس با ماهمراه باشید.

اول از همه وب چیه:وب به معنی لغوی یعنی تار،حالا در ادامه بعداراجبش بیشتر صحبت میکنیم.
حالا اینترنت چیه: مجموعه کامپیوتر هایی که به هم وصل هستند و تشکیل یک شبکه خیلی بزرگ رو میدن اونم به عنوان بستری برای وب جهانی(word wide web)

«نحوه ارتباط در وب»

استاندارد  ( HTTP (Hyper text transfer porotocol

خب اینجا باید با چند تا مفهوم آشنا بشیم اول

  • مرورگر:اون کسیه که میخواد استفاده کنه در واقع میخواد یه صفحه ای رو ببینه
  • وب سرور:سرور وبه که اون اطلاعات رو دراختیار داره

مثلا:شما تو خونه نشستید و سایت mimlamd.com رو میارید.Mimland.com روی یک سروریه که بهش میگن وب سرور چون یک محتوای وبی رو داره منتشر میکنه.بسترارتباطی بین وب سرور و مرورگر هم اینترنته و پروتکل HTTP هست که به طور خاص برای وب تعریف شده و یه ساختار درخواست و پاسخ داره.
به این صورت که شما درخواست رو میدید که من فرضا سایت میم لند رو میخوام و وب سرور یک صفحه وب به شما برمیگردونه.

«آدرس دهی در وب»

(URL(Uniform Resource Locator

URL اصلا به چی میگن:به ادرس های صفحه پیج یا همون سایتمون URLمیگن مثل این تصویر:

حالا به این آدرس توجه کنید:
http://www.ubuntu.com/ubuntu/features

این آدرس یک صفحه وبه یعنی محتوای وبه اون تیکه اول(http) بهش میگن پروتکل درواقع من میخوام بگم که از پروتکل http برای ارتباطم میخوام استفاده کنم.
اون بخش وسط(www.ubuntu.com)
اون سروریه که من اطلاعاتمو ازش میخوام بگیرم رو مشخص میکنه که بهش میگن دامین:این دامین با یکسری روش ها تبدیل میشه به یک آی پی و توی اون شبکه اینترنت،یه سروری مشخص میکنه که اطلاعات از اون جا قراره به دست ما برسه.
به اون تیکه اخرم(ubunt/features/)میگن مسیر یاpath که به اون وب سرور میگید که دقیقا من چیرو میخوام.

حالا این مسیر ها میتونن مدل های مختلفی داشته باشند وب سرور های مختلف هیچ قالب مشخصی ممکنه نداشته باشن ولی معمولا چیزی که زیاد میبینیم یه همچین چیزی هست:
https://www.mimland.com:80/morenews.php?catid=7
این url دوتا چیز بیشتر داره یک اینکه این پورته که معمولا توی وب هشتاده (۸۰)که مثلا میگید میخوام با اون سرور روی پورت ۸۰ صحبت کنم.
و ممکنه چیز های دیگه ای هم باشه ولی معمولش هشتاده اگه توی url نباشه به صورت default خودش ۸۰ فرض میشه یغنی خود مرورگر اونو ۸۰ قرار میده.

بعد یه همچین چیزایی هستند (catid=7)که بعد از علامت سوال میان که بهشون میگن پارامتر مثلا میگید من اخبار رو می‌خوام توی catgory 7 کسی که اون برنامه وب رو نوشته تعریف کرده و شما دارید ازش استفاده میکنید.

این url ها کلا یه محتوایی رو توی وب مشخص می‌کنند یا آدرس دهی میکنند.

«صفحات وب»

خب توی وب صفحه های وب استانداردی وجود داره که بهش میگن (HTML(Hyper text markup language اولش که HTML ایجاد شد هدفش این بود که یکسری مقاله های که صرفاً یک تکس خالی بودند رو از بدون استیل دربیاره.

با این HTML در واقع میشه وب پیج هارو نشون داد ویا حتی باهاش بازی ساخت و خیلی چیز گسترده ایه.

  • ساختار مقاله گونه
  • طرح بندی های پیچیده
  • تگ و خاصیت ها

کلا HTML از تگ ساخته شده و این تگ ها به این شکل هستند که یه جایی باز میشن و یه جایی بسته میشن.درواقع میشه یه ساختار درختی رو توی HTML دید.بعضی از این تگ ها خاصیت دارندمثلا:
<HTML lang=”en”>
</HTML>

مثل این “Lang=”en به این معنی که زبان HTML ما انگلیسیه.

خاصیت ها به این شکل نوشته میشن:

“مقدارش”=اسم خاصیت

پسوند فایل HTML:
.html
.htm

وب سرور تعبیه شده php

شما میتونید وب سرور phpرو توی نسخه php 5.4 بدون نصب کردن آپاچی و با دستور
php -s localhost:80
اجرا کنید.

خب اصلا localhost یعنی چی:
به این معنی هستش که از اینترنت استفاده نکن وروی کامپیوتر خودم اجراش کن.
تویHTML دوتا تگ اصلی وجود داره یکی تگ<head> و تگ <body>
تگ <head> : توضیحات درباره HTML که من دارم بیان میکنم تیکه از HTML هستش که نشون داده نمیشه و میشه با استفاده از تگ<title> عنوان سایت رو بنویسیم کد های که توی <head>تعریف میکنیم درواقع متا محتوامونه مثل<title>اینکه درباره چی هست جلوتر بیشتر توضیح میدم.
توی موتورهای جستجو گوگل بیشتر علاقه دارند قسمت <head> سایت رو بخونن و ما باید یکسری توضیحات رو اونجا اضافه کنیم،که سایت ما درباره چه موضوعیه و دسترسی بهش راحت تر باشه.
اون چیزی که توی <body> تعریف میکنیم محتوای متن مونه یعنی هر چیزی که توی <body> بنویسیم عیناً نشون داده میشه.

خب برای جمع بندی میخوام چند تا تگ رو بهتون معرفی کنم.
۱:<h1>: عنوان شماره یک سطح ۱
۲:<h2>:عنوان شماره دو سطح ۲
۳:<p>: پاراگراف
۴:<title>: عنوان سایت

و در آخر مثال کلی و استفاده از تگ هایی که معرفی کردم.

خروجی قطعه کد:

خب به پایان این بخش از آموزش صفر تا ده رسیدیم.امیدوارم که تمرین کردن رو فراموش نکنید.
مارودنبال کنید در کانال

🆔 @Mim_Land

برای افزودن دیدگاه کلیک کنید

یک پاسخ بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *