خدمات ورا وب

آموزش 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:%20varawb@gmail.com">Send Email</a>
				
			

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

				
					<a href="mailto:amir@hi.com?subject%20=%20Feedback&amp;body%20=%20Message"> Send Feedback </a>
				
			

بریم سراغ یادگیری جداول
برای ساخت یک جدول ما به چهار تا تگ ضروری به همراه 3 تا تگ دیگه نیاز داریم …………………………………………….👇

table
tr
th
td
thead
tbody
tfoot

خب بریم سراغ توضیحات تگ های گفته شده.

<table>

این تگ در واقع بدنه ی اصلی جدول ما محسوب میشه و ابتدا و انتهای جدول رو مشخص میکنه.

<tr>

از این تگ برای ایجاد ردیف استفاده میشه هر جدول باید حداقل یک ردیف داشته باشه ردیف ها به صورت افقی ایجاد میشن.

<th&td>

از این دو تگ برای ایجاد سلول ها داخل هر ردیف استفاده میشه از تگ th برای ایجاد عناوین و از تگ td برای ایجاد داده ها و اطلاعات ساده استفاده میشه.

این چهار تگ ساختار کلی یک جدول بود.
مثال …………………………………………👇

				
					
name last name
mohsen hsnbdi
danial nabi

<thead>

تگ thead تگی است که در درون تگ Table مورد استفاده قرار میگیرد و با استفاده از آن میتوان یک هدر یا سربرگ ثابتی را برای جدول مان ایجاد و تعریف نماییم.

اینکه میگم ثابت یعنی اینکه شما یکبار هدرتون رو تعریف میکنید و این هدر بصورت ثابت در قسمت بالایی جدول قرار میگیرد ، و در ادامه اگه خواستید هدر رو ویرایش کنید خیلی راحت میتونید اینکارو انجام بدید.

بیشتر بخوانید :  طراحی وب چیست؟

علاوه بر تگ Thead ما ۲ تگ دیگه به نام های Tbody و Tfoot هم داریم، که تگ Tbody برای ایجاد بدنه اصلی جدول (بصورت ثابت) می باشد و تگ Tfoot نیز برای تعریف قسمت پایینی جدول (فوتر) می باشد.

از این سه تگ برای نمونه مثل مثال زیر میتوان استفاده کرد:

				
					
name email age
varaweb varaweb@gmail.com 1
mohsen example@gmail.com 20

نکته ای که باید رعایت بکنید این هست که این سه تگ رو در مکان های مناسب خود یعنی بر اساس تعریفی که کردیم یکی رو برای هدر و یکی رو برای بدنه و یکی رو برای فوتر مورد استفاده قرار بدید.

صفت های تگ 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

عددی صحیح بر حسب پیکسل میگیرد و فضای بین سلول هارو کنترل میکند.

محسن حسن آبادی وب‌سایت
سلام ، من محسن حسن آبادی هستم ، از سال ۹۵ طراحی سایت رو شروع کردم و قصد دارم تجربیاتم رو باهاتون به اشتراک بزارم

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دلیل بازگشت وجه