JavaScript для детей. Самоучитель по программированию. Ник Морга. Москва Манн, Иванов и Фербер 2016
 Скачать 5.87 Mb.
| Образовательный портал Как узнать результаты егэ Стихи про летний лагерь 3агадки для детей |
Привет, мир!Моя первая веб-страничка. параграф. Sublime Text, в отличие от некото- рых других редакторов, отступов не ставит. На рис. 5.6 показан законченный HTML-документ. Давайте по очереди рассмотрим элементы из файла page.html. Тег — всего лишь объявление, он сообщает: «это HTML-документ». Далее следует открывающий тег (закрывающий тег находится в самом конце кода). Каждый Head — здесь «шапка документа» Title — название Body — тело документа 90 Часть I. Основы HTML-документ должен содержать элемент html верхнего уровня вложенности. Рис. 5.6. Законченный HTML-документ Внутри элемента html находятся элементы head и body. Элемент head содержит определенную информацию об HTML-документе, например элемент title, устанавливающий название документа, — обратите внимание, что текст на закладке браузера на рис. 5.6 («Моя первая настоящая HTML-страничка») соответствует содержимому title. Элемент title находится внутри элемента head, который, в свою очередь, находится внутри элемента html. Внутри элемента body находится содержимое, которое отображается в браузере. В данном случае мы просто скопировали эти данные из предыдущего примера. Иерархия HTML HTML-элементы подчинены строгой иерархии, которую можно себе представить в виде перевернутого дерева. На рис. 5.7 в виде дерева показан наш документ. Привет, мир! 92 Часть I. Основы Моя первая веб-страничка. "https://comicsia.ru/collections/xkcd" >Нажмите сюда 5. Основы HTML 93 "https://comicsia.ru/collections/xkcd" >Нажмите сюдаОткрывающий тег Этот текст отобразится как ссылка Закрывающий тег Рис. 5.10. Базовый синтаксис для создания гиперссылки Атрибут title Также к ссылкам можно добавлять атрибут title — он задает текст, который появляется при наведении курсора на ссылку. Например, давайте изменим открывающий тег title= "xkcd: Комиксы для гиков!" >Нажмите сюдаТеперь перезагрузите страничку. При наведении мышки на ссылку должна появиться надпись: « xkcd: Комиксы для гиков!», как на рис. 5.11. Рис. 5.11. Веб-страничка, содержащая ссылку на адрес https://comicsia.ru/collections/xkcd/ с атрибутом title ПОПР ОБУ ЙТЕ ! Создайте новый файл под названием links.html. Пусть его HTML-структура будет такой же, как у странички page.html, однако название и заголовок поменяйте на другие, а также добавьте три элемента p («параграф»). В каждом параграфе создайте ссылку на один из своих любимых сайтов. Убедитесь, что для всех элементов a заданы атрибуты href и title. Links — ссылки Что мы узнали В этой главе мы познакомились с основами HTML — языка для создания веб-страниц. Также мы создали простой HTML-документ со ссылкой на другую страницу. В следующей главе мы разберемся, как встраивать в нашу страничку JavaScript-код. Это облегчит создание более объемных программ по мере изучения новых возможностей JavaScript. Эта книга посвящена JavaScript, а не HTML, поэтому я рассмотрел лишь самые азы создания HTML-документов. Вот некоторые ресурсы, где можно узнать о HTML больше: На английском языке: • • Mozilla Webmaker: https://webmaker.org/ На русском языке: • • https://htmlacademy.ru/ 95 6 УС Л О В И Я И Ц И К Л Ы Условные конструкции и циклы — одни из самых важных понятий в JavaScript. Условная конструкция представляет собой команду: «если что-то истинно (true), сделай это, иначе сделай то». Пример: выполнив домашнее задание, вы можете съесть мороженое, но, если домашнее задание не готово, мороженое вам не светит. А цикл — это инструкция: «до тех пор, пока что-то истинно (true), продолжай делать это». Пример: пока вы испытываете жажду, продолжайте пить воду. Условные конструкции и циклы — понятия, лежащие в основе любой мало-мальски серьезной программы. Их называют управляющими кон- струкциями, поскольку они позволяют решать, какие части кода и когда выполнять, а также насколько часто это нужно делать, исходя из заданных вами условий. Для начала давайте разберемся, как встраивать JavaScript в HTMLфайл. Это позволит писать программы более сложные, чем те, с которыми мы имели дело до сих пор. Внедрение JavaScript-кода в HTML Вот HTML-файл, который мы создали в пятой главе, с некоторыми дополнениями — они показаны в цвете, тогда как прежний текст набран серым (чтобы упростить этот пример, я убрал из него ссылку на https://comicsia.ru/collections/xkcd/). 96 Часть I. Основы  перейти в каталог файлов | Образовательный портал Как узнать результаты егэ Стихи про летний лагерь 3агадки для детей |