i
در حال برنامه نویسی و آماده سازی نسخه جدید «وبگو» هستیم، در این نسخه قابلیت ها و ظاهر سایت به کلی متفاوت و کاملتر خواهد بود، این فرآیند زمانبر و از مدتی پیش شروع شده و همچنان ادامه دارد، روند پیشرفت پروژه در این قسمت به صورت درصدی مشخص است و به تناوب به روزرسانی می شود.
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
» کار با تگ فرم (form) در HTML
» فرمت بندی و کار با پاراگراف و متن در HTML
» ایجاد جدول با تگ table در html
commentنظرات (۵۸ یادداشت برای این مطلب ارسال شده است)
نویسنده: john lennon
زمان: ۱۵:۰۳:۴۳ - تاریخ: ۱۳۹۴/۰۴/۲۵
سلام
مرسی از آموزش خوبتون
یه خواهش دارم اگه میشه این آموزش ها رو در قالب pdf عرضه کنید
مرسی
نویسنده: معصومه
زمان: ۱۹:۱۲:۳۶ - تاریخ: ۱۳۹۴/۰۵/۲۱
با سلام لطفا کمکم کنید من توی یک مسابقه با عنوان برنامه نویسی وب شرکت کردم اما هیچی در موردش نمی دونم آیا برنامه نویسی وب همون ساختن یه وبلاگه (امیدوارم باشه) یعنی باید یه وبلاگ بسازیم مثلا از طریق بلاگفا یا....
لطفا به وبلاگ من سر بزنین و جواب منو در نظرات بدین خواهش میکنم خیلی حیاتیه
بازم ممنون
پاسخ: 
سلام
خیر! وبلاگ یکی از محصولات برنامه نویسی وب است! برنامه نویسی وب یعنی مجموعه دانش برای طراحی و کدنویسی برنامه هایی که تحت وب (در مرورگر) قابل اجرا هستند که خود شامل HTML, CSS, JavaScript, PHP و... می شود!
نویسنده: فرزاد خالقی
زمان: ۲۲:۰۲:۳۲ - تاریخ: ۱۳۹۴/۰۶/۱۸
سلام
آیا با برنامه نویسی ها می توان نت های موسیقی را نوشت
پاسخ: 
سلام
اگر منظورتان با HTML است، خیر! برای طراحی این نوع برنامه ها بهتر است از زبان هایی نظیر ++C کنید (باید تقریبا حرفه ای باشید!).
نویسنده: raoof
زمان: ۲۱:۴۷:۲۴ - تاریخ: ۱۳۹۴/۰۸/۱۳
سلام
من برای بار اولمه این کار را انجام دادم. من این کارهایی را که نوشتید انجام دادم اما منظور از باز شدن صفحه وب را نمیفهمم.
پاسخ: 
سلام
پس از ذخیره فایل، آن را با یک مرورگر اجرا کنید یا فایل را به داخل مرورگر بکشید!
نویسنده: علی
زمان: ۰۱:۴۴:۳۳ - تاریخ: ۱۳۹۴/۰۸/۲۰
سلام، با تشکر از زیبایی و فصاحت آموزشتون یک سوال داشتم که جای بهتری برای پرسیدن در سایت پیدا نکردم برای همین عذر میخوام و اگر امکان باشه پاسخ بدین بی نهایت ممنون میشم، میخواستم ببینم ساختار کلی ساخت یک سایت مثلا خبری مثل فارس نیوز یا خبرآنلاین به چه صورت هست؟ فکر نمیکنم از اول تا آخر کد نویسی باشه درسته؟ آیا از بسته های آماده استفاده میکنن؟ و اینکه پایگاه داده و پنل مدیریت یا سردبیر و ... برای ارسال محتوا به سایت چطوری میسازن؟ شرمنده طولانی شد خیلی گشتم ولی هیچکس مثل شما استادانه در مورد وب توضیح نداده بود
پاسخ: 
سلام
سوالتان کلی است و پاسخ مشخصی نمی توان ارائه کرد، صرفا جهت اطلاعات بیشتر:
برای ساخت یک سایت خبری و... به چند روش می توان اقدام کرد:
- برخی افراد ترجیح می دهند از 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
زمان: ۱۷:۱۴:۱۹ - تاریخ: ۱۳۹۴/۱۰/۲۷
سلام با تشکر از مطالب بدرد بخورتان
من یک سوال داشتم چگونه می توانیم وب را در اینترنت بیاوریم یعنی اگر نام آن را در مرورگر سرچ کنیم بیاید
باتشکر
پاسخ: 
سلام
اگر منظورتان از "وب" همان سایت است، پس از مطالعه اصول و مبانی وب، باید یک دامنه خریداری کرده و در کنار آن یک هاست (سرور) از شرکت های ارائه دهنده خدمات میزبانی وب تهیه کنید، سپس اطلاعات DNS سرور را در تنظیمات پنل دامنه اعمال و فایل هایتان (با فرمت html، php و...) را در پنل هاست آپلود نمائید، بعد از این کار با فراخوانی دامنه سایت، فایل های شما از هاست بر روی مرورگر نمایش داده می شوند!
نویسنده: 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 لطفا دقت کنید که یادداشت های زیر منتشر نشده و حذف خواهند شد:
- یادداشت های خارج از موضوع این مطلب.
- سوالات کلی، غیر ضروری و مشکلاتی که هیچ تلاشی برای رفع آن نکرده باشید.
- نظرات حاوی کدها و اسکریپت های خیلی طولانی (به طور مثال کد کامل قالب وبلاگ).

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

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

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