Теги для создания сайта html в блокноте: Основные теги для создания сайта

Иллюстрированный самоучитель по созданию сайтов › Как создают веб-страницы › Простейшие средства создания веб-страниц [страница — 10] | Самоучители по работе в Internet

Простейшие средства создания веб-страниц

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

Как уже говорилось выше, веб-страницы кодируются на языке гипертекстовой разметки – HTML. Вообще говоря, чтобы написать HTML-файл, достаточно иметь любой текстовый редактор, лишь бы он умел не добавлять в текст свои специальные символы. Самый простой вариант – это редактор Notepad (Блокнот), входящий в стандартную поставку Windows (рис. 1.7). Собственно говоря, это именно то, что нужно, – простейшая программа, сохраняющая написанный текст именно в том виде, в котором он был введен, и ничего лишнего. (Тем, кто не работает под Windows, в качестве замены Блокноту подойдет почти “все что угодно”: Edit – для MS-DOS, vi или jed – для Linux, Kedit – для Linux/KDE и т. д.)

Рис. 1.7. Код HTML в текстовом редакторе Блокнот

Однако в очень простых текстовых редакторах типа Блокнота весь HTML-текст приходится писать вручную, а многим хотелось бы какую-то часть работы автоматизировать. Учитывая это желание, разработчики создали специализированные средства, призванные облегчить труд веб-программиста (как иногда называют тех, кто пишет код HTML, в отличие от веб-дизайнеров, которые придумывают внешний вид и иногда даже пытаются воплотить его, используя программы работы с графикой). Давайте сначала кратко опишем несколько простых программ, а потом остановимся на лучших из них.

Веб-редактор TextPad

Итак, начнем. Тем, кто предпочитает набирать код HTML вручную, но кому не хватает функциональности Блокнота и подобных ему программ, можно посоветовать программу под названием TextPad, которую можно загрузить, обратившись по адресу www.textpad.com. Эта программа по сути весьма похожа на Блокнот, однако разработчики специально предусмотрели некоторые удобства для того, чтобы писать код HTML (а также языков Java, С, C++, Perl и еще некоторых). Это выражается в том, что при написании HTML – документа все теги автоматически подсвечиваются синим цветом, их атрибуты – темно-синим, а значения атрибутов – зеленым (цвета можно настроить по собственному желанию, так же, как и шрифт). Это очень удобно. К примеру, если автор случайно ошибется в имени тега или атрибута, то оно останется черным, и он сразу поймет, что здесь что-то не то. Правда, проверка не является “ интеллектуальной”: программа может спокойно “разрешить” приписать тегу какое-либо свойство, которого у него в принципе быть не может (спокойно подсвечивает абракадабру типа <BR ALIGN=»top»> или </BR>).

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

Веб-редактор TextPad позволяет автоматизировать набор многих тегов. Если не хочется набирать их вручную (многие этого не любят просто из-за того, что приходится переключаться на латинский шрифт), то обратите внимание на левую нижнюю часть окна программы. Там приведен список наиболее распространенных HTML-тегов, которые можно вставлять в свой основной текст двойным щелчком мыши. Правда, в списке указаны не сами теги, а их описание. Например, чтобы вставить тег <BR>, нужно выбрать из списка пункт Block › Break Line. Однако к этому быстро привыкаешь. Почти все пункты списка вставляют теги вместе с закрывающим парным тегом. Например, если выбрать пункт Block › Preformatted, в текст автоматически будут добавлены теги и <PRE> и </PRE>. Некоторые пункты добавляют сразу целые блоки-заготовки. Если, к примеру, выбрать пункт Table (Таблица), в текст будет вставлен такой код:

<TABLE ALIGN="left" BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="100%">

    <TR ALIGN="left" VALIGN="middle">

        <TH></TH>

        <TH>?</TH>

        <TR ALIGN="left" VALIGN=middle ">

<TD>? </TD>

<TD>? </TD>

</TABLE>

Как создать сайт в Блокноте | Создание сайтов

Мы не будем использовать различного рода прикладные программы, используемые именно для web-дизайна. Простенький сайт можно создать через обычный «Блокнот».

Такая программа присутствует в каждой операционной системе (но в некоторых, она имеет свое название). Казалось бы, блокнот – простейший текстовый редактор, тем не менее, с помощью него возможно создать сайт. Любой сайт создается с помощью обычного кода, написанного на языке Html. Сама структура страницы сайта состоит из так называемых: «Головы» и «Тела».

«Голова» сайта включает в себя заголовки и названия, которые будут отображаться в рамке браузера. Несложно догадаться, что «тело» Html кода, будет включать в себя основные функции для работы с текстами, разделами, изображениями, музыкой, и прочим.

Весь Html код состоит из так называемых «тегов», которые и будут выполнять основную работу. Каждый тег имеет свою определенную форму, назначение и функцию. Приступим непосредственно, к созданию самого кода. Независимо от типа сайта, любой Html код начинается с тегов «!Doctype» и «Html» и заканчивается тегом «/Html». То есть, добавляя слэш, мы даем коду понять о том, что тег был закрыт (тег закончил свою работу).

Существуют открытые теги, которые закрывать не требуется. А существуют закрытые, которые в обязательном порядке требуют закрытия. Например, вам необходимо в тексте выделить одно слово жирным шрифтом. Кстати, этим занимается тег «b». Если тег не закрыть после слова, которое необходимо выделить, он будет продолжать выделять текст до конца кода (текст будет выделен жирным с того места, в котором был поставлен тег «b»).

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

Заголовок страницы создается с помощью тегов <title> и </title>. Стоит заметить, что Html код не привередлив относительно регистра, но некоторые теги всё же требуют его соблюдения.

Для начала, как уже говорилось выше, необходимо написать с помощью тега о том, что мы будем создавать Html код. Пишем первую строчку нашего кода: <!DOCTYPE html>. На второй строчке напишем тег <Html>

Сразу же отметим границы страницы сайта, то есть голову и тело, а также обозначим вторую – конечную строчку всего кода:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Затем, необходимо создать заголовок, который необходим c помощью тега <title>. В нашем случае, сайт будет называться «Пример».

После создания заголовка, код имеет такой вид:

<!DOCTYPE html>

<html>

<head>

<title>Пример</title>

</head>

<body>

</body>

</html>

Итак, основная работа с головой кода закончена. Теперь приступим к добавлению основной информации, которая будет выводиться на экран.

Её необходимо просто скопировать в тело кода:

<!DOCTYPE html>

<html>

<head>

<title>Пример</title>

</head>

<body>

Собственный сайт

</body>

</html>

Всё практически готово, но мы хотели выделить слово «сайт» жирным шрифтом, поэтому добавляем соответствующий тег (о нем говорилось ранее). Стоит помнить, что тег <b> является закрытым.

После добавления, код будет выглядеть так:

<!DOCTYPE html>

<html>

<head>

<title>Пример</title>

</head>

<body>

Собственный <b>сайт</b>

</body>

</html>

Страница сайта готова! Теперь её необходимо сохранить. Вот тут и раскрывается основная «Фишка» работы. При сохранении текста, необходимо обязательно нажать на кнопку «сохранить как», далее ввести имя для своего сайта и вместо формата.txt, ввести формат.html.

Для пользователей windows 7, необходимо просто выбрать тип файла: все файлы. Далее, после самого названия сайта, которое вы придумали, нужно подписать формат .html. Всего тегов существует очень большое количество, поэтому описывать их все достаточно долго и бессмысленно.

Именно для облегчения данной задачи, придумали таблицы Html тегов, где просто прописаны теги, их типы и функции. Множество таких таблиц, находятся в интернете в свободном доступе.

Вы познакомились с основами языка Html, на котором пишется большинство сайтов и теперь можете считать себя начинающим web-дизайнером.

Теги HTML | Принципы создания Web-страниц

Освоение языка html и изучение тегов html лучше всего самостоятельно создавая свою первую интернет страничку. Для этого нам будет достаточно уже внедренного в Windows приложения — обыкновенный «Блокнот».

Но чтобы вы были в курсе: для написания Web-страниц разработано много спец. приложений — Web-редакторов. С их помощью, даже не представляя, что такое язык html, можно штамповать web-странички не заморачиваясь. К примеру всем знакомый редактор Adobe Dreamweaver.

Однако, на данном этапе, использование таких программ большей пользы нам не принесет. Пользуясь обыкновенным «Блокнотом» вы сумеете более основательно изучить язык html и теги html. Даже примеры html-кодов здесь поданы не как текст, а как изображение. Скопировать не удастся, только набирать с клавиатуры.

И так, открываем Блокнот и набираем в нем html-код, который видим в листинге 1.1.

После написания сохраняем созданный нами файл («сохранить как»), но при этом дадим имя файлу, например, dokument1. Вместо расширения .txt проставим расширение .htm и сменим кодировку файла на UTF-8. Вот так мы создали файл dokument1.htm Осталось лишь проверить как он выглядит в браузере.

Но есть одно «но». Созданные вами страницы сайтов, по возможности, желательно проверять в нескольких более распространенных браузерах, так как не все web-обозреватели могут одинаково отображать html-документ. Так что могут всплывать непредвиденные ошибки.

Получили вот такой результат (рис.1.3)

Вот наша первая web-страничка. Мы видим крупный заголовок. Абзац, разделенный на строки автоматически и одно слово, выделенное полужирным шрифтом.

Давайте теперь разберемся, что же мы прописали в нашем файле dokument1.htm. Рассмотрим, пока, только небольшую часть html-кода (листинг 1.2)

Первым делом мы наблюдаем текст, который, при открытии файла dokument1.htm виден в браузере. А еще видим буквы и слова, заключенные в скобки угловые < и >. Вот они как раз и называются — теги HTML. Это, именно, с их помощью та или иная часть html-кода преобразуется в какой то элемент страницы.

Теги <h2> и </h2>. Текст, прописанный внутри этих двух тегов, на странице будет заголовком и имеет название «содержимое» тега. Тег <h2> отмечает начало и называется «открывающий» тег. </h2> завершает фрагмент текста и называется «закрывающий». Различие между ними лишь в наличии слеша /. Теги, имеющие и «открывающий» и «закрывающий» тег называют парными.

И так, мы выяснили, что все html-теги — это угловые скобки < и > внутри которых размещено имя тега. Именно оно определяет предназначение тега.

Продолжим. Далее мы видим html-тег <p>. Есть и открывающий тег и закрывающий — значит этот тег html парный. Текст, прописанный внутри него, становится абзацем web-страницы.

Парный тег <strong> вложили внутрь тега <p>. Значит все, что внутри тега <strong> будет частью абзаца (тега <p>). Как вы уже заметили, этот тег отвечает за написание текста полужирным шрифтом.

В завершение запомним три правила написания кода html:

— имя тега можно прописывать и строчными (маленькими) буквами и прописными (большими)

— внутри угловых скобок < и > и в самом имени тега не должно быть переноса строк и пробелов

— в прописанном тексте не допустимо присутствие символов угловых скобок < и >. Это, так званые, недопустимые символы.

Как создать html страницу? Что такое атрибут и теги html?

Как запустить видеоурок:

1. Разархивировать скачанный файл.
2. Открыть папку index.
3. Запустить файл index.html в браузере.

Создание папки сайта.

• Открываем нужную нам  директорию (папку, каталог), то есть ту директорию, где будет располагаться папка нашего сайта. В моем случае — это рабочий стол.
• Для того что бы создать папку нажимаем правой клавишей мыши. Нажимаем в выпадающем меню «Создать», и нажимаем «Папка».
• Папка создана. Вводим ей название, допустим «Site». Жмем «Enter».

Как создать html страницу?

• Для этого переходим в блокнот или в программу Notepad++ .
• Для того чтобы создать html документ, жмем в верхнем левом углу вкладку «Файл»,  далее «Новый». Либо Ctrl+N.
• Теперь я введу структуру данной html страницы, а вы повторяйте за мной.

<html>
<head>
<title>Главная страница </title>
</head>
<body>
<p align="center"> Добро пожаловать на мой сайт </p>
<p><h3><font></font></h3></p>
<br>
<h2> Рад вас видеть. </h2>
</body>
</html>

• После того как мы переписали структуру этого документа, давайте сохраним его. Нажимаем «Файл», далее «Сохранить как…». Либо Ctrl+Alt+S.
• Выходит окно сохранения, и выбираем нужную нам папку, ту, куда будем сохранять. В нашем случае это папка «Site».
• Вводим имя файла, «index.html», не забываем вводить расширение файла, сейчас расширение «html», иначе файл сохранится в текстовом формате. Жмем «Сохранить».
  Теперь перейдем в папку нашего сайта, откроем нашу страницу в браузере, и проверяем. Видим, что все работает.

Что такое атрибут и теги html?

Что такое теги html?

Грубо говоря, тег это все, что находится между открывающей и закрывающей треугольными скобками — < и >. В данном случае, это тег html. Тег <html> является обязательным тегом, а так же для него требуется закрывающий тег </html>.

Большинство тегов имеют закрывающие теги, но есть и исключения. Как, например тег <br> — что означает перенос на следующую строку. Теги будем разбирать по ходу курса пока что их вам не нужно запоминать. Например тег <p> означает параграф. Перейдем в наш код:

• Тег <br> означает перенос на следующую строку. Можем перейти в браузер и посмотреть (скрины находятся в галерее, внизу статьи). Переходим обратно в код.
• Тег <h2> отвечает за заголовки. Чем меньше число в теге, тем больше заголовок. Как видно в браузере заголовок «Рад вас видеть» самый большой.

Что такое атрибут html?

Атрибут (лат. attribuo — придаю, наделяю) наделяют дополнительными свойствами наши теги. Атрибут «align» имеет значение «center». Это значит, что текст, находящийся между открывающимся тегом <p> и закрывающимся </p> будет находиться по центру. Если изменим значение атрибута «align»  и вместо «center» поставим «right», жмем кнопку «Сохранить», и открываем браузер. Нажимаем кнопку обновить. Как видите текст «Добро пожаловать на мой сайт» располагается справа. Как вы уже поняли, атрибут «align» отвечает за расположение текста на нашей html странице.

Тег html. Структура тега html

А сейчас мы разберем структуру html документа (тега <html>). Думаю, вы знаете, что у всех, почти у всех людей есть голова :). У головы есть глаза, рот, нос, уши. Также у всех людей есть тело. Из тела исходят руки, ноги. Так же как и у html документа. Голова, в нашем случае, это тег <head> и закрывающий тег </head>, также в свою очередь туда входит тег <title> и другие. Эти теги можно принимать за нос, уши, глаза то есть то, что находится на голове. У html документа, как говорилось, есть тело. Тело документа находится между тегами <body> и закрывающим тегом </body>. У него тоже есть свои теги: <p>, <br>, <font>, <h2>, <h3> и другие, их очень много. В html документе тело и голова заключены в обязательный тег <html> и </html>

Забыл сказать,  что тег <title> отвечает за название нашей страницы. Это можно посмотреть в одном из браузеров, которые мы разбирали в прошлом видеоуроке.
Переходим в html код и рассмотрим последний пункт – порядок расположения тегов. Сейчас вы видите на экране теги и закрывающие теги <p><h3><font></font></h3></p>. Нужно соблюдать порядок тегов, например, если мы переместим <p><h3><font></h3></font></p>, то страница будет отображаться некорректно. Поэтому, нужно соблюдать чтобы одни теги были внутри других, и не менять этот порядок.

На этом, мы заканчиваем урок, подводя итог тому, чему научились:

• Научились создавать папку для сайта.
• Создавать, сохранять и изменять html страницы.
• Разобрались с тем, что такое атрибут и теги html.
• Узнали, что есть обязательные теги.
• Каждые теги имеют закрывающие теги, но есть и исключения.
• Разобрали структуру html документа, проведя аналогию с человеком.
• Узнали, что нужно соблюдать порядок расположения тегов.

До встречи в следующем видеоуроке, в котором мы разберем элемент DOCTYPE и раздел HEAD! 🙂

Как создать html страницу — пожалуй, первый вопрос будущих веб-мастеров. Что такое атрибут и теги html — второй вопрос. Заходите к нам и мы ответим Вам!

Создание Web-сайта на языке HTML. Учебное пособие

В примерной программе по информатике и ИКТ на
тему “Коммуникационные технологии” отводится
всего 12 часов и предлагается создать Web-страничку
с использованием шаблонов. На тему
“Мультимедийные технологии” выделяется 8 часов,
но если в образовательном учреждении
информатика изучается на пропедевтическом
уровне уже в 5, 6 и 7 классах, то целесообразно
перенести изучение мультимедийных технологий в
пропедевтический курс и тогда можно увеличить
время на изучение коммуникационных технологий, а
точнее, можно добавить тему “Создание Web-сайтов
на языке HTML” в 8 классе.

Освоение технологии создания сайтов
рекомендуется начать с языка разметки
гипертекста HTML в программе Блокнот, что является
первоосновой в данном направлении. Конечно, за 8
часов невозможно изучить весь язык HTML, но можно
показать назначение и применение основных тегов
языка. Если ученик заинтересуется технологией
создания сайтов, то сможет продолжить изучение
материала самостоятельно или на соответствующих
курсах, кружках или факультативах.

Представленное методическое пособие прошло
неоднократную опрабацию в 8-х классах гимназии
№441 Фрунзенского р-на Санкт-Петербурга и
включает материал для проведения теоретических
и практических занятий, выполнение которых
сначала демонстрируется через проектор, а затем
учащиеся выполняют самостоятельно на
компьютере, используя раздаточный материал к
уроку.

Для учащихся, которые бысторо выполнили
запланированную работу на уроке предусмотрены
дополнительные задания.

Эффективно осваивается материал, когда
учащиеся вместе с учителем выполняют общий
проект, например, по теме из истории
Санк-Петербурга “Драматические театры
Санкт-Петербурга”, а затем в качестве итоговой
работы создают собственный небольшой проект,
используя в качестве шаблона сайт, созданный
совместно с учителем.

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

Основные цели обучения: формирование
познавательного интереса, развитие
интеллектуальных и творческих способностей в
области Web-технологий.

Задачи.

Обучающие:

• сформировать систему знаний по технологии
  создания Web-сайтов;
• обучить языку разметки гипертекста HTML для
  создания сайтов;
• познакомить с этапами проектной деятельности.

Развивающие:

• развить творческие способности к
  самовыражению, посредством создания сайтов;
• сформировать умение сопоставлять, искать
  аналог и осуществлять перенос знаний в новую
  предметную область Web-технологий;
• развить навыки работы на компьютере

Воспитательные:

• воспитать добросовестное отношение к
  работе;
• воспитать чувства товарищества и личной
  ответственности за созданный сайт;
• воспитать художественный и эстетический вкус;
• воспитать грамотного и корректного
  пользователя сети Интернет.

Урок 1

1. Общие сведения о Web-сайтах и языке HTML

Публикации во Всемирной паутине (World Wide Web) реализуются
в форме Web-сайтов. Web-сайт по своей структуре
напоминает журнал, который содержит информацию,
посвящённую какой-либо теме или проблеме. Как
журнал состоит из печатных страниц, так и Web-сайт
состоит из компьютерных Web-страниц, объединённых
гиперссылками. Web-страницы могут содержать текст,
рисунки, таблицы, мультимедийные и динамические
объекты. Создание Web-сайтов можно осуществлять с
помощью языка HTML.

HTML – Hyper Text Markup Language — язык разметки
гипертекста. HTML ни в коей мере не является языком
программирования, он отвечает только за
расположение элементов (текста, рисунков) в окне
браузера. HTML является языком для создания
Web-сайтов во Всемирной паутине. Язык HTML состоит из
простых команд – тегов. Теги управляют
представлением информации на экране при
отображении HTML-документа. Теги заключаются в
угловые скобки <>…</> и бывают парные и
непарные (одиночные <>).

Документ HTML – это текстовый файл с
расширением .html или .htm, содержащий набор
тегов.

Браузер – (browser) – программа для просмотра
Web-страниц. Широко используют бразеры Microsoft Internet
Explorer, Opera и др. Браузер при получении документа HTML
выполняет его анализ, строит объектную модель
документа, затем результат отображает на
мониторе.

2. Структура HTML-документа

3. Форматирование символов

Символы, заключенные между следующими тегами
отображают:

Параметры шрифта

Текст, заключенный между тегами <FONT….>
……..</FONT> имеет заданный размер, цвет и
гарнитуру. Для этого используются атрибуты: SIZE =
значение от 1 до 7 и COLOR = цвет (aqua, black, blue, fuchsia,
gray, green, lime, maroon, navy, olive, purple, red, silver, teal, yellow, white),
каждому цвету соответствует свой
шестнадцатеричный код от 000000 до FFFFFF.

Если в тексте имеется несколько пробелов между
словами или символы табуляции, то браузер на
экран выводит всего один пробел. Если необходимы
дополнительные пробелы то между словами надо
добавить &nbsp; — символьный примитив.

Одиночный тег <BR> разрывает текстовый
поток и вставляет пустую строку. Несколько таких
тегов добавляют несколько пустых строк.
Межстрочный интервал – одинарный.

4. Практическое задание №1.

Создание первого HTML-документа “Драматические
театры Санкт-Петербурга”, работа со шрифтами,
задание цвета и размера шрифта. Освоение
технологии работы.

Урок №2

1. Форматирование текста по абзацам

Тег <P> …</P> — начинает абзац с новой
строки. Новый абзац отделяется от предыдущего
двойным межстрочным интервалом.

Выравнивание текста по абзацам:

2. Задание цвета всего текста и фона
документа

Описываются в начальном теге тела документа <BODY>

<BODY BGCOLOR=цвет фона документа TEXT=цвет
текста >.

3. Заголовки разных уровней

Тегами <H_n>….</H_n> оформляют
заключенный в них текст. Значения n меняются от 1
до 6, при этом текст выводится от более крупного к
более мелкому. Теги <H_n>….</H_n> могут
иметь атрибуты ALIGN=CENTER, LEFT, RIGHT.

4. Простые списки

5. Практичекое задание №2

Форматирование текста по абзацам, цвет фона,
заголовки разных уровней, списки.

Урок №3

1. Вставка графических изображений

Всеми браузерами поддерживаются форматы .gif,
.jpg. Эти форматы являются растровыми. GIF –
поддерживается прозрачность и анимацияю, хорошо
подходит для рисованных изображений. JPG – для
полноцветных изображений, хорошо подходит для
отсканированных изображений и фотографий,
анимацию не поддерживает.

Одиночный тег <IMG> вставляет графические
изображения в текстовый поток в любом месте:

<IMG SRC=’имя графического файла’>

Необязательные атрибуты тега <img>:

Чтобы рисунок был по центру, можно использовать
тег <CENTER>…….<CENTER>/

2. Практическое задание №3

Вставка и форматирование графических
изображений. Самостятельное создание Web-страниц
драматических театров.

Урок №4

1. Гиперссылки

Связь с другими документами организуется
тегами <A>…</A>.

<A href=”имя файла на который надо перейти” >
текст гиперссылки </A>.

Рисунок так же можно сделать, как гиперссылку,
написав:

<A HREF =’имя файла на который переходим’><
IMG SRC =’имя графического файла’></a>

2. Практическое задание №4

Оформление списка театров на главной странице
glavn.htm, как гиперссылки на соотвествующие
Web-страницы театров.

Урок №5

1. Таблицы

Используют не только для того, чтобы
располагать данные в ячейках, сколько с целью
позицирования фрагментов текста и изображений
друг относительно друга.

С помощью таблиц удобно создавать навигацию по
сайту.

Пример таблицы из двух строк (рядов), содержащих
по две ячейки:

Ячейки таблицы могут содержать текст или
изображения, а также текст с HTML-тегами и
гиперссылки. Не следует оставлять ячейки таблицы
незаполненными, надо поместить хотя бы
неразрывный пробел &nbsp;

Основные атрибуты тегов <TABLE> <TR> и <TD>
задают параметры таблицы, строки или ячейки:

ALIGN=left, right, center – выравнивание (<table>,
<tr>, <td>)

BGCOLOR=’цвет’ – фоновый цвет (<table>, <tr>,
<td>)

HSPACE=значение – свободное пространство слева
и справа от таблицы в пикселах (<table>)

VSPACE=значение — свободное пространство сверху
и снизу от таблицы в пикселах (<table>)

WIDTH=значение – ширина таблицы (ячейки) – в
пикселах, или в процентах (<table>, <td>)

HEIGHT= значение – высоты таблицы (ячейки,
строки) – в пикселах, или в процентах (<table>,
<td>, <tr>)

BORDER= значение – толщина рамки вокруг таблицы
и ее ячеек, по умолчанию значение=1, если
значение=0, то рамки нет (<table>, <td>)

BORDECOLOR=’цвет’ – цет рамки (<table,<td>>)

VALIGH=bottom, middle, top – выравнивание содержимого
по вертикали (<tr>, <td>)

2. Практичекое задание №5

Создание навигации по сайту в форме таблицы из
одной строки

Уроки №6 и №7

1. Секция заголовка <HEAD>, мета-теги

В секции заголовка на каждой странице
указывается информация о документе, которая
используется при его отображении. Текст,
заключенный между тегами <TITLE> … </TITLE>,
отображается в заголовке окна браузера.

В секции заголовка обычно помещается и ряд
тегов <META> с различными атрибутами,
предоставляющими дополнительную информацию
(метаинформацию) о Web-сайте:

<HEAD>

<title>Драматические театры
Санкт-Петербурга</title>

<meta HTTP-EQUIV=»Content-Type» CONTENT=»text/html;
charset=windows-1251″> — — (указывается тип кодовой
таблицы (windows-1251, Koi8-R и другие),
использованной при подготовке текстовой части
документа.

<meta name=»author» CONTENT=»Смирнова Татьяна,
учитель 441 гимназии СПб»> — информация об

<meta name=»Keywords» content=»драматические,
театры, Товстоногов, Комиссаржевская, Европа,
ул.Рубинштейна”> (указывается через запятую
набор ключевых слов, которые могут быть
использованы рядом поисковых систем)

</HEAD>

2. Самостоятельная работа над своим проектом

Примерные темы проекта: “Мосты через Неву”,
“Реки и каналы Санкт-Петербурга”, “Мосты через
каналы Санкт-Петербурга”, “Необычные музеи
Санкт-Петербурга”, “Музыкальные театры”,
“Филармонии и капелла”, “Технические ВУЗ-ы
Санкт-Петербурга”, “Детские театры
Санкт-Петербурга”, “Гуманитарные ВУЗ-ы
Санкт-Петербурга”, “Пригороды
Санкт-Петербурга”, “Музеи Санкт-Петербурга”,
“Военные учебные заведения в Санкт-Петербурге”
и др.

Необходимо оформить главную страницу сайта по
образцу файла glavn.htm, выбрав в качестве навигации
по сайту таблицу или список, и 2 — 3 страницы,
раскрывающие содержание сайта и содержащие:
заголовок, текст и рисунок.

Урок №8

1. Контрольный тест на знание тегов HTML – 15 минут.

2. Рефлексия. Представление проекта и
оценивание его учениками класса и учителем – 30
минут.

Практические задания – Приложение 1.

Вопросы контрольного теста – Приложение
2.

Литература для учителя

1. Усенков Д.“Уроки Web-мастера”, Москва, БИНОМ, 2004
   г.
2. Смирнова И. “Начала Web-дизайна, Санкт-Петербург,
   БХВ, 2004г.
3. Томас А.Пауэл “Web-дизайн. Наиболее полное
   руководство. В подлинике”, 2-е издание, БХВ-СПБ, 2005
   г.
4. Браун М. “HTML 3.2. Наиболее полное руководство. В
   подлиннике”, БХВ-СПб, 1999
5. Захаркина В.В. “Основы создания Web-страниц”,
   методическое пособие, СПБ, 2000 г.
6. К.Ахметов, “Microsoft Internet Explorer 4.0 для всех”, изд-во
   Компьютер, Москва, 1997 г.

Литература для ученика

1. Усенков Д.“Уроки Web-мастера”, Москва, БИНОМ, 2004
   г.
2. Смирнова И. “Начала Web-дизайна, Санкт-Петербург,
   БХВ, 2004г.

Перечень Internet-ресурсов

1. http://htmlbook.ru — Мержевич Влад. Краткий, но
   информационно насыщенный учебник по технологии
   создания сайтов, HTML, CSS, дизайну, графике и др.
2. http://html.manual.ru — Городулин Владимир.
   HTML-справочник.
3. http://winchanger.narod.ru — А. Климов. Краткий справочник
   по тегам HTML-языка.

Как сделать теги на сайте. Обязательные теги в HTML-странице.

Вообще-то, язык HTML не является языком программирования. Это язык разметки гипертекста (HyperText Markup Language), т.е. называть его «языком HTML» не верно. Если говорить проще, то HTML это набор тегов (управляющих слов), которые позволяют представить обычный текст в форматированном виде. Например, выделить его жирным, или курсивом и т.д. Но представить так текст можно только в специальных программах — браузерах (программы, с помощью которых ты бродишь по Интернету). Они отображают только отформатированный текст и скрывают теги HTML, которые применялись для форматирования.

Создавать код HTML можно как в обычных текстовых редакторах, так и использовать специальные программы, так называемые визуальные редакторы. Визуальные редакторы отличаются от текстовых тем, что заточены под набор кода HTML, CSS, JavaScript, PHP и др., т.е. под web-программирование. Кроме того, они позволяют сразу же просмотреть плоды своих трудов во встроенном браузере и подсвечивают некоторые ошибки в набранном коде. Настоятельно рекомендую набирать весь код руками (для улучшения прямоты этих самых рук), визуальные редакторы же значительно облегчают этот процесс. Это то, что касается инструментов, теперь перейдем непосредственно к тегам HTML.

< HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
< /HTML>
Тут все теги парные (есть открывающий тег и закрывающий), в HTML почти все теги такие. Отличаются открывающий тег от закрывающего тем, что перед закрывающим стоит косая черта /. Такие теги еще называют контейнерными, потому что между ними можно вставить другие теги, т.е. поместить в контейнер. Набирать имена тегов можно как заглавными буквами, так и прописными, разницы никакой нет. Теперь поподробнее о том, что означают эти обязательные теги.

Обязательные теги <HTML> и </HTML> показывают браузерам и другим программам для просмотра гипертекстовых страниц, что они как раз и имеют дело с гипертекстовым документом. Любой html документ должен начинаться с <HTML> и заканчиваться </HTML>, т.е. между этими тегами находится ВЕСЬ код html.

Между тегами <HEAD> и </HEAD> находится заголовок документа. В нем хранится информация об html-странице. Вообще, данные теги не являются обязательными, т.е. без них html-документ будет нормально отображаться браузерами, но даже, если ты не планируешь использовать область заголовка, то напиши хотя бы просто <HEAD> </HEAD>. Это нужно для совместимости между различными версиями программ. Все символы, находящиеся между этими тегами, никак не отображаются браузером (за исключением информации между тегами <TITLE> </TITLE>, где расположено название html-документа, выводимое в верхней панели браузера), но могут оказывать большое влияние на вид html-страницы, ее жизнь в Интернете и ранжирование поисковыми системами.

Основное содержимое html-документа располагается между тегами <BODY> и </BODY>. Здесь находится все, что мы видим, когда открываем html-страницу: текст, графику, меню, кнопочки и т.д. Это основное «тело» страницы.

Все остальные теги, использующиеся при создании html-документа, находятся между (т.е. внутри) этими обязательными тегами. Практически все теги html имеют различные атрибуты или параметры, которые позволяют отобразить информацию именно так, как задумал автор. Например, если написать:
<BODY bgcolor=”#FF0000″></BODY>
, то фон всей страницы будет красным. Здесь тег <BODY> — это собственно тег, bgcolor — его атрибут, а “#FF0000” — значение атрибута. У тега может быть несколько атрибутов.

Все атрибуты тега и их значения указываются в открывающем теге (тот, который без косой черты / перед именем: <BODY>), но ни в коем случае не в закрывающем.

Итак, мы разобрались с обязательными тегами html-документа. Теперь настало время изучить остальные.

Особые теги используются для размещения на веб-страницах графических изображений, аудио и видеоклипов и прочих так называемых внедренных объектов. Но, несмотря на кажущуюся сложность, Web страницы не представляют собой ничего сложного.

Это обычные текстовые файлы, созданные в стандартном Блокноте или аналогичном простейшем текстовом редакторе. И содержат они текст, тот самый текст, который вы хотите поместить на страницы, только размеченный особым образом.

Это простейшая веб-страничка, сделанная для примера в Блокноте. Чтобы увидеть эту страничку воочию, откройте Блокнот, наберите приведенный ниже код и сохраните в файле с именем index.html. После этого откройте полученный файл в Web-обозревателе, для чего достаточно дважды щелкнуть по нему мышью.
<НTML>
<HEAD>
<ТIТLЕ>Это моя первая страница</ТIТLЕ>
</HEAD>
<BODY>
<Н1>Пример моей первой страницы</Н1>
<Р>Это простейшая Web-страничка, созданная в стандартном
<1>Блокноте</1> и отображенная в
<I>Microsoft Internet Explorer</I>.</P>
</BODY>
</HTML>
Это и есть теги HTML. Они задают форматирование текста. Скажем, строка <1>Блокноте</1> будет выведена курсивом, т. к. теги <i> и </i> задают курсивное начертание текста.

Причем, тег <i> помечает начало курсивного фрагмента (открывающий тег), а тег </i> — конец (закрывающий тег). А собственно фрагмент, заключенный между открывающим и закрывающим тегами, называется содержимым тега.

Это были теги физического форматирования текста, т. е. просто задающие, как текст должен выглядеть в окне Web-обозревателя. Теперь рассмотрим теги логического форматирования, которые позволяют разбить текст на отдельные логические блоки.

В нашем небольшом фрагменте это теги <р> и <HI> (и соответствующие им закрывающие теги </Р> И </HI>). Они задают соответственно обычный текстовый параграф и заголовок первого уровня. При этом Web-обозреватель будет знать, что <н1>пример Web-страницы</н1> — это заголовок, и отобразит его соответствующим образом. Как и в предыдущем случае, открывающий тег помечает начало логического блока текста, а закрывающий — конец.

Здесь мы говорили о так называемых парных тегах, когда открывающему тегу соответствует закрывающий. HTML определяет также набор одинарных тегов. Один из них — это тег вставки графического изображения <IMG>. <IMG SRC=”picture.gif”> Здесь мы видим, что само графическое изображение хранится в отдельном файле picture.gif. То есть, изображение — это один из внедренных элементов Web-страницы. Тег <IMG> содержит в себе параметр SRC, задающий имя файла изображения. Такие параметры называются атрибутами тега. Web-обозреватель, встретив в HTML-коде страницы тег <IMG>, загружает файл, заданный атрибутом SRC, и отображает его.

Для того чтобы различные программы Web-обозревателей правильно отображали одну и ту же Web-страницу, язык HTML должен быть стандартизирован. Наряду с тегами HTML, стандартизированными WWWC (стандартные тэги), Web-обозреватели поддерживают множество нестандартных тегов. Эти теги были введены разработчиками той или иной программы вэб-обозревателя, чтобы получить преимущество перед конкурентами. Они надеялись, что эти фирменные расширения впоследствии войдут в стандарт HTML, но этим надеждам так и не суждено было сбыться. Однако теги остались, и они все так же поддерживаются. Эти теги наряду со стандартными, но предупреждаем вас, что они поддерживаются не всеми программами.

Введение в HTML | up2top.ru

HTML довольно прост в изучении, но является чрезвычайно важным элементом веб-разработки, т.к. фактически лежит в основе любой страницы в Интернете. Без него не обходится ни один сайт! Кроме того, HTML является фундаментом для целого ряда других важнейших технологий создания сайтов, таких как, например, каскадные таблицы стилей (СSS), используемые для визуального оформления сайтов, и язык программирования JavaScript, применяемый для создания динамических, т.е. изменяемых, страниц.

Язык гипертекстовой разметки развивается на основе стандартов, разрабатываемых Консорциумом Всемирной паутины (W3C) и сообществом WHATWG. Эти стандарты устанавливают правила разметки языка, вводят новые элементы и выводят устаревшие, сохраняя при этом обратную совместимость, т.е. поддержку устаревших элементов в новых версиях HTML. Текущая версия стандарта языка гипертекстовой разметки, рекомендованная к использованию разработчикам программного обеспечения и веб-мастерам — это пятая версия, сокращенно HTML5. Изучением этой версии мы и займемся в рамках данного курса.

HTML-редакторы

Для создания HTML-разметки подходит практически любой текстовый редактор, в том числе самый обыкновенный Блокнот в системе Windows, но лучше, конечно, сразу начать использовать один из множества профессиональных редакторов, таких как, например, NotePad++, Sublime Text 2, Dreamweaver, HomeSite или CoffeeCup HTML Editor.

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

Среди вышеперечисленных программ особенно хотелось бы выделить довольно мощный и популярный редактор с открытым исходным кодом NotePad++, который можно бесплатно скачать с официального сайта программы notepad-plus-plus.org.

Несмотря на наличие в данном редакторе огромного количества всевозможных функций и команд, он прост в освоении, имеет интуитивно понятный удобный интерфейс и обеспечивает подсветку синтаксиса не только для HTML, но и для целого ряда других компьютерных языков, часто используемых веб-разработчиками, таких как CSS, JavaScript и PHP. Наконец, и без того богатый функционал редактора может быть расширен за счет сторонних модулей и плагинов.

В дальнейших уроках данного курса многие примеры на языке HTML будут приведены именно в редакторе NotePad++. При этом мы обратим внимание на некоторые наиболее важные и интересные возможности редактора.

Смело рекомендуем NotePad++ начинающим веб-разработчикам.

HTML-теги

Перейдем непосредственно к изучению синтаксиса HTML. Основными элементами языка гипертекстовой разметки являются теги. Они разграничивают все материалы веб-страницы на части и определяют их как параграфы, цитаты, списки, таблицы и т.д. Например, для того, чтобы обозначить с помощью языка гипертекстовой разметки абзац текста достаточно поместить его в тег <p> (от английского «paragraph» – «абзац»). На языке HTML эта запись будет выглядеть следующим образом:

<p>
  Это абзац текста.
</p>

Сначала идет открывающий тег <p>, который представляет собой название тега в угловых скобках, затем абзац текста, а уже после него идет закрывающий тег </p>, который отличается от открывающего наличием дополнительной косой черты перед названием тега. Открывающий тег отмечает начало абзаца, а закрывающий — его конец. Причем, программа для отображения веб-страниц (браузер) выведет на экран текст между тегами, но не сами теги.

Отметим также, что вся приведенная конструкция, включающая открывающий тег, размеченный текст и закрывающий тег, называется HTML-элементом.

Пример простейшего HTML-документа

Теперь для более детального знакомства с языком гипертекстовой разметки перейдем к разбору простейшего HTML-документа.

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок веб-страницы</title>
    <meta name=«keywords» content=«HTML, теги, веб-страница» />
  </head>
  <body>
    <h2>Заголовок</h2>
    <!-- Это пример комментария -->
    <p>Это абзац текста со ссылкой 
      <a href=«http://www.w3.org/»>на другую страницу</a>.</p>
  </body>
</html>

Первое, с чего согласно стандарту HTML5 должна начинаться любая страница на языке гипертекстовой разметки — это помещенная в угловые скобки с восклицательным знаком команда doctype. Это не тег, а специальная инструкция, которая сообщает браузеру, что дальнейший текст представляет собой документ на языке HTML.

Далее идет корневой элемент веб-страницы — тег <html>, который определяет границы HTML-документа и содержит все прочие элементы разметки. Обратите внимание, редактор NotePad++ подсвечивает открывающий и закрывающий теги при размещении курсора мыши на одном из них. Это довольно удобно.

На следующем уровне разметки страницы, т.е. внутри тега <html>, присутствуют теги <head> и <body>. В теге <head> (от английского «голова») размещена скрытая часть страницы, которую еще называют «метаданные», а видимая часть страницы заключена в тело документа, т.е. тег <body>.

В данном примере в разделе метаданных документа, т.е. в теге <head>, присутствуют два других тега — это <title> и <meta>. Тег <title>, от английского «название», «заглавие», содержит заголовок документа, который не отображается на самой странице, но выводится в качестве названия вкладки в браузере. Также содержимое именно этого тега выводится в качестве ссылки в результатах поиска наиболее популярных поисковых систем. Поэтому тег <title> является чрезвычайно важным с точки зрения продвижения сайтов в поисковых системах.

Следующий за заголовком тег <meta> предназначен для хранения различной информации о документе, которая предназначена в первую очередь для поисковых систем и не выводится на экран посетителя в браузере. В частности, с помощью данного тега можно указывать кодировку, ключевые слова и описание страницы или даже устанавливать автоматическую переадресацию на другую страницу.

С этим тегом мы впервые сталкиваемся с таким понятием как атрибуты тегов.

Атрибуты тегов

Атрибуты введены в HTML для уточнения и расширения значения тегов. Они размещаются сразу после названия открывающего тега в его угловых скобках. Сначала идет название атрибута, затем символ «равно» и далее значение атрибута в одинарных или двойных кавычках. У одного тега может быть сразу несколько атрибутов, причем порядок их следования значения не имеет и на результате отображения страницы не сказывается.

Пример простейшего HTML-документа

Вернемся к тегу <meta> в нашем примере. Здесь указаны атрибуты name и content. Атрибут name равен keywords (т.е. ключевые слова) и это означает, что тег <meta> в данном случае содержит ключевые слова, заданные в атрибуте content. Тег <meta> относится к так называемым пустым элементам, т.е. элементам, которые не размечают никакого текста, выводимого на экран. Для таких элементов в языке HTML закрывающий тег не указывается. Вместо этого перед закрывающей угловой скобкой единственного тега добавляется пробел и косая черта (т.е. слеш).

Первый тег, который размещается в видимой части документа, т.е. в теге <body> – это тег <h2>, от английского «Header 1», т.е. заголовок первого уровня. Вообще существует шесть тегов для выделения заголовков различной степени важности: от <h2> до <h6>. Они указывают на относительную значимость следующего за заголовком текста. Среди них тег <h2> является наиболее, а <h6> наименее значимым. Тег <h2> используется практически на всех веб-страницах всех сайтов. Как правило, его применяют для вывода на экран заголовка страницы. Наряду с тегом <title>, данный тег чрезвычайно важен с точки зрения продвижения сайтов в поисковых системах.

Далее идет еще одна конструкция, заключенная в угловые скобки, которая тем не менее не является тегом. Это HTML-комментарий. Строка комментария должна начинаться с открывающей угловой скобки, восклицательного знака и двух дефисов и заканчиваться двумя дефисами и закрывающей угловой скобкой. HTML-комментарии не выводятся на экран при отображении страницы в браузере и предназначены для комментирования кода веб-разработчиками.

Далее в нашем примере мы вновь сталкиваемся с тегом <p>, который размечает абзац текста. Однако, в отличие от предыдущего примера, помимо обычного текста, этот абзац содержит еще гиперссылку, создаваемую тегом a (от английского «anchor» – «якорь»). Адрес страницы, на которую необходимо перенаправить пользователя при клике на данную ссылку, указывается в атрибуте href. Еще раз обратите внимание на синтаксис добавления атрибута: сначала идет название атрибута href, затем знак равенства и адрес ссылки в кавычках.

Теперь пришло время сохранить данный HTML-документ и посмотреть как он будет отображаться в браузере. Для этого необходимо выполнить в редакторе команду «Файл / Сохранить как…», выбрать место размещения страницы на диске, задать название файла и указать в качестве его расширения html или htm. Это, кстати, типичные расширения для веб-страниц, с которыми, они, как правило, без проблем открываются в браузере при двойном клике.

Итак, веб-страница сохранена. Теперь найдем ее на компьютере и откроем двойным кликом по имени файла.

Страница загрузилась в браузере, и мы видим на экране заголовок из тега <h2>, текст со ссылкой из тега <p> и содержимое тега <title> в качестве названия вкладки.

Древовидная структура HTML

В заключение еще раз обратим внимание на структуру HTML-документов, которая представляет собой дерево из тегов и текста. Корневой элемент веб-страницы — тег <html>. На втором уровне — теги <head> и <body>. Далее, на третьем уровне — теги <title>, <meta>, <h2>, <p>, и так далее.

На этом вводный урок по языку гипертекстовой разметки подошел к концу. Успехов вам в изучении новых компьютерных технологий.

Создание HTML-файла с помощью Блокнота и некоторых важных тегов | Примечания, видео, контроль качества и тесты | 9 класс> Компьютер> Дизайн веб-страниц

Создание файла HTML с помощью Блокнота и некоторые важные теги

Как создать HTML-файл с помощью блокнота

HTML не имеет собственного текстового редактора и рабочей среды, как другие программы, поэтому мы должны использовать отдельный текстовый редактор. Запустите блокнот и введите HTML-теги для подготовки веб-страницы.

Пуск> Все программы> Стандартные> Блокнот

Введите теги HTML в систему блокнота.Система «Блокнот» создает текстовый файл с расширением .txt. Итак, чтобы создать веб-страницу, вам нужно сохранить файл с расширением HTML.

• Нажмите «Файл»> «Сохранить как», чтобы открыть диалоговое окно «Сохранить как».
• Введите имя файла с расширением .HTML, например text.html, и сохраните его. Просмотрите его в веб-браузере, например, в Internet Explorer.

Каркас HTML

HTML — это язык сценариев на основе тегов. Скелет — это его основная структура, без него он не может быть построен.Здесь можно обсудить минимальные требования к HTML-дизайну и его положение в документе. Теги и являются основой или главной точкой, на которой расположены другие теги. Все элементы HTML написаны внутри. Размещаем следующие теги:

…


<Тело>
Эта страница поможет вам понять, как добавить строку в HTML-документ.И этот раздел поможет вам понять, как добавить строку с помощью тегов Html.

Шаг 2: Теперь поместите курсор в точку, где мы хотим добавить строку в Html-документе. И затем мы должны использовать тег

Html в этот момент.

Шаг 3: Теперь нам нужно добавить атрибуты тега

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

.

Шаг 4: Затем мы должны указать значения этих атрибутов.

Шаг 5: И, наконец, нам нужно сохранить код Html и затем запустить файл в браузере.

<Голова>
<Название>
Добавьте строку с помощью тегов HTML


<Тело>
Эта страница поможет вам понять, как добавить строку в HTML-документ.

 

  

Привет, мир