Создайте веб-страницу с помощью HTML и CSS

Опубликовано: 5 Января, 2022

Создать привлекательную страницу будет сложно для тех, кто не разбирается в CSS. Без использования CSS вы не сможете сделать веб-страницу более привлекательной. Итак, чтобы создать веб-страницу, нам нужно знать HTML и CSS. В этой статье основное внимание будет уделено реализации CSS. Чтобы создать веб-страницу, нам нужно сначала создать веб-структуру HTML.

Создание структуры: в этом разделе мы создадим простую структуру веб-страницы с помощью тегов <li> и <section>. Таким образом, будет создан простой интерфейс, который вы можете проверить, запустив следующий код.

HTML код:

html

 <!DOCTYPE html>
 < html >
 < head >
    < title >
        Simple web Development Template
    </ title >
 </ head >
 < body >
    < nav class = "navbar background" >
        < ul class = "nav-list" >
            < div class = "logo" >
                < img src = "logo.png" >
            </ div >
            < li >< a href = "#web" >Web Technology</ - ></ li > >Web Technology</ ></ li >
            < li >< a href = "#program" >C Programming</ a ></ li >
            < li >< a href = "#course" >Courses</ a ></ li >
        </ ul > 
        < div class = "rightNav" >
            < input type = "text" name = "search" id = "search" >
            < button class = "btn btn-sm" >Search</ button >
        </ div >
    </ nav > 
    < section class = "firstsection" >
        < div class = "box-main" >
            < div class = "firstHalf" >
                < h1 class = "text-big" id = "web" >
                    Web Technology
                </ h1 >
                
                < p class = "text-small" >
                    HTML stands for HyperText Markup
                    Language. It is used to design
                    web pages using a markup language.
                    HTML is the combination of Hypertext
                    and Markup language. Hypertext
                    defines the link between the web
                    pages. A markup language is used
                    to define the text document within
                    tag which defines the structure of
                    web pages. HTML is a markup language
                    that is used by the browser to
                    manipulate text, images, and other
                    content to display it in the required
                    format.
                </ p > 
            </ div >
        </ div >
    </ section > 
    < section class = "secondsection" >
        < div class = "box-main" >
            < div class = "secondHalf" >
                < h1 class = "text-big" id = "program" >
                    C Programming
                </ h1 >
                < p class = "text-small" >
                    C is a procedural programming language.
                    It was initially developed by Dennis
                    Ritchie as a system programming
                    language to write operating system.
                    The main features of C language include
                    low-level access to memory, simple set
                    of keywords, and clean style, these
                    features make C language suitable for
                    system programming like operating system
                    or compiler development.
                </ p > 
            </ div >
        </ div >
    </ section > 
    < section class = "section" >
        < div class = "paras" >
            < h1 class = "sectionTag text-big" >Java</ h1 > 
            < p class = "sectionSubTag text-small" >
                Java has been one of the most
                popular programming language
                for many years. Java is Object
                Oriented. However it is not
                considered as pure object oriented
                as it provides support for primitive
                data types (like int, char, etc) The
                Java codes are first compiled into byte
                code (machine independent code). Then
                the byte code is run on Java Virtual
                Machine (JVM) regardless of the
                underlying architecture.
            </ p > 
        </ div > 
        < div class = "thumbnail" >
            < img src = "img.png" alt = "laptop image" >
        </ div >
    </ section > 
    < footer class = "background" >
        < p class = "text-footer" >
            Copyright -All rights are reserved
        </ p > 
    </ footer >
 </ body >
 </ html > 

Мы использовали такие классы, как section , section-left, которые используются в CSS для придания правильного стиля, так как это сделает веб-страницу более привлекательной.

Дизайн CSS: мы будем использовать CSS, чтобы придать надлежащие дизайнерские эффекты веб-структуре HTML, которую мы создали в коде HTML. Самое сложное - вывести картинку в другом направлении. Считайте, что изображение находится в правильном направлении, а текст вместе с ним - в левом. Когда мы используем flex-direction: row-reverse , изображение справа будет показано слева, а текст - справа.

Код CSS:

CSS

 <style>
    * {
        margin : 0 ;
        padding : 0 ;
    }
    .navbar {
        display : flex;
        align-items: center ;
        justify- content : center ;
        position : sticky;
        top : 0 ;
        cursor : pointer ;
    }
    .background {
        background : black ;
        background-blend-mode: darken;
        background- size : cover;
    }
    .nav-list {
        width : 70% ;
        display : flex;
        align-items: center ;
    }
    .logo {
        display : flex;
        justify- content : center ;
        align-items: center ;
    }
    .logo img {
        width : 180px ;
        border-radius: 50px ;
    }
    .nav-list li {
        list-style : none ;
        padding : 26px 30px ;
    }
    .nav-list li a {
        text-decoration : none ;
        color : white ;
    }
    .nav-list li a:hover {
        color : grey;
    }
    .rightnav {
        width : 30% ;
        text-align : right ;
    }
    #search {
        padding : 5px ;
        font-size : 17px ;
        border : 2px solid grey;
        border-radius: 9px ;
    }
    .firstsection {
        background-color : green ;
        height : 400px ;
    }
    .secondsection {
        background-color : blue ;
        height : 400px ;
    }
    .box-main {
        display : flex;
        justify- content : center ;
        align-items: center ;
        color : black ;
        max-width : 80% ;
        margin : auto ;
        height : 80% ;
    }
    .firsthalf {
        width : 100% ;
        display : flex;
        flex- direction : column;
        justify- content : center ;
    }
    .secondhalf {
        width : 30% ;
    }
    .secondhalf img {
        width : 70% ;
        border : solid white 4px ;
        border-radius: 150px ;
        display : block ;
        margin : auto ;
    }
    .text-big {
        font-family : 'Piazzolla' , serif ;
        font-weight : bold ;
        font-size : 35px ;
    }
    .text- small {
        font-size : 18px ;
    }
    .btn {
        padding : 8px 20px ;
        margin : 7px 0 ;
        border : 2px solid white ;
        border-radius: 8px ;
        background : none ;
        color : white ;
        cursor : pointer ;
    }
    .btn-sm {
        padding : 6px 10px ;
        vertical-align : middle ;
    }
    .section {
        height : 400px ;
        display : flex;
        align-items: center ;
        justify- content : center ;
        max-width : 90% ;
        margin : auto ;
    }
    .section-Left {
        flex- direction : row-reverse;
    }
    .paras {
        padding : 0px 65px ;
    }
    .thumbnail img {
        width : 250px ;
        border : solid black 2px ;
        border-radius: 26px ;
        margin-top : 19px ;
    }
    . center {
        text-align : center ;
    }
    .text-footer {
        text-align : center ;
        padding : 30px 0 ;
        font-family : 'Ubuntu' , sans-serif ;
        display : flex;
        justify- content : center ;
        color : white ;
    }
 </style>

Окончательный код: мы объединим HTML и CSS, чтобы создать веб-страницу.

html

 <!DOCTYPE html>
 < html >
 < head >
    < title >Simple web Development Template</ title > 
    < style >
        * {
            margin: 0;
            padding: 0;
        }
        .navbar {
            display: flex;
            align-items: center;
            justify-content: center;
            position: sticky;
            top: 0;
            cursor: pointer;
        }
        .background {
            background: black;
            background-blend-mode: darken;
            background-size: cover;
        }
        .nav-list {
            width: 70%;
            display: flex;
            align-items: center;
        }
        .logo {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .logo img {
            width: 180px;
            border-radius: 50px;
        }
        .nav-list li {
            list-style: none;
            padding: 26px 30px;
        }
        .nav-list li a {
            text-decoration: none;
            color: white;
        }
        .nav-list li a:hover {
            color: grey;
        }
        .rightnav {
            width: 30%;
            text-align: right;
        }
        #search {
            padding: 5px;
            font-size: 17px;
            border: 2px solid grey;
            border-radius: 9px;
        }
        .firstsection {
            background-color: green;
            height: 400px;
        }
        .secondsection {
            background-color: blue;
            height: 400px;
        }
        .box-main {
            display: flex;
            justify-content: center;
            align-items: center;
            color: black;
            max-width: 80%;
            margin: auto;
            height: 80%;
        }
        .firsthalf {
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .secondhalf {
            width: 30%;
        }
        .secondhalf img {
            width: 70%;
            border: 4px solid white;
            border-radius: 150px;
            display: block;
            margin: auto;
        }
        .text-big {
            font-family: 'Piazzolla', serif;
            font-weight: bold;
            font-size: 35px;
        }
        .text-small {
            font-size: 18px;
        }
        .btn {
            padding: 8px 20px;
            margin: 7px 0;
            border: 2px solid white;
            border-radius: 8px;
            background: none;

                    
                                            Вопросы о Web технологиях 
                                            HTML
                                            CSS-Misc
                                            HTML-Misc
                                            CSS
                                    
РЕКОМЕНДУЕМЫЕ СТАТЬИTrovo: Путь к звездам стриминга в новом десятилетии
31 Октября, 2023
Топ сервисов для создания чат-бота в Телеграме
15 Июня, 2023
Что такое прокси IPv4 и что он умеет
14 Июня, 2023
Создайте адаптивную скользящую форму входа и регистрации с использованием HTML CSS и JavaScript
23 Февраля, 2023
Создайте адаптивную скользящую форму входа и регистрации с использованием HTML CSS и JavaScript
23 Февраля, 2023
Как отфильтровать массив на основе пользовательского ввода в AngularJS?
23 Февраля, 2023
Разделение файлов в SASS
23 Февраля, 2023
Для чего используется директива @content?
23 Февраля, 2023