mona_serendipity 4,365 اشتراک گذاری ارسال شده در 15 شهریور، ۱۳۸۸ تو این تاپیک آموزش کامل و قدم به قدم HTML رو واستون قرار میدم امیدوارم بدردتون بخوره و ازش استفاده کنین: برای شروع کار با HTML شما به چیزهایی نیاز دارید که در لیست زیر آمده است: 1. شما به یک ویرایشگر متن نیاز دارید. در ویندوز شما می توانید از برنامه Notepad استفاده کنید. از هر نرم افزار ویرایش متن دیگری استفاده کنید اما این نکته را در نظر داشته باشید که نرم افزار WordPad که در ویندوز وجود دارد و نرم افزارهایی مانند Microsoft Office Word و امثال آن برای نوشتن کدهای HTML مناسب نیستند چون در هنگام ذخیره کردن متن این نرم افزارها کدهایی را به آن اضافه می کنند. نرم افزار Notepad را می توانید از طریق منوی استارت در قسمت Accessories پیدا کنید یا از طریق فرمان Run با تایپ notepad در کادر Open و فشار دادن دکمه Enter. 2. شما به یک مرورگر وب به انتخاب خود نیاز دارید. می توانید از Microsoft Internet Explorer استفاده کنید که با ویندوز نصب می شود یا از Opera, Mozilla Firefox و نرم افزارهای مشابه که اغلب به صورت رایگان برای دانلود در اینترنت وجود دارند. بهتر است صفحاتی را که می نویسید با چند مرورگر آزمایش کنید. زیرا در HTML قسمتهایی وجود دارد که مختص به یک مرورگر خاص است و با سایر مرورگرها کار نمی کند. 3. شما به جایی برای ذخیره کردن متن خود دارید که می تواند جایی روی هارد دیسک شما، یک فلاپی دیسک یا یک سرور باشد. البته شما برای استفاده از HTML نیاز ندارید حتماً به اینترنت متصل باشید، شما می توانید با استفاده از یک مرورگر وب در کامپیوتر خود از HTML استفاده کنید. برای ذخیره کردن فایلی که با Notepad نوشته اید کافی است از منوی File گزینه Save As را انتخاب کرده و مسیری را برای ذخیره فایل انتخاب کنید و در کادر File Name در پایین پنجره Save As نام فایل را با پسوند html بنویسید. در آخر هم دکمه Save را کلیک کنید. برای تست کد ها هم به برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام برین 5 نقل قول لینک به دیدگاه
mona_serendipity 4,365 مالک اشتراک گذاری ارسال شده در 15 شهریور، ۱۳۸۸ در اینجا می خواهیم به ساختار شناسه ها یا همان تگها (tag) در HTML بپردازیم. یک تگ همیشه با علامت کوچکتر ریاضی یعنی این علامت > آغاز می شود و با علامت بزرگتر این علامت را قبل از متنی که می خواهیم زیر آن خط کشیده شود قرار می دهیم. به این تگ ، تگ ابتدایی (Opening tag) می گویند، که عملیاتی را که شما می خواهید آغاز کنید شروع می کند. به منظور پایان دادن به زیرخط باید از یک تگ پایانی استفاده کنید. یک تگ پایانی با این علامت شروع می شود: /> بقیه تگ مانند تگ ابتدایی می باشد. برای درک بهتر این مطلب به مثال زیر توجه کنید: Tags and their position اگر بخواهید متن بالا را با زیرخط در مرورگر خود ببینید باید آنرا مطابق خط روبرو در ویرایشگر متن خود بنویسید: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام نتیجه را به این صورت می بینید: Tags and their position در HTML همه تگها به یک تگ پایانی نیاز ندارند. برای مثال تگی که برای وارد کردن عکس استفاده می شود از این قبیل تگهاست، که به این صورت می باشد: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام البته بعداً در مورد این تگ توضیح خواهیم داد در اینجا فقط برای مثال این تگ را آوردیم. موارد دیگری هم با این وضعیت وجود دارند مثلاً که برای رفتن به خط بعدی استفاده می شود، که برای ایجاد یک خط افقی به کار می رود و که برای رفتن به پاراگراف بعدی استفاده می شود. در ضمن نیاز نیست که حتماً تگها با حروف بزرگ نوشته شوند. مثلاً همان است. البته در نسخه های جدیدتر HTML توصیه می شود کدهای HTML با حروف کوچک نوشته در XHTML هم نوشتن کدها با حروف کوچک الزامی است. فضای خالی هم بین تگها تأثیری ندارد. مثلاً : البته بعداً در مورد این تگ توضیح خواهیم داد در اینجا فقط برای مثال این تگ را آوردیم. موارد دیگری هم با این وضعیت وجود دارند مثلاً که برای رفتن به خط بعدی استفاده می شود، که برای ایجاد یک خط افقی به کار می رود و که برای رفتن به پاراگراف بعدی استفاده می شود. در ضمن نیاز نیست که حتماً تگها با حروف بزرگ نوشته شوند. مثلاً همان است. البته در نسخه های جدیدتر HTML توصیه می شود کدهای HTML با حروف کوچک نوشته در XHTML هم نوشتن کدها با حروف کوچک الزامی است. فضای خالی هم بین تگها تأثیری ندارد. مثلاً : برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام کد بالا همان نتیجه ای را می دهد که کد زیر دارد: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام به این طریق هم اگر نوشته شود فرقی نمی کند: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام قالب پایه ای یک فایل HTML مانند زیر است. ببینید می توانید کاری را که تگهای این کد انجام می دهند حدس بزنید؟ البته همه آنها را بعداً توضیح می دهیم. برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام برای درک بهتر این قسمت سعی کنید تگها را به صورت جفتی در نظر بگیرید (از جایی که باز می شوند تا جایی که بسته می شوند) اولین تگ است که علامت شروع یک متن HTML است و تگ پایانی آن است که همانطور که ممکن است حدس زده باشید نشانه پایان متن HTML است. هر چیزی در HTML باید بین این دو تگ قرار گیرد. مانند متن، دیگر تگها، عکسها و... چون این دو تگ نشان دهنده آغاز و پایان صفحه شما هستند. تگ بعدی است. این تگ مشخص کننده بخشی است که شما باید عنوان صفحه، کلمات کلیدی، و دیگر توضیحات خود برای این صفحه را در آن قرار دهید. این بخش با 4 نقل قول لینک به دیدگاه
mona_serendipity 4,365 مالک اشتراک گذاری ارسال شده در 15 شهریور، ۱۳۸۸ نوشتن متن ها به صورت ضخیم، مورب، زیر خط دار و خط خورده در این درس به کار با متنها می پردازیم. ابتدا با این تگ شروع می کنیم: 1-Bold این تگ باعث می شود کلماتی که بین این تگ و تگ پایانی آن قرار دارند به صورت پر رنگ و بولد (Bold) دیده شوند. به مثال زیر توجه کنید: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام مثال بالا به صورت زیر دیده می شود: متنی که اینجا قرار بگیرد به صورت بولد نمایش داده می شود بیایید با تگهای دیگری ادامه دهیم: 2- زیرخط (Underline): برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام این هم نتیجه: این متن با زیر خط مشاهده می شود 3- حروف کج (Italic): برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام [/b]و نتیجه به این صورت است: این متن به صورت مورب دیده می شود 4- حروف خط خورده: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام 5- وسط چین: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام نتیجه کد: این متن در وسط خط نوشته می شود شما می توانید بیشتر از یک فرمان را برای یک متن اجرا کنید. مثلاً وقتی که می خواهید متنی به صورت پر رنگ و کج نوشته شود. برای این کار هر دو تگ ابتدایی را برای متن در ابتدای آن و تگهای پایانی را در جایی که می خواهیم پایان پر رنگی و کجی متن باشد قرار می دهیم. با این مثال توجه کنید: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام نتیجه هم به این صورت دیده می شود: این متن به صورت کج و پر رنگ دیده می شود آیا ترتیب قرار گرفتن تگهای پایانی مهم است؟ در پاسخ باید گفت در مثال بالا خیر، اما مواردی وجود دارد که ترتیب قرار گرفتن تگها مهم است مثلاً قرار گرفتن تگ پایانی قبل از 4 نقل قول لینک به دیدگاه
mona_serendipity 4,365 مالک اشتراک گذاری ارسال شده در 15 شهریور، ۱۳۸۸ نوشتن سر فصلها و پاراگراف در HTML از تگهای سر فصل (HEADING) برای تیتر و عنوان مطالب استفاده می شود. به این مثالها توجه کنید: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام سرفصل بزرگ برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام سرفصل 2 برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام سرفصل 3 برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام در حال کوچک شدن برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام کوچکتر برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام بسیار کوچک از دستورات بالا می توانید برای عنوان مطالب استفاده کنید. وقتی که تگ در متنی وارد می شود بقیه آن خط به خط بعد منتقل می شود. در حقیقت تگ یا همان Line Break کاری مشابه فشردن کلید Enter به همراه Shift را انجام می دهد. قابل ذکر است که این تگ نیازی به تگ پایانی ندارد. به یک مثال توجه کنید: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام نتیجه مثال بالا به اینگونه است: This is the first line Here is the second line مرورگر اصولاً تا وقتی که به کمبود فضا برای یک خط بر نخورد به خط بعدی نمی رود. اما تگ مرورگر را مجبور می کند به خط بعدی برود.مثلاً متن زیر را در ویرایشگر متن خود بنویسید و به صورت html ذخیره کنید، فقط یک خط را در مرورگر خود خواهید دید: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام نتیجه به این صورت خواهد بود: من، یک خط جدید می خواهم برای اینکه نتیجه ای مشابه متن نوشته شده در ویرایشگر متن داشته باشیم، باید متن را به این صورت بنویسیم: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام این هم نتیجه: من، یک خط جدید می خواهم تگ پاراگراف است. این تگ باعث ایجاد یک فضای خالی عمودی بین دو خط در دو پاراگراف می شود. درست مثل اینکه شما را دو بار تایپ کنید.از این تگ در اول پاراگراف برای تمایز دو پاراگراف استفاده می شود. به مثال زیر توجه کنید: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام و نتیجه به این صورت است: خط اول از پاراگراف اول خط دوم از پاراگراف اول این هم پاراگراف جدید تگ پاراگراف هم نیازی به تگ پایانی ندارد. اما شما می توانید برای فهم بهتر آنرا در متن خود به کار ببرید. مثلاً به این صورت: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام این متن همان نتیجه ای را دارد که متن زیر دارد: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام این هم نتیجه هر دو متن بالا: پاراگراف اول پاراگراف دوم ادامه پاراگراف دوم البته اگر می خواهید صفحه ای که طراحی می کنید معتبر باشد بهتر است از تگ پایانی پاراگراف استفاده کنید. استفاده از تگ پایانی در XHTML الزامی است. تا اینجا شما می توانید یک صفحه وب پر از متن را بنویسید. در درس بعد به اندازه فونت و رنگ متن می پردازیم. 4 نقل قول لینک به دیدگاه
mona_serendipity 4,365 مالک اشتراک گذاری ارسال شده در 15 شهریور، ۱۳۸۸ کار کردن با فونتها و رنگ و اندازه آنها در این قسمت از درس به سراغ کار با فونتها و اندازه آنها می رویم. اندازه فونت را می توان با دستور زیر تعیین کرد: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام به جای «x» عددی با علامت منفی یا مثبت قرار می گیرد. وقتی که می خواهیم یک متن بزرگتر دیده شود از علامت مثبت و زمانی که می خواهیم متن کوچکتر شود از علامت منفی استفاده می کنیم. به مثال زیر توجه کنید: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام این هم نتیجه تغییر سایز فونت: این متن بزرگتر دیده می شود برای کوچکتر کردن متن نیز به همین صورت عمل می کنیم: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام این هم متن کوچک شده: این متن کوچکتر دیده می شود این هم تعدادی مثال برای درک بهتر مطالب: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام برای تغییر رنگ متنها نیز می توانیم به روش زیر عمل کنیم، با این فرمان : برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام می توانیم رنگ مورد نظر خود را با نام انگلیسی آن در فرمان بالا قرار دهیم یا از معادل هگزا دسیمال رنگ به جای اسم رنگ استفاده کنیم. برای شروع با اسم رنگ شروع می کنیم: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام متن نهایی: متن مورد نظر حالا از معادل هگزا دسیمال رنگ قرمز به جای نام رنگ استفاده می کنیم. البته استفاده از اسم رنگها ساده تر است اما شما ممکن است بخواهید از رنگهای پیچیده تری استفاده کنید.در مورد رنگ قرمز باید به این صورت عمل کنیم: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام در اینجا نتیجه با مثال قبلی یکسان است: متن مورد نظر معادل هگزا دسیمال رنگها را باید با علامت # شروع کرد و بعد از این علامت شش حرف یا عدد دیگر قرار می گیرد. برای رنگ قرمز بعد از علامت # دو F و چهار صفر قرار می گیرد. فرض کنید می خواهید رنگ و اندازه متنی را همراه با هم تغییر دهید. برای این کار می توانید از دو تگ استفاده کنید. اما به خاطر داشته باشید که هر دو را ببندید. مانند زیر: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام متن بزرگ و طلایی همچنین می توانید از شناسه های size و color در یک تگ استفاده کنید. مانند زیر: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام متن بزرگ و طلایی شما می توانید رنگ فونت را در تگ body تعریف کنید که بعداً به آن می پردازیم. 5 نقل قول لینک به دیدگاه
mona_serendipity 4,365 مالک اشتراک گذاری ارسال شده در 15 شهریور، ۱۳۸۸ کاراکترهای ویژه، علامتهایی که نمی توان آنها را با صفحه کلید تایپ کرد آیا تا به حال موقعیتی پیش آمده که بخواهید بین دو کلمه فاصله بیشتری وجود داشته باشد. یا بخواهید علامت کپی رایت را نشان دهید. این کاراکتر های ویژه با استفاده از کدهای ویژه در صفحه شما قرار می گیرند. این کدهای ویژه با علامت & (امپرسند) شروع می شوند و با تعدادی حرف یا عدد ادامه پیدا می کنند و با ; (نقطه ویرگول) پایان می یابند. برای مثل زمانی که شما می خواهید بین دو کلمه فضای خالی اضافی بگذارید باید از کد ;nbsp& استفاده کنید که فضای خالی اضافه می کند. مطابق مثال زیر: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام نتیجه به این صورت خواهد بود: کلمه اول کلمه دوم فاصله اول بین کلمات با فشار دادن دکمه Space ایجاد می شود. مرورگر فاصله اول را تشخیص می دهد اما بعد از آن هر تعداد فاصله که باشد تفاوتی نمی کند و شما فقط یک فاصله را در مرورگر می بینید. افزودن کد ;nbsp& مرورگر را مجبور می کند تا بین دو کلمه فاصله اضافی بگذارد. شما با تکرار این کد می توانید به هر تعداد که بخواهید فاصله خالی ایجاد کنید.مانند زیر: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام کلمه اول کلمه دوم این فرمان چهار فضای خالی اضافی بین دو کلمه ایجاد می کند. و در مجموع پنج فضای خالی داریم. بحث بعدی ما علامت کپی رایت است. شما می توانید به همان روشی که برای فضای خالی اضافی ایجاد کردیم این علامت را نیز به وجود بیاورید. یعنی با استفاده از کد آن. کد علامت کپی رایت این است: ;copy& به این مثال توجه کنید: برای مشاهده این محتوا لطفاً ثبت نام کنید یا وارد شوید. ورود یا ثبت نام متن نتیجه: this page Copyright © 2007 by me روش کار برای تمامی کاراکترهای ویژه به همین صورت است فقط کد آنها را در متن HTML قرار دهید. 6 نقل قول لینک به دیدگاه
YEK SHEYKHE BOZORG 77 اشتراک گذاری ارسال شده در 21 خرداد، ۱۳۸۹ الله html بدون css مثل یه آدم بدون لباسه !! 3 نقل قول لینک به دیدگاه
ارسال های توصیه شده
به گفتگو بپیوندید
هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .