دو قسمت کردن صفحه به دو لایه چپ و راست در HTML

در HTML شما می توانید صفحه خود را به دو لایه بشکل زیر تقسیم کنید.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	
	<title>مثال از اتاق برنامه نویسی من</title>
	
	<style type="text/css">
	   
	   * { margin: 0; padding: 0; }
	   p { padding: 10px; }
	   #left { position: absolute; left: 0; top: 0; width: 50%; }
	   #right { position: absolute; right: 0; top: 0; width: 50%; }
	
	</style>
</head>

<body>

    <div id="left">
        <p>قسمت چپ</p>
        <p>ساخت نرم افزار ویندوز،وب سایت،اپلیکیشن اندروید</p>
        <p>ساخت نرم افزار ویندوز،وب سایت،اپلیکیشن اندروید</p>
    </div>

    <div id="right">
        <p>قسمت راست</p>
        <p>ساخت نرم افزار ویندوز،وب سایت،اپلیکیشن اندروید</p>
        <p>ساخت نرم افزار ویندوز،وب سایت،اپلیکیشن اندروید</p>
    </div>

</body>

</html>

ادامه مطلب…







ساختار یک مقاله در HTML5

ساختار HTML5 یک مقاله به شکل زیر می باشد.

<article class="hentry">
  <header>
    <h1 class="entry-title">عنوان مقاله</h1>
    <time class="updated" datetime="2010-08-07 11:11:03-0400" pubdate>01-01-1398</time>
    <p class="byline author vcard">
        نوشته توسط <span class="fn">مصطفی</span>
    </p>
  </header>

  <div class="entry-content">
      <p>...متن مقاله...</p>
      <p>...متن مقاله...</p>
   
      <figure>
        <img src="mypgr.jpg" alt="بخشی مرتبط به مقاله" />
        <figcaption>آدرس : mypgr.ir</figcaption>
      </figure>

      <p>...متن مقاله...</p>
      <p>...متن مقاله...</p>

      <aside>
        <h2>اشتراک مقاله</h2>
        <ul>
          <li>فیسبوک</li>
          <li>توییتر</li>
          <li>و...</li>
        </ul>
      </aside>
   
      <div class="entry-content-asset">
        <a href="photo-full.png">
          <img src="photo.png" alt="عنوان تصویر" />
        </a>
      </div>

      <p>...متن مقاله...</p>
      <p>...متن مقاله...</p>
   
      <a class="entry-unrelated" href="https://s.mypgr.ir/">کوتاه کننده لینک</a>
  </div>

  <footer>
    <p>
پاورقی مقاله
    </p>
    <div class="vcard copyright">
        کپی رایت <span class="org fn">اتاق برنامه نویسی من</span>
    </div>
  </footer>
</article>

ادامه مطلب…







نمایش یک المان در هنگام بارگذاری صفحه در HTML

با اسنفاده از خاصیت onload در یک المان می توانید خاصیت visibility آنرا تغییر دهید.

 

<div style="visibility:hidden;" onload="this.style.visibility = 'visible';"  > </div>

ادامه مطلب…







افزودن خط شکن به متن دکمه در HTML

تا حالا شده بخواهید همانند متن به متن دکمه خود خط شکن اضافه کنید؟برای این کار کافیست از کد

&#x00A;

استفاده نمایید،برای مثال :

<input type="button" value="اتاق &#x00A; برنامه نویسی &#x00A;">

پیش نمایش کد بالا :

ادامه مطلب…







غیرفعال کردن خاصیت Autocomplete المان Input

برای این کار کافیست خاصیت را به شکل زیر مقدار دهی کنید

<input name="q" type="text" autocomplete="off"/>

خاموش کردن این خاصیت در مواقعی موفید است که مقدار المان شما یکتا می باشد ، مانند کد امنیتی. ادامه مطلب…







پس زمینه های HTML

یک پس زمینه خوب می تواند ظاهر یک سایت را واقعا عالی کند.

پس زمینه ها

برچسب <body> دو موجودیت دارد که شما می توانید با استفاده از آن پس زمینه را تعیین کنید. پس زمینه می تواند یک رنگ یا تصویر باشد.

Bgcolor

موجودیت Bgcolor ، رنگ پس زمینه یک صفحه HTML را تعیین می کند.محتوای این موجودیت می تواند یک عدد مبنای ۱۶ ، یک مقدار RGB یا نام یک رنگ باشد:

 

< body bgcolor="#000000" >
< body bgcolor="black" >
< body bgcolor="rgb(0,0,0)" >

ادامه مطلب…







فرم ها و ورودی های HTML

فرم های HTML به منظور انتخاب انواع مختلف ورودی های کاربر استفاده می شوند.

فرم ها

یک فرم ، منطقه ای حاوی عناصر فرم است.عناصر فرم ، عناصری هستند که به کاربر اجازه می دهند تا اطلاعات را (مثل فیلدهای متنی ، فیلدهای text area ، لیست های پایین افتان، دکمه های رادیویی ، چک باکس ها و…) در فرم وارد کند.یک فرم با برچسب <form> معرفی می شود.

<form>
<input>
<input>
</form>

ادامه مطلب…







لیست های HTML

HTML از لیست های مرتب ، نامرتب و تعریفی پشتیبانی می کند.

لیست های نامرتب

یک لیست نامرتب ، لیستی از اقلام است.اقلام لیست بوسیله گلوله نشان گذاری می شوند (معمولا یک دایره سیاه کوچک).یک لیست نامرتب با یک برچسب <ul> آغاز می شوند.هر کدام از اقلام لیست با برچسب <li> آغاز می شوند.

<ul>
<li> Cofee <ul>
<li> Milk <ul></ul>

 

  • Cofee
  • Milk

 

داخل اقلام لیست می توانید پاراگراف ها، پرش به خط بعد ، عکس ها، پیوند ها ، لیست های دیگر و … قرار دهید.

ادامه مطلب…







قاب های HTML

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

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

توسعه دهنده وب باید پیوسته رد بیشتر پرونده های HTML را داشته باشد.
چاپ کردن کل صفحه مشکل است

برچسب Frameset

برچسب <frameset> معرفی می کند که چگونه می شود پنجره را به قابها تقسیم کرد.
هر frameset یک مجموعه از سطرها یا ستون ها را معرفی می کند.

برچسب Frame

برچسب <frame> پرونده HTML ای را معرفی می کند که در هر قاب قرار می گیرد.

در مثال پایین یک frameset با دو ستون داریم. ستون اول با پهنای ۲۵% از پنجره مرورگر ست شده است.ستون دوم با پهنای ۷۵% از پنجره مرورگر ست شده است. پرونده “HTML “frame_a.html در ستون اول قرار گرفته و پرونده “HTML “frame_b.html در ستون دوم قرار داده شدهاست.

<frameset cols="25%,75%">
    <frame src="frame_a.html">
    <frame src="frame_b.html">
</frameset>

نکات پایه ای-اطلاعات مفید
اگر یک قاب حاشیه پدیدار داشته باشد کاربر می تواند با کشیدن حاشیه آن ، اندازه آن را تغییر دهد. برای جلوگیری از این عمل کاربر ، شما می توانید “noresize=”noresize را به برچسب <frame> اضافه کنید. اگر برچسب <noframes> را اضافه کنیم ، مرورگر قاب را پشتیبانی نمی کند.
مهم:شما نمی توانید برچسب های <body> </body> و <frame> </frame> را با هم استفاده کنید. هر چند اگر شما برچسب <noframes> را در مرورگر هایی که قابها را پشتیبانی نمی کنند و حاوی مقداری متن نیز باشد اضافه کنید شما باید متن را بین برچسب های <body> </body> قرار دهید.

ادامه مطلب…







پیوندهای HTML

HTML برای پیوند به پرونده های دیگر در وب از فرا پیوندها استفاده می کند.

 

برچسب Anchor و موجودیت Href

HTML از برچسب <a> برای ساخت یک پیوند به پرونده های دیگر استفاده می کند. یک anchor می تواند به هر منبعی در وب اشاره کند.یک صفحه HTML ، یک عکس ، یک فایل صوتی ، یک فیلم و … .

دستورالعمل ساخت یک Anchor

<a href="url"> متنی که نمایش داده می شود </a>

 

در هنگام ساختن یک Anchor باید مکانی که پیوند به آن پرونده اشاره میکند را مشخص کرد. برای نمایش آدرس پرونده از موجودیت href استفاده می شود.کلمات بین بر چسب آغازو پایان Anchor به عنوان فرا پیوند نمایش داده می شود.
این Anchor یک پیوند به html.ir را معرفی می کند:

<a href="https://mypgr.ir/?p=49694"> پیوندها </a>

 

خط بالا شبیه این نشان داده خواهد شد :

پیوندها


موجودیت Target

با موجودیت هدف شما می توانید معرفی کنید که پرونده های پیوند داده شده کجا باز شوند. خط زیر پرونده ای را در یک پنجره مرورگر جدید باز خواهد کرد.

<a href="https://mypgr.ir/?p=49694" target="_blank"> پیوندها </a>

برچسب Anchor و موجودیت نام

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

ادامه مطلب…







موجودیت های HTML

تعدادی از کاراکترها مثل کاراکتر “>” یک معنی خاص در HTML دارندو از این رو نمی توان از آنها در متن ها استفاده کرد. برای نشان دادن علامت کوچکتر از “>” ما باید از یک موجودیت کاراکتر استفاده کنیم.

موجودیت های کاراکتر

تعدادی از کاراکترها یک معنی خاص در HTML دارند.مثل علامت کوچکتر از “>” که شروع یک برچسب HTML را معرفی می کند.اگر ما بخواهیم که مرورگر عملا این کاراکتر ها را نشان بدهد باید در منبع کد HTML موجودیت های کاراکتر را وارد کنیم.
یک موجودیت کاراکتر سه بخش دارد: یک علامت “&” ، یک موجودیت اسم یا یک علامت “#” و یک موجودیت عددو در نهایت یک “;”.
برای نمایش یک علامت کوچکتر از در یک پرونده HTML ما باید بنویسیم: ;lt& یا ;۶۰#& .
فایده استفاده از یک نام بجای یک عدد این است که به خاطر سپردن یک نام آسان تر است و اشکال آن این است که همه مرورگر ها موجودیت کاراکترها را پشتیبانی نمی کنند در حالی که تقریبا همه مرورگرها خیلی خوب از موجودیت عددها پشتیبانی می کنند.
توجه کنید که موجودیت ها حساس به حروف کوچک و بزرگ هستند.

ادامه مطلب…







قالب بندی متن HTML

چگونه منبع HTML را ببینیم؟

آیا شما تا حالا صفحه ای را دیده اید که از دیدن آن شگفت زده شده با شید وبگویید چگونه این کار را انجام داده اند؟
برای پیدا کردن آن بسادگی بروی گزینه view روی نوار ابزار کلیک کنید وگزینه source یا page source را انتخاب کنید.آن یک پنجره ای را باز خواهد کرد که به شما HTML واقعی آن صفحه را نشان خواهد داد.







برچسب های پایه HTML

مهمترین برچسب در HTML برچسب هایی هستند که سر تیتر ها ، پاراگراف ها و پرش به خط بعد را معرفی می کنند. بهترین راه یادگرفتن HTML کار کردن با مثال هاست.
مثالها

ساده ترین Html
این مثال ساده ترین نمونه html است که در آن، از کمترین برچسب ممکن، استفاده شده است. در این مثال جمله نوشته شده درون برچسب body، نمایش داده می شود.

پاراگراف ساده
این مثال نشان می دهد، که نوشته داخل برچسب پاراگراف، چگونه نمایش داده می شود.

ادامه مطلب…







افزودن کلاس به المان Body برای مرورگر اینترنت اکسپلورر

<!--[if IE ]>
   <body class="ie">
<![endif]-->
<!--[if !IE]>-->
   <body>
<!--<![endif]-->

یا نسخه قوی تر قرار دادن کلاس در عنصر HTML: ادامه مطلب…







دانلود دوره آموزشی Udemy Learn By Example: The Foundations of HTML, CSS & Javascript

عناوین آموزشی :

HTML را درک کنید – ساختار آن و تگ های معمول استفاده شده
استفاده از CSS، از جمله ارث، انتخابگرها، مدل جعبه – موضوعاتی که CSS سخت استفاده می کند
کارشناسی ارشد از جاوا اسکریپت
استفاده از بسته شدن، نمونه اولیه پویا، JSON و مدل Document-Object-Model با اعتماد به نفس

ادامه مطلب…