Рубрика «Юный блоггер»

Создание пустой веб-страницы

Чтобы создать пустую веб-страницу выполните следующее:

1. Откройте программу «Microsoft Word». Результат. Перед Вами на экране монитора откроется программа с пустым (чистым) листом;
2. Откройте меню «Файл» и нажмите команду «Сохранить Как». Результат. Перед Вами на экране монитора откроет окно «Сохранение документа»;
3. В разделе «Тип файла» установите команду «Веб-страница» и нажмите кнопку окна «Сохранить». Результат. На жёстком диске появится веб-страница (веб-файл);
4. Откройте сохранённую веб-страницу или в Блокноте, или в программе «Windows Commander» клавишей клавиатуры F4. Результат. Перед Вами на экране монитора откроется заполненный английским текстом лист;
5. Откройте меню «Правка» и нажмите команду «Выделить Всё». Результат. Текст листа почернеет (выделится);
6. Нажмите клавишу клавиатуры «Delete». Результат. Текст с листа удалится;
7. Сохрание созданную пустую веб-страницу командой «Сохранить» из меню «Файл».


Внимание!
Для написания имён файлов (html, графических и т.д.), тегов <p>, <img> используют только маленькие буквы.


Написание главных тегов программы

Чтобы написать главные теги программы выполните следующее:
1. Дайте правильное имя веб-файлу. Имя файла Вы можете по буквам изменить (переименовать) в Проводнике. Если это первый файл, то его имя должно быть: index.htm;
2. Откройте в Блокноте, или в программе «Windows Commander» клавишей клавиатуры F4 веб-файл (файл должен быть пустым, если он не пустой, а имеет текст, то удалите текст);
3. Запишите или скопируйте приведенную нами строчку в левый верхний угол чистого листа:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Пояснение. В первой строке на листе Вы дали указание браузеру на открытие сайта. Её (строку) нужно писать обязательно.
4. Под первой строкой запишите приведенный нами код: <html> <head> </head> <body> </body> </html>
Пояснение. Это и есть главные теги программы. С поставленной задачей мы справились. Теперь нужно пояснить, что мы и, как написали.
<html> </html> - это основные парные теги программы;
<head> </head> - Теги невидимой части программы. В данном разделе помещаются мета-теги;
<body> </body> - Теги видимой части программы. В данном разделе описывается всё то, что Вы видите на веб-странице.


Заполнение программы мета тегами

Мета теги - это команды для браузеров и поисковых машин. От их правильного написания зависит правильное отражение в браузере и обеспечивается эффективный поиск по ключевым словам. Мета теги располагаются в невидимой части программы. В тегах:
<head> </head>

Пример написания мета тегов
<HEAD> <META Name="robots" Content="Index,follow"> <TITLE> ... </TITLE> <META NAME="description" CONTENT=" ... "> <meta name="keywords" content=" ... "> <Meta name="Language" Content="ru"> <meta http-equiv=Content-Type content="text/html; charset=windows-1251"> <META NAME=copyright CONTENT=" ... "> <Meta name="Revisit-after" Content="10 Days"> <Meta name="Author" Content="..."> <META HTTP – EQUIV="Refresh" content="5" url="http://www. ... "> </HEAD>
Пояснение. Кроме этих обязательных мета тегов могут присутствовать и другие мета теги.
1. Строка: <META Name="robots" Content="Index,follow">, где роботу поисковой машины разрешается индексация страницы: параметр Index и разрешается переходить по ссылкам: параметр follow.
Если нужно запретить индексацию страницы, то ставят noindex.
Если нужно запретить переходить по ссылкам, то ставят nofollow.
2. Строка: <TITLE> ... </TITLE> - это название веб-страницы. Длина её до 80-ти символов. На первой странице с именем index.htm это имя сайта или блога, на остальных веб-страницах название этих страниц.
3. Строка: <meta name="description" content="Описание вашей страницы"> Длина её неболее 200 символов (Этот текст Вы видите при поиске в запросе.).
4. Строка: <meta name="keywords" content="Ключевые слова для вашей страницы"> Длина её неболее 1000 символов. Слова при написании разделяются запятыми.
5. Строка: <Meta name="Language" Content="ru"> - указывает, что язык документа русский.
6. Строка: <meta http-equiv=Content-Type content="text/html; charset=windows-1251"> - указывает на применяемую кодовую страницу.
7. Строка: <META NAME=copyright CONTENT=" ... "> - указывает, что материал расположенный на веб-странице охраняется законом "О защите авторских прав".
Примечание. Вместо CONTENT=" ... " запишите CONTENT="Использовать материал можно только с согласия автора".
8. Строка: <Meta name="Revisit-after" Content="10 Days"> - указывает, что переиндексация страницы должна проходить каждые 10 дней поисковой машиной.
9. В строке: <Meta name="Author" Content="Имя автора"> - указывается имя автора (или название фирмы) блога или сайта на русском языке.
10. Строка: <META HTTP – EQUIV="Refresh" content="5" url="http://www. ... "> - указывает, что время задержки перед перезагрузкой равно 5-ть секунд (content="5"), а так же указывается адрес загружаемой веб-страницы.
Примечание. Лучше всего адрес веб-страницы брать прямо из браузера из адресной строки копированием.


Разметка видимой части программы (блога)

Вот теперь мы и приступаем к заполнению тегов
<body> </body>
Примечание. Всё, что Вы расположите между тегами <body> ... </body> (картинки, текст, анимация, и т.д.) выводится на веб-странице в браузере.

Веб-страница, как праило, условно делится на три зоны:

- HEADER (шапка, заголовок или верхний колонтитул);

- Тело веб-страницы;

- FOOTER (нижний колонтитул, завершитель).

Общее требование к веб-сайту

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

Следующим требованием является удобочитаемость. Представьте себе чёрный или тёмно-коричневый сайт и бледный текст. Человек попавший на такой сайт убегает с него. Зрение, извените, дороже той информации, которая будет на веб-странице.

Шрифт нужно устанавливать и с учётом людей с пониженным зрением. Они не должны «пялиться» в экран. Они должны так же свободно читать сайты/блоги, как и люди со 100%-ным зрением.


Раздел «HEADER»

В разделе «HEADER» обязательно должна присутствовать строка с названием веб-страницы. Часто этим пренебрегают ставя картинку с названием. Но поисковые машины картинки не читают. Они читают только текстовые строки.

Раздел «Тело веб-страницы»

Имеет две особенности. Здесь располагается навигация (переходы по листам в виде гиперссылок) по листам сайта или блога, если они многостраничные и раздел «Комментария».

Какую Вы примените навигацию это личное Ваше дело. Тут всё зависит от Вышего выбора. Как правило, навигация делается смешаная.

...Не было страницы и она не ожиданно появилась. И появилась потребность на неё сделать переход (ссылку).

Раздел «FOOTER»

Раздел «FOOTER» указывает на конец веб-страницы. На нём могут писать кто изготавливал и ставят e-mail или разработчиков, или «хозяина» сайта или блога.


Переход на предыдущую страницу

Обратная связь E-mail: eksp@Riall.ru