Археология об основании Рима: Новые раскопки проясняют и такой острый дискуссионный вопрос, как дата самого возникновения Рима...
Организация стока поверхностных вод: Наибольшее количество влаги на земном шаре испаряется с поверхности морей и океанов (88‰)...
Топ:
Процедура выполнения команд. Рабочий цикл процессора: Функционирование процессора в основном состоит из повторяющихся рабочих циклов, каждый из которых соответствует...
Оснащения врачебно-сестринской бригады.
Оценка эффективности инструментов коммуникационной политики: Внешние коммуникации - обмен информацией между организацией и её внешней средой...
Интересное:
Что нужно делать при лейкемии: Прежде всего, необходимо выяснить, не страдаете ли вы каким-либо душевным недугом...
Финансовый рынок и его значение в управлении денежными потоками на современном этапе: любому предприятию для расширения производства и увеличения прибыли нужны...
Отражение на счетах бухгалтерского учета процесса приобретения: Процесс заготовления представляет систему экономических событий, включающих приобретение организацией у поставщиков сырья...
Дисциплины:
 2017-11-22 |
 249 |
из
5.00
|
Заказать работу |
|
|
|
|
Теперь создадим свою HTML страницу. Для этого откройте любой редактор, который вы выбрали (см. раздел 1.2). Сразу сохраните этот документ в какой-нибудь папке, дописав в конце названия файла расширение.html, или выбрав расширение в выпадающем меню. Если есть возможность при сохранении указать кодировку, укажите UTF-8. Если нет, то меняем её после сохранения документа и сохраняем файл снова. Вставим свой первый код в этот текстовый редактор:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <metacharset="utf-8">
5. <title>Названиесайта</title>
6. </head>
7. <body>
8. <h1>Статья</h1>
9. <h2>1. Заголовок</h2>
10. <p>Текст <em>текст</em> текст.</p>
11. <h2>2. Заголовок</h2>
12. <p>Текст <b>текст</b> текст.</p>
13. <imgsrc="http://the-center.it/img/logo.png">
14. <hr>
15. <ahref="http://google.com">Link</a>
16. </body>
17. </html>
Снова сохраним файл. Теперь открываем папку с нашим созданным файлом и откроем его в браузере. Я рекомендую использовать браузер «Google Chrome». Однако вам в дальнейшем понадобится все браузеры, которые есть, такие как «Firefox», «Opera», «Internet Explorer», «Safari» и другие, чтобы смотреть, как ваши страницы будут отображаться там. К сожалению, браузеры могут по разному интерпретировать ваш код, поэтому нужно проверять отображение везде и исправлять ошибки, если таковые появились. Пока нам будет достаточно лишь одного браузера. Я буду показывать примеры в браузере, на котором основывался «Google Chrome» - «Chromium».
Для анализа кода мы будем использовать инспектор кода в браузере. Он есть во всех распространённых браузерах, но их вид может различаться. Инспектор кода в Google Chrome я считаю достаточно подробным, поэтому предпочитаю использовать его. Для того, чтобы его открыть, вам необходимо нажать правой клавишей мыши на любом элементе страницы и нажать «Проинспектировать элемент» или открыть Меню -> Инструменты -> Инструменты разработчика (Tools -> Developer tools).
|
|
Теперь наведите на любой элемент в вашем коде. Вы увидете, как он будет подсвечен. Под вашим кодом слева вы увидите, какие стили были применены к вашему элементу. Поскольку стилей мы не подключали, стили, отображаемые там, являются стилями по умолчанию, которые хранятся в браузере. Эти стили могут отличаться в разных браузерах, но в основном они похожи. Справа вы увидите блок, в котором нарисовано представление вашего элемента (блочная модель), его размеры, внутренние и внешние отступы и границы.
Углубимся немного в CSS. Надписи margin (внешний отступ), border (граница/рамка), padding (внутренний отступ) — это свойства элемента. Жирной рамкой (между margin и border) выделен сам элемент. То, что находится за ней, элементом не является. То что внутри него — есть сам элемент. В данном примере оранжевой подсветкой элемента <body> выделен внешний отступ вокруг элемента (margin). Синим сам элемент, пространство которого может быть заполнено контентом. Внутренних отступов в нашем документе нет, но мы с ними обязательно столкнёмся.
Данными инструментами очень удобно анализировать написанный код наглядно. С помощью них гораздо проще находить свои ошибки. Да и в целом эти инструменты помогают понять, как же устроена HTML страница и свойства элементов.
Блочные и строчные элементы
Теперь, когда мы подготовили весь необходимый инструментарий для анализа, приступим к изучению блочных и встроенных элементов.
Если вы посмотрите в свойства CSS всех элементов, у некоторых вы можете увидеть свойство "display: block;", которое как раз и говорит браузеру, что элемент является блочным. Все блочные элементы начинаются с новой строки. Именно поэтому теги <h1> и <h2> находятся на разных строках (хотя могли бы уместиться на одной). Наведя на любой блочный элемент можно увидеть, что они занимают 100% доступной им ширины. Это их свойство по умолчанию, которое можно изменить. Однако даже сделав ширину тегов <h1> и <h2> такой, чтобы они могли уместиться на одной строке (например по 50%), они бы всё равно были в разных строках, т.к., повторюсь, все блочные элементы начинаются с новой строки.
|
|
Теперь посмотрим на теги <em>, <b> и <a>. У них в свойствах прописано "display: inline;". Как вы видите, они не начинаются с новой строки. Некоторые из них в данном примере находятся в составе строк. А их ширина ровно такая, чтобы весь контент уместился, но не больше. Эти элементы называются встроенными. Встроенные элементы обычно используются в составе блочных.
Также есть другие типы отображения элементов, такие как table, table-cell, inline-block и т.д. Но о них мы поговорим в главе посвящённой CSS. Единственное, что вам сейчас нужно знать, это то, что все элементы визуально представляют из себя блоки (не путайте с блочными элементами), и в зависимости от того, блочный это элемент или встроенный, зависит поведение элемента на странице.
Основные теги
В данном разделе мы кратко опишем и рассмотрим основные теги, которые используются при верстке страниц. На некоторых тегах мы остановимся чуть подробнее. Теги, которые ничем особенным не отличаются от других тегов, будут даны с небольшим семантическим описанием и подробно описываться не будут, т.к. в этом нет смысла. Это не значит, что вам придётся узнавать о них подробнее в других источниках, т.к. возможно они вам никогда не пригодятся. Совершенно необязательно запоминать все эти теги. Их можно будет легко найти в справочных материалах в интернете (полезные источники будут даны в конце книги). Хороший программист не тот, кто знает все элементы языка наизусть, а тот, который понимает концепцию языка и может быстро найти необходимую информацию и правильно её применить. Запомнить всё невозможно. А если и возможно, то не рационально.
|
|
|
Особенности сооружения опор в сложных условиях: Сооружение ВЛ в районах с суровыми климатическими и тяжелыми геологическими условиями...
Археология об основании Рима: Новые раскопки проясняют и такой острый дискуссионный вопрос, как дата самого возникновения Рима...
Наброски и зарисовки растений, плодов, цветов: Освоить конструктивное построение структуры дерева через зарисовки отдельных деревьев, группы деревьев...
Таксономические единицы (категории) растений: Каждая система классификации состоит из определённых соподчиненных друг другу...
© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!