Инфоурок Труд (технология) Другие методич. материалыHTML Введение в HTML Создание HTML-документа

Рабочий лист по теме "Введение в HTML: документ HTML" + презентация

Файл будет скачан в форматах:

  • pdf
  • pptx
  • docx
3237
49
27.08.2024
«Инфоурок»

Материал разработан автором:

Лебедева Марина Сергеевна

Методист

Об авторе

Привет! Меня зовут Марина и я методист ОУ, магистр педагогических наук. Я в образовании уже более 15 лет – учитель информатики и программирования, педагог-психолог, арт-терапия, начальное и дошкольное образование, русский язык и литература) Моя цель проводить интересные занятия с учениками, развивать их, научить учиться. Мой опыт+вдохновение=интересные разработки.
Подробнее об авторе
Рабочий лист и презентация 10 слайдов по теме "Введение в HTML: документ HTML" Обучающий материал для уроков информатики и программирования: презентация и рабочий лист к ней. Содержание презентации: Документ HTML . Свойства документа HTML . Основные теги и их назначение. Пример создания документа HTML и его частей. В рабочем листе представлено 8 заданий по материалу презентации и страница ответов. Все материалы редактируемые.

Краткое описание методической разработки

Рабочий лист и презентация 10 слайдов по теме "Введение в HTML: документ HTML"

 

Обучающий материал для уроков информатики и программирования: презентация и рабочий лист к ней.

 

Содержание презентации:

  1. Документ HTML .
  2. Свойства документа HTML .
  3.  Основные теги и их назначение.
  4. Пример создания документа HTML и его частей.

 

В рабочем листе представлено 8 заданий по материалу презентации и страница ответов.

Все материалы редактируемые.

Развернуть описание

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

Скачать материал
Скачать материал "HTML Введение в HTML Создание HTML-документа" Смотреть ещё 5 734 курса

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

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

  • Введение в HTML

    1 слайд

    Введение в HTML

  • Создание HTML-документа 
	
		Первая веб-страничка
	
	
		Какой –нибудь текст...

    2 слайд

    Создание HTML-документа
    <Html>
    <head>
    <title>Первая веб-страничка</title>
    <head>
    <body>
    Какой –нибудь текст
    </Body>
    </html>
    <название_тега параметр1=“значение1” параметр2=“значение2”> либо

    <название_тега параметр1=“значение1” параметр2=”значение2”>…</тег>

  • 


      
      Вторая веб-страничка

    3 слайд

    <!DOCTYPE html PUBLIC “-/ /W3C/ /DTD HTML 4.01 Transitional/ /EN”>
    <html>
    <head>
    <meta content=“text/html; charset=Windows-1251” http-equiv=“content-type”>
    <title>Вторая веб-страничка</title>
    </head>
    <body>


    </body>
    </html>

  • Использование абзацев


Sed ut perspiciatis unde omnis iste nat...

    4 слайд

    <!DOCTYPE html PUBLIC “-/ /W3C/ /DTD HTML 4.01 Transitional/ /EN”>
    <html>
    <head>
    <meta content=“text/html; charset=Windows-1251” http-equiv=“content-type”>
    <title>Использование абзацев</title>
    </head>
    <body>
    <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
    doloremque laudantium, tptam rem aperiam, eaque ipsa quae ab illo invertore
    veritatis et quasi arhitecto beatae vitae dicta sunt explicabo. Nemo enim
    ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
    consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. </p>
    <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
    consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt
    ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima
    veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi
    Ut aliquid ex ea commodi consequatur?</p>
    </body>
    </html>

  • Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
Accusantium d...

    5 слайд

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem
    Accusantium doloremque laudantium, …
    <!DOCTYPE html PUBLIC “-/ /W3C/ /DTD HTML 4.01 Transitional/ /EN”>
    <html>
    <head>
    <meta content=“text/html; charset=Windows-1251” http-equiv=“content-type”>
    <title>Использование абзацев</title>
    </head>
    <body>
    <h1>Введение в HTML</h1>
    <h2>Ключевые понятия</h2>
    <h3>Форматирование текста</h3>
    <h3>Оформление ссылок</h3>
    <body>
    </html>
    <b>Жирный текст</b>
    <i>Курсивный текст</i>
    <U>Подчеркнутый текст</u>

  • Ссылки


      Перейти ко второй странице




     
     Ссылки...

    6 слайд

    <!DOCTYPE html PUBLIC “-/ /W3C/ /DTD HTML 4.01 Transitional/ /EN”>
    <html>
    <head>
    <meta content=“text/html; charset=Windows-1251” http-equiv=“content-type”>
    <title>Ссылки</title>
    </head>
    <body>
    <a href=“page2.html”>Перейти ко второй странице</a>
    </body>
    </html>
    <!DOCTYPE html PUBLIC “-/ /W3C/ /DTD HTML 4.01 Transitional/ /EN”>
    <html>
    <head>
    <meta content=“text/html; charset=Windows-1251” http-equiv=“content-type”>
    <title>Ссылки</title>
    </head>
    <body>
    <a href=“http://www.svitter.ru”>Свиттер</a>
    </body>
    </html>

  • •  Альтернативный  текст  изображения  (выводит  в  случае,  если  загрузка...

    7 слайд

    • Альтернативный текст изображения (выводит в случае, если загрузка картинки невозможна)
    • Размеры изображения
    • Параметры рамки вокруг изображения
    • Параметры выравнивания изображения
    <a href=“../second/page2.html”>Перейти ко второй странице</a>
    <a href=http://www.svitter.ru target=“_blank”>Свиттер</a>
    <!DOCTYPE html PUBLIC “-/ /W3C/ /DTD HTML 4.01 Transitional/ /EN”>
    <html>
    <head>
    <meta content=“text/html; charset=Windows-1251” http-equiv=“content-type”>
    <title>Использование абзацев</title>
    </head>
    <body>
    <img src=“http://www.htmlbook.ru/images/sample.gif”> - абсолютный адрес размещения изображения
    <img src=“img/img.gif”> - адрес размещения изображения относительно текущего HTML-документа
    </body>
    </html>

  • 1-я ячейка
      2-я ячейка
     
     
       3-я ячейка...

    8 слайд

    <!DOCTYPE html PUBLIC “-/ /W3C/ /DTD HTML 4.01 Transitional/ /EN”>
    <html>
    <body border=“1”>

    <table>
    <tr>
    <td>1-я ячейка</td>
    <td>2-я ячейка</dt>
    </tr>
    <tr>
    <td>3-я ячейка</td>
    <td>4-я ячейка</td>
    </tr>
    </table>

    </body>
    </html>

  • Параметры таблиц 
Основными параметрами таблиц являются: 
•  align – выравни...

    9 слайд

    Параметры таблиц
    Основными параметрами таблиц являются:
    • align – выравнивание таблицы.
    • bgcolor – цвет фона таблицы.
    • border – толщина рамки таблицы.
    • bordercolor – цвет рамки таблицы.
    • height – высота таблицы
    • width – ширина таблицы
    • cellpadding – расстояние между границей ячейки и её содержимым
    • cellspacing – расстояние между ячейками таблицы
    Параметры ячеек
    Среди параметров ячеек выделим:
    • align – выравнивание содержимого ячейки по горизонтали.
    • valign - выравнивание содержимого ячейки по вертикали.
    • bgcolor – цвет фона ячейки.
    • bordercolor – цвет рамки вокруг ячейки.
    • height – высота ячейки
    • width – ширина ячейки
    • colspan – число ячеек, которые должны быть объединены в одну по горизонтали.
    • rowspan – число ячеек, которые должны быть объединены в одну по вертикали

  • Особенности таблиц: 
•  Таблицы  могут  образовывать  вложенность.  То  есть...

    10 слайд

    Особенности таблиц:
    • Таблицы могут образовывать вложенность. То есть одна таблица может быть
    помещена внутрь ячейки другой. Это очень полезное свойство при верстке сайта с
    помощью таблиц.
    • Если размеры таблицы не заданы отдельно, то они вычисляются на основе
    содержимого ячеек. То есть таблица растягивается в зависимости от наполнения.
    • Если у таблицы указан атрибут border и не указан bordercolor, то рамка таблицы
    будет трехмерной. Указание bordercolor убирает трехмерность.

  • На главную
На главную...

    11 слайд

    <university>
    <group name=“E31”>
    <student name=“Kovalev” seven=”female” />
    <student name=“Victor” sex=“male” />
    </group>
    <group name=“E33”>
    <student name=“Kotova” sex=”female” />
    <student name=“Larisa” sex=“male” />
    </group>
    </university>
    <group></group>
    <student />


    <br/>
    <a href=“index.php”>На главную</a>
    <a href=‘index.php’ >На главную</a>
    <a href=“index.php >На главную</a>

  • Домашнее задание 
•  Выбрать и установить у себя на компьютере редактор HTML...

    12 слайд

    Домашнее задание
    • Выбрать и установить у себя на компьютере редактор HTML кода
    • Найти в интернете html-справочник, скачать его себе.
    • Создать HTML-страницу, в которой использовать ВСЕ теги, встречающиеся в
    этом уроке.
    • Предлагается создать страницу по следующему макету:

  • Для верстки страницы используйте таблицу (все содержимое страницы должно бы...

    13 слайд


    Для верстки страницы используйте таблицу (все содержимое страницы должно быть помещено в ячейки таблицы). Ячейки таблицы должны быть отделены друг от друга линиями.
    • Ссылки меню слева должны быть рабочими и вести на любые другие страницы (пример: yandex.ru).
    • Задание со звездочкой:). При нажатии на картинку она должна открываться в отдельном окне браузера.

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

Скачать

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

Особенности таблиц:

  Таблицы  могут  образовывать  вложенность.  То  есть  одна  таблица  может  быть

помещена внутрь ячейки другой. Это очень полезное свойство при верстке сайта с

помощью таблиц.

  Если  размеры  таблицы  не  заданы  отдельно,  то  они  вычисляются  на  основе

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

  Если у таблицы указан атрибут border и не указан bordercolor, то рамка таблицы

будет трехмерной.  Указание bordercolor убирает трехмерность.

Для верстки страницы используйте таблицу (все содержимое страницы должно быть  помещено  в  ячейки  таблицы). Ячейки  таблицы  должны  быть  отделены друг от друга линиями.

  Ссылки меню слева должны быть рабочими и вести на любые другие страницы (пример: yandex.ru).

  Задание со звездочкой:). При нажатии на картинку она должна открываться в отдельном окне браузера.

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

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

7 283 351 материал в базе

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

Другие материалы

Вам будут интересны эти курсы:

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

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

Скачать материал
    • 25.12.2014 550
    • PPTX 110.7 кбайт
    • Оцените материал:
  • Настоящий материал опубликован пользователем Назаренко Игорь Павлович. Инфоурок является информационным посредником и предоставляет пользователям возможность размещать на сайте методические материалы. Всю ответственность за опубликованные материалы, содержащиеся в них сведения, а также за соблюдение авторских прав несут пользователи, загрузившие материал на сайт

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

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

    Назаренко Игорь Павлович
    Назаренко Игорь Павлович

    заместитель директора по безопасности

    • На сайте: 10 лет и 4 месяца
    • Подписчики: 1
    • Всего просмотров: 157811
    • Всего материалов: 73

    Об авторе

    Категория/ученая степень: Высшая категория
    В национальной образовательной инициативе "Наша новая школа" определены главные задачи современной школы: развитие способностей каждого ученика, воспитание порядочного и патриотичного человека, личности, готовой к жизни в высокотехнологичном, конкурентном мире. Школьное обучение должно быть построено так, чтобы выпускники могли самостоятельно ставить серьезные цели и достигать их, умело реагировать на разные жизненные ситуации. Известно, что приобретение современных знаний, умений, навыков и способов действий с помощью информационно-коммуникационных технологий позволяет обучающимся получить дополнительные навыки и умения, которые значительно повышают общеобразовательный и информационный уровень школьника, его конкурентоспособность, способствуют самоопределению и ответственности, приучают к необходимости не только получать знания, но и применять их в конкретной жизненно значимой ситуации. Поэтому ведущей целью моей педагогической деятельности является не только необходимость дать учащимся теоретические знания и практические навыки использования техники и современных технологий, но и научить использовать их для решения различных жизненных задач. Для успешного достижения ведущей цели своей педагогической деятельности решаю следующие задачи: Дать учащимся прочные знания по предмету, используя современные образовательные технологии и эффективные организационные формы учебной деятельности. Создать условия для творческой, активной самостоятельной деятельности учащихся как на занятиях, так и во внеурочное время. Воспитывать у учащихся активную жизненную позицию, имение самостоятельно критически и творчески мыслить, принимать и корректировать решения в процессе познания.

Оформите подписку «Инфоурок.Маркетплейс»

Вам будут доступны для скачивания все 250 471 материал из нашего маркетплейса.

Мини-курс

Современный руководитель: искусство управления командой

4 ч.

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

Мини-курс

Психоэмоциональное благополучие и развитие: от понимания к практическим решениям

3 ч.

699 руб.
Подать заявку О курсе
  • Этот курс уже прошли 13 человек

Мини-курс

Психолого-педагогические основы семейного воспитания

2 ч.

699 руб.
Подать заявку О курсе
Смотреть ещё 5 734 курса