آموزش HTML (قسمت ۵)

آموزش-html-قسمت-۵

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

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

کدهای HTML : 

- هدر سایت -->
<div class="header">
    سایت آموزشی دکتر کد
</div>

<!-- بخش مطالب -->
<div class="main">
    <div class="right">
        <h5> دسته بندی آموزش ها </h5>
        <ul>
            <li><a href="http://dr-code.ir/learning/html">آموزش HTML</a></li>
            <li><a href="http://dr-code.ir/learning/css">آموزش CSS</a></li>
            <li><a href="http://dr-code.ir/learning/jquery">آموزش JQuery</a></li>
        </ul>
    </div>

    <div class="content">
        <h4> قالب ساده HTML‌ </h4>
        <p>
            سلام.می خوام آموزش زبان نشانه گذاری <b>HTML</b> رو شروع کنم و از سطح ابتدایی تا پیشرفته ببرم جلو تا افرادی که نیاز به یادگیری این زبان جذاب و کاملا کاربردی دارند از این مطلب شروع کنن و یاد بگیرن.زبان HTML ابتدایی ترین زبانی است که یک طراح وب باید بلد باشد زیرا ساختار اصلی هر سایتی با این زبان پیاده سازی می شود.
        </p>
    </div>

    <div class="left">
        <h5> آموزش های جدید </h5>
        <ul>
            <li><a href="http://dr-code.ir/post/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-css-%D9%82%D8%B3%D9%85%D8%AA%DB%B4">آموزش CSS (قسمت۴)</a></li>
            <li><a href="http://dr-code.ir/post/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-jquery-%D9%82%D8%B3%D9%85%D8%AA-%DB%B7">آموزش JQuery (قسمت ۷)</a></li>
            <li><a href="http://dr-code.ir/post/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-css-%D9%82%D8%B3%D9%85%D8%AA%DB%B3">آموزش CSS (قسمت۳)</a></li>
            <li><a href="http://dr-code.ir/post/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-jquery-%D9%82%D8%B3%D9%85%D8%AA-%DB%B6">آموزش JQuery (قسمت ۶)</a></li>
            <li><a href="http://dr-code.ir/post/%D8%A2%D9%85%D9%88%D8%B2%D8%B4-css-%D9%82%D8%B3%D9%85%D8%AA-%DB%B2">آموزش CSS (قسمت ۲)</a></li>
        </ul>
    </div>
</div>

<div class="footer">
        © تمامی حقوق طراحی و محتوای سایت مختص دکتر کد می باشد.
</div

کدهای CSS : 

<!-- استایل درونی -->
<style>
    body{
        padding: 0px;
        margin: 0px;
        color: #a0a0a0;
    }
    * {
        box-sizing: border-box;
    }
    .header{
        background-color: #F1F1F1;
        padding: 25px;
        font-size: 30px;
        text-align: center;
    }

    .main{
        margin-top: 10px;
        overflow:auto;
        direction: rtl;
        text-align: right;
    }

    .main .right{
        background-color: #F1F1F1;
        float: left;
        width: 20%;
        padding: 5px;
        font-size: 20px;
        text-align: right;
    }

    .main .right h5{
        text-align: center;
    }

    .main .right li a{
        text-decoration: none;
    }

    .main .right li{
        font-size: 15px;
    }

    .main .content{
        width: 60%;
        padding: 10px;
        float: left;
        text-align: justify;
    }

    .main .left{
        width: 20%;
        float: left;
        padding: 5px;
        font-size: 20px;
        background-color: #F1F1F1;
    }
    .main .left h5{
        text-align: center;
    }

    .main .left ul{
        list-style: none;
        padding-right: 0px;
    }

    .main .left li a:hover{
        background-color: #e0e0e0;
    }

    .main .left li a{
        text-decoration: none;
        font-size: 15px;
        color: #2980B9;
        padding: 3px;
        margin-top: 5px;
        display: block;
        background-color: white;
        transition: 0.5s;
    }

    .footer{
        padding: 15px;
        text-align: center;
        font-size: 18px;
        background-color: #F1F1F1;
        margin-top: 10px;
    }

    @media only screen and (max-width:620px) {
        /* برای نمایش صحیح در موبایل */
        .main .content, .main .right, .main .left {
            width:100%;
        }
    }
</style>

در کدهای CSS‌ بالا ممکنه کد media@ براتون نامفهوم باشد. از این کد برای مدیریت اندازه صفحات مختلف استفاده می شود.مثلا ما تعریف کردیم زمانی که اندازه صفحه نمایش کوچک تر از 620px شود، منوها و بخش مطلب اصلی به صورت تمام صفحه شود.در ادامه آموزش های CSS به این کد اشاره خواهم کرد.


► قسمت قبلی قسمت بعدی ◄
خودتان امتحان کنید

آموزش های مرتبط :



نظرات کاربران

نظر شما؟