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
» کار با تگ فرم (form) در HTML
» لایه بندی در html با تگ div و span
» کار با تگ های ایجاد کننده لیست در HTML
» کاربرد تگ img و نمایش تصاویر در HTML
commentنظرات (۵۷ یادداشت برای این مطلب ارسال شده است)
نویسنده: amir
زمان: ۱۰:۱۵:۱۹ - تاریخ: ۱۳۹۳/۰۴/۱۶
از راهنمايي شما خيلي خيلي ممنونم. حالا اگه بخواييم عكس رو به وب بياريم، اون وقت بايد چي كار كنيم؟
پاسخ: 
لطفا ادامه آموزش های مقدماتی را مطالعه یا در وب در رابطه با تگ src و درج تصویر به صورت HTML در سایت جستجو کنید.
نویسنده: bahar
زمان: ۱۳:۵۳:۰۵ - تاریخ: ۱۳۹۳/۰۴/۲۰
سلام
خیلی واضح و صریح بیان شده بود خیلی ممنون
نویسنده: yasin
زمان: ۱۶:۳۴:۵۱ - تاریخ: ۱۳۹۳/۰۴/۲۴
سلام من یک فرم نوشتم توجه کردید که توی بیشتر فرم ها یک مثال بی رنگ می زنه مثلا پسورد!! که وقتی توی کادر فرم کلیک می کنیم مثال ها حذف می شوند . توی فرم من مثال ها خود به خود پاک نمی شوند باید نوشته ها را خودمان حذف کنیم که بتوانیم مشخصات خودمان را بنویسیم. لطفا این کد را ویرایش دهید و طوری که نوشته ها خود به خود حذف شوند. مرسی
password:<input name="my pass" type="password" value="password" size="30" maxlength="30"/>
پاسخ: 
سلام
برای این کار باید با جاوا اسکریپت آشنا باشید! مثال:
<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="password" value="password" size="30" maxlength="30" onclick="inputClear(this, 'password')" onblur="inputShow(this, 'password')"/>
نویسنده: علی اکبر فضلی
زمان: ۲۲:۲۶:۵۹ - تاریخ: ۱۳۹۳/۰۶/۳۰
سلام ضمن تشکر از سایت بسیار کاربردیتان ، من طراحی سایت رو تازه شروع کردم سئوالی دارم :
میشه سایتی درست کرد که از قسمتهای متنوع فیلم و بنر و کاتالوگ و متن و ... تشکیل شده باشه هم درش ایمیل کاربران رو داشته باشی هم ایمیلشون و تائید کنی و تا عضو نشن نتونن از مطالبش استفاده کنن یا از مشخصات کاربران اطلاعات جمع آوری کنی و ... درگاه پرداخت داشته باشه خبر های استخدامی رو داخلش بذاری ؟ یعنی یه سایت اجتماعی اقتصادی خبری و علمی و... طراحی کرد ؟
پاسخ: 
سلام
چنین مواردی جزء قابلیت های عادی در وب محسوب می شوند و شدنی است، اما قاعدتا نباید انتظار داشته باشید که بدون داشتن دانش فنی و تجربه به راحتی بتوانید همه موارد را طراحی کنید، بخشی از امکانات در CMS های آماده و رایگان وجود دارد، اما اگر بخواهید امکاناتی در سطح حرفه ای داشته باشید، باید برنامه نویسی وب کار کنید و خودتان موارد را طراحی و برنامه نویسی کنید.
زمان: ۲۰:۴۷:۵۸ - تاریخ: ۱۳۹۳/۰۷/۱۷
فوق العاده بود
بسیار ممنون بابت وب سایت خوبتون
نویسنده: عرفان
زمان: ۲۲:۰۵:۳۶ - تاریخ: ۱۳۹۳/۰۷/۱۸
عالی یود
نویسنده: وحید
زمان: ۱۹:۵۷:۵۷ - تاریخ: ۱۳۹۳/۰۷/۲۷
سلام خسته نباشید سایتتون خیلی خوبه واقعا مرسی
...ببخشید من تازه شروع کردم به برنامه نویسی و یه ویرایشگر متن htmlpad هم دانلود و نصب کردم به نظرتون خوبه یا از نرم افزار دیگه ای استفاده کنم ؟؟
پاسخ: 
سلام
هرچند کدهای HTML را با اغلب نرم افزارها و حتی Notepad می توان نوشت، توصیه ما استفاده از نرم افزار قوی Adobe Dreamweaver است.
نویسنده: وحید
زمان: ۱۸:۳۲:۵۳ - تاریخ: ۱۳۹۳/۰۷/۲۸
سلام ممنون که به نظرم جواب دادید... نرم افزار adobe dreamweaver رو دانلود و نصب کردم آیا کتاب یا سایتی رو سراغ دارید که نحوه کار باهاش رو یاد بده؟؟
پاسخ: 
سلام
کار با این برنامه خیلی سخت نیست و در فرصت کوتاهی می توان با امکانات آن آشنا شد (مگر برخی امکانات که شاید برای شروع کار چندان مورد نیاز هم نباشند)، به هر صورت برای آشنایی بیشتر آموزش های زیادی در وب وجود دارد، کافی است جستجو کنید.
نویسنده: نوروز
زمان: ۱۸:۱۴:۱۵ - تاریخ: ۱۳۹۳/۰۸/۱۶
سلام یه پروژه دارم در مورد ویژگی های زبان اچ تی ام ال اگه مقاله یا چیز دیگه ای در موردش دارید که ویژگی های اون رو بهم داشته باشه ممنون میشم
پاسخ: 
سلام
آموزش HTML به صورت متداول در وب وجود دارد، برای ایجاد پروژه در این رابطه باید این آموزش ها را مطالعه و با منابع شبه مرجع مانند سایت
w3schools.com
ترکیب کنید.
نویسنده: faryasad
زمان: ۲۱:۳۶:۱۵ - تاریخ: ۱۳۹۳/۰۸/۱۹
سلام من در یک سایتی عضو هستم که لینک زیر مجموعه گیری داره حالا هر کاری میکنم این لینک رو تو وبلاگم بذارم بلاگفا قبول نمیکنه چکار باید بکنم ؟ :(
پاسخ: 
سلام
متاسفانه چاره ای برای اینگونه مشکلات وجود ندارد، تمام محتوا و کدهای شما به صورت سیستماتیک توسط بلاگفا بررسی می شود و لذا راه حلی برای درج لینک های غیر مجاز (از دید بلاگفا) نیست!
نویسنده: maryam
زمان: ۱۳:۰۲:۰۶ - تاریخ: ۱۳۹۳/۰۹/۰۶
سلام من دانشجو نرم افزار هستم و این ترم برنامه نویسی وب دارم از کجا شروع کنم برای یادگیری بهتر ؟
پاسخ: 
سلام
بستگی به میزان آشنایی قبلی شما دارد، در هر صورت برای کار حرفه ای همیشه توصیه می شود از مقدماتی ترین مباحث (HTML، CSS) و آهسته و پیوسته کار کنید، اما اگر با اینها آشنا باشید می توانید به اسکریپت نویسی سمت کاربر (JavaScript) و برنامه نویسی سرور (PHP, ASP.NET و...) بپردازید.
نویسنده: hasan
زمان: ۲۳:۵۷:۳۱ - تاریخ: ۱۳۹۳/۰۹/۰۶
سلام
با اینکه مطالبتون آموزنده بود ولی باز هم کمه اگه میتونید بیشتر بذارید ممنونم
نویسنده: milad
زمان: ۱۲:۵۹:۴۴ - تاریخ: ۱۳۹۴/۰۱/۲۸
سلام دوست خوبم
از زحماتتون بسیار سپاسگذارم
من کلا برنامه نویسی رو بلد نیستم
اما خیلی بهش علاقه دارم
خودمم یه سایت دارم
خواستم بدونم با آموزش هایی که شما دادین من بخوام شروع کنم و وقتمو بزارم میتونم کامل یاد بگیرم کلا برنامه نویسی رو؟
پاسخ: 
سلام
برای شروع یادگیری برنامه نویسی وب می توانید از مطالب سایت استفاده کنید، منتها هیچ گاه نباید به یک منبع قناعت کنید، ترکیب چند منبع حالت ایده آل است + علاقه + تمرین و تکرار.
نویسنده: m.f
زمان: ۱۹:۴۲:۲۶ - تاریخ: ۱۳۹۴/۰۲/۲۲
سلام و خسته نباشین
ممنون از اموزش زیباتون عالی بود .
من تازه شروع کردم به سایت درست کردن یه سوال داشتم
برای اینکه متن روی تصویر بیاد چه کدی را باید وارد کنیم هر کاری میکنم نمیشه ممنون میشم راهنماییم کنید
پاسخ: 
سلام
چنین امکانی در وب تنها با استفاده از CSS قابل ایجاد است، به طور مثال می توانید متن را داخل یک بلاک div بنویسید و به آن بلاک یک پس زمینه اختصاص دهید، یا اینکه چند بلاک داشته باشید، بلاک اصلی با خاصیت position و مقدار relative و برای تصویر و متن با خاصیت position و مقدار absolute، مثال:
http://jsfiddle.net/EgLKV/3
نویسنده: پارسا
زمان: ۱۱:۴۷:۱۶ - تاریخ: ۱۳۹۴/۰۴/۲۴
ممنون خيلى روان و خوب بود ميشه لطفاً انواع ديگه ى دستور ها رو هم بذارين
paged صفحه 3 از 4




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

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

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