آموزش طراحی وب با زبان ساده بخش اول xhtml
بسم الله الرحمن الرحیم
سلام خدمت دوستان عزیز بنده قصد دارم آموزش طراحی وب رو از ابتدا تا جائی که دانشم اجازه بده با زبانی ساده آموزش بدم قبل از شروع کار یه سری مقدمه باید بگم من خودم تا حالا یک بار هم نشده تو عمرم مقدمه یک کتاب رو خونده باشم همیشه این سئوال برام مطرح بود که نویسنده ها مقدمه رو واسه کی مینویسن چون هیشکی نمیخونه حالا که خودم اومد شروع کنم دیدم شتریه که باید در خونه هر کسی بخوابه ، سعی میکنم زیاد از این شاخه به اون شاخه نپرم تا باعث سردرگمی نشه
برای اینکه تاپیک منحرف نشه یک تاپیک دیگه به اسم http://www.webhostingtalk.ir/f151/44639/#post409004 زده شده که همه سئوال هاتون ، نظراتتون و ... رو میتونید در اون مطرح کنید بخاطر اینکه این تاپیک شلوغ نشه چرا که اگر همینجا بپرسید و و در آخر پاک سازی بشه شاید همون سئوالی که برای شما پیش اومده ممکن هست که برای دیگری هم پیش بیاد و بعد از پاک سازی دیگه وجود نداره فقط دوستان اگر پرسشی دارن همگام با مطالب باشه و نه جلوتر که باعث سردرگمی دیگر دوستان نشه
انواع ورژن های html
1)
html0.0 : در حقیقت جنبه تجاری نداره و بیشتر برای آزمایش مرورگرها نسبت به زبان تازه تاسیس شده مورد استفاده قرار گرفت (1994)
2)
html2.0 : در این ورژن تنها می توانستند وب سایتهائی رو طراحی کنند که فقط در داخل آنها متن بوده است text-base 1995
3)
html3.2 : این ورژن به عنوان بزرگترین ورژن html تلقی می شود چرا که در آن طراحان میتوانستند از عکس ، صدا و تصویر در طراحی خود استفاده نمایند اصطلاحاً به صدا و تصویر تحت وب java applet گفته میشود در این ورژن بود که طراح می توانست از یک تکنیک طراحی برای صفحات وب خود استفاده نمایند ، در این ورژن روش طراحی table معرفی شد
table چیست؟قرار گرفتن اجزاءیک سایت در جای مناسب
4)
html4.0 و html4.01 : در این ورژن قابلیت های Table بهبود پیدا کرد و همچنین قابلیت (internationalization) جهانی سازی به صفحات وب اضافه شد ، یعنی میتوان با زبان های مختلف جهان طراحی کرد مانند زبان فارسی
5)
xhtml1.0 => extensible hypertext markup language => html4.01+xml
یعنی وقتی xhtml رو میخونید هم xml هم html رو میخونید (زبانی که در این دوره آموزش داده میشه اون هم به این دلیل هست رسمی ترین ورژن هست و تمام مرورگرها ساپورتش می کنند یکی از چالش های مهم یک طراح این است که تمام مرورگرها طراحی اون رو ساپورت کنند
6)
html5.0 : ورژن جدیدی هست که به وجود آمده که استاندارد نیست به این دلیل که هنوز تمام مرورگر ها ساپورتش نمیکنن و قابلیت های جدیدش رو ساپورت نمیکنن به اصطلاح استفاده ازش هنوز زوده
---------- Post added at 11:16 PM ---------- Previous post was at 10:37 PM ----------
تنها نرم افزاری که در این دوره برای طراحی صفحات وب مورد استفاده قرار میگیره notepad هست ، از دوستان هم خواهش میشه فقط از همین نرم افزار استفاده کنن تا این زبان رو اصولی یاد بگیرن در دوره بعدی که آموزش css هست اون رو با نرم افزار Adobe Dreamweaver CS5 آموزش میدم و کار با اون نرم افزار رو هم یاد خواهید گرفت
تعریف وب سایت : به مجموعه صفحات وبی گفته میشود که از عنصر های مختلف تشکیل شده باشه web page , image , scripte , video , sound و غیره
مجموعه یک وب سایت باید در فولدر ویژه قرار بگیره که نامش rootfolder هست که تمام آبجکت های یک وب سایت در داخل اون قرار میگیره (برای متمرکز کردن فایل های یک وب سایت)
قوانین نام گذاری فایل ها در صفحات وب:
1) هرگز از گذاشتن space و special character در نام گذاری استفاده نشه ولی میشه برای فاصله داخل کلمات از underline و underscore استفاده کنید
2)از دادن نام های فارسی جداً خودداری کنید
3)نام مورد نظر نباید بیش از 255 کارکتر باشه
نکته:اگر بخواهیم زمانی داخل صفحه وب فارسی بنویسیم درست نشون داده نمیشه و باید encoding آن رو utf-8 بذارید (فقط تا زمانی که از notepad استفاده میکنیم)
مرورگر ها کد ها را تفسیر میکنند و به ما نشان میدن ، tag ها پارامتر اصلی برای رسیدن به آن هدف طراحی هستن
تگ ها با این علامت > شروع میشوند که اسمش opening angel braket گفته میشه و با علامت < بسته میشوند که به آن closing angel braket گفته میشه = > <tag>
چند نمونه تگ:
<p> تگ پاراگراف
<img> تگ عکس
انواع تگ ها :
تگ ها به دو دسته تقسیم میشوند
1 container 2 empty
کانتینر به تگ هائی گفته میشه که علاوه بر داشتن تگ باز (opening tag) تگ بسته (closing tag) هم دارند کلوزینگ تگ دقیقاً مانند اپنینگ تگ هست به همرا یک / اضافه یعنی
کد:
<opening tag>object</closing tag>
مثال: امپتی به تگ هائی گفته میشه که بر خلاف کانتینر ها دارا تگ کلوزینگ تگ نیستن و فقط اوپنینگ تگ دارن
مثال : نکته ائی که باید در نظر بگیرید تفاوت زبان html و xhtml است هر دوی این زبان هابرای طراحی وب هستن و تفاوت چندانی با هم ندارن البته درسته بعضی از تگ ها حذف و یا اضافه شدن ولی تفاوت اصلی این دو زبان در این هست که ما در زبان xhtml به هیچ وجه تگ های empty نداریم و همه تگ های باید بسته بشوند گذاشتن یک / در آخر تگ های empty باعث بسته شدن تگ های xhtml میشه
مثال:
2 فایل پیوست
پاسخ : آموزش طراحی وب با زبان ساده بخش اول xhtml
تگ های اساسی و بنیادی (fundamental tag):
این تگ به عنوان اصلی ترین تگ محسوب میشود و تمام تگهای دیگر ما بین این تگ قرار میگیرن
این تگ به عنوان پشتیبان صفحه وب تلقی میگردد و معمولاً هر آنچه بین این تگ نوشته شود ، کاربر در چارچوب سفید رنگ پنجره مرورگر نمی بیند ، معمولاً در این بخش دستورات پشتیبانی مانند کدهای javascript , css و ... نوشته میشود
مکان نوشتن این تگ در داخل head است و هر text ائی ما بین این تگ نوشته شود کاربر در titlebar مرورگر خود می تواند آن را ببیند (منظور همون نوشته بالای پنجره مرورگر هست یا نوشته داخل تب باز شده)
مکان نوشتن این تگ بعد از head است و هر آنچه داخل این تگ نوشته شود به عنوان طراحی قلمداد شده و کاربر در چهارچوب سفید رنگ پنجره مرورگر میتواند آن را ببیند (این تگ خیلی مهم هست)
توجه داشته باشید که کد های html به دو روش برای نوشتن داره یکی good coding و bad coding گود کدینگ منظم نوشتن هست و بد کدینگ به قولی یلخی کار کردن هست که اگر در آینده خودتون هم بخواهید تغییری داخلش انجام بدین یا کسی بخواد ازش سر در بیاره مخش سوت میکشه پس سعی کنید حتماً گود کدینگ رو رعایت کنید چرا که خیلی به کمک شما میاد
حالا عکس همین تگ هائی که معرفی شد رو میذارم تا منظور گود کدینگ رو متوجه بشید
فایل پیوست 5235
پاسخ : آموزش طراحی وب با زبان ساده بخش اول xhtml
doctype چیست؟
بزرگترین مشکل یک طراح وب سایت ، طراحی کردن صفحه وبی هست که در تمام مرورگر ها به صورت یکسان نشون داده بشه و از طرفی دیگر می دانیم ورژن های مختلف html و xhtml وجود داره که این هم به مشکلات طراح وب سایت خواهد افزود چرا که باید بدانیم مرورگرها هر طوری که دلشان بخواهد کدهای ما را تفسیر میکنند و هیچ استانداردی بین همه آنها وجود ندارد
لذا توسط doctype طراح میتواند دقیقاً به مرورگر اعلام نماید که از کدام ورژن html یا xhtml استفاده نموده است که مرورگر طبق آن قوانین کدها را تفسیر نماید ، لذا اگر doctype تعریف نشود مرورگر به صورت دلخواه تفسیر مینماید
مکان نوشتن doctype در اولین خط و حتی قبل از تگ html است
انواع doctype ها در html و xhtml :
1. strict
2. transitional
3. framest
داکتایپ اول : زمانی که طراح بخواهد از روش طراحی به نام css در وب سایت خود استفاده کند باید از این نوع داکتایپ استفاده کند
داکتایپ دوم : این نوع یکی از متداول ترین و پر کاربردترین هست و زمانی که طراح بخواهد از روش هائی مثل table به همراه css استفاده کنده از این داکتایپ استفاده میکند
داکتایپ سوم : در زمان قدیم یه روشی برای طراحی وجود داشت به اسم framest کهاین روش دیگه منسوخ شده و به تاریخ پیوسته ولی زمانی که بخوایم از روش framest استفاده کنیم قاعدتاً باید از این روش داکتایپ استفده کنیم
نکته : doctype ها به روش های طراحی بستگی دارند
اصلی ترین داکتایپ انواع ورژن های مختلف html و xhtml رو اینجا قرار میدم البته تعداد داکتایپ های خیلی بیشتر از اینهاست اگر علاقه داشتید میتونید کل داکتایپ ها رو از سایت www.w3.org (سازمان استاندارد) ملاحظه کنید
html 1.0 transitional
کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
html 4.01 transitional
کد:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
html 4.01 strict
کد:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
html 5
xhtml 1.0 transitional
کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
xhtml 1.0 strict
کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
xhtml 1.1
کد:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
xhtml mobile 1.0
کد:
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
http://www.w3.org/QA/2002/04/valid-dtd-list.html
2 فایل پیوست
پاسخ : آموزش طراحی وب با زبان ساده بخش اول xhtml
با notepad چگونه یک فایل با فرمت html بسازیم؟
همونطور که داخل عکس زیر میبینید گزینه save as رو انتخاب میکنیم و پایان اسم پیجمون html. رو مینویسیم ، اگر صفحه طراحی شده به زبان انگلیسی بود encoding رو تغییری نمیدیم اما اگر فارسی بود encoding رو روی utf-8 میگذاریم
برای باز کردن پیج مورد نظرمون روش کلیک راست میکنیم و گزینه open with رو انتخاب میکنیم و با یکی از مرورگرهای نصب شده بر روی سیستممون بازش میکنیم
http://www.webhostingtalk.ir/attachm...untitled-1-jpg
چند نکته:
1. تگی Tag که اتریبیوت Attribute دارد صد در صد یک مقدار ولیو Value دارد
2. مکان نوشتن attribute و value های یک تگ در داخل opening tag هست
3. attribute یک تگ توسط فاصله از خود تگ شروع میشه
4. attribute و value از طریق مساوی از هم نوشته میشوند و ولیو داخل کوتیشن " قرار میگیره
5. اگر یک تگ چند Attribute داشت اتریبیوت هارو با یک فاصله از هم جدا میکنیم
6. attribute های یک تگ مهم نیست کدام اول یا آخر نوشته بشن
نمونه:
کد:
<tag attribute="value">object</tag>
اولین تگی که آموزش داده میشه برای تغییر خصوصیات نوشته یا text هست که اسمش تگ font هست تگ فونت از نوع container هست و خودش به خودی خود هیچ کاری انجام نمیده و این اتریبیوت ها و ولیو ها هست که به نوشته ها خصوصیت میدن
تگ فونت سه اتریبیوت داره
1. color
2. size
3. face
اولی رنگ رو تغییر میده دومی اندازه رو و سومی فونت رو
به ترتیب مثال میزنیم تا بهتر متوجه بشید
1.color :
کد:
<font color="red">neveshte</font>
همینطور که مشخصه این تگ و اتریبیوتش باعث میشه رنگ نوشته عوض بشه و اینجا قرمز میشه
نکته : برای استفاده از رنگ از نوشته استفاده نمیکنیم و از هگزادسیمال ولیو استفاده میکنیم که به موقعش توضیح داده میشه ولی فعلاً از همین روش استفاده کنید و اسم رنگ رو بنویسید مثلاً pink black blue و ...
2.size
کد:
<font size="5">neveshte</font>
این تگ و ولیوهاش باز هم مشخصه که سایز رو تغییر میده
ولیو سایز از 1 تا 7 هست که بر واحد پوینت هست:
1 = 7.5pt
2 = 10pt
3 = 12pt
4 = 13.5pt
5 = 18pt
6 = 24pt
7 = 36pt
3.face
کد:
<font face="arial">neveshte</font><
این تگ هم فونت نوشته رو عوض میکنه
نکته:
1. ما اگر از این اتریبیوت استفاده نکنیم کاربر صفحه طراحی شده توسط ما رو با اون فونتی میبینه که پیشفرض مرورگر خودش هست و هر مرورگری یک فونت پیش فرض خودش رو داره
2. فونتی که ما برای طراحی استفاده میکنیم حتماً باید رو سیستم کاربر نصب باشه تا با اون فونت بتونه نوشته رو ببینه
3. میتونیم چنیدین فونت برای این اتریبیوت استفاده کنیم که اگر اولی را رو سیستمش نداشت با دومین فونتی که ما براش تعریف کردیم بیبینه و همینطور سومی چهارمی و ... برای استفاده از چند فونت باید از کاما , استفاده کنیم
4. در css3 میشه یک فونت که داخل سیستم کاربر نیست رو به نوعی داخل سیستمش نصب کنیم تا با فونت مورد نظر ما نوشته رو ببینه که تو دوره بعد آموزشش رو میدم
5.برای اطلاعات بیشتر خودتون مسیر فونت پیش فرض مرورگر فایر فاکس رو در پائین میتونید ببینید (برای اومدن منوبار در فایر فاکس باید کلید alt رو بزنید تا نمایش داده بشه)
tools=>options=>content=>fonts&color
مثال
کد:
<font face="arial,verdana,titr>neveshte</font>
و در آخر یک مثال کلی میزنم و یک شات میذارم تا کاملاً متوجه بشید
کد:
<font color="red' size="3" face="arial,verdana">neveshte</font>
http://www.webhostingtalk.ir/attachm...html-snap3-jpg
6 فایل پیوست
پاسخ : آموزش طراحی وب با زبان ساده بخش اول xhtml
تگ بولد و ایتالیک bold , italic
هرگز از تگ استفاده نکنید و از معادل آن استفاده کنید
کد:
<strong>object</strong>
این تگ برای پر رنگ کردن نوشته به کار برده میشود
فایل پیوست 5298
هرگز از تگ استفاده نکنید و از معادل آن استفاده کنید
این تگ برای کج کردن نوشته به کار برده میشود em مخفف کلمه emphasize است
فایل پیوست 5299
قانون nesting tag چیست؟ تگ های تو در تو : یعنی به صورت همزمان میتوانیم چنیدن تگ را به یک آبجکت نسبت بدهیم با رعایت این قانون که هر تگی که ابتدا از همه باز میشود در آخر از همه باید بسته بشود
دومثال میزنم یکی درست و یکی غلط تا درست متوجه بشید
مثال اول و درست:
کد:
<strong><em>text</em></strong>
مثال دوم و غلط :
کد:
<strong><em>text</strong></em>
فایل پیوست 5300
تگ پاراگراف paragraph
این تگ به اصطلاح کار اینتر را انجام میدهد
اتریبیوت تگ پاراگراف align هست
اتریبیوت الاین چهار ولیو دارد
1.left
2.right
3.center
4.justify
کد:
<p align="right">object</p>
فایل پیوست 5301
در صفحات وب دو حقیقت کاملاً پنهان وجود دارد که بر روی طراحی وب تاثیر مستقیم داره
حقیقت اول : چنانچه در کدهای html بیش از یک space زده شود هرگز space اضافه محاسبه نمیشود (یعنی اگر شما در جائی 10 اسپیس هم که بزنید فقط یکیش محاسبه میشه
حقیقت دوم : در صفحات وب چنانچه در یک آبجکت enter زده شود برای رفتن به سطر بعد حتی یک بار آن هم محاسبه نخواهد شد
انواع تگ ها:
1.container
2.empty
1)block-level
2)text-level
block-level : به تگ هائی گفته می شود که به صورت اتوماتیک object قبل از تگ و object بعد از تگ ، از خود تگ فاصله پیدا میکند یعنی به سط بعد از تگ می رود مانند تگ p
text-level : به تگ هائی گفته می شود که object قبل از تگ و object بعد از تگ از خود تگ فاصله پیدا نمی کند و ساختارشان به همان صورت حفظ خواهد شد تعداد این نوع تگ ها بیشتر از بلوک لول ها هستن مانند تگ font
تگ سطر بندی :
فایل پیوست 5302
5 فایل پیوست
پاسخ : آموزش طراحی وب با زبان ساده بخش اول xhtml
تگ لیست ها در طراحی وب:
لیست ها به دو دسته تقسیم می شوند:
1. ordered list
مثل : 1,A,a,I,i,...
2. unordered list
مثل : مربع تو پر ، دایره تو پر و دایره تو خالی
برای درست کردن ordered list باید از تگ ol استفاده کنیم و آیتم لیست ها هر کدام باید در تگ li قرار بگیره
مثال همراه با تصویر تا بهتر متوجه بشید:
http://www.webhostingtalk.ir/attachm...html-snap1-jpg
تگ ol دو اتریبیوت دارد :
1. type
2. start
اتریبیوت type مشخص میکند که لیست با چه چیزی شروع بشه و ولیو آن میتواند عدد ، حروف انگلیسی بزرگ یا کوچیک ، اعداد یونانی و ... باشه
مثلاً : A,a,1,i,I,...
اتریبیوت start مشخص میکند که لیست از کجا شروع شود مثلاً از حرف پنج حروف انگلیسی شروع باشه و ولیو آن یک عدد هست که نشان گر این هست که از کجا شروع شود
http://www.webhostingtalk.ir/attachm...html-snap2-jpg
برای درست کردن undered list باید از تگ ul استفاده نمائیم و گزینه ها باید در تگ li قرار بگیره
http://www.webhostingtalk.ir/attachm...html-snap3-jpg
تگ ul یک اتریبیوت دارد type و ولیو آن سه گزینه است circle دایره تو خالی ، square مربع تو پر ، disc دایره تو پر
(در آینده در css آموزش ساخت بولت رو آموزش خواهیم داد ولی در html تنها میشه از همین سه بولت استفاده کرد)
http://www.webhostingtalk.ir/attachm...html-snap4-jpg
special characters چیست : به کارکتر هائی گفته مشود که به صورت معمول بر روی کیبورد وجود ندارد مانند علامت کپی رایت
اسپشیال کارکتر دو نوع ساختار دارد
اسمی : که با علامت & آمپرسند شروع میشود و با علامت ; سیمی کالر تمام میشود
عددی : مانند اسمی شروع و پایان می شود ولی از علامت # نامبر یا شارپ استفاده میشود
چند اسپشیال کارکتر اصلی
http://www.webhostingtalk.ir/attachm...html-snap5-jpg
6 فایل پیوست
پاسخ : آموزش طراحی وب با زبان ساده بخش اول xhtml
امروز میخوام تگ img رو آموزش بدم ولی قبلش راجع به سه فرمت متداول عکس ها یه توضیحی میدم در آینده شاید بدردتون بخوره و اطلاعات عمومیتون بالا تر بره
به جدول پائین دقت کنید
http://www.webhostingtalk.ir/attachm...html-snap6-jpg
transparancy : به عکسی گفته میشود که بک گراند ندارد و رنگ بک گراند آبجکت زیری خودش رو میگیره
animation : به عکس های متحرک گفته میشه (معمولاً در مواقعی استفاده میشه که بخواهیم جائی جلوه توجه بکنه)
interlacing : در بسیاری از سایت ها عکس حرف اول رو میزنه مثل سایت های گالری که باید در موقع استفاده از عکس این کار رو هوشمندانه استفاده بکنیم روال به این شکل هست که یک عکس کوچک قرار داده شده که حجمش هم از نظر رزولیشن هم از نظر کیلوبایتی کمتر هست و با کلیک بر روی اون عکس بزرگتر از نظر رزولیشن و کیلوبایتی رو میبینیم ، اگر دقت کنید در زمان لود شدن یک عکس اون عکس به یکباره نشون داده نمیشه بلکه به صورت تدریجی و مرحله به مرحله از بالا به سمت پائین نشان داده میشه به این قابلیت اینترلیسینگ گفته میشه
comperssion : یکی از عوامل بسیار مهم در طراحی وب این هست که از عکس هائی استفاده کنیم که حجم کمی داشته باشن تا صفحه راحت تر لود بشه کامپریشن در طراحی وب به دو دسته تقسیم میشود
1. lossy : در این نوع فشرده سازی اگر سایز عکس از نظر کیلوبایتی کاهش پیدا کنه عکس هم به تدریج کیفیت خودش رو از دست میده (یعنی عناصر تشکیل دهنده عکس یا همان پیکسل کاملاً مشخص میشه)
2. lossless : در این نوع فشرده سازی وقتی سایز عکس از نظر کیلوبایتی کاهش پیدا میکند کیفیت عکس از بین نمیرود
نکته : قابلیت ترنسپرنسی در ورژن ie6 ساپورت نمیشود
نکته : فرمت gif دو نوع ورژن دارد 87a که انیمیشن رو ساپورت نمیکنه و 89a که انیمیشن رو ساپورت میکنه
نکته : عکس هائی که تحت وب هستن رزولیشنشون باید رو 72 پیکسل باشه چون بیشتر از اون به هیچ دردی نمیخوره
web addressing : آدرس دهی در صحات وب به دو دسته تقسیم میشن relative و absolute
ریلیتیو : این نوع آدرس دهی یکی از متداول ترین آدرس دهی هست زمانی استفاده میشه که بخواهیم آبجکتی رو از داخل یک وب سایت (rootfolder) به داخل صفحه ائی وارد کنیم که آن صفحه هم داخل همون وب سایت هست ، به عبارتی اگر بخواهیم در یک وب سایت به صفحه دیگری برویم که آن صفحه هم در همان وب سایت قرار دارد از آدرس دهی relative استفاده میکنیم
ابسولوت : این آدرس دهی نسبت به قبلی کمتر مورد استفاده قرار میگیره زمانی که بخواهیم آبجکتی رو از خارج از یک وب سایت (rootfolder) وارد یکی از صفحات سایتمان نمائیم از این آدرس دهی استفاده میکنیم ، به عبارت دیگه اگر بخواهیم از یکی از صفحات وب سایتمان به یک وب سایت دیگر برویم از این آدرس دهی استفاده میکنیم این آدرس دهی با پروتوکول آغاز میشه
تگ img از خانواده empty هست پس بنابراین به این صورت نوشته میشه
اتریبیوت تگ img هست : src
ولیو آن آدرس عکسی هست که میخواهیم قرار بدیم
http://www.webhostingtalk.ir/attachm...html-snap1-jpg
نکته : همیشه در rootfolder یک پوشه بسازید به اسم images و همه عکس هارو در اون ذخیره کنید
نکته : برگشتن به یک ریشه عقب تر از استفاده میکنیم و اگر خواستیم به دو ریشه عقب تر برویم باید از استفاده کنیم
مثال:
کد:
<img src="http://www.webhostingtalk.ir/images/pasha.jpg" />
اتریبیوت دیگر تگ img هست : border
ولیو اون یک عدد هست این اتریبوت دور عکس حاشیه ایجاد میکنه اگر روی 0 باشه بدون حاشیه خواهد بود و هر چه عدد بزرگتر باشه حاشیه ضخیم تر خواهد بود
http://www.webhostingtalk.ir/attachm...html-snap2-jpg
اتریبیوت دیگر تگ img هست : hspace
ولیو آن یک عدد هست ، برای فاصله قرار دادن افقی بین آبجکت ها استفاده میشه هم از راست هم از چپ بصورت مساوی
http://www.webhostingtalk.ir/attachm...html-snap3-jpg
اتریبیوت دیگر تگ img هست : vspace
ولیو آن یک عدد هست ، برای فاصله قرار دادن عمودی بین آبجکت ها استفاده میشه هم از بالا هم از پائین بصورت مساوی
http://www.webhostingtalk.ir/attachm...html-snap4-jpg
نکته : به عنوان طراح این نکته رو مورد نظر قرار بدین که هیچوقت نبایت از دو اتریبیوت وی اسپیس و اچ اسپیس استفاده کنید به دو دلیل یکی اینکه ممکن هست عکس به صورت متناسب تغییر پیدا نکنه و دیگری اینکه با استفاده از این دو اتریبیوت سایز عکس شما از نظر کیلو بایتی تغییری نمیکنه و زمان لود شدن اون عکس به همان اندازه زمان لود شدن عکس با رزولیشن خودش هست
اتریبیوت دیگر تگ img هست : align
ولیو آن top , bottom , middle , left , right هست وظیفه این اتریبیوت کنار هم قرار دادن یک عکس و یک متن هست
http://www.webhostingtalk.ir/attachm...html-snap5-jpg
نکته : چنانچه در داخل تگ img از اتریبیوت align استفاده شده باشه و متن کنار تگ img به واسطه jusstify شدن در داخل تگ p باشه به صورت استثنائی تگ p خاصیت بلاک لول بودن خودش رو از دست میده (فقط از لحاظ اینتر زدن)
نکته : برای کنار هم قرار دادن یک متن و یک عکس باید حتماً متن مورد نظرمون سمت راست تگ img قرار داشته باشه
اتریبیوت دیگر تگ img هست : alt
این اتریبویت خیلی مهم هست و حدالمقدور ازش استفاده کنید ، این اتریبیوت سه کار انجام میده ولیو اون هم بسته به این هست که بخواهید چه نوشته ائی داشته باشه مثلاً عکسی طر صفحه وبتو طراحی کردید که لینک شده به صفجه home به این شکل نوشته میشه
کد:
<img src="http://www.webhostingtalk.ir/images/pasha.jpg" alt="pasha" title="pasha" />
1.tooltip
2.replace text when
3.search engine optimization (seo)
اولی زمانی که موس رو روی یک عکس قرار بدیم نوشته ائی به ما نشون میده
دومی زمانی که یک عکس به هر دلیلی لود نشه بجای اینکه ضربدر به ما نشون بده متن داخل اتریبیوت آلت رو به ما نشون میده این گزینه زمانی خودش رو خیلی خوب نشون میده که یک سایت لینک هاش از عکس درست شده باشن
سومی هم که کاملاً مشخص هست در موتور های جستجو خیلی به کمکتون میاد (در مقطع خودش کاملتر راجع به سئو توضیح داده میشه)
نکته: تولتیپ در فایر فاکس عمل نمیکنه قابلیت تولتیپ در ورژنهای جدید ie ساپورت نمیشه
نکته: اتریبیوتی که تولتیپ رو در فایرفاکس ساپورت میکنه title هست
این هم برای اطلاعات عمومی خودتون میگم ، برای غیر فعال کردن عکس در مرورگر ie و firefox
alt>internet option>advance>mulrrimedia>show picture
alt>option>content>load image automatically
اتریبیوت دیگر تگ img هست : ismap و usemap
این اتریبیوت رو زمانی بهتون آموزش میدم که لینکهارو آموزش داده باشم اگر الان آموزش بدم سردرگم میشید فقط اگر من یادم رفت شما یادم بندازید
2 فایل پیوست
پاسخ : آموزش طراحی وب با زبان ساده بخش اول xhtml
خوب چند روز بود تاپیک رو آپدیت نکردم مشقاتونو بذارید رو میز خط بزنم هر کی هم تکالیفشو انجام نداده بره یه تاپیک بزنه صد بار از روی این تاپیک بنویسه
امروز راجع به رنگ ها توضیح میدم
در طراحی صفحات وب ما به سه صورت میتونیم از رنگ ها استفاده کنیم
1. نام بردن رنگ مثلاً red
2. RGB value
3. hexadecimal value
ما تعداد 16.777.256 رنگ داریم که از سه رنگ اصلی قرمز ، آبی و سبز تولید میشن
روش اول : همین ابتدا فهمیدیم که روش اول اصلاً قابل استفاده نیست چون این تعداد اسم برای رنگ موجود نیست و اگر هم بود حفظ کردنش عاقلانه نبود
روش دوم : ساختار RGB از سه بخش درست شده -,-,- هر کاما سه رنگ اصلی هست و هر خط تیره از اعداد 0 (سیاه) تا 255 (سفید) هست
مثال:
red : 255,0,0
green : 0,255,0
blue : 0,0,255
white : 255,255,255
black : 0,0,0
طریقه نوشتن RGB در html به این شکل هست
کد:
<body bgcolor="34,120,40">
که ما از این روش هم استفاده نمیکنیم
روش سوم : این روش بهترین روش هست و ساختار اون به این شکل هست -- -- --# دو تای اول قرمز ، دوتای دوم سبز و دوتای آخر آبی عدد 0 مشکی و عدد 9 سفید
مثال:
red : #ff0000
green : #00ff00
blue : #0000ff
black : #000000
white : #ffffff
طریقه نوشتن هگزادسیمال در html به این شکل هست
کد:
<body bgcolor="#54fd5a">
web-safe color چیست؟ : وب سایت طراحی شده توسط طراح تو تمام سیستم های دنیا با هر امکانات سخت افزاری و نرم افزاری دیده میشه ولی در بعضی از موارد با توجه با قابلیت سیستم کاربر رنگ ها به صورت درست تفسیر نمیشن و نزدیک ترین رنگ به آن رنگ نمایش داده میشه به این رویداد color dithering گفته میشه
رنگ های وب سیف به رنگ هائی گفته میشه که در تمام سیستم های دنیا با هر امکانات سخت افزاری و نرم افزاری به همان صورت دیده میشن و color dithering در آنها اتفاق نمی افتد تعداد این رنگ ها از بین 16.777.256 رنگ فقط 216 رنگ هست البته این مطلب نباید اینگونه تفسیر بشه که طراح خودش رو به این 216 رنگ فقط محدود کنه فکر نکنم دیگه کسی الان سیستم های خیلی قدیمی داشته باشه و اگر هم داره مشکل خودش هست
حالا چجوری رنگ های web-safe در RGB و Hexadecimal شناسائی کنیم:
RGB
0,51,102,153,204,255 اگر از این رنگ ها استفاده بشه وب سیف هست
دو مثال که راحت تر متوجه بشید:
51,102,254 وب سیف نیست
51,102,255 وب سیف هست
Hexadecimal
00,33,66,99,cc,ff اگر همه اینها باشند وب سیف هست
سه مثال که راحت تر متوجه بشید:
#0033cc وب سیف هست
#006666 وب سیف هست
#006665 وب سیف نیست
حالا با این اطلاعات تگ hr رو بهتون آشنا میکنم
تگ hr از خانواده empty هست و block-level
hr=Horizontal Rule=خط افقی
hr چهار اتریبیوت داره :
1. color که رنگ رو مشخص میکنه و ولیوش یک رنگ هست
2. size که ضخامت خط رو مشخص میکنه و ولیوش یک عدد هست
3. width که طول خط رو مشخص میکنه که میتونه بر حسب pixel یا percent باشه
pixel : زمانی که از این مقدار برای کنترل طول خط استفاده کنیم در هر شرایطی (کوچک و بزرگ کردن پنجره مرورگر) اندازه تغییر پیدا نمیکنه و اندازه ثابت میمونه
percent : زمانی که از این مقدار برای کنترل طول خط استفاده کنیم اندازه بر حسب درصد خواهد بود مثلاً اگر بر حسب 50% قرار داده بشه اندازه خط ما 50 درصد اندازه مرورگر خواهد بود یعنی اگر عرض مرورگر ما به اندازه 20 باشه عرض خط 10 خواهد بود
4.َ align که جهت قرار گرفتن خط را مشخص میکند و سه ولیو دارد : left , right , center
مثال:
http://www.webhostingtalk.ir/attachm...html-snap3-jpg
تگ های sub و sup ساب برای پائین قرار دادن یک آبجکت زیر یک آبجکت استفاده میشه و ساپ برای بالا قرار دادن
من خودم این دو تگ رو به این شکل حفظ کردم نیم دایره b پائین هست آبجکت پائین قرار میگیره و نیم دایره p بالا هست آبجکت بالا قرار میگیره
مثال:
http://www.webhostingtalk.ir/attachm...html-snap4-jpg
تو پست بعدی سعی میکنم مبحث اصلی در html که table ها باشه رو آموزش بدم
2 فایل پیوست
پاسخ : آموزش طراحی وب با زبان ساده بخش اول xhtml
روش های طراحی صفحات وب:
بطور کلی برای ساختن یک وب سایت و قرار دادن آبجکت در مکان مورد نظر طراح وب سایت باید روشی رو برای خودش انتخاب بکنه ، در واقع این روش هست که باعث بهتر پیچیده شدنعناصر در یک صفحه وب هست
برای این کار سه روش طراحی وجود داره:
1. table
2. frameset
3. css
table : این روش اولین روش و پایه ائی ترین روش برای طراحی هست در حقیقت از این روش در تیبل ها و سلول های آنها در جهت کنار هم قرار دادن آبجکت ها استفاده میکنیم ، در حال حاضر این روش بهترین روش نیست ولی برای یاد گرفتن بهترین روش دانش و اطلاعات مربوط به تیبل بسیار لازم هست
frameset : این روش منسوخ شده و از بین رفته و وب سایت های مبتنی بر این روش خیلی خیلی کم هستن
css : این روش بهترین روش هست که از مزایای بزرگ آن میشه به سرعت لود شدن فوق العاده سریع وب سایت اشاره کرد
تعریف table : به یک ماتریس دوبعدی گفته میشه که از سلول ها در جهت قرار دادن آبجکت های خودمون استفاده میکنیم
فایل پیوست 5611
همانطور که داخل عکس بالا مشاهده میکنید
ما دو تا سطر (row) و سه تا ستون (column) داریم و شش سلول (cell)
تگ table از خانواده تگ های container و block-level هست
برای درست کردن سطر و ستون در table باید از تگ tr برای ساخت سطر و td برای ساخت ستون استفاده کنیم
tr = table row
td = table data
یک مثال برای اینکه بهتر متوجه بشید:
فایل پیوست 5612
به اتریبیوت و ولیوش border="1" توجه نکنید فقط برای اینکه بهتر متوجه بشید این اتریبیوت و ولیوش رو زودتر گذاشتم تا ساختار تیبل رو متوجه بشید
پاسخ : آموزش طراحی وب با زبان ساده بخش اول xhtml
پاسخ : آموزش طراحی وب با زبان ساده بخش اول xhtml
من در فایل منیجر میخوام فایل ایجاد کنم ولی وقتی فایلا رو از کامپیوترم میارم در فایل منیجر قرار میدم تو وب سایتم کدها نمایش داده میشند چکار کنم
پاسخ : آموزش طراحی وب با زبان ساده بخش اول xhtml
بسیار کار پسندیده و خوبی هست ، منتها اگر آموزش html5 بود خیلی خوب بود. بنده هم اگر خواستید می تونم کمک کنم.
پاسخ : آموزش طراحی وب با زبان ساده بخش اول xhtml
میشه اموزش تبدیل فایل psd به کد رو اموزش بدید
پاسخ : آموزش طراحی وب با زبان ساده بخش اول xhtml
سلام میشه آموزش تصویری هم قرار بدید
منظورم بصورت فیلم هستش
پاسخ : آموزش طراحی وب با زبان ساده بخش اول xhtml
میشه تگ هارو هم یاد بدید اخه برای ترجمه قالب به وبلاگ باید تگ ها را بلد باشیم
پاسخ : آموزش طراحی وب با زبان ساده بخش اول xhtml
من یه سری آموزش از جاهای مختلف پیدا کردم که قرار میدم
انواع ورژن های html
1)
html0.0 : در حقیقت جنبه تجاری نداره و بیشتر برای آزمایش مرورگرها نسبت به زبان تازه تاسیس شده مورد استفاده قرار گرفت (1994)
2)
html2.0 : در این ورژن تنها می توانستند وب سایتهائی رو طراحی کنند که فقط در داخل آنها متن بوده است text-base 1995
3)
html3.2 : این ورژن به عنوان بزرگترین ورژن html تلقی می شود چرا که در آن طراحان میتوانستند از عکس ، صدا و تصویر در طراحی خود استفاده نمایند اصطلاحاً به صدا و تصویر تحت وب java applet گفته میشود در این ورژن بود که طراح می توانست از یک تکنیک طراحی برای صفحات وب خود استفاده نمایند ، در این ورژن روش طراحی table معرفی شد
table چیست؟قرار گرفتن اجزاءیک سایت در جای مناسب
4)
html4.0 و html4.01 : در این ورژن قابلیت های Table بهبود پیدا کرد و همچنین قابلیت (internationalization) جهانی سازی به صفحات وب اضافه شد ، یعنی میتوان با زبان های مختلف جهان طراحی کرد مانند زبان فارسی
5)
xhtml1.0 => extensible hypertext markup language => html4.01+xml
یعنی وقتی xhtml رو میخونید هم xml هم html رو میخونید (زبانی که در این دوره آموزش داده میشه اون هم به این دلیل هست رسمی ترین ورژن هست و تمام مرورگرها ساپورتش می کنند یکی از چالش های مهم یک طراح این است که تمام مرورگرها طراحی اون رو ساپورت کنند
6)
html5.0 : ورژن جدیدی هست که به وجود آمده که استاندارد نیست به این دلیل که هنوز تمام مرورگر ها ساپورتش نمیکنن و قابلیت های جدیدش رو ساپورت نمیکنن به اصطلاح استفاده ازش هنوز زوده
تنها نرم افزاری که در این دوره برای طراحی صفحات وب مورد استفاده قرار میگیره notepad هست ، از دوستان هم خواهش میشه فقط از همین نرم افزار استفاده کنن تا این زبان رو اصولی یاد بگیرن در دوره بعدی که آموزش css هست اون رو با نرم افزار Adobe Dreamweaver CS5 آموزش میدم و کار با اون نرم افزار رو هم یاد خواهید گرفت
تعریف وب سایت : به مجموعه صفحات وبی گفته میشود که از عنصر های مختلف تشکیل شده باشه web page , image , scripte , video , sound و غیره
مجموعه یک وب سایت باید در فولدر ویژه قرار بگیره که نامش rootfolder هست که تمام آبجکت های یک وب سایت در داخل اون قرار میگیره (برای متمرکز کردن فایل های یک وب سایت)
قوانین نام گذاری فایل ها در صفحات وب:
1) هرگز از گذاشتن space و special character در نام گذاری استفاده نشه ولی میشه برای فاصله داخل کلمات از underline و underscore استفاده کنید
2)از دادن نام های فارسی جداً خودداری کنید
3)نام مورد نظر نباید بیش از 255 کارکتر باشه
نکته:اگر بخواهیم زمانی داخل صفحه وب فارسی بنویسیم درست نشون داده نمیشه و باید encoding آن رو utf-8 بذارید (فقط تا زمانی که از notepad استفاده میکنیم)
مرورگر ها کد ها را تفسیر میکنند و به ما نشان میدن ، tag ها پارامتر اصلی برای رسیدن به آن هدف طراحی هستن
تگ ها با این علامت > شروع میشوند که اسمش opening angel braket گفته میشه و با علامت < بسته میشوند که به آن closing angel braket گفته میشه = > <tag>
چند نمونه تگ:
<p> تگ پاراگراف
<img> تگ عکس
انواع تگ ها :
تگ ها به دو دسته تقسیم میشوند
1 container 2 empty
کانتینر به تگ هائی گفته میشه که علاوه بر داشتن تگ باز (opening tag) تگ بسته (closing tag) هم دارند کلوزینگ تگ دقیقاً مانند اپنینگ تگ هست به همرا یک / اضافه یعنی
امپتی به تگ هائی گفته میشه که بر خلاف کانتینر ها دارا تگ کلوزینگ تگ نیستن و فقط اوپنینگ تگ دارن
مثال :
نکته ائی که باید در نظر بگیرید تفاوت زبان html و xhtml است هر دوی این زبان هابرای طراحی وب هستن و تفاوت چندانی با هم ندارن البته درسته بعضی از تگ ها حذف و یا اضافه شدن ولی تفاوت اصلی این دو زبان در این هست که ما در زبان xhtml به هیچ وجه تگ های empty نداریم و همه تگ های باید بسته بشوند گذاشتن یک / در آخر تگ های empty باعث بسته شدن تگ های xhtml میشه
بازم اگر چیزی پیدا کردم قرار میدم
پاسخ : آموزش طراحی وب با زبان ساده بخش اول xhtml
ممنون کی به مراحل پیشرفته میپردازید؟
