طراحی وب سایت در کرج: یک صفحه وب یک فایل متنی با پسوند html یا .htm است. فایل های HTML اساس اینترنت را تشکیل می دهند.
این فایل متنی فقط شامل کاراکترهایی مانند حروف، اعداد و کاراکترهای خاص است. از آنجایی که فایل از کاراکترهای متنی خالص تشکیل شده است، می توانید صفحات وب HTML را در هر رایانه ای با ابتدایی ترین واژه پرداز ایجاد، باز و ویرایش کنید. بنابراین شما حتی نیازی به ویرایشگر متنی مانند Atom ندارید .
طراحی وب سایت در کرج | سئو وردپرس | ماهور مارکتینگ
اگرچه شما همچنین می توانید صفحات وب 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>مرورگر فضاها را نادیده می گیرد، اما هنگام برنامه نویسی، به تورفتگی دستورات بسیار کمک می کند. هدف پشت این کار یک نمای کلی بهتر است و می توانید راحت تر تودرتو بودن دستورات را تشخیص دهید.
به جهت مطالعه مقاله سئوکار کرج کلیک کنید.
اطلاعات متا یک وب سایت HTML
برای اطمینان از اینکه مرورگر از رمزگذاری صحیح برای سند HTML شما استفاده می کند، از یک متا تگ برای تعیین رمزگذاری به شکل UTF-8 استفاده می کنیم.
متا تگ ها از معدود تگ هایی هستند که نیازی به بسته شدن مجدد ندارند، زیرا اطلاعات از طریق ویژگی ها به مرورگر منتقل می شود. متا تگ برای رمزگذاری به شکل زیر است:
<meta charset=”utf-8″>
در مرحله بعد ما به یک متا تگ دیگر برای نسخه های قدیمی اینترنت اکسپلورر نیاز داریم. اینترنت اکسپلورر مایکروسافت سابقه طولانی دارد که ما طراحان وب را به ناامیدی سوق می دهد، زیرا نسخه های قدیمی اینترنت اکسپلورر اغلب دستورات را به درستی تفسیر نمی کردند.
برای جلوگیری از این اتفاق برای سند شما، به اینترنت اکسپلورر – نسخه‌های مختلف زیادی وجود دارد – دستور می‌دهیم از موتور رندر به نام Edge استفاده کند. اگر اینترنت اکسپلورر دستور متا زیر را بخواند، وب سایت را با Edge مونتاژ می کند که فقط یک مزیت است.
<meta http-equiv=”x-ua-compatible” content=”ie=edge”>
در مرحله بعد، از متا تگ زیر استفاده می کنیم تا مطمئن شویم که وب سایت ما به عنوان یک وب سایت واکنش گرا راه اندازی شده است. بعداً وقتی نوبت به بهینه‌سازی وب‌سایت برای همه اندازه‌های پنجره ممکن می‌رسد، که به عنوان viewports نیز شناخته می‌شوند، به این متا تگ نیاز خواهید داشت .
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
اکنون الگوی وب‌سایت‌های بعدی که بعداً خواهید ساخت، بسیار پیچیده به نظر می‌رسد. مهم است که بفهمید تگ های فردی چه می کنند. اما چیزی که لازم نیست به خاطر بسپارید، املای دقیق آن است. زیرا توصیه می کنم این قالب را برای وب سایت های آینده کپی کرده و سپس به آن اضافه کنید. مهمتر از همه، این باعث صرفه جویی در وقت شما می شود. الگوی تقریباً تمام شده ما اکنون به شکل زیر است:
<!doctype html>
<html lang=”de”>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”x-ua-compatible” content=”ie=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
</head>
<body>
</body>
</html>
مهمترین برچسب ها برای بهینه سازی موتورهای جستجو
برای اینکه قالب بی نقص باشد، ما هنوز باید دو دستور مهم HTML را برای بهینه سازی موتورهای جستجو، که به عنوان SEO (به انگلیسی برای بهینه سازی موتورهای جستجو) نیز شناخته می شود، وارد کنیم. این دو دستور <title>و <meta name=”description” content=””>.
هر سند HTML نیاز به عنوان دارد
هر وب سایتی نیاز به یک عنوان منحصر به فرد دارد. دستور برای این است <title>. موتورهای جستجو نیز از این تگ برای نمایش عنوان وب سایت مربوطه در نتایج جستجو استفاده می کنند.
عنوان در نتایج جستجو از اطلاعات موجود در تگ «<title>» می آید
عنوان در نتایج جستجو از اطلاعات موجود در <title>برچسب می آید
هر سند HTML نیاز به توضیح کوتاه دارد
برچسب <meta name=”description” content=””>برای توضیحات کوتاه مطلقا ضروری نیست. اما اگر می‌خواهید وب‌سایت خود را برای Google & Co بهینه کنید – و باید ، توضیح کوتاهی بنویسید. این نباید خیلی کوتاه باشد، اما نباید بیشتر از 150 کاراکتر باشد.
قالب 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>
شما نام صفحه شروع یک وب سایت را index.html می گذارید . این اولین فایلی است که سرور هنگام وارد کردن آدرسی به دنبال آن می گردد.
