سلام

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

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

http://asheghi24.blogfa.com

http://asheghi24.blogfa.com/

 



امتیاز بدهید :

| امتیاز : 0
موضوع : | بازدید : 503
برچسب ها :

تاريخ : پنجشنبه 16 مرداد 1393 | 16:16 | نویسنده : فاطمه |

این بخش درمورد ویژگی (Attribute) های هر المان HTML صحبت می کنیم. شما می توانید برای هر المان در HTML نویسی، یک سری ویژگی ها تعیین کنید. این ویژگی ها رو می تونیم تنظیمات یک المان HTML به حساب بیاریم.

 

نکات :

1- ویژگی ها ، می توانند برای هر المانی تعیین و توصیف شوند.

2- ویژگی ها ، الزامی نیستند. تنها برای توصیف بیشتر المان به کار برده می شوند.

3- ویژگی ها ، همیشه در هنگام باز شدن تگ های HTML باید توصیف و نوشته شوند.

ساختار کلی یک ویژگی بصورت زیر است :

name="value"

که name خود ویژگی است و value مقداری که به آن نسبت می دهیم که در ادامه مثال های زیادی در این باره خواهیم دید .

مثال :

فرض کنید می خواهیم یک تگ لینک بنویسیم . همانطور که در درس های گذشته دیدیم ، آدرس یک لینک با href مشخص می شد. href یک ویژگی است و شما مقداری که به آن می دادید ؛ همان value ماست که قابل نسبت دادن به تگ a در HTML بود.

This is a link

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

1 ) ویژگی class :

این ویژگی زمانی استفاده می شود که شما در کد نویسی HTML خود ، استایل نویسی به زبان CSS نیز داشته باشید.

در CSS نویسی، اگر برای المان مورد نظر تون ، کلاس هایی تعیین کنید ، می توانید با ویژگی class به آن ها دسترسی داشته باشید و آن استایل ها را به المان های HTML خود نسبت دهید .

در این مباحث ، CSS نویسی هدف ما نیست، ولی برای روشن تر شدن موضوع ،

2 ) ویژگی id :

این ویژگی هم مشابه ویژگی class است. یعنی به CSS نویسی شما مربوط می شود. 

3 ) ویژگی style :

شما می توانید بدون اینکه یک بخش از کد نویسی HTML خودتون رو به استایل و CSS نویسی اختصاص بدید ، کد های استایل مورد نظر تون رو بصورت مستقیم داخل تگ مورد نظر تون بیارید. در این مثال کد های CSS رو مستقیماً داخل تگ لینک معرفی کردیم :

 
    This is Link with CSS class
 

 4 ) ویژگی title :

این ویژگی برای اختصاص دادن توضیحات به المان مورد نظر شماست. که بصورت tooltip نمایش داده میشود. tooltip هم اگر نمی دونید چیه ، اینه که وقتی ماوس رو روی یک المان html نگه می دارید، یک متن ظاهر میشه، این بخاطر همین ویژگی title است . یعنی چیزی که در ویژگی title قرار دهید، در tooltip نمایش داده میشود .

 
    This is Link with CSS class
 

 

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



امتیاز بدهید :

| امتیاز : 0
موضوع : کار باhtml, | بازدید : 421
برچسب ها : HTML, آموزش HTML, آموزش HTML به زبان ساده, آموزش استایل دادن در HTML, آموزش استایل دهی به المان ها در HTML, آموزش استایل دهی در HTML, آموزش استفاده از ویژگی ها در HTML, آموزش دادن کلاس CSS به HTML,

تاريخ : چهارشنبه 15 مرداد 1393 | 14:43 | نویسنده : فاطمه |

در این درس قصد داریم چند تگ مهم و پرکاربر HTML که پایه اکثر اسناد HTML هستند را معرفی کنیم. از

جمله تگ های سرفصل ، پاراگراف ، لینک و غیره. با ما همراه باشید .

 

اگر تا این لحظه درس های گذشته را چندان کامل یاد نگرفته اید ، نگران نباشید، به مرور زمان نوشتن تگ

ها و کد های ذکر شده بسیار عادی و ساده خواهد شد.

1) تگ های سرفصل (تگ های سری H) :

در یک سند ساده HTML شما می تونید بدون اینکه CSS نویسی کنید یا برای عنوان ها سایز فونت تعیین

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

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

به این صورت قرار گرفته شود :

 

Title of the page

 

تگ های H تا شماره H6 ادامه دارند و شما می توانید عنوان های صفحه رو تا H6 ادامه بدید. مثلاً می

تونید عنوان اصلی سایت تون رو H1 بزارید و عنوان مطالب رو H2 و عنوان منو های صفحه رو H3 و همینطور

الی آخر.

مثال :

 

 

This is heading 1

 

This is heading 2

 

This is heading 3

 

This is heading 4

 

This is heading 5

 

This is heading 6

 

نکات این بخش :

1- Heading ها در صفحات HTML از هر نظر اهمیت بالایی دارند . حتی از نظر بهینه بودن و سئوی صفحات سایت شما اثر بسزایی دارند . موتور های جستجوگر از این تگ ها استفاده می کنند تا محتوای سایت شما را بهتر تشخیص دهند .

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

3- Heading ها را در مکان صحیح استفاده کنید و حتماً به خاطر داشته باشید که آنها را پس از استفاده در مکان مورد نظر ببندید . مکان صحیح استفاده از Heading ها به قالب و نحوه layout صفحه ی مورد نظر شما وابسته است ولی همانطور که پیشتر عرض شد، معمولاً عنوان اصلی باید H1 باشد و عنوان های مهم ولی غیر اصلی ، H2 بشن و عنوان های کم اهمیت تر H3 و همینطور تا آخر.

2) تگ پاراگراف (p) :

در یک صفحه HTML متون می توانند با تگ پاراگراف دسته بندی و جدا بشن. تگ پاراگراف به این صورت هست :

که بهتره بسته بشه. در بخش نکات کاملتر عرض می کنم .

مثال :

 

    Proin hendrerit feugiat augue in vehicula.

 

 

 

    Nullam vehicula felis vitae diam eleifend pulvinar.

 

 

نکات این بخش :

1- مرورگر ها معمولاً وقتی به یک تگ باز شده ی

میرسن، بصورت اتوماتیک اون رو بصورت بسته شده هم در نظر می گیرند. یعنی بعضاً اگر شما این تگ رو نبستید هم ممکنه مشکلی پیش نیاد و اکثر مرورگر ها بدون مشکل خروجی صحیحی نمایش بدن وقتی چند پاراگراف پشت سر هم باز می کنید. ولی ترجیحاً بهتره مانند نمونه بالا وقتی که به پایان هر پاراگراف خودتون رسیدید ، تگ p رو ببندید به این صورت :

 

2- همانطور که پیشتر عرض شد، اینتر زدن و ایجاد خطوط جدید در HTML نویسی تغییری در خروجی شما نداره و اگر بخواید فاصله بدید باید با تگ فاصله ایجاد کنید که در ادامه ذکر خواهد شد.

3) تگ فاصله بین خطوط و المان ها (br) :

در HTML همانطور که گفتیم، برای ایجاد فاصله بین متون باید از تگ استفاده بشه و اون تگ
هست. این تگ رو می تونید در هر جایی اضافه کنید. مثلاً بین متون داخل یک پاراگراف یا بیرون از پاراگراف یا قبل از شروع پاراگراف. هر جایی که مایل باشید، یک فاصله جدید ایجاد بشه اونجا این تگ رو باید اضافه کنید.

مثال:

This is


a para


graph with line breaks

 

نکته :

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

4) تگ خط جداکننده افقی بین المان ها (hr) :

در HTML می تونید با یک تگ ساده دیگر ، یک خط افقی در صفحه ایجاد کنید : تگ


 

مثال :

This is a paragraph.

 


This is a paragraph.

 


This is a paragraph.

 

نکته :

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

5) تگ گذاشتن لینک روی المان ها (a) :

شما می توانید در HTML نویسی به هر المان ساده ای از صفحه ، یک لینک نسبت دهید. این لینک، چند ویژگی دارد که مختصراً به آنها خواهیم پرداخت. زمانی که یک بخش از کد های خودتون رو لینک بدید، یعنی اگر کاربر روی اون بخش از المان ها کلیک کنه ، به آدرس مورد نظر شما که در تگ لینک دهی معرفی میشه، ارجاع داده میشه. این ارجاع ویژگی های خودش رو داره. مثلاً می تونه در صفحه جدید باز بشه ، در تب جدید باز بشه و غیره که در ادامه ذکر خواهد شد.

در حالت کلی ، در HTML نویسی، یک لینک سه حالت دارد :

اول ) لینک هنوز کلیک نشده و صفحه ی لینک شده در تگ لینک هم توسط کاربر بازدید نشده و ماوس هم روی آن نرفته. این لینک با “زیرخط” نمایش داده میشه و رنگ پیشفرض آن آبی است.

دوم ) ماوس روی المان لینک شده قرار داده میشه ، اصطلاحاً Hover میشه. در این حالت، نشانگر ماوس شما به شکل دست خواهد شد. رنگ لینک تغییر نخواهد کرد و لینک همچنان توسط کاربر مشاهده نشده است.

سوم ) ماوس در حال کلیک روی لینک هست . در این حالت ، رنگ لینک قرمز میشه.

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

نکته : رنگ های ارائه شده برای لینک که در بالا عرض شد، حالت پیشفرض هستند و برای تغییر آنها باید از کدنویسی CSS کمک گرفت و به رنگ های دلخواه تغییرشان داد که در این بخش بررسی نمی شود .

ساختار کلی و ساده تگ لینک در HTML به این صورت است :

Link text

مثال :

 

 

نکات این بخش:

1- تگ لینک ، باید باز و بسته شود و اگر بسته نشود، تا آخر کد های HTML شما را لینک می کند !

2- مهم ترین بخشی که در تگ لینک دهی HTML مورد استفاده قرار می گیرد ، ویژگی href آن است.

شما برای تگ لینک یک سری ویژگی ها می توانید تعیین کنید. که از جمله آنها href است.

3- هر ویژگی ، باید در حین باز شدن تگ ، مورد استفاده قرار گیرد. یعنی جایی که ما تگ a را باز کردیم ، باید بلافاصله کد های ویژگی لینک را بنویسیم. در حقیقت جای دیگری برای نوشتن آنها نداریم !

4- هر ویژگی ، باید اول نام آن نوشته شود. سپس علامت = گذاشته شده و مقدار مورد نظر برای ویژگی ، داخل ” ” قرار گیرد.

در مثال بالا، ما برای تگ لینک ، ویژگی href رو معرفی کردیم و برای مقدار دهی به ویژگی href لینک مون، آدرس سایت رو دادیم.

5- href به اشاره به آدرس صفحه ی لینک شده اشاره می کنه. یعنی جایی که شما قصد دارید کاربر وقتی روی اون کلیک کرد ، وارد صفحه مورد نظر بشه.

6- ساختار ذکر شده مهم هست و باید برای تمام ویژگی هایی که در آینده هم ذکر می کنیم رعایت بشه.

7- دقت کنید که در استفاده از ویژگی href باید حتماً صفحه مورد نظر رو با http یا هر پروتکلی که میخواهید لینک کنید ، شروع کنید.

8- هر چیزی که میخواهید لینک بشه ، باید بین تگ a قرار داده بشه. یعنی مثلاً در مثال بالا ، ما متن “Visit Farzad’s Blog!” را لینک کردیم به آدرس مورد نظر مون . شما می تونید در بین تگ a هر المان ساده ای رو لینک کنید. مثلاً این المان ساده ، می تونه تگ پاراگراف باشه یا عکس یا هرچیزی که از نظر ساختار صفحه امکان لینک شدن اون وجود داشته باشه. 

ویژگی href تا اینجا بیان شد . اکنون به سایر ویژگی های مهم برای تگ لینک در HTML می پردازیم.

ویژگی target :

این ویژگی بیان می کند که لینک کلیک شده، دقیقاً چگونه باز شود . این ویژگی مقادیر مختلفی می تواند داشته باشد ، ولی مهم ترین آنها ، ویژگی blank به معنای صفحه ی جدید می باشد که البته باید به همراه یک آندرلاین تعریف شود .

مثال :

 

 

نکته : تمامی کد تگ هایی که در HTML تا اینجا آموزش دادیم ، باید با حروف کوچک انگلیسی نوشته شوند.

6) تگ فراخوانی یک عکس (img) :

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

ساختار ساده یک تگ عکس در HTML :

 

 یک تگ عکس در حالت ساده مشابه کد بالا ، چند ویژگی دارد که در ادامه ذکر می کنیم.

1- آدرس عکس با src فراخوانی می شود .

شما می توانید برای لود شدن عکس از سطح وب ، آدرس آن را به ویژگی src نسبت دهید که دو حالت دارد.

اول ) عکس از دامنه و سایت دیگری است و شما آدرس آن عکس را در بخش src قرار می دهید. مانند : http://sitename.com/image.png

دوم ) عکس داخل هاست و فضای وب سایت شماست، و برای فراخوانی آن نیازی به ذکر نام دامنه مانند حالت اول نیست. کافیست در بخش src نام عکس به همراه پسوند آن را بنویسید. مانند نمونه ای که در بالا ارائه شد.

2- ویژگی alt :

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

مثلاً فرض کنید به دلیل قطع شدن کانکشن کاربری که وب سایت شما را باز می کند یا حتی اشتباه وارد کردن src توسط شما، عکسی برای کاربر نمایش داده نمیشود. در این صورت ، اگر یک عبارت در ویژگی alt وارد کرده باشید، آن عبارت برای کاربر نمایش داده میشود.

در مثال ساده بالا، اگر عکس نمایش داده نشود ، عبارت farzad logo به نمایش در می آید.

3- ویژگی طول و عرض عکس :

دو ویژگی کاربردی دیگر در تعریف عکس ها در تگ عکس، طول و عرض عکس می باشد که به ترتیب ، طول با height  و عرض با width شناخته می شود. کافیست مقدار طول و عرض مورد نظر را بر حسب پیکسل در این ویژگی ها تعریف کنید تا عکس شما به آن طول و عرض نمایش داده شود. البته بجز مقدار مورد نظر شما، می توان به این ویژگی ها auto هم نسبت داد تا بصورت اتوماتیک طول و عرض شناسایی و نمایش داده شود و عکس در سایز اصلی به نمایش درآید.

این ویژگی ها در حالت عادی بهتر است وارد شوند و اگر وارد نشوند ، باعث مشکلاتی می شوند . فرض کنید عکس مورد نظر شما به هر دلیلی نمایش داده نشود، در این صورت، مرورگر حین لود کردن کل صفحه ، فضایی مخصوص آن عکس در نظر نمی گیرد و ممکن است باعث به هم ریختگی قالب شما شود . همچنین تعیین طول و عرض عکس در تگ HTML آن از یک جهت دیگر موثر و مفید است. شما فرض کنید صفحه ای طراحی میکنید که بیش از 20 عکس مختلف کوچک و بزرگ دارد . طبیعیست مدت زمانی طول می کشد تا آن عکس ها یک به یک لود شوند. مخصوصاً با وضعیت اسفناک اینترنت ایران ، ما با سرعت خوبی مواجه نیستیم و عده زیادی از مردم ، همچنان از اینترنت های معمولی و حتی دایل آپ استفاده می کنند. لذا تصور کنید صفحه ای با تعداد عکس متوسط و بالا را این افراد باز کنند. اگر طول و عرض عکس ها معرفی و تعریف نشده باشد، آنها برای مشاهده قالب و layout کلّی صفحه ی سایت شما ، مجبورند صبر کنند تا تمامی عکس ها یک به یک باز و لود شوند. تا با layout اصلی قالب شما (طرح کلی مد نظر شما) مواجه شوند. ولی اگر طول و عرض ها تعریف شوند، با باز شدن صفحه ی سایت ، layout اصلی قالب شما به نمایش در می آید و مرورگر فضایی را برای عکس های فراخوانی شده توسط شما در نظر می گیرد. حالا این عکس ها چه باز بشوند و چه باز نشوند، طرح کلی قالب شما برای بازدید کننده مشخص و نمایان است. پس هرگز این دو ویژگی را از یاد نبرید. البته نمی توان از اثر خوبی که تعریف این دو ویژگی روی سئو و بهینگی سایت شما دارن هم چشم پوشی کنیم.

امیدوارم خسته نشده باشید ، این درس کمی طولانی شد ، ولی با ساختار های پرکاربردی آشنا شدیم که تقریباً در تمامی صفحات وب ، استفاده شده و می شوند.

در درس های آتی تگ های بیشتر و ویژگی های جدید تر را بررسی و معرفی خواهیم کرد .

سوالی اگر در این زمینه داشتید ، در زیر همین مطلب نظر بگذارید تا با کمال میل پاسخگو باشیم.



امتیاز بدهید :

| امتیاز : 0
موضوع : کار باhtml, | بازدید : 469
برچسب ها : آموزش HTML به زبان ساده و مختصر – مفید,

تاريخ : چهارشنبه 15 مرداد 1393 | 14:51 | نویسنده : فاطمه |

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

 

همانطور که در درس قبلی گفتیم ، باید در هر سند HTML شما کد نویسی رو با داک تایپ شروع کنید. مانند :

<!DOCTYPE html>

نکته:

این یک تگ نیست. بنابراین چیزی به نام باز و بسته شدن تگ ها در این نداریم! و فقط باید اول سند HTML ذکر کنیم و تمام.

حال برای شروع کد نویسی HTML باید کد خودمون رو با یک <html> ساده شروع کنیم. یعنی بعد از ذکر داک تایپ باید تگ <html> رو هم باز کنیم و تا زمانی که کد نویسی HTML داریم ، آن را ببندیم. پس این تگ باید باز و بسته شود.

بعد از باز شدن تگ اصلی HTML که در بالا معرفی کردیم ، نوبت به باز شدن دو مورد می رسد. همان مورد هایی که در درس قبلی ذکر کردیم. یعنی تگ سرصفحه – Head و تگ بدنه ی سند – Body . وجود تگ سرصفحه در یک سند عادی HTML ضروری نیست. ولی وجود تگ بدنه – body برای سندی که میخواهد محتوایی داشته باشد الزامی است. فعلاً یک مثال می زنیم. در حال حاضر نیازی به تگ head نداریم و بلافاصله بعد از باز شدن <html> تگ بدنه <body> رو باز می کنیم.

در HTML ترتیب باز و بسته شدن تگ ها اهمیت بالایی دارد و باید توجه زیادی به این موضوع داشته باشید. جهت اطمینان ، هر تگی رو که باز کردید ، همان لحظه تگ بسته شدن آن را نیز بنویسید و در بین آنها تگ ها و کد های جدید را ذکر کنید .

حال تا اینجا ما به این رسیدیم و سند HTML ما شامل این است :

<!DOCTYPE html>
<html>
<body>
 
</body>
</html>

حال برای مثال در این درس، دو تگ مهم را نیز معرفی میکنیم تا بتوانید یک نتیجه بسیار ساده از درس امروز را اجرا کنید.

1- تگ <p> :

این تگ کاربرد زیادی داره و کار پاراگراف رو انجام میده. یعنی هر چیزی که بین تگ <p> و <p/> قرار داده بشه، به عنوان یک پاراگراف معرفی و شناخته میشه. مثال:

<p>
This is text here just for test ! Replace your text here !
</p>

2- تگ های سرفصل اصلی <h1> :

بین تمام اسناد HTML معمول است عنوان اصلی صفحه را در تگ <h1> می گذارند . این تگ سرتیتر و عنوان اصلی یک فایل HTML را تعیین می کند که البته می تواند یک یا چند بار مورد استفاده قرار گیرد . البته تگ های <h2> و <h3> …. تا <h6> نیز قابل استفاده هستند که در درس های آتی به آن خواهیم پرداخت و شما می توانید عناوینی که اهمیت و درجه پایین تری دارند را در این تگ ها قرار دهید. ولی فعلاً به عنوان نمونه ، می توانید از این تگ استفاده کنید :

<h1>
Title comes Here !
</h1>

حال کد تکمیل شده مثال ساده امروز :

<!DOCTYPE html>
<html>
<body>
 
<h1>
Title comes Here !
</h1>
 
<p>
This is text here just for test ! Replace your text here !
</p>
 
</body>
</html>

چند نکته پیرامون HTML :
1) در کد نویسی های HTML زدن اینتر بین نوشته ها و کد ها در خروجی که روی مرورگر کاربر نمایش داده میشه هیچ اثر خاصی نداره. شما اگر بخواید بین خطوط نوشته هاتون فاصله بدید ، باید از تگ مخصوص این کار که بعداً معرفی میشه استفاده کنید. (تگ <br>)

2) کد هایی که شما می نویسید در ویرایشگر خودتون ، در مرورگر در حالت عادی دیده نمیشن. و تنها خروجی کد ها دیده میشه. مگر اینکه کاربر با مرورگر خودش View Source کنه. یعنی روی صفحه شما راست کلیک کنه و این گزینه رو بزنه یا از ترکیب کلید های کنترل + U استفاده کنه.

ضمناً حتما مثال بالا رو اجرا کنید و خودتون متن ها رو تغییر بدید تا با خروجی و عملکرد هر کد بیشتر آشنا بشید.

3) ذکر داک تایپ الزامی است. ترجیحاً از داک تایپی که در بالا معرفی کردیم همیشه استفاده کنید. هم نوشتن این داک تایپ راحت تر و کوتاه تره و هم محدودیت شما در استفاده از کد ها به نوعی کمتره و می تونید علاوه بر کد های HTML زیر ورژن 5 ، از کد های HTML5 هم استفاده کنید. ولی به هر حال انتخاب با شماست و می توانید از هر داک تایپ و ورژنی از HTML استفاده کنید .

داک تایپ HTML4 :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

داک تایپ xHTML1 :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

منتظر درس های بعدی باشید .



امتیاز بدهید :

| امتیاز : 0
موضوع : کار باhtml, | بازدید : 426
برچسب ها : آموزش HTML به زبان ساده و مختصر – مفید,

تاريخ : چهارشنبه 15 مرداد 1393 | 14:35 | نویسنده : فاطمه |

در این سری از آموزش های سایت قصد داریم HTML را بررسی و معرفی کنیم و سعی ما بر این است صرفاً نکات کلیدی و اصلی HTML نوشته شوند و از آموزش حواشی و جزئیاتی که بعضاً کارآمد نیستند ، چشمپوشی می کنیم.

فرض را بر این می گذاریم که شما در حال حاضر با مفاهیم اولیه ای مثل مرورگر های اینترنتی و صفحات وب آشنایی سطحی دارید و بدون هیچ مقدمه ای به سراغ معرفی HTML می رویم.

 

مقدمه :

می توان HTML را یک زبان بسیار ساده و قابل فهم برای مرورگر های وب جهت نشانه گذاری محتوای وب دانست که اجزای هر وب سایتی را تشکیل می دهد .

HTML مخفف Hyper Text Mark-up Language می باشد ، به معنای “زبان کد گذاری ابر متن” می باشد.

HTML شامل تگ هایی است که شما برای تک تک اجزای وب سایت مورد نظر خودتان می توانید از آن تگ ها استفاده کنید. که به مرور با آنها آشنا خواهیم شد.

HTML5 چیست ؟

اچ تی ام ال 5 ، آخرین ورژن از کدنویسی HTML می باشد که در این سری آموزش ها به آن نیز خواهیم پرداخت. در حال حاضر فعلاً تگ های اصلی HTML را به شما معرفی می کنیم ، سپس به سراغ HTML5 خواهیم رفت. ورژنی که در این سری آموزش ها یاد می گیرید ترکیبی از HTML4 و 5 می باشد .

برای نوشتن HTML به چه چیزی نیازمندیم ؟

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

-  نرم افزار Notepad :

این نرم افزار بصورت پیشفرض روی تمامی ویندوز ها نصب شده و شما نیاز به نصب هیچ چیزی ندارید، فقط کافیست یک سند جدید نوت پد در ویندوز خود باز کنید و فایل مورد نظر رو با پسوند html یا htm ذخیره کنید.

-  نرم افزار ++Notepad :

450928871 %5Bfarzad.id.ir%5D Notepad plus plus آموزش HTML : درس اول   HTML چیست؟

این نرم افزار رایگان، شناسایی کد های برنامه نویسی به اکثر زبان های مورد استفاده برنامه نویسان از جمله HTML و … را برای شما آسان می کند. این نرم افزار را می توان ورژن تکمیل شده ی Notepad برای کد نویسان و برنامه نویسان دانست . ویژگی خاص این نرم افزار سبک بودن نرم افزار و پشتیبانی از انواع زبان ها می باشد.

-  نرم افزار DreamWeaver :

 آموزش HTML : درس اول   HTML چیست؟

نرم افزار دریم ویور از مجموعه نرم افزار های شرکت adobe بوده و امکانات بسیار کامل تری در اختیار کدنویسان قرار می دهد. از جمله امکانات این نرم افزار می توان به حالت کد نویسی بصورت زنده اشاره کرد که کد نویسی را برای شما در بعضی موارد شیرین تر می کند. ولی این نرم افزار به کار تازه کاران نمی آید و به نظر می رسد امکانات اضافی زیادی دارد، همچنین این نرم افزار رایگان نیست و حجم نسبتاً زیادی از Hard و Ram سیستم شما را اشغال می کند .

-  نرم افزار Sublime Text :

1702859588 [farzad.id.ir] Sublime Text Logo آموزش HTML : درس اول   HTML چیست؟

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

-  پیشنهاد ما :

شما جهت شروع کد نویسی ، می توانید حتی با Notepad معمولی ویندوز هم شروع به کار کنید ، ولی اگر میخواهید کدها را در قالب های زیباتری ببینید می توانید با نرم افزار ++Notepad یا Sublime که در مطلب بالا ذکر شد ، آغاز به کار کنید.

خب تا اینجا باید برنامه ی مورد نظر تون رو برای شروع کد نویسی انتخاب کرده باشید.

درمورد HTML ذکر چند نکته ضروری است که در ادامه به آنها بصورت تیتر وار و مختصر اشاره می کنیم :

+) هر سند HTML دارای یک داک تایپ است. داک تایپ تعیین می کند شما از چه ورژنی در نوشتن HTML یک وبسایت بهره می برید. جهت آشنایی بیشتر با داک تایپ و داک تایپ های رایج می توانید به اینجا رجوع کنید . در این آموزش ها ما داک تایپ خود را بصورت زیر قرار می دهیم .

<!DOCTYPE html>

+) در HTML تگ ها دو حالت دارند . حالت اول اینکه اگر شما تگ (کد)ــی رو باز کردید ، باید اونها رو ببندید . و حالت دوم اینه که بعضی تگ ها (کدها) بسته نمیشن. در این باره مثال هایی خواهیم زد و اگر متوجه نشدید ، نگران نباشید ! فقط خاطرتون باشه بعضی تگ ها بسته میشن و بعضی بسته نمیشن(نیازی به بستن ندارند) . ضمنا در HTML تگ به کد هایی که می نویسیم می گوییم !

در مورد بسته شدن تگ ها ، میشه این مثال رو زد :

<tagname>content</tagname>

 که tagname نام تگ و کدی است که ما مینویسیم و content چیزی است که tagname روی آن اثر می گذارد. در واقع تا زمانی که این تگ بسته نشود ، اثربخشی تگ به قوت خود باقی می ماند.

برای بسته شدن تگ های HTML باید نام آنها را در تگ بسته شدن به همراه یک slash بنویسیم. در این صورت تگ مذکور اصطلاحاً بسته می شود و این یعنی پایان اثربخشی آن تگ.

+) هر سند عادی HTML از چند بخش کلی تشکیل می شود که به آنها اشاره می کنیم. اول: “Head” (سرصفحه) و دوم : “Body” (بدنه) . این دو بخش ، بخش های رایج مورد استفاده در اکثر اسناد HTML می باشند که شما باید برای شروع از آنها استفاده کنید .

در آموزش بعدی کد نویسی رو با مثال های مختلف و جذابی شروع می کنیم . جهت شروع شما ابتدا یکی از نرم افزار های پیشنهاد شده برای کد نویسی را نصب کنید.



امتیاز بدهید :

| امتیاز : 0
موضوع : کار باhtml, | بازدید : 470
برچسب ها : HTML چیست, آموزش HTML, آموزش HTML به زبان ساده, آموزش استفاده از HTML, تگ های HTML, کد نویسی ,

تاريخ : چهارشنبه 15 مرداد 1393 | 14:33 | نویسنده : فاطمه |

CSS یا همان Cascading Style Sheet روشی است برای قالب بندی و طراحی اجزای صفحه از قبیل متن، تصویر، زمینه صفحه، کادرها و تقریباً هر چیزی که در طراحی صفحه استفاده می شود بدون استفاده از کدهای HTML. از طریق این استایل شیتها می توانیم از دوباره نویسی کدهای HTML که باعث مشکل شدن کد نویسی و همچنین کند شدن سرعت بارگذاری صفحه در اینترنت می شود جلوگیری کنیم. برای مثال می توانیم یک بار نوع فونت مورد استفاده در یک صفحه را تعیین کنیم و دیگر مجبور نباشیم کد مربوط به فونت را در صفحه به کار ببریم. همچنین می توانیم از این ابزار قدرتمند در مواردی به جای جاوا اسکرپت نیز استفاده کنیم و چون مشکلات جاوا اسکرپت مثلاً غیر فعال بودن جاوا اسکرپت در مرورگر را ندارد با خیالی آسوده تر می توانیم از آن استفاده کنیم.

CSS هم مانند جاوا اسکرپت این امکان را به ما می دهد که از یک فایل استایل خارجی برای تعیین خواص بخشهای مختلف صفحه های یک سایت استفاده کنیم. در این صورت می توانیم ظاهر همه صفحه ها را با ایجاد یک تغییر کوچک در فایل استایل خارجی تغییر دهیم. مثلاً فرض کنید که رنگ متن همچنین نوع فونت متن صفحه هایمان را در یک فایل استایل تعیین کرده ایم و از آن در طراحی چندین صفحه استفاده کرده ایم، حالا اگر بخواهیم رنگ متن همه این صفحات را تغییر دهیم تنها کافی است تا رنگ متن را در همان فایل استایل تغییر دهیم و نیازی به تغییر دادن صفحات نداریم.

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



امتیاز بدهید :

| امتیاز : 0
موضوع : | بازدید : 372
برچسب ها : اموزش کارباcss"اموزش استایل طراحی قالب,

تاريخ : چهارشنبه 15 مرداد 1393 | 14:23 | نویسنده : فاطمه |

آنچه که قبل از یادگیری HTML لازم است بدانید:

برای شروع کار با HTML شما به چیزهایی نیاز دارید که در لیست زیر آمده است:

  1. شما به یک ویرایشگر متن نیاز دارید. در ویندوز شما می توانید از برنامه Notepad استفاده کنید. از هر نرم افزار ویرایش متن دیگری استفاده کنید اما این نکته را در نظر داشته باشید که نرم افزار WordPad که در ویندوز وجود دارد و نرم افزارهایی مانند Microsoft Office Word و امثال آن برای نوشتن کدهای HTML مناسب نیستند چون در هنگام ذخیره کردن متن این نرم افزارها کدهایی را به آن اضافه می کنند.
    نرم افزار Notepad را می توانید از طریق منوی استارت در قسمت Accessories پیدا کنید یا از طریق فرمان Run با تایپ notepad در کادر Open و فشار دادن دکمه Enter.
  2. شما به یک مرورگر وب به انتخاب خود نیاز دارید. می توانید از Microsoft Internet Explorer استفاده کنید که با ویندوز نصب می شود یا از Opera, Mozilla Firefox و نرم افزارهای مشابه که اغلب به صورت رایگان برای دانلود در اینترنت وجود دارند.
    بهتر است صفحاتی را که می نویسید با چند مرورگر آزمایش کنید. زیرا در HTML قسمتهایی وجود دارد که مختص به یک مرورگر خاص است و با سایر مرورگرها کار نمی کند.
  3. شما به جایی برای ذخیره کردن متن خود دارید که می تواند جایی روی هارد دیسک شما، یک فلاپی دیسک یا یک سرور باشد. البته شما برای استفاده از HTML نیاز ندارید حتماً به اینترنت متصل باشید، شما می توانید با استفاده از یک مرورگر وب در کامپیوتر خود از HTML استفاده کنید.
    برای ذخیره کردن فایلی که با Notepad نوشته اید کافی است از منوی File گزینه Save As را انتخاب کرده و مسیری را برای ذخیره فایل انتخاب کنید و در کادر File Name در پایین پنجره Save As نام فایل را با پسوند html بنویسید. در آخر هم دکمه Save را کلیک کنید.


امتیاز بدهید :

| امتیاز : 0
موضوع : کار باhtml, | بازدید : 423
برچسب ها : اموزش طراحی قالب,

تاريخ : چهارشنبه 15 مرداد 1393 | 14:23 | نویسنده : فاطمه |

 

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

در آغاز عکسی از برنامه Borland C++ را نشان می دهم تا با محیط نرم افزار C++ آشنا شوید . هرچند نرم افزارهای دیگه هم در این خصوص وجود دارند مانند Visual C++ یا Turbo C++ .



ادامه مطلب

امتیاز بدهید :

| امتیاز : 0
موضوع : اموزش برنامه نویسی, | بازدید : 451
برچسب ها : برنامه نویسی"اشنایی با حروف برنامه نویسی,

تاريخ : سه شنبه 7 مرداد 1393 | 22:19 | نویسنده : فاطمه |

 

آیا شده تا به حال در ویندوز، یکی از پنجره‌های Windows Explorer قفل کند و یک دفعه همه پنجره‌ها بسته شود؟ دوست دارید از این معضل جلوگیری کنید؟

کمی مقدمه:  مدیریت پردازه‌ها

دانشجویان رشته کامپیوتر که درس «سیستم عامل» را پاس کرده باشند، مطمئناً می‌دانند که ما مبحث مفصلی داریم به نام « Process Management » یا مدیریت پردازه‌ها.

یکی از زیرشاخه‌های این مبحث، بحث انشعاب پردازه‌ها (یا همان چنگال: Fork) است.



ادامه مطلب

امتیاز بدهید :

| امتیاز : 0
موضوع : اموزش کامپیوتر, | بازدید : 416
برچسب ها : اموزش کامپیوتر"اموزش قفل کردن Windows Explorer"اموزش کاربردی,

تاريخ : سه شنبه 7 مرداد 1393 | 15:43 | نویسنده : فاطمه |

بدون شک بهترین نوع سیستم عاملی که تاکنون راه اندازی شده با جذابیت های گرافیکی بالا ویندوز 7 می باشد. پشتیبانی مناسب از پردازشگر چند هسته ای و Multithreading و سرعت بالا در بوت شدن این ویندوز، هیچ بهانه ای برای شکایت به ما نمی دهد. نسخه های ابتدایی تا پیشرفته از این ویندوز، وفاداری کاربران به توانایی مایکروسافت را در ارائه ی نرم افزارهایی با کیفیت بالا با بهترین کاربری را نشان می دهد. در این مقاله به شما خواهیم گفت که چگونه ویندوز 7 را مجددا نصب کنید بدون اینکه اطلاعات خود را از دست بدهید واز یک دیسک Image و یا  Recovery  استفاده کنید.



ادامه مطلب

امتیاز بدهید :

| امتیاز : 0
موضوع : اموزش کامپیوتر, | بازدید : 393
برچسب ها : اموزش کامپیوتر"اموزش نصب ویندوز"اموزش نصب دوباره ویندوز,

تاريخ : سه شنبه 7 مرداد 1393 | 15:40 | نویسنده : فاطمه |
صفحه قبل 1 2 صفحه بعد