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

مشاهده پست هاي بدون جواب نمايش مبحث هاي فعال

زیرساخت سخت افزاری زیرساخت نرم افزاری امنیت شبکه شبکه های مخابراتی

دیتاسنتر ها مدیریت سرور مجازی مدیریت سرور اختصاصی مجازی سازها VmWare

محصولات Microsoft انواع لینوکس CentOS Debian Kerio Ubuntu FreeBSD سایر سیستم عامل ها

مدیریت هاستینگ انواع وب سرور ها WHM / cPanel DirectAdmin Plesk وب سرور Apache وب سرور Nginx Microsoft IIS

بهینه سازی و SEO مدیریت کاربران - CRM برنامه نویسی و راه اندازی وردپرس معرفی سایت

دریافت اطلاعات ...

صفحه اول » بخش وب مسترها » برنامه نویسی و طراحی سایت

پرسش و پاسخ های HTML و CSS

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

صفحه 1 از 1

[ 5 پست ]

حالت پرينت

مبحث پيشين | مبحث بعدي

نويسنده

پيغام

موضوع پست: پرسش و پاسخ های HTML و CSS

ارسال شده در: سه شنبه 16 ژوئن 15, 7:58 am

Hoseyn

پست ها : 371
محل سکونت: فارس
سپاسگذاری کرده: 41 بار
سپاس دریافتی: 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> نمایش داده میشوند, به صورت زیر

کد:

آدرس در ویژگی href نوشته میشود.

عکس ها در html :

عکس ها با تگ <img> نمایش داده میشوند

منبع فایل در src و متن جایگزین در alt و پهنا و درازای عکس با width و height هستند.

کد:

موضوع پست: آموزش خواص در html - آموزش attributes در html

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

Hoseyn

پست ها : 371
محل سکونت: فارس
سپاسگذاری کرده: 41 بار
سپاس دریافتی: 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 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 مقدار خاصیت در عنصر لینک هستند و کدباکس هم خود عنصر

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

موضوع پست: Re: آموزش خواص در html - آموزش attributes در html

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

Hoseyn

پست ها : 371
محل سکونت: فارس
سپاسگذاری کرده: 41 بار
سپاس دریافتی: 576 بار

خاصیت اندازه در عنصر عکس
عکس ها در اچ تی ام ال با تگ <img> ظاهر میشوند.
خاصیت src منبع عکس و سایز عکس با width و height هستند.

کد:

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

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

کد:

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

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

کد:

اما توصیه میکنم که همیشه استفاده کنید به همون دلیل قبلی

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

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

موضوع پست: آموزش های مربوط به پاراگراف در html

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

Hoseyn

پست ها : 371
محل سکونت: فارس
سپاسگذاری کرده: 41 بار
سپاس دریافتی: 576 بار

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

کد:

<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

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

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

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

کد:

This is a para graph with line breaks

اگر میخواهید پاراگراف شما همانگونه که نوشتید و با فونت دیفالت 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>

موضوع پست: آموزش استایل در html - آموزش style در html

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

Hoseyn

پست ها : 371
محل سکونت: فارس
سپاسگذاری کرده: 41 بار
سپاس دریافتی: 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-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 پشتیبانی نمیشود.

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

صفحه 1 از 1

[ 5 پست ]

صفحه اول » بخش وب مسترها » برنامه نویسی و طراحی سایت

مباحث		نويسنده	پاسخ ها	بازديدها	آخرين پست
مباحث مرتبط
	تبدیل و کدنویسی PSD به HTML چیست؟	casperia	0	295	جمعه 18 مه 18, 12:56 pm casperia
	مشکل ارسال html و javascript در فرم php	clashofclans	1	1418	يکشنبه 04 دسامبر 16, 7:40 am Hoseyn
	نمایش دسته بندی سایت وردپرس در فرم منوی بازشوند html با دکمه	Hoseyn	0	3318	جمعه 19 ژوئن 15, 10:31 am Hoseyn

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

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

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

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

پرسش و پاسخ های HTML و CSS

مباحث مرتبط

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

آموزش آنلاین

کانفیگ و خدمات فنی

بهینه سازی سایت

سرور اختصاصی

همکاری با کدباکس

منابع و مستندات

فروش انواع لایسنس

طراحی وب و اسکریپت

سرور مجازی

هاست لینوکس

در نزدیکی کدباکس