Как создать страницу html - Шпаргалки - Статьи для веб-мастера - Сайт вебмастера
Меню сайта
Для Веб-Мастера Скрипты для сайта Онлайн игры Видео онлайн Картинки Заказать рекламу О нашем сайте Правила нашего сайта Обратная связь Карта сайта XML
Реклама
Наш опрос
Как узнать погоду за окном?
Всего ответов: 1889
Статистика


Онлайн всего: 2
Гостей: 1
Пользователей: 1

Гости Пользователи
Дополнительно
Главная » Для Веб-Мастера » Шпаргалки

Как создать страницу html


Здравствуйте дорогие друзья. На днях мне пришло письмо от пользователя Денис в котором он просил разъяснить как создавать страницы для Демо просмотра скрипта либо чего то другого.

Цитата
Текст сообщения от Денис :
-----------------
Доброго времени суток!Сайт у вас замечательный,делаю сайт с подобной тематикой но не знаю как сделать демо для просмотра,кнопка демо есть а вот как само демо делать не знаю,помогите пожалуйста,или дайте ссылку на чаво данного вопроса.как оно делается что для этого нужно.Спасибо заранее! Удачи вам в продвижении!


Давайте сначала разберёмся как вообще создавать страницы .html, итак преступим :
Создать HTML-страницу можно в обычном блокноте (Пуск > Все программмы > Стандартные > Блокнот)
HTML-документ делится на две части: голову документа <head> и тело <body>. Так же обязательны закрывающие теги: </head> и </body> соответственно.
Начнем с <head>. Он записывается сразу после тега <html> и в нем заключена важная информация о нашем HTML-документе: мета-теги (<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />), название страницы (<title>Ура! Это моя первая страница.</title>) и так далее.
За <head> следует тег <body>, в котором будет само содержание сайта: текст, ссылки, картинки и так далее.
Давайте создадим нашу первую страницу:
Открываем Блокнот, перепишите или скопируйте код ниже.
Код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Название страницы.</title>
</head>
<body>
Ура! Это моя первая страница.
</body>
</html>


Этим кодом мы создали страницу сайта. Теперь надо сохранить эту страницу в формате .html. В меню текстового редактора нажмите "Файл" "Сохранить как.."
Затем в строке Имя файла напишите например: page.html и нажмите кнопку "Сохранить"
Давайте посмотрим что у нас получилось page.html

Чтобы открыть страницу для редактирования, нажмите на page.html правой кнопкой мыши и в выпавшем списке выберите "Открыть с помощью" и из списка выберите "Блокнот".
Итак я думаю Вы разобрались как создавать и редактировать html-страниц.

Давайте теперь немного оформим страницу стилями CSS.
Для этого между тегами <head> и </head> добавим
Код
<style type="text/css">
Здесь CSS стиль
</style>


Я оформил страницу резиновой табличной вёрсткой

Код
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Резиновая табличная верстка веб-страницы</title>
<script type="text/javascript" src="http://s11.ucoz.net/src/jquery-1.7.2.js"></script>
<style type="text/css">
body {margin:0}
.header {height:60px; background-color:#717dc9; padding:20px; text-align:center;}
.left_col {width:180px; height:650px; background-color:#ddd; padding:15px; vertical-align:top; text-align:center;}
.center_col {background-color:#ffffff; padding:15px; vertical-align:top;}
.right_col {width:180px; background-color:#ddd; padding:15px; vertical-align:top; text-align:center;}
.footer {padding:10px 0 10px 20px; background-color:#717dc9; font-size:13px;}
</style>
</head>
<body>
<table cellpadding="0" cellspacing="0" width="100%" align="center">
<tr>
<td colspan="3" class="header">Мой сайт</td>
</tr>
<tr>
<td class="left_col">Меню</td>
<td class="center_col">Ура! Это моя первая оформленная страница.</td>
<td class="right_col">Ссылки</td>
</tr>
<tr>
<td colspan="3" class="footer">© Все права защищены</td>
</tr>
</table>
</body>
</html>


Давайте посмотрим что у нас получилось page.html

Что касается добавления скриптов для страницы ДЕМО просмотра то скрипты добавляются так как описано в инструкции скрипта. И не забывайте о том, что некоторые скрипты требуют присутствия библиотеки jQuery.

На этом урок окончен, всем спасибо. Если появятся вопросы задавайте их в комментариях, отвечу с удовольствием smile



При коприровании материала просьба ставить ссылку на оригинальную статью.

Ссылка:
BB-код:
HTML-код:

Добавил: Гость (10.11.2013) | Просмотров: 2249 | Комментарии: 7 | Рейтинг: 5.0/2
Теги: статья, HTML, Урок, html страница, создать страницу html
Всего комментариев: 7
Сообщение №1 от Юрий
Добавлен: 29.12.2014

Оставлю комментарий, почему бы и нет )
Примерно таким образом старался делать и сам, но затык в том, что не все браузеры интерпретируют данное действие, скажем так однозначно. К примеру у меня система MAC OS X, браузер Safari и он не отображает созданную страницу должным образом. А вот в Лисе, да все получается.
У меня браузеров 5 штук, поэтому есть какой выбрать и тренироваться.
Сообщение №2 от Юрий
Добавлен: 29.12.2014

Почему вместо: Ура! Это моя первая страница.
Отображается в браузере (любом) целиком код:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>Название страницы.</title>
</head>
<body>
Ура! Это моя первая страница.
</body>
</html>

Пользуюсь редактором кода Coda
Что не так, поясните плз.
Сообщение №3 от Юрий
Добавлен: 29.12.2014

Извиняюсь что поспешил в с вопросом. Решение нашел.
Структура выше приведенного кода:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
означает строгий синтаксис HTML а строгий HTML требует жесткого соблюдения спецификации HTML и не прощает ошибок.
погуглив... заменил на cтроку:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
которая означает переходный синтаксис HTML и более «спокойно» относится к некоторым огрехам кода, поэтому этот тип в определенных случаях использовать предпочтительнее.
После изменений да получилась в отображении браузера то что требовалось, но
состоящее из.. кракозяблов )). Глянув еще раз на код увидел кодировку
windows-1251. Ясно! Заменив ее на utf-8 получил именно то что нужно.
Сообщение №4 от Юрий
Добавлен: 29.12.2014

Урааа!!! Олег! порадуйся со мной, переписал код кое что изменил и все вышло! yahoo вот тебе ссылка на мое творение:
ССЫЛКА УДАЛЕНА АДМИНИСТРАТОРОМ
Сообщение №6 от Олег
Добавлен: 29.12.2014

Поздравляю Вас ! smile
Сообщение №5 от Юрий
Добавлен: 29.12.2014

Блин.. sorri упомянул тут о структуре HTML а ссылку на материал дать забыл...
вот она: ССЫЛКА УДАЛЕНА АДМИНИСТРАТОРОМ
Сообщение №7 от Юрий
Добавлен: 29.12.2014

Спасибо!
Извините не учел, более ссылок приводить не буду.
ВНИМАНИЕ !!!
Добавлять комментарии могут только зарегестрированные пользователи!
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
А знаете ли Вы, что ...

Миг – это фактическая единица времени, равная 1/100 секунды.


Реклама
Популярные материалы
Наша кнопка
Мы будем вам признательны, если вы разместите нашу кнопку у себя на сайте:

Скрипты для сайта

Друзья сайта