Главная

 

В.Козаренко

Запоминаем HTML

Пример мнемонического запоминания конспекта 2-го занятия по HTML, CSS
Школы Программирования (ШП) (примерно 60 основных тэгов и атрибутов).

Опорные образы

В качестве опорных образов вы можете выбрать любой из методов:

  • метод Цицерона;
  • четырехуровневые блоки опорных образов;
  • метод "Таблица опорных образов".

Опорные образы вы формируете самостоятельно. Для запоминания этого конспекта нужно 13 опорных образов.

Цифры с точками (1.5) обозначают конечные опорные образы. 1 - опорный образ первый. 5 - пятая часть первого опорного образа.

При запоминание тэга (атрибута, значения) мы запоминаем его смысл (функция, что происходит в результате применения) и его написание. Запоминание - это создание в мозге связи. Знак "+" обозначает операцию записи в мозг связи между образами.

СМЫСЛ ТЭГА + ПОДСКАЗКА НАПИСАНИЯ
основа ассоциации + элементы ассоциации

Пример.

sup

Надстрочный индекс.

<sup>...</sup>

4.3 + куб + СУП

Смысл тэга обозначаем образом "куб" (вторая, третья степень, в квадрате, в кубе). Подсказку написания тэга обозначаем образом "суп" (кастрюля с супом).

Запись в память: представить на кубике кастрюлю с супом.

Запись на опорный образ: вспомнить опорный образ 4.3 и связать с ним образ "куб".

Результат запоминания

Точное последовательное воспроизведение конспекта на чистый лист или устно по номерам опорных образов. Выборочное припоминание тэга по смыслу. Припоминание смысла тэга по его написанию (понимание страниц с кодом). Тэги и относящиеся к ним атрибуты находятся в памяти рядом, сгруппированы. Для ускорения запоминания даются подсказки кодирования.

Рекомендуется в качестве дополнительного упражнения после 2-го месяца изучения мнемоники.

Чтобы посмотреть результат работы кода в браузере, сначала скопируйте в блокнот (Notepad++) код структуры документа. Важно задать кодировку, иначе шрифты будут отображаться абракадаброй. В Notepad++ установите кодировку utf-8 (как в структуре документа). После этого вставляйте (copy/paste) фрагмент кода между тэгами <body> ... </body>, сохраняйте и смотрите в браузере, лучше в Chrome. Не забудьте сохранить документ с расширением .html.

 

Структура документа

<!DOCTYPE html>

<html>

<head>

<title>Запоминаем html</title>

<meta charset="utf-8"/>

</head>

<body>

</body>

</html>

1.1 + каркас, решетка + ...

1.2 + голова ( head) + ...

1.3 + выступающая часть вкладки + титульная страница журнала

1.4 + буквы печатной машинки + (сМЕТАна, ЧАРли чаплин, СЕТка)

1.5 + тело ( body) + ...

 

h1 - h6

Заголовки с первого до шестого уровня, первый уровень самый крупный.

<h1>Заголовок первого уровня</h1>

2.1 + неоновая реклама + стул

 

b

Выделение жирным.

<b>Жирные буквы текста</b>

2.2 + жирный кот + болт

 

i

Курсив (наклон шрифта).

<i>Написано курсивом</i>

2.3 + косой забор + гвоздь

 

u

Подчеркивание текста.

<u>Текст внизу подчеркнут линией</u>

2.4 + расческа + Утка

 

s

Зачеркнутый текст.

<s>Зачеркнутый текст</s>

2.5 + разрезанный вдоль батон колбасы + крючок в виде s

 

p

Основной текст

<p>Основной текст документа</p>

3.1 + газета " Pravda" + ...

 

br

Переход на новую строку.

<br/>

3.2 + ручка перевода строки на печатной машинке + БРошь

 

&

Амперсанд

3.3 + АМПЕРметр + САНДали

 

&copy; &#169

Спецсимволы. Знак копирайта. Два варианта кода, буквенный и числовой.

3.4 + копирка + ГаЛеРа

 

&rarr;

Спецсимволы. Стрелка "вправо".

&rarr;

3.5 + стрела + РАк РРычит

 

&nbsp;

Спецсимволы. Неразрывный пробел (аналог клавиши пробела).

&nbsp;

4.1 + клавиша пробела + НаБор СПичек

 

pre

Отображает отступы, как в блокноте.

<pre>...</pre>

4.2 + лестница (как в подъезде) + ПРЕграда

 

sup

Надстрочный индекс.

<sup>...</sup>

4.3 + куб + СУП

 

sub

Подстрочный индекс.

<sub>...</sub>

4.4 + стакан с водой ( аш два о) + СУБмарина

 

<!-- ... -->

Текст комментария.

<!-- Комментарий к коду, изоляция кода -->

4.5 + заметки на полях + стрелочки

 

a

Ссылки.

<a> ... </a>

5.1 + цепь + Арбуз

 

href

Атрибут тэга <a>. Адрес ссылки.

<a href="...">Текст ссылки</a>

5.2 + почтовый конверт + ХРЕн Фиолетовый

 

Абсолютная ссылка

Ссылается на страницы других сайтов.

<a href=" http://yandex.ru">Яндекс</a>

5.3 + Я + ...

 

Относительная ссылка

Ссылается на файлы вашего сайта в той же папке.

<a href="file.html">Ссылка на файл</a>

5.4 + папка

 

../Относительная ссылка

Ссылается на файлы вашего сайта в папке уровнем выше (родительская директория). Может быть несколько уровней вверх ../../../ (3 уровня вверх).

<a href="../file_2.html">Ссылка на файл</a>

5.5 + бабушка + два клубка шерсти и спица

 

target="_ blank"

Атрибут тэга <a> со значением _ blank, открывает документ в новом окне.

<a href="http://yandex.ru" target="_blank">Яндекс </a>

5.6 + мишень + ( ТАра, ГЕТры, БЛАНК)

 

id="..."

Атрибут "Якорь". Устанавливается в конечную точку перехода по странице. Как правило в тэге заголовка. Значение должно начинаться с буквы.

<h2 id="c1">Комментарии</h2>

6.1 + якорь + отпечаток пальца (что-то уникальное)

 

#Ссылка на якорь

Переход на установленный якорь в пределах страницы.

<a href="#c1">Перейти к комментариям</a>

6.2 + якорь на цепочке + диез

 

Форматы картинок JPG, GIF, PNG-24

JPG - фотографии, GIF - анимация, PNG-24 - прозрачный фон.

file.jpg

file.gif

file.png

6.3 + картинка + (фото, мультик, картинка на прозрачной пленке)

 

img

Ссылка на картинку. Одиночный тэг.

<img src="file.png"/>

7.1 + фотография цепи + ...

 

src="..."

Адрес иллюстрации, атрибут тэга img.

<img src="file.png"/>

7.2 + коробка с фотографиями + эс ар си ( СахАРный СИроп)

 

title="..."

Всплывающая текстовая подсказка при наведении курсора.

<img src="file.png" title="Это фотка моей собаки"/>

7.3 + поплавок + титульная страница журнала

 

alt="..."

Текстовый заменитель картинки, если картинка не открылась.

<img

src="file.png"

title="Это фотка моей собаки"

alt="Здесь должна быть фотка моей собаки"

/>

7.4 + страница альббом с выдранными фото + АЛая Туфелька (альтернативный текст)

 

width="..."

Картинка уменьшается до указанной ширины в пикселях. Если других параметров нет, высота подгоняется под ширину пропорционально.

<img

src="file.png"

title="Это фотка моей собаки"

alt="Здесь должна быть фотка моей собаки"

width="300"

/>

7.5 + рулетка + видс (маска как в телепередаче "Вид")

 

height="..."

Высота картинки в пикселях.

<img

src="file.png"

title="Это фотка моей собаки"

alt="Здесь должна быть фотка моей собаки"

width="300"

height="300"

/>

7.6 + Останкинская башня + ХАЙ Тебе (жест приветствия)

 

<ul>...</ul>

Маркированный список.

<ul>

<li>текст</li>

<li>текст</li>

<li>текст</li>

</ul>

8.1 + марки + УЛей

 

<li>...</li>

Содержание списка (маркированного и нумерованного).

<ul>

<li>текст</li>

<li>текст</li>

<li>текст</li>

</ul>

8.2 + свиток + ЛИмон

 

<ol>...</ol>

Нумерованный список.

<ol>

<li>текст</li>

<li>текст</li>

<li>текст</li>

</ol>

8.3 + циферблат + ОЛивка

 

<form>...</form>

Между этими тэгами вставляются элементы, с которыми пользователь может производить разные действия.

<form>

...

</form>

9.1 + формочка

 

method="post"

Атрибут тэга form, указывающий метод передачи данных на сервер.

<form method="post"> ... </form>

9.2 + почтовый ящик + ...

 

action="file.php"

Атрибут тэга form, указывающий адрес php-файла-обработчика формы.

<form method="post" action="file.php"> ... </form>

9.3 + акция с адресом + ...

 

enctype ="multipart/form-data"

Атрибут тэга form, обязательный, если форма должна отправлять файлы.

<form method="post" action="file.php" enctype="multipart/form-data"> ... </ form>

9.4 + голубь + ( ИНКубатор, печатная машинка, часть мультяшки, форма, флэшка)

 

input

Указывает разные формы ввода ( логин, пароль и т.п.).

<form method="post" action="file.php" enctype="multipart/form-data">

<input ...>

</form>

10.1 + клавиатура + портрет ПУТина

 

type="text"

Указывает тип вводимых данных (текстовой).

<form method="post" action="file.php" enctype="multipart/form-data">

<input type="text"...>

</form>

10.2 + буквы

name="..."

Идентификатор вводимых данных для php-обработчика формы.

<form method="post" action="file.php" enctype="multipart/form-data">

Логин<br/>

<input type="text" name="login">

</form>

10.3 + бейджик

 

placeholder="..."

Показывает, какие данные должны быть введены в поле. Исчезает при введении данных.

<form method="post" action="file.php" enctype="multipart/form-data">

Логин<br/>

<input type="text" name="login" placeholder="Ваш логин">

</form>

10.4 + табличка "Место занято для..."

 

type="password"

Указывает тип вводимых данных (пароль). Вместо пароля показывает точки.

<form method="post" action="file.php" enctype="multipart/form-data">

Логин<br/>

<input type="text" name="login" placeholder="Ваш логин"><br/>

Пароль<br/>

<input type="password" name="pw" placeholder="Ваш пароль">

</form>

10.5 + висячий замок

 

type="file"

Указывает тип вводимых данных (загрузка файла). Открывает окно для выбора файла.

<form method="post" action="file.php" enctype="multipart/form-data">

Загрузите свое фото<br/>

<input type="file" name="ava">

</form>

11.1 + пластиковый файл

 

type="email"

Указывает тип вводимых файлов (адрес электронной почты).

<form method="post" action="file.php" enctype="multipart/form-data">

Введите ваш почтовый адрес<br/>

<input type="email" name="email">

</form>

11.2 + мыло

required multiple

Загрузка нескольких файлов. Если это адреса почты, они вводятся через запятую. Required - обязательный выбор для отправки формы. Multiple - можно выбрать несколько файлов.

<form method="post" action="file.php" enctype="multipart/ form- data">

Загрузка файлов<br/>

<input type="file" name="files" required multiple title="Выберите несколько файлов">

</form>

11.3 + горсть + риквайэд малтипл (см.технику запоминания ин.слов)

 

type="radio"

Круглые кнопки для выбора одного элемента. Чтобы работал выбор одного элемента в атрибует name нужно указывать одинаковые значения.

<form method="post" action="file.php" enctype="multipart/form-data">

Какую музыку вы любите?<br/>

<input type="radio" name="music">Классическая<br/>

<input type="radio" name="music">Попса<br/>

<input type="radio" name="music">Джазовая<br/>

</form>

11.4 + радио

 

type="checkbox"

Квадратики, в которых можно ставить и снимать галочки. Множественный выбор. В name указываются разные значения.

<form method="post" action="file.php" enctype="multipart/form-data">

Какую музыку вы любите?<br/>

<input type="checkbox" name="classic">Классическая<br/>

<input type="checkbox" name="pop">Попса<br/>

<input type="checkbox" name="jazz">Джазовая<br/>

</form>

11.5 + галочка + (чек, коробочка)

 

<select>

<option> Пункт 1</option>

<option> Пункт 2</option>

</select>

Выпадающий список.

<form method="post" action="file.php" enctype="multipart/form-data">

Какие цвета вам нравятся?<br/>

<select>

<option value="red">Красный</option>

<option value="blue">Синий</option>

<option value="white">Белый</option>

<option value="non">Никакие</option>

</select>

</form>

12.1 + рулон туалетной бумаги + селекционный пион, Валуев

 

<textarea>... </textarea>

Прямоугольная область для ввода текста. Между тэгами можно ввести любой первоначальный текст.

<form method="post" action="file.php" enctype="multipart/form-data">

Напишите свой отзыв:<br/>

<textarea name="opinion">Плохие отзывы будут удаляться!</textarea>

</form>

12.2 + книга отзывов + ...

 

cols

Ширина поля в символах.

12.3 + горизонтальный набор букв + колья

 

rows

Высота поля в строках.

<form method="post" action="file.php" enctype="multipart/form-data">

Напишите свой отзыв:<br/>

<textarea rows="10" cols="45" name="opinion">Давайте жить дружно!</textarea>

</form>

12.4 + высокая стена + ров

 

autofocus

Автоматическая установа курсора в поле ввода.

<form method="post" action="file.php" enctype="multipart/form-data">

Напишите свой отзыв:<br/>

<textarea

rows="10"

cols="45"

name="opinion"

autofocus>

</textarea>

</form>

12.5 + лупа

 

fieldset

Создает рамочку вокруг формы.

<fieldset>

<form method="post" action="file.php" enctype="multipart/form-data">

Логин<br/>

<input type=" text" name="login" placeholder="Ваш логин "><br/>

Пароль<br/>

<input type="password" name="pw" placeholder="Ваш пароль ">

</form>

</fieldset>

13.1 + рамочка + пачка чая Greenfield

 

legend

Вставляет название в рамочку вокруг формы.

<fieldset><legend>Форма для ввода логина и пароля</legend>

<form method="post" action="file.php" enctype="multipart/form-data">

Логин<br/>

<input type="text" name="login" placeholder="Ваш логин "><br/>

Пароль<br/>

<input type="password" name="pw" placeholder="Ваш пароль">

</form>

</fieldset>

13.2 + погоны на форме + леггинсы

 

label

Помогает попасть курсором в нужное поле. Делает активным надпись над полем ввода. Применять для каждого поля ввода.

<form method="post" action="file.php" enctype="multipart/form-data">

<label>Логин<br/>

<input type="text" name="login" placeholder="Ваш логин"></label><br/>

<label>Пароль<br/>

<input type="password" name="pw" placeholder="Ваш пароль"></label>

</form>

13.3 + трясущиеся руки + лэйбл

 

type="submit"

Кнопка отправки формы. Представлять на рассмотрение.

<form method="post" action="file.php" enctype="multipart/form-data">

Логин<br/>

<input type="text" name="login" placeholder="Ваш логин"><br/>

Пароль<br/>

<input type="password" name="pw" placeholder="Ваш пароль"><br/>

<input type="submit" value="Отправить">

</form>

13.4 + бумажный самолетик + ( САБвуфер, МИТсубиси)

 

type="reset"

Кнопка очистки формы. Сброс формы.

<form method="post" action="file.php" enctype="multipart/form-data">

Логин<br/>

<input type="text" name="login" placeholder="Ваш логин"><br/>

Пароль<br/>

<input type="password" name="pw" placeholder="Ваш пароль"><br/>

<input type="submit" value="Отправить">&nbsp; &nbsp;

<input type="reset" value="Сброс">

</form>

13.5 + ластик + ( РИс, СЕТка)

 

type="button"

Просто кнопка. Можно прикрепить разные действия.

<form method="post" action="file.php" enctype="multipart/form-data">

Логин<br/>

<input type="text" name="login" placeholder="Ваш логин"><br/>

Пароль<br/>

<input type="password" name="pw" placeholder="Ваш пароль"><br/>

<input type="submit" value="Отправить">&nbsp; &nbsp;

<input type="reset" value="Сброс"><br/>

<input type="button" value="Просто кнопочка">

</form>

13.6 + кнопка + батон

-------------------------

 

Создатель HTML, WWW и первого в мире веб-сайта 6.08.1991 г.

Tim Berners-Lii
Лондон, Англия

день рождения: 8 июня 1955 года

Дата размещения материала на сайте 5 апреля 2015 года

Главная
Интернет-школа мнемотехники Mnemonikon В.Козаренко,
Россия, Москва, 2002-2015.
Адрес сайта: http://mnemonikon.ru
Суперпамять Тренировка памяти Развитие памяти Мнемотехника Мнемоника
Яндекс цитирования Рейтинг@Mail.ru Rambler's Top100