Как создать HTML страницу

HTML страница создается с применением тегов, поэтому сначала я объясню, что такое тег. Тег – это команда на веб-странице, которая говорит браузеру что необходимо сделать. Тег состоит из знаков < и >. Примером тега является <html>, о котором вы узнаете ниже.

  • 5. Вложенные HTML-теги
  • 6. HTML-теги синглтона
  • 7. Список всех тегов HTML
  • Создайте свою первую веб-страницу с помощью HTML

    Откройте Блокнот, Notepad++ или любой другой текстовый редактор и напишите или скопируйте в него следующий код:

    <!DOCTYPE HTML> 
    <html lang="ru">
    <head>
    <meta charset="UTF-8">
    <title>Моя первая веб-страница</title>
    </head>
    <body>
    Привет, мир!
    </body>
    </html>

    Рассмотрим код построчно

    Мы только что создали страницу, и написали написали на ней “Привет, мир!” с помощью HTML разметки. Давайте рассмотрим этот код построчно.

    <!DOCTYPE HTML> Первое, что нужно сделать – это сообщить браузеру, какую версию HTML вы используете. В нашем случае, это последняя версия – HTML5. Вы должны всегда использовать этот тег.
    <html lang=”ru”> Все это говорит о том, что в HTML-документе указан язык, который является русским. Если вы будете создавать сайт на другом языке, то необходимо будет указать соответствующий язык.
    <head> Отмечает начало документа HTML, так называемой головой. Этот раздел не отображается на веб-странице, но содержит важную информацию о странице.
    <meta charset=”UTF-8″> Обозначает кодировку символов: UTF-8
    <title>Моя первая веб-страница</title> Заголовок страницы, можно увидеть на вкладке браузера и при добавлении закладки сайта в избранное. Вы можете написать любое название, между тегами заголовка. Последний тег </title> (является завершающим) и означает, что заголовок тега тут заканчивается. Вы можете завершить любой тег, поставив косую черту / между знаками <>.
    </head> Закрытие тега головы.
    <body> Тут начинается раздел тела. Тут вы будете размещать все, что будет отображаться на видимой части страницы.
    Привет, мир! Видимая часть в веб-браузере.
    </body> Закрывающий тег тела.
    </html>  Завершающая часть нашей страницы.

    Находясь на любой веб-странице нажмите Ctrl + U в Google Chrome, и вы увидите HTML-код. Откройте несколько веб-сайтов и посмотрите их HTML-код.

    Откройте ваш HTML-документ в веб-браузере

    Следующее, что нужно сделать, это сохранить первую веб-страницу на жестком диске. Нажмите Файл, затем Сохранить. Измените расширение .txt вашего нового файла на .html, например index.html. Можно создать специальную папку, чтобы все ваши веб-страницы были организованы.

    Убедитесь, что вы сохранили свой файл веб-страницы с расширением .html, иначе это будет текстовый документ, а не веб-страница. Нажмите «Сохранить». Перейдите в папку и откройте его. Дважды щелкните файл, который вы только что создали, и он должен выглядеть примерно так.

    Как создать HTML страницу

    Поздравляю! Вы создали свою первую локальную веб-страницу, отображающую статическое сообщение в браузере!

    Использование HTML-тегов

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

    <u>Текст с подчеркиванием.</u>

    Как вы видите, когда мы добавляем тег <u>, он начинает подчеркивание. А тег </u>, заканчивает подчеркивание. Как я и писал выше, если вы добавляете в тег обратную косую черту /, то она закроет этот тег.

    Как сделать текст жирным

    <strong>Жирный текст</STRONG>

    Как сделать текст курсивом

    <em>Курсив</em>

    Вложенные HTML-теги

    Вы можете даже поставить все 3 тега одновременно!

    <b><u><em>Курсив, подчеркнутый, жирный.<em/></u></b>

    На примере используется более одного тега одновременно – это и называется «Вложенные теги». Некоторые браузеры могут некорректно отображать вашу страницу, и это называется перекрывающимися тегами.

    Это пример вложенных тегов:

    <strong><em><u>Привет!</u></em></strong>

    Теперь пример перекрывающихся тегов:

    <strong><em><u>Привет!</strong></em></u>

    Вы видите разницу? Хорошее правило, которому нужно следовать: это то, что тэг, который ты начинаешь первым – заканчиваешь последним. А тэг, который ты начинаешь последним, ты заканчиваешь первым. Все еще в замешательстве? Не беспокойся, ты привыкнешь к этому, продолжай практиковаться.

    HTML-теги синглтона

    Мы узнали, что каждый HTML-тег должен быть закрыт после открытия: <tagname></tagname>.

    Есть несколько специальных элементов, которым не нужен закрывающий тег, потому что они никогда не содержат ничего другого. Например, горизонтальная линия <hr/> никогда не содержит абзаца, изображений или чего-либо еще. Мы называем эти тэги Singleton, и закрывающий слеш пишется так: <tagname attribute = “parameter”/>

    Список одноэлементных HTML-тегов: area, base, br, col, embed, hr, img, input, link, meta, param, source.

    Список всех тегов HTML

    Посмотрите в списке все HTML-теги с примерами. Это поможет вам понять, какие теги использовать, а какие избегать, так как некоторые устарели.

    Просмотров:

    Добавить комментарий