یه وب سایت کوچیک توی کامپیوتر خودمون بسازیم
پنجشنبه, ۵ ارديبهشت ۱۳۹۲، ۱۱:۴۵ ق.ظ
سلام
اول از همه ولادت حضرت فاطمه سلام الله علیها رو تبریک میگم به همه.
انشاءالله با توجه بیشتر به زندگی حضرت زهرا و سخنان ارزشمندشون ، روز به روز بیشتر به سمت زندگی صحیح و اخلاق پیش بریم.
توی این پست میخوایم یه سایت کوچیک و ساده بسازیم و با نحوه اجرای فایل ها و ارتباط اون ها با هم آشنا بشیم.
( html , css رو کار میکنیم)
البته برای یادگیری باید از سایت های مختلف استفاده کنید.(همونطور که قبلا گفتم اینجا ما سعی میکنیم بیشتر راهنمایی کنیم.)
پس ادامه مطلب رو ببینید.
وقتی سایت کاملا بالا امد ، صفحه رو توی دسکتاپتون save کنید.
وقتی کاملا save شد ، توی دسکتاپتون یه فایل html و یک فولدر ذخیره شده.
حالا صفحه html ای که توی دسکتاپ ذخیره کردید، رو باز کنید.(همون طور که میدونید بدون اینترنت هم میتونید اونو باز کنید)
بله فایل Html هر جایی که ذخیره بشه اجرا میشه . اما فایل php اینطوری نیس باید حتما یه جای بخصوصی باشه.
حالا میخوایم یه خورده با کدهای html فایلی که ذخیره کردیم بازی کنیم و کم و زیادش کنیم ببینیم چه اتفاقی میفته.
درضمن اون فولدری که همراه فایل html ذخیره شد، شامل یک سری عکس و فایل های css و js مربوطه است.
دوباره به دسکتاپتون برید و این بار فایل html رو با notepad باز کنید تا کدهاشو ببینید.
فعلا با کدهایی که بین تگ های <head> هستن کاری نداشته باشید.
ولی کدهای داخل تگ body رو کم و زیاد کنید(مطالبی که راجع به html یاد گرفتید رو تست کنید اینجا) و نتیجشو با قبل مقایسه کنید.
اگر هم میخواید تمرین css کنید ، بهترین کار اینه که اگه از firefox استفاده میکنید، پلاگین firebug رو براش نصب کنید(از اینجا متونید دانلود کنید) و با اون کار کنید.
اگه firebug رو نصب کردید و یا با گوگل کروم کار میکنید، روی هر جایی از صفحه وبتون که میخواید خصوصیتشو عوض کنید، راست کلیک کنید و آخرین گزینه یعنی inspect element رو بزنید . این کار باعث میشه یه پنجره پایین صفحتون باز بشه که کدهای css رو سمت راست و کدهای html رو سمت چپ نشون میده و میتونید همونجا اونهارو دستکاری کنید و تغییراتشو آنی ببینید.
اما این تغییرات ذخیره نمیشن. یعنی اگه صفحه رو رفرش کنید، همش میپره!
باید اون فایل css ای که این ویژگی ها توش تعریف شده رو از توی همون فولدره که ذخیره شده بود توی دسکتاپ، پیدا کنید و تغییراتو توش اعمال کنید و save کنید.
و اما نحوه اجرای فایل php و کار با چند فایل و یک مثال کوچولو :
اگر نرم افزار xampp رو نصب کردید، به محل نصب اون برید و پوشه ی htdocs رو باز کنید.ت
هر فایل php که بخواید اجرا کنید ، باید توی این پوشه و یا پوشه های داخلی اون باشه.
درضمن باید از طریق xampp ، آپاچی (Apache) رو فعال کنید.
و اما بریم سراغ مثال :
- داخلی پوشه xampp/htdocd ، یه پوشه به اسم test بسازید.
یه فایل text باز کنید و کدهای زیر رو توش کپی کنید و اسم فایلتون رو بذارید index و پسوند فایل رو به .html تغییر بدید.
این کدها یه سری تگ ساده html هست که توی سایت html.ir توضیحشون داده.
تگ div بیشتر برای جداکردن و بسته بندی به درد میخوره (زیاد بهشون گیر ندید)
اول از همه ولادت حضرت فاطمه سلام الله علیها رو تبریک میگم به همه.
انشاءالله با توجه بیشتر به زندگی حضرت زهرا و سخنان ارزشمندشون ، روز به روز بیشتر به سمت زندگی صحیح و اخلاق پیش بریم.
توی این پست میخوایم یه سایت کوچیک و ساده بسازیم و با نحوه اجرای فایل ها و ارتباط اون ها با هم آشنا بشیم.
( html , css رو کار میکنیم)
البته برای یادگیری باید از سایت های مختلف استفاده کنید.(همونطور که قبلا گفتم اینجا ما سعی میکنیم بیشتر راهنمایی کنیم.)
پس ادامه مطلب رو ببینید.
اول میریم سراغ html :
یه وب سایتی رو باز کنید.(مثلا برید به این آدرس : http://ommeabiha.ir/?page_id=132s )وقتی سایت کاملا بالا امد ، صفحه رو توی دسکتاپتون save کنید.
وقتی کاملا save شد ، توی دسکتاپتون یه فایل html و یک فولدر ذخیره شده.
حالا صفحه html ای که توی دسکتاپ ذخیره کردید، رو باز کنید.(همون طور که میدونید بدون اینترنت هم میتونید اونو باز کنید)
بله فایل Html هر جایی که ذخیره بشه اجرا میشه . اما فایل php اینطوری نیس باید حتما یه جای بخصوصی باشه.
حالا میخوایم یه خورده با کدهای html فایلی که ذخیره کردیم بازی کنیم و کم و زیادش کنیم ببینیم چه اتفاقی میفته.
درضمن اون فولدری که همراه فایل html ذخیره شد، شامل یک سری عکس و فایل های css و js مربوطه است.
دوباره به دسکتاپتون برید و این بار فایل html رو با notepad باز کنید تا کدهاشو ببینید.
فعلا با کدهایی که بین تگ های <head> هستن کاری نداشته باشید.
ولی کدهای داخل تگ body رو کم و زیاد کنید(مطالبی که راجع به html یاد گرفتید رو تست کنید اینجا) و نتیجشو با قبل مقایسه کنید.
اگر هم میخواید تمرین css کنید ، بهترین کار اینه که اگه از firefox استفاده میکنید، پلاگین firebug رو براش نصب کنید(از اینجا متونید دانلود کنید) و با اون کار کنید.
اگه firebug رو نصب کردید و یا با گوگل کروم کار میکنید، روی هر جایی از صفحه وبتون که میخواید خصوصیتشو عوض کنید، راست کلیک کنید و آخرین گزینه یعنی inspect element رو بزنید . این کار باعث میشه یه پنجره پایین صفحتون باز بشه که کدهای css رو سمت راست و کدهای html رو سمت چپ نشون میده و میتونید همونجا اونهارو دستکاری کنید و تغییراتشو آنی ببینید.
اما این تغییرات ذخیره نمیشن. یعنی اگه صفحه رو رفرش کنید، همش میپره!
باید اون فایل css ای که این ویژگی ها توش تعریف شده رو از توی همون فولدره که ذخیره شده بود توی دسکتاپ، پیدا کنید و تغییراتو توش اعمال کنید و save کنید.
و اما نحوه اجرای فایل php و کار با چند فایل و یک مثال کوچولو :
اگر نرم افزار xampp رو نصب کردید، به محل نصب اون برید و پوشه ی htdocs رو باز کنید.ت
هر فایل php که بخواید اجرا کنید ، باید توی این پوشه و یا پوشه های داخلی اون باشه.
درضمن باید از طریق xampp ، آپاچی (Apache) رو فعال کنید.
و اما بریم سراغ مثال :
- داخلی پوشه xampp/htdocd ، یه پوشه به اسم test بسازید.
یه فایل text باز کنید و کدهای زیر رو توش کپی کنید و اسم فایلتون رو بذارید index و پسوند فایل رو به .html تغییر بدید.
این کدها یه سری تگ ساده html هست که توی سایت html.ir توضیحشون داده.
تگ div بیشتر برای جداکردن و بسته بندی به درد میخوره (زیاد بهشون گیر ندید)
__________________________________________________index.html__________________________________________
<!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" dir="rtl" xml:lang="fa_IR" lang="fa_IR">
<head>
<title>test website</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="style.css" type="text/css" >
</head>
<body>
<div class="body-container">
<!-- header ---------------------------------------->
<div class="header-container">
<div class="header">
<h1>test website</h1>
<a href="/test" class="header-image" ></a>
</div>
<!-- nav ---------------------------------------->
<div class="nav">
<ul >
<li ><a href="#"><img src="image/home.png" /></a></li>
<li ><a href="#nav1">nav1</a></li>
<li ><a href="">nav2</a></li>
<li ><a href">nav3</a></li>
</ul>
</div>
</div>
<!-- main ---------------------------------------->
<div class="main">
<div class="main-right">
<div id="nav1">
<p class="first-p">
besmellaherrahmanerrahim
</br>
salam be shoma.
</br>
f
</br>
o
</br>
r
</p>
</div>
</div>
<div class="main-left">
<img src="image/test.png" />
</div>
</div>
<div class="footer">
footer
</div>
</div>
</body>
</html>
____________________________________________________________________________________________________
<!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" dir="rtl" xml:lang="fa_IR" lang="fa_IR">
<head>
<title>test website</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="style.css" type="text/css" >
</head>
<body>
<div class="body-container">
<!-- header ---------------------------------------->
<div class="header-container">
<div class="header">
<h1>test website</h1>
<a href="/test" class="header-image" ></a>
</div>
<!-- nav ---------------------------------------->
<div class="nav">
<ul >
<li ><a href="#"><img src="image/home.png" /></a></li>
<li ><a href="#nav1">nav1</a></li>
<li ><a href="">nav2</a></li>
<li ><a href">nav3</a></li>
</ul>
</div>
</div>
<!-- main ---------------------------------------->
<div class="main">
<div class="main-right">
<div id="nav1">
<p class="first-p">
besmellaherrahmanerrahim
</br>
salam be shoma.
</br>
f
</br>
o
</br>
r
</p>
</div>
</div>
<div class="main-left">
<img src="image/test.png" />
</div>
</div>
<div class="footer">
footer
</div>
</div>
</body>
</html>
____________________________________________________________________________________________________
و کدهای زیر رو هم توی یه فایل text دیگه بریزید به اسم style و پسوندشو بذارید .css
_______________________________________________style.css________________________________________________
_______________________________________________style.css________________________________________________
body{background-color:#cccccc;}
div.header-container{width:959px;height:100px;background-color:#eeeeee; border:2px solid #775767;margin:auto;}
.header{text-align:center;}
ul{list-style:none outside none;}
div.nav ul li{float:right; margin-right:25px; }
.main{width:959px;height:600px;background-color:#eeeeee; border:2px solid #775767;margin:auto;margin-top:10px;}
.main-right{float:right; width:600px;height:600px; border:1px solid;}
.main-left{float:left; width:350px;height:600px; border:1px solid;}
.footer{width:959px;height:100px;background-color:#eeeeee; border:2px solid #775767;margin:auto;}
_____________________________________________________________________________________________________
div.header-container{width:959px;height:100px;background-color:#eeeeee; border:2px solid #775767;margin:auto;}
.header{text-align:center;}
ul{list-style:none outside none;}
div.nav ul li{float:right; margin-right:25px; }
.main{width:959px;height:600px;background-color:#eeeeee; border:2px solid #775767;margin:auto;margin-top:10px;}
.main-right{float:right; width:600px;height:600px; border:1px solid;}
.main-left{float:left; width:350px;height:600px; border:1px solid;}
.footer{width:959px;height:100px;background-color:#eeeeee; border:2px solid #775767;margin:auto;}
_____________________________________________________________________________________________________
یه فولدر دیگه هم کنار همین فایلها بسازید و اسمشو بذارید image و توی اون دو تا عکس با این اسم ها بذارید : home.png و test.png
البته تمام این کدها رو میتونید از اینجا دانلود کنید .
اگه سوالی بود درخدمتم.
البته تمام این کدها رو میتونید از اینجا دانلود کنید .
اگه سوالی بود درخدمتم.
چرا پس دیگه پست نمیذاری؟!