سبد خرید (0)

شروع کار با HTML

چه چیزی نیاز دارید.

Wiki

 در این سایت شما به هیچ ابزاری برای یاد گیری HTML نیاز ندارید.

  • به هیچ ویرایشگر HTML ی نیاز ندارید.
  • به هیچ سرویس دهنده وبی نیاز ندارید.
  • به هیچ وب سایتی نیاز ندارید.

نگارش HTML

Wiki

HTML می تواند توسط ویرایشگرهای مختلفی مثل Dreamweaver و Visual Studio نگارش و ویرایش شود.

اما در این خود آموز ما به ویرایشگر ساده متنی (مثل Notepad) برای نگارش HTML نیاز داریم. ما بر این عقیده ایم که استفاده از یک ویرایشگر ساده متنی بهترین راه برای یادگیری HTML است.


وب آزمایشی خود را ایجاد کنید.

Wiki

اگر می خواهید صفحه ای آزمایشی را در رایانه خود ایجاد کنید، تنها باید سه فایل زیر را روی desktop خود کپی کنید.

روی هر یک از لینک های زیر راست کلیک نمایید و گزینه "save target as" یا "save link as" را انتخاب نمایید.

mainpage.htm

page1.htm

page2.htm

بعد از اینکه فایل های بالا را کپی کردید، می توانید با دابل کلیک روی فایل "mainpage.htm" نخستین صفحه وب خود را در عمل ببینید.


از وب آزمایشی خود برای آموزش استفاده کنید.

Wiki

ما به شما پیشنهاد می کنیم که هر چه را که از این سایت آموختید با ویرایش فایل وب خود به وسیله یک ویرایشگر متن (مثل Notepad) تجربه کنید.

توجه: اگر وب آزمایشی شما حاوی تگ های HTML است که آنها را نیاموخته اید ناراحت نشوید. شما در فصل بعد همه چیز را در این مورد خواهید آموخت.


پسوند HTM یا HTML

Wiki

هنگامی که یک فایل HTML را ذخیره می کنید، می توانید از پسوند html یا htm استفاده کنید. تفاوتی نمی کند، این بستگی به شما دارد.


فیلم آموزش HTML

در فیلم آموزشی زیر، می توانید مطالب گفته شده در بالا را مشاهده نمایید:

برای خرید پکیج کامل فیلم آموزش HTML روی لینک روبرو کلیک فرمایید: فیلم آموزش HTML

دیدگاه‌ها  

+3 # atena 1396-04-06 16:22
سلام
در HTML تگ متا چه کاربردی داره و مخفف چیست؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1396-04-08 09:02
سلام
تگ meta نوعاً برای مشخص کردن نویسنده، کلمات کلیدی، آخرین تغییرات، توضیحاتی در مورد صفحه و دیگر داده های Meta استفاده می شوند. برای کسب اطلاعات بیشتر به لینک زیر مراجعه فرمایید:
http://beyamooz.com/html/138-advanced/355-%D8%B9%D9%86%D8%B5%D8%B1-head-%D8%AF%D8%B1-html
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # حامد محمدزاده 1396-03-23 11:10
با سلام
توی این درس با تمرینی که انجام داده ام و سه صفحه ایجاد کردم . در صفحه سوم که همانطور که در درس گفته شده من به صفحات اول و دوم لینک داده ام . یکی از این لینکها بعد از کلیک بر روی آن به صفحه مورد نظر من می رود . اما لینک دوم وقتی که روی آن کلیک می شود . صفحه page not found ظاهر می گردد . لطفاً راهنمایی فرمایید با تشکر
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1396-03-23 13:07
سلام، مطمئنا آدرس لینک دوم را اشتباه تنظیم کرده اید. بنابراین در کد زیر به قسمت های قرمز رنگ توجه فرمایید:
<html>
<head>
<meta http-equiv="Con tent-Type" content="text/h tml; charset=UTF-8">
<meta name="GENERATOR " content="MSHTML 8.00.7600.16444">
</head>
<body style="direction:rtl">
<h1>این اولین صفحه HTML من است.</h1>
<p>با استفاده از تگ p می توان پاراگراف ها را در صفحه وارد کرد</p>
<a href="/page1.htm">این یک لینک به صفحه شماره 1 است.</a><br/>
<a href="/page2.htm">این یک لینک به صفحه شماره 2 است.</a><br/>
</body>
</html>
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # ساناز بهادری نژاد 1396-02-11 17:50
با سلام، وقتی متنی را در note pad فارسی تایپ میکنم موقع دیدن نتیجه در مرورگرها طور دیگری غیر از فارسی نمایش داده میشود، چه طور این مشکل را حل کنم، ممنون از راهنماییتون
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1396-02-15 22:07
برای ایجاد صفحات HTML با محتوای فارسی، یکی از دوتا کار زیر را انجام دهید:
1- اضافه کردن تگ meta: در قسمت head صفحه، یک تگ meta با ویژگی های زیر اضافه نمایید.
<meta http-equiv="con tent-type" content="text/h tml; charset=utf-8"/>
2- UTF-8: زمانی که می خواهید فایل HTML را در نات پد ذخیره کنید، گزینه encoding را با مقدار UTF-8 تنظیم نمایید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # mary67 1396-01-30 16:29
نظرتون در مورد نرم افزار براکت چیه؟ بهتر از دریمه آیا؟ یا با همون دریم کار کنم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1396-01-30 17:19
سلام. به نظر بنده به جای dreamweaver یا نت بینز یا هر ide دیگه، بهتره که از همین اوایل کار، با نرم افزار phpstorm کار کرد. چون که phpstorm به راحتی از git و گیتهاب و انواع فناوری های مدرن برای برنامه نویسی php پشتیبانی می کنه.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # omid jon 1395-12-05 06:26
پسوند htmیاhtmlچیست؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1395-12-08 10:45
برای ذخیره کردن فایل های HTML از پسوند htm یا html استفاده می شود و هیچ فرقی بین دو پسوند مذکور وجود ندارد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # بوکانی 1395-09-11 11:53
سلام. ببخشید من وقتی یه کلمه یا حرف انگلیسی میزارم وسط نوشته فارسیم بهم میزنه متنمو. راهکار های خودتونم اجرا کردم ولی باز هیچ تاثیری نداره
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1395-12-08 10:47
سلام، برای رفع مشکل، از خصوصیت زیر استفاده کنید:
style="direction:rtl"
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+9 # علی HTML 1395-04-24 20:21
با عرض سلام و خسته نباشید.
فیلم ارائه شده در مطلب بالا فوق العاده بود. خواستم تشکر کنم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # Bahareh 1395-04-20 15:29
سلام ببخشید می خواستم بدونم کاربرد اچ تی اام ال در چی هست؟
من تازه شروع کردم و نمی دونم طراحی وب و کار با dream weaver چجوری هست .
ممنون میشم پاسخ بدید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1395-04-22 19:58
سلام.
HTML‌ در واقع یک زبان نشانه‌گذاری جهت نمایش در مرورگرهای وب هست. سایت‌هایی که شما در اینترنت می‌بینید، در نهایت به صورت HTML نشانه‌گذاری می‌شوند و در مرورگرها قابل نمایش می‌شن.

این زبان از تگ درست میشه و شما می‌تونید با یک ادیتور ساده این تگ‌ها رو ایجاد کنید. برای کار به صورت حرفه‌ای نیاز به نرم‌افزارهای بهتر جهت ویرایش هست که یکی از این نرم‌افزارها Dream Weaver هست.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # ناشناس 1394-08-16 13:34
سلام لطفا آموزش طراحی سایت با نرم افزار dream weaver v رو قرار بدید
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+4 # مهرداد صلاحی 1394-08-16 13:52
با سلام.
دریم ویور یک نرم افزار برای طراحی سایت هست. گر چه امکان کدنویسی زبانهای سمت سرور رو هم به خوبی ساپورت میکنه، ولی بیشتر برای طراحی به کار میره تا برنامه نویسی.
برای این کار شما صرفا باید به زبانهای تحت وب مسلط باشید، نه خود نرم افزار. وقتی که به زبانهای طراحی سایت مثل HTML ، CSS و ... مسلط باشید، کار کردن با این نرم افزار خیلی سخت نیست.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # malih niku 1394-08-12 09:01
با سلام و خسته نباشید ...وقتی بخوایم یک صفحه htmlرو به صفحه htmlدیگر لینک کنیم چی کار باید کنیم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1394-08-12 09:30
با سلام و تشکر.
سوالتون خیلی معنی نداره. میتونید با استفاده از iframe یه صفحه html رو در یک صفحه html دیگه لود کنید.
اگه از php استفاده کنید، میتونید از Include استفاده کنید.

کمی بیشتر توضیح بدید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # malih niku 1394-06-21 11:14
سلام و خسته نباشید....من متن فارسی وقتی داخل notepadمینویسم و ذخیره می کنم؟؟؟؟؟؟ میشه هم داخل سند و هم وقتی با مرور گر باز می کنم چرا و چی کار باید کنم؟
من قسمت"وب ازمایشی خود را ایجاد کنید"نفهمیدم الان این که برای من باز شده یک صفحه ای با ویژوال استودیو که پایینش حالت هایhtml,body,h1 و....داره چیه؟با این باید چی کار کنیم؟اگر این وب هست پس اون چه ما تو notepadمینویسیم و با مرورگر باز میشه چیه؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # شهربانو دوستی 1394-06-21 12:59
با سلام
برای نوشتن کدهای html نرمافزار های مختلفی مانند notepad,notepad ++,Dream Weaver و... است که ساده ترین آنها همان notepad است. هر چه نرم افزار پیشرفته تری را برای نوشتن کدها انتخاب کنیم امکاناتی که در اخیار ما قرار می گیرد بیشتر است.
در مورد سوالی که ذکر کردید برای رفع مشکل کافی است در هنگام ذخیره فایل مورد نظر در پنجره save گزینه Encoding را با UTF-8 تنظیم کنید.
فایلی که شما از قسمت بالا ذخیره می کنید یک نمونه ساده از یک صفحه وب است که میتوانید بعد از ذخیره کردن آن را با ویرایشگر notepad باز کرده و کد های موجود در ان را مشاهده و یا تغییر دهید.
چیزی که شما در notepad می نویسید نیز همان صفحه وب خودتان است. که در مراحل بعدی میتوانید آن را به یک صفحه کامل تبدیل کنید. فایل ذکر شده در اینجا فقط یک مثال برای درک بیشتر مطلب است.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # moh 1394-05-16 14:02
http://www.w3schools.com/ شما نسخه فارسیشی؟؟!!!!!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # شهربانو دوستی 1394-05-31 08:57
با سلام
بیشتر مطالب سایت بیاموز ترجمه مطالب سایت w3schools است.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+3 # محمدرضا 1394-02-23 10:59
سلام
تشکر همین طور مطالب رو زیاد کنین
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # t.m 1394-02-23 10:57
سلام!
من فایل هارو کپی کردم توی کامپیوترم اما هرچی کلیک میکنم باز نمیشه!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1394-02-23 15:32
سلام، لطفاً چک کنید که پسوند فایل ها htm. یا html. باشد و هر سه فایل را بصورت کامل دانلود کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # zahraasgari 1394-01-24 15:08
salam! bebeakhsid site shoma kheili khube ! fahgat 1 soal! man motevaje nashodam vase piade kardane codehaye note pade agar nakhaim az vebe azmayeshi estefade konim ? chetor bas piade sazi konim? tozih midn lotfan?...
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
0 # zahraasgari 1394-01-25 14:58
sepasgozaram !!! mamnun :)
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1394-01-24 23:06
سلام
برای اجرای مثال های "خودتان امتحان کنید" در کامپیوتر شخصی تان، به صورت زیر عمل فرمایید:
1- ویرایشگر NotePad را اجرا نمایید.
2- محتوای مثال "خودتان امتحان کنید" را کپی و داخل ویرایشگر Past کنید.
3- منوی File -> Save را انتخاب نمایید.
4- در پنجره باز شده، در قسمت File Name نام دلخواه تان را وارد نمایید و پسوند آنرا به htm یا html تغییر دهید.
5- حالا به محل ذخیره فایل برید و روی آن دابل کلیک نمایید.
به همین راحتی، حالا فایل مورد نظر در مرورگرتان باز شده و شما خروجی مثال را مشاهده خواهید کرد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # malih niku 1394-04-26 16:36
من این کارا رو کردم ولی دابل کلیک کردم نتیجه نشون نداد فقط همون کدایی که کپی پیس کردم رو نشون داد؟...سوال دومم اینه این قسمت وب آزمایشی خود را ایجاد کنید الان این صفحه ای که باز شده چیهو چی کارش کنیم؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # کوثر 1394-04-29 16:06
منم همین مشکل شمارو داشتم چندبار به شیوه های مختلف امتحان کردم درست شد.شما باید تو قسمت اسم فایل یه اسم برای فایلتون انتخاب کنین و بعدش بنویسینhtml.(مث ال test.html)وهمچن ین تو قسمت save as typeگزینهall filesرو انتخاب کنین و بعد save
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # malih niku 1394-04-30 09:00
ممنون کوثر جان نه مشکلو فهمیدم چی بود من با مرورگر باز نمی کردم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1394-04-26 16:54
همان طور که آقای صادق فرموده اند باید دقت کنید که پسوند فایل html باشه. و اون فایل ها رو با این پسوند ذخیره کنید. در مورد سوال دومتون، باید بگم که این صفحه ای که باز شده است اولین نمونه ی html شما است.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # malih niku 1394-04-26 17:53
ولی من با html.سیو کردم....قسمت دوم رو بازم نفهمیدم یعنی چی ؟برای من یه صفحه تو visual studio باز میشه که بالاش نوشتهthis is main page ولی نمی فهمم این صفخه چیه ؟یعنی چی اولین نمونه html?
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # احسان عباسی 1394-04-26 18:19
توجه کنید که صفحات اچ تی ام ال رو باید با مرورگر باز کنید.
میشه بگید که کدوم کدها رو کپی کردید؟ توی این مطلب که هیچ، خودتان امتحان کنیدی وجود نداره!
-----------------------------------
اگه بخواهم یه طور دیگه براتون توضیح بدهم باید بگویم که این صفحه، اولین صفحه ی اچ تی ام ال شما است که یک سرفصل و یک پاراگراف را به همراه دو عدد لینک به نمایش می گذارد.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+6 # sabasalary1 1393-12-02 19:35
اجرتان با امام حسین ع
کمک بزرگی به ما کردین
یا حق
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # sajjad nik 1393-11-19 10:46
اقا از سایت خوبتون قدر دانی میکنم.میشه اموزشهاتونو دانلودم کرد چون دسترسی به اینترنت به صورت مداوم ندارم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # امیر پهلوان صادق 1393-11-20 07:06
ممنون، برای دانلود بسته های آموزشی قابل نصب روی اندروید به لینک زیر برید:
www.beyamooz.com/product/web
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+8 # Masoud 1393-11-05 20:45
سلام ممنون از کار خوبتون ، واقعاً آرزوم بود سایت w3 school رو فارسی ببینم .
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+25 # سروش 1393-04-23 18:03
من دارم با سایت شما html را یاد می گیرم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+25 # maryam 1392-10-05 19:38
kheili site khubi darin
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی HTML

بستن
مدرس:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!