i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت به کلی متفاوت و کاملتر خواهد بود، این فرآیند زمانبر و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی مشخص است و به تناوب به روزرسانی می شود.
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشند که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
article

آشنایی با HTML، زبان پایه کدنویسی وب

html

هنگامی که با مرورگر خود (به طور مثال برنامه فایرفاکس) صفحه وب (سایت، وبلاگ و...) را فراخوانی می کنیم، نتیجه معمولا به شکل کدهایی از سرور به مرورگر ارسال می شود، سپس این کدها توسط مفسر مرورگر پردازش شده و در نهایت معمولا به شکل یک صفحه جذاب و کاربردی نمایش داده می شود بدون اینکه متوجه شویم در پس این صفحه، کدنویسی منظم و استانداردی نهفته است، این کدها در واقع همان دستورات HTML (مخفف Hypertext Markup Language) هستند، زبانی که تقریبا تمام کسانی که دستی در دنیای وب دارند با آن سر و کار داشته یا لااقل اسم آن را بارها شنیده اند، HTML از زمان پیدایش (توسط Tim Berners-Lee) یعنی از سال 1980 میلادی تا امروز همواره روندی رو به رشد داشته، در اهمیت آن همین بس که حاصل کدنویسی برنامه نویسان وب (با هر زبان برنامه نویسی از جمله PHP، ASP.NET، Payton و...)،  نهایتا به صورت خروجی HTML و در مرورگر کاربران نشان داده خواهد شد، لذا نقطه آغاز یادگیری دانش برنامه نویسی وب، آموزش و فراگیری این زبان است.

HTML زبان نشانه گذاری یا Markup


قبل از اینکه وارد دنیای کدنویسی وب شویم باید بدانیم که HTML زبانی قراردادی است، هدف از ایجاد این زبان در واقع نیاز به تعریف استانداردی فراگیر جهت استفاده در شبکه وب بود که بتوان با آن صفحات اینترنتی را ساخته و در برنامه هایی تحت عنوان مرورگر، نتیجه کار را مشاهده کرد، بدین منظور HTML از علائم نشانه گذاری تحت عنوان Tag استفاده می کند (و به همین دلیل آن را Markup می گویند)، تگ در واقع نشانه ای برای یک منظور در سند HTML است، عنوان مربوط به هر تگ نیز بین علامت های <> درج می شود، به طور مثال اگر بخواهیم متنی به صورت برجسته تر از سایر متن ها نمایش داده شود، آن را درون تگ strong یا b قرار می دهیم، به فرض:
<strong>متن برجسته</strong>
به این صورت هر تگ برای منظور خاصی استفاده می شود که با درک آنها می توان یک صفحه وب کاربردی ایجاد کرد، هرچند مرورگرها به کوچک یا بزرگ بودن تگ ها اهمیتی نمی دهند اما بهتر است به جز در موارد خاص، تگ ها را به صورت حروف کوچک استفاده کنیم تا سورس کدهای تمیزتر و خواناتری داشته باشیم.

اولین صفحه وب با کدهای HTML


برنامه Notepad را باز کنید و کد زیر را در آن کپی نمائید:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | اولین صفحه HTML من</title>
<!-- Webgoo.ir -->
</head>
<body>
<h1>اولین صفحه من</h1>
<p>اولین پاراگراف من</p>
</body>
</html>
پیش نمایش
اکنون فایلتان را با پسوند html و با یونیکد UTF-8 ذخیره کنید (برای این کار از منوی File گزینه Save As را انتخاب کرده و در قسمت تعیین نام فایل، به جای پسوند txt، پسوند html را جایگزین کنید، در قسمت Encoding نیز عبارت UTF-8 را انتخاب نمائید، به طور مثال نام فایل در هنگام ذخیره سازی باید به صورت first-html-code.html باشد)، فایل را با یک مرورگر وب (مانند اینترنت اکسپلورر یا فایرفاکس) اجرا (Open) کرده و حاصل اولین کدنویسی وب خود را ببینید!
توضیح:
- با دقت در پیش نمایش نمونه کد HTML بالا ملاحظه می کنیم که مرورگرها کدهای HTML را در خروجی نمایش نمی دهند، بلکه اثر آنها بر متن و محتوا را به صورت خروجی چاپ می کنند.
- عبارت DOCTYPE html جهت تعریف نوع سند و راهنمای مرورگرهای وب در پردازش صحیح صفحه و تعیین نسخه HTML است، در نسخه های قدیمی تر HTML ممکن است این قسمت به صورت های دیگری باشد که این موضوع با توجه به هر نسخه مشخص می شود، در حال حاضر این قسمت را به همین صورت درج کنید.
- تگ head و body جز اصلی ترین تگ های HTML هستند که دربرگیرنده تگ های زیرمجموعه، عناصر مورد نیاز و محتوای درونی یک صفحه وب به شمار می روند، درون تگ head می توان از meta تگ ها استفاده کرد (در مورد متاتگ ها در آموزش های بعدی بیشتر خواهیم گفت)، همچنین خواهیم دید که در این قسمت می توان فایل های مربوط به استایل دهی CSS و کدنویسی JavaScript را وارد کرد (برای این مرحله از آموزش، صرف آشنایی با این اصطلاحات کفایت خواهد کرد، بعدها با این موارد به صورت تخصصی آشنا خواهیم شد).
- تگ title برای نمایش عنوان صفحه در مرورگر لازم است، این عنوان همان متنی است که در سربرگ مرورگر برای هر صفحه نمایش داده می شود.
- تگ h1 نشانگر سرتیتر ها است که می تواند مقادیری تا h6 داشته باشد، هرچه مقادیر عددی مقابل h بزرگتر باشد، اهمیت متن درون تگ کمتر است، به طور مثال تگ h1 مهمتر از تگ h3 است!
- تگ p در کدهای HTML نشانگر پاراگراف است، گفتیم که HTML زبان نشانه گذاری است و p در این نشانه گذاری نماینده پاراگراف است.
- اکثر تگ های HTML  به صورت جفتی بوده و با افزودن یک اسلش (/) به ابتدای تگ آغازین بسته می شوند، این تگ ها اصولا شامل محتوایی درون خود هستند، به طور مثال:
<div>آموزش مقدماتی وب</div>
البته برخی تگ های HTML نیز تکی هستند و به خودی خود بسته می شوند، به طور مثال:
<br>
<hr>
یا:
<br />
<hr />
در نسخه های پیشین HTML برای تگ های تکی مانند br، hr و... درج اسلش پایانی ضرورت داشت اما در نسخه جدید HTML (در حال حاضر نسخه 5) این محدودیت رفع شده و می توان این نوع تگ ها را بدون اسلش پایانی به کار برد.
نکته 1: همان طور که گفتیم هدف از ایجاد زبانی به نام HTML  (مخفف Hypertext Markup Language) در وب، در واقع به ضرورت ایجاد استانداردی تعریف شده برای یکسان سازی و سهولت کار برمی گردد، این زبان توسط کنسرسیوم جهانی وب یا W3C توسعه یافته و امروزه تبدیل به استانداردی فراگیر گشته است که توسط انواع مختلف مرورگرها و واسطه های کاربری در دستگاه ها و پلتفرم های مختلف (کامپیوتر، تلفن همراه و...) قابل پردازش است.
نکته 2: HTML در حقیقت یک زبان برنامه نویسی نیست بلکه بیشتر شبیه یک قرارداد با پیروی از اصولی منظم است (HTML زبان نشانه گذاری یا Markup است)، چرا که محدود به تگ ها و دستور عمل های خاصی است و خارج از چارچوب تعریف شده خود، قدرت مانور ندارد (HTML قادر به تصمیم گیری و شرط گذاری به آن صورت که در زبان های برنامه نویسی دیده می شود نیست)، اما از این جهت که زبان تفهیم خواسته های برنامه نویس از مرورگر تلقی می شود اهمیت زیادی دارد، یعنی وقتی در وب برنامه ای به یک زبان که در سرور اجرا می شود (مانند PHP) می نویسیم، هدف هر چه که باشد نهایتا معمولا باید خروجی خود را در بستر HTML به مرورگر انتقال دهیم، در واقع مرورگرها فقط زبان HTML را درک می کنند و با پردازش کدهای آن، نتیجه دلخواه را نمایش می دهند.
sectionدسته بندی: آموزش مقدماتی » HTML
related مطالب بیشتر:
» لایه بندی در html با تگ div و span
» آشنایی با مفهوم Semantic در HTML
» نحوه ایجاد لینک در HTML
» کاربرد تگ img و نمایش تصاویر در HTML
» کار با تگ های ایجاد کننده لیست در HTML
commentنظرات (۵۵ یادداشت برای این مطلب ارسال شده است)
نویسنده: علی
زمان: ۰۱:۴۴:۳۳ - تاریخ: ۱۳۹۴/۰۸/۲۰
سلام، با تشکر از زیبایی و فصاحت آموزشتون یک سوال داشتم که جای بهتری برای پرسیدن در سایت پیدا نکردم برای همین عذر میخوام و اگر امکان باشه پاسخ بدین بی نهایت ممنون میشم، میخواستم ببینم ساختار کلی ساخت یک سایت مثلا خبری مثل فارس نیوز یا خبرآنلاین به چه صورت هست؟ فکر نمیکنم از اول تا آخر کد نویسی باشه درسته؟ آیا از بسته های آماده استفاده میکنن؟ و اینکه پایگاه داده و پنل مدیریت یا سردبیر و ... برای ارسال محتوا به سایت چطوری میسازن؟ شرمنده طولانی شد خیلی گشتم ولی هیچکس مثل شما استادانه در مورد وب توضیح نداده بود
پاسخ: 
سوالتان کلی است و پاسخ مشخصی نمی توان ارائه کرد، صرفا جهت اطلاعات بیشتر:
برای ساخت یک سایت خبری و... به چند روش می توان اقدام کرد:
- برخی افراد ترجیح می دهند از CMS های آماده مانند وردپرس، جوملا و... استفاده کنند، CMS ها برنامه های مدیریت محتوا هستند که به صورت پیش فرض امکانات اولیه برای راه اندازی یک سایت (در حد معمول) را فراهم می کنند، اما اگر یک برنامه نویس و توسعه دهنده وب و آشنا به زبان های PHP یا ASP.NET و... باشید، می توان برای همین CMS ها امکانات سفارشی جدیدی متناسب با نیاز خود تعریف کرد، اگرچه این شیوه امکان مانور کمتری در اختیار برنامه نویس می گذارد، اما در مواقعی که زمان اهمیت بیشتری دارد یا امکانات اختصاصی ویژه نیاز نیست می تواند به کار بیاید.
- شکل دیگر ایجاد این نوع سایت ها استفاده از سیستم های خودنوشت (خرید سیستم های اختصاصی از شرکت های برنامه نویسی یا نوشتن کدها و طراحی سیستم توسط خود برنامه نویسان) است که در اینجا به دانش بالای برنامه نویسی وب و تجربه کافی در طراحی ساختار دیتابیس، رابط کاربری و... نیاز است، اگرچه در این قسمت نیز ممکن است در بخش های مختلف سیستم از کدها و پلاگین های آماده و از قبل نوشته شده استفاده شود، اما نقش عمده کار باید توسط یک برنامه نویس انجام و همچنین توسط طراح وب، پیاده سازی شود (این کارها را یک فرد مجرب به تنهایی نیز می تواند انجام دهد!).
نکته: در حال حاضر سایت های خبری وب عمدتا توسط تیم های برنامه نویسی نوشته و پشتیبانی می شوند.
نویسنده: توحید
زمان: ۲۰:۴۱:۳۸ - تاریخ: ۱۳۹۴/۰۹/۰۸
سلام عزیز من میخوام کد نویسی رو شروع کنم ولی هیچ اطلاعاتی ندارم و میخوام اموزشش رو ببینم. لطفا اگه امکانش هست راهنمایی کنید که من چطور میتونم اموزشاتو شروع کنم چه چیزهایی رو تهیه کنم. از کجا کتاب یا دیویدی برای اموزشش هست از کجا تهیه کنم ممنون میشم اگه راهنماییم کنید.
پاسخ: 
برای یادگیری کدنویسی وب، منابع موجود در اینترنت کفایت می کند و تقریبا نیاز به هیچ منبع خاصی نیست، البته یک کتاب ساده و روان می تواند به فهم بهتر مطالب کمک کند، برای شروع نیز می توانید مباحث مقدماتی را به ترتیب ذکر شده در منوی سایت انتخاب کنید.
نویسنده: sam
زمان: ۱۷:۳۵:۴۲ - تاریخ: ۱۳۹۴/۰۹/۲۵
درود بر شما
من برنامه نویسی وبلاگم رو در سایت
https://validator.w3.org/#validate_by_uri+with_options
چک کردم و با خطاهایی مواجه شدم که Use CSS instead رو بیان میکرد. چکار باید انجام بدم؟
پاسخ: 
همان طور که از متن خطا مشخص است یک سری تگ ها یا خصوصیات HTML در کدنویسی قالب وبلاگ استفاده شده که باید به جای آن، در استایل CSS و به فرض به صورت کلاس تعریف شوند، به طور مثال ویژگی color در تگ HTML نباید استفاده شود و در عوض باید در استایل CSS از آن استفاده کنیم.
شیوه غلط:
<font color="#ff0000">متن نمونه!</font> 
شیوه صحیح:
<style type="text/css">
.font{
color:#ff0000;
}
</style>
<span class="font">متن نمونه!</span>
نویسنده: lll
زمان: ۱۷:۱۴:۱۹ - تاریخ: ۱۳۹۴/۱۰/۲۷
سلام با تشکر از مطالب بدرد بخورتان
من یک سوال داشتم چگونه می توانیم وب را در اینترنت بیاوریم یعنی اگر نام آن را در مرورگر سرچ کنیم بیاید
با تشکر
پاسخ: 
سوالتان واضح نیست! برای پیدا کردن آدرس یک صفحه وب (وبلاگ، سایت و...) کافی است از موتورهای جستجویی مانند گوگل استفاده کنید.
نویسنده: amir hossein
زمان: ۱۷:۳۸:۱۲ - تاریخ: ۱۳۹۴/۱۰/۲۷
خیلی ممنون بابت راهنمایی تون خیلی خوب بود
نویسنده: سیمین
زمان: ۱۸:۲۳:۲۹ - تاریخ: ۱۳۹۵/۰۱/۲۸
سلام من این قسمت متن رو نفهمیدم چرا استفاده کردین
"-//W3C//DTD XHTML 1.0 Transitional//EN" 
و این یکی
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
و
<html xmlns="http://www.w3.org/1999/xhtml">
پاسخ: 
لطفا در وب عبارت "چرا و چگونه از DOCTYPE در HTML استفاده کنیم؟" را جستجو نمائید.
نویسنده: mohammad
زمان: ۰۹:۳۸:۵۳ - تاریخ: ۱۳۹۵/۰۵/۱۹
سلام سایت خوبی دارید
نویسنده: علی
زمان: ۱۹:۴۴:۲۶ - تاریخ: ۱۳۹۵/۱۰/۱۱
سلام خواستم بدانم اگر بخوام هشت صحفه درست کنم و مثلا از صحفه یک برم صحفه سه یا دوباره برگردم همان صحفه اول از چه دستوری استفاده کنم
پاسخ: 
اگر صفحات شما (فرمت فایل) به صورت HTML است، با استفاده از تگ a می توانید بین صفحات مختلف لینک ایجاد کنید، اما اگر منظور ایجاد صفحه بندی حرفه ای است، باید با برنامه نویسی PHP آشنا باشید!
نویسنده: پارسا
زمان: ۱۰:۳۵:۳۹ - تاریخ: ۱۳۹۵/۱۱/۲۱
ممنون بابت آموزش خوبتون، خیلی عالی بود مخصوصاً برای افراد مبتدی و من سایتتون رو برای دوستانی که میدونستم در حال آموزش اچ تی ام ال هستند معرفی کردم.
نویسنده: محمد
زمان: ۲۰:۵۲:۰۷ - تاریخ: ۱۳۹۶/۰۲/۱۸
واقعا عالی بود
paged صفحه 4 از 4




more لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

6 × 6
 refresh
آگهی
رنگین کمان عکس
Ranginkamaan.com

آرشیو عکس های باکیفیت با موضوعات متنوع...
پرشین آی تی
Persianit.net

آموزش و دانلود پروژه های برنامه نویسی سی شارپ (#C)