رفتن به مطلب
جستجو در
  • تنظیمات بیشتر ...
نمایش نتایجی که شامل ...
جستجو در ...

به سایت ما خوش آمدید

عضویت فقط چند ثانیه زمان می برد؛ منتظر شما هستیم!

behrooz

آموزش html

پست های پیشنهاد شده

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

از طرفی قالب های آماده نیز زیاد وجود دارد که اگر در آینده قصد توسعه سایت خود را دارید هرگز به سراغ آنها نروید ( حداقل تا قبل از طراحی یک سایت توسط خودتان ) .

 

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

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

2- بعد از مدتی نرم افزار Dreamweaver را به شما معرفی خواهم کرد که سرعت نوشتن کدها را بیشتر می کند .

3- فارسی نویسی در سایت و قواعد لازم برای نمایش صحیح متن فارسی در html را آموزش خواهم داد . زیرا احتمالا محتوای سایت شما فارسی است .

4- بعد از یادگیری بخش های اول آموزش باید سایتی را ( هر چند بد) ساخته و بر روی اینترنت قرار دهید . من در آموزش های خود دقیقا این زمان را به شما تذکر خواهم داد و به شما یاد می دهم که چگونه اشتراکی را بخرید که به وسیله آن بتوانید فایل های html خود را بر روی یک کامپیوتر متصل به اینترنت قرار دهید . این مرحله مهمترین مرحله از آموزش شما می باشد . اگر این مرحله را انجام ندهید بی انگیزه شده و این آموزش ها را رها خواهید کرد .

5- نحوه ساخت قالب سایت که به صورت سه ستون می باشد ( قالب اکثر سایت ها ) را با استفاده از تگ div به شما آموزش خواهم داد .

6- به شما آموزش خواهم داد که CSS تا چه حد طراحی سایت را برای شما ساده می کند .

  • Thanks 2
  • Haha 1

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

جلسه دوم

 html چیست ؟

 

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

 

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

 

نحوه ساخت یک فایل html :

ساخت یک فایل html بسیار ساده می باشد . شما تنها به یک نرم افزار نیاز دارید که بتوانید با آن تایپ کنید . نرم افزار Notepad در ویندوز گزینه مناسبی می باشد . برای باز کردن این نرم افزار ، از منوی start در ویندوز ، Accessories را انتخاب کرده و سپس گزینه Notepad را انتخاب کنید .

برنامه Notepad باز می شود . ساده ترین کدی که می توانید در یک فایل html بنویسید به صورت زیر می باشد :

<html>
 
salam bar shoma !
 
</html>

 

عبارت <html> نشان دهنده شروع کدهای html و عبارت <html/> نشان دهنده پایان کدهای html می باشد و عبارتsalam bar shoma ! نیز ((سلامی)) است به شما که آن را در مرورگر اینترنت خواهید دید .

اکنون باید فایل را ذخیره کنید . قبل از ذخیره کردن فایل ، بر روی desktop خود فولدری به نام www.mysite.com بسازید ( یا هر نام دیگری ) . شما تمامی فایل های سایت خود را در این فولدر نگهداری خواهید کرد و بدین صورت کار خود را با نظم به پیش می برید . چیدمان فایل ها در این فولدر دقیقا با چیدمان فایل ها در کامپیوتری که بعدا سایت خود را بر روی آن قرار می دهید ، یکسان خواهد بود .

اکنون فایل را با نام index.html ذخیره کنید . دقت کنید که پسوند فایل را نباید txt انتخاب کنید بلکه پسوند فایل باید html باشد تا مرورگرهای اینترنت بتوانند فایل را بخوانند . نام اصلی ترین صفحه هر سایت index می باشد و به همین دلیل این نام را انتخاب کرده ایم .

حال بر روی فایل ذخیره شده کلیک راست نموده و از قسمت Open with گزینه Internet Explorer و یا هر مرورگر دلخواه دیگر را انتخاب کنید . مرورگر باز شده و صفحه index.html را نمایش می دهد .

شما صفحه ای کاملا سفید را مشاهده خواهید کرد که در آن عبارت salam bar shoma ! نوشته شده است :

salam bar shoma !

 

  • Thanks 3

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

جلسه سوم

 تگ ها در html

 

 

همان طور که مشاهده کردید دو عبارت <html> و <html/> مشخص کننده شروع و پایان کدهای html می باشند . در واقع این قاعده ای است که مرورگر اینترنت برای خواندن فایل های html از آن استفاده می کند و قواعد زیاد دیگری در html مشابه آن وجود دارد . نقطه اشتراک همه این عبارت ها که قاعده ای را ایجاد می کنند این است که در ابتدای خود دارای علامت کوچکتر((>)) و در انتهای خود دارای علامت بزرگتر ((<)) می باشند . به هر کدام از این عبارت ها که دارای این علامت ها باشند یک ((تگ)) می گوییم .

 

اکثر تگ ها در html به صورت زوج تگ می باشند یعنی یک تگ برای اعلام شروع (تگ شروع) و یک تگ برای اعلام پایان (تگ پایان) به کار می رود که تنها تفاوت آنها در یک علامت / می باشد که به تگ پایانی اضافه شده است . البته تگ های تکی هم داریم که در مباحث بعدی معرفی می شوند .

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

  • Thanks 3

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

جلسه چهارم

 شروع یک خط جدید با تگ br

 

 

مرورگرهای اینترنت هنگام خواندن یک فایل html چنانچه به چندین فاصله خالی پشت سرهم برخورد کنند آنها را تنها به عنوان یک فاصله در نظر می گیرند . بنابراین شما در یک فایل html نمی توانید با قرار دادن تعدادی فاصله پشت سر هم ، ادامه مطالب را به شروع خط بعدی ببرید . برای آنکه بخواهید ادامه مطالبتان در شروع خط بعدی باشد باید از تگ <br> استفاده کنید .

قبل از مثالی در مورد این تگ ، ابتدا مثال قبلی را دوباره مرور می کنیم :

<html>
 
salam bar shoma !
 
</html>

نتیجه :

salam bar shoma !

نکته : از این به بعد تنها کافی است که فایل html در Notepad باز بوده و هر بار کد درون فایل را تغییر داده و با گرفتن کلید Ctrl و فشار دادن کلید S از کیبورد ، تغییرات را ذخیره کنید و در مرورگر اینترنت خود که همواره باز است بر روی دکمه Refresh کلیک کنید . این کار روشی سریع برای مرور مثال های پی در پی می باشد .

 

حال با مثال زیر نحوه عملکرد تگ <br> را نشان می دهیم :

<html>
 
salam <br> bar shoma !
 
</html>

نتیجه :

salam 
bar shoma !

مشاهده می کنید که عبارت های بعد از تگ <br> در خط بعدی نمایش داده شده اند .

  • Thanks 3

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

جلسه پنجم

ایجاد عنوان با تگ های h1 و h2 و h3 و h4 و h5 و h6

 

 

حرف h در تگ های بالا از اول کلمه heading به معنای ((عنوان)) گرفته شده است و برای نمایش عنوان یک مطلب به کار می رود . معمولا برای جلب توجه بیشتر باید عنوان مطلب با اندازه بزرگتر و برجسته تر نسبت به متن مطلب نمایش داده شود که این تگ ها این عمل را انجام می دهند . به مثال زیر توجه کنید :

<html>
 
<h1>salam</h1>
salam bar shoma !
 
</html>

نتیجه :

salam

salam bar shoma !

مشاهده می کنید که عبارت درون تگ های <h1> و <h1/> به صورت برجسته تر نمایش داده شده است . همچنین این تگ ها باعث می شوند که مرورگر نمایش ادامه محتویات را از خط بعدی شروع کند .

 

تفاوت تگ های <h1> و <h2> و <h3> و <h4> و <h5> و <h6> :

تفاوت تگ های فوق تنها در اندازه نمایش عنوان می باشد . تگ <h1> بزرگترین و تگ <h6> کوچکترین نمایش را برای عنوان به کار می برند . به مثال زیر توجه کنید :

<html>
 
<h1>salam<h1/>
<h2>salam<h2/> 
<h3>salam<h3/> 
<h4>salam<h4/> 
<h5>salam<h5/> 
<h6>salam<h6/>  
 
</html>

نتیجه :

salam

salam

salam

salam

salam

salam

  • Thanks 1

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

جلسه ششم

ایجاد یک پاراگراف با تگ p

 

چنانچه قصد داشته باشیم بخشی از متن به صورت یک پاراگراف نمایش داده شود و از بخش های دیگر متن جدا بوده و فاصله داشته باشد باید از زوج تگ <p> و <p/> استفاده کنیم . متنی که بین این دو تگ قرار بگیرد به صورت یک پاراگراف نمایش داده می شود . به مثال زیر توجه کنید :

<html>
 
the text before paragraph .<br> another text .
<p>this is a paragraph</p> 
the text after paragraph .<br> another text .
 
</html>

 

نتیجه :

the text before paragraph .
another text .
this is a paragraph
the text after paragraph .
another text .

 

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

 

  • Thanks 1

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

جلسه هفتم

 تقسیم فایل html به دو بخش head و body

 

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

<html>
 
<head>
</head>
 
<body>
 
<p>this is a paragraph</p> 
 
</body>
</html>

نتیجه :

this is a paragraph

در واقع زمانی که تگ های دو بخش head و body را مشخص نکنیم ( مثل مثال های قبلی ) ، مرورگر فرض می کند که این کدها برای بخش body بوده است و آنها را نمایش خواهد داد .

 

نکته : مشاهده می کنید که در بخش head فعلا چیزی ننوشته ایم . این بخش به یک سری اطلاعات نیاز دارد که در آینده با معرفی نرم افزار Dreamweaver به شما یاد خواهم داد که چگونه این بخش را به طور خودکار توسط این نرم افزار پر کنید .

بنابراین از این به بعد از نوشتن بخش head در مثال ها خودداری می کنیم تا زمانی که کار با نرم افزار Dreamweaver را شروع کنیم اما تگ های مربوط به body را می نویسیم تا این تقسیم بندی را فراموش نکنید .

  • Thanks 1

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

جلسه هشتم

مشخصه برای تگ ها در html

 

 

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

به مثال زیر توجه کنید :

<html>
<body>
 
<p align="right">this is a paragraph</p>
 
<body>
</html>

 

نتیجه :

this is a paragraph

 

مشخصه align زمانی به کار می رود که بخواهیم تعیین کنیم پاراگراف در چه سمتی از صفحه ، نمایش داده شود . چون این مشخصه را به صورت right تعیین کرده ایم بنابراین پاراگراف در سمت راست صفحه ، نمایش داده می شود . همان طور که مشاهده کردید با یک فاصله پس از حرف p ، نام مشخصه align را نوشته ایم و سپس حالتی را که برای align در نظر گرفته ایم ( در اینجا right ) در بین دو علامت ” نوشته ایم . تمامی مشخصه ها برای تگ های مختلف به همین شیوه نوشته می شوند و تنها باید یاد بگیرید که هر مشخصه برای چه تگ هایی به کار می رود و چه ویژگی خاصی را برای آن تگ ها تعیین می کند .

 

  • Thanks 1

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

جلسه نهم

 نرم افزار Dreamweaver برای راحت تر نوشتن کدها

 

نرم افزار Dreamweaver ساخت شرکت adobe می باشد که محیط بسیار مناسبی برای نوشتن کدهای html فراهم کرده است . این نرم افزار تمامی زبان های مربوط به طراحی سایت و اینترنت را پشتیبانی می کند . در ادامه برخی ویژگی های جالب این نرم افزار را برایتان شرح می دهم .

پر کردن بخش head فایل html به صورت خودکار :

برای آنکه در نرم افزار Dreamweaver یک فایل html بسازیم باید از منوی File گزینه New را انتخاب کنیم . سپس پنجره ای به شکل زیر باز می شود :

dreamweaver1-e1475135999937.gif

در این پنجره ، بخش Page Type را برابر HTML و بخش Layout را برابر <none> انتخاب کنید . یک فایل html باز می شود که بخش head آن به طور کامل پر شده است و مناسب برای قرار گرفتن در اینترنت می باشد .

برای کسانی که به نرم افزار Dreamweaver دسترسی ندارند این کدها را می نویسم تا در فایل های خود کپی کنند :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
 
<body>
</body>
</html>

 

 

قابلیت نمایش نتیجه کد ها به طور همزمان با ویرایش کدها :

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

 

قابلیت نمایش صفحه در مرورگرهای مختلف:

در نرم افزار Dreamweaver می توانید با گزینه هایی که به صورت گرافیکی در بالای پنجره قرار داده شده اند ، صفحه html ساخته شده توسط خود را در هر مرورگر دلخواه که بر روی ویندوز شما نصب شده باشد ، ببینید . همچنین می توانید از منوی File بر روی گزینه Preview in Browser رفته تا لیست مرورگرها را ببینید و بر روی هر کدام که کلیک کنید صفحه html شما در آن مرورگر باز می شود .

قابلیت انتخاب مشخصه ها از لیستی کامل از آنها :

گر یادتان باشد گفتیم که مثلا در تگ <p> چنانچه بخواهیم مشخصه ای را به کار ببریم ابتدا می نویسیم p> و سپس یک فاصله قرار می دهیم و آنگاه مشخصه مورد نظرمان را می نویسیم ، مثل عبارت زیر :

<p align="right">

در نرم افزار Dreamweaver همین که پس از نوشتن p> بر روی کلید Space از کیبورد فشار دهید تا یک فاصله ایجاد شود ، خود نرم افزار لیستی از تمامی مشخصه های ممکن برای آن تگ را به شما نشان می دهد تا به راحتی یکی را انتخاب کنید و سپس مقادیر ممکن مختلف برای آن مشخصه را به شما نشان می دهد تا آن را که مورد نظرتان بوده است انتخاب کنید .

 

ساختار های آماده برای سایت در نرم افزار Dreamweaver :

نرم افزار dreamweaver دارای یک سری قالب آماده می باشد که هنگام ایجاد یک فایل html جدید می توانید هر یک از آنها را انتخاب نمایید . برای این منظور از منوی File گزینه New را انتخاب کنید سپس در صفحه ای که باز می شود بخش Page Type را برابر HTML و بخش Layout را برابر هر نوع ساختاری که دوست دارید قرار دهید .

 

  • Thanks 1

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

جلسه دهم

تگ div برای ساخت اسکلت سایت

 

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

بنابراین در این مرحله شما را با تگ div آشنا می کنم ، شاید این آشنایی زود باشد اما حکمت دارد !!!

امروزه در اکثر سایت ها یک شکل برای بالای سایت (header) و یک ستون اصلی در وسط برای محتوای هر صفحه (content) ، دو ستون برای دو طرف ستون اصلی که شامل لینک ها ، اخبار کوتاه ، تبلیغات ، پیام ها و … می باشند (sidebar1 و sidebar2) و در پایین صفحه نیز بخشی برای تبلیغات ، معرفی شرکت صاحب سایت ، حقوق سایت و … (footer) ، به کار می رود . اما قبلا مشاهده کردید که مرورگر دستورات html را خوانده و بخش هایی را که باید نمایش دهد به صورت ستونی و پشت سرهم نمایش می دهد ، بنابراین ما به تگی نیاز داریم که با آن بخش های مختلف صفحه را از یکدیگر جدا کنیم و سپس بتوانیم بر روی هر بخش تغییرات مورد نظر خود را اعمال کنیم ، به گونه ای که این تغییرات چیدمان سایر بخش ها را به هم نریزد . تگ مورد استفاده برای این منظور ، تگ div می باشد .

 

نمایش اطلاعات دو div به صورت پشت سرهم :

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

<html>
<body>
 
<div>
<p>paragraph number 1</p>
</div>
 
<div>
<p>paragraph number 2</p>
</div>
 
</body>
</html>

نتیجه :

paragraph number 1
paragraph number 2

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

نمایش اطلاعات دو div به صورت دو ستون در کنار هم :

با مثال بعدی نشان خواهیم داد که چگونه می توانیم اطلاعات درون دو div را به صورت دو ستون در کنار هم قرار دهیم :

<html>
<body>
 
<div style="float:left ; padding-right:100px">
<p>paragraph number 1</p>
</div>
 
<div style="float:left">
<p>paragraph number 2</p>
</div>
 
</body>
</html>

نتیجه :

paragraph number 1 paragraph number 2

این بار اطلاعات درون دو تگ div در دو ستون کنار هم نمایش داده شده اند و دلیل آن استفاده از مشخصهstyle=”float:left” می باشد . این مشخصه ، تگ های div را به صورت شناور در می آورد و با تعیین جهت left برای float ، باعث شده ایم که تگ div دوم در سمت راست تگ div اول قرار بگیرد . دقت شود که در تگ div اول از مشخصه padding-right:100px استفاده کرده ایم که باعث می شود به اندازه 100 پیکسل از محتویات تگ div دوم که در سمت راست آن قرار خواهد گرفت ، فاصله بگیرد .

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

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

جلسه یازدهم

استفاده از id برای دادن نام اختصاصی به هر تگ div

 

همانطور که در مبحث قبلی گفتم ، نوشتن مشخصه style درون تگ div انتخاب مناسبی نیست و ما به جای آن روش بهتری را پیشنهاد می کنیم . در این روش برای هر تگ div یک نام اختصاصی ( یک id ) در نظر می گیریم و سپس ویژگی هایی را که می خواهیم به آن تگ div نسبت دهیم را در قسمت head از فایل html قرار می دهیم . همان مثال مبحث قبل را این بار با این روش می نویسیم :

<html>
 
<head>
<style type="text/css">
#column1 {
          float:left;
          padding-right:100px;
         }
#column2 {
          float:left;
         }       
</style>
</head>
 
<body>
 
<div id="column1">
<p>paragraph number 1</p>
</div>
 
<div id="column2">
<p>paragraph number 2</p>
</div>
 
</body>
</html>

نتیجه :

paragraph number 1 paragraph number 2

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

در کدنویسی بالا ، ابتدا برای تگ div اول یک id با نام column1 و برای تگ div دوم یک id با نام column2 مشخص کرده ایم . حال باید کدهای CSS را بنویسیم . محل کدهای CSS باید بین تگ های <head> و <head/> باشد . شروع کدهای CSS را با تگ شروع <style type=”text/css”> اعلام می کنیم و پایان کدهای CSS را نیز با تگ پایانی <style/> اعلام می کنیم ، سپس بین این دو تگ ، کدهای CSS را می نویسیم . برای تگ های div ، نام هایی اختصاصی ( id ) ساختیم تا بتوانیم در این محل به آنها ویژگی هایی را اختصاص دهیم . برای اینکه هر تگ div را مشخص کنیم ابتدا علامت # را نوشته و سپس نام id مربوط به آن را می نویسیم . سپس بین دو علامت { و } تمامی مشخصه هایی را که می خواهیم برای آن تگ div می نویسیم .

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

جلسه دوزادهم

ساخت اسکلت یک سایت کامل

 

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/
xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>عنوان صفحه</title>
<style type="text/css">
body {
         font-family:Arial, Helvetica, sans-serif;
         text-align:right;
         direction:rtl; 
     } 
.container { 
           width:100%;
           margin:0 auto;
                   }               
body, div, h1, h2, h3, h4, h5, h6, p, ul, img {
                                                   margin:0px;
                                               padding:0px;
                                                                                           }    
#logo1 {        
           background:url(../images/kelid.gif) no-repeat;
           width:100%;
       height:180px;
           background-position:center
       }        
#tagline { 
         padding-top:60px;
                 text-align:center;
         }                       
#tagline h3 {
                font-size: 30px;
                    color: #09F;
                    }                    
ul#menu {
        list-style:none;
                padding-top:50px;
        }               
ul#menu li a {
             font-size:20px;
             color:#090;
             text-decoration:none;
             }                                           
ul#menu li {                             
           float:right;
                   padding-left:0px;
           padding-right:30px;
           width:150px; 
                   }            
#sidebar1 {
              width: 20%;
          float:left;
                  direction:rtl;
                  padding-top:30px;
                  padding-bottom:30px;
                  padding-right:2%;
                  padding-left:2%;
          }                                                        
ul#sidebar1_menu {
                 list-style:none;
                 }                         
#content {
         width:52%;
         float:left;
                 padding-top:30px;
                 padding-bottom:30px;
                 padding-right:0px;
         }               
#content h2 {
            font-size: 24px;
            color: #00C;
            padding-top: 25px;
            }                           
#content h3 {
            font-size:24px;
            color:#444444;
            padding:20px;
            }
#content h4 {
            font-size: 18px;
            color: #373737;
            font-weight: normal;
            }
#content p {
               text-align:justify;
           font-size: 18px;
           color: #000;
           padding-top: 20px;
           }                               
#content small {
               font-size: 12px;
               color: #373737;
               }                           
#content a {
           color: #F33;
           font-weight: bold;
           text-decoration: none;
           }                                                                                                                                    
#sidebar2 {
              width: 20%;
          float:left;
                  direction:rtl;
                  padding-top:30px;
                  padding-bottom:30px;
                  padding-left:2%;
                  padding-right:2%;
          }               
ul#sidebar2_menu {
                 list-style:none;
                 }                      
ul#sidebar2_menu li a {
                                  text-decoration:none;
                      }                  
#footer {
            width: 100%;
            text-align:center;
                padding-top:60px;
        }                         
</style>
</head>
<body>
     <div id="main">
          <div class="container">
               <div id="header">
                    <div id="logo1">
                         <div id="tagline">
                                                         <h3>شعار تبلیغاتی سایت شما در این محل نمایش داده می شود</h3>
                         </div>              
                    </div>
                    
                    <div style="clear:both"></div>
                    
                    <ul id="menu">
                        <li><a href="#">خانه</a></li>
                        <li><a href="#">مبحث اول</a></li>
                        <li><a href="#">مبحث دوم</a></li>
                        <li><a href="#">مبحث سوم</a></li>
                        <li><a href="#">تماس با ما</a></li>
                    </ul>   
                         
                    <div style="clear:both"></div>
               </div><!--end header -->
               
               <div id="sidebar1">
                    <h3>عنوان ستون سمت چپ</h3>
                    <br />
                    <ul id="sidebar1_menu">
                        <li>عبارت اول از ستون سمت چپ</li>
                        <hr />
                        <li>عبارت دوم از ستون سمت چپ</li>
                        <hr />
                        <li>عبارت سوم از ستون سمت چپ</li>
                        <hr />
                    </ul>
               </div><!--end sidebar1-->              
               
               <div id="content">
                    <h1>عنوان اصلی مبحث</h1>
                    <h2>زیر عنوان :</h2>
                    <p>
                           مباحث به زبان فارسی در این محل نوشته خواهد شد .
                    </p>
               </div><!--end content-->  
               
               <div id="sidebar2">
                    <h3>عنوان ستون سمت راست</h3>
                    <br />
                    <ul id="sidebar2_menu">
                        <li><a href="#">اولین لینک از ستون سمت راست</a></li>
                        <hr />
                        <li><a href="#">دومین لینک از ستون سمت راست</a></li>
                        <hr />
                        <li><a href="#">سومین لینک از ستون سمت راست</a></li>
                        <hr />
                    </ul>
               </div><!--end sidebar2-->
               
               <div style="clear:both"></div>
          </div><!--end main container-->
     </div><!--end main-->
     <div id="footer">
          <div class="container">
                    <div style="clear:both"></div>
                        <p>
                            Copyright © 2012 www.yoursite.com <br />
                            All Rights Reserved
                        </p>          
          </div><!--end footer container-->
     </div><!--end footer-->
</body>
</html>

توضیحاتی در مورد کدها :

نحوه جداسازی بخش های مختلف سایت با تگ div :

در بخش body از فایل html ، با استفاده از تگ div ، بخش های مختلف سایت را جدا کرده ایم تا بتوانیم به هر یک به طور جداگانه مشخصه هایی را اختصاص بدهیم و همچنین نحوه چیدمان بخش های مختلف سایت در کنار هم را مشخص کنیم . به هر تگ div یک id اختصاص داده ایم زیرا کدهای CSS را در بخش head فایل html نوشته ایم و با استفاده از id است که تعیین می کنیم هر قسمت صفحه ( محتویات هر تگ div ) چه مشخصه هایی باید داشته باشد .

بخش های مختلف سایت عبارتند از header که در بالاترین بخش سایت نمایش داده می شود و درواقع سردر ورودی سایت می باشد ، sidebar1 که ستون سمت چپ سایت است ، sidebar2 که ستون سمت راست سایت است ، content که مطالب مربوط به هر صفحه در آن نوشته می شود و بین دو ستون اصلی سایت قرار می گیرد و footer که در پایین ترین بخش سایت قرار می گیرد و معمولا حاوی علامت تجاری سایت ، حقوق مادی و معنوی سایت و … می باشد .

 

چگونگی نوشته شدن کدهای CSS :

کدهای CSS در قسمت head فایل html باید نوشته شوند ( یعنی بین دو تگ <head> و <head/> ) . شروع کدهای CSS را با تگ <“style type=”text/css> و پایان کدهای CSS را با تگ <style/> اعلام کرده ایم . سپس ابتدا باید مشخص کنیم که می خواهیم مشخصه ها را به کدام بخش سایت اعمال کنیم . اگر بخواهیم مشخصه ای را به محتویات یک تگ div اعمال کنیم باید ابتدا علامت # را نوشته و بعد از این علامت ، نام id مربوط به آن تگ div را بنویسیم . سپس یک علامت ((})) را نوشته و پس از آن مشخصه های مورد نظرمان را می نویسیم . چنانچه قصد نوشتن چند مشخصه را داشته باشیم باید آنها را با علامت ((;)) از یکدیگر جدا کنیم . پس از نوشتن تمامی مشخصه های مورد نظرمان ، علامت (({)) را به کار می بریم تا اعلام کنیم که مشخصه های آن تگ div پایان یافته است . برای سایر تگ ها نیز باید همین شیوه را اجرا کنیم و کدهای آنها را پشت سرهم بنویسیم .

همان طور که می بینید برای تعیین مشخصه های تگ های div ، ترتیب فراخوانی تگ های div دقیقا مثل ترتیب نوشته شدن کدهای آنها در بخش body فایل html می باشد .

 

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

 

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

نحوه چیدمان بخش های مختلف سایت باید به این شکل باشد که ابتدا header نمایش داده شود و سپس دو ستون اصلی سایت و بخش content باید در پایین قسمت header نمایش داده شوند . ما برای کنار هم قرار دادن دو ستون اصلی و بخش content از مشخصه float استفاده کرده ایم که باعث می شود تگ های div شناور شوند و موقعیت خود را بر اساس تگ div کنار خود ، تنظیم کنند . در کدهای CSS مشاهده می کنید که برای هر سه تگ div با id های sidebar1 ، sidebar2 و content ، مشخصه float به کار رفته است به این صورت که چون ابتدا کدهای sidebar1 در بخش body نوشته شده است پس ابتدا مشخصه float آن را به صورت left ( سمت چپ ) تعیین کرده ایم تا در سمت چپ صفحه قرار بگیرد ، سپس بخش content را داریم که مشخصه float آن را نیز برابر left تعیین کرده ایم تا به sidebar1 که در سمت چپ آن است بچسبد . سپس برای sidebar2 نیز مشخصه float را برابر left تعیین کرده ایم تا در کنار بخش content که در سمت چپ آن است بچسبد .

 

نکته : برای آنکه دو ستون اصلی و بخش content به درستی در کنار هم قرار بگیرند باید مجموع عرض هر سه بخش برابر عرض کل صفحه باشد وگرنه ممکن است sidebar2 در زیر sidebar1 و content قرار بگیرد . برای فهمیدن عرض هر بخش ابتدا باید در کدهای CSS نگاه کنید و ببینید عرض آن بخش چقدر تعریف شده است و علاوه بر این باید ببینید که این بخش ها دارای مشخصه padding-left یا padding-right هستند یا نه . زیرا باید میزان این مشخصه ها را به عرض تعریف شده اضافه کنید . به عنوان مثال در کدهای بالا عرض های تعریف شده به صورت درصد می باشند و زمانی که کل درصدها را برای sidebar1 ، content و sidebar2 جمع بزنید ، برابر 100 درصد خواهد شد .

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

جلسه سیزدهم 

تغییر رنگ پس زمینه سایت


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

<html>
<head>
</head>
 
<body>
 
<p>
this is a paragraph .
</p>
 
</body>
</html>

نتیجه :

مشاهده می کنید که رنگ پس زمینه همان رنگ پس زمینه پیش فرض ، یعنی رنگ سفید ، می باشد .

مشخصه bgcolor برای تگ body :

برای آنکه رنگ پس زمینه دیگری غیر از رنگ سفید انتخاب کنیم ( مثلا سبز ) می توانیم از مشخصه bgcolor برای تگ body استفاده کنیم . به مثال زیر توجه کنید :

<html>
<head>
</head>
 
<body bgcolor="green">
 
<p>
this is a paragraph .
</p>
 
</body>
</html>

نتیجه :

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

 

برای تعیین رنگ در html ، چندین روش وجود دارد که این روش ها را در مبحث بعدی شرح خواهیم داد 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

جلسه چهاردهم

 تعیین رنگ در html

 

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

روش اول : تعیین رنگ به صورت Name

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

<html>
<head>
</head>
 
<body bgcolor="yellow">
 
<p>
this is a paragraph .
</p>
 
</body>
</html>

نتیجه :

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

 

روش دوم : تعیین رنگ به صورت HEX

در این روش به هر رنگ یک کد شامل 6 کاراکتر اختصاص یافته است . این کاراکترها می توانند اعداد 0 تا 9 و یا حروف A تا F باشند . قبل از نوشتن 6 کاراکتر ، باید علامت ((#)) را بنویسیم . به مثال زیر توجه کنید :

<html>
<head>
</head>
 
<body bgcolor="#FF0000">
 
<p>
this is a paragraph .
</p>
 
</body>
</html>

نتیجه :

مشاهده می کنید که رنگ پس زمینه برابر با رنگ متناظر با کد FF0000 ، که کد مربوط به رنگ قرمز می باشد ، نمایش داده شده است .

 

روش سوم : تعیین رنگ به صورت rgb

در این روش هر رنگ با سه عدد مشخص می شود که هر عدد می تواند از 0 تا 255 باشد . به مثال زیر توجه کنید :

<html>
<head>
</head>
 
<body bgcolor="rgb(255,0,255)">
 
<p>
this is a paragraph .
</p>
 
</body>
</html>

نتیجه :

مشاهده می کنید که رنگ پس زمینه برابر با رنگ متناظر با کد (255,0,255)rgb نمایش داده شده است .

 

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر

جلسه پانزدهم

ساخت لینک در html

 

یکی از بهترین قابلیت های html ، امکان ساخت لینک می باشد تا کاربران به راحتی از یک صفحه html به صفحه ای دیگر بروند . تگ مورد استفاده برای ساخت لینک در html ، تگ <a> می باشد . به مثال زیر توجه کنید :

<html>
<head>
</head>

<body>

<a href="http://www.karenit.ir">karenit</a>

</body>
</html>

نتیجه :

karenit

مشاهده می کنید که عبارت karenit به صورت یک لینک نمایش داده شده است . مشخصه href در تگ <a> ، آدرس لینک را مشخص کرده است که برابر http://www.karenit.ir قرار داده شده است بنابراین چنانچه بر روی این لینک کلیک کنید صفحه اینترنتی مربوط به آدرس ذکر شده نمایش داده می شود .

مشخصه target برای تعیین نحوه باز شدن لینک در مرورگر :

با استفاده از مشخصه target در تگ <a> می توانیم مشخص کنیم که لینک در همین پنجره فعلی باز شود و یا اینکه در پنجره جدیدی باز شود . به مثال زیر توجه کنید :

<html>
<head>
</head>

<body>

<a href="http://www.karenit.ir" target="_blank">karenit</a>

</body>
</html>

نتیجه :

karenit

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

به اشتراک گذاری این ارسال


لینک به ارسال
به اشتراک گذاری در سایت های دیگر
مهمان
این موضوع برای عدم ارسال قفل گردیده است.

×
×
  • اضافه کردن...