آموزش برنامه نویسی

به روز ترین مطالب آموزشی و متدلوژی های برنامه نویسی

آموزش برنامه نویسی

به روز ترین مطالب آموزشی و متدلوژی های برنامه نویسی

آموزشگاه تحلیل داده فعالیت رسمی خود را از سال 1380 در قالب آموزشگاه تخصصی نرم افزار آغاز نموده. این موسسه از همان ابتدای تأسیس با بهره مندی از استاید حرفه ای رشته های نرم افزار و بانک های اطلاعاتی ، فعالیت تخصصی خود را در زمینه آموزش برنامه نویسی و بانک های اطلاعاتی آغاز نمود و پس از گذشت اندک زمانی توانست در زمینه نرم افزار و شبکه بعنوان یکی از حرفه ای ترین موسسات ایران ظاهر شود. با توجه به اینکه مدیریت آموزشگاه شخصاً در رشته نرم افزار تحصیل کرده و سابقه طولانی در تحلیل و طراحی و پیاده سازی نرم افزار و بانک های اطلاعاتی دارند ، خط مشی کلی موسسه بر مبنای آموزش پایه ای ، کاربردی ، عملی و تخصصی نرم افزار بنا شده است.


آدرس : خیابان شریعتی بالاتر از ملک جنب بانک صادرات طبقه دوم واحد 7
همراه: 09123840871 تلفن: 88146323 - 88146330

طبقه بندی موضوعی
کلمات کلیدی

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

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

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

آموزش جاوا اسکریپت

دوره آموزش پایتون

آموزش پایتون

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

دوره آموزش Sql Server

آموزش برنامه نویسی

دوره طراحی سایت

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

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

آموزش Python

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

طراحی سایت

فیلم آموزش سی شارپ

آموزش C#

فیلم آموزش Sql Server

دوره آموزش Sql

کتاب آموزش پایتون

فیلم آموزش پایتون

آموزش طراحی سایت تحلیل داده

آموزش html css

آموزش CSS3

دوره آموزش جاوا

آموزش سی شارپ

آموزش بوت استرپ

دوره آموزش سی شارپ

آموزش جی کوئری

آموزش csharp

بایگانی
آخرین مطالب
پیوندهای روزانه
پیوندها

۱۰ مطلب در ارديبهشت ۱۴۰۰ ثبت شده است

  • ۰
  • ۰

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

۳۰ ارديبهشت۰۰

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

آموزش List

HTML سه روش برای مشخص کردن لیست هایی از اطلاعات ارائه می دهد. تمام لیست ها باید شامل یک یا بیشتر ازیک عنصر باشند. لیست ها ممکن است شامل موارد زیر شوند.

 

  • < ul>- لیست بدون ترتیب. این لیست آیتم ها را با استفاده از bullet های ساده لیست می کند.
  • < ol> - لیست منظم. این لیست از نمودارهای عددی مختلف برای لیست کردن آیتم های شما استفاده می کند.
  • < dl>- لیست تعریف. این لیست آیتم های شما را به همان روشی که در دیکشنری منظم شده اند، منظم می کند.

لیست های بدون ترتیب HTML

لیست بدون ترتیب مجموعه ای از آیتم های مربوط به هم می باشد که هیچگونه نظم و ترتیب خاصی ندارند. این لیست با استفاده از برچسب < ul> در HTML ایجاد می شود. هر آیتم در لیست با یک bullet مشخص می شود.


 مثال:

نمونه یک

<!DOCTYPE html>
<html>
<head>
    <title>Using Image in Webpage</title>
</head>
<body>
    <p>Simple Image Insert</p>
    <img src="http://tahlildadeh.com/banner/01.jpg" alt="tahlildadeh Image" />
</body>
</html>

شما می توانید از فایل تصویر JPEG، PNG یا GIF متناسب با راحتی خود استفاده کنید، اما مطمئن شوید که در ویژگی src نام فایل تصویر را به درستی وارد کردید. نام تصویر همیشه یک مورد هوشمند می باشد.
ویژگی alt یک ویژگی می باشد که اگر تصویر نمایش داده نشود، یک متن جایگزین را برای آن مشخص می کند.

 

تنظیم موقعیت تصویر

آموزش html css

معمولا ما تمام تصاویر خود را در یک مسیر مجزا قرار می دهیم. بنابراین اجازه بدهید فایل test.htm مربوط به HTML را در مسیر اصلی نگه داشته و یک مسیر فرعی images داخل مسیر اصلی، جایی که تصویر test.png را نگهداری می کنیم، ایجاد کنیم.
با فرض اینکه موقعیت تصویر ما "image/test.png" می باشد، مثال زیر را امتحان کنید:


 مثال:

نمونه دو

<!DOCTYPE html>
<html>
<head>
    <title>Using Image in Webpage</title>
</head>
<body>
    <p>Simple Image Insert</p>
    <img src="http://tahlildadeh.com/banner/01.jpg" alt="tahlildadeh Image" />
</body>
</html>

تنظیم طول و عرض تصویر

می توانید طول و عرض تصویر را براساس نیاز خود و با استفاده از ویژگی های width و height تنظیم کنید. شما می توانید طول و عرض تصویر را به پیکسل یا براساس درصد اندازه ی واقعی آن تنظیم کنید.


 مثال:

نمونه سه

<!DOCTYPE html>
<html>
<head>
    <title>Set Image Width and Height</title>
</head>
<body>
    <p>Setting image width and height</p>
    <img src="http://tahlildadeh.com/banner/01.jpg" width="150" height="100" />
</body>
</html>

تنظیم حاشیه ی تصویر

به طور پیش فرض تصویر حاشیه ای در اطراف خود خواهد داشت، شما می توانید ضخامت این حاشیه را با استفاده از ویژگی border و به واحد پیکسل تنظیم کنید. ضخامت 0 یعنی هیچ حاشیه ای در اطراف تصویر وجود ندارد.


 مثال:

نمونه چهار

<!DOCTYPE html>
<html>
<head>
    <title>Set Image Border</title>
</head>
<body>
    <p>Setting image Border</p>
    <img src="http://tahlildadeh.com/banner/01.jpg" border="3" />
</body>
</html>

تنظیم همترازی تصویر

به طور پیش فرض تصویر در سمت چپ صفحه تنظیم می شود، اما می توانید از ویژگی align برای تنظیم تصویر در سمت راست یا مرکز صفحه استفاده کنید.


 مثال:

نمونه پنج

<!DOCTYPE html>
<html>
<head>
    <title>Set Image Alignment</title>
</head>
<body>
    <p>Setting image Alignment</p>
    <img src="http://tahlildadeh.com/banner/01.jpg" alt="Test Image" border="3" align="right" />
</body>
</html>

 

 

  • افشین رفوآ
  • ۰
  • ۰

آموزش طراحی سایت - آموزش ساخت جدول در html

۲۹ ارديبهشت۰۰

آموزش طراحی سایت - آموزش ساخت جدول در html

آموزش Table در HTML

جدول های HTML به نویسندگان وب اجازه می دهند تا داده هایی مانند متن، تصاویر، لینک ها، جدول های دیگر و غیره در ردیف ها و ستون ها تنظیم کنید. جدول های HTML با استفاده از برچسب < table> ایجاد می شوند که در آن برچسب < tr> برای ایجاد ردیف ها و برچسب < td> برای ایجاد داده های سلول ها استفاده می شوند.


 مثال:

نمونه یک

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML Tables</title>
</head>
<body>
    <table border="1">
        <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
        </tr>
        <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
        </tr>
    </table>
</body>
</html>

ویژگی های colspan و rowspan

اگر بخواهید دو یا بیشتر از دو ستون را با هم تلفیق کنید از ویژگی colspan استفاده می کنید. به طور مشابه اگر بخواهید دو یا بیشتر از دو ردیف را در یک ردیف تلفیق کنید از rowspan استفاده کنید.


 مثال:

نمونه سه

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML Table Colspan/Rowspan</title>
</head>
<body>
    <table border="1">
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
        <tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
        <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
        <tr><td colspan="3">Row 3 Cell 1</td></tr>
    </table>
</body>

</html>

 

پس زمینه ی جدول

می توانید به دو روش زیر برای جدول خود زمینه ای تنظیم کنید.

 

  • ویژگی Bg color: می توانید رنگ زمینه را برای همه ی جدول و یا تنها برای یک سلول تنظیم کنید.
  • ویژگی background: می توانید یک تصویر را برای کل جدول یا تنها یک سلول تنظیم کنید.

همچنین می توانید با استفاده از ویژگی bordercolor رنگ حاشیه را نیز تنظیم کنید.


 مثال:

نمونه چهار

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML Table Background</title>
</head>
<body>
    <table border="1" bordercolor="green" bgcolor="yellow">
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
        <tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
        <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
        <tr><td colspan="3">Row 3 Cell 1</td></tr>
    </table>
</body>
</html>

در اینجا مثالی در رابطه با استفاده از ویژگی background می بینید. در این مثال ما از تصویری موجود در image directory استفاده کرده ایم.

 

نمونه پنج

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML Table Background</title>
</head>
<body>
    <table border="1" bordercolor="green" background="/images/test.png">
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
        <tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
        <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
        <tr><td colspan="3">Row 3 Cell 1</td></tr>
    </table>
</body>
</html>

آموزش html css

طول و عرض جدول

شما می توانید طول و عرض جدولی را با استفاده از ویژگی های width و height تنظیم کنید. شما می توانید طول و عرض جدول را به پیکسل و یا متناسب با درصد صفحه ی جاری تنظیم کنید.


 مثال:

نمونه شش

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML Table Width/Height</title>
</head>
<body>
    <table border="1" width="400" height="150">
        <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
        </tr>
        <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
        </tr>
    </table>
</body>
</html>

شرح جدول

برچسب caption یک توضیح یا یک تیتر برای جدول می باشد که در بالای جدول نمایش داده می شود. این برچسب در ورژن های جدید HTML/XHTML توصیه می شود.


 مثال:

نمونه هفت

    <title>HTML Table Caption</title>

    <table border="1" width="100%">
        <caption>This is the caption</caption>
        <tr>
            <td>row 1, column 1</td>
            <td>row 1, columnn 2</td>
        </tr>
        <tr>
            <td>row 2, column 1</td>
            <td>row 2, columnn 2</td>
        </tr>
    </table>
 

تیتر، بدنه و پاورقی جدول

جدول ها می توانند به سه بخش تقسیم شوند: تیتر، بدنه و پاورقی جدول. عنوان و فوت(tfoot) در واقع شبیه به تیتر و پاورقی در یک فایل پردازش word می باشند که برای هرصفحه یکی می باشد، در حالیکه بدنه همان نگه دارنده ی محتوای اصلی جدول می باشد.
سه عنصر برای مجزا کردن عنوان، بدنه و فوت در یک جدول عبارتند از

 

  • < thead> - برای ایجاد یک تیتر مجزا
  • < tbody>- برای نشان دادن بدنه ی اصلی جدول
  • < tfoot> - برای ایجاد یک پاورقی مجزا در یک جدول

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


 مثال:

نمونه هشت

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML Table</title>
</head>
<body>
    <table border="1" width="100%">
        <thead>
            <tr>
                <td colspan="4">This is the head of the table</td>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="4">This is the foot of the table</td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Cell 1</td>
                <td>Cell 2</td>
                <td>Cell 3</td>
                <td>Cell 4</td>
            </tr>
        </tbody>
    </table>
</body>
 

جدول های تودرتو

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

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


 مثال:

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

 

<a class="btn btn-danger" href="/Try/441/9" target="_blank">امتحان کنید</a><p> </p><p class="MsoNormal" style="unicode-bidi: embed; direction: rtl; margin: 0in 0in 10pt; line-height: 17pt;" dir="rtl"><span style="line-height: 18pt; mso-bidi-language: fa;" lang="FA"><span style="font-size: 12pt; color: #000000;">    

  <br></span></span></p><div class="row" style="padding-top: 10px;">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<ul class="bookMoreInfo">
                           
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
                               
<span class="VisitCountHolder">
      
<span class="fa fa fa-eye"> </span>
<span id="BodyContent2_UVVisitCount1_VisitCountSeparator" class="VisitCountSeparator"> </span>
<span id="BodyContent2_UVVisitCount1_VisitCountCount" class="VisitCountNumber">1945</span>
</span>
                        </li>
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<em class="fa fa-download"> </em>  
<span id="BodyContent2_Lbl_dlcount">424</span>
                        </li>
   
<li class="col-lg-4 col-md-4 col-sm-4 col-xs-12">تاریخ ارسال:  
<span id="BodyContent2_Lbl_createdate">1394/07/27</span>
                        </li>
   
                    </ul>
                </div>
   
            </div><div id="BodyContent2_dlPDF">
   
   
<div class="row" style="padding-top: 10px;">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
                        <!--
                            .UserPassTable tr td {
                                text-align: right;
                                background-color: transparent !important;
                                color: #604e44;
                            }
   
                            .UserPassTable a {
                                color: #604e44 !important;
                            }
   
   
   
                            @media only screen and (max-width: 950px) {
                                .UserPassTable tr td {
                                    display: block;
                                    width: 100%;
                                    padding-right: 5px;
                                }
   
                                    .UserPassTable tr td::before, .UserPassTable tr td::after {
                                        content: " " !important;
                                        width: 0px;
                                    }
   
                                table.UserPassTable td:nth-of-type(1)::before {
                                    content: " " !important;
                                    width: 0px;
                                }
   
                                .UserPassTable tr td:nth-child(2n+1), .UserPassTable tr:last-child td:nth-child(2) {
                                    background-color: #239ead;
                                    color: white;
                                }
   
                                .UserPassTable tr td:nth-child(2n), .UserPassTable tr:nth-child(3) td:nth-child(1) {
                                    background-color: #f3f8fb;
                                    color: black;
                                }
                            }
                          
-->
                        </div></div></div><table style="width: 100%;" border="1">
<tbody><tr>
<td>
<table style="width: 100%;" border="1">
<tbody><tr>
<th>Name</th>
<th>Salary</th>
                    </tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
                    </tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
                    </tr>
                </tbody></table>
            </td>
        </tr>
   

               
               
            </tbody></table><table class="table-striped table-bordered UserPassTable" style="width: 100% !important; margin: 0 !important;">
<tbody><tr>
<td class="text-center">
   
<em class="fa fa-download fa-2x text-center"> </em>
   
                                </td>
<td class="text-center">
<a id="BodyContent2_Lnk_dl" href="/UserControls/CNTDL.aspx?Type=ARTA&ID=441">
                                               
                                                      
<span class="text-fa">دریافت این مقاله بصورت PDF</span>
                                    </a>
<a id="BodyContent2_Lnk_source" href="/UserControls/CNTDL.aspx?Type=ARTS&ID=441">
                                               
                                             
<span class="text-fa">دریافت سورس کد مقاله</span>
                                    </a>
                                </td>
                            </tr>
<tr>
   
<td colspan="2">
                                       
<br>
                                    پس از دانلود فایل رمز آن را به دقت وارد نمایید .فایل ها دارای رمز عبور می باشند.
                                                   
                                </td>
                            </tr>
<tr>
<td class="text-center">
<em class="fa fa-key fa-2x"> </em>
   
                                </td>
<td class="text-danger">tahlildadeh.com
                               یا
                               www.tahlildadeh.com
                                                  
                                </td>
                            </tr>
                        </tbody></table>
<div class="ipShow">
                        </div>

ممکن است در این وبلاگ کدها نمایش داده نشود جهت مشاهده کدها برروی آموزش طراحی سایت کلیک نمایید.

  • افشین رفوآ
  • ۰
  • ۰

پروژه طراحی سایت-آموزش درج کردن تصویردر HTML

۲۶ ارديبهشت۰۰

 پروژه طراحی سایت-آموزش درج کردن تصویردر HTML

وارد کردن تصاویر در صفحات HTML

در این آموزش چگونگی استفاده از تصاویر در صفحات HTML را فرا می گیریم.زیبا سازی تصاویر و همچنین ترسیم بسیاری از مفاهیم پیچیده به یک روش ساده روی صفحه ی وب شما، بسیار مهم می باشد. این آموزش مراحل ساده ی استفاده از تصاویر در صفحات وب را به شما آموزش خواهد داد.

 

وارد کردن تصویر

شما می توانید با استفاده از برچسب هر تصویری را وارد صفحه ی وب خود کنید. در زیر ترکیب ساده ی استفاده از این برچسب را می بینید:

 

<src="Image URL" ... attributes-list/>

 

برچسب یک برچسب خالی می باشد، یعنی تنها می تواند دارای لیستی از ویژگی ها باشد و دارای برچسب closing نمی باشد.


 مثال:

برای امتحان کردن مثال، زیر اجازه بدهید فایل html خود یعنی test.htm و فایل تصویر خود یعنی test.png را در یک مسیر قرار دهیم.

 

نمونه یک

<!DOCTYPE html>
<html>
<head>
    <title>Using Image in Webpage</title>
</head>
<body>
    <p>Simple Image Insert</p>
    <img src="http://tahlildadeh.com/banner/01.jpg" alt="tahlildadeh Image" />
</body>
</html>

شما می توانید از فایل تصویر JPEG، PNG یا GIF متناسب با راحتی خود استفاده کنید، اما مطمئن شوید که در ویژگی src نام فایل تصویر را به درستی وارد کردید. نام تصویر همیشه یک مورد هوشمند می باشد.
ویژگی alt یک ویژگی می باشد که اگر تصویر نمایش داده نشود، یک متن جایگزین را برای آن مشخص می کند.

 

تنظیم موقعیت تصویر

آموزش html css

معمولا ما تمام تصاویر خود را در یک مسیر مجزا قرار می دهیم. بنابراین اجازه بدهید فایل test.htm مربوط به HTML را در مسیر اصلی نگه داشته و یک مسیر فرعی images داخل مسیر اصلی، جایی که تصویر test.png را نگهداری می کنیم، ایجاد کنیم.
با فرض اینکه موقعیت تصویر ما "image/test.png" می باشد، مثال زیر را امتحان کنید:


 مثال:

نمونه دو

<!DOCTYPE html>
<html>
<head>
    <title>Using Image in Webpage</title>
</head>
<body>
    <p>Simple Image Insert</p>
    <img src="http://tahlildadeh.com/banner/01.jpg" alt="tahlildadeh Image" />
</body>
</html>

تنظیم طول و عرض تصویر

می توانید طول و عرض تصویر را براساس نیاز خود و با استفاده از ویژگی های width و height تنظیم کنید. شما می توانید طول و عرض تصویر را به پیکسل یا براساس درصد اندازه ی واقعی آن تنظیم کنید.


 مثال:

نمونه سه

<!DOCTYPE html>
<html>
<head>
    <title>Set Image Width and Height</title>
</head>
<body>
    <p>Setting image width and height</p>
    <img src="http://tahlildadeh.com/banner/01.jpg" width="150" height="100" />
</body>
</html>

 

تنظیم حاشیه ی تصویر

به طور پیش فرض تصویر حاشیه ای در اطراف خود خواهد داشت، شما می توانید ضخامت این حاشیه را با استفاده از ویژگی border و به واحد پیکسل تنظیم کنید. ضخامت 0 یعنی هیچ حاشیه ای در اطراف تصویر وجود ندارد.


 مثال:

نمونه چهار

<!DOCTYPE html>
<html>
<head>
    <title>Set Image Border</title>
</head>
<body>
    <p>Setting image Border</p>
    <img src="http://tahlildadeh.com/banner/01.jpg" border="3" />
</body>
</html>

تنظیم همترازی تصویر

به طور پیش فرض تصویر در سمت چپ صفحه تنظیم می شود، اما می توانید از ویژگی align برای تنظیم تصویر در سمت راست یا مرکز صفحه استفاده کنید.


 مثال:

نمونه پنج

<!DOCTYPE html>
<html>
<head>
    <title>Set Image Alignment</title>
</head>
<body>
    <p>Setting image Alignment</p>
    <img src="http://tahlildadeh.com/banner/01.jpg" alt="Test Image" border="3" align="right" />
</body>
</html>

 

ممکن است کدها در این وبلاگ کامل نمایش داده نشود جهت دیدن کدها بر روی دوره آموزش طراحی سایت کلیک نمایید.

  • افشین رفوآ
  • ۰
  • ۰

پروژه طراحی سایت -توضیحات در HTML-آموزش html

۲۲ ارديبهشت۰۰

پروژه طراحی سایت -توضیحات در HTML-آموزش html

آموزش استفاده از comment در html

در این مقاله آموزش Html می خواهیم به چگونگی استفاده از comment در html بپردازیم:
کامنت قطعه ای از کد می باشد که توسط مرورگرها نادیده گرفته می شود. افزودن کامنت به کد HTML خود، تمرین خوبی است، به ویژه در داکیومنت های پیچیده برای نشان دادن بخش هایی از یک داکیومنت به هرکسی که کد را نگاه می کند. کامنت ها به شما و دیگران کمک می کنند تا کد خود را متوجه شوید و قابلیت خواندن آن را افزایش می دهد.
کامنت های HTML بین برچسب های واقع می شوند. بنابراین هر محتوایی که بین این برچسب ها واقع شود، مثل کامنت با آن رفتار خواهد شد و توسط مرورگرها به طور کامل نادیده گرفته خواهد شد.

 

مثال:

نمونه یک

این مثال نتیجه ی زیر را بدون نمایش محتوای ارائه شده به عنوان بخشی از کامنت ها، به دنبال دارد.
Document content goes here.....

 

کامنت های معتبردر مقابل کامنت های نامعتبر

کامنت ها تودرتو نمی شوند، یعنی اینکه یک کامنت نمی تواند در داخل کامنت دیگری قرار بگیرد. خط تیره ی (dash) دوتایی "--" ممکن نیست در داخل یک کامنت ظاهر شود، به جز در مواردی که بخشی از برچسب closing باشد. شما باید مطمئن باشید که هیچ فضای خالی در ابتدای رشته ی کامنت وجود ندارد.

 

ر اینجا کامنت ارائه شده یک کامنت معتبر می باشد و توسط مرورگر پاک می شود.

 

نمونه دو

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


 مثال:

نمونه سه

کامنت های چندخطی

تاکنون فقط کامنت های تک خطی را مشاهده کردیم، اما HTML کامنت های چندخطی را نیز پشتیبانی می کند.
شما می توانید کامنت های چند خطی داشته باشید با استفاده از برچسب آغازگر --!> و پایان دهنده ی ،--> که قبل از اولین خط و در پایان آخرین خط قرار میگیرد.


 مثال:

نمونه چهار

کامنت های شرطی

کامنت های شرطی تنها در اینترنت اکسپلورر روی ویندوز کار می کنند، اما توسط مرورگرهای دیگر هم نادیده گرفته می شوند. این کامنت ها در Internet Explorer 5 به بالاتر پشتیبانی می شوند و می توانید از آنها برای دادن دستورات شرطی به ورژن های مختلف IE استفاده کنید.


 مثال:

نمونه پنج

 

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

 

استفاده از برچسب کامنت

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


 مثال:

نمونه شش

اگر از IE استفاده می کنید، نتیجه ی زیر حاصل خواهد شد:

 

This is Internet Explorer.

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

 

This is Internet Explorer.

کد اسکریپت کامنت

شما جاوا اسکریپت را در یک آموزش مجزا با HTML یاد خواهید گرفت. در اینجا باید دقت کنید که اگر در حال استفاده از java script یا vb script در کد html خود هستید، بنابراین توصیه می شود که آن کد اسکریپت را در داخل کامنت های مناسب HTML قرار دهید طوری که مرورگرهای قدیمی بتوانند به درستی کار کنند.


 مثال:

نمونه هفت

کامنت صفحات طراحی

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

 

 

مثال:

نمونه هشت

 

بعلت عدم نمایش درست مثال ها در این وبلاگ،  آدرس  دوره آموزش طراحی سایت ما رو دنبال کنید 

  • افشین رفوآ
  • ۰
  • ۰

آموزش طراحی سایت - آموزش متا تگ در Html

۲۱ ارديبهشت۰۰

آموزش طراحی سایت - آموزش متا تگ در Html

آموزش html css

در این قسمت از آموزش HTML می خواهیم به Meta Tag در HTML و نحوه استفاده از آن در صفحات وب اشاره کنیم.
HTML علاوه بر مشخص کردن اطلاعات مهم به روش های مختلف در مورد یک داکیومنت، به شما اجازه می دهد تا متادیتا را نیز مشخص کنید. عناصر META می توانند برای وارد کردن جفت مقدار/نام استفاده شوند، این جفت ویژگی های داکیومنت HTML مانند نویسنده، تاریخ اتمام، لیست کلمات کلیدی، داکیومنت نویسنده و غیره را ارائه میدهد.
برچسب < meta> برای ارائه ی چنین اطلاعات اضافه ای استفاده می شود. این برچسب یک عنصر خالیست و دارای برچسب بستن نیست اما اطلاعاتی را با ویژگی آن در خود دارد. شما می توانید بر اساس اطلاعاتی که می خواهید در داکیومنت خود نگهداری کنید، یک برچسب یا بیشتر از یک برچسب متا وارد داکیومنت خود کنید. اما به طور کل برچسب های متا وضعیت ظاهری داکیومنت را تحت تاثیر قرار نمی دهند، بنابراین از لحاظ ظاهری استفاده کردن یا نکردن از آنها مشخص نمی شود.

 

افزودن برچسب های متا به داکیومنت ها:

شما می توانید با قرار دادن برچسب های در داخل تیتر داکیومنت که با برچسب های و مشخص می شوند، متا دیتا را به صفحات وب خود اضافه کنید. یک برچسب متا علاوه بر ویژگی های مرکزی، می تواند دارای ویژگی های زیر نیز باشد:

 

Attribute

 Description
Description

نام برای پراپرتی، می تواند هر چیزی از جمله کلمات کلیدی، توصیفات، نویسنده، تولید کننده و غیره باشد.
content

مقدار ویژگی را مشخص می کند.
scheme

نموداری را برای توضیح مقدار ویژگی مشخص می کند. (همانطور که در محتوی ویژگی مشاهده کردید.)

http-equiv

برای تیترهای پیام پاسخ http استفاده می شود. برای مثال http-equiv می تواند برای تازه سازی صفحات یا تنظیم یک cookie استفاده شود.مقادیری مانند نوع محتوا، اتمام، تازه سازی و تنظیم cookie.

 

برای تیترهای پیام پاسخ http استفاده می شود. برای مثال http-equiv می تواند برای تازه سازی صفحات یا تنظیم یک cookie استفاده شود.مقادیری مانند نوع محتوا، اتمام، تازه سازی و تنظیم cookie.

مشخص کردن کلمات کلیدی

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

 

مثال:

 

در این مثال برچسب های متا، متادیتا و HTML را با عنوان کلمات کلیدی در مورد داکیومنت وارد می کنیم.

 

< title >Meta Tags Example< /title >

< meta name="keywords" content="HTML, Meta Tags, Metadata" >

 

 توصیف داکیومنت

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


 مثال:

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

👈بازبینی تاریخ داکیومنت

شما می توانید از برچسب برای ارائه ی اطلاعات در مورد زمان آخرین آپدیت داکیومنت استفاده کنید. این اطلاعات می توانند توسط مرورگرهای مختلفی استفاده شوند، در حالیکه صفحه ی وب شما را تازه سازی می کنند.

 

 مثال:

 

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

    < meta name="description" content="Learning about Meta Tags." / >

    < meta name="revised" content="Tutorialspoint, 3/7/2014" / >

تازه سازی داکیومنت:

یک برچسب می تواند برای مشخص کردن دوره ای که پس از آن صفحه ی وب شما به طور خودکار بازسازی می شود، استفاده شود.

 

 مثال:

 

 

اگر می خواهید صفحه ی وب شما پس از هر 5 ثانیه ریفرش شود، از ترکیب زیر استفاده کنید:

 

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

    < meta name="description" content="Learning about Meta Tags." / >

    < meta name="revised" content="Tutorialspoint, 3/7/2014" / >

    < meta http-equiv="refresh" content="5" / >

👈Redirect کردن صفحه

می توانید از برچسب برای Redirect کردن صفحه ی خود استفاده کنید، همچنین می توانید دوره ای را مشخص کنید که پس از آن صفحه به طور خودکار Redirect شود

 

مثال:

 

در این مثال صفحه ی جاری پس از 5 ثانیه به صفحه ی دیگر Redirect می شود. اگر می خواهید صفحه فورا Redirect شود، هیچ محتوایی برای آن مشخص نکنید.

 

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta name="revised" content="Tutorialspoint, 3/7/2014" / >

< meta http-equiv="refresh" content="5" url=http://www.tutorialspoint.com" / >

👈تنظیم cookies

Cookies داده هایی هستند که در یک فایل کوچک متن روی کامپیوتر شما ذخیره شده اند و بین مرورگر وب و سرور وب ردو بدل می شود تا مسیر اطلاعات مختلف را براساس نیاز برنامه ی وب شما حفظ کنند.
شما می توانید از برچسب برای ذخیره ی cookies در بخش کاربری استفاده کنید و پس از آن این اطلاعات می توانند توسط سرور وب استفاده شوند تا بازدیدکننده ی سایت را پیگیری کنند.

 

 مثال:

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

    < meta name="description" content="Learning about Meta Tags." / >

    < meta name="revised" content="Tutorialspoint, 3/7/2014" / >

    < meta http-equiv="cookie" content="userid=xyz; expires=Wednesday, 08-Aug-15 23:59:59 GMT;" / >

 

اگر تاریخ و زمان انقضا را مشخص نکرده اید، cookie یک session cookie می باشد و وقتی که یوزر از مرورگر خارج شود، پاک خواهد شد.

 

تنظیم نام نگارنده

می توانید با استفاده از meta tag نام یک نگارنده را برای صفحه ی وب خود تنظیم کنید. یک مثال در این رابطه را در زیر مشاهده می کنید.

 

مثال:

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta ame="author" content="Mahnaz Mohtashim" / >

تعیین تنظیم کاراکتر

می توانید از برچسب برای تعیین تنظیم کاراکتر مربوط به صفحه ی وب استفاده کنید.

 

 مثال:

به طور پیش فرض مرورگرها و سرورهای وب از رمزگزاری ISO-8859-1 برای پردازش صفحات وب استفاده می کنند. در زیر مثالی را می بینید برای تنظیم رمزگزاری UTF-8:

 

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta name="revised" content="Tutorialspoint, 3/7/2014" / >

< meta http-equiv="cookie" content="userid=xyz; expires=Wednesday, 08-Aug-15 23:59:59 GMT;" / >

 

برای ارائه ی کاراکترهای چینی سنتی به یک صفحه ی استاتیک، صفحه ی وب باید دارای یک برچسب باشد تا رمزگذاری Big5 را تنظیم کند.

 

< meta name="keywords" content="HTML, Meta Tags, Metadata" / >

< meta name="description" content="Learning about Meta Tags." / >

< meta ame="author" content="Mahnaz Mohtashim" / >

< meta http-equiv="Content-Type" content="text/html; charset=Big5" / >

در این وبلاگ بنا به دلایل ممکن است نمونه مثال ها درست نمایش داده نشود لطفا برای مشاهده مثال ها به آدرس دوره آموزش طراحی سایت مراجعه فرمایید .

 

آموزش متا تگ در Html,آموزش html

  • افشین رفوآ
  • ۰
  • ۰

پروژه طراحی سایت - آموزش قالب بندی در HTML

۲۰ ارديبهشت۰۰

آموزش طراحی سایت - آموزش قالب بندی در HTML

در ادامه مباحث آموزشی HTML قبل، می خواهیم ببینیم چه آیتم هایی در format دادن و قالب بندی صفحات HTML مورد نیاز ما هستند.
اگر با پردازشگر word کار می کنید باید با بولد کردن (bold)، ایتالیک کردن و آندرلاین کردن متن آشنا باشید. این ها فقط سه گزینه از ده گزینه موجود برای چگونگی ظاهر شدن متن در HTML و XHTML می باشند.

 

بولد کردن متن

 

هرچیزی که بین عناصر< b>...< /b> قرار می گیرد به صورت بولد ظاهر می شود، مانند مثال زیر:

 

مثال:

نمونه یک

<!DOCTYPE html>
<html>
<head>
    <title>Bold Text Example</title>
</head>
<body>
    <p>The following word uses a <b>bold</b> typeface.</p>
</body>
</html>

ایتالیک کردن متن

هر چیزی که بین عناصر< i>...< /i>قرار بگیرد به صورت ایتالیک ظاهر می شود، مانند مثال زیر:

 

 مثال:

نمونه دو

<!DOCTYPE html>
<html>
<head>
    <title>Italic Text Example </title>
</head>
<body>
    <p>The following word uses a <i>italicized</i> typeface.</p>
</body>
</html>

آندرلاین کردن متن

هر چیزی که بین عناصر < u>...< /u> قرار بگیرد به صورت آندرلاین ظاهر می شود، مانند مثال زیر:

 

خط کشیدن روی متن

هر چیزی که بین گزینه های < strike>...< /strike> قرار بگیرد، با یک strikethrough نمایش داده می شود که خط باریکی می باشد که روی متن کشیده می شود، همانطور که در مثال زیر مشاهده می کنید:

 

فونت monospaced

محتوای عنصر < tt>...< /tt> به فونت monospaced نوشته می شود. اکثر فونت ها با عنوان فونت هایی با عرض متغیر شناخته شده اند، زیرا حروف مختلف دارای عرضهای مختلف هستند ( به عنوان مثال حرف m عریض تر از حرف I می باشد.) به هرحال در فونت monospaced تمام حروف دارای عرض یکسان می باشند.

 

متن superscript ( چاپ شده در بالا)

محتوای عنصر < sup>...< /sup> در بالا نوشته می شود، فونت استفاده شده برای آن همان فونت کاراکترهای اطراف آن می باشد، اما به اندازه ی نصف یک کاراکتر بالاتر از دیگر کاراکترها نمایش داده می شود.

 

متن subscript (چاپ شده در زیر)

محتوای عنصر< sub>...< /sub> در زیر نوشته می شود. اندازه ی فونت استفاده شده برای آن به اندازه ی فونت کاراکترهای اطراف می باشد اما به اندازه ی نصف ارتفاع یک کاراکتر زیر کاراکترهای دیگر نمایش داده می شود.

 

متن مندرج

هرچیزی که بین عنصر ... قرار بگیرد به عنوان متن مندرج نمایش داده می ش

 

متن حذف شده

هر چیزی که بین عنصر < del>...< /del> ظاهر شود با عنوان یک متن حذف شده نمایش داده می شود.

 

متن بزرگتر

محتوای عنصر < big>...< /big> اندازه فونت را بزرگتر از متن اطراف نشان می دهد. مانند مثال زیر

 

متن کوچکتر

محتوای عنصر < small>...< /small> متن را یک سایز کوچکتر از متن اطراف آن نشان می دهد، مانند مثال زیر:

 

گروه بندی محتوا

عناصر< div>و < span> به شما اجازه می دهند تا برای ایجاد بخش ها و یا زیرمجموعه های یک صفحه، عناصر زیادی را با یکدیگر گروه بندی کنید.
برای مثال ممکن است تمایل داشته باشید که تمام پاورقی ها را در یک صفحه در داخل عنصر < div> قرار دهید تا نشان دهید که تمام عناصر موجود در آن عنصر مربوط به پاورقی می باشند. پس از آن ممکن است طرحی را به عنصر< div> ضمیمه کنید، طوریکه با استفاده از مجموعه ای از قوانین طراحی ظاهر شوند.

 

از طرف دیگر عنصر < span> فقط می تواند برای گروه بندی داخل خطی عناصر استفاده شود. بنابراین اگر بخشی از جمله یا پاراگراف را دارید که می خواهید با هم در یک گروه قرار دهید، می توانید از عنصر < span> مانند زیر استفاده کنید:

 

این برچسب ها عموما با CSS استفاده می شوند تا به شما اجازه دهند طرحی را به بخشی ازیک صفحه ضمیمه کنید.

 

برای دیدن مثال ها و نمونه های بیشتر، به علت درست نمایش ندادن در این وبلاگآموزش طراجی سایت - آموزش قالب بندی در HTML به آموزش طراحی سایت مراجعه فرمایید 

  • افشین رفوآ
  • ۰
  • ۰

پروژه طراحی سایت -آموزش Attributeها در HTML

۱۹ ارديبهشت۰۰

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

ویژگی های زبان HTML

در این مبحث از آموزش های HTML می خواهیم به بررسی برخی از ویژگی های زبان HTML بپردازیم:
برخی از برچسب های HTML مانند برچسب های تیتر و برچسب های پاراگراف، و موارد استفاده ی آنها را مشاهده کردیم. تاکنون از آنها به ساده ترین شکل خود استفاده کرده ایم، اما بیشتر برچسب های HTML می توانند ویژگی هایی داشته باشند که مقداری اطلاعات اضافه می باشد.
یک attribute برای تعریف ویژگی های عنصر HTML استفاده می شود و در داخل برچسب بازکننده ی عنصر قرار می گیرد. همه ی ویژگی ها از دو بخش تشکیل شده اند: name و value.

 

  • Name ویژگی مورد نظر شما برای تنظیم میباشد، به عنوان مثال عنصر پاراگرافp> > در مثال ارائه شده دارای ویژگی می باشد که نام آن align می باشد و شما می توانید از آن برای تنظیم پاراگراف در صفحه استفاده کنید.
  • Value همان است که شما می خواهید مقدار ویژگی تنظیم شود و همیشه در داخل گیومه قرار می دهید. مثال زیر سه مقدار ممکن ازیک ویژگی تراز را نشان می دهد: چپ، مرکز و راست.

ویژگی نام ها و ویژگی مقادیر غیرهوشمند می باشند. به هرحال وب جهانی Consortium (W3C) مقادیر ویژگی ها را در HTML 4 با حروف کوچک پیشنهاد می دهد.

 

 مثال:

نمونه یک

<!DOCTYPE html>
<html>
<head>
    <title>Align Attribute  Example</title>
</head>
<body>
    <p align="left">This is left aligned</p>
    <p align="center">This is center aligned</p>
    <p align="right">This is right aligned</p>
</body>
</html>

 

 

ویژگی های اصلی

چهار ویژگی اصلی که می توانند در اکثر عناصر HTML مورد استفاده قرار بگیرند عبارتند از:

 

  • id
  • title
  • class
  • style

ویژگی id

ویژگی id یک برچسب HTML می تواند برای تشخیص یک عنصر در یک صفحه ی HTML مورد استفاده قرار بگیرد. دو دلیل اصلی برای تمایل شما به استفاده از ویژگی id در یک عنصر وجود دارد:

 

  • اگر یک عنصر یک ویژگی را به عنوان تشخیص دهنده ی منحصر به فرد استفاده می کند شناخت تنها آن عنصر و محتوای مربوط به آن ممکن می باشد.
  • اگر دارای دو عنصر هم نام در یک صفحه ی وب می باشید، می توانید از عنصر id برای تشخیص این عناصر هم نام استفاده کنید.

در مورد طراحی صفحه در آموزش های مجزا بحث خواهیم کرد، اکنون اجازه بدهید از ویژگی id برای تشخیص عناصر بین دو پاراگراف استفاده کنیم، مانند مثال زیر:

 

<p id="html">This para explains what is HTML</p>

<p id="css">This para explains what is Cascading Style Sheet</p>

 

ویژگی title:

این ویژگی یک تیتر پیشنهادی برای عنصر ارائه می دهد. ترکیب مربوط به ویژگی title شبیه به ترکیب توضیح داده شده برای ویژگی id می باشد. رفتار این ویژگی بستگی به عنصری دارد که آن را حمل می کند، گرچه اغلب اوقات وقتی مکان نما روی عنصر قرار می گیرد یا عنصر در حال بارگذاری می باشد، با عنوان یک راهنمای ابزار(tooltip) نمایش داده می شود.

 

 مثال:

نمونه دو

<!DOCTYPE html>
<html>
<head>
    <title>The title Attribute Example</title>
</head>
<body>
    <h3 title="Hello HTML!">Titled Heading Tag Example</h3>
</body>
</html>

اکنون سعی کنید مکان نما را روی "Titled Heading Tag Example" بیاورید، خواهید دید که هر تیتری که در کد خود استفاده کرده اید، مانند یک راهنمای ابزار نمایش داده خواهد شد.

 

ویژگی class:

این ویژگی برای برقراری ارتباط بین یک عنصر با یک صفحه ی طراحی استفاده می شود و گروه عنصر را مشخص می کند. وقتی که را یاد بگیرید Cascading Style Sheet (CSS) در مورد این ویژگی بیشتر فرا خواهید گرفت. اکنون تا همین حد کافیست.
مقدار ویژگی نیز ممکن است لیستی از فضاهای مجزای نام های گروه باشد، برای مثال:

 

class="className1 className2 className3"

 

ویژگی style

این ویژگی به شما اجازه می دهد تا قوانین CSS را در داخل عنصر مشخص کنید.

 

 مثال:

<!DOCTYPE html>
<html>
<head>
    <title>The style Attribute</title>
</head>
<body>
    <p style="font-family:arial; color:#FF0000;">Some text...</p>
</body>
</html>

اکنون CSS را یاد نمیگیریم بنابراین اجازه دهید بدون اینکه بیشتر از این خود را در مورد CSS اذیت کنیم، به جلوتر برویم. در اینجا لازم است در مورد ویژگی های HTML بدانید و اینکه چگونه در هنگام طراحی متن مورد استفاده قرار می گیرند.

 

درونی کردن ویژگی ها

سه ویژگی درونی وجود دارند که برای اکثر عناصر HTML استفاده می شوند:

 

  • dir
  • lang
  • xml:lang

ویژگی dir

این ویژگی به شما اجازه می دهد تا مسیری را به مرورگر نشان دهید که متن در آن باید جریان داشته باشد. ویژگی dir می تواند یکی از دو مقدار باشد، همانطور که در جدول زیر نشان داده شده است:

 

Value Meaning

ltr

 

 از چپ به راست ( مقدار پیش فرض)
rtl

راست به چپ ( برای زبان هایی مانند هبرو یا عربی که از راست به چپ خوانده می شوند.)

 مثال:

نمونه چهار

<!DOCTYPE html>
<html dir="rtl">
<head>
    <title>Display Directions</title>
</head>
<body>
    This is how IE 5 renders right-to-left directed text.
</body>
</html>

وقتی که ویژگی dir در داخل برچسب html> > استفاده می شود، مشخص می کند که چگونه متن در کل داکیومنت نمایش داده می شود. وقتی در برچسب دیگری مورد استفاده قرار بگیرد، مسیر متن را برای محتوای مربوط به آن برچسب کنترل می کند.
ویژگی lang: این ویژگی به شما کمک می کند تا زبان اصلی استفاده شده در یک داکیومنت را نشان دهید، اما این ویژگی فقط برای سازگاری معکوس با ورژن های قدیمی تر HTML در HTML حفظ شده است. این ویژگی به وسیله ی ویژگی xml:lang در داکیومنت های جدید HTML جایگزین شده است.
مقادیر ویژگی lang کدهای دو کاراکتری زبان استاندارد ISO-639 می باشند. HTML Language Codes: ISO 639 را برای لیست کاملی از کدهای زبان چک کنید.

 

 مثال:

 

نمونه پنج

 

<!DOCTYPE html>
<html lang="en">
<head>
    <title>English Language Page</title>
</head>
<body>
    This page is using English Language
</body>

</html>

ویژگی xml:lang

این ویژگی جایگزین xhtml برای ویژگی lang می باشد. مقدار ویژگی xml:lang باید یک کد ISO-639 می باشد، همانطور که در بخش قبل بیان شد.

 

ویژگی های عمومی

در اینجا جدولی را می بینید که برخی دیگر از ویژگی هایی که در برچسب های HTML مفید می باشند،را نشان می دهد.

 

Attribute

 Options Function
align

راست، چپ، مرکز

برچسب ها را به طور افقی تنظیم می کند.
valign

بالا، وسط، پایین.

برچسب ها را به طور عمودی در یک عنصر HTML تنظیم می کند.
bgcolor

numeric, hexidecimal, RGB values

پشت یک عنصر یک رنگ پس زمینه قرار می دهد.
background URL

پشت یک عنصر یک تصویر پس زمینه قرار می دهد.
id

User Defined

عنصری را برای استفاده با Cascading Style Sheets (CSS) نام می برد.

class

User Defined

عنصری را برای استفاده با Cascading Style Sheets طبقه بندی می کند.
width

Numeric Value

عرض جدول ها، تصاویر و یا سلول های جدول ها را مشخص می کند.
height

Numeric Value

طول جدول ها، تصاویر و یا سلول های جدول ها را مشخص می کند.

title

User Defined

تیتر عناصر را پاپ آپ می کند.

 

  • افشین رفوآ
  • ۰
  • ۰

پروژه طراحی وب سایت-عناصر در HTML

۱۶ ارديبهشت۰۰

پروژه طراحی وب سایت-عناصر در HTML

آموزش عناصر در HTML

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

 

Start Tag

 Content

End Tag

< p>

این برچسب محتوای پاراگراف می باشد.

< /p>

< h1>

این برچسب تیتر محتوا می باشد.

< /h1>

< div>

این برچسب تقسیم محتوا می باشد.

< /div>

< br />

    

 

بنابراین در اینجا< p>....< /p> یک عنصر HTML و< h1>...< /h1> عنصر دیگری از HTML می باشد. عناصری از HTML وجود دارند که نیازی به بسته شدن ندارند مانند < img... />, < hr /> و< br /> . این عناصر با عنوان void elements (عناصر خالی) شناخته می شوند.
داکیومنت های HTML دارای درختی از این عناصر می باشند و مشخص می کنند که چگونه داکیومنت ها باید ساخته شوند و چه نوع محتوایی باید در چه بخشی از داکیومنت HTML قرار بگیرد.

 

برچسب HTML در مقابل عنصر

یک عنصر HTML به وسیله ی یک برچسب شروع کننده تعریف می شود. اگر عنصر دارای محتوای دیگری باشد با یک برچسب بستن تمام می شود.
برای مثال< p> برچسب شروع کننده ی یک پاراگراف می باشد و< /p> برچسب بستن همان پاراگراف می باشد، اما < p>This is paragraph< /p> عنصر یک پاراگراف می باشد.

 

عناصر تو در توی HTML

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

نمونه یک

<!DOCTYPE html>
<html>
<head>
    <title>Nested Elements Example </title>
</head>
<body>
   <h1>This is<i>italic</i> heading</h1>
   <p>This is <u>underlined</u> paragraph</p>
</body>
</html>

آموزش عناصر در HTML

 

  • افشین رفوآ
  • ۰
  • ۰

پروژه طراحی وب سایت -مرور کلی بر HTML

۱۳ ارديبهشت۰۰

پروژه طراحی وب سایت -مرور کلی بر HTML

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

داکیومنت پایه ی HTML

به ساده ترین شکل خود، در زیر مثالی را از یک داکیومنت HTML مشاهده می کنید:

 

نمونه یک

<!DOCTYPE html>

<html>

<head>

  <title>This is document title</title>

</head>

<body>

   <h1>This is a heading</h1>

    <p>Document content goes here.....</p>

</body>

</html>

 

برای چک کردن نتیجه این کد HTML هم می توانید با استفاده از ویرایشگر مورد علاقه ی خود، آن را در یک فایل HTML و با نام test.htm ذخیره کنید. در انتها آن را با استفاده از یک مرورگر مانند اینترنت اکسپلورریا گوگل کروم یا فایرفاکس و غیره باز کنید.

 

برچسب های HTML

همانطور که قبلا گفته شد HTML یک زبان نشانه گذاری است و برای طراحی محتوا از برچسب های مختلفی استفاده می کند. این برچسب ها در داخل علامت <> قرار میگیرند.
به جز تعداد کمی از برچسب ها، بسیاری از آنها برچسب متناظر بستن را نیز دارند. به عنوان مثال< html>دارای برچسب بستن< /html> و < body>دارای برچسب بستن< /body> می باشند.
مثال بالا از داکیومنت HTML از برچسب های زیر استفاده می کند:

 

Tag Description

< !DOCTYPE...>

این برچسب نوع داکیومنت و ورژن HTML را تعریف می کند.
< html>

این برچسب داکیومنت کامل HTML را احاطه می کند و اساسا شامل تیتر داکیومنت می شود که توسط< head>...< /head> نمایش داده می شود و بدنه ی داکیومنت نیز به وسیله ی برچسب های < body>...< /body> نمایش داده می شوند.

< head>

این برچسب تیتر داکیومنتی را نشان می دهد که می تواند دیگر برچسب های HTML از مانند < title>, < link> را در خود نگه دارد.

< title>

برچسب < title> در داخل برچسب< head>استفاده می شود تا تیتر داکیومنت را ذکر کند.

< body>

این برچسب بدنه ی داکیومنتی را نشان می دهد که دیگر برچسب های HTML مانند < h1>, < div>, < p> را در خود دارد.

< h1>

این برچسب تیتر را نمایش می دهد.

< p>

این برچسب یک پاراگراف را نمایش می دهد.

 

برای یادگیری HTML لازم است برچسب های مختلفی را مطالعه کنید و درک کنید که در هنگام طراحی یک داکیومنت متنی چگونه رفتار می کنند. یادگیری HTML ساده است چرا که یوزرها ، باید مورد استفاده ی برچسب های مختلف را برای طراحی متن و یا تصاویر و ایجاد یک صفحه وب زیباتر ، یاد بگیرند.
وب جهانی Consortium (W3C) پیشنهاد می دهد که در شروع با HTML برچسب ها را با حروف کوچک به کار ببرید.

 

ساختار داکیومنت HTML

یک نمونه از داکیومت HTML دارای ساختار زیر خواهد بود:
Document declaration tag

 

نمونه دو

<title>Page Title</title>

 

    Document body related tags

 

تمام برچسب های مربوط به بدنه و تیتر را در بخش های بعدی مطالعه خواهیم کرد، اکنون اجازه بدهید در مورد برچسب داک تایپ بیشتر بدانیم.

 

< !DOCTYPE>:

برچسب < !DOCTYPE> توسط مرورگرهای وب برای پی بردن به ورژن HTML استفاده شده در داکیومنت مورد استفاده قرار می گیرد. ورژن حال حاضر HTML ورژن 5 می باشد که از اطلاعیه ی زیر استفاده می کند:

 

انواع دیگری اطلاعیه وجود دارند که می توانند در داکیومنت HTML، متناسب با ورژن HTML مورد استفاده قرار بگیرند. جزئیات بیشتری در این مورد در دوره آموزش طراحی سایت  تحلیل داده ببینید
 

 

  • افشین رفوآ
  • ۰
  • ۰

پروژه طراحی وب سایت-آموزش html

۱۲ ارديبهشت۰۰

پروژه طراحی وب سایت - آموزش HTML

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

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

در این مقاله آموزش HTML می خواهیم مقدمات آنرا برای شما دوستان عزیز بیان کنیم.
HTML مخفف عبارت Hyper Text Markup Language می باشد که در واقع گسترده ترین زبان استفاده شده در صفحات وب می باشد.
HTML توسط برنرز لی در اواخر سال 1991 ایجاد شد، اما html 2.0 اولین نوع استاندارد آن بود که در سال 1995 منتشر شد. HTML 4.01 ورژن مهمی از HTML بود که دراواخر 1999 منتشر شد. گرچه در آموزش html HTML 4.01 ورژنی است که به طور گسترده استفاده می شود، اما معمولا HTML 5 را داریم که توسعه ی یافته html 4.01 است و در سال 2012 منتشر شد.
این آموزش HTML برای آشنا کردن طراحان و توسعه دهندگان وب با نیاز برای درک HTML با جزئیات کافی به همراه یک نظر کلی ساده و مثال های عملی، طراحی شده است. این آموزش HTML به شما محتوای کافی برای شروع با HTML از جایی که می توانید تخصصی با سطح بالاتر داشته باشید، ارائه می دهد.

 

پیش نیازها:

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

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

  • تجربه کار با هر ویرایشگری مانند Notepad، Notepad ++ و یا Editplus و غیره برای آموزش html .
  • چگونگی ایجاد مسیرها و فایل ها روی کامپیوتر خود برای آموزش html
  • چگونگی مسیریابی از طریق مسیرهای مختلف برای آموزش html.
  • چگونگی تایپ کردن محتوا در یک فایل و ذخیره ی آنها روی کامپیوتربرای آموزش html.
  • درک تصاویر با فرمت های مختلف مانند JPEG و PNG برای آموزش html.

امتحان کردن HTML روی خط

نمونه یک

<h1>Hello World!</h1>

 

ادامه دارد

با گذاشتن کامنت ما را یاری کنید

 

  • افشین رفوآ
ساخت وبلاگ در بلاگ بیان، رسانه متخصصان و اهل قلم