چکیده :
امروز در پرنیان طرح می آموزیم که چگونه یک صفحه وب ساده با 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).
فصل یک بخش دوم
<doctype html> را تایپ کرده و enter فشار دهید. این به مرورگر وب می گوید که این یک سند HTML است.
فصل یک بخش سوم
کد <html> تایپ کنید و enter فشار دهید . این تگ باز برای کد HTML شماست.
فصل یک بخش چهارم
<head> را تایپ کرده و enter را فشار دهید . این برچسبی است که سربرگ HTML شما را میسازد. اطلاعات سربرگ HTML که معمولاً در صفحه وب شما نمایش داده نمی شود. این اطلاعات می تواند شامل عنوان، داده های متا، شیوه نامه های CSS و سایر زبان های برنامه نویسی باشد.
فصل یک بخش پنجم
<title> تایپ کنید این تگ برای اضافه کردن عنوان به صفحه شما است.
فصل یک بخش ششم
یک عنوان برای صفحه وب خود تایپ کنید. این می تواند هر عنوانی باشد که می خواهید صفحه وب خود را نام گذاری کنید.
بخش هفتم
<title/> را تایپ کرده و enter فشار دهید . این تگ برای بستن تگ عنوان شماست.
فصل یک بخش هشتم
<head/> تایپ کنید و enter فشار دهید. این برچسب برای بستن سربرگ است. کد HTML شما باید چیزی شبیه این باشد.
فصل یک بخش نهم
<head/> تایپ کنید و enter فشار دهید. این برچسب برای بستن سربرگ است. کد HTML شما باید چیزی شبیه این باشد.
<!doctype html>
<html>
<head>
<title> صفحه وب من </title>
</head>
فصل یک بخش دهم
<head/> تایپ کنید و enter فشار دهید. این برچسب برای بستن سربرگ است. کد HTML شما باید چیزی شبیه این باشد.
فصل دوم بخش اول
<body> را تایپ کنید. این تگ بدنه سند HTML شما را باز می کند. هر چیزی که در بدنه HTML وجود دارد در صفحه وب نمایش داده می شود.
فصل دوم بخش دوم
را تایپ کنید این تگ برای اضافه کردن عنوان به سند HTML شما است. عنوان یک متن پررنگ بزرگ است که معمولاً در بالای سند HTML شما قرار می گیرد.
فصل دوم بخش سوم
یک عنوان برای صفحه خود تایپ کنید. این می تواند عنوان صفحه شما یا یک تبریک باشد.
فصل دوم بخش چهارم
بعد از متن عنوان خود را تایپ کرده و enter v,فشار دهید . این تگ
عنوان شما را می بندد.
در حین حرکت سرفصل های اضافی اضافه کنید. شش عنوان مختلف وجود دارد که می توانید با استفاده از h1 تا h6 تگ های through ایجاد کنید. این عناوین در اندازه های مختلف ایجاد می کنند. به عنوان مثال، برای ایجاد سه عنوان با اندازه های مختلف پشت سر هم.
سرفصل ها اولویت یا اهمیت متن را نشان می دهد. اما اگر میخواهید از عنوان پایینتر استفاده کنید، لازم نیست از عنوان بالاتر استفاده کنید. می توانید مستقیماً از H3 استفاده کنید، حتی اگر H1 در پست شما وجود نداشته باشد.
فصل دوم بخش پنجم
تگ <p> را تایپ کنید این تگ برای باز کردن یک پاراگراف است. متن پاراگراف برای نمایش متن در اندازه معمولی استفاده می شود.
فصل دوم بخش ششم
مقداری متن را تایپ کنید این می تواند توضیحی برای صفحه وب شما یا هر اطلاعات دیگری باشد که می خواهید به اشتراک بگذارید.
فصل دوم بخش هفتم
بعد از متن خود تگ <p/> رو تایپ کنید و enter فشار دهید. این تگ برای بستن متن پاراگراف شماست.
فصل سوم بخش اول
یک عکس به صفحه خود اضافه کنید با استفاده از مراحل زیر می توانید یک تصویر به HTML خود اضافه کنید:
برای باز کردن تگ تصویر خود این کد را = img src > تایپ کنید.
نشانی اینترنتی تصویر را بعد از علامت “=” کپی کرده و جایگذاری کنید.
بعد از آدرس تصویر < تایپ کنید تا تگ تصویر خود را ببندید.
فصل سوم بخش دوم
پیوند به صفحه دیگر با استفاده از مراحل زیر می توانید یک لینک به HTML خود اضافه کنید:
= a href > برای باز کردن برچسب پیوند خود تایپ کنید.
URL را کپی و بعد از علامت “=” وارد گیومه کنید.
بعد از URL “<” تایپ کنید تا قسمت پیوند HTML بسته شود.
یک نام برای پیوند بعد از بسته شدن براکت تایپ کنید.
بعد از نام پیوند <a/> تایپ کنید تا پیوند HTML بسته شود.
فصل سوم بخش سوم
یک شکست خط به HTML خود اضافه کنید.
شما می توانید با تایپ کردن <br> در HTML خود، یک شکست خط اضافه کنید. این یک خط افقی ایجاد می کند که می تواند برای تقسیم بخش های مختلف صفحه شما استفاده شود.
فصل چهارم بخش اول
فهرست نامها و کدهای رسمی رنگ HTML را بررسی کنید. کنسرسیوم وب جهانی (W3C) فهرستی رسمی از رنگها را مدیریت میکند که در https://www.w3.org/wiki/CSS/Properties/color/keywords خواهید یافت . هر رنگ دارای یک نام رسمی، کد 6 رقمی هگزادسیمال و یک مقدار اعشاری است. می توانید از هر یک از این مقادیر برای افزودن رنگ به عناصر صفحه وب خود استفاده کنید. برای این مثال، از نام رنگ های رسمی استفاده می کنیم.
فصل چهارم بخش دوم
رنگ پس زمینه را در تگ <body> تنظیم کنید . این کار را با افزودن ویژگیی به تگ style انجام خواهید داد.
فصل چهارم بخش سوم
رنگ متن را برای هر برچسبی تنظیم کنید. همچنین میتوانید از این style ویژگی برای تعیین رنگی که میخواهید تمام متن در یک برچسب خاص باشد استفاده کنید.
فصل چهارم بخش چهارم
رنگ پس زمینه را برای سرصفحه یا پاراگراف تنظیم کنید.
مشابه نحوه تنظیم رنگ پس زمینه برای تگ بدنه، می توانید رنگ پس زمینه را برای سایر تگ ها نیز تنظیم کنید.
فصل پنجم بخش اول
کد <body/> را تایپ کنید تا بدنه خود را ببندید. پس از اینکه تمام متن، تصاویر و سایر عناصر خود را به بدنه سند HTML اضافه کردید، این تگ را در پایین سند HTML خود اضافه کنید تا بدنه سند HTML را ببندید.
فصل پنجم بخش دوم
برای بستن سند HTML خود <html/> تایپ کنید. این تگ زیر تگ HTML می رود تا بدنه HTML شما در انتهای سند شما را ببندد. این به مرورگر وب می گوید که دیگر هیچ کد HTML بعد از این تگ وجود ندارد.
فصل ششم بخش اول
سند خود را به متن ساده (فقط کاربران مک) تبدیل کنید. روی آیتم منوی Format در بالای صفحه کلیک کنید، سپس روی Make Plain Text در منوی کشویی ایجاد شده کلیک کنید .
این مرحله در ویندوز نه ضروری است و نه امکان پذیر است.
فصل ششم بخش دوم
روی File کلیک کنید . در نوار منو بالای صفحه قرار دارد.
فصل ششم بخش سوم
روی ذخیره کلیک کنید . در منوی کشویی زیر “پرونده” قرار دارد.
یا می توانید برای انجام این کار ، ctrl+s (ویندوز)
command+s (مک) را فشار دهید.
فصل ششم بخش چهارم
یک نام برای سند HTML خود وارد کنید. هر چیزی را که میخواهید نام سندتان را در کادر متنی «نام فایل» (ویندوز) یا «نام» (مک) تایپ کنید.
فصل ششم بخش پنجم
نوع فایل سند را تغییر دهید. شما باید سند را از یک فایل متنی به یک فایل HTML تغییر دهید. برای تغییر نوع فایل از مراحل زیر استفاده کنید:
Windows – روی کادر کشویی «Save as type» کلیک کنید، روی All Files کلیک کنید و سپس html. نام فایل را در انتهای آن تایپ کنید.
MacOS – .txtدر انتهای نام فایل به html. جای آن قرار دهید.
ChromeOS – روی دکمه “ذخیره به عنوان” کلیک کنید. نام فایل را html. در انتها بنویسید. شروع به عهده شماست.
فصل ششم بخش ششم
روی ذخیره کلیک کنید . در پایین پنجره است. با انجام این کار یک فایل HTML ایجاد می شود.
فایل های HTML معمولاً با مرورگر وب پیش فرض شما باز می شوند..
فصل ششم بخش هفتم
ویرایشگر متن خود را ببندید در این مرحله، شما آماده هستید تا فایل HTML خود را در مرورگر خود باز کنید تا بتوانید صفحه وب خود را مشاهده کنید.
فصل ششم بخش هشتم
سند HTML را با مرورگر خود باز کنید. در بیشتر موارد، برای انجام این کار، میتوانید روی سند HTML دوبار کلیک کنید. اگر با دوبار کلیک کردن روی سند با خطا مواجه شد، موارد زیر را انجام دهید:
Windows – روی سند کلیک راست کنید، Open with را انتخاب کنید و روی مرورگر دلخواه خود کلیک کنید.
Mac – یک بار روی سند کلیک کنید، روی File کلیک کنید ، Open With را انتخاب کنید و روی مرورگر دلخواه خود کلیک کنید.
فصل ششم بخش نهم
در صورت نیاز سند HTML را ویرایش کنید. ممکن است متوجه خطایی در صفحه HTML خود شوید. برای تغییر آن، می توانید متن سند HTML را ویرایش کنید:
در ویندوز، میتوانید روی سند کلیک راست کرده و در منوی کشویی ایجاد شده روی Edit کلیک کنید (اگر Notepad++ را نصب کردهاید، به جای آن از Edit with Notepad++ استفاده کنید ).
در مک، باید روی سند کلیک کنید تا آن را انتخاب کنید، روی File کلیک کنید ، Open With را انتخاب کنید و روی TextEdit کلیک کنید . همچنین می توانید سند را به TextEdit بکشید.
در Chromebook، برنامه Text را ببندید، Files را باز کنید، فایل خود را پیدا کنید و سپس روی آن کلیک کنید.