آموزش مفاهیم تئوری html
اسلاید 1: آموزش مفاهیم تئوری
اسلاید 2: استیو جابز معتقد بود که تمام مردم باید برنامه‌نویسی یاد بگیرند، چون برنامه‌نویسی به شما یاد می‌دهد که چگونه فکر کنید. اهمیت برنامه‌نویسی در دنیای امروز که همه چیز وابسته به تکنولوژی و کامپیوتر است، بالا رفته است.مقدمهزمانی که برنامه‌نویسی یا کدنویسی را در تک تک ابعاد زندگی خود ( مهارت، دانش و تجربه در زمینه‌های دیگر زندگی) نهادینه می‌کنید، هر کدام از این بُعد‌ها، قدرتمند‌تر و هدفمند‌تر از قبل می‌شوند.
اسلاید 3: تفکر خلاقانه در لحظات بحرانیدر حال حاضر، اکثر مدیران اجرایی در تلاش برای پیدا کردن راه حلی برای افزایش سود‌دهی و کاهش هزینه‌های جانبی هستند. باید این موضوع را در نظر گرفت که کدنویسی و تکنولوژی، تأثیر به‌سزایی در سازمان‌دهی و کنترل بخش‌های مختلف یک کسبوکار دارد و ورود آن، سبب می‌شود که فرد با دید حساس‌تری پروسه‌های جاری را دنبال کند و به دنبال راه‌حل‌های خلاقانه‌تری برای بهبود راندمان کاری باشد. کدنویسی، کاری بسیار خلاقانه است. خلاقیت نه از بُعد هنرمندانه؛ بلکه از این بُعد که شما چیزی را خلق کرده‌اید که قبلا وجود نداشته است. با استفاده از چندین ابزار، نرم‌افزاری را خلق کرده‌اید که توسط جامعه مورد استفاده قرار می‌گیرد و یا کاری را بهبود می‌بخشد.
اسلاید 4: وقتی که علم کدنویسی را فرا می‌گیرید، دید جدیدی به دنیا خواهید داشت. زمانی که می‌فهمید چه کار‌هایی را میتوان با برنامه‌نویسی انجام داد، درک بهتری از تکنولوژی که در تمام زندگی شما تأثیر می‌گذارد، خواهید داشت.درک بهتری از تکنولوژیدر دنیایی که تکنولوژی حرف اول را می‌زند، دانستن زبان برنامه‌نویسی از اهمیت بالایی برخوردار است. در حال حاضر تکنولوژی در تمام شاخه‌‌ها (چه هنر، صنعت، پزشکی، کسبوکار و غیره) وارد شده است؛ به همین جهت دانستن زبان برنامه‌نویسی به همه توصیه می‌شود.
اسلاید 5: زبان های برنامه نویسی تحت وب۱- زبان های برنامه نویسی سمت مشتری client-side) )این نوع زبان ها شامل html , css , javascript و کتابخانه های مشتق شده از javascript همچون jquery می باشند. با این نوع زبان ها می توانیم چارچوب استاتیک سایت و برخی اعتبار سنجی های سایت خود را کدنویسی کنیم.۲- زبان های برنامه نویسی سمت سرور (server-side)این نوع زبان ها جهت پویا ( داینامیک ) کردن سایت کاربرد دارند ، زبان هایی همچون php و Asp.net از این دست هستند. پویایی وبسایت ها و لود سریع صفحات سایت به کدنویسی بهینه و تمیز در سمت سرور بستگی دارد.پنل مدیریت محتوای محبوب وردپرس نیز بر پایه زبان برنامه نویسی PHP نوشته شده است.
اسلاید 6: طبقه بندی زبان های برنامه نویسی)Low Level Language زبان های برنامه نویسی سطح پایین ))High Level Language زبان های برنامه نویسی سطح بالا )زبانهای برنامه نویسی سطح پایینMachine Language (زبان ماشین )Assembly Language (زبان اسمبلی )High Level Language زبانهای برنامه نویسی سطح بالا C++ .net C# Visual Basic Delphi و Javaو زبان های طراحی سایت...
اسلاید 7: تاریخچهاین زبان در یک آزمایشگاه فوق انرژی فیزیک دانشگاه Switzerland Geneva به نام CERN متولد شد. CERN مکانی بود که فیزیک دانان از اقصا نقاط جهان در آن جا جمع می‌شدند و به تبادل دیدگاه ها ، تفکرات و یافته های خود با یکدیگر می‌پرداختند .)Tim Berners-Lee یکی از محققان این آزمایشگاه(ایده ای در ذهنش جرقه زد )چه خوب می‌شد که فیزیکدانان سراسر دنیا می‌توانستند بدون حضور در CERN اطلاعات و یافته های خود را از مکان های مختلف با یکدیگر رد و بدل کنند(.
اسلاید 8: تاریخچه1990: فراهم شدن امکان به اشتراک گذاری اطلاعات توسط پرسنل شاغل درCERNاواخر 1990: قرار گرقتن صفحه وب بر روی سرور1993:دسترسی رایگان مردم به world wide web:1995انتشارHTML3.0:1997انتشار نسخه 4 از HTML:2012 انتشارHTML5.0 توسطW3C( World Wide Web Consortium) ، کنسرسیوم شبکه جهانی وب که وظیفه استاندارسازی HTML , CSS را بر عهده دارد.
اسلاید 9: نرم افزار های مورد نیاز در HTMLیک ویرایشگر متن مثل Notepad یا ویرایشگر های پیشرفته‌تری همچون Notepad++ ، PhpStorm ،Dreamweaverو … برای نمایش کدهایی که می نویسید نیاز به یک مرورگر دارید (Internet Explorer ، Mozilla Firefox ، Chrome و … )بهترین نرم افزار های کد نویسی HTML در سال 2020نرم افزار ویرایشگر Atomنرم افزار ویرایشگر Notepad++نرم افزار ویرایشگر Sublime Textنرم افزار ویرایشگر Bracketsنرم افزار ویرایشگر Visual Studio Code
اسلاید 10: HTML چیست ؟عبارت HTML (اچ تی ام ال ) مخفف Hyper Text Markup Language به معنی زبان نشانه گذاری فوق متن است. Html زبان استاندارد طراحی صفحات وب است و کليه کدهای صفحه اعم از طرف سرور و طرف مشتری در نهايت به کدهای HTML تبديل شده و توسط مرورگر نمايش داده می شوند.
اسلاید 11: HTML یک زبان نشانه گذاری است ، به اين معنی که بخش های مختلف توسط اجزايی به نام تگ(tag) از هم جدا شده است.هر کدام از تگ ها دارای کاربرد و خواص مربوط خود هستند . اين تگ ها به مرورگر اعلام می کنند که هر بخش از صفحه چه نوع عنصری است و بايد به چه صورت نمايش داده شود .به تگ های دوتایی تگ های زوج یاelement گفته می شود.
اسلاید 12: در يک صفحه HTML می توان انواع عناصر از قبيل متن ، تيتر ، عکس ، جدول و ... را قرار داد .برای هر عنصر بايد از تگ مربوط به آن استفاده کرد . صفحات HTML فقط از کد ها که به صورت متن هستند تشکيل شده اند. بدین معنا که برای تصویر کد مربوط به تمایش تصویر و جدول و ... کدهای اچ تی ام ال مربوط به هر یک را باید نوشت و مرورگر با رسیدن به این کد ها و تگ ها ، المنت های مرتبط با آن را نمایش می دهد.
اسلاید 13: هر یک از کدهای html ، معنا و مفهوم خاصی دارند و تأثیر مشخصی بر محتوا می‌گذارند. مثلاً برچسب‌هایی برای تغییر شکل ظاهری متن، نظیر درشت و ضخیم کردن یک کلمه یا برقراری پیوند به صفحات دیگر در اچ‌تی‌ام‌ال تعریف شده‌اند
اسلاید 14: سند اچ‌تی‌ام‌ال، یک پرونده مبتنی بر متن (Text–based)است که معمولاً با پسوند.htm یا .html نام‌گذاری شده و محتویات آن از برچسب‌های اچ‌تی‌ام‌ال تشکیل می‌شود. مرورگرهای وب، که قادر به درک و تفسیر برچسب‌های اچ‌تی‌ام‌ال هستند، تک‌تک آنها را از داخل سند اچ‌تی‌ام‌ال خوانده و سپس محتوای آن صفحه را نمایان‌سازی ((Render می‌کنند.
اسلاید 15: کاربرد اصلی HTMLHTML ابزاری است که با استفاده از چیزهایی به نام تگ‌ها، اقدام به ساخت قالب کلی صفحات وب می کند. با استفاده از HTML میتوانید فوندانسیون و اسلکت اصلی وبسایت خود را طراحی می کنید.HTML کمک می کند تا ساختار کلی صفحه وب خود را بسازید و اسکلت بندی آن‌را انجام دهید.
اسلاید 16: Block Element و Inline Element دو دسته مهم از المان هایی که در HTML از آنها استفاده می‌کنیم: المان‌های بلاکی Block element) ) المان‌های درون خطیInline element) )هستند.
اسلاید 17: المان‌های بلاکیهمان طور که از عنوان پیدا است این المان‌ها مانند بلوکی هستند که می‌توانند عناصر دیگر را در خود جای دهند و با استفاده از آنها میتوان بخش‌های مختلف صفحه را جدا کرده و به هر بخش استایل داد. به عنوان مثال Div و h1 دو نمونه از المان‌های بلاکی هستند. قبل و بعد از باز و بسته شدن این نوع المان ها، مرورگر یک خط جدید در نظر می‌گیرد.المان‌های درون خطیاین المان‌ها می‌توانند درون یک تگ دیگر مورد استفاده قرار بگیرند و تاثیری روی سایر عناصر آن بخش ندارند و فقط همان خط را تغییر می‌دهند. از این المان‌ها میتوان در استایل دادن به المان‌های بلاکی نیز استفاده کرد. قبل و بعد از باز شدن این تگ، مرورگر به خط جدید نمی‌رود.
اسلاید 18: نکتهصفحه وب از <html>شروع شده و به </html>ختم می شود.تگ <body>وتگ<head>که در تگ<html>نوشته می شوند فرزندان تگ<html>بوده و تگ<html>والد آنها است.تگ فرزند با یک تو رفتگی شروع می شود(باTab). این تورفتگی بعدا موجب می شود که یک صفحه خوش ساختار و خوانا داشته باشیم.زبانhtmlهیچگونهerror را نمایش نمی دهد.
اسلاید 19: یکی از تگ هایی که در داخل تگ<head> قرار می گیرد و انکدینگ صفحه را نشان می دهد(محتویات صفحه به چه زبانی نوشته شده است)تگMeta می باشدمثلا:<meta charset “ UTF-8”/>تگ Meta تگ فرد هست و تگ بسته مجزا ندارد و به این صورت بسته می شود:/>تگMetaبایستی در 512 بایت اول فایل باشد تا بتواند انکدینگ صحیحی به مرورگر بدهد.موتورهای جستجو از تگ های heading برای شناسایی ساختار سایت استفاده می کند.(مانند تگ title).
اسلاید 20: مزایای HTML :یادگیری آسان و لذت‌بخشقابلیت اجرا در تمام مرورگرهامتن باز و رایگان بودنادغام آسان با زبانهای سمت سرور مثل phpمعایب HTML:استاتیک بودن و وابستگی به زبانهای سمت سرور برای تعامل با کاربرضعف در پشتیبانی از مرورگرهای قدیمینیاز به طراحی جداگانه هر صفحه به دلیل نبود قواعد منطقی برنامه نویسی
اسلاید 21: HTML چه رابطه‌ای با زبانهای css و javascript دارد؟ چون فقط ساختار صفحه را شکل داده و اجازه اضافه کردن جذابیت‌های ظاهری را نمی‌دهد. صفحات HTML به تنهایی ارزشی برای انتشار ندارند اما زمانی که در کنار css و JavaScript قرار می‌گیرند، زیبایی واقعی خود را در طراحی وب نشان می‌دهند.
اسلاید 22: رابطه‌ی HTML و CSSبا استفاده از HTML، ساختار کلی صفحه وب را مشخص می کنید و سپس با استفاده از CSS می توانید به آن جذابیت های ظاهری اضافه کنید.روش اجرای فایل های HTMLبرای اجرای فایل های HTML فقط نیاز به یک مرورگر دارید که از HTML پشتیانی کند و تمام مرورگرها این کار را برای شما انجام می دهند.فرقی نمیکند از گوگل کروم استفاده می کنید یا فایرفاکس، شاید هم مرورگر شما سافاری یا اینترنت اکسپلورر باشد. در هر صورت شما می توانید کدهای HTML خود را بنویسید و آنها را اجرا کنید.
اسلاید 23: مثال ساده ساخت یک پرونده ساده با HTML<!DOCTYPE html><html> <head> <title>عنوان</title> </head> <body> <h1>هدینگ اول</h1> <p>پاراگراف اول</p> </body></html>
اسلاید 24: واژه ی تعیین داک تایپ گواهی نوع پرونده است و به مرورگر کمک میکند تا صفحه های وب را صحیح نمایش دهد.داک تایپ باید اول هر پیچ یک بار نوشته شود (قبل از هر تگ اچ تی ام ال)این واژه ی تعیین را میتوان با حروف بزرگ یا کوچک نوشت.<!DOCTYPE html>این بیانیه، پرونده را یک پرونده (فایل) اچ تی ام ال پنج تعریف می کند.
نقد و بررسی ها
هیچ نظری برای این پاورپوینت نوشته نشده است.