مشاوره رایگان
دریافت لینک های دانلود
دریافت پستی درب منزل
مبلغ کل:
تومان
جهت دریافت کد تخفیف به کانال تلگرام مراجعه و یا با پشتیبان آنلاین هماهنگ نمایید
معرفی تگ های اصلی در HTML با مثال و نمونه کد
برچسب های عنوان (Heading Tags)
هر سند با عنوان شروع می شود. شما می توانید برای عناوین خود از اندازه های مختلف استفاده کنید. HTML دارای شش سطح عنوان است که از عناصر <h1>، <h2>، <h3>، <h4>، <h5> و <h6> استفاده می کند. علاوه بر اینکه هر عنوان نمایش داده می شود، مرورگر یک خط را قبل و یک خط بعد از آن اضافه می کند.
مثال :
<!DOCTYPE html>
<html>
<head>
<title>Heading Example</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند –
تگ پاراگراف (Paragraph Tag)
تگ <p> راهی برای ساخت متن در پاراگراف های مختلف را ارائه می دهد. هر پاراگراف متن باید بین بازه <p> و یک تگ بسته </ p> قرار بگیرد که در مثال زیر نشان داده شده است –
مثال :
<!DOCTYPE html>
<html>
<head>
<title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند –
Here is a first paragraph of text.
Here is a second paragraph of text.
Here is a third paragraph of text.
تگ شکست خط (Line Break Tag)
هر وقت از عنصر <br /> استفاده می کنید، هر چیزی که بعد از آن قرار می گیرد از خط بعد از آن شروع می شود. این تگ نمونه ای از یک عنصر خالی است که در آن شما نیازی به باز و بستن کردن تگ ها ندارید، زیرا هیچ چیز بین آنها وجود ندارد.
در برچسب < br />، یک فضای خالی بین کاراکترهای br و اسلش جلوی آن وجود دارد که اگر این فضا را نادیده بگیرید، مرورگرهای قدیمی تر در رندر نمودن شکستِ خط، به خطا برخواهند خورد. در صورتی که از کاراکتر اسلش جلو استفاده نکنید و فقط از <br> استفاده کنید، در XHTML معتبر نخواهد بود.
مثال :
<!DOCTYPE html>
<html>
<head>
<title>Line Break Example</title>
</head>
<body>
<p>Hello<br />
You delivered your assignment ontime.<br />
Thanks<br />
Mahnaz</p>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند –
Hello
You delivered your assignment on time.
Thanks
Mahnaz
در مرکز قرار دادن متن (Centering Content)
شما می توانید از برچسب <center> برای قرار دادن هر گونه محتوا در مرکز صفحه یا هر سلول جدول استفاده کنید.
مثال
<!DOCTYPE html>
<html>
<head>
<title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند –
This text is not in the center.
This text is in the center.
خطوط افقی (Horizontal Lines)
خطوط افقی مورد استفاده قرار می گیرند تا بتوانیم قسمت هایی از یک سند را به صورت بصری بشکنیم. تگ <hr> یک خط از موقعیت فعلی سند، به سمت راست را ایجاد می کند و خط را بر هم می زند.
به عنوان مثال، ممکن است بخواهید بین دو پاراگراف خطی قرار دهید . مثال زیر بیانگر این مطلب می باشد –
<!DOCTYPE html>
<html>
<head>
<title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at bottom</p>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند –
This is paragraph one and should be on top
This is paragraph two and should be at bottom
تگ <hr /> باز هم یک نمونه از یک عنصر خالی است. در این تگ شما نیاز ندارید تا برچسب ها را باز و بسته کنید، زیرا هیچ چیز بین آنها وجود ندارد.
در عنصر <hr /> بین کاراکتر hr و علامت اسلش جلو فاصله وجود دارد. اگر این فضا را نادیده بگیرید، در مرورگرهای قدیمی رندر خط افقی، به مشکل بر خواهد خورد، در صورتی که از کاراکتر اسلش جلو استفاده نکنید و فقط از <hr> استفاده کنید در XHTML معتبر نخواهد بود.
حفظ قالب بندی (Formatting)
گاهی اوقات، شما می خواهید متن، فرمت دقیق خود را از لحاظ نحوه نوشته شدن در سند HTML حفظ نماید. در این موارد، شما می توانید از پیش برچسب یعنی پریفرمت <pre> استفاده کنید.
هر متنی که بین تگ <pre> باز و تگ بسته </ pre> قرار بگیرد، قالب بندی سند منبع را حفظ می کند.
مثال :
<!DOCTYPE html>
<html>
<head>
<title>Preserve Formatting Example</title>
</head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند –
function testFunction( strText ){
alert (strText)
}
به عنوان تمرین، کد بالا را، بدون نگه داشتن آن در داخل برچسب <pre> ... </ pre> استفاده کنید و نتیجه را مشاهده نمایید.
فضاهای غیر شکست (Nonbreaking Spaces)
فرض کنید شما می خواهید از عبارت " 12 Angry Men." استفاده کنید. در اینجا، شما نمی خواهید مرورگر، متن را به دو خط " 12, Angry" و " Men" تقسیم کند –
An example of this technique appears in the movie "12 Angry Men."
در مواردی که شما نمی خواهید، مرورگرِ سرویس گیرنده (client) ، متن را بشکند، شما باید از یک nonbreaking space entity یا & nbsp؛ به جای فضای خالی یا space استفاده کنید .
برای مثال، هنگام کدنویسی " 12 Angry Men" در یک پاراگراف، شما باید چیزی شبیه به کد زیر را استفاده کنید –
<!DOCTYPE html>
<html>
<head>
<title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the movie "12 Angry Men."</p>
</body>
</html>
کد فوق نتیجه زیر را تولید می کند –
An example of this technique appears in the movie "12 Angry Men."
فصلِ:
5
,
تعداد قسمت ها:
177
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML
آموزش HTML5
این فصل در یک نگاه:
در این فصل صفحات قالب فروشگاهی را بطور کامل واکنشگرا می کنیم.…
HTML مخفف عبارت Hypertext Markup Language است. این زبان در واقع یک نوع زبان نشانه‌گذاری استاندارد برای ایجاد صفحات وب و وب اپلیکیشن‌ها محسوب می‌شود. در واقع HTML را عنصر کلیدی صفحات وب می…
فصلِ:
3
,
تعداد قسمت ها:
25
,
سطح:
صفر تا صد
این فصل در یک نگاه:
فصل سوم…
آموزش طراحی ریسپانسیو مدرن و جذابتر نسبت به بوتسرپ (همراه با ساخت صفحه اصلی و پنل یک آژانس مسافربری) آموزش پروژه محور فریمورک متریالایز برای اولین بار بین وب سایت های آموزشی آموزش تمامی …
فصلِ:
5
,
تعداد قسمت ها:
77
,
سطح:
متوسط
این فصل در یک نگاه:
ساخت منوی مدیریت سایت،ایجاد بخش دسته بندی ها ، جدول نمایش دسته ها و ایجاد دسته جدید،ایجاد بخش ویژگی های یک دسته،ایجاد وی…
این مجموعه با تلفیقی از فریمورک bootstrap و کد های html و css ارائه گردیده و پیش نیاز این آموزش ، دوره دیجی کالای آقای مهندس بلاغی است چون این پروژه در قالب mvc پیاده گردیده و با توجه به ا…
فصلِ:
11
,
تعداد قسمت ها:
162
,
سطح:
صفر تا صد
این فصل در یک نگاه:
در این فصل(فصل یازدهم مجموعه)،به طراحی CMS (سیستم مدیریت محتوا)اختصاصی فروشگاه می پردازیم.هدف از طراحی این بخش،آنست که م…
در این مجموعه آموزشی قصد داریم از صفر تا صد طراحی یک فروشگاه اینترنتی رو به صورت کامل آموزش بدهیم.این فروشگاه شامل تمامی بخش های مورد نیاز یک فروشگاه اینترنتی است. هدف از این مجموعه،آموزش…
فصلِ:
4
,
تعداد قسمت ها:
240
,
سطح:
صفر تا صد
موضوعات:
آموزش PHP
آموزش Bootstrap
آموزش CSS
آموزش JQUERY
آموزش HTML
آموزش PHP MVC
آموزش Ajax
آموزش HTML5
این فصل در یک نگاه:
طراحی پنل مدیریت(دسته بندی)- دسته بندی یا category - نمایش دسته های فرعی در view با ورود به یکی از دسته های اصلی و آشن…
توضیحات کلی مجموعه: این مجموعه توسط فریمورک محبوب و دوست داشتنی bootstrap و به صورت تضمینی و صفر تا صد جهت یادگیری کارآموزان عزیز ارائه گردیده و دوستانی که این دوره را به طور کامل و دقیق…
فصلِ:
4
,
تعداد قسمت ها:
368
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش ساخت فروشگاه اینترنتی
آموزش Bootstrap
آموزش Laravel
این فصل در یک نگاه:
مباحث تکمیلی فریم ورک لاراول…
فصل اول :آموزش مقدماتی فریم ورک لاراول معرفی فریم ورک لاراول و پیشنیازهای انجام کار انجام کانفیگ های اولیه برای نصب و راه اندازی فریم ورک معرفی روش های نصب پروژه لاراولی از طریق سایت گی…
فصلِ:
1
,
تعداد قسمت ها:
155
,
سطح:
صفر تا صد
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش PHP MVC
آموزش Ajax
آموزش HTML
آموزش NodeJs
آموزش Bootstrap
آموزش Laravel
آموزش Symphony
این فصل در یک نگاه:
مباحث مقدماتی فریم ورک react.js…
توضیحات کلی مجموعه: فصل اول : آشنایی با مباحث مقدماتی فریم ورک react.js نصب و راه اندازی node.js و کلیه پیش نیازهای لازم نصب فریم ورک react روی لوکال و انجام تست های لازم آغاز آشنایی …
فصلِ:
1
,
تعداد قسمت ها:
15
,
سطح:
متوسط
موضوعات:
آموزش HTML5
آموزش CSS
آموزش JAVASCRIPT
آموزش JQUERY
آموزش PHP
آموزش ASP.NET
آموزش ASP.NET MVC
آموزش PHP MVC
آموزش Phyton
آموزش سئو
آموزش ساخت فروشگاه اینترنتی
آموزش HTML
آموزش ایمیل مارکتینگ
آموزش وردپرس
آموزش فروشگاه ساز اپن کارت
آموزش جوملا
آموزش Virtual Freer
آموزش WHMCS
این فصل در یک نگاه:
رشد و درآمدزایی یک وب سایت یا کسب و کار اینترنتی کاملا به ذوق و مهارت وب مستر یا همان مدیر اصلی وب سایت گره خورده و متاس…
اصول مدیریت وب سایت برای وب مستر شدن برای موفقیت یک وب سایت لازم الاجراست. زیرا شما دوست دارید وب سایت خود را به کارخانه پولسازی تبدیل کنید. این واقعیت رویا نیست. هرکس این اصول را بداند به …
