بسم الله الرحمن الرحیم

انجمن های تخصصی کدباکس

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

امروز شنبه 21 آپريل 18, 11:00 pm



مبحث جدیدپاسخ

 [ 5 پست ] 
نويسنده پيغام
پستارسال شده در: سه شنبه 16 ژوئن 15, 7:58 am 
نماد کاربر

پست ها : 370
محل سکونت: فارس
سپاسگذاری کرده: 40 بار
سپاس دریافتی: 576 بار
در این تاپیک که مقدمه آموزش html هست قصد دارم ساختار کلی html رو بیان کنم
کلیات:
کل مستند توسط تگ <html> و </html> احاطه می شود
هر سند به دو قسمت سر و بدنه یعنی head و body تقسیم بندی میشود. همانطور که میدانید از دو تگ باز و بسته استفاده میشود.
بخش head اطلاعات کنترلی که توسط مرورگرها و سرورها مورداستفاده قرار می گيرند را دربر می گيرد. اين اطلاعات در مرورگر نمايش داده نمی شوند.
کليه صفحات وب دارای يک عنوان (title) هستند که در بالای پنجره مرورگر نمايش داده می شود. عنوان توسط موتورهای جستجو هم مورد استفاده قرار می گيرد
بجز بخش عنوان که اجباری است تگ های ديگر در قسمت head ممکن هرگز توسط افراد عادی استفاده نشود.
قسمت بدنه مستند شامل محتوای صفحه وب مانند متن، لينکها، تصاوير و غيره است که قابل رويت در مرورگر وب است.
يک صفحه وب را مشابه هر فايل متنی ديگر می توان در يک اديتور متنی ساده مانند Notepad توليد کرد ولی حتما بايد با پسوند htm يا html ذخيره شود.
تگ ها:
بخش head از 6 تگ h1 الی h6 تشکیل شده است. و در یک سند Html به صورت زیر کاربرد دارد

کد:
<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

پاراگراف ها:
پاراگراف ها در Html به صورت زیر کاربرد دارند



کد:
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>


لینک ها :
لینک ها در html با تگ <a> نمایش داده میشوند, به صورت زیر

کد:
 <a href="codebox.ir">This is a link</a>
آدرس در ویژگی href نوشته میشود.
عکس ها در html :
عکس ها با تگ <img> نمایش داده میشوند
منبع فایل در src و متن جایگزین در alt و پهنا و درازای عکس با width و height هستند.
کد:
<img src="adresse aks" alt="matne jaygozin" width="104" height="142">


پستارسال شده در: سه شنبه 16 ژوئن 15, 9:15 am 
نماد کاربر

پست ها : 370
محل سکونت: فارس
سپاسگذاری کرده: 40 بار
سپاس دریافتی: 576 بار
خواص در html
خواص در اچ تی ام ال توضیحات اضافی عناصر را بیان میکنند
خواص همیشه در شروع تگ نوشته میشوند. در اینجا هرجا نوشته شده attributes یعنی همون خواص.
خواص دارای مقدار و اندازه هستند
کد:
name="value"
توضیح اضافی زبان :

این خاصیت میتواند در تگ <html> ظاهر شود. این خاصیت با attribute (خاصیت ) lang ظاهر میشود و برای مرورگر ها و موتور های جستجو مهم است.

کد:
<!DOCTYPE html>
<html lang="en-US">
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>

در مثال بالا en-US یک اندازه است که توضیحی درباره زبان است که در جلوی نام lang ظاهر شده است.

دو کرکتر اول یعنی en زبان است و US که دو کرکتر بعدی است لهجه !

خاصیت عنوان:

همانطور که گفته شد پاراگراف با <p> نمایش داده شده و در مثال زیر پاراگراف حاوی خاصیت معرفی عنوان است. در اینجا مقدار خاصیت کدباکس ذکر شده است.

کد:
<p title="Codebox">
codebox forum is a web developer's site.
It provides tutorials and references covering
many aspects of web programming,
including HTML, CSS, JavaScript, XML, SQL, PHP, ASP, etc.
</p>

خاصیت آدرس در عنصر لینک

لینک ها با <a> نمایش داده میشوند و آدرس لینک به جای مقدار در خاصیت href ظاهر میشود

<a href="http://codebox.ir">کدباکس</a>

در مثال بالا href نام خاصیت و http://codebox.ir مقدار خاصیت در عنصر لینک هستند و کدباکس هم خود عنصر

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



پستارسال شده در: سه شنبه 16 ژوئن 15, 10:54 am 
نماد کاربر

پست ها : 370
محل سکونت: فارس
سپاسگذاری کرده: 40 بار
سپاس دریافتی: 576 بار
خاصیت اندازه در عنصر عکس
عکس ها در اچ تی ام ال با تگ <img> ظاهر میشوند.
خاصیت src منبع عکس و سایز عکس با width و height هستند.
کد:
<img src="codebox.jpg" width="104" height="142">

خاصیت توضیح اضافه

در اچ تی ام ال خاصیت توضیح اضافه با alt ظاهر میشود و درمواقعی کاربرد دارد که یک عنصر اچ تی ام ال قابل نمایش نباشد

کد:
<img src="codebox.jpg" alt="عکس کدباکس" width="104" height="142">
در اچ تی ام ال 5 بزرگی و کوچکی حروف تاثیر گذار نیست اما توصیه میشود همیشه از حروف کوچک استفاده کنید تا در همه نسخه های اچ تی ام ال مقبول واقع شود.

همچنین میتوانید در اچ تی ام ال از " در بیان مقدار خواص استفاده نکنید مثل :

کد:
<a href=http://codebox.ir>
اما توصیه میکنم که همیشه استفاده کنید به همون دلیل قبلی

همچنین میتوانید به جای " از یه دونه استفاده کنید. الان رو کیبرد پیداش نکردم کجاست آهان کپی کردم از یه جایی. از
'
اینا هم میتونید استفاده کنید جای 2 تا



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




پستارسال شده در: سه شنبه 16 ژوئن 15, 1:01 pm 
نماد کاربر

پست ها : 370
محل سکونت: فارس
سپاسگذاری کرده: 40 بار
سپاس دریافتی: 576 بار
یک سند html به پاراگراف ها تقسیم بندی شده است.
همانطور که قبلا اشاره شد تگ <p> برای عنصر پاراگراف به کار میرود
کد:
<p>This is a paragraph</p>
<p>This is another paragraph</p>

نحوه نمایش پاراگراف ها در html

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

شما با اضافه کردن اسپیس , فاصله , خط خالی نمیتوانید خروجی را عوض کنید زیرا مرورگر ها این دو را حذف میکنند

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

مثلا دو پاراگراف زیر یک خروجی را دارند

کد:
<p>
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>

<p>
This paragraph
contains         a lot of spaces
in the source         code,
but the        browser
ignores it.
</p>

اگر یک تگ را نبندیم چه اتفاقی می افتد ؟

در پاراگراف اگر تگ انتهایی را نبندیم ممکن است به مشکل بخوریم. این که گفتم ممکن است به این خاطر هست که اکثر مرورگر ها به درستی نمایش میدهند گرچه پاراگراف دارای تگ پایانی نباشد.

کد:
<p>This is a paragraph
<p>This is another paragraph

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


لاین بریکر یا خط بعدی :

خط بعد یا line break با عنصر <br> ظاهر میشود.

کد:
<p>This is<br>a para<br>graph with line breaks</p>


اگر میخواهید پاراگراف شما همانگونه که نوشتید و با فونت دیفالت Courier نمایش داده شود از عنصر <pre> استفاده کنید. با استفاده از این عنصر خطوط بعدی و فاصله ها همانگونه که نوشتید ظاهر میشوند.

کد:
<pre>
  My Bonnie lies over the ocean.

  My Bonnie lies over the sea.

  My Bonnie lies over the ocean.

  Oh, bring back my Bonnie to me.
</pre>


پستارسال شده در: سه شنبه 16 ژوئن 15, 1:43 pm 
نماد کاربر

پست ها : 370
محل سکونت: فارس
سپاسگذاری کرده: 40 بار
سپاس دریافتی: 576 بار
استایل ها در html
به صورت پیشفرض عناصر html دارای استایل پس زمینه سفید و رنگ متن مشکی هستند.
عوض کردن خاصیت این عناصر به عنصر style انجام میشود.
استفاده از استایل در html5 به شیوه ی  است:
کد:
style="property:value

در کد بالا property اسم خاصیت عنصر استایل و value اندازه ی آن است

رنگ ها : از  color استفاده میشود

کد:
<h1 style="color:blue">This is a heading</h1>
<p style="color:red">This is a paragraph.</p>

فونت ها: از font-family استفاده میشود

کد:
<h1 style="font-family:verdana">This is a heading</h1>
<p style="font-family:courier">This is a paragraph.</p>

در نسخه های قدیمی html از تگ <font> استفاده میشد اما جدیدا پشتیبانی نمیشود


سایز ها: از پراپرتی font-size برای نمایش اندازه متون استفاده میشود.

کد:
<h1 style="font-size:300%">This is a heading</h1>
<p style="font-size:160%">This is a paragraph.</p>

چیدمان خط :

از پراپرتی text-align استفاده میشود

کد:
<h1 style="text-align:center">Centered Heading</h1>
<p>This is a paragraph.</p>

نسخه های قدیمی از تگ <center> پشتیبانی میکردند اما در html5 پشتیبانی نمیشود.



نمايش پست ها از پيشين:  مرتب سازي بر اساس  

مبحث جدیدپاسخ

 [ 5 پست ] 


مباحث مرتبط

 مباحث   نويسنده   پاسخ ها   بازديدها   آخرين پست 
موضوع ناخوانده دیگری در این انجمن موجود نیست. مشکل ارسال html و javascript در فرم php

clashofclans

1

880

يکشنبه 04 دسامبر 16, 7:40 am

Hoseyn نمایش آخرین ارسال

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

Hoseyn

0

2521

جمعه 19 ژوئن 15, 10:31 am

Hoseyn نمایش آخرین ارسال

 


چه کسي حاضر است ؟

کاربران حاضر در اين انجمن: بدون كاربران آنلاين و 2 مهمان


شما نمي توانيد مبحث جديدي در اين انجمن ايجاد کنيد
شما نمي توانيد به مباحث در اين انجمن پاسخ دهيد
شما نمي توانيد پست هاي خود را در اين انجمن ويرايش کنيد
شما نمي توانيد پست هاي خود را در اين انجمن حذف کنيد
شما نمي توانيد فايل هاي پيوست در اين انجمن ارسال کنيد
cron



بخش ها