آموزش طراحی وب سایت

آموزش طراحی وب سایت | جلسه ششم | آشنایی با Attribute

سلام خدمت تمامی دوستان و همراهان طرح سوم؛ در قسمت های قبل آموزش طراحی وب سایت با کدنویسی HTML آشنایی کامل پیدا کردید. امیدوارم اندکی تمرین کرده باشید. 😉  در این قسمت کمی بیشتر شما را با مباحث ویژگی المان ها آشنا می کنیم . در قسمت های قبل به خاطر دارید که برای هر تگ یا المان یک یا چند ویژگی می توانستیم تعریف کنیم و این ویژگی ها در قسمت کدهای CSS استفاده می شوند. در این قسمت مهم ترین ویژگی هایی که در قسمت های بعدی آموزش طراحی وب سایت نیاز می شود را معرفی می کنیم .
چند نکته را قبل از شروع یادآوری می کنیم :
– تمامی تگ های HTML می توانند دارای Attribute باشند.
– Attribute ها ویژگی های اضافی به تگ اختصاص می دهند.
– Attribute ها همیشه در تگ استارت قرار می گیرند. در قسمت پایانی تگ هیچ ویژگی درج نمی شود و تگ پایان صرفا برای بستن تگ استفاده می شود.
– Attribute ها همیشه با فرمت مقابل در تگ استارت قرار می گیرند: “name=”value

ویژگی href :
تگ لینک HTML با تگ a معرفی می شود و برای لینک دهی از ویژگی href استفاده می شود و لینک بصورت مقدار در داخل href قرار می گیرد:
<a href=”http://tarhesevom.com”>click here</a>

ویژگی SRC :
تمامی عکس ها در HTML داخل تگ img قرار می گیرند.
برای تعریف نمودن مسیر عکس از ویژگی src استفاده می شود :

<“img src=”img.jpg>

ویژگی width و height :
برای مشخص نمودن سایز عکس از این ویژگی استفاده می شود و می توان برای عکس مقدار ارتفاع و عرض را تعیین نمود:
<“img src=”img_girl.jpg” width=”500″ height=”600>

ویژگی Alt :
این ویژگی یک متن جایگزین به عکس می دهد که در صورتی که عکس به هر دلیلی قابل مشاهده نباشد این متن به جای عکس نمایش داده می شود. همچنین این ویژگی بسیار در سئو سایت موثر می باشد.
<“img src=”img.jpg” alt=”alternative text here>

ویژگی style :
این ویژگی برای المان استایل های مختلفی همانند سایز ، فونت، رنگ و … را ایجاد می کند.
<p style=”color:red”>I am a paragraph</p>
ویژگی lang :
این ویژگی در تگ <html> درج می شود. این ویژگی مشخص کننده زبان صفحه مورد نظر می باشد.
موارد استفاده این ویژگی در اپلیکیشن ها و همچنین موتورهای جستجو می باشد.
<“html lang=”fa-IR>

ویژگی title :
این ویژگی در داخل تگ p استفاده می شود و در قسمتی که این کد درج شود در هنگامی که موس بر روی نوشته قرار گیرد متن مورد نظر بصورت tooltip نمایش داده می شود.
<“p title=”I’m a tooltip>

نکاتی که در پایان باید حتما به آنها توجه کنید : 
– حتما تاکید میکنیم که از ویژگی ها در کدنویسی خود با حروف کوچک استفاده نمایید.
– حتما در تمامی ویژگی علامت “” را قرار دهید و بدون علامت ویژگی تعریف نکنید.
– ممکن است این سوال بوجود آید که اگر میخواستید داخل ویژگی همانند title عبارتی را درج نمایید که خود دارای “” باشد باید چکار کرد. در این حالت می توانید عبارت ویژگی را داخل ” قرار دهید و سپس متنی را که دارای علامت “” هست را داخل آن درج نمایید.
<‘p title=’Tarhe “Design” Sevom>
– همچنین می توانید برعکس این حالت را هم انجام دهید که علامت “” برای ویژگی تعریف شود و در داخل آن از ” استفاده نمایید.

این قسمت از آموزش طراحی وب سایت هم به پایان رسید. فراموش نکنید که حتما تمرین داشته باشید . هر سوالی هم وجود داشت در قسمت نظرات درج کنید کارشناسان ما در اسرع وقت به سوالات شما عزیزان پاسخ می دهند.
با طرح سوم همراه باشید…

نویسنده


Avatar

مهرداد کشمیری

مهرداد کشمیری، مدیر دیجیتال مارکتینگ شرکت طرح سوم، با سابقه بیش از 8 سال در زمینه طراحی وب سایت و کارهای گرافیکی مختلف. یادگیری مطالب جدید یکی از سرگرمی های اصلی من هستش.