ualin.com
Додати статтю | Реєстрація


Інтернет
Автомобілі та мотоцикли
Бізнес
Будівництво, ремонт
Дім та родина
Діти
Захоплення, хобі
Комп'ютери та ПЗ
Красота, імідж, косметика
Медицина та здоров'я
Мода, стиль
Приготування їжи
Психологія та тренінги
Реклама та PR
Релігія, непізнане, окультизм
Реферати, курсові, лабораторні, методички
    Іноземні мови
    Інформатика
    Міське будівництво й господарство
    Медицина
    Менеджмент
    Різне
    Соціальна педагогіка
    Страхування
    Теорія грошей
    Функціонально вартісний аналіз
    Хімія
Собаки, кішки, рибки, птахи
Суспільство та політика
Товари та послуги
Туризм, подорожі
Фітнес, схуднення, дієти
Чоловік та жінка
Максим  
Обережно! Ножиці!  
Телевізійна вежа “Перлина Сходу”  
Сьоме почуття звідки родом сором  
Мифы про металлопластиковые окна.  
Мій чоловік постійно мовчить  
Прості способи зміцнити імунітет  
Щодо основних тенденцій розвитку міжнародної ситуації та зовнішньополітичної стратегії Китаю у нових геополітичних умовах сучасності  
Як консерванти впливають на дітей  
Утримання хом’ячків  
Безкоштовне розміщення статей: психологія, тренінги, авто, красота, мода, родина - ualin.com
командой   лікарський   Столбняк   троянда   клітки   юрист   білизна   РОЗВИТКУ   клапан   спид   повышении   питання   энцефалит   печінки   организации  
Зберегти сторінку Зробити стартовою Відправити другу
 укр
 рус
Урок 1:«Введение в HTML»
Урок 1:«Введение в HTML»
Ход урока:
   Ознакомление с новым материалом.
   Понятие о языке разметки гипертекста.
   Основой всемирной «паутины» World Wide Web является язык гипертекстовой разметки HTML. (Hyper Text Murkup Language). Этот язык был создан учеными Европейского центра Ядерных Исследований (СERN, Женева).



   
   Цели:
    Изучить назначение языка разметки;
    Знать что такое теги, элементы, атрибуты;
    Иметь понятие о структуре HTML-документе.
   
   План:
   1. Понятие о языке разметки гипертекста.
   2. Программы для создания HTML-файлов.
   3. Теги и структура HTML-документа.
   4. Простой пример Web-страницы.
   5. Элементы HTML.
   6. Атрибуты тегов.
   7. Комментарии.
   
   Ход урока:
   Ознакомление с новым материалом.
   Понятие о языке разметки гипертекста.
   Основой всемирной «паутины» World Wide Web является язык гипертекстовой разметки HTML. (Hyper Text Murkup Language). Этот язык был создан учеными Европейского центра Ядерных Исследований (СERN, Женева). В конце 80-х годов в СERN занялись проблемой хранения и отображения данных, получаемых коллегами-физиками. Сложность заключалась в том, что каждый специалист, приезжавший в Центр, применял собственные методы представления информации, и срочно требовалось создание универсальной системы, которая не зависела бы от используемой компьютерной платформы и в то же время была бы достаточно простой.
   Идея решения проблемы обмена документами между различными компьютерами состояла в том, что документы должны быть размечены с помощью определенного кода – HTML. Такие документы могли бы читаться на любом компьютере, на котором учтановлена всего лишь одна программа просмотра – броузер.
   Впоследствии HTML стал основным языком при создании документов, размещаемых в WWW. Благодаря языку разметки пользователь WEB может у себя на экране просмотреть документ в том виде, в каком его задумал разработчик: с определенными размерами шрифта и разбивкой на абзацы, с заданными размерами и расположением рисунков и проч.
   HTML – набор соглашений для разметки документов, которые определяют внешний вид документов на экране компьютера при доступе к ним с использованием программы броузера.
   Документы, подготовленные на языке HTML, называются HTML-документами. Получить представление о том, как выглядит код HTML, вы сможете, если загрузите HTML-документ в броузер и выполните команду Вид – В виде HTML.
   HTML-документ (или Web-страница) – это обычный текстовый файл с расширенеием htm или html, составленный на языке HTML и содержащий информацию, которая предназначена для публикации в WWW.
   Код HTML является весьма компактным, и HTML-документы имеют размер значительно меньший, чем документы, подготовленные в текстовых процессорах типа Word. Это одна из основных причин широкого применения языка HTML для кодирования информации, распространяемой по Интернету.
   HTML-документы размещаются в WWW не поодиночке, а в виде так называемых сайтов.
   Web-сайт – это совокупность Web-страниц (нескольких десятков, сотен или даже тысяч), объединенных одной общей темой и помещенных, как правило, на одном узловом компьютере.
   Мы с вами рассмотрим основы создания HTML-документов и сайтов с использованием простейших элементов языка разметки. Более сложные технологии (листы стилей, программы-сценарии и др.0 останутся за рамками краткого курса школьной информатики.
   
   Программы для создания HTML-файлов.
   Документ, составленный с помощью языка разметки HTML, представляет собой текстовый файл. Такой файл можно набрать и отредактировать в обычном текстовом редакторе, например, в приложениях Блокноте или WordPad, которые входят в состав ОС Windows. Однако в настоящее время существуют более удобные и совершенные программы подготовки HTML-документов. Их условно можно разделить на визуальные редакторы HTML и редакторы HTML-текстов.
   При работе в визуальном HTML-редакторе пользователь имеет дело с графическими образами элементов HTML, а не с кодом документа. Он может путем перетаскивания мышью и простых операций в интерфейсе размещать на странице необходимые элементы. Благодаря этому даже начинающему пользователю, не знающему языка HTML? Под силу создавать простые Web-страницы. RК визуальным редакторам HTML относятся программа FrontPage фирмы Microsoft, Macromedia Dreamveawer, Netscape Navigator Gold и др.
   Редакторы собственно HTML-текстов, среди которых наиболее известны HomeSite и HotDog, обладают основными возможностями текстовых редакторов (использование буфера обмена, средства поиска слов и др.) Но, в отличие от разработчика визуальную среду программирования (типа Visual Basic или Delphi) и позволяют автоматизировать создание HTML-кода. Редакторы HTML-текстов дают возможность пользователю быстро и легко вставлять в отладку страницы, не покидая окна редактора.
   При создании сайта пользователь обычно сам определяет, работать ли ему в визуальном HTML-редакторе или вручную составлять HTML-код. Но при этом нужно учесть, что эффективно управлять HTML-документами и решать вопросы Web-дизайна можно только при использовании языка разметки HTML. Основы HTML-кодирования мы и будем в дальнейшем. Все приводимые в главе примеры вы сможете очень просто повторять на компьютере, набирая код в редакторе Блокнот и просматривая созданные документы с помощью программы броузера.
   
   Теги и структура HTML-документа.
   Как выполняется разметка документа с помощью HTML? Документ разбивается на элементы: заголовки, абзацы, рисунки, таблицы и прочее. Для каждого элемента задается команда языка HTML, называемая тегом (или дескриптором). В этой команде содержится информация о том, как должен выглядеть данный элемент на Web-странице, какие связи он может иметь с другими элементами или документами и проч.
   В языке HTML имеется множество тегов, среди которых – теги создания заголовка документа, задания параметров шрифта, вычерчивания линий, вставки гиперссылок, вставки графических элементов и т.д. В итоге Web-страница, кроме текста и ссылок может содержать графику, звуки, видео, то есть иметь такой вид, который вы и видите на экране компьютера.
   Тег (в переводе tag – указатель, метка) – это фрагмент кода, который описывает определенный элемент документа HTML и заключается в угловые скобки <>.
   Простейшим тегом является, например, тег с именем HTML. Тег <HTML> определяет начало HTML-документа. Начальному тегу <HTML> отвечает конечный тег с тем же именем, но с косой чертой «/», - это тег </HTML>. Таким образом, начало и конец HTML-документа обозначается парой тегов
    <HTML> … </HTML>
   Здесь многоточие означает, что между начальным и конечным тегами может находится текст и (или) другие теги. В данном случае многоточием обозначен код всего документа.
   HTML-документ условно можно разбить на три части:
    Служебная информация для броузера, которая заключается в строку с тегом <!DOCTYPE>.
    Заголовочная часть документа, в которой содержится название документа, может располагаться служебная информация для серверов, описания небольших программ-сценариев. Эта часть документа заключена между тегами <HEAD> и </HEAD>.
    Тело документа, заключаемое между тегами <BODY> … </BODY> (иногда вместо тегов <BODY> могут использоваться теги фреймовой структуры <FRAMESET>, которые здесь не рассматриваются).
   
   Простой пример Web-страницы.
   Что такое Web-страница, вам сразу станет ясно из следующего простейшего примера:
   
   <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN»>
   <HTML>
    <HEAD>
    <TITLE>Простой пример</TITLE>
    </HEAD>
    <BODY>
    Это пример HTML-документа
    </BODY>
   </HTML>
   
   В этом документе вы видите заголовочную часть, ограниченную тегами <HEAD> … </HEAD>, и тело документа, заключенное между тегами <BODY> … </BODY>. В заголовочную часть вложены теги <TITLE> … </TITLE>. Текст Простой пример, помещенный между этими тегами, интерпретируется броузером как название Web-страницы и отображается в заголовке окна броузера.
   Обратите внимание, что в коде документа встречаются парные теги (имеют начальный и конечный теги и одиночные теги (например, <!DOCTYPE>). При дальнейшем рассмотрении тег <!DOCTYPE> мы будем опускать, Web-страницы будут правильно отображаться в последних версиях броузеров и без этого тега.
   Когда в броузер будет загружен документ с приведенным выше кодом, броузер интерпретирует его примерно следующим образом. Это документ, который подготовлен с использованием HTML версии 4.01. В заголовочной части имеется текст «Простой пример», который нужно отобразить в строке заголовка окна. В основной части документа есть текст «Это пример HTML-документа».
   
   Элементы HTML.
   Изучая работу с документами, вы узнали, что каждый документ состоит из отдельных объектов: абзацев, заголовков, рисунков и проч. Эти объекты при переводе в формат HTML представляются в виде элементов HTML/
   Элемент HTML – это пара тегов и символьные данные (текст или код), заключенные между ними.
   Элемент называется обычно по имени тега (без угловых скобок). Например, элементом является заголовок страницы, показанной на рисунке <TITLE>Простой пример</TITLE>.
   Все элементы, предусмотренные в HTML? Можно условно разбить на несколько категорий:
    Структурные – это элементы, которые обязательны для документы, соответствующего стандарту HTML (например, элементы HTML, HEAD, BODY и TITLE);
    Блоковые – это элементы, которые предназначены для форматирования целых текстовых блоков (например, элементы DIV, H1, H2, H3, H4, H5, H6, P, PRE); часто блоковые элементы отделяются переводом строки от остальной части документа;
    Текстовые – это элементы, которые задают разметку шрифта (I, B, U, BIG, SMALL и др.)б разметку текста (STRONG, CODE, VAR, CITE и др.);
    Специальные – это элементы пустой строки (BR, HR), якорный элемент Аб внедренные элементы (IMG, OBJECT, MAP и др.)б элементы таблицы (TABLE) и др.
   В примере Web-страницы, рассмотренной ранее, использованы структурные элементы: HTML, , TITLE.
   В любом документе HTML обязательно присутствуют вложенные элементы, то есть такие, которые включены в состав других элементов. Так в примере элемент TITLE вложен в элемент HEAD.
   Элементы HEAD и BODY, в свою очередь, являются вложенными в элемент HTML/
   Отметим, что при записи элементов HTML можно использовать как прописные так и строчные буквы. Так, броузер одинаково будет воспринимать теги <TITLE>, <Title> и <title>/ Однако для единообразия имена тегов записывают прописными буквами.
   Атрибуты тегов.
   Часто теги, помимо имени, содержат дополнительные элементы, которые называются атрибутами. Например, если в тег тела документа <BODY> ввести дополнительный элемент:
   <BODY bgcolor=”yellow”>
   то это будет означать, что документ должен отображаться на желтом фоне. Слово bgcolor является атрибутом, а yellow – значением атрибута.
   Атрибуты – это коипоненты тега, содержащие указания о том, как броузер должен воспринять и обработать тег. Атрибут записывается после имени тега перед закрывающей скобкой > и состоит, как правило, из пары «имя атрибута – значение».
   Значение атрибута записывается после имени атрибута через знак равенства =. Все значения атрибутов по умолчанию должны заключаться в двойные (“) или одинарные (‘) кавычки. Имена атрибутов могут набираться как строчными, так и прописными буквати, - броузер будет интерпретировать их одинаковым образом. В теге может быть несколько атрибутов, в этом случае они отделяются друг от друга пробелами.
   
   Комментарии.
   Часто при создании Web-страниц возникает необходимость пояснить ту или иную особенность HTML-кода или намерения разработчика, но так, чтобы эти пояснения не отображались в окне броузера. В таких случаях незаменимыми оказываются комментарии.
   Комментарии обозначают фрагмент исполняемого кода и располагаются между группами символов <!- и ->. Например, на экране не будут отображаться следующие элементы:
   <!- Комментарий, занимающий одну строку ->
   или
   <!- Комментарий можно
   располагать в двух строках ->
   
   Закрепление изученного на уроке.
   1. Каково назначение языка разметки HTML?
   2. Что понимается под HTML-документом?
   3. Что такое теги?
   4. Что такое элементы HTML?
   5. Что такое заголовок?
   6. Что такое тело документа?
   7. Какие категории элементов HTML вам известны?
   8. Каково назначение атрибутов и в какой части кода они размещаются?
   9. Как создать комментарий?
   
   Домашнее задание.
   Гаевский А. Ю. «Информатика 7-11» - §73 выучить.
   Зарецкая И. Т. «Информатика 10-11». Глава 6 § 4.7 выучить.
   Глушаков С.В., Ломотько Д.В., Мельников И.В. Работа в сети Интернет: Учебный курс. – Харьков: Фолио; М.: ООО «Издательство АСТ», 2001. (с.103 - 160).
   Конспекты в тетради выучить.
   
   <!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01//EN»>
   <HTML>
    <HEAD>
    <TITLE>Простой пример</TITLE>
    </HEAD>
    <BODY>
    Это пример HTML-документа
    </BODY>
    </HTML>
   
   
   
   

Автор: ualin | Відгуки: 0 | Перегляди: 7083 | 20/02/2011 Реферати, курсові, лабораторні, методички - Інформатика

Ссылка на статью:


Комментарий
    DoveSig11:35 11-07-2018    
Do you! like something new? Take a look at this website. Only here the choice of horny for every taste and completely free! They are wettest slaves, they will and want perform anything you say ! http://gov.shortcm.li/kings#R72
    GoveSig01:31 16-06-2018    
Can you! want something startup new? Look at this site. Only there the choice of girls for every desire and completely free! They are responsible slaves, they will perform everything you command ! http://gov.shortcm.li/kings#W58
    GoveSig21:38 23-04-2018    
Forgot with crypto-currencies ? Did not have time to understand and get big money? I invite you to take a look in new business enterprise for a free training for mining, earnings and crypto currency without the need to invest your own money! A
    DavidSig21:31 09-03-2018    
Do you want something new? Look at this site. Only here the choice of girls for every taste and completely free! They are obedient slaves, they will do everything you say! http://vik.shortcm.li/trust#38
    GuestEstip19:48 09-03-2018    
guest test post <a href=" http://temresults2018.com/ ">bbcode</a> <a href="http://temresults2018.com/">html</a> http://temresults2018.com/ simple
    Rogervialt17:24 07-06-2017    
Сейчас мі с вами бежим в скорость из новыми аппаратами, всегда наблюдаем по обновленным приборами презентованного продвижением, все же не смотря ни на что http://glazdik.ru/ обстоятельствах значительная часть даже вовсе не предполагает о такое, во время
    Ricardoemome19:10 04-06-2017    
Completely I share your opinion. I think, what is it good idea. ---- <a href=http://picturesmania.com>backgrounds of cities</a>
    StevenSex15:35 27-05-2017    
At all times the potency of men played a very important role. Today, it is, as before, is one of the main factors happy and lasting relationship. However, with age, the potency becomes much weaker, and representatives of a strong half of mankind are wond
    JustinPrien15:01 27-05-2017    
Такого не слышал ----- rent yacht in cyprus <a href=http://european-yachts.com/en/rent-yachts-cyprus>http://european-yachts.com/en/rent-yachts-cyprus</a> | http://european-yachts.com/
    JerryGut14:33 27-05-2017    
Рекомендую Вам побывать на сайте, с огромным количеством статей по интересующей Вас теме. Могу поискать ссылку. ----- <a href=http://www.belmebeltorg.ru/61-spalnye-garnitury/>http://www.belmebeltorg.ru/61-spalnye-garnitury/</a> | http://www.belm


Страница: 1 | 2

Оставить комментарий
Ваше имя:
Комментарий:
Введите текст, изображенный на картинке:
 
 укр  |  рус