12-01-2021, 20:12

Урок №1. Введение в HTML

 Чтобы создать свой собственный сайт, совсем не обязательно быть программистом. Даже ученикам начальной школы вполне под силу создать сайт класса и поддерживать его в рабочем состоянии.

Для этого надо изучить язык HTML!

Что такое HTML?

HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — язык, с помощью которого описываются все элементы веб-страниц. Веб-страницы открываются специальной программой-браузером. 

Браузеры "читают"  документ на язык HTML и отображают его в  удобной для человека форме.

HTML - это не язык программирования, в общепринятом смысле. Это просто пояснения для браузера каким образом выводить ту или иную информацию на экран.

Если ваши дети увлекаются информатикой, загляните в Айтишку!

Айтишка - компьютерные курсы для детей от 11 лет в Набережных Челнах. Вы сможете записаться на групповые или индивидуальные занятия по программированию на сайте https://aytishka.ru/kursy.

Создаем HTML-документ

Вы думаете, что создать html-документ сложно? А вот и нет.

Если вы уже умеете читать и писать, значит у вас все получится!

Создавать веб-странички можно в самом обычном компьютерном Блокноте.

Для того, чтобы создать свой собственный первый в жизни сайт достаточно уметь набирать текст в Блокноте.

Открываем Блокнот и набираем текст, скажем, такой:

 

Для того, чтобы превратить эту строчку из обычного текстового документа в HTML-документ, мы должны его разметить с помощью тегов.

Теги - это специальные команды для браузера (программы просмотра интернет-страниц), поясняющие ему, как и в каком виде выводить текст.

Для начала мы должны показать, что это не просто текст, а HTML-документ, поэтому мы должны взять его в теги:

    

Тег <HTML> означает начало документа, а тег </HTML> - конец документа.

Большинство тегов HTML-языка используются парами - вначале идет открывающий тег, затем закрывающий, который отличается только наличием косой черточки (слэш) вначале. Теги обязательно заключаются в угловые скобки, типа знаков больше-меньше.

Сохраняем наш документ.

Для этого вначале создаем папку, в которой будем хранить все файлы нашего будущего сайта. Назовем её "Уроки HTML".

Затем в Блокноте даем команду: Файл - Сохранить как...".

Выбираем нашу папку и задаем имя файлу. В принципе, имя можно дать любое, но принято основной файл называть index.html, то есть имя - index, а расширение имени - html (можно и три буквы htm).

При сохранении нужно выбрать правильную кодировку документа. В специальном окошке найдите кодировку UTF-8.

Сохранение документа 

Обязательно проверьте, правильно ли сохранился ваш документ, а то иногда можно увидеть и такое имя - index.html.txt

Вот и все.

Если сейчас сделаем двойной щелчок по файлу index.html, он откроется не в Блокноте, а в браузере. И мы увидим следующую картинку:

Первый сайт Вот и первый сайт!!!

Структура html-документа

Конечно же, структура html-документа сложнее, чем в нашем первом примере.

<HTML>

<HEAD>
  Блок вспомогательной и заголовочной информации
  <ТIТLЕ>Моя страничка </ТIТLЕ>
</HEAD>

<BODY>
  Основной текст
</BODY>


</HTML>

Web-страница разделяется на две логические части: заголовок и содержание (тело).

Заголовок заключается между тегами <HEAD>и </HEAD>.

В заголовке html - документа содержится название странички, а также справочная информация (например, тип кодировки), которые появятся в рамке окна программы просмотра.

Название странички располагается между тегами <TITLE> и </TITLE>. Например, <ТIТLЕ>Моя страничка </ТIТLЕ> .

Основной текст – это то, что будет выводиться на экран программой просмотра - текст, картинки, видеофрагменты.

Основной текст заключается между двумя тегами и <BODY> и </BODY>.

Внесем изменения в наш сайт.Для этого откроем файл index.html

Кстати, для того, чтобы открыть html-документ, нужно щелкнуть по нему правой кнопкой мыши и в появившемся меню выбрать пункт: Открыть с помощью - Выбрать программу - Блокнот.

Или можно  открыть Блокнот, в нем выбрать пункт Файл - Открыть, затем внизу выбрать пункт "все файлы", после этого Блокнот "увидит" файлы с расширением html.

Допишем теги структуры документа:

 

 Редактируем документ и сохраняем под тем же именем.

Открываем в браузере и видим изменения. появилось название веб-странички.

первый сайт 

Вот и все для первого урока.

Задание для самостоятельной работы

Создайте новую веб-страничку. Назовите ее "Моя биография".

Напишите в основном тексте информацио о себе. Как вас зовут, сколько вам лет, чем увлекаетесь.

Сохраните веб-страничку под именем index1.html


Уважаемые читатели!

Все материалы с сайта можно скачивать абсолютно бесплатно. Все материалы проверены антивирусом и не содержат скрытых скриптов.

Материалы в архиве не помечены водяными знаками!

Если материал нарушает чьи-то авторские права, просьба написать нам по обратной связи, указав авторство материала. Мы обязуемся либо убрать материал, либо указать прямую ссылку на автора.

Сайт пополняется материалами на основе бесплатной работы авторов. Eсли вы хотите отблагодарить их за работу и поддержать наш проект, вы можете перевести любую, не обременительную для вас сумму на счет сайта.
Заранее Вам спасибо!!!




Уважаемые посетители! Все комментарии проходят модерацию. Поэтому ваше сообщение появится через некоторое время.

  1. #1  Андрей - 25 июня 2021 20:07
    Рекомендую канал школа программирования Пиксель.
    Мой ребенок увлекся после просмотра первого же видео.
    Всем советую!
Добавление комментария
Имя:* E-Mail: