Скачать готовую веб страницу html по информатике. Основы HTML

В примерной программе по информатике и ИКТ на тему “Коммуникационные технологии” отводится всего 12 часов и предлагается создать Web-страничку с использованием шаблонов. На тему “Мультимедийные технологии” выделяется 8 часов, но если в образовательном учреждении информатика изучается на пропедевтическом уровне уже в 5, 6 и 7 классах, то целесообразно перенести изучение мультимедийных технологий в пропедевтический курс и тогда можно увеличить время на изучение коммуникационных технологий, а точнее, можно добавить тему “Создание Web-сайтов на языке HTML” в 8 классе.

Освоение технологии создания сайтов рекомендуется начать с языка разметки гипертекста HTML в программе Блокнот, что является первоосновой в данном направлении. Конечно, за 8 часов невозможно изучить весь язык HTML, но можно показать назначение и применение основных тегов языка. Если ученик заинтересуется технологией создания сайтов, то сможет продолжить изучение материала самостоятельно или на соответствующих курсах, кружках или факультативах.

Представленное методическое пособие прошло неоднократную опрабацию в 8-х классах гимназии №441 Фрунзенского р-на Санкт-Петербурга и включает материал для проведения теоретических и практических занятий, выполнение которых сначала демонстрируется через проектор, а затем учащиеся выполняют самостоятельно на компьютере, используя раздаточный материал к уроку.

Для учащихся, которые бысторо выполнили запланированную работу на уроке предусмотрены дополнительные задания.

Эффективно осваивается материал, когда учащиеся вместе с учителем выполняют общий проект, например, по теме из истории Санк-Петербурга “Драматические театры Санкт-Петербурга”, а затем в качестве итоговой работы создают собственный небольшой проект, используя в качестве шаблона сайт, созданный совместно с учителем.

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

Основные цели обучения: формирование познавательного интереса, развитие интеллектуальных и творческих способностей в области Web-технологий.

Обучающие:

  • сформировать систему знаний по технологии создания Web-сайтов;
  • обучить языку разметки гипертекста HTML для создания сайтов;
  • познакомить с этапами проектной деятельности.

Развивающие:

  • развить творческие способности к самовыражению, посредством создания сайтов;
  • сформировать умение сопоставлять, искать аналог и осуществлять перенос знаний в новую предметную область Web-технологий;
  • развить навыки работы на компьютере

Воспитательные:

  • воспитать добросовестное отношение к работе;
  • воспитать чувства товарищества и личной ответственности за созданный сайт;
  • воспитать художественный и эстетический вкус;
  • воспитать грамотного и корректного пользователя сети Интернет.

Урок 1

1. Общие сведения о Web-сайтах и языке HTML

Публикации во Всемирной паутине (World Wide Web)реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвящённую какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц, объединённых гиперссылками. Web-страницы могут содержать текст, рисунки, таблицы, мультимедийные и динамические объекты. Создание Web-сайтов можно осуществлять с помощью языка HTML.

HTML – Hyper Text Markup Language - язык разметки гипертекста. HTML ни в коей мере не является языком программирования, он отвечает только за расположение элементов (текста, рисунков) в окне браузера. HTML является языком для создания Web-сайтов во Всемирной паутине. Язык HTML состоит из простых команд – тегов. Теги управляют представлением информации на экране при отображении HTML-документа. Теги заключаются в угловые скобки <>… и бывают парные и непарные (одиночные <>).

Документ HTML – это текстовый файл с расширением.html или.htm , содержащий набор тегов.

Браузер – (browser) – программа для просмотра Web-страниц. Широко используют бразеры Microsoft Internet Explorer, Opera и др. Браузер при получении документа HTML выполняет его анализ, строит объектную модель документа, затем результат отображает на мониторе.

2. Структура HTML-документа

3. Форматирование символов

Символы, заключенные между следующими тегами отображают:

Параметры шрифта

Текст, заключенный между тегами …….. имеет заданный размер, цвет и гарнитуру. Для этого используются атрибуты: SIZE = значение от 1 до 7 и COLOR = цвет (aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white), каждому цвету соответствует свой шестнадцатеричный код от 000000 до FFFFFF.

Если в тексте имеется несколько пробелов между словами или символы табуляции, то браузер на экран выводит всего один пробел. Если необходимы дополнительные пробелы то между словами надо добавить - символьный примитив.

Одиночный тег
разрывает текстовый поток и вставляет пустую строку. Несколько таких тегов добавляют несколько пустых строк. Межстрочный интервал – одинарный.

4. Практическое задание №1 .

Создание первого HTML-документа “Драматические театры Санкт-Петербурга”, работа со шрифтами, задание цвета и размера шрифта. Освоение технологии работы.

Урок №2

1. Форматирование текста по абзацам

Тег - начинает абзац с новой строки. Новый абзац отделяется от предыдущего двойным межстрочным интервалом.

Выравнивание текста по абзацам:

2. Задание цвета всего текста и фона документа

Описываются в начальном теге тела документа

TEXT =цвет текста >.

3. Заголовки разных уровней

Тегами …. оформляют заключенный в них текст. Значения n меняются от 1 до 6, при этом текст выводится от более крупного к более мелкому. Теги …. могут иметь атрибуты ALIGN=CENTER, LEFT, RIGHT.

4. Простые списки

5. Практичекое задание №2

Форматирование текста по абзацам, цвет фона, заголовки разных уровней, списки.

Урок №3

1. Вставка графических изображений

Всеми браузерами поддерживаются форматы .gif , .jpg. Эти форматы являются растровыми. GIF – поддерживается прозрачность и анимацияю, хорошо подходит для рисованных изображений. JPG – для полноцветных изображений, хорошо подходит для отсканированных изображений и фотографий, анимацию не поддерживает.

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

>

Необязательные атрибуты тега :

Чтобы рисунок был по центру, можно использовать тег

…….
/

2. Практическое задание №3

Вставка и форматирование графических изображений. Самостятельное создание Web-страниц драматических театров.

Урок №4

Связь с другими документами организуется тегами <A>….

> текст гиперссылки .

>< IMG SRC =’имя графического файла’>

2. Практическое задание №4

Оформление списка театров на главной странице glavn.htm, как гиперссылки на соотвествующие Web-страницы театров.

Урок №5

1. Таблицы

Используют не только для того, чтобы располагать данные в ячейках, сколько с целью позицирования фрагментов текста и изображений друг относительно друга.

С помощью таблиц удобно создавать навигацию по сайту.

Пример таблицы из двух строк (рядов), содержащих по две ячейки:

Ячейки таблицы могут содержать текст или изображения, а также текст с HTML-тегами и гиперссылки. Не следует оставлять ячейки таблицы незаполненными, надо поместить хотя бы неразрывный пробел

Основные атрибуты тегов

и
задают параметры таблицы, строки или ячейки:

ALIGN=left, right, center – выравнивание (

, ,
)

BGCOLOR=’цвет’ – фоновый цвет (

, ,
)

HSPACE=значение – свободное пространство слева и справа от таблицы в пикселах (

)

VSPACE=значение - свободное пространство сверху и снизу от таблицы в пикселах (

)

WIDTH=значение – ширина таблицы (ячейки) – в пикселах, или в процентах (

,
)

HEIGHT= значение – высоты таблицы (ячейки, строки) – в пикселах, или в процентах (

, )

BORDER= значение – толщина рамки вокруг таблицы и ее ячеек, по умолчанию значение=1, если значение=0, то рамки нет (

,
, ,
)

BORDECOLOR=’цвет’ – цет рамки (>)

VALIGH=bottom, middle, top – выравнивание содержимого по вертикали (

)

2. Практичекое задание №5

Создание навигации по сайту в форме таблицы из одной строки

Уроки №6 и №7

1. Секция заголовка , мета-теги

В секции заголовка на каждой странице указывается информация о документе, которая используется при его отображении. Текст, заключенный между тегами </b>... <b>, отображается в заголовке окна браузера.

В секции заголовка обычно помещается и ряд тегов с различными атрибутами, предоставляющими дополнительную информацию (метаинформацию) о Web-сайте:

Драматические театры Санкт-Петербурга<b>

> - - (указывается тип кодовой таблицы (windows-1251 , Koi8-R и другие), использованной при подготовке текстовой части документа.

- информация об

Сохраняем и смотрим, что у нас получилось. Вроде все как надо. Отлично. Уже продвинулись далеко вперед.

Вставка таблицы

Откройте в блокноте страницу table.html , перетащите из одноименного вордовского документа все заголовки и текст, после чего расставьте все теги и атрибуты как надо.

Вот теперь переходим к тому, что нам нужно. Создаем таблицу в 5 строк и 5 столбцов, после чего вставляем в них соответствующие значения. Не забываем ставить нужные атрибуты, а именно border="2", cellpadding и cellspacing по 5. В коде это должно выглядеть примерно так:

Сохраняем и смотрим, что у нас получилось. Всё отлично!

Страница об авторе

Мы уже почти всё сделали. Нам только осталось закончить страницу об авторе. Зайдите в страницу obo-mne.html и вставьте из одноименного вордовского документа весь текст со всеми заголовками и расставьте теги.

Короче, теперь после тегов шапки сайта и менюшек вам нужно будет прописать адрес этой картинки и поставить атрибут align="left" , что текст оплетал фотографию. Если выглядит некрасиво, то можно поиграться с отступами на несколько пикселей. Примерно это должно выглядеть так.

Все сделали? Всё получилось? Я надеюсь, что да. Но теперь нам нужно . В документе ссылка есть. Всё, что вам нужно — это просто вставить ее после основного текста. Если вдруг видео налезает на фотографию автора, то просто после текста сделайте парочку отступов с помощью
.

Ну вот вроде бы и всё. По заданию всё выполнено и теперь у вас есть такой простенький html сайт, сделанный в блокноте Notepad++ буквально за 10-15 минут. Несмотря на то, что это наипростейший html каркас без CSS свойств и других приблуд, оказывается до сих пор существуют люди, которые продают курсы аля «Как создать сайт» с информацией, подобной этой. Причем берут за это деньги — и 500 рублей, и даже 2000. Я просто в шоке!)

Уж если и брать какие-то курсы, то лучше у профессионалов, которые собаку на этом съели. Лично я рекомендую вам посмотреть курс Андрея Бернадского "HTML5 и CSS3 с нуля до гуру ". Курс просто потрясающий, несложный в освоении и рассчитанный на любой уровень пользователя. Благодаря ему вы реально научитесь верстать довольно неплохие сайты.

Кстати как ваши ручки? Надеюсь, что вы не филонили и всё прописывали своими чудесными ручками. Я надеюсь, что каши в голове у вас нет и я все нормально объяснил. Ну а если у вас что-то не получилось, то в папке лежит готовая версия нашего сайта со всеми комментариями, чтобы вы смогли разобраться.

Фух. В общем на сегодня я всё. Воды сегодня выпил литра 4 наверное из-за жары. Так что надеюсь, что вам моя статья понравилась и была полезной в плане изучения. Не забывайте подписываться на новые статьи моего блога. Я вам расскажу еще много всего интересного. А вам я желаю удачи и спокойно перетерпеть жару. Ну а я пошел охлаждаться. Увидимся. Пока-пока!

С уважением, Дмитрий Костин.

Всем-всем привет!

Коли начали мы изучать , значит нужно знать основы HTML и CSS, которые помогут сделать наши сайты лучше и привлекательнее для поисковых систем. Всю эту неделю я буду рассказать Вам о работе с кодом сайта и вот, что Вас ждет:

  • . Будем учиться редактировать код сайта с помощью данных редакторов;
  • . Поможем поисковому роботу понять структуру страницы;
  • . Узнаем насколько правильно составлен код сайта и найдем ошибки;

Как видите, на неделе у нас будет очень много работы, поэтому подписывайтесь на обновления блога Context-UP и получайте все уроки себе на почту, если Вы еще не подписаны.

Основы HTML

HTML (Hyper Text Markup Language) – это язык разметки документов в Интернете. То есть, любая страничка Вашего сайта – документ, а браузер – средство просмотра подобных документов.

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

Язык разметки состоит из специальных тегов, которые помогают браузеру определить:

  • Структуру документа;
  • Место нахождения того или иного элемента;
  • Предназначение элемента;
  • Подключаемые сторонние файлы;
  • И много-много другого.

Это понимают и поисковые роботы, поэтому нужно уделить особенное внимание тому, насколько правильно составлен документ с точки зрения SEO и какую структуру имеет.

Структура HTML

Любой HTML-документ имеет начальную структуру, которая должна соблюдаться в обязательно порядке. Выглядит она так:

<! DOCTYPE html> <html > <head > <meta charset = " UTF-8 " > <title > Заголовок страницы</ title > <meta name = " keywords " content = " Ключевые слова, и, фразы, через, запятую " > <meta name = " description " content = " Описание контента страницы, 1-2 предложения. " > </ head > <body > Контент страницы

Разберем каждый элемент подробнее:

  1. <! DOCTYPE html>

    Начало любого HTML-документа задается этим элементом. Так как язык разметки HTML постоянно развивается и имеет несколько версий, данный элемент помогает браузеру понять какая именно версия используется в документе и его тип;

  2. <html > - открывающий тег; - закрывающий тег

    Данный тег является контейнером, в который входит все содержимое страницы. Необязателен к заполнению, но все же принято его использовать в каждом документе. Имеет закрывающий тег;

  3. <head > - открывающий тег; - закрывающий тег

    В пределах тегов указывается , а также другая техническая информация. К использованию допускаются такие теги, как:

    1. Подключение внешних файлов, например, файл стилей style.css;

    2. Используется для хранения информации для браузера и поисковых систем;