Здравствуйте, уважаемые читатели блога. С этой статьи мы начнем изучать основы языка HTML.
Вам скорей всего уже известно, что основным языком Internet-а является язык гипертекстовой разметки HTML (HyperText Markup Language)
. В этой статье мы узнаем базовые понятия HTML и научимся создавать простейшие WEB-страницы.
Начнем с самого главного, рассмотрим как работает сама всемирная паутина — Internet
. Для получения веб-страниц, вы создаете файлы, написанные на языке HTML, и помещаете их на веб-сервер. После этого любой браузер установленный на устройстве с доступом в Интернет, будь то компьютер, телефон или планшет, может отыскать ваши веб-страницы.
Веб-сервер
— это обычный компьютер со специальным программным обеспечением, имеющий доступ в Интернет. Он непрерывно ожидает запросов от браузеров на веб-страницы, изображения, аудио- и видео-файлы. Получив запрос на один из таких ресурсов, сервер ищет его и высылает браузеру.
Браузер
— это специальная программа, предназначенная для просмотра веб-сайтов, например Internet Explorer. При помощи браузера вы бродите по сайтам, щелкая по ссылкам. Любой такой щелчок заставляет браузер сделать запрос на html-страницу web-серверу, получить ответ и отобразить страницу в своем окне. Именно при отображении страницы начинает работать язык HTML, он сообщает браузеру все о структуре и содержимом web-страницы. С помощью команд — тегов
, HTML указывает браузеру, где начинаются абзацы текста, какая часть текста является заголовком и указывает куда вставлять таблицы, и даже картинки. А теги это слова в угловых скобках, например
.
Срочно нужен интернет-магазин, а времени на изучение HTML, CSS, PHP и других технологий нет. Тогда просто можете арендовать интернет магазин с полностью реализованным функционалом и оптимизацией под поисковые системы.
Язык HTML и его теги
Первая версия языка HTML появилась еще в 1992 году. На момент 2013 года разрабатывается спецификация новой версии HTML под номером 5. Разработкой данной спецификации занимается организация World Wide Web Consortium, или сокращенно W3C. Организация W3C занимается разработкой и других Web-стандартов. Ознакомится с этими стандартами вы можете на их сайте www.w3.org
. Кстати, Многие Web-браузеры уже поддерживают некоторые возможности HTML 5.
Предлагаю начать изучение языка HTML сразу с примера. Поэтому давайте создадим нашу первую Web-страничку. Для создания WEB-страниц подойдет любой текстовый редактор. Я предлагаю для начала воспользоваться встроенным в Windows Блокнотом (Notepad)
(вообще в дальнейшем для редактирования html-кода я советую использовать ). Найти его можно: «Пуск->Все программы->Стандартные->Блокнот». Давайте создадим страничку об автомобилях. Итак, откроем Блокнот и наберем в нем текст:
Пример Web-страницы
Сайт об автомобилях.
Добро пожаловать на наш автомобильный сайт. Здесь Вы найдете много интересных и полезных статей об автомобилях. На сайте есть описания многих импортных и отечественных автомобилей.
Далее сохраним созданную web-страницу в файл с именем index.html. При этом в диалоговом окне сохранения файла необходимо задать кодировку UTF-8 и заключить имя файла в кавычки, иначе Блокнот добавит к нему расширение txt, и наш файл получит имя index.htm.txt:
Теперь осталось открыть созданный файл в браузере и посмотреть на результат. Для этого можно воспользоваться поставляемым в составе Windows браузером Microsoft Internet Explorer, либо любым другим установленным на вашем компьютере браузером, щелкнув два раза мышкой по файлу index.html или перетаскиванием файла на значок браузера. Открываем и видим примерно такой результат:
Таким образом, мы создали Web-страницу в Блокноте, хоть и немного невзрачную, но уже содержащую большой заголовок и абзац текста, который автоматически разбивается на строки и содержит фрагмент, выделенный полужирным шрифтом.
Что такое тег?
Теперь поговорим подробнее о структуре страницы. Рассмотрим фрагмент: Сайт об автомобилях.
Здесь мы видим текст, который отображается на странице как заголовок, заключенный в теги и . Что же такое тег в html языке?
Тег HTML
- это обычные слова и символы, заключенные в угловые скобки, например ,
, . Так тег является открывающим тегом, тег закрывающим тегом, а текст между ними называется содержимым тега. Также тег и тег называются парными тегами. Вместе открывающий тег плюс содержимое плюс закрывающий тег образуют элемент html-документа. Бывают еще элементы состоящие из одного открывающего тега:
Так парный тег определяет элемент заголовка первого уровня. Всего существует шесть уровней заголовков, это элементы — .
Элементы бывают блочные и строчные (текстовые). Блочные элементы
осуществляют структурное форматирование страницы. Блочные элементы всегда отображаются на странице с новой строки и имеют отступ от соседних элементов. Строчные элементы
осуществляют непосредственное форматирование текста или логическое форматирование. Элемент является блочным элементом.
На этом у меня все!!! До встречи в следующих постах!
Тема урока: Разработка web-сайтов с использованием
языка разметки гипертекста HTML.
Основные цели обучения:
формирование познавательного интереса, развитие интеллектуальных и творческих способностей в области Web-технологий.
Задачи.
Обучающие:
сформировать систему знаний по технологии создания Web-сайтов;
обучить языку разметки гипертекста HTML для создания сайтов;
познакомить с этапами проектной деятельности.
Развивающие:
развить творческие способности к самовыражению, посредством создания сайтов;
сформировать умение сопоставлять, искать аналог и осуществлять перенос знаний в новую предметную область Web-технологий;
развить навыки работы на компьютере
Воспитательные:
воспитать добросовестное отношение к работе;
воспитать чувства товарищества и личной ответственности за созданный сайт;
воспитать художественный и эстетический вкус;
воспитать грамотного и корректного пользователя сети Интернет.
Ход урока
1. Организационный момент.
Человеческая доброта - самое удивительное явление в мире. Попробуйте с помощью улыбки передать своё настроение. Я вижу настроение у вас хорошее, деловое, итак, за работу.
2. Актуализация знаний и умений
-Ребята, скажите, что мы изучали на прошлых уроках?
-Что такое
Веб-страница
? (Веб-страница
(англ. Web page
) - документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера)
- Что представляет собой типичная веб-страница?
(Типичная веб-страница представляет собой текстовый файл в формате HTML, который может содержать ссылки на файлы в других форматах
- Что такое
HTML
– документ?
(HTML
– документ - это файл, содержащий текст и команды форматирования, предназначенный для размещения на
web
-серверах в сети Интернет.
HTML
– документ создается с помощью языка гипертекстовой разметки или
HTML
– кода.)
-Что является основным элементом разметки
HTML
– кода? (основным элементом разметки
HTML
– кода является
ТЭГ.)
3. Выполнение теста:
Тест по теме «
Язык разметки гипертекста HTML
»
1. Каким тегом объявляется web-страница?
4) body
body
2. Каким тегом объявляется заголовок web-страницы?
4) body
body
3. В какой тег заключается основное содержание web-страницы?
4) body
body
4. В какой тег заключается название web-страницы?
4) body
body
5. Какой код для пустой web-страницы правильный?
Вариант1,4.
1. HTML (HYPER TEXT MARKUP LANGUAGE) является:
1) Графическим редактором
2) Одним из средств при создании Webстраниц
3) Системой программирования
4) Системой управления базами данных
2. Программа для создания Webстраницы с использованием языка HTML:
1) MS Word
2) Paint
3) KWrite
4) Калькулятор
3. Webстраница (документ HTML) представляет собой:
1) Текстовый файл с расширением txt или doc
2) Текстовый файл с расширением htm или html
3) Двоичный файл с расширением com или exe
4) Графический файл с расширением gif или jpg
1) Сервер
2) Протокол
3) HTML
4) Браузер
5. Гипертекст это:
1) Текст очень большого размера
2) Текст, в котором используется шрифт большого размера
3) Структурированный текст, где возможны переходы по выделенным меткам
4) Текст, в который вставлены объекты с большим объемом информации
1)
2)
3)
4)
7. Какие теги определяют видимую часть документа?
1)
2)
3)
4)
8.В какой тэг помещают название webдокумента?
1)
2)
3)
4)
9. Какие тэги задают размер заголовка?
1)
2)
3)
4)
10. Какие тэги создают гиперссылку на другие документы?
11. Какой вариант является правильно организованной гиперссылкой?
1)
2)
3)
4)
1)
IMG HREF=”simple.gif”
2) A HREF=”simple.html”
3) A SRC=”simple.html”
1)
2)
3)
4)
1)
2)
3)
4)
13. Какой тэг добавляет изображение в HTML документ?
14. какие теги способны изменить цвет фона документа?
1) …
2)
3) …
4) ..
Тест по теме «Основы языка разметки гипертекста HTML»
Вариант2,5.
1. Программа для создания Webстраницы с использованием языка
HTML:
1. MS Word
2. Paint
3. KWrite
4. Блокнот
2. Webстраница (документ HTML) представляет собой:
1.Двоичный файл с расширением com или exe
2.Графический файл с расширением gif или jpg
3.Текстовый файл с расширением txt или doc
4.Текстовый файл с расширением htm или html
3. HTML (HYPER TEXT MARKUP LANGUAGE) является:
1. Одним из средств при создании Webстраниц
2. Системой программирования
3. Графическим редактором
4. Системой управления базами данных
Протокол
4. Программа для просмотра гипертекстовых страниц называется:
1. Сервер
2. HTML
3. Браузер
4.
5. Гиперссылки на Webстранице могут обеспечить переход...
1. на любую webстраницу данного региона
2. на любую webстраницу любого сервера Интернет
3. только в пределах данной webстраницы
4. только на webстраницы данного сервера
6 . Каким тегом задается вставка изображения на webстраницу?
1.
2.
Еще статьи из этой рубрики