به نام خدا
جلسه اول 1⃣
مبحث Html
معرفی زبان نشانه گذاری Html :
عبارت Html سرواژه های
Hyper Text Markup Language
و یک زبان نشانه گذاری برای توصیف اسناد وب ( صفحات وب ) است.
اولین توسعه دهنده این زبان ،
Berners-Lee
در سال 1990 بود.
زبان html برای ساخت صفحات وب سایت کاربرد دارد که توسط hyperlink به هم متصل میشوند. صفحات هر وب سایتی را که در اینترنت مشاهده میکنید با ورژنی از کدهای اچ تی ام ال نوشته شده‌اند.
در این سری قصد داریم به صورت قدم به قدم HTML رو به شما آموزش بدیم.
با html شما میتونید صفحات وب رو بسازید. زبان html خیلی آسون و قابل درک هست و شما از این زبان لذت میبرید.
پایان جلسه اول.
📢 کانال آموزش HTML & CSS
🆔 @Html_CSS100
جلسه اول 1⃣
مبحث Html
معرفی زبان نشانه گذاری Html :
عبارت Html سرواژه های
Hyper Text Markup Language
و یک زبان نشانه گذاری برای توصیف اسناد وب ( صفحات وب ) است.
اولین توسعه دهنده این زبان ،
Berners-Lee
در سال 1990 بود.
زبان html برای ساخت صفحات وب سایت کاربرد دارد که توسط hyperlink به هم متصل میشوند. صفحات هر وب سایتی را که در اینترنت مشاهده میکنید با ورژنی از کدهای اچ تی ام ال نوشته شده‌اند.
در این سری قصد داریم به صورت قدم به قدم HTML رو به شما آموزش بدیم.
با html شما میتونید صفحات وب رو بسازید. زبان html خیلی آسون و قابل درک هست و شما از این زبان لذت میبرید.
پایان جلسه اول.
📢 کانال آموزش HTML & CSS
🆔 @Html_CSS100
👍15❤2🤩1
به نام خدا
جلسه دوم
آشنایی با CSS:
قبل اینکه بخواهیم Css رو تعریف کنیم ،
باید راجع به صفحات وب توضیح بدهیم ،
یه صفحه وب شامل متن ، صوت ، تصویر و … هست.
برای اینکه اجزای وب کنارهم قرار بگیرند از html استفاده می کنیم،
با استفاده از عناصر و تگ های HTML می تونیم متون ، تصاویر ، ویدئوها ، صوت ها و … رو کنار هم قرار بدیم و برای کاربرای سایت نمایش بدهیم.
از وقتی که سبک کدنویسی تغییر و پیشرفت کرد،
کاربرد Css در طراحی وب یک امر عادی بشمار اومد.
با استفاده از Div ها و Css می توانید
به راحتی و بسیار سبک قالب وبلاگ شخصی خود را لایه بندی و طرح بندی کنید و اجزای صفحه ی وب رو بصورت کاملا زیبا استایل بندی کنید. حالا میریم سر اصل مطلب یعنی Css اصلا چی هست؟!
تعریف و مفهوم CSS
Css مخفف
Cascading Style Sheets
است که در معنای لغوی به روشی گفته می شود که برای قالب بندی و طراحی اجزای صفحه وبسایت کارایی دارد.
شما می توانید بدون استفاده از کدهای HTML از طریق این استایل شیت ها (Style Sheet) می توانیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کدنویسی و همچنین کند شدن سرعت بارگزاری صفحه در اینترنت می شود جلوگیری کنیم.
برای مثال می توانیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کار ببریم.
همچنین می توانیم از این ابزار قدرتمند در مواردی به جای جاوا اسکریپت نیز استفاده کنیم و همانند مشکلات جاوا اسکریپت که در بعضی اوقات مثل غیر فعال بودن جاوا اسکریپت در مرورگر همراه نیست و با خیالی آسوده تر می توانیم از آن استفاده کنیم.
در نسخه های مختلفی به بازار وب عرضه شد که در جلسه ی بعدی کاملا درباره نسخه های css صحبت می کنیم.
فایل استایلها با فرمت css. ذخیره میشوند. سی اس اس از یک سری کد تشکیل شده که با استفاده از این کدها می تونید به راحتی به عناصر و کدهای HTML شمایل بدهید.
📢 کانال آموزش Html & Css
🆔 @Html_Css100
جلسه دوم
آشنایی با CSS:
قبل اینکه بخواهیم Css رو تعریف کنیم ،
باید راجع به صفحات وب توضیح بدهیم ،
یه صفحه وب شامل متن ، صوت ، تصویر و … هست.
برای اینکه اجزای وب کنارهم قرار بگیرند از html استفاده می کنیم،
با استفاده از عناصر و تگ های HTML می تونیم متون ، تصاویر ، ویدئوها ، صوت ها و … رو کنار هم قرار بدیم و برای کاربرای سایت نمایش بدهیم.
از وقتی که سبک کدنویسی تغییر و پیشرفت کرد،
کاربرد Css در طراحی وب یک امر عادی بشمار اومد.
با استفاده از Div ها و Css می توانید
به راحتی و بسیار سبک قالب وبلاگ شخصی خود را لایه بندی و طرح بندی کنید و اجزای صفحه ی وب رو بصورت کاملا زیبا استایل بندی کنید. حالا میریم سر اصل مطلب یعنی Css اصلا چی هست؟!
تعریف و مفهوم CSS
Css مخفف
Cascading Style Sheets
است که در معنای لغوی به روشی گفته می شود که برای قالب بندی و طراحی اجزای صفحه وبسایت کارایی دارد.
شما می توانید بدون استفاده از کدهای HTML از طریق این استایل شیت ها (Style Sheet) می توانیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کدنویسی و همچنین کند شدن سرعت بارگزاری صفحه در اینترنت می شود جلوگیری کنیم.
برای مثال می توانیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کار ببریم.
همچنین می توانیم از این ابزار قدرتمند در مواردی به جای جاوا اسکریپت نیز استفاده کنیم و همانند مشکلات جاوا اسکریپت که در بعضی اوقات مثل غیر فعال بودن جاوا اسکریپت در مرورگر همراه نیست و با خیالی آسوده تر می توانیم از آن استفاده کنیم.
در نسخه های مختلفی به بازار وب عرضه شد که در جلسه ی بعدی کاملا درباره نسخه های css صحبت می کنیم.
فایل استایلها با فرمت css. ذخیره میشوند. سی اس اس از یک سری کد تشکیل شده که با استفاده از این کدها می تونید به راحتی به عناصر و کدهای HTML شمایل بدهید.
📢 کانال آموزش Html & Css
🆔 @Html_Css100
👍4❤3🔥1🤩1
به نام خدا
جلسه سوم(معرفی IDE )
مبحث آموزش HTML :
ویرایشگر ( IDE ) هایی برای نوشتن دستورات:
۱- Notepad
۲- Notepad++
۳- Adobe Dreamweaver
یک سند HTML ساده را در زیر مشاهده می کنید:
<!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>
<h1>اولین تیتر من</h1>
<p>اولین پاراگراف من</p>
</body>
</html>
فایل را با پسوند HTML. ذخیره کنید و نتیجه را مشاهده کنید.
بیانیه DOCTYPE html این سند را به عنوان یک سند HTML5 تعریف می کند. متن ما بین دو تگ html یک سند html را توصیف می کند. متن ما بین دو تگ head اطلاعاتی درباره سند ارائه می کند. متن ما بین دو تگ title عنوان صفحه را ارائه می کند. متن ما بین دو تگ body محتوای صفحه قابل مشاهده را توصیف می کند. متن ما بین دو تگ h1 تیتر محتوا را توصیف می کند. متن ما بین دو تگ p یک پاراگراف را توصیف می کند.
📢 کانال آموزش HTML & CSS
⌨@Html_Css
جلسه سوم(معرفی IDE )
مبحث آموزش HTML :
ویرایشگر ( IDE ) هایی برای نوشتن دستورات:
۱- Notepad
۲- Notepad++
۳- Adobe Dreamweaver
یک سند HTML ساده را در زیر مشاهده می کنید:
<!DOCTYPE html>
<html>
<head>
<title>عنوان صفحه</title>
</head>
<body>
<h1>اولین تیتر من</h1>
<p>اولین پاراگراف من</p>
</body>
</html>
فایل را با پسوند HTML. ذخیره کنید و نتیجه را مشاهده کنید.
بیانیه DOCTYPE html این سند را به عنوان یک سند HTML5 تعریف می کند. متن ما بین دو تگ html یک سند html را توصیف می کند. متن ما بین دو تگ head اطلاعاتی درباره سند ارائه می کند. متن ما بین دو تگ title عنوان صفحه را ارائه می کند. متن ما بین دو تگ body محتوای صفحه قابل مشاهده را توصیف می کند. متن ما بین دو تگ h1 تیتر محتوا را توصیف می کند. متن ما بین دو تگ p یک پاراگراف را توصیف می کند.
📢 کانال آموزش HTML & CSS
⌨@Html_Css
👍9❤3
لینک دانلود نرم افزار ویرایشگر ++Notepad :
لینک دانلود نسخه ۳۲ بیتی
https://yangx.top/pc_soft100/374
لینک دانلود نسخه ۶۴ بیتی
https://yangx.top/pc_soft100/375
📢 کانال آموزش HTML & CSS
⌨ @Html_Css100
لینک دانلود نسخه ۳۲ بیتی
https://yangx.top/pc_soft100/374
لینک دانلود نسخه ۶۴ بیتی
https://yangx.top/pc_soft100/375
📢 کانال آموزش HTML & CSS
⌨ @Html_Css100
❤3
لینک دانلود نرم افزار ویرایشگر
Adobe Dreamweaver 2019
لینک دانلود نسخه ۳۲ بیتی
https://yangx.top/pc_soft100/383
لینک دانلود نسخه ۶۴ بیتی
https://yangx.top/pc_soft100/384
📢 کانال آموزش HTML & CSS
⌨@Html_Css100
Adobe Dreamweaver 2019
لینک دانلود نسخه ۳۲ بیتی
https://yangx.top/pc_soft100/383
لینک دانلود نسخه ۶۴ بیتی
https://yangx.top/pc_soft100/384
📢 کانال آموزش HTML & CSS
⌨@Html_Css100
❤4
#Html
✅ به نام خدا
⭕️جلسه چهارم(معرفی نهایی Html)
💠در این جلسه شما رو با html به طور کامل آشنا میکنیم.
⭕️زبان Html شامل مجموعه ای از المنت ها است.
⭕️المنت های html به مروگر میگویند که که چطور محتوای وب سایت نمایش داده شود.
⭕️المنت های Html توسط تگ ها ساخته میشوند
⭕️مرورگر تگ ها را نمایش نمیدهد بلکه از آن ها برای ساخت وب سایت استفاده میکند.
💠آموزش تگ های Html
📌تگ های Html کلید واژه هایی هستند که داخل علامت کوچکتر بزرگتر هستند. مانند <html>
📌تگ های html معمولا به صورت جفت می آیند. مانند <html> <html/>
📌 زبان Html از تگ های برای توصیف و ساخت صفحات وب استفاده می کند.
📌تگ اول همان تگ شروع می باشد و تگ دوم پایان تگ میباشد.
📌تگ های شروع و پایان تگ باز و بسته نیز نامیده می شود.
📌تگ اخر یا بسته باید حتما علامت (اسلش) / داشته باشد. مانند<html/>
💢هدف یک مرورگر وب مانند (Internet Explorer,Google Chrome) این است که سند های (فایل) html را خوانده و آن هارا به صورت صفحات وب نمایش دهد.مرورگر تگ های html را نمایش نمیدهد اما از تگ های html استفاده میکند تا محتوای صفحه را تفسیر و تعریف کند.
🅰️مثال:
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
♨️توضیح مثال:
🔵متن بین تگ <html> <html/> صفحه وب را توضیح میدهد.
🔴متن بین تگ <body> <body/> محتوای قابل نمایش صفحه است.
🟡 متن بین <h1> <h1/> برای نمایش یک عنوان استفاده می شود
🟤 متن بین <p> <p/> برای نمایش یک پاراگراف استفاده می شود.
⌨ @Html_Css100
✅ به نام خدا
⭕️جلسه چهارم(معرفی نهایی Html)
💠در این جلسه شما رو با html به طور کامل آشنا میکنیم.
⭕️زبان Html شامل مجموعه ای از المنت ها است.
⭕️المنت های html به مروگر میگویند که که چطور محتوای وب سایت نمایش داده شود.
⭕️المنت های Html توسط تگ ها ساخته میشوند
⭕️مرورگر تگ ها را نمایش نمیدهد بلکه از آن ها برای ساخت وب سایت استفاده میکند.
💠آموزش تگ های Html
📌تگ های Html کلید واژه هایی هستند که داخل علامت کوچکتر بزرگتر هستند. مانند <html>
📌تگ های html معمولا به صورت جفت می آیند. مانند <html> <html/>
📌 زبان Html از تگ های برای توصیف و ساخت صفحات وب استفاده می کند.
📌تگ اول همان تگ شروع می باشد و تگ دوم پایان تگ میباشد.
📌تگ های شروع و پایان تگ باز و بسته نیز نامیده می شود.
📌تگ اخر یا بسته باید حتما علامت (اسلش) / داشته باشد. مانند<html/>
💢هدف یک مرورگر وب مانند (Internet Explorer,Google Chrome) این است که سند های (فایل) html را خوانده و آن هارا به صورت صفحات وب نمایش دهد.مرورگر تگ های html را نمایش نمیدهد اما از تگ های html استفاده میکند تا محتوای صفحه را تفسیر و تعریف کند.
🅰️مثال:
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
♨️توضیح مثال:
🔵متن بین تگ <html> <html/> صفحه وب را توضیح میدهد.
🔴متن بین تگ <body> <body/> محتوای قابل نمایش صفحه است.
🟡 متن بین <h1> <h1/> برای نمایش یک عنوان استفاده می شود
🟤 متن بین <p> <p/> برای نمایش یک پاراگراف استفاده می شود.
⌨ @Html_Css100
🤩5❤3👍3
#Html
✅ به نام خدا
⭕جلسه پنجم (نکات پایه در Html)
💠در این جلسه به شما چند مثال مهم و پایه Html را به شما آموزش میدهیم.
❇ اگر از چند تگ استفاده کردیم و شما متوجه نشدید نگران نباشید.در آینده آن ها را به شما یاد میدهیم.
💢سند های Html
⭕ تمامی سند های Html باید با اعلام کردن نوع سند شروع شوند.
<!DOCTYPE html>
💠 خود سند Html با تگ <html> شروع و با تگ <html/> پایان میابد.
❇قسمتی که قابل رویت میباشد و در مرورگر آن را مشاهده میکنید بین دو تگ <body> </body> قرار میگیرند.
💢 اعلان کردن <!DOCTYPE>
⭕ اعلان کردن <!DOCTYPE> نمایانگر نوع سند است و به مرورگر ها کمک میکند تا محتوای صفحه وب را به درستی نشان دهند. این تگ فقط باید یک بار در ابتدای صفحه وب نوشته شود. جالب این جاست که این تگ به حروف بزرگ و کوچک حساس نیست یعنی شمل هرطور دلتان بخواهد میتوانید آن را تایپ کنید.
💠 نحوه اعلان کردن این تگ در Html5 به این صورت است:
<!DOCTYPE html>
⭕عنوان ها در Html
💠 عنوان ها در Html با دو تگ <h1> شروع و تا تگ <h6/> ادامه میابد. تگ h1 بالاترین اهمیت را نشان میدهد و هرچه تگ بالاتر برود اهمیت آن کمتر میشود.(شماره تگ ها)
‼مثال:
<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>
❇ پاراگراف ها در Html
پاراگراف یا بند در Html توسط دو تگ <p> </p> نوشته میشود.
‼مثال:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
🔰 ادامه این درس در پست های بعدی.....
⌨@Html_Css100
✅ به نام خدا
⭕جلسه پنجم (نکات پایه در Html)
💠در این جلسه به شما چند مثال مهم و پایه Html را به شما آموزش میدهیم.
❇ اگر از چند تگ استفاده کردیم و شما متوجه نشدید نگران نباشید.در آینده آن ها را به شما یاد میدهیم.
💢سند های Html
⭕ تمامی سند های Html باید با اعلام کردن نوع سند شروع شوند.
<!DOCTYPE html>
💠 خود سند Html با تگ <html> شروع و با تگ <html/> پایان میابد.
❇قسمتی که قابل رویت میباشد و در مرورگر آن را مشاهده میکنید بین دو تگ <body> </body> قرار میگیرند.
💢 اعلان کردن <!DOCTYPE>
⭕ اعلان کردن <!DOCTYPE> نمایانگر نوع سند است و به مرورگر ها کمک میکند تا محتوای صفحه وب را به درستی نشان دهند. این تگ فقط باید یک بار در ابتدای صفحه وب نوشته شود. جالب این جاست که این تگ به حروف بزرگ و کوچک حساس نیست یعنی شمل هرطور دلتان بخواهد میتوانید آن را تایپ کنید.
💠 نحوه اعلان کردن این تگ در Html5 به این صورت است:
<!DOCTYPE html>
⭕عنوان ها در Html
💠 عنوان ها در Html با دو تگ <h1> شروع و تا تگ <h6/> ادامه میابد. تگ h1 بالاترین اهمیت را نشان میدهد و هرچه تگ بالاتر برود اهمیت آن کمتر میشود.(شماره تگ ها)
‼مثال:
<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>
❇ پاراگراف ها در Html
پاراگراف یا بند در Html توسط دو تگ <p> </p> نوشته میشود.
‼مثال:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
🔰 ادامه این درس در پست های بعدی.....
⌨@Html_Css100
👍8❤2
✅ به نام خدا
⭕ جلسه ششم(المان ها در Html)
💠 یک المان در Html توسط تگ شروع،محتوا و تگ پایان ساخته می شود.
<تگ شروع> محتوا <تگ پایانی/>
💢نکته: بعضی از المان ها هیچ محتوایی ندارند. مانند <br/> . به این المان ها، المان خالی میگویند و تگ پایان ندارند!
💠 المان های تودرتو html
💢المان ها در html میتوانند تودرتو باشند. یعنی اینکه چندین المان میتوانند داخل یک المان باشند.
مثال زیر شامل چهار المان است.
<html> <body> <h1> <p>
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
⭕ توضیح مثال بالا
💢 المان <html> یک المان ریشه است و همه سند را تعریف میکند. این المان یک تگ شروع <html> و یک تگ پایان دارد <html/>. داخل این المان یک المان دیگر وجود دارد به نام <body>.
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
🔰المان <body> بدنه سند را تعریف میکند. این المان یک تگ شروع <body> و یک تگ پایان <body/> دارد.
💠داخل این المان دو المان دیگر به نام های <h1> و <p> وجود دارد.
<h1>My First Heading</h1>
<p>My first paragraph.</p>
💢المان <h1 > یک عنوان را ایجاد میکند.
یک تگ شروع <h1> و یک تگ پایان <h1/> دارد.
<h1>My First Heading</h1>
💢 المان <p> یک پاراگراف را ایجاد میکند.
یک تگ شروع <p> و تگ پایان <p/> دارد.
<p>My first paragraph.</p>
‼هرگز تگ پایان را فراموش نکنید!!
بعضی از المان های html به درستی نمایش داده میشوند حتی اگر تگ پایان را ننویسید.
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
ولی به هیچ عنوان این کار را انجام ندهید! چون باعث خطاهای غیر منتظره میشود.
💠المان های خالی html
💢 به المان های html که هیچگونه محتوایی نداشته باشند المان های خالی میگویند.
❇تگ <br> باعث شکسته شدن خط میشود. این تگ یک المان خالی محسوب میشود و تگ پایان ندارد.
<p>This is a <br> paragraph with a line break.</p>
‼html به حروف بزرگ و کوچک حساس نیست.
💠 یعنی اینکه تگ <P> با تگ <P> هیچ فرقی ندارد.
ولی پیشنهاد ما این است که از حروف کوچک استفاده کنید.
⌨@Html_Css100
⭕ جلسه ششم(المان ها در Html)
💠 یک المان در Html توسط تگ شروع،محتوا و تگ پایان ساخته می شود.
<تگ شروع> محتوا <تگ پایانی/>
💢نکته: بعضی از المان ها هیچ محتوایی ندارند. مانند <br/> . به این المان ها، المان خالی میگویند و تگ پایان ندارند!
💠 المان های تودرتو html
💢المان ها در html میتوانند تودرتو باشند. یعنی اینکه چندین المان میتوانند داخل یک المان باشند.
مثال زیر شامل چهار المان است.
<html> <body> <h1> <p>
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
⭕ توضیح مثال بالا
💢 المان <html> یک المان ریشه است و همه سند را تعریف میکند. این المان یک تگ شروع <html> و یک تگ پایان دارد <html/>. داخل این المان یک المان دیگر وجود دارد به نام <body>.
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
🔰المان <body> بدنه سند را تعریف میکند. این المان یک تگ شروع <body> و یک تگ پایان <body/> دارد.
💠داخل این المان دو المان دیگر به نام های <h1> و <p> وجود دارد.
<h1>My First Heading</h1>
<p>My first paragraph.</p>
💢المان <h1 > یک عنوان را ایجاد میکند.
یک تگ شروع <h1> و یک تگ پایان <h1/> دارد.
<h1>My First Heading</h1>
💢 المان <p> یک پاراگراف را ایجاد میکند.
یک تگ شروع <p> و تگ پایان <p/> دارد.
<p>My first paragraph.</p>
‼هرگز تگ پایان را فراموش نکنید!!
بعضی از المان های html به درستی نمایش داده میشوند حتی اگر تگ پایان را ننویسید.
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
ولی به هیچ عنوان این کار را انجام ندهید! چون باعث خطاهای غیر منتظره میشود.
💠المان های خالی html
💢 به المان های html که هیچگونه محتوایی نداشته باشند المان های خالی میگویند.
❇تگ <br> باعث شکسته شدن خط میشود. این تگ یک المان خالی محسوب میشود و تگ پایان ندارد.
<p>This is a <br> paragraph with a line break.</p>
‼html به حروف بزرگ و کوچک حساس نیست.
💠 یعنی اینکه تگ <P> با تگ <P> هیچ فرقی ندارد.
ولی پیشنهاد ما این است که از حروف کوچک استفاده کنید.
⌨@Html_Css100
👍7❤4
✅ به نام خدا
⭕️ جلسه هفتم(مشخصه ها یا صفت ها در Html)
💠 صفت ها در Html توضیحات بیشتری درباره المان ها میدهند.
💢 همه ی المان ها در html میتوانند attribute داشته باشند.
💢 صفت ها(Attributes) همیشه در اول تگ تعریف میشوند.
🌀 href Attribute
💢 تگ <a> یک هایپرلینک را تعریف میکند. صفت href تعیین میکند که لینک تعریف شده در صفحه به کجا هدایت شود:
<a href="https://www.Google.com">Html & Css </a>
❗️ در جلسات اینده در مورد لینک ها توضیحات بیشتری به شما میدهیم.
🌀 Src Attribute
💢 تک <img> برای وارد کردن عکس در صفحه استفاده می شود. تگ Src آدرس عکس را تعیین می کند:
<img src="img_Car.jpg">
🌀 Height and Width Attribute
💢 تگ img باید شامل اتریبیوت های width و height باشد. این صفت ها طول و عرض عکس را تعیین میکنند:
<img src="img_Car.jpg" width="500" height="600">
🌀 Title Attribute
💢 این attribute اطلاعات اضافه ای را در مورد یک المان نشان میدهد. مقدار وارد شده در این اتریبیوت به عنوان یک tooltip در بالای المان نشان داده میشود:
<p title="I'm a tooltip">This is a paragraph.</p>
❗️ نکته 1: همیشه از حروف کوچک برای attribute ها استفاده کنید. البته شما میتوانید هم 🔵از حروف کوچک استفاده کنید هم از حروف بزرگ ولی پیشنهاد ما به شما این است که از حروف کوچک استفاده کنید. مثلا به جای نوشتن TITLE بنویسید title.
❗️ نکته 2: همیشه از دابل کوتیشن استفاده کنید.
🔵 html به شما اجازه میدهد که از دابل کوتیشن استفاده #نکنید. ولی پیشنهاد ما به شما این است که استفاده کنید.
(در آینده خواهید فهمید)
✅ <a href="https://www.google.com">Visit our HTML tutorial</a>
❌ <a href="https://www.google.com">Visit our HTML tutorial</a>
✳️ خلاصه این فصل:
⭕️ همه ی عناصر در Html میتوانند Attribute داشته باشند.
⭕️ صفت href تعیین میکند که لینک تعریف شده به کدام صفحه هدایت شود.
⭕️ صفت Src آدرس عکس را در تگ img تعیین میکند.
⭕️صفت های height و width به ترتیب طول و عرض یک شکل یا عکس را تعیین میکند.
⭕️ صفت title اطلاعات اضافه ای را در مورد تگ تعیین میکند.
⚜️ آزمون این فصل در جلسات بعد گرفته میشود.
⌨️ @Html_Css100
⭕️ جلسه هفتم(مشخصه ها یا صفت ها در Html)
💠 صفت ها در Html توضیحات بیشتری درباره المان ها میدهند.
💢 همه ی المان ها در html میتوانند attribute داشته باشند.
💢 صفت ها(Attributes) همیشه در اول تگ تعریف میشوند.
🌀 href Attribute
💢 تگ <a> یک هایپرلینک را تعریف میکند. صفت href تعیین میکند که لینک تعریف شده در صفحه به کجا هدایت شود:
<a href="https://www.Google.com">Html & Css </a>
❗️ در جلسات اینده در مورد لینک ها توضیحات بیشتری به شما میدهیم.
🌀 Src Attribute
💢 تک <img> برای وارد کردن عکس در صفحه استفاده می شود. تگ Src آدرس عکس را تعیین می کند:
<img src="img_Car.jpg">
🌀 Height and Width Attribute
💢 تگ img باید شامل اتریبیوت های width و height باشد. این صفت ها طول و عرض عکس را تعیین میکنند:
<img src="img_Car.jpg" width="500" height="600">
🌀 Title Attribute
💢 این attribute اطلاعات اضافه ای را در مورد یک المان نشان میدهد. مقدار وارد شده در این اتریبیوت به عنوان یک tooltip در بالای المان نشان داده میشود:
<p title="I'm a tooltip">This is a paragraph.</p>
❗️ نکته 1: همیشه از حروف کوچک برای attribute ها استفاده کنید. البته شما میتوانید هم 🔵از حروف کوچک استفاده کنید هم از حروف بزرگ ولی پیشنهاد ما به شما این است که از حروف کوچک استفاده کنید. مثلا به جای نوشتن TITLE بنویسید title.
❗️ نکته 2: همیشه از دابل کوتیشن استفاده کنید.
🔵 html به شما اجازه میدهد که از دابل کوتیشن استفاده #نکنید. ولی پیشنهاد ما به شما این است که استفاده کنید.
(در آینده خواهید فهمید)
✅ <a href="https://www.google.com">Visit our HTML tutorial</a>
❌ <a href="https://www.google.com">Visit our HTML tutorial</a>
✳️ خلاصه این فصل:
⭕️ همه ی عناصر در Html میتوانند Attribute داشته باشند.
⭕️ صفت href تعیین میکند که لینک تعریف شده به کدام صفحه هدایت شود.
⭕️ صفت Src آدرس عکس را در تگ img تعیین میکند.
⭕️صفت های height و width به ترتیب طول و عرض یک شکل یا عکس را تعیین میکند.
⭕️ صفت title اطلاعات اضافه ای را در مورد تگ تعیین میکند.
⚜️ آزمون این فصل در جلسات بعد گرفته میشود.
⌨️ @Html_Css100
❤5👍2
کدام اتریبیوت ها به ترتیب برای تغییر دادن طول و عرض عکس یا شکل در html است؟
Anonymous Quiz
52%
height , width
40%
width, height
5%
title,href
3%
alt,src
👏4❤3👎2
با افزودن کدام گزینه میتوان about html را به عنوان یک tooltip به متن زیر اضافه کرد؟
<p ...........="about html">html is easy.</p>
<p ...........="about html">html is easy.</p>
Anonymous Quiz
33%
tooltip
50%
title
10%
src
6%
lang
🤩3❤2👍1
با افزودن کدام Attribute به عبارت زیر میتوان یک لینک ساخت؟
<a........ "https://www.Google.com">I love Html</a>
<a........ "https://www.Google.com">I love Html</a>
Anonymous Quiz
10%
src
77%
href
8%
title
5%
style
❤2👍2
با کمک کدام اتریبیوت میتوان یک عکس با نام hello.jpg به صفحه html خود اضافه کنیم؟
<img ...="hello.jpg" width="500" height="600">
<img ...="hello.jpg" width="500" height="600">
Anonymous Quiz
13%
href
14%
style
68%
src
5%
title
❤2
✅ به نام خدا
⭕️ جلسه هشتم(سرصفحه ها یا Heading در Html)
💠 سرصفحه ها در html عنوان هایی هستند که شما میخواید در صفحه Html مشاهده میکنید.
💢 سر صفحه ها در Html
سر صفحه ها در Html با تگ های <h1> الی <h6> تعیین میشود
🔰 تگ <h1> بزرگترین و مهم ترین سرصفحه است. تگ <h6> کم اهمیت ترین و کوچکترین سر صفحه است.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
💯 سر صفحه ها مهم هستند.
❗️تگ <h1> باید برای مهم ترین موضوع استفاده شود. هر چه شماره تگ ها بیشتر شود اهمیت آن کمتر میشود
❗️ موتور های جستجو برای دسته بندی ساختار وب سایت شما از سرصفحه ها استفاده میکنند.
💠 سر صفحه های بزرگتر !!!
⭕️ هر سر صفحه سایز پیش فرض خود را دارد. اگرچه شما میتوانید سایز همه ی سر صفحه هارا تغییر دهید. میتوانید این کار را به وسیله اتریبیوت Style و پراپرتی font-size انجام دهید
💢 مثال:
<h1 style="font-size:60px;">Heading 1</h1>
⚜️ آزمون این فصل در جلسات بعد گرفته میشود.
⌨️ @Html_Css100
⭕️ جلسه هشتم(سرصفحه ها یا Heading در Html)
💠 سرصفحه ها در html عنوان هایی هستند که شما میخواید در صفحه Html مشاهده میکنید.
💢 سر صفحه ها در Html
سر صفحه ها در Html با تگ های <h1> الی <h6> تعیین میشود
🔰 تگ <h1> بزرگترین و مهم ترین سرصفحه است. تگ <h6> کم اهمیت ترین و کوچکترین سر صفحه است.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
💯 سر صفحه ها مهم هستند.
❗️تگ <h1> باید برای مهم ترین موضوع استفاده شود. هر چه شماره تگ ها بیشتر شود اهمیت آن کمتر میشود
❗️ موتور های جستجو برای دسته بندی ساختار وب سایت شما از سرصفحه ها استفاده میکنند.
💠 سر صفحه های بزرگتر !!!
⭕️ هر سر صفحه سایز پیش فرض خود را دارد. اگرچه شما میتوانید سایز همه ی سر صفحه هارا تغییر دهید. میتوانید این کار را به وسیله اتریبیوت Style و پراپرتی font-size انجام دهید
💢 مثال:
<h1 style="font-size:60px;">Heading 1</h1>
⚜️ آزمون این فصل در جلسات بعد گرفته میشود.
⌨️ @Html_Css100
❤2👍1
❤2
کدام یک از سرصفحه های زیر کوچکترین است و کمترین اهمیت را دارد؟
Anonymous Quiz
80%
h5
5%
h3
12%
h2
3%
h4
❤2