Урок как создать свою первую web-страницу ?




НазваниеУрок как создать свою первую web-страницу ?
Дата публикации17.03.2013
Размер0.96 Mb.
ТипУрок
odtdocs.ru > Информатика > Урок

Краткий справочник HTML для начинающих.


html


Предназначен для тех, кто готов к кропотливой работе в web-редакторе с исходным кодом web-страницы

клавиатура

АВТОР: Клещетников Ю.В.

e-mail: black_chip@mail.ru


2007 г.

СОДЕРЖАНИЕ:
ВВЕДЕНИЕ

УРОК 1. КАК СОЗДАТЬ СВОЮ ПЕРВУЮ WEB-СТРАНИЦУ ?

УРОК 2. КАК НА СВОЕЙ СТРАНИЦЕ РАЗМЕСТИТЬ ФОТОГРАФИЮ ИЛИ РИ­СУНОК ?

УРОК 3. КАК ВЫДЕЛИТЬ С ПОМОЩЬЮ ЭЛЕМЕНТОВ ФОРМАТИРОВА­НИЯ ТЕКСТ, ИСПОЛЬЗУЯ ТЕГ ?

УРОК 4. ИСПОЛЬЗОВАНИЕ ТАБЛИЦ – ЛУЧШИЙ СПОСОБ ФОРМАТИРОВА­НИЯ БЛОКОВ ТЕКСТА.

УРОК 5. НЕКОТОРЫЕ ДРУГИЕ МЕТОДЫ ФОРМАТИРОВАНИЯ СТРАНИ­ЦЫ.

УРОК 6 ИСПОЛЬЗОВАНИЕ ГИПЕРССЫЛКИ С ПОМОЩЬЮ ТЕГА .

УРОК 7. ИСПОЛЬЗОВАНИЕ ФОРМ.

УРОК 8. ИСПОЛЬЗОВАНИЕ ГРАФИЧЕСКИХ ССЫЛОК С ПОМОЩЬЮ ТЕГА .

УРОК 9. БЕГУЩАЯ СТРОКА.

УРОК 10. ВОСПРОИЗВЕДЕНИЕ ФАЙЛОВ МУЛЬТИМЕДИА.

УРОК 11. ФРЕЙМЫ – ЗАБЫТАЯ ТЕХНОЛОГИЯ.

УРОК 12. ИСПОЛЬЗОВАНИЕ СТИЛЕЙ CSS.

УРОК 13. ИСПОЛЬЗОВАНИЕ СЦЕНАРИЕВ.

ЗАКЛЮЧЕНИЕ.

ВВЕДЕНИЕ
Данный справочник предназначен для тех пользователей компьютера, которые хо­тели бы самостоятельно разрабатывать простые WEB-страницы и при этом понимали бы код страницы, написанный в виде разметки.

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

В современных браузерах (программ, считывающих и интерпретирующих код WEB-страницы) есть поддержка языка HTML версии 4.0 и более высокой. Это означает, что старые WEB-страницы, созданные на основе более ранних версий этого языка могут вы­полняться не совсем корректно, либо вообще не выполняться.

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

В данном справочнике будет дан лишь краткий обзор языку HTML. Чтобы стать первоклассным специалистом в разработке и технической поддержке сайтов необходимо прочитать множество книг по новым версиям этого языка, по интерпретации его в раз­личных браузерах, также необходимо освоить несколько языков сценариев (JavaScript, JScript, VBScript, php, perl и другие), языков среднего и низкого уровня (C/C++, C#, Java и др.) и конечно же язык стилей CSS, без которого не обходится ни один современный сайт.

Кроме программирования необходимо научиться пользоваться различными графи­ческими редакторами (Paint, Paint.net, Corel Drow, Photoshop, the Gimp и др.). Также не нужно забывать о том, что, во-первых, скачивать большие WEB-страницы – это дорого, а если клиент сайта использует модемное соединение через dialup, то это вызовет невыно­симо долгое ожидание загрузки страницы. Главное правило – ничего лишнего на страни­це. WEB-страница должна быть информативной, лёгкой («весить» желательно много ме­нее 200 Kb), красивой и без единой ошибки.

Для серьёзных разработчиков необходимо также задуматься о защите сайта (и своих клиентов) от вирусов, червей, троянов, зеркальных ссылок, банеров и других вредоносных программ. Можно самому разработать защиту или заплатить деньги специа­лизированным фирмам. Да прибудет с Вами сила.

УРОК 1. КАК СОЗДАТЬ СВОЮ ПЕРВУЮ WEB-СТРАНИЦУ ?
Самое минимальное, что нужно для того, чтобы создать свою WEB-страницу – это компьютер, операционная система, браузер и текстовый редактор, способный редактиро­вать текст.

Рассмотрим как создать WEB-страницу с использованием редактора Notepad (Wordpad, Scite, Xpad или любого другого).

Для этого включите компьютер и дождитесь загрузки операционной системы. Вой­дите в директорию (в папку), в которой Ваш пользователь имеет права на создание и ре­дактирование документов (Например, в Windows это может быть: C:\Documents and Settings\Пользователь\Рабочий стол\ или в Linux: /home/user/Desktop). Web-страницу можно создать разными способами, я опишу самый наглядный способ для начинающих пользователей.

Нажмите правой кнопкой мыши в рабочей области папки и выберите в пунктах меню «создать текстовый документ». Когда документ создастся на­жмите на клавиатуре «F2» и сотрите имя файла с расширением (если у файла скрыто расширение, то перед этим зайдите в свойства папки и уберите галочку со вкладки скры­вать известные расши­рения файлов), затем наберите новое имя файла, поставьте точку и наберите расширение «htm» или «html» (вместо «*.txt»).

После этого нажмите правой кнопкой мыши на полученной пустой web-странице и выберите команду открыть с помощью «текстового редактора» (того, который Вы соби­раетесь использовать для редактирования своей стра­ницы).

При выборе web-редактора следует быть крайне осторожным, потому-что некото­рые из них вносят автоматические изменения, которые запрограммированы разработчика­ми редакторов. Это может привести к тому, что Ваша кропотливая работа после сохране­ния файла может быть испорчена.

Итак, первое с чего начинается любая грамотно написанная web-страница – это указание на тип языка, на котором она, собственно говоря, и написана. Введите в редак­торе следующий текст:

Transitional
//EN'>

Кавычки можно использовать как одинарные, так и двойные, и, если Вы пользуетесь обычным текстовым редактором (без встроенной автозамены вашего кода на тот, что со­здан разработчиками программы), то регистр символов в языке HTML (не путайте с дру­гими языками) значения не имеет.

Написанный код обозначает, что страница создана на основе языка HTML версии 4.0 (вероятно, что браузеры не поддерживающие эту версию языка не смогут её интерпре­тировать). Для пользователей старых браузеров, если необходимо, можно создать допол­нительную версию web-страницы, но об этом Вы узнаете в других источниках.

Как Вы заметили, код помещён в треугольные скобки «<» и «>» (это особенность языка). Текст кода, размещённый в такие скобки называется тегами (дескрипторами или флагами, кому как больше нравится). У большинства тегов есть закрывающиеся пары (за­крывающиеся теги), есть теги без таких пар, а есть теги, которые можно писать как с за­крывающимися парами, так и без них. В данном случае рассмотрен 2-й пример.

Текст, обрамлённый открывающимся и закрывающимся тегом, называется контей­нером и ему присваиваются свойства и стили этого тега. Контейнер, в свою очередь, мо­жет содержать ещё и другие встроенные контейнеры и одиночные теги со своими особен­ностями.

Второе что пишется в странице – это пара тегов и :




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

Обратите внимание на то, что, в отличие от открывающегося тега, закры­вающийся тег содержит наклонную черту («слэш»). Это одна из особенностей языка размет­ки ги­пертекста. Следует запомнит правило, что зарывающийся тег содержит после косой чер­ты только первое слово открывающегося, так как все остальные слова являются допол­нительными ключами и параметрами тега. К примеру, если Вы решитесь закрыть тег , имеющий дополнительные параметры, то Вам нужно писать следующее:




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

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

Основная часть страницы – это контейнер

Добавить документ в свой блог или на сайт

Похожие:

О проведении районного конкурса на лучшую web-страницу по патриоти
«О проведении конкурса на лучшую web-страницу по патриотическому воспитанию в образовательных учреждениях», в целях совершенствования...

Мате, деньгах и информатике. Я в журнале молоток выиграл свою первую мобилу
Я в журнале молоток выиграл свою первую мобилу. Там конкурс был со­чинить рэп-акростих. Ну, я прислал ва­рианта четыре и победил....

О проведении муниципального конкурса на лучшую web -страницу по патриотическому...
О проведении муниципального конкурса на лучшую web-страницу по патриотическому воспитанию в образовательных учреждениях

Тамбовской области
О проведении областного конкурса на лучшую web-страницу по патриотическому воспитанию в образовательных учреждениях

Лабораторная работа №4 Тема: «Web- проектирование и Web-дизайн. Пакет...
Цель работы: Ознакомление с основами Web-проектирования и Web-дизайна. Формирование навыков использования пакета FrontPage 2002/2000...

Урок 10. Зачет «Клетка как система органоидов»
Цель: создать условия для проверки качества обученности по теме «Структурная организация клетки»

Отражение текста в Inkscape
Отражение текста в своих работах сегодня не использует только ленивый. Подобный эффект уже давно стал одной из основных «гламурных...

Индивидуально. 1 часть: Требуется написать web-сервис на языке Java,...
По сути необходимо осуществить взаимодействие двух web-сервисов посредством передачи xml сообщений. AppEngine должен позволять эмулировать...

Урок английского языка по теме : «It`s my birthday»
Развитие умений прогнозировать содержание текста с опорой на иллюстрации и первую фразу (ознакомительное чтение)

Тезисы работы “Детская фантазия”
Этот урок обобщающий, проводится после усвоения учащимися определенных навыков работы с простейшим графическим редактором «gimp»,...

Вы можете разместить ссылку на наш сайт:
Школьные материалы


При копировании материала укажите ссылку © 2013
контакты
odtdocs.ru
Главная страница