طراحی سایت – آموزش html – عکس

در ادامه مباحث طراحی سایت به چگونگی اضافه کردن تصاویر به صفحه وب می پردازیم.
یکی از مشکلات اصلی استفاده از تصاویر در طراحی صفحات وب ،  مدت زمان طولانی تر بارگذاری تصاویر در صفحات سایت نسبت به متون است . بنابراین هر چه حجم این تصاویر کمتر باشد ، مدت زمان بارگذاری صفحه کمتر می شود و طراحی سایت حرفه ای تری خواهیم داشت.
قبل از آغاز نمودن بحث باید به این نکته توجه کرد که gif: graphics interchange format و jpg: joint photographic group دو نوع فرمت رایج تصاویر در صفحات وب هستند.

استفاده از کدام یک بهتر است؟؟
برای Banner  ,  button , divider  و clipart ها بهتر است که از فرمت GIF  استفاده کنیم.
از آنجایی که تصاویر با فرمت JPG را می توان فشرده کرد , هر چند که کیفیت آن کاهش پیدا می کند , ولی حجم آن نیز کم می شود, پس برای عکس ها بهتر است از فرمت JPG  استفاده کنیم.

قرار دادن تصاویر در صفحه وب سایت:

برای قرار دادن تصاویر در صفحه از دستور <img> استفاده می کنیم و برای مشخص کردن آدرس این تصویر از صفت src این دستور بهره می گیریم. بنابراین شکل کلی این دستور به صورت زیر است:

<img src="url">

اگر مکان عکس در همان Folder ی باشد که فایل html سایت شما در آن قرار دارد , کافی است به جای URL ، نام عکس همراه با فرمت آن را ذکر کنید.

مثال 1:
ابتدا پوشه  test را در درایو C  خود بسازید و یک تصویر با نام img1   و با فرمت jpg  در آن قرار دهید سپس  ویراستار Notepad یا Notepad++ خود را باز کنید و در قست بدنه فایل html  خود کد زیر را تایپ کنید و سپس این فایل را با نام دلخواه و با پسوند htm در درایو C  خود و در پوشه test ذخیره کنید.

<img src="img1.jpg">

اکنون با باز کردن فایل html خود , تصویر img1 را مشاهده خواهید کرد.

اما اگر تصویر مورد نظر در یک سایت دیگر باشد باید آدرس کامل مکان عکس را به جای URL قرار دهید.

مثال 2:

<img src="http://www.siteURL.com/??/?.gif">

در صورتیکه فایل مورد نظر در پوشه ای بیرون از پوشه جاری بود چطور عمل کنیم؟
برای اینکه از پوشه خارج شویم یا یک مرحله به عقب برگردیم کافی است در ابتدای آدرس /.. را قرار دهیم. به کمک این روش به هر تعداد که بخواهیم می توانیم به عقب برگردیم. برای روشن شدن موضوع فرض کنید فایل html در پوشه files قرار گرفته یعنی آدرس آن به شکل myWebsite/files/page1.html است و عکس مورد نظر در پوشه images با مسیر myWebsite/images/image1.jpg قرار دارد. برای آدرس دهی این عکس و قرار دادن آن در فایل page1.html باید ابتدا یک پوشه به عقب بر گردیم و سپس وارد پوشه images شویم و نام فایل مورد نظر را وارد کنیم. یعنی آدرس عکس را باید به صورت images/image1.jpg/.. وارد نماییم. به شکل توجه کنید:

 

html-address
آدرس دهی در طراحی وب سایت

height , width :

با استفاده از صفت های width و height از دستور <img> می توان اندازه تصاویر وب سایت را تغییر داد. مقداری که برای این صفت تعریف می شود , می تواند بر حسب پیکسل یا درصد باشد. معمولا برای کاهش سایز تصاویر بهتر است از برنامه گرافیکی استفاده کرد تا از این صفت , زیرا استفاده از این صفت برای کاهش سایز مدت زمان بار گذاری صفحه وب را افزایش می دهد. در عین حال برای بزرگ تر کردن تصاویر از حالت عادی , استفاده از این صفت توصیه می شود.
مثال 3:

<img src="img1.jpg" width="60" height="60">

مثال 4:   

<img src="img1.jpg" width="50%" height="60%">

در مثال 4 ارتفاع وعرض تصویر به ترتیب 60% و%50 از اندازه صفحه مرور گر شما را تشکیل می دهد.
یعنی با استفاده از درصد (%) به هر اندازه که صفحه مرورگرتان را تغییر سایز دهید , تصویر در آن صفحه نیز به همان نسبت کوچک یا بزرگ خواهد شد.در حالی که با استفاده از مقدار پیکسلی اندازه تصویر همواره ثابت خواهد ماند.

border :

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

مثال 5:
کادر با ضخامت 4 دور تصویر

<img src="img1.jpg "  border="4">

alt :

صفت alt مخفف alternative است. سه کاربرد اصلی این صفت عبارتند از:
1. هرگاه تصویر مورد نظر به هر دلیل نمایش داده نشود این متن به جای آن تصویر قرار می گیرد.
2. با قرار گرفتن موس روی تصویر توضیحی از آن نمایش داده میشود.
3. برای افراد معلول امکان خواندن توضیح تصویر توسط نرم افزارهای مخصوص محیا میشود.

مثال 6:

<"img src=" img1.jpg" alt="matn jaygozin>

صفت های hspace   و vspace :

با استفاده از صفت  hspace می توان فضایی را در سمت راست و چپ تصویر در نظر گرفت.
با استفاده از صفت  vspace می توان فضایی را در بالا و پایین تصویر در نظر گرفت.

مثال 7:

<img src="img1.jpg"  Hspace="30" Vspace="10>

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

align :

با استفاده از این صفت می توانیم چگونگی قرار گرفتن تصویر را در متن به هنگام طراحی وب سایت مشخص کنیم.  مثلا مطلوب ما این است که تصویر در بالای متن قرار گیرد یا در پایین متن.
با استفاده از مقادیر  top(بالا) , bottom (یایین) و middle (میانه یا وسط) می توان متن را در بالا , پایین یا وسط تصویر قرار داد.

مثال 8:

<img src ="img1.jpg" align="top">

علاوه بر مقادیر top , bottom وmiddle ، مقادیر دیگری نیز برای این صفت موجود است که به شرح هر یک می پردازیم.

Texttop :  با این مقدار بالای تصویر با بالای بزرگترین کاراکتر تنظیم می شود.
Absmiddle : با این مقدار وسط تصویر با وسط متن تنظیم می شود.Baseline : با این مقدار پایین تصویر با پایین کشیده ترین کاراکتر رو به پایین تنظیم می شود.
left و right :با این دو مقدار می توان تصویر را به سمت چپ یا راست  متن انتقال داد.

مثال 9:

<img src ="img1.jpg" align="left>

طراحی سایت – آموزش html – فهرست (لیست)

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

فهرست مرتب ( ordered or numbered list) :

 همانطور که از نام این نوع فهرست مشخص است ترتیب در این نوع لیست اهمیت دارد. برای ایجاد لیست مرتب وقتی داریم سایتی طراحی می کنیم از دستور <ol> برای شروع لیست و </ol> برای مشخص کردن انتهای آن استفاده می کنیم ، اما باید توجه کنیم که هر فهرست شامل اقلامی است که برای مشخص کردن آن از دستور  <li> که li مخفف list items  است ، استفاده می کنیم.
مثال :

<ol>
      <li>list item1</li>
      <li>list item2</li>
      <li>list item3</li>
</ol>

آیا می توانیم از عددهای رومی (i,ii,iii,…)  یا حروف (a,b,c,…)  برای شماره گذاری عناصر فهرست در طراحی سایت استفاده کنیم؟؟
بله با استفاده از صفت type  این دستور می توان این کار را انجام داد.
به مثال های زیر توجه کنید:
فهرست با اعداد رومی به صورت i , ii ,iii , iv

<ol type ="i">
       <li>list item1</li>       
       <li>list item2</li>      
       <li>list item3</li>
</ol>

فهرست با حروف a , b ,c , d

<ol type ="a">
       <li>list item1</li>
       <li>list item2</li>
       <li>list item3</li>
</ol>

فهرست با حروف بزرگ A , B ,C ,D

<ol type ="A">
       <li>list item1</li>
       <li>list item2</li>
       <li>list item3</li>
</ol>

با استفاده از صفت start از دستور <ol>  می توان تعیین کرد که شماره گذاری عناصر فهرست از چه مقدار عددی یا حروفی شروع شود. به عنوان مثال :

<ol type="I" start="7">
       <li>list item1</li>
       <li>list item2</li>
       <li>list item3</li>
</ol>

در مثال بالا ابتدا با استفاده از صفت type مشخص می کنیم که برای شماره گذاری عناصر لیست از اعداد رومی بزرگ استفاده شود و سپس با استفاده از دستور start می گوییم که شروع شماره گذاری از عدد 7 رومی  باشد.

لیست نامرتب در طراحی سایت (unordered or bulleted list) :

در این نوع لیست ترتیب برای عناصر لیست اهمیتی ندارد. برای نمایش لیستی از این نوع از دستور ul استفاده می کنیم. برای هر کدام از عناصر لیست هم مثل نوع قبلی از برچسب li بهره می گیریم. عناصر لیست به کمک شکل ها یا علامت های دایره تو پر (disc) ,دایره تو خالی (circle) و مربع تو پر (square) مشخص می شوند. برای تعیین شکل عناصر از صفت type کمک می گیریم. به مثال زیر توجه کنید:

<ul type="circle">
      <li>list item1</li>
      <li>list item2</li>
      <li>list item3</li>
</ul>

استفاده از لیست های تعریفی در طراحی سایت (definition list) :

مجموعه ای از عناصر با تعاریف  متناظرشان , یک لیست تعریفی را تشکیل می دهند که دستور <dl> نشان دهنده شروع و </dl> نشان دهنده پایان این لیست است. توجه کنید وقتی در حال طراحی سایت با این لیست هستیم برای نشان دادن  هر عنصر از دستور <dt>  که dt مخفف  definition term است , استفاده می کنیم و برای تعریف هر عنصر دستور <dd> را به کار می بریم.
مثال :

<dl>
     <dt>Term 1</dt>
     <dd>This is the definition of the first term.</dd>
     <dt>Term 2</dt>
     <dd>This is the definition of the second term.</dd>
</dl>

نویسنده: رضا ترابی

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

لینک ها بنیادی ترین قسمت از شبکه ارتباط جهانی (www) هستند. بنابرین توصیه می شود که هزینه زمانی بیشتری برای این قسمت صرف کنید. ما هم سعی می کنیم با آوردن مثال های متنوع به شما برای یاد گیری این بخش کمک کنیم. باید توجه داشت که هم متون و هم عکس ها در طراحی سایت می توانند به عنوان لینک مورد استفاده قرار بگیرند.
مثال های زیر را با هم بررسی می کنیم.
مثال 1) برای رفتن به سایت www.google.com  از سایت www.webfocus.ir کافی است که بر روی www.google.com کلیک کنید.
مثال 2)برای رفتن به صفحه طراحی سایت – آموزش html – مقدمه را در همین سایت  ببینیم کافی است که بر روی آن کلیک کنید.
مثال 3)برای رفتن به یکی از مثال ها در همین صفحه کافی است که روی برو به مثال کلیک کنید
3 مثالی که در بالا آورده شد تداعی کننده انواع لینک ها هستند که در زیر به آنها اشاره می شود.

انواع لینک (link) در html

1) لینک سراسری(Global Links): لینک هایی که به صفحات یک سایت دیگر اشاره دارند. به مثال 1 توجه کنید.
2) لینک محلی یا موضعی(Local Links): لینک هایی که به صفحات دیگر همان وب سایت اشاره می کند. یعنی از سایتی که در آن هستید خارج نمی شوند. به مثال 2 توجه کنید.
3) لینک داخلی (Internal Links): لینک هایی هستند که  به قسمتی همان صفحه ای که در آن هستید اشاره می کنند. به مثال 3 توجه کنید.

چگونه زمان طراحی سایت لینک html بسازیم؟؟؟

برای ساختن لینک کافی است از دستور <a>…</a> مخفف anchor استفاده کنیم. هر آنچه که بین </a>…<a>  قرار می گیرد به عنوان لینک شناخته می شود. برای اینکه مقصد لینک نیز مشخص شود از صفت href  مخفف “hypertext reference” استفاده می کنیم. توجه کنید بین دستور a هر المانی از جمله متن ، عکس و… می تواند قرار بگیرد و بعد از این کار با کلیک بر روی آن المان به پیوند مورد نظر منتقل خواهیم شد.

پس شکل کلی این دستور به هنگام طراحی سایت در زبان html به صورت زیر است:

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

<a href="url"><img src="" /></a>

<a href="">هر المانی که قرار است به عنوان لینک استفاده شود</a>

 

Global link – لینک سراسری یا جهانی  :

ویراستار Notpade++   خود را باز کنید و کد زیر را تایپ کنید سپس با پسوند htm  یا html  و با نام GlobalLink آن را ذخیره کنید.

<html>
   <head>
       <title>My Page</title>
   </head>

   <body>
             Click <a href="http://webfocus.ir">here</a> to go to webfocus.ir.
   </body>
</html>

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

Click here to go to webfocus.ir.

با فشردن کلمه here به صفحه اول وب فوکوس خواهید رفت , به همین سادگی!

Local link – لینک محلی:

قبل از اینکه به این مثال بپردازیم یک صفحه html بنام firstpage را در درایو c رایانه خود بسازید. سپس ویراستار NotePad++  را باز کرده و کد زیر را در آن تایپ کنید و آن را با نام Internallink  و با پسوند htm ذخیره کنید

Click <a href="c:\firstpage.htm">here</a> to go to firstpage.

حال اگر با مرورگر صفحه Internallink.htm را باز کنید، صفحه مورد نظر برای شما نمایش داده میشود!

 Intrnal Link – پیوند داخلی:

برای اینکه به قسمت خاصی از صفحه وبی که در آن قرار داریم ، پیوند بر قرار کنیم یا به عبارت دیگر به قسمتی از همان صفحه html پرش کنیم، باید از صفت name  از دستور<a>…</a> برای نام گذاری آن بخش  استفاده کنیم.این نام از حروف تشکیل می شود که باید منحصر به فرد نیز باشد. مثلا قسمتی از صفحه را انتخاب می کنیم  و در آن قسمت دستور <a name=”mesale1″>…</a> را می نویسیم حال برای مراجعه به آن بخش کافی است در پیوند داخلی که ایجاد می کنیم علامت # و بعد نامی که انتخاب کرده بودیم را می نویسیم. در این مثال باید بنویسیم <a href=”#mesale1″>…</a>. مثال کامل زیر بهتر به تشریح این موضوع خواهد پرداخت.

<html>
   <head>
      <title>my page</title>
   </head>

   <body>

        <h3><a href="#Chapter 1">Introduction</a></h2>
        <h3><a href="#Chapter 2">html text</a></h2>
        <h3><a href="#Chapter 3">html links</a></h2>

        <a name=" Chapter 1"> Introduction </a></br>
        <!-- Introdution متن مربوط به  --></br>

        <a name=" Chapter 2"> html text</a></br>
        <!-- html text متن مربوط به  --></br>

        <a name=" Chapter 3"> html links</a></br>
        <!-- html links متن مربوط به  --></br>

   </body>
</html>

در مثال بالا فرض کنید صفحه وبی داریم که شامل اطلاعاتی در مورد html  است که به 3 فصل  html links, html text ,Introduction تقسیم شده است که در بالای صفحه آمده اند. توضیح همه این فصل ها درهمین صفحه قرار دارد.
حال برای دیدن متن مربوط به html text  کافی است بر روی لینک html text کلیک کنیم. با یاد داریم که این نوع  پیوند ، پیوند داخلی نام دارد. پس 2 مرحله برای ایجاد پیوند داخلی داریم:

1)نام گذاری بخشی که می خواهیم با لینک آن را ببینیم.
<a name=”#Chapter 2″>html text</a>

2)ایجاد پیوند به بخش نام گذاری شده.
<a href=”#Chapter 2″>html text</a>

لینک های رنگی بسازید:

برای اینکه لینک ها را در صفحه خود به صورت متمایز نمایش دهیم می توان برای آنها رنگ مشخص کرد.
دو حالت برای تعریف کردن رنگ لینک ها وجود دارد:
1)رنگ تمام لینک ها در صفحه به یک صورت تعریف شود.
2)برای بعضی از لینک ها رنگ متفاوتی تعریف کنیم.

link,vlink,alink ؟!! یعنی چی؟

link: بیان کننده رنگ پیوند هایی است که تا کنون ملاقات نشده اند. استاندارد آن  آبی (blue  یا  #0000FF) است.
vlink مخفف Visited Link :رنگ پیوند را پس از ملاقات شدن نمایش می دهد.استاندارد آن ارغوانی (purple – #800080) است.
alink مخفف Active Link :رنگ لینک را وقتی که ماوس بر روی آن قرار می گیرد ، مشخص می کند.استاندارد آن قرمز (red – #FF0000) است.

یک رنگ برای تمام لینک های موجود در صفحه html

کافی است که در قسمت <body> از صفت های  link,vlink,alink  استفاده کنیم.

<body link="#C0C0C0" vlink="#808080" alink="#FF0000">

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

روش اول:استفاده از دستور font  بین دستور <a href>…</a>باید به این نکته مهم توجه داشت که دستور font حتما باید بین <a href>…</a> قرار بگیرد.

Click <a href="http://www.webfocus.ir"> <font color="red">here</font> </a> to go to webfocus.

روش دوم:استفاده از خاصیت style  در دستور <a>

Click <a href="http://www.webfocus.com" style="color: green">here</a> to go to webfocus.

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

بعضی رنگ های معروف طراحی وب سایت:
Black, Aqua , Fushia, Blue, Gray, Green, Lime, Marron, Navy, Olive, Purple, Red,Silver,Teal,White,Yellow  .

نکته :به جای نوشتن اسامی رنگ ها, می توان از فرمت RGB استفاده کرد.که b,g,r به ترتیب مخفف blue,green,red هستند.که هر یک می توانند مقداری بین 0 تا 255 بگیرند. رنگ مورد نظر از ترکیب این رنگ ها به دست خواهد آمد. مثلا 187 017 142 رنگی مایل به بنفش خواد بود. البته اکثر طراحان ترجیح می دهند که این رنگ ها را در مبنای شانزده (hex) بیان کنند مثلا رنگ معادل مثال قبل در مبنای شانزده به صورت 8E11BB# نوشته می شود.

صفات مربوط به دستور پیوند (Link Attributes )

در مورد صفت های href وname به طور مفصل صحبت کردیم حال به توضیح صفت های دیگر این دستور می پردازیم.
صفت title : با استفاده از این صفت وقتی ماوس بر روی پیوند مورد نظر قرار می گیرد متنی که در جلوی این صفت نوشته شده  ظاهر می شود.
مثال:

<a href ="www.webfocus.ir" title="for more learning html click here">learning html</a>

وقتی ماوس روی پیوندhml learning قرار می گیرد پیام for more learning html click here ظاهر می شود.

     صفت tabindex : با استفاده از این صفت و مقدار دادن به آن در مرورگرهایی که ازاین صفت پشتیبانی می کنند ,روند انتخاب کردن پیوند را با استفاده از کلید Tab  مشخص می کنیم.
مثال:

<a href =" http://www.yahoo.com"  tabindex="1">yahoo</a></br>
<a href =" http://www.google.com"  tabindex="3">google</a></br>
<a href =" http://www.webfocus.ir"  tabindex="2">webfocus</a>

با یک بار فشردن کلید Tabمکان نما بر روی پیوند yahoo با دو بار فشردن مکان نما بر روی پیوند webfocus و با سه بار فشردن کلید Tab مکان نما بر روی پیوند google قرار می گیرد.
حال اگر ازاین صفت استفاده نکنیم ,با هر بار فشردن کلید Tab ,مکان نما به ترتیبی که پیوندها در صفحه آورده شده اند ,حرکت می کنند.مثلا اگر در مثال بالا از صفت tabindex استفاده نشود,با یک بار فشردن  Tab  مکان نما بر روی پیوند yahoo با دو بار فشردن بر روی پیوند google و با سه بار فشردن برروی پیوند webfocus قرار می گیرد.

      صفت Target : به صورت پیش فرض, لینک ها در همان پنجره یا فریم ای که در آن هستید باز خواهند شد.با استفاده از صفت Target مثلا می توانید تعیین کنید که پیوند مورد نظر در یک پنجره جدید باز شود. با این صفت در بخش فریم ها در طراحی وب سایت بیشتر آشنا خواهیم شد.

نویسنده: رضا ترابی

طراحی سایت – آموزش html – متن ها

به هنگام طراحی سایت اگر می خواهید متنی را به صفحه html خود اضافه کنید کافی است متن دلخواه را در قسمت Body از صفحه html تایپ کنید.

مثال:
ویراستار notepad یا notepad++   خود را باز کنید و کد زیر را تایپ کنید

<html> 
<head> 
    <title>my page</title>
 </head> 
   <body>
سلام این صفحه سایت را من طراحی کرده ام!
   </body>
</html>

سپس  با پسوند htm  یا html   آن را ذخیره کنید.
با باز کردن مثال خود با مرورگر Internet Explorer یا هر مرورگر دیگر  نتیجه به صورت زیر خواهد شد:

سلام این صفحه سایت را من طراحی کرده ام!

اگر خطوط را  به صورت “خرچنگ قورباغه” مي بينيد,فرار نكنيد, کافی است در هنگام Save کردن در پایین پنجره گزینه Encoding را با UTF-8 تنظیم کنید (در صورت استفاده از n++ باید قبل از save کردن از منوی Format گزینه Encode in UTF-8 را انتخاب نمایید).
مانند مثال بالا اگر ویژگی های خاصی را به متن اضافه نکنید مرورگر از سایز و فونتی که به صورت  پیش فرض برایش تعریف شده  استفاده می کند.

ویرایش 1392/06/12 توسط میثم

دستور basefont فقط توسط مرورگر IE9 و نسخه های قدیمی تر آن پشتیبانی می شود به عبارت دیگر هیچ مرورگر دیگری از آن پشتیبانی نمی کند.

نکته مهم!!!!!! دستور basefont در html5 پشتیبانی نمی شود و امروزه از CSS برای این منظور در طراحی سایت استفاده می شود.

فونت پیش فرض (BASE FONT):

برای اینکه متنی که در کل صفحه html وارد می کنید به یک شکل دیده شود یا به عبارت دیگر یک فونت سراسری با اندازه و رنگ یکسان داشته باشید کافی است که از دستور <basefont> در ابتدای قسمت بدنه  (body) استفاده کنید.
مثال: ویراستار Notpade++   خود را باز کنید و کد زیر را تایپ کنید سپس  با پسوند htm  یا html  و با نام دلخواه آن را ذخیره کنید.

 1.<html> 
 2.<head> 
 3.      <title>my page</title> 
 4.</head> 
 5. <body> 
 6.     <basefont face="Tahoma, arial, verdana" size="4" color="red"> 
 7.       Hello! This is my page. 
 8.       All text looks the same<br> 
 9.       since I only specified a basefont<br> 
10.</body> 
11.</html>

در مثال بالا خاصیت های color,size,face از دستور  basefont به ترتیب بیانگر فونت, اندازه یا سایز متن ( 1کوچکترین و 7 بزرگترین سایز) ورنگ متن html شما هستند.

نکته: اگر لیستی از فونت ها را مانند مثال بالا وارد کنیم مرورگر از اولین فونت قابل نمایش برای متن درکامپیوتر بیننده استفاده می کند.یعنی اگر قابلیت نمایش فونت Tahoma  فراهم نباشد مرورگر از فونت arial وگر نه از فونت verdana استفاده خواهد کرد. نتیجه مثال بالا به صورت زیر خواهد شد:

Hello! This is my page. All text looks the same
since I only specified a basefont

توجه کنید زمانیکه سایتی طراحی می کنید به هنگام نوشتن متون html برای رفتن به خط بعدی باید از دستور <br> استفاده کنید. با توجه به مثال خواهید دید که در خط 7 از <br> استفاده نکردیم و به همین دلیل متن نوشته شده در خط 8 با وجود اینکه در خط بعدی کد نوشته شده درخروجی بلافاصله بعد از متن خط 7  دیده میشود.

تغییر فونت متن :

با استفاده از دستور  </font><font> می توان فونت , رنگ و اندازه متن را زمان طراحی سایت تغییر داد.
مثال: ویراستار Notpade++   خود را باز کنید و کد زیر را تایپ کنید سپس  با پسوند htm  یا html  و با نام دلخواه آن را ذخیره کنید.

<html> 
   <head> 
   <title>My Page</title> 
   </head> 
 
<body> 
   <basefont color="green" face="arial" size="4"> 
   Hello! This is my page.<br><br> 
   <font color="red" face="arial" size="2"> 
   This local text looks different. 
   </font> 
   <br><br> 
   This text looks like the first line. 
</body> 
</html>

با باز کردن مثال خود با مرورگر Internet Explorer , کد بالا نتیجه زیر را در مرورگر خواهد داشت:
Hello! This is my page.

This local text looks different.

This text looks like the first line.

با استفاده از صفت های color,face,size  از دستور <font> می توان به ترتیب اندازه (1 کوچکترین و7 بزرگترین) ,نوع فونت و رنگ متن را تعیین کرد.

تفاوت font با basefont
basefont در کل صفحه وب اعمال می شود.در حالی که در دستور font تنها متنی که بین <font>…</font> قرار دارد تحت تاثیر این دستور و صفت های آن(face,color,size) قرار می گیرد.

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

در طراحی سایت به زبان html قالب بندی متون به سادگی توسط دستورات مشخص شده در جدول انجام می شود!

توضیحدستورخروجی
باعثbold  (برجسته)شدن متن می شود.<b>text</b>text
باعث Italic  (کج یا خوابیده) شدن متن می شود.<i>text</i>text
خطی زیر متن می کشد.<u>text</u>text
متن را کوچکتر می کند و پایین تر می آورد.A<sub>B</sub>AB
متن را کوچکتر می کند و بالا تر می آورد.A<sup>B</sup>AB
متن را به صورت چشمک زن نمایش می دهد.<blink>text</blink>text
خطی روی متن می کشد.<strike>text</strike>text
متن را به صورتی که در ماشین تحریر تایپ می شود ,نمایش می دهد.<tt>text</tt>text
متن را دقیقا به همان صورتی  که می نویسیم نمایش می دهد.
یعنی فضای خالی ,tab ,رفتن به سطر بعدی را حفظ می کند.
<pre>text</pre>

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

در html روش های متعددی برای تعیین اندازه متون پیش بینی شده است!

توضیحدستورخروجی
باعث  افزایش سایز متن به اندازه 1 واحد نسبت به حالت عاددی<big>text</big>text
باعث  کاهش سایز متن به اندازه 1 واحد نسبت به حالت عادی.<small>text</small>text
متن را با کوچکترین سایز نمایش می دهد.<font size=”1″>text</font>text
متن را با بزرگترین سایز نمایش می دهد.<font size=”7″> text</font>text

نکته اول در مورد دستور <big></big> اینکه می توان از آن به صورت تکراری و پشت سر هم استفاده کرد.مثلا اگر بخواهیم متنی با دو سایز بزرگ تر از حالت عادی نمایش داده شود , کافی است از این دستو دو بار به صورت زیر استفاده شود .
<big><big>text</big></big>

و نکته دوم اینکه مقادیر صفت size متغیرند و می توانید از تمامی مقادیر 1 تا 7 استفاده کنید!

پاراگراف بندی:

برای پاراگراف بندی متن در Html  کافی از دستور <p>…</p>  استفاده کنیم , که <p> نشان دهنده شروع پاراگراف و <p/> نشان دهنده پایان آن است.
صفات Align,Id,Title,Dir از جمله صفاتی هستند که به بحث آنها می پردازیم:

صفت Dir : برای اینکه جهت نوشته شدن متن را مشخص کنیم از این صفت استفاده می کنیم. مقادیر این صفت عبارتند از LTR مخفف Left To Right به معنی چپ به راست و همچنین RTL مخفف Right To Left به معنی راست به چپ که از دومی ( RTL ) برای نوشتن متون فارسی استفاده می کنیم.

صفت Title: عبارتی که جلوی Title نوشته می شود به عنوان توضیح در مورد پاراگراف هنگامی که ماوس روی آن قرار می گیرد, ظاهر می شود.

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

صفت Align :که مکان پاراگراف را مشخص می کند.که دارای سه مقدار Left,Right,Center  است که قبلا توضیح داده شده است.

عناوین در طراحی سایت:

در اچ تی ام ال از دستورات h1 – h6 برای تعیین عنوان استفاده می شود. برای این کار از دستور مورد نظر به صورت <hX>Text</hX> استفاده می شود که باید بر حسب نیاز X را با عدد مورد نظر جایگزین کنید. مهمترین نکته در مورد دستورات تعیین عنوان این است که این دستورات برعکس نامشان اندازه عنوان را تعیین می کنند یعنی از h1 برای تعیین بزرگترین عنوان و از h6 برای تعیین کوچکترین عنوان استفاده می شود.

Heading1

Heading2

Heading3

Heading4

Heading5
Heading6

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

<h1 align="center">عنوان در وسط</h1>

عنوان در وسط

<h1 align="left">عنوان سمت چپ</h1>

عنوان سمت چپ

<h1 align="right">عنوان سمت راست</h1>

عنوان سمت راست

 

نویسنده: رضا ترابی

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

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

HTML مخفف Hyper Text Markup Language هست ، اگه معنیشو نمیدونید معنیش میشه زبان نشانه گذاری فرا متنی!!!
زبان نشانه گذاری میگن چون ساختار دستوراتش بر اساس یکسری نشانه tag هست و فرامتنی میگن چون از متنی که تویه کاغذ نوشته میشه توانایی بیشتری داره…

HTML زبانیه که به مرورگر میگه که صفحات رو باید چطور نمایش بده! میشه گفت داره صفحات وب رو توصیف میکنه.

 وقتی این همه برنامه برای ساخت صفحات وب هست چرا باید خودمو تو دردسر بندازم اچ تی ام ال یاد بگیرم!؟؟؟؟

اول اینکه html بسیار ساده هست و خیلی سریع میتونید اونو یاد بگیرید و بهش مسلط بشید و دوم اینکه وقتی که جلوتر بریم میبینیم که موقع نوشتن خیلی از برنامه های تحت وب مثلا با php نیاز دارید که با html هم آشنا باشید. یادتون باشه هرچی که قرار باشه کاربر ببینه باید معمولا در صفحه HTML نمایش داده بشه!

مواد لازم:
هیچی! همون برنامه notepad تویه ویندوز کافیه! البته اگر برنامه notepad++ رو دانلود کنید میتونید تگ های html رو به صورت رنگی ببینید و امکانات بیشتری داشته باشید!

خوبه شروع کنیم دیگه! تویه notepad(++) یه سند جدید ایجاد کنید و توش کد زیر رو بنویسید:

<!DOCTYPE html>
<html>
<head>
     <title>In Onvane Safhast</title>
</head>
<body>
     In Ham Matne Safheye Avvle!
     Vay Khoda Daram Html Yad Migiram....
     <a href="http://webfocus.ir/">Webfocus.ir</a>
</body>
</html>

حالا اونو با یه نام دلخواه ذخیره کنید مثلا من به نام safeheye1.html ذخیره کردمش! حالا باید نتیجه تلاشمون رو ببینیم فقط کافیه که روی فایلمون (منظورم safheye1.html) دابل کلیک کنیم! اگر نتوستید صفحه رو باز کنید برید مرورگر رو باز کنید و از منوی File گزینه Open یا Open File رو انتخاب کنید و بعد هم فایلی که ایجاد کردید رو انتخاب و باز کنید!

اگه تا اینجا رو با دقت خونده باشید به نکات زیر حتما رسیدید:

1. هر صفحه html از یک فایل متنی تشکیل میشه که با پسوند html یا htm ذخیره میشه!
2. دستورات html ساختاری به صورت <دستور/>……<دستور> دارن!
3. ساختار هر فایل html  به صورت زیر هست که از دو قسمت اصلی تشکیل میشه: head  که توش عنوان title و یکسری اطلاعات دیگه قرار میگیره و body که توش عناصر صفحه قرار میگیرن!

<html>
    <head>
    </head>
    
    <body>
    </body>
</html>

4. دستورات html خودشون متن هستند و برای اجرا باید به کامپیوتر کاربر منتقل بشن. میتونید این موضوع رو امتحان کنید فقط کافیه تویه همین صفحه که هستند راست کلیک کنید و بعد گزینه View Source یا View Page Source رو انتخاب کنید. واسه همینه که میگن html یک زبان سمت کاربر هستش!
5. توانایی متون html از متون کاغذی خیلی بیشتره به عنوان مثال دیدید که با کلیک رویه کلمه Webfocus.ir صفحه اول سایت وب فوکوس بازشد!