به نام خدا
جلسه اول 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