✅ به نام خدا
⭕ جلسه ششم(المان ها در 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
در عکس بالا ، ابرای نمایش دادن Heading 6 از کدام یک از گزینه های زیر استفاده شده است؟
Anonymous Quiz
10%
<h1> Heading6</h1>
4%
<h5>Heading6</h5>
2%
<h3> Heading6</h3>
84%
<h6> Heading6</h6>
❤4
آموزش ها ویدئویی باشه یا متنی؟
Anonymous Poll
33%
فقط ویدئو بزارید
8%
فقط متن
59%
هم آموزش متنی باشه هم ویدئویی
❤4
Telegram
attach 📎
❤7👍1👏1
Telegram
attach 📎
👍5❤2
#html
✅ آموزش اچ تی ام ال و طراحی وب مفاهیم اولیه(آموزش سر صفحه ها)
❇️ جلسه چهارم
💢 @Html_Css100
✅ آموزش اچ تی ام ال و طراحی وب مفاهیم اولیه(آموزش سر صفحه ها)
❇️ جلسه چهارم
💢 @Html_Css100
Telegram
attach 📎
👍5
#html
✅ آموزش اچ تی ام ال و طراحی وب مفاهیم اولیه(آموزش بولد کردن ، ایتالیک کردن و تگ های تو در تو)
❇️ جلسه پنجم
💢 @Html_Css100
✅ آموزش اچ تی ام ال و طراحی وب مفاهیم اولیه(آموزش بولد کردن ، ایتالیک کردن و تگ های تو در تو)
❇️ جلسه پنجم
💢 @Html_Css100
Telegram
attach 📎
👍2
#html
✅ آموزش اچ تی ام ال و طراحی وب مفاهیم اولیه(آموزش تگ استایل)
❇️ جلسه ششم
💢 @Html_Css100
✅ آموزش اچ تی ام ال و طراحی وب مفاهیم اولیه(آموزش تگ استایل)
❇️ جلسه ششم
💢 @Html_Css100
Telegram
attach 📎
❤1