آموزش 0 تا 100 برنامه نویسی تحت وب (HTML)

[علی خسروشاهی]

ایجاد Header

<div id ="header">
<h1><a href="#"><img src="images/particle.png" alt="Return to the home page"/></a></h1>
<ul id="categoris">
<li> <a href="#"> Articles </a> </li>
</ul>
</div>

در این بخش ابتدا به ایجاد header یا قسمت بالای صفحه که شامل لوگو و آیتم های مربوط به منوی کاربری می باشد می پردازیم. لازم به تذکر است که تمامی کد های این قسمت در داخل تگ div بخش قبل با ID=container قرار میگیرند.

به این منظور از یک عنصر div دیگر با id = header استفاده میکنیم. اسامی که برای ID ها انتخاب می کنیم از هیچ قاعده مشخص و ثابتی پیروی نمی کنند و انتخاب آنها کاملاً به سلیقه طراح بستگی دارد، ولی بیشتر اوقات برای سادگی کار و نیز راحتی یادآوری ، از نام هایی استفاده می شود که متناسب با کاربردشان باشند. پس از قرار دادن تصویر مربوط به لوگوی صفحه در ابتدا، برای ایجاد آیتم های منو از عنصر <UL> که مخفف unordered list یا لیست نامرتب است استفاده می شود. تقریبا استفاده از این روش برای ایجاد منو های کاربری یک روش استاندارد یک روش استاندارد در بین همه طراحان در سراسر جهان به شمار می رود.

با استفاده از عنصر <UL></UL> که در داخل خود میتواند هر تعدادی از عناصر <li></li> را قرار دهد ، این امکان به طراحان داده می شود که تنها با اعمال ویژگی به عنصر <UL> بر روی تمامی عناصر زیر مجموعه آن ، آن اثر یا ویژگی را اعمال نمایند.

برای هریک از آیتم های منو که به صورت یک پیوند (link) هستند، باید مقصدی را مشخص کرد که آن مقصد عموماً آدرس صفحه ای دیگر می باشد ولی در اینجا چون ما صفحه دیگری برای این منظور نداریم ویژگی href را در تگ <a></a> مساوی با کاراکتر# قرار میدهیم و این به این معناست که با کلیک روی آن آیتم ، هیچ اتفاقی رخ نمی دهد.

 

انجمن رمان نویسی دانلود رمان

[علی خسروشاهی]

دو نکته :

از عنصر <ul> زمانی استفاده می شود که قصد داشته باشیم تعدادی آیتم های مشابه و در کنار یکدیگر ایجاد کنیم.

با استفاده از عناصر H1 تا H6 می توانیم عناوین را در صفحه ایجاد نماییم. هر چه مقدار این عدد کوچکتر باشد ، سایز آن عنوان بزرگتر است.

 

انجمن رمان نویسی دانلود رمان

[علی خسروشاهی]

فرم ها :

تقریباً همه روزه ، حین استفاده از وب سایت های مختلف با آن ها روبه رو میشویم. این فرم ها میتوانند مانند فرم جستوجو در موتور جستوجوی گوگل بسیار ساده باشند و یا همانند فرم های ثبت نام در یک انجمن اینترنتی ، بسیار پیچید باشند.

در این مثال ، برای ایجاد کادر جستوجو ، از فرم ها استفاده می کنیم. فرم ها چند ویژگی مهم دارند که لازم است پیرامون آنها صحبت شود.

ویژگی نخست آنها method است که تعیین می کند اطلاعات چگونه به سمت سرویس دهنده Server ارسال شود. این ویژگی می تواند دو مقدار post و get را بپذیرد که به علت مسائل امنیتی بهتر است از مقدار post برای آن استفاده شود.

ویژگی دیگر آن Action است که معمولا آدرس صفحه ای در سمت سرور می باشد که وظیفه اعتبار سنجی و ثبت اطلاعات فرم را بر عهده دارد . به عنوان مثال ، مقدار این ویژگی می تواند به صورت زیر باشد:

"Action = "Submit.php​

برای ایجاد تکست باکس ها و دکمه های مختلف در داخل یک عنصر فرم ، باید همگی در داخل عنصر <fieldset></fieldset> قرار گیرند.

برای یک فرم ، کنترل های مختلفی نیز میتوان ایجاد کرده و نوع آنها را از طریق ویژگی type مشخص نمود:

دکمه های رادیویی: Radio

اطلاعات موجود در فرم را پاک کردن : reset
و...

 

انجمن رمان نویسی دانلود رمان

[علی خسروشاهی]

انواع ورودی فرم HTML :

در Html عنصر <input type=""> یک عنصر مهم فرم است . مقدار صفت type="" در عنصر ورودی انواع مختلفی که نوع فیلد اطلاعات را مشخص میکند ، مانند کد زیر

<input type="text"> که یک کادر متنی را نمایش میدهد.

توضیحات	نوع =""
یک فیلد ورودی متنی تک خطی تعریف میکند.	Text
یک فیلد ورودی رمز ورود تک خطی تعریف میکند.	Password
یک دکمه ارسال برای ارسال داده های فرم به سرور تعریف میکند.	Submit
یک دکمه شروع مجدد برای پاک کردن و بازنشانی مقادیر موجود در فیلدها تعریف می کند	reset
یک دکمه رادیویی برای انتخاب یک گزینه تعریف می کند	Radio
کادرهای انتخاب را برای انتخاب چند گزینه های مختلف از فرم تعریف می کند.	checkbox
یک دکمه فشاری ساده تعریف می کند که می تواند برای انجام یک کار روی یک رویداد برنامه ریزی شود.	button
برای انتخاب فایل از حافظه دستگاه تعریف می شود	File
یک دکمه ارسال گرافیکی تعریف می کند.	Image

منبع : آموزش انواع ورودی فرم در HTML به زبان ساده - سریع آسان

 

انجمن رمان نویسی دانلود رمان