توضیحات دوره
آموزش HTML
Html چیست؟
تاریخ HTML
در اواخر سال ۱۹۸۰، یک فیزیکدان به نام تیم برنرزلی، سیستمی را برای محققان CERN پیشنهاد کرد. در سال ۱۹۸۹ او یک یادداشت نوشت که یک سیستم هیپنوتیزم مبتنی بر اینترنت را ارائه می دهد.به طور رسمی به پدر HTML معروف است. آخرین نسخه HTML HTML5 است که بعداً در این دوره آموزشی یاد خواهیم گرفت.
آیا HTML سخت است ؟
همانطور که گفته شد HTML و CSS هر دو ساده ترین زبان های کامپیوتری هستند. لذا یادگیری آن ها خیلی سریع بوده و کسب در آمد از آن نیز آسان می باشد. تقریبا هر فرد یا سازمانی که دارای سایت است بی نیاز از کسی که HTML و CSS را بلد باشد نیست.آن قدر بگویم که ساخت و طراحی یک صفحه با HTML و CSS مانند ساخت یک فایل ورد و نوشتن در آن می باشد. (یعنی اینقدر آسون) اما فراموش نکنید که قطعا حرفه ای شدن در هر کاری حتی ساده ترین کار ها زمان زیادی را می طلب.
آیا برای کدنویسی HTML نیاز به ابزار خاصی داریم ؟
در جواب این سوال باید بگویم که شما تنها به یک ویرایشگر کد احتیاج دارید و یک مرورگرو با همین دو ابزار می توانید اقدام به طراحی سایت با HTML و CSS نمایید. همچنین شایان ذکر است که کد های نوشته شده به زبان اچ تی ام ال در هر مرورگری خوانده و اجرا می شوند
تگ HTML چیست؟
تگ های HTML مانند کلمات کلیدی هستند که تعریف می کنند که مرورگر وب چگونه محتوا را شکل می دهد. با کمک tags، یک مرورگر وب می تواند بین یک محتوای HTML و یک محتوای ساده تمایز یابد. تگ های HTML شامل سه قسمت اصلی است: تگ باز، محتوا و برچسب بسته. اما بعضی از تگهای HTML برچسب های بدون استفاده هستند. وقتی یک مرورگر وب یک سند HTML را می خواند، مرورگر آن را از بالا به پایین و چپ به سمت راست می خواند. تگ های HTML برای ایجاد اسناد HTML و ارائه ویژگی هایشان استفاده می شوند. هر تگ HTML ویژگی های متفاوتی دارد.یک فایل HTML باید چند تگ ضروری داشته باشد تا مرورگر وب بتواند بین یک متن ساده و متن HTML تفاوت ایجاد کند. می توانید از این تگ ها که می خواهید، استفاده کنید.همهٔ تگهای HTML باید در < > این براکت ها قرار بگیرند.
هر تگ در HTML وظایف متفاوتی را انجام می دهد.
اگر از یک تگ باز <برچسب <tag> استفاده کرده اید، باید از یک تگ نزدیک </tag> (به استثنای برخی از تگها)
برای آموزش HTML باید چه چیزهایی را بدانیم؟
تقریبا برای آموزش کامل HTML در این دروه هیچ پیش نیازی لازم ندارید و بدون هیچ دانش اولیه ایی در مورد آن می توانید در این دوره HTML شرکت نمایید.
آیا یادگیری HTML آسان است؟
بله، احتمالاً آسان ترین زبان برنامه نویسی پیش رو است که می توانید یاد بگیرید. با داشتن منابع و ابزارهای رایگان آنلاین، این زبان بسیار سریع برای یادگیری نیز است.
HTML برای چه استفاده می شود؟
زبان هایپرت مارکاپ (به انگلیسی: Hypertext Markup) یک زبان برنامه نویسی است که برای توصیف ساختار صفحات وب استفاده می شود. HTML باعث می شود که صفحات ایستا با متن، سربرگ ها، لیست ها، تصاویر، لینک ها و غیره ایجاد کند.آیا یادگیری HTML و CSS برای ساخت سایت کافی است ؟
خیر. یادگیری HTML و CSS تنها بخش بسیار کوچکی از طراحی سایت می باشند.هر سایت دارای دو بخش اصلی است. فرانت اند (چیزی که کاربر می بیند) و بک اند (چیزی که کاربر نمی بیند در واقع همان برنامه نویسی سایت). در این میان باز هم HTML و CSS بخش کوچکی از بخش FRONT-END یک سایت رو به عهده گرفته است. ابزار ها و تکنولوژی هایی که سایت ها با آن ساخته می شوند به صورت کلی به شرح زیر است. البته باید بدانید که یادگیری همه آن ها اجباری نیست اما پیش نیاز هرکدام از آن ها همین اچ تی ام ال و سی اس اس می باشند.
زبان HTML یکی از معدود زبان هایی هست که توسط انواع مرورگر ها بطور مستقیم خوانده می شود و همین نشانه از پر اهمیت بودن زبان اچ تی ام ال است. اگر علاقه مند به طراحی صفحات وب هستید اولین گام یادگیری زبان Html می باشد، چرا که این زبان به منزله اسکلت و ساختمان صفحات وب است.
به عنوان مثال یک ساختمان را در نظر بگیرید، اولین گام برای ساخت یک ساختمان طراحی و پیاده سازی اسکلت ساختمان می باشد و پس از آن به کمک وسایل و ابزار جانبی نما و ظاهر ساختمان تکمیل می گردد.
در دنیای طراحی صفحات وب سایت نیز اسکلت و زیر بنای صفحات در واقع همان زبان HTML بوده و طراحی نما و زیبا سازی سایت به کمک زبان هایی نظیر CSS انجام می گیرد.
شما همچنین می توانید در دوره مقدماتی تا پیشرفته طراحی سایت شرکت نمایید تا تمامی موارد بالا را از صفر تا صد یادبگیرید و بتوانید یک وب سایت کامل را طراحی نمایید.
تفاوت HTML و HTML 5
هر دو HTML و HTML5 زبان های مارکوپ هستند که در درجه اول برای توسعه صفحات وب یا برنامه های کاربردی استفاده می شوند. HTML5 آخرین نسخه HTML است و از قابلیت های جدید زبان مارکاپ مانند چند رسانه ای، برچسب های جدید و عناصر و همچنین APIهای جدید پشتیبانی می کند.
آموزش HTML ویژه چه کسانی هست؟
یک مهارت پایه است برای هر کس که دارای علاقه قابل قبول به حرفه ی توسعه وب دارد که علاقه به برنامه نویسی دارید یادگیری این زبان را هر چه زودتر شروع کنید
اموزش html چقدر زمان میبرد؟
زمان یادگیری HTML بستگی به زمانی که برای یادیگیری میگذراید و تمرینتان دارد برای هر کس متفاوت از یک هفته الی سه ماه است.
آیا یادگیری html برای طراحی وب ضروری است؟
بله، برای یادگیری کامل طراحی سایت و یا برنامه نویسی یک وب سایت باید در ابتدا دوره HTML را گذراند و یک پیش نیاز محسوب می گردد.
آیا html یک زبان برنامهنویسی است؟
خیر، HTML یک زبان نشانه گذاری محسوب می شود که به مانند یک اسکلت برای سایت می باشد.
زبان نشانهگذاری چه تفاوتی با زبان برنامه نویسی دارد؟
زبان برنامه نویسی ابزاری قدرتمند است که به وسیله آن میتوانیم با کامپیوترها حرف بزنیم. زبانهای برنامه نویسی به کمک دستورالعملهایی که برای کامپیوتر قابل فهم هستند با آنها ارتباط برقرار کرده و به طور عمده از ساختارهای کنترلی و شرطی استفاده میکنند. سخت افزار برای این که درست کار کند نیاز به یک سری دستورالعمل دارد. این دستورالعملها توسط برنامه نویس و زبانی که برای کامپیوتر قابل فهم باشد، به سخت افزار داده میشود.
انواع مختلفی از زبان نشانه گذاری وجود دارد که معروفترین آن HTML است. اگر به اسم زبان نشانه گذاری دقت کنید، متوجه مفهوم آن خواهید شد. در زبانهای نشانه گذاری خبری از ساختارهای رایج برنامهنویسی مثل شرط، حلقه، تکرار و غیره وجود ندارد و شما داخل متن خود از یک سری نشانه استفاده میکنید. در حقیقت در این زبانها شما به کمک این نشانهها متن را از سایر عناصر صفحه جدا میکنید تا به کمک آنها المانهای مختلف را داخل یک صفحه وب قرار داده و ساختار صفحه را مشخص کنید.
ویژگی ها HTML
زبان خیلی ساده ایی است و برای همین سادگی بسیار قابل درک است.
درست کردن یک کار بسیار آسان است ارائه مؤثر با HTML، چون این برچسب های شکل دهنده زیادی دارد.
یک راه انعطاف پذیر برای طراحی صفحات وب همراه با متن را فراهم می کند.
برنامه نویسان را برای اضافه کردن یک آسان می کند لینک در صفحات وب (با برچسب لنگر html) بنابراین علاقه به مرور کاربر را افزایش می دهد .
ویژگی مستقلی دارد که می توان در هر پلتفرمی مانند ویندوز، لینوکس و مکینتاش و غیره نمایش داد.
برنامه نویس را آسان می کند گرافیک، ویدئو و صدا به صفحات وب که آن را جذاب تر و تعاملی تر می کند.
HTML یک زبان بی مورد است، به این معنی که می توانیم از تگ ها در حالت پایین یا بالا استفاده کنیم.
ارتباط html با css
همانطور که پیش تر اشاره کردیم به زبان ساده CSS ابزاری برای زیبا سازی صفحات وب می باشد.
ما برای طراحی ظاهر سایت به شکل دلخواه از CSS استفاده می کنیم و برای اینکار یکسری صفات تعریف شده در سی اس اس را به تگ های اچ تی ام ال نسبت می دهیم.
در واقع CSS زبانی برای توصیف ظاهر صفحات وب شامل رنگ ها، چارچوب پیرامون عکس، نشانگر ماوس، آرایش و فونتها (اندازه، رنگ، نوع) است.
با استفاده از CSS میتوان نمایش صفحه را برای انواع مختلف دستگاه ها مانند صفحات بزرگ، صفحات کوچک و پرینترها تنظیم کرد که این کار را ریسپانسیو سازی می گویند.
HTML چطور کار میکند؟
HTML عناصر مختلفی را از جمله پاراگراف، لیست، عکس، صوت و غیره کنار هم قرار میدهد تا چهارچوب اصلی صفحه وب را ایجاد کند. به زبان سادهتر ما با HTML بدنه اصلی صفحه وب را میسازیم. حال که با اصلیترین وظیفه HTML آشنا شدید، بگذارید به سراغ بررسی یک مثال برویم.
اگر HTML را شبیه به یک ساختمان در حال ساخت در نظر بگیریم، مهندس عمران که پی ساختمان را ریخته و اسکلت آن را میسازد حکم کسی را دارد که ساختار اصلی صفحات وب را با HTML میسازد. همچنین مهندس معماری که وظیفه دارد ظاهر ساختمان را زیباتر کند مانند کسی است که به کدنویسی با CSS میپردازد.
البته در دنیای وب معمولا وظیفه کدنویسی HTML و CSS به عهده یک نفر خواهد بود. فایلهای HTML با پسوند .htm یا .html در سیستم ذخیره میشوند. این فایلها تقریبا توسط همه مرورگرهای وب پشتیبانی میشوند و به راحتی میتوانند محتویات آن را رندر کنند. منظور از رندر کردن این است که عناصر داخل سایت که ترکیبی از کد، تصویر، انیمیشن، ویدئو یا غیره هستند، تبدیل به اطلاعات قابل نمایش برای کاربران میشوند.
html مخفف چیست
شاید برای شما هم سوال باشد که معنی HTML چیست یا به عبارتی html مخفف چیست ؟ عبارت HTML مخفف (Hyper Text Markup Language) می باشد که معادل فارسی آن «زبان نشانه گذاری ابر متنی» خواهد بود. البته با توجه به وسعت کاربرد آن این ترجمه فارسی نمی تواند کاربرد HTML را به خوبی توضیح دهد.در ادامه مقاله، برای روشن شدن معنی دقیق اچ تی ام ال و یا به عبارتی زبان نشانه گذاری ابر متنی، با کاربرد HTML بیشتر آشنا خواهیم شد. نکته: اچ تی ام ال یک زبان برنامه نویسی نیست. اچ تی ام ال یک زبان نشانه گذاری است.
کاربرد HTML چیست
اگر بخواهیم کاربرد HTML را بطور ساده توضیح دهیم باید بگوییم:
HTML ابزاری است که به کمک تگ ها (Tag) قالب کلی صفحات را می سازد، در واقع شما توسط تگ های HTML، اسکلت صفحات وب خود را می سازید.
اگر کمی با طراحی وب آشنایی داشته باشید، حتما میدانید که طراحی وب ۲ مرحله اصلی دارد:
- ساختاربندی اصلی صفحات وب که با HTML انجام میشود.
- اضافه کردن جذابیت های ظاهری مثل رنگ و… که با CSS انجام میشود.
حال شاید بپرسید تگ (Tag) چیست؟!
قبل از توضیح این سوال و البته تکمیل توضیح سوال html چیست و زبان نشانه گذاری ابر متنی دقیقا یعنی چه، این نکته را فراموش نکنید که:
ساخت یک وب سایت حرفه ای و کامل شامل استفاده از زبان های و کد های مختلف برنامه نویسی مثل php، ASP، HTML، CSS و… است، که هیچکدام از این کدها و زبان های بجز اچ تی ام ال برای مرورگرهای مختلف قابل فهم نیست. یعنی مرورگر ها فقط کد ها و عناصری را نمایش می دهند که در دل کدها HTML نوشته شده باشند.
به عبارتی وقتی در جواب سوال html چیست می گوییم : «زبان نشانه گذاری ابر متنی»، درواقع درحال توضیح این امر هستیم که HTML یک زبان نشانه گذاری است که شامل بخش های مختلف به نام تگ است. که هر کدام از این تگ ها دارای کاربرد و خواص مربوط خود هستند و به مرورگرها کمک می کنند تا بفهمند هر بخش از صفحه چه نوع عنصری است و باید به چه صورت نمایش داده شود.
HTML چه رابطهای با زبانهای css و javascript دارد؟
کمتر پیش میآید که از HTML صحبت کنیم و ذهنمان به سمت زبانهای css و JavaScript کشیده نشود. تا اینجای کار فهمیدیم HTML چیست و چرا در طراحی سایت به آن نیاز خواهیم داشت. اما به این نکته توجه داشته باشید که امروزه HTML به تنهایی کاربرد زیادی ندارد.
چون فقط ساختار صفحه را شکل داده و اجازه اضافه کردن جذابیتهای ظاهری را نمیدهد. صفحات HTML به تنهایی ارزشی برای انتشار ندارند اما زمانی که در کنار css و JavaScript قرار میگیرند، زیبایی واقعی خود را در طراحی وب نشان میدهند.
با توجه به نکاتی که گفته شد میتوان HTML به تنهایی را مانند یک انسان برهنه در نظر گرفت که CSS مانند لباسهای شیک، ظاهر آن را آراسته میکند. در نهایت جاواسکریپت باعث میشود او حرکت کرده و با بقیه شروع به صحبت کند. پس در طراحی ظاهر سایت به طور خلاصه باید گفت :
- HTML به کمک تگهای از قبل تعریف شده ساختار و اسکلت صفحه وب را مشخص میکند.
- CSS به ما کمک میکند عناصر مختلف را در صفحه جابهجا کنیم، رنگبندی را تغییر دهیم، فونتها را عوض کنیم و به جایی برسیم که یک صفحه وب با ظاهر قابل قبول و قابل ارائه برای داشته باشیم.
- JavaScript به ما اجازه میدهد صفحات وب را به طور داینامیک یا پویا طراحی کنیم. با JS میتوانیم عناصر تعاملی مختلف مثل اسلایدر، صفحه pop up، گالری عکس و چیزهای مشابه تولید کنیم.
مخترع HTML (تیم برنرز – لی)
در سال ۱۹۸۹ میلادی جایی که فیزیکدانان سراسر دنیا در آزمایشگاه قاره اروپا در ژنو (سرن CERN ) برای آزمایش فیزیک ذره ای دور هم جمع شده بوده و به بیان دیدگاه ها، تفکرات، و یافته های خود می پرداختند تیم برنرز- لی ایده ای به فکرش خطور کرد.
ایده ای که قرار بود کاری کند تا سایر دانشمندان بدون حضور در آزمایشگاه بتوانند یافته و نظرات خود را با سایر دانشمندان به انتشار بگذارند.
این ایده باعث شد تا تیم برنرز- لی در سال ۱۹۸۹ میلادی شبکه جهانی وب را اختراع کند. البته این شبکه در ابتدا یک شبکه خصوصی بود و قطعا این تیم هیچ وقت فکر نمی کرد این اختراع روزی وارد تمام خانه در سرتاسر دنیا شود.
در ادامه تیم به این موضوع فکر کردند که صفحات علمی منتشر شده در شبکه، باید چیزی فراتر از یک متن خالص باشند. پس آنها دوباره شروع به کار کردند و با توسعه شبکه خود نام این مستندات و متون پیشرفته منتشر شده را ابر متن (HyperText) گذاشتد. بطوریکه صفحات می توانستند به یکدیگر لینک بخورند. و این شروع بود بر ایجاد زبان Html و ساخت صفحات وب که تا به امروز با انتشار آخرین ورژت html یعنی HTML5 در حال توسعه یافتن بوده است.
فرانت اند (Front End) به چه معناست؟
HTML یکی از پرکاربردترین زبانها در زمینه طراحی فرانت اند است. به مجموعه تکنولوژی هایی که روی ظاهر و گرافیک سایت تاثیر گذاشته و هیچ ارتباطی با عملکرد آن ندارند فرانت اند گفته میشود. در فرانت اند فقط با عناصر بصری سایت کار میکنیم و هر تغییری که ایجاد میکنیم در چهره سایت مشخص میشود.
تا اینجا درباره HTML و CSS و JavaScript صحبت کردیم. این زبانها اصلیترین عناصر فرانت اند هستند و برای یادگیری آنها برای فرانت اند کار شدن ضروری است. پیشنهاد میکنیم مقاله زیر را بخوانید تا دید بهتری نسبت به فرانت اند پیدا کنید.
تفاوت HTML5 نسبت به نسخه های قبلی اش چیست؟
برخی از مزایای HTML5 عبارتند از:
یک پشتیبانی چند مدیا دارد.
قابلیت برای ذخیره داده های آفلاین با استفاده از پایگاه داده های SQL دارد.
جاوا اسکریریپت را می توان در پس زمینه اجرا کرد.
HTML5 همچنین به کاربران اجازه می دهد تا شکل های مختلفی مانند مستطیل ها، دایره ها، مثلث ها و غیره را بکشند
خصوصیات تگ های html ( اتریبیوت های html )
همانطور که گفته شد زبان HTML از قرار گرفتن تگ ها مختلف در کنار هم ساخته شده است. حالا باید بدانید که تگ ها نیز شامل خصوصیات و صفت هایی هستند که به آنها اتریبیوت (attribute) گفته می شود. همچنین اتریبیوت های html نیز دارای مقداری هستند که با آنها attribute value گفته می شود. در مورد صفت ها در html بعدا مفصلا توضیح خواهیم داد.
بنابراین می توان گفت که صفت ها در html بر گیرنده مقادیر خاصی هست که تأثیر مشخصی بر محتوا میگذارد، برای مثال برچسبهایی برای تغییر شکل ظاهری متن، نظیر درشت و ضخیم کردن یک کلمه یا برقراری پیوند به صفحات دیگر در اچ تی ام ال تعریف شدهاند.
فایل اچ تی ام ال چیست
در واقع فایل html فایلی است که شما پس از یک کدنویسی حرفه ای برای طراحی سایت، با فرمت .html ذخیره می کنید.
همانطور که پیش تر گفته شد، شما در فایل های html به کمک تگ ها و اتریبیوت ها می توانید متن، تصویر، صوت و سایر پسوند های مختلف را به طور ترکیبی در کنار هم داشته باشید و حتی بین آن ها توسط لینک، پیوند ایجاد نمایید.
جلسات دوره
0
1-
11 دقیقه
1
2-
در این قسمت به نصب و معرفی نرم افزار های مورد نیاز میپردازیم.
25 دقیقه
2
3-
3
4-
در این جلسه اموزش مقدماتی CSS را خواهیم داشت.
10 دقیقه
4
5-
در ایم قست کار با تگ های کاربردی لینک، تصویر و فاصله و خط افقی را فرا میگیریم.
18 دقیقه
5
6-
در این قسمت با آموزش Text Formatting در HTML سر و کار داریم و تمرین جلسه قبل رو باهم برسی خواهیم کرد.
30 دقیقه
6
7-
فایل های پروژه را می تونوانید از اینجا دانلود نمایید
7
8-
در این قسمت در رابطه با تگ های کامنت و رنگ و استایل بحث خواهیم کرد.
14 دقیقه
8
9-
18 دقیقه
9
10-
در این قسمت با ادامه آموزش تگ های جدول در HTML صحبت خواهیم کرد.
16 دقیقه
10
11-
در این قسمت با آموزش تگ های لیست در HTML صحبت خواهیم کرد.
18 دقیقه
11
12-
در این قسمت با آموزش کار با تگ DIV در HTML صحبت خواهیم کرد.
14 دقیقه
12
13-
این قسمت آموزش کار با Class ها و نحوه استفاده در HTML را خواهیم داشت.
11 دقیقه
13
14-
این قسمت آموزش کار با ID ها و نحوه استفاده در HTML را خواهیم داشت.
14 دقیقه
14
15-
این قسمت آموزش کار با Iframes ها و نحوه استفاده در HTML را خواهیم داشت.
8 دقیقه
15
16-
این قسمت آموزش کار با Layout ها و نحوه استفاده آن در HTML را خواهیم داشت.
14 دقیقه
16
17-
این قسمت آموزش کار با form ها و نحوه استفاده آن در HTML را خواهیم داشت.
9 دقیقه
17
18-
این قسمت ادامه آموزش کار با فرم ها و نحوه استفاده آن در HTML را خواهیم داشت.
21 دقیقه
18
19-
این قسمت ادامه آموزش کار با فرم ها و نحوه استفاده آن در HTML را خواهیم داشت.
17 دقیقه
19
20-
این قسمت ادامه آموزش کار با فرم ها و نحوه استفاده آن در HTML را خواهیم داشت.
16 دقیقه
20
21-
21
22-
این قسمت آموزش کار با مدیا ها و نحوه استفاده آن در HTML را خواهیم داشت.
7 دقیقه
22
23-
این قسمت ادامه آموزش کار با مدیا ها و نحوه استفاده آن در HTML را خواهیم داشت.
7 دقیقه
23
24-
24
سوالات متداول
دیدگاه و پرسش
-
احمد یاحقی
1 روز پیش
ویژگی های دوره
- پشتیبانی دارد
- روش دریافت دانلود و مشاهده آنلاین
- پیش نیاز بدون پیش نیاز
- نوع دوره ویدویی
- آیا پروژه محور است؟ بله
- مدرک دارد
امیرحسین پورسمیع
من امیرحسین پورسیمع فارغ تحصیل از دانشگاه بین الملل امام خمینی، دارای مدرک کارشناسی نرم افزار و کارشناسی ارشد هوش مصنوعی هستم، من در زمینه های برنامه نویسی وب سایت (طراحی سایت ) با زبان های PHP و JavaScript ، برنامه نویسی پایتون، هوش مصنوعی فعالیت دارم و به زبان های انگلیسی و آلمانی مسلط هستم و در حال حاضر مدیرعامل شرکت برنامه نویسی فونیکس و آکادمی آرته سافت هستم.
دوره های مرتبط با این دوره!
برنامه نویسی وب، طراحی سایت از مقدماتی تا پیشرفته ( پروژه محور)
517
(دانشجو)3.3
( 8 نظر )