Использование языка HTML для создания сайта
С одной стороны, кажется, что стало хуже, все в разброс и ничего не ясно. На самом же деле все наоборот. Нужно ставить тэги на разные, привычные для вас места, но закрывающие и открывающие на одном уровне. И открывая свою многострочную страницу, вы легко определите и визуально представите, что где находится. Это метод активно используется людьми, которые профессионально занимаются созданием… Читать ещё >
Использование языка HTML для создания сайта (реферат, курсовая, диплом, контрольная)
Пояснительная записка На данный момент самая посещаемая часть Интернета — World Wide Web — www, состоит из Web сайтов и отдельных Web — страниц, а в основе создания сайтов лежит язык HTML. Естественно HTML это только фундамент профессионального сайта, т.к. этот язык «примитивен» и является скорее оболочкой сайта, нежели новомодной начинкой. Для более профессиональных сайтов существует язык PHP, который используется в основном с MySQL базами данных. Такие познания требуются для торгового класса сайтов. Они несут в себе бизнес, доход и торговую систему, но опять же без знания простейших языков программирования вам этого не добиться, потому, как в основе любого сайта лежит HTML. Этот простенький язык может помочь в развитие бизнеса, поэту, художнику, самый же главный потенциал знания HTML это экономия при создании своего сайта. Вам ненужно будет заказывать за огромные деньги у программистов сайт, потому как вы сами сможете его сделать и возможно даже помочь коллеге в этом деле.
Язык HTML очень прост, и пользоваться им может абсолютно каждый, для этого быть программистом необязательно, достаточно иметь навыки пользования Интернетом.
Я постарался описать в своей методичке довольно простой метод обучения этому языку. За основу мы возьмем созданный мной шаблон, который будем описывать по мере создания его основ. Таким образом, на основе полученных знаний вы сможете создавать электронные учебники, легкие сайты и электронные резюме. Профессионализм приходит не сразу, но после 10−15 созданных вами сайтов на моей основе, вполне сможете вершить «шедевры».
Шедевром можно назвать свой сайт тогда когда он будет отвечать всем стандартным требованиям, естественно, если сайт будет сделан именно вами (плагиат в данном случае считается пустой тратой времени, хотя очень многие считают это в порядке вещей). Стандарты сайта, я приведу в одной из разделов данной методички.
Глава 1. Основа сайта Тема 1. Общие характеристики И так, преступим к созданию будущего сайта. Во всех страницах нашей методички будет использоваться один и тот же шаблон кода, который мы будем обновлять по ходу работы.
Вот этот шаблон:
Символы и слова со значками <�…> называются тэгами. Тэги бывают открывающие и закрывающие.
К примеру: открывающий, они отличаются только символом /, например:
Но не все теги HTML действуют по этому принципу, есть и такие тэги, у которых закрывающего тэга нет, например:
В данном шаблоне кода используется четыре тэга, это: ,
,. Рассмотрим что они означают и для чего нужны вообще:— указывает программе просмотра страниц, что это HTML документ.
— определяет место, где помещается различная информация, не отображаемая в самом документе.— определяет видимую часть документа. Тело документа. Здесь отображается все, что вам нужно показать посетителям сайта (картинки, текст, ссылки, рамки и различные формы).Теперь нужна идея, как должен выглядеть сайт, и в каком расположении относительно друг от друга все будет находиться. В этом я вам помогу, для начала мы рассмотрим представленную мной модель будущего сайта и попытаемся вместе ее сделать:
Начнем с того, что сделаем основу, нашего сайта. Мы создадим набор таблиц, которые расположим в нужном нам порядке. Правильное расположение этих таблиц залог успешного сайта, оно и является главным и сложным элементом при разработке. Расположение таблиц создает сложность в том, что открывающие и закрывающие тэги нужно правильно поставить по смыслу, иначе ничего не получится.
Рассмотрим несколько примеров:
Обычная таблица 3х2
| 1111 | 2222 | 3333 |
| 4444 | 5555 | 6666 |
Результат
Два примера с применением ROWSPAN
1)
| 1111 | 2222 | 3333 |
|---|---|---|
| 4444 | 5555 |
Результат
2)
| 1111 | 2222 | 3333 |
| 4444 | 5555 |
Результат
Пример с применением COLSPAN
| 1111 | 2222 | |
| 3333 | 4444 | 5555 |
Результат
Демонстрация множественных заголовков и COLSPAN
| 1111 | 2222 | ||
|---|---|---|---|
| 3333 | 4444 | 5555 | 6666 |
| 7777 | 8888 | 9999 | 1000 |
| 1100 | 1200 | 1300 | 1400 |
Результат
Теперь рассмотрим некоторые использованные нами теги и их атрибуты:
— создает таблицу. Все прочие элементы таблицы должны быть вложенными в него.Практически у каждого тэга есть свои атрибуты, которые добавляют к значению различные показания, такие как цвет, ширину, высоту, расстояние и многое другое.
Атрибуты тэга
:BORDER — Толщина рамки в пикселях (например: ="1″ или ="5″ так указываются все размеры). Если атрибут не указан, то таблица выводится без видимой рамки.
ALIGN — Выравнивание таблицы относительно документа.
left — по левому краю
rigth — по правому краю
center — по центру
BACKGROUND — Строка, определяющая рисунок для заднего фона
BGCOLOR — Определяет задний фон таблицы
BORDERCOLOR — Цвет рамки
CELLSPACING — Задает расстояние между ячейками таблицы
CELLPADDING — Задает расстояние между содержимым ячейки и ее рамкой
TITLE — Всплывающая подсказка
WITH — Ширина таблицы в процентах или пикселях
HEIGHT — Высота таблицы в процентах или пикселях.
— определяет строку в таблице Атрибуты тэга:ALIGN — Выравнивает текст в ячейке
left — по левому краю
rigth — по правому краю
center — по центру
VALIGN — Выравнивает текст в ячейке по вертикали.
top — по верхнему краю
middle — по центру
bottom — по нижнему краю
| — определяет заголовок для столбца в таблице Атрибуты тэга | ROWSPAN — Указывает количество строк, которые объединены в одной ячейке (по умолчанию=1). | — определяет отдельную ячейку в таблице Атрибуты тэга | : HEIGHT — Указывает высоту элемента в процентах или пикселях ALIGN — Выравнивает текст в ячейке left — по левому краю (по умолчанию) rigth — по правому краю center — по центру VALIGN — Выравнивает текст в ячейке по вертикали top — по верхнему краю middle — по центру bottom — по нижнему краю COLSPAN — Указывает количество столбцов которые объединены в одной ячейке (по умолчанию=1) ROWSPAN — Указывает количество строк, которые объединены в одной ячейке (по умолчанию=1) TITLE — Всплывающая подсказка. Думаю, с таблицами мы в общих чертах разобрались, теперь начнем создание нашего сайта. Тема 2. От теории к практике Преступим к практической части, в которой нужно много писать, это начало нашего с вами шедевра! этот тэг примечания, я вставил его, для большего понимания происходящего, советую писать вместе с ним, а в конце работы удалить. Текст между этим тэгом виден только в тексте кода, в просмотре результата вы его не увидите. Открываем блокнот Пишем в нем код из текста ниже. Сохраняем код следующим образом: ФайлСохранить как Далее вы увидите диалоговое окно, в котором предложены варианты сохранения документа. В разделе имя файла вместо *.txt напишите index. html и сохраните его. Основной текст: Это основа сайта. Без него красоты и качества нашего сайта достичь сложно. Комментарии дают более ясную картину того, что мы написали. Если вы внимательно читали прошлую тему, то основная часть кода вам понятна. По этому опишем неизвестные части сайта. Хочу заметить, что расположение атрибутов в тэге может быть хаотичным, никаких определенных рамок нет. Тэг имеет незнакомые нам атрибуты:LEFTMARGIN — определяет ширину (в пикселях) левого и правого полей документа. Работает только в браузерах Internet Explorer TOPMARGIN — определяет ширину (в пикселях) верхнего и нижнего полей документа. Работает только в браузерах Internet Explorer BGCOLOR — определяет цвет фона документа. У некоторых может возникнуть вопрос, где взять цвета для атрибутов: BGCOLOR и BORDERCOLOR. Ответ довольно прост. Photoshop имеет в себе палитру, в которой можно настроить любой цвет и скопировать его код — #FFFFFF — (белый цвет). Это шестнадцатеричный код, которым кодируется графическая палитра на «машинах». Пример безопасных цветов можно найти в примечании. Теперь еще раз осмотрите наш код и разберите непонятные моменты, разложив для себя все по полочкам. Результат этого кода в просмотре следующий: Обратите внимание на код, складывается ясная картина. Хочу обратить ваше внимание на цифры в результате. Ясно, что цифра 1 — является шапкой, а цифра 2 в нашем случае: начало основной формы каталога с лева на экране. Фактически это можно назвать половиной работы, но это только фактически. Глава 2. Оформление сайта Тема 1. Кодовое оформление Когда человек много времени уделяет чтению текста на компьютере его глаза естественно устают. А если он читает код на различных языках программирования, то нагрузка становится в два, а то и три раза больше. Более быстрой ориентации в кодовом расположении нужна сноровка и хорошее знание языка, но не только это помогает всем программистам. Этим двум пунктам я решил уделить тему второй главы. Как же правильно расположить код, чтобы он наносил меньший вред читателю и давал возможность лучше ориентироваться в коде. Все довольно просто. Пример стандарта: Пример с учетом двух параметров: С одной стороны, кажется, что стало хуже, все в разброс и ничего не ясно. На самом же деле все наоборот. Нужно ставить тэги на разные, привычные для вас места, но закрывающие и открывающие на одном уровне. И открывая свою многострочную страницу, вы легко определите и визуально представите, что где находится. Это метод активно используется людьми, которые профессионально занимаются созданием сайтов и уделяют много времени коду. Тема 2. Наложение второго слоя Вернемся к нашей разработке сайта. Будем работать отрезками, украшая наши таблицы смыслом и визуализацией. Для начала возьмем первый отрезок: Вместо нашей двойки (2), вставим нужный нам код. Для начала нам нужно прописать рамочку для «каталога» вверху этой формы. Напишем:
Тэг — Используется для логического выделения блока HTML-документа. Элемент группировки, как и элемент SPAN. В современном сайтостроении используется как удобный контейнер для объектов страницы, которым легко динамически манипулировать — перемещать, включать/выключать, создавать слои, регулировать отступы. Обязательно, после того как вставите новый отрезок кода, проверяйте на практике, что у вас получилось. Экспериментируйте со значениями атрибутов и цветовыми схемами. Это позволит вам быстрее запомнить визуальные изменения при использовании того или иного тэга (совокупности тэгов). Продолжим наш отрезок, создав к рамочке каталога текстовое поле (список каталога), на котором будут располагаться список ссылок по сайту.
Тэг — Вставляет перевод строки. Аналог кнопке на клавиатуре в текстовом редакторе Microsoft Word — Enter. Тэг — Используется для выделения из текста слова (жирный шрифт). Аналог тэга . Тэг — Служит для создания гиперссылок текста или изображения. Пример: Для начала нам нужно создать страницу, например text14. html Далее мы пишем ссылку в коде на эту страницу. Проверяем нашу работу в браузере и видим результат — ссылка ведет с index. html на text14. html Далее по аналогии создаем такие же рамки и текстовые пространства на номерах 3,5,6,7. Как видите, мы постепенно улучшаем характеристики нашего сайта, путем добавления некоторых отрезков. Это будет происходить на протяжении всего времени. Берем 3 отрезок: Прописываем уже знакомую нам рамочку:
Снова создадим текстовое поле к форме «наши друзья»:
Думаю здесь все ясно. Если есть сомнения, повторите пройденное выше. По такому же шаблону работаем с отрезками 5,6,7. Пишем следующий код и обязательно его разбираем. Отрезок 5:
Далее идет отрезок 6
Отрезок 7:
Делаем проверку и смотрим долгожданный результат. Сайт по мере наростов приобретает желаемую форму, но это далеко не то, что мы хотим увидеть. Для этого нам понадобится вставить новый отрезок — 4 и 8. Продолжим наши эксперименты и узнаем пару интересных «маневров», для будущих сайтов. Отрезок 4. Все что мы имеем из этого отрезка это маленький кусок кода. Стоит его преобразовать и сделать стильное меню с ссылками и рамку над ней. Ниже должна располагаться форма для текста или изображения: | Заменяем 4 на код: |
Далее прописываем текстовое поле и закрываем этот отрезок кода: | У нас остался нижний раздел, в котором оставляют авторство сайта или ставят дополнительные ссылки. Для чего он нужен вам придумаете сами, а моя цель научить вас правильно ее прописать. Отрезок 8: Вместо цифры 8 пишем текст выделенный из основного кода с разницей в одном действии — ваша фамилия и имя отличается от моей, а год может отличаться на момент прочтения данного урока:
Довольно неплохо для начала. Но работы предстоит еще много. Тема 3. Стильный текст в HTML В текстовое поле посередине экрана для наглядности мы вставим текст из справки Windows: Windows XP: Большинство программ корректно выполняется в Windows XP. Исключение составляют некоторые старые игры и другие программы, написанные специально для какой-либо более ранней версии Windows. Чтобы запустить программу в системе Windows XP, выполните следующие действия. Запустите мастер совместимости программ. Можно также установить свойства совместимости вручную. Обновите программу, драйверы или оборудование. Эти операции подробнее описываются ниже. Мастер совместимости программ Этот мастер предлагает протестировать программу в различных режимах (средах) с различными параметрами. Например, если программа изначально предназначена для работы под управлением Windows 95, установите режим совместимости с Windows 95 и попробуйте снова запустить программу. Если попытка окажется удачной, значит, программа будет каждый раз запускаться в этом режиме. Мастер также предоставит возможность попробовать другие параметры, например переключить экран в режим 256 цветов и установить разрешение 640×480. Если проблемы совместимости не позволяют установить программу в Windows XP, запустите мастер совместимости программ для файла установки этой программы. Такой файл обычно имеет имя Setup. exe или похожее и находится на установочном диске программы. Расположить этот текст в таком же виде не так уж и сложно. Нам не составит труда сделать аналогично красиво и узнать некоторые новые тэги с их атрибутами. Код текстового поля: Добавляем в него текст из справки и ставим нужные, для редактирования стиля, тэги:
Рассмотрим новые тэги и их атрибуты: Тэг — текст, заключенный между начальным и конечным тегами, будет выделен жирным шрифтом. Тэг — создает новый параграф. Атрибуты тэга ALIGN — Выравнивание таблицы относительно документа. left — по левому краю rigth — по правому краю center — по центру justify — выравнивание по ширине Тэг
|
|---|
