جلسه اول – مرور HTML

مرور html

html که یک زبان توصیف سند محسوب میشود بدنه اصلی صفحات وب را تشکیل می دهد، از این زبان برای ساخت ظاهر سایت و امکانات آن نظیر فرم های ثبت نام استفاده می شود، html به تنهایی نمیتواند نیازهای یک سایت تعاملی را تامین کند بلکه تنها می تواند یک صفحه ایستا را ایجاد نماید به همین جهت برای بهبود گرافیکی و ایجاد امکان تعامل و ساخت صفحات پویا dynamic زبان ها و امکانات دیگری نظیر css برای تنظیم ظاهر گرافیکی عناصر html و JavaScript برای ایجاد تعامل سمت کاربر استفاده می شود، همچنین به جهت کار با پایگاه های داده و ذخیره فایل و سایر فعالیت های مرتبط با سرور از زبان هایی همچون php یا asp استفاده می شود. به علاوه ی این زبان ها با استفاده از مفهومی به اسم CGI می توان از سایر زبان های برنامه نویسی نظیر c و c++ نیز برای پیاده سازی وب سایت استفاده نمود.

 

ساختار صفحات :

هر صفحه با تگ <html> شروع شده و با <html/> پایان می یابد ، و سایر قسمت های صفحه بین این دو تگ تعریف می شوند.

<head></head>

هدر یا سربرگ برای ذخیره اطلاعاتی نظیر عنوان صفحه ، توضیحات متا شامل کلمات کلیدی ، توضیحات و … و همچنین برای قراردادن استایل های css و کد های JS استفاده می شود.

تگ <title> عنوان صفحه داخل آن نوشته می شود
تگ های متا : <meta name=”keyword”>
مشخصه name در این تگ می تواند مقادیری مانند keyword ، description، author و … داشته باشد سپس مقدار آن را باید با استفاده از مشخصه content تعیین نمود

تگ <style> : کد های css را داخل این تگ تعریف می کنیم

تگ <script> برای نوشتن کد های اسکریپتی نظیر javascript از این تگ استفاده می شود، میتوان از زبان های دیگر نظیر vbScript و … نیز استفاده نمود.

<body></body>
تگ بدنه اصلی صفحه بوده و تمامی عناصر صفحه در این تگ قرار میگیرند

تگ های مربوط به نگارش متن :

<p> : ایجاد پاراگراف در متن
<b> متن داخل این تگ به صورت پررنگ نشان داده می شود
<i> برای نمایش متن به صورت مورب استفاده می شود
<tt> برای نمایش متن با فونت شبیه به ماشین های تایپ قدیمی استفاده می شود
<h1> برای نوشتن سر تیتر از تگ های h استفاده شده که از شماره ۱ که بزرگترین حالت بوده تا شماره ۶ که کوچکترین سایز آن هست استفاده می شود

لینک :

برای لینک دادن از تگ <a> استفاده شده که دارای مشخصه های زیر می باشد :

href: آدرس جایی که لینک به آن داده می شود
target: هدف لینک را مشخص میکند که برای باز شدن در صفحه جدید باید مقدار آن برابر blank_ باشد

دکمه : تگ <button> برای ایجاد دکمه استفاده شده و می توان با قراردادن آن داخل تگ <a> لینک را در صورت کلیک بر روی دکمه مورد نظر باز نمود

ساخت فرم ها :

برای ساخت فرم می بایست ابتدا با استفاده از تگ form آغاز فرم مشخص شود سپس عناصر فرم شامل ناحیه متنی، دکمه ثبت ، دکمه کشویی و … را داخل آن تعریف نمود.

مشخصات تگ فرم عبارتند از :
name : نام فرم را مشخص میکند
action: اسم یا آدرس اسکریپتی هست که داده های فرم باید برای آن ارسال شوند اگر مقداری نداشته باشد فرم به صفحه جاری اطلاعات را ارسال میکند
method : این مشخصه دارای دو مقدار مجاز post و get می باشد ، در صورت انتخاب post اطلاعات از طریق بسته http به سرور ارسال شده و کاربر چیزی مشاهده نمی کند ولی در صورت انتخاب متد get داده ها از طریق url قابل مشاهده خواهند بود
enctype=”multipart/form-data : درصورتی که میخواهیم از طریف فرم فایل آپلود شود باید مشخصه enctype را برابر با multipart-form-data انتخاب نمود

انواع ورودی از طریق فرم با تگ input ایجاد می شوند مشخصه type بیانگر نوع ورودی بوده که از text برای ورودی متنی ، از password برای ساخت فیلد ورود رمز عبور و از number برای ورود اعداد استفاده می شود.

تگ <select> برای ایجاد منوی آبشاری یا کشویی (drop down) استفاده می شود که گزینه های آن با تگ <option> مشخص می شوند

<select name=country>
<optio value=iran>
<option value=iraq>

<select/>

برای ارسال فایل نیز کافیست از <input type=file> استفاده شود تا کاربر بتواند فایل مورد نظر خود را انتخاب و ارسال نماید پس از ارسال باید فایل مورد نظر در سمت سرویس دهنده توسط زبانی مانند php کنترل شده و در صورت عدم وجود مشکل ذخیره شود

قراردادن عکس : از تگ img برای قراردادن تصویر استفاده شده که مشخصه src آدرس فایل عکس width عرض و height ارتفاع آن را مشخص می کند که متوانند مقادیری با واحد پیکسل داشته باشند مانند ۲۰۰px یا به صورت درصدی از محل قرار گیری خود بیان شوند مثلا width=50% یعنی تصویر به اندازه نیمی از محل قرارگیری خود می باشد در صورتی که در بدنه اصلی باشد به اندازه نصف صفحه درمی آید ولی اگر داخل یک تگ دیگر مانند تگ div باشد به اندازه نیمی از عرض آن تگ خواهد بود