[دوره] آموزش اچ تی ام ال | اختصاصی پرشین بکس

Technical

Technical

لاغر تالار
Banned
خب دوستان! این هم دوره آموزش اچ تی ام ال! جی کوئری فعلا معلقه و سی اس اس هم قفل شد. چون که شما اول باید با اچ تی ام ال آشنایی داشته باشید تا سراغ دیگر کارها برویم.

خب از امروز شروع میشه!
 
Technical

Technical

لاغر تالار
Banned
پاسخ : [دوره] آموزش اچ تی ام ال | اختصاصی پرشین بکس

درود! و اینک جلسه اول:

شاید اگر تا به حال با اچ تی ام ال کار نکرده باشید اولی سوالی که به ذهنتان می آید این است : اچ تی ام ال (HTML) چیست؟

و اینک این هم پاسخ سوال شما : اچ تی ام ال مخفف جمله HyperText Markup Language است. اچ تی ام ال و سی اس اس دو هسته طراحی وب هستن. اچ تی ام از زبان توصیف ساختار وب هست. شما که در این همه سایت گردش می کنید و از مطالب آن ها دیدن می کنید همه ی این ها بر پایه ی اچ تی ام ال وسی اس اس هستند.
و حالا شروع می کنیم.

طبق معمول برای شروع یه یک فضای خالی نیاز داریم. می توانید از یک وبلاگ جدید و یا از سایت Tryit Editor v1.6 استفاده کنید.
به قسمت ویرایش قالب بروید به این کد ها نگاهی کنید. و بعد از این که نگاهی کلی انداختید کل کد های قالب را حذف کنید! بله حذف کنید همه ی آن را انتخاب کنید و سپس از حذفشان کنید! چون ما در ابتدای می خواهیم کد را گام به گام خودمان بنویسیم.
تغییرات را ذخیره کنید و به فضای خود سری بزنید باید یک صفحه خالی داشته باشید. خب و حالا برای شروع :

در اچ تی ام ال برای شروع هر تگ نام تگ را در بین این دو علامت می گذاریم <tag> برای پایان دادن به آن نام تگ را در <tag/> قرار می دهیم. با این وجود با ایجاد تگ اچ تی ام ال شروع کنید.

HTML:
<html> ###</html>

دستورات مورد نظر را باید به جای علامت ### بگذارد. که البته به طور مستقیم در بین این دو تگ دستوری قرار نمی گیرد.

حال برای این فضا نیازمند یک سر هستیم. پس تگ هد (head) را جایگذاری کنید.

HTML:
 <html>
 < head> </head> 
 </html>

این سایت همانند یک انسان حال که سر دارد نیازمند یک بدن است. پس باید به آن تگ بادی (body) را نیز اضافه کرد. مراقب باشید که تگ بای را درون هد قرار ندهید! چون که بادی یک تگ مجزا حساب می شود اما زیر مجموعه ای از تگ اچ تی ام ال.
HTML:
<html>
<head> </head>
<body> </body>
 </html>

حال تغییرات را ذخیره کنید. به فضای مجازی خود نگاهی کنید. آیا همچنان یک صفحه ی سفید می بینید؟ تبریک! شما کارتان را درست انجام داده اید.

تا جلسه بعدی بدرود.
 
S

siarnold

مخ تالار
کاربر تالار
پاسخ : [دوره] آموزش اچ تی ام ال | اختصاصی پرشین بکس

البته دوست عزیزمون فراموش کردن بنویسن
کدهای اچ تی ام ال را میتوان در notepad ویندوز نیز نوشت
در منوی start و allprogram و پوشه Accessories حال نوت پد را باز کرده و کد ها نوشته سپس از file گزینه save as رو انتخواب و در بخش file name نام مناسبی نوشته سپس به انتهای نام .html را اضافه میکنیم و از encoding گزینه UTF-8 رو انتخواب میکنیم و save
همین
 
Technical

Technical

لاغر تالار
Banned
پاسخ : [دوره] آموزش اچ تی ام ال | اختصاصی پرشین بکس

البته دوست عزیزمون فراموش کردن بنویسن
کدهای اچ تی ام ال را میتوان در notepad ویندوز نیز نوشت
در منوی start و allprogram و پوشه Accessories حال نوت پد را باز کرده و کد ها نوشته سپس از file گزینه save as رو انتخواب و در بخش file name نام مناسبی نوشته سپس به انتهای نام .html را اضافه میکنیم و از encoding گزینه UTF-8 رو انتخواب میکنیم و save
همین

در دوره جی کوئری ذکر کرده بودم ولی ایندفعه یادم رفت معذرت!
 
Technical

Technical

لاغر تالار
Banned
پاسخ : [دوره] آموزش اچ تی ام ال | اختصاصی پرشین بکس

درود به جلسه دوم خوش آمدید.

در جلسه گذشه موفق شروع به کد نویسی شدیم. و حالا می خواهیم کار خودمان را ادامه بدیم.
بعد از ایجاد بدن و سر و خود اچ تی ام ال اولین نیازمندی ما نوشتن یک متن در وبسایت هست.
این یک متن غیر استاندارد و بدون تگ.
HTML:
<html>
<head>PERSIANBAX </head>
<body> </body>
</html>

اگر این کد را در سورس صفحه جای گذاری کنید بعد از ذخیره تغییرات در صفحه وب خود می توانید متن پرشین بکس را ببینید.
1365930597081.png


اما این متن یک متن یک متن غیر استاندارد است. پس باید آن را تبدیل به یک متن استاندارد کنیم. اما چگونه؟؟
قابل ذکر است که در بخش هد هیچگونه متنی قرار نمی گیرد.
حال باید برای این متن یک تگ بسازیم. که به صورت پیش فرض آن را h1 می نامیم. و درضمن آن را در بخش بدن (body) قرار می دهیم نه در بخش سر (head).
به این صورت.
HTML:
<html>
<head></head>
<body> 
<h1>PersianBax</h1>
</body>
</html>
همانطور که می دونید یک جمله معروف هست که میگه هر شروعی پایانی دارد. ما کدهامون رو با <#> شروع می کنیم و با<#/> پایان می یابد. یعنی این ممیز نماد پایان است.
بعد از ذخیره به صفحه وب خود بروید. باید چنین چیزی را مشاهده کنید.

1365931768871.png


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

حال اگر بخواهیم عنوان دیگری را اضافه کنیم بهتر است از نام h2 استفاده کنیم. همانند کد زیر:
HTML:
<html>
<head></head>
<body> 
<h1>PersianBax</h1>
<h2>The Best Persian Forum </h2>
</body>
</html>

حال نگاهی به صفحه خود بیاندازید.

1365931769082.png


همانطور که می بینید h2 کمی از h1 کوچکتر است. و این به این دلیل است که این زبان h2 را هم می شناسد. بنابر این آن را هم شناسایی می کند و می فهمد که h2 هدینگ اصلی نیست بنابراین
کمی از اندازه آن می کاهد.
1365931769253.png

به همین ترتیب می توانید عناوین را اضافه کنید. در نظر داشته باشید که هر چه قدر عدد شماره هدینگ شما بیشتر باشد اندازه متن کوچکتر می شود.

تا جلسه بعدی بدرود
 
آخرین ویرایش:
S

siarnold

مخ تالار
کاربر تالار
پاسخ : [دوره] آموزش اچ تی ام ال | اختصاصی پرشین بکس

دوست عزیزمون فراموش کردن بنویسن که هر تگی رو که شروع میشه باید بسته بشه مثلا همین h1 با <h1> شروع شده و با <h/> بسته شده و همینطور HTML با <html> شروع وبا <html/> بسته شده است و همینطور بقیه تگ ها مثل title و...
 
آخرین ویرایش:
Technical

Technical

لاغر تالار
Banned
پاسخ : [دوره] آموزش اچ تی ام ال | اختصاصی پرشین بکس

منتظر جلسات بعدی باشید...
 
Technical

Technical

لاغر تالار
Banned
پاسخ : [دوره] آموزش اچ تی ام ال | اختصاصی پرشین بکس

درود به جلسه سوم خوش آمدید.
در جلسات قبلی آموختیم که چگونه یک تگ شروع کنیم و چگونه آن را به پایان برسانیم. آموخیتم که چگونه یک هدینگ بنویسیم و کمی اطلاعات درباره آن اندوخیتم. حال می خواهیم اطلاعات خود را افزون کنیم.
حتما متوجه این شده اید که متن شما بسیار ساده است بنابراین نیازمند این است که با کدهای اچ تی ام ال مزین شود.
اولین کار این است که به متن خود فونت خاصی بدهیم. بله باید خانواده فونت رو انتخاب کنیم. برای این کار باید از تگ یا برچسب استایل استفاده کنیم برچسب استایل زیر مجموعه ای از تگ هد است. برای این کار می توان از کد زیر استفاده کرد:
HTML:
<html>
<head>
<style>
h1 {font-family:Cooper};
</style>
</head>

<body>
<h1>PersianBax Is The Best!</h1>
</body>
</html>

در این کد از فونت Cooper به صورت پیشفرض استفاده شده است نام فونت مورد نظر را با فونتCooper جایگزین کنید. بعد اعمال این تغییرات باید در فونت شما تغییراتی ایجاد شده باشد.

1366052639552.png

این از فونت شما! حال شاید بخواهید کمی رنگ آن را تغییر دهید. برای این کار باز هم باید در تگ استایل از دستور کالر یا رنگ استفاده کرد.
یک نمونه از کد مربوطه:
HTML:
<html>
<head>
<style>
h1 {font-family:cooper; color:blue;}
</style>
</head>

<body>
<h1>PersianBax Is The Best!</h1>
</body>
</html>

توجه داشته باشید که در تمامی تگ ها بعد از اعمال دستور از علامت ; استفاده کنید.
در کد بالا به عنوان پیشفرض از رنگ آبی استفاده شده است. می توانید این رنگ را به صورت کتبی و به نام یعنی blue بنویسید یا این که کد رنگ آن را جایگزین کنید یعنی 000099# (علامت #فراموش نشود)
جهت پیدا کردن کدهای رنگ ها می توانید از ابزار فوتوشاپ یا این که از وبسایت HTML Color Picker استفاده کنید.
1366052639061.png


خسته شدید؟ اگر خسته اید به خود تا جلسه بعد استراحت بدهید و یک لیوان چای نوش جان کنید. اما اگر نه بهتر است با آموخته های خود بازی کنید شاید چیز جدیدی کشف کردید! کسی چه می داند!:هه
بدرود
 
Technical

Technical

لاغر تالار
Banned
پاسخ : [دوره] آموزش اچ تی ام ال | اختصاصی پرشین بکس

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

ممنون!
 
Technical

Technical

لاغر تالار
Banned
پاسخ : [دوره] آموزش اچ تی ام ال | اختصاصی پرشین بکس

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

حال برویم سراغ آموزش:
در جلسات پیش آموختیم که چگونه یک هدینگ بسازیم چگونه فونتش را عوض کنیم و چگونه برایش یک رنگ اختصاصی انتخاب کنیم. حال برای هر هدینگ یا عنوان نیازمند یک پاراگراف یا بند هم هست. بنابراین باید یک بند ایجاد کنیم. جهت ساخت یک پاراگراف از حرف اختصاری p استفاده می کنیم. حالا برای ایجاد یک بند جدید می توانیم همانند کد زیر عمل کنیم.
HTML:
<html>
<head>
<style>
h1 {font-family:cooper; color:blue;}
</style>
</head>

<body>
<h1>PersianBax Is The Best!</h1>
<p> Just Try Only Once You Will Like It! </p>
</body>
</html>
همانند یک هدینگ متن مورد نظر خود را در بین <p> و <p/> بنویسید اما اگر این کد را اعمال کنید متوحه می شوید که اندازه آن از هدینگ شما کوچکتر است. چون هرچه باشد عنوان باید از پاراگراف متمایز باشد.

1366269310472.png
خب حالا از شما می خواهم که همانگونه که در جلسه قبلی آموختید رنگ بند را به قرمز و فونت آن را به Impact تغییر دهید. سعی کنید که این کار را خودتان انجام دهید تا کمی هم تمرین داشته باشید.
حال باید صفحه شما شبیه تصویر باشد: (کد ها را قایم کردم :دی)

1366269310683.png

خب حالا شاید برایتان این مشکل پیش آمده باشد که اندازه هدینگ اندازه دلخواه شما نیست. پس برای این که اندازه آن را تغییر دهیم از دستور فونت سایز استفاده می کنیم.در این قسمت به طور پیشفرض به 50 تغییر داده شده است:
HTML:
<html>
<head>
<style>
h1 {font-family:cooper; color:blue; font-size:50px;}
p  {font-family:Impact; color:red;}
</style>
</head>

<body>
<h1>PersianBax Is The Best!</h1>
<p> Just Try Only Once You Will Like It! </p>
</body>
</html>

واحد فونت شما می تواند هم px(که در ورد استفاده می شود) هم می تواند % باشد و هم em می تواند باشد. لازم به ذکر است که em 2.5 = 40px خب این هم از اندازه.

1366269310261.png

خب دیگر چه می خواهید؟ شاید یکی دیگر از نیاز های شما این باشد که بخواهید متن خود را هم تراز کنید. بنابر این در این کار از دستور Align استفاده می کنیم.
HTML:
<html>
<head>
<style>
h1 {font-family:cooper; color:blue; font-size:40px; text-align:center;}
p  {font-family:Impact; color:red;}
</style>
</head>

<body>
<h1>PersianBax Is The Best!</h1>
<p> Just Try Only Once You Will Like It! </p>
</body>
</html>

در مقابل دستور تراز یا align سه گزینه می توانیم داشته باشم: چپ(left) راست (rihgt) یا این که وسط (center) که در اینحا به طور پیشفرض از گزینه وسط استفاده شده است.

1366269310784.png
:10003:خب احساس می کنم که دیگه خسته شدید. فعلا بدرود تا جلسه بعد.
 
متن زیبا برای فرزند پسر - متن زیبا برای فرزند دختر - متن ادبی درباره برادر - کابل شارژر سامسونگ- خرید قاب گوشی- جواب آمیرزا- اسکرین شات سامسونگ - فلش کردن گوشی - اروس دیجیتال - قاب گوشی A54 - قاب گوشی s23 ultra -
بالا