Блок 1 . Структура простейшей страницы — КиберПедия 

Опора деревянной одностоечной и способы укрепление угловых опор: Опоры ВЛ - конструкции, предназначен­ные для поддерживания проводов на необходимой высоте над землей, водой...

Кормораздатчик мобильный электрифицированный: схема и процесс работы устройства...

Блок 1 . Структура простейшей страницы

2020-05-10 352
Блок 1 . Структура простейшей страницы 0.00 из 5.00 0 оценок
Заказать работу

Язык HTML

Язык HTML - это основа web сайтов, с его помощью создается каркас страницы, которую вы видите в браузере.

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

Заголовки, абзацы и другие блоки можно выделить и на странице сайта. Это делается с помощью HTML тегов.

Что такое HTML теги?

HTML теги - это специальные команды для браузера. Они говорят ему, что, к примеру, следует считать заголовком страницы, а что абзацем.

Теги строятся по такому принципу: уголок <, потом имя тега, а потом уголок >, вот так: <имя тега>. Имя тега может состоять из английских букв и цифр. Примеры тегов: <h1>, <p>, <b>.

Теги обычно пишутся парами - открывающий тег и соответствующий ему закрывающий. Разница между открывающим и закрывающим тегами в том, что в закрывающем теге после уголка < стоит слеш /.

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

Бывают теги, которые не нужно закрывать, например, <br> или <img>.

Атрибуты

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

Атрибуты размещаются внутри открывающего тега в таком формате: <тег атрибут1="значение" атрибут2="значение">.

Кавычки могут быть любыми - одинарными или двойными, допустимо их вообще их не ставить, если значение атрибута состоит из одного слова (но это не желательно).

Язык CSS

Язык CSS расширяет возможности языка HTML. Он позволяет менять цвета, шрифты, фон, в общем заниматься красотой сайта. А HTML, соответственно, отвечает за структуру сайта.

Итак, приступим

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

Блок 2. Абзацы

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

Абзац создается с помощью тега <p> таким образом:

<!DOCTYPE html>

<html>

       <head>

                   <meta charset="utf-8">

                   <title>Это заголовок тайтл</title>

       </head>

       <body>

                   <p>

                                Это абзац.

                   </p>

 

                   <p>

                                Это еще один абзац.

                   </p>

 

                   <p>

                                И еще один абзац.

                   </p>

       </body>

</html>

Так код будет выглядеть в браузере:

Это абзац.

Это еще один абзац.

И еще один абзац.

Блок 3. Заголовки h1, h2, h3, h4, h5, h6

Кроме абзацев важное значение на странице имеют заголовки. Их также можно сравнить с заголовками из книги - каждая глава имеет свой заголовок (название этой главы) и разбита на параграфы, которые тоже имеют свои заголовки. Ну, а основной текст страницы располагается в абзацах.

Заголовки создаются с помощью тегов <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Они имеют разную степень важности. В заголовке h1 следует располагать название всей HTML страницы, в h2 - название блоков страницы, в h3 - название подблоков и так далее.

Все заголовки по умолчанию жирные и имеют разный размер (это можно поменять через CSS, но об этом позже). Смотрите пример:

<!DOCTYPE html>

<html>

       <head>

                   <meta charset="utf-8">

                   <title>Это заголовок тайтл</title>

       </head>

       <body>

                   <h1>Заголовок h1</h1>

                   <h2>Заголовок h2</h2>

                   <h3>Заголовок h3</h3>

                   <h4>Заголовок h4</h4>

                   <h5>Заголовок h5</h5>

                   <h6>Заголовок h6</h6>

                   <p>Это первый абзац.</p>

                   <p>Это второй абзац.</p>

                   <p>Это третий абзац.</p>

       </body>

</html>

Так код будет выглядеть в браузере:

Заголовок h1

Заголовок h2

Заголовок h3

Заголовок h4

Заголовок h5

Заголовок h6

Это первый абзац.

Это второй абзац.

Это третий абзац.

Блок 4. Жирный

Вы уже знаете, что заголовки по умолчанию жирные. Однако, можно сделать жирным и обычный текст - достаточно взять его в тег <b>. Смотрите пример:

<!DOCTYPE html>

<html>

       <head>

                   <meta charset="utf-8">

                   <title>Это заголовок тайтл</title>

       </head>

       <body>

                   <p>

                                Это обычный текст, а это <b>жирный</b> текст.

              </p>

       </body>

</html>

Так код будет выглядеть в браузере:

Это обычный текст, а это жирный текст.

Обратите внимание на то, что тег <b> следует использовать внутри какого-либо другого тега, например абзаца. В этом случае абзацы создают общую структуру страницы (абзацы и заголовки), а тег b делает жирным отдельные кусочки текста.

Блок 5. Курсив

Кроме жирного можно сделать также и курсив с помощью тега <i>:

<!DOCTYPE html>

<html>

       <head>

                   <meta charset="utf-8">

                   <title>Это заголовок тайтл</title>

       </head>

       <body>

                   <p>

                                Это обычный текст, а это <i>курсивный</i> текст.

                   </p>

       </body>

</html>

Так код будет выглядеть в браузере:

Это обычный текст, а это курсивный текст.

Блок 6. Списки

Наряду с абзацами и заголовками существует еще один важный элемент страницы - это списки. Такие элементы наверняка знакомы всем пользователям интернета. Они представляют собой перечисление чего-либо (список) по пунктам. Возле каждого пункта списка обычно стоит закрашенный кружок (он называется маркер списка).

Списки создаются с помощью тега <ul>, внутри которого обязательно должны идти теги <li>. Тег ul задает сам список, а в теги li следует ложить пункты списка (то есть одному li соответствует один маркер списка). Имейте ввиду, что отдельно теги li использовать нельзя. Смотрите пример:

<!DOCTYPE html>

<html>

       <head>

                   <meta charset="utf-8">

                   <title>Это заголовок тайтл</title>

       </head>

       <body>

                   <ul>

                                <li>Первый пункт списка.</li>

                                <li>Второй пункт списка.</li>

                                <li>Третий пункт списка.</li>

                   </ul>

       </body>

</html>

Так код будет выглядеть в браузере:

  • Первый пункт списка.
  • Второй пункт списка.
  • Третий пункт списка.

Списки, созданные через тег ul, называются неупорядоченными списками. Такое название им дано потому, что существуют еще и упорядоченные списки, у которых вместо маркеров-точек будут маркеры-цифры. Такие списки вместо тега ul имеют тег <ol>, а пункты таких списков также создаются через теги li.

Давайте сделаем упорядоченный список, используя тег ol:

<!DOCTYPE html>

<html>

       <head>

                   <meta charset="utf-8">

                   <title>Это заголовок тайтл</title>

       </head>

       <body>

                   <ol>

                                <li>Первый пункт списка.</li>

                                <li>Второй пункт списка.</li>

                                <li>Третий пункт списка.</li>

                   </ol>

       </body>

</html>

Так код будет выглядеть в браузере:

1. Первый пункт списка.

2. Второй пункт списка.

3. Третий пункт списка.

Удобство упорядоченных списков в том, что я могу вставить новый пункт списка в любое место - и нумерация сама перестроится (то есть мне не приходится за ней следить в случае каких-либо изменений, как было бы в том случае, если бы я расставлял ее вручную).

Блок7. Ссылки

Ссылки являются теми элементами, которые делают из интернета интернет. Нажимая на ссылки, мы можем переходить с одной страницы сайта на другую. Если бы их не было - интернет был бы просто набором страниц, никак не связанных друг с другом.

Ссылка создается с помощью тега <a>, при этом у нее должен быть обязательный атрибут href, в котором хранится адрес той страницы, на которую ведет ссылка. Смотрите пример:

<!DOCTYPE html>

<html>

       <head>

                   <meta charset="utf-8">

                   <title>Это заголовок тайтл</title>

       </head>

       <body>

                   <a href="http://phphtml.net">Ссылка на сайт phphtml.net.</a>

       </body>

</html>

Так код будет выглядеть в браузере:

Ссылка на сайт phphtml.net.

Ссылки бывают абсолютные и относительные, кроме того, они могут вести как на ваш сайт, так и на чужой. Эти сложные моменты лучше показывать, а не описывать текстом, поэтому я снял для вас следующее видео. Посмотрите его и только потом переходите к дальнейшему чтению:

Тут скоро будет видео про ссылки абсолютные и относительные

Блок 8. Картинки

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

Как это работает, посмотрим на следующем примере:

<!DOCTYPE html>

<html>

       <head>

                   <meta charset="utf-8">

                   <title>Это заголовок тайтл</title>

       </head>

       <body>

                   <img src="smile.png">

       </body>

</html>

Так код будет выглядеть в браузере:

Обратите внимание на то, что тег <img> не требует закрывающего тега.

Блок 10. Разрыв строки

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

Давайте убедимся в этом на следующем примере:

<!DOCTYPE html>

<html>

       <head>

                   <meta charset="utf-8">

              <title>Это заголовок тайтл</title>

       </head>

       <body>

                   <p>Это первый абзац.</p>

                   <p>Это второй абзац.</p>

       </body>

</html>

Так код будет выглядеть в браузере:

Это первый абзац.

Это второй абзац.

Бывают, однако, ситуации, когда мы хотели бы, чтобы у нас был один абзац, но некоторый текст в нем начинался с новой строки. Зачем такое может понадобится? К примеру, я хочу набрать стихотворение, но не хочу разбивать каждую его строку в отдельный абзац, так как это было бы не очень логично.

Чтобы сделать такое, в том месте, где должен быть разрыв строки, следует написать тег <br>. Учтите, что этот тег особенный и не имеет закрывающего.

Давайте посмотрим на его работу на следующем примере:

<!DOCTYPE html>

<html>

       <head>

                   <meta charset="utf-8">

                   <title>Это заголовок тайтл</title>

       </head>

       <body>

                   <p>Это первая строка текста, <br> а это вторая.</p>

       </body>

</html>

Так код будет выглядеть в браузере:

Это первая строка текста,
а это вторая.

Блок11. Комментарии HTML

Практически во всех языках программирования есть такое понятие как "комментарии". Комментарии - это такой текст, который будет проигнорирован браузером - на экране он будет не виден, но останется в исходном коде страницы.

Для чего нужны комментарии? Во-первых, для того, чтобы оставлять в исходном коде пометки себе или тому человеку, который будет править ваш код после вас. Во-вторых, с помощью комментариев можно убирать некоторые вещи, которые вы бы сейчас хотели удалить, но потом, может быть, захотите вернуть. Их можно просто временно закомментировать, а потом откомментировать при необходимости.

Комментарии в HTML оформляются следующим образом: сначала уголок, знак! и два дефиса - <!--, потом текст комментария, а потом два дефиса и уголок - -->. Смотрите пример:

<!DOCTYPE html>

<html>

       <head>

                   <meta charset="utf-8">

                   <title>Это заголовок тайтл</title>

       </head>

       <body>

                   <!--

                                Это комментарий HTML -

                                на странице сайта он не отображается.

                   -->

 

                   Это основное содержимое страницы.

       </body>

</html>

 

Задачи для решения

На списки

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Связанные ссылками страницы

Повторите 3 страницы и свяжите их ссылками друг с другом: страница 1, страница 2, страница 3.

На картинки

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

 

Блок 2. Ячейки-заголовки

Кроме тегов td существуют также теги <th>, которые также создают ячейки. Но это уже будут не обычные ячейки, а ячейки-заголовки, которые указывают, что находится в данном столбце (или строке) таблицы.

В следующем примере ячейки "Иван" и "Николай" должны быть обычными ячейками td, а ячейка "Имя" по логике должна быть ячейкой-заголовком th, так как "Имя" - это общее название содержимого этого столбца:

<table border="1">

       <tr>

                   <th>Имя</th>

                   <th>Фамилия</th>

                   <th>Зарплата</th>

       </tr>

       <tr>

                   <td>Иван</td>

                   <td>Иванов</td>

                   <td>200$</td>

       </tr>

       <tr>

                   <td>Николай</td>

                   <td>Сидоров</td>

                   <td>1000$</td>

       </tr>

</table>

Так код будет выглядеть в браузере:

Имя Фамилия Зарплата
Иван Иванов 200$
Николай Сидоров 1000$

По умолчанию текст в ячейках th будет жирный и расположен по центру (это поведение можно поменять, но об этом позже).

Задачи для решения

Простые таблицы

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Добавим выравнивание align

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Закрепление…

 

 

Сейчас мы с вами займемся объединением ячеек. Будем объединять их как по горизонтали, так и по вертикали.

Смотрите пример того, что у нас будет получаться:

Ячейка 1

Ячейка 2

Ячейка 4 Ячейка 6
Ячейка 7 Ячейка 9

Таблица, с которой мы будем работать

Сначала я приведу таблицу без объединений, с которой мы будем работать дальше:

<table border="1">

       <tr>

                   <td>Ячейка 1</td>

                   <td>Ячейка 2</td>

                   <td>Ячейка 3</td>

       </tr>

       <tr>

                   <td>Ячейка 4</td>

                   <td>Ячейка 5</td>

                   <td>Ячейка 6</td>

       </tr>

       <tr>

                   <td>Ячейка 7</td>

                   <td>Ячейка 8</td>

                   <td>Ячейка 9</td>

       </tr>

</table>

 

 

Так код будет выглядеть в браузере:

Ячейка 1 Ячейка 2 Ячейка 3
Ячейка 4 Ячейка 5 Ячейка 6
Ячейка 7 Ячейка 8 Ячейка 9

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

Задачи для решения

Закрепление

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

 

 

Мы с вами уже разобрали основные теги языка HTML и теперь пришло время навести красоту. Хотелось бы иметь возможность менять цвет текста, его размер, фон и многое другое. Это делается с помощью языка CSS.

Блок 1. Как работать с CSS

Каждому тегу в HTML соответствует так называемый селектор CSS. К примеру, тегу <p> соответствует CSS селектор p, с помощью которого мы можем обратиться ко всем абзацам HTML страницы и, например, покрасить их всех одновременно в красный цвет. После селектора следует ставить фигурные скобки {}, внутри которых следует писать CSS свойства.

CSS свойства и задают цвет, размер шрифта и другие интересные вещи. Их следует писать в таком формате: имя свойства, потом двоеточие, потом значение этого свойства (например, свойство - это цвет, а "красный" - это значение). Потом нужно поставить точку с запятой и можно писать следующее свойство.

Давайте покрасим все абзацы в красный цвет:

Это HTML код:

<p>

       Абзац с текстом.

</p>

Это CSS код:

p {

       color: red;

}

Так код будет выглядеть в браузере:

Абзац с текстом.

А теперь давайте покрасим абзацы в зеленый цвет и сделаем их большого размера:

<p>

       Абзац с текстом.

</p>

p {

       color: red;

       font-size: 25px;

}

Так код будет выглядеть в браузере:

Абзац с текстом.

Обратите внимание на оформление CSS кода: каждое новое свойство пишется с новой строки.

Блок 3. Комментарии CSS

Так же, как и в HTML, в CSS можно ставить комментарии. Они оформляются следующим образом: слеш и звездочка /*, потом текст комментария, потом звездочка и слеш */. Смотрите пример:

p {

       /*

                   Тут находится

                   комментарий CSS.

       */

 

       color: red;

       font-size: 27px;

}

 

Задачи тут не нужны. Главное: это усвоить 3 способ а подключения CSS.

Язык HTML

Язык HTML - это основа web сайтов, с его помощью создается каркас страницы, которую вы видите в браузере.

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

Заголовки, абзацы и другие блоки можно выделить и на странице сайта. Это делается с помощью HTML тегов.

Что такое HTML теги?

HTML теги - это специальные команды для браузера. Они говорят ему, что, к примеру, следует считать заголовком страницы, а что абзацем.

Теги строятся по такому принципу: уголок <, потом имя тега, а потом уголок >, вот так: <имя тега>. Имя тега может состоять из английских букв и цифр. Примеры тегов: <h1>, <p>, <b>.

Теги обычно пишутся парами - открывающий тег и соответствующий ему закрывающий. Разница между открывающим и закрывающим тегами в том, что в закрывающем теге после уголка < стоит слеш /.

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

Бывают теги, которые не нужно закрывать, например, <br> или <img>.

Атрибуты

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

Атрибуты размещаются внутри открывающего тега в таком формате: <тег атрибут1="значение" атрибут2="значение">.

Кавычки могут быть любыми - одинарными или двойными, допустимо их вообще их не ставить, если значение атрибута состоит из одного слова (но это не желательно).

Язык CSS

Язык CSS расширяет возможности языка HTML. Он позволяет менять цвета, шрифты, фон, в общем заниматься красотой сайта. А HTML, соответственно, отвечает за структуру сайта.

Итак, приступим

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

Блок 1. Структура простейшей страницы

Страница сайта - это обычный текстовый файл с расширением .html. Внутри этого файла и хранится текст HTML страницы вместе с тегами. Этот файл обязательно должен иметь следующие теги: тег <html>, который должен содержать в себе текст всего сайта (все, что написано вне этого тега, браузером будет проигнорировано), а внутри него должны быть еще два тега: тег <head> для служебного содержимого страницы и тег <body> - для основного текста, который и виден на экране браузера.

В служебное содержимое, которое располагается внутри тега <head>, входит много различных вещей, но пока нам нужны только две из них. Это тег <title>, задающий название страницы, которое будет видно во вкладке браузера, и тег <meta>, который задает кодировку страницы (она ставится в атрибуте charset и обычно имеет значение utf-8, подробнее об этом в видео, которое будет ниже на пару абзацев).

Кроме того, перед тегом <html> обычно пишется конструкция doctype, которая указывает версию языка HTML, на которой сделан сайт. Актуальная сейчас версия языка имеет номер пять и доктайп для нее должен выглядеть так - <!DOCTYPE html>.

Итак, давайте посмотрим на основную структуру страницы (чтобы запустить это пример в браузере - скопируйте его в текстовый файл с расширением .html и откройте в браузере, если у вас проблемы с этим - посмотрите видео под примером):

<!DOCTYPE html>

<html>

       <head>

                   <meta charset="utf-8">

                   <title>Это заголовок тайтл</title>

       </head>

       <body>

                   Это основное содержимое страницы.

       </body>

</html>

Как выглядит этот пример в браузере смотрите по данной ссылке.

Думаю, после того, как вы прочитали про основную структуру страницы, у вас по-прежнему остается некоторое недопонимание, как все это выглядит на практике. Поэтому я снял специальное видео, в котором покажу вам, как сделать вашу первую HTML страницу и запустить ее в браузере (в нем я также расскажу про title страницы, про кодировки, про оформление кода). Посмотрите его и только потом переходите к дальнейшему чтению:

Тут скоро будет видео как начать: как сохранить с расширением.html, структура страницы, кодировки.

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

Блок 2. Абзацы

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

Абзац создается с помощью тега <p> таким образом:

<!DOCTYPE html>

<html>

       <head>

                   <meta charset="utf-8">

                   <title>Это заголовок тайтл</title>

       </head>

       <body>

                   <p>

                                Это абзац.

                   </p>

 

                   <p>

                                Это еще один абзац.

                   </p>

 

                   <p>

                                И еще один абзац.

                   </p>

       </body>

</html>

Так код будет выглядеть в браузере:

Это абзац.

Это еще один абзац.

И еще один абзац.


Поделиться с друзьями:

Наброски и зарисовки растений, плодов, цветов: Освоить конструктивное построение структуры дерева через зарисовки отдельных деревьев, группы деревьев...

Индивидуальные и групповые автопоилки: для животных. Схемы и конструкции...

История создания датчика движения: Первый прибор для обнаружения движения был изобретен немецким физиком Генрихом Герцем...

Своеобразие русской архитектуры: Основной материал – дерево – быстрота постройки, но недолговечность и необходимость деления...



© cyberpedia.su 2017-2024 - Не является автором материалов. Исключительное право сохранено за автором текста.
Если вы не хотите, чтобы данный материал был у нас на сайте, перейдите по ссылке: Нарушение авторских прав. Мы поможем в написании вашей работы!

0.187 с.