با عرض سلام خدمت دوستان عزیز
در این ویدئو بخش سوم از آموزش HTML از طریق وب سایت w3schools.com را به شما آموزش خواهیم داد.
برای این کار، در ابتدا وارد سایت w3schools.com می شویم و برای ورود به آموزش HTML، روی دکمه LEARN HTML کلیک می کنیم و از منوی سمت چپ HTML Basic را انتخاب می کنیم.
مقدمات HTML
در ابتدا یکسری توضیحات پایه ای درمورد HTML ارائه داده و تگ های HTML را معرفی کرده است.
از این که بعضی از تگ ها را نمی شناسید نگران نباشید؛ در درس های بعدی ما این تگ ها را برای شما توضیح خواهیم داد.
در بخش بعدی توضیحاتی راجع به این که سند HTML چیست و چگونه تعریف می شود، ارئه شده است.
تگ doctype
در ابتدای تمامی اسناد HTML باید تگ DOCTYPE نوشته شود. این تگ درواقع مشخص می کند که ما از چه نسخه ای از HTML استفاده می کنیم و از چه استانداردی پیروی می کنیم.
تگ html
اسناد HTML با تگ آغازین تگ <html> شروع می شوند و با بخش پایانی تگ </html> به پایان می رسند.
تگ body
بخش هایی از اسناد HTML که در مروگر دیده می شوند در تگ <body> نوشته می شوند.
اسناد HTML
<!DOCTYPE html> <html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>
در اینجا یک نمونه از سند HTML را می بینیم. این سند با تگ DOCTYPE شروع شده و بخش اصلی این سند، بین بخش آغازین و پایانی تگ <html> قرار گرفته است و بعد از آن تگ <body> نوشته شده است که بدنه صفحه وب ما را تشکیل می دهد.
روی دکمه Try It Yourself کلیک می کنیم.
همان طور که می بینید این سند اجرا شده و خروجی آن نمایش داده می شود.
عنوان در HTML
اینجا یکسری توضیحات در مورد Heading و درواقع عنوان های HTML داده شده است.
عنوان ها در HTML به ۶ سطح تقسیم می شوند که از h1 شروع شده و به h6 ختم می شوند.
h1 برای بزرگترین و مهمترین و h6 برای کوچکترین و کم اهمیت ترین عناوین استفاده می شود.
مثالی از عناوین و Heading ها:
<!DOCTYPE html> <html> <body> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6> </body> </html>
دکمه Try It Yourself را کلیک کرده و نتیجه را می بینم.
خروجی تگ های h1 تا h6:
نوشتن HTML با استفاده از نوت پد
در اینجا نحوه ایجاد این سند در سیستم خودمان و بدون استفاده از ویرایشگر w3schools را توضیح خواهم داد.
برای این کار طبق آموزش های موجود در جلسات قبل NotePad را از منوی استارت سرچ کرده و آن را باز می کنیم و سند HTML را می نویسیم.
ابتدا تگ DOCTYPE را برای مشخص کردن استاندارد استفاده شده در این سند می نویسیم.
در ادامه سند را با یک تگ <html> شروع می کنیم و درون آن تگ <body> را می نویسیم.
دقت کنید که همه این تگ ها باید با بخش پایانی بسته شوند.
در اینجا می توانیم تگ های heading را بنویسیم و نتیجه را مشاهده کنیم.
سند را از طریق منوی File و سپس گزینه Save در پوشه ای در کامپیوترمان ذخیره می کنیم.
نام سند را با پسوند html وارد می کنیم و از قسمت encoding گزینه UTF-8 را انتخاب می کنیم و سند را ذخیره می کنیم.
حال به پوشه ای که فایل را در آن ذخیره کردیم رفته و روی فایل دوبار کلیک می کنیم.
همان طور که می بینید عنوان های مختلف، نمایش داده می شوند.
پاراگراف در HTML
پاراگراف ها در HTML از طریق تگ <p> ایجاد می شوند.
بهتر است برای ایجاد خوانایی بیشتر، کدها را با استفاده از تورفتگی فرمت دهی کنیم.
با استفاده از دکمه های tab و space روی صفحه کلید می توانیم این تو رفتگی ها را ایجاد کنیم.
بعد از آن یک تگ <p> نوشته متنی را در آن می نویسم.
حال فایل را از طریق نگه داشتن دکمه ctrl و فشردن کلید s ذخیره می کنیم و فایلی را که قبلا باز کرده بودیم از طریق کلیک بر روی دکمه refresh مرورگر یا از طریق دکمه f5 بارگذاری می کنیم.
می بینیم که محتوای تگ p در مرورگر نمایش داده می شود.
لینک در HTML
لینک ها المان هایی هستند که وقتی روی آن ها کلیک می کنیم به بخش دیگری ارجاع داده می شویم.
مثل ابتدای همین آموزش که ما بر روی لینک HTML Basic کلیک کردیم و محتوای آموزش این درس در w3schools برای ما باز شد.
تگ a را به صورت زیر می نویسیم:
<a href="http://webtml.ir"> This is a link </a>
فراموش نکنید که از tab برای فرمت بندی فایل استفاده کنید.
اگر تب اضافی زدید می توانید از طریق دکمه backspace آن را حذف کنید.
در این تگ باید برای href مقداری تعیین کنیم که بین دابل کوتیشن (” “) قرار می گیرد و محتوای آن، آدرسی است که کاربر به آنجا هدایت می شود.
محتوای تگ <a> که به کاربر نمایش داده می شود، مابین بخش های آغازین و پایانی تگ نوشته می شوند که در این مثال محتوا This is a link می باشد.
سند را ذخیره می کنیم و نتیجه را در مرورگر مشاهده می کنیم.
همان طور که می بینید لینکی با رنگ متفاوت که زیر آن خط کشیده شده است، ایجاد شده است.
وقتی روی آن کلیک می کنیم می بینیم که وب سایت webtml.ir باز می شود.
اگر بعضی از مطالب را متوجه نمی شوید، نگران نباشید در درس های بعدی این مطالب را کاملا توضیح خواهیم داد.
ایجاد عکس در HTML
برای این کار از تگ <img> استفاده می کنیم که یکی از استثنائاتی است که بخش پایانی ندارد.
در کامپیوترمان یک عکس را پیدا می کنیم و آن را با استفاده از کلیدهای ترکیبی ctrl+c و ctrl+v در پوشه ای که سند HTML در آن قرار دارد کپی می کنیم.
تگ img
<img src="photo.jpg" alt="webtml.ir" width="104" height="142">
src آدرس عکسی است که می خواهیم نمایش دهیم.
دقت داشته باشید که حتما پسوند عکس را بنویسید، در غیر این صورت نمایش داده نمی شود.
اگر عکس به هر دلیلی نتواند بارگذاری و نمایش داده شود مقدارخصوصیت alt به جای آن نمایش داده می شود.
از طریق ویژگی width عرض و از طریق ویژگی height ارتفاع عکس را مشخص کنیم.
همان طور که گفتیم، تگ img بخش پایانی ندارد و این از استثنائات HTML می باشد.
فایل را ذخیره می کنیم و به مرورگر رفته و صفحه را رفرش می کنیم.
همان طور که مشاهده می کنید، عکس نمایش داده می شود.
تگ button در HTML
برای ایجاد دکمه ها در HTML از تگ <button> استفاده می شود.
<button> Click me </button>
مقداری که قرار است روی دکمه نمایش داده شود را بین تگ آغازین و پایانی می نویسم.
فایل را ذخیره می کنیم و refresh می کنیم.
لیست در HTML
در اچ تی ام ال دو نوع لیست داریم:
- unordered/bullet list (لیست های نامرتب)
- ordered/numbered list (لیست های مرتب)
<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol>
می توانیم کدها را کپی کرده و در فایل خود پیست کنیم.
کدها را از طریق دکمه tab مرتب می کنیم.
فایل را ذخیره می کنیم و با refresh کردن صفحه، نتیجه را مشاهده می کنیم.
همان طور که می بینید، دو نوع لیست در اینجا نمایش داده می شود.
تفاوت لیست های مرتب و غیر مرتب در HTML
- در لیست های نامرتب، اولویت بندی نداریم و با سمبل هایی که برای همه تکراری است، نمایش داده می شوند.
- در لیست های مرتب اولویت بندی وجود دارد و با اعداد و حروف مشخص می شود.
در این درس ما یکسری توضیحات در مورد تگ های اچ تی ام ال و attribut های آن ها ارائه کردیم
ممنون از همراهیتون.
