باسلام و عرض ادب. در خدمت دوستان عزیز هستیم با آموزش HTML؛ آموزش اصول اولیه و عناصر HTML از وب سایت آموزش برنامه نویسی سورس باران. این دوره آموزش html از مقدماتی تا متوسطه است. HTML پایه طراحی سایت و تمام فعالیتهای وابسته به آن است. بنابراین جهت طراح وب سایت شدن، حتما حتما باید از آموزش HTML آغاز کنید.لطفا با ما همراه باشید…
در این دوره آموزش HTML از وب سایت آموزشی سورس باران، دهها نمونه کد HTML گنجانده میشود تا با ساختار آنها آشنا شده و در صورت لزوم از آنها برای انجام پروژههای طراحی سایت خود استفاده کنید.
مفاهیم آموزش HTML، مقدمه ای بر زبان نشانه گذاری
همانطور که پیش از این هم در مقاله معرفی HTML اشاره کردیم، «اچ.تی.ام.ال» یک زبان نشانه گذاری استاندارد برای ایجاد صفحات وب است. ای زبان با استفاده از نشانهها، ساختار صفحات را تعیین میکند. عناصر HTML بلوکهای سازنده صفحات هستند و با استفاده از تگها مشخص میشوند. هر تگ HTML بخشهایی از محتوا مثل عنوان، پاراگراف، جدول و غیره را مشخص میکند. مرورگرها این تگها را نمایش نمیدهند بلکه از آنها برای تفسیر محتوای صفحه استفاده میکنند.
یک نمونه سند ساده HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
اگر به این سند (Document) توجه کنید میبینید که از چند تگ با علامت <> تشکیل شده است که هر کدام بخشهایی از سند HTML را برای مرورگرها توضیح میدهند. حالا به توضیح هر قسمت از این سند می پردازیم تا ببینیم هر تکه کد چه معنایی در بر دارد و چه دستوری به مرورگر برای نمایش محتوا میدهد:
– عبارت <DOCTYPE html!>
مشخص میکند که این سند یک سند HTML5 است.
– عنصر <html>
عنصر ریشه یک صفحه HTML است.
– عنصر <head>
حاوی اطلاعات متا در مورد سند است.
– عنصر <title>
عنوان سند را مشخص میکند.
– عنصر <body>
حاوی محتوای قابل دیدن صفحه است.
– عنصر <h1>
یک عنوان درشت را تعریف میکند.
– عنصر <p1>
پاراگراف را تعیین میکند.
نجوه بکار گیری تگ ها در HTML
تگها در واقع نام عناصر هستند که درون پرانتزهای شکسته قرار میگیرند. تگهای HTML معمولا به حالت جفت میآیند مثل <p>
و <p/>
. تگ اول در جفت را تگ آغازین و تگ دوم را تگ پایانی مینامند. تگ پایانی درست به شکل تگ آغازین نوشته شده اما یک اسلش ( / ) هم قبل نام تگ قرار داده میشود.
مرورگرهای وب
هدف یک مرورگر وب (مثل گوگل کروم، اینترنت اکسپلورر، فایرفاکس یا سافاری) خواندن اسناد HTML و نمایش آنها است. مرورگر تگهای HTML را نمایش نمیدهد اما از آنها برای تعیین نحوه نمایش سند استفاده میکند.
ساختار صفحات HTML
در زیر نمایی از ساختار یک صفحه HTML آمده است
نکته: فقط محتوای درون بخش <body> در مرورگر نمایش داده میشود.
عبارت <!DOCTYPE> در HTML
این عبارت نشاندهنده نوع سند است و به مرورگرها کمک میکند تا صفحات سایت را به درستی نمایش دهند. این عبارت باید فقط یک بار و در بالای صفحه (قبل از هرگونه تگ HTML) قرار بگیرد. این عبارت برای HTML به صورت <!DOCTYPE html> نوشته میشود.
نوشتن HTML با استفاده از Notepad یا TextEdit
میتوان صفحات وب را با استفاده از ویرایشگرهای حرفهای HTML ایجاد کرده و تغییر داد. البته ما در دوره آموزش HTML در سورس باران، توصیه میکنیم برای یادگیری HTML از یک ویراشگر متنی ساده مانند نوت پد (PC) یا تکست ادیت (Mac) استفاده کنید. به نظر میرسد استفاده از یک ویرایشگر ساده روش خوبی برای یادگیری HTML باشد. با دنبال کردن چهار مرحله زیر میتوانید اولین صفحه وب خود را با نوت پد یا تکست ادیت ایجاد کنید. البته اگر دوست داشته باشید از امکانات بیشتری بهره ببرید، میتوانید روی سیستم عامل ویندوز از ++Notepad هم استفاده کنید.
استفاده از نوت پد برای ایجاد سند HTML (ویندوز)
در ویندوز ۸ و نسخههای بعدی ابتدا منوی استارت را باز کرده و عبارت Notepad را تایپ کنید. در ویندوز ۷ و نسخههای قبلی، منوی استارت را باز کرده، وارد قسمت Programs شده و Accessories را انتخاب کرده و سپس Notepad را پیدا و باز کنید.
استفاده از تکست ادیت برای HTML در Mac
قسمت Finder را باز کرده، از منوی اپلیکیشن گزینه TextEdit را انتخاب کنید. همچنین باید برخی از preferenceها را تغییر دهید تا فایلها به درستی ذخیره شوند. در قسمت Preference، گزینه Format و سپس Plain Text را انتخاب کنید. سپس باکسی «Ignore rich text commands in HTML files» که در زیر گزینه «Open and Save» قرار دارد را تیک بزنید. سپس یک سند جدید باز کرده تا کدهای خود را در آن قرار دهید.
نوشتن کدهای HTML
داخل نوت پد کدهای HTML را نوشته یا کپی کنید.
<!DOCTYPE html>
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
ذخیره کردن صفحه HTML
فایل را روی کامپیوتر ذخیره کنید. گزینه File و سپس Save as را در منوی نوت پد انتخاب کنید. فایل را به نام «index.htm» نامگذاری کرده و حالت encoding را روی UTF-8 (که حالت encoding مطلوب برای فایلهای HTML است) تنظیم کنید.
پسوند فایل میتواند .htm یا .html باشد که هیچ فرقی هم با هم ندارند و به سلیقه شما بستگی دارد.
مشاهده صفحه HTML در مرورگر
فایل HTML ذخیره شده را روی مرورگر مورد نظر خود باز کنید (روی فایل دابل کلیک کنید). نتایج به شکل زیر خواهد بود:
در قسمتهای بعدی آموزش مقدماتی تا متوسطه HTML آموزش های پیشرفته تری را جهت توسعه یک فایل HTML برای طراحی وب سایت قرار می دهیم.
لیست جلسات قبل آموزش Html
- آموزش اصول اولیه و عناصر HTML
- آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
- آموزش کار با پاراگراف و استایل در Html
- آموزش کار با قالب بندی متن در Html
- آموزش کار با کامنت در HTML
- آموزش کار با کامنت در HTML
- آموزش کار با رنگ ها در HTML
- آموزش کار با تصاویر در HTML
- آموزش کار با لینک در HTML
- آموزش کار با جدول در HTML
- آموزش کار با لیست ها در HTML
- آموزش کار با عناصر Block و Inline در HTML
- آموزش کار با عنصر Class در HTML
- آموزش Html؛ آموزش iframe در HTML
- آموزش Html؛ آموزش جاوا اسکریپت در HTML
- آموزش کار با عنصر Head در HTML
- آموزش Layout در HTML
- آموزش طراحی سایت ریسپانسیو در HTML
- آموزش عناصر کد کامپیوتر در HTML
- آموزش موجودیت (Entities) در HTML
- آموزش نمادها (Symbols) در HTML
- آموزش کار با Character (کاراکترهای رزرو شده) در HTML
- آموزش رمزگذاری URL در HTML
- آموزش کامل کار با فرم ها در HTML
- آموزش انواع ورودی (Input) در HTML
- آموزش خصوصیات ورودی در HTML
حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی
حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی
پیشنهاد ویژه 1 : دانلود کاملترین آموزش تصویری HTML به زبان فارسی
پیشنهاد ویژه 2 : دانلود تمامی مجموعه های آموزشی HTML سورس باران
پیشنهاد ویژه 3 : کتاب آموزش HTML5 و CSS3 در قالب پروژه
راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.
- منبع : سورس باران
- رمز فايل : www.sourcebaran.com
- انتشار: ۲ شهریور ۱۳۹۷
دسته بندی موضوعات
- آموزش برنامه نویسی
- آموزش کریپتو کارنسی (ارز دیجیتال)
- آموزش متنی برنامه نویسی
- پروژه برنامه نویسی
- فروشگاه
- فیلم های آموزشی
- #F
- ++C
- 3ds max
- Ada
- ADO.NET
- Adobe Flash
- Agile
- Ajax
- AngularJS
- Anime Studio
- apache
- ARM
- Asp.Net
- ASP.NET MVC
- assembly
- AVR
- Azure
- Bootstrap
- Cassandra
- CCNA
- CCNP
- CCSP
- ChatGPT
- Cisco
- CMD
- COBOL
- CSS
- Cython
- Django
- Dreameaver
- Elixir
- EntityFramework
- Erlang
- Flash
- Go
- Groovy
- Haskell
- Htaccess
- HTML
- IOS
- Jade
- jquery
- Kendo UI
- Linq
- Linux
- LUA
- MariaDB
- maya
- Meteor
- MongoDB
- Mono Android
- MonoGame
- Mysql
- NoSQL
- Oracle
- Orchard
- Perl
- php
- PHPMyAdmin
- R
- Rational Rose
- Ruby
- Rust
- Scala
- Scrum Master
- SFML
- SharePoint
- SignalR
- silver light
- SQL Server
- Stimulsoft Reports
- Telerik
- UML
- VB.NET&VB6
- Vue 3
- WPF
- Xml
- آردوینو
- آموزش های پروژه محور
- آیونیک
- اتوکد
- الگوریتم تقریبی
- الگوریتم نویسی و فلوچارت
- امنیت
- اندروید
- اندروید استودیو
- انیمیشن سازی
- بازی سازی با Scratch
- بک ترک
- بیسیک فور اندروید
- پایتون
- پرولوگ
- پریمیر
- جاوا
- جاوا اسکریپت
- جنگو
- جوملا
- دارت
- دلفی
- دوره های رایگان پیشنهادی
- زامارین
- سئو
- ساخت CMS
- ساخت اتوران
- ساختمان داده ها
- سی شارپ
- شبکه و مجازی سازی
- طراحی الگوریتم
- طراحی بازی
- طراحی وب
- فتوشاپ
- فریم ورک codeigniter
- فلاتر
- کاتلین
- کامپایلرها
- کانستراکت
- کریستال ریپورت
- کلوژر
- گوگل آنالیتیکس
- گیت
- لاراول
- مای بی بی
- مایکروسافت پروجکت
- متریال دیزاین
- متلب
- معماری کامپیوتر
- مهندسی اینترنت
- میکروتیک
- نود جی اس
- نیوک
- هوش مصنوعی
- ویبولوتین
- ویژوال استودیو
- یونیتی
- کتاب های آموزشی
- Ada
- Ajax
- Android
- ASP.NET
- ASP.NET Core
- AVR
- clips
- CNC
- COBOL
- CQRS
- Cython
- Dreamweaver
- Elixir
- Entity Framework 4.0
- Erlang
- Go
- Groovy
- Haskell
- LINQ
- Lua
- Matlab
- MFC
- Node.js
- PERL
- php
- PLC
- Prolog
- React
- Rust
- Scala
- SFML
- SharePoint
- silver light
- VHDL
- VMware
- WinJS
- Workflow
- WPF
- XHTML
- Yii Framework
- اتوکد
- اچ تی ام ال
- اسمبلی
- اکتیو ایکس
- الگوریتم و فلوچارت
- انگولار
- اوبونتو
- اوراکل
- بازی سازی
- بانک اطلاعاتی
- برنامه نویسی سوکت
- برنامه نویسی موبایل
- بک ترک
- پاسکال
- پایان نامه
- پایتون
- پرولوگ
- جاوا
- جاوا اسکریپت
- جی کوئری
- حوملا
- داده کاوی
- دلفی
- رباتیک
- روبی
- زبان ماشین
- سئو
- ساختمان داده ها
- سایر کتاب ها
- سخت افزار
- سوئیفت
- سی اس اس
- سی پلاس پلاس
- سی شارپ
- سیستم عامل
- سیستم های خبره
- شبکه و مجازی سازی
- شبیه سازی کامپیوتر
- طراحی الگوریتم
- فتوشاپ
- فریم ورک گتنا
- کاتلین
- کالی لینوکس
- کریستال ریپورت
- گزارش کارآموزی
- گوگل
- لیسپ
- متلب
- مقاله
- مهندسی نرم افزار
- نیوک
- هوش مصنوعی
- وب مستر
- ویژوال بیسیک
- نرم افزار و ابزار برنامه نویسی
- وردپرس