Title компьютер title — создание сайта в блокноте.
Не привычный заголовок для статьи? Речь пойдёт не о компьютерах, речь в статье пойдёт об элементарном HTML-сайте. Рассмотрим то, как с помощью блокнота, встроенного в стандартный пакет программ для Windows, создать простой сайт.
Содержание
1 Создание WEB-сайта «Компьютер»
1.1 Самое первое в создании сайта
1.2 Заголовок страницы и TITLE
1.3 Содержимое веб-страницы
1.4 Основа WEB-страницы
Создадим элементарный сайт на HTML про компьютеры. Пусть это будет WEB-сайт про персональный компьютер, на котором мы хотим рассказать о том, что такое Персональный Компьютер (ПК), создадим соответствующие страницы: главную, страницу о программном обеспечении и о компьютерных терминах. Начнём создавать сайт с самого начала, для этого нажимаем на меню компьютера «Пуск» — «Все программы» — «Стандартные» — «Блокнот», запускаем блокнот и начинаем разбираться с программированием сайта.
Самое первое в создании сайта
Итак, мы хотим создать свой сайт с помощью блокнота. Для этого следует знать, что WEB-страница формируется с помощью специальных тегов. Теги должны быть заключены в угловые скобки, представляющие из себя знаки больше или меньше. Теги страницы могут быть парными или одиночными. Парные теги должны иметь открывающий и закрывающий тег — всё вместе это называется контейнер. Например, два тега
<b></b>
<b></b>
— это контейнер.
Закрывающий тег от открывающего отличается тем, что перед ним обязательно указывается прямой слэш, то есть знак «/». Все теги могут быть записаны как с помощью прописных, так и с помощью строчных букв.
Весь html-код страницы должен быть помещён внутри контейнера
<HTML></HTML>
<HTML></HTML>
Без указания этих тегов браузеры не смогут правильно интерпретировать содержимое страницы.
Далее что следует знать — web-страницы делятся на две логические части. Это заголовок и содержимое.
Заголовок страницы и TITLE
Есть такой контейнер
<HEAD></HEAD>
<HEAD></HEAD>
— это заголовок WEB-страницы. Заголовок содержит в себе название документа и некоторую справочную информацию о данной странице. Это может быть информация об используемой кодировке, указание не файл стилей, об используемом программном обеспечении сайта и так далее. Пока что эта информация нам не особо полезна.
Также есть специальный контейнер
<TITLE></TITLE>
<TITLE></TITLE>
— между этим открывающим и закрывающим тегом указывается название веб-страницы. Данное название отображается в строке заголовка браузера. Допусти, указав
<ТIТLE>Компьютер</ТIТLЕ>
<ТIТLE>Компьютер</ТIТLЕ>
мы увидим в заголовке в браузере название «Компьютер».
Итак, заголовок нашей страницы принимает такой вид:
<HEAD>
<ТIТLE>Компьютер</ТIТLЕ>
</HEAD>
<HEAD>
<ТIТLE>Компьютер</ТIТLЕ>
</HEAD>
Содержимое веб-страницы
— это контейнер, куда помещается всё основное содержимое страницы сайта. Данный контейнер может содержать таблицы, бегущие строки, ссылки на звуковые, видео и графические файлы, текст и так далее.
Чтобы понимать принцип создания сайта с нуля в блокноте, поместит в основной контейнер текст:
<BODY>
Компьютер — это электронное вычислительное устройство.
</BODY>
<BODY>
Компьютер — это электронное вычислительное устройство.
</BODY>
Основа WEB-страницы
Итак, со структурой мы разобрались. Открываем блокнот и вносим туда следующий текст:
<HTML>
<HEAD>
<TITLE>Компьютер</TITLE>
</HEAD>
<BODY>
Компьютер — это электронное вычислительное устройство.
</BODY>
</HTML>
1
2
3
4
5
6
7
8
<HTML>
<HEAD>
<TITLE>Компьютер</TITLE>
</HEAD>
<BODY>
Компьютер — это электронное вычислительное устройство.
</BODY>
</HTML>
Чтобы было удобнее — для размещения сайта создать также отдельную папку, куда можно будет складывать все файлы сайта. Сохраняем в эту папку созданную в блокноте страницу с именем файла index.htm или index.html. Таким названием принято называть титульный файл сайта.
Чтобы увидеть созданную и сохранённую страницу сайта — открываем файл index.htm или index.html с помощью браузера. Создание других страниц и дальнейшую проработку сайта рассмотрим в следующих статьях.
Создание сайта средствами HTML-программирования (по учебнику Н.Д.Угриновича)
Создание Web-сайта.(по учебнику Н.Д.Угриновича)
1. Открыть окно текстового редактора Блокнот.
2. Вид Web-страницы задается тэгами, которые заключаются
в угловые скобки. Html-код страницы помещается внутри контейнера
<HTML></HTML>.
Заголовок Web – страницы заключается в контейнер <HEAD></HEAD>
Название Web-страницы содержится в контейнере <TITLE></TITLE>
Наша страница будет называться «Компьютер»:
<HTML>
<HEAD>
<TITLE> Компьютер </TITLE>
</HEAD>
Основное содержание страницы помещается в
контейнер <BODY></BODY> и может включать текст, таблицы, бегущие
строки, ссылки на графические изображения и т. д.
Поместим на страницу текст «Все о компьютере»
<BODY>
Все о компьютере
</BODY>
Созданную Web-страницу необходимо сохранить в виде файла.
Титульный файл сайта принято сохранять под именем index.htm
Загрузите полученный файл в окно браузера для
просмотра.
<HTML>
<HEAD>
<TITLE> Компьютер </TITLE>
</HEAD>
<BODY>
Все о компьютере
</BODY>
</HTML>
3. Для форматирования текста:
v размер шрифта задается тэгами от <h2> (
самый мелкий) до <H6> (самый крупный).
v Положение заголовка на странице позволяет
задать атрибут ALIGN, которому требуется присвоить определенное значение.
Выравнивание по правой границе окна реализуется с помощью записи ALIGN=”right”,
а по центру – ALIGN=”center”
v С помощью тэга FONT и его атрибутов
можно задать параметры форматирования шрифта любого фрагмента текста.
Атрибут FACE
позволяет задать гарнитуру шрифта ( например, FACE =”Arial”),
атрибут SIZE – размер шрифта( например, SIZE=4),
атрибут COLOR – цвет шрифта (например, COLOR=”blue”).
v Заголовок целесообразно отделять от остального
содержания страницы горизонтальной линией с помощью одиночного тэга <HR>.
v Разделение текста на абзацы производится с
помощью контейнера <P></P>
v Разместим на титульной странице текст,
разбитый на абзацы с различным выравниванием:
<P ALIGN =”left”>
На этом сайте вы сможете получить различную информацию о компьютере, его
программном обеспечении и ценах на компьютерные комплектующие. </P>
<P ALIGN =
“right”> Терминологический словарь познакомит вас с
компьютерными терминами, а также вы сможете заполнить анкету.
</P>
Т.о. сейчас в
контейнере <BODY> находится следующая последовательность тэгов:
< FONT COLOR =”blue”>
<h2 ALIGN =”center”>
Все о
компьютере
</h2>
</FONT>
<HR>
<PALIGN =”left”> На этом сайте вы сможете…
</P>
<PALIGN = “right”> Терминологический словарь…
</P>
4. Вставка
изображений.
На Web-
страницах могут размещаться графические файлы трех форматов-gif, jpg, png.
Для вставки изображения
используется тэг <IMG> с атрибутом SRC,
который указывает на место хранения файла. Если файл сохранен в том же
каталоге, что и файл Web-страницы, то в качестве значения атрибута SRC
достаточно указать только имя файла.
<IMG SRC =”computer.gif”>
Если файл находится в
другом каталоге, то надо указать путь к нему. ( Например, <IMG SRC =”C:\computer\computer.gif”>
Поясняющий текст
выводится с помощью атрибута ALT, значением которого является текст,
поясняющий, что должен был увидеть пользователь
<IMG SRC =”computer.gif” ALT =
“компьютер”> Расположить рисунок относительно текста можно различными
способами, с помощью атрибута <ALIGN> тэга <IMG>( TOP
(ВВЕРХ), MIDLE (СЕРЕДИНА), BOTTOM (НИЗ), LEFT (СЛЕВА), RIGHT(СПРАВА)
Итак, при вставке
изображения получим:
<IMG SRC =”computer. gif”
ALT = “компьютер”
ALIGN = “right”>
II. Гиперссылки на Web-страницах.
Для создания связи
между титульной страницей и другими страницами сайта необходимо создать
заготовки страниц, которые должны иметь заголовок, но пока могут не иметь
содержания.
Все создаваемые страницы
необходимо сохранить в виде файлов в папке сайта.
Каждая страница будет
содержать следующий HTML-код:
<HTML>
<HEAD>
<TITLE> Заголовок страницы </TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
Создайте пустые
страницы «Программы», «Словарь», «Комплектующие» и «Анкета» и сохраните их в
файлы с именами software.
htm, glossary.htm, hardware.htm, anketa.htm в каталоге сайта.
Перейдем к созданию
гиперссылок. Гиперссылки принято размещать в нижней части страницы, поэтому
разместим их под введенным текстом в новом абзаце одну строку разделенными
несколькими пробелами.
<P ALIGN =”center”>
[Программы]   [Словарь]
  [Комплектующие]
  [Анкета]
</P>
Для каждой гиперссылки определим адрес
перехода. Для этого используется контейнер гиперссылки <A></A> с
атрибутом HREF
<A HREF =”URL”> Указатель гиперссылки</A>
Вставьте в титульную страницу код, создающий
панель навигации:
<P ALIGN =”center”>
[A HREF =”software.htm”>Программы </A>]  
[A HREF =”glossary.htm”>Словарь </A>]  
[A HREF =”hardware.htm”>Комплектующие</A>]  
[A HREF =”anketa.htm”>Анкета </A>]
</P>
Можно создать на
титульной странице ссылку на адрес электронной почты
<ADRESS>
< A HREF =mailto:mailbox@provaider. ru> E-mail: mailto:[email protected]</A>
</ADRESS>
III. Использование списков.
На странице «Программы»
разместим информацию об основных типах программного обеспечения компьютера в
форме вложенного списка.
Список располагается
внутри контейнера <OL></OL>, а каждый элемент списка определяется
тэгом <LI>. Тип нумерации определяется с помощью атрибута TYPE
тэга <OL> (“I” –римские цифры, “a”-
строчные буквы…)
Откройте файл software.htm,
введите заголовок «Программное обеспечение» и добавьте следующий HTML-
код
<OL>
<LI>Системные
программы
<LI>
Прикладные программы
<LI>
Системы программирования
</OL>
Добавим вложенный
список для элемента <LI> Прикладные программы
<UL>
<LITYPE =”square” (это вид маркера – квадрат)
Текстовые редакторы;
<LI>
графические редакторы;
<LI>
электронные таблицы;
<LI>
системы управления базами данных.
</UL>
Страницу «Словарь» мы
представим в виде словаря компьютерных терминов. Для этого используем контейнер
списка определений </DL>. Внутри него текст оформляется в виде
термина, который выделяется непарным тэгом <DT>, и определения,
которое следует за тэгом <DD >
Откройте файл glossary.htm,
введите заголовок «Компьютерные термины» и добавьте следующий HTML-код,
задающий список определений:
<DL>
<DT>
Процессор
<DD > Центральное устройство компьютера, производящее обработку информации в
двоичном коде.
<DT>
Оперативная память
<DD >Устройство, в котором хранятся программы и данные
</DL>
IV.
Создание форм.
Для того, чтобы посетители сайта могли не
только просматривать информацию, но и отправлять сведения его администраторам
сайта, на его страницах размещают формы.
Разместим на странице «Анкета» анкету для
посетителей.
Вся форма заключается в контейнер <FORM></FORM>
В первую очередь выясняется имя посетителя и
его электронный адрес. Для этого разместим два однострочных текстовых поля с
помощью тэга <INPUT> со значением атрибута TYPE =”text”
Атрибут NAME является обязательным и служит для идентификации
полученной информации. Значением атрибута SIZE является число, задающее длину поля ввода в
символах.
Чтобы анкета читалась, необходимо разделить
строки с помощью тэга перевода строки <BR>.
Откройте файл anketa.htm и
добавьте код:
<FORM>
Пожалуйста, введите ваше имя:
<BR>
<INPUT TYPE =”text”>
NAME=”name” SIZE=30> <BR>
E-mail:<BR>
<INPUT TYPE =”text”
NAME =”e-mail” SIZE =30>
<BR>
</FORM>
Далее мы хотим выяснить, к какой группе
пользователей относит себя посетитель: учащийся, студент, учитель. Для этого
необходимо создать группу переключателей (радиокнопок). Создается такая группа
с помощью тэга <INPUT> со значением атрибута TYPE =”radio”.
Все элементы в группе должны иметь одинаковые значения атрибута NAME.
Еще одним обязательным атрибутом является VALUE, которому присвоим значения “schoolboy”,
“student”, “teacher”. Атрибут CHECKED, который задает
выбор кнопки по умолчанию, в данном случае не используется.
Укажите, к какой группе пользователей вы себя
относите:
<BR>
<INPUT TYPE =”radio”
NAME =”group” VALUE=
“schoolboy”> учащийся <BR>
<INPUT TYPE =”radio”
NAME =”group” VALUE=
“student”> студент <BR>
<INPUT TYPE =”radio”
NAME =”group” VALUE=
“teacher”> учитель <BR>
Выясним, какой из браузеров предпочитает
посетитель сайта. Перечень браузеров представим в виде раскрывающегося списка.
Для реализации такого списка используется контейнер<SELECT></SELECT>
, в котором каждый элемент списка определяется тэгом <OPTION>
<SELECT NAME =”browsers”>
<OPTION SELECTED> Internet
Explorer
Internet Explorer
<OPTION>
Netscape Navigator
<OPTION> Opera
<OPTION> NeoPlanet
</SELECT>
В заключении поинтересуемся, что хотел бы
видеть посетитель на страницах нашего сайта. Создается такая текстовая область
с помощью тэга <TEXTAREA> с обязательными атрибутами: NAME,
задающим имя области, ROWS, определяющим число строк, и COLS —
число столбцов.
Какую еще информацию вы хотели бы видеть на
нашем сайте?
<BR>
<TEXTAREA NAME=”resume”
ROWS=4 COLS=30>
</ TEXTAREA>
<BR>
Для отправки данных из формы наберите:
<INPUT TYPE=”submit”
VALUE=”отправить”>
<INPUT TYPE=”reset”
VALUE=” очистить”>
Объясните значение тега и в HTML
HTML-теги
и — два наиболее часто используемых тега в HTML. Очень редко можно найти отраслевой веб-сайт, на страницах которого не используются теги и. В этой статье мы узнаем значение этих двух тегов в HTML-документе.
Значение HTML-тега: Тег head в HTML используется для хранения метаданных или информации, относящейся к документу. Он содержит некоторые из наиболее важных тегов, таких как
,<meta> и<link>.</p><p> <strong> С точки зрения браузера: </strong></p><ul><li> В HTML 5 не обязательно включать тег<head> в HTML-документ, но в предыдущих версиях (4.0.1) он был обязательным.</li><li> Такие теги, как<title>,<meta> или<link>, которые обычно содержатся внутри заголовка, также будут нормально работать без тега<head> или вне тега<head>.</li></ul><p> <strong> С точки зрения разработки: </strong></p><ul><li> С точки зрения разработчика хорошо включать тег<head> в документ, поскольку этот синтаксис широко используется, а также обеспечивает хорошую структуру документа. Позже это поможет нам взаимодействовать с элементами DOM структурированным образом.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/slideplayer.com/slide/14052589/86/images/5/%D0%9C%D0%B8%D1%81%D0%BE%D0%BB%3A+%3CHTML%3E+%3CHEAD%3E.jpg' /><noscript><img loading='lazy' src='/800/600/http/slideplayer.com/slide/14052589/86/images/5/%D0%9C%D0%B8%D1%81%D0%BE%D0%BB%3A+%3CHTML%3E+%3CHEAD%3E.jpg' /></noscript></li></ul><p> <strong> Значение HTML-тега<body>: </strong> HTML-тег body является последним потомком тега<html>. Он используется для хранения основного содержимого HTML-документа. Он содержит все, от заголовка, абзацев до уникальных контейнеров <i> div </i>, находящихся внутри тега<body>.</p><p> <strong> С точки зрения браузера: </strong></p><ul><li> В HTML 5 не обязательно включать тег<body> в HTML-документ, но в предыдущих версиях (4.0.1) он был обязательным.</li><li> Такие теги, как<div>,<p> или <a>, которые обычно содержатся внутри body, также будут нормально работать без тега<body> или вне тега<body>.</li><li> Несмотря на то, что тег<body> не является обязательным, он имеет некоторые атрибуты, такие как background, bgcolor, a, link и т. д.</li></ul><p> <strong> С точки зрения разработки: </strong> С точки зрения разработчика Хорошо включить тег<body> внутри документа. Этот синтаксис широко используется, а также обеспечивает хорошую структуру документа. Позже это поможет нам взаимодействовать с элементами DOM структурированным образом.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/image3.slideserve.com/5527844/phpbilgi-php-l.jpg' /><noscript><img loading='lazy' src='/800/600/http/image3.slideserve.com/5527844/phpbilgi-php-l.jpg' /></noscript></p><p> <strong> Пример 1: </strong> В следующем коде отсутствуют теги<head> и<body>.</p><h3><span class="ez-toc-section" id="HTML"> HTML </span></h3><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><p data-readability-styled="true"> <code> <!DOCTYPE html> </code></p><p data-readability-styled="true"> <code> < </code> <code> html </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> <code> < </code> <code> p </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> <code> Significance of 'head' и 'body' </code></p><p data-readability-styled="true"> <code> </code> <code> тег в HTML: Geeksforgeeks </code></p><p data-readability-styled="true"> <code> </code> <code> </ </code> <code> p </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> </p><p data-readability-styled="true"> <code> </code> <code> < </code> <code> title </code> <code> >Tutorial</ </code> <code> title </code> <code> > </code></p><p data-readability-styled="true"> <code> </ </code> <code> html </code> <code> > </code></p></td></tr></tbody></table><p> <strong> Вывод: </strong></p><p> Без тегов head и body</p><p> <strong> Пример 2: </strong> Следующий код добавляет теги<head> и<body> в документ.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/image2.slideserve.com/4284440/table-table-l.jpg' /><noscript><img loading='lazy' src='/800/600/http/image2.slideserve.com/4284440/table-table-l.jpg' /></noscript> Вывод в последнем будет таким же, даже если включены теги<head> и<body>, но это дает лучшую структуру кода и лучшую перспективу для понимания.</p><h3><span class="ez-toc-section" id="HTML-2"> HTML </span></h3><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><p data-readability-styled="true"> <code> <!DOCTYPE html> </code></p><p data-readability-styled="true"> <code> < </code> <code> html </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> </p><p data-readability-styled="true"> <code> < </code> <code> head </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> <code> < </code> <code> title </code> <code> >Tutorial</ </code> <code> title </code> <code> > </code></p><p data-readability-styled="true"> <code> </ </code> <code> head </code> <code> > </code></p><p data-readability-styled="true"> <code> 3 </code>058 <code> <</code> <code> Body </code> <code>> </code></p><p data-readability-styled="true"> <code> </code> <code> <</code> <code> P </code> <code>> </code></p><p data-readability-styled="true"> <code> </code> <code><p data-readability-styled="true"> <code> </code> <code> </ </code> <code> P </code> <code>> </code></p><p data-readability-styled="true"> <code> </ </code> <code> Body </code> <code>> </code></p><p data-readability-styled="true"> <code> </code></p><p data-readability-styled="true"> </code></p><p data-readability-styled="true"> <code> </code></p><p data-readability-styled="true"> </code></p><p data-readability-styled="true"> <code> </code></p><p data-readability-styled="true"> </code></p><p data-readability-styled="true"> <code> </code></p><p data-readability-styled="true"> </code>0059 </ </code> <code> html </code> <code> > </code></p></td></tr></tbody></table><p> <strong> Вывод: </strong></p><p> С помощью тегов<head> и<body></p><p> Результат не изменился.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/2.bp.blogspot.com/-ZUipptQUSdo/WMKY2ptzq2I/AAAAAAAAAyA/88aram0mTmI9VJDi9WTggMAzwSAZ75JEQCLcB/s1600/1.png' /><noscript><img loading='lazy' src='/800/600/http/2.bp.blogspot.com/-ZUipptQUSdo/WMKY2ptzq2I/AAAAAAAAAyA/88aram0mTmI9VJDi9WTggMAzwSAZ75JEQCLcB/s1600/1.png' /></noscript> Но код стал для нас понятным, так как соглашение соблюдается правильно.</p><p> <strong> Пример 3: </strong> В следующем коде используются атрибуты тега<body>. В этом примере мы собираемся использовать атрибут «bgcolor» тега<body>. Это изменит цвет фона всего документа. Без тега<body> мы потеряем больше таких атрибутов, как <alink>,<link> и т. д.</p><h3><span class="ez-toc-section" id="HTML-3"> HTML </span></h3><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><p data-readability-styled="true"> <code> <!DOCTYPE html> </code></p><p data-readability-styled="true"> <code> < </code> <code> html </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> </p><p data-readability-styled="true"> <code> < </code> <code> head </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> <code> < </code> <code> title </code> <code> >Tutorial</ </code> <code> title </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> <code> < </code> <code> ссылка </code> <code> rel <code>0 <code> = <code>"stylesheet" </code> <code> href </code> <code> = </code> <code> "styles.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/slideplayer.info/slide/13199514/79/images/10/Contoh+variabel.jpg' /><noscript><img loading='lazy' src='/800/600/http/slideplayer.info/slide/13199514/79/images/10/Contoh+variabel.jpg' /></noscript> css" </code> <code> > </code></p><p data-readability-styled="true"> <code> </ </code> <code> head </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> </p><p data-readability-styled="true"> <code> < </code> <code> body </code> <code> bgcolor </code> <code> = </code> <code> "Черный" </code> <code>> </code></p><p data-readability-styled="true"> <code> </code> <code> <</code> <code> H2 </code> <code>> </code></p><p data-readability-styled="true"> <code> </code> <code>0059 </code> <code> tag in HTML : Geeksforgeeks </code></p><p data-readability-styled="true"> <code> </code> <code> </ </code> <code> h2 </code> <code> > </code></p><p data-readability-styled="true"> <code> </ </code> <code> body </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> </p><p data-readability-styled="true"> <code> </ </code> <code> html </code> <code> > </code></p></td></tr></tbody></table><p> <strong> Вывод: </strong></p><p></p> <br/><h2><span class="ez-toc-section" id="_HTML_Hello_World"> Не теряйте голову! Обрести внутренний покой с помощью HTML • Программа Hello World </span></h2><p> Помните, когда мы делали нашу первую веб-страницу, я упомянул, что элемент body был там, где располагались все наши видимые элементы.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files/slide/z/z4oFZqI1sweOSTmtuBYMyDkK87RdrLUa59PQpx/slide-3.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/z/z4oFZqI1sweOSTmtuBYMyDkK87RdrLUa59PQpx/slide-3.jpg' /></noscript> Итак, куда мы поместим невидимые вещи? Что еще более важно, какой смысл в невидимых вещах? Что это хотя бы значит!? Расслабляться. Сделайте глубокий вдох. Все станет ясно, когда мы узнаем об элементе заголовка HTML. Головной элемент мало чем отличается от вашей головы. Он содержит информацию и инструкции для веб-страницы. Это своего рода мозг HTML-документа. Как и ваша голова из плоти, HTML-голова располагается прямо над телом.</p><pre> <!DOCTYPE HTML>
<html>
<голова></голова>
<тело></тело>
</html> </pre><p> Многие элементы, находящиеся внутри заголовка, существуют для того, чтобы помочь поисковым системам обнаружить ваш веб-сайт. Элемент заголовка особенно важен для этого и является одним из немногих обязательных элементов HTML. Название является идентификатором вашей веб-страницы. Это то, как внешний мир видит вашу страницу на вкладках своего веб-браузера, в своих закладках и в результатах поиска.</p><p></p><p> Поскольку заголовок часто является первым, что потенциальные посетители увидят на вашей веб-странице, очень важно написать что-то короткое, информативное и заманчивое.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/3.bp.blogspot.com/-ksS0q7Xt5mY/UNbg37KHuzI/AAAAAAAAAF8/Hb6G7w7QaS0/s1600/%25C3%25B6rnek.jpg' /><noscript><img loading='lazy' src='/800/600/http/3.bp.blogspot.com/-ksS0q7Xt5mY/UNbg37KHuzI/AAAAAAAAAF8/Hb6G7w7QaS0/s1600/%25C3%25B6rnek.jpg' /></noscript> Существуют целые индустрии, построенные вокруг написания умных заголовков для поисковой оптимизации, поэтому я не совсем компетентен, чтобы давать вам такого рода советы. Скажу, что важно сделать заголовки понятными для человека. Например, «Программа Hello World: практические занятия по информатике» лучше, чем «Информатика, программирование, практические занятия». Если вы ищете что-то, что можно загрузить строкой ключевых слов, не ищите ничего, кроме метаэлементов.</p><p> Хотя метаэлементы не являются единственной их функцией, они предоставляют еще один способ помочь поисковым системам обнаружить и поделиться вашим веб-сайтом. Они состоят из двух атрибутов: имени и содержимого. Изменение названия метаэлемента полностью меняет его функцию, поэтому они имеют довольно широкий спектр применения. Скорее всего, вы увидите элементы «ключевые слова» и «описание», используемые на большинстве веб-сайтов, но существует гораздо больше типов метаданных.</p><pre> <мета
имя="ключевые слова"
content="информатика, программирование, код, STEM, учебные пособия, образование"
/>
<мета
имя = "описание"
content="Программа Hello World — это онлайн-коллекция видеороликов и учебных пособий по программированию, информатике и веб-разработке, сочетающих технологии и искусство.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/6/613969/slide_21.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/6/613969/slide_21.jpg' /></noscript> "
/> </pre><p> По правде говоря, поисковые системы в значительной степени игнорируют данные о ключевых словах. Этот список терминов, разделенных запятыми, был предназначен для того, чтобы поисковые системы знали, о чем ваша страница, но годы злоупотреблений сделали эти данные практически бесполезными. Описание, с другой стороны, почти так же важно, как и название. Это фрагмент текста, который будет отображаться в результатах поиска. Описание должно быть кратким, удобочитаемым обзором содержимого нашей веб-страницы.</p><p></p><p> Если вы следовали этим руководствам с самого начала, вы должны хорошо разбираться в HTML. Так что ты думаешь? Это не так сложно, правда? Я знаю, о чем вы думаете, поэтому просто скажу. HTML сам по себе симпатичный, довольно скучный. Все наши HTML-документы в основном представляли собой стены текста со случайными изображениями или видео. Чтобы сделать наш веб-сайт действительно потрясающим, нам потребуется включить CSS и JavaScript. CSS — это следующий шаг в вашем путешествии по веб-разработке, поэтому давайте сначала рассмотрим его.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/6/583521/slide_5.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/6/583521/slide_5.jpg' /></noscript> Мы могли бы использовать элемент style, чтобы написать наш CSS непосредственно внутри элемента head, вот так.</p><pre> <тип стиля = "текст/CSS">
тело {
фон: #000;
цвет: #fff;
семейство шрифтов: Arial, Helvetica, без засечек;
}
</style> </pre><p> Это будет очень беспорядочно и запутанно, когда мы начнем добавлять больше страниц на наш веб-сайт, особенно если мы хотим использовать одни и те же стили на нескольких страницах. Лучший способ включить CSS в веб-страницу — переместить содержимое элемента стиля в отдельный файл, например «styles.css», и включить его в элемент ссылки.</p><pre> <link rel="stylesheet" type="text/css" media="screen" href="css/styles.css" /> </pre><p> Для элемента link требуются атрибуты rel, type и href. Атрибут rel описывает связь между текущим документом и связанным документом. В этом случае связанный документ является «таблицей стилей». Атрибут type дополнительно описывает связанный документ с его MIME-типом. Конечно, вы узнаете атрибут href; это относительный или абсолютный путь к файлу CSS.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/image1.slideserve.com/2766156/rnek-1-zem-n-reng-l.jpg' /><noscript><img loading='lazy' src='/800/600/http/image1.slideserve.com/2766156/rnek-1-zem-n-reng-l.jpg' /></noscript> Этот медиа-атрибут, который я добавил, помогает веб-браузеру определить, какую таблицу стилей загружать, в зависимости от типа запрашивающего ее устройства. Существует несколько возможных значений атрибута media, наиболее распространенными из которых являются all, screen, handheld и print. Таблицы стилей для печати полезны для того, чтобы наш веб-сайт выглядел красиво при печати. Например, мы можем скрыть такие элементы, как навигация по сайту и боковые панели, увеличить размер шрифта или изменить семейство и цвет шрифта.</p><pre> тело {
цвет: #000;
семейство шрифтов: "Times New Roman", Times, serif;
размер шрифта: 150%;
}
#главная навигация,
#сайдбар,
#нижний колонтитул {
дисплей: нет;
} </pre><pre> <link rel="stylesheet" type="text/css" media="print" href="css/print.css" /> </pre><p> Не слишком беспокойтесь о понимании CSS; сейчас важно только то, что вы знаете, как включать таблицы стилей в свои HTML-документы. Давайте посмотрим на включение JavaScript. Как и в случае с CSS, мы могли бы написать наш код JavaScript прямо в голове с помощью элемента script, например:</p><pre> <скрипт>
document.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/1.bp.blogspot.com/-vopb7rXvaM0/WRxGPggwDrI/AAAAAAAABmk/vGOfweplDVwIqRjhnnHx0wOv4Astli53wCLcB/s1600/Screenshot%2Bat%2B2017-05-17%2B19%253A45%253A58.png' /><noscript><img loading='lazy' src='/800/600/http/1.bp.blogspot.com/-vopb7rXvaM0/WRxGPggwDrI/AAAAAAAABmk/vGOfweplDVwIqRjhnnHx0wOv4Astli53wCLcB/s1600/Screenshot%2Bat%2B2017-05-17%2B19%253A45%253A58.png' /></noscript> getElementById("привет").innerHTML = "Привет, мир!"
</script> </pre><p> Можете ли вы догадаться, что я собираюсь сказать об этом методе? Вот так. Гораздо лучше переместить содержимое элемента скрипта в новый файл и связать его. В отличие от CSS, JavaScript связан с элементом сценария, а не с элементом ссылки.</p><pre> <script src="js/main.js"></script> </pre><p> Единственным обязательным атрибутом является «src», который, конечно же, является относительным или абсолютным путем к вашему файлу JavaScript. А теперь самая сумасшедшая часть: JavaScript даже не обязательно должен быть у вас в голове! На самом деле, обычно лучше переместить скрипты в нижнюю часть веб-страницы, прямо перед закрывающим тегом body. Веб-браузеры загружают веб-страницу сверху вниз, поэтому перемещение вашего внешнего JavaScript в нижнюю часть страницы заставит их загружаться в последнюю очередь; после того, как весь контент и стили уже завершили загрузку.</p> <pre> <!DOCTYPE HTML><html> <голова><title>Программа Hello World <мета
имя="ключевые слова"
content="информатика, программирование, код, STEM, учебные пособия, образование"
/> <мета
имя = "описание"
content="Программа Hello World — это онлайн-коллекция видеороликов и учебных пособий по программированию, информатике и веб-разработке, сочетающих технологии и искусство.
Допусти, указав
</BODY>
Сохраняем в эту папку созданную в блокноте страницу с именем файла index.htm или index.html. Таким названием принято называть титульный файл сайта.
д.
Вставка
изображений.
gif”
ru> E-mail: mailto:[email protected]</A>
Для этого
необходимо создать группу переключателей (радиокнопок). Создается такая группа
с помощью тэга <INPUT> со значением атрибута TYPE =”radio”.
Все элементы в группе должны иметь одинаковые значения атрибута NAME.
Еще одним обязательным атрибутом является VALUE, которому присвоим значения “schoolboy”,
“student”, “teacher”. Атрибут CHECKED, который задает
выбор кнопки по умолчанию, в данном случае не используется.
Перечень браузеров представим в виде раскрывающегося списка.
Для реализации такого списка используется контейнер<SELECT></SELECT>
, в котором каждый элемент списка определяется тэгом <OPTION>
Очень редко можно найти отраслевой веб-сайт, на страницах которого не используются теги и. В этой статье мы узнаем значение этих двух тегов в HTML-документе.