Пример создания html страницы в блокноте. Основы 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. Форматирование символов
Символы, заключенные между следующими тегами отображают:
Параметры шрифта
Текст, заключенный между тегами
Если в тексте имеется несколько пробелов между словами или символы табуляции, то браузер на экран выводит всего один пробел. Если необходимы дополнительные пробелы то между словами надо добавить - символьный примитив.
Одиночный тег
разрывает текстовый
поток и вставляет пустую строку. Несколько таких
тегов добавляют несколько пустых строк.
Межстрочный интервал – одинарный.
4. Практическое задание №1 .
Создание первого HTML-документа “Драматические театры Санкт-Петербурга”, работа со шрифтами, задание цвета и размера шрифта. Освоение технологии работы.
Урок №2
1. Форматирование текста по абзацам
Тег - начинает абзац с новой строки. Новый абзац отделяется от предыдущего двойным межстрочным интервалом.
Выравнивание текста по абзацам:
2. Задание цвета всего текста и фона документа
Описываются в начальном теге тела документа
TEXT =цвет текста >.3. Заголовки разных уровней
Тегами
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 Создание навигации по сайту в форме таблицы из
одной строки 1. Секция заголовка В секции заголовка на каждой странице
указывается информация о документе, которая
используется при его отображении. Текст,
заключенный между тегами В секции заголовка обычно помещается и ряд
тегов
с различными атрибутами,
предоставляющими дополнительную информацию
(метаинформацию) о Web-сайте: >
- - (указывается тип кодовой
таблицы (windows-1251
, Koi8-R
и другие),
использованной при подготовке текстовой части
документа.
- информация об
Идея понятна? Приступаем. Запускаем Блокнот и пишем наш минимальный набор для создания
страницы .
Теперь напишем между тегами
Далее разместим теги
Для создания каркаса страницы мы будем использовать таблицу, но чуть более
хитрую, чем мы проходили в HTML-уроке о таблицах . Нам
нужна таблица, в которой в первой строке будет 1 ячейка, а в другой строке будет
2 ячейки, т.е. вот такая нам нужна таблица: В ячейке 1 мы расположим шапку сайта, в ячейке 2 будет меню сайта, а в ячейке
3 будет содержимое страницы. Для того чтобы сделать такую таблицу, напишите вот такой код
Т.е. код нашей страницы будет вот такой:
Как видите, в такой вот "хитрой" таблице используется лишь 1 пара
тегов Так. Теперь зададим размеры таблицы. Ширину таблицы сделаем 750 пикселей. Из
расчета, что кто-то из посетителей сайта может использовать монитор 800х600
точек, и просматривать более широкий сайт ему будет некомфортно. Высоту таблицы сделаем 600 пикселей Т.е. код нашей страницы теперь будет вот такой.
Чтобы стало видно границы частей сайта - "зальем" область меню и
область шапки цветом. Например, вот так
Сохраните файл под именем index.html
, для того чтобы его можно было
просмотреть, как он будет выглядеть в браузере. Теперь вставляем картинку шапки в наш сайт. О том, .
Теперь установим точные размеры ячейки таблицы, предназначенной для шапки.
Т.к. картинка шапки у нас имеет размер 750х120, то и размер ячейки таблицы сделаем
750 х 120.
ТАК . Установим ширину меню равной 200 пикселей, для этого добавим width="200"
в соответствующий тег
Задний план меню "зальем" вот таким фоном, для этого сохраните этот
фон с его "родным" именем sv11.jpg в ту же директорию, где находится
файл страницы. А теперь прописываем нужный код
Теперь наша страница будет выглядеть ТАК . У вас, возможно, возник вопрос, почему браузер не "отрабатывает"
ширину меню 200? Меню ведь выглядит шире, чем 200 пикселей. Да. Есть такой глюк
браузера, но все встанет на свои места, если начать писать текст в основном
разделе страницы. (Или можно задать жестко ширину ячейки, в которой будем писать
контент, дописав width="550"
) Чтобы подтвердить это, добавим текста на наш сайт.
Теперь все почти ОК...Почти, потому что налицо небольшие проблемки. Текст отображается
ровно посередине (по вертикали), а следовало бы, чтобы текст был расположен
вверху ячеек. Для этого нам надо прописать еще один параметр в теге Этот параметр мы не проходили в уроке о таблицах , -
это параметр выравнивания по вертикали valign="top". Значение top означает, что содержимое будет располагаться вверху.
Теперь наша страница будет выглядеть ТАК .
Главная
Теперь надо сделать текст меню в виде ссылок. Слово Главная залинкуем на страницу
index.html, а слово Ссылки на страницу ssilki.html, которую мы создадим чуть
позже.
Главная
Ссылки
Теперь наш сайт будет выглядеть ТАК . Осталось сделать вторую страницу сайта. Для того чтобы упростить работу, сделаем
так - сохраним нашу страницу index.html под другим именем ssilki.html, а затем
подредактируем файл. Т.е. на компьютере у вас должно быть 2 пока что одинаковых страницы - index.html
и ssilki.html. Теперь изменим название страницы (между тегами
Главная Сайт
о заработке в интернете MoneyMaster
Вторая страница сайта будет выглядеть ТАК. Возможно, у кого-то возник вопрос. А почему столько много пустых строк, нельзя
ли уплотнить код? Можно. Я сделал пропуски, чтобы было наглядней видно структуру страницы. А
так можно разместить весь код вообще в одну строчку Если есть какие либо вопросы по этому примеру - пишите . Вот мы и сделали простенький сайтик, который вы можете подредактировать и разместить
в интернете. Очень многие спрашивают, как разместить сайт
в и нтернете
, чтобы его можно было видеть не только на своем компьютере,
а чтобы его могли видеть и другие люди. Ок. Забегу немного вперед. Для того, чтобы ваш сайт был доступен из интернет всему миру, надо найти ,
который предоставит вам место для вашего сайта. Хостинг бывает бесплатный и
платный. Бесплатный хостинг дает вам также и адрес сайта. Так например, если
вы зарегистрировались на хостинге narod.ru, указав при регистрации логин pupkin,
то адрес вашего сайта будет http://pupkin.narod.ru Но бесплатные хостинги обладают
кучей недостатков и их следует использовать лишь для тренировки. Если же делать
серьезный сайт, то надо покупать
и покупать хостинг, затем связать домен и хостинг (подробнее эти вопросы рассматриваются
в книге MoneyMaster-3), тогда ваш сайт будет иметь желаемый вами адрес типа
http://gadukino.ru (если домен не занят), и вы получите еще кучу преимуществ
по сравнению с бесплатным хостингом, например, возможность использовать скрипты,
что позволит вам создавать динамические сайты. После того как вы определились
с хостингом и получили место для вашего сайта, надо перебросить файлы сайта
на хостинг. Сделать это можно с помощью специальных FTP- программ, например
LeapFTP, CuteFTP, или можно сделать с помощью файловых оболочек Windows Commander,
Total Commander и др. можете скачать видео-урок, из которого вы узнаете, как сделать переброску
файлов на хостинг. ПОЗДРАВЛЯЮ!
Если вы дошли до этого момента и у вас все получилось, значит, вы прошли своего
рода тест-драйв и теперь с уверенностью можете двигаться дальше. Конечно, сделанный для примера сайт не так крут. И даже в этом сайте пришлось
использовать готовые картинки, которые вы скорей всего создавать не умеете. А вы хотели бы научиться рисовать сами графический дизайн вашего сайта? Этому вы можете научиться, пройдя обучение по книге MM-2. Книга MM часть 2.
УЖЕ СЕГОДНЯ
вы
сможете сделать СВОЙ приличный, эксклюзивный дизайн для вашего сайта
,
не теряя недели/месяцы на изучение учебников и прочих материалов,
не воруя дизайн у других и не используя темплейты. ДАЖЕ ЕСЛИ ВЫ В ПРИНЦИПЕ НЕ ДИЗАЙНЕР
- У ВАС ВСЕ РАВНО ПОЛУЧИТСЯ ПРИЛИЧНЫЙ ДИЗАЙН! Как сделать красивый сайт, даже если вы пока не дизайнер.
Обучение необходимым навыкам и приемам для создания графических элементов
сайта. Разновидности дизайна. К сожалению, книга 2 не бесплатная, но я уверен, что вы не пожалеете о ее покупке.
Наверняка до прочтения книги MM-1 вы и представить не могли, что, изучив ее,
вы научитесь создавать простенькие сайты. Скорей всего, вам это казалось чем
то очень сложным, "не для вашего ума". Но я вас провел по самой короткой
дорожке к результату, держа вас как ребенка за руку. Точно так же, изучив MM-2,
вы научитесь делать графический дизайн сайта, при этом, опять же пройдя по самой
короткой дорожке, т.е. СЭКОНОМИВ ВРЕМЯ, не тратя месяцы на изучение различных
книг. Потратив несколько вечеров на изучение MM-2, вы будете в силах делать
свой дизайн для своих сайтов, значительно обогнав тех, кто решит купить книги
в обычном магазине и будет месяцами их изучать. Цена на книгу MM-2 также включает в себя цену на консультации. Да. Если у вас совсем уж туго с финансами, то можете заработать необходимые деньги
.
Много там не платят, но для кого-то это будет спасительной соломинкой, чтобы
купить книги. Теперь пару слов о тегах, которые мы использовали, чтобы сделать эту страницу. 1.
- эти теги должны присутствовать на каждой веб-странице обязательно. Они сообщают браузерам и поисковым машинам, что это html-страница. Любая html страница имеет следующую структуру: 2. 4. | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
