آفتاب گردون - مطالب طراحی وب(اچ تی ام ال)

تبدیل خط جدید در textbox یا textarea به تگ < br > اچ تی ام ال

سلام
هنگامی که در textarea متنی را می نویسید و سپس اینتر می زنید، تا در خط جدید نوشته بشه ، تگی که در اچ تی ام ال ایجاد میشه برای خط جدید <br> نیست! تگ n\ هست!!
ادامه مطلب... برای خواندن بقیه مطلب ، اینجا کلیک کنید

ارسال به

موضوع: طراحی وب(اچ تی ام ال) ، برنامه نویسی وب(پی اچ پی) ،

نوشته شده

در

توسط حسین روز سه شنبه 3 آذر 1394 در ساعت 08:27 ب.ظ | نظرات ()

برچسب ها: textarea to br, convert to br, تبدیل textarea به br, تابع nl2br, new line textarea br, php textarea to br, contenteditable=true,

نرم افزار Rapid PHP 2011 برای طراحی و برنامه نویسی صفحات وب

سلام دوستان

امروز میخوام نرم افزای رو معرفی کنم که هم توی کد نویسی بهتون کمک میکنه و هم حجمش نسبت به نرم افزارهای مشابه مثل: Dreamweaver کمتر هست
این نرم افزار رو آپلود کردم ، از اینجا: www.aftab-gardoon.persiangig.com/software/BlumentalsRapidPHP2011.zip می تونید دانلود کنید
نحوه نصب:
پس از دانلود ، فایل را از حالت Zip بیرون آورده یا extract کنید
سپس عملیات نصب را انجام دهید ، بعد از اتمام نصب ( نرم افزار را اجرا نکنید) کرک را کپی کرده
و نرم افزار را باز کنید و گزینه Active بزنید و شماره سریال را وارد نمایید (شماره سریال در فایل Serial موجود هست )
ضمناً این برنامه از css3 و html5 هم پشتیبانی میکنه...

برای راهنمای نصب برنامه به:
www.aftabgardoon.mihanblog.com/extrapage/rapidphp2011#install_rapidphp2011
مراجعه کنید

ارسال به

موضوع: طراحی و برنامه نویسی وب ، طراحی وب(اچ تی ام ال) ، برنامه نویسی وب(پی اچ پی) ،

نوشته شده

در

توسط حسین روز سه شنبه 20 تیر 1391 در ساعت 10:21 ق.ظ | نظرات ()

برچسب ها: آموزش اچ تی ام ال, learn html, اچ تی ام ال, نحوه کدنویسی با اچ تی ام ال, html, طراحی صفحات وب, آموزش html, نحوه طراحی کردن صفحات وب, آموزش طراحی صفحات وب, طریقه کد نویسی وب, طریقه کدنویسی و طراحی سایت, قالب وبلاگ را چطور طراحی کنیم ؟, سایت را چطوری طراحی کنیم ؟, نرم افزارهای کد نویسی اچ تی ام ال, Blumentals Rapid PHP, Download Blumentals Rapid PHP, WYSIWYG Web Builder, BestAddress HTML Editor, FrontPage, Front Page, PHP Designer, آموزش فرانت پیج, آموزش front page,

معرفی و نحوه کارکردن با تگ های onmouseover و onmouseout

سلام دوستان

کلاً تگ : onmouseover برای زمانی هست که ماوس حرکنه و تگ onmouseout زمانی که ماوس از روی چیزی خارج بشه

مثال اول برای عکس :
یه عکس داریم ، میخوایم وقتی که ماوس روی اون حرکت کرد اندازش بزرگتر بشه
حتما می دونید که با تگ :

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

عرض این عکس : 425 و ارتفاغ آن : 638 پیکسل هست
میخوایم این عکس رو بزاریم در صفحه :

حالا میخوایم وقتی که ماوس حرکت دادیم روی اون عکس اندازش بشه
مثلا : عرض 600 و ارتفاع 900

وقتی که ماوس اومد روی اون عکس اندازش تغییر میکنه ، شاید دوست داشته باشید وقتی که ماوس از روی اون عکس خارج شد به حالت قبلی برگرده و یا به یه اندازه دیگه تغییر کنه مثلا عرض عکس بشه 450 ارتفاع عکس بشه 340

یا می تونید اندازه واقعی عکس رو بزارید تا وقتی ماوس از روی عکس خارج شد به حالت واقعی خود عکس برگرده

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

یه استایل مانند زیر تعریف می کنیم

<style>

.aftabgardoon{
background-color: #CCFFFF;
color: #000000;
font-family: Tahoma;
font-size: 11pt;
float: right;
text-align: center;
width: 130px;
padding: 4px;
}
</style>

توضیح در مورد اجزای کلاس :
1- رنگ پس زمینه سبز آبی
2- رنگ متن سیاه
3- نام فونت تاهما
4- سایز فونت 11 پی تی
5- قرارگیری در سمت راست صفحه
6- وسط چین
6-عرض کلاس 130 پیکسل
7- فاصله متن 4 پیکسل

حالا این استایل رو فراخوانی میکنیم

وقتی که صفحه باز بشه ، طبق مشخصاتی که توی استایل و اون کلاس بهش دادیم همه چیز اجرا میشه
حالا میخوایم وقتی که ماوس اومد روی اون نوشته :
1- رنگ پس زمینه سیاه
2- رنگ متن سفید
3-عرض کلاس 230 پیکسل
4- فاصله متن 8 پیکسل
موارد فوق تغییر کنه
وقتی هم ماوس از روی اون نوشته خارج شد همه چیز به حالت عادی خود برگرده

اگر سوالی داشتید در نظرات همین مطلب مطرح فرمایید.
موفق باشید

ارسال به

موضوع: طراحی و برنامه نویسی وب ، طراحی وب(اچ تی ام ال) ،

نوشته شده

در

توسط حسین روز پنجشنبه 21 بهمن 1389 در ساعت 12:42 ب.ظ | نظرات ()

برچسب ها: onmouseover, onmouseout, وقتی ماوس اومد روی نوشته, وقتی ماوس اومد روی عکس اندزش تغییر کنه, جرکت ماوس در اچ تی ام ال, اچ تی ام ال, آموزش اچ تی ام ال, learn html, نحوه کدنویسی با اچ تی ام ال, html, طراحی صفحات وب, آموزش html, نحوه طراحی کردن صفحات وب, آموزش طراحی صفحات وب, طریقه کد نویسی وب, طریقه کدنویسی و طراحی سایت, قالب وبلاگ را چطور طراحی کنیم ؟, سایت را چطوری طراحی کنیم ؟, Html, آموزش اچ تی ام ال از مبتدی تا پیشرفته, آموزش فرانت پیج, آموزش front page, تگ onmouseover, کار با onmouseover, نحوه استفاده از onmouseover, تگ onmouseout, کار با onmouseout, نحوه استفاده از onmouseout,

چه جوری لینکی را تعریف کنیم ؟

سلام

امروز میخوام نحوه لینک گذاشتن و قرار دادن یه عکس بعنوان لینک رو توضیح بدم

<a href="" target="">عنوان لینک</a>

href=" آدرس لینک"

target="نحوه باز شدن صفحه"

target="_blank" روی لینک که کلیک کنیم یه صفحه جدیدی باز میشه
arget="_self" روی لینک که کلیک کنیم صفحه جدید جایگزین صفحه فعلی می شود

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

فرمت کلی برای عکس گذاشتن در صفحه :

src="آدرس عکس"

باید آدرس عکس رو بنویسیم

البته برای آموزش و تست میتوانید آدرس عکس رو از سیستمتون بدید
مثلا :
src="E:/Pictures/201637.jpg"

اما توی اینترنت بخاطر اینکه بقیه به این عکس دسترسی داشته باشند باید شما عکس را اپلود کنید

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

http://upload.centerfa.com

http://www.up.iranblog.com/

http://www.persiangig.com/

نیاز به نام کاربری که اگه نام کاربری ندارید باید ثبت نام کنید

http://www.parsaspace.com/

نیاز به نام کاربری که اگه نام کاربری ندارید باید ثبت نام کنید

http://www.ripway.com/

نیاز به نام کاربری که اگه نام کاربری ندارید باید ثبت نام کنید

border="0"
کادر دور لینک یا بهتره بگم رنگ لینک رو نمایش میده
اگه مقدارش 0 باشه کادر نشون نمیده
هر چه این مقدارش بالاتر بره ، حاشیه کادر ضخیم تر میشه
بهتره که اینو صفر بزارید

width="250"
اندازه عرض عکس رو مشخص میکنه
اگه اصلا
width=""
رو نزاریم
اندازه واقعی عکس رو نمایش میده
گذاشتن این تگ اجباری نیست ولی اگه یه موقع بخواید یه عکس بزرگ رو با اندازه کوچک نمایش بدید
میتونید مقدارش رو بزارید این تگ اندازه عرض عکس هست

height="400"
اندازه ارتفاع عکس رو مشخص میکنه
اگه اصلا
height=""
رو نزاریم
اندازه واقعی عکس رو نمایش میده
گذاشتن این تگ اجباری نیست ولی اگه یه موقع بخواید یه عکس بزرگ رو با اندازه کوچک نمایش بدید
میتونید مقدارش رو بزارید این تگ اندازه ارتفاع عکس هست

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

مثلا این تگ ها :

http://aftab-gardoon.persiangig.com/learn/html/src.JPG

برای مثال :

میخوایم وقتی روی عکس زیر کلیک کردیم آدرس http://www.aftabgardoon.net در صفحه جدید باز بشه و اندازه عکس هم 50×50 پیکسل باشه
ولی اندازه واقعی عکس زیر : 150×150 هست

حالا فرض کنید بجای عکس نوشته بزاریم

<a href="http://www.aftabgardoon.net" target="_blank">آفتاب گردون دات نت</a>

روی نوشته : آفتاب گردون دات نت که کلیک بشه آدرس باز میشه

حالا ببینیم تگ :

title=""

چیکار میکنه

<a href="http://www.aftabgardoon.net" target="_blank" title="aftabgardoon">آفتاب گردون دات نت</a>

اگه ماوس بیاد روی نوشته یا نام لینک ، aftabgardoon رو نمایش میده

فقط یه چیزی مونده
رنگ لینک های یک صفحه ، مثلا من دوست دارم رنگ لینک ها قرمز باشه و وقتی ماوس روش حرکت میکنه یه رنگ دیگه بشه و اگه قبلا روی اون لینک کلیک شده باشه یه رنگ دیگه بشه
این قسمت مربوط به قسمت استایل ها میشه که اجازه بدید وقتی که استایل ها رو توضیح دادم خدمتتون عرض کنم

ولی الان مختصری توضیح میدم :
روی عکس زیر کلیک کنید تا با اندازه واقعی ببینید :

a {
color:#F1FFC6;
text-decoration: none;
}
برای مشخصات لینکهای داخل صفحه استفاده میشه
و

color:#F1FFC6;

برای رنگ لینک هست
اگه :
text-decoration: none;
نزاریم زیر لینک ها خط میکشه همون آندرلاین
اما همین تگ حالت های دیگه هم داره
ولی اگه
none
باشه ، مثل
text-decoration: none;
زیر لینک ها خط کشیده نمیشه

a:visited {
color:#F1FFC6;text-decoration: none;
}

وقتی لینکی که قبلا روش کلیک کردیم
مثلا توی گوگل سرچ کردید و دفعه بعد اون لینکی که قبلا باز کردید یه رنگ دیگه شده

اما من همیشه رنگ این قسمت رو مثل
a {

{
میزارم

a:hover {
color: #FCFCFC;
text-decoration: none;
}

اگه سوالی دارین توی نظرات مطرح کنید تا پاسخ بدم

سربلند باشید

ارسال به

موضوع: طراحی وب(اچ تی ام ال) ، طراحی و برنامه نویسی وب ،

نوشته شده

در

توسط حسین روز پنجشنبه 18 آذر 1389 در ساعت 11:51 ق.ظ | نظرات ()

برچسب ها: لینک گذاشتن, قرار دادن لیک, لینک در اچ تی ام ال, آموزش اچ تی ام ال, learn html, اچ تی ام ال, نحوه کدنویسی با اچ تی ام ال, html, طراحی صفحات وب, آموزش html, نحوه طراحی کردن صفحات وب, آموزش طراحی صفحات وب, طریقه کد نویسی وب, طریقه کدنویسی و طراحی سایت, قالب وبلاگ را چطور طراحی کنیم ؟, سایت را چطوری طراحی کنیم ؟, Html, آموزش اچ تی ام ال از مبتدی تا پیشرفته, لینک, آموزش فرانت پیج, آموزش front page,

تاریخچه اچ تی ام ال

HTML توسط Tim Berners-Lee در خلال دهه 90 میلادی همراه با گسترش وب، شکوفا شد. این زبان توسط مرورگر Mosaic معروفیت خاصی پیدا کرد. در آن زمان HTML در چند مدل منتشر می شد که آن بستگی داشت به سازنده فایل و انجمنهایی که در زمینه وب فعالیت داشتند. در نوامبر 1995 نسخه HTML 2.0 گسترش یافت و بلافاصله در همان سال HTML 3.0 منتشر شد، ولی استقبالی از آن نشد. در سال 1996 انجمن W3C شروع به فعالیت بر روی نسخه این زبان کرد که حاصل کار آنها در 14 ژانویه 1997 انتشار HTML 3.02 بود. این نسخه توانست رضایت اکثریت را جلب کند چون هماهنگی بیشتری با مرورگرهای مختلف در سیستمهای عامل متفاوت داشت. در تمام نسخه های این زبان ، سعی بر این شده بود تا نظر کسانی که در زمینه وب سرمایه گذاری کرده بودند جلب شود و برنامه های تولید شده برای وب بتوانند مدت طولانی تری قابل استفاده باشند. به همین منظور HTML برای اهداف گسترده تری ، در وب توسعه یافت تا در کلیه سیستمهای اطلاع رسانی و الکترونیکی کوچک و بزرگ با بکار بردن گرافیک و رنگها، قابلیت بهره برداری بیشتری داشته باشد. در 18 دسامبر 1997 نسخه HTML 4.0 در وب منتشر شد و در همین بین شرکتهای تولید کننده مرورگر وب یکسری مشخصات منحصر بخود را به این نسخه اضافه کردند که قابل اجرا در مرورگرهای دیگر نبود. بعضی از این تغییرات در W3C مورد تایید قرار گرفت اما بعضی دیگر نه. با تغییرات HTML مرورگرها مجبور به تغییر شدند تا با تحولات جدید سازگار شوند. در تاریخ 24 آوریل 1998 در این نسخه تجدید نظر شد و حاصل آن پیدایش HTML 4.01 بود که با کمی تغییر و رفع یکسری مشکلات، در W3C برسمیت شناخته شد و این انجمن استفاده از آنرا به توسعه دهندگان و طراحان وب ، توصیه کرد. بطور کل مجموعه HTML 4 با قابلیت استفاده از embeded objects, frames, scripting, style sheets و با کارآیی بالاتر جدولها و فرمها به وب معرفی شد، همچنین در این نسخه توجه زیادی به افراد با توانایی کم شده بود تا این افراد هم بتوانند از محیط وب استفاده کنند. اما مهمترین قدمی که در این نسخه برداشته شد، پشتیبانی HTML از زبانهایی بود که از راست به چپ نوشته میشدند مانند زبان فارسی، که در این نسخه با پذیرفتن استاندارد ISO 10646 به هدف بزرگ بین المللی شدن این زبان نزدیک شدند تا همه مردم دنیا در هر کجا و با هر زبانی بتوانند اسناد HTML را منتقل کنند. HTML 4.01 تفاوت کمی با نسخه اصلی خود یعنی 4.0 دارد اما در عوض هماهنگی بیشتری با نسل جدید زبان وب یعنی XHTML و نسل بعدی یعنی XML دارد. در اصل XHTML اساس و مقدمه XML است که برای هماهنگی و سازگاری HTML با XML منتشر شده است. HTML 4 زبان بسیار قوی است برای طراحان و سازندگان محصولات وب اما در آن توجهی به دستگاههای اطلاع رسانی و الکترونیکی کوچک با قدرت و حافظه کمتر نشده است. به همین منظورW3C در 26 ژانویه 2000 اقدام به معرفی XHTML 1.0 کرد و در 19 دسامبر همان سال آنرا به رسمیت شناخت و تاکید به استفاده از این نسخه کرد تا با بکارگیری ویژگیهایی که دارد دامنه استفاده از زبان محبوب HTML را گسترش دهد و مقدمات معرفی XML را فراهم کند.

ارسال به

موضوع: طراحی وب(اچ تی ام ال) ، طراحی و برنامه نویسی وب ،

نوشته شده

در

توسط حسین روز دوشنبه 5 بهمن 1388 در ساعت 03:55 ق.ظ | نظرات ()

برچسب ها: اچ تی ام ال, html, تاریخچه اچی تی ام ال, تاریخچه html,

قسمت های اصلی صفحات وب

سلام

قالب یا صفحات وب از سه قسمت اصلی تشکیل شده که قسمت اول همون هد head هست که اینجا دربارش توضیح دادم.
قسمت دوم : استایل ، مشخصات صفحه (اندازه ، رنگ ، فونت و ... ) رو تو استایل معرفی می کنیم.
قسمت سوم : body یا بدنه قالب هست ، برای قراردن دادن منو ها ، تگ های سایت رو داخلش قرار می دهیم و ... استایل هایی که در قسمت استایل معرفی کردیم رو اینجا فراخوانی میکنیم.

ارسال به

موضوع: طراحی وب(اچ تی ام ال) ، طراحی و برنامه نویسی وب ،

نوشته شده

در

توسط حسین روز چهارشنبه 1 مهر 1388 در ساعت 08:46 ق.ظ | نـظـر بـدهـیـد ()

برچسب ها: اچ تی ام ال, استایل, Body, head, آموزش اچ تی ام ال, learn html, نحوه کدنویسی با اچ تی ام ال, html, طراحی صفحات وب, آموزش html, نحوه طراحی کردن صفحات وب, آموزش طراحی صفحات وب, طریقه کد نویسی وب, طریقه کدنویسی و طراحی سایت, قالب وبلاگ را چطور طراحی کنیم ؟, سایت را چطوری طراحی کنیم ؟, Html, تگ head, کد نویسی اچ تی ام ال, تگ های اچ تی ام ال, html tag, آموزش فرانت پیج, آموزش front page,

طریقه قرار دادن آیکن یا عکس کنار آدرس وبلاگ یا سایت

با سلام

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

به قسمت favicon می گویند.

مثلا وقتی موتور جستجوی گوگل را باز میكنید در بالای صفحه و كنار نوار آدرس حتما شكلی شبیه به حرف"g" مشاهده می کنید.

البته باید بگم که متاسفانه در مروگر اینترنت اکسپلورر ممکنه آیکن ها دیده نـشـه ولی در مرورگرهایی مثل : موزیلا فایرفاکس ، اپرا ، گوگل کروم و ... دیده میشه

کد زیر بهتر است در قسمت هد قالب (head)باشه

مانند :

<head>

</head>

نمایش فایو آیکن در همه مرورگرها مخصوصاً اینترنت اکسپلورر
با این روش در همه مرورگرها فایو آیکن نمایش داده میشه ، در مرورگر های دیگه نام فایل آیکن هر چی باشه و با هر پسوندی قبول میکنه ، اما در اینترنت اکسپلورر باید حتما نام فایل : favicon و پسوند فایل هم ico باشه
مثل :

فکر کنم اگر پسوند فایل رو به صورت دستی تغییر بدید ، اجرا نشه ، باید حتماً با نرم افزار های تبدیل پسوند عکس استفاده کنید و پسوند عکس رو به ico تبدیل کنید.

بهتره که اندازه آیکن هم 16×16 باشه!

نکته اول : در اینترنت اکسپلورر ممکنه بعد از بارگزاری کامل سایت ، آیکن نمایش داده بشه!!!

نکته دوم : اگر دوباره آیکن نمایش داده نشد ، برای آدرس عکس ، www بزاید.
مثل :
http://www.bernard.persiangig.com/template/aftabgardoon/favicon.ico

نکنه سوم : ممکن است تمامی مراحل درست رفته باشید ولی آیکن نمایش داده نشه :
سایتتون رو باز کنید و کلید های Ctrl و F5 را همزمان فشار دهید.

برای همه مرورگرها به جزء اینترنت اکسپلورر:

اندازه عکس هم 16×16 فرمت یا پسوند عکس هم باید یکی از : jpg یا ico یا gif باشه ...

ایتدا عکس خود را آپلود کنید ، سپس در کد زیر بجای نوشته قرمز رنگ آدرس عکس رو قرار بدید

اگر مشکلی داشتید در نظرات همین مطلب ، مشکلتون رو مطرح کنید.

ارسال به

موضوع: طراحی وب(اچ تی ام ال) ، طراحی و برنامه نویسی وب ،

نوشته شده

در

توسط حسین روز یکشنبه 1 شهریور 1388 در ساعت 07:14 ق.ظ | نظرات ()

برچسب ها: آیکن کنار آدرس سایت یا وبلاگ, عکس کنار آدرس سایت یا وبلاگ, لوگو کنار آدرس سایت یا وبلاگ, favicon, طریقه آرم دار کردن سایت, فایو آیکن, five icon, اچ تی ام ال, learn html, نحوه کدنویسی با اچ تی ام ال, html, طراحی صفحات وب, آموزش html, نحوه طراحی کردن صفحات وب, آموزش طراحی صفحات وب, طریقه کد نویسی وب, طریقه کدنویسی و طراحی سایت, قالب وبلاگ را چطور طراحی کنیم ؟, سایت را چطوری طراحی کنیم ؟, Html, کد نویسی اچ تی ام ال, تگ های اچ تی ام ال, آموزش فرانت پیج, آموزش front page, نمایش آیکن کنار آدرس سایت, نمایش آیکن کنار آدرس سایت در مروگر اینترنت اکسپلورر, رفع مشکل آیکن د اینترنت اکسپلورر, فایو آیکن در اینترنت اکسپلورر, fivicon IE, favicon.ico, favicon اینترنت اکسپلورر, چرا ایکن کنار آدرس سایت نمایش داده نمی شود ؟,

شروع کار با استایل

در قسمت استایل هست که ظاهر وبلاگ رو میشه طراحی کرد
مثلا برای بالای مطالب چه عکسی بیاد و یا چه رنگی باشه و یا رنگ فونتش چی باشه و نوشته با چه فونتی باشه و ....
استایل ها رو میشه توی خود قالب نوشت و یا بهش لینک داد ، اگه میخاین بهش لینک بدید باید استایل ها رو بنویسید و با پسوند css ذخیره کنید و مسیر استایل رو بهش بدید و از کد :

اما اگر می خواهید استایل ها رو توی خود قالب بزارید ، باید تگ مربوط به استیل رو باز کنید بعد کدها رو داخلش بنویسی بعد هم تگش رو ببندید
مثل :

</style>

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

در استایل تگ body مشخصات خود صفحه هست یعنی هر چیزی واسش تعریف می کنیم برای کل صفحه تعریف میشه

مثال :

<style>

body{
background: #000000;font-family: Tahoma;font-size: 10pt;color: #FF0000;
}
</style>

background: #000000; رنگ پس زمینه یا بکگراند صفحه که با کد رنگ سیاه تعریف شده

font-family: Tahoma;font-size: 10pt; نام فونت و اندازه فونت

color: #FF0000; رنگ فونت

ارسال به

موضوع: طراحی وب(اچ تی ام ال) ، طراحی و برنامه نویسی وب ،

نوشته شده

در

توسط حسین روز چهارشنبه 28 مرداد 1388 در ساعت 07:33 ق.ظ | نظرات ()

برچسب ها: اچ تی ام ال, learn html, نحوه کدنویسی با اچ تی ام ال, html, طراحی صفحات وب, آموزش html, نحوه طراحی کردن صفحات وب, آموزش طراحی صفحات وب, طریقه کد نویسی وب, طریقه کدنویسی و طراحی سایت, قالب وبلاگ را چطور طراحی کنیم ؟, سایت را چطوری طراحی کنیم ؟, Html, کد نویسی اچ تی ام ال, تگ های اچ تی ام ال, style, استایل, لینک دادن به استایل, :استایل چیست ؟, css, شروع کد نویسی سی اس اس, سی اس اس, body, بادی, تگ body, background, font-family, Tahoma, font-size, pt, color, page, بکگراند, رنگ پس زمینه, پس زمینه, .css, css., آموزش فرانت پیج, آموزش front page,

فارسی نویسی

به طور خلاصه و با صرف نظر از بعضی از پیچیدگیها می‌شود گفت یونی‌کد مجموعه‌ای بسیار بزرگ از نویسه (character)های مختلف است. این مجموعه تقریباً تمام نویسه‌های مورد استفاده در کامپیوتر در جهان را در خود دارد. از حرف سین الفبای فارسی گرفته تا حروف الفبای چینی و انواع و اقسام علامت‌ها و حتی خط میخی فارسی باستان. مهمترین خاصیت یونی‌کد این است که به هر کدام از این نویسه‌ها یک شماره‌ٔ یکتا اختصاص می‌دهد که به آن کد یونی‌کد آن نویسه می‌گویند. کد یونی‌کد ی فارسی U+06CC است در حالی که کد یونی‌کد ی عربی U+064A است. وقتی یک پرونده ذخیره می‌شود این کدها هستند که ذخیره می‌شوند نه شکل نویسه‌ها. بنابر این تأثیر این مسأله این است که اگر پرونده‌ای با قالب یو‌نی‌کد ذخیره شود و در هر کجای دیگر دنیا که از یونی‌کد استفاده می‌کند باز شود، همان نویسه‌ها درونش قرار خواهند داشت.
روش کدگزاری UTF-8
اکیدا توصیه میشود که برای تایپ و نمایش متون فارسی از استاندارد یونیکد و روش کدگزاری UTF-8 اسنفاده شود و این روشی است که مطالب این سایت و ادیتور آنلاینش از آن استفاده میکند. نکته مهم در نمایش صحیح متون فارسی تعیین نوع کدگزاری یا encoing صفحات فارسی است که برای اینکار باید از متاتگ خاصی به نام http-equiv در بخش head صفحات اچتمل به شکل زیر استفاده شود

اما اگر بازم نوشته های شما بهم ریخته بود ، از :

استفاده کنید.

در اینصورت مرورگر یا Browser قبل از نمایش صفحه از روی متاتگ فوق نوع کدگزاری (Encoding) را تشخیص داده و دیگر مثلا نیازی به تعیین دستی (دراکسپلورور 5 : View/Encoing/Unicode / UTF-8 ) نوع Encoing توسط بازدیدکننده سایت نخواهد بود.

سمت و جهت نمایش متون لاتین به صورت پیش فرض و default از چپ به راست (ltrیا Right To Left) میباشد. در مورد متون و جملات فارسی باید با کمک روشی جهت نمایش پیش فرض را به "راست به چپ" تغییر دهید. شناسه یا attribute ی به نام dir یا همان direction این کار را برای شما انجام میدهد. این شناسه دارای دو مقدار ممکن میباشد :

dir="ltr" , Left-to-right text. - چپ به راست
dir="rtl" , Right-to-left text. - راست به چپ

ارسال به

موضوع: طراحی وب(اچ تی ام ال) ، طراحی و برنامه نویسی وب ،

نوشته شده

در

توسط حسین روز چهارشنبه 31 تیر 1388 در ساعت 05:59 ق.ظ | دیدگاه ها و نظرات شما ()

برچسب ها: encoding, علت پس و پیش شدن نوشته ها در صفحات سایت, فارسی نویسی در صفحات اچ تی ام ال, آموزش اچ تی ام ال, learn html, اچ تی ام ال, نحوه کدنویسی با اچ تی ام ال, html, طراحی صفحات وب, آموزش html, نحوه طراحی کردن صفحات وب, آموزش طراحی صفحات وب, طریقه کد نویسی وب, طریقه کدنویسی و طراحی سایت, قالب وبلاگ را چطور طراحی کنیم ؟, سایت را چطوری طراحی کنیم ؟, Html, کد نویسی اچ تی ام ال, تگ های اچ تی ام ال, آموزش فرانت پیج, آموزش front page,

معرفی قسمت head

اول از همه این نرم افزارهای ادیتوری که گذاشته بودم و شما دانلود کردید ، هر قسمتی که داخلش هستید اگه کلید های ctrl + space رو با هم بزنید مشخصات و کدهای مربوط به همون قسمتش میاد
مثلا من یه قسمتی از کد رو نوشتم نمی دونم که : تگی که باید داخلش بکار ببرم چیه
مثال در مورد کد زیر :

<

خب بعد از نوشتن > کلید Ctrl و space رو میزنم قسمت های مربوطه میاد مثلا قسمت تگ a میاد بعدش یک فاصله می دم دوباره کلید های ctrl space می زنم قسمت های مربوطه میاد مثلا تگ target رو انتخاب می کنم

مثلاً من نمی دونم که باید برای قسمت target قسمت فوق چی بزارم ، ماوس رو بین " " کلیک می کنم و کلید های ctrl space (منظور از کلید Space همون دکمه فاصله هست) رو با هم میزنم مشخصات قسمت target میاد ...
این خودش خیلی کمک میکنه ...
اکثر نرم افزارهای اچ تی ام ال ادیتور این ویژگی رو دارن

بریم سر اصل مطلب
ابتدا تگ DTD رو قرار می دهیم ( برای توضیحات این تگ اینجا رو کلیک کنید )
بعدش تگ اچ تی ام ال رو باز می کنیم ؛ سپس بینش تگ هد رو باز می کنیم
به این صورت : (اول نحوه کد نویسی رو می نویسم ، بعد از پایان کد نویسی در مورد هر کدام توضیح می دم)

<!DOCTYPE HTML PUBLIC ”-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

<html>
<head>
<head>
<title>عنوان صفحه</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<link rel="shotcut icon" href="icon.gif"/>
<meta name="description" content="توضیحات صفحه ، یا متا "/>
<meta name="keywords" content=",متا ها , نوشتن کلمات کلیدی وبلاگ, کلمات کلیدی"/>
<link rel="alternate" type="application/rss+xml" title="عنوان وبلاگ" href="لینک ار اس اس وبلاگتون" />
<link rel="alternate" type="application/atom+xml" title="عنوان وبلاگ" href="لینک اتم وبلاگ خودتون" />
</head>
</html>

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

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

توضیحات قسمت head :

<title>عنوان صفحه</title>

این قسمت ، عنوان صفحه شما رو نمایش میده

دیدید که بعضی مواقع که ، سایتی رو باز می کنید بالای عنوانش یا کنار آدرسش عکسی اومده که مربوط به آیکن همون سایته ؟ دیدید ؟؟ شما هم می تونید آدرس آیکن سایتتون ر قرار بدید ولی باید توجه داشته باشید که اندازه عکس شما باید 16 در 16 باشد.

کلماتی که در این قسمتی می نویسید ، در واقع همین قسمت هست که سایت شما یا مشخصات سایت شما به موتورهای جستجو معرفی میشه ، که باید کلماتی که میخاین بنویسید هر کلمه که نوشتید برای نوشتن کلمه ی بعدش کاما بزارید

این قسمت کلمات کلیدی وبلاگتون رو بنویسید ، یعنی همین کلمات هستند که وبلاگ شما تو گوگل و موتورهای جستجو بهتر شناسایی میشه

جای متن "عنوان وبلاگ" ، اسم وبلاگتون رو بنویسید و در قسمت href آدرس آر اس اس بلاگتون رو بنویسید

جای متن "عنوان وبلاگ" ، اسم وبلاگتون رو بنویسید و در قسمت href آدرس اتم بلاگتون رو بنویسید

فرمت یونیکد Windows-1256

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

ضمناً کسانی که از نرم افزارهایی که من اینجا معرفی کردم استفاده می کنن
در منوی : HTML گزینه Encoding رو بزنید و حالت های یونیک رو می تونید اونجا عوض کنید ....

خب حالا بریم سراغ تگ های میهن بلاگ برای قسمت head

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256">
<title>[cb:blog_page_title]</title>
<link rel="shotcut icon" href="icon.gif"/>
<meta name="description" content="[cb:blog_meta_description] , , , "/>
<meta name="keywords" content="[cb:blog_meta_keywords],میهن بلاگ , وبلاگ من , ایران , , , , "/>
<link rel="alternate" type="application/rss+xml" title="[cb:blog_title]" href="[cb:blog_rss_href]" />
<link rel="alternate" type="application/atom+xml" title="[cb:blog_title]" href="[cb:blog_atom_href]" />
</head>

این تگ : [cb:blog_page_title] عنوان صفحه وبلاگ رو در میهن بلاگ بر می گردونه ( هر عنوانی که برای صفحه وبلاگتون باشه)

این تگ : [cb:blog_meta_description] تنظمیات مربوط به صفحه شما رو در میهن بلاگ بر می گردونه ، برای پر کردن این قسمت در میهن بلاگ : منو ها--> تنظیمات وبلاگ ..> توضیحات متا که باید کلمات مربوط به وبلاگ خودتون رو بنویسید و هر کلمه رو با عبارت "," یا "،" جدا کنید ...

این تگ : [cb:blog_meta_keywords] کلمات کلیدی مربوط به وبلاگ شما رو بر می گردونه و باعث میشه بیشتر در موتور های جستجو شناخته بشه وبلاگ شما ، برای پر کردن این قسمت در میهن بلاگ : منو ها--> تنظیمات وبلاگ ..> کلمات کلیدی متا که باید کلمات کلیدی به وبلاگ خودتون رو بنویسید و هر کلمه رو با عبارت "," یا "،" جدا کنید ...

این تگ : [cb:blog_title] عنوان وبلاگ شما ( نام وبلاگ ) رو بر می گردونه

این تگ : [cb:blog_rss_href] آدرس آر اس اس وبلاگ شما رو بر می گردونه

این تگ : [cb:blog_atom_href] آدرس اتم وبلاگ شما رو بر می گردونه

ارسال به

موضوع: طراحی وب(اچ تی ام ال) ، طراحی و برنامه نویسی وب ،

نوشته شده

در

توسط حسین روز جمعه 18 اردیبهشت 1388 در ساعت 04:43 ق.ظ | نظرات ()

برچسب ها: آموزش اچ تی ام ال, learn html, اچ تی ام ال, نحوه کدنویسی با اچ تی ام ال, html, طراحی صفحات وب, آموزش html, نحوه طراحی کردن صفحات وب, آموزش طراحی صفحات وب, طریقه کد نویسی وب, طریقه کدنویسی و طراحی سایت, قالب وبلاگ را چطور طراحی کنیم ؟, سایت را چطوری طراحی کنیم ؟, Html, تگ head, کد نویسی اچ تی ام ال, تگ های اچ تی ام ال, html tag, آموزش فرانت پیج, آموزش front page,

معرفی تگ DTD

HTML 4.01 نسخه اصلاح شده 4.0 میباشد که برای هماهنگی با نسخه جدید یعنیXHTML و نسل بعدی زبان وب که XML باشد، در وب منتشر شد. این نسخه با تغییرات کمی عرضه شد اما شما مجبور هستید که این قوانین را رعایت کنید اگر میخواهید وب سایت شما هماهنگی بیشتری با نسخه جدید داشته باشد. بعضی از این تغییرات را در این بخش برایتان میگویم ولی نکات اساسی در این زمینه را در بخش XHTML خواهم گفت. بهتر است که شما بعد از فراگیری مجموعه HTML 4 قوانین بکار برده شده در XHTML را رعایت کنید تا در آینده وب سایت شما به مشکل جدی برنخورد.استفاده یکسری تگها از طرف انجمن W3C دیگر توصیه نمیشود وحتی بعضی از آنها ممنوع شدند.

برای شروع کدنویسی در HTML 4.01 اولین چیزیکه باید رعایت کنید DTD آن فایل است که در حال حاضر مرورگر ها بدون آن هم صفحه را نمایش میدهند ولی در آینده ممکن است اینچنین نباشد. همانطور که میدانید DTD باید قبل ازتگ <HTML> نوشته شود. برای این نسخه سه مدل در نظر گرفته شده است که در مدل اول صفحه شما فقط از تگهای استاندارد و قابل قبول استفاده خواهد کرد:

<!DOCTYPE HTML PUBLIC
‘’-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>

اگر در آن صفحه تگهای از رده خارج هم بکار برده اید باید از این مدل DTD استفاده کنید:

<!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd”>

همچنین اگر از عنصر Frame استفاده میکنید این مدل را بکار برید:

<!DOCTYPE HTML PUBLIC
“-//W3C//DTD HTML 4.01 Frameset//EN”
“http://www.w3.org/TR/html4/frameset.dtd”>

بعد از مشخص کردن DTD آن صفحه باید دقت کنید که در این نسخه باید کلیه تگها ، پایان دهنده داشته باشند. بعضی از تگها یا تگ پایان دهنده نداشتند و یا نوشتن آنها اجباری نبود مانند <img>,<p> . اما همه باید بسته شوند و آنهاییکه تگ پایان دهنده نداشتند، در همان تگ و قبل از بستن تگ با علامت > باید علامت یعنی/ را بگذارند. مانند: slash

این قبیل تگها را بدین صورت بکار برید:

نکته: اگر تگ <a> در حالت Anchor بود یعنی حالتیکه لینک به یکی از نقاط داخل همان صفحه پیوند داده خواهد شد، باید آنرا بصورت <a/> بنویسید.

اینها قوانینی بودند که در این نسخه تغییر کردند تا این نسخه با XHTML سازگار شود.

ارسال به

موضوع: طراحی و برنامه نویسی وب ، طراحی وب(اچ تی ام ال) ،

نوشته شده

در

توسط حسین روز سه شنبه 4 فروردین 1388 در ساعت 03:10 ق.ظ | نظرات ()

برچسب ها: آموزش اچ تی ام ال, learn html, اچ تی ام ال, نحوه کدنویسی با اچ تی ام ال, html, طراحی صفحات وب, آموزش html, نحوه طراحی کردن صفحات وب, آموزش طراحی صفحات وب, طریقه کد نویسی وب, طریقه کدنویسی و طراحی سایت, قالب وبلاگ را چطور طراحی کنیم ؟, سایت را چطوری طراحی کنیم ؟, Html, تفاوت Html 4.01 با Html 4.0, Html 4.01, استاندارد www.w3.org, w3, استاندارد w3, آموزش فرانت پیج, آموزش front page,

تاریخچه اچ تی ام ال

HTML توسط Tim Berners-Lee در خلال دهه 90 میلادی همراه با گسترش وب، شکوفا شد. این زبان توسط مرورگر Mosaic معروفیت خاصی پیدا کرد. در آن زمان HTML در چند مدل منتشر می شد که آن بستگی داشت به سازنده فایل و انجمنهایی که در زمینه وب فعالیت داشتند. در نوامبر 1995 نسخه HTML 2.0 گسترش یافت و بلافاصله در همان سال HTML 3.0 منتشر شد، ولی استقبالی از آن نشد. در سال 1996 انجمن W3C شروع به فعالیت بر روی نسخه این زبان کرد که حاصل کار آنها در 14 ژانویه 1997 انتشار HTML 3.02 بود. این نسخه توانست رضایت اکثریت را جلب کند چون هماهنگی بیشتری با مرورگرهای مختلف در سیستمهای عامل متفاوت داشت. در تمام نسخه های این زبان ، سعی بر این شده بود تا نظر کسانی که در زمینه وب سرمایه گذاری کرده بودند جلب شود و برنامه های تولید شده برای وب بتوانند مدت طولانی تری قابل استفاده باشند. به همین منظور HTML برای اهداف گسترده تری ، در وب توسعه یافت تا در کلیه سیستمهای اطلاع رسانی و الکترونیکی کوچک و بزرگ با بکار بردن گرافیک و رنگها، قابلیت بهره برداری بیشتری داشته باشد. در 18 دسامبر 1997 نسخه HTML 4.0 در وب منتشر شد و در همین بین شرکتهای تولید کننده مرورگر وب یکسری مشخصات منحصر بخود را به این نسخه اضافه کردند که قابل اجرا در مرورگرهای دیگر نبود. بعضی از این تغییرات در W3C مورد تایید قرار گرفت اما بعضی دیگر نه. با تغییرات HTML مرورگرها مجبور به تغییر شدند تا با تحولات جدید سازگار شوند. در تاریخ 24 آوریل 1998 در این نسخه تجدید نظر شد و حاصل آن پیدایش HTML 4.01 بود که با کمی تغییر و رفع یکسری مشکلات، در W3C برسمیت شناخته شد و این انجمن استفاده از آنرا به توسعه دهندگان و طراحان وب ، توصیه کرد. بطور کل مجموعه HTML 4 با قابلیت استفاده از embeded objects, frames, scripting, style sheets و با کارآیی بالاتر جدولها و فرمها به وب معرفی شد، همچنین در این نسخه توجه زیادی به افراد با توانایی کم شده بود تا این افراد هم بتوانند از محیط وب استفاده کنند. اما مهمترین قدمی که در این نسخه برداشته شد، پشتیبانی HTML از زبانهایی بود که از راست به چپ نوشته میشدند مانند زبان فارسی، که در این نسخه با پذیرفتن استاندارد ISO 10646 به هدف بزرگ بین المللی شدن این زبان نزدیک شدند تا همه مردم دنیا در هر کجا و با هر زبانی بتوانند اسناد HTML را منتقل کنند. HTML 4.01 تفاوت کمی با نسخه اصلی خود یعنی 4.0 دارد اما در عوض هماهنگی بیشتری با نسل جدید زبان وب یعنی XHTML و نسل بعدی یعنی XML دارد. در اصل XHTML اساس و مقدمه XML است که برای هماهنگی و سازگاری HTML با XML منتشر شده است. HTML 4 زبان بسیار قوی است برای طراحان و سازندگان محصولات وب اما در آن توجهی به دستگاههای اطلاع رسانی و الکترونیکی کوچک با قدرت و حافظه کمتر نشده است. به همین منظورW3C در 26 ژانویه 2000 اقدام به معرفی XHTML 1.0 کرد و در 19 دسامبر همان سال آنرا به رسمیت شناخت و تاکید به استفاده از این نسخه کرد تا با بکارگیری ویژگیهایی که دارد دامنه استفاده از زبان محبوب HTML را گسترش دهد و مقدمات معرفی XML را فراهم کند.

ارسال به

موضوع: برنامه نویسی وب(پی اچ پی) ، طراحی وب(اچ تی ام ال) ،

نوشته شده

در

توسط حسین روز یکشنبه 18 اسفند 1387 در ساعت 03:24 ق.ظ | نظرات ()

برچسب ها: آموزش اچ تی ام ال, learn html, اچ تی ام ال, نحوه کدنویسی با اچ تی ام ال, تاریخچه اچ تی ام ال, تاریخچه html, اچ تی ام ال کی به وجود اومد ؟, html کی به وجود اومد ؟, html, طراحی صفحات وب, آموزش فرانت پیج, آموزش front page,

کدهای html رو چطور بنویسیم ؟ .. معرفی چند نرم افزار Html Editor

کدهای اچ تی ام ال رو چطور میشه نوشت ؟؟؟ زبان Html هم میشه به صورت دستی نوشت و هم به وسیله نرم افزارهایی که ایدتور Html هستند نوشت ( که اینجوری خیلی بهتون کمک میکنه )
شما می توانید نرم افزار Notepad ویندوز را باز کنید و شروع به نوشتن کنید ، و بعد از اتمام کار گزینه ی save asSave as type گزینه all رو بزنید و در قسمت file name نام فایل و حتما بعد از نام فایل html. رو بزنید و در قسمت بگذارید تا فایل شما به صورت html ذخیره شود ... در ضمن می تونید با پسوند htm یا html ذخیره کنید ...

اگه تا حالا با تگ ها و کد های اچ تی ام ال کار نکردید نمی تونید به صورت دستی تایپ کنید ...
اما نرم افزارهایی هستند که میشه به کمک اونها کدهای Html رو نوشت مثل :
Html Editor
Rapid PHP
WYSIWYG Web Builder
BestAddress HTML Editor
FrontPage
PHP Designer
Microsoft Expression Studio
و .......
در قسمت فوق چند نرم افزاری که Html رو ساپورت می کنند رو معرفی کردم ، که نرم افزار های PHP Designer و Blumentals Rapid PHP علاوه بر editor html ، میشه باهاشون کدهای php و ... نوشت که باید برای طراحی صفحات وب ، قسمت html رو انتخاب کرد ....

من نرم افزاری رو به شما معرفی می کنم حتما دانلود کنید و ازش استفاده کنید ... اسم این نرم افزار: Blumentals Rapid PHP هست که می توانید ورژن 2011 آن را دانلود کنید در ضمن این ورژن از html 5 و css3 هم پشتیبانی میکنه... برای دانلود و توضیحات بیشتر به اینجا: www.aftabgardoon.mihanblog.com/post/3196 مراجعه کنید

ارسال به

موضوع: طراحی و برنامه نویسی وب ، طراحی وب(اچ تی ام ال) ،

نوشته شده

در

توسط حسین روز یکشنبه 11 اسفند 1387 در ساعت 11:17 ب.ظ | دیدگاه ها و نظرات شما ()

برچسب ها: آموزش اچ تی ام ال, learn html, اچ تی ام ال, نحوه کدنویسی با اچ تی ام ال, html, طراحی صفحات وب, آموزش html, نحوه طراحی کردن صفحات وب, آموزش طراحی صفحات وب, طریقه کد نویسی وب, طریقه کدنویسی و طراحی سایت, قالب وبلاگ را چطور طراحی کنیم ؟, سایت را چطوری طراحی کنیم ؟, نرم افزارهای کد نویسی اچ تی ام ال, Blumentals Rapid PHP, Download Blumentals Rapid PHP, WYSIWYG Web Builder, BestAddress HTML Editor, FrontPage, Front Page, PHP Designer, آموزش فرانت پیج, آموزش front page,