Совет Учимся основам html

second_vynder

second_vynder

Старожил
Пользователь
Баллы
153
Итак, приступим. HTML не требует интерпретатора, а значит работать с ним можно везде, оборудования для функционирование не нужно (ну, понадобится только компьютер).
Структура HTML:
HTML: 
<html>
<head>
<title>Тест</title>
</head>
<body>
Тест текста
</body>
</html>

Рассмотрим подробнее:
Все что между "<" и ">" - теги. Закрытие тега осуществляется добавлением в начало тега слеша. Пример: <тег>текст внутри тега</тег>
Тег <html> отвечает за начало текста с языком html.
Тег <head> отвечает за "системные" настройки страницы, так, например, внутри него подключаются файлы, настраивается кодировка, иконка страницы или "шапка" страницы.
Тег <body> отвечает за "тело" страницы, то есть содержит весь текст, картинки, иначе говоря - содержание.
Далее мы видим закрытые тегов.
Попробуйте скопировать текст выше и создать файл test.html, откройте его в браузере. В левом верхнем углу должно быть "Тест текста". Согласитесь, что выглядит не очень? Исправим! Для начала стоит сделать оцентровку - тег <center>. Добавим в тег <body> тег <center> между "Тест текста", закроем текст перед закрытием </body>. Получится следущее:
HTML: 
[/COLOR][/COLOR]<body>
<center>Тест текста<center>
</body>
Обновим страницу - текст должен появится в центре. Дальше попробуем сменить размер текста - теги <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, самый большой шрифт у тега <h1>, самый маленький у тега <h6>. Сделаем текст размера №2:
HTML: 
<body>
<center>
<h2>
Тест текста
</h2>
</center>
</body>
Теперь уже получше, не правда ли? Идем дальше. Окрасим текст, тут уже будет внутренний стиль CSS, иначе говоря атрибут тега. Добавим атрибут "color" тегу "h2", будет примерно так:
HTML: 
<h2 color="blue">Тест текста</h2>

Теперь заметно лучше! А что если нужно написать еще текст на новой строке? И это можно! Для этого используем тег <br>, при этом закрывать его не надо (пример: тест<br>тест). На этом все.
Задания:Сделать заголовок красного цвета, а под ним зеленый текст размера №5.
 
Сегодня продолжим форматирование текста. Итак, снова вернемся к тегам:
<b> - выделение текста в жирный.
<i> - выделение текста в курсив.
<u> - подчеркивание текста.
<abb> - очень интересный тег с атрибутом "title", выделяет текст подчеркиванием, а при наведение курсора на текст с таким тегом выводит текст из атрибута.
<code> - тег, который вам не скорее всего не понадобится, но его следует знать. Выводит текст как код (выделяет в рамку).
<s> - зачеркивает текст.
С этими тегами все понятно, как пользоваться ими вы догадаетесь. Рассмотрим лучше тег <hr>, с атрибутами color, size, noshade, widht, align. Этот тег делает линию. Рассмотрим его на примере:
HTML: 
<hr>
Серая линия в 1 пиксель через весь экран. Не очень красиво, правда?

HTML: 
<hr align="center" size="10" color="pink" width="70%">
Выведет красивую жирную линию в 10 пикселей в центре монитора.
Еще есть тег <pre>, он позволяет вывести текст "как есть", то есть если 20 пробелов между слов - будут все 20 пробелов, а не 1 везде (то есть без этого тега текст в любом теге можно разделить только одним пробелом, два-три и так далее пробела сольются в один).
Ну и если вы будете работать с математическими выражениями - помогут теги <suB> и <suP>, выводящие текст в разных регистрах (если вы возводите текст в дробь, например).
А в заключение - пример со всеми тегами:




HTML: 
<html>
<head>
<title>Все теги в уроке</title>
</head>
<body>
<b>Жирный B</b>
<i>Курсив I</i>
<u>Подчеркнутый U</u>
<s>Зачеркнутый S</s>
<abb title="С тегом title">Текст с ABB</abb>
<code>Код CODE</code>
<hr align="center" size="10" color="pink" widht="70%">
<pre>Тег                                                              PRE<pre>
H<sup>2</sup>O
x<sub>10</sub>
</body>
</html>
 
@second_vynder,Не упусти главного div,header,footer.
<div id="id = это идентификатор css стилей применяемых только на один блок данных"></div>
<div id="class = это класс css стилей применяемые на многоразовые блоки div данных"></div>
 
second_vynder сказал(а):
Во-первых, я не учу говнокоду.
Во-вторых, чему учишь ты?
Нажмите, чтобы раскрыть...
Код: 
 <html>
<head>
<title>Тест</title>
</head>
<body>
Тест текста
</body>
</html>
  1. Не указан тип документа
  2. Не указана кодировка
  3. Текст сразу в body - не совсем правильно
Код: 
<center>Тест текста<center>
Этот тег не входит в стандарты, его использование не рекомендуется

Код: 
<h2 color="blue">Тест текста</h2>
Стили лучше прописывать в самом файле со стилями. Но если нужно единоразово и уж так лень, то можно и так
Еще урок верстки на таблицах сделай. Прошлый век

Если уж так хочется учить, то лучше заглянуть на http://htmlbook.ru/
 
DimasForce сказал(а):
Это случайно не Л.В. Широкова косит под пацана? А то сильно напоминает мануалы, по которым я в 5 классе учился.
Нажмите, чтобы раскрыть...


О-о, ты меня раскусил! Кто эта тетка? Чего она великого сделала? В мое время ее не изучали.
 
@second_vynder, на счет великого не знаю, но это мой преподаватель информатики с 5 по 9 класс.
 
second_vynder сказал(а):
<code> - тег, который вам не скорее всего не понадобится, но его следует знать. Выводит текст как код (выделяет в рамку).
Нажмите, чтобы раскрыть...

Следует добавить, что код внутри тега code не парсится и отображается как обычный текст.

Angel of death сказал(а):
<div id="id = это идентификатор css стилей применяемых только на один блок данных"></div>

<div id="class = это класс css стилей применяемые на многоразовые блоки div данных"></div>
Нажмите, чтобы раскрыть...
Простите, што?
 
d3lour сказал(а):
  1. Не указан тип документа
  2. Не указана кодировка
  3. Текст сразу в body - не совсем правильно
Этот тег не входит в стандарты, его использование не рекомендуется

Стили лучше прописывать в самом файле со стилями. Но если нужно единоразово и уж так лень, то можно и так
Еще урок верстки на таблицах сделай. Прошлый век

Если уж так хочется учить, то лучше заглянуть на http://htmlbook.ru/
Нажмите, чтобы раскрыть...

А нам в институте именно так и начинали объяснять, а знаете почему? Потому, что тот кто только начинает вникать в суть работы, это в начале знать не обязательно, оно должно рассказываться после осознания что такое теги, как оно работает, как работают стили и так далее. Замечания справедливые, особенно про центр. Между прочим зря вы так про верстку на таблицах, нас заставили сделать пару демо страниц в таком стиле, чтобы мы полностью осознали насколько проще работать с div, это как минимум интересно.

Я и сам планирую сделать небольшой курс по html, не тут правда
 
Teozard сказал(а):
А нам в институте именно так и начинали объяснять, а знаете почему? Потому, что тот кто только начинает вникать в суть работы, это в начале знать не обязательно, оно должно рассказываться после осознания что такое теги, как оно работает, как работают стили и так далее. Замечания справедливые, особенно про центр. Между прочим зря вы так про верстку на таблицах, нас заставили сделать пару демо страниц в таком стиле, чтобы мы полностью осознали насколько проще работать с div, это как минимум интересно.

Я и сам планирую сделать небольшой курс по html, не тут правда
Нажмите, чтобы раскрыть...
НО что сложного в h1-h6, b, s и т.д? Это же простое форматирование текста
 
d3lour сказал(а):
НО что сложного в h1-h6, b, s и т.д? Это же простое форматирование текста
Нажмите, чтобы раскрыть...
Так ведь речь не об этом, а то, что не стоит сразу пугать человека, который только только начал, не понятными терминами вроде файл стилей и указание кодировки, он, если человеку интересно, узнает об этом со временем.
 
Не знаю как вы, но я учился тут. На этом сайте: коротко, строго и главное понятно!
 
second_vynder сказал(а):
Сегодня продолжим форматирование текста. Итак, снова вернемся к тегам:
<b> - выделение текста в жирный.
<i> - выделение текста в курсив.
<u> - подчеркивание текста.
<abb> - очень интересный тег с атрибутом "title", выделяет текст подчеркиванием, а при наведение курсора на текст с таким тегом выводит текст из атрибута.
<code> - тег, который вам не скорее всего не понадобится, но его следует знать. Выводит текст как код (выделяет в рамку).
<s> - зачеркивает текст.
С этими тегами все понятно, как пользоваться ими вы догадаетесь. Рассмотрим лучше тег <hr>, с атрибутами color, size, noshade, widht, align. Этот тег делает линию. Рассмотрим его на примере:
HTML: 
<hr>
Серая линия в 1 пиксель через весь экран. Не очень красиво, правда?

HTML: 
<hr align="center" size="10" color="pink" widht="70%">
Выведет красивую жирную линию в 10 пикселей в центре монитора.
Еще есть тег <pre>, он позволяет вывести текст "как есть", то есть если 20 пробелов между слов - будут все 20 пробелов, а не 1 везде (то есть без этого тега текст в любом теге можно разделить только одним пробелом, два-три и так далее пробела сольются в один).
Ну и если вы будете работать с математическими выражениями - помогут теги <suB> и <suP>, выводящие текст в разных регистрах (если вы возводите текст в дробь, например).
А в заключение - пример со всеми тегами:




HTML: 
<html>
<head>
<title>Все теги в уроке</title>
</head>
<body>
<b>Жирный B</b>
<i>Курсив I</i>
<u>Подчеркнутый U</u>
<s>Зачеркнутый S</s>
<abb title="С тегом title">Текст с ABB</abb>
<code>Код CODE</code>
<hr align="center" size="10" color="pink" widht="70%">
<pre>Тег                                                              PRE<pre>
H<sup>2</sup>O
x<sub>10</sub>
</body>
</html>
Нажмите, чтобы раскрыть...

Это похоже на говнокод: <abb title="С тегом title">Текст с ABB</abb> (нафиг он кому-то нужен?)
А вот тут помимо говно кода без стилей вы еще и ошибки в коде допустили: <hr align="center" size="10" color="pink" widht="70%"> - widTH
 
Я не учу же всем нюансам HTML, в заголовке темы сказано про основы, что-то я там нигде не увидел полного курса.... Всем было бы полезно знать хотя-бы как сделать надпись вроде "Сайт в отключенном состоянии, настраиваем CMS". По-поводу ошибки - исправил.
Про кодировки и стили - блеснуть умом решили? Teozard правильно сказал про то что если человек заинтересуется - узнает. А я ознакомил с возможностями, остальное дело рук специализированных сайтов.
 
second_vynder сказал(а):
Я не учу же всем нюансам HTML, в заголовке темы сказано про основы, что-то я там нигде не увидел полного курса.... Всем было бы полезно знать хотя-бы как сделать надпись вроде "Сайт в отключенном состоянии, настраиваем CMS". По-поводу ошибки - исправил.
Про кодировки и стили - блеснуть умом решили? Teozard правильно сказал про то что если человек заинтересуется - узнает. А я ознакомил с возможностями, остальное дело рук специализированных сайтов.
Нажмите, чтобы раскрыть...
Ознакомил с возможностями? ._.
 
Для ответа нужно войти/зарегистрироваться
Назад
Верх