آگهی
article

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

html

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

HTML زبان فرامتن یا Hypertext


منظور از عبارت Hypertext یا فرامتن بودن در HTML این است که اگرچه کدهای صفحات وب به صورت متن ساده نگاشته می شوند اما بعد از پردازش توسط مرورگر لزوما به صورت متنی دیده نخواهند شد و می توانند نماینده لینک، تصویر، صوت، ویدئو و محتوای غیرمتنی باشند، به عبارتی متن خطی در کدنویسی 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 Tags) استفاده کرد (در مورد متاتگ ها در آموزش های بعدی بیشتر خواهیم گفت)، همچنین خواهیم دید که در این قسمت می توان فایل های مربوط به استایل دهی 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 مطالب بیشتر:
» کاربرد تگ font و ویژگی های فونت در HTML
» کار با تگ فرم (form) در HTML
» کار با تگ های ایجاد کننده لیست در HTML
» متاتگ ها (Meta Tags) و کاربرد آنها در صفحات وب (HTML)
» فرمت بندی و کار با متن و پاراگراف در HTML
commentنظرات (۶۲ یادداشت برای این مطلب ارسال شده است)
more یادداشت های جدید بر اساس تاریخ ارسال در انتهای یادداشت های موجود نمایش داده می شوند.
نویسنده: پیمان
زمان: ۲۲:۴۲:۴۸ - تاریخ: ۱۳۹۲/۰۹/۰۶
با عرض سلام و خسته نباشید فراوان،
میخواستم بدونم با این کد ها میشه قالب چت روم درست کرد؟ اگه میشه خواهشا جواب بدین تا من شروع بکنم
بازم ممنونم.
پاسخ: 
برای طراحی قالب و... باید 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 ذخیره، سپس آن را به مرورگر بکشید!
نویسنده: مهدی
زمان: ۱۵:۰۲:۰۲ - تاریخ: ۱۳۹۳/۰۱/۰۴
با عرض سلام و خسته نباشید خدمت شما .
ممنون بخاطر آموزش های پربارتون تقاضا داشتم مباحث آموزش داده شده را در قالب یک پروژه هدفمند کنید تا از حالت آموزشی - تئوری و کلاس درسی خارج شه و جنبه کاربردی پیدا کنه .
با تشکر
پاسخ: 
ممنون از نظر لطف و پیشنهادتان، مباحث سایت در چند سطح ارائه می شوند، سطح مقدماتی برای کاربرانی است که می خواهند از ابتدا شروع کنند یا دانش پایه خود را ارتقاء دهند، بخشی از مطالب نیز به آموزش های کاربردی می پردازد که یا خود یک پروژه هستند یا می توانند بخشی از پروژه باشند، به هر حال امکان ارائه مطالب به صورت پروژه کامل مقدور نیست، گذشته از اینکه مطالب خیلی طولانی حوصله بیشتر کاربران را سر خواهد برد، رسالت سایت با سایت های ارائه دهنده اسکریپت آماده متفاوت است.
نویسنده: یاسمن
زمان: ۱۲:۴۶:۵۸ - تاریخ: ۱۳۹۳/۰۱/۱۷
سلام. می خواستم نحوه ی کپی کردن یک کد اچ تی ام ال رو داخل جوملا برام توضیح بدید یا سایتی رو معرفی کنید که راهنمایی کامل از نصب تا کپی داده باشه ... ممنون می شم
پاسخ: 
لطفا در مورد جوملا به انجمن های مربوطه مراجعه نمائید.
نویسنده: hamid
زمان: ۱۱:۲۷:۴۵ - تاریخ: ۱۳۹۳/۰۲/۰۱
من الان فایل رو با اون پسوندی که گفتید ذخیره کردم حالا چیکار کنم؟
پاسخ: 
مرورگر وب (فایرفاکس، اکسپلورر و...) را باز کنید و فایل را به داخل آن بکشید، یا مستقیما روی فایل دابل کلیک کنید تا نتیجه در مرورگر نمایش داده شود!
نویسنده: امیر
زمان: ۱۳:۲۵:۰۴ - تاریخ: ۱۳۹۳/۰۲/۱۹
خیلی عالی و روان بود لطفا درباره ی متا توضیح بدین
پاسخ: 
لطفا آموزش های بعدی را مطالعه کنید، در حد امکان توضیح داده شده.
نویسنده: محمد
زمان: ۱۶:۵۴:۵۳ - تاریخ: ۱۳۹۳/۰۳/۱۴
سلام
یه سوال داشتم ..
میشه به دستور برنامه یک صفحه وب دسترسی پیدا کرد و متون رو تغییر داد مثلا به برنامه یه وب دسترسی پیدا کنی و مطالبش رو تغییر بدی؟؟؟؟
پاسخ: 
معمولا خیر! مگر اینکه هکر باشید و صفحه خطاهای برنامه نویسی یا مشکل امنیت سرور داشته باشد!
نویسنده: najib atlas
زمان: ۰۹:۴۰:۵۳ - تاریخ: ۱۳۹۳/۰۴/۱۳
سلام خیلی ممنون از شما
من میتونم با گوشیم وب نوبسی کنم؟
پاسخ: 
بستگی به مدل گوشی و امکانات آن دارد، اکثر گوشی های امروزی قابلیت های لازم برای کار با وب را دارند، البته اگر می خواهید به صورت حرفه ای برنامه نویسی کنید، حداقل یک تبلت باید داشته باشید.
نویسنده: amir
زمان: ۲۰:۵۹:۵۰ - تاریخ: ۱۳۹۳/۰۴/۱۴
((حاصل اولین کدنویسی وب خود را ببینید!))
چه طور تو وب ببينيم؟
پاسخ: 
فایل HTML ذخیره شده را با یک مرورگر مانند فایرفاکس اجرا (Open) کنید!
نویسنده: amir
زمان: ۱۰:۱۵:۱۹ - تاریخ: ۱۳۹۳/۰۴/۱۶
از راهنمايي شما خيلي خيلي ممنونم. حالا اگه بخواييم عكس رو به وب بياريم، اون وقت بايد چي كار كنيم؟
پاسخ: 
لطفا ادامه آموزش های مقدماتی را مطالعه یا در وب در رابطه با تگ src و درج تصویر به صورت HTML در سایت جستجو کنید.
نویسنده: bahar
زمان: ۱۳:۵۳:۰۵ - تاریخ: ۱۳۹۳/۰۴/۲۰
سلام
خیلی واضح و صریح بیان شده بود خیلی ممنون
نویسنده: yasin
زمان: ۱۶:۳۴:۵۱ - تاریخ: ۱۳۹۳/۰۴/۲۴
سلام من یک فرم نوشتم توجه کردید که توی بیشتر فرم ها یک مثال بی رنگ می زنه مثلا پسورد!! که وقتی توی کادر فرم کلیک می کنیم مثال ها حذف می شوند . توی فرم من مثال ها خود به خود پاک نمی شوند باید نوشته ها را خودمان حذف کنیم که بتوانیم مشخصات خودمان را بنویسیم. لطفا این کد را ویرایش دهید و طوری که نوشته ها خود به خود حذف شوند. مرسی
password:<input name="my pass" type="password" value="password" size="30" maxlength="30"/>
پاسخ: 
برای انجام این کار دو راه وجود دارد، استفاده از ویژگی placeholder مانند نمونه زیر:
password:<input name="my pass" type="text" value="password" size="30" maxlength="30" placeholder="password">
استفاده از جاوا اسکریپت، مثال:
<script type="text/javascript">
function inputClear(field, text){
if (field.value == text){
field.value = "";
}
}
function inputShow(field, text){
if (field.value == ""){
field.value = text;
}
}
</script>
password:<input name="my pass" type="text" value="password" size="30" maxlength="30" onclick="inputClear(this, 'password')" onblur="inputShow(this, 'password')">
نکته: برای فیلد input از نوع password مرورگرها معمولا محتوا را مخفی می کنند، لذا این شیوه برای این نوع فیلد مناسب نیست!
more لطفا پیش از ارسال یادداشت نکات زیر را مد نظر داشته باشید:
- مواردی که به کلی خارج از موضوع این مطلب هستند را در فرم منوی "تماس با ما" مطرح و پاسخ را از طریق ایمیل دریافت کنید.
- به سوالات کلی، مبهم، غیرضروری و مشکلاتی که تلاشی برای رفع آن نکرده باشید پاسخ خاصی داده نخواهد شد.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین قرار دهید تا امکان تست و بررسی وجود داشته باشد.
- تمام یادداشت ها بررسی و برای هر کاربر زمان مشخصی جهت پاسخگویی در نظر گرفته می شود، لذا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.




1 × 6
 refresh
نکته:
با توجه به تاریخ نگارش آموزش های سایت و پیشرفت تکنولوژی های مرتبط با وب در سالیان اخیر، محتوای برخی از مطالب قدیمی ممکن است نیاز به ویرایش و به روزرسانی داشته باشد که این کار هم زمان با تهیه نسخه جدید «وبگو» به مرور در حال انجام است، لطفا در استفاده از مطالب سایت به این نکته دقت داشته و حتی المقدور از چند منبع مختلف استفاده نمائید.
آخرین دیدگاه ها
form حامد
در:
عالی بود
۲۱:۳۸:۳۱ ۱۳۹۸/۱۱/۰۷

form ناشناس
در:
سلام خیلی ممنون بابت پاسخ سریعتون خیلی دنبال همین دو خط کد بودم برای یادگیری سریع ریجکس ولی با سرچ پیدا نکردم و...
۱۸:۰۳:۴۳ ۱۳۹۸/۱۱/۰۷

form فرید
در:
درود بشما، میخواستم بدونم مثل کلمه @، کلمه ایی ساین هم داریم؟ با تشکر
۱۲:۱۹:۰۷ ۱۳۹۸/۱۱/۰۷

form ناشناس
در:
سلام میشه لطفا به سوالم جواب بدید من می خوام با استفاده از عبارات با قاعده تمام تگ های html رو تشخیص بدم...
۱۰:۱۳:۰۵ ۱۳۹۸/۱۱/۰۷

form PewDiePie
در:
سلام چطور می تونم این کد رو یه لینک هم بهش اضافه کنم یعنی این که وقتی عکس رو می بینی طرف بتونه...
۲۳:۳۶:۲۶ ۱۳۹۸/۱۱/۰۶

form رسول
در:
سلام میخوام بجای نمایش متن، متن موجود در یه لینکو بهم نشون بده ممنون میشم کمکم کنید
۱۳:۳۸:۱۸ ۱۳۹۸/۱۱/۰۶

form حسن
در:
من مطابق کد نوشته شده شما میخواستم آدرس
۱۴:۱۰:۱۳ ۱۳۹۸/۱۱/۰۵

form saemrezaei
در:
سلام واقعا عالییه خیلی استفاده کردم به وبلاگم سر بزن لطفا.
۱۳:۳۷:۳۴ ۱۳۹۸/۱۱/۰۵

form نصراله رضایی
در:
سلام در ادمین های گذشته که باز می کنم تصاویر مشاهده نمی شود و من را به آدرس Huge domains.com ارجاع می...
۲۲:۳۹:۵۳ ۱۳۹۸/۱۱/۰۴

form نقدی زاده
در:
واقعا مرسی یه overflow-y:hidden به body دادم اسکرل افقی برای صفحه نمایش تبلت از بین رفت
۱۴:۴۴:۱۳ ۱۳۹۸/۱۱/۰۴

form وحید پوربشیری
در:
سلام لطفا یکی که خوب جاوا اسکریپت بلده بیاد به این آیدی ت.ل.گ.ر.ا.م Alpha2020@ یه کد برام بنویسه پول هم میدم
۱۱:۱۲:۳۲ ۱۳۹۸/۱۱/۰۲

form امین
در:
سلام تشکر بابت راهنماییتون. منظور من این بود که: الان با ثبت نام کاربر a در سایت اطلاعاتش در دیتابیس ثبت میشه و یک پوشه...
۰۳:۱۲:۴۰ ۱۳۹۸/۱۱/۰۲

form شریفی
در:
سلام معنی متن زیر چیست؟
۱۸:۲۸:۰۹ ۱۳۹۸/۱۱/۰۱

form امین
در:
سلام خسته نباشید یه اسکریپت دارم که وقتی کاربر ثبت نام میکنه یه پوشه و محتواش ایجاد میشه. میخوام یه صفحه با هر ثبت نام...
۱۴:۱۸:۵۱ ۱۳۹۸/۱۰/۳۰

form Admin
در:
سلام دوست عزیز. میشه بگویید چگونه میتوان در وبلاگ کادری را باز کرد که بازدید کنندگان بتوانند در آن چیزی بنویسند. ممنون میشم...
۱۱:۲۸:۵۰ ۱۳۹۸/۱۰/۳۰
آگهی