Инфоурок Информатика КонспектыВведение в HTML. Форматирование текста в HTML

Введение в HTML. Форматирование текста в HTML

Скачать материал

Выберите документ из архива для просмотра:

Выбранный для просмотра документ Пр_р_HTML1.doc

     Язык разметки гипертекста HTML

             Практическая работа №1

Ход работы:

Для подготовки html-файла можно использовать текстовый редактор Блокнот.

<HTML>

<HEAD>

<TITLE> Название окна Web-страницы </TITLE>

</HEAD>

<BODY ПАРАМЕТРЫ>

<!--Дальше идет текст, например, такой.-- >

Меня зовут Светлана. Мне 16 лет.

Я хочу стать Web-дизайнером.

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

</BODY>

</HTML>

 В середине пары тегов <BODY параметры>…</BODY> записывают (то есть программируют) то, что должно отображаться в окне броузера.

 

Задание 1. Создайте с помощью текстового редактора приведенный выше html-файл и сохраните его в своей папке с названием file_1.html. Тег  <BODY> запишите так  <BODY TEXT=”red”>. Откройте файл в броузере, т.е. перейдите в свою папку и дважды щелкните на файле  file_1.html. Обратите внимание, что текст на экране расположен по другому, чем в файле: нет абзацев и абзацного отступа, текст выровнен по левому краю. Проэксперементируйте с разными значениями параметров BGCOLOR и TEXT. Для переключения между режимом просмотра WEB-страницы в браузере и текстом HTML-файла используйте меню ВИДð В виде HTML

 

Задание 2. Отформатируйте текст в файле file1.htm следующим образом и сохраните его в файле file2.htm:

 

<HTML>

<HEAD>

<TITLE> My Web-page </TITLE>

</HEAD>

<BODY BGCOLOR =”yellow” TEXT =”navy”>

<CENTER><H1>Привет! </H1>

<H2> Меня зовут Светлана. </H2> </CENTER>

<HR>

<H3> Мне 16 лет. </H3>

<H4> Я хочу стать Web-дизайнером. </H4>

<HR>

Это моя <B> вторая </B> попытка создать Web-страницу. Я уже умею пользоваться заголовками, формировать текстовые абзацы, вставлять линии. Позже я научусь вставлять  <I> фотографии, картинки, звук  </I> путем гиперссылок на соответствующие  <U> графические, звуковые или видеофайлы </U>.<P>

Я сохраню этот файл на диске и открою его в броузере. <P>

Эту Web-страницу я буду усовершенствовать. Ее еще рано размещать на сервере. <HR>

</BODY>

</HTML>

 

Просмотрите этот файл с помощью броузера и проэксперементируйте с тегами форматирования текста. Проэксперементируйте с размерами окна, в котором демонстрируется документ и удостоверьтесь, что броузер автоматически заменяет расположение текста, чтобы его можно было просматривать без горизонтальной линии прокрутки (текстовые редакторы этого не делают). 

Просмотрено: 0%
Просмотрено: 0%
Скачать материал
Скачать материал "Введение в HTML. Форматирование текста в HTML"

Методические разработки к Вашему уроку:

Получите новую специальность за 2 месяца

Руководитель организации

Получите профессию

Технолог-калькулятор общественного питания

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Выбранный для просмотра документ HTML_1.ppt

Скачать материал "Введение в HTML. Форматирование текста в HTML"

Получите профессию

Бухгалтер

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Описание презентации по отдельным слайдам:

  • HTML
Первые шаги.© М.Е.Макарова http://uchinfo.com.ua

    1 слайд

    HTML
    Первые шаги.
    © М.Е.Макарова http://uchinfo.com.ua

  • Hyper
Text
Markup
LanguageЯзык разметки гипертекста

    2 слайд

    Hyper
    Text
    Markup
    Language
    Язык разметки гипертекста

  • Цель урока:

Познакомиться со структурой WEB-документа.
Изучить основ...

    3 слайд

    Цель урока:

    Познакомиться со структурой WEB-документа.
    Изучить основные команды форматирования WEB-документа.
    Узнать, как создавать простейшие WEB-документы.
    Получить практические навыки их создания.

  • Знакомство с языком HTMLГипертекст – это электронный документ, который содерж...

    4 слайд

    Знакомство с языком HTML
    Гипертекст – это электронный документ, который содержит гиперссылки на другие документы.
    Гипертекстовый документ предназначен для вывода информации на экран компьютера.
    Гипертекстовая технология – это технология, базирующаяся на использовании гипертекстовых документов. Ее применяют в компьютерных энциклопедиях и учебных программах, прикладных программах для работы со справочной информацией и для организации доступа к информации в W W W, т.е. при работе с WEB-документами.
    WEB-документ – это текст, написанный на языке HTML или другом, который предназначен для просмотра электронной информации на экране компьютера с помощью программы-браузера.

  • Так как WEB-документ предназначен для просмотра его  на компьютере, то желате...

    5 слайд

    Так как WEB-документ предназначен для просмотра его на компьютере, то желательно, чтобы он помещался целиком на экране. Поэтому WEB-документы называют еще WEB-страницами.
    Несколько WEB-страниц на одну тему называют WEB-узлом или WEB-сайтом.
    WEB-сайты создают WEB-дизайнеры.
    WEB-дизайн – это совокупность правил и рекомендаций, которыми должны руководствоваться авторы, чтобы их сайты были информативными и выглядели привлекательно.

  • Команды языка HTML называются теги и они записываются в &lt; &gt;. Большинство тего...

    6 слайд

    Команды языка HTML называются теги и они записываются в < >. Большинство тегов – парные <html>…</html>

    Документ HTML имеет три структурных типа содержимого:
    Теги – команды в < >.
    Комментарии –пояснения к документу. Они помогают разобраться в его содержании <!-- … -- >.
    Текст – то, что пользователь видит на экране браузера.
    Мультимедийные элементы – картинки, звук, видео – не являются частью HTML-документа и хранятся в отдельных файлах. HTML-документ содержит только ссылки на эти файлы в виде тегов.

  • теги и атрибутыКаждый тег состоит из имени тега, за которым может следовать с...

    7 слайд

    теги и атрибуты
    Каждый тег состоит из имени тега, за которым может следовать список атрибутов (параметров)
    <i>
    <img src=“dog.gif” width=6>
    Атрибуты отделяются от имени тега и друг от друга пробелами. Значение атрибута пишется после знака равенства. Если значение состоит из одного слова или цифры, то его можно писать без кавычек. Для значений из нескольких слов кавычки обязательны ( “ ).
    Тег со всеми атрибутами желательно располагать на одной строке.
    Для большинства тегов нужен закрывающий тег:
    <i> </i>

  • Мой первый шаг 


Здравствуйте, это моя первая страница.

Добро пожаловать...

    8 слайд

    <html>
    <head>
    <title> Мой первый шаг </title>
    </head>
    <body>
    Здравствуйте, это моя первая страница.


    Добро пожаловать!
    </body>
    </html>
    Структура HTML-документа

  • Заголовок документа – теги  и Тег … заключает в себе теги заголовка.

Тег … с...

    9 слайд

    Заголовок документа – теги <Head> и <Title>
    Тег <Head>…</Head> заключает в себе теги заголовка.

    Тег <Title>…</Title> содержит слова, которые появляются в стоке заголовка браузера
    <html>
    <head>
    <title>Мой первый шаг </title>
    </head>
    2. Дополнительные теги заголовка:
    <meta> - содержит дополнительные данные о документе, используемые поисковыми серверами;
    <base> и <link> - определяют базовый адрес документа и некоторые другие

  • Тело документа – тег Все, что находится между и , называется содержимым тела...

    10 слайд

    Тело документа – тег <body>
    Все, что находится между<body> и </body>, называется содержимым тела документа.
    Тег <body> может содержать 3 группы параметров:
    Управление внешним видом документа.
    Атрибуты программирования – по событию, таблицы стилей и пр.
    Атрибуты ссылок и идентификации.

  • Параметры тега Bgcolor – изменяет цвет фона. Цвет задается словом или  кодом...

    11 слайд

    Параметры тега <body>
    Bgcolor – изменяет цвет фона. Цвет задается словом или кодом RGB
    <body bgcolor = “red”>
    <body bgcolor = “#FF0000”>
    Text – задает цвет текста.
    <body bgcolor = “red” text=“blue”>
    Background – помещает в качестве фона изображение из файла с картинкой.
    <body background = “dog.gif”>
    Bgproperties = “fixed” – фоновый рисунок не прокручивается вместе со страницей.
    Link – задает цвет гиперссылок, по которым пользователь еще «не ходил».
    Vlink – задает цвет посещенных гиперссылок.
    Alink – цвет активной гиперссылки (под курсором мышки во время нажатия)


  • Оформление текста ЗаголовкиСуществует 6 уровней заголовков:
 . . . , …,
 . ....

    12 слайд

    Оформление текста
    Заголовки
    Существует 6 уровней заголовков:
    <h1> . . . </h1>, …,
    <h6> . . . </h6>
    Атрибут – align – выравнивание
    Значения: Left (по умолчанию)
    Right Centr
    <body bgcolor ="#CC3399" text ="#CCCCCC">
    <h1 align = “center”> Title 1 </H1>
    <h2 align = “right”> Title 2 </H2>
    <h3 align = “left”> Title 3 </H3>
    <h4> Title 4 </H4>
    <h5> Title 5 </H5>
    <h6> Title 6 </H6>
    </body>

  • АбзацыТег    указывает на начало нового абзаца и вставляет пустую строку пере...

    13 слайд

    Абзацы
    Тег <p> указывает на начало нового абзаца и вставляет пустую строку перед абзацем. Атрибут align.

    Тег
    - разрыв строки. Используется для записи текстов стихов и песен.
    Атрибут clear позволяет продолжить поток текста после (ниже) рисунка или таблицы. Значения left, right, all - продолжают вывод текста там, где указанный в атрибуте край или оба края свободны от таблиц и рисунков. Этот атрибут имеет смысл только с выровненными влево или вправо рисунками или таблицами.

  • Точные интервалыТег …  создает область, в которой текст не разбивается на стр...

    14 слайд

    Точные интервалы
    Тег <nobr>… </nobr> создает область, в которой текст не разбивается на строки.
    Тег <wbr> используется в сочетании с <nobr> и указывает браузеру место где, в случае необходимости, можно разорвать строку.
    Тег <pre>… </pre> выделяет часть исходного текста, который должен отображаться «как есть» - с теми же отступами и разбиением на строки. Используется для записи текстов программ. Внутри этого тега могут располагаться гиперссылки, картинки и пр.
    Тег <center>… </center> - содержимое выравнивается по центру – текст, рисунки, таблицы. Аналог атрибута align=center

  • Физкультминутка

    15 слайд

    Физкультминутка

  • Физическое и логическое форматирование текстаФизическая разметка документа –...

    16 слайд

    Физическое и логическое форматирование текста
    Физическая разметка документа – это явное указание браузеру, как должен выглядеть тот или иной фрагмент текста – размер шрифта, курсив и т.п.
    Логическая разметка учитывает смысл выделенного фрагмента – цитата, сведения об авторе и т.п.
    Современные стандарты языка HTML советуют использовать по-возможности логическую разметку, хотя физическое форматирование еще никто не отменял.

  • теги физических стилейМожно комбинировать теги стилей:
Полужирный курсив

    17 слайд

    теги физических стилей
    Можно комбинировать теги стилей:
    <b><i>Полужирный курсив</i></b>

  • Изменение шрифтатег  … - изменяет размер, цвет и стиль текста.

Атрибуты:
siz...

    18 слайд

    Изменение шрифта
    тег <font> … </font>- изменяет размер, цвет и стиль текста.

    Атрибуты:
    size - размер шрифта 1-7. По-умолчанию size=3
    Размер изменяется на 20%: 4 размер больше 3 на 20%,
    5 размер больше 4 на 20%
    size=4 – абсолютный размер,
    size= +1 – относительный (на 1 больше, чем базовый размер шрифта)

    color - цвет текста,
    face - название шрифта
    face="Comic Sans MS, Courier New”

  • Мой второй шаг 


Это обычный шрифт


Это измененный шрифт


Это снова обыч...

    19 слайд

    <html>
    <head>
    <title>Мой второй шаг </title>
    </head>
    <body>
    Это обычный шрифт
    <p>
    <font size=5 color="#CC3399" face="Comic Sans MS, Courier New">
    Это измененный шрифт
    </font>
    <p>
    Это снова обычный шрифт
    </body>
    </html>

  • теги логических стилей

    20 слайд

    теги логических стилей

  • Теги логического и физического форматирования могут комбинироваться друг с др...

    21 слайд

    Теги логического и физического форматирования могут комбинироваться друг с другом и с тегами установки интервалов.

  • Создание WEB-страниц в блокноте.В своей папке создать отдельную папку для фай...

    22 слайд

    Создание WEB-страниц в блокноте.
    В своей папке создать отдельную папку для файлов сайта.
    Открыть программу БЛОКНОТ.
    Написать в нем текст WEB-страницы.
    Сохранить этот текст в этой папке под любым именем с расширением .html.
    Перейти в эту папку.
    Документ должен иметь значок или
    Открыть этот документ. (Откроется программа-браузер).
    Если нужно внести изменения в документ, то выполнить команду ВИДПросмотр HTML-кода (Исходный текст). Текст WEB-страницы откроется в блокноте.
    Внести в текст изменения. Сохранить его (Ctrl+S), перейти в программу-браузер и нажать кнопку ОБНОВИТЬ.

  • Итоги урока:Познакомились со структурой и основными командами форматирования...

    23 слайд

    Итоги урока:
    Познакомились со структурой и основными командами форматирования WEB-документа.
    Узнали, как создавать простейшие WEB-документы.

  • Задание на урок:Создать две WEB-странички на  произвольную тему
1.На первой п...

    24 слайд

    Задание на урок:
    Создать две WEB-странички на произвольную тему
    1.На первой применить физические стили форматирования (шрифт, курсив и т.п.), фон сделать цветным.
    2. На второй применить логические стили форматирования. В качестве фона использовать картинку из файла.

  • Домашнее заданиеВыучить конспект.
Гл. 6, § 4.6

    25 слайд

    Домашнее задание
    Выучить конспект.
    Гл. 6, § 4.6

Получите профессию

Секретарь-администратор

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Выбранный для просмотра документ План урока HTML_1.doc

 

Тема урока: «Язык разметки гипертекста HTML»        

 

Цели и задачи урока:

·               Сформулировать основные принципы создания WEB-страниц; познакомить учеников с основными командами оформления текста; продемонстрировать использование этих команд на конкретных примерах оформления WEB-страниц; формировать навыки и умения создания простейших WEB-страниц.

·               Развивать логику, умение анализировать, сравнивать, делать выводы, высказывать свою мысль.

·               Воспитывать аккуратность, внимательность, вежливость и дисциплинированность, бережное отношение к своему здоровью.

Тип урока: усвоение новых знаний.

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

Ожидаемые результаты:

В конце урока ученики смогут:

·               Дать определение таким понятиям:

a.             Гипертекст;

b.            WEB-страница, WEB-сайт; WEB-дизайн;

c.             Язык разметки гипертекста HTML;

·               Использовать команды языка HTML для форматирования текста;

Ориентировочный план урока

1.                              Актуализация опорных знаний

·                          Как вы можете определить понятие «Интернет»?

·                          Что такое служба WWW?

·                          Как называются документы, которые мы можем просматривать в программе-браузере?

2.                              Изложение нового материала.

·                          Систематизация понятий

a.              Гипертекст;

b.            WEB-страница, WEB-сайт; WEB-дизайн;

c.             Язык разметки гипертекста HTML;

·                          Команды (теги), определяющие структуру WEB-документа.

·                          Команды (теги) форматирования текста.

3.                              Физкультминутка.

4.                              Примеры использования тегов форматирования.

5.                              Закрепление нового материала.

6.                              Итоги урока.

7.                              Домашнее задание.   Выучить конспект,  Глава 6, § 4.6


 

 

Тема урока: Практическая работа № 1 «Создание Web-страницы»

 

Цели урока:

1.                                          Познавательная

·                                             Учить и научить каждого ребенка создавать простейшие Web-страницы в  текстовом редакторе Блокнот.

·                                             Формировать навыки и умения работы с тегами языка HTML.

2.                                          Развивающая

·                                             Учить строить аналогии, выделять главное, ставить и решать проблемы.

3.                                          Воспитательная

·                                             Воспитывать аккуратность, внимательность, вежливость и дисциплинированность.

План урока

1.                                                      Техника безопасности при работе с компьютером.

2.                                                      Разъяснение хода практической работы.

3.                                                      Практическая работа № 1 «Создание Web-страницы»

4.                                                      Оценивание выполнения работы.

5.                                                      Итоги урока.

6.                                                      Домашнее задание. Выучить конспект, глава 6, § 4.6

 

 

P.S

Для спокойного проведения уроков по HTML целесообразно разместить на ученических компьютерах справочные материалы: таблицу безопасных цветов и обучалку с основными тегами.

Просмотрено: 0%
Просмотрено: 0%
Скачать материал
Скачать материал "Введение в HTML. Форматирование текста в HTML"

Получите профессию

Бухгалтер

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Получите профессию

Бухгалтер

за 6 месяцев

Пройти курс

Рабочие листы
к вашим урокам

Скачать

Краткое описание документа:

Цели и задачи урока:

  • Сформулировать основные принципы создания WEB -страниц; познакомить учеников с основными командами оформления текста; продемонстрировать использование этих команд на конкретных примерах оформления WEB -страниц; формировать навыки и умения создания простейших WEB -страниц.
  • Развивать логику, умение анализировать, сравнивать, делать выводы, высказывать свою мысль.
  • Воспитывать аккуратность, внимательность, вежливость и дисциплинированность, бережное отношение к своему здоровью.

Тип урока: усвоение новых знаний.

Оборудование: мультимедийная система, слайды, учебник.

Ожидаемые результаты:

В конце урока ученики смогут:

  • Дать определение таким понятиям:
    • Гипертекст;
    • WEB -страница, WEB -сайт; WEB -дизайн;
    • Язык разметки гипертекста HTML ;
  • Использовать команды языка HTML для форматирования текста;

Ориентировочный план урока

  • Актуализация опорных знаний
  • Как вы можете определить понятие «Интернет»?
  • Что такое служба WWW ?
  • Как называются документы, которые мы можем просматривать в программе-браузере?
  • Изложение нового материала.
  • Систематизация понятий
    • Гипертекст;
    • WEB -страница, WEB -сайт; WEB -дизайн;
    • Язык разметки гипертекста HTML ;
  • Команды (теги), определяющие структуру WEB -документа.
  • Команды (теги) форматирования текста.
  • Физкультминутка.
  • Примеры использования тегов форматирования.
  • Закрепление нового материала.
  • Итоги урока.
  • Домашнее задание. Выучить конспект, Глава 6, § 4.6

Скачать материал

Найдите материал к любому уроку, указав свой предмет (категорию), класс, учебник и тему:

6 625 842 материала в базе

Скачать материал

Оставьте свой комментарий

Авторизуйтесь, чтобы задавать вопросы.

  • Скачать материал
    • 12.01.2015 4833
    • RAR 673.7 кбайт
    • 143 скачивания
    • Рейтинг: 5 из 5
    • Оцените материал:
  • Настоящий материал опубликован пользователем Розахунов Даут Каиргалиевич. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

    Если Вы считаете, что материал нарушает авторские права либо по каким-то другим причинам должен быть удален с сайта, Вы можете оставить жалобу на материал.

    Удалить материал
  • Автор материала

    Розахунов Даут Каиргалиевич
    Розахунов Даут Каиргалиевич
    • На сайте: 9 лет и 2 месяца
    • Подписчики: 0
    • Всего просмотров: 7956
    • Всего материалов: 4

Ваша скидка на курсы

40%
Скидка для нового слушателя. Войдите на сайт, чтобы применить скидку к любому курсу
Курсы со скидкой

Курс профессиональной переподготовки

Технолог-калькулятор общественного питания

Технолог-калькулятор общественного питания

500/1000 ч.

Подать заявку О курсе

Курс повышения квалификации

Применение компьютерных моделей при обучении математике и информатике в рамках ФГОС ООО

72 ч. — 180 ч.

от 2200 руб. от 1100 руб.
Подать заявку О курсе
  • Сейчас обучается 47 человек из 24 регионов

Курс повышения квалификации

Теоретические и методологические основы преподавания информатики с учётом требований ФГОС ООО

72 ч. — 180 ч.

от 2200 руб. от 1100 руб.
Подать заявку О курсе
  • Сейчас обучается 153 человека из 51 региона

Курс профессиональной переподготовки

Педагогическая деятельность по проектированию и реализации образовательного процесса в общеобразовательных организациях (предмет "Информатика")

Учитель информатики

300 ч. — 1200 ч.

от 7900 руб. от 3950 руб.
Подать заявку О курсе

Мини-курс

Психологические особенности педагогического общения

6 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 30 человек из 19 регионов

Мини-курс

Основы изучения творческих дисциплин: введение в пропедевтику дизайна и изобразительного искусства

8 ч.

1180 руб. 590 руб.
Подать заявку О курсе
  • Сейчас обучается 23 человека из 13 регионов

Мини-курс

Искусство переговоров: стратегии и тактики в различных сферах жизни

6 ч.

780 руб. 390 руб.
Подать заявку О курсе
  • Сейчас обучается 23 человека из 12 регионов