آموزش مفاهیم مقدماتی html

آموزش مقدماتی html - وربال

varbal HTML, آموزش برنامه نویسی, برنامه نویسی تحت وب , , , , , , , , , ,

(آموزش HTML – مفاهیم مقدماتی)

آموزش مفاهیم مقدماتی html

پیش نیاز های آموزش HTML

۱-  اینترنت (وب) (www) (world wide web)، همه دارای یک معنی واحد و به شبکه ای از کامپیوترها اطلاق می شود که یک سری اطلاعات را با کمک سرورها و خط تلفن بین هم تبادل می کنند.

۲- این اطلاعات چگونه بین هم منتقل می شوند؟

الف- ابتدا با زبان های طراحی سایت، اپلیکیشن مرورگرها را تحت فرمان و کنترل خود در می آوریم و منابع اطلاعاتی را روی مرورگرها قرار داده و نحوه نمایش آنها را تنظیم می کنیم.

ب- سپس این منابع و فایل ها را بر روی سرور آپلود می کنیم تا در دسترس عموم قرار گیرد.

۳- منابع اطلاعاتی، همان اطلاعاتی هستند که بین کامپیوترها رد و بدل می شوند، این منابع می توانند فایل هایی با فرمت فیلم، عکس، متن، صدا و … باشند.

۴- به کامپیوترهایی که منابع اطلاعاتی را از طریق سرورها در اختیار دیگران قرار می دهند، سرویس دهنده می گویند.

۵- به کامپیوترهایی که منابع اطلاعاتی را از وب سرور سرویس دهنده ها دریافت می کنند، سرویس گیرنده می گویند.

۶- به انتقال فایل از کامپیوتر به سرور آپلود می گویند.

۷- به انتقال فایل از سرور به کامپیوتر دانلود می گویند.

۸- منابع اطلاعاتی منتشر شده در اینترنت را سایت می گویند.

۹- به مقدار فضایی که یک سایت اشغال می کند هاست گفته می شود.

۱۰- به درخواست یک سرویس گیرنده برای دریافت فایل از سرویس دهنده، request گفته می شود.

۱۱- به پاسخ یک سرویس دهنده به درخواست سرویس گیرنده، response گفته می شود.

۱۲-  w3c، سازمان استاندارد سازی وب می باشد که مدیریت آن را شخصی به نام تیم برنرزلی بر عهده دارد.

۱۴-  http یک استاندارد ارتباطی و یا پروتکلی است که کامپیوترهای موجود در اینترنت را به هم وصل می کند.

 

آموزش مفاهیم مقدماتی html

۱- تعاریف html:

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

ب- مخفف عبارت hyper text markup language می باشد، که یک زبان نشانه گذاری متنی خیرخطی است بدین معنی که برخلاف زبان های برنامه نویسی اپلیکیشن که شامل توابع و … می باشد و به صورت خطی (liner) می باشند، این زبان خیرخطی است یعنی اگر عناصر ان در یک خط نباشند به صورت صحیح اجرا می شوند، حال با توجه به غیر خطی بودن این زبان می توان برای ذخیره فایلمان با پسوند html از پسوند htm نیز استفاده کرد که این پسوند به نحوی بازگو می کند که html را می توان زبان در نظر نگرفت چون غیرخطی است.

۲- مخترع html ، تیم برنرزلی می باشد که آن را در خلال دهه ۱۹۹۰ همراه با گسترش وب اختراع کرد.

۳- نسخه ها و ورژن های html از قدیم به جدید عبارتند از:

Html- html2- html3- html3/2- html4- html4/1- xhtml- xml- html5

۴- به مرور زمان اطلاعات جدیدتری به این نسخه ها اضافه می شد تا کار کردن با این زبان برای کاربران آن راحت تر باشد مثل راست نویسی درنسخه html4، اضافه شدن جداول، اضافه شدن فایل های صوتی و تصویری در html5.

۵- تفاوت های html4 و xhtml :

این دو نسخه تفاوت زیادی با هم ندارند، xhtml همان html4 می باشد که یک سری اطلاعات جدید به آن اضافه شده است:

الف- در xhtml همه حروف باید کوچک نوشته شوند.

ب- تگ های </head> و </body> در xhtml اجباری می باشد.

پ- تگ ها باید به صورت صحیح به کار روند یعنی تگ های آغاز و پایان و سینگل تگ ها باید درست نوشته شوند.

ت- ترتیب قرار گرفتن تگ ها مهم است یعنی ابتدا باید تگ های پایانی را ببندیم.

۶- به دستوراتی که در html به صفحه داده می شود تگ گفته می شود مثال تگ جدول: <table>

۷- تگ ها با علامت < آغاز می شوند و با علامت > تمام می شوند.

۸- به <  > تگ آغاز یا start tag و به </   > تگ پایان یا end tag گفته می شود.

۹- به تگ آغاز و پایان و محتویات درون آن یک عنصر یا element گفته می شود.

۱۰- همه تگ ها برای اجرا نیاز به تگ پایان دارند به جز سینگل تگ ها (single tag).

۱۱- به <   /> تگ منحصر به فرد یا single tag گفته می شود.

۱۲- یک single tag به تنهایی یک عنصر یا element محسوب می شود.

۱۴- برای کنترل بهتر تگ ها از صفت های آنها استفاده می کنیم.

۱۵- برخی صفت ها بین تگ ها عمومی می باشد و برخی تگ ها به طور اختصاصی برای تگی خاص به کار می رود.

۱۶- صفت ها در تگ آغاز به کار می روند.

۱۷- صفت ها شامل نام صفت و مقدار صفت می باشند.

۱۸- تگ ها و دستورات html بهتر است با حروف کوچک نوشته شوند.

۱۹- فاصله میان تگ ها (عناصر) تاثیری بر اجرای تگ ندارد ولی فاصله کم و زیاد میان صفات تگ ها احتمال اختلال در اجرای تگ را دارد.

۲۰- برای نوشتن کدهای html می توان از برنامه هایی نظیر note pad, experision web, dreamwaver, joomla, worldpress استفاده کرد.

۲۱- برای ذخیره فایلمان باید نام آن را با پسوند html و یا htm با unicode=utf8 و type=document ذخیره نماییم.

۲۲- برای دیدن کدهای صفحه می توانیم روی صفحه راست کلیک کرده و گزینه view source را کلیک کنیم.

 

اسکلت بندی html

<html lang=”fa, fr, en”>

<head>

<title> عنوان صفحه یا سایت </title>

<meta name=”keywords” content=” لغات مهم و اصلی سایت “ />

<meta name=”description” content=” جملات اصلی سایت “ />

<meta name=”robots” content=”all, none, index, noindx, follow, nofollow” />

<meta http-enquiv=”content-type” content=”text/html; charset=utf8” />

<meta http-enquiv=”refresh” content=” مقدار بر حسب ثانیه “ />

<meta http-enquiv=”refresh” content=” secound; url= http://www.mysite.com” />

<meta http-enquiv=”expires” content=”fri, 16 september 2015 23:59:59pm” />

<meta http-enquiv=”progma” content=”no-cache” />

<meta http-enquiv=”author” content=” نام نویسنده سایت “ />

<meta http-enquiv=”generation” content=” برنامه استفاده شده برای نوشتن کدها “ />

<basefont face=” نوع فونت صفحه “ size=” ۱ تا ۷ “ color=” rgb or color “ />

<bgsound src=” آدرس موزیک “ volume=”۰ تا ۱۰۰۰” balance=”-۱۰۰۰ تا +۱۰۰۰” />

</head>

 

<body dir=”rtl, ltr” bgcolor=”رنگ پس زمینه” text=”رنگ فونت” link=”رنگ لینکهای عادی” alink=”رنگ لینکهای فعال”  vlink=”رنگ لینکهای غیرفعال” background=”عکس پس زمینه” onload=”alert(‘متن خوش آمد’)” onunload=”alert(‘متن خداحافظی’)” onresize=”alert(‘متن تغییر سایز صفحه’)” >

Contain

</body>

</html>

آموزش مفاهیم مقدماتی html

<html lang=”fa, en, fr”>

صفحه و سایت با زبان html نوشته می شود که دارای زبان های فارسی و انگلیسی و فرانسوی می باشد.

 

<head>

مشخصات سر وب سایت را مشخص می کند.

 

<title> عنوان صفحه یا سایت </title>

تگ موتور جستجو: عنوان سایت یا صفحه را نشان می دهد.

 

<meta name=”keywords” content=”کلمات اصلی” />

تگ موتور جستجو:

 نشان دهنده کلمات اصلی سایت می باشد و حداکثر ۲۰۰ کاراکتر می گیرد که ۱۰۰ کاراکتر اول آن در موتورهای جستجو نمایش پیدا می کند.

 

<meta name=”description” content=”جملات اصلی” />

تگ موتور جستجو:

نشان دهنده جملات اصلی سایت می باشد و یا توضیحی از صفحه سایت می باشد و حداکثر ۲۰۰ کاراکتر می گیرد که ۱۰۰ کاراکتر اول آن در موتورهای جستجو نمایش پیدا می کند.

 

<meta name=”robots” content=”all, none, index, noindex, follow, nofollow” />

تگ موتور جستجو:

نشان دهنده ذخیره صفحات و دنبال کردن لینک های صفحه توسط موتورهای جستجو می باشد.

 

<meta http-enquiv=”content-type” content=”text/html; charset=utf8” />

 

تگ وب سرور:

نشان دهنده نوع زبان صفحه و encoding آن می باشد.

<meta http-enquiv=”refresh” content=” مقدار بر حسب ثانیه “ />

 

 

 

تگ وب سرور:

نشان دهنده این است که صفحه بعد از زمان خاص (بر حسب ثانیه)، refresh می شود ( refreshing ).

<meta http-enquiv=”refresh” content=” secound;        

url= http://www.mysite.com” />

 

تگ وب سرور:

نشان دهنده این است که صفحه بعد از زمانی خاص (بر حسب ثانیه)، بعد از refresh شدن به صفحه دیگر انتقال پیدا می کند (redirecting).

<meta http-enquiv=”expires” content=”fri, 16 september 2015 23:59:59pm” />

تگ وب سرور:

نشان دهنده تاریخ انقضای سایت می باشد، که بعد از این تاریخ وب سرور موظف است یک کپی از محتویات سایت برای کاربر ارسال کند.

<meta http-enquiv=”progma” content=”no-cache” />

تگ وب سرور:

نشان دهنده این است که صفحه در حافظه نهان مرورگرها ذخیره نشود.

<meta http-enquiv=”author” content=” نام نویسنده سایت “ />

تگ وب سرور:

نویسنده سایت را برای وب سرورها مشخص می سازد.

<meta http-enquiv=”generation” content=” برنامه استفاده شده برای نوشتن کدها “ />

تگ وب سرور:

نشان دهنده برنامه استفاده شده برای نوشتن کدهای صفحه می باشد.

<basefont face=” نوع فونت صفحه “ size=” ۱ تا ۷ “ color=” rgb or color “ />

نوع، سایز و رنگ فونت صفحه را مشخص می کند، اندازه فونت صفحه در قسمت head باید مطلق باشد (بین ۱ تا ۷).

<bgsound src=” آدرس موزیک “ volume=”۰ تا ۱۰۰۰” balance=”-۱۰۰۰ تا +۱۰۰۰” />

 

 

آهنگ پس زمینه وب سایت را دور از کنترل کاربر قرار می دهد، تعادل هرچه نسبت به صفر بالاتر و پایین تر باشد اندازه صدا در  بلندگوها تغییر می کند.

<body dir=”rtl, ltr” bgcolor=”رنگ پس زمینه” text=”رنگ فونت” link=”رنگ لینکهای عادی” alink=”رنگ لینکهای فعال”                vlink=”رنگ لینکهای غیرفعال” background=”عکس پس زمینه” onload=”alert(‘متن خوش آمد’)” onunload=”alert(‘متن خداحافظی’)” onresize=”alert(‘متن تغییر سایز صفحه’)” >

 

نشان دهنده بدنه و صفت های وب سایت می باشد.

Dir = نشان دهنده حروف چینی صفحه می باشد.

Bgcolor = رنگ پس زمینه وب سایت را نشان می دهد.

Text = رنگ فونت و متن صفحه را نشان می  دهد.

Link = رنگ لینک های صفحه را نشان می دهد.

Alink = رنگ لینک های فعال صفحه را نشان می دهد.

Vlink = رنگ لینک های غیرفعال صفحه را نشان می دهد.

Background = عکس پس زمینه صفحه را نشان می دهد.

Onload = متن خوش آمد را مشخص می کند.

Onunload = متن خداحافظی را مشخص می کند.

Onresize = متن تغییر اندازه وب سایت را مشخص می کند.

Contain

محتویات درون سایت را نشان می دهد.

</body>

تگ body را می بندیم.

</html>

تگ html را می بندیم.

[تعداد: 1    میانگین: 5/5]

شاید دوست داشته باشید:

کار با متون و کلمات در html - وربال

کار با متون در html

کار با متون و کلمات در html


زبان html یک زبان نشانه گذاری غیر خطی می باشد که نتیجه کدها در مرورگر کامپیوتر اجرا می شوند؛ یکی از قسمت های آموزشی این زبان کار با متون و کلمات و پاراگراف ها است که از اهمیت ویزه ای برخوردار است و در زیبا سازی متون صفحه ما را کمک می کند؛ کار با این تگ ها بسیار ساده و اما بسیار کاربردی و حائز اهمیت می باشد، جهت یادگیری ویرایش متون و کلمات در زبان html به ادامه مطلب مراجعه نمایید.


متن کامل در ادامه مطلب

معرفی زبان php - وربال

معرفی زبان php

معرفی زبان php و مزیت های آن در طراحی سایت


زبان PHP یک زبان اسکریپتی اوپن سورس است که برای طراحی برنامه های تحت وب سرور به کار می رود. سمت سرور بودن به این معناست که صفحات PHP ابتدا توسط سرور (که می تواند از نوع Apache یا IIS) باشد، پردازش شده و سپس خروجی به صورت کدهای HTML و جاوا اسکریپت برای مرورگر کاربر ارسال می شود. به عبارت دیگر وظیفه اجرای صفحات PHP به عهده سرور وب هاست سایت می باشد برخلاف HTML یا جاوا اسکریپت.
PHP مخفف عبارت Hypertext PreProcessor به معنای پیش پردازند فرامتن می باشد گه در سال ۱۹۹۴ توسط رسموس لردورف ایجاد شد و سپس توسط سایرین توسعه و گسترش پیدا کرد. اولین نگارش عمومی آن …


متن کامل در ادامه مطلب

سئو seo چیست؟ - وربال

سئو seo چیست؟

سئو seo چیست؟


سئو برگرفته از عبارت Search Engine Optimization است که کلمات معادلی چون SEO یا بهینه سازی موتور جستجو دارد که همگی آنها به یک معنی می باشند و می توان آن را بصورت زیر تعریف نمود:


متن کامل در ادامه مطلب

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *