parsgreen.com
article

آشنایی با HTML، زبان پایه برنامه نویسی وب

html

اچ تی ام ال (HTML) یا hypertext markup language، زبانی است که تقریبا تمام کسانی که دستی در دنیای وب دارند با آن آشنا هستند یا لااقل اسم آن را بارها شنیده اند، زبانی که به جرات می توان گفت یکی از آسان ترین و کاربردی ترین ها در جهان است که  از سال 1980 میلادی تا امروز همواره روندی رو به رشد داشته،  در اهمیت آن همین بس که حاصل کدنویسی برنامه نویسان وب،  نهایتا به صورت خروجی HTML  و در مرورگر کاربران نشان داده خواهد شد؛ لذا نقطه آغاز یادگیری برنامه نویسی  وب، آموزش این زبان است، برای آشنایی بیشتر چند تگ ساده را در ادامه بررسی می کنیم.

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


برنامه Notepad را باز کنید و کد زیر را در آن کپی نمائید:
<!DOCTYPE html PUBLIC "-//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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>وبگو | اولین صفحه html من</title>
<!-- http://webgoo.ir -->
</head>
<body>
<h1>اولین صفحه من</h1>
<p>اولین پاراگراف من</p>
</body>
</html>
پیش نمایش
اکنون فایلتان را با پسوند html و با یونیکد utf-8 ذخیره نمائید (برای این کار به جای پسوند txt، پسوند html را جایگزین کنید و در قسمت Encoding عبارت UTF-8 را انتخاب کنید)، حاصل اولین کدتان را در یک مرورگر وب ببینید!
توضیح:
- عبارت DOCTYPE html PUBLIC و مقادیر آن برای راهنمایی کردن مرورگرهای وب جهت پردازش صحیح صفحه مورد نظر است.
- تگ head و body جز اصلی ترین تگ های اچ تی ام ال است که سازنده یک صفحه به شمار می روند، درون تگ head می توان از مقادیر meta تگ ها استفاده کرد.
- تگ title برای نمایش عنوان صفحه در مرورگر لازم است.
- تگ h1 نشان گر سرتیتر ها است که می تواند مقادیری تا h6 داشته باشد.
- تگ p در کدهای اچ تی ام ال نشانگر پاراگراف است.
- اکثر تگ های اچ تی ام ال با افزودن یک (/) بسته می شوند و البته برخی نیز یکتا هستند (مثلا </ br>).
نکته 1: هدف از ایجاد زبانی به نام html یا hypertext markup language در وب، در واقع به ضرورت ایجاد استانداردی تعریف شده برای یکسان سازی و سهولت کار برمی گردد، این زبان توسط کنسرسیوم جهانی وب یا w3c توسعه یافته و امروزه تبدیل به استانداردی فراگیر گشته است که توسط انواع مختلف مرورگرها و واسطه های کاربری (کامپیوتر، تلفن همراه و...)، قابل پردازش است.
نکته 2: html در حقیقت یک زبان برنامه نویسی نیست، بلکه بیشتر شبیه یک قرار داد با پیروی از اصولی منظم است، چرا که محدود به تگ ها و دستور عمل های خاصی است و خارج از چارچوب تعریف شده خود، قدرت مانور ندارد، اما از این جهت که زبان تفهیم خواسته های برنامه نویس از مرورگر تلقی می شود، اهمیت زیادی دارد، یعنی وقتی در وب برنامه ای به یک زبان که در سرور اجرا می شود (مانند php) می نویسیم، هدف، هر چه که باشد، نهایتا معمولا باید خروجی خود را در بستر html به مرورگر انتقال دهیم.
sectionدسته بندی: آموزش مقدماتی » HTML
related مطالب بیشتر:
» فرمت بندی و کار با پاراگراف و متن در HTML
» لایه بندی در html با تگ div و span
» کار با تگ فرم (form) در HTML
» ایجاد جدول با تگ table در html
» کار با تگ های ایجاد کننده لیست در HTML
commentنظرات (۵۶ یادداشت برای این مطلب ارسال شده است)
نویسنده: آشوری
زمان: ۲۳:۴۱:۳۲ - تاریخ: ۱۳۹۱/۰۵/۱۵
من تازه وبلاگ نویسی رو شروع کردم و صرفا هدفم یادگیری اصول آن است. خیلی روان و خوب توضیح دادید. برای من که برنامه نویسی بلد نیستم خیلی خوب بود. ممنون
پاسخ: 
سلام
خوشحالیم که آموزش مفید واقع شد.
با آرزوی موفقیت برای شما
نویسنده: es
زمان: ۱۳:۳۷:۰۵ - تاریخ: ۱۳۹۱/۰۹/۲۰
سلام
من از dreamweaver استفاده می کنم، اما در هنگام نوشتن کدها ، نرم افزار فاصله ها یا در واقع تو رفتگی ها رو رعایت نمی کنه . تمام منو ها رو هم گشتم چیزی پیدا نکردم . خواهشا یه راهنمایی کنید
thanks
پاسخ: 
سلام
این برنامه به طور پیش فرض برای زبان های برنامه نویسی (مانند php) یا اسکریپت نویسی (مانند javascript) کدها را به صورت درختی نشان می دهد، اما برای تنظیمات بیشتر از آیکن های کوچک سمت چپ، آخرین آیکن (Format Source Code) را انتخاب و تنظیمات مورد نظر را می توانید در این قسمت انجام دهید (تغییرات این قسمت باید با دقت انجام شود تا دچار مشکلات دیگر نشوید، در مورد زبان هایی مثل html ممکن است چنین قابلیتی وجود نداشته باشد).
نویسنده: roya
زمان: ۱۶:۵۴:۱۶ - تاریخ: ۱۳۹۱/۱۰/۱۰
ممنونم خوب بود.
نویسنده: ali
زمان: ۲۳:۴۸:۵۲ - تاریخ: ۱۳۹۱/۱۱/۲۱
سلام چرا برای من وقتی میخوای سیو کنی، پسوند html نداره؟
پاسخ: 
سلام
پسوند html جزء پیش فرض های notepad نیست، هنگام ذخیره کردن (به صورت دستی) به جای file.txt به صورت file.html نام فایل را وارد کنید!
نویسنده: rastin
زمان: ۰۱:۳۳:۴۶ - تاریخ: ۱۳۹۱/۱۱/۲۸
سلام توضیحتون عالی بود یعنی به زبان ساده بود... من مدت زیادی هست که بلاگ دارم و الان مدتی هم میشه تصمیم دارم خودم طراحی و کد نویسی کنم.. اخه ایده های زیادی دارم که متاسفانه به دلیل اینکه برنامه نویسی یا اصول کار رو بلد نیستم نتونستم. میخواستم ازتون خواهش کنم یه مسیر رو پیش پام بزارید تا از بلاتکلیفی دربیام. میدونم که استعدادش رو دارم و میخوام به صورت حرفه ای ادامه بدم.
پاسخ: 
سلام
اینکه مشتاق فراگیری هستید جای خوشحالی دارد، مسلما با تلاش و پیگیری به هدفتان خواهید رسید.
در آموزش های بخش طراحی وب مطالبی در این خصوص منتشر کرده ایم، اما به طور خلاصه ابتدا به یک برنامه قوی برای کدنویسی وب احتیاج دارید، مانند Adobe Dreamweaver یا نرم افزارهای متن باز مانند Aptana Studio، سپس سعی کنید مباحث html، css و جاوا اسکریپت را از پایه و کم کم یاد بگیرید و با کدهای کوچک تمرین کنید، بهترین راه برای فراگیری دانش وب، آزمایش و خطا است، پس تا می توانید تمرین کنید.
بعد از آشنایی با زبان های پایه می توانید به سمت برنامه نویسی پیشرفته تر مانند php یا asp بروید و مهارتهای وب خودتان را تکمیل کنید.
در کنار این موارد دانستنی های عمومی وب و تکنیک های طراحی و استفاده از نرم افزارهایی مانند فتوشاپ را هم در نظر داشته باشید.
نویسنده: مهدی
زمان: ۱۷:۲۳:۰۵ - تاریخ: ۱۳۹۲/۰۱/۳۱
سلام..
توی قسمت آموزش مقدماتی HTML تمام مطالب و مباحث این زبان رو پوشش دادید؟ یعنی منظورم اینه هر آنچه که برای یادگیری HTML نیازه رو گفتید یا نه قسمتهای دیگه ای هم مونده و فقط اینها نیست؟
راجع به بقیه چطور؟ CSS، جاوا اسکریپت، پی اچ پی و .. ؟
البته خب میدونم پی اچ پی مباحثش بیشتر از ایناست
با تشکر از زحمتی که می کشید..
پاسخ: 
سلام
خیر، در حال حاضر آموزش های مقدماتی در هیچ قسمتی کامل نیستند، مباحث به تدریج در حال تکمیل شدن هستند.
نویسنده: aaatish
زمان: ۰۰:۰۵:۴۹ - تاریخ: ۱۳۹۲/۰۳/۰۹
سلام خسته نباشید
من مطالبتون رو خوندم خیلی خوب بودن ولی مشکل منو حل نکرد متاسفانه
می خوام مثلا از یه اهنگی که خوشم میاد بذارم تو یکی از پستام وقتی روش کلیک میکنیم اون آهنگ بازشه و بخونه هر کاری کردم نمیشه
اهنگم رو کم حجم کردم و اپلودشم کردم و ادرسش رو گذاشتم تو قسمت درج لینکم وقتی روش کلیک می کنم به صورت دانلود باز می کنه
اگه میشه راهنماییم کنید که چی کار کنم وقتی روی اهنگ کلیک کنم شروع کنه به خوندن
ممنون
پاسخ: 
سلام
پخش آهنگ در وب روش های خاصی دارد که آموزش آن به طور کامل در سایت گفته شده، از قسمت جستجو عبارت "آهنگ" را وارد کنید.
نویسنده: حسین
زمان: ۰۱:۳۱:۵۸ - تاریخ: ۱۳۹۲/۰۵/۰۱
سلام
با هزار بدبختی این سایت رو پیدا کردم مطالبش واضح و شیوا است خیلی راحت میشه یاد گرفت حالا این مطالب کامل هستن اگه کامل نیستن کدوماش کاملن بعد کی کامل میشن
قربونت
پاسخ: 
سلام
هر مطلب در جای خود کامل است، منتها مباحث (به طور مثال مبحث HTML) هنوز کامل نیستند، به عبارتی بخشی از آموزش های مقدماتی تر منتشر شده و هنوز مباحث پیشرفته تری باقی مانده.
انتشار مطالب در سایت آهسته و پیوسته است!
نویسنده: ف.خ
زمان: ۱۹:۳۹:۲۷ - تاریخ: ۱۳۹۲/۰۵/۲۰
سلام
من خیلی دوست دارم برنامه نویسی یاد بگیرم
ولی هیچ آشنایی در این زمینه ندارم
میشه لطف کنید راهنماییم کنید از کدام قسمت از سایت تان شروع به مطالعه کنم ؟!
با تشکر
پاسخ: 
سلام
برای شروع به یادگیری برنامه نویسی وب، از HTML و سپس CSS شروع کنید.
نویسنده: م
زمان: ۰۳:۴۰:۱۳ - تاریخ: ۱۳۹۲/۰۵/۲۹
سلام و خسته نباشید
ضمن تشکر فروان از این سایت مفید شما و حمایت ما به طرق مختلف برای برپا نگه داشتن این سایت کارآمد زمانی که تمامی مراحل رو به دستور شما انجام دادیم برای دیدن نتیجه کار در یک مرورگر همین کدها رو دوباره بهمون نشون میده . یک توضیحی بدهید . با سپاس
پاسخ: 
سلام
مرورگرها تگ ها را نمایش نمی دهند! لذا مشکلی در مراحل انجام شده وجود دارد، به طور مثال ممکن است فرمت فایل html یا htm نباشد، یا اینکه تگی به درستی بسته نشده، باید فایل خود را ارسال کنید تا بررسی شود.
نویسنده: hosein
زمان: ۲۰:۵۱:۲۱ - تاریخ: ۱۳۹۲/۰۶/۰۵
ببخشید زبانهای برنامه نویسی وب زبانهای سطح بالا هستند و اینکه درسطح بندی زبانهای برنامه نویسی اسمی از این زبانها نیست.
پاسخ: 
دوست گرامی لطفا به نکات پایانی مطلب دقت کنید، در مورد زبان بودن یا نبودن HTML، به هر صورت حرف L در این عبارت به معنی Language است (HyperText Markup Language) و لذا در اصطلاح می توان به آن عنوان زبان اطلاق کرد (Markup نیز در اینجا یعنی روشی برای جداسازی تگ ها از متن ساده)، هرچند نباید با زبان های برنامه نویسی مانند PHP، Java و... مقایسه شود.
نویسنده: غزل
زمان: ۱۳:۴۰:۱۸ - تاریخ: ۱۳۹۲/۰۷/۱۷
سلام امیدوارم به سوالم زود جواب بدین من با استفاده از روش هایی که گفتین که البته خیلیم عالی و کامل بودن برنامه رو نوشتم اما رو صفحه ی وب خوب از آب در نیومد و یه سوال دیگه اینکه چطوری میشه تو برنامه نویسی شکلی مثل دلتا گذاشت بازم از راهنماییتون ممنونم
پاسخ: 
سلام
منظورتان از "خوب از آب در نیومد" مشخص نیست، لطفا مشکل را با جزئیات بیشتری توضیح دهید.
در مورد علامت های خاص، آموزشی جداگانه در سایت وجود دارد، عبارت "علامت" را در قسمت جستجو وارد کنید.
نویسنده: امید
زمان: ۱۵:۳۲:۴۸ - تاریخ: ۱۳۹۲/۰۸/۰۱
خیلی عالیه ممنون
نویسنده: محمد
زمان: ۱۲:۱۴:۰۲ - تاریخ: ۱۳۹۲/۰۸/۰۸
سلام.
خسته نباشید. سه خط اول چی هستند ؟ اینایی که قبل از head نوشته شدن. کار خاصی توی پیج انجام میدن؟ آدرس سایته مهمه که همین باشه؟
و اینکه حروف بزرگ و کوچک فرق می کنند توی کد نویسی ؟
پاسخ: 
سلام
DOCTYPE و مقادیر بعد از آن برای راهنمایی مرورگر جهت پیروی از استاندارد و نسخه مشخصی از HTML است (XHTML 1.0 Transitional)، تگ html و مقادیر آن نیز برای تعیین شروع سند و مرجع xml صفحه است،
w3.org سایت مرجع و مربوط به کنسرسیوم جهانی وب است که استانداردهای HTML را مشخص می کند.
بزرگ یا کوچک بودن حروف اهمیتی ندارد (استفاده از حروف کوچک توصیه می شود).
نویسنده: black.s
زمان: ۱۰:۲۱:۳۳ - تاریخ: ۱۳۹۲/۰۸/۲۸
سلام خسته نباشین
مرسی از اموزش زیباتون . خیلی عالی بود
من تازه کارم و از امروز شروع کردم .
می شه راهنماییم کنید که از کجا شروع کنم.
پاسخ: 
سلام
برای طراح یا برنامه نویس وب شدن باید از مقدمات شروع کنید، یعنی آشنایی با مبانی وب و در گام بعدی زبان های HTML، CSS و سپس JavaScript، در نهایت به سمت زبان های سمت سرور مانند PHP یا ASP بروید.
paged صفحه 1 از 4




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

6 × 5
 refresh
آگهی
seonab.com
طراحی نرم افزار اندروید
رنگین کمان عکس
Ranginkamaan.com

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