Назад Вперед

Часть 6. Три кита WEBa. Кит первый — HTML.

Основы языка разметки HTML5 и шаблон главной страницы проекта.

Вот и перехожу к более практическим вещам. Сегодня разберу основы языка разметки HTML, основные и самые необходимые теги, как и для чего буду использовать этот язык. Начну с последнего пункта.

Цель моего проекта — создание браузерных игр в первую очередь, а также возможность их запуска на мобильных устройствах. Думаю понятно, что игру для браузера нужно запускать в браузере, а для того, чтобы ее разместить на сайте мне понадобятся основы языка разметки HTML. Так как все проекты будут публиковаться на сделанном своими ручками сайте. HTML — это основа основ, с него начинают многие WEB-разработчики, с этим языком можно максимально быстро войти в сферу разработки и быстро увидеть свой результат. Ведь для его использования не нужны крутые программы, компиляторы и все тому подобное. Для начального старта нужен обычный блокнот или редактор кода, а так же сам браузер, и уже можно будет увидеть результат.

Пример сайта в браузере

Мне HTML помог сделать основу своего сайта и возможность разместить на нем первый проект и свой блог (что еще для этого нужно было, поговорим в следующих статьях). Я уже создавал в предыдущей статье первую страницу с помощью редактора кода VSCode. И сейчас приступлю к ее разбору, для чего какие теги нужны и где что размещать. Коснусь только самого основного для предварительного знакомства, а все остальное уже будет при описании создания проекта. Приступим.

Пример проекта в браузере

Как же работает язык HTML? Если очень по простому, то создается специальный файл с разрешением .html, который при открытии браузером считывается встроенной в нем программой и отображается на экране с прописанной в файле разметкой. Для того, чтобы «сказать» браузеру, как именно необходимо отображать те или иные элементы, используются специальные теги. Большинство тегов парные, т.е. имеют начало и конец. Например <p> и </p> — тег, который используется для отображения простого абзаца. Все, что будет записано между этими символами, будет восприниматься браузером, как один абзац.


    ...
    <p>
        Этот текст выделен в один абзац.
    </p>
    <p>
        А это уже следующий абзац.
    </p>
    ...
 

В HTML существует огромное количество тегов, который можно использовать на все случаи жизни. При чем в новой версии HTML5 добавили еще больше тегов, которые позволяют разделять страницы по семантическому смыслу, т.е. показать, что этот элемент является меню (<nav></nav>), а это содержимое файла относится к шапке сайта (<header></header>). Некоторые теги будут использоваться очень часто, а к некоторым я вообще не доберусь. Для начала создам простой шаблон одной страницы.

Новый файл в редакторе

Для начала работы в редакторе кода создаю файл index.html и открываю его для редактирования. Способ создания шаблона страницы при описании работы с редактором использовать не буду, а напишу все сам с описанием каждого тега.

Первым делом необходимо указать, что этот файл использует язык разметки HTML. Поэтому в первой строке прописываю тип документа <!DOCTYPE HTML>.


    <!DOCTYPE HTML>
 

Весь код страницы прописывается в теге <html></html>. Все что будет находиться внутри этого тега, будет считываться браузером. Это самый основой тег, про него нельзя забывать.


    <!DOCTYPE HTML>
    <html>

    </html>
 

Дальше идут два не менее значимые тега, которые являются «головой» и «телом» создаваемой страницы. Первым прописывается <head></head>. Внутри этого тега буду записывать все нужные мета-теги (для описания, указания автора, ключевых слов и т.д.), название и иконка страницы (отображается браузером вверху во вкладке), подключаемые стили и скрипты (в следующих статьях).


    <!DOCTYPE HTML>
    <html>
        <head>
        
        </head>  
    </html>
 

Для начала просто напишу название страницы, прописывается оно в теге <title></title>. Забегая немного вперед, скажу, что использовать название лучше на каждой странице, так как поисковики используют их для отображения в поиске, как и описание страницы тоже (более подробно расскажу в разделе блога о создании сайта).


    <!DOCTYPE HTML>
    <html>
        <head>
            <title>
                Шаблон главной страницы проекта
            </title>                
        </head>  
    </html>
 

Еще один полезный тег в head — мета-тег с указанием кодировки страницы. Записывается он так: <meta charset='UTF-8'> Таки образом, я указываю браузеры какую кодировку использую для корректного отображения всех символов на странице, а не китайскими иероглифами или квадратиками, что иногда может случиться.


    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset='UTF-8'>
            <title>
                Шаблон главной страницы проекта
            </title>                
        </head>  
    </html>
 

Для начала с head хватит, перейдем к телу страницы, тегу <body></body>. Все содержимое самой страницы записывается именно в этом теге, все статьи, все менюшки, картинки и ссылки, все то, что нужно показать конечному пользователю.


    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset='UTF-8'>
            <title>
                Шаблон главной страницы проекта
            </title>                
        </head>
        <body>

        </body>  
    </html>
 

На данном этапе я запишу три основных семантических тега, которые будут чисто логическим способом указывать, без какого-то специального оформления, где у меня будет находиться «шапка», «подвал» и основная часть страницы. Для этого использую теги <header></header>, <main></main> и <footer></footer>.


    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset='UTF-8'>
            <title>
                Шаблон главной страницы проекта
            </title>                
        </head>
        <body>
            <header>

            </header>
            <main>

            </main>
            <footer>

            </footer>   
        </body>  
    </html>
 

Теперь если мне нужно будет расположить логотип и меню навигации, или например поля для входа пользователей, я буду их прописывать в теге header. Все контакты, дополнительное меню и все то, что используются обычно в «подвале» сайта будет расположено в теге footer. А вся основная часть, например, сама игра, или статья, какие-то разделы в теге main. Кроме личного удобства в таком разделении тела страницы, это приветствуется для работы с поисковиками, так как видно сразу, где какие части сайта расположены.

Шаблон страницы

Все описанные выше теги являются блочными тегами, т.е. если их расположить друг за другом, то содержимое их будет отображаться в виде блоков и с новой строки. К таким еще можно отнести тег абзаца <p></p> и блочный тег <div></div>, который до появления семантических тегов использовался очень часто.

Существуют и строчные теги, при использовании которых не идет перенос на следующую строку. К таким тегам относятся те, которые используются для форматирования (<i></i>, <strong></strong>, <b></b> и др.) или для того, чтобы отметить определенную часть содержимого (<span></span>) и потом отформатировать их с помощью стилей.


    ...
    <p>
        Этот текст <span>выделен</span> в один абзац.
    </p>
    <p>
        А это уже <i>следующий</i> абзац.
    </p>
    ...
 

Еще один важный пункт работы с тегами - это их атрибуты и параметры этих атрибутов. Используются они, чтобы расширить возможности определенных тегов, а некоторые вообще являются обязательными. Например тег для загрузки изображения на страницу: <img>.

У него есть атрибут src='', который указывает откуда будет загружено изображение (по внешней ссылке или из папки проекта). Так же в привычку должно войти использование атрибута alt='', внутри которого прописывается, что это за картинка или ее описание. Так же можно задать ширину и высоту картинки с помощью атрибутов width='' и height=''. Но для оптимизации лучше загружать картинки сразу с нужными размерами и потратить немного времени для этого в графическом редакторе.


    ...
    <p>
        Этот текст <span>выделен</span> в один абзац.
    </p>
    <p>
        А это уже <i>следующий</i> абзац.
    </p>
    <img src='../img/img.png' alt='Изображение'>
    ...
 

У тега для создания гиперссылки <a></a>, так же есть атрибут href='', который указывает куда ведет ссылка (другой ресурс, другая страница проекта или определенный якорь на этой странице). И еще один полезный атрибут — target=''. По умолчанию страница, открытая по ссылке будет открываться в этом же окне, где и была нажата ссылка. Для перехода внутри своего сайта это удобно, но если нужно будет указать ссылку на внешний ресурс, то пользователь, получается, перейдет на другой сайт, а может уже и не вернется обратно, поэтому указывается значение '_blank', что позволяет открывать ссылки в новом окне.


    ...
    <p>
        Этот текст <span>выделен</span> в один абзац.
    </p>
    <p>
        А это уже <i>следующий</i> абзац.
    </p>
    <img src='../img/img.png' alt='Изображение'>
    <a href='https://vk.com/zhutiko' target='_blank'>
        Группа ВКонтакте
    </a>
    ...
 

Большинству тегов можно указывать атрибут class=''. Им пользоваться буду чаще всего, для создания классов и последующего их оформления с помощью CSS. Название класса придумывать нужно самому и к этому стоит подойти серьезно. Так как при работе с большим проектом, можно запутаться, где какие классы и что они меняют (подробнее о классах в следующей статье).

Еще хотел бы отметить написание комментариев в документе. Комменты записываются между такими знаками <!-- и -->. Все, что будет внутри этих символов не будет отображаться браузером в окне, а если проект очень большой, то комменты помогут быстро найти нужный элемент или нужную часть страницы, и вообще не забыть, что я тут написал и для чего.

На примере ниже я создал обычную страницы с указанными в статье тегами, некоторыми атрибутами и заполненным содержимым.


    <!DOCTYPE HTML>
    <html>
        <head>
            <meta charset='UTF-8'>
            <title>
                Шаблон главной страницы проекта
            </title>                
        </head>
        <body>
            <header>
                <nav>
                    <h1>
                        Главная страница
                    </h1>
                </nav>    
            </header>
            <main>
                <h2>
                    Жуков Иван Васильевич
                </h2>
                <p>
                    Руководитель проекта <span>LOVEtoPLAY</span>. 
                </p>
                <p>
                    Мое увлечение: <i>программирование, геймдизайн, создание игр</i>.
                </p>
                <img src='http://www.zhutiko.com/assets/img/image_one.jpg' alt='Изображение'>
            </main>
            <footer>
                <a href='https://vk.com/zhutiko' target='_blank'>
                    Группа ВКонтакте
                </a>
            </footer>   
        </body>  
    </html>
 

Пример страницы HTML

Если открыть сейчас эту страницы с помощью локального сервера Live Server или просто в браузере, то можно увидеть, что страница моя совсем не презентабельная. Так как я не использовал стили для форматирования, о которых поговорю в следующей статье.

Страница в браузере

Спасибо за внимание!

Назад Вперед