Что означает гипертекстовая HTML разметка l Азы для чайников

8 марта 2023
154
Гипертекстовая HTML разметка с нуля для чайников

Если посмотреть на статистику яндекс вордстат, то можно увидеть, что аббревиатура HTML в сочетании с другими словами например (html программирование) имеет запросов на 13.12.19 года 3423 запроса в месяц. Так как - эта тема вызывает такой спрос, а я уже понемногу начал вникать в нее, то решил и с вами поделиться тем, что узнал на курсах по веб программированию в учебном центре ЧОУ ДПО «УЦ «Азимут» города Рязани.

В данный курс вошло:

  1. Гипертекстовая разметка HTML
  2. CSS - таблица каскадных стилей
  3. Блочная верстка
  4. CMS - система управления контентом на движках Joomla и WordPress
  5. Создание интернет магазина через JoomShopping
  6. Основы Photoshop и CorelDRAW
  7. Подключение соц сетей через 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

Пример - изображение к статье

Вывод: казалось бы, что тут много всяких символов, которые могут сразу напугать, но стоит в них немного разобраться и тогда становится даже интересно…:) Напишите в комментариях получилось у вас сделать такую страничку как показано выше... Также не забывайте делать репост, чтобы получить шанс выиграть подарок!

Написать комментарий