آموزش طراحی سایت
آموزش طراحی سایت از صفر تا 100
آموزش طراحی سایت
آموزش طراحی سایت از صفر تا 100آموزش طراحی سایت - آموزش ساخت جدول در html
آموزش طراحی سایت - آموزش ساخت جدول در html
آموزش Table در HTML
جدول های HTML به نویسندگان وب اجازه می دهند تا داده هایی مانند متن، تصاویر، لینک ها، جدول های دیگر و غیره در ردیف ها و ستون ها تنظیم کنید. جدول های HTML با استفاده از برچسب < table> ایجاد می شوند که در آن برچسب < tr> برای ایجاد ردیف ها و برچسب < td> برای ایجاد داده های سلول ها استفاده می شوند.
مثال:
نمونه یک
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
ویژگی های colspan و rowspan
اگر بخواهید دو یا بیشتر از دو ستون را با هم تلفیق کنید از ویژگی colspan استفاده می کنید. به طور مشابه اگر بخواهید دو یا بیشتر از دو ردیف را در یک ردیف تلفیق کنید از rowspan استفاده کنید.
مثال:
نمونه سه
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>
پس زمینه ی جدول
می توانید به دو روش زیر برای جدول خود زمینه ای تنظیم کنید.
- ویژگی Bg color: می توانید رنگ زمینه را برای همه ی جدول و یا تنها برای یک سلول تنظیم کنید.
- ویژگی background: می توانید یک تصویر را برای کل جدول یا تنها یک سلول تنظیم کنید.
همچنین می توانید با استفاده از ویژگی bordercolor رنگ حاشیه را نیز تنظیم کنید.
مثال:
نمونه چهار
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" bgcolor="yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>
در اینجا مثالی در رابطه با استفاده از ویژگی background می بینید. در این مثال ما از تصویری موجود در image directory استفاده کرده ایم.
نمونه پنج
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border="1" bordercolor="green" background="/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
</body>
</html>
آموزش html css
طول و عرض جدول
شما می توانید طول و عرض جدولی را با استفاده از ویژگی های width و height تنظیم کنید. شما می توانید طول و عرض جدول را به پیکسل و یا متناسب با درصد صفحه ی جاری تنظیم کنید.
مثال:
نمونه شش
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border="1" width="400" height="150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>
شرح جدول
برچسب caption یک توضیح یا یک تیتر برای جدول می باشد که در بالای جدول نمایش داده می شود. این برچسب در ورژن های جدید HTML/XHTML توصیه می شود.
مثال:
نمونه هفت
<title>HTML Table Caption</title>
<table border="1" width="100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td>
<td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td>
<td>row 2, columnn 2</td>
</tr>
</table>
تیتر، بدنه و پاورقی جدول
جدول ها می توانند به سه بخش تقسیم شوند: تیتر، بدنه و پاورقی جدول. عنوان و فوت(tfoot) در واقع شبیه به تیتر و پاورقی در یک فایل پردازش word می باشند که برای هرصفحه یکی می باشد، در حالیکه بدنه همان نگه دارنده ی محتوای اصلی جدول می باشد.
سه عنصر برای مجزا کردن عنوان، بدنه و فوت در یک جدول عبارتند از
- < thead> - برای ایجاد یک تیتر مجزا
- < tbody>- برای نشان دادن بدنه ی اصلی جدول
- < tfoot> - برای ایجاد یک پاورقی مجزا در یک جدول
یک جدول برای نشان دادن صفحات و گروه های مختلف یک داده، ممکن است دارای عناصر مختلفی باشد، اما ظاهر شدن برچسب های و قبل از زیاد مهم نیست.
مثال:
نمونه هشت
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Table</title>
</head>
<body>
<table border="1" width="100%">
<thead>
<tr>
<td colspan="4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan="4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
جدول های تودرتو
آموزش طراحی سایت با html
شما می توانید از یک جدول در داخل جدولی دیگر استفاده کنید. نه تنها جدول ها، بلکه می توانید تمام برچسب ها را در داخل برچسب داده ی استفاده کنید.
مثال:
در زیر مثالی را از استفاده ی یک جدول و برچسب های دیگر در داخل یک سلول مشاهده می کنید.
"آموزش طراحی سایت - توضیحات در HTML-آموزش html "
کامنت های معتبردر مقابل کامنت های نامعتبر
کامنت ها تودرتو نمی شوند، یعنی اینکه یک کامنت نمی تواند در داخل کامنت دیگری قرار بگیرد. خط تیره ی (dash) دوتایی "--" ممکن نیست در داخل یک کامنت ظاهر شود، به جز در مواردی که بخشی از برچسب closing باشد. شما باید مطمئن باشید که هیچ فضای خالی در ابتدای رشته ی کامنت وجود ندارد.
مثال:
در اینجا کامنت ارائه شده یک کامنت معتبر می باشد و توسط مرورگر پاک می شود.
کامنت های چندخطی
تاکنون فقط کامنت های تک خطی را مشاهده کردیم، اما HTML کامنت های چندخطی را نیز پشتیبانی می کند.
شما می توانید کامنت های چند خطی داشته باشید با استفاده از برچسب آغازگر --!> و پایان دهنده ی ،--> که قبل از اولین خط و در پایان آخرین خط قرار میگیرد.
کامنت های شرطی
کامنت های شرطی تنها در اینترنت اکسپلورر روی ویندوز کار می کنند، اما توسط مرورگرهای دیگر هم نادیده گرفته می شوند. این کامنت ها در Internet Explorer 5 به بالاتر پشتیبانی می شوند و می توانید از آنها برای دادن دستورات شرطی به ورژن های مختلف IE استفاده کنید.
در جایی که نیاز خواهید داشت یک صفحه ی طراحی متفاوت بر اساس ورژن های مختلف اینترنت اکسپلورر به کار بگیرید، به راه حلی نیاز خواهید داشت. در این مواقع چنین کامنت های شرطی مفید خواهند بود.
استفاده از برچسب کامنت
مرورگرهای کمی هستند که استفاده از برچسب را برای کامنت بخشی از کد HTML استفاده می کنند.
اگر از IE استفاده می کنید، نتیجه ی زیر حاصل خواهد شد:
This is Internet Explorer.
اما اگر در حال استفاده از IE نمی باشد، نتیجه ی زیر حاصل می شود.
This is Internet Explorer.
کد اسکریپت کامنت
شما جاوا اسکریپت را در یک آموزش مجزا با HTML یاد خواهید گرفت. در اینجا باید دقت کنید که اگر در حال استفاده از java script یا vb script در کد html خود هستید، بنابراین توصیه می شود که آن کد اسکریپت را در داخل کامنت های مناسب HTML قرار دهید طوری که مرورگرهای قدیمی بتوانند به درستی کار کنند.
کامنت صفحات طراحی
گرچه شما HTML را در یک آموزش مجزا با صفحات طراحی فرا میگیرید، اما در اینجا باید دقت داشته باشید که اگر از CSS در کد HTML خود استفاده می کنید، بنابراین توصیه می شود که کد صفحه ی طراحی را در داخل کامنت های مناسب HTML قرار دهید، طوریکه مرورگرهای قدیمی بتوانند کار کنند.
بعلت درست نمایش داده شدن کد ها از گذاشتن کد معذوریم جهت دیدن کدها به آدرس دوره آموزش طراح سایت مراجعه فرمایید.
آموزش طراحی سایت- آموزش html
آموزش html-آموزش طراحی سایت
دوره آموزش طراحی سایت
HTML توسط برنرز لی در اواخر سال 1991 ایجاد شد، اما html 2.0 اولین نوع استاندارد آن بود که در سال 1995 منتشر شد. HTML 4.01 ورژن مهمی از HTML بود که دراواخر 1999 منتشر شد. گرچه در آموزش html HTML 4.01 ورژنی است که به طور گسترده استفاده می شود، اما معمولا HTML 5 را داریم که توسعه ی یافته html 4.01 است و در سال 2012 منتشر شد.
پیش نیازها:
قبل از پیش رفتن برای آموزش HTML شما باید یک دانش پایه برای کار با ویندوز و سیستم عملیاتی Lunix داشته باشید. علاوه بر این برای آموزش HTML شما باید با موارد زیر آشنا باشید:
دوره آموزش طراحی سایت
- تجربه کار با هر ویرایشگری مانند Notepad، Notepad ++ و یا Editplus و غیره برای آموزش html .
- چگونگی ایجاد مسیرها و فایل ها روی کامپیوتر خود برای آموزش html
- چگونگی مسیریابی از طریق مسیرهای مختلف برای آموزش html.
- چگونگی تایپ کردن محتوا در یک فایل و ذخیره ی آنها روی کامپیوتربرای آموزش html.
- درک تصاویر با فرمت های مختلف مانند JPEG و PNG برای آموزش html.
آموزش طراحی سایت-آموزش مدیریت خطا در جاوا اسکریپت
در این مقاله از مجموعه مقالات آموزش طراحی سایت می آموزیم که چطور خطاهای احتمالی در جاوا اسکریپت را مدیریت کنیم.
- دستور try به شما امکان می دهد قطعه کد (code block) را به منظور یافتن خطاهای احتمالی بررسی و آزمایش کنید.
- دستور catch به شما اجازه می دهد خطا را مدیریت کرده و اقدامات اصلاحی را در صورت رخداد خطا مشخص کنیم.
- دستور throw قابلیت ایجاد خطاهای سفارشی را به شما می دهد.
- دستور Finally به شما اجازه می دهد کد را پس از (اجرای دستورات) try و catch، صرف از نظر از نتیجه آن، اجرا کنید.
هنگامی که کدهای جاوا اسکریپت را اجرا می کنید، ممکن است با خطاهای مختلفی مواجه شویم. این خطاها ممکن است از وجود اشکال هایی در کدنویسی برنامه نشات بگیرد که توسط برنامه نویس نوشته شده، ممکن است از ورودی اشتباه و غیر مجازی باشد که توسط کاربر وارد شده و یا دیگر چیزهای غیر قابل پیش بینی.
نمونه یک :
< p id="demo">adddlert is not defined< /p>
try {
adddlert("Welcome guest!");
}
catch(err) {
document. getElementById("demo") = err.message;
}
دستورات try & catch و کاربرد آن در زبان جاوا اسکریپت
- دستور try به برنامه نویس اجازه می دهد قطعه کدی که احتمال می دهد در آن خطا وجود داشته باشد را مشخص کند. این قطعه کد در حین اجرا برای خطایابی تست می شود.
- دستور catch نیز یک قطعه کد تعریف می کند که در صورت برخورد با خطا در ساختار (try block)، اجرا می شود.
- عبارت try، به شما اجازه می دهد تا، خطاهای یک بلاک از دستورات را تست کنید.
- اگر خطایی در قسمت try رخ دهد، در آن صورت دستوراتی که در در ساختار catch تعریف کردید، اجرا می شوند.
توجه داشته باشید که دستورات try و catch با هم و به صورت جفت بکار می روند.
try {
Block of code to try
}
catch(err) {
Block of code to handle errors
}
پرتاب خطا (throw error) در دوره آموزش طراحی سایت
هنگامی که خطایی رخ می دهد، جاوا اسکریپت به صورت خودکار متوقف شده و یک پیغام خطا صادر می کند.
در برنامه نویسی برای این منظور یک واژه ی تخصصی به نام throw تعریف شده است.
دستور throw
این دستور امکان ایجاد یک خطاهای سفارشی (custom error) را در اختیار برنامه نویس قرار می دهد. اصطلاح تخصصی که برای این منظور (ایجاد خطای سفارشی) در نظر گرفته شده throwing an exception می باشد. دستور throw باید همراه try و catch استفاده شود. Exception (استثنا) می تواند یک شی String، Number، یک Boolean و یا یک Object باشد.
throw "Too big" // throw a text
throw 500; // throw a number
اگر throw را به همراه try و catch بکار ببرید، می توانید جریان برنامه را تحت کنترل خود درآورده و پیغام های خطا سفارشی ایجاد کنید.
آموزش طراحی سایت : اعتبارسنجی ورودی (input validation)
مثال زیر ورودی را بررسی و اعتبار سنجی می کند. در صورت غلط بودن مقدار، یک پیغام خطا (استثنا( صادر (throw) می شود. پیغام خطای تولید شده، توسط ساختار (دستور) catch دریافت یا مهار (catch) شده و پیغام خطای سفارشی به دنبال آن نمایش داده می شود.
نمونه دو :
function myFunction() {
var message, x;
message = document.getElementById("message");
message = ""
x = document.getElementById("demo").value;
try {
if(x == "") throw "empty"
if(isNaN(x)) throw "not a number"
x = Number(x);
if(x < 5) throw "too low"
if(x > 10) throw "too high"
}
catch(err) {
message = "Input is " + err;
}
دستور Finally
این دستور به شما اجازه می دهد کد را پس از اجرای ساختارهای try & catch و صرف نظر از نتیجه ی بدست آمده اجرا کنید.
با دیگر مقالات در زمینه آموزش طراحی وبسایت همراه ما باشید..