Layouts در HTML
- نوشته شده توسط سعید صبح خیز
- منتشرشده در html
در صورت مفید بودن این مقاله حتما نظر خودتان را در پایین مطلب برای ما ارسال کنید
کلاس - Class در HTML عنوان مقاله آموزشی قبل بود که در سایت فعال شد . در این مقاله میخواهم به سراغ یکی از اصلی ترین موارد آموزشی مربوط به HTML بروم . Layouts در HTML را می توان پایان بخش مقدماتی و ورود به بخش متوسط آموزش HTML دانست . شاید بتوان گفت یکی از دشوار ترین بخش های فراگیری زبان سی اس اس (CSS) نحوه ایجاد یک Layout از طریق آن باشد. هماطنرو که میدانید تگ های اچ تی ام ال (HTML) به همان ترتیبی که نوشته می شوند روی صفحه نمایش داده می شوند که به چنین چیزی Normal Flow گفته می شود. زبانCSSاین امکان را به طراحان سایت می دهد تا کدهای اچ تی ام ال خود را از لحاظ بصری زیبا و چشمگیر کنند. پس از فراگیری نحوه استفاده از تگ های HTML، اساسی ترین گام یادگیری استفاده از کدهای سی اس اس است چرا که امروزه کمتر سایتی را می توان یافت که صرفاً با استفاده از زبان اچ تی ام ال طراحی شده باشد.
CSS که مخفف واژگانCascading Style Sheetsبه معنای "الگو های آبشاری" است را می توان برای طراحی اجزای صفحه از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریباً هر چیزی که در طراحی صفحه استفاده می شودبه کار برد.
سی اس اس به زبان ساده برای نمایش چیدمان و جلوه‌های تصویری (مانند نوع قلم، رنگ و اندازه‌ها)، زیبایی جهت طراحي انواع سبک يا استايل براي صفحه هاي وب مورد استفاده قرار می گیرد.
با استفاده از کدهايCSS همچون font-size، font-، font-style، font-variant،text-weightalign، border-radius، background-color، box-shadow و ... ميتوان براي صفحه وب طرح‌ها و قالب‌هاي متنوعي طراحي کرد.
از مهمترین مزایایCSS میتوان به انعطاف پذیری بالای کدهای سی اس اس، کم حجم کردن فایل های HTML و بالتبع آن پایین آمدن مدت زمان بارگذاری صفحه، هماهنگی راحت تر نمایش ظاهر سایت در مرورگر های مختلف، امکان طراحی سایت به صورت Responsive یا "واکنش گرا" و ... نام برد.
فرض کنید میخواهم یک لی اوت 4 ستونه ایجاد کنم .(یک ستون بالای صفحه / یک ستون سمت چپ / یک ستون وسط و ستون چهارم هم مربوط به پایین صفحه ) من از تگ <div> به عنوان اصلی ترین تگ این بخش استفاده می کنم تا راحت تر بتوانم تگهای اصلی مربوط به ظاهر که در style قرار گرفته است را در ظاهر قالب اعمال کنم . به کدهای زیر دقت کنید .
<!DOCTYPE html>
<html>
<head>
<style>
#header {
background-color:black;
color:white;
text-align:center;
padding:5px;
}
#nav {
line-height:30px;
background-color:#eeeeee;
height:300px;
width:100px;
float:left;
padding:5px;
}
#section {
width:350px;
float:left;
padding:10px;
}
#footer {
background-color:black;
color:white;
clear:both;
text-align:center;
padding:5px;
}
</style>
</head>
<body>
<div id="header">
<h1>City Gallery</h1>
</div>
<div id="nav">
London<br>
Paris<br>
Tokyo<br>
</div>
<div id="section">
<h2>London</h2>
<p>
London is the capital city of England. It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.
</p>
<p>
Standing on the River Thames, London has been a major settlement for two millennia,
its history going back to its founding by the Romans, who named it Londinium.
</p>
</div>
<div id="footer">
Copyright © W3Schools.com
</div>
</body>
</html>
خروجی در مرورگر باید همانند تصویر زیر شود .
