رفتن به مطلب
انجمن تیم امنیتی گارد ایران

ارسال های توصیه شده

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

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

𝓰𝓾𝓪𝓻𝓭𝓲𝓻𝓪𝓷

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

 

dcsm63a-a1bf65bb-71f6-40ed-93c5-63b696059ef7.gif.f1035f5a7259e29c9b153a241b728ee7.gif

 

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

جلسه ی اول

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

1- ++Notepad

2-PhpStorm

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

 

1.png.86b9e3974c489e7cc0f17a77c8684091.png

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

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Title</title>
</head>
<body>

</body>
</html>

در قسمت تگ

<title>Title</title>

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

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

<title>Guardiran</title>

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

2.png.d28a09900f5b26b025e6a3f0a98993c9.png

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

<body>

</body>

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

 

<body>
Guardiran Security Team
</body>

3.png.7cbaa887845423a0f8b6013153505ca3.png

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

جلسه ی دوم

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

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

 

<body>
<h1></h1>
</body>

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

 

<body>
<h1>  آموزش برنامه نویسی HTML</h1>
</body>

4.png.5d18ff62af2f85245040be48fc8f5266.png

 

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

 

<body>
<h1>  آموزش برنامه نویسی HTML</h1>
<h2>نحوه ی ساخت قالب </h2>
</body>

5.png.28c7b555cb3fd992dba96918ea24a2cc.png

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

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

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

<p></p>
<body>
<h1>  آموزش برنامه نویسی HTML</h1>
<p> آموزش ها رو قدم به قدم جلو خواهیم برد </p>
<h2>نحوه ی ساخت قالب </h2>
</body>

6.png.82a944a8105573ef971e49823811436c.png

تگ <br>

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

<body>
<h1>  آموزش برنامه نویسی HTML</h1>

<h2>نحوه ی ساخت قالب </h2>
<p> Test <br/>
I love Guardiran For Everything</p>
</body>

7.png.23d61628cbbb6b5c917aaa934ae10967.png

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

جلسه ی سوم

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

 

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

<head>
<title>Guardiran</title>
   <style>
       body {
           direction: ;


       }
   </style>
</head>

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

 

<head>
<title>Guardiran</title>
   <style>
       body {
           direction: rtl;


       }
   </style>
</head>
<body>
<h1> آموزش برنامه نویسی </h1>
<p> سلام خدمت کاربران محترم گاردایران </p>
</body>

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

1.thumb.png.09fe89a80440bdd33263d68f2f0dfefc.png

 

 

 

 

 

 

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

<head>
<title>Guardiran</title>
   <style>
       body {
           direction: rtl;

       }
       p{
           font-size: 25px;
       }


   </style>
</head>
<body>
<h1> آموزش برنامه نویسی </h1>
<p> سلام خدمت کاربران محترم گاردایران </p>
</body>

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

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

   <style>
       body {
           direction: rtl;

       }
       p{
           font-size: 25px;
           font-weight: bold;
       }


   </style>

1.thumb.png.aaa95ac00e3ffb0ceb538f76dd10a146.png

 

 

 

 

 

 

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

<img src="mesal.jpg">

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

بدین شکل

1.png.2365b11f21d24511f2efbd0a4de9d9aa.png

 

1.png.6c4d835cf5a6c628d92768628167ca11.png

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

width="100"

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

<img src="img/guardiran.ico" width="100">

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

1.png.897b4429ecc5debc524fe79ca4c15130.png

 

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

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

<img src="img/guardirann.ico" width="100" alt="تصویر خراب است "></img>

1.png.6cea62098c7aec47b2126fac849e5871.png

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

جلسه ی چهارم

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

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

<img src="img/2.png" width="100" title="تصویر آزمایشی">

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

<img src="img/2.png" width="100" title="تصویر آزمایشی"></img>
<head>
<title>Guardiran</title>
   <style>
       body {
           direction: rtl;

       }
       p{
           font-size: 25px;
           font-weight: bold;
       }
   </style>
</head>
<body>
<img src="img/2.png"  title="تصویر آزمایشی"></img>
<h1> آموزش لینک و عکس </h1>
<p> سلام خدمت کاربران محترم گاردایران </p>

</body>

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

1.png.06906cd223b408761afc7016e94abfc1.png

 

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

<a href=""></a>

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

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

<a href="test.html"></a>

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

<a href="test.html"> لینک آموزشی</a>

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

 

 

 

 

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

برای مثال

 

<a href="https://guardiran.org/" target="_blank">لینک آموزشی</a>

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

 

 

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

<a href="https://guardiran.org/" target="_blank"><img src="mesal"></img></a>

 

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

جلسه پنجم

مبحث تگ id , div

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

<body>
<div>
<img src="img/2.png"  title="تصویر آزمایشی"></img>
<h1> آموزش لینک و عکس </h1>
<p> سلام خدمت کاربران محترم گاردایران </p>
<a href="https://guardiran.org/" target="_blank"><img src="img/guardiran.ico"></img></a>
</div>
</body>

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

<body>
<div>
<img src="img/2.png"  title="تصویر آزمایشی"></img>
<h1> آموزش لینک و عکس </h1>
<p> سلام خدمت کاربران محترم گاردایران </p>
<a href="https://guardiran.org/" target="_blank"><img src="img/guardiran.ico"></img></a>
</div>
<div>
    <h2> بخش شماره 2</h2>
    <p>ای بخش برای آموزش است </p>
    
    
</div>
</body>

2.png.07789269e54898858cb14f51288079ea.png

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

<div id="Header1">
</div>
<div id="main1">
</div>

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

<body>
<div id="Header1">
<img src="img/2.png"  title="تصویر آزمایشی"></img>
<h1> آموزش لینک و عکس </h1>
<p> سلام خدمت کاربران محترم گاردایران </p>
<a href="https://guardiran.org/" target="_blank"><img src="img/guardiran.ico"></img></a>
</div>
<div id="main1">
    <h2> بخش شماره 2</h2>
    <p>ای بخش برای آموزش است </p>


</div>
</body>

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

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
        PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Guardiran</title>
    <style>
        #Header1{

            height: 400px;
            background-color: chartreuse;
        }
        body{
            direction: rtl;
        }
        #main1{
            height: 400px;
            background-color: aqua;


        }
        p{
            font-weight: bold;


        }
    </style>
</head>
<body>
<div id="Header1">
    <img src="img/2.png"  title="تصویر آزمایشی"></img>
    <h1> آموزش لینک و عکس </h1>
    <p> سلام خدمت کاربران محترم گاردایران </p>
    <a href="https://guardiran.org/" target="_blank"><img src="img/guardiran.ico"></img></a>
</div>
<div id="main1">
    <h2> بخش شماره 2</h2>
    <p>ای بخش برای آموزش است </p>


</div>
</body>

</html>

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

        #Header1{

            height: 400px;
            background-color: chartreuse;
        }
        #main1{
            height: 400px;
            background-color: aqua;


        }

2.thumb.png.3cbfcff85e7fd7e6ffe687b16c8a83d0.png

 

 

 

 

 

 

 

 

 

 

 

 

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

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

 <p class="" > </p>

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

2.png.e049803b07d9de3ef96300b5bceaad46.png

 

برای مثال

        .p1{
            font-weight: bold;
           background-color: blue;

        }

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

 

2.png.6e35f22227ceb86b191ada16e4ce4e0e.png

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

جلسه ی ششم

 

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

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

<p>Amozeshe barname <b>nevisi</b> HTML baraie karbarane Guardiran</p>

 

1.png.c5f1c01c55da98f62ecbcd673ae2b629.png

دستور بعدی

<strong></strong>

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

<p>Amozeshe barname <strong>nevisi</strong> HTML baraie karbarane Guardiran</p>

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

<i></i>

 

<em></em>
<p>Amozeshe barname <i>nevisi</i> HTML <em>baraie</em> karbarane Guardiran</p>

1.png.2d8bb6a105dac59acfc4074131a287ce.png

 

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

 <mark></mark> 
<p>Amozeshe barname <mark>nevisi</mark> HTML <mark>baraie</mark> karbarane Guardiran</p>

 

1.png.c12e652b42d9777f37fb0720117de954.png

 

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

 

دستور بعدی

<p>Amozeshe barname <sub>nevisi</sub> HTML <sup>baraie</sup> karbarane Guardiran</p>

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

 

1.png.936b25f0de351dcad2612ac99ae81d8a.png



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


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

 

<ul>

<li></li>
<li></li>
<li></li>

</ul>

 

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

 

1.png.d01ef1ea3f51e0ac690225b96fbb945f.png

 

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

<ul style="list-style: square">

    <li>Coffe</li>
    <li>tea</li>
    <li>water</li>
    <li>cake</li>




</ul>

که استایل ها زیادی هست که در ادامه آموزش ها به صورت جزئی تر واردشون خواهیم شد daroyto-27598e3d-15fb-4b42-8000-db964c6a7ac1.gif.5a756a8ea9a6dfbaf6719aa4ab98daaa.gif

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

جلسه ی هفتم

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

<ol>

    <li>Coffe</li>
    <li>tea</li>
    <li>water</li>
    <li>cake</li>




</ol>

Untitled.png.2a8f6a858c427b54904d960c9b955690.png

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

<dl>

    <dt>Coffe</dt>
    <dd>a</dd>
    <dd>aaaaa</dd>
    <dt>cake</dt>
    <dd>bbbbbbb</dd>
    <dd>cccccccc</dd>
    <dd>ccccccccccccc</dd>




</dl>

 

Untitled.png.4c4a2a3ef77e9d3c999877ae1e426e0b.png

 

 

 

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

<caption> </caption> 
<table border="1">
    <caption>آزمایش </caption>
    <thead>

    <tr>
        <td>1</td>
        <td>ali</td>
        <td>20</td>
    </tr>
    <tr>
        <td>2</td>
        <td>mohammad</td>
        <td>18</td>
    </tr>
    <tr>
        <td>3</td>
        <td>reza</td>
        <td>15</td>
    </tr>


    </thead>



</table>

Untitled.png.f55f66769923a133ffc9df0ba0b33daa.png

 

 

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

<q></q>
<p>matlabe mohem : <q>in Ghesmat baraie motore jostojogar ast tebghe in tag</q> </p>

 

تگ بعدی تگ

<abbr></abbr>

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

<abbr title="Guardiran Security Team">GST</abbr>

 

Untitled.png.dc61e3b4990436f84c92ae19fbb3a7b9.png

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

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

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

ایجاد یک حساب کاربری

برای حساب کاربری جدید در سایت ما ثبت نام کنید. عضویت خیلی ساده است !

ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید

ورود به حساب کاربری
 اشتراک گذاری

انجمن تیم امنیتی گارد ایران

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

شبکه های اجتماعی

×
×
  • اضافه کردن...