آموزش html & csss (پیشرفته)
سلام!به آموزش html & csss (پیشرفته) خوش آمدید
آموزش html & csss (پیشرفته)، بخش دوم آموزش html & css (مقدماتی) میباشد. این آموزش ها پشت سر هم هستن و بسیار با ارزش هستند که ما به صورت رایگان در اختیار شما قرار دادیم.
مدرس این دوره : محسن حسن آبادی
استفاده از تگ a برای برقراری تماس:
امروزه اکثر کاربران برای سرچ های خود از گوشی های همراه استفاده میکنند برای اینکه، کاربران بتوانند به راحتی با کلیک روی شماره های تماس سایت با شما ارتباط برقرار کنند کافیست تمام شماره تلفن ها را در تگ a و مقدار href را schema:tell قرار دهید.
برای مثال میتوان به شکل زیر از این قابلیت استفاده کرد…👇
<a href="tel:+98111111111">تماس با ما </a>
تنها کافیه بجای اون اعداد111111111 شماره ی تلفن خودتون رو وارد کنید.
نکته:همیشه شماره تلفن را با استفاده از فرمت شماره گیری بین المللی وارد کنید.
علامت پلاس (+) ، کد کشور ، و شماره.
استفاده از تگ a برای ارسال sms:
با درج این کد هر کسی که با موبایل روی لینک mesage کلیک کند به صورت اتوماتیک و درج شماره تماس گیرنده وارد New Massge گوشی می شود و به راحتی بدون تایپ دستی شماره موبایل میتوانید sms ارسال کنید.
برای مثال میتوان به شکل زیر از این قابلیت استفاده کرد…👇
<a href="sms:1111121111">ارسال پیامک</a>
تنها کافیه بجای اعداد داخل صفت href شماره تلفن خودتون رو وارد کنید.
استفاده از تگ a برای ارسال ایمیل:
برای ایجاد این قابلیت تنها کافیه در صفت href از کلمه ی mailto: email استفاده کنید دقیقا به شکل زیر 👇
<a href = "mailto: varawb@gmail.com">Send Email</a>
همچنین شما می توانید یک موضوع و یک بدنه ایمیل بطور پیش فرض، همراه با آدرس ایمیل تان را مشخص کنید. در مثال زیر از یک موضوع و بدنه پیش فرض استفاده کرده ایم.
<a href = "mailto:amir@hi.com?subject = Feedback&body = Message"> Send Feedback </a>
بریم سراغ یادگیری جداول
برای ساخت یک جدول ما به چهار تا تگ ضروری به همراه 3 تا تگ دیگه نیاز داریم …………………………………………….👇
table
tr
th
td
thead
tbody
tfoot
خب بریم سراغ توضیحات تگ های گفته شده.
<table>
این تگ در واقع بدنه ی اصلی جدول ما محسوب میشه و ابتدا و انتهای جدول رو مشخص میکنه.
<tr>
از این تگ برای ایجاد ردیف استفاده میشه هر جدول باید حداقل یک ردیف داشته باشه ردیف ها به صورت افقی ایجاد میشن.
<th&td>
از این دو تگ برای ایجاد سلول ها داخل هر ردیف استفاده میشه از تگ th برای ایجاد عناوین و از تگ td برای ایجاد داده ها و اطلاعات ساده استفاده میشه.
این چهار تگ ساختار کلی یک جدول بود.
مثال …………………………………………👇
<table border="1">
<tr>
<th>name</th>
<th>last name</th>
</tr>
<tr>
<td>mohsen</td>
<td>hsnbdi</td>
</tr>
<tr>
<td>danial</td>
<td>nabi</td>
</tr>
</table>
<thead>
تگ thead تگی است که در درون تگ Table مورد استفاده قرار میگیرد و با استفاده از آن میتوان یک هدر یا سربرگ ثابتی را برای جدول مان ایجاد و تعریف نماییم.
اینکه میگم ثابت یعنی اینکه شما یکبار هدرتون رو تعریف میکنید و این هدر بصورت ثابت در قسمت بالایی جدول قرار میگیرد ، و در ادامه اگه خواستید هدر رو ویرایش کنید خیلی راحت میتونید اینکارو انجام بدید.
علاوه بر تگ Thead ما ۲ تگ دیگه به نام های Tbody و Tfoot هم داریم، که تگ Tbody برای ایجاد بدنه اصلی جدول (بصورت ثابت) می باشد و تگ Tfoot نیز برای تعریف قسمت پایینی جدول (فوتر) می باشد.
از این سه تگ برای نمونه مثل مثال زیر میتوان استفاده کرد:
<table>
<thead>
<tr>
<th>name</th>
<th>email</th>
<th>age</th>
</tr>
</thead>
<tbody>
<tr>
<td>varaweb</td>
<td>varaweb@gmail.com</td>
<td>1</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>mohsen</td>
<td>example@gmail.com</td>
<td>20</t>
</tr>
</tfoot>
<table>
نکته ای که باید رعایت بکنید این هست که این سه تگ رو در مکان های مناسب خود یعنی بر اساس تعریفی که کردیم یکی رو برای هدر و یکی رو برای بدنه و یکی رو برای فوتر مورد استفاده قرار بدید.
صفت های تگ table ………………………👇
border
یک خط به اطراف جدول اعمال میکند و عددی که میگیرد میزان ضخامت خط میباشد.
dir
جهت گیری متون داخل جدول را مشخص میکند و دو تا مقدار میگیرد.
ltr – چپ به راست
rtl – راست به چپ
bordercolor
رنگ خط اطراف جدول را مشخص میکند. مثال : red
align
محل قرار گیری جدول را مشخص میکند و مقادیر این صفت قبلا توضیح داده شده است.
width
عرض جدول را بر حسب پیکسل یا درصد مشخص میکند.
height
ارتفاع جدول را برحسب پیکسل یا درصد مشخص میکند.
bgcolor
رنگی را برای پس زمینه ی جدول میگیرد.
background
ادرس عکسی را میپذیرد و ان را در پس زمینه ی جدول نشان میدهد.
frame
مشخص میکند که کدام یک از خط های اطراف جدول نمایش داده شود مقادیری که میگیره…………………….👇.
void
هیچکدام از خط ها نشان داده نشن.
hsides
فقط خط های افقی نمایش داده بشن.
vsides
فقط خط های عمودی نمایش داده بشن.
rhs
فقط خط راست نمایش داده بشه.
lhs
فقط خط چپ نمایش داده بشه.
above
فقط خط بالا نمایش داده بشه.
below
فقط خط پایین نمایش داده بشه.
border
حالت پیش فرض تمام خط ها نشان داده میشه.
rules
این صفت مشخص میکند کدام یک از خط های سلول های داخل جدول نمایش داده بشن مقادیری که میگیره……👇
none
هیچ کدام از خط های داخلی نمایش داده نشن.
all
همه ی خط های داخلی نمایش داده بشن.
groups
فقط حاشیه های گروهی از ردیف ها و یا ستون ها نمایش داده بشه.
cols
فقط خط ستون ها نمایش داده بشه.
rows
فقط خط ردیف ها نمایش داده بشه.
cellpadding
این صفت عددی صحیح میگیرد بر حسب پیکسل و فضای محتویات سلول ها با دیواره رو کنترل میکند.
cellspacing
عددی صحیح بر حسب پیکسل میگیرد و فضای بین سلول هارو کنترل میکند.
