Всем привет, я просто Фрея.
В серии статей "Первый простой мануал" я расскажу вам все, что я знаю о создании сайтов и их наполнении.
Если после прочтения первой и этой статьи, вам покажется, что все это очень сложно, стоит поставить лайк и задать мне свой вопрос. Я помогу вам в любой мелочи.
В этой статье мы продолжаем работу над разбором элементов сайта.
Сегодня рассмотрим - Что вообще такое HTML?
Продолжаем проект в папке, которую создали в предыдущей статье. Открываем файлик index.html через Bracets.
Рассмотрим его структуру.
- Первая строка: <!DOCTYPE html>
DOCTYPE - тип документа; html - сам документ
- Вторая строка: <html lang="en">
html - тег html (По подробнее разберем в следующих статьях, что такое тег); lang="en" - атрибут применяется, чтобы указать язык, на котором написан текст внутри текущего элемента.
- Третья строка: <head>
head - с английского: голова. Это шапка внутри html, которая не видна на сайте, и отвечает за подключение других файлов к этому документу. Так же за указание кодировки и заголовка вкладки в самом браузере. Использовать этот раздел по другой причине - не рекомендуется. Сайт просто не будет работать должным образом.
- Четвертая строка: <meta charset="UTF-8">
Эта строка сообщает страничке, что мы пишем код в кодировке UTF-8. Это подсказка для самого браузера и верстальщиков.
UTF-8 является лишь представлением Юникода в 8-битном виде.
- Пятая строка: <title>Document</title>
Это название нашей вкладки. Много текста туда не поместиться, всегда нужно это учитывать. Сейчас можно написать: между тегами: Мой первый сайт
Вот такая у вас должна получится строчка 5: <title>Мой первый сайт</title>
- Шестая строка: </head>
Как вы могли заметить, у пятой строки тоже был похожий тег. Есть <title> и </title>. Их отличие в присутствии косой черты вправо. Косая черта помогает любому тегу закрыться. Это нужно для корректной работы каждого тега, а так же удобно для нас - для редактирования. Всегда видно где тег начался, и где закончился. Так же и с этой строкой - здесь тег <head> закрылся </head>.
- Седьмая строка: <body>
Здесь мы будем писать весь код страницы. Давайте сразу посмотрим на примере.
Внутри тега <body> пишем: h1 и нажимаем Tab. Тег сразу же откроется и закроется. В сам тег пишем Hello world!. Строка должна выглядеть так: <h1>Hello world!</h1>
Сразу же используем наше расширение для Bracets - Beautify: нажмем - Ctrl+Shift+B.
Теперь посмотрим что появилось на самой страничке сайта. Зайдите в свою папку проекта и кликните два раза на файлик index.html.
Сверху видно на вкладке название, которое мы записали в тег <title> - Мой первый сайт. А на всей страничке видно Hello world!
Поздравляю, наша страничка создана и теперь понятно зачем мы должны создавать в каждом html документе структуру из 10 строк перед началом работы.
____________________/FreyaHoKelly\_________________
На сегодня это всё. Дайте мне знать если хотите продолжения этой темы. Или может есть предложение, как-либо сделать удобнее для вас? Напишите в комментариях.
Всем спасибо за внимание, хорошего дня!