چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

بازدید: 233 بازدید
چگونه یک صفحه وب ساده را با HTML ایجاد کنیم
چکیده : امروز در پرنیان طرح می آموزیم که چگونه یک صفحه وب ساده با html (زبان نشانه گذاری فرامتن) بنویسید. HTML یکی از اجزای اصلی وب جهانی است که ساختار صفحات وب را تشکیل می دهد. هنگامی که صفحه وب خود را ایجاد کردید، می توانید آن را به عنوان یک سند HTML ذخیره کرده و در مرورگر وب خود مشاهده کنید. ایجاد یک صفحه HTML با استفاده از ویرایشگرهای متن اصلی موجود در رایانه های Windows و Mac امکان پذیر است.

با سلام خدمت کاربران عزیز وبسایت پرنیان طرح

در این آموزش خواهید آموخت که چگونه یک وب سایت ساده رو با html ایجاد کنید

به شما انواع روش های استفاده از کد های html را یاد خواهیم داد.

فصل یک بخش اول

در رایانه‌ای که سیستم عامل ویندوز را اجرا می‌کند، معمولاً از Notepad یا Notepad++ استفاده می‌کنیم، در حالی که کاربران macOS از TextEdit و کاربران ChromeOS از متن استفاده می‌کنند:

  • Windows – Start را باز کنید 
    notepad، یا ++notepad را تایپ کنید روی notepad یا “Notepad++ or sublime” در بالای پنجره کلیک کنید.
  • macOS – روی Spotlight کلیک کنید
     

    TextEditرا تایپ کنید و روی textedit در بالای نتایج دوبار کلیک کنید .

  • ChromeOS – راه‌انداز را باز کنید، سپس روی متن کلیک کنید. (آیکون می گوید Code Pad).

فصل یک بخش دوم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

<doctype html> را تایپ کرده و enter فشار دهیداین به مرورگر وب می گوید که این یک سند HTML است.

فصل یک بخش سوم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

کد <html> تایپ کنید و enter فشار دهید . این تگ باز برای کد HTML شماست.

فصل یک بخش چهارم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

<head> را تایپ کرده و  enter را فشار دهید این برچسبی است که سربرگ HTML شما را میسازد. اطلاعات سربرگ HTML که معمولاً در صفحه وب شما نمایش داده نمی شود. این اطلاعات می تواند شامل عنوان، داده های متا، شیوه نامه های CSS و سایر زبان های برنامه نویسی باشد. 

فصل یک بخش پنجم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

 <title> تایپ کنید این تگ برای اضافه کردن عنوان به صفحه شما است.

فصل یک بخش ششم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

یک عنوان برای صفحه وب خود تایپ کنید. این می تواند هر عنوانی باشد که می خواهید صفحه وب خود را نام گذاری کنید.

بخش هفتم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

<title/> را تایپ کرده و enter فشار دهید این تگ برای بستن تگ عنوان شماست.

فصل یک بخش هشتم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

<head/> تایپ کنید و enter فشار دهیداین برچسب برای بستن سربرگ است. کد HTML شما باید چیزی شبیه این باشد. 

فصل یک بخش نهم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

<head/> تایپ کنید و enter فشار دهیداین برچسب برای بستن سربرگ است. کد HTML شما باید چیزی شبیه این باشد. 

<!doctype html>

<html>

<head>

<title> صفحه وب من </title>

</head>

فصل یک بخش دهم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

<head/> تایپ کنید و enter فشار دهیداین برچسب برای بستن سربرگ است. کد HTML شما باید چیزی شبیه این باشد. 

فصل دوم بخش اول

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

<body> را تایپ کنید. این تگ بدنه سند HTML شما را باز می کند. هر چیزی که در بدنه HTML وجود دارد در صفحه وب نمایش داده می شود.

فصل دوم بخش دوم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم
  را تایپ کنید این تگ برای اضافه کردن عنوان به سند HTML شما است. عنوان یک متن پررنگ بزرگ است که معمولاً در بالای سند HTML شما قرار می گیرد.

فصل دوم بخش سوم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

یک عنوان برای صفحه خود تایپ کنید. این می تواند عنوان صفحه شما یا یک تبریک باشد.

فصل دوم بخش چهارم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم
بعد از متن عنوان خود را تایپ کرده و enter v,فشار دهید . این تگ عنوان شما را می بندد.
  • در حین حرکت سرفصل های اضافی اضافه کنید. شش عنوان مختلف وجود دارد که می توانید با استفاده از h1 تا h6 تگ های through ایجاد کنید. این عناوین در اندازه های مختلف ایجاد می کنند. به عنوان مثال، برای ایجاد سه عنوان با اندازه های مختلف پشت سر هم.
  • سرفصل ها اولویت یا اهمیت متن را نشان می دهد. اما اگر می‌خواهید از عنوان پایین‌تر استفاده کنید، لازم نیست از عنوان بالاتر استفاده کنید. می توانید مستقیماً از H3 استفاده کنید، حتی اگر H1 در پست شما وجود نداشته باشد.

فصل دوم بخش پنجم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

تگ <p> را تایپ کنید این تگ برای باز کردن یک پاراگراف است. متن پاراگراف برای نمایش متن در اندازه معمولی استفاده می شود.

فصل دوم بخش ششم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

مقداری متن را تایپ کنید این می تواند توضیحی برای صفحه وب شما یا هر اطلاعات دیگری باشد که می خواهید به اشتراک بگذارید.

فصل دوم بخش هفتم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

بعد از متن خود تگ <p/> رو تایپ کنید و enter فشار دهیداین تگ برای بستن متن پاراگراف شماست.

فصل سوم بخش اول

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

یک عکس به صفحه خود اضافه کنید با استفاده از مراحل زیر می توانید یک تصویر به HTML خود اضافه کنید:

  • برای باز کردن تگ تصویر خود این کد را = img src > تایپ کنید.
  • نشانی اینترنتی تصویر را بعد از علامت “=” کپی کرده و جایگذاری کنید.
  • بعد از آدرس  تصویر  < تایپ کنید تا تگ تصویر خود را ببندید.

فصل سوم بخش دوم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

پیوند به صفحه دیگر با استفاده از مراحل زیر می توانید یک لینک به HTML خود اضافه کنید:

  • = a href > برای باز کردن برچسب پیوند خود تایپ کنید.
  • URL را کپی و بعد از علامت “=” وارد گیومه کنید.
  • بعد از URL “<” تایپ کنید تا قسمت پیوند HTML بسته شود.
  • یک نام برای پیوند بعد از بسته شدن براکت تایپ کنید.
  • بعد از نام پیوند <a/> تایپ کنید تا پیوند HTML بسته شود.

فصل سوم بخش سوم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

یک شکست خط به HTML خود اضافه کنید.

 شما می توانید با تایپ کردن <br> در HTML خود، یک شکست خط اضافه کنید. این یک خط افقی ایجاد می کند که می تواند برای تقسیم بخش های مختلف صفحه شما استفاده شود.

فصل چهارم بخش اول

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

فهرست نام‌ها و کدهای رسمی رنگ HTML را بررسی کنید. کنسرسیوم وب جهانی (W3C) فهرستی رسمی از رنگ‌ها را مدیریت می‌کند که در https://www.w3.org/wiki/CSS/Properties/color/keywords خواهید یافت . هر رنگ دارای یک نام رسمی، کد 6 رقمی هگزادسیمال و یک مقدار اعشاری است. می توانید از هر یک از این مقادیر برای افزودن رنگ به عناصر صفحه وب خود استفاده کنید. برای این مثال، از نام رنگ های رسمی استفاده می کنیم.

فصل چهارم بخش دوم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

رنگ پس زمینه را در تگ <body> تنظیم کنید . این کار را با افزودن  ویژگیی به تگ style انجام خواهید داد.

فصل چهارم بخش سوم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم
رنگ متن را برای هر برچسبی تنظیم کنید. همچنین می‌توانید از این style ویژگی برای تعیین رنگی که می‌خواهید تمام متن در یک برچسب خاص باشد استفاده کنید.
 

فصل چهارم بخش چهارم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم
رنگ پس زمینه را برای سرصفحه یا پاراگراف تنظیم کنید.
 مشابه نحوه تنظیم رنگ پس زمینه برای تگ بدنه، می توانید رنگ پس زمینه را برای سایر تگ ها نیز تنظیم کنید.

فصل پنجم بخش اول

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم
کد  <body/> را تایپ کنید تا بدنه خود را ببندید. پس از اینکه تمام متن، تصاویر و سایر عناصر خود را به بدنه سند HTML اضافه کردید، این تگ را در پایین سند HTML خود اضافه کنید تا بدنه سند HTML  را ببندید.

فصل پنجم بخش دوم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم
برای بستن سند HTML خود <html/> تایپ کنید. این تگ زیر تگ HTML می رود تا بدنه HTML شما در انتهای سند  شما  را ببندد. این به مرورگر وب می گوید که دیگر هیچ کد HTML بعد از این تگ وجود ندارد.

فصل ششم بخش اول

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم
سند خود را به متن ساده (فقط کاربران مک) تبدیل کنید. روی آیتم منوی Format در بالای صفحه کلیک کنید، سپس روی Make Plain Text در منوی کشویی ایجاد شده کلیک کنید .
  • این مرحله در ویندوز نه ضروری است و نه امکان پذیر است.

فصل ششم بخش دوم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

روی File کلیک کنید . در نوار منو بالای صفحه قرار دارد.

فصل ششم بخش سوم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

روی ذخیره  کلیک کنید . در منوی کشویی زیر “پرونده” قرار دارد.

  • یا می توانید برای انجام این کار ، ctrl+s (ویندوز) 
  • command+s (مک) را فشار دهید.

فصل ششم بخش چهارم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

یک نام برای سند HTML خود وارد کنید. هر چیزی را که می‌خواهید نام سندتان را در کادر متنی «نام فایل» (ویندوز) یا «نام» (مک) تایپ کنید.

فصل ششم بخش پنجم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

نوع فایل سند را تغییر دهید. شما باید سند را از یک فایل متنی به یک فایل HTML تغییر دهید. برای تغییر نوع فایل از مراحل زیر استفاده کنید:

  • Windows – روی کادر کشویی «Save as type» کلیک کنید، روی All Files کلیک کنید و سپس html. نام فایل را در انتهای آن تایپ کنید.
  • MacOS – .txtدر انتهای نام فایل به html. جای آن قرار دهید.
  • ChromeOS – روی دکمه “ذخیره به عنوان” کلیک کنید. نام فایل را html. در انتها بنویسید. شروع به عهده شماست.

فصل ششم بخش ششم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

روی ذخیره کلیک کنید . در پایین پنجره است. با انجام این کار یک فایل HTML ایجاد می شود.

فایل های HTML معمولاً با مرورگر وب پیش فرض شما باز می شوند..

فصل ششم بخش هفتم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

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

فصل ششم بخش هشتم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم
سند HTML را با مرورگر خود باز کنید. در بیشتر موارد، برای انجام این کار، می‌توانید روی سند HTML دوبار کلیک کنید. اگر با دوبار کلیک کردن روی سند با خطا مواجه شد، موارد زیر را انجام دهید:
  • Windows – روی سند کلیک راست کنید، Open with را انتخاب کنید و روی مرورگر دلخواه خود کلیک کنید.
  • Mac – یک بار روی سند کلیک کنید، روی File کلیک کنید ، Open With را انتخاب کنید و روی مرورگر دلخواه خود کلیک کنید.

فصل ششم بخش نهم

چگونه یک صفحه وب ساده را با HTML ایجاد کنیم

در صورت نیاز سند HTML را ویرایش کنید. ممکن است متوجه خطایی در صفحه HTML خود شوید. برای تغییر آن، می توانید متن سند HTML را ویرایش کنید:

  • در ویندوز، می‌توانید روی سند کلیک راست کرده و در منوی کشویی ایجاد شده روی Edit کلیک کنید (اگر Notepad++ را نصب کرده‌اید، به جای آن از Edit with Notepad++ استفاده کنید ).
  • در مک، باید روی سند کلیک کنید تا آن را انتخاب کنید، روی File کلیک کنید ، Open With را انتخاب کنید و روی TextEdit کلیک کنید . همچنین می توانید سند را به TextEdit بکشید.
  • در Chromebook، برنامه Text را ببندید، Files را باز کنید، فایل خود را پیدا کنید و سپس روی آن کلیک کنید.
دسته بندی آموزش html مقاله ها
اشتراک گذاری
مقالات مرتبط

دیدگاهتان را بنویسید

سبد خرید

هیچ محصولی در سبد خرید نیست.