رفتن به مطلب
بازگشایی انجمن! ×
GuardIran

پست های پیشنهاد شده

𝕚𝕟 𝕥𝕙𝕖 𝕟𝕒𝕞𝕖 𝕠𝕗 𝕘𝕠𝕕

با سلام و احترام خدمت تیم محترم

𝓰𝓾𝓪𝓻𝓭𝓲𝓻𝓪𝓷

 در این تاپیک آموزش  Html,Css را قرار خواهم داد ودر در دوره های بعدی با html5,css3 و جی کوئری ، بوت استرپ 4 ، پایگاه داده mysql و زبان برنامه نویسی php آشنا خواهید شد پس لطفا در تاپیک ها اسپم وارد نکنید و برای ادامه آموزش ها تاپیک ها را بپسندید

 

This is the hidden content, please

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


جلسه ی اول

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

1- ++Notepad

2-PhpStorm

که پیشنهاد بنده شماره ی 2 هستش برنامه را نصب کنید و یک پروژه HTML File ایجاد کنید

 

This is the hidden content, please

بعد از ساخت پروژه Base کار رو با توجه به کتابخانه های HTML واستون آماده در اختیارتون خواهد گذاشت به این صورت حالا هر دستور به چه معناست توضیح خواهم داد !

This is the hidden content, please

در قسمت تگ

<title>Title</title>

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

برای مثال اگر شما

<title>Guardiran</title>

بنویسید و اجرا کنید به این شکل خواهد بود

This is the hidden content, please

و برای نمایش مطالب درون صفحه باید کدهاتونو درون تگ

<body>

</body>

قرار بدید برای مثال :

 

<body>
Guardiran Security Team
</body>

This is the hidden content, please

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


جلسه ی دوم

در این قسمت میریم سراغ دستورات HTML

دستور اول ------->>    <h1></h1> هدینگ هستش که از h1 تا h6

 

This is the hidden content, please

بسیار خب حالا این هدینگ چی هستش !؟ شما فرض کنید قصد دارید یک مقاله ای بنویسید عنوان شما به این صورت خواهد شد

 

This is the hidden content, please

This is the hidden content, please

 

حالا هر چه شما زیر عنوان های بیشتر قصد داشته باشید باید هدینگ ها را بیشتر کنید

 

This is the hidden content, please

This is the hidden content, please

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

یادتون باشه این <> تگ و </> تگ بسته

حال میریم سراغ پاراگراف که متن های عادی درونش نوشته میشود بدین صورت

This is the hidden content, please
This is the hidden content, please

This is the hidden content, please

تگ <br>

هر جا قرار بگیرد قطع خواهد کرد و وارد خط بعدی میشود توجه داشته باشید در ورژن بالاتر </br> خواهد بود به مثال بعدی توجه کنید

This is the hidden content, please

This is the hidden content, please

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


جلسه ی سوم

افزودن لینک و عکس

 

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

This is the hidden content, please

که نحوه ی چیدمان را برای ما تنظیم خواهد کرد که فقط تا این جا دو گزینه برای ما اهمیت دارد

 

This is the hidden content, please

rtl به معنای راست چین بودن است که با توجه به کد بدین معناست که قسمت body به صورت راست چین باشید

This is the hidden content, please

 

 

 

 

 

 

برای افزایش فونت از دستور

This is the hidden content, please

اگر توجه داشته باشید من در قسمت p قرار دادم که بدین معناست فونت آن قسمتی که در نظر دارید تغییر خواهد کرد

برای تو پر شدن از این دستور استقاده کنید

This is the hidden content, please

This is the hidden content, please

 

 

 

 

 

 

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

This is the hidden content, please

برای راحتی کار میتونید تصویر رو کنار فایل html خود قرار بدید وارد برنامه بشید  و در قسمت "  " Spacebar + ctrl را بزنید تا آدرس را مشاهده کنید

بدین شکل

This is the hidden content, please

 

This is the hidden content, please

برای تغییر سایز تصویر

This is the hidden content, please

برای مثال بدین صورت وارد میکنید

This is the hidden content, please

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

This is the hidden content, please

 

که به معنای خطای برنامه نویسی است و چنین تصویری وجود ندارد

حال برای راه حل چنین چیزی که اگر تصویر خراب یا وجود نداشتنش در صفحه یک تگ برای img وجود دارد که اگر زمانی تصویر خراب شد نوشته ای به نمایش گذاشته شود

This is the hidden content, please

This is the hidden content, please

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


جلسه ی چهارم

در درس قبل یاد گرفتید که چطور میشه تصویری را در صفحه قرار داد و همین طور تغییر سایز و جایگزین

حالا نحوه ی درج عنوان برای تصویر به این شکل هستش بعد از تصویر کد title را قرار میدهید و در بین "" عنوانتون برای مثال

This is the hidden content, please

یادتون باشه در آخر باید تگ رو ببندید

This is the hidden content, please
This is the hidden content, please

حالا زمانی که روی عکس قرار بگیرید عنوان نمایش داده میشود

This is the hidden content, please

 

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

This is the hidden content, please

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

به فرض مثال اگر شما در "" ----> test.html قرار بدید با کلیک بر روی اون لیک وارد صفحه ای خواهید شد که آدرسشو وارد کردین

This is the hidden content, please

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

This is the hidden content, please

 ویدئوی نمایشی :

 

 

 

 

و همچنین برای قرار  دادن آدرس سایت فقط کافیه به جای "" ادرس سایت را قرار دهید

برای مثال

 

This is the hidden content, please

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

 

 

در ضمن شما به جای لینک میتوانید تصویر نیز قرار دهید که با کلیک روی تصویر به صفحه ی دیگر بروید

This is the hidden content, please

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


جلسه پنجم

مبحث تگ id , div

برای دسترسی راحت تر بخش ها ما یک سری دسته بندی ها انجام میدهیم به  نام تگ div اگر مثال های قبلی را در نظر بگیرید و قصد داشته باشیم هر بخش مورد نظر را دسته بندی جداگانه قرار بدیم بدین صورت عمل میکنیم در تگ div بدین صورت

This is the hidden content, please

شما میتونید چندین بخش قرار بدین

This is the hidden content, please

This is the hidden content, please

نحوه ی نوشتن id نیز بدین شکل است

This is the hidden content, please

که اگر توجه کرده باشید نامی رو برای هر بخش در نظر گرفتم که این برای شما کاملا دلخواه هسش حالا بازم مثال میزنم که بهتر یاد بگیرید ! اگر مثال ثبل رو در نظر بگیرید و برای هر div یک id در نظر بگیریم به این شکل خواهد شد

This is the hidden content, please

خب حال برای درک بهتر شما از style استفاده میکنیم تا بتونیم یک مقدار تغییر در id های مورد نظرمون بدیم

This is the hidden content, please

اگر توجه کنید برای قسمت هدر تغییر اندازه و تغییر پس زمینه قرار دادم با دستور زیر

This is the hidden content, please

This is the hidden content, please

 

 

 

 

 

 

 

 

 

 

 

 

حال یک نکته رو اینجا خدمتتون عرض کنم یک id را نمیتوان در یک صفحه چند بار ایجاد کرد !!!!

حال برای بهتر شدن کار به سراغ کلاس خواهیم رفت بدین طریق -->>برای مثال شما یک اسم باید برای کلاستون انتخاب کنید حالا من تگ <p> را انتخاب کردم شما هر تگی را میتوانید انتخاب کنید

This is the hidden content, please

به این مثال خوب دقت کنید یک اسم برای کلاس تگ <p> انتخاب میکنم و سپس با توجه به کلاسش بهش background cl میدم بدین شکل و نکته ی بعدی برای فرخوانی هر کلاس ابتدا باید . را وارد کنید بدین شکل

This is the hidden content, please

 

برای مثال

This is the hidden content, please

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

 

This is the hidden content, please

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


جلسه ی ششم

 

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

برای مثال دستور اول تگ باز و بسته ی <b></b> که برای تو پر کردن قسمتی از متن استفاده می شود

This is the hidden content, please

 

This is the hidden content, please

دستور بعدی

<strong></strong>

این دستور از لحاظ ظاهری خیلی شبیه دستور قبلی است ولی از نظر سئو سازی و شناخته شدن در گوگل بسیار اهمیت دارد !!!!

This is the hidden content, please

دستور بعدی وظیفه کج کردن تصویر را دارند ولی فرق دومی با اولین دستور i در قسمت سئو سازی است پس موارد با اهمیت را درون تگ های مهم قرار میدهند 

<i></i>

 

<em></em>
This is the hidden content, please

This is the hidden content, please

 

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

 <mark></mark> 
This is the hidden content, please

 

This is the hidden content, please

 

<small></small> برای کوچک کردن ****** <del></del> خط کشیدن روی متن ******<ins></ins> برای سئو سازی بسیار با اهمیت است و زیر متن خط میکشد 

 

دستور بعدی

This is the hidden content, please

که برای بالا و پایین آمورن متن به کار میرود بدین صورت

 

This is the hidden content, please



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


همونطور که میدونید ما در Word 3 جور لیست داریم که در HTML بدین صورت هستش

 

This is the hidden content, please

 

که <li> عناصر <ul> هستند برای مثال

 

This is the hidden content, please

 

اما ul یک ویژگی دیگر هم دارد که از CSS استفاده میکنیم دوستان فعلا من کلی آموزش میدم که با دستورات آشنا بشید بعد به صورت جزئی کار رو جلو خواهیم برد

This is the hidden content, please

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

This is the hidden content, please

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


جلسه ی هفتم

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

This is the hidden content, please

This is the hidden content, please

یک ویژگی دیگر وجود دارد که شما زیر مجموعه دارید

This is the hidden content, please

 

This is the hidden content, please

 

 

 

تگ بعدی کپشن هستش و در قسمت بالا قرار میگیرد برای مثال اگر جدولی داشته باشیم و قصد داشته باشیم یک کپشن واسش در نظر بگیرم بدین صورت خواهد بود

<caption> </caption> 
This is the hidden content, please

This is the hidden content, please

 

 

تگ بعدی که میخوام یادتون بدم در اصل سئو سازی بسیار با اهمیت هستش با توجه به دستورات گذشته و در شناسایی به مرورگر کمک خواهد کرد از دید کاربر ممکنه کاملا متن ساده به نظر بیاد ولی از قسمتی دیگر موتور جستوجوگر این مطلب رو شناسایی میکند

<q></q>
This is the hidden content, please

 

تگ بعدی تگ

<abbr></abbr>

برای درج منبع استفاده خواهد شد برای یادگیری بهتر یک مثال خواهم زد شما فرض کنید سایت گاردایران را با توجه به منبع بخواید خلاصه نویسی کنید بدین صورت عمل میکنید

This is the hidden content, please

 

This is the hidden content, please

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


جلسه ی هشتم

🤚خب در این جلسه ابتدا یک نگاه کلی به CSS میندازیم که آشنایی لازم برای آموزش های پیشرفته رو داشته باشید همونطور که میدونید HTML به عنوان یک ستون در سایت عمل خواهد کرد و تنها چیزی که میتونه زیبایی به ستون یا سایت شما بدهد استفاده از CSS هستش در جلسات گذشته اشاراتی به این موضوع کردم ولی کامل توضیح ندادم 💬

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

ولی روشی رو که در اینجا بهتون میگم هم کارتونو راحت تر میکنه و هم زیباتر میکنه ! شما ابتدا باید در همان پوشه ای که پروژه رو ایجاد کردید یک پوشه ی دیگر ایجاد کنید و درون آن یک فایل ایجاد کنید با پسوند css و هر نامی میتونید بهش بدید این نامک style باشه بهتره برای زیبایی و دقیق بودن کارتون بسیار خب همین کار رو به صورت ویدئو قرار میدم مراحلشو

 

 

 

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

This is the hidden content, please

rel از نوع style هستش  href هم به معنای آدرس دهی است که شما محلی که فایل CSS را قرار دادید باید آدرس دهی بکنید برای عمل کردن این موضوع میتونیم این کار رو انجام بدیم که به صورت ویدئویی قرار میدم

 

 

 

 

 

 

حالا فرض کنید مطالبی رو برای مثال وارد صفحه کردید برای مثال من چندین لینک رو قرار میدم و همچنین متن که کار با style را با توجه به فایلی که باز کردیم ببینید👁️‍🗨️

 

 

 

 

و نکته ی بعدی اگر بخواین به بخش خاصی استایل بدین میتونید از کلاس ها استفاده کنید که کارتون رو زیباتر خواهد کرد و همچنین برای فراخوانی هر کلاس ابتدا باید(((( . )))) را وارد کنید شما از id هم میتونید استفاده کنید که من هر دو رو واستون مثال خواهم زد بدین صورت

 

 

 

 

 

لینک به دیدگاه
به اشتراک گذاری در سایت های دیگر


به گفتگو بپیوندید

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

مهمان
ارسال پاسخ به این موضوع...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

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

×
×
  • ایجاد مورد جدید...