آرشیو دسته بندی : آموزش html

آموزش html

آموزش html | لینک در html
11 Jan

آموزش html | لینک در html

در این بخش از آموزش html به طور کامل با تگ لینک و کاربرد آن آشنا می شویم. شما با لینک در html می توانید بین صفحات سایت ارتباط برقرار کنید.ایجاد لینک داخلی در html بسیار مهم است.لینک فقط متن نیست ،‌لینک می تواند عکس یا هر المنت دیگر html  باشد.
لینک با تگ <a> تعریف می شود.ساختار کلی لینک به صورت زیر است.

اتریبیوت href  در لینک

این اتریبیوت،‌ آدرس صفحه ی مقصد می باشد.در ساختار بالا تنها چیزی که برای کاربر نمایش داده می شود متن لینک است.با کلیک روی متن کاربر به آدرس صفحه موردنظر هدایت می شود.

رنگ لینک در html

مرورگر ها به صورت پیش فرض استایل هایی برای حالت های مختلف لینک در نظر گرفته اند که در همه مرورگر ها یکسان می باشد.

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

اتریبیوت target در html

این اتریبیوت مشخص می کند که سند مورد نظر کجا نمایش داده شود.مقدار هایی که می توان به target اختصاص داد عبارتند از:

 

باز شدن لینک در صفحه جدید

برای باز شدن لینک در تب جدید باید اتریبیوت  target=”_blank”  باشد.

باز شدن لینک در همان پنجره یا قاب

اگر مقدار تارگت برابر target=”- self” باشد لینک در همان پنجره یا قابی که کلیک شده باز خواهد شد.

باز شدن لینک در قاب اصلی

اگر مقدار تارگت برابر target=”-parent” باشد لینک در قاب مادر یا اصلی باز می شود.

باز شدن لینک در پنجره ای که کلیک شده

اگر مقدار تارگت برابرtarget=”-top”  باشد لینک در همان پنجره ای که کلیک شده به صورت کامل باز می شود.

ساخت عکس لینک دار

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

 

رنگ در  html
07 Jan

رنگ در html

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

– نام رنگ در html

در این روش کافی است از نام رنگ ها استفاده کرد .به عنوان مثال red , blue , pink

رنگ در html

رنگ در html

نحوه استفاده از نام رنگ در html با یک مثال :

 

– رنگ با کد  rgb

این کد از سه رنگ اصلی قرمز و سبز و آبی تشکیل شده است که با تغییر میزان آن ها رنگ ای متفاوت ایجاد می شود. rgb(red, green, blue)  عددی که برای هر سه رنگ در نظر گرفته شده است از 0 تا 255 می باشد.
به عنوان نمونه:
rgb(255,0,0)
این کد رنگ قرمز را نمایش می دهد.
rgb(0,0,0)
این کد رنگ سیاه را نمنایش می دهد.
rgb(255,255,255)
این کد رنگ سفید را نمایش می دهد.
برخی از رنگ ها در تصویر زیر نمایش داده شده است.

رنگ در html

رنگ در html

نحوه استفاده از کد rgb رنگ در html با یک مثال :

 

– رنگ با کد  HEX

در این روش برای هررنگ یک کد شش رقمی در نظر گرفت شده است که این کد از 0 تا 9 و از A تا F می باشد.

رنگ در html

رنگ در html

نحوه استفاده از کد HEX رنگ در html با یک مثال :

 

تگ های Heading  و قالب بندی متن در html
28 Dec

تگ های Heading و قالب بندی متن در html

در این بخش آموزش html  به بررسی تگ های  heading  و قالب بندی متن در html  و بررسی تگ های کاربردی برای قالب بندی متن می پردازیم

تگ های Heading

تگ های heading بسیار مهم هستند ، موتور های جستجو با توجه به عنوان تگ های heading محتوا را ایندکس می کنند.
کاربران صفحات را با توجه به عنوان آن ها می خوانند.
تگ های heading ابه ترتیب اولویتشان از 1 تا 6 هستند.
که مهم ترین تگ h1 می باشد و کم اهمیت ترین h6 است.

 

ایجاد خط در html :

برای ایجاد خط از تگ <hr> استفاده می شود.

پاراگراف در html :

برای ایجاد پاراگراف در اچ تی ام ال از تگ <p>……</p> استفاده می شود.

<br> در html:

برای رفتن به خط بعدی و ایجاد شکستگی در خط از تگ
<br>
استفاده می شود.

تگ <pre> در html

تگ <pre> برای نمایش همان گونه که در کد نوشته شده است نمایش داده می شود.مثلا اگر در کدها فاصله ای وجود داشته باشد یا به خط دیگه رفته باشد در مرورگر هم همانگونه نمایش داده می شود.

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

قالب بندی متن در html

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

تگ <b>:

متن را به صورت توپر نمایش می دهد.

تگ <em> :

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

تگ <i>:

برای نمایش متن به صورت مورب است

تگ <small>:

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

تگ <strong>:

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

تگ <sub> :

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

تگ <ins>:

برای تعریف متن درج شده استفاده شود.

تگ <del>:

برای تعریف متن حذف شده می باشد.

تگ <code> :

برای تعریف متن کد کامپیوتر است.

تگ <kbd> :

برای تعریف متن صفحه کلید است.

تگ <samp> :

برای تعریف نمونه کد کامپیوتر می باشد.

تگ <var> :

برای تعریف متغیر است.

نتیجه:
Einstein wrote: E = mc2.

تگ <pre> :

برای تعریف متن با چیدمان مشخص است.

تگ <abbr> :

برای تعریف مخفف یا سرنام می باشد به عنوان مثال برند یک شرکت از چند کلمه تشکیل شده با این تگ زمانی که موس روی مخفف هاور می شود کل متن نمایش داده می شود.

 

تگ <address> :

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

تگ <blockquote>:

برای نقل قول از یک بخش دیگر از این تگ استفاده می شود.

تگ <q>:

برای تعریف نقل قول کوتاه از این تگ استفاده می شود.

تگ های کاربردی قالب بندی متن در html  موارد بالا می باشند.

کامنت گذاشتن در html:

برای نوشتن مختصر توضیحات که در کد باشد ولی در صفحه وب نمایش داده نشود از این دستور استفاده می شود همچنین می توانید کدهای اچ تی ام ال را نیز کامنت کنید.

المنت و نقش Attribute ها در html
22 Dec

المنت و نقش Attribute ها در html

در این قسمت از آموزش html ، المنت و Attribute ها در html توضیح داده می شود. یک توضیح کلی در مورد المنت های اچ تی ام ال داده می شود و به طور مفصل در مورد Attribute های html توضیح داده می شود مثل lang Attribute , title Attribute , href Attribute  ,  Size Attributes ,  alt Attribute

المنت های  html

هر المنت html   با یک تگ شروع می شود و با یک تگ به پایان می رسد و محتوا بین تگ شروع و پایان قرار می گیرد.
<tagname> محتوای داخل تگ </tagname>

 

در مثال بالا چهار المنت اچ تی ام ال وجود دارد. html , body , h1 , p
این مثال در مقاله html  چیست به طور کامل توضیح داده شد. نوشتن تگ پایانی فراموش نشود.بعضی از عناصر اچ تی ام ال دارای تگ پایانی نیستند مثل <br> .

Attributes:

بعضی تگ های اچ تی ام ال  دارای Attribute  هستند .اتریبیوت ها اطلاعات اضافی به تگ اضافه می کنند.اتریبیوت ها  همیشه به تگ شروع اضافه می شوند.اتریبیوت ها دارای نام و مقدار می باشند.name=”value”

برخی از  Attribute ها در html  کاربرد های آن ها:

lang Attribute :

این Attribute  در تگ اچ تی ام ال قرار می گیرد و برای مشخص کردن زبان محتوای متن می باشند و همچنین زبان سایت را مشخص می کند.

title Attribute :

این Attribute  در تگ های  p , img , … قرار می گیرد برای نمایش تولتیپ وقتی موس روی آن قرار می گیرد.برای مشاهده تولتیپ می توانید کد زیر را در سند اچ تی ام ال خود قرار داده و نتیجه را مشاهده کنید.

 

href Attribute:

در اچ تی ام ال لینک با <a> تعریف می شود و آدرس لینک با این اتریبیوت مشخص می شود.

 
فعلا به بررسی اتریبیوت ها پرداختیم در قیمت های بعد توضیحات بیشتری در مورد تگ <a> داده می شود.

Size Attributes:

برای بعضی از تگ ها لازم است که طول و عرض تعیین شود.به عنوان مثال اگر بخواهیم در صفحه وب سایت عکس بگذاریم از تگ  <img> استفاده می شود. برای مشخص کردن طول عکس از اتریبیوت width و برای مشخص کردن ارتفاع عکس از اتریبیوت height استفاده می شود.
لازم به توضیح است که برای مشخص کردن نام و مسیر عکسی که می خواهیم در صفحه وب سایت بگذاریم باید از Attributes ، src استفاده کنیم.به مثال زیر توجه کنید.

 
طبق این مثال در پوشه ی pic  یک عکس با نام logo وجود دارد که طول آن 104px  و ارتفاع آن  142px می باشد.

alt Attribute:

اتریبیوت alt  یک دیگر از Attribute ها در html است و برای گذاشتن ، مثلا زمانی که به هر دلیلی عکس لود نشود متنی که در این اتربیوت قرارداده شده نمایش داده می شود.

 

در این قسمت از آموزش html ، المنت و نقش Attribute در html توضیح داده شد، در بخش بعدی آموزش اچ تی ام ال به بررسی مفصل المنت های html می پردازیم.

نحوه نوشتن کدهای html
20 Dec

نحوه نوشتن کدهای html

در این قسمت از آموزش اچ تی ام ال به نحوه نوشتن کدهای  html می پردازیم.

نحوه نوشتن کدهای html

برای نوشتن کدهای اچ تی ام ال نیاز به یک ادیتور مثل notepad , notepad++ , Dreamweaver ,… و یک مرورگر برای مشاهده خروجی هستیم.
در اینجا با نوت پد شروع می کنیم ، که در دسترس همه کاربران هست. وقتی کدهای اچ تی ام ال را در نوت پد نوشتیم باید آن را به صورت فایل  html ذخیره کنیم تا بتوانیم خروجی را ببینیم.کد های اچ تی ام ال شامل المنت ها و متا تگ ها و … می باشد. قسمت هایی که در همه صفحات وب باید وجود داشته باشند تا صفحه به درستی نمایش داده شود عبارتند از:

<!DOCTYPE html> , <html> , <head> , <title> , <body>

که در بخش های بعدی آموزش اچ تی ام ال تک تک عناصر html  به صورت مفصل توضیح داده می شود.در این قسمت از آموزش شما با چگونگی نوشتن کدها ی html  و نحوه ذخیره کردن آن و مشاهده صفحه در مرورگر آشنا می شوید.

نحوه ذخیره کردن کدهای html :

برای این کار از قسمت file -> save asرا می زنیم پنجره ای باز می شود ، که باید اطلاعات آن را پر کنیم. filename را با پسوند  html  می گذاریم و encoding را هم روی utf-8 تنظیم می کنیم.

آموزش html

آموزش html

و در آخر فایل اچ تی ام ال را با مرورگر باز  و صفحه وب را مشاهده می کنیم.

از این قسمت به بعد آموزش html  در مورد المنت ها و نحوه به کارگیری آن ها در سند  html  توضیح می دهیم.

html چیست؟ و کاربرد آن
16 Dec

html چیست؟ و کاربرد آن

در این بخش متوجه می شویم که html چیست  و کاربرد آن ،  با یادگیری html می توانید یک سایت طراحی کنید و از طراحی سایت لذت ببرید.

html چیست؟

html یک زبان نشانه گذاری برای ایجاد وب سایت می باشد.

html مخفف Hyper Text Markup   مخفف زبان نشانه گذاری فرا متنی است.

زبان نشانه گذاری است که تعیین می کند مرورگر چگونه صفحه را نمایش دهد.

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

المنت های html  با تگ نمایش داده می شوند.

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

یک  مثاال:

 

توضیحات برای مثال بالا:

<!DOCTYPE html>: نوع سند را مشخص می کند و باعث استاندارد شدن صفحه وب می شود.

<html> :این تگ عنصر اصلی سند html  است و به مرورگر می فهماند که فایل html  از این تگ شروع شد و با بسته شدن این تگ فایل  html  به پایان رسید.

<head> :این تگ شامل اطلاعات مربوط به سند  html  شما می باشد و در مرورگر نماسش داده نمی شوند. مانند عنوان سند، متا تگ ها و …

<title> :یک المنت برای نمایش عنوان سند می باشد.

<body>:شامل محتوای صفح که قابل مشاهده می باشد.

<h1> :المنتی برای نمایش تیر صفحه است.

<p>:المنتی برای تعریف پاراگراف است.

تگ html چیست؟

 

زمانی که بخواهییم یک جزء از صفحه را به عنوان یک قسمت از صفحه معرفی کنیم از تگ استفاده می شود.تگ ها به صورت جفت شروع و پایان هستند. در مثال بالا <tagname> شروع تگ است و </tagname>  پایان تگ.هر تگ کاربردی جداگانه دارد مثلا اگر بخواهیم در صفحه پاراگراف بگذاریم و یا جدول، عکس ، فرم و اجزای فرم و ….

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