Главная | Обратная связь | Поможем написать вашу работу!

Шпаргалка по HTML (минимальный набор тегов для создания сайта)

Разработка простейшего сайта

Введение

Во-первых, создание простейшего сайта – это очень просто, значительно проще, чем работать в текстовом редакторе Word. С хорошим сайтом, конечно, дело обстоит сложнее, но главное – начать. А если захочется и/или понравится, то мастерство можно наращивать постепенно. Разобравшись с этой лабораторной работой, вполне можно сразу же начинать делать вполне приличный (но не супер) сайт – типа сайта кафедры АСНИиЭ.

Заниматься веб-дизайном может каждый. Даже если дизайнер не может сам «сгенерить» идею относительно структуры страницы, можно покопаться в интернете (инете), найти подходящую страницу, сохранить ее с картинками или только один html-файл, а затем использовать для своего сайта полностью или частично – добавив или убрав что-либо.

Это не программирование, освоить которое многим мешают два момента: a) необходимость придумать стратегию или комбинацию (по терминологии Остапа Бендера); б) четко представлять, как работают 3 основных оператора (присваивания, логический и цикла), и как изменяется информация в компьютере при их выполнении.

Правда, веб-дизайнер высшего класса должен уметь программировать, но это требуется редко, и абсолютное большинство сайтов не содержат программного кода. Но если Вам понравится веб-дизайн, то Вы все равно освоите программирование, возможно, немного помучавшись. Программирование – вещь очень простая, но надо иметь хорошее воображение, что опять-таки может быть достигнуто тренировкой путем решения задач.

Имеются программы визуального веб-дизайна, но как сказал один веб-дизайнер, они работают примерно так же, как программы машинного перевода. И, как сказал другой по поводу одной из таких программ – Microsoft FrontPage, превращают кролика в носорога. Страницы получаются громоздкими, раз в 30 больше, чем сделанные «ручками», и загружаются в 30 раз медленнее. При современных скоростях интернета это уже почти не имеет значения, но если Вы попытаетесь изменить (отредактировать) такую страницу, то произнесете, как минимум, мысленно, немало «теплых», а точнее, горячих слов о программе. Короче, хорошо, что есть калькуляторы, но арифметику надо знать. Чтобы вовремя подправить «дуру-машину». Применительно к веб-дизайну это означает, что надо изучить основы языка HTML. А после этого можете пользоваться программами визуального веб-дизайна и подправлять HTML-код при необходимости.

Наиболее доходчивым, по мнению преподавателя, в части обучения азам веб-дизайна, являются бесплатные уроки на сайте http://mm-business.ru «Работа на дому через Интернет». Ну просто … надо быть, чтобы не понять. Да и … поймут.

Имейте в виду: автор сайта угрожает завести уголовное дело на каждого, кто без разрешения скопирует что-либо с сайта (Интересно, как он узнает о факте копирования? Вероятно, пугает наивных мальчиков и девочек.). А если вы собираетесь еще и выставить что-либо с этого сайта в интернет без ссылки (это уже можно «вычислить»), да не всякой (см. красным шрифтом внизу сайта), мой вам совет: насушите сначала сухарей J. А если серьезно, материалы с сайта можно выставить в интернете, но надо внести в html-файл, содержащий эти материалы, следующий текст: <a href="http://mm-business.ru" title="Как начать работать через Интернет. Все о работе в сети Интернет.">Работа через Интернет на дому - MM-business.ru</a>. (Без точки.). Автор описания к лабораторной работе не знает, что содержится в рекламе на данном (и любом другом) сайте – не попадитесь на недобросовестную рекламу или интернет-подставу, коих в инете тьма. По крайней мере, когда автор «лабы» зашел на сайт, слева внизу данного сайта выскочила подстава насчет сайта «Одноклассники» – точно, не знаю какая, может быть, и вовсе безобидная, вроде рекламы, а может быть и нет: якобы мой аккаунт заблокирован, взломан или что-то еще, хотя его в природе не существует.

После первого прочтения прочтите материал как минимум еще раз – чтобы понять «непонятки», которые возникли при первом чтении.

Основная часть

Задание к работе. Ознакомиться в общем, без заучивания всего подряд, с уроками на сайте http://mm-business.ru/. Что надо знать, можно узнать из перечня контрольных вопросов. Главное – знать и понимать основы языка HTML, чтобы при необходимости можно было воспользоваться справочником по этому языку при разработке сайта. Надо проработать и понять материал уроков 1-10. Уроки оформлены доходчиво, понятно, методически грамотно, хотя местами с опечатками, орфографическими и синтаксическими ошибками (не учите по этим урокам русский язык!). Если серьезно, преподаватель относится с большим уважением к автору уроков – сам бы так хорошо не написал. Вероятно, очень многих не очень понятливых он научил. Уроки 1, 9, 10 надо проработать особенно тщательно.

Теперь, по мнению лабописца, следует проработать уроки, а уже потом читать остальной текст «лабника» (этот текст лучше бегло прочесть, а шпаргалку, указатель и вопросы – просмотреть, освоить уроки, а затем уже прочитать внимательно). Для перехода к урокам (для этого должен работать интернет!) этого скопируйте и вставьте адрес http://mm-business.ru/ в строку навигации браузера (самое верхнее текстовое окно). Слева (боковое меню), примерно в нижней трети, будет синяя подчеркнутая надпись «Уроки создания сайта». При наведении на нее указателя мыши появляется «лапа» – значит это ссылка (гиперссылка). Каждой ссылке соответствует своя страница или точка на странице (этой же или другой). При нажатии на ссылку (левой кнопкой мыши) Вы попадете на страницу с первым уроком. Внизу страницы каждого урока будут ссылки на оставшиеся уроки.

Кстати, в строке навигации отображается путь к отображаемой странице – полезная информация при подготовке сайта. Если Вы изменили html-файл (и сохранили изменения!), то, если он уже открыт в браузере, для визуального контроля изменений необязательно снова открывать его – достаточно нажать кнопку «Обновить» браузера (обычно 2 круглые стрелки одна над другой).

Основные определения

HTML – Hyper Text Marker Language – язык гипертекстовой разметки.

HTML-файл – текстовый файл с расширениями html или htm. Открывается и редактируется в Блокноте.

HTML-теги – команды в треугольных скобках. Бывают непарные (<br> – перенос строки – может быть в любом месте HTML-файла) и парные (<head> </head> теги. Тег может занимать часть строки, строку или несколько строк в любом месте HTML-файла. Внутри тега могут быть параметры (атрибуты), которые отделяются пробелами. В параметрах могут быть числа в обычном (десятичном целом) формате, они обрамляются парными кавычками, например, ”80” или 16-ричными – тогда перед числом ставится символ «#», например, #005A7F.

Сайт с точки зрения разработчика и интернет-обозревателя (браузера) (примеры – Internet explorer, Opera) – это совокупность html-файлов на компьютере.

Движок сайта – программное обеспечение сайта (программа управления сайтом) или CMS (с англ. – система управления содержимым) обеспечивает доступ браузера к сайту. Браузер читает html-файлы, картинки и т.д., и вырисовывает на экране то, что называется интернет-страничкой, которую мы и видим. Иными словами, обозреватель интерпретирует HTML-код (читает и выполняет команды (теги) языка HTML).

Стартовая страница сайта обязательно должна называться index. {html/htm/php}. В фигурных скобках перечислены возможные расширения.

Советы

Не рекомендуется использовать в именах html-файлов большие буквы, русские буквы, пробелы – только маленькие английские буквы (нежелательно большие латинские[1]), цифры, дефис, символ подчеркивания. Имена могут быть длинными (примерно до 250 символов). Дело здесь в том, что программное обеспечение сайтов часто работает под бесплатной ОС Linux, которая, в отличие от ОС Windows, некорректно работает с этими символами.

Если на экране отображаются не те символы, дать команду Вид/Кодировка/Кириллица (Windows-1251).

Чтобы не путаться с расширениями файлов и при необходимости их легко изменять, рекомендуется включить отображение расширений. В Windows XP это делается так: Проводник/Сервис/Свойства папки/Вкладка Вид/В поле (списке) «Дополнительные параметры» снять галочку (щелкнуть левой кнопкой по ней) «Скрывать расширения…». В Windows 7 последовательность Проводник/Упорядочить/Параметры папок и поиска/ Вкладка Вид/В поле (списке) «Дополнительные параметры» снять галочку (щелкнуть левой кнопкой по ней) «Скрывать расширения…». В файл-менеджере Total Commander расширения отображаются по умолчанию.

Далее в шпаргалке и уроках есть раздел «Цвет». Когда Вы сделаете страницу, поэкспериментируйте с цветами фона и букв: хорошо ли читается текст при просмотре в браузере? Иногда текст иных сайтов читать невозможно, не инвертировав текст и фон путем выделения мышью участка страницы или только скопировав в буфер и вставив в Блокнот или Word.

Шпаргалка по HTML (минимальный набор тегов для создания сайта)

Будет неплохо, если Вы выучите теги шпаргалки наизусть. А понять надо обязательно. Понять – значит отформатировать html-файл нужным образом с помощью шпаргалки.

Комментарий. Между символами «<!» и «>» (без кавычек) может быть любой текст, который игнорируется браузером – на странице не отображается. Этот текст называется комментарием и служит «шпаргалкой» при чтении html-файла. Комментарий, как и любой другой парный тег, может занимать часть строки, строку или несколько строк в любом месте html-файла. Если убрать или добавить комментарий, вид страницы в обозревателе не изменится. Если Вы хотите временно убрать область HTML-документа (часть строки, строку или несколько строк), ее можно «закомментировать», обрамив символами «<!» и «>».

Структура страницы сайта

<html>

<title>Название страницы </title> <!”Название страницы” будет напечатано на экране>

</head>

<body>

Тело сайта

</body> <!” Тело сайта” будет напечатано на экране>

</html>

Цвет

<body text="#RRGGBB">. H-формат (16-ричный). По байту на цвет (R,G,B), у каждого байта своё поле в числе, потому три базовых цвета можно смешивать, получая любой другой.

Задать цвет фрагмента: <font color="#00E200"> текст фрагмента </font>.

Задать цвет фона тела: <body bgcolor="#243467">. (Back Ground Color).

Картинки

<center> </center> – центровка. Но работает только в теле (контенте, body).

<img> – непарный тег. Пример: <img src="kartinka.jpg"> – путь к файлу указывать не нужно, если файл находится в той же папке, что и страница.

Рекомендуется использовать параметры width="" и height="" – ширина и высота картинки в пикселях (точка на экране). Можно еще title="хинт". Хинт (подсказка) будет всплывать при наведении мыши на картинку или ссылку, расположенную на странице сайта.

Форматирование текста

<b> </b> – bold – жирный – текст между этой парой тегов будет жирным.

<i> </i> – italic – курсив – шрифт между парой тегов будет выделен курсивам.

Правила вложенности тегов – как у циклов в языке высокого уровня – как матрешки.

<H{1/2/3/4/5/6}> – размер (уровень) заголовка. 1 – самый большой (заголовок первого уровня), 6 – самый маленький (6-го уровня). Заголовки очень «любят» поисковые системы, они повышают ценность текста на веб-странице, который располагается внутри тегов <h1>...<h6>. По этой причине лучше всегда использовать эти теги.

Параметр size= можно применять в <font>: <font size="размер">текст</font>.

Размер текста здесь, в отличие от заголовков, пропорционален значению параметра «размер» (1,2,3,4,...).

Ссылки

<a href="http://myip.ru">IP-адрес моего компа</a>.

Между <a> и </a> анкор – ссылочное слово или фраза, которая видна на сайте.

<a href="news.html">Новости</a>. Страница в той же папке, что и главная.

Ссылка в виде картинки (эмблема ЮФУ). border="0" – для удаления рамки вокруг картинки.

</a>

<a href="rolik.mp4">Рекламный ролик</a>

<a href="fotki.rar">Скачать</a>.

Если скачиваемые без полного пути (наgример, www\x\s\a.htm) то должны в одной папке со страницей.

Таблицы

<table> </table>. Внутри их <tr> </tr> – строки. Внутри их <td> </td> – столбцы.

Размер таблицы, строк или столбцов – по умолчанию или задается. Если не заданы. то пространство делится поровну. Содержимое ячеек надо писать между <td> </td>.

border="толщина_границ". От 0 (нет) до 5 (толстые).

Параметры width и height задают в пикселях ширину и высоту таблицы (если стоят в теге <table>) или ячейки – если в теге <td>. Числа в параметрах width = height= могут быть без кавычек.

Между <td> </td> можно ставить ссылки, изображения, текст.

<td bgcolor="#AA2243"> – закрасить ячейку цветом AA2243 (см. Цвет).

<td background="fon_ris.gif"> – задать фоновую картинку (в той же папке, что страница).

Если ее размер в пикселях меньше размера ячейки, будет дублироваться. Поверх фона (не картинки) текст будет виден. background="" нужно в <td>. Можно в <tr>, но в некоторых браузерах будут проблемы.

Рассмотрим параметры cellpadding=число1 и cellspacing=число2 тега<table>. Параметр cellpadding определяет расстояние между границей ячейки и ее содержимым – целое значение в пикселях (или процентах от доступного экранного пространства). Параметр cellspacing задает расстояние между внешними границами ячеек. Если имеется параметр border, толщина границы принимается в расчет. Нулевые значения параметров cellpadding и cellspacing убирают границы таблицы.

Прочие теги

<body topmargin="0"> убирает промежуток между шапкой и сайтом.

valign="top" перемещает текст вверх.

Справочник по HTML – http://htmlbook.ru/html/.

Рекомендую просмотреть справочник по HTML, выбрать наиболее нужные, на Ваш взгляд, команды и сделать алфавитный (предметный) указатель на HTML-теги: это поможет быстро найти нужный тег, полное описание которого затем прочитать в справочнике. Один и тот же тег лучше упомянуть наибольшее число раз – неизвестно, на какую букву Вы будете искать команду, валяя, точнее, ваяя сайт. Если нужна команда, которой нет в указателе, можно набрать ее в строке поиска обозревателя. Например, «Язык HTML команда тег выравнивания по левому краю». Поначалу ваш список будет небольшим и будет расширяться по мере вашего совершенствования. Если Вы затрудняетесь в составлении списка, предлагаю свой.

Воспользуйтесь поиском по сайту: