آموزش شامل 10 قسمت به شرح زیر می باشد : --------------------- قسمت اول : تگ چیست؟ / چه چیزی احتیاج داریم ؟ / ساخت اولین صفحه وب / html یا htm / سرفصل و یا Head line / پاراگراف / پیوند و یا لینک ها / تصاویر /عناصر HTML / تگ های HTML تو در تو / تگهای پایانی را فراموش نکنید / عناصر HTML حرف بزرگ یا کوچک -------------------- قسمت دوم : تواناییها و خصوصیات عناصر HTML / تگهای had line و یا سر فصلها / اهمیت تگهای head line / تگهای خط کشی و یا خط (line) / نوشتن تو ضیحات برای کد های HTML / گونه کد های HTML یک صفحه وب را ببینیم؟ / تگهای پاراگراف (paragraph) / تگ های شکستن خط (line breaks) / تگ های نوع نمایش نوشته ها / -------------------- قسمت سوم : style ها / style چیست؟ / تغیر رنگ back Ground / پس زمینه با استفاده از style ها / تغییر font نوشته ها با استفاده از style ها / تغییر نوع چینش نوشته ها -------------------- قسمت چهارم : link, Anchors , Hyper Link لینکها و یا پیوند ها / لینک های خارجی / لینک های داخلی / نشانه ها -------------------- قسمت پنجم : وارد کردن تصاویر در صفحات html / تنظیم محل قرار گیری (align) / و alt چیست؟ -------------------- قسمت ششم : table ها / طول و عرض table ها / خصوصیات border/و align و یا چینش در سطرها و ستون ها / table های تو در تو / background color (رنگ پس زمینه جدول ) -------------------- قسمت هفتم : لیست ها -------------------- قسمت هشتم : style sheet چیست؟ / نحوه استفاده از چگونه است؟/ آ شنایی با تگ Head و خصوصیات ان / تگ head چیست؟ -------------------- قسمت نهم : نگ meta چیست و نحوه تنظیم آن چگونه است ؟ / فواید تگ meta و نحوه تنظیم آن چگونه است ؟ / تفاوت مابین تگهای meta با خاصیت HTTP-EQULV و NAME ؟ -------------------- قسمت دهم : HTTP headers چیست ؟ / چگونگی استفاده از اسکریپت ها در صفحات وب / تگ <noscript> / -------------------- منبع:ویکی وی بی
پاسخ : ..: آموزش جامع html از مقدماتی تا پیشرفته |::.. درود خوب دوستان در این پست آموزش رو شروع نمیکنم فقط میخوام بهتون سایتی برای کدنویسی و مشاهده آنلاین نتیجه اون رو معرفی کنم البته شما میتونید توی notepad کدتون رو بنویسید و با فرمت .html ( یا .htm ) ذخیره کنید و با کلیک روی اون نتیجه رو در مرورگرتون مشاهده کنید ولی خوب این سایت همین امکان رو بدون دردسر در اختیار ما قرار داده شما از طریق لینک زیر به صفحه کد نویسی آنلاین این سایت هدایت میشین : http://www.w3schools.com/html/tryit....=tryhtml_intro خوب همونطور که میدونید باید کد رو در قسمت Source Code تایپ کنید و با کلیک کردن روی submit code نتیجه رو در قسمت result مشاهده کنید
پاسخ : ..: آموزش جامع html از مقدماتی تا پیشرفته |::.. .: قسمت اول :. -------------------------- فهرست : تگ چیست؟ / چه چیزی احتیاج داریم ؟ / ساخت اولین صفحه وب / html یا htm / سرفصل و یا Head line / پاراگراف / پیوند و یا لینک ها / تصاویر /عناصر HTML / تگ های HTML تو در تو / تگهای پایانی را فراموش نکنید / عناصر HTML حرف بزرگ یا کوچک -------------------------- تگ چیست؟ تگها کلماتی هستند که به وسیله یک جفت علامت <> احاطه شده اند ماننده <html> و معمولا به صورت یک جفت میباشند مانند <b> و <b/> اولین تگ ( تگ ابتدایی) و دومین تگ (تگ انتهایی ) نامیده میشود . تگ ابتدایی تگ شروع و یا تگ باز و تگ انتهایی تگ پایانی و یا تگ بسته نیز نامیده میشود منظور از یک مرورگر وب مانند internet explorer و firefox وسیله ایست برای خواندن کد های HTML و ترجمه و نمایش آنها به صورت صفحات وب یک مرورگر تگ ها را نشان نمی دهد بلکه انها صفحه وب استفاده میکند در زیر میتوانید نمونه ای از کد های HTML را ببینید : کد: [COLOR=#000080]<html>[/COLOR] [COLOR=#000080]<body>[/COLOR] [COLOR=#000080]<h1>[/COLOR] wikivb.ir [COLOR=#000080]</h1>[/COLOR] [COLOR=#000080]<p>[/COLOR] مرجع تخصصی و رایگان ویبولتین [COLOR=#000080]</p>[/COLOR] [COLOR=#000080]</body>[/COLOR] [COLOR=#000080]</html>[/COLOR] متن بین <html>و <html/> صفحه وب را مشخص میکند و متن <body> و <body/> قسمت قابل روت یک صفحه وب را نشان میدهد متن بین <h1> و <h1/> به صورت یک سر فصل نمایش داده مشود و متن بین <p> و <p/> به صورت یک پاراگراف نمایش داده میشود چه چیزی احتیاج داریم ؟ شما برای یادگیری HTML احتیاج به هیچ نرم افزر پیچیده ای ندارید در این خود آموز ما از نرم افزر notepad موجود در windows برای نوشتن و ویرایش کد های HTML استفاده میکنیم و اعتقاد داریم که این بهترین راه برای یاد گیری HTML میباشد . کد نویسان حرفه ای از نرم افزار های front page و dream weaver و notepad++ برای تولید صفحات وب استفاده میکنن ساخت اولین صفحه وب برای شروع شما نرم افزار notepad خود را از ادرس accessories<program<start باز کنید و متن زیر را درون آن بنویسید تذکر خیلی مهم::: اگر میخواین HTML یاد بگیرین باید عادت کنید به تایپ کردن.متن زیر رو کپی نکنید.تا وقتی که خودتون تایپ نکنید چیزی یاد نمیگیرین کد: [LEFT][COLOR=#0000ff][B] [COLOR=#000080]<html>[/COLOR] [COLOR=#000080]<body>[/COLOR] [COLOR=#000080]<h1>[/COLOR] this is my main page[COLOR=#000080]</h1>[/COLOR] [COLOR=#000080]<p>[/COLOR]this is some test [COLOR=#000080]</p>[/COLOR] [COLOR=#000080]<p>[/COLOR][COLOR=#008000]<a href=[COLOR=#0000FF]"http://wikivb.ir"[/COLOR]>[/COLOR] [URL="http://wikivb.ir"]wikivb[/URL] [COLOR=#008000]</a>[/COLOR][COLOR=#000080]</p>[/COLOR] [COLOR=#000080]</body>[/COLOR] [COLOR=#000080]</html>[/COLOR][/B][/COLOR][COLOR=#0000ff][/COLOR][/LEFT] ( اینجا به خاطر جلوگیری از به هم ریختگی کد ها انگلیسی نوشتم wikivb ، که شما میتونید فارسی بنویسید ویکی وی بی، مشکلی در کد ایجاد نمیکنه اما جایی که URL نوشته میشه قاعدتا باید انگلیسی باشه ) پس از اتمام ، نوشته مورد نظر خود را با پسوند های htm و یا HTML با نام wikivb page1 ذخیره کنید این اولین صفحه وب ساخته شده توسط شما است ...
پاسخ : ..: آموزش جامع html از مقدماتی تا پیشرفته |::.. ادامه آموزش قسمت اول ... htm یا html ؟ برای ذخیره یک صفحه وب شما باید یکی از این پسوند ها را انتخاب کنید htm.html در عمل این دو پسوند تفاوتی با هم ندارند . htm یک پسوند قدیمیست و مربوط به زمانی است که پسوند ها از 3 حرف تشکیل میشوند ولی امروزه بهتر است از پسوند html استفاده کنیم اگر احتمالا مطالبی که تا کنون برای شما گفته شده مبهم بوده است احساس نگرانی نکنید زیرا در قسمت های بعدی توضیحات بیشتری خواهیم داشت برای یاد گیری بهتر از چندین مثال استفاده میکنیم سرفصل و یا head line کد: [LEFT][COLOR=#0000ff][B] [COLOR=#000080]<html>[/COLOR] [COLOR=#000080]<body>[/COLOR] [COLOR=#000080]<h1>[/COLOR] this is heading [COLOR=#000080]</h1>[/COLOR] [COLOR=#000080]<h2>[/COLOR] this is heading [COLOR=#000080]</h2>[/COLOR] [COLOR=#000080]<h3>[/COLOR] this is heading [COLOR=#000080]</h3>[/COLOR] [COLOR=#000080]</body>[/COLOR] [COLOR=#000080]</html>[/COLOR][/B][/COLOR][COLOR=#0000ff][B][FONT=tahoma][/FONT][/B][/COLOR][/LEFT] سرفصلها توسط تگ های <h1> تا <h6> علامت گذاری میشود پاراگراف کد: [LEFT] [COLOR=#000080]<p>[/COLOR] this is heading [COLOR=#000080]</p>[/COLOR] [COLOR=#000080]<p>[/COLOR] this is heading test [COLOR=#000080]</p>[/COLOR][COLOR=#0000ff][/COLOR][/LEFT] پاراگراف ها توسط تگهای <p> علامت گذاری میشود پیوند ها و یا لینک ها کد: [LEFT][COLOR=#0000ff][B] [COLOR=#008000]<a href=[COLOR=#0000FF]"www.wikivb.ir"[/COLOR]>[/COLOR] WiKiVb.iR [COLOR=#008000]</a>[/COLOR][/B][/COLOR][COLOR=#0000ff][/COLOR][/LEFT] link ها و یا پیوند ها توسط تگ <a> علامت گذاری میشود این تگ ها دارای نشانه هایی میباشد که در قسمت های بعدی توضیح داده خواهد شد . تصاویر کد: [LEFT] [COLOR=#800080]<img src=[COLOR=#0000FF]"wikivb.gif"[/COLOR] width"104" height=[COLOR=#0000FF]"142"[/COLOR]/>[/COLOR][COLOR=#0000ff][/COLOR][/LEFT] تصاویر توسط تگ </img> علامت گذاری میشوند که دارای نشانه ها و تفاوت هایی با 3 تگ قبلی است که در ادامه توضیح داده میشود (ماننده نام و اندازه تصاویر ) عناصر HTML عناصر HTML اجزاء سازنده یک مجموع HTML هستند .عنصر HTML یعنی هر چیزی که بین تگ ابتدایی و انتهایی وجود دارد تگ شروع تگ باز و تگ پایانی تگ بسته نیز نامیده میشود عناصر و یا اجزاء یک مجموعه HTML دارای نظام و قواعد خاصی هستند که تعدادی از انها در زیر گفته میشود عناصر HTML با یک تگ باز شروع می شود . عناصرHTML با یک تگ بسته به پایان میرسد. محتوای عناصر در بین تگهای ابتدایی و انتهایی قرار میگیرد. بعضی از عناصر HTML محتوایی ندارن . این عناصر در تگ ابتدایی بسته میشود ماننده </br> بعضی از عناصرHTML دارای مشخصات و توانایی هایی هستند. البته در مورد توانایی های و مشخصات عناصر HTML در ادامه به صورت کامل توضیح داده خواهد شد. تگهای HTML تو در تو تگهای HTML معمولا توسط تگهای احاطه شده اند و از قانون خاصی پیروی می کنند به این صورت که تگ ابتدا در آخر بسته میشود این بدین معنا ست که تگی که جلو تر از همه تگها باز میشود باید در آخر همه آنها بسته شود برای درک بهتر این مطلب به مثال زیر توجه کنید کد: [/FONT][/B][/COLOR][LEFT][COLOR=#0000ff][B] [COLOR=#000080]<html>[/COLOR] [COLOR=#000080]<body>[/COLOR] [COLOR=#000080]<p>[/COLOR] site wikivb.ir [COLOR=#000080]</p>[/COLOR] [COLOR=#000080]</body>[/COLOR] [COLOR=#000080]</html>[/COLOR][/B][/COLOR][COLOR=#0000ff][B][FONT=tahoma] [/FONT][/B][/COLOR][/LEFT] در این مثال تگ <html> در ابتدای همه تگها باز شده است و در انتهای همه انها با <html/> بسته شده . محتوای تگ <html> تگهای <body> و <p> هستند تگ <body> که بعد از آن باز شده قبل از ان با <body/> بسته شده است . محتوای تگ <body> که در واقع بدنه و قسمت قابل رویت یک صفحه HTML است در این مثال یک تگ <p> است در مورد تگ <p> هم این موضوع تکرار شده است تگ های پایانی را فراموش نکنید کد: [LEFT][COLOR=#0000ff][B] [COLOR=#000080]<p>[/COLOR] taakforum.com[/B][/COLOR][COLOR=#0000ff][B][FONT=tahoma][/FONT][/B][/COLOR][/LEFT]
پاسخ : ..: آموزش جامع html از مقدماتی تا پیشرفته |::.. .: قسمت دوم :. -------------------------------------- تواناییها و خصوصیات عناصر HTML / تگهای had line و یا سر فصلها / اهمیت تگهای head line / تگهای خط کشی و یا خط (line) / نوشتن تو ضیحات برای کد های HTML / چگونه کد های HTML یک صفحه وب را ببینیم؟ / تگهای پاراگراف (paragraph) / تگ های شکستن خط (line breaks) / تگ های نوع نمایش نوشته ها / -------------------------------------- تواناییهای و خصوصیات عناصر HTML حالا به تفصیل به تواناییهای بعضی از عناصر HTML میپردازیم . هر عنصر HTML دارای تواناییها و خصوصیتهایی مباشد . این خصوصیت ها یک سری اطلاعات اضافه و تکمیلی در مورد هر عنصر HTML. اطلاعات در بین تگ های ابتدایی ماننده کد: [LEFT] [COLOR=#0000ff][FONT=tahoma][B] <a href="http://www.wikivb.ir"> wikivb </a> [/B][/FONT][/COLOR][COLOR=#0000ff][FONT=tahoma][/FONT][/COLOR][/LEFT] در اینجا شما نمونه ای از عناصر HTML به همراه توضیحاتی تکمیلی را می بینید که در بین یک جفت " " قرار گرفته است. تگهای head line و یا سر فصلها سرفصلها توسط تگهای h1 تا h6 علامت گذاری میشوند تگ h1 باعث ایجاد اندازه بزرگتری نسبت به h6 می شود کد: [LEFT] [LEFT][COLOR=#0000ff][FONT=tahoma][B] <h1> wikivb </h1> <h2> [/B][/FONT][B]wikivb[/B][FONT=tahoma][B] </h2> <h3> [/B][/FONT][B]wikivb[/B][FONT=tahoma][B] </h3> <h4> [/B][/FONT][B]wikivb[/B][FONT=tahoma][B] </h4> <h5> [/B][/FONT][B]wikivb[/B][FONT=tahoma][B] </h5> <h6> [/B][/FONT][B]wikivb[/B][FONT=tahoma][B] </h6>[/B][/FONT][/COLOR] [/LEFT] [COLOR=#0000ff][FONT=tahoma][/FONT][/COLOR][/LEFT] مرورگر ها به صورت اتو ماتیک یک خط فاصله بعد از این تگها ایجاد میکند. اهمیت تگ های head line از این تگ ها برای بزرگ و یا کوچک کردن نوشته ها استفاده نکنید بلکه برای موضوعات پر اهمیت از انها استفاده کنید و موضوعات و نوشته های پر اهمیت را داخل انها قرار دهید . موتور های جستجو مانند گوگل و یاهو برای پی بردن به موضوع وب سایت و صفحه وب سایت شما از نوشته هایی که داخل این تگ ها وجود دارد استفاده میکنند ترتیب اهمیت این تگ هابه ترتیب بیشتر از h1 به h6 می رسد تگهای خط کشی و یا خط (line) تگ </hr> برای کشیدن خط های افقی استفاده میشود کد: [/B][/FONT][/COLOR][LEFT] [COLOR=#0000ff][FONT=tahoma][B]<h1> [/B][/FONT][B]wikivb[/B][FONT=tahoma][B] </h1> <hr/> <h2> [/B][/FONT][B]wikivb[/B][FONT=tahoma][B] </h2> <hr/> <h3> [/B][/FONT][B]wikivb [/B][FONT=tahoma][B]</h3> <hr/> <h4> [/B][/FONT][B]wikivb[/B][FONT=tahoma][B] </h4> <hr/> <h5> [/B][/FONT][B]wikivb[/B][FONT=tahoma][B] </h5> <hr/> <h6> [/B][/FONT][B]wikivb[/B][FONT=tahoma][B] </h6> [/B][/FONT][/COLOR][COLOR=#0000ff][FONT=tahoma][/FONT][/COLOR][/LEFT] نوشتن توضیحات برای کد های HTML این توضیحات باید به صورتی در درون کد های HTML قرار گیرد که توسط مرورگر ها خوانده نشود بنابر این توضیحات را به این صورت نوشته میشود کد: [LEFT] [COLOR=#0000ff][FONT=tahoma][B]<!-- اينجا محل نوشتن توضيحات هست -->[/B][/FONT][/COLOR][COLOR=#0000ff][FONT=tahoma][/FONT][/COLOR][/LEFT] این نوشته ها توسط مرورگر ها خوانده نمی شوند علامت تعجب فقط در ابتدا قرار میگیرد و در پایان نمی اید چگونه کد های HTML یک صفحه وب را ببینیم ؟ برای این کار شما میتوانید در صفحه مرورگر تان گزینه view را از نوار ابزار انتخاب کنید و سپس گزینه view source و یا source را انتخاب کنید در این حالت یک پنجره جدید باز میشود که کد های HTML را به شما نشان میدهد .
پاسخ : ..: آموزش جامع html از مقدماتی تا پیشرفته |::.. ادامه آموزش قسمت دوم ... تگ های پاراگراف پاراگراف ها توسط تگهای <p> علامت گذاری میشن کد: [LEFT] [LEFT][COLOR=#0000ff][B]<p> this is a paragraph </p> <p> this is a another paragraph </p> [/B][/COLOR] [/LEFT] [COLOR=#0000ff][FONT=tahoma][/FONT][/COLOR][/LEFT] مرورگر ها به صورت اتو ماتیک یک خط فاصله قبل و بعد از این تگ ها ایجاد میکنن باز هم این نکته را یاد آوری میکنم که تگ های ابتدایی و انتهایی را فراموش نکنید تگهای شکستن خط برای ایجاد شکست در یک خط و رفتن به خط بعدی و ایجاد فاصله از تگ </br> که یک تگ خالی است استفاده میکنیم این نکته قابل ذکر است که کلیه فاصله ها در بین تگهای html در هنگام نمایش توسط مرورگر از بین میرود کد: [LEFT] [COLOR=#0000ff][FONT=tahoma][B]<p> this is a <br/> paragraph </p>[/B][/FONT][/COLOR] [/LEFT] به طور مثال فاصله ای که قبل از محتوای این عصر HTML وجود دارد در مروگر از بین میرود تگ های نوع نمایش نوشته ها تگ هایی ماننده <i> و <b> باعث میشوند که نوشته ها به صورت italic و یا bold نمایش داده شود این تگ ها را تگهای نوع نمایش میگویند کد: [LEFT][COLOR=#0000ff][FONT=tahoma][/FONT][/COLOR] [COLOR=#0000ff][FONT=tahoma][B]<p><b>this is a paragraph</b> </p> <p><strong>this is a paragraph</strong></p> <p><big>this is a paragraph</big></p> <p><em>this is a paragraph</em></p> <p><i>this is a paragraph</i></p> <p><small>this is a paragraph</small></p> <p> this is <sub> subscript</sub> and<sup>superscript</sup></p> [/B][/FONT][/COLOR][COLOR=#0000ff][FONT=tahoma][/FONT][/COLOR] [/LEFT] : پایان قسمت دوم آموزش :.
پاسخ : ..: آموزش جامع html از مقدماتی تا پیشرفته |::.. .: قسمت سوم :. -------------------------------------- style ها / style چیست؟ / تغیر رنگ back Ground / پس زمینه با استفاده از style ها / تغییر font نوشته ها با استفاده از style ها / تغییر نوع چینش نوشته ها -------------------------------------- style ها style چیست ؟ یکی از مهمتر ین مباحث در زمینه طراحی و کد نویسی style ها هستن به طور دقیق تر خصوصیات و تواناییهایی برای تگهای HTML میباشد و از اهمیت بسیار بالایی برخوردارند . یاد گیری style ها پیش نیازی برای یاد گیری CSS میباشد style ها ابزاری برای کنترول تمامی تگهای HTML در صفحه وب هستند . در اینجا به صورت کلی توضیحاتی در مورد style و صفحات CSS داده خواهد شد و در اینده به صورت کامل با این کد ها آشنا خواهید شد style ها به چندین روش درون صفحات وب نوشته میشود خطی و درون تگهای html تگهای <style></style> درون صفحات html صفحات خارجی با فرمت css برای آشنایی بیشتر با این موارد به ذکر چندین مثال می پردازیم .کد: کد: [LEFT] [COLOR=#0000ff][FONT=tahoma][B]<p style="background-color:yellow"></p> <h1 style="font-size:10px"></h1> <p style="font-family:times"></p> <p style="text-align:center"></p>[/B][/FONT][/COLOR][/LEFT] اینها کد هایی هستند که درون تگهای HTML نوشته میشود تغیر رنگ back Ground / پس زمینه با استفاده از style ها برای شروع به کد های زیر توجه کنید کد: [/B][/FONT][/COLOR][LEFT] [COLOR=#0000ff][FONT=tahoma][B]<html> <body style="background-color:yellow"> <h2> look: colored background!</h2> </body> </html>[/B][/FONT][/COLOR][COLOR=#0000ff][FONT=tahoma][/FONT][/COLOR][/LEFT] در قسمت body و یا بدنه صفحه وب مشاهده میکنید که از یکی style خطی استفاده شده است این کد باعث خواهد شد که پس زمینه و یا background صفحه وب شما به رنگ زرد نمایش داده بشه برای مشاهده عملی این صفحه آن را با توجه به خود آموز های قبلی بسازید تغییر font نوشته ها با استفاده از style ها در اینجا مشاهده خواهید کرد که فونت نوشته ها با استفاده از خصوصیات style ها قابل کنترول است کد: [LEFT] [COLOR=#0000ff][FONT=tahoma][B]<html> <body> <h1 style="font-family:verdana">A heading </h1> <p style="font-famile:courier new;color:red;font-size:40px;"> web site wikivb.ir </p> </body> </html> [/B][/FONT][/COLOR][COLOR=#0000ff][FONT=tahoma][/FONT][/COLOR][/LEFT] مشاهده میکنید در تگ <p> , <h1> این style ها برای تغییر نوع فونت به کار میرود تغییر نوع چینش نوشته ها در اینجا مشاهده میکنید که با استفاده از style ها نوع چینش نوشته ها را کنترول میکنیم <html> کد: <body> <h1 style="text-align:center"> [URL="http://wikivb.ir"]wikivb[/URL] </h1> <p>Ever wonder how airline jets navigate the Earth from 30,000 feet on a cloudy day? The road maps provided by Google Maps wouldn’t be that relevant after all. The fact is most flights use radio navigation or GPS to find their way, and the radio navigation beacons they use are often visible in Google’s aerial and satellite imagery. </p> </body> </html> با توجه به گستردگی در مورد style ها در اینجا به همین توضیحات اکتفا میکنیم و توضیحات بیشتر را در مورد style ها به خود آموز های بعدی موکول میکنیم .: پایان قسمت سوم آموزش :.
