پرش به


تصویر

آموزش زبان HTML


  • لطفا وارد حساب کاربری خود شوید تا بتوانید پاسخ دهید
28 پاسخ برای این موضوع

#1 ارسالی 08 ژوئیه 2017 - 01:22

WhiteBeard
+125
    OFFLINE
    تاریخ عضویت :
    26 ژوئن 2017
  • %20██▒▒▒▒▒▒▒▒
  • Anonymous
  • 29 ارسال
    Last Visit ژوئن 08 2018 07:37
  • Country :
  • Gender : Male
  • Name : WhiteBeard

سلام خدمت همه دوستان گرامی

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

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

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

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

به کلی تعطیل کردن.پس سوار بر مرکب انرژی:P میریم که یادبگیریم

راستی هرسوال که داشتین پیام خصوصی بدین و پلیز اسپم ندین


ویرایش شده توسط WhiteBeard 08 ژوئیه 2017 - 01:23 .

زندگی صحنه یکتای هنرمندی ماست

 

هرکسی نغمه خود خواند و از صحنه رود

 

صحنه پیوسته بجاست

 

خرم آن نغمه که مردم بسپارند به یاد


#2 ارسالی 08 ژوئیه 2017 - 02:14

WhiteBeard
+125
    OFFLINE
    تاریخ عضویت :
    26 ژوئن 2017
  • %20██▒▒▒▒▒▒▒▒
  • Anonymous
  • 29 ارسال
    Last Visit ژوئن 08 2018 07:37
  • Country :
  • Gender : Male
  • Name : WhiteBeard

خب بریم سراغ اولین درس:(HTML چیه؟؟)

HTML زبان استاندارد برای طراحی صفحات وب هستش و مخفف کلمه Hyper Text Markup Language.

Hyper Text Markup Language یعنی زبان نشانه گذاری اَبَرمتن(فوق متن،بالاتر از متن)

HTML ساختار صفحات وب رو با استفاده از علامت گذاری تعریف میکنه

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

عناصر HTML به وسیله تگ(Tag) نشون داده میشن.توی زبان فارسی تگ یعنی برچسب.

تگ های HTML قطعات مختلف از محتوا مثل هدینگ(Heading)،پاراگراف و... رو علامت گذاری یا برچسب گذاری میکنن.

مرورگر تگ های HTML رو نشون نمیده بلکه با استفاده از اونا مطالب پیج رو اونجوری که توصیف شدن نشون میده

یکی از ساده ترین نمونه های یک سند HTML:

1.png

 

تگ <!DOCTYPE html> نشون دهنده استفاده از HTML5ـه

تگ <html> مشخص کننده شروع و پایان یک سند HTMLـه

تگ <head> حاوی یک سری اطلاعات برای مرورگر و جستجوگرـه

تگ <title> یک عنوان رو برای سند ما تعیین میکنه

تگ <body> اطلاعات قابل مشاهده در یک مرورگر رو درون خودش داره

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

تگ <p> که توی اون پاراگراف خودتون رو مینویسین.

کد های توی تصویربالایی،توی مرورگر به این شکل نشون داده میشه:

2.png

 

دوستان اینا صرفا جهت آشناییه و مطمئنم که الان گیج شدین که چی به چیه ولی اگه

تا آخرش با من باشین قول میدم که کامل همه چیزو یاد بگیرین.چون همه چیزو توضیح میدم :x 


ویرایش شده توسط WhiteBeard 08 ژوئیه 2017 - 02:16 .

زندگی صحنه یکتای هنرمندی ماست

 

هرکسی نغمه خود خواند و از صحنه رود

 

صحنه پیوسته بجاست

 

خرم آن نغمه که مردم بسپارند به یاد


#3 ارسالی 09 ژوئیه 2017 - 08:54

WhiteBeard
+125
    OFFLINE
    تاریخ عضویت :
    26 ژوئن 2017
  • %20██▒▒▒▒▒▒▒▒
  • Anonymous
  • 29 ارسال
    Last Visit ژوئن 08 2018 07:37
  • Country :
  • Gender : Male
  • Name : WhiteBeard

تگ های HTML

تگ های HTML عناصری هستن که توی براکت <> قرار میگیرن.

تگ های HTML معمولا جفتی هستن مثل <p> و </p>

به اولین تگ،تگ آغازین و به تگ پایان هم میگن تگ پایانی :D 

تگ پایانی مثل تگ آغازیه منتها یه / هم پشتش داره.

نکته:توی این فروم اون قسمتی که توش مینویسی اسلش رو میزاره جلو.یعنی به جای اینکه بنویسه<p/> مینویسه</p>

اگر</p> روی توی مرورگرتون کپی پیست کنین میبینین که به شکل درست تبدیل میشه.

 

مرورگرهای وب

هدف یک مرورگر(اپرا،کروم،فایرفاکس و...)خوندن اسناد HTML و نشون دادن اوناست.

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

 

ساختار یک پیج HTML

اینم ساختار HTML توی عکس به نمایش گذاشته شده:

3.png

 

نکته:فقط محتوایی که بین تگ <body> هست توی مرورگرنشون داده میشه(قسمت سفید)

 

اعلامیه <!DOCTYPE html>

اعلامیه <!DOCTYPE html> نوع سند رو نشون میده و به مرورگر کمک میکنه که پیج رو به شکل درست نمایش بده

این اعلامیه فقط یک بار اون هم در بالای پیج نوشته میشه(یه چیزی مثل بسم الله :D)

این هم یه عکس از اعلامیه:

4.png

 

از روز اولی که وب به وجود اومده نسخه های مختلفی از HTML ارائه شده:

5.png


زندگی صحنه یکتای هنرمندی ماست

 

هرکسی نغمه خود خواند و از صحنه رود

 

صحنه پیوسته بجاست

 

خرم آن نغمه که مردم بسپارند به یاد


#4 ارسالی 09 ژوئیه 2017 - 09:26

WhiteBeard
+125
    OFFLINE
    تاریخ عضویت :
    26 ژوئن 2017
  • %20██▒▒▒▒▒▒▒▒
  • Anonymous
  • 29 ارسال
    Last Visit ژوئن 08 2018 07:37
  • Country :
  • Gender : Male
  • Name : WhiteBeard

کدم رو کجا بنویسم؟

شما میتونین کدتون رو توی برنامه های مختلفی مثل

نوت پد(مال خود ویندوز)

notepad++

sublime text

و... بنویسین

بر فرض مثال که از نوت پد ویندوز استفاده میکنین و کد خودتون رو(یه کد خیلی ساده)مثل تصویر زیر نوشتین:

img_notepad.png

 

برای ذخیره کردن این کد روی قسمت File و بعدش Save as کلیک کنین.اسمش رو هرچیزی که خواستین بزارین

ولی در آخرش پسوند html. رو قرار بدین و حتما قسمت Encoding رو روی UTF-8 قرار بدین مثال:

img_saveas.png

 

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


زندگی صحنه یکتای هنرمندی ماست

 

هرکسی نغمه خود خواند و از صحنه رود

 

صحنه پیوسته بجاست

 

خرم آن نغمه که مردم بسپارند به یاد


#5 ارسالی 09 ژوئیه 2017 - 09:33

WhiteBeard
+125
    OFFLINE
    تاریخ عضویت :
    26 ژوئن 2017
  • %20██▒▒▒▒▒▒▒▒
  • Anonymous
  • 29 ارسال
    Last Visit ژوئن 08 2018 07:37
  • Country :
  • Gender : Male
  • Name : WhiteBeard

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

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

درموردش توضیحی داده نشده این اشکالی نداره چون جلوتر اونارو هم یاد میگیرین

و علت نوشته شدنشون هم اینه که کد به درستی اجرا شه


زندگی صحنه یکتای هنرمندی ماست

 

هرکسی نغمه خود خواند و از صحنه رود

 

صحنه پیوسته بجاست

 

خرم آن نغمه که مردم بسپارند به یاد


#6 ارسالی 11 ژوئیه 2017 - 04:27

WhiteBeard
+125
    OFFLINE
    تاریخ عضویت :
    26 ژوئن 2017
  • %20██▒▒▒▒▒▒▒▒
  • Anonymous
  • 29 ارسال
    Last Visit ژوئن 08 2018 07:37
  • Country :
  • Gender : Male
  • Name : WhiteBeard

سندهای HTML

تمام اسناد HTML باید با اعلامیه <!DOCTYPE html> شروع بشن

خود سند HTML با تگ <html> شروع و با تگ </html> خاتمه پیدا میکنه

قسمت قابل مشاهده HTML بین تگ های <body> و </body> قرار میگیره

باز هم همون مثال قبل رو تکرار میکنم:

6.png

 

در تصویر بالا،درسمت چپ کد نوشته شده و در سمت راست جواب رو میبینیم

 

هدینگ های HTML(هدینگ:سرفصل،عنوان)

هدینگ های HTML از تگ <h1> شروع میشن تا تگ <h6>

<h1> مهمترین هدینگ رو تعریف میکنه.<h6> کم اهمیت ترین هدینگ رو تعریف میکنه

با یه مثال متوجه میشین:

7.png

 

همونطور که میبینین <h1> متن رو با فونت بزرگ تری نسبت به بقیه به نمایش میزاره و <h2> از <h1> کوچیکتر

و به همین ترتیب تا به <h6> میرسیم که نسبت به بقیه کوچیک تره به همین ترتیب هم اهمیتشون کمتر میشه یعنی 1 بالاترین

اهمیت،2دارای اهمیت کمترنسبت به قبلی و ....تا به 6 میرسیم که کم اهمیت ترینه

 

پاراگراف های HTML

تگ <p> پاراگراف ها رو تعریف میکنه.به این مثال توجه کنین:

8.png

 

همونطور که میبینین یک پاراگراف بین تگ های آغازین و پایانی پاراگراف(</p>,<p>) قرار میگیره.

 

لینک های HTML

تگ <a> لینک های HTML رو تعریف میکنه.مثال:

9.png

 

همونطور که توی عکس میبینین بین تگ آغازی و پایانی <a> اون اسم مورد نظر یا کلمه مورد نظر نوشته میشه

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

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

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

مورد نظر رو مینویسیم مثلا مینویسیمwww.google.com و اگر توی مرورگرتون این کد رو اجرا کنین میبینین که یک

لینک جلوی شماست.

 

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

هیچ تمرینی نداشتین پس انتظار نداشته باشین اول بسم الله از شکم مادر بیایین بیرون مثل آب خوردن کد بنویسین.شما باید تمرین

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

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


ویرایش شده توسط WhiteBeard 11 ژوئیه 2017 - 04:29 .

زندگی صحنه یکتای هنرمندی ماست

 

هرکسی نغمه خود خواند و از صحنه رود

 

صحنه پیوسته بجاست

 

خرم آن نغمه که مردم بسپارند به یاد


#7 ارسالی 13 ژوئیه 2017 - 03:20

WhiteBeard
+125
    OFFLINE
    تاریخ عضویت :
    26 ژوئن 2017
  • %20██▒▒▒▒▒▒▒▒
  • Anonymous
  • 29 ارسال
    Last Visit ژوئن 08 2018 07:37
  • Country :
  • Gender : Male
  • Name : WhiteBeard

عکس های HTML

توی HTML عکس ها به وسیله تگ <img> تعریف میشن

نکته:تگ <img>،تگ پایان نداره.

حالا چطور از این تگ استفاده کنیم؟؟

10.png

 

src به مخفف source هست به معنی منبع.یعنی لینک موردنظرتون که عکس باید باشه رو کپی میکنین

بین اون نقل قول ها پیست میکنین.

hight و width ارتفاع و عرض عکس رو مشخص میکنن که به دلخواه میتونین تعیین کنین

یه مثال:

11.png

 

توی این مثال لینک لوگوی گوگل کپی کردم بین نقل قول های src پیست کردم و با hight و width عرض و ارتفاعشون

رو تعیین کردم و نتیجش میشه لوگوی گوگل که سمت راست میبینین


زندگی صحنه یکتای هنرمندی ماست

 

هرکسی نغمه خود خواند و از صحنه رود

 

صحنه پیوسته بجاست

 

خرم آن نغمه که مردم بسپارند به یاد


#8 ارسالی 13 ژوئیه 2017 - 06:56

WhiteBeard
+125
    OFFLINE
    تاریخ عضویت :
    26 ژوئن 2017
  • %20██▒▒▒▒▒▒▒▒
  • Anonymous
  • 29 ارسال
    Last Visit ژوئن 08 2018 07:37
  • Country :
  • Gender : Male
  • Name : WhiteBeard

خلاصه آموزش های قبلی

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

13.png

 

کدهای بالا توی مرورگر به شکل پایین در میان:

14.png

 

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

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


زندگی صحنه یکتای هنرمندی ماست

 

هرکسی نغمه خود خواند و از صحنه رود

 

صحنه پیوسته بجاست

 

خرم آن نغمه که مردم بسپارند به یاد


#9 ارسالی 14 ژوئیه 2017 - 11:24

WhiteBeard
+125
    OFFLINE
    تاریخ عضویت :
    26 ژوئن 2017
  • %20██▒▒▒▒▒▒▒▒
  • Anonymous
  • 29 ارسال
    Last Visit ژوئن 08 2018 07:37
  • Country :
  • Gender : Male
  • Name : WhiteBeard

دوستان توی پست شماره 7 یادم رفت درمورد alt توضیح بدم.

alt مخفف کلمه alternative به معنی جایگزین

اگر به هر دلیلی عکس لود نشه شما میتونین توی تگ <img> دستور alt رو بنویسین و طرف میفهمه که این عکس

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

نحوه استفاده هم اینجوریه:

<img alt="text">

به جای text اسم موردنظر رو مینویسین مثلا اگه عکس درخته مینویسین:درخت


زندگی صحنه یکتای هنرمندی ماست

 

هرکسی نغمه خود خواند و از صحنه رود

 

صحنه پیوسته بجاست

 

خرم آن نغمه که مردم بسپارند به یاد


#10 ارسالی 19 ژوئیه 2017 - 04:29

WhiteBeard
+125
    OFFLINE
    تاریخ عضویت :
    26 ژوئن 2017
  • %20██▒▒▒▒▒▒▒▒
  • Anonymous
  • 29 ارسال
    Last Visit ژوئن 08 2018 07:37
  • Country :
  • Gender : Male
  • Name : WhiteBeard

تگ <br>

تگ <br> که من بش میگم خط شکن،خط شما رو میشکنه.چطور؟

15.png

 

همونطور که میبینین در پاراگراف،بعد از کلمه lines تگ <br> نوشته شده و تمام کلمات بعد از تگ

به خط بعدی انتقال داده شده.

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

روزتون خوش و تمرین یادتون نره هااا گفته باشم


زندگی صحنه یکتای هنرمندی ماست

 

هرکسی نغمه خود خواند و از صحنه رود

 

صحنه پیوسته بجاست

 

خرم آن نغمه که مردم بسپارند به یاد





2 کاربر در حال خواندن این موضوع است

1 کاربر، 1 مهمان و 0 عضو مخفی


رفتن به اول صفحه | Back To UP