Шпаргалки

спецсимволы
курсор
css
псевдоэлементы
микроразметка microformats.org (микроформат)
микроразметка schema.org (микродата)

HTML

Теги каркаса документа

<html></html>  — Указывает, что страница является HTML документом.

<head></head>  — Голова документа. Содержит мета-теги, тег заголовка (отображается во вкладке браузера), теги подключения таблиц стилей и скриптов.

<body></body>  — Тело документа. Всё, что отображается в окне браузера.

Теги раполагающиеся в голове документа

<meta http-eguiv=" content-type" content=" text/plain" churset=" ?" >  — Определяет, в какой кодировке следует отображать страницу ( UTF-8 и д.р.).

<meta name=" allow-search" content=" ***" &gt  — Указывает поисковым роботам, как следует сканировать данную страницу.

<meta name=" robots" content=" ***" >  — То-же.

<meta name=" author" content=" ***" >  — Указание автора странички.

<meta name=" keywords" content=" ***" >  — Описание содержащийся информации.

<meta name=" description" content=" ***" >  — Ключевые слова странички.

<title></title>  — Название. Отображается во вкладке браузера.

Теги и атрибуты располагающиеся в теле документа

<body bgcolor=" #******" >  — цвет фона документа.

<body text=" #******" >  — цвет текста документа.

<body link="#******" >  — Цвет гиперссылок.

<body vlink=" #******">  — цвет гиперссылок после посещения.

<body alink="#******">  — Цвет гиперссылок при нажатии курсором.

Теги и атрибуты форматирования текста

<pre></pre>>  — предварительное форматирование.

<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>  — Теги заголовков в порядке убывания.

<b></b>  — Создает жирный текст.

<i></i>  — Создает наклонный текст.

<kbd></kbd>  — Создает текст — печатная машинка.

<cite></cite>  — Выделение цитат курсивом.

<address></address>  — Курсив в виде отдельного абзаца.

<em></em>  — Выделение курсивом.

<strong></strong>  — Выделение жирным текст.

<font-size="?" ></font>  — Размер текста.

<font-color="#******">  — Цвет текста.

<p></p>  — Создает новый параграф.

<p align="#"></p>  — Выравнивание текста относительно одной из сторон документа. Применяется с атрибутами: left, right, center, justify

<nobr>  — Запрещает перенос строки.

<br>  — Перенос строки при необходимости.

<blockquote></blockquote>  — Выделяет текст в виде блока.

<dl></dl>  — Список с описанием.

<dt>  — Каждый из терминов списка с описанием.

<dd>  — Каждое описание.

<ol></ol>  — Нумерованный список.

<li></li>  — Каждый элемент нумерованного списка.

<ul></ul>  — Ненумерованный список.

<li></li>  — Каждый элемент ненумерованного списка.

<a href="URL site"></a>  — Гиперссылка на другие сайты.

<a href="URL stranizy"></a>  — Гиперссылка на другую страницу.

<a href="mailto:E-mail"></a>  — Гиперссылка вызова почтовой программы.

<a href="#identificator"></a>  — Гиперссылка на якорь текущей страници.

<a href="URL/#identificator"></a>  — Гиперссылка на якорь другой страницы.

<target="****"></a>  — Определяет, в каком окне открывать гиперссылку.
Применяется со значениями:
_blank — Открыть в новом окне.
_parent — Открыть в окне, которое содержит ссылку.
_self — открыть в окне, игнорируя используемые фреймы.
_top — в окне, игнорируя использованные фреймы.

Теги таблиц

<table></table>  — Создает таблицу.

<tr></tr>  — Строка в таблице.

<td></td>  — Ячейки в таблице.

<th></th>  — Столбики в таблице.

<colgroup — Задаёт ширину и стиль колонкам таблицы. Заметно сокращает код.

Применяются с атрибутами:

<table border="?">  — Tолщина рамки таблицы.

<table cellspacing="?">  — Расстояние между ячейками таблицы.

<table cellpadding="?">  — Отступ содержимого ячейки от рамки.

<table width="?">  — Ширина таблицы в пикселях или процентах от ширины страницы.

<table height="?">  — Высота таблицы в пикселях или процентах от высоты страницы.

<tr align="****"> и <td align="****">  — Выравнивание ячеек в таблице по горизонтали. (left, center, right)

<tr valign="****"> и <td valign="****">  — Выравнивание ячеек таблицы, по вертикали. (top, middle, bottom)

<td colspan="?">  — Столбцы объединённые в одну ячейку.

<td rowspan="?">  — Строки объединённые в одну ячейку.

<td width="?">  — Ширина ячейки в пикселях или процентах от ширины таблицы (ячейки одного столбца не могут иметь разную ширину).

<td height="?">  — Высота ячейки в пикселях или процентах от высоты таблицы.

Теги, атрибуты и их значения графических элементов

<img src="images/name">  — Вставка изображения.

<img src="images/name" align="****"> — Выравнивает изображение. (left, right, center; bottom, top, middle)

<img src="images/name" border="?"> — Рамка вокруг изображения.

<img src="images/name" vspase="?">  — Отступы сверху и снизу.

<img src="images/name" hspase="?">  — Отступы с боков.

<img src="images/name" alt="****">  — Всплывающая подсказка при наведении курсора.

<hr>  — Горизонтальная линия.

<hr size="?">  — Толщина линии.

<hr width="?">  — Длина линии в пикселях или процентах.

<hr noshade>  — Линия без тени.

<hr shade>  — Линия с тенью.

<hr color="#******">  — Цвет линии.

<marquee></marquee> — Создаёт бегущую строку.

16 комментариев на «Шпаргалки»

  1. stariс говорит:

    Наверное, всё же, что-то делается не так, раз не получается. Попробуйте начать вот отсюда https://starper55plys.ru/html/yazyik-html/. Только не торопитесь. Повнимательнее.
    Кстати, а откуда возник вопрос о спецсимолах? Спецсимвол — это так далеко от начала.
    Может вы угловую скобку назвали спецсимволом, но тогда как Вы оказались в «Шпаргалках»?
    Шпаргалки будут нужны потом, а пока начните с самого начала. Там нужно только внимательно прочитать, и всё поймёте.

  2. Марина говорит:

    здравствуйте . заголовок вот, что у меня получается. и не более. не пойму. ведь всё делаю, как Вы сказали.

  3. stariс говорит:

    Добрый вечер. XP так XP.

    Нажимаем «Пуск», наводим курсор на «Панель управления», открывается меню панели, находим «Установка и удаление программ», Щелкаем по этой строке, открывается окно со всеми установленными на Вашем компьютере программами, находим Notepad++, щёлкаем по нему, появится выделенная область, в углу которой будет кнопка «Заменить/Удалить», щёлкаем по ней, откроется «Мастер удаления», щёлкаем «Далее», откроется окно с адресом программы, щёлкаем «Удалить», откроется окно с процессом удаления. Как только процесс завершится, снова откроется «Мастер удаления», нажимаем «Готово». Вот и всё. Закрываем окно.

    После удаления почистите кеш браузера. Если не знаете как, то напишите, какой у Вас браузер.

  4. Марина говорит:

    добрый день, у меня на компе версия ХР. и есть ещё один ноутбук, на котором — 7. но он мне не очень удобен. то, что я поскачивала notepad, то на ХР. подскажите, как его правильно убрать, чтоб ничего от этих программ не осталось. а то если неправильно убирать — комп засоряется и плохо работает. и укажите, пожалуйста, какую версию notepad мне скачать.

  5. stariс говорит:

    Знакомая история. Поначалу тоже, и ставил, и удалял.

    Может всё сначала? Давайте удалим оба, так как они уже перехлестнулись, и поставим по новой, тот который мой.

    Чтоб точнее подсказать, как это сделать, мне бы знать, какая у Вас версия Windows? Семёрка, или восьмёрка, домашняя базовая, или ХР?

    Потом начнём немного по другому. Мне нужно было сразу, для начала объяснить Вам, простым языком, что такое язык html, что такое теги, и как они пишутся.

  6. Марина говорит:

    да да. именно. не знаю, как один раз получилось, случайно, но вышли иероглифы. а теперь и то не могу. вообще, я накудесила конечно. записала последнюю версию Notepad, потом так запуталась, что-то не клеилось. решила её вытереть и записать ещё раз, но другую версию, как Ваша. теперь и вторая записалась и первая не вытерлась почему-то. вот. теперь не знаю, на какой я работаю. и не мешает ли та, другая. короче, не смейтесь. завал.

  7. stariс говорит:

    Добрый вечер. Если я правильно понял, у Вас не получается вывести на экран словосочетание «Большой заголовок»?

  8. Марина говорит:

    доброго вечера Вам.
    придётся Вам меня потерпеть, пока не научусь по Вашим же урокам.
    дошла до момента, когда в поле редактора появились цвета: голубой, красный , фиолетовый. теперь пытаюсь между друмя «боди» что-то написать. не получается, как на Вашем примере в статье про Notepad — сразу знак «больше» или «меньше» и h и слеш. во-первых: пишет чёрным, а не фиолетовым, а во-вторых: пишу то, что нужно, > для появления знака спецсимвола, но остаётся та надпись, а не знак. вот как. на днях я говорила, что в браузере показывало закорлючки какие-то, я не знала, как написать спецсимволы и просто скопировала строку у Вашего примера и вставила в редактор. но и тогда не всё получилось
    Вы, пожалуйста, подскажите мне «покнопочно», что нажимать-набирать. может я потом буду лучше понимать, но пока это — «лес дремучий».
    спасибо.

  9. stariс говорит:

    Доброе утро. Ого. Значит дело пошло, раз до спец. символов добрались.

    Суть вот в чём. Когда в редакторе ставишь знак больше или меньше, то браузер воспринимает их как тег (когда открываете), а если тега нет, а угловая скобка есть — то вообще ничего не открывает.

    Поэтому, если на экран нужно вывести угловую скобку, то в редакторе пишется спец. символ.

    Писать его поначалу муторно, потом привыкаешь. Я поначалу просто копировал их и вставлял. Для этого ведь и страницу сделал с ними, чтоб скопировать в любой момент.

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

    А хороши спец. символы тем, что при помощи их можно выводить знаки которых нет на клавиатуре — градус С°, стрелочки ←→, и т. п.

    Главное, при копировании, не терять точку с запятой в конце. Я с этим мучился.

  10. Марина говорит:

    добрый вечер. вот на такой ерунде застряла, как написание этих спецсимволов. подскажите, как это. ничего не пойму, простите. конкретно: знак «меньше» и «больше».
    спасибо.

  11. starik говорит:

    Привет. Могу подсказать в этом направлении, что index в css — это элемент позиционирования. Есть три индекса: по оси х это x-index, далее y-index, и z-index. Элемент которому задан index с числовым значением располагается выше элемента без такового. Или если у обеих есть числовой index, то тот у которого число больше, располагается над другим. Как бы наплывает на него. Может закрыть полностью. Это зависит от свойств top и left Посмотрите у меня CSS Урок 5″Страница из блоков». Там на рис.4 показано позиционирование по z-index.

  12. Юрий говорит:

    Вечер добрый! К Вам, как к высшей инстанции, за советом! Изучал в одной из тем, как оформлены виджет в сайдбаре.( ну очень хочется придать вид) Столкнулся, c двумя селекторами widget title. Один как и полагается в CSS, a второй, где прописан радиус. В веб-инспекторе index : 42. В файле index.PHP ничего подобного нет. Что это такое, и где еще могут прописываться стили. У меня уже появилось ощущение — с трудом, но что то начинаю понимать. И тут, такая для меня тайна!!! Спасибо!

  13. starik говорит:

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

  14. Светлана говорит:

    Супер! Все прекрасно,обалденно просто и понятно!!!СПАСИБО! ВЫ — МОЛОДЕЦ!

  15. starik говорит:

    На здоровье! Это всё из инета, я только в кучу собираю.

  16. Игорь говорит:

    Действительно, шпаргалка. Здорово! Спасибо!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *