Отправляет email-рассылки с помощью сервиса Sendsay

Онлайн поддержка web мастера. Как сделать эффективный сайт .

Рассылка закрыта

При закрытии подписчики были переданы в рассылку "Как создать свой сайт и заработать на нем?" на которую и рекомендуем вам подписаться.

Вы можете найти рассылки сходной тематики в Каталоге рассылок.

←   Декабрь 2006   →
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Автор
mczik

Статистика

24 подписчиков
0 за неделю
←   Все выпуски   →

Онлайн поддержка web мастера. Как сделать эффективный сайт . Повторный выпуск


www.fullweb.by.ru



Это моя первая рассылка, поэтому я начну с самого простого.
С вопросами обращаться на форум http://foweb.flybb.ru
Или mczik@mail.ru
__________________________________________________________________


В связи с неработающие версией первой рассылки я решил выслать её ещё раз.
Кстати всем подписчикам этой рассылки будет выслан пароль на бесплатную покупку моей книге в Интернет-магазине




Сегодня я расскажу вам как сделать свой первый сайт. Если вас уже есть сайт,
и вы знаете html, то всё равно изучите эту статью. Возможно, прочитав её, вы узнаете
ещё что-то новое и интересное.




Содержание

Введение.
Инструменты для создания WEB страниц
3
Урок 1. Ввод и форматирование текста 4
Урок 2. Загрузка фона и рисунка. Построение таблиц 6
Урок 3. Графика и мультимедиа на страницах WEB 7
Урок 4. Гиперссылки 9
Урок 5. Фреймы 11
Урок 6. Хождение по фреймам 15







Введение

Бурное развитие коммуникационных технологий и в частности Internet технологий, требует от современного молодого человека определенных знаний и умений по поиску, приему и передачи необходимой информации в международной сети - Internet. В связи с этим, в современные учебные программы по информационным технологиям включен такой раздел как "Коммуникационные технологии" который знакомит учащихся с принципами функционирования локальных и глобальных вычислительных сетей, работе с электронной почтой, основами языка
разметки гипертекста (HTML – Hyper Text Markup Language).
Данное пособие предназначено для учителей информационных технологий начинающих обучение школьников языку HTML. В пособии даются отдельные уроки по темам – описание тэгов HTML и примеры работоспособных программ по каждой теме. Так же к пособию прилагается диск с уроками, предлагаемыми в пособии и инструментальная программа для создания WEB страниц.


Инструменты для создания WEB страниц

Для создания WEB страниц можно воспользоваться средствами текстового процессора Microsoft Word, редактором Front Page и другими программами, специально разработанными для этих целей.
К преимуществам этих программ относятся – быстрое, визуальное создание WEB страниц даже дилетантами в области информационных технологий.
К существенным недостаткам такого рода программного обеспечения относится то, что разработчик WEB страниц, в большинстве случаев, не подозревает о существовании языка гиперссылок HTML, не говоря уже о Java и JavaScript, так как текст создаваемой WEB страницы, обычно скрыт от разработчика. Текст программы на HTML, полученный в результате разработки WEB страницы с использованием такого рода программного обеспечения, в 3 – 4 раза превосходит по объему текст программы, написанный профессионалом в обычном блокноте
Windows. Сама программа на HTML, обычно, нуждается в корректировке (особенно при использовании гиперссылок), так как работоспособна только на компьютере разработчика.
Очевидно, что для изучения языка HTML учащимися старших классов средней школы следует пользоваться блокнотом Windows, где ученик самостоятельно пишет текст программы, сохраняет ее на диске и выполняет программу в интернет браузере. Такой процесс создания интернет страниц весьма трудоемок, так как требует большого числа утомительных промежуточных действий. В связи вышесказанным, автором данного пособия разработана интегрированная среда для разработки WEB страниц "HTMLCreate.exe". Программа объединяет в себе блокнот,
файловый менеджер (для открытия, сохранения и запуска, созданных WEB страниц), справочник по цветовым константам и тэгам HTML с возможностью наращивания справочных данных, а так же вставки команд из справочника непосредственно в текст программы.



Урок 1
Начало. Ввод и форматирование текста

Тэг – элементарная команда языка HTML. Тэги в программе записываются внутри угловых скобок. Например, команда вывода на экран бегущей строки – MARQUEE, должна быть заключена в угловые скобки: . Если скобки опущены, то интернет браузер будет рассматривать эту команду не как команду, а как строку текста, которую нужно вывести на экран.
Большинство тэгов имеет команду отмены действия объявленного тэга. Для этого перед командой ставится правый наклонный слеш. Например, если мы напишем:
Это бегущая строка
Здравствуйте. Это сайт МУК-1
…………………….
то при запуске программы в браузере бегущей строкой будет не только надпись "Это бегущая строка", но и весь остальной текст – "Здравствуйте. Это сайт МУК-1 ……". Поэтому мы должны отменить действие команды MARQUEE, и правильно написать так:
Это бегущая строка

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

Тэги начальных установок
……… Начало ………..Конец программы на HTML
…….. Тело программы ……Закрыть
* Заголовок…….Отмена заголовка
Настройка цвета бумаги и цвета текста

Тэги настроек шрифта

Выделение жирным шрифтом
Установлен шрифт черного цвета
Увеличить размер шрифта на 2 пункта
* Жирный шрифт
* Подчеркнутый шрифт
* Зачеркнутый шрифт
* Шрифт телетайп
Шрифт курсив (италик)
Верхний индекс символов
Нижний индекс символов



Тэги форматирования текста
Центрирование текста
* Бегущая строка

Новая строка
Горизонтальная линия
Подчеркнуть надпись линией шириной – WIDTH <= 100% и толщиной SIZE
    Создание маркированного списка, тип маркера – диск
  • Начало строки маркированного списка
Отмена маркированного списка

*

Параграф

lesson1.html

Первая программа на HTML



Lesson1. Исследуем свойства надписей






  • Строка - нормальный шрифт

  • Строка - жирный шрифт

  • Строка - шрифт телетайп

  • Строка - шрифт курсив

  • Строка - подчеркнутый шрифт
  • Строка - зачеркнутый шрифт


Связь массы и энергии – E = mc2

Формула воды – H2O




Урок 2
Загрузка фона и рисунка. Построение таблиц

Загрузка фона страницы из графического файла fon.gif
Объявление таблицы с шириной бордюра = 2 и бордюром ячеек = 1
Объявление строки таблицы
* Объявление ячейки таблицы. Текст - жирный шрифт.
* Объявление ячейки таблицы. Текст -нормальный шрифт.
Завершение таблицы
Загрузка картинки с именем name.bmp
Загрузка картинки с выравниванием - ALIGN и масштабированием – WIDTH, HEIGHT

Lesson 2.html


Lesson2. Фон и таблицы



Загружаем фон и строим таблицу











Таблица понятная всем
Ячейка 1 строка 1
Ячейка 2 строка 1
Ячейка 1 строка 2
Ячейка 2 строка 2

В ячейку 1 строка 3
мы загрузили картинку




Эту картинку мы поместили посредине листа



Урок 3
Графика и мультимедиа на страницах WEB

К графическим и мультимедиа объектам, которые можно помещать на WEB страницах, относятся рисунки, фотографии и видео клипы. На WEB страницах допустимо, также, располагать и звуковое сопровождение.
К стандартным форматам графических файлов, которые распознаются всеми интернет браузерами, относятся: JPEG (JPG), GIF и PNG. Формат GIF позволяет создавать анимированные изображения, а формат PNG имеет малый объем графического файла при достаточно высоком качестве изображения.
Формат растровой графики BMP поддерживается не всеми браузерами, поэтому его лучше конвертировать в форматы JPG или GIF при помощи файловых конверторов – IrfanView или ACDSee.
Внедрение графического файла в состав WEB страницы осуществляется с помощью тэга с различными параметрами.

Тэги загрузки на WEB страницу файлов мультимедиа:
Тэг загрузки и воспроизведения видео файла.
Параметр - LOOP=INFINITE – указывает на то, что воспроизведение видео клипа будет постоянно, без фиксированного числа повторений. Если нужно, чтобы клип повторялся заданное число раз, то вместо значения INFINITE следует указать число повторений.
Параметр LOOPDELAY=4000, говорит о том, что задержка между показами видео роликов будет равна 4 секундам (значение параметра должно задаваться в миллисекундах).

Этикетка Тэг загрузки растровой графики – SRC. Параметр ALT задает надпись (этикетку), которая появляется на картинке, при установки курсора на эту картинку.
Тэг загрузки аудио файлов. Аудио файлы должны иметь формат MIDI или WAV. Параметр LOOP указывает на количество повторений проигрывания музыкального ролика.


Lesson 3.html


Lesson3. Мультимедиа объекты



Загружаем фон (fon.jpg) и внедряем картинки





А это я, картинка Image.gif
Подведите указатель мыши на картинку --->

и получите подсказку (hint) о картинке.







<-- Эту картинку мы поместили в левой части листа,
а сам текст располагается справа от картинки






Посмотрим клип "Speed.avi", взятый автором из стандартной поставки
языка программирования Delphi 6 (Фирмы Borland)







Урок 4
Гиперссылки

Гиперссылкой (или просто ссылка) в WEB страницах является строка текста, слово или картинка, при щелчке мыши, на которых можно осуществить переход к другой части текста, или к другому WEB документу, или осуществить переход на другой сайт по его адресу. Для создания ссылки существует тэг . Тэг * делает ссылкой заключенную в него картинку или фразу. Ссылка при этом имеет цвет, заданный тэгом . Параметры тэга означают следующее: link - цвет ссылки, alink - цвет активной ссылки (нажатой), vlink -
цвет уже посещенной ссылки. Принципы прописывания пути здесь такие же, как в случае с картинками:
Рассмотрим, как оформить разные варианты гиперссылок:
(1) мои фотографии
(2) мои фотографии
(3) http://www.homepage.ru/prf.html>мои фотографии
В случае (1) документ лежит в той же директории (папке), что и документ, в котором мы ссылаемся на файл prf.html, в случае (2),документ лежит в поддиректории /photo, в случае (3), мы ссылаемся на сайт http://www.homepage.ru, где лежит нужный нам документ.
Ссылкой может быть и картинка. Принцип ссылки тот же, что и в случае с текстом, только между тэгами вставляется не текст, а картинка:
моя фотография .
Для перехода внутри одной страницы ссылка оформляется следующим образом:
Перейти к тексту на этой странице
*
*
Это текст к которому мы перешли из ….


lesson 4

Главный файл Index.html




Lesson4. Изучаем гиперссылки




Главный файл обычно имеет имя "Index.html"

Именно этот файл загружен сейчас в Internet Explorer



(1) Мы можем переместиться по ссылке внутри этого файла.

Для этого щелкните мышкой по надписи указанной стрелкой


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

Для того чтобы перейти к другому файлу,

в нашем случае это файл 1.html,

щелкните мышкой на картинке с мигающим глазом



У нас есть еще один файл с именем 2.html,

давайте перейдем к нему, щелкнув мышкой на следующей строке

Перейти к файлу 2.htm



Почитайте стишок:

Кто пишет сайты по утрам

Тот поступает мудро

Известно всем, тарам – пам – пам

На то оно и утро





Это текст к которому мы перешли из текста (1)

Ну как? Понравился урок?




Дополнительный файл 1.html



Lesson 4. Файл 1.html





Прочитайте стишок:




Онегин, добрый мой приятель

Родился на брегах Невы

Где может быть, бывали вы

Или блистали мой читатель...





Вернуться на главную страницу





Дополнительный файл 2.html




А вот, и вторая страничка!






Познакомьтесь с автором

этих уроков




Если щелкнуть мышкой здесь,

то вернемся на главную страницу



Урок 5

"Фреймы"

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

Разметка страницы на горизонтальные фреймы:




Разметка страницы на вертикальные фреймы:



Рассмотрим параметры тэга frameset. Параметры COLS и ROWS задают высоту фреймов и ширину фреймов соответственно. Размеры фреймов указываются в пикселях, параметр указывает, что под фрейм следует выделить все свободное оставшееся место на экране. Размеры фреймов можно также указывать и в процентном отношении к размерам браузера, для этого тэг можно записать, например, так: ,30%>.

Для того, чтобы создать фреймы, как с вертикальной, так и горизонтальной разметкой следует, создав, например фреймы с горизонтальной разметкой, внутри текста программы поместить тэги создания фреймов с вертикальной разметкой:







Lesson 5

Файл, в котором мы создаем фреймы. Index.html



Файл меню для вставки во фрейм. Menu.html




В этом фрейме

можно создать меню

например, такое:




Что такое интернет

Введение в HTML

Переходим к Java Script

Об авторах





Файл – заголовок для вставки во фрейм. Logo.html



Страница разделенная на фреймы



Контекстный файл для вставки во фрейм content.html





Контекстная страничка




Изучая HTML - помни,

что это только начало

твоего пути

в увлекательный мир программирования

под Internet.

Впереди тебя еще ждет язык Java

и его упрощенная версия Java Script.









Хотите большего? Тогда вам сюда www.Fullweb.by.ru













.:-----------------------------------------Советуем посетить-----------------------------------------:.
Предлагаем посетить наши работы:
Fullweb.by.ru Онлайн поддержка Web мастера.
Заработок в сети, раскрутка и оптимизация сайта, и куча полезной информации
про Интернет.

Приглашаем к сотрудничеству web мастеров.
У Вас есть сайт? Вы хотите зарабатывать 100-1000$ в Интернете?
Или просто обменяться ссылками www.Fullweb.by.ruтогда пишите:

Mczik@mail.ru
www.xbase.ru/?mczik
www.foweb.flybb.ru







Администратор сайта http://Fullweb.by.ru
В избранное