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 مطالب بیشتر:
» کار با تگ فونت (font) و استایل در html
» نحوه ایجاد لینک در HTML
» لایه بندی در html با تگ div و span
» کار با تگ های ایجاد کننده لیست در HTML
» آشنایی با متاتگ ها (Meta tags) و کاربرد آنها در صفحات وب (HTML)
commentنظرات (۵۷ یادداشت برای این مطلب ارسال شده است)
نویسنده: پیمان
زمان: ۲۲:۴۲:۴۸ - تاریخ: ۱۳۹۲/۰۹/۰۶
با عرض سلام و خسته نباشید فراوان،
میخواستم بدونم با این کد ها میشه قالب چت روم درست کرد؟ اگه میشه خواهشا جواب بدین تا من شروع بکنم
بازم ممنونم.
پاسخ: 
سلام
برای طراحی قالب و... باید HTML و CSS را در حد حرفه ای یاد بگیرید که این کار حداقل یک سال زمان می برد و همچنین نیاز به تلاش و تمرین زیاد دارد.
نویسنده: متین
زمان: ۱۴:۰۹:۵۳ - تاریخ: ۱۳۹۲/۱۰/۳۰
سلام
خیلی ممنون بابت آموزش خوب شما خیلی ساده توضیح دادین ، میخواستم بدونم فرق PHP و HTML چیه ؟
این دوتا پیوسته به هم هستن یا هیچ ربطی به هم ندارن؟
و در کجاها استفاده میشه ؟
بازم ممنون
پاسخ: 
سلام
HTML مجموعه ای از تگ ها و دستورالعمل هایی است که به صورت قراردادی به مرورگر تفهیم می کنند که چه چیزی را باید به کاربر نشان دهد، در واقع هنگامی که یک سایت را در مرورگرتان بارگذاری می کنید، محتوای واقعی سایت در سورس کد HTML آن وجود دارد و بر اساس این سورس کد، شکل ظاهری نمایش داده می شود، اما PHP یک زبان برنامه نویسی برای تولید داینامیک و هوشمندانه کدهای HTML است، یعنی خروجی دستورات PHP (در اغلب موارد و در یک بیان ساده) همان کدهای HTML است، اما این کدها می توانند بسته به شرایط مختلف متفاوت باشند، به فرض بسته به نام کاربر کد HTML متفاوتی به مرورگر تحویل شود، از این رو PHP در سرور اجرا و نتیجه آن به مرورگر ارسال می شود.
نویسنده: حجت
زمان: ۰۹:۱۰:۲۳ - تاریخ: ۱۳۹۲/۱۱/۰۳
سلام و خداقوت
لطفا حداقل و حداکثر زمان برای یادگیری HTML, CSS, JavaScript, Ajax, PHP رو توضیح بدین و بفرمائین کدوم رو اول شروع کنیم یا میشه با یکی دیگه یادگیریش رو شروع کنم یا کدوم بهتره
لطفا به ایمیل هم خبر بدین چون خیلی زود میخوام شروع کنم
با تشکر
پاسخ: 
سلام
زمان خاصی قابل پیش بینی نیست! بستگی به استعداد، علاقه و میزان وقتی دارد که می توانید در هر روز صرف یادگیری کنید، برای شروع اصول و مبانی وب را مطالعه کنید، سپس HTML و پس از مدتی همراه با HTML استایل نویسی با CSS و در گام بعدی اسکریپت نویسی با JavaScript، پس از مدتی کار و تسلط نسبی، کار با PHP و هم زمان Ajax و در گام پایانی پایگاه داده MySQL.
نویسنده: تكتم
زمان: ۰۷:۵۹:۳۸ - تاریخ: ۱۳۹۲/۱۱/۰۶
مرسي عالي بود
نویسنده: m-k
زمان: ۱۷:۴۵:۳۸ - تاریخ: ۱۳۹۲/۱۱/۱۳
واقعا عالی و کاربردی هست... ممنون... خیلی عالیه... من تازه یه وبلاگ راه انداختم و کلی سوال داشتم... با پیدا کردن این سایت میتونم جواب همه سوالام رو بگیرم... واقعا ممنوووون...
نویسنده: مونا
زمان: ۲۱:۳۰:۳۷ - تاریخ: ۱۳۹۲/۱۲/۰۱
سلام
با تشکر از سایتتون من خیلی تازه کارم میشه بهم بگید چه جوری نتیجه رو تو مرورگر ببینم؟؟
پاسخ: 
سلام
فایل را با فرمت html ذخیره (یعنی در انتهای نام فایل html. بگذارید)، سپس آن را به مرورگر بکشید (درگ کنید)!
نویسنده: مهدی
زمان: ۱۵:۰۲:۰۲ - تاریخ: ۱۳۹۳/۰۱/۰۴
با عرض سلام و خسته نباشید خدمت شما .
ممنون بخاطر آموزش های پربارتون تقاضا داشتم مباحث آموزش داده شده را در قالب یک پروژه هدفمند کنید تا از حالت آموزشی - تئوری و کلاس درسی خارج شه و جنبه کاربردی پیدا کنه .
با تشکر
پاسخ: 
سلام
ضمن تشکر، به چند دلیل این کار شدنی نیست:
- مباحث سایت در چند سطح ارائه می شوند، سطح مقدماتی برای کاربرانی است که می خواهند از ابتدا شروع کنند یا دانش پایه خود را ارتقاء دهند.
- بخشی از مطالب به آموزش های کاربردی می پردازد که یا خود یک پروژه هستند یا می توانند بخشی از پروژه باشند.
- امکان ارائه مطالب به صورت پروژه کامل مقدور و صحیح نیست، گذشته از اینکه مطالب خیلی طولانی حوصله بیشتر کاربران را سر خواهد برد، رسالت سایت با سایت های ارائه دهنده اسکریپت آماده متفاوت است، در کل تمایلی به اینکه کاربران عادت به استفاده از محصولات آماده کنند، نداریم!
نویسنده: یاسمن
زمان: ۱۲:۴۶:۵۸ - تاریخ: ۱۳۹۳/۰۱/۱۷
سلام. می خواستم نحوه ی کپی کردن یک کد اچ تی ام ال رو داخل جوملا برام توضیح بدید یا سایتی رو معرفی کنید که راهنمایی کامل از نصب تا کپی داده باشه ... ممنون می شم
پاسخ: 
سلام
سوالتان واضح نیست، کپی کد از چه قسمت و به چه منظوری؟
قالب؟ سورس سایت؟ یا ...
نویسنده: hamid
زمان: ۱۱:۲۷:۴۵ - تاریخ: ۱۳۹۳/۰۲/۰۱
من الان فایل رو با اون پسوندی که گفتید ذخیره کردم حالا چیکار کنم؟
پاسخ: 
مرورگر وب (فایرفاکس، اکسپلورر و...) را باز کنید و فایل را به داخل آن بکشید، یا مستقیما روی فایل دابل کلیک کنید تا نتیجه در مرورگر نمایش داده شود!
نویسنده: کاناپه بادی
زمان: ۱۱:۰۲:۲۹ - تاریخ: ۱۳۹۳/۰۲/۰۶
با تشکر از مطالب خوبتون
نویسنده: امیر
زمان: ۱۳:۲۵:۰۴ - تاریخ: ۱۳۹۳/۰۲/۱۹
خیلی عالی و روان بود لطفا درباره ی متا توضیح بدین
پاسخ: 
لطفا آموزش های بعدی را مطالعه کنید، در حد امکان توضیح داده شده.
نویسنده: آموزش html
زمان: ۱۷:۲۳:۰۷ - تاریخ: ۱۳۹۳/۰۲/۲۴
خوبه. امیدوارم حرفه ای باشه و به درد ما هم بخوره
نویسنده: محمد
زمان: ۱۶:۵۴:۵۳ - تاریخ: ۱۳۹۳/۰۳/۱۴
سلام
یه سوال داشتم ..
میشه به دستور برنامه یک صفحه وب دسترسی پیدا کرد و متون رو تغییر داد مثلا به برنامه یه وب دسترسی پیدا کنی و مطالبش رو تغییر بدی؟؟؟؟
پاسخ: 
سلام
معمولا خیر! مگر اینکه هکر باشید و صفحه خطاهای برنامه نویسی یا مشکل امنیت سرور داشته باشد!
نویسنده: najib atlas
زمان: ۰۹:۴۰:۵۳ - تاریخ: ۱۳۹۳/۰۴/۱۳
سلام خیلی ممنون از شما
من میتونم با گوشیم وب نوبسی کنم؟
پاسخ: 
سلام
چه عرض کنیم! بستگی به مدل گوشی و امکانات آن دارد، اکثر گوشی های امروزی قابلیت های لازم برای کار با وب را دارند، البته اگر می خواهید برنامه نویسی کنید، حداقل یک تبلت باید داشته باشید.
نویسنده: amir
زمان: ۲۰:۵۹:۵۰ - تاریخ: ۱۳۹۳/۰۴/۱۴
((حاصل اولین کدتان را در یک مرورگر وب ببینید!))
چه طور تو وب ببينيم؟
پاسخ: 
فایل HTML ذخیره شده را با یک مرورگر مانند فایرفاکس باز کنید!
paged صفحه 2 از 4




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

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

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