وب (HTML-CSS)

جهت آموزش برنامه نویسی وب HTML CSS ارایه می شوند.

جهت استفاده از شیوه نامه درون صفحه ای از تگ style در قسمت head از صفحه استفاده می شود. به عنوان مثال کد زیر یک شیوه نامه صفحه ای در نظر می گیرد:

<head>
        <style>
            p{
                color: black;
                font-family: 'b yekan';
                direction: rtl;
                text-align: center;
                margin: 15px; 
            }
            .heading{
                font-size: 450%;
            }
            .maintext{
                font-size: 150%;
                color: mediumblue;
            }
        </style>
    </head>

همانطوریکه مشاهده می شود اولین دستوری که در تگ style آمده است دستور p‌ می باشد که برای پاراگراف بندی است. رنگ نوشته (color) فونت (font-family) جهت نوشته (direction) چینش نوشته (text-align) و حاشیه نوشته (margin) در آن مقدار دهی شده اند. در متونی که فارسی و انگلیسی دارند حتما باید جهت نوشته از نوع راست به چپ (rtl) تعیین شوند.

دستور بعدی با نقطه شروع شده است و بیانگر ایجاد یک کلاس است. از کلاس می توان در تمام دستورها استفاده کرد. که اندازه نوشته (font-size) در کلاس heading مشخص شده است.

دستو بعدی نیز یک کلاس است با نام maintext. دو صفت اندازه نوشته (font-size) و رنگ نوشته (color) مشخص شده اند.

<body>
    <div style="width: 100%; background-color: lightskyblue;direction: rtl;">
        <p class="heading">دانشکده فنی امام باقر</p>
    </div>

در دستور body یک بخش جدید به صفحه وب اضافه شده است که با دستور div مشخص شده است. در داخل دستور div شیوه نامه دستوری اعمال شده است. شیوه نامه دستوری با کلمه style در دستور مشخص می شود. مواردی نظیر پهنا (width) و رنگ پس زمینه (background-color) و جهت نوشته مشخص شده اند. که با کلاس heaading در دستور p نمایش می دهند.

<div style="width: 15%;
        float: right;background-color: lightskyblue;">
            
            <center><a href="images.jpg">
                <img src="send.png" width="100px" height="100px">
            </a></center>
            <a href="images.jpg">
                <p class="maintext">موشک</p>
            </a>
        </div>

یک بخش جدید در صفحه وب ایجاد شده است که در آن یک عکس که بصورت لینک درآمده نشان داده می شود. با کلیک بر عکس، آنرا با ابعاد واقعی نمایش می دهد. در زیر عکس نیز یک نوشته قرار دارد که از کلاس maintext استفاده می کند.

کد کامل صفحه وب در زیر آمده است:

<html>
    <head>
        <style>
            p{
                color: black;
                font-family: 'b yekan';
                direction: rtl;
                text-align: center;
                margin: 15px; 
            }
            .heading{
                font-size: 450%;
            }
            .maintext{
                font-size: 150%;
                color: mediumblue;
            }
        </style>
    </head>
    <body>
    <div style="width: 100%; background-color: lightskyblue;direction: rtl;">
        <p class="heading">دانشکده فنی امام باقر</p>
    </div>

        <div style="width: 15%;
        float: right;background-color: lightskyblue;">
            
            <center><a href="images.jpg">
                <img src="send.png" width="100px" height="100px">
            </a></center>
            <a href="images.jpg">
                <p class="maintext">موشک</p>
            </a>
        </div>
        <div style="width: 15%;
        float: right;background-color: lightskyblue;">
            
            <center><a href="images.jpg">
                <img src="send.png" width="100px" height="100px">
            </a></center>
            <a href="images.jpg">
                <p class="maintext">موشک</p>
            </a>
        </div>
    </body>
</html>

عنصر <form>

از عنصر <form> HTML برای ایجاد فرم HTML برای ورودی کاربر استفاده می شود:

.

</form>

عنصر <form> ظرفی برای انواع مختلف عناصر ورودی است ، مانند: زمینه های متن ، کادرهای تأیید ، دکمه های رادیویی ، دکمه های ارسال و غیره.

تمام عناصر مختلف فرم در این فصل آورده شده است: عناصر فرم HTML.

________________________________________

عنصر <input>

عنصر HTML <input> پرکاربردترین عنصر شکل است.

یک عنصر <input> بسته به ویژگی نوع ، از بسیاری جهات قابل نمایش است.

در اینجا چند نمونه آورده شده است:

نوع توصیف

<input type = “text”> یک قسمت ورودی متن تک خطی را نمایش می دهد

<input type = “radio”> یک دکمه رادیو را نمایش می دهد (برای انتخاب یکی از بسیاری از گزینه ها)

<input type = “checkbox”> کادر تأیید را نمایش می دهد (برای انتخاب صفر یا بیشتر از بسیاری از گزینه ها)

<input type = “submit”> دکمه ارسال را نمایش می دهد (برای ارسال فرم)

<input type = “button”> دکمه قابل کلیک را نمایش می دهد


Text Fields کادرهای متنی

<form>
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname">
</form>

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

<form>
  <input type="radio" id="male" name="gender" value="male">
  <label for="male">Male</label><br>
  <input type="radio" id="female" name="gender" value="female">
  <label for="female">Female</label><br>
  <input type="radio" id="other" name="gender" value="other">
  <label for="other">Other</label>
</form>

چک باکس ها Checkboxes

<form>
  <input type="checkbox" id="vehicle1" name="vehicle1" value="Bike">
  <label for="vehicle1"> I have a bike</label><br>
  <input type="checkbox" id="vehicle2" name="vehicle2" value="Car">
  <label for="vehicle2"> I have a car</label><br>
  <input type="checkbox" id="vehicle3" name="vehicle3" value="Boat">
  <label for="vehicle3"> I have a boat</label>
</form>

دکمه ارسال Submission Button
دکمه ای را برای ارسال داده های فرم به یک فرم دهنده کنترل می کند.
فرم-اداره کننده معمولاً فایلی در سرور است که دارای اسکریپت پردازش داده های ورودی است.
فرم دهنده در ویژگی عمل فرم مشخص شده است.

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

ویژگی نام برای <input>
توجه داشته باشید که هر قسمت ورودی باید دارای ویژگی نام باشد تا ارسال شود.
اگر ویژگی نام حذف شود ، مقدار فیلد ورودی اصلاً ارسال نمی شود.
مثال
این مثال مقدار فیلد ورودی “First name” را ارسال نمی کند:

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" value="John"><br><br>
  <input type="submit" value="Submit">
</form>

صفات فرم HTML


این فصل ویژگی های مختلف عنصر HTML را توصیف می کند.


صفت Action
صفت action عملیاتی را که باید هنگام ارسال فرم انجام شود ، تعریف می کند.
معمولاً وقتی کاربر روی دکمه ارسال کلیک می کند ، داده های فرم به پرونده ای در سرور ارسال می شود.
در مثال زیر ، داده های فرم به فایلی به نام “action_page.php” ارسال می شود. این پرونده شامل یک اسکریپت سمت سرور است که داده های فرم را مدیریت می کند:

<form action="/action_page.php">
  <label for="fname">First name:</label><br>
  <input type="text" id="fname" name="fname" value="John"><br>
  <label for="lname">Last name:</label><br>
  <input type="text" id="lname" name="lname" value="Doe"><br><br>
  <input type="submit" value="Submit">
</form>

صفت target
ویژگی target مشخص می کند که پاسخی را که پس از ارسال فرم دریافت می شود ، نمایش دهد.
ویژگی target می تواند یکی از مقادیر زیر را داشته باشد:

blank_ پاسخ در یک پنجره یا برگه جدید نمایش داده می شود self پاسخ در پنجره فعلی نمایش داده می شود
parent_ پاسخ در کادر والدین نمایش داده می شود
top_ پاسخ در بدنه کامل پنجره نمایش داده می شود
framename_ پاسخ در یک iframe نامگذاری شده نمایش داده می شود.

مقدار پیش فرض _ self است که به این معنی است که پاسخ در پنجره فعلی باز می شود.
مثال
در اینجا ، نتیجه ارسال شده در یک برگه مرورگر جدید باز می شود:

<form action="/action_page.php" target="_blank">

ویژگی method
مشخصه روش ، روش HTTP را مشخص می کند تا هنگام ارسال داده های فرم ، از آن استفاده شود.
داده های فرم را می توان به عنوان متغیرهای GET یا به عنوان معامله POST ارسال کرد.
روش پیش فرض HTTP هنگام ارسال داده های فرم GET است.
مثال
این مثال هنگام ارسال داده های فرم از روش GET استفاده می کند:

<form action="/action_page.php" method="get">

مثال
این مثال هنگام ارسال داده های فرم از روش POST استفاده می کند:

<form action="/action_page.php" method="post">

یادداشت های مربوط به GET:
• داده های فرم را به دو جفت نام / مقدار به URL اضافه می کند
• هرگز از GET برای ارسال اطلاعات حساس استفاده نکنید! (داده های فرم ارسالی در URL قابل مشاهده است!)
• طول یک URL محدود است (2048 نویسه)
• برای ارسال فرم در مواردی که کاربر بخواهد نتیجه را علامت گذاری کند مفید است
• GET برای داده های غیر ایمن مانند رشته های جستجوی Google مفید است
یادداشت ها در مورد POST:
• داده های فرم را در قسمت اصلی درخواست HTTP ضمیمه می کند (داده های فرم ارسالی در URL نشان داده نمی شود)
• POST محدودیتی در اندازه ندارد و می تواند برای ارسال مقدار زیادی داده استفاده شود.
• فرم های ارسالی با POST را نمی توان نشانه گذاری کرد.

<form action="/action_page.php" method="get">
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <input type="submit" value="Submit using GET">
  <input type="submit" formmethod="post" value="Submit using POST">
</form>

تصاویر می توانند طراحی و ظاهر یک صفحه وب را بهبود بخشند.

از برچسب HTML برای جاسازی تصویر در یک صفحه وب استفاده می شود.
تصاویر از نظر فنی در یک صفحه وب درج نمی شوند. تصاویر به صفحات وب پیوند داده می شوند. برچسب یک فضای نگهداری برای تصویر ارجاع شده ایجاد می کند.
برچسب خالی است ، فقط حاوی ویژگی است و برچسب بسته ندارد.
برچسب دو ویژگی لازم را دارد:
• src – مسیر تصویر را مشخص می کند
• alt – متن دیگری را برای تصویر مشخص می کند

<img src="url" alt="alternatetext">

ویژگی src مورد نیاز مسیر (URL) به تصویر را مشخص می کند.
توجه: هنگام بارگیری یک صفحه وب ؛ در آن لحظه ، مرورگر است که تصویر را از یک وب سرور می گیرد و آن را به صفحه وارد می کند. بنابراین ، اطمینان حاصل کنید که تصویر در رابطه با صفحه وب در همان نقطه باقی مانده است ، در غیر این صورت بازدید کنندگان شما نماد لینک شکسته را دریافت می کنند. اگر مرورگر نتواند تصویر را پیدا کند ، نماد لینک شکسته و متن alt نشان داده می شود. اگر alt به دلایلی کاربر نتواند آن را مشاهده کند (به دلیل کند بودن اتصال ، خطا در ویژگی src یا اگر کاربر از صفحه خواننده استفاده می کند) ، ویژگی alt مورد نیاز یک متن جایگزین را ارائه می دهد.
مثال

<img src="img_chania.jpg" alt="Flowers in Chania">

می توانید از مشخصه سبک برای تعیین عرض و ارتفاع تصویر استفاده کنید.

<img src="img_girl.jpg" alt="Girl in a jacket" style="width:500px;height:600px;">

گر تصاویر خود را در یک زیر پوشه دارید ، باید نام پوشه را در ویژگی src وارد کنید:

<img src="/images/html5.gif" alt="HTML5 Icon" style="width:128px;height:128px;">
<img src="programming.gif" alt="Computer Man" style="width:48px;height:48px;">

از ویژگی float CSS استفاده کنید تا تصویر در سمت راست یا چپ متن شناور شود:

مثال:

<p><img src="smiley.gif" alt="Smiley face" style="float:right;width:42px;height:42px;">
The image will float to the right of the text.</p>

<p><img src="smiley.gif" alt="Smiley face" style="float:left;width:42px;height:42px;">
The image will float to the left of the text.</p>

رنگهای HTML با نام رنگهای از پیش تعیین شده یا با مقادیر RGB ، HEX ، HSL ، RGBA یا HSLA مشخص می شوند.

در HTML می توان با استفاده از نام رنگ ، رنگی را مشخص کرد:

Tomato
Orange
DodgerBlue
MediumSeaGreen
Gray
SlateBlue
Violet
LightGray

مثال:

<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>

از ویژگی HTML Style برای افزودن سبک ها به یک عنصر مانند رنگ ، قلم ، اندازه و موارد دیگر استفاده می شود.

ویژگی HTML Style

تنظیم سبک یک عنصر HTML می تواند با ویژگی Style انجام شود.
ویژگی HTML Style دارای نحو زیر است:

<tagname style="property:value;">

خاصیت یک ویژگی CSS است. مقدار یک مقدار CSS است.

مثال
رنگ پس زمینه یک صفحه را روی blueblue تنظیم کنید:

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>

مثال
رنگ زمینه را برای دو عنصر مختلف تنظیم کنید:

<body>

<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>

</body>