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

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

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

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

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


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

۵۷ مطلب با کلمه‌ی کلیدی «دوره آموزش طراحی سایت» ثبت شده است

  • ۰
  • ۰

فونت ها

فونت ها

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

 

فونت ها

فونت ها نقش مهمی در زیبا ساختن و خواناتر کردن وب سایت بازی می کنند. ظاهرو رنگ فونت به طور کامل بستگی به کامپیوتر و مرورگری دارد که استفاده می شود، اما شما می توانید از برچسب < font>در HTML برای افزودن استایل، سایز و رنگ به متن خود در وب سایت استفاده کنید. می توانید از یک برچسب< basefont> برای تنظیم تمام متن خود به اندازه، ظاهر و رنگ یکسان استفاده کنید.
برچسب فونت دارای سه ویژگی به نام های size، color و face می باشد که فونت شکا را به دلخواه در می آورد. برای تغییر هرکدام از ویژگی های فونت در هر زمانی در صفحه ی وب خود، به سادگی از برچسب < font> استفاده کنید. متنی که دنبال می کند، تغییر یافته با قی می ماند تا زمانی که شما آن را با < /font> برچسب ببندید. شما می توانید یکی از ویژگی ها یا همه ی ویژگی های داخل برچسب < font> را تغییر دهید.

 

نکته:

برچسب های font و basefont استفاده نمی شوند و احتمال می رود که در ورژن های بعدی HTML حذف شوند. بنابراین نباید مورد استفاده قرار بگیرند، پیشنهاد می شود که برای اجرای فونت های خود از استایل های CSS استفاده کنید. اما برای رسیدن به هدف این فصل برچسب های font و basefont رابا جزئیات توضیح می دهد.

 

تنظیم اندازه ی فونت

شما می توانید با استفتده از ویژگی size اندازه فونت محتوا را تنظیم کنید. دامنه ی مقادیر قابل قبول از 1 (کوچکترین) تا 7 (بزرگترین) می باشد. اندازه ی فونت پیش فرض 3 می باشد.


 مثال:

 

<!DOCTYPE html>
<html>
<head>
    <title>Setting Font Size</title>
</head>
<body>
    <font size="1">Font size="1"</font><br />
    <font size="2">Font size="2"</font><br />
    <font size="3">Font size="3"</font><br />
    <font size="4">Font size="4"</font><br />
    <font size="5">Font size="5"</font><br />
    <font size="6">Font size="6"</font><br />
    <font size="7">Font size="7"</font>
</body>
</html>

 

اندازه ی فونت مربوط

شما می توانید مشخص کنید چه تعداد از فونت ها بزرگتر و چه تعداد کوچکتر از اندازه ی فونت حاضر باشند. می توانید آن را مانند< font size="+n"> or < font size="-n"> مشخص کنید.


 مثال:

نمونه دو

 

<!DOCTYPE html>
<html>
<head>
    <title>Relative Font Size</title>
</head>
<body>
    <font size="-1">Font size="-1"</font><br />
    <font size="+1">Font size="+1"</font><br />
    <font size="+2">Font size="+2"</font><br />
    <font size="+3">Font size="+3"</font><br />
    <font size="+4">Font size="+4"</font>
</body>
</html>

 

تنظیم ظاهر فونت

شما می توانید با استفاده از ویژگی face ظاهر فونت را تنظیم کنید، اما باید بدانید که اگر کاربر بازدیدکننده ی صفحه، فونت را نصب نکرده باشد، قادر به دیدن آن نخواهد بود. در عوض کاربر ظاهر فونت پیش فرض را می بیند که برای کامپیوترش مناسب می باشد.


 مثال:

نمونه سه

 

<!DOCTYPE html>
<html>
<head>
    <title>Font Face</title>
</head>
<body>
    <font face="Times New Roman" size="5">Times New Roman</font><br />
    <font face="Verdana" size="5">Verdana</font><br />
    <font face="Comic sans MS" size="5">Comic Sans MS</font><br />
    <font face="WildWest" size="5">WildWest</font><br />
    <font face="Bedrock" size="5">Bedrock</font><br />
</body>
</html>

 

تعیین ظاهر فونت جایگزین

یک بازدید کننده فقط قادر خواهد بود فونت شما را ببیند، اگر آن را نصب شده روی کامپیوتر خود داشته باشد. بنابراین امکان تعیین دو یا بیشتر از دو ظاهر جایگزین با ارائه ی نام های مربوط به فونت ها وجود دارد.

 

< font face="arial,helvetica">

< font face="Lucida Calligraphy,Comic Sans MS,Lucida Console">

 

 

 

اگر هیچکدام از فونت های ارائه شده نصب نشده باشند، بنابراین فونت پیش فرض Times New Roman نمایش داده خواهد شد.

 

تنظیم رنگ فونت

شما می توانید با استفاده از ویژگی color هر رنگی رابرای فونت تنظیم کنید. شما می توانید رنگ مورد نظر خود را یا با استفاده از نام رنگ و یا با استفاده از کد هگزادسیمال برای آن رنگ تعیین کنید.


 مثال:

نمونه چهار

<!DOCTYPE html>
<html>
<head>
    <title>Setting Font Color</title>
</head>
<body>
    <font color="#FF00FF">This text is in pink</font><br />
    <font color="red">This text is red</font>
</body>
</html>

 

 

 

 

عنصر < basefont>

انتظار می رود که عنصر < basefont> یک اندازه، رنگ و ظاهر پیش فرض برای هر بخشی از داکیومنت که در برچسب < font>قرار نمی گیرند، تنظیم کند. شما می توانید از عناصر < font>استفاده کنید تا تنظیمات < basefont> را انجام دهید.
برچسب < basefont> همچنین ویژگی های رنگ، اندازه و ظاهر را می گیرد و با دادن مقدار بیشتر از 1+ برای فونت های بزرگتر و کمتر از 2- برای فونت های کوچکتر، تنظیمات فونت مربوطه را پشتیبانی می کند.


 مثال:

نمونه پنج

<!DOCTYPE html>
<html>
<head>
    <title>Setting Basefont Color</title>
</head>
<body>
    <basefont face="arial, verdana, sans-serif" size="2" color="#ff0000">
    <p>This is the page's default font.</p>
    <h2>Example of the <basefont&gt; element</h2>
    <p>
        <font size="+2" color="darkgray">
            This is darkgray text with two sizes larger
        </font>
    </p>
    <p>
        <font face="courier" size="-1" color="#000000">
            It is a courier font, a size smaller and black in color.
        </font>
    </p>
</body>
</html>

 

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

پس زمینه در html

پس زمینه در html

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

background در html

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

 

  • زمینه ی HTML با رنگ ها.
  • زمینه ی HTML با تصاویر.

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

 

زمینه ی HTML با رنگها

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

 

 

< tagname bgcolor="color_value" ...>

 

این color- value می تواند به هرکدام از فرمت های زیر ارائه شود.

 

<!-- Format 1 - Use color name -->

< table bgcolor="lime">

 

<!-- Format 2 - Use hex value -->

< table bgcolor="#f1f1f1">

 

<!-- Format 3 - Use color value in RGB terms -->

< table bgcolor="rgb(0,0,120)">

 

 مثال:

در اینجا مثالی را می بینید از تنظیم زمینه ی یک برچسب HTML.

 

نمونه یک

<!DOCTYPE html>
<html>
<head>
    <title>HTML Background Colors</title>
</head>
<body>
    <!-- Format 1 - Use color name -->
    <table bgcolor="yellow" width="100%">
        <tr>
            <td>
                This background is yellow
            </td>
        </tr>
    </table>
    <!-- Format 2 - Use hex value -->
    <table bgcolor="#6666FF" width="100%">
        <tr>
            <td>
                This background is sky blue
            </td>
        </tr>
    </table>
    <!-- Format 3 - Use color value in RGB terms -->
    <table bgcolor="rgb(255,0,255)" width="100%">
        <tr>
            <td>
                This background is green
            </td>
        </tr>
    </table>
</body>
</html>

زمینه ی HTML با تصاویر

آموزش html css

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

 

 توجه:

ویژگی background به عنوان ویژگی خوبی تلقی نمی شود و توصیه می شود از style sheet برای تنظیم زمینه استفاده کنید.

 

 

< tagname background="Image URL" ...>

 

 

متداول ترین فرمت های مورد استفاده ی تصویر عبارتند از JPEG، PNG و GIF.

 

مثال:

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

 

نمونه دو

<!DOCTYPE html>
<html>
<head>
    <title>HTML Background Images</title>
</head>
<body>
    <!-- Set table background -->
    <table background="http://tahlildadeh.com/Temp/Html/html.jpg" width="100%" height="400">
        <tr>
            <td>
                This background is filled up with HTML image.
            </td>
        </tr>
    </table>
</body>
</html>

 

زمینه های طرح دار و شفاف

شما ممکن است الگوها و زمینه های شفاف بسیاری را در وب سایت های نختلف دیده باشید. این امر به راحتی و با استفاده از تصاویر طرح دار و شفاف در زمینه قابل دستیابی می باشد. توصیه می شود در هنگام ایجاد تصاویر طرح دار یا شفاف GIF یا PNG، از کوچکترین ابعاد ممکن آنها استفاده کنید، حتی به کوچکی 1x1 برای جلوگیری از بارگذاری آهسته.


 مثال:

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

 

نمونه سه

 

<!DOCTYPE html>
<html>
<head>
    <title>HTML Background Images</title>
</head>
<body>

 

    <!-- Set a table background using pattrern -->
    <table background="/images/pattern1.jpg" width="20%" height="100">
        <tr>
            <td>
                This background is filled up with a pattern image.
            </td>
        </tr>
    </table>
    <!-- Another example on table background using pattrern -->
    <table background="http://tahlildadeh.com/Temp/Html/pattern2.jpeg" width="20%" height="100">
        <tr>
            <td>
                This background is filled up with a pattern image.
            </td>
        </tr>
    </table>
</body>
</html>
 
 
  • افشین رفوآ
  • ۰
  • ۰

آموزش Iframes در html

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

آموزش Iframes

شما می توانید یک frame درون خطی را با استفاده از برچسب < iframe>مربوط به HTML تعریف کنید. این برچسب به برچسب < frameset>ارتباطی ندارد، در عوض می تواند در هرجایی در داکیومنت شما ظاهر شود. برچسب< iframe>یک محدوده ی مستطیلی را در داخل داکیومنت تعریف می کند که در آن مرورگر می تواند یک داکیومنت مجزا را ارائه دهد، مانند نوارهای اسکرول و حاشیه ها.
ویژگی src برای مشخص کردن URL مربوط به داکیومنتی استفاده می شود که حاوی frame درون خطی می باشد.


 مثال:

در زیر مثالی را می بینید که چگونگی استفاده از < iframe> را توضیح می دهد.

 

نمونه یک

 

<!DOCTYPE html>
<html>
<head>
    <title>HTML Iframes</title>
</head>
<body>
    <p>Document content goes here...</p>
    <iframe src="/html/menu.htm" width="555" height="200">
        Sorry your browser does not support inline frames.
    </iframe>
    <p>Document content also go here...</p>
</body>
</html>

 

 

ویژگی های برچسب < iframe>

بسیاری از ویژگی های برچسب < iframe> شامل نام، گروه، حاشیه، id، longdesk، طول حاشیه، عرض حاشیه، نام، اسکرول کردن، روش و تیتر، درست مانند ویژگی های متناظر با برچسب < frame> رفتار می کنند.

 

 

Attribute Description
src

این ویژگی برای نام گذاری فایلی استفاده می شود که باید در frame بارگذاری شود. مقدار آن می تواند هر URL باشد. برای مثال src="/html/top_frame.htm" فایل HTML موجود در مسیر html را بارگذاری خواهد کرد.

name

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

frameborder

این ویژگی مشخص می کند که آیا حاشیه های frame نشان داده شوند یا خیر. این ویژگی مقدار داده شده به ویژگی frameborder روی برچسب < frameset> را می گیرد، البته اگر مقداری مشخص شده باشد، این مقدار می تواند 1 (بله) و یا 0 (خیر) باشد.

marginwidth

این ویژگی به شما اجازه می دهد تا عرض فضای بین حاشیه های چپ و راست frame و محتوای آن را مشخص کنید. مقدار به پیکسل داده می شود. برای مثال marginwidth="10".

marginheight

این ویزگی به شما اجازه می دهد تا طول فضای بین بالا و پایین حاشیه ی frame و محتوای آن را مشخص کنید. مقدار به پیکسل داده می شود. برای مثال marginheight="10"

noresize

به طور پیش فرض هر frame را با کلیک کردن و درگ کردن روی حاشیه های آن می توانید تغییر اندازه دهید. ویژگی noresize مانع تغییر اندازه ی frame توسط یوزر می شود. برای مثال noresize="noresize".

scrolling

این ویژگی ظاهر نارهای اسکرول نمایان شده در frame را کنترل می کند. این ویزگی مقادیر "yes", "no" یا "auto"را می گیرد. برای مثال scrolling="no" به معنای نبودن نوارهای اسکرول می باشد.

longdesc

این ویژگی به شما اجازه می دهد تا یک لینک به صفحه ای حاوی یک توصیف طولانی از محتوای frame، ارائه بدهید. برای مثال longdesc="framedescription.htm"

 

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

آموزش قابها در html

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

قاب های HTML

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

 

نقطه ضعف های چارچوب ها:

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

 

ایجاد چارچوب ها:

برای استفاده از چارچوب ها در یک صفحه از برچسب < frameset> به جای < body>استفاده می کنیم. برچسب< frameset> چگونگی تقسیم پنجره به چارچوب را تعریف می کند. ویژگی rows از برچسب < frameset> چارچوب های افقی و ویژگی cols نیز چارچوب های عمودی را تعریف می کنند. هر چارچوب توسط برچسب < frame> نشان داده شده است و تعریف می کند که کدام داکیومنت HTML باید در داخل چارچوب باز شود.

 

 مثال:

در زیر مثالی را برای ایجاد سه چارچوب افقی می بینید.

 

نمونه یک

 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML Frames</title>
</head>
<frameset rows="25%,50%,25%">
    <frame name="left" src="http://tahlildadeh.com/Temp/Html/top_frame.htm" />
    <frame name="center" src="http://tahlildadeh.com/Temp/Html/main_frame.htm" />
    <frame name="right" src="http://tahlildadeh.com/Temp/Html/bottom_frame.htm" />
    <noframes>
        <body>
            Your browser does not support frames.
        </body>
    </noframes>
</frameset>
</html>

 

ویژگی های برچسب < frameset>: 

 

Attribute Description
cols تعداد ستون ها و اندازه ی هر ستون را در frameset مشخص می کند. شما می توانید عرض هر ستون را به یکی از چهار روش زیر مشخص کنید:
مقادیر مطلق به پیکسل، برای مثال برای ایجاد سه چارچوب عمودی از cols="100, 500,100" استفاده کنید. درصدی از پنجره ی مرورگر، برای مثال برای ایجاد سه چارچوب عمودی از cols="10%, 80%,10%" استفاده کنید.
استفاده از سمبل wildcard ، برای مثال برای ایجاد سه چارچوب عمودی از cols="10%, *,10%" استفاده کنید. در این مورد wildcard باقیمانده ی پنجره را فرا می گیرد.
به عنوان عرض های پنجره ی مرورگر، به عنوان مثال برای ایجاد سه چارچوب عمودی از cols="3*,2*,1*" استفاده کنید. این یک جایگزین بری درصدها می باشد. شما می توانید از عرض های مربوط پنجره ی مرورگر استفاده کنید. در اینجا پنجره به شش بخش تقسیم می شود: اولین ستون نصف پنجره را فرا می گیرد، دومین ستون یک سوم و سومین ستون یک ششم آن را.
rows این ویژگی درست مانند ویژگی cols کار می کند و همان مقادیر را به خود می گیرد، اما برای مشخص کردن ردیف ها در frameset استفاده می شود. برای مثال برای ایجاد دو چارچوب افقی از rows="10%, 90%" استفاده کنید. می توانید طول هر ردیف را به همان روشی که در بالا در مورد ستون ها توضیح داده شد، مشخص کنید.
border

این ویژگی عرض حاشیه ی هر چارچوب را به پیکسل مشخص می کند. برای مثال border="5" . مقدار 0 به معنای بدون حاشیه می باشد.

frameborder‍‍‍

این ویژگی مشخص می کند که آیا بین چارچوب ها باید حاشیه ی سه بعدی نمایش داده شود. این ویژگی مقدار 1 (بله) و 0 (خیر) را به خود می گیرد. برای مثال frameborder="0" به معنای بدون حاشیه می باشد.

framespacing

این ویژگی مقدار فضای بین چارچوب ها را در یک frameset مشخص می کند. این ویژگی می تواند هرمقدار داخلی به خود بگیرد. برای مثال framespacing="10" به معنای وجود 10 پیکسل فضا بین هر چارچوب می باشد.

ویژگی های برچسب < frame>

Attribute Description
src

این ویژگی برای ارائه ی نام فایلی که باید در چارچوب بارگذاری شود، مورد استفاده قرار می گیرد. مقدار آن هر URL می تواند باشد. برای مثال src="/html/top_frame.htm" یک فایل HTML موجود در مسیر html بارگذاری خواهد کرد.

name

این ویزگی به شما اجازه می دهد تا یک چارچوب را نام گذاری کنید. این ویژگی نشان می دهد که داکیومنت در کدام چارچوب باید بارگذاری شود؛ به ویژه در هنگام ایجاد لینک در یک چارچوب که صفحاتی را روی یک چارچوب دیگر بارگذاری می کند، که در آن مورد frame دوم برای مشخص کردن خود به عنوان هدف لینک، بسیار مهم است.

frameborder

این ویژگی مشخص می کند که آیا حاشیه های مربوط به frame نشان داده می شوند یا نه. این امر مقدار داده شده به ویژگی frameborder را روی برچسب می گیرد، اگر مقداری ارائه شده باشد و این ویژگی می تواند مقادیر 1 (بله) و 0 (خیر) بگیرد.

marginwidth

این ویژگی به شما اجازهمی دهد تا عرض فضای بین چپ و راست حاشیه های frame و محتوای آن را مشخص کنید. این مقدار به پیکسل داده می شود. برای مثال marginwidth="10"

marginheight

این ویژگی به شما اجازهمی دهد تا طول فضای بین بالا و پایین حاشیه های frame و محتوای ان را مشخص کنید. مقدار به پیکسل داده می شود. برای مثال marginheight="10".

noresize

به طور پیش فرض شما می توانید با کلیک کردن و درگ کردن روی حاشیه های frame هر گونه frame را تغییر اندازه بدهید. ویژگی noresize قابلیت تغییر اندازه ی یک frame را ازبین می برد. برا مثال noresize="noresize"

scrolling

این ویژگی ظاهر اسکرول بارهایی را که روی frame نمایان می شوند، کنترل می کند. این ویژگی مقدار "yes", "no" یا "auto"به خود می گیرد. برای مثال scrolling="no" به این معناست که frame نباید اسکرول بار داشته باشد.

longdesc

این ویژگی به شما اجازه می دهد تا به صفحه ای دارای توضیح طولانی در مورد محتوای frame یک لینک ارائه دهید. برای مثال longdesc="framedescription.htm"

مرورگرهایی که frame ها را پشتیبانی می کنند

اگر کاربر از مرورگرهای قدیمی یا مرورگرهایی استفاده کند که frame را پشتیبانی نمی کنند، عنصر < noframes>باید به یوزر نمایش داده شود. بنابراین شما باید یک عنصر < body>را داخل عنصر < noframes>قرار دهید، زیرا تصور می شود که عنصر< frameset>جایگزین عنصر< body>می شود. اما اگر یک مرورگر < frameset>را درک نکند، بنابراین باید آنچه را که داخل عنصر< body>می باشد درک کند که حاوی عنصر < noframes>می باشد.
شما می توانید به یوزرهای خود که از مرورگرهای قدیمی استفاده می کنند، پیام هایی بدهید. برای مثال پیام Sorry!! your browser does not support frames. ، همانطور که در مثال بالا نشان داده شده است.

 

نام frame و ویژگی های target

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


 مثال:

اجازه بدهید مثال زیر را بررسی کنیم که داری کد زیر می باشد:

 

آموزش html css

نمونه دو

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>HTML Frames</title>
</head>
<frameset cols="25%,50%,25%">
    <frame name="left" src="http://tahlildadeh.com/Temp/Html/top_frame.htm" />
    <frame name="center" src="http://tahlildadeh.com/Temp/Html/main_frame.htm" />
    <frame name="right" src="http://tahlildadeh.com/Temp/Html/bottom_frame.htm" />
    <noframes>
        <body>
            Your browser does not support frames.
        </body>
    </noframes>
</frameset>
</html>

 

 

در اینجا دو ستون ایجاد کرده ایم که قرار است با دو ستون پر شوند. اولین frame دارای عرض 200 پیکسل می باشد و حاوی نوار منوی مسیر یابی می باشد که توسط فایل menu.htm اجرا می شود. دومین ستون فضای باقیمانده را پر کرده و حاوی بخش اصلی صفحه خواهد بود و توسط فایل main.htm اجرا می شود. برای هرسه لینک موجود در نوار منو یک frame هدف به عنوان main_page ذکر کرده ایم، بنابراین هر زمان روی لینک های موجود در نوار منو کلیک کنید، لینک موجود در main_page باز خواهد شد.
در زیر محتوای فایل menu.htm را مشاهده می کنید.

 

نمونه سه

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<body bgcolor="#4a7d49">

   <a href="http://www.google.com" target="main_page">Google</a>

  <br /><br />

    <a href="http://www.microsoft.com" target="main_page">Microsoft</a>

   <br /><br />

</body>

</html>

 

در زیر محتوای فایل main.htm را مشاهده می کنید.

 

نمونه چهار

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<body bgcolor="#b5dcb3">

    <h3>This is main page and content from any link will be displayed here.</h3>

    <p>So now click any link and see the result.</p>

</body>

</html>

 

اکنون می توانید لینک های موجود در پنل چپ را کلیک کرده و نتیجه را مشاهده کنید. ویژگی target نیز یکی از مقادیر زیر را می گیرد:

 

Option Description
_self

صفحه را روی frame جاری بارگذاری می کند.

_blank

صفحه را روی یک پنجره ی مرورگر جدید بارگذاری کرده ، در حالیکه یک پنجره ی جدید باز می کند.

_parent

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

_top

صفحه را روی پنجره ی مرورگر بارگذاری می کند، در حالیکه هر frame موجود را جایگزین می کند.

targetframe

صفحه را در یک target frame نام گذاری شده بارگذاری می کند.

 

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

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

لینک ایمیل HTML

قرار دادن یک لینک ایمیل HTML روی صفحه ی وب خود کار سختی نیست، اما این کار ممکن است باعث بروز مشکل اسپم های غیرضروری در اکانت ایمیل شما شود. افرادی هستند که می توانند برنامه هایی را برای جمع آوری چنین ایمیل هایی اجرا کنند و سپس آنها را با راه های مختلف برای اسپم کردن استفاده کنند.
می توانید از گزینه دیگری استفاده کنید تا افراد به راحتی بتوانند به شما ایمیل ارسال کنند. یک گزینه می تواند استفاده از فرم های HTML باشد برای جمع آوری داده های یوزر و سپس استفاده ازاسکریپت PHP یا CGI برای ارسال ایمیل.
برای یک مثال ساده، فرم Contact Us را چک کنید. با استفاده از این فرم یک فیدبک از یوزر گرفته و سپس از یک برنامه ی CGI استفاده می کنیم که در حال جمع آوری این اطلاعات و ارسال ایمیل به یک email ID ارائه شده می باشد.

 

برچسب HTML Email

برچسب < a> در HTML برای مشخص کردن یک آدرس ایمیل و ارسال ایمیل، گزینه هایی را به شما ارائه می دهد. در حالیکه از برچسب < a> به عنوان یک email tag استفاده می کنید، از mailto:email address همراه با ویژگی href نیز استفاده خواهید کرد. در زیر ترکیب استفاده از mailto را به جای استفاده از http می بینید.

 

نمونه یک

<!DOCTYPE html>
<html>
<head>
    <title>SendMail</title>
</head>
<body>
    <a href="mailto:abc@example.com">Send Email</a>
</body>
</html>

اکنون اگر یوزر روی این لینک کلیک کند، email client آغاز به کار خواهد کرد ( مانند lotus notes و outlook express و غیره.) که روی کامپیوتر شما نصب شده است. ریسک دیگری در استفاده از این گزینه برای ارسال ایمیل وجود دارد، زیرا اگر یوزر email client نصب شده روی کامپیوتر خود نداشته باشد، ارسال ایمیل ممکن نحواهد بود.

 

تنظیمات پیش فرض

شما می توانید یک موضوع ایمیل و یک بدنه ی ایمیل پیش فرض همراه با آدرس ایمیل خود ایجاد کنید. در زیر مثال استفاده از بدنه و موضوع پیش فرض را مشاهده می کنید.

 

نمونه دو

<!DOCTYPE html>
<html>
<head>
    <title>SendMail</title>
</head>
<body>
    <a href="mailto:abc@example.com?subject=Feedback&body=Message">
        Send Feedback
    </a>

</body>
</html>

 

 

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

آموزش طراحی سایت-آموزش لینک های عکس در html

آموزش Image Link

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


 مثال:

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

 

نمونه یک

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Image Hyperlink Example</title>
</head>
<body>
    <p>Click following link</p>
    <a href="http://www.tahlildadeh.com" target="_self">
        <img src="http://tahlildadeh.com/banner/012.jpg" alt="tahlildadeh" border="0" />
    </a>
</body>
</html>

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

 

تصاویر حساس به ماوس

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

 

  • Server-side image maps - توسط ویژگی ismap از برچسب < img> فعال می شود و دستیابی به یک سرور و پردازش برنامه های مربوط به تصویر نقشه لازم می باشد.
  •  Client-side image maps - با استفاده از ویژگی usemap از برچسب < img> همراه با برچسب های متناظر< map> و < area> ایجاد می شود.

Server side image maps

آموزش html css

در اینجا به سادگی تصویر خود را داخل یک هایپرلینک قرار داده و از ویژگی ismap استفاده کنید که آن را یک تصویر خاص می سازد و وقتی یوزر در بخشی از تصویر کلیک می کند، مرورگر مختصات اشاره گر ماوس را همراه با URL مشخص شده در برچسب < a>به سرور وب منتقل می کند. سرور از مختصات اشاره گر ماوس استفاده می کند تا تعیین کند کدام داکیومنت باید به مرورگر بازگردانده شود.
زمانی که ismap استفاده می شود، ویژگی href از برچسب < a> باید URL یک برنامه ی سرور را مانند یک cgi یا اسکریپت PHP و غیره در برداشته باشد، تا درخواست ورودی را براساس مختصات انتقال داده شده پردازش کند. مختصات موقعیت ماوس پیکسل های صفحه میباشند که از گوشه ی بالای سمت چپ تصویر شمرده می شوند و با (0,0) شروع می شوند. مختصات دنبال شده با یک علامت سوال، به انتهای URL اضافه می شوند.


 مثال:

نمونه دو

<!DOCTYPE html>
<html>
<head>
    <title>ISMAP Hyperlink Example</title>
</head>
<body>
    <p>Click following link</p>
    <a href="http://tahlildadeh.com/Temp/Html/Exp1.html" target="_self">
        <img ismap src="http://tahlildadeh.com/Temp/Html/logo.png" alt="tahlildadeh" border="0" />
    </a>
</body>
</html>

 

سپس مرورگر پارامترهای جستجوی زیر را به سرور می فرستد که می تواند توسط اسکریپت ismap.cgi یا فایل map پردازش شود و شما می توانید هر داکیومنتی را که دوست داشته باشید به این مختصات لینک کنید.

 

/cgi-bin/ismap.cgi?20,30

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

 

 توجه:

شما برنامه نویسی CGI را زمانی فراخواهید گرفت که برنامه نویسی perl را مطالعه کنید. می توانید اسکریپت خود را بنویسید تا این مختصات انتقال داده شده را با استفاده از PHP یا هر اسکریپت دیگری پردازش کنید. فعلا اجازه بدهید روی یادگیری HTML تمرکز کنیم، می توانید این فصل را بعدا بازبینی کنید.

Client side image maps

این تصاویر به وسیله ی ویژگی usemap از برچسب < img> فعال می شوند و به وسیله ی برچسب های ضمیمه ی< map>و< area> تعریف می شوند.
نقشه ای که قرار است نقشه را طراحی کند، به وسیله ی< img> به عنوان یک تصویرعادی وارد صفحه می شود، به جز اینکه این مورد ویژگی اضافه ای به نام usemap همرا خود دارد. مقدار ویژگی usemap مقداری می باشد که در یک برچسب< map>استفاده می شود تا برچسب های تصویر و نقشه را لینک کند.< map>همراه با برچسب های< area> همه ی مختصات تصویر و لینک های مربوطه را تعریف می کند.
برچسب< area> در داخل برچسب نقشه مختصات و شکل حاشیه های قابل کلیک در داخل تصویر را تعریف می کند. در اینجا مثالی از تصویر نقشه می بینید.

 

نمونه سه

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>


    <img src="http://tahlildadeh.com/banner/012.jpg" width="250" height="150" alt="Tahlildadeh" usemap="#planetmap">

    <map name="planetmap">


        <area shape="rect" coords="0,0,40,126"  href="http://tahlildadeh.com/banner/02.jpg">
        <area shape="circle" coords="90,58,20"  href="http://tahlildadeh.com/banner/04.jpg">
        <area shape="circle" coords="124,78,20"  href="http://tahlildadeh.com/banner/05.jpg">
    </map>
</body>
</html>

 

سیستم مختصات

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

 

 

rect = x1 , y1 , x2 , y2


x1 و y1 مختصات گوشه ی بالای سمت چپ از مستطیل می باشد. x2 و y2 مختصات گوشه ی سمت راست پایین می باشند.

 

circle = xc , yc , radius

 

xc و yc مختصات مرکز دایره و radius شعاع دایره می باشد. دایره ای به مرکز200,50 با شعاع 25 دارای ویژگی coords="200,50,25" خواهد بود.

 

poly = x1 , y1 , x2 , y2 , x3 , y3 ,... xn , yn

 

جفت های مختلف x-y رئوس چند ضلعی می باشند، با یک خط که از یک نقطه به نقطه ی دیگر کشیده شده. یک چندضلعی لوزی شکل با بالاترین راس آن در نقطه ی 20،20 و 40 پیکسل، در عریض ترین نقطه ی خود دارای ویژگی coords="20,20,40,40,20,60,0,40" می باشد.
تمام مختصات مربوط به بالاترین گوشه ی سمت چپ تصویر می باشند. هر شکل دارای یک URL مربوطه می باشد. می توانید از هر نرم افزار تصویری برای دانستن مختصات موقعیت های مختلف استفاده کنید.

 

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

آموزش طراحی سایت -آموزش لینک های متنی

لینک های متن HTML

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

 

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

یک لینک با استفاده از برچسب < a> در HTML تعیین می شود. این برچسب anchor tag نامیده می شود و هر چیزی بین برچسب آغازین < a> و پایانی < /a> بخشی از لینک می شود و یک یوزر می تواند آن بخش را کلیک کرده تا به داکیومنت لینک شده برسد. در زیر ترکیب ساده ی استفاده از برچسب < a> را می بینید.

 

<a href="Document URL" ...="" attributes-list="">Link Text</a>

مثال:

اجازه دهید مثال زیر را امتحان کنیم که http://www.tahlildadeh.com را در صفحه ی شما لینک می کند.

 

نمونه یک

 

<!DOCTYPE html>
<html>
<head>
    <title>Hyperlink Example</title>
</head>
<body>
    <p>Click following link</p>
    <a href="http://www.tahlildadeh.com" target="_self">Tahlildadeh</a>
</body>
</html
 

 

این مثال نتیجه ی زیر را تولید خواهد کرد که شما می توانید روی لینک تولید شده ی tahlildadeh کلیک کنید تا به صفحه ی اصلی tahlildadeh برسید.
Click following link

 

tahlildadeh

ویژگی target

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

 

Option

Description

_blank

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

_self

داکیومنت لینک شده را در همان چارچوب باز می کند.

_parent

داکیومنت لینک شده را در چارچوب اصلی باز می کند.

_top

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

targetframe

داکیومنت لینک شده را در یک targetframe نام گذاری شده باز می کند.

 

مثال:

برای درک تفاوت اصلی در برخی گزینه های ارائه شده در ویژگی target مثال زیر را امتحان کنید.

 

نمونه دو

 

<!DOCTYPE html>
<html>
<head>
    <title>Hyperlink Example</title>
    <base href="http://www.tahlildadeh.com/">
</head>
<body>
    <p>Click any of the following links</p>
    <a href="http://www.tahlildadeh.com" target="_blank">Opens in New</a> |
    <a href="http://www.tahlildadeh.com" target="_self">Opens in Self</a> |
    <a href="http://www.tahlildadeh.com" target="_parent">Opens in Parent</a> |
    <a href="http://www.tahlildadeh.com" target="_top">Opens in Body</a>
</body>
</html>

 

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

 

Click any of the following links

Opens in New | Opens in Self | Opens in Parent | Opens in Body

 

استفاده از مسیر پایه

وقتی که شما داکیومنت های HTML را متناسب با همان وب سایت لینک می کنید، ارائه ی یک URL کامل برای هر لینک ضروری نیست. اگر از برچسب 

 

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

 

 

 مثال:

مثال زیر از برچسب < base> برای مشخص کردن URL پایه استفاده می کند و پس از آن ما می توانیم به جای ارائه ی URL کامل برای هر لینک از مسیرهای مرتبط استفاده کنیم.

 

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

نمونه سه

 

<html>
<head>
    <title>Hyperlink Example</title>
    <base href="http://www.tahlildadeh.com/">
</head>
<body>
    <p>Click following link</p>
    <a href="/WebsiteNews/TahlildadeNews.aspx" target="_blank">HTML tahlildadeh</a>
</body>
</html>

این مثال نتیجه ی زیر را تولید خواهد کرد که می توانید روی لینک تولید شده ی HTML tahlildadeh کلیک کنید تا به آموزش HTML برسید.
اکنون URL ارائه شده ی < a href="http:/WebsiteNews/TahlildadeNews.aspx> باعنوان < a href=" http //www.tahlildadeh.com/WebsiteNews /TahlildadeNews.aspx"> در نظر گرفته می شود

 

لینک شدن به بخشی از صفحه

می توانید برای بخش خاصی از صفحه ی وب ارائه شده، با استفاده از ویژگی name یک لینک ایجاد کنید. این امر یک فرایند دو مرحله ای می باشد.
نخست اینکه در مکانی که می خواهید به داخل صفحه ی وب برسید یک لینک ایجاد کنید و آن را با استفاده از برچسب < a...> نام گذاری کنید

 

<h1>HTML Text Links <a name="top"></a></h1>

 

 

مرحله ی دوم ایجاد یک هایپر لینک می باشد برای لینک کردن داکیومنت و قرار دادن در مکانی که می خواهید برسید.

 

<a href="/html/html_text_links.htm#top">Go to the Top</a> 

و این مثال لینک زیر را تولید خواهد کرد که می توانید در آن روی لینک تولید شده ی Go to the Top کلیک کنید تا به نقطه ی بالای آموزش HTML Text Link برسید.

 

نمونه پنج

<!DOCTYPE html>
<html>
<head>
    <title>Hyperlink Example</title>
    <base href="http://www.tahlildadeh.com/">
</head>
<body alink="#54A250" link="#040404" vlink="#F40633">
    <p>Click following link</p>
    <a href="http://www.tahlildadeh.com" target="_blank">HTML tahlildadeh</a>
</body>
</html>

تنظیم رنگ های لینک

شما می توانید رنگ لینک های خود، لینک های فعال و لینکهای مشاهده شده را با استفاده ازویژگی های link و alink و vlink از برچسب < body>تنظیم کنید.


 مثال:

مثال زیر را در test.htm ذخیره کنید و سپس می توانید آن را در هر مرورگری باز کنید تا ببینید که چگونه ویژگی های link, alink و vlink کار می کنند.

 

نمونه شش

<!DOCTYPE html>
<html>
<head>
    <title>Hyperlink Example</title>
</head>
<body>
<a href="http://tahlildadeh.com/Files/Articles/04GL07.pdf"> download pdf file</a>
</body>
</html>

این مثال نتیجه ی زیر را تولید می کند. فقط رنگ لینک را قبل از کلیک کردن روی آن چک کنید، سپس رنگ ان را در هنگام فعال کردن و بازدید آن چک کنید.

 

HTML tahlildadeh

دانلود کردن لینک ها

شما می توانید لینک متنی ایجاد کنید تا فایل های قابل دانلود PDF، ZIP و DOC خود را بسازید. این کار بسیار ساده می باشد، فقط کافیست یک URL کامل از فایل قابل دانلود ارائه بدهید.

 

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

 

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

آموزش طراحی سایت -آموزش 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

آموزش 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 مخفف عبارت 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>

 

ادامه دارد

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

 

  • افشین رفوآ