Всем салют, друзья!
Это первый урок знакомства с html. Его цель ознакомление с html-кодом страниц сайта, понять вообще как он выглядит, как его посмотреть. Погнали!.
Как посмотреть html код страницы
В любом браузере (например, Firefox, Google Chrome, Opera) вы можете воспользоваться комбинацией CTRL+U, или же нажать правой кнопкой и посмотреть исходный код Вы увидите такую картинку. Каждая страница сайта, которая есть в интернете, имеет свой код.
Возможно после того как вы открыли html-код сайта, на вашем лице появился испуг, потому что многое из написанного кажется непонятным и сложным. Но это всего лишь иллюзия. На самом деле, разметка HTML довольно простая (скорее всего вы даже проходили это на уроках информатики в школе).
Суммарное число html тегов не так уж и велико (по факту используется лишь 10-15 тегов). Плюс к тому же все страницы одного сайта очень похожи друг на друга (отличия заключаются лишь в контентной части). Предлагаю рассмотреть простой пример создания html-страницы, чтобы начать наше изучение.
Создание простого html-документ в блокноте
1. Для того чтобы сделать свою первую html страницу откройте обычный блокнот и сохраните его под каким-то именем (например, index.html). Тип файла необходимо выбрать "все файлы", а после имени обязательно дописать ".html" или ".htm", но лучше придерживаться первого варианта (хотя разницы нету).
По итогу у вас получится файл "index.html". В принципе это уже можно назвать html документом, однако в нем ничего нету, поэтому продолжаем и переходим к шагу два - наполнение страницы.
2. Отрываем созданный файл через блокнот и вписываем в него следующее (можете просто скопировать):
<html>
<head>
<title>Пример создания страницы html в блокноте</title>
</head>
<body>
У меня получилось сделать первую страницу!
</body>
</html>
Сохраняем файл. Открываем index.html с помощью любого браузера, если все сделанно правильно в отрывшейся вкладке должна появиться надпись "У меня получилось сделать первую страницу!", а в заголовке "Пример создания страницы html в блокноте". Как видите, ничего сложного нет, все просто.
Сейчас немного поговорим о структуре любого html-документа.
Структура html-документа
1. Любой html документ должен иметь теги
<html>
...
</html>
<html> — открывающий тег документа (располагается самым первым),
</html> - закрывающий тег документа (должен быть самым последним)
Впринипе в html практически все теги состоят из двух элементов: открывающий <ТЕГ> и закрывающий </ТЕГ>. (отличие думаю вы поняли - /)
Браузеры не воспринимают регистры, поэто с большой буквы или маленькой вы пишете не имеет абсолютно никакого значения. То есть, если Вы напишите так:
<HtMl>
...
</hTMl>
То это будет равносильно тому, что было написано чуть выше, но играть с регистрами букв не рекомендуется. Как минимум потому, что это будет считаться плохой валидацией сайта . Придерживайтесь одного из двух стилей:
все теги с маленькой буквы, либо с большой (лучше с маленькой).
2. Любой html документ можно разделить на две части
Заголовок страницы. Это невидимая для пользователя часть страницы, не является обязательной (однако, для продвижения сайта и оптимизации кода страницы она очень важна). Синтаксис заголовочной части:
<head>
...
заголовочные теги
...
</head>
Между тегами <head> и </head> располагаются следующие элементы:
· мета теги html (meta)
· заголовок страницы <title>
· подключаемые яваскрипты (JavaScript)
· подключаемые стили (link) и т.д.
Все эти элементы подробно разобраны в специальном уроке по заголовочным тегам »
Тело страницы (или основная часть). Является видимой для пользователя частью (она располагается в тегах body). Её синтаксис:
<body>
...
Здесь располагается контент страницы
...
</body>
<body> — открывающий тег тела страницы. Сразу после него идет то, что видит пользователь: дизайн и контент страницы. Тело и, собственно, весь html-документ должны заканчиваться последовательностью:
</body>
</html>
Примечание: заголовочные теги обязательно должен располагаться перед телом страницы! Сразу после закрывающего тега </head> должно идти основная часть страницы.
Уважаемый читатель, я думаю, что теперь Вы имеете небольшое представление о html-документе. Это лишь первый разработанный мною урок, в планах на будущее разработать целый курс который будет включать в себя 21 урок по следующим темам:
Урок 1. Знакомство с html
Урок 2. Пример создание простой html страницы
Урок 3. Самые основные html теги
Урок 4. HTML тег <style> - подробное описание с примерами
Урок 5. HTML тег <a> - подробное описание с примерами
Урок 6. HTML тег <table> - подробное описание с примерами
Урок 7. HTML тег <img> - подробное описание с примерами
Урок 8. HTML тег <form> - подробное описание с примерами
Урок 9. HTML тег <div> - подробное описание с примерами
Урок 10. Описание заголовочных тегов html
Урок 11. Фреймы (теги <frame>, <frameset>, <noframe>, <iframe>)
Урок 12. Атрибут position в HTML
Урок 13. HTML тег <ul> - маркерованный список
Урок 14. HTML теги <h1>-<h6> - заголовочные теги внутри страницы
Урок 15. Элементы тега <form>: радиокнопки, списки, флажки, текстовые поля
Урок 16. HTML тег <embed>
Урок 17. HTML тег <object>
Урок 18. HTML тег <!-- --> (комментарии)
Урок 19. <!DOCTYPE> в html
Урок 20. HTML тег <ol> - нумерованный список
Урок 21. HTML тег <font>
Если вам интересна эта тема, прошу вас оставить комментарий и лайк, при достаточной активности я начну разработку этого курса, всем спасибо!