Если посмотреть на статистику яндекс вордстат, то можно увидеть, что аббревиатура HTML в сочетании с другими словами например (html программирование) имеет запросов на 13.12.19 года 3423 запроса в месяц. Так как - эта тема вызывает такой спрос, а я уже понемногу начал вникать в нее, то решил и с вами поделиться тем, что узнал на курсах по веб программированию в учебном центре ЧОУ ДПО «УЦ «Азимут» города Рязани.
В данный курс вошло:
- Гипертекстовая разметка HTML
- CSS - таблица каскадных стилей
- Блочная верстка
- CMS - система управления контентом на движках Joomla и WordPress
- Создание интернет магазина через JoomShopping
- Основы Photoshop и CorelDRAW
- Подключение соц сетей через joomsocial
Преподавателем данного учебного центра, уже более 10 лет является Акимов Петр Александрович, кроме данного курса, у него есть и еще ряд других дисциплин с ними вы можете ознакомится на официальном сайте azimut62.ru
Знакомство с гипертекстовой разметкой HTML - Первый учебный день
В первый учебный день мы познакомились с гипертекстовой разметкой HTML, где познакомились с основными тегами и научились на практике через редактор Notepad++ с помощью определенных тегов - работать с текстом а именно:
- Выделять жирным
- Подчеркивать
- Менять цвет
- Делать шрифт курсивом
Давайте рассмотрим, как это делается на практике
Для удобства я написал определение каждого тега, внизу) Посмотрите внимательно, за что отвечает каждый тег, чтобы при необходимости можно было, что-то в дальнейшем исправить )
<!DOCTYPE html>
<html>
<head>
<title>
Моя первая страничка в интернете!
</title>
</head>
<body>
<h1>Стихи</h1>
<font size ="7" face="Arial" color="red">
<i>Маленькой елочке <br/></i>
<b>Холодно зимой <br/></b>
<u>Из лесу елочку <br/></u>
взяли мы домой <br/>
</font>
<font size ="10" face="Arial" color="Lime"> Альфонс садится на коня;<br/> </font>
<font size ="7" face="Arial" color="SteelBlue"> Ему хозяин держит стремя.<br/> </font>
<font size ="5" face="Arial" color="Blue">"Сеньор, послушайтесь меня:<br/> </font>
</font>
<i>Пускаться в путь теперь не время,<br/></i>
<b>В горах опасно, ночь близка,<br/></b>
<u>Другая вента далека.<br/></u>
<font size ="12" face="Arial" color="DarkMagenta">"Сеньор, послушайтесь меня:<br/> </font>
Останьтесь здесь: готов вам ужин;<br/>
В камине разложен огонь;<br/>
<u>Постеля есть - покой вам нужен,<br/></u>
А к стойлу тянется ваш конь".<br/>
<hr/>
</body>
</html>
Примечание: документ (html) состоит из тегов и делится на две части голову (<head>) и (тело <body>). При сохранении документа следует использовать кодировку utf8
- <!DOCTYPE html> определяет тип документа
- <html> означает документ начался. </html> означает документ закончился - парный тег
(index)- главная страница (.html) - рассширение файла писать всегда маленькими буквами и цифрами
- <p> абзац </p> парный тег
- </font> изменяет (цвет, фон, размер) (/слеш) должен стоять слева иначе продолжение действий будет следовать - парный тег
- <span> вносит изменения в шрифт
- <br/> перенос на новую строку - аналог ентер
- <b>жирный</b> парный тег
- <i>курсив</i>
- <u>подчеркнутый</u>
- size ="7" указывает размер
- face="Arial" указывает цвет
- color="Lime"> какой будет цвет
Теперь, чтобы убедиться в работоспособности данных тегов и закрепить все на практике, скопируете код между линиями от начала <!DOCTYPE html> до </html> в какой нибудь блокнот, переименуйте его (index.html) и у вас должна при нажатии - получиться следующая картина...)
Рис.1
Вывод: казалось бы, что тут много всяких символов, которые могут сразу напугать, но стоит в них немного разобраться и тогда становится даже интересно…:) Напишите в комментариях получилось у вас сделать такую страничку как показано выше... Также не забывайте делать репост, чтобы получить шанс выиграть подарок!