W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
Completely free website hosting with PHP, MySQL and no ads on your site!
www.infinityfree.com
، چند سال است از این هاست استفاده می کنم و نیازهای من را برطرف کرده.
یک تاپیک هم من دارم برای مقایسه هاست های مجانی ، که اونجا هم اطلاعاتی هست.
ولی برای شروع می توانید در همین هاست مجانی ثبت نام کنید و کدهای خود را اونجا اپلود کنید.
البته کدهای html زیاد نیاز به هاست ندارد ، کدها را در یک ادیتور با مسوند html ذخیره کنید و با بروسر خود باز کنید.
چون تگ های html را بروسر تبدیل به صفحه شما می کند و نیازی به اجرا در سرور و هاست ندارد.
در گوگل استور html editor را سرچ کنید یا در سایتهای ایرانی ادیتور را جستجو کنید.
من در این تاپیک دنبال آموزش کامل html نیستم ، نرم افزارهایی د. گوگل استور هست که کلی تگ درش توضیح داده شده، سایتهایی مثل w3school هم هست ، سایت ایرانی این سایت هم فکر کنم ایجاد شده.
وظیفه یادگیری تگهای بعدی html به عهده خودتان است.
اینجا اساس html معرفی میشه. و تمریناتی با بعضی از اونها خواهیم داشت.
The W3Schools online code editor allows you to edit code and view the result in your browser
www.w3schools.com
HTML:
<!DOCTYPE html>
<html>
<style>
table, th, td {
border:1px solid black;
}
</style>
<body>
<h2>A basic HTML table</h2>
<table style="width:100%">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr>
<td>Centro comercial Moctezuma</td>
<td>Francisco Chang</td>
<td>Mexico</td>
</tr>
</table>
<p>To understand the example better, we have added borders to the table.</p>
</body>
</html>
اولا یک table باز و یک table بسته داریم
و بعدش ردیف را داریم که همون tr است
هر ردیف یک یا چند ستون می تواند داشته باشد که با td ساخته میشه.
فکر نکنید تیبل فقط برای جداول آماری و فاکتور اجناس است ،
بعدا که بخواهید سای خود را بسازید می بینید برای کنترل مکان نشستن عناصر سایت خود گاه مجبور به استفاده از تیبل می شوید.
اون th مشابه td عمل می کنه ، فقط فرقش اینه عنوان ستون را با اون می نویسند.
فکر نکنید تیبل فقط برای نوشتن کلمات استفاده میشه ،
مثلا می توانید در هر سلول یک عکس قرار دهید و با جاوا اسکریپت احتمالا میشه اون عکسها را تغییر داد
و مثلا باهاش یک بازی درست کرد.
به نظر من html چیزی نیست که نیاز به آموزش داشته باشه ، بلکه یک آموزش را باید مرور کنی ببینی هر تگ چکار می کنه و بعد ببینی به کدوم تگ نیاز داری و با کمی تمرین و مهارت در استفاده ازش ، از اون در سایتت استفاده کنی.
حتی php هم همینه ، یعنی ببینی هر کد در php چه کاری انجام میده ، با کمی تمرین باهاش می تونی در سایتت ازش استفاده کنی.
می تونی اون کد را در سایتهای فارسی سرچ کنی(با افزودن کلمات یا حروف فارسی کنارش) و ببینی مردم در موردش چی گفتند ، بعد سریع می فهمی کاربردش چیه.
خوب ، حالا که بحث به اینجا رسید با تگ div کار می کنیم .
div یک تگ است که مثل خیلی تگهای html نوع باز و نوع بسته دارد.
اکثر تگ های html باز و بسته دارند ، فقط چند تا هستند که منفرد هستند.
HTML:
<div>
</div>
در کد بالا یک div ساختیم ، می توانیم درونش مطالبی بنویسیم. یا عکس در اون قسمت باشه ، و خیلی چیزهای دیگر.
حالا می توانیم یک id بهش نسبت بدهیم.
HTML:
<div id="name">
</dive>
اما ، id چیه ؟ مثل کد ملی می مونه ، میشه مثل اسم ازش استفاده کرد ، البته یک چیز در html می تونه هم اسم داشته باشه و هم id ، همان طور که شما هم اسم دارید و هم کد ملی و به هر دو روش میشه شما را صدا زد.
محل قرارگیری css سه جاست:
یکی در یک فایل خارجی با پسوند css ، که باید در فایل html خود در قسمت head نام و محل قرارگیری اون فایل را بگیم.
من از این نوع مدتهاست استفاده نمی کنم ولی اکثر سایتها از این نوع استفاده می کنند.
اگر سایت شما نهایی باشه خوب این حالت شاید بهترین گزینه باشه ، چون صفحه html شما شلوغ نمیشه.
ولی چدا من ازش استفاده نمی کنم؟ چون این فایل کچ میشه cache و وقتی تعییرش می دهی تغییرات اعمال نمیشه ، چون از اون فایل کچ شده میره می خونه نه فایل جدید ، پس یا باید کچ را مرتب پاک کنید یا اسم فایل css را عوض کنید تا نرود از فایل کچ شده قدیمی بخواند.
بنابراین من گاهی از نوع css بالای صفحه و داخل head استفاده می کنم
گاهی هم از نوع inline ، یعنی صفات css را جلوی همون عنصر html بنویسیم.
حالا از هر دو نوع بعدا استفاده می کنیم و شما متوجه می شوید هر کدوم چطوری استفاده می شد.
The W3Schools online code editor allows you to edit code and view the result in your browser
www.w3schools.com
HTML:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1>My First CSS Example</h1>
<p>This is a paragraph.</p>
</body>
</html>
تگهای style باز و بسته محلی ایجاد می کند داخل head که بتوانیم اونجا در سرصفحه css خودمان را بنویسیم،
پس این نوع دوم محل قرار گیری css یعنی در head است.
اینجا ما اومدیم بعضی عناصر html را تعیین css کردیم مثلا h1 و p را.
قبلش باید می گفتیم h1 و p چیست؟ h1 عنوان است و p پاراگراف است.پاراگراف یک متن کوتاه و بلند در مورد یک موضوع است.
برای body هم css تعیین شده. که در اینجا رنگ پشت صفحه بدنه سایت تعیین شده.
می بینید که با تعیین این ۳ ، یک سایت دارای شخصیت ایجاد شده.
در ذهن شما می مونه به این شکل که اون سایتی که پشتش این رنگی بود و عنوانش بزرگ و سفید بود.
ولی اگر رنگ و سایزی در کار نبود ، یک نوشته های بی جان بود فقط.
در کد پست قبل اومده مستقیم به p و h1 مقادیر css نسبت داده
ولی من فعلا جور دیگر مد نظرم است
و اون اینه که یک اسمی می دهیم و زیر اون اسم مقادیر css را می نویسیم. این جوری
کد:
#esm
{
}
و بعدش یک div در بادی می سازیم و id اون را همین اسم قرار می دهیم ، این طوری:
HTML:
<div id="esm">
</div>
این جوری می توانیم انواع مدلهای css در هد تعریف کنیم و هر قسمت سایت را به اون حالت که می خواهیم دربیاوریم.
www.infinityfree.com
www.w3schools.com
