Создаем где-нибудь папку, в которой будем хранить работы
Теперь запускаем Visual Studio Code, тыкаем Open Folder…
и выбираем папку
откроется что-то такое
создаем html файлик
Запускаем файлик в браузере, проще всего прямо из папки
И так первое что можно сделать это написать какое-нибудь слово
Удаленка
прямо в файлике
нажать Ctrl+S чтобы сохранить файл и перегрузить страничку в браузере
видим
можно предложение написать
Хочу на удаленку
можно в две строки
Хочу
на удаленку
ой, что-то не так. Мы ж в две строки написали, а вывелось в одну. Как так?
Дело в том, что html переносы строк игнорирует и если хочется сделать перенос строки надо об этом явно ему сказать, делается это так:
Хочу<br>
на удаленку
так как писать треугольные скобочки лениво можно писать то что внутри них и тыкать TAB или Enter
теперь все четко
Если тебе уже надоело тыкать перегрузку страницы каждый раз. То сделай следующее
ждем
в браузере по умолчанию откроется ссылка вида (у тебя может быть чуток другая)
http://127.0.0.1:5500/test01.html
если надо открыть в другом браузере просто скопируй ее туда.
дело в том, что у нас не совсем валидный код, по идее все что мы пишем должно писаться внутри базовой разметки html.
Добавить ее очень легко, пишешь восклицательный знак и тыкаешь TAB, а заем все что мы пишем вставляешь между <body> и </body> вот так
и теперь проверяем авто перезагрузку. На всякий еще раз кликни на имя файла правой кнопкой и выбери пункт меню Open with Live Server и там, где была открыта ссылка http://127.0.0.1:5500/test01.html перегрузи страницу.
И теперь каждый раз как ты будешь сохранять файл он автоматом будете перегружать страницу
еще html игнорирует больше более одного пробела, а также то что мы делали внутри body тоже особо не влияют на отображение, можно даже так сделать
Хочу <br>
на удаленку
это все равно нарисуется так
в случаях, когда вот очень-очень хочется больше одного пробела используют специальные конструкции начинающиеся с амперсанда &
Хочу <br>
на удаленку
– это явное указание на вставить пробел (No-Break Space), тут я целых 4 вставил
но в природе так делать не рекомендуется, и вообще людей которые так делают не очень любят…
есть другие способы добавить пространства, но о них позже.
Вот так штучка которая выглядит как <br> называется тегом. Большинство тегов парные.
То есть, есть открывающий тег, содержимое тега и закрывающий тег. Например, я могу явно выделить какую-то часть текста жирным шрифтом:
Хочу <br>
на <strong>удаленку</strong>
стало быть
<strong> – открывающий тег</strong> – закрывающий тег, выглядит как открывающий только со слешем перед названиемникто не запрещает вставлять теги внутри других тегов. То есть я, например, могу весь текст выделить жирным текстом и причем оставить внутри перенос на новую строку
<strong>Хочу <br>
на удаленку</strong>
более красиво писать так:
<strong>
Хочу <br>
на удаленку
</strong>
получим вот такое:
В общем существует джентельменский набор тегов для оформления кода, которые вроде как каждый должен знать.
Но на деле используются они только когда нет времени заморачиваться со стилями. Плюс иногда для семантической верстки. Собственно, вот они:
<h1>Заголовок первого уровня</h1>
<h2>Второго уровня</h2>
<h3>Третьего</h3>
<h4>4-го</h4>
<h5>5-го (помоему никто такие не используют)</h5>
<h6>пффф, шестой...</h6>
попробуй сама писать теги, типа набираешь h1 и тыкаешь TAB и внутри чего-нибудь пишешь
он такой комбинированный тег. Там есть открывающий тег ol (от англ. ordered list), внутри которого пишутся вложенные li теги (от англ. list item)
<ol>
<li>Первый пункт меню</li>
<li>Второй пункт меню</li>
<li>Третий пункт меню</li>
</ol>
он сам циферки добавляет:
тоже что и выше только без циферок, и тег называется ul (unordered list)
<ul>
<li>Не могу понять какой я пункт меню, может второй?</li>
<li>А я наверное четвертый</li>
<li>Ну я то точно первый</li>
</ul>
рисует точечки вместо циферок
<strong>Я просто сидел на самоизоляции</strong>
<br>
<em>Помогите, падаю ООО</em>
<br>
<u>Иду по рельсам</u>
<br>
<strike>Я передумал тут чего-то писать</strike>
обрати внимание, что тут я вставляю br теги чтобы у меня каждый элемент был с новой строки.
Кстати часто вместо br используют тег p.
Если br – это разрыв строки, то p – это начало нового абзаца
<strong>Я просто сидел на самоизоляции</strong>
<p>
<em>Помогите, падаю ООО</em>
<p>
<u>Иду по рельсам</u>
<p>
<strike>Я передумал тут чего-то писать</strike>
абзацы сильнее разрывают строки
И так, собственно база для того что бы что-то можно было писать уже есть. Попробуй теперь сделать 1-ое задание
Дан текст
Песенка про елочку В лесу родилась ёлочка, В лесу она росла. Зимой и летом стройная, Зелёная была. Метель ей пела песенку: - «Спи, ёлочка, бай-бай!» Мороз снежком укутывал: - «Смотри, не замерзай!» Теперь я умею Использовать заголовочные теги h1, h2 etc. Выделять цвет жирным шрифтом через strong Выделять цвет наклонным шрифтом через em Использовать разрывы строк br и абзацы p
сверстать его как на картинке [добавил чуток уточнений чтобы было проще]
