طراحی سایت با html: یک صفحه وب یک فایل متنی با پسوند html یا .htm است. فایل های HTML اساس اینترنت را تشکیل می دهند. این فایل متنی فقط شامل کاراکترهایی مانند حروف، اعداد و کاراکترهای خاص است. از آنجایی که فایل از کاراکترهای متنی خالص تشکیل شده است، می توانید صفحات وب HTML را در هر رایانه ای با ابتدایی ترین واژه پرداز ایجاد، باز و ویرایش کنید. بنابراین شما حتی نیازی به ویرایشگر متنی مانند Atom ندارید .
طراحی سایت با html | قیمت سئو سایت کرج | ماهور
اگرچه شما همچنین می توانید صفحات وب HTML را با برنامه های پردازش کلمه بزرگ مانند Word یا Libre Office ایجاد کنید، سپس باید فایل را به عنوان یک فایل متنی ساده ذخیره کنید.
به عنوان مثال، Word به طور معمول نه تنها حروف و موارد مشابه را در یک فایل ذخیره می کند، بلکه اطلاعاتی مانند فونت های استفاده شده، اندازه فونت ها و رنگ ها، اطلاعات مربوط به فرمت صفحه صفحات (مثلا DIN A4) و غیره را نیز ذخیره می کند. یک مرورگر نمیتواند چنین فایلهایی را پردازش کند، مگر اینکه پسوندی برای چنین موردی نصب کرده باشید.
همیشه صفحات HTML را با کد UTF-8 ذخیره کنید
از آنجایی که یک فایل متنی خالص است، باید رمزگذاری کاراکتر را ذخیره کنید. پیچیده به نظر می رسد، اما ساده است. به عنوان مثال، در حالی که آمریکایی ها از صفحه کلید بدون ä، ö و ü استفاده می کنند، ما آلمانی ها از صفحه کلیدی استفاده می کنیم که هیچ کاراکتر ویژه فرانسوی ندارد. برای اینکه یک وب سایت در همه مرورگرها و زبان ها کار کند، سند باید در فرمت UTF-8 ذخیره شود.
زیرا UTF-8 شامل تمام کاراکترهای مهم بسیاری از زبان های غربی است. در مقابل به عنوان مثال ASCII . کدگذاری ASCII شامل هیچ حروف ü، ä و ö نیست، و فقط برای منطقه زبان آمریکایی در نظر گرفته شده است.
ساختار اساسی یک وب سایت مدرن HTML5
یک صفحه وب کاملاً خالی HTML به شکل زیر است:
<!doctype html>
<html lang=”de”>
<head>
<title></title>
<meta charset=”utf-8″>
<meta http-equiv=”x-ua-compatible” content=”ie=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<meta name=”description” content=””>
</head>
<body>
</body>
</html>
در نگاه اول، متن بالا احتمالاً گیج کننده به نظر می رسد. اما نسبتاً ساده است و ما اکنون گام به گام برای شما توضیح خواهیم داد که خطوط مربوطه به چه معنا هستند.
اما ابتدا ویرایشگر متن Atom را باز کنید و یک فایل متنی خالی با File > New File ایجاد کنید. سپس سند خالی را با File > Save در دسکتاپ خود در زیر نام فایل template.html ذخیره کنید .
اگر اکنون روی فایل template.html دوبار کلیک کنید ، مرورگر استاندارد شما باید به طور خودکار باز شود.
فقط جمله سلام دنیا را بنویس! در سند template.html ، فایل را ذخیره کرده و در مرورگر بارگذاری مجدد کنید.
اکنون متن باید بدون قالب ظاهر شود. تبریک میگوییم، شما به تازگی رایجترین اقدام طراح وب را انجام دادهاید:
- سند HTML را اصلاح کنید
- مرورگرها را به روز کنید
- بررسی تغییرات
- یک دستور HTML تگ نامیده می شود
در این مرحله، مرورگر هنوز نمی داند که یک سند HTML است. پس از همه، شما هنوز هیچ دستور HTML را در فایل متنی هک نکرده اید. دستورات HTML را تگ های HTML، به اختصار تگ یا تگ به صورت مفرد می نامند.
برای اینکه مرورگر اصلاً بداند که باید فایل متنی شما را به عنوان یک فایل HTML در نظر بگیرد، ابتدا باید آن را برای مرورگر «واضح کنید». این اتفاق می افتد با:
<!doctype html>
سپس، سند HTML را با دستور <html>باز کنید و دوباره آن را با دستور ببندید </html>. تقریباً تمام دستورات HTML باید دوباره بسته شوند. مرورگر به این اطلاعات نیاز دارد تا بداند که برای مثال اکنون سند تمام شده است. فایل template.html شما اکنون باید به شکل زیر باشد:
<!doctype html>
<html>
</html>
برای اینکه مرورگر بتواند سند شما را به عنوان یک سند آلمانی زبان شناسایی کند، باید <html>یک ویژگی به اصطلاح به دستور اضافه کنید. این به سادگی است lang=”de”. Lang مخفف زبان و مخفف de برای منطقه آلمانی زبان است. اگر وبسایتهایی به زبان انگلیسی میسازید، ویژگی این خواهد بود lang=”en”.
اکنون سند شما به شکل زیر است:
<!doctype html>
<html lang=”de”>
</html>
دو بخش از یک صفحه وب HTML
یک وب سایت از دو بخش <head>و <body>. این <head>منطقه حاوی اطلاعات متا <body>است و منطقه بخشی از سند شما است که در پنجره مرورگر نمایش داده می شود.
اطلاعات متا اطلاعاتی در مورد یک سند است. به عنوان مثال، بسیاری از تلفن های هوشمند داده های جغرافیایی، زمان نوردهی یا نوع مدل گوشی هوشمند را در اطلاعات متا یک تصویر ذخیره می کنند. به عنوان مثال، با اسناد HTML، اطلاعات متا مانند عنوان، توضیحات کوتاه و موارد مشابه را ذخیره می کنید.
فایل template.html شما اکنون به شکل زیر است:
<!doctype html>
<html lang=”de”>
<head>
</head>
<body>
</body>
</html>
در مثال بالا، دو تگ <head>را با دو فاصله ایجاد کردم. <body>مرورگر فضاها را نادیده می گیرد، اما هنگام برنامه نویسی، به تورفتگی دستورات بسیار کمک می کند. هدف پشت این کار یک نمای کلی بهتر است و می توانید راحت تر تودرتو بودن دستورات را تشخیص دهید.
