پروژه و تمرین HTML

( یکشنبه ، 6 خرداد سال 1403 )

حق کپی ویدئو

مجاز نمی باشد.

شما اینجا هستید :

جلسه دهم

آموزگار :

امیررضا اکبری

حال که با بسیاری از مباحث و تگ‌ها آشنا شده‌ایم، می‌توانیم کمی بیشتر تمرین کنیم تا مفاهیم را به خوبی یاد بگیریم. اکنون می‌خواهیم با ایجاد یک جدول و تغییر دادن آن، به تمرین کردن بپردازیم. ( ادامه مطلب … )

فصل اول ، آشنایی کامل با html

در فصل اول از آموزش HTML چه می آموزید؟

در این فصل با زبان نشانه گذاری html به صورت کامل آشنا می شوید. این آموزش از پایه و با بیانی بسیار ساده و روان تهیه شده است. در واقع با این آموزش به صورت مفهومی و بسیار کامل زبان اچ تی ام ال را یاد می گیرید. یادگیری زبان html و css برای هر کسی که می خواهد در دنیای وب فعالیت کند بسیار ضروری است.

مجموعه ابزار وردپرس از بین چندین مدرس موفق دوره های html و css ، خانم محرابی را به عنوان برترین مدرس برگزیده است چراکه ایشان بصورتی کاملاً شیوا ، ساده و البته بصورت حرفه ای ارائه آموزش می کنند. دیدن این آموزش ها را به همه شما دوستان گرامی پیشنهاد می کنیم.

فصل دوم ، شروع یادگیری و آشنایی با css

در فصل دوم چه چیزی آموزش داده شده است؟

بعد از یادگیری html در فصل اول ، نوبت به یادگیری زبان جذاب css هست. این فصل نیز با بیانی روان و کاملا ساده ارائه شده است که می توانید با یادگیری آن توانایی خودتان را در حوزه ی وب بالا ببرید. یادگیری html به تنهایی کاربردی نخواهد بود و باید در ادامه به یادگیری css هم بپردازید.

در واقع فصل دوم تکمیل کننده‌ی آموزش html است که در فصل اول آموزش داده شد. در کل یادگیری html به تنهایی کفایت نمی کند و عملاً خیلی مورد استفاده هم قرار نمی گیرد. این یک پیش نیازی بود که بتوانیم آموزش CSS را شروع کنیم. این توضیحات به معنی کم اهمیت بودن آموزش HTML نیست و باید حتماً این آموزش را نیز مشاهده نمایید.

رنگ ها در CSS
در بسیاری از مواقع ما در بخش‌های مختلفی از سایت مانند رنگ پس زمینه، حاشیه، متون و…
لینک ها در CSS
اولین کاری که می‌توانیم انجام دهیم این است که خطی که به صورت پیش فرض زیر لینک‌هاایجاد…
فونت ها در سی اس اس
یکی دیگر از مواردی که در طراحی یک سایت مورد توجه قرار می‌گیرد، مباحث مربوط به فونت‌ها…
فصل سوم ، ادامه آموزش Css با سطح پیشرفته تر

در فصل سوم از آموزش HTML و CSS چه می آموزید؟

فصل سوم ادامه آموزش Css است که در فصل قبلی آن را شروع کردیم. بر خلاف html که خیلی سریع آن را جمع بندی کردیم، برای CSS زمان بیشتری لازم داریم تا بتوانیم در ابتدا مهم ترین مسائل آن، مانند حاشیه ها، مارجین و پدینگ و … را آموزش دهیم.

در فصل های آینده نکات حرفه ای تری نیز از آموزش css و html باقی مانده است که در خدمت شما هستیم.

حاشیه ها در CSS
Borders به معنای حاشیه‌ها است. در این جلسه یاد می‌گیریم که چگونه برای عناصر خود حاشیه و…
outline در CSS
در ابتدا باید با تعریف outline آشنا شویم. به خطی که دور تا دور یک عنصر کشیده…

علـــی لــطفی

مدرس دوره های برنامه نویسی فرانت اند و فعال در حوزه کسب و کار های اینترنتی

علـــی لــطفی

مدرس دوره های برنامه نویسی فرانت اند و فعال در حوزه کسب و کار های اینترنتی

پروژه و تمرین HTML

( یکشنبه ، 6 خرداد سال 1403 )

در ابتدا فرض کنید می‌خواهیم یک جدول که دارای 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=” ” مربوط به لینک قرار دهیم. این موضوع درون ویدئو کامل توضیح داده شده است.

برای نوشتن دیدگاه باید وارد بشوید.
فهرست