نمی دونم این تاپیک پرسش و پاسخ هم هست یا فقط آموزش دوستی که موضوع را شروع کردند باید این رو تعیین کنید !نقل قول:
نه HTML CSS کافی نیست برای ساخت یک سایت داینامیک باید یک زبان مثل PHP یا ASP , Perl , Python یا امثال این ها رو بلد باشید.
موفق باشید.
Printable View
نمی دونم این تاپیک پرسش و پاسخ هم هست یا فقط آموزش دوستی که موضوع را شروع کردند باید این رو تعیین کنید !نقل قول:
نه HTML CSS کافی نیست برای ساخت یک سایت داینامیک باید یک زبان مثل PHP یا ASP , Perl , Python یا امثال این ها رو بلد باشید.
موفق باشید.
دوستان این تاپیک برای آموزش هست. اگر سوالی دارید لطفا تاپیک جدا بزنید برای خودتون.
سلام دوستان
اول 1 عذر خواهی میکنم که دیر شد
حالا قسمت دوم رو آماده کردم براتون
فصل 2
Html
در فصل قبل با کلیات وبسایت و اجرای آن آشنا شدیم .
در این فصل قصد داریو با زبان اچ تی ام ال آشنایی پیدا کنیم زیرا در سایت وردپرسی می تواند خیلی کمک کند.
این زبان قواعد خیلی خیلی ساده ای دارند که برای یاد گرفتن آن فقط کمی تمرین لازم است .
همانطور که گفتیم این زبان پایه و اساس وبسایت است و در هر وبسایتی از این زبان استفاده شده
در این زبان باید از تگ ها استفاده کنیم
تگ چیه ؟
تگ در لغت به معنای برچسب هست
در اچ تی ام ال تگ ها بین <> قرار میگیرند مثل :
<body>
<hr>
<p>
در این زبان همه دستورات در فالب تگ ها نوشته میشوند
بعضی از تگ ها تکی هستند و خیلی ها 2تایی
یعنی چی ؟
بعضی از تگ ها فقط 1 بار نوشته میشوند و دستور خاصی رو اجرا میکنند مثل :
<br>
این تگ برای رفتن به خط بعد یا همون کاری که کلید اینتر در ویرایشگر های متن انجام میده رو انجام میده!
چون در این زبان شما هر چه فاصله بگذارید بین جمله ها و یا به خط بعد بروید تاثیر ندارد و باید تگ مربوط رو برای این کار بنویسید
مثلا اگر کد به شکل زیر باشد
Hi im dani and im glad to learn you lets learning!
I hope to be good
خروجی اینطوری میشه
Hi im dani and im glad to learn you lets learning!I hope to be good
اما اگر بخواهیم مثل همون کد اول که نوشتیم به نمایش در بیاد باید اینطوری بنویسیم
Hi im dani and im glad to learn you lets learning!
<br>
I hope to be good
بعضی از تگ ها هم 2 تایی اند همونطور که گفتیم
یعنی از 1 جا شروع میشوند و در 1 جا پایان می یابند
هر نوشته ای که بین آغاز و پایان این تگ ها باشد از اونا تاثیر میگیره
چطور؟
مثلا :
<h2> this is a heading </h2>
حالا جمله بالا تحت تاثیر تگ
میباشد!<h2>
تگ های 2تایی به این صورت اند همه
<tag>matne beine tag ke az oon tasir migire </tag>
میبینید که سخت نیست زیاد
حالا در این فصل ما قصد داریم با چند تگ کاربردی آشنا بشویم که برای کار با وردپرس با قدرت بیشتری وارد عمل شویم .
شروع نوشتن اچ تی ام ال و کاربرد تگ های مهم
برای نوشتن کد های اچ تی ام ال ابتدا 1 فایل متنی در ویندوز بسازید و اسم اون رو بزارید
Index.html
خب قالب کلی دستورات html به شکل زیر هست
----------------------------------------------------------------------------------------------------
<html>
تمام دستورات این زبان باید در بین تگ html نوشته شوند
<head>
تگ head حاوی اطلاعات اصلی که همچنین meta-information نیز نامیده می شود در یک پرونده است.
عناصر داخل عنصر head نباید توسط مرورگر نشان داده شوند
<style>
در این تگ شکل و شمایل سایت رو با استفاده از دستورات css تعریف میکنیم
</style>
</head>
<body>
بخش اصلی دستورات html در این تگ نوشته میشود که بدنهی اصلی سایت را تشکیل میدهد و در واقع دستورات آن محتویات قابل مشاهده در مرور گر را بوجود می آورند
</body>
</html>
----------------------------------------------------------------------------------------------------------------
فرض کنیم میخواهیم جمله زیر در مرور گر به نمایش در بیاد
Hi Im dani
And its nice to meet you!
باید دستورات زیر را در فایل index.html بنویسیم
<html>خب از آن جا که قصد من فقط معرفی شما با html است و میخواهم در حدی که با وردپرس به مشکل نخوریم به شما یاد بدهم سعی میکنم بیشتر دستورات کاربردی این زبان در وردپرس را به شما آموزش دهم!
<head>
<style>
</style>
</head>
<body>
Hi Im dani
<br>
And its nice to meet you!
</body>
</html>
خب برای ورد پرس شما فقط به دستورات تگ <body> نیاز دارید و بقیه رو خود وردپرس انجام میده
پس از حالا به بعد هر تگی که معرفی میکنیم در body به کار میره و داخل ویرایشگر وردپرس قابل استفادس
تگ <img>
این تگ از نوع تکی هست و برای قرار دادن عکس بکار میرود
قالب کلی این تگ به شکل زیر است<img src=”adresse akse morede nazar” height=”ertefae aks” width”arze aks” align=”makane aks”>ارتفاع و عرض بر حسب px نوشته میشوند
برای آدرس عکس سعی کنید اون رو به این شکل بنویسید
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] aks
align هم مکان عکس داخل صفحه هست و میتونه مقدار های زیر رو داشته باشه
Center )وسط(
Left )چپ(
Right )راست(
یکی دیگه هم بود یادم رفته :دی
توجه کنید اگر برای عکس عرض و ارتفاع تعریف نکنید به اندازه واقعی خود نمایش داده میشود
مثال<img src=” [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] “ height = “100px” width=”200px” align=”left”>
سر تیتر ها
سر تیترها با برچسب های <h1>تا<h6>معرفی می شوند.<h1>بیانگر بزرگترین سرتیتر و<h6> بیانگر کوچکترین سر تیتر است. HTML بطور خودکار فضای خالی اضافی به قبل و بعد از سر تیترها اضافه می کند.
<h1> This is a heading </h1>
<h2> This is a heading </h2>
<h3> This is a heading </h3>
<h4> This is a heading </h4>
<h5> This is a heading </h5>
<h6> This is a heading </h6>
پاراگراف ها
پاراگراف ها با برچسب <p> معرفی می شوند.HTML بطور خودکار فضای خالی اضافی به قبل و بعد از یک پاراگراف اضافه می کند.
<p> This is a paragraph </p>پرش به خط بعد
<p> This is another paragraph </p>
برچسب <br> هنگامی استفاده می شود که بخواهیم یک خط را پایان دهیم اما نمی خواهیم یک پاراگراف جدید را آغاز کنیم.برچسب <br> شما را از هر جا که قرار دارید به یک خط پایین تر می برد. برچسب <br> یک برچسب تکی است و هیچ برچسب پایانی ندارد
توضیحات در HTML
برچسب توضیحات برای وارد کردن توضیحات در منبع کد HTML استفاده می شود.توضیحات توسط مرورگرها نادیده گرفته می شوند. شما می توانید از توضیحات برای تشریح کد های خود استفاده کنید که می تواند به شما هنگامی که در آینده کد منبع خود را ویرایش می کنید کمک کند.
<!--This is a comment-->
توجه کنید که شما بعد از باز کردن براکت به علامت تعجب نیاز دارید اما قبل از بستن نیاز ندارید
برچسب Anchor و موجودیت Href
HTML از برچسب <a> برای ساخت یک پیوند به پرونده های دیگر استفاده می کند. یک anchor می تواند به هر منبعی در وب اشاره کند.یک صفحه HTML ، یک عکس ، یک فایل صوتی ، یک فیلم و ... .
دستورالعمل ساخت یک Anchor
<a href="url"> متنی که نمایش داده می شود </a>
مثال خروجی
خب تا همین جا یادگیری html برای بکارگیری در ورد پرس نسبتا کفایت میکنه
دوستانی که میخواهند بهتر و کامل این زبان را بیاموزند میتونند به سایت html.ir مراجعه کنند که مرجع خیلی خوبیه