آموزشگاه آنلاین وب آموزشگاه آنلاین آموزش برنامه نویسی تحت وب
نوشته های مرتبط
همانطور که میدانیم صفحات وب صفحاتی هستند که بیشتر در اینترنت به کار برده میشوند در حقیقت تمام صفحات وب با HTML نوشته میشود اگر صفحه نیز با استفاده از Php , ASP یا زبان های دیگر ساخته شده باشد خروجی آن فقط دستورات Html و Javascript می باشد . Html یا Hyper Text Markup Language به ما توانایی تعیین فرمت متن ، اضافه کردن تصاویر ، صدا و ویدئو و … در صفحات اینترنت را میدهد.یک صفحه وب چیزی جز یک فایل از نوع متن با پسوند Htm نیست با باز کردن این فایل توسط یک ویرایشگر ساده مثل notepad شما میتوانید کد های HTML رو ببینید و همچنین برای دیدن خروجی اصلی HTML میتوانید از مرورگرهای اینترنتی همانند Internet Explorer ، Mozila و … استفاده کنید.
تگ یا Tag در HTML چیست ؟
به دستورات برنامه نویسی توسط HTML تگ یا TAG گفته میشود و در علامت های “ < ” یا “ > ” قرار میگیرند.این تگ ها به صورت های مختلف نوشته میشوند یک دسته از این تگها تگ هایی هستند که در هر جایی از صفحه ممکن است درج شود مانند تگ <HR> و هر وقت این کد درج شود بلافاصله یک خط افقی درج میگردد.یک سری تگ یا TAG هستند که باید ابتدا و انتهای مشخصی داشته باشند یعنی این تگ ها دارای ابتدا و انتها هستند و از این نوع تگ ها زیاد استفاده میشود مانند تگ <B> که زمانی این تگ باز میشود تا بسته شدن این تگ هر نوشته ای که مابین این دو تگ باشد BOLD میشود و انتهای تمام تگ ها با یک اسلش به پایان میرسد مانند <B/> یک سری تگ دیگر هستند که علاوه بر اینکه ابتدا و انتهای آن مشخص است این تگ ها وجودشان مستلزم داشتن یک سری پارامتر است مانند تگ Font که دارای پارامتر های گوناگون است به صورت مثال:
<Font Face =”Tahoma” Size =20>www.itpro.ir</Font>
اگر کد بالا را خروجی بگیریم میبینیم که آدرس سایت itpro با فونت Tahoma و با اندازه 20 نمایان میگردد.البته تعداد این پارامتر ها میتواند زیاد باشد.
آشنایی با برخی از تگ ها
تگ <Hn>
از این تگ معمولاً برای استفاده از عناوین استفاده میشود البته به جای n باید یک عدد به کار برده شود این اعداد از 1 تا 6 هستند h1 یعنی بزرگترین حالت و h6 یعنی کوچکترین حالت برای متن ها به کار برده میشود.
تگ <I> یا <em>یا <address>
این تگ نیز باید با اسلش به پایان برسد وظیفه این تگ مورب کردن یا ایتالیک متن است .
تگ <B> یا <Strong>
این تگ برای Bold کردن متن به کار برده میشود.
تگ <U>
برای نمایش متن به صورت زیر خط دار این تگ به کار می آید
تگ <Strike>
این تگ نیز برای این به کار میرود که یک خط را روی متن میکشد
تگ <Font>
برای اینکه بتوانیم فونت یا قلم یک متن را مشخص کنیم از این تگ استفاده میکنیم ، اما اگر از این تگ استفاده نکنیم مرورگر اینترنت از فونت پیشفرض برای نمایش متن ها نشان میدهد و اگر فونتی را انتخاب کنیم که آن فونت در سیستم موجود نباشد باز هم همان فونت پیشفرض را برای ما به نمایش میگذارد.این تگ نیز دارای پارامتر هایی است مثلاً پارامتر Face برای تعیین نوع فونت به کار میرود شما میتوانید در این پارامتر با کاما چندین فونت را به کار ببرید تا اگر فونت ها در سیستم مقابل موجود نبود از یک فونت دیگر استفاده کند ، یکی دیگر از پارامتر های این تگ پارامتر Size است که اندازه فونت را نمایش میدهد حتی میتوان با استفاده از پارامتر color=red مثلاً رنگ قرمز را برای فونت انتخاب نمود :
تگ <BR>
این تگ از جمله تگ هایی است که نیاز به پایان ندارد اما با پیدایش این تگ خط شکسته میشود به عبارتی متن به خط بعدی ادامه پیدا میکند
تگ <Center>
نتیجه استفاده از این تگ این است که متن داخل این تگ وسط چین می شود و در وسط مرورگر به نمایش در می آید
تگ <P>
از این تگ برای ایجاد پاراگراف استفاده میشود در انتهای متن این تگ باید بسته شود.
تگ <Pre>
کلاً HTML با فاصله رابطه خوبی ندارد یعنی فاصله ها را در نظر نمیگیرد و خصوص خالی میان کلمات را نمیبیند و کلمات را پشت سر هم قرار میدهد این تگ که باید پایان هم داشته باشد برای این منظور است که هر کلمه یا پاراگرافی را در این تگ قرار دهید همانگونه که تایپ می شوند نمایش داده میشود و فاصله ها را هم در نظر میگیرد.
تگ <Ul>
این تگ مخفف Unordered List یا لیست هایی که به ترتیب موارد در آنها تاثیر ندارد می باشد هر لیست از آیتم یا مواردی تشکیل شده است که هر یک از این موارد با تگ <Li> (که این تگ نیز دارای پایان است در در داخل تگ <Ul> نوشته میشود .تگ Li مخفف ListItem یا همان موارد لیست است.
آموزش html
تصویر بالا برگرفته از کد زیر است برای اینکه این تگ را درک کنید بهتر بود با تصویر مثالی میزدم
learning html
تگ <Ol>
این تگ مخفف Ordered List یا لیست هایی که ترتیب موارد در آنها تاثیر دارد می باشد هر لیست از آیتم یا مواردی تشکیل شده است که هر یک از این موارد بین تگ های <Ol> , </Ol> با تگ
<Li> , </Li> نوشته میشود تگ Li مخفف listeItem است. برای این تگ نیز مثالی میزنیم:
amoozesh Html
تصویر بالا برگرفته از کد زیر است
آموزش قدم به قدم HTML
تگ <bdo>
این تگ نیز دارای انتها است و برای راستچین یا چپ چین نوشتن متن به کار برده میشود اگر
dir=”rtl”
تعریف شود حروف از راست به چپ قرار میگیرد یعنی کلمه بر عکس می شود و اگر dir برابر با ltr باشد تغییری در کلمه ایجاد نمی شود به عنوان مثال:
Html آموزش
کدی که برای تصویر فوق نوشته شده است در زیر قرار گرفت
آموزش طراحی سایت
تگ <div> و <span>
این دو تگ از مهمترین تگ های طراحی صفخات وب هستند این دو تگ را برای دسته بندی متون و سپس استایل دادن مناسب به این دسته ها میتوان استفاده نمود یک کلاس در CSS میتواند به div و Span نسبت داده شود و این دو تگ از نظر ظاهری هیچ شکل خاصی ندارند و تنها با استایل شکل ظاهری شان تغییر میکند و تنها تفاوت div نسبت یه span در این است که div جدا کننده صفحه است زیرا div مانند پاراگراف ابتدا و انتهای متن را می بندد.
تگ<sup> و <sub>
از تگ sup برای نمایش توان و از تگ sub برای نمایش اندیس استفاده میشود البته برای فرمول های شیمیایی و ریاضی بیشتر کاربرد دارد مثال زیر را دقت کنید هم کد و هم خروجی را در تصویر نمایان است
آموزش ظراحی سایت
تگ <Object>
از این تگ برای قراردادن یک فایل خارجی در فایل HTML استفاده می شود ، میتوان از این تگ برای قراردادن فایل های فلش و یا انواع فایل های ویدئویی استفاده نمود مثال زیر را ببینید
با پارامتر زیر آدرس فیلم خود را میتوانید معرفی نمایید
<param name=”src” value=”example.mpg”/>
با پارامتر زیر فیلم را به صورت خودکار میتوانید پخش کنید
<param name=”autoplay” value=”true”/>
و اما یک مثال عملی برای این تگ که کد و نحوه نمایش را میتوانید در تصویر زیر ببینید
آموزش گام به گام طراحی سایت
تگ <img>
این تگ از پرکاربرد ترین تگ ها می باشد و از جمله تگ هایی است که پایان ندارد کاربرد این تگ برای نمایش عکس در صفحات وب است استفاده از crs یا source همان آدرس تصویر است و alt نوشته ای است که Tooltip موس برای آن تصویر به نمایش در می آید
قدم به قدم با طراحی سایت
تگ <a>
این تگ نیز دارای پایان است و از این تگ برای ایجاد لینک ارتباطی به یک صفحه دیگر استفاده می شود این تگ دارای خاصیت target است که به مکان باز شدن صفحه جدید اشاره دارد و این خاصیت مقادیر Blank یعنی باز شدن در یم صفحه جداگانه و parent یعنی باز شدن در صفحه اصلی و self یعنی باز شدن در همان صفحه و در نهایت top یعنی باز شدن در یک صفحه که بالا تر از صفحات دیگر است را دارا است. به عنوان مثال
مقدمات یادگیری طراحی وب
ضمناً برای ساختن لینک ایمیل کافی است از دستور زیر استفاده شود:
<a href=”mailto:webmaster@mywebsite.com”>send feedback</a>
تگ <table>
هر جدول از سط و ستون تشکیل شده است در HTML سطر هر جدول را با تگ <tr> و ستون ها را با تگ <td> یا به عبارتی محتویات داخل هر سلول را مشخص میکنیم. مانند:
<table>
<tr>
<td> row 1 cell 1 </td>
<td> row 1 cell 2 </td>
<td> row 1 cell 3 </td>
</tr>
<tr>
<td> row 2 cell 1 </td>
<td> row 2 cell 2 </td>
<td> row 2 cell 3 </td>
</tr>
</table>
یکی از مشکلاتی که زبان HTML دارد ایستا بودن آن است یعنی شما نمیتوانید هیچ برنامه ای بنویسید که بتواند پردازشی روی مطالب داشته باشد یعنی نمیتوانید صفحه لاگینی داشته باشید که بفهمد آیا کاربر مجاز است برای ورود یا خیر اما برای حل این مشکل ما باید از زبان های ASP.Net یا جاوا اسکریپت یا vb Script را در کنار HTML به کار بگیریم .حتماً شنیدید که با برنامه Notepad هم میتوان برنامه نوشت اما بیایید با هم این داستان را عملی پیاده کنیم یک مثال بسیار ساده برنامه Notepad را باز میکنیم و کد های زیر را داخل این ویرایشگر دوست داشتنی تایپ میکنیم
Image
در نهایت موقع save کردن باید با پسوند html یا html ذخیره کنید سپس با یک مرورگر باز میکنیم و خروجی را مشاهده مینماییم.
آموزش گام به گام HTML
آموزش قدم به قدم HTML
آموزش کامل HTML
خب این هم از اولین برنامه همانطور که دیدید خیلی سخت نبود فقط باید کمی کار با تگ ها را یاد بگیریم ، یک صفحه وب دو بخش کلی دارد بدنه که همان Body هست و تقریباً تمام وب سایت در این قسمت نوشته میشود و قسمت سر یا همان Head که یک سری اطلاعات از جمله تیتر یا Title صفحه رو شامل میشه و علاوه بر تیتر فرمت ها و اسکریپتهای زبان جاوا اسکریپت در این قسمت نوشته میشود.
نکته: تو رفتگی های کد ها و همچنین فاصله ها در این کد ها اصلاً ربطی به نمایش این کد ها ندارد و فقط صرفاً جهت تسهیل در کد نویسی می باشد.اما اگر بخواهیم محتویات یک صفحه وب را ببینیم میتوانیم از منوی View گزینه Source را انتخاب میکنیم مانند تصاویر زیر تا با کد هایی که این صفحه را تشکیل دادند آشنا شویم البته همین مرورگر ها نیز کمک میکنند تا راحت تر کد ها را ویرایش کنیم و از همین منو و گزینه Source بتوانیم Notepad را باز کنیم و اطلاعات را تغییر بدهیم.
