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

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

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

 <a href="url">link text</a>

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

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

رنگ لینک در html

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

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

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

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

_blank
_self
_parent
_top

 

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

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

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

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

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

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

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

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

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

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

<a href="default.html">
<img src="smiley.gif" alt="عنوان عکس" style="width:42px;height:42px;border:0;">
</a>

 

المنت و نقش 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>

<!DOCTYPE html>

<html>

<head>

<title>آموزش html</title>

</head>

<body>

<h1>سلام دنیا</h1>

<p>اولین پاراگراف</p>

</body>

</html>

 

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

Attributes:

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

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

lang Attribute :

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

title Attribute :

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

<p title="I'm a tooltip">
براب نمایش تول تیپ موس را بر روی این پاراگراف قرار دهید.
</p>

 

href Attribute:

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

 <a href="http://www.w3schools.com">This is a link</a>

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

Size Attributes:

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

 <img src="pic/logo.jpg" width="104" height="142">

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

alt Attribute:

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

<img src="pic/logo.jpg" width="104" height="142" alt="alt" >

 

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

خاصیت های  margin  و padding  در css
21 Dec

خاصیت های margin و padding در css

در این قسمت از آموزش html  به بررسی خاصیت های  margin  و padding  در css  می پردازیم.

خاصیت  margin  در   css :

خاصیت  margin  در  css برای ایجاد فاصله بیرون از حاشیه یک المنت استفاده می شود. با margin  در هر جهت از المنت می توان فاصله ایجادکرد بالا ، راست ، پایین ، چپ که هرکدام را جداگانه نیز می توان مقدار داد.

margin-top , margin-right , margin-bottom , margin-left

به چند طریق می توان به margin  مقدار داد.

مقداردهی با پیکسل : واحد  px رایج ترین واحد اندازه گیری در وب می باشد.(10px)

مقداردهی با point : واحد pt  بیشتر برای کارهای چاپی است.(10pt)

مقدار دهی با Ems :  واحد em در طراحی وب سایت برای گوشی ها و اینگونه وسایل می باشد. (10em)

مقداردهی با سانتی متر :  این واحد اندازه گیری در طراحی صفحات وب سایت رایج نیست.(10cm)

مقداردهی درصدی ، این نوع واحد اندازه گیری برای صفحات وب رایج است ولی بیشتر برای طراحی صفحه سایت برای گوشی های موبایل و این گونه وسایل استفاده می شود. (10%)

مقدار دهی autoauto مقداردهی به صورت انوماتیک و خودکار می باشد.

مقدار دهی inherit : inherit مقدار دهی به صورت وراثتی است و از بلاک والد به ارث می برد .

برای مختصر نوشتن خاصیت margin می توان آن را به صورت یک خطی نوشت margin: 150px 140px 130px 120px;

خاصیت  padding  در  css :

خاصیت  padding  در  css  برای ایجاد فاصله بین محتوای المنت و اطراف المنت است . برخلاف  margin که بیرون از المنت فاصله ایجاد می کند padding داخل المنت است و مقداردهی آن مانند margin است که در بالا کامل توضیح داده شده است. padding در هر چهار سمت المنت مقدار می گیرد.

padding-top , padding-right , padding-bottom , padding-left

برای مختصر نوشتن دستور padding می توان آن را به صورت یک خطی مقدار دهی کرد. padding: 50px 30px 50px 80px;

به بررسی چند مثال از padding می پردازیم.

padding:25px;

یعنی فاصله از هر چهار جهت المنت 25px  است.

padding: 25px 50px;

یعنی در سمت بالا و پایین مقدار padding  برابر 25px  می باشد و در راست و چپ مقدار padding برابر  50px است.

padding: 25px 50px 25px 50px;

مقدار padding در بالا و پایین 25px  و در راست و چپ 50px است.

به پایان خاصیت های  margin  و padding  در css رسیدیم در بخش بعدی آموزش اچ تی ام ال  به بررسی سایر خاصیت ها می پردازیم.

 

نحوه نوشتن کدهای 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  توضیح می دهیم.

اصول نوشتن کدهای  css
18 Dec

اصول نوشتن کدهای css

از این قسمت آموزش css  به بعد به بررسی اصول  نوشتن کدهای  css ، خواص و کدهای کاربردی در سی اس اس می پردازیم.

قوانین یا اصول نوشتن کدهای CSS:

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

خاصیت  Color در CSS :

رنگ متن با این خاصیت مشخص می شود که به سه طریق می توان به آن مقدار داد
– با نام رنگ مانند Red , Green , …
– کد RGB مانند rgb(255, 0, 0)
-کد HEX  مانند #ffffff

خاصیت Background-Color در CSS :

این خاصیت برای تغییر رنگ بک گراند المنت های  html  است که مانند  color  به سه طریق مقدار می گیرد.

p {
background-color: yellow;
}

 

خاصیت Background Image در CSS:

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

body {
background-image: url("paper.gif");
}

 

برای تکرار عکس بک گراند به صورت افقی background-repeat: repeat-x; و برای تکرار عکس به صورت عمودی background-repeat: repeat-y; و برای اینکه عکس تکرار نشود background-repeat: no-repeat; از این خاصیت استفاده می کنیم.

خاصیت background-position در CSS:

برای مشخص کردن محل قرار گیری عکس بک گراند از background-position استفاده می کنیم.

body {
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}

 

می توانیم به جای استفاده تک تک از کدها ،‌ آن ها را به صورن یک دستور بنویسیم.

body {
background: #ffffff url("img_tree.png") no-repeat right top;
}

 

خاصیت  Border  در CSS:

با این خاصیت می توانید برای المنت ها حاشیه بگذارید.

خاصیت Border Style   در CSS :

این خاصیت چندین مقدار می گیرد.

dotted: حاشیه نقطه چین

dashed: حاشیه خط چین

solid: حاشیه خط ساده

double: حاشیه دو خطی

و …

خاصیت Border Width   در CSS :

با این خاصیت اندازه حاشیه مشخص می شود. مثلا border-width: 5px;

خاصیت border-color در CSS:

با Border-color رنگ حاشیه تغیر داده می شود.

خاصیت border-radius در CSS :

با خاصیت border-radius می توان گوشه های المنت را منحنی کرد.

برای مختصر نوشتن کدها می توان فقط  به این شکل نوشت.

p {
border: 2px solid red;
border-radius: 5px;
}

 

در این بخش آموزش css , اصول نوشتن کدهای css توضیح داده شد ، از این  قسمت آموزش سی اس اس به بعد به بررسی خاصیت های دیگر می پردازیم.

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

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

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

html چیست؟

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

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

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

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

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

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

یک  مثاال:

<!DOCTYPE html>

<html>

<head>

<title>آموزش html</title>

</head>

<body>

<h1>سلام دنیا</h1>

<p>اولین پاراگراف</p>

</body>

</html>

 

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

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

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

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

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

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

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

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

تگ html چیست؟

<tagname> قسمتی از صفحه .</tagname>

 

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

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