در ادامه آموزش های html در این فسمت به آموزش تگ div پرداخه ایم و فیلم مربوط به تگ div را می توانید در ادامه مشاهده بکنید :
تگ Div
تگ div برای تقسیم بندی صفحات وب استفاده می شود و در طراحی سایت بیش تر استفاده می شود ، ولی اگر در داخل آن چیزی قرار دهید هیچ تغییری در آن به وجود نمی آورد به کد زیر دفت کنید :
<html>
<head>
<title> Web30ty </title>
</head>
<body>
<div> Learn HTML </div>
</body>
</html>
اگر سورس بالا رو توی مرورگر اجرا کنید هیچ تغییری رو توی Learn HTML مشاهده نخواهید کرد .
ولی در طراحی سایت مثلاً برای مشخص کردن هدر یه تگ div رو به عنوان هدر در نظر می گیریم و بهش یه id یا Class اختصاص می دیم و براساس این id یا Class در CSS بهش استایل می دیم :
<html>
<head>
<title> Web30ty </title>
</head>
<body>
<div class="header"> Learn HTML </div>
</body>
</html>
پس برای تقسیم بندی صفحات وب از تگ div استفاده می کنیم .
قبلاً برای تقسیم بندی صفحان وب از تگ table استفاده می شد ولی به خاطر سرعت پایین آن ها در هنگام بارگذاری دیگه از این تگ برای تقسیم بندی صفحات استفاده نمیشه .
اصولاً همه تگ های HTML به دو صورت inline level یا block level هستند :
تگ های Inline Level
هر عنصری که بتونه یه عنصر دیگه رو کنار خودش جا بده میشه inline level یعنی در یک خط باشند به صورت زیر :
<html>
<head>
<title> Web30ty </title>
</head>
<body>
<a>Learn </a>
<a>HTML</a>
</body>
</html>
اگر کد بالارو اجرا کنید می بینید که Learn HTML رو توی یک خط نشون میده اینا از تگ های inline level هستند که مقادیر رو در یک سطح نشون میدن .
Block Level
این تگ ها اجازه نمیدن که عنصر دیگری کنارشون قرار بگیره مثل تگ div ، تگ P و… اگه کد زیر رو اجرا کنید به این موضوع پی خواهید برد چون تگ DIV از نوع block level هست :
<html>
<head>
<title> Web30ty </title>
</head>
<body>
<div>Learn </div> <a>HTML</a>
</body>
</html>
تگ Span
تگ Span برای تقسیم بندی متن به کار میره مثلاً اگر بخوایم به یه متنی یه استایل بدیم اون متن رو داخل تگ span قرار میدیم و با استفاده از CSS بهش استایل میدیم ، تگ span هم جزوه عناصر inline level هستش .
متن سلام خوش آمدید رو در نظر بگیرید من میخوام به کلمه سلام یه فونت یا یه رنگ دیگه بدم ، برای این کار کافیه کلمه سلام رو داخل تگ span بندازم و با CSS بهش استایل بدم .
سلام:
من علاقه مند به برنامه نویسی هستم اما نمیدونم از کجا باید شروع کنم و پایه کد نویسی رو یاد بگیرم ممنون.
موفق باشید.عالی بود
مرسی از سایت خوب و زیباتون
سلام.میخواستم بدونم چطوری میتونم یه تصویر رو داخل یه تگ div قرار بدم.ینی ادازه تصویر با اندازه div یکی باشه
ممنون
تگ img رو داخل تگ div قرار بدید و در css به تگ img استایل ；width:100% رو بدید تا با عرض div یکی باشه برای اینکه ارتفاع تصویر هم یکی بشه بهش تو css استایل ;height:100% رو بدید .
اما قبلش به تگ div باید طول و عرض بدید .
اگه بازم سوالی داشتید بگید تا کدش رو واستون بفرستم