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

S

siarnold

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

لطفا ورژن html روکه آموزش میدید ذکر کنید چون ورژن اول html نیست و پیشرفته تره
 
M.Bagheri

M.Bagheri

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

با اجازه استارتر
سیاوش جان این اموزش مربوط به ورژن چهار میشه
 
Technical

Technical

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

درود. حال به سراغ جلسه پنجم می رویم.

بازهم این جلسه درمورد متن هست. اما این جلسه می خواهیم کاری انجام بدهیم که متن ما توجه دیگران را جلب کند. در جلسات قبلی با نحوه رنگی کردن متن و تغییر اندازه و تراز کردن متن را آموختیم ولی بازهم برای جلب توجه بیشتر به دستور های دیگری نیاز داریم. در این جلسه می خواهیم به تزیین متن خود بپردازیم. از کدی که در جلسه قبل آن را آماده کردیم استفاده می کنیم.
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>

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

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

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

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

1366359982262.png

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

شاید آندرلاین برای شما تکراری باشد پس به شما گزینه اورلاین (Overline) را پیشنهاد می کنم. این دستور در بالای متن مورد نظر شما خط می کشد. حالا برای امتحان این دستور نیاز به یک متن دیگر داریم. بنابراین باید به بند خود یک کلاس بدهیم.
جهت ایجاد یک کلاس می توانیم همانند کد زیر پیش برویم:

HTML:
<html>
<head>
<style>
h1 {font-family:cooper; color:blue; font-size:40px; text-align:center;}
p  {font-family:Impact; color:red; text-decoration:underline;}
p.overline {color:green; text-decoration:overline;}
</style>
</head>
 
<body>
<h1>PersianBax Is The Best!</h1>
<p> Just Try Only Once You Will Like It! </p>
<p class="overline">Just Sign-Up & Enjoy It! </p>
</body>
</html>
با ایجاد یک کلاس برای بند این بند از دستورات بند اصلی استفاده می کند. یعنی این که تمامی دستورات بر این بند هم اعمال می شوند. غیر از این که بر روی آن تغییراتی انجام دهید. برای مثلا در بند قبلی رنگ را به قرمز تغییر دادیم پس باید بند اورلاین هم قرمز رنگ می شد اما ما چون به صورت جدا به آن گفته بودیم که سبز شو او هم از دستور آخر پیروی کرده است. بنابراین رنگ آن سبز است. کلاس ها می توانند هر نامی به خود بگیرند و این نام می تواند حتی نام خودتان هم باشد. کلاس خود را با یک نقطه در جلوی p می گذاریم. و دستورات مربوطه را می نویسیم. و وقتی که می خواهیم در آن متنی بنویسیم در جلوی p کلمه کلاس (به زبان انگلیسی )و سپس مساوی و نام کلاس را در بین " " می گذاریم.

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


1366359982353.png


شاید اگر بخواهید که متنی را تکذیب کنید روی آن خط بکشید یا این که اگر یک فروشگاه دارید و می خواهید شکسته شدن قیمت ها را نشان دهید روی قیمت قبلی خط بکشید بنابراین برای این کار از دستور Line-through استفاده می کنیم. یک کلاس جدید با نام line-through درست کنید ،رنگش را به سیاه تغغیر دهید و تراز آن را وسطچین کنید. سپس در دکوریشن آن از line-through استفاده کنید.

HTML:
<html>
<head>
<style>
h1 {font-family:cooper; color:blue; font-size:40px; text-align:center;}
p  {font-family:Impact; color:red; text-decoration:underline;}
p.overline {color:green; text-decoration:overline;}
p.line-through {text-align:center; text-decoration:line-through; color:black;}
</style>
</head>

<body>
<h1>PersianBax Is The Best!</h1>
<p> Just Try Only Once You Will Like It! </p>
<p class="overline">Just Sign-Up & Enjoy It! </p>
<p class="line-through">This Text Is Not True!</p>

</body>
</html>

خب حالا باید خطی را ببینید که از وسط متن شما عبور کرده است!
1366359982131.png


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


 
آخرین ویرایش:
Technical

Technical

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

درود! ورود شما را به جلسه ششم خوش آمد می گویم!

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

بعد از خط بالا خط پایین و خط وسط تنها یک دستور باقی ماند! (البته من این ها را می شناسم) و آن ها هم یک دستور اختصاصی برای

چشمک زدن

است. بله چشمک زدن. با این کد متن شما چشمک می زدند! البته متاسفانه این دستور تنها با مرورگرهای فایرفاکس و اپرا سازگاری دارد. حال به سراغ این دستور برویم. برای استفاده از این گزینه از blink استفاده می کنیم.
HTML:
<html>
<head>
<style>
h1 {font-family:cooper; color:blue; font-size:40px; text-align:center;}
p  {font-family:Impact; color:red; text-decoration:underline;}
p.overline {color:green; text-decoration:overline;}
p.line-through {text-align:center; text-decoration:line-through; color:black;}
p.blink {font-size:30px; text-decoration:blink;}
</style>
</head>

<body>
<h1>PersianBax Is The Best!</h1>
<p> Just Try Only Once You Will Like It! </p>
<p class="overline">Just Sign-Up & Enjoy It! </p>
<p class="line-through">This Text Is Not True!</p>
<p class="blink"> Join Us NOW!</p>

</body>
</html>

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

1366734295361.png


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




 
Technical

Technical

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

تصمیم بر این گرفتم که جلسات را کوتاه کنم و در هر جلسه یک نکته آموزش بدم. درضمن منتظر این هستم که کسی غیر من هم در اینجا سخنی بگوید و انتقادی کند و پیشنهادی دهد و مارا یاری کند.
 
Pb.GraphisT

Pb.GraphisT

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

امیر جان نظر شخصی من ایناست :

1. HTML 4 خیلی خیلی قدیمی و بدرد نخور هست
2. آموزش HTML توی نت پره، برای همین به جای HTML یه زبان دیگه رو یاد بده
3. HTML5 خیلی عالیه اگه بتونی یاد بدی
4. به نظر من آموزش هارو بخش بندی کن و توی هر بخش به چیزی بگو مثلا :

مثلا یک تاپیک بساز فقط در مورد تگ ها صحبت کن ولی آموزش نده و فقط توضیح بده !
بعد یه تاپیک درست کن در مورد تگ های Text ها (<b> , <i> , ....)
بعد یه تاپیک درست کن کلا در مورد عکس گذاری و فیلم گذاری صحبت کن و ....
 
Technical

Technical

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

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

Technical

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

خوشحال شدم از پیشنهادتون! خیلی ممنون! :دی
 
Technical

Technical

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

درود! امروز می خواهیم بدانیم که چگونه به صفحه خود یک پس زمینه (BackGround) بگذاریم. برای این کار باید از دستور BackGround استفاده کنیم...


برای این کار می تونیم از کد background-image که در تگ استایل بادی (بدن) قرار دارد استفاده کنیم.
HTML:
body {background-image:url('http://up.persianbax.ir/uploads/1366980461891.jpg');}

می توانید به جای لینک موجود از لینک تصویر خودتان استفاده کنید. البته اگر از کد جلسات قبلی استفاده کنید باید همچین کدی داشته باشید:
HTML:
<html>
<head>
<style>
h1 {font-family:cooper; color:blue; font-size:40px; text-align:center;}
p  {font-family:Impact; color:red; text-decoration:underline;}
p.overline {color:green; text-decoration:overline;}
p.line-through {text-align:center; text-decoration:line-through; color:black;}
p.blink {font-size:30px; text-decoration:blink;}
body {background-image:url('http://up.persianbax.ir/uploads/1366980461891.jpg');}
</style>
</head>

<body>
<h1>PersianBax Is The Best!</h1>
<p> Just Try Only Once You Will Like It! </p>
<p class="overline">Just Sign-Up & Enjoy It! </p>
<p class="line-through">This Text Is Not True!</p>
<p class="blink"> Join Us NOW!</p>

</body>
</html>

و همیچین صفحه ای!

1367077401372.png


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

2. از دستور مخصوص استفاده کنید.

که البته من به شما راه دوم را پیشنهاد می کنم!! :چشمک:چشمک
برای این کار از دستور background-size استفاده می کنیم.
و همچنین از گزینه کاور (Cover)
HTML:
background-size:cover;

یا این که کد کامل:
HTML:
<html>
<head>
<style>
h1 {font-family:cooper; color:blue; font-size:40px; text-align:center;}
p  {font-family:Impact; color:red; text-decoration:underline;}
p.overline {color:green; text-decoration:overline;}
p.line-through {text-align:center; text-decoration:line-through; color:black;}
p.blink {font-size:30px; text-decoration:blink;}
body {background-image:url('http://up.persianbax.ir/uploads/1366980461891.jpg'); background-size:cover;}
</style>
</head>

<body>
<h1>PersianBax Is The Best!</h1>
<p> Just Try Only Once You Will Like It! </p>
<p class="overline">Just Sign-Up & Enjoy It! </p>
<p class="line-through">This Text Is Not True!</p>
<p class="blink"> Join Us NOW!</p>

</body>
</html>

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


1367077400971.png

بدرود!!

 
متن زیبا برای فرزند پسر - متن زیبا برای فرزند دختر - متن ادبی درباره برادر - کابل شارژر سامسونگ- خرید قاب گوشی- جواب آمیرزا- اسکرین شات سامسونگ - فلش کردن گوشی - اروس دیجیتال - قاب گوشی A54 - قاب گوشی s23 ultra -
بالا