The server may have failed or be under short-term maintenance.
If the error repeats continuously over a long period of time,
please inform us via the Contact Us form.

коды HTML веб дизайн Создание веб страниц сайтов html codes web design

web design



веб дизайн

Создание веб страниц, сайтов
на языке HTML

коды HTML


Документ HTML
Структура
:

<html>

<head>

<title> Название документа</title>

<meta http-equiv="content-type" content="text/html; charset=utf-8" />

</head>

<body>

Здесь помещается содержимое документа

</body>

</html>

Начало HTML документа

Заголовок

 

Кодировка документа*

Конец заголовка

Начало тела документа

 

Конец тела документа

Конец HTML документа

  * Пожалуйста, если Вы где-то сейчас еще увидите такую кодировку документа <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251" /> не используйте ее для создания новых сайтов - устарело (

Вот, собственно и всё. То есть это все те теги (левая колонка таблицы ) HTML, без которых никак нельзя обойтись. Здесь можно было бы предложить Вам скопировать эту колонку и в два приема перенести ее в отдельный файл, но для особо ленивых просто даю ссылку на то, что Вы сами могли бы запросто получить. Мой первый HTML файл Открыли ? На белом фоне черным цветом шрифтом times new roman (если у Вас что-то другое, то Вы, мягко говоря, продвинутый юзер компа, но тоже - читайте дальше) Вы читаете то, что напечатали в теле документа, а то, что напечатали между тегами title , Вам видите или увидите потом в адрестной строке браузера - зависит от браузера и его настроек.  Из меню файл (нажмите кнопку alt - и будет Вам счастье вверху экрана, а если не будет, то просто правой кнопкой мыши) выберите команду сохранить как… Сохраните веб-страницу на жестком диске (Вашего компьютера). Откройте сохраненный файл два раза. Один раз также, как вы открываете все файлы, второй раз с помощью команды открыть с помощью... из контекстного меню (если у Вас есть правая кнопка мыши, щелкните ею по файлу - контекстное меню Ваше). Короче, Вам нужно открыть наш с Вами файл уже с Вашего компа в Блокнот

. (Скажу по секрету: в старой версии оперы очень удобно редактировать html файлы по команде CTRL+U и др., сегодня стоит сразу освоить Notepad++)

Перед Вами с Блокноте HTML код нашей веб-страницы. Рассмотрим его внимательно. Первое, что мы сделаем - удалим теги, которые появились в результате копирования документа из интернет. Например, <META content="……" name=GENERATOR>. И все-все теги, которые мы пока не понимаем. Тег <!DOCTYPE …….."> - тип документа можно оставить, но хорошие хостинги генерируют правильный тип документа по умолчанию. Короче, вернемся к типу документа, если у Вас будут проблемы...

Удалили? Из меню Файл задайте команду Сохранить.

Дальше - Вместо слов Название документа напечатайте его действительное название (Например, Теги HTML ) , а вместо Здесь помещается содержимое документа разместите свою информацию. Из меню Файл задайте команду Сохранить. В Блокноте точно нет автосохранения, поэтому чаще сохраняйтесь сами. Перейдите на веб-страницу (наш файл html). Любым способом обновите веб-страницу: из меню задайте команду Обновить)) или воспользуйтесь соответствующей кнопкой в браузере или F5 . На экране появилось то, что Вы напечатали между тегами body, а то, что Вы напечатали между тегами title появилось (должно) в строке заголовка браузера.

Тех, кому уже все понятно, отошлю сразу к отличному html-редактору онлайн

или этому редактору, если предыдущий начинает просить деньги: бесплатный редактор - тоже, естественно, онлайн.

Те, кому совершенно нечего делать, продолжаем здесь.

Сейчас можно уже начинать заниматься самым настоящим веб дизайном - то есть художественным представлением информации на экране компьютера.

Итак, Вы не сторонник классического черно-белого сочетания цветов, которые мы получили потому, что именно они, также как и times new roman, должны быть заданы по умолчанию на Вашем комьютере. Давайте все поменяем. Цвет фона документа задается атрибутом в теге <body> - обратите внимание, без косой черты! Все атрибуты задаются только в открывающих (начальных) тегах. <body bgcolor=red>. Добавьте атрибут bgcolor в тег body, сохраните файл, перейдите на веб-страницу, обновите ее и посмотрите, что получилось. Если Вам не нравится красный фон - red, можно задать любой другой по английски : green, blue, yellow. Если Вас не устраивают стандартные цвета, то можно задать любой цвет, указав его номер от черного bgcolor=000000 до белого bgcolor=ffffff . Цвет текста документа давайте зададим в тегах <font></font>. В теге <font> зададим атрибут color <font color=white>. После него идет непосредственно текст, который вы хотите выделить белым цветом. Причем, чтобы разбить текст на абзацы, можно использовать тег <p> , закрывать его желательно, но не обязательно. А вот тег <font> лучше закрыть, т.е. в конце текста, выделяемого заданным цветом поставить тег </font>. Кроме абзацев вам также могут понадобиться выделение курсивом <i> Ваш текст </i> ,выделение жирным шрифтом <b> Ваш текст </b> или подчеркивание <u> Ваш текст </u> . Если Вы хотите поменять размер шрифта, то в тег <font> добавьте атрибут size. Например, <font color=white size=2> Ваш текст </font>. Что еще Вам может понадобиться на первых порах : теги <center></center>. Заключенный в них текст будет размещаться по центру. По умолчанию текст располагается по левом краю, а соответствующие теги - <left></left>. Свой текст Вы, возможно, захотите проиллюстрировать картинками. Для этого используются тег <img >. Этот тег закрывать не надо. В атрибуте src этого тега указывается URL (см. словарь) изображения (картинки). Что-то вроде <img src=http://maryna1111.narod.ru/Image8.gif>

А вот это уже и гиперссылка задана на эту картинку. По поводу гиперссылок читайте здесь. Теги для гиперссылок . В начальном теге задается атрибут href="адрес URL". Почему у нас ссылки получаются синего цвета нашего любимого шрифта и размера - а потому что мы не задали свои в теге body , а используем то, что есть по умолчанию. Давайте поменяем хотя бы цвет <body bgcolor=red alink=black link=black vlink=black>. Почему сразу три? Это цвета активных ссылок, непосещенных ссылок и посещенных ссылок соответственно.

Вот что мы имеем :

<html>

<head>

<title> Теги HTML Коды HTML Создание веб-страниц на языке HTML

</title>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=windows-1251">

</head>

<body bgcolor=red alink=black link=black vlink=black>

<font color=white size=2>

<center>

<i>Ваш текст </i>

<b>Ваш текст </b>

<u>Ваш текст </u>

</center>

<p>

<i><b>Ваш текст </i><u>Ваш текст </u></b>

Ваш текст

<center>

<p>

<img src=http://maryna1111.narod.ru/Image8.gif>

<p>

<p>

<p>

<p>

<a href=index.html>

на главную страницу сайта Web design

</a>

</center>

</font>

</body>

</html>

вот вы и создали веб страницу на языке HTML, посмотрите : web-design &copyМоё (до горизонтальной белой черты:) - <hr color=whitesmoke> - пришлось еще ссылок добавить со временем - это связано с вопросами раскрутки сайтов, до которых мы так еще и не добрались... так, кое-что между строк...)

Что дальше

? Покупаете любой справочник веб мастера, в котором есть теги HTML, и читаете. Есть профессионалы, которые утверждают, что "коды HTML надо учить - иначе, какой может быть веб дизайн без этих самых кодов". Не говоря уже о том, что наизусть учить принято обычно Пушкина, а не коды. (тем более, что кодов много, а Пушкин один) - бросим так вскользь, сославшись между прочим и на лучшую русскую книгу о веб-дизайне В. Кирсанова, где он этого так не написал, но я себе на своем бесплатном сайте, где  резюмирую свои безвозмездные ответы на вопросы друзей и знакомых - чтобы язык не отсох - позволю высказаться, не ставя целью кого-то обидеть, а только лишь разбавить скучное изложение технических знаний тупым юмором: "Дорогие господа профессионалы HTML-кодировщики, Java -скриптчики, Перловцы и все-все-все, команды и коды, как и русский язык, может выучить каждый, а вот рисовать веб-странички, так же как и писать стихи - это искусство со всеми вытекающими. Искусство же лучше смотреть живьем в художественном салоне- магазине подарки - картины лучших московских художников! Адрес на сайте http://gift-shop.narod.ru. Извините за оптимизированный для поисковиков web design,

: )

Переходите к отличному html-редактору онлайн.

или этому редактору, если предыдущий начинает просить деньги: бесплатный редактор - тоже, естественно, онлайн.

P.S. А если профессиональным веб дизайн е р а м тяжело на большом экране читать текст, не разбитый на колонки, то отправьте их на курсы "Компьютер для начинающих", а сами воспользуйтесь свойствами "окна".

P.P.S. А вот и любезно присланный профессионалами линк, где можно проверить свой класс в HTML кодировке: скопируйте или впечатайте свой адрес (URL) и нажмите кнопку Check. Только не хватайтесь сразу за сердце! И потом тоже не хватайтесь...

(... Устарел - удалила! Жду, когда пришлют новый).

P.P.P.S. (Вопрос) Почему же не надо хвататься за сердце? (Ответ) Вот давайте проверим первый из созданных нами только что файлов Мой первый HTML файл. Видите - сколько ошибок? А мы ведь еще и не начинали писать HTML коды... Ах, мы с Вами учимся создавать веб странички на бесплатном хостинге - и все ошибки, что сейчас обнаружил КАКОЙ-ТО "чекер", это "ошибки" кодировки рекламы от б/хостинга ( в правом верхнем углу)... Я бы лично не отважилась сообщить Яндексу (а раньше это был он) о том, что в его кодах есть ошибки ... Юкозу же сообщать нет смысла - они бесплатно отвечают за деньги

P.P.P.P.S. А вот и онлайн справочник по кодам html Мне нра!

P.P.P.P.P.S. Друзья - любители халявы! Я все-таки нашла неплохой бесплатный хостинг без рекламы, где на форуме познакомилась с подвижником, создавшим хостинг дома. На оный хостинг я и переехала с другими своими некоммерческими сайтами уже несколько лет назад.  Вот перетащить этот сайт с юкоза никак не отважусь...  ВНИМАНИЕ! За рекомендациями по размещению сайтов на отличном платном хостинге - больше не обращайтесь: Агава сдохла почила в бозе - теперь сама ищу хороших платный хостинг. 

Px6.S. Внимание! Для SEO форматирования сегодня нужно пользоваться тегами strong и em вместо b и i соответственно, и тег <font> уже давно рекомендуют не использовать.  Впрочем, отличный хтмл редактор, упомянутый выше, автоматически исправит (должен) все устаревшие теги, приведенные в примере, на современные.  

Яндекс.Метрика

ПОЖАЛУЙСТА, ПРИ КОПИРОВАНИИ ИНФОРМАЦИИ НЕ ЗАБЫВАЙТЕ ДАВАТЬ ССЫЛКУ НА САЙТ АВТОРА )
Вернуться к содержанию практического пособия по созданию сайтов с абсолютного нуля
На главную страницу сайта модный веб дизайн web design

Copyright &copy

Hosted by uCoz