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