فرق HTML 3.2 , HTML 4 , XHTML در HTML 3.2 شما توانایی این را ندارید که که قالب بندی صفحه خودتان را به طور کامل از کدهای HTML جدا کنید و مجبورید برای هر قسمت تمام خصوصیات را برای اجرا یادداشت کنید که این کار برای یک وبمستر یک کاووس است . ولی در HTML4 توانایی این را دارید که قالن بندی خودتان را در قسمتی جدا از کدها تعریف کنید. In HTML 4.0 all formatting can be removed from the HTML document and stored in a separate style sheet و به همین دلیل شما به راحتی می توانید تمامی لایه ها را تحت کنترل خود قرار دهید بدون این که به محتوای صفحه شما کوچکترین آسیبی برسد. XHTML تفاوت خاصی با HTML 4 ندارد و در کل یک سری ایرادها و نقص هایی که در HTML 3.2 وجود داشت در آن برطرف شده است. HTML , CSS
Color values
برای تعریف رنگ ها در HTML از نشانه گذاری hexadecimal برای ترکیب های مختلف 3 رنگ قرمز و سبز و آبی استفاده می کنیم.
زیاد لازم نیست شما درگیر کدهای hex شوید ، برای پیدا کردن کد رنگ های مورد نظرتون می توانید از برنامه های کمکی مثل HTML Pad یا برنامه های گرافیکی مثل فتوشاپ استفاده کنید و به راحتی کد رنگ مورد نظرتون را پیدا کنید.
HTML Font
HTML Forms and Input
فرم چیست ؟
فرم ناحیه ای است که به کاربر اجازه می دهد که اطلاعات خود را وارد کند.
برای تعریف فرم از تگ <form> استفاده می کنیم.
A form is defined with the <form> tag.
>
.input elements
.
form>
کاربردی ترین تگ ، در فرم تگ <input> است.
HTML List HTML لیست های ترتیبی ، لیست های نامرتب و لیست های تعریفی را پشتیبانی می کند. Unordered List برای تعریف یک لیست غیر ترتیبی در HTML از تگ <ul> استفاده می کنیم و برای تعریف کردن هر کدام از مشتقات این لیست تگ <li> را مورد استفاده قرار می دهیم. به این ترتیب :
. Coffee
. Milk
Table
برای کشیدن جدول در HTML باید از تگ <table> استفاده کنیم.
برای تقسیم کردن یک جدول در ردیف های مختلف ما باید از تگ <tr> استفاده کنیم.
و برای تقسیم کردن هر ردیف به خونه های مختلف از تگ <td> که مخفف table data است استفاده می کنیم.
خونه های جدول در HTML می توانند هر محتوایی داشته باشد ، تصویر ، متن ، فرم و ...
نمونه ای از کد یک جدول :
HTML Image در HTML ، برای تعریف کردن یک تصویر باید از تگ <img> استفاده کنیم. این تگ از جمله تگ های خالی است ، یادتونه تگ های خالی چه تگ هایی بودند ؟ تگ های خالی ، تگ هایی بودند که نیاز به بستن </> نداشتند. برای نمایش تصویر در صفحه تگ <img> کافی نیست و شما نیاز به یک مشخصه دارید. شما باید از مشخصه src استفاده کنید ، این مشخصه برای source قرار گرفته ، بعنی مقداری کخ در این مشخصه قرار می گیرد ، لینک تصویری است که شما می خواهید آن را در صفحه مورد نظرتون قرار دهید. <img src="ur"/"> حتما تا حالا به این مورد برخوردید که تصویری در اینترنت به نمایش در نمی آید ، یعنی مرورگر به هر دلیلی قادر به Load آن نیست ، و شما به جای عکس یک متن مشاهدا می کنید . شما می توانید با مشخصه Alt مشخص کنید ، اگر تصویرتان به نمایش درنیامد به جای آن چه متنی نمایش داده شود. <img src="prijecone.persiangig.com/12.jpg" alt="AntiCom" /> اگر تصویر بالا به نمایش درنیاید ، به جای آن کلمه AntiCom ظاهر می شود. چند مثال برای تمرین بیشتر :
از style ها هم مختصری فهمیدیم ، در جلوتر مثال های بیشتری از این قسمت حل می کنیم .
HTML Link
لینک ها آدرس هایی هستند که به مکانی در وب اشاره می کنند.
یک لینک می تواند به هر منبعی در وب اختصاص داده شود ، یک صفحه HTML یا یک عکس یا یک فایل صوتی و ...
با این اصطلاح هم آشنا بشید : anchor
تا حالا براتون پیش اومده که بخواهید در داخل یک متن به قسمت خاصی از آن برید ؟!!
با anchor شما می توانید لینکی در داخل متن به قسمت خاصی از متن ایجاد کنید ، یعنی با کلیک بر روی این لینک صفحه شما به آن قسمت خاص می رود .
پس anchor یک اصطلاح است برای تعریف کردن یک لینک از یک متن به درون خود آن متن
تگ <a> هم برای Hyperlink و هم برای anchor مورد استفاده قرار می گیرد .
نترسید با انجام مثال ها همه چیز برای شما روشن می شود.
یادتونه چند جلسه قبل درباره attribute با هم صحبت کردیم و چندتا از اونا رو معرفی کردیم که مهم ترینشون و کاربردی ترینشون style است .
اینم بدونی بد نیست که ربط CSS با HTML از Style شروع میشه .
HTML Styles
هدف از این مشخصه :
To provide a common way to style all HTML elements.
چند مثال برای تمرین بیشتر مطالب جلسه قبل
1- HTML Line Break
2- HTML Paragraph
Text Formating
همان طور که شما هنگام تایپ کردن می توانید بعدی از کلمات را bold و یا italic کنید ، در HTML هم می توانید این کار را انجام دهید .
حتما تا الان فهمیدید که HTML متن شما را همان گونه که می نویسید نمایش نمی دهد مثلا اگر در یک تگ پاراگراف چند خط جدا از هم بنویسید و از تگ </br> در بین آن ها استفاده نکنید ، HTML همه آن ها پشت سر هم نمایش می دهد .
برای این که نوشته خود را به همان صورت که تایپ کردید مشاهده کنید باید از تگ <pre> استفاده کنید .
در قسمت بعدی وارد Style ها می شویم
HTML Element
هر چیزی که بین تگ آغازی و تگ پایانی قرار بگیرد ، یعنی هر عنصر HTML با تگ شروع و به تگ ختم می شود.
عناصر HTML می توانند تو در تو (Nested) باشند .
یک صفحه HTML ، مثلا همین قالب وبلاگی که شما می بینید از عناصر تو در تو تشکیل شده است.
HTML Document Example :
<html>
<body>
<p>This is my first paragraph</p>
<body/>
</html>
The example above contains 3 HTML elements
بعضی از عناصر HTML تگ پایانی ندارند و در همان تگ شروع بسته میشن مثل تگ درج تصویر:
</ "img src="pic.jpg>
HTML چیست ؟
اسم HTML از کجا اومده ؟
HTML = Hyper Text Markup Language
HTML یک زبان برنامه نویسی نیست بلکه "یک نشانه ای برای ایجاد ساختارها" به شیوه دلخواه است .
HTML از برچسب ها (tag) برای شرح دادن ساختار یک صفحه وب استفاده می کند .
Tag در HTML کلماتی کلیدی هستند که در داخل <> قرار می گیرند .
و عنصر HTML هر چیزیه که بین تگ های شروع و پایان قرار می گیره.
مثلا یه متن معمولی رو بین تگ های و می نویسیم.
حتما می پرسین برای نوشتن کد های HTML به چی نیاز داریم ؟
برنامه ی خاصی الزامی نیست و شما می تونید در هر ویرایشگر متن کدهای HTML تون را بنویسید و ویرایش کنید .
ولی خوبی برنامه هایی مثل HTMLPad به اینه که میتونه برای بهتر فهمیدن مطالب به شما کمک کنه .
HTML Heading
حتما تا حالا هنگام تایپ یه متن ، گاهی خواستید که تیتر هاتون یه تفاوتی با بقیه متن داشته باشه ؟!!
برای تعریف تیتر ها در HTML شما باید از تگ <h1> تا <h6> استفاده کنید ، <h1> بزرگ ترین سایز است که با بزرگ شدن عدد داخل تگ سایز کاهش می یابد .
- موتورهای جستجو از Headingهای شما برای شناسایی ساختار صفحه تون استفاده میکنند تا نتیجه ی جستجوی دقیق تری داشته باشند. پس در انتخاب سرتیترهاتون دقت کنید و از Headingها فقط برای سرتیتر نوشتن استفاده کنید و برای بزرگ کردن و Bold کردن متن معمولی از Heading استفاده نکنید.
سلام ، سلامی برای شروع
شروع یه کار نو ، شروع تلاش برای اثبات .
اولین موضوعی که قراره ما روی آن تمرکز کنیم ، آموزش کامل وب است . چون در حال حاضر ، همه ما تا حدودی
به آن نیاز داریم ، برای مثال شاید گاهی وقت ها بخواهیم در قالب وبلاگمون
، تغییراتی بدیم و آن را به شکلی در بیاریم که دوست داریم. و برای این کار باید تا حدودی از این کد ها سر در بیاریم . با ما باشید ، همه چیز جذاب خواهد شد ...... برای شروع ، ما از HTML شروع می کنیم . منبع اصلی ما سایت w3schools.com برای شروع فکر می کنیم که بهترینه ، ولی همه چی به تلاش تو بستگی داره . HTML Tutorial
با HTML تو می تونی سایت خودتو درست کنی . این مجموعه آموزشی همه چی درباره HTML رو به تو یاد میده . یاد گرفتن HTML خیلی آسونه ، مطمئن باش ارش لذت می بری .