X
تبلیغات
آموزشی . درسی و مهرورزي - آموزش HTML ـ ضميمه يك
براي دانلود سوالات پيام نور كليك كنيد

ضميمه يك


کد HTML

اجرای کد HTML به وسیله برنامه مرورگر (Browser)

مثالی ساده از يک صفحه اچتمل

 

<html>
<head>
<title>My first HTML page</title>
</head>
<body>
Hello World!
</body>
</html>

Hello World!

 

پاراگرافهای ساده با استفاده از عنصر p

 

<html>
<body>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>This is a paragraph.</p>
<p>Paragraph elements are defined by the p tag.</p>
</body>
</html>

This is a paragraph.

This is a paragraph.

This is a paragraph.

Paragraph elements are defined by the p tag.

 

نمايش متون فارسی

 

<html>
<head>
<meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8">
</head>
<body>
<div dir=rtl>
سلام بی وفا
</div>
<p dir=rtl>
سلام با وفا
</p>
</body>
</html>

سلام بی وفا

سلام با وفا

 

سر تيترها و تکهای h1 تا h6

 

<html>
<head>
<title>heading test</title>
</head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
<p>Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.</p>
</body>
</html>

This is heading 1

This is heading 2

This is heading 3

This is heading 4

This is heading 5
This is heading 6

Use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.

مثال پاراگرافها و نحوه برخورد مرورگر با فاصله های اضافی

 

<html>
<body>
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p>
This paragraph
contains a lot of spaces
in the source code, but the browser
ignores it.
</p>
<p>
The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change.
</p>
</body>
</html> 

This paragraph contains a lot of lines in the source code, but the browser ignores it.

This paragraph contains a lot of spaces in the source code, but the browser ignores it.

The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change.

 

ترازبندی پاراگراف ها با کمک شناسه align

 

<html>
<body>
<P ALIGN="center">Text in</P>
<P ALIGN="center">Text in here is</P>
<P ALIGN="center">Text in here is pushed</P>
<P ALIGN="center">Text in here is pushed to the center</P>
<p>
<P ALIGN="left">The default attribute for paragraph's alignment is left alignmebt.</P>
</body>
</html>

Text in

Text in here is

Text in here is pushed

Text in here is pushed to the center

 

The default attribute for paragraph's alignment is left alignmebt

 

رفتن سر سطر جديد با کمک تگ br

 

<html>
<head>
<title>Line Break test </title>
</head>
<body>
<p>
To break<br>lines<br>in a<br>paragraph,<br>use the br tag.
</p>
<p>
This a line in my editor and 6 space Another new line But Browser ignores all extra spaces and ...
</p>
</body>
</html>

To break
lines
in a
paragraph,
use the br tag.

This a line in my editor and 6 space Another new line But Browser ignores all extra spaces and ...

 

ترازبندی سر تيترها با استفاده از شناسه align

 

<html>
<head>
<title>heading test, Center</title>
</head>
<body>
<h1 align="center">This is heading 1</h1>
<p>The heading above is aligned to the center of this page. </p>
</body>
</html>

This is heading 1

The heading above is aligned to the center of this page.

 

نمايش خطوط افقی با کمک تگ hr

 

<html>
<head>
<title>Horizontal rule test </title>
</head>
<body>
<hr>
<p>The hr tag defines a horizontal rule:</p>
<hr>
<p>This is a paragraph</p>
<hr>
</body>
</html>


The hr tag defines a horizontal rule:


This is a paragraph


 

نحوه استفاده از comment

 

<!-- First comment Jan 27, 2002 -->
<html>
<head>
<title>My Comment test </title></head>
<body>
<!-- This is a comment, you can't see me -->
<p>This is a sample sentence using paragraph tag</p>
<!-- and so is this one,
which occupies more than one line -->
</body>

</html>

This is a sample sentence using paragraph tag

 

تعيين رنگ زمينه صفحه با کمک شناسه bgcolor در تگ body

 

<html>
<head>
<title>Set Background Color test </title>
</head>
<body bgcolor="blue">
<p>This is a paragraph</p>
</body>
</html>

This is a paragraph

 

متن های فارسی با کمک شناسه dir

 

<html>
<head>
<meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8">
</head>
<body>
<h1 dir="rtl">
نوشته راست به چپ
</h1>
<div dir="rtl">
اين نوشته از راست به چپ چيده ميشود.
</div>
<p dir="rtl">
اين نوشته از راست به چپ چيده ميشود.
</p>
<p>This is an English Paragraph.</p>
<p dir="ltr">This is an English Paragraph.</p>
</body>
</html>

نوشته راست به چپ

اين نوشته از راست به چپ چيده ميشود.

اين نوشته از راست به چپ چيده ميشود.

This is an English Paragraph.

This is an English Paragraph.

 

متون فارسی و لاتين در کنار هم

 

<html>
<head>
<meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8">
</head>
<body>
<div dir=rtl>
<p>
اين نوشته با کمک شناسه dir و مقدار rtl برای آن از راست به چپ چيده ميشود. فونت پيش فرض يا default برابر Time new roman است.</p>
<p>
اينبار سعی کنيد که کد اچتمل را تغيير داده و پس از کليک روی دکمه "نمايش نتايج" نتايج را در سمت چپ ببينيد! اگر ميخواهيد که متون لاتين از چپ به راست چيده شوند، از شناسه dir=ltr به شکل زير عمل کنيد.
</p>
</div>
<br>
<div dir=ltr>
<p>This a English Paragraph, ltr=Left to Right & rtl=Right to Left</p>
</div>
<p>
اگر گفتيد چرا اين متن فارسی به صورت اشتباه از چپ به راست چيده شده است؟!!!</p>
</body>
</html>

اين نوشته با کمک شناسه dir و مقدار rtl برای آن از راست به چپ چيده ميشود. فونت پيش فرض يا default برابر Time new roman است.

اينبار سعی کنيد که کد اچتمل را تغيير داده و پس از کليک روی دکمه "نمايش نتايج" نتايج را در سمت چپ ببينيد! اگر ميخواهيد که متون لاتين از چپ به راست چيده شوند، از شناسه dir=ltr به شکل زير عمل کنيد.


 

This a English Paragraph, ltr=Left to Right & rtl=Right to Left

اگر گفتيد چرا اين متن فارسی به صورت اشتباه از چپ به راست چيده شده است؟!!!

 

شناسه dir در عنصر html

 

<html dir="rtl">
<head>
<meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8">
</head>
<body>
<p><b>
به شناسه dir و تگ html توجه کنيد.در اثر استفاده از اين شناسه در تگ html تمامی متن از راست به چپ چيده ميشود و در مرورگر اکسپلورر بخش scrool down در سمت چپ صفحه نمايش داده ميشود.
</b></p>
<p>

... مادر ليزا گفت:
-
آه ! چه سخنان حکيمانه و تهورآميزی! آنچه تو ميگويی در قلب من اثر دارد و با اينهمه، آن نيکبختی که درباره آن صحبت ميکنی کجاست ؟ چه کسی ميتواند ادعا کند که نيکبخت است! چون تو آنقدر نسبت به ما ابراز لطف کرده ای که اجازه داده ای امروز بار ديگر بديدن شما بياييم. گوش کن آنچه را که بار گذشته با تو بميان ننهادم، آنچه را که جرات ادای آنرا در خويشتن نيافتم، آنچه را که مدت مديدی مرا رنج ميدهد به تو اعتراف کنم! آه! من رنج ميبرم! مرا عفو کن..

<p>
برادران کارامازوف - فيودور داستايوسکی، ترجمه: مشفق همدانی – انتشارات جاويدان ، چاپ 1368 ، صفحات 63 تا 66
نوشته شده در ساعت 8:43 PM توسط محمد رضا افشاری ، وبلاگ "مثل هميشه "

</TABLE>
</body>

</html>

به شناسه dir و تگ html توجه کنيد.در اثر استفاده از اين شناسه در تگ html تمامی متن از راست به چپ چيده ميشود و در مرورگر اکسپلورر بخش scrool down در سمت چپ صفحه نمايش داده ميشود.

... مادر ليزا گفت: - آه ! چه سخنان حکيمانه و تهورآميزی! آنچه تو ميگويی در قلب من اثر دارد و با اينهمه، آن نيکبختی که درباره آن صحبت ميکنی کجاست؟ چه کسی ميتواند ادعا کند که نيکبخت است! چون تو آنقدر نسبت به ما ابراز لطف کرده ای که اجازه داده ای امروز بار ديگر بديدن شما بياييم. گوش کن آنچه را که بار گذشته با تو بميان ننهادم، آنچه را که جرات ادای آنرا در خويشتن نيافتم، آنچه را که مدت مديدی مرا رنج ميدهد به تو اعتراف کنم! آه! من رنج ميبرم! مرا عفو کن..

 

برادران کارامازوف - فيودور داستايوسکی، ترجمه: مشفق همدانی – انتشارات جاويدان ، چاپ 1368 ، صفحات 63 تا 66 نوشته شده در ساعت 8:43 PM توسط محمد رضا افشاری ، وبلاگ "مثل هميشه "

 

 

مثالی کامل در مورد استفاده از شناسه dir در عناصر مختلف

 

<html>
<head>
<meta http-equiv="Content-Type" CONTENT="text/html; charset=utf-8">
</head>
<body>
<h3 dir="rtl">سر تيتر راست به چپ
</h3>
<div dir="rtl">
راست به چپ با کمک عنصر div
</div>
<p dir="rtl">راست به چپ با کمک عنصر پاراگراف</p>
<p>
<INPUT TYPE="text" NAME="" dir="rtl" Value="سلام قربان، حال شما چطوره؟">
<p>
<INPUT TYPE="submit" dir="rtl" Value="ارســـــــــال">
<p>
<SELECT NAME="test" dir="rtl">
<OPTION VALUE="" SELECTED > فهرست راست به چپ در سمت پيش فرض
<OPTION VALUE="">----------------------
<OPTION VALUE="">رديف 1
<OPTION VALUE="">رديف 2
<OPTION VALUE="">رديف 3
<OPTION VALUE="">رديف 4
<OPTION VALUE="">رديف 5
</SELECT>
<p align=right>
<SELECT NAME="test" dir="rtl">
<OPTION VALUE="" SELECTED>فهرست راست به چپ
در سمت راست 
<OPTION VALUE="">-----------------------
<OPTION VALUE="">رديف 1
<OPTION VALUE="">رديف 2
<OPTION VALUE="">رديف 3
<OPTION VALUE="">رديف 4
<OPTION VALUE="">رديف 5
</SELECT>
<p>
<TABLE border="1">
<TR dir="rtl">
<TD>abcdef</TD>
<TD>ABC</TD>
<TD dir="ltr">Forced Left to Right</TD>
</TR>
<TR>
<TD dir="rtl"> اين متن بايد از راست به چپ چيده شود. </TD>
<TD>abcdefgh</TD>
<TD dir="rtl">
اين متن بايد از راست به چپ چيده شود. </TD>
</TR>
<TR>
<TD >a</TD>
<TD>ab</TD>
<TD >abc</TD>
</TR>
</TABLE>
</body></html>

سر تيتر راست به چپ

راست به چپ با کمک عنصر div

راست به چپ با کمک عنصر پاراگراف

 

abcdef

ABC

Forced Left to Right

اين متن بايد از راست به چپ چيده شود.

abcdefgh

اين متن بايد از راست به چپ چيده شود.

a

ab

abc


موضوع: كامپيوتر ( كدها و آموزش )   ? محمودی در چهارشنبه 1386/06/28 ساعت 7:0 | لینک ثابت |

::: صفحات جديد :::

صفحه دوم : ديني سال اول دبيرستان
صفحه سوم : ديني سال دوم دبيرستان ـ در دست ساخت
صفحه چهارم : ديني سال سوم دبيرستان
صفحه پنجم : ديني سال چهارم دبيرستان
صفحه ششم : فلسفه سال سوم دبيرستان
صفحه هفتم : فلسفه سال چهارم دبيرستان
صفحه هشتم : منطق سال سوم دبيرستان
صفحه نهم : سوالات دانشگاه پيام نور