akofaraji.ir

در این بخش قصد داریم با هم آموزش HTML5 ، که برگرفته از سایت خوب روکسو است را با هم پیش ببریم



Generic plahtmlolder image
ئاکو فرجی
28 فروردین 1403

آشنایی با زبان HTML

شاید برایتان سوال پیش بیاید که معنی این نام چیست؟ چرا نشانه‌گذاری؟ باید بدانید که HTML یک زبان برنامه نویسی نیست، بلکه یک زبان نشانه گذاری است و طبق برخی گفته ها دلیل استفاده از کلمه ی نشانه‌گذاری این است که این زبان اعضا و عناصر صفحات وب را با نشانه گذاری به مرورگر می شناساند. به طور مثال از تگ <p> به عنوان یک نشانه استفاده می کند تا به مرورگر بگوید فلان متن یک پاراگراف است. در ضمن باید بدانید که تگ های HTML در مرورگر به نمایش در نمی آیند بلکه روی نحوه ی نمایش محتوا و درک ربات ها از متن و … اثر می گذارند. مثالی از یک سند HTML بیایید نگاهی به یک سند ساده ی HTML بیندازیم:   1 2 3 4 5 6 7 8 9 10 11 12 <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body>   <h1>My First Heading</h1> <p>My first paragraph.</p>   </body> </html> نمایش کد بالا در ادیتور آنلاین JSbin به عناصر کد بالا دقت کنید: <DOCTYPE html!> به مرورگر ها/ ربات ها و … اعلام می کند که این سند، از نوع HTML5 است. در طول سال های اخیر نسخه های مختلفی از HTML معرفی شده اند که آخرین نسخه ی آن&n...

ادامه مطلب
Generic plahtmlolder image
ئاکو فرجی
28 فروردین 1403

عناصر پایه ای HTML

محیط کدنویسی HTML برای یادگیری HTML و کدنویسی آن می توانید از ادیتور های پیشرفته مانند PHPStorm یا Visual Studio Code استفاده کنید اما در ابتدای کار بهتر است از ادیتور های متنی ساده مانند notepad خودِ ویندوز استفاده کنید. دلیل این مسئله آن است که ادیتورهای پیشرفته به شما در کدنویسی کمک می کنند و شما مطلب را از خودتان نمی نویسید و فراموشش می کنید. برای کد نویسی به شکل ساده در notepad ابتدا باید آن را باز کنید و سپس به صورت ساده عناصر زیر را در آن بنویسید:   1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html> <html> <body>   <h1>My First Heading</h1>   <p>My first paragraph.</p>   </body> </html> این عناصر تنها یک نمونه هستند تا با کدنویسی در notepad آشنا شویم، بعدا می توانید آن را تغییر دهید. کد هایتان در notepad به این شکل خواهند بود: کدنویسی ساده HTML در notepad   حالا برای ذخیره سازی این فایل به شکل یک سند HTML باید به این شکل عمل کنید: ابتدا از سمت بالا و چپ پنجره، گزینه ی File را انتخاب کنید. سپس گزینه ی Save as را انتخاب کنید. در پنجره ای که برایتان باز می شود نام فایل را index.html یا index.htm بگذارید (...

ادامه مطلب
Generic plahtmlolder image
ئاکو فرجی
28 فروردین 1403

ساختار و سبک نوشتاری عناصر در HTML

ساختار عناصر HTML هر عنصر HTML یک تگ آغاز و یک تگ پایان دارد و محتوا در بین این تگ ها قرار می گیرد. شیوه تعریف عناصر HTML به صورت زیر می باشد: <tagname> محتوا در این قسمت قرار می‌گیرد </tagname> بنابراین هر عنصر HTML برابر است با تگ آغازین + محتوا + تگ پایانی. مثال: <p>My first paragraph.</p> نکته: عناصر HTML ای که دارای محتوا نباشند «عناصر خالی» یا empty element نام دارند و دارای تگ پایانی نیز نیستند. یکی از مثال های بارز این تگ ها، تگ <br> است که معادل اینتر زدن و به خط بعد رفتن در هنگام نوشتن است. «به خط جدید رفتن» اصطلاح خاص خودش را دارد؛ line break. به مثال زیر توجه کنید:   1 2 3 4 5 6 7 8 <!DOCTYPE html> <html> <body>   <p>This is a <br> paragraph with a line break.</p>   </body> </html> برای مشاهده ی خروجی این کد در مرورگتان روی این لینک کلیک کنید. در HTML5 نیازی به بستن عناصر خالی ندارید اما اگر دوست دارید کدهایتان را در نهایت استاندارد بنویسید و همچنین کد هایتان توسط تجزیه کنندگان XML قابل خواندن باشد می توانید آن ها را به این شکل ببیندید: <br /&...

ادامه مطلب
Generic plahtmlolder image
ئاکو فرجی
28 فروردین 1403

Attribute ها در زبان HTML

Attribute ها چه کار می کنند؟ همانطور که می دانید هر عنصر HTML می تواند Attribute هایی (به معنی «ویژگی») داشته باشد. کار این Attribute ها ارائه ی اطلاعات بیشتر به این عناصر است و همیشه در تگ آغازین حاضر می شوند. در اکثر مواقع این Attribute ها دارای جفت های “name=”value هستند که در ادامه با مهم ترین آن ها آشنا می شویم. ویژگی href لینک ها در زبان HTML با تگ <a> تعریف می شوند و برای آدرس دهی این لینک ها از Attribute ای به نام href استفاده می شود. مثال:   1 2 3 4 5 6 7 8 9 10 11 <!DOCTYPE html> <html> <body>   <h2>The href Attribute</h2> <p>HTML links are defined with the a tag. The link address is specified in the href attribute:</p>   <a href="https://roxo.ir/plus">This is a link</a>   </body> </html>   همانطور که می بینید آدرس لینک را توسط href به تگ <a> داده ایم. در مورد لینک ها و تگ <a> بعدا به شکل مفصل صحبت خواهیم کرد. ویژگی src تصاویر در زبان HTML با تگ <img> تعریف می شوند اما این تگ تنها تعریف کننده ...

ادامه مطلب
Generic plahtmlolder image
ئاکو فرجی
28 فروردین 1403

عناوین و تیترها در زبان HTML

Heading چیست؟ Heading ها در واقع تیترهایی هستند برای قسمت های مختلف یک صفحه و از <h1> شروع شده و تا <h6> ادامه پیدا می کنند. به صورتی که <h1> مهم ترین عنوان یا تیتر و <h6> کم اهمیت ترین عنوان را مشخص می کند. به مثال زیر توجه کنید:   1 2 3 4 5 6 7 8 9 10 11 12 13 <!DOCTYPE html> <html> <body>   <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6>   </body> </html> مشاهده ی خروجی در JSBin همانطور که در خروجی مشاهده کردید، این تگ ها در ظاهر نیز با هم متفاوت هستند و هر چه اهمیتشان بیشتر باشد، بزرگتر می شوند اما اهمیت اصلی آن ها در ظاهرشان نیست چرا که ظاهر را می توان با CSS نیز تغییر داد. اهمیت اصلی در مسئله ی سئو است؛ موتورهای جست و جو از heading ها استفاده می کنند تا ساختار یک صفحه ی وب را ایندکس کنند. بنابراین نباید از ساختار صفحات وب خود غافل شوید. برای ساختاربندی صحیح توجه کنید که <h1> همیشه باید عنوان اصلی تمامِ صفحه باشد بنابراین نباید در هر ص...

ادامه مطلب
Generic plahtmlolder image
ئاکو فرجی
28 فروردین 1403

پاراگراف ها در زبان HTML

  با سلام و عرض ادب خدمت شما خوانندگان گرامی، امروز در رابطه با تگ <p> و مشکلات مربوط به آن مانند white space و یا line break ها صحبت خواهیم کرد.     المان یا تگ <p>   عنصر <p> در زبان HTML یک پاراگراف را تعریف می کند:     1 2 3 4 5 6 7 8 9 10 <!DOCTYPE html> <html> <body>   <p>این یک پاراگراف است</p> <p>این یک پاراگراف است</p> <p>این یک پاراگراف است</p>   </body> </html>   مشاهده ی خروجی در JSBin   اگر به لینک بالا رفته و خروجی را مشاهده کنید، متوجه می شوید که مرورگرها به طور پیش فرض قبل و بعد از هر پاراگراف، کمی فضای خالی (white space) اضافه می کنند تا پاراگراف ها به عناصر پیرامون خود نچسبند.   مسئله ی جالبی که در زبان HTML به آن برمیخوریم مسئله ی حذف شدن فضاهای خالی است. اگر شما به پاراگراف های خود فضای خالی اضافه کنید (به طور مثال استفاده از اینتر و رفتن به خط بعد و یا استفاده از چندین اسپیس) مرورگر تمام این فضاها را حذف می کند و نمایش نخواهد داد!   به مثال زیر توجه کنید   1 2 3 4 5 6 7 8 9 10 11 12 13 ...

ادامه مطلب
Generic plahtmlolder image
ئاکو فرجی
28 فروردین 1403

ویژگی Style در زبان HTML

  با سلام و عرض ادب خدمت شما همراهان همیشگی روکسو، در این قسمت از سری آموزشی صفر تا صد HTML میخواهیم در رابطه با ویژگی style صحبت کنیم. این ویژگی که در اصل مربوط به CSS است در نحوه ی نمایش محتوای HTML تاثیر دارد.     ویژگی Style کلمه ی style در لغت به معنی «سبک» یا «طرح» یا همان «استایل» ای است که در فارسی نیز می گوییم. در واقع کار این تگ اعمال دستورات زبان CSS در کد های HTML است. ساختار کلی style به این شکل است:   1 <tagname style="property:value;">   در این ساختار، property یک خصوصیت CSS (مانند سایز فونت و …) است و value نیز مقداری که آن خصوصیت می گیرد (مانند 25px و …). در مورد این تگ در دوره ی آموزشی CSS به طور مفصل صحبت خواهیم کرد.   بهترین راه برای یادگیری این ویژگی استفاده از مثال های مختلف است بنابراین چندین مثال از آن را برایتان آماده کرده ایم.   رنگ پس زمینه در HTML   خصوصیت background-color، یک رنگ پس زمینه را برای سند HTML ما و یا یکی از عناصر آن تعیین می کند. در مثال زیر رنگ پس زمینه ی سند HTML را به رنگ powderblue تنظیم کرده ایم. اگر نمی دانید این رنگ چیس...

ادامه مطلب
Generic plahtmlolder image
ئاکو فرجی
28 فروردین 1403

فرمت بندی متون در HTML

  با سلام و عرض ادب خدمت همراهان همیشگی روکسو، در این جلسه از سری آموزشی صفر تا صد HTML می خواهیم در رابطه با قالب بندی و فرمت متون در زبان HTML صحبت کنیم.     قالب متنی در جلسه ی قبل در مورد attribute ای به نام style صحبت کردیم و با هم دیدیم که می توان با آن شکل ظاهری عناصر را در HTML تغییر داد اما وقتی صحبت از متون عادی می شود، HTML موارد خاصی را برای تغییر چهره شان دارد!   <b> متون را bold (پررنگ) می کند. <strong> نشان دهنده ی یک متن مهم است. <i> متون را italic (مورب) می کند. <em> بر متن تاکید می کند. <mark> متن را علامت گذاری می کند. <small> متن را کوچک می کند. <del> نشان دهنده ی متن حذف شده است. <ins> نشان دهنده ی متن اضافه شده است. <sub> نشان دهنده ی متن زیروند است. <sup> نشان دهنده ی متن بالاوند است.   سوال: برخی از این تگ ها متن را به یک شکل نمایش می دهند. چرا برای یک شکل چند تگ مختلف داریم؟ پاسخ: استفاده ی صحیح از این تگ ها بسیار مهم است! اگر بنا بر تغییر ظاهر متن بود، می توانستیم از همان style و زبان CSS استفاده کنیم اما اینجا بحث بر سر برنامه نویسی semantic (...

ادامه مطلب
Generic plahtmlolder image
ئاکو فرجی
28 فروردین 1403

نقل قول و استناد در زبان HTML

  با سلام و عرض ادب خدمت شما همراهان گرامی روکسو، در این قسمت قصد داریم در رابطه با مبحث نقل قول و استناد در زبان HTML صحبت کنیم.     نقل قول و استناد   به مثال زیر توجه کنید:   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <!DOCTYPE html> <html> <body>   <p>Here is a quote from WWF's website:</p> <blockquote cite="http://www.worldwildlife.org/who/index.html"> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>   </body> </html>   مشاهده ی خروجی در JSBin   گروه WWF یکی از گروه های فعال محیط زیستی است که با کمک مردم دنیا سعی در حفظ طبیعت این کره ی خاکی را دارد و متن بالا قسمتی از توضیح وب سایت خودشان در این مورد است. از آن جایی که ما عیناً نوشته ی وب سایت آن ها را برداشته و کپی کرده ایم باید آن را به صورت نقل قول بیاوریم تا مشخص شود که متعلق به ما نیست. اگر به خروجی این کد دقت کنید متوجه می شوید که قسمت نقل قول شده کمی جلوت...

ادامه مطلب
Generic plahtmlolder image
ئاکو فرجی
28 فروردین 1403

تعریف لینک ها در HTML

  با سلام و عرض ادب خدمت خوانندگان گرامی روکسو، حتما هر روز که در دنیای وب گشت و گذار می کنید، با لینک های متعددی روبرو می شوید. بعضی از این لینک ها برای نمایان کردن قسمتی از صفحه هستند، برخی دیگر برای هدایت شما به صفحه ای دیگر و غیره. همه ی ما قبول داریم که لینک ها جزء مهم و جدانشدنی دنیای وب هستند بنابراین باید آنها را بررسی کنیم و بدانیم نحوه ی ایجاد کردنشان چطور است. امروز به مبحث بسیار مهم لینک دادن در html می پردازیم.   لینک دادن در html   در زبان HTML، لینک ها معمولا شما را به صفحات دیگری می فرستند و زمانی که موس خود را روی آن ها ببرید، نشانگر موس تبدیل به «علامت دست» می شود. تصور اشتباهی از لینک ها بین عموم مردم جا افتاده است: لینک ها، متنی هستند! لینک ها می توانند متن، تصویر یا هر عنصر دیگر HTML باشند و تنها محدود به متن نمی شوند. ساختار کلی لینک ها در زبان HTML از این قرار است:   1 <a href="url">link text</a>   همانطور که می بینید برای ایجاد لینک ها از تگی به نام <a> استفاده می شود. مثال زیر را ببینید:     1 2 3 4 5 6 7 8 9 <!DOCTYPE html> <html> <body>   <h2>HTML Links</h2&...

ادامه مطلب