آموزش زبان صفحات وب Html

H-assan · Feb 6, 2006

مقدمه :

همانطور كه ميدانيد صفحات وب صفحاتي هستند كه در اينترنت به كاربرده مي شوند.HTML يك زبان برنامه نويسي براي طراحي صفحات وب مي باشد. در حقيقت تمامي صفحات وب با اين زبان برنامه نويسي نوشته ميشوند. كلمه HTML مخفف كلمات Hyper Text Markup Language است.زبان برنامه نويسي HTML به شما توانايي فرمت متن ، اضافه كردن تصوير ، صدا و ويدئو و ... را در صفحات اينترنتي ميدهد.

تگها در HTML :

تگ در زبان برنامه نويسي HTML به كليدهاي مربوط به برنامه نويسي توسط HTML گفته ميشود تگها داخل دو علامت كوچكتر "<" و بزرگتر ">" قرار مي گيرند.

تگها در HTML به سه صورت مورد استفاده قرار مي گيرند دسته اول اين تگها تگهايي هستند كه به سادگي در هر جايي نوشته ميشوند مانند تگ <HR> كه باعث رسم خط ميشود.

کد:

مثال :

                        <html>

                 <body>

                   welcome to our website

                   <HR>

</body>

</html>

دسته دوم تگهايي هستند كه بايد ابتدا و انتهاي مشخصي داشته باشند مثلا اگر تگ در قسمتي از كد HTML مورد استفاده قرار گرفت ، بايد انتهاي اين تگ توسط مشخص گردد توجه نماييد متني كه بين اين دو تگ قرار ميگيرد درشت نشان داده ميشود.

کد:

مثال:

<html>

<body>

            <b>Welcome to our website</b>

</body>

</html>

دسته سوم تگهايي هستند كه ضمن آنكه بايد ابتدا و انتهاي مشخصي داشته باشند شامل چند پارامتر نيز مي باشند. به عنوان مثال تگ FONT :



در مثال بالا نام تگ FONT ميباشد و Face از پارامترهاي اين تگ است."Arial" هم مقدار انتخاب شده براي پارامتر Face است.

کد:

مثال :

<html>

<body>

                        <font face="arial" size=12>

            <b>welcome to our website</b>

</body>

</html>

در درسهاي آينده با انواع بيشتر تگها آشنا خواهيد شد.

ويرايشگر HTML:

براي ويرايش يا ايجاد صفحات وب ساده ترين برنامه ممكن برنامه Notepad ويندوز است البته برنامه هاي ديگري نظير Frontpage نيز وجود دارند ولي براي آغاز كار استفاده از Notepad ميتواند بهتر باشد. بايد توجه داشته باشيد كه پس از نوشتن كدهاي HTML در داخل برنامه Notepad در آخر بايد آنها را با پسوندهاي *.htm - *.html ذخيره نماييد.

ساختار صفحات وب :

يك صفحه وب شامل دو بخش كلي سر و بدنه ميباشد در قسمت سر يا <Head> تيتر صفحه وب كه در كاوشگر اينترنت نمايش داده ميشود نوشته ميشود همچنين در اين قسمت علاوه بر تيتر صفحه فرمتها و اسكريپتهاي برنامه نويسي نيز نوشته ميشوند.

اما در بخش بدنه يا <Body> قسمتي كه توسط بينندگان صفحه مشاهده مي گردد نوشته مي شود . اگر متني در اين قسمت نوشته شود توسط كاوشگر اينترنت نشان داده خواهد شد.

کد:

مثال :

<Html>

               <head>

 

               </Head>

               <Body>

 

              </Body>

</Html>

ايجاد يك فايل HTML :

براي ايجاد يك فايل HTML شما بايد در ابتدا ، ابتدا و انتهاي آنرا مشخص نماييد. براي اين كار از دو تگ <html></html> استفاده مي گردد. بقيه كدها و عبارات HTML‌ بايد داخل اين دو تگ قرار گيرد.

براي مشخص كردن قسمت سر فايل از دو تگ <Head></Head> استفاده مي گردد كه اين دوتگ بايد بين دو تگ قبلي قرار گيرد.

و در نهايت براي مشخص كردن قسمت بدنه از دو تگ <Body></Body> استفده مي گردد. با استفاده از اين تگ ميتوان مشخصات ظاهر صفحه وب مانند رنگ متن ، رنگ زمينه و ... انتخاب نمود.

پارامترهاي تگ <Body> :

اين تگ جزء دسته سوم تگها ميباشد يعني علاوه بر مشخص بودن آغاز و پايان داراي چند پارامتر نيز مي باشد يكي از اين پارامترها پارامتر TEXT مي باشد كه با استفاده از آن شما مي توانيد رنگ متن صفحه را تعيين نماييد پارامتر ديگر اين تگ پارامتر BGColor است با استفاده از اين پارامتر شما ميتوانيد رنگ زمينه را مشخص نماييد.

مثال:در مثال زير ما يك فايل HTML ايجاد كرده ايم و همانطور كه مي بينيد براي تگ Body پرامترهايي نيز قرار داده ايم.

کد:

<html>

              <head>

 

              </head>

            

              <body   text=white   bgcolor=black>

 

             </body>

</html>

تگ <Title> :

هر كدام از صفحات وب مي توانند يك تيتر داشته باشند.كه اين تيتر در قسمت نوار عنوان كاوشگر اينترنت نشان داده مي شود.براي ايجاد تيتر صفحه وب از تگ <Title> استفاده ميشود اين تگ بين دو تگ <head></head> قرار داده مي شود.

کد:

مثال:

<html>

          <head>

                        <Title>Computer Site</Title>

          </head>

 

              <Body>

          

              </Body>

</Html>

H-assan · Feb 6, 2006

معرفي تگ هاي اوليه در html

تگ :

این تگ در زبان برنامه نویسی HTML مانند کلید ENTER عمل میکند یعنی باعث میشود که متن یا هر چیز دیگری به سطر بعد منتقل شود.به مثال زیر توجه نمایید.

کد:

<Html>

                      <Body>

                          Welcome to our WebSite<BR>

                           Thank you for this visit <BR>

         </Body>

</Html>

تگ <CENTER> :

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

کد:

<Html>

          <Body>

                       <Center>

                                       Welcome to our website

                       </Center>

          </Body>

</Html>

تگ <IMG> :

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

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

کد:

<Img  Src="/Image/Cat.jpg">

پارامتر دیگر این Border میباشد . بوسیله این پارامتر میتوان حاشیه دور تصویر موردنظر را تنظیم نمود.در مثال زیر N مقدار یک عدد دلخواه شما میباشد.

کد:

<Img  Src="/Image/Cat.jpg"  Border=N>

و در نهایت بوسیله پارامترهای Width و Height میتوان طول و عرض تصویر را تنظیم نمود.در مثال زیر N مقدار عدد دلخواه شما برای تنظیم تصویر میباشد.

کد:

<Img  Src="/Image/Cat.jpg"  Border=N  Width=N  Height=N>

یک مثال کلی :

کد:

<Html>

           <Body>

                           <Center>

                                             Welcome to our Website<BR><BR>

                                              <Img  Src="/Image/1.Gif " Border=2 width=200 height=200>

                          </Center>

         </Body>

</Html>

تگ <A> :

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

کد:

<A Herf="/Html/Contact.asp> Click Here </A>

H-assan · Feb 6, 2006

قرار دادن تصوير در صفحات و کد جدول در html

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

امروز یک کدی رو به شما معرفی کنم که بوسیله اون میتونید از ترکیب کردن دو تگ <A> و <IMG> برای یک تصویر ÷یوند ایجاد کنید یعنی با کلیک کردن روی تصویر به صفحه دلخواه برید یا کار دلخواه خودتون رو انجام بدید.

کد:

<A Herf="/html/about.htm"><Img Src="/image/01.gif"></A>

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

تگ <Table> :

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

حالت کلی:

کد:

            <Table>

 

</Table>

پارامترها :

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

پرامتر سوم مشخص میکند که خطهای جدول چه مقدار ضخامتی داشته باشند که N برابر با یک عدد میشود.

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

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

کد:

<TR></TR>

<TD></TD>

Border = N

Width – Heigh

Align = "Left – Right – Center"

یک مثال کلی :

کد:

<Html>

        <Body>

 

<center><h1><b>Create The table</Center></b></h1><Br>           

 

          <"Table border=1 align="center>

         <Tr>

                <td>Part-1</td>

                        <Td>Click</Td>

                        <Td>Register</Td>

         </Tr>

 

         <Tr>

                <td>Part-2</td>

                        <Td>Click</Td>

                        <Td>Register</Td>

</Tr>

 

         <Tr>

                <td>Part-3</td>

                        <Td>Click</Td>

                        <Td>Register</Td>

             </Tr>

 

             <Tr>

                <Td>Part-4</tdT

                        <Td>Click</Td>

                        <Td>Register</Td>

         </Tr>

        

<Table/>

</Body>

</Html>

در این قسمت شما با یکی دیگه از تگهای زبان HTML آشنا شدید که کار اون رسم جدول بود که فکر کنم خیلی در طراحی صفحات وب کاربرد داشته باشه.فکر کنم طریقه دیدن مثال بالا رو هم بلد باشید.اول اون رو تو محیط NOTEPAD کپی کنید بعد اون رو با پسوند *.HTM ذخیره کنید بعدش هم ببینید.

H-assan · Feb 6, 2006

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

روش کدگزاری UTF-8
اکيدا توصيه ميشود که برای تايپ و تمايش متون فارسی از استاندارد يونيکد و روش کدگزاری UTF-8 اسنفاده شود و اين روشی است که مطالب اين سايت و اديتور آنلاينش از آن استفاده ميکند.نکته مهم در نمايش صحيح متون فارسی تعيين نوع کدگزاری يا encoing صفحات فارسی است که برای اينکار بايد از متاتگ خاصی به نام http-equiv در بخش head صفحات اچتمل به شکل زير استفاده شود:

کد:

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

در اينصورت مرورگر يا Browser قبل از نمايش صفحه از روی متاتگ فوق نوع کدگزاری (Encoding) را تشخيص داده و ديگر مثلا نيازی به تعيين دستی (دراکسپلورور 5 : View/Encoing/Unicode / UTF-8 ) نوع Encoing توسط بازديدکننده سايت نخواهد بود.

 شناسه يا attribute ی به نام dir
جهت نمايش متون لاتين به صورت پيش فرض و default از چپ به راست (ltr) ميباشد.در مورد متون و جملات فارسی بايد با کمک روشی جهت نمايش پيش فرض را به "راست به چپ" تغيير دهيد. شناسه يا attribute ی به نام dir يا همان direction اين کار را برای شما انجام ميدهد. اين شناسه دارای دو مقدار ممکن ميباشد :

کد:

dir="ltr" , Left-to-right text. - چپ به راست
dir="rtl" , Right-to-left text. - راست به چپ

مثلا برای نمايش جمله فارسی "سلام بر دنيای وب!" با کمک عناصر p يا div کافی است که به يکی از شکلهای زير عمل شود:

کد:

<p dir="rtl"> سلام بر دنيای وب </p>
<div dir="rtl"> سلام بر دنيای وب </div>

در بسياری از عناصر و تگ های اچتمل امکان استفاده از شناسه dir ميسر بوده و به عنوان نمونه ميتوان از عناصر زير نام برد:

کد:

<p> , <div> , <html> , <body> , <table> , <tr> , <td> , <h1 ... h6> , <input> , <pre> , <select> , <span> , ...

منبع

H-assan · Feb 6, 2006

Meta تگ چیست

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

دو نوع اصلی متاتگ وجود دارد :

این متاتگ باعث میشود که اطلاعات اضافی ای همراه صفحه وب درخواستی شما در http header به مرورگر ارسال شود . مثلا میتوانید تاریخ انقضای اطلاعات را تعیین کنید یا میتوانید صفحه وب را با یک متا تگ خاص پس از چند ثانیه به صفحه دیگری بفرستید بدون دخالت کاربر !

HTTP-EQUIV

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

NAME

متاتگ ها کجای صفحه وب نوشته میشوند ؟

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

به مثال های زیر دقت کنید : content در متاتگ کارش معرفی مقداری هست که متاتگ با یکی از دو صفت name و HTTP-EQUIV در خود دارد .

کد:

مثال : NAME="keywords" CONTENT=" persian macromediax dreamweaver">

تگ بالا را یه نگاه کنید . از نوع name است . مقدار name مساوی با keywords است . یعنی این متاتگ کارش شناساندن کلمات کلیدی سایت به موتور های جستجوگر است ... اگر میخواهید موتور های جستجو مانند گوگل سایت شما را بهتر بشناسند این تگ را به قالب سایت یا وبلاگ خود بیفزایید و در جلوی content کلمات کلیدی سایت خود را بنویسید .

کد:

مثال : NAME="description" CONTENT=" persian web design center">

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

کد:

مثال :<META HTTP-EQUIV="Expires" CONTENT="Tue, 04 Dec 1993 21:29:02 GMT">

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

منبع