برای یادگیری زبان HTML لازم است که ابتدا با برخی مباحث و مقدمات آشنا شویم و به…
پروژه و تمرین HTML
پروژه و تمرین HTML
( )
حال که با بسیاری از مباحث و تگ‌ها آشنا شده‌ایم، می‌توانیم کمی بیشتر تمرین کنیم تا مفاهیم را به خوبی یاد بگیریم. اکنون می‌خواهیم با ایجاد یک جدول و تغییر دادن آن، به تمرین کردن بپردازیم. ( ادامه مطلب … )
فصل اول ، آشنایی کامل با html
در فصل اول از آموزش HTML چه می آموزید؟
در این فصل با زبان نشانه گذاری html به صورت کامل آشنا می شوید. این آموزش از پایه و با بیانی بسیار ساده و روان تهیه شده است. در واقع با این آموزش به صورت مفهومی و بسیار کامل زبان اچ تی ام ال را یاد می گیرید. یادگیری زبان html و css برای هر کسی که می خواهد در دنیای وب فعالیت کند بسیار ضروری است.
مجموعه ابزار وردپرس از بین چندین مدرس موفق دوره های html و css ، خانم محرابی را به عنوان برترین مدرس برگزیده است چراکه ایشان بصورتی کاملاً شیوا ، ساده و البته بصورت حرفه ای ارائه آموزش می کنند. دیدن این آموزش ها را به همه شما دوستان گرامی پیشنهاد می کنیم.
اکنون وقت آن شده است که شروع به نوشتن دستورات و تگ های HTML کنیم. برای این…
اتربیوت (Attribute) به معنای صفت است. یعنی صفت و ویژگی‌هایی را برای تگ ها ایجاد می‌کند. به…
لینک‌ها یکی از مهم ترین قسمت‌های هر سایتی محسوب می‌شوند. لینک‌ها مانند پل عمل می‌کنند و ما…
زمانی که در لیست بندی و نوشتن اسامی، ترتیب برایمان مهم باشد از لیست‌های ترتیبی یا Ordered…
تا کنون با تگ‌های متفاوتی آشنا شده‌اید. اکنون می‌خواهیم شما را با مفهوم بلاک و اینلاین در…
ایجاد جدول درسایت‌ها یکی از مباحث مهمی‌است که باید آن را یاد بگیریم. اما قبل از ایجاد…
اصلی ترین تگی که باید استفاده کنیم تگ <form></form> است. اما این تگ به تنهایی کافی نیست…
فصل دوم ، شروع یادگیری و آشنایی با css
در فصل دوم چه چیزی آموزش داده شده است؟
بعد از یادگیری html در فصل اول ، نوبت به یادگیری زبان جذاب css هست. این فصل نیز با بیانی روان و کاملا ساده ارائه شده است که می توانید با یادگیری آن توانایی خودتان را در حوزه ی وب بالا ببرید. یادگیری html به تنهایی کاربردی نخواهد بود و باید در ادامه به یادگیری css هم بپردازید.
در واقع فصل دوم تکمیل کننده‌ی آموزش html است که در فصل اول آموزش داده شد. در کل یادگیری html به تنهایی کفایت نمی کند و عملاً خیلی مورد استفاده هم قرار نمی گیرد. این یک پیش نیازی بود که بتوانیم آموزش CSS را شروع کنیم. این توضیحات به معنی کم اهمیت بودن آموزش HTML نیست و باید حتماً این آموزش را نیز مشاهده نمایید.
قبل از اینکه تگ‌ها را معرفی کنیم، باید این نکته را به شما یادآوری کنیم و آن…
به طور کلی تاکنون با زبان نشانه گذاری html آشنا شدید. اکنون با آموزش css در خدمت…
در جلسه ی قبل ساختار کلی سی اس اس را معرفی کردیم. اکنون می‌خواهیم بدانیم که سلکتور…
یکی از ویژگی‌هایی که به سایت‌ها زیبایی می‌بخشد، طراحی زیبا و منحصربه‌فرد پس زمینه سایت می‌باشد. ما…
در بسیاری از مواقع ما در بخش‌های مختلفی از سایت مانند رنگ پس زمینه، حاشیه، متون و…
اولین کاری که می‌توانیم انجام دهیم این است که خطی که به صورت پیش فرض زیر لینک‌هاایجاد…
یکی دیگر از مواردی که در طراحی یک سایت مورد توجه قرار می‌گیرد، مباحث مربوط به فونت‌ها…
فصل سوم ، ادامه آموزش Css با سطح پیشرفته تر
در فصل سوم از آموزش HTML و CSS چه می آموزید؟
فصل سوم ادامه آموزش Css است که در فصل قبلی آن را شروع کردیم. بر خلاف html که خیلی سریع آن را جمع بندی کردیم، برای CSS زمان بیشتری لازم داریم تا بتوانیم در ابتدا مهم ترین مسائل آن، مانند حاشیه ها، مارجین و پدینگ و … را آموزش دهیم.
در فصل های آینده نکات حرفه ای تری نیز از آموزش css و html باقی مانده است که در خدمت شما هستیم.
Borders به معنای حاشیه‌ها است. در این جلسه یاد می‌گیریم که چگونه برای عناصر خود حاشیه و…
مفهوم margin چیست؟ به زبان ساده مارجین فاصله بین یک عنصر با اطرافش است. در واقع margin…
در این جلسه می‌خواهیم با مفهوم padding آشنا شویم و نکاتی را در این باره بیاموزیم. ویژگی…
در ابتدا باید با تعریف outline آشنا شویم. به خطی که دور تا دور یک عنصر کشیده…
پروژه و تمرین HTML
( )
در ابتدا فرض کنید می‌خواهیم یک جدول که دارای 7 ردیف و 5 تا ستون است ایجاد کنیم. همانطور که از مباحث قبل به یاد دارید باید از تگ <form> استفاده کنیم و سپس برای هر ردیف از یک تگ <tr> و برای هر ستون در هر ردیف از تگ <td> استفاده کنیم.
<form>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
.
.
.
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
<td>34</td>
<td>35</td>
</tr>
</form>
حال باید به جدول خود حاشیه دهیم. برای این کار باید از اتربیوت‌های مربوط به حاشیه استفاده کنیم و آن‌ها را درون تگ <style> قرار دهیم. تگ style را نیز درون تگ <head> قرار می‌دهیم. به صورت زیر:
<head>
<style>
table , td {
border: 2px solid gray;
border-collapse:collapse;
}
</style>
</head>
می‌توانیم به جدولمان اتربیوت عرض بدهیم و مقدار آن را 100% دهیم تا جدول تمام عرض صفحه را بگیرد و بزرگ شود. حالا می‌خواهیم در ردیف اول، خانه‌ها را ادغام کنیم، بنابراین از اتربیوت colspan استفاده می‌کنیم. colspan=”5” را درون تگ td که عدد یک را درون آن نوشته ایم قرار می‌دهیم و 4 تا تگ td دیگر در همان ردیف را حذف می‌کنیم.
برای ردیف دوم و سوم هم همین کار را انجام می‌دهیم. سپس ردیف دوم و سوم را با هم ادغام می‌کنیم. این بار باید از اتربیوت rowspan=”2” استفاده کنیم و آن را درون تگ td مربوط به ردیف دوم قرار می‌دهیم و سپس tdای که درون ردیف سوم هست را حذف می‌کنیم.
حال ستون‌های اول در ردیف‌های چهار و پنج و شش را ادغام می‌کنیم. سپس ردیف آخر را به شکل ردیف اول در می‌آوریم.
ما می‌توانیم از اتربیوت text-align نیز استفاده کنیم و مقدار center را به آن دهیم تا مقادیر جدول وسط چین شوند.
اکنون می‌توانیم به دلخواه خود، درون هر خانه از جدول تصاویر، متن و یا حتی فرم قرار دهیم.
شما می‌توانید این تمرین را بار‌ها انجام دهید و هر بار جدول را به شکل متفاوتی دربیاورید. این کار در یادگیری بهتر مفهوم ردیف و جدول به شما کمک بسیاری می‌کند.
مطلب پایانی که وجود دارد این است ما می‌توانیم از یک صفحه به صفحه دیگری لینک دهیم. فقط کافی ست در جایی که می‌خواهیم لینک دهیم آدرس صفحه دیگر را قرار دهیم. یعنی اسم صفحه ی html دیگری را که ایجاد کرده‌ایم درون href=” ” مربوط به لینک قرار دهیم. این موضوع درون ویدئو کامل توضیح داده شده است.
برای نوشتن دیدگاه باید وارد بشوید.