MathType

Ръководство: Създаване на HTML страници с Bootstrap

Част I. Понятие за HTML и Bootstrap

Почти всяка уеб страница, която сте виждали в Интернет, е написана на HTML. Ето защо HTML е изключително важна технология за уеб, която неминуемо трябва да се изучава от всички начинаещи уеб-разработчици. Според нивото на напредък и избраната насока на професионално развитие, обаче, едни от тях биха желали да се задълбочат по-сериозно в HTML, докато други биха искали да направят малък обзор на най-задължителните елементи, преди да преминат към друга, по-интересна за тях материя.

Целта на настоящото ръководство е да служи на втората група, запознавайки евентуалните начинаещи с абсолюнтния минимум необходими умения, свързани с разработването на страници на HTML. Идеята на този подход е, че много от начинаещите уеб-програмисти биха искали да продължат с програмиране на "back-end" приложения, след което да се върнат към "front-end" разработката. Този подход към усвояването на уеб-програмирането по-бързо от всеки друг помага на обучаемите да започнат да разработват смислени приложения и да трупат самочувствие, което произтича от разбирането, че са схванали "голямата картина" (или с други думи - "философията") на технологиите за разработване в уеб.

Какво е HTML? Той може да бъде определен, разбира се, като език за програмиране, защото той е средство за задаване на инструкции, които следва да бъдат изпълнени. HTML, обаче, е много особен език, тъй като страната, която изпълнява инструкциите се явява браузъра на протребителя (например Google Chrome, Mozilla, Edge), а самите инструции са доста особени. Ние бихме нарекли HTML непроцедурен език, тъй като с него не може да се дефинират класически компютърни програми - например цикли, функции, логически конструкции и т.н. Инструкциите на HTML са прости указания какви части съдържа документа и как те следва бъдат показани на екрана. В последните 10-15 години се утвърди разбирнето, че тези две задачи са доста разнородни и поради тази причина бяха направени сериозни усилия втората задача - даването на указания как дадена част от документа се изобразява на екрана - да бъде отделена (до максималния предел на възможното) в друг специален език - CSS (Cascading Style Sheets). Това остави HTML с една основна функция, а именно описанието на структурата на документа.

Реалните уеб страници, са комбинация от HTML и CSS. Поради това, че HTML описва структурата на документа, той е много прост език. Доста по-трудно е да бъде указано как отделните части на документа се изобразяват във пълното разнообразие на цветове, форми, интерактивни взаимодействия в прозореца на браузъра. Ето защо, "чистият" HTML е доста прост за научаване, но не е особено полезен. CSS, от друга страна, дава средства на програмиста да оформи красиво страниците, но изучаването му е доста тежка задача, в пъти по-трудоемка от изучаването на HTML. Този проблем е повсеместно известен и от дълги години се търси негово решение.

Един популярен подход за решаване на проблема, е използването на CSS/JavaScript рамки за оформление на уеб страниците. Тези рамки предлагат готови решения на програмистите (начинаещи и напреднали) за визуално оформление на страницата. Bootstrap e водещата подобна рамка в света за момента.

Част II. Нашата първа HTML уеб страница

За да въведем нашата първа уеб страница, ние трябва да я въведем като HTML файл. HTML файловете са обикновени текстови файлове, които могат да се създават с Notepad. Препоръчително е, обаче, ние да създаваме уеб страниците в специализирана интегрирана среда за разработка (IDE) или поне редактор, който може да оцвети елементите на HTML в различен цвят според техните функции и позиция в документа. Ние наричаме това "синтактично оцветяване". Безплатен редактор, който поддържа такова синтактично оцветяване е Notepad++.

Нека да въведем в избрания редактор нашата първа HTML страница (имайте предвид, че номерата на редовете в разпечатката по-долу не се въвеждат и са само за да можем после да направим по-лесно анализ на кода ): 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Демонстрация на Bootstrap</title>
    </head>
    <body>
        <p>Това параграф 1</p>
        <p>Това е параграф 2</p>
        <p>Това е параграф 3</p>
    </body>
</html>

След въвеждането на файла следва да го запишем с разширение .html. За целта в Notepad++ трябва да изберем File/Save As ... и от диалога в падащото поле Save as Type трябва да изберем HyperText Markup Language (HTML).

------------SNIP---------------------- 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Демонстрация на Bootstrap</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">

        <!-- Minified jQuery -->
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>

        <!-- Latest compiled and minified JavaScript -->
        <script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
    </head>
    <body>




    </body>
</html>
------------SNIP---------------------- 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Демонстрация на Bootstrap</title>
        <!-- Latest compiled and minified CSS -->
        <link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">

        <!-- Minified jQuery -->
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>

        <!-- Latest compiled and minified JavaScript -->
        <script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
    </head>
    <body>
        <div class="container-fluid">
            <div class="row" style="background-color:red;">
                Първи ред. Първи ред. Първи ред.
            </div>
            <div class="row" style="background-color:blue;">

                <div class="col-md-3" style="background-color: pink;">
                    Първа колона.
                </div>

                <div class="col-md-6" style="background-color: gray;">
                    Втора колона.
                </div>

                <div class="col-md-3" style="background-color: orange;">
                    Трета колона.
                </div>

            </div>
            <div class="row" style="background-color:green;">
                Трети ред. Трети ред. Трети ред.
            </div>
        </div>
    </body>
</html>

Bootstrap 4.0 шаблон

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Демонстрация на Bootstrap</title>
        <!-- Latest compiled and minified CSS -->
        
        <link rel="stylesheet" 
              href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" 
              integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" 
              crossorigin="anonymous">
        

        <!-- Minified jQuery -->
        <script src="https://code.jquery.com/jquery-3.1.1.min.js"
            integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
            crossorigin="anonymous"></script>

        <!-- Latest compiled and minified JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js" 
        integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK" 
        crossorigin="anonymous"></script>
    </head>
    <body>

    </body>
</html>

Няма коментари:

Публикуване на коментар

Абонамент за: Публикации (Atom)