Создание стороницы в интернете и ее редактиравание
Добавил:demon1516 L . man 895 дней назад 
Javascript is allowed for paid accounts in banners only. Data were stripped!
Страничка сайта. Теги.
Так из
чего же состоит страничка сайта изнутри? Посмотреть
можно страничку сайта очень простым способом - откройте любой
сайт в Internet Explorer, теперь нажмите правой кнопкой мыши на свободном поле
сайта, появится список команд, выбираете из всего предложенного "Просмотр
HTML-кода" и увидите тот самый язык HTML - HyperText Markup Language (язык разметки
гипертекста) с помощью которого создается страничка сайта, в последующем и
сайты. Но не надо пугаться взглянув на всё это, не так уж и страшно освоить
данный язык разметки, это содержимое странички сайта изнутри.
Этот язык
представляет собой всего лишь простой набор команд, описывающих структуру
документа (странички сайта) и выполняющих функцию разметки странички
сайта. Тем более, сейчас появились программы с помощью которых можно
создавать сайты даже без глубокого знания языка HTML, хотя основы изучить все
же придется, хотя бы для того, чтобы Вы сами могли исправлять
ошибки, которые может содержать страничка сайта после ее создания.
Страничка сайта изнутри. Тег - открывающий и
закрывающий.
Давайте
разберем всё попорядку из чего состоит страничка сайта или как говорят
по полочкам. В самом документе HTML обычный текст, который можно набирать
в Word, сочетается с элементами разметки, заключенными в угловые скобки <>, например <titl>, <body>, </noindex>. Такие элементы
разметки странички сайта, называются тегами. Они и являются
основным составляющим звеном странички сайта. Теги бывают как
одиночные, так и парные - открывающие и закрывающие, и состоят из следующих
друг за другом в определенном порядке элементов:
- Сначала в
теге идет угловая скобка < которую Вы легко
найдете на клавиатуре.
- Затем символ
слеш /, который ставится только если тег является закрывающим
(например </body>).
- Имя тега,
например body.
- Атрибуты,
которые необязательны, тег может и не содержать атрибуты (например align="center", что будет
означать текст расположить по центру)
- И последнее -
это правая углавая скобка, которая закрывает тег - >
Первый и
начальный тег странички сайта будет всегда открывающий тег <html>, который находится в
самом начале документа, соответственно самым последним закрывающим тегом будет тег
</html>, обратите внимание!, что перед
тегом косая черта, которая характерна для закрывающих тегов как говорилость
ранее. Все теги пишутся только латинскими буквами, и не имеет значение
какими буквами будет написан большими или маленькими, то-есть <html>, <HTML> и <Html> будет означать одно
и то же, от этого функция выполняемая тегом остается неизменной.
Большинство
тегов являются парными - открывающим и закрывающим (например текстовый тег <titl>Моя
первая интернет страничка</titl>). В этом случае тег <titl> - будет открывающим,
а тег </titl> - закрывающим, и
вместе они с текстовой частью документа образуют блок, который и будет
называться элементом HTML. Единственное отличи открывающего и закрывающего тега
- это косая черта, называемая слешем.
Некоторые
теги, являются одиночными тегами (например <br> или <hr>), для таких тегов
закрывающий тег не требуется, они сами по себе являются элементами HTML
странички сайта.
Тег может иметь один или несколько атрибутов, так называемых параметров,
которые дают браузеру дополнительную информацию о том, как он должен
обрабатывать текущий тег, хотя наличие атрибутов не обязательно, их может и
вовсе не быть. Атрибуты задают такие параметры как: выравнивание текста на
страничке сайта по центру, выравнивание по правому краю или по левому,
цвет текста, шрифт его написания и так далее. Все зависит от того к какому тегу
применяется атрибут.
Каждая страничка
сайта имеет
определенную структуру, состоящую:
- Из начала
документа, тегов <html> и </html>, говорящих нам
о том, что докумен написан на языке формата HTML, и означающих начало и
конец документа.
- Заголовка
документа, ограниченного тегами <head>...........</head>
- И тела документа
ограниченное тегами <body>..........</body>
Таким
образом мы получаем вид странички сайта изнутри или HTML-код документа,
представленный в виде некоторого кода, который содержит каждая страничка
сайта.
<html>
<head>
...........
</head>
<body>
...........
</body>
</html>
Ну вот пока
вроде бы ничего сложного. Мы рассмотрели из чего состоит
страничка сайта изнутри и изучили её содержимое, далее мы
научимся сами своими ручками создавать собственные странички сайта шаг
за шагом, и когда будем готовы, то уже тогда можно будет работать с такими
мощными пакетами по созданию вебсайтов как Macromedia Dreamweaver. Так
что собираемся с мыслями, берем себя в руки и двигаемся вперед к изучению основ
создания страничек сайта.
Создание странички сайта
Чтобы
сделать страничку сайта, для этого нам потребуется любой браузер, например Internet Explorer. В нем мы будем
просматривать страничку сайта, после внесения различных изменений в
коде. И если у Вас установлена операционная система Windows, то такой
браузер уже считайте есть, так как он является неотемлемой его частью. Создание
странички сайта, выполняется стандартными програмными средствами, которые
уже входят в операционную систему Windows XP2 или Vista.
В
дополнение к браузеру потребуется любой текстовый редактор вроде Noterpad - блокнота, который
также уже есть в Windows. В этом текстовом редакторе, мы и будем
непосредственно набирать HTML-код создавая страничку сайта. Создавать свой
первый сайт мы будем на жёстком (локальном) диске компьютера, а уже после того
как все будет готово, разместим сайт на сервере в сети, после чего
он станет доступен всем пользователям Интернета.
Допустим
Вы захотели сделать страничку о себе и рассказать о своих увлечениях
другим и может найти друзей по своим интересам. Так или иначе каждый человек на
земле, является специалистом в каой-либо области и обладает запасом
теоретических знаний, которые можно применить при создании страничек сайта.
Для начала назовем страничку "Мой сайт". Так что пойдем по
порядку и разберем всё по пунктикам:
1. Перед тем
как начать процесс создания странички сайта, создайте папку на жёстком
диске "С". Открываем диск "С", нажимаем на правую кнопку
мышки на чистом поле и в появившемся меню выбираем "создать папку".
Назовем нашу папку "Мой сайт".
2. Ищем
программу текстовый редактор Noterpad - блокнот, нажимаем кнопку
"Пуск" в левом нижнем углу рабочего стола компьютера. В выпавшем меню
нажимаем "Программы", затем "стандартные" и в
выпадающем списке меню выберем текстовый редактор Noterpad - блокнот и
откроем его.
3. В
открытом окне Блокнота введём основные теги:
<html>
<head>
<title></title>
</head>
<body></body>
</html>
Теги <html> и </html> будут означать
начало и конец кода сайта соответственно. Теги <head> и </head> будут являтся
определяющими для заголовка странички. Теги <body> и </body> будут ни чем инным как телом
документа. А между тегами <title>...</title> мы впишем название
нашей web-странички "Мой сайт", а выглядеть это будет так:
<title>Мой сайт</title>
4. В теле
документа между тегами body обычно заключается всё содержимое сайта, сюда входят: таблицы,
картинки, текст и ссылки на другие сайты, скрипты и баннеры сайта, и
многое другое о чём мы будем говорить далее. Так что можете провести
эксперемент, прямо там же в текстовом редакторе, вставив между этими
тегами следующее: "Добро пожаловать на сайт Иванова Ивана Ивановича",
естественно заменив инициалы на свои, и выглядеть это будет так:
<body>"Добро
пожаловать на сайт Иванова Ивана Ивановича"</body>
Вот мы и
создали первую страничку сайта, которая уже будет отображаться в
браузере. Для этого нам надо сохранить её с расширением файла html. Данный файл
распознается интернет браузерами, которые отображают содержимое веб
страницы, исключая отображение самих тегов. Код странички сайта в текстовом
редакторе - блокноте, должен выглядеть следующим образом:
<html>
<head>
<title>Мой сайт</title>
</head>
<body>"Добро пожаловать на сайт
Иванова Ивана Ивановича"</body>
</html>
Для того,
чтобы сохранить данный код странички сайта с html расширением, выполните следующие: в
верхнем меню программы Noterpad нажмите файл - сохранить как... - в строке имя
файла напишите любое имя, например site.html, не забыв тем самым после названия site
поставить расширение html. Страничка сайта готова, теперь можете посмотреть как
она выглядет в браузере, открыв её двойным нажатием кнопки мышки.
Работа с текстом сайта. Заголовки разделов.
Шрифт текста.
Для более
красивого оформления и в последующем наилучшего визуального восприятия
Web-странички, можно не только использовать наполнение её картинками и
различными логотипами, но и пробовать различные эксперименты с текстовым
оформлением. Работа с текстом сайта, принесет много пользы внешнему
оформлению и придаст сайту более оригинальный вид.
Примером
работы с текстом сайта может быть, разбиение текста на абзацы, выделение
заголовка более большим шрифтом или цветом, выделение жирным шрифтом или подчеркиванием
текста на который мы бы хотели обратить внимание читателей и так далее.
Начнем с
того, что в HTML тексте существует шесть уровней заголовков разделов,
которые выделяются парой тегов с номерами соответствующими уровню заголовка
раздела от 1 до 6.
<Н1>…</Н1>
заголовки
раздела первого уровня,
<Н2>…</Н2>
заголовки
раздела второго уровня и т. д. до
<Н6>…</Н6>
заголовкои
раздела шестого уровня.
Отличие
от обычного нормального текста на Вашей страничке заголовки будут
отличаться только размером и толщиной шрифта и при просмотре странички в
кодировке HTML наличием тегов <Н>…</Н> в которые заключен заголовок. При заключении
названия раздела в заголовок первого уровня <Н1>…</Н1>, отображаться он
будет самым жирным и крупным шрифтом, а все последующие заголовки
соответственно будут уменьшатся в своих размерах и самый последний из них <Н6>…</Н6> визуально будет самым
мелким.
Давайте
попробуем сами поэкспериментировать открыв программу блокнот (пуск – программы
– стандартные – блокнот) и написав в ней заголовок раздела первого
уровня «Мой сайт!», заключив его в теги заголовка раздела первого уровня:
<Н1>Мой сайт!</Н1>
Не
забывайте, что сохранять результат нужно не как текстовый файл txt, а
как файл который будет отображаться в последствии в браузере, то есть формата html
(файл – сохранить как… - в строке имя файла пишем любое название например sait.html - сохранить). Все
операцию по сохранению Web-странички мы произвели, теперь можно открыть
сохраненный документ в браузере и посмотреть на полученный результат.
Сделайте
то же самое для заголовков раздела каждого уровня по порядку просматривая
полученные результаты. Для этого достаточно открыть наш полученный файл site.html в браузере, кликнуть
на чистом поле документа правой кнопкой мышки - просмотр HTML-кода,
меняя при этом только номер уровня заголовка с 1 на 2…3...и т.д., затем
просто сохраняем результат, снова открываем в браузере и смотрим полученные
изменения.
При работе с
текстом сайта, сохранении заголовков да и любого текста, расположение его
по умолчанию устанавливается всегда в крайнее левое положение страницы, которое
можно изменить по Вашему усмотрению на расположение по правому краю страницы
или по центру применив для этого атрибут
align=right - выравнивание по правому краю
или
align=center - выравнивание по
центру страницы
Наглядно это
будет выглядеть так:
<H1align=center>Мой сайт!</Н1>,
сделав
изменения в документе и сохранив его посмотрите через браузер, что при этом
получилось.
Давайте
разберем, как выделить текст полужирным шрифтом. Для этого помимо
заголовка «Мой сайт» напишем какой-нибудь текст, например
<H1 align=center>Мой
сайт!</Н1>
<h4>Сегодня
был создан мой первый сайт, в котором я рассказу о себе и о своих увлечениях</h4>
Для
выделения текста полужирным курсивом, используются теги <b>…</b>. Заключим часть
текста в эти теги, откроем site.html – правой кнопкой мышки на чистом поле страницы – просмотр
HTML кода – делаем изменение:
<H1 align=center>Мой
сайт!</Н1>
<h4>Сегодня был создан
<b>мой первый сайт</b>., в котором я рассказу о себе и о
своих увлечениях.</h4>
После
сохранения изменений мы увидим, что словосочетание «мой первый сайт» будет выделено
полужирным шрифтом.
Теперь
рассмотрим тег, который делает написание текста наклонным курсивом, это
тег <i>…</i> и если мы сделаем
следующие изменения:
<H1 align=center>Мой
сайт!</Н1>
<h4>Сегодня был создан
<b><i>мой первый сайт</i></b>., в котором я рассказу
о себе и о своих увлечениях.</h4>
То увидим
что теперь часть текста «мой первый сайт» стало отличаться от общего текста не
только жирным шрифтом, но ещё и наклонным курсивом. Только учтите одно правило,
что некоторые элементы разметки при работе с текстом, могут быть
вложенными, как в данном примере тег <i>…</i> - будет являться
вложенным в тег <b>…</b> а не наоборот. Соблюдать это правило нужно
обязательно, иначе измененный текст будет неправильно отображаться в браузере и
Вы не получите желаемого результата.
Теги <u>…</u> делают отрывок
текста или слово подчеркнутым:
<H1 align=center>Мой
сайт!</Н1>
<h4>Сегодня был создан
<u>мой первый сайт</u>, в котором я рассказу о себе и о
своих увлечениях.</h4>
Теги <big>…</big> увеличивают размер
шрифта текста по отношению к общему, посмотрите наглядно на примере сделав
нужные изменения, заключив фрагмент текста «мой первый сайт» в них:
<H1 align=center>Мой
сайт!</Н1>
<h4>Сегодня был создан
<big>мой первый сайт</big>, в котором я рассказу о себе и о
своих увлечениях.</h4>
И совсем
наоборот теги <small>…</small> уменьшают размер текста по отношению к
исходному.
Есть и
другой вариант изменения или установки шрифта текста, который может
задаваться в цифровом значении от 1-самого мелкого и до 7-самого большого, что-то
похоже на задание шрифта в программе Word. Для этого используются теги <font>…</font>. Посмотрите как
меняется текст изменяя параметр size от 1 до 7:
<H1 align=center>Мой
сайт!</Н1>
<h4>Сегодня был создан
<font size=1>мой первый сайт</font>, в котором я рассказу о
себе и о своих увлечениях.</h4>
В тегах <font></font>, может применяться
атрибут color для задания цвета
текста, значение атрибута color имеет множество вариантов, так как самого
цвета и его оттенков очень большое количество. Так, что шифры цветовых гамм
лучше брать из справочников.
Помимо
конкретного указания параметров текста, задания шрифта, курсива и т.д.,
существует и другой способ его выделения – задание некоего логического стиля.
При этом способе выделения фрагмента текста, различные браузеры будут
отображать его по разному давая этому участку текста некий приоритет по
отношению к общему содержимому. Обычно такой способ применяется для отображения
названий чего-либо, например фильма, книги или имени, для выделения цитаты и т.
д. Для этого при работе с текстом сайта, используются теги:
<cite></cite> - выводится курсивом
и применяется для выделения названия чего-либо (стих, имя, анонс).
<dfn></dfn> - выводится курсивом
и применяется для определения слова.
<em></em> - выводится
курсивом, применяется для выделения текста или слова, а также для усиления его
значимости.
<var></var> - выводится курсивом
и применяется для текста или словосочетания, которые могут быть заменены
различными выражениями.
<code></code> - выводится на
экране шифром фиксированной ширины и используется для фрагментов программного
кода.
<strong></strong> - отображается
полужирным шрифтом и применяется для выделения особо важных фрагментов текста.
Существует
ещё несколько тегов для выделения текста от общего написания, но думаю, что этого
пока будет достаточно для того чтобы написать текстовую составляющую сайта с
применением этих тегов. Существует ещё один способ применения тех или иных
текстовых эффектов для работы с текстом – с помощью языка каскадных
таблиц стилей CSS, он является более современным и прогрессивным по сравнению с
HTML, но это отдельная статья и пока мы не будем рассматривать её здесь.
Для особо любознательных и кто хочет более подробно изучить HTML и CSS,
существует множество учебников и книг, которые можно найти как в интернете так
и в библиотеке совершенно бесплатно!
Вставка изображений в странички
Приукрасить
и нарядить нашу страничку можно с помощью вставки изображений в страничку,
которых можно туда установить любое количество, если конечно ваш объем места на
сервере под сайт не является мизерным. Только сильно не увлекайтесь вставкой
изображений, излишнее количество графических изображений увеличивает
вес страниц и время их загрузки браузером. Можно использовать
как готовые графические изображения так и создавать их самому, если у Вас есть
такие навыки, если нет вы можете научиться этому из раздела сайта «Уроки Фотошопа», тут для фантазии границ нет. А для
того чтобы нам научиться вставлять изображение в страничку, мы будем
использовать для этого уже готовый материал, выбрав любой рисунок расположенный
на Вашем жёстком диске С.
Графические
изображения которые Вы будете вставлять в страничку сайта обязательно
должны быть формата, который может обрабатывается браузерами – это JPEG, GIF и PNG. Данные форматы
являются наиболее приемлемыми, так как имеют наименьший размер файла, что в
свою очередь сокращает время загрузки страницы браузером из сети. И мой совет
используйте лучше формат GIF – он имеет наименьший размер.
Для того,
чтобы вставить изображение в страничку сайта, нужно для начала скопировать его
в общую папку «Мой сайт», которую мы уже создали. Путем перетаскивания файла
или правой кнопкой мышки щелкаем на графическом файле – копировать, делаем его
копию и вставляем в папку «Мой сайт».
Для
вставки изображения в страничку сайта используется одиночный тег <img>, который не имеет
закрывающего тега. Применяется данный тег с атрибутом src, значение которого
соответствует имени вставляемого графического файла или его адресу в сети. Для
визуального выделения графического рисунка можно применить атрибут <border>, который не является
обязательным атрибутом и лишь заключит изображение в обводящую рамку. Толщина
рамки будет соответствовать цифровому значению атрибута <border>. Указав значение border=1 получим рамку
толщиной в 1 пиксель. Но можно оставить графическое изображение и без рамки,
присвоив атрибуту border значение "0". Наглядно на примере
HTML-код для вставки изображения будет иметь следующий вид:
<img src=имя графического
файла.gif>
и обведенный
в рамку толщиной в 1 пиксель:
<img src=имя графического
файла.gif border=1>
Попробуем
вставить какое-нибудь изображение в нашу страничку и посмотреть, что
получиться. Для этого копируем любой рисунок с форматом файла gif, jpeg или png
как говорилось ранее в папку «Мой сайт», открываем в той же папке файл site.html в браузере – затем
жмем правой кнопкой мышки на чистом поле – просмотр HTML-кода и далее
прописываем следующее изменение между тегами <body></body>:
<H1 align=center>Мой сайт!</Н1>
<h4>Сегодня был создан мой первый сайт, в котором я рассказу о
себе и о своих увлечениях.</h4>
<img src=имя графического файла.gif border=1>
сохраняем
сделанные изменения и смотрим получившийся результат после вставки изображения
в страничку, нажав кнопку обновления на панели меню браузера или закрыв его и
открыв файл site.html
заново.
Далее в
следующих уроках, мы научимся не только делать вставку изображения на страничку
сайта, но и использовать это графическое изображение в качестве
ссылки перенаправления на другой сайт или другую страницу.
Гипертекстовые ссылки. Создание ссылок.
Ссылки
(link)
– из самого названия можно догадаться, что гипертекстовые ссылки
- не что иное как дверь в другое окно или перемещение от одного источника
к другому. В интернете живут огромное количество гипертекстовых ссылок
различного вида – это меню, текстовые ссылки, баннеры, реклама, даже фото или
рисунок могут выполнять функцию гипертекстовых ссылок. Обычно текстовые гипертекстовые
ссылки выделены на сайтах другим цветом от общего цвета текста или
подчеркиванием. При нажатии на гипертекстовую ссылку левой кнопкой мышки,
происходит мгновенный переход на другой документ или страницу сайта. Создать
ссылку совсем не сложно, для этого действия применяются теги:
<a></a> с атрибутом href
Атрибут href присваивается
значение равное адресу в сети, это может быть имя файла или URL адрес другого
сайта, или адрес страницы. Атрибут используется в создании ссылок,
баннеров или кнопок ведущих на сайт, значение которого присвоено этому
атрибуту.
Каждая
страница в сети, а в последствии и каждая Web-страница Вашего сайта имеют свой
уникальный URL адрес (унифицированный указатель ресурсов). Абсолютно все
странички сайта могут переплетаться между собой с помощью гипертекстовых
ссылок. Мы уже имеем две страницы сайта это – site.html и cod.html, необходимо на
страничке cod.html установить ссылку на
главную страничку сайта site.html и назвать её "Главная", код будет простым:
<a href =“site.html” >Главная</a>
затем
производим корректировку кода страницы сайта cod.html, где у нас находится содержание и
форма отправки сообщений, вставив туда в тело документа код ссылки после
закрывающего тега </form> и получаем следующее:
<html>
<head>
<title>Содержание</title>
</head>
<body>
<h3 align=center>Содержание</h3>
<ul>
<li>Введение.
<li>Создание сайта.
<li>Раскрутка сайта.
<li>Администратирование сайта.
<li>Антивирусная защита.
</ul>
<form action="mailto:имя почтового
(Читать дальше)
Комментарии: 0 Просмотров: 255 Группа: Общие | 
