HTML-теги html, head, body. Теги, которые есть в любой страничке интернета. Приступим к созданию страницы HTML
Приветствую вас на страницах блога Start-Luck. Сегодня мне бы хотелось показать вам, как использовать код. Писать сайты – интересное занятие, которое многим может казаться невыполнимо сложным. На самом деле простенькую страничку можно создать всего за 5 минут.
В этой статье я расскажу про создание html страницы. Выполним мы эту задачу менее, чем за 10 минут, а потом более подробно разберемся с основными тегами. Было бы неправильно называть подобную публикацию уроком. Это скорее затравка, которая призвана показать вам простоту работы и родить в вас желание двигаться дальше, изучить больше, делать лучше.
Как создать страничку
Первую страницу я предлагаю вам сделать в блокноте. Самом простом, который находится в меню «Пуск», папка «Стандартные». Пока не нужно ничего скачивать. Попробуйте воспользоваться тем, что имеете.
Откройте документ.
Вставьте в него вот этот код.
<html
>
<head
>
<title
>
Моя первая страница</
title
>
</
head
>
<body
>
<center
></ h1 > <br / ><center > <font style = "color:red" > </ font > <br / > <b > </ b > <br / > Мы дошли до самого низа <br / > Теперь вы знаете чуть больше о тегах и можете использовать их. Давайте попробуем вставить ссылочку, чтобы связать несколько страниц воедино. <br / > <hr > К примеру, вот ссылка на мой блог - <a href = "https://сайт/" > Start-Luck</ a > - рассказывает просто о "сложном". <br / > <br / > </ body > </ html > |
Создать страницу проще, чем вы думаете
Простой код позволяет сделать текст красным
Написать жирным не намного сложнее
Мы дошли до самого низа
Теперь вы знаете чуть больше о тегах и можете использовать их. Давайте попробуем вставить ссылочку, чтобы связать несколько страниц воедино..
Ну вот и все. Ваша первая страница готова
Файл нужно назвать index.html . Окончание «.html» указывает на расширение файла. Если вы просто введете название индекс, то документ сохранится как текстовый файл и не откроется браузером.
Я сохранял документ на рабочий стол. Теперь нужно найти его, нажать правую кнопку мыши и открыть с помощью любого браузера. Я выберу Google Chrome.
Вот так выглядит только что созданная мной страничка. Ваша ничем не будет отличаться. Все точно также: с картинками и цветным шрифтом.
Сейчас я более подробно расскажу о тегах, а пока давайте просто уберем из заголовка «center » и вставим строчку, в которой содержится слово «Color ». Кстати, я уже писал. Это очень просто, рекомендую к прочтению.
Еще раз сохраните документ, в этот раз можно просто воспользоваться сочетанием клавиш Ctrl+S, а затем обновите страницу в браузере при помощи кнопочки F5
Помните, практически любой тег должен открываться и закрываться. То есть где-то должен располагаться код со слешем. В данном случае он выглядит так: .
Видите, заголовок стал красным. Точно также вы можете придать нужный оттенок любой части текста.
Ну вот и все, пример готов, и вы должны гордиться собой. Конечно, она еще не находится онлайн, для этого веб-страницу надо выложить на , который предоставляется хостингом. Нужно также подключить свой домен, чтобы и другие люди могли увидеть ваше творение.
Пока страничку видите только вы. Но согласитесь, таким сайтом можно удивить только человека из железного века. Но это первый опыт, давайте сделаем его еще более успешным, разобравшись с тегами, которые мы использовали. Это поможет вам научиться создавать свои проекты, без чьей либо помощи.
Теги
С вашего позволения я перейду в программу NotePad++. Она обладает целым рядом преимуществ в сравнении с обычным блокнотом. Сейчас мне очень пригодится подсветка тегов, чтобы показывать вам те элементы, о которых я буду рассказывать. Вообще, если вы собираетесь, изучать html, то я очень рекомендую установить эту бесплатную программу.
Она не единственная и я могу предложить вам еще несколько если кого-то заинтересуют альтернативы. Мы же перейдем к теоретической части.
Основные
Начинается и заканчивается страница с тегов . Они показывают браузеру, что это веб-документ, созданный при помощи html.
Далее идет или заголовок. В ней располагается самая важная информация о странице, в нашем случае – . Если вы еще не нашли фразу «Моя первая страница», которая присутствует в коде, обратите внимание на саму вкладку, над поисковой строчкой.
Именно теги
Тег
указывает на то, что фраза является заголовком. По умолчанию, она чуть больше основного текста и выделяется жирным. Если бы мы с вами сейчас писали не только на html, но и создавали CSS-файл, с которым перекликался наш файл, то могли бы управлять размерами, шрифтом и даже цветом всех заголовков на странице, не прописывая font style
, как мы это делали в примере. Хотя об этом тоже рановато.
Кстати, Title и H1 имеют свое влияние во время присваивания вашему сайту места в поисковой выдаче. Относиться к ним нужно с большим вниманием и не писать внутри лишь бы что. Они имеют отношение к . Помимо h1, существуют еще и h2, h3,h4.
В этой же строчке есть открывающийся и закрывающийся
— один из немногих единичных тегов. То есть он работает сам по себе. Благодаря этому элементы вы перепрыгиваете с одной строки, на другую. Проще говоря, делаете отступ. Написали его один раз, значит один раз переместились вниз, два, как у меня, и отступ получился чуть больше.
Картинка
Далее идет тег img , то есть image, картинка. Квадратная скобка открывается, в нее вписывается вся основная информация о изображении, только после этого она закрывается. Надо отметить, что img – это тег, а все остальные элементы кода, которые вписываются внутрь, это его атрибуты.
Первым делом идет alt , то есть описание. Это также необходимо для оптимизации. Иногда добавляется еще и title . При наведении на изображение мышью рядом с курсором появляется подсказка, когда страница уже открыта в браузере.
Можно было загрузить рисунок в папку сайта и прописать к ней путь, но я пошел простым путем. Среди на Pixabay я нашел картинку, открыл ее в новом окне и вставил ссылку.
В теге src прописывается путь к картинке. Именно он указывает браузеру, что дальше нужно двигаться, чтобы найти нужное изображение, а в каком направлении искать – пишете вы сами.
Форматирование текста
отвечает за придание части текста какого-то особого стиля, к примеру, как в нашем случае другого цвета. style=»color:red» показывает, что цвет будет красным. Если хотите желтый, напишите yellow, зеленый – green. Можно пользоваться кодами цветов из фотошопа.
помогает выделить текст жирным.
рисует горизонтальную линию. Он одиночный и используется только в закрытом виде. Если вы напишете
несколько раз, то получите ровно столько же горизонтальных полос при открытии страницы в браузере.
Ссылки
указывает браузеру, что дальше будет ссылка. Вы хотите перенаправить читателя на другой адрес. Этот тег идет с обязательным атрибутом href=”адрес” . В кавычки вставляется путь, куда браузер должен перенести посетителя страницы. После того, как этот тег прописан, вставляется описание, слово или несколько, при нажатии на которое читателя будет переносить дальше. После того как эти условия выполнены, можно вставлять второй, закрывающийся тег .
После того как основная часть страницы написана, вы закрываете тег body , так как тело закончено. И указываете на то, что прекращаете на сегодня использовать html .
Если вы хотите больше узнать о тегах html и научиться вставлять не только картинки, но и видео, создавать кнопки, различные формы, списки, параграфы, то я могу предложить вам бесплатный курс Евгения Попова «Основы html ». Всего 33 урока помогут вам выйти на новый уровень.
Ещё хочу порекомендовать вам Видеокурс, который рассказывает, как верстаются сайты. Весь процесс показан на реальных примерах, что особенно хорошо. Курс предназначен как для новичков, которые ещё даже HTML не знают, так и для тех, кто уже хорошо знает и HTML, и CSS, однако, верстать сайты хорошо не умеет. Более полную информацию Вы можете получить, перейдя по ссылке: www.srs.myrusakov.ru/makeup
Помимо этого заберите Бесплатную книгу по созданию сайтов ! Эта книга рассчитана на начинающих, и вот там создаётся сайт ОТ и ДО. То есть готовится дизайн, затем верстаются страницы, пишется программная часть, а после сайт размещается в Интернете. Автор тщательно всё комментирует, а в книге очень много скриншотов и иллюстраций. Причём особенностью книги является то, что создаётся не какой-то абстрактный сайт, а вполне реальный и существующий в Интернете.
Сегодня вы сделали много, ведь первый шаг самый сложный.
Подписывайтесь на рассылку и группу ВКонтакте , и узнавайте еще: как и зачем нужен движок сайта, что такое блочная верстка и модульная сетка, как правильно писать сайты и многое другое.
До новых встреч и удачи!
Практическое руководство по HTML
© Николай Чувахин, 1997
Глава 2. Наш первый HTML-документ
Как устроен HTML-документ
HTML-документ - это просто текстовый файл с расширением *.htm (Unix-системы могут содержать файлы с расширением *.html). Вот самый простой HTML-документ:
Привет!
Это простейший пример HTML-документа.
Этот *.htm-файл может быть одновременно открыт и в Notepad, и в Netscape. Сохранив изменения в Notepad, просто нажмите кнопку Reload ("перезагрузить") в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе.
Для удобства чтения я ввел дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому наш пример вполне мог бы выглядеть и вот так:
Привет!
Это простейший пример HTML-документа.
Этот *.htm-файл может быть одновременно открыт и в Notepad, и в Netscape. Сохранив изменения в Notepad, просто нажмите кнопку Reload ("перезагрузить") в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе.
Как видно из примера, вся информация о
форматировании документа сосредоточена в его
фрагментах, заключенных между знаками "<" и
">". Такой фрагмент (например, )
называется меткой (по-английски - tag, читается
"тэг"). Большинство HTML-меток - парные, то
есть на каждую открывающую метку вида
Обязательные метки
...
Метка должна открывать HTML-документ. Аналогично, метка должна завершать HTML-документ.
...
Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки
Все, что находится между метками
...
Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа.
...
- ...
Метки вида (где i -
цифра от 1 до 6) описывают заголовки шести
различных уровней. Заголовок первого уровня -
самый крупный, шестого уровня, естественно -
самый мелкий.
Такая пара меток описывает абзац. Все,
что заключено между ,
воспринимается как один абзац. Метки и
Могут содержать дополнительный
атрибут ALIGN (читается "элайн", от
английского "выравнивать"), например:
Выравнивание заголовка по центру
Образец абзаца с выравниванием по правому краю
Подытожим все, что мы знаем, с помощью примера 2:
Привет!
Это чуть более сложный пример HTML-документа
Теперь мы знаем, что абзац можно выравнивать не только влево,
но и по центру
или по правому краю.
С этого момента Вы знаете достаточно, чтобы создавать простые HTML-документы самостоятельно от начала до конца. В следующем разделе мы поговорим, как можно улучшить наш простой HTML-документ. Начнем с малого - с абзаца.
Разработка Web-сайтов с использованием языка разметки гипертекста HTML
Web-страницы и Web-сайты
Web-страницы. Web-страницы создаются с использованием языка разметки гипертекстовых документов HTML (Hyper Text Markup Language). В обычный текстовый документ вставляются управляющие символы - HTML-тэги, которые определяют вид Web-страницы при ее просмотре в браузере.
Основными достоинствами Web-страниц являются:
- малый информационный объем;
- возможность просмотра в различных операционных системах.
Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста самого редактора. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.
Создание Web-страниц с использованием HTML-тэгов требует больших усилий, времени и знания синтаксиса языка. Применение специальных инструментальных программных средств (Web-редакторов) делает работу по созданию Web-сайтов простой и эффективной. Процесс создания и редактирования страниц в Web-редакторах очень нагляден, так как производится в режиме WYSIWYG (от англ. "What You See Is What You Get" - "Что видишь, то и получишь").
Web-сайты. Публикации во Всемирной паутине реализуются в форме Web-сайтов, которые обычно содержат материал по определенной теме или проблеме. Государственные структуры и организации (правительство, дума, школа и т. д.) обычно создают официальные Web-сайты своих организаций, на которых размещают информацию о своей деятельности. Коммерческие фирмы на своих Web-сайтах размещают рекламу товаров или услуг и предлагают их приобрести в Интернет-магазине. Любой пользователь Интернета может создать свой тематический сайт, на котором может разместить информацию о своих разработках, увлечениях и т. д.
Как журнал состоит из печатных страниц, так и Web-сайт состоит из компьютерных Web-страниц. Сайт должен содержать систему гиперссылок, которая позволяет пользователю перемещаться по Web-страницам.
Прежде чем разместить свой Web-сайт на сервере в Интернете, его необходимо тщательно протестировать, так как потенциальными посетителями вашего сайта будут являться десятки миллионов пользователей Интернета.
Для публикации Web-сайта необходимо найти подходящее место на одном из серверов Интернета. Многие провайдеры предоставляют своим клиентам возможность бесплатного размещения Web-сайтов на своих серверах (бесплатный хостинг).
Контрольные вопросы
1. В чем заключается преимущество Web-страниц перед обычными текстовыми документами?
2. Каким образом Web-страницы объединяются в Web-сайты?
Структура Web-страницы
HTML-код страницы помещается внутрь контейнера . Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и отображаемое в браузере содержание.
Заголовок Web-страницы заключается в контейнер
и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для правильного отображения.Тэги заключаются в угловые скобки и могут быть одиночными или парными. Парные тэги содержат открывающий и закрывающий тег (такая пара тэгов называется контейнером ).
Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги могут записываться как прописными, так и строчными буквами.
Название страницы помещается в контейнер
Отображаемое в браузере содержание страницы помещается в контейнер
(рис. 6.26):<ТITLE>Компьютер
Компьютер и ПО
 |
| Рис. 6.26. Заготовка Web-страницы "Компьютер" |
Созданную Web-страницу необходимо сохранить в виде файла под именем index.htm. В качестве расширения файла Web-страницы можно также использовать html. Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке.
Необходимо различать имя файла index.htm, под которым Web-страница хранится в файловой системе, и имя Web-страницы (например, "Компьютер"), которое высвечивается в верхней строке окна браузера. Имя Web-страницы должно соответствовать ее содержанию, так как оно в первую очередь анализируется поисковыми системами.
Контрольные вопросы
1. Какие тэги (контейнеры) должны присутствовать в HTML-документе обязательно? Какова логическая структура Web-страницы?
6.10. Практическое задание. Создать заготовку Web-страницы "Компьютер" и просмотреть ее в браузере.
Форматирование текста на Web-странице
Пока наша страница выглядит не слишком привлекательно: мелкий шрифт черного цвета на белом фоне. С помощью тэгов молено задать различные параметры форматирования текста.
Заголовки. Размеры шрифтов заголовков задаются парами тэгов от <Н1> (самый крупный) до <Н6> (самый мелкий).
Шрифт. Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE="Arial"), атрибут SIZE - размер шрифта (например, SIZE=4).
Атрибут COLOR позволяет задавать цвет шрифта (например, C0L0R="blue"). Значение атрибута COLOR можно задать либо названием цвета (например, "red", "green", "blue" и т. д.), либо его шестнадцатеричным значением.
Шестнадцатеричное представление цвета использует RGB-формат "#RRGGBB", где две первые шестнадцатеричные цифры задают интенсивность красного (red), две следующие - интенсивность зеленого (green) и две последние - интенсивность синего (blue) цвета. Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная - FF. Например, синий цвет задается значением "#0000FF".
Выравнивание текста. Задать способ выравнивания текста позволяет атрибут ALIGN. Выравнивание по левой границе задается так: ALlGN="left", выравнивание по правой границе: ALIGN="right", выравнивание по центру: ALIGN= "center".
Таким-образом, синий цвет заголовка, выровненного по центру, можно задать следующим образом:
<Н1 ALIGN="center">Компьютер и ПО
Горизонтальная линия. Заголовки целесообразно отделять от остального содержания страницы горизонтальными линиями с помощью одиночного тэга
.
Абзацы. Разделение текста на абзацы производится с помощью контейнера <Р>. При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания и параметры форматирования шрифта.
Домашняя страница сайта. На домашней странице сайта обычно размещается текст, кратко описывающий его содержание. Поместим на домашнюю страницу сайта "Компьютер" текст, разбитый на абзацы с различным выравниванием:
<Р ALIGN="left">Ha этом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.
<Р ALIGN= "right">Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.
Таким образом, домашняя страница сайта "Компьютер" будет содержать отцентрированный крупный заголовок синего цвета, отделенный горизонтальной линией от двух по-разному выровненных абзацев (рис. 6.27):
<Н1 ALIGN="center">
Компьютер и ПО
<Р ALIGN="left">Ha этом сайте...
<Р ALIGN ="right"> Терминологический словарь
...
 |
| Рис. 6.27. Web-страница "Компьютер" с отформатированным текстом |
Контрольные вопросы
1. Какие тэги (контейнеры) используются для ввода заголовков? Форматирования шрифта? Ввода абзацев?
Задания для самостоятельного выполнения
6.11. Практическое задание. Создать Web-страницу "Компьютер" с отформатированным текстом и просмотреть ее в браузере.
Вставка изображений в Web-страницы
На Web-страницы можно помещать изображения, хранящиеся в графических файлах трех форматов - GIF, JPEG и PNG.
Вставка изображений.
Для вставки изображения используется тэг с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в той же папке, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла. Например:
Если файл находится в другой папке на данном локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в иерархической файловой системе. Например:
Если файл находится на удаленном сервере в Интернете, то должен быть указан Интернет-адрес этого файла. Например:
Положение рисунка относительно текста. Расположить рисунок относительно текста различным образом позволяет атрибут ALIGN, который может принимать пять различных значений: ТОР (верх), MIDDLE (середина), BOTTOM (низ), LEFT (слева) и RIGHT (справа).
На домашней странице сайта "Компьютер" логично разместить изображение компьютера. Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид (рис. 6.28):
 |
| Рис. 6.28. Вставка изображения в Web-страницу "Компьютер" |
Вставка альтернативного текста. Пользователи иногда, в целях экономии времени, отключают в браузере загрузку графических изображений и читают только тексты. Чтобы не терялся смысл страницы, вместо рисунка должен выводиться альтернативный текст.
Альтернативный текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:
Контрольные вопросы
1. Какой тэг и его атрибуты используются для вставки изображений в Web-страницы?
Задания для самостоятельного выполнения
6.12. Практическое задание. Вставить в Web-страницу "Компьютер" изображение и просмотреть ее в браузере.
Гиперссылки на Web-страницах
Если загружаемая в браузер Web-страница размещена на локальном компьютере в той же папке, то вместо адреса указывается просто имя файла, например:
Если загружаемая в браузер Web-страница размещена в Интернете, то в качестве адреса указывается Интернет-адрес, например:
<А HREF="http://www.server.ru/Web-сайт/ filename. htm">Указатель ссылки
Указатель ссылки мы видим при просмотре Web-страницы в браузере. Указателем ссылки может быть текст, обычно выделенный синим цветом и подчеркиванием, или рисунок, выделенный рамкой. При указании на него мышью, ее курсор превращается в значок "рука". Щелчок мышью по указателю вызывает переход на Web-страницу, указанную в гиперссылке.
- к просмотру изображения в браузере:
<А HREF="picture.jpg">Изображение - к запуску проигрывателя, встроенного в браузер и воспроизведению звукового файла:
<А HREF="sound.wav">Звук - к сохранению файла на локальном компьютере с использованием встроенного в браузер менеджера загрузки файлов:
<А HREF="Apxив.ziр">Скачать файл
Панель навигации по сайту. Создадим папку сайта "Компьютер" и добавим в сайт пустые страницы "Программы", "Словарь", "Комплектующие" и "Анкета". Сохраним их в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htm в папке сайта. Такие "пустые" страницы должны иметь заголовки, но могут пока не иметь содержания:
<ТITLЕ>Заголовок страницы
На домашней странице сайта разместим указатели гиперссылок на каждую страницу сайта. В качестве указателей гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход.
Разместим указатели гиперссылок внизу страницы в новом абзаце в одну строку, разделив их пробелами ( ). Такое размещение гиперссылок часто называют панелью навигации.
Вставим в домашнюю страницу сайта HTML-код, создающий панель навигации:
<Р ALIGN="center">
[<А HREF="software . htm">Программы]
[Словарь]
[Комплектующие]
[Aнкетa]
Гиперссылка на адрес электронной почты. Полезно на домашней странице сайта создать ссылку на адрес электронный почты, по которому посетители могут связаться с администрацией сайта. Для этого необходимо атрибуту ссылки HREF присвоить адрес электронной почты и вставить ее в контейнер
, который задает стиль абзаца, принятый для указания адреса:<А HREF="mailto:[email protected]">E-mail:
[email protected]
Теперь по щелчку по ссылке адреса электронной почты будет открываться почтовая программа Outlook Express (или другая используемая по умолчанию почтовая программа), где в строке Кому будет указан заданный в ссылке адрес.
Итак, созданная домашняя страница Web-сайта "Компьютер" содержит заголовок, изображение компьютера, два абзаца текста, панель навигации и ссылку на адрес электронной почты (рис. 6.29).
 |
| Рис. 6.29. Готовая домашняя страница сайта "Компьютер" |
Контрольные вопросы
1. Какой тэг и его атрибуты используются для создания гиперссылок?
Задания для самостоятельного выполнения
6.13. Практическое задание. Создать Web-страницу "Компьютер", содержащую панель гиперссылок на другие страницы сайта, и просмотреть ее в браузере.
Списки на Web-страницах
Довольно часто при размещении текста на Web-страницах удобно использовать списки в различных вариантах:
- нумерованные списки, когда элементы списка идентифицируются с помощью чисел;
- маркированные списки, когда элементы списка идентифицируются с помощью специальных символов (маркеров);
- списки определений, позволяющие составлять перечни определений в так называемой словарной форме.
Возможно создание и вложенных списков, причем вкладываемый список может по своему типу отличаться от основного.
Нумерованные списки. Нумерованный список располагается внутри контейнера
- можно задать тип нумерации: арабские цифры (по умолчанию), "I" (римские цифры), "а" (строчные буквы) и ДР.:
- и определений, которые следуют за одинарными тэгами
- .
Web-страницу "Словарь" мы представим в виде словаря компьютерных терминов (рис. 6.31):
- Центральное устройство компьютера, производящее обработку информации в двоичном коде.
Оперативная память
- Устройство, в котором хранятся программы и данные.
- Устройство, в котором хранятся программы и данные.
Процессор
Контрольные вопросы
1. Какие тэги используются для создания нумерованных списков? Маркированных списков?
Задания для самостоятельного выполнения
6.14. Практическое задание. Создать Web-страницу "Программы" с нумерованным списком и вложенным маркированным списком.
6.15. Практическое задание. Создать Web-страницу "Словарь" со списком терминов.
Транскрипт
1 1 Практикум «Создание Web-сайта Компьютер» Web-сайт состоит из Web-страниц, объединенных гиперссылками. Web-страницы могут быть интерактивными и могут содержать мультимедийные и динамические объекты. Задание 1. Создание структуры Web-страницы. Приступим к созданию титульной Web-страницы сайта. Для этого используем привычный и достаточно удобный для этих целей текстовый редактор Блокнот. Открыть окно текстового редактора Блокнот. Вид Web-страницы задается тэгами, которые заключаются в угловые скобки. Тэги могут быть одиночными или парными, для которых обязательно наличие открывающего и закрывающего тэгов (такая пара тегов называется контейнером). Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги могут записываться как прописными, так и строчными буквами. HTML код страницы помещается внутрь контейнера . Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и содержание. Заголовок Web-страницы заключается в контейнер
и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для ее правильного отображения. Название Web-страницы содержится в контейнереи отображается при ее просмотре в строке заголовка браузера. Назовем нашу Web-страницу Компьютер: <ТIТLE>Компьютер Основное содержание страницы помещается в контейнер и может включать текст, таблицы, бегущие cтроки, ссылки на графические изображения и звуковые файлы и т.д. Поместим для начала на страницу текст Все о компьютере: Все о компьютере Созданную Web-страницу необходимо сохранить в виде файла. Принято называть титульный файл сайта, т.е. тот который первый загружается в браузер, именем index.htm. В качестве расширения файла Web-страницы можно также использовать html. Рекомендуется создать для размещения сайта специальную папку и сохранять все файлы разрабатываемого сайта в этой папке. Необходимо различать имя файла index.htm, т.е. имя под которым Web-страница хранится в файловой системе, и собственно имя Web-страницы Компьютер, которая высвечивается в верхней строке окна браузера и, в первую очередь анализируется поисковыми системами. Имя Web-страниць должно в максимальной степени соответствовать ее содержанию. В окне приложения Блокнот ввести HTML код Web-страницы. Сохранить файл под именем index.htm в папку сайта. Загрузить этот файл в окно браузера для просмотра. Компьютер Все о компьютере
2 Задание 2. Форматирование текста. Пока страница выглядит не слишком привлекательно. Мелкий шрифт, черный текст на белом фоне почти не обращают на себя внимание. С помощью HTML тэгов можно задать различные параметры форматирования текста. Размер шрифта для имеющихся в тексте заголовков задается тэгами от <Н1> (самый крупный) до <Н6> (самый мелкий). Заголовок страницы целесообразно выделить самым крупным шрифтом: <Н1>Все о компьютере Некоторые тэги имеют атрибуты, которые могут принимать определенные значения. Так, заголовок по умолчанию выровнен по левому краю страницы, однако заголовок принято размещать по центру. Задать тип выравнивания заголовка для тэга заголовка позволяет атрибут ALIGN, которому требуется присвоить определенное значение. Выравнивание по правой границе окна реализуется с помощью ALIGN="right", а по центру ALIGN="center". <Н1 ALIGN="center">Bce о компьютере С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE="Arial"), атрибут SIZE размер шрифта (например, SIZE=4), атрибут COLOR цвет шрифта (например, COLOR="blue"). Значение атрибута COLOR можно задать либо названием цвета (например, "red", "green", "blue" и т.д.), либо его шестнадцатеричным значением. Шестнадцатеричное представление цвета использует RGB формат "RRGGBB", где две первые шестнадцатеричные цифры задают интенсивность красного (red), две следующие интенсивность зеленого (green) и две последние интенсивность синего (blue) цветов. Минимальная интенсивность цвета задается шестнадцатеричным числом 00, а максимальная FF. Легко догадаться, что синему цвету будет соответствовать значение "#OOOOFF". Таким образом, задать синий цвет заголовка можно с помощью тэга FONT С атрибутом COLOR: FONT COLOR="blue">
Bce о компьютере
Заголовок целесообразно отделить от остального содержания страницы горизонтальной линией с помощью одиночного тэга
. Разделение текста на абзацы производится с помощью контейнера . При просмотре в браузере абзацы отделяются друг от друга интервалами. Для каждого абзаца можно задать определенный тип выравнивания. На титульной странице обычно размещается текст, кратко описывающий содержание сайта. Поместим на титульную страницу текст, разбитый на абзацы с различным выравниванием:<Р ALIGN="right"> Таким образом, если вставить в страницу определенную последовательность тэгов, то мы получим Web-страницу, содержащую отцентрированный заголовок синего цвета, выводимый крупным шрифтом и отделенный горизонтальной линией от остального текста. В окне приложения Блокнот в контейнер
вставьте последовательность тэгов и просмотрите результат в браузере. 2
3 3
Bce о компьютере
Ha этом сайта вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.
Tepминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету. Задание 3. Вставка изображений. На Web-страницы обычно помещают изображения, чтобы сделать их визуально более привлекательными. На Web-страницах могут размещаться графические файлы трех форматов GIF, JPG и BMP. Если рисунок сохранен в другом формате, то его необходимо предварительно преобразовать в один из выше указанных форматов с помощью графического редактора. Для этих целей можно использовать редактор Photo Editor, который входит в пакет Microsoft Office. На титульной странице создаваемого сайта уместно разместить изображение того объекта, которому посвящен сайт (в нашем случае компьютера). Многочисленные фотографии компьютеров можно найти, например, на сайтах производителей и продавцов компьютерной техники. Для вставки изображения используется тэг
с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в том же каталоге, что и файл Webстраницы, то в качестве значения атрибута SRC достаточно указать только имя файла:
Если файл находится в другом каталоге на данном локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в иерархической файловой системе. Например:
, который может принимать пять различных значений: TOP (верх), MIDDLE (середина), BOTTON (низ), LEFT (слева) и RIGHT (справа). Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид:
4 В окне приложения Блокнот в контейнер
вставьте перед абзацами текста тэг вставки изображения, просмотрите результат в браузере.Заголовок страницы</тitlе> </HEAD> <BODY> </BODY> </HTML> Создать пустые страницы Программы, Словарь, Комплектующие и Анкета. Сохранить их в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htm в каталоге сайта. Гиперссылка состоит из двух частей: указателя ссылки и адресной части ссылки. Указатель ссылки это то, что мы видим на Web-странице (текст или рисунок), обычно выделенный синим цветом и подчеркиванием. Активизация гиперссылки вызывает переход на другую страницу.</p> <span> <br><img src='https://i2.wp.com/docplayer.ru/docs-images/43/257732/images/page_4.jpg' align="left" width="100%" loading=lazy></span> <p>5 Адресная часть гиперссылки представляет собой URL-адрес документа, на который указывает ссылка. URL-адрес может быть абсолютным и относительным. Абсолютный URLадрес документа полностью определяет компьютер, каталог и файл, в котором располагается документ. Абсолютный адрес документа, находящегося на локальном компьютере, будет включать в себя путь к файлу и имя файла, например: С:/Web-сайт/filename.htm Абсолютный адрес документа, находящегося на удаленном компьютере в Интернете, будет включать имя сервера Интернета, путь к файлу и имя файла, например: Относительный URL-адрес указывает на местоположение документа относительно того, в котором находится указатель ссылки. При разработке сайта рекомендуется входящие в него Web-страницы связывать относительными ссылками. Это позволить не изменять адресную часть ссылок при перемещении Web-сайта в другой каталог локального компьютера или при его публикации в Интернете. Гиперссылка на Web-странице существует в форме указателя ссылки, щелчок по которому обеспечивает переход на Web-страницу, указанную в адресной части ссылки. Прежде всего, необходимо разместить на титульной странице тексты гиперссылок на каждую страницу сайта. Для представления гиперссылок удобнее всего выбрать названия страниц, на которые осуществляется переход. Разместим гиперссылки под введенным текстом, в новом абзаце, в одну строку, разделенные несколькими пробелами. Такое размещение гиперссылок часто называют панелью навигации. Панель навигации будет представлять собой абзац, выровненный по центру, в котором указатели гиперссылок разделены пробелами ( ): <Р ALIGN= "center"> [Программы] [Словарь] [Комплектующие] [Анкета] </Р> Теперь для каждой гиперссылки определим адрес перехода. Для этого используется контейнер гиперссылки с атрибутом HREF, значением которого является URL адрес документа на локальном компьютере или в Интернете. Контейнер должен содержать указатель гиперссылки: Указатель гиперссылки</а> Вставьте в титульную страницу код, создающий панель навигации: <P ALIGN="center"> [<A HREF="https://docplayer.rusoftware.htm">Программы] [Словарь] [Комплектующие] [Анкета] </P> Панель навигации на титульной странице создана, теперь активизация текста гиперссылок будет приводить к переходу на другие страницы сайта. 5</p> <span> <br><img src='https://i0.wp.com/docplayer.ru/docs-images/43/257732/images/page_5.jpg' align="left" width="100%" loading=lazy></span> <p><img src='https://i2.wp.com/docplayer.ru/docs-images/19/257732/images/6-0.png' width="100%" loading=lazy></p> <p>6 Задание 5. Списки на Web-страницах Довольно часто при размещении текста на Web-страницах удобно использовать списки, в различных вариантах: нумерованные списки, когда элементы списка идентифицируются с помощью чисел; маркированные списки (в HTML их принято называть ненумерованными), когда элементы списка идентифицируются с помощью специальных символов (маркеров); списки определений, позволяющие составлять перечни определений в так называемой словарной форме. Возможно создание и вложенных списков, причем вкладываемый список может по своему типу отличаться от основного. На странице Программы разместим информацию об основных типах программного обеспечения компьютера в форме вложенного списка. Сначала создадим основной нумерованный список основных категорий программного обеспечения. Список располагается внутри контейнера , а каждый элемент списка определяется тэгом <LI> <OL> можно задать тип нумерации: арабские цифры (по умолчанию), " I " (римские цифры), "а" (прописные буквы) и др. Откройте в Блокноте файл software.htm, введите заголовок Программное обеспечение и добавьте следующий HTML-код, задающий список: <OL> <LI>Системные программы <LI>Прикладные программы <LI>Системы программирования </OL> Создадим теперь вложенный ненумерованный список, для одного из элементов основного списка. Список располагается внутри контейнера <UL>, а каждый элемент списка определяется также тэгом <LI>. С помощью атрибута TYPE тэга <UL> можно задать вид маркера списка: "disc" (диск), "square" (квадрат) или "circle" (окружность). Добавьте HTML-код, задающий вложенный список для элемента <LI> Прикладные программы: <OL> <LI>СИСТЕМНЫЕ ПРОГРАММЫ <LI>ПРИКЛАДНЫЕ ПРОГРАММЫ <UL TYPE="SQUARE"> <LI > ТЕКСТОВЫЕ РЕДАКТОРЫ; <LI> ГРАФИЧЕСКИЕ РЕДАКТОРЫ; <LI>ЭЛЕКТРОННЫЕ ТАБЛИЦЫ; <LI>СИСТЕМЫ УПРАВЛЕНИЯ БАЗАМИ ДАННЫХ. </UL> <LI>СИСТЕМЫ ПРОГРАММИРОВАНИЯ </OL> 6 Cтраницу словарь мы представим в виде словаря компьютерных терминов. Для этого используем контейнер списка определений <DL></DL>. Внутри него текст оформляется в виде термина, который выделяется непарным тегом <DT> и определения, которое следует за тегом <DD>. Откройте в Блокноте файл glossary.htm, введите заголовок Компьютерные термины и добавьте следующий HTML-код, задающий список определений:</p> <span> <br><img src='https://i0.wp.com/docplayer.ru/docs-images/43/257732/images/page_6.jpg' align="left" width="100%" loading=lazy></span> <p><img src='https://i1.wp.com/docplayer.ru/docs-images/19/257732/images/7-0.png' width="100%" loading=lazy></p> <p>7 <DL> <DT>Процессор <DD>Центральное устройство компьютера, производящее обработку информации в двоичном коде <DT>Оперативная память <DD>Устройство, в котором хранятся программы и данные </DL> 7</p> <span> <br><img src='https://i1.wp.com/docplayer.ru/docs-images/43/257732/images/page_7.jpg' align="left" width="100%" loading=lazy></span> <br><h3></h3> <p>Руководство по использованию визуального редактора информационного наполнения сайта http://pzi.ru Пятигорского завода Импульс. Пятигорск 2011 Содержание 1 Интерфейс редактора... 3 2 Изменение размера редактора...4</p> <h3></h3> <h3></h3> <p>Оглавление Введение...1 1. Цель работы...1 2. Основные теоретические сведения...1 Структура HTML-документа...1 Элемент BODY...2 Начертание текста...2 Маркированные списки...3 Нумерованные списки...3 Форматирование</p> <h3></h3> <p>Модуль 1 «Основы компьютерной геометрии» Лекция 2 «Введение в HTML, HTML5 и CSS» к.ф.-м.н., доц. каф. ФН-11, Захаров Андрей Алексеевич, ауд.:930а(улк) моб.: 8-910-461-70-04, email: azaharov@bmstu.ru МГТУ</p> <h3></h3> <p>Краткое руководство по использованию Cистемы редактирования сайта Оглавление 1. Введение... 3 2. Знакомство с основными элементами системы редактирования... 4 3. Панель управления основными командами...</p> <h3></h3> <p>6. Графика Изображения Поддержка изображений в HTML - путь в мир графики. Создание и манипулирование изображениями, графическими форматами и другим графическим материалом не является частью HTML. Браузер</p> <h3></h3> <p>Лабораторная работа 5 Оформление текста в виде списков и колонок Создание списков В текстовых документах перечисления различного типа оформляются в виде списков. Существуют списки различных типов: нумерованные</p> <h3></h3> <p>ПРАКТИЧЕСКАЯ РАБОТА 1 Знакомство со структурой HTML-документа. Применение тегов логического и физического форматирования. Списки Цель: научить применять теги логического и физического форматирования при</p> <h3></h3> <p>ФГКОУ «Нахимовское военно-морское училище МО РФ» Инструкция по добавлению материалов на сайт Санкт-Петербург, 2015 Содержание 1. Вход в консоль CMS (авторизация на сайте) 4 2. Добавление записи 4 3. Ввод</p> <h3></h3> <p>Требования к оформлению материалов для системы дистанционного образования Санкт- Петербургского центра подготовки спасателей 3 Оглавление 1.Структура материалов 2. Оформление текста курса в документе Word...</p> <h3></h3> <p>Технология создания Web страниц электронного ресурса в Microsoft Office FrontPage 2003 Создание нового Web-узла Создайте папку, в которой предполагаете разместить разрабатываемые ЭУММ. Запустите программу</p> <h3></h3> <p>1 ДИНАМИЧЕСКОЕ WEB-ПРИЛОЖЕНИЕ 1. О языке HTML и технологии ASP.NET В этой работе Вы создадите динамическое Web-приложение. Ваше приложение должно быть установлено на сервере. У пользователей-клиентов,</p> <h3></h3> <p>1 WORD позволяет легко форматировать символы и абзацы. Встроенные программы проверки орфографии и грамматики проверяют документ не только после его завершения, но и в процессе создания. Существующие средства</p> <h3></h3> <p>1. Пояснительная записка. Рабочая программа по информатике и ИКТ составлена на основе: стандарта основного общего образования по информатике и ИКТ (приложение из приказа Министерства образования Российской</p> <h3></h3> <p>Федеральное государственное образовательное учреждение высшего профессионального образования "Южный федеральный университет" Островская И.В. ТЕСТОВЫЕ ЗАДАНИЯ НА ТЕМУ: ОПЕРАЦИОННАЯ СИСТЕМА WINDOWS Методические</p> <h3></h3> <p>Текстовый редактор Word 2007 ИНТЕРФЕЙС ПРОГРАММЫ Текстовый редактор (процессор) это универсальная прикладная программа, предназначенная для создания и обработки текстов с помощью компьютера, позволяющая</p> <h3></h3> <p>Создание электронной презентации в Microsoft PowerPoint 2003 Тема 1. Создание и сохранение презентации Задание: запустите программу Microsoft PowerPoint. Рассмотрите интерфейс и режимы работы. Создайте</p> <h3></h3> <p>Ставропольский государственный аграрный университет Кафедра информационных систем и технологий ЗАДАНИЕ И МЕТОДИЧЕСКИЕ УКАЗАНИЯ НА ПРАКТИЧЕСКОЕ ЗАНЯТИЕ по учебной дисциплине «Архитектура информационных</p> <h3></h3> <p>Глава 1 HTML и CSS Структура <a href="/yazyk-razmetki-giperteksta-html-sredstva-gipertekstovoi-razmetki-byl-vybran/">языка HTML</a> Структура HTML-документа Ввод и оформление текста Ссылки Форматирование текста Работа с таблицами Изображения Формы Общие принципы CSS Форматирование текста средствами</p> <h3></h3> <p>Текстовый процессор Word Word одна из самых совершенных программ в классе текстовых процессоров, которая предусматривает выполнение сотен операций над текстовой и графической информацией Word дает возможность</p> <h3></h3> <p>SiteBuilder. Конструктор сайтов Руководство пользователя Дата: 15.09.2011 г. Версия: 1.0 userdocs@activecloud.com www.activecloud.com Комментарии и сообщения об ошибках, пожалуйста, направляйте на userdocs@activecloud.com.</p> <h3></h3> <p>2 Текстовый процессор OpenOffice.org Writer Текстовый процессор (ТП) OpenOffice.org Writer входит в пакет программ Текстовый процессор Writer, предназначен для создания, редактирования и форматирования</p> <h3></h3> <p>EGroupWare. Новости. Общие сведения и назначение Новости служат для создания кратких тематических сообщений без рассылки их по электронной почте. Новости можно настроить для отображения на основном экране</p> <h3></h3> <h3></h3> <p>ПУБЛИКАЦИЯ СВОЕЙ ЗАМЕТКИ НА САЙТЕ ШКОЛЫ «АФИНЫ» Алексей Греков Частная школа «Афины», Киев, 2010 1. СОЗДАЕМ НОВУЮ ЗАМЕТКУ...2 2. ВСТАВЛЯЕМ КАРТИНКИ И ДРУГИЕ ГРАФИЧЕСКИЕ ОБЪЕКТЫ...3 3. СОХРАНЯЕМ ЗАМЕТКУ...4</p> <h3></h3> <p>Руководство по заполнению и просмотру Личного кабинета участника Содержание 1. Заполнение «Личного кабинета»... 2 2. Описание формы заполнения... 4 3. Работа в редакторе... 6 1. Заполнение «Личного кабинета»</p> <h3></h3> <p>Глава 7. Графика Поддержка изображений в HTML - путь в мир графики. Создание и манипулирование изображениями, графическими форматами и другим графическим материалом не является частью HTML. 7.1. Форматы</p> <h3></h3> <p>Язык программирования HTML 1. Вызовите текстовый редактор БЛOКНОТ, который находится в группе "Стандартные". Наберите следующий ниже текст и сохраните под именем web1.html в папку html_text, которую предварительно</p> <h3></h3> <p>Система управления сайтом Конструктор сайтов Вместе с доменным именем в зоне.рф вы получаете удобную и простую в управлении административную панель, позволяющую создавать и редактировать контент, изменять</p> <h3></h3> <p>ТОВАРИЩЕСТВО С ОГРАНИЧЕННОЙ ОТВЕТСТВЕННОСТЬЮ «BBS-IT» ИНФОРМАЦИОННО-ВЫЧИСЛИТЕЛЬНЫЙ ЦЕНТР Инструкция по работе с кабинетом пользователя диалоговой площадки «Народный контроль» Акмолинской области Руководство</p> <h3></h3> <p>Работа с редактором документов Word Краткие теоретические сведения Текстовый процессор (редактор) Word это приложение Windows, предназначенное для создания, просмотра, модификации и печати текстовых документов.</p> <h3></h3> <p>Проектирование блога на платформе blogger.com Краснодар - 2015 2 Проектирование блога на платформе blogger.com Оглавление Введение 3 Создание блога... 4 1.1 Создание аккаунта на Google.ru... 4 1.2 Создание</p> <h3></h3> <p>Описание практической работы 4 ОФОРМЛЕНИЕ САЙТА «ИННОВАЦИОННЫЕ ТЕХНОЛОГИИ, ТОВАРЫ И УСЛУГИ» С ПОМОЩЬЮ КАСКАДНЫХ СТИЛЕЙ (CSS) Время выполнения 4 часа. Цель работы: изучить принципы создания и использования</p> <h3></h3> <p>Лабораторная работа 1 Средство подготовки презентаций Microsoft Powerpoint. Быстрое создание презентации с помощью мастера автосодержания Цель работы: научиться создавать документы (слайды) для электронной</p> <h3></h3> <p>Лекция 2 Редактирование сайта 1 Добавление изображений на сайт... 1 Создание новых страниц... 4 Размещение страниц... 10 Добавление кнопок с пунктами меню... 12 Добавление изображений на сайт В режиме</p> <h3></h3> <p>Microsoft Office Word является популярнейшей прикладной программой для создания и обработки текстовых документов, которая обладает множеством возможностей настольной издательской системы по работе с текстами</p> <h3></h3> <p>Система электронных публикаций Программа просмотра Руководство пользователя Издательская фирма "Сентябрь", Москва, 2006-2008 Эта версия Руководства соответствует возможностям и функционалу Системы электронных</p> <h3></h3> <p>А.Н. Маслобоев Базовые возможности языка HTML по разработке и оформлению Web-страниц Учебно-методическое пособие Санкт-Петербург 2016 МИНИСТЕРСТВО ОБРАЗОВАНИЯ И НАУКИ РОССИЙСКОЙ ФЕДЕРАЦИИ ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ</p> <h3></h3> <p>РАБОТА 03 Основы HTML: работа с текстом Изучаемые вопросы 1. Передача данных и адресация в Интернете 2. Дескрипторы, использование пробелов и пустых строк, структура документа 3. Абзацы и заголовки 4.</p> <h3></h3> <p>ТЕХНОЛОГИЯ ПОДГОТОВКИ ТЕКСТОВЫХ ДОКУМЕНТОВ Текстовый процессор MS WORD MS WORD Microsoft Word основа любого офиса и, пожалуй, самая нужная и популярная программа во всем Microsoft Office. МНОГОФУНКЦИОННАЛЬНЫЙ</p> <h3></h3> <p>ФЕДЕРАЛЬНОЕ ГОСУДАРСТВЕННОЕ БЮДЖЕТНОЕ ОБРАЗОВАТЕЛЬНОЕ УЧРЕЖДЕНИЕ ВЫСШЕГО ПРОФЕССИОНАЛЬНОГО ОБРАЗОВАНИЯ «САНКТ-ПЕТЕРБУРГСКИЙ ГОСУДАРСТВЕННЫЙ УНИВЕРСИТЕТ КИНО И ТЕЛЕВИДЕНИЯ» Кафедра математики и информатики</p> <h3></h3> <p>UNIVERSITÉ NATIONALE DE RECHERCHE ÉCOLE SUPÉRIEURE D ÉCONOMIE DÉPARTEMENT DE LANGUES ÉTRANGÈRES CHAIRE DE LANGUE FRANÇAISE XI COLLOQUE INTERNATIONAL D ÉTUDIANTS ET DE JEUNES CHERCHEURS «LA FRANCE ET LA</p> <h3></h3> <p>ГБПОУ РА «Адыгейский педагогический колледж им.х. Андрухаева» Д.Х. Уджуху Создание сайта в Microsoft SharePoint Designer Лабораторные и практические работы Майкоп, 2015 1 Печатается по решению организационно-методической</p> <h3></h3> <p>Краткое руководство для администрирования сайта Работа с сайтом начинается с входа пользователя в административную часть сайта под своим логином и паролем. Пользовательская диалоговая страница доступна</p> <h3></h3> <p>Практическое занятие 12 Работа с текстовым редактором, вставка объектов по учебной дисциплине «Информатика и ИКТ» Тема: Понятие об информационных системах и автоматизации информационных процессов. Цель:</p> <h3></h3> <p>Плагины Форвард Тx SLNewsLine Программа для формирования в автоматическом режиме заданий для бегущей строки Дата выпуска: 18 ноября 2009 г. Краткое руководство СофтЛаб-НСК Содержание Введение... Общий</p> <h3></h3> <p>Введение Каскадные таблицы стилей, или Cascading Style Sheets (CSS), обеспечивают творческую свободу в разметке и дизайне веб-страниц. Пользуясь CSS, вы сможете украсить текст страниц привлекательными</p> <h3></h3> <p>Глава 10 Введение в CSS Следующие две главы посвящены замечательному и широко используемому средству HTML, значительно облегчающему реализацию единого стилевого оформления при разработке больших веб-сайтов,</p> <h3></h3> <p>ООО «РусТендер Софт» Документация Стр. 1 из 10 Система автоматизации процессов торгово- закупочной деятельности предприятия Конструктор документов Описание Версия описания: 1.0 Последнее обновление: 28.09.2014</p> <h3></h3> <p>Работа с табличным процессором Microsoft Excel Краткие теоретические сведения Приложение Windows Excel позволяет формировать и выводить на печать документы, представленные в табличном виде, выполнять расчеты</p> <h3></h3> <p>Лабораторная работа 1 Оформление официального документа. Цель работы: данная работа поможет вам приобрести элементарные навыки, связанные с вводом и редактированием текста. В процессе работы вы подготовите</p> <h3></h3> <p> Ñîäåðæàíèå Введение 13 Об этой книге 13 Глупые предположения 14 Компакт-диск 14 Обозначения, используемые в книге 15 Структура книги 16 Часть I. Создайте Web-страницу сегодня 16 Часть II. Создание страниц</p> <h3></h3> <p>Понятие абзаца Абзацем называют фрагмент текста от одного нажатия клавиши Enter до следующего. Абзацем также является фрагмент от начала документа до первого нажатия клавиши Enter. В ячейках таблицы абзацем</p> <h3></h3> <p>Тема: Практическая работа 14-2 Создание базы данных, состоящей из одной таблицы. Ввод данных в таблицу. Использование форм. Цель: Научиться создавать базы данных в MS Acces (создавать таблицы и формы,</p> <h3></h3> <p>Загрузка файлов на сайт По умолчанию все страницы на сайте создаются шаблоном веб-страница. В этом случае в нижней части страницы появляется строка Добавить файлы, с помощью которой можно загрузить на</p> <h3></h3> <p>1. ЦЕЛИ И ЗАДАЧИ ОСВОЕНИЯ ДИСЦИПЛИНЫ 1.1. Цели освоения дисциплины: приобретение знаний и представлений о смысле, целях и задачах гипертекстовых документов 1.. Задачи: дать студентам знания по теории гипертекстовых</p> <h3></h3> <p>Введение Дистанционное обучение современная форма организации образовательного процесса с применением дистанционных образовательных технологий. Его развитие в последнее время обусловлено ростом числа пользователей</p> <h3></h3> <p>Мастер-класс «Создание и оформление презентаций в PowerPoint» Стефанова Л. М., методист ГОУ РК «РЦО», учитель русского языка и литературы г. Сыктывкара Республики Коми 1. С чего начать составление презентации?</p> <p>Как известно, все великое всегда начинается с малого. Если вас заинтересовал ответ на вопрос как создать сайт через блокнот, то наверняка вы где-то слышали о такой возможности. Это, действительно, возможно. Но стоит сразу оговориться, что создавать современный динамический интерактивный сайт через блокнот в настоящее время скорее всего никто не будет, так как для этого существуют специальные программы, многократно ускоряющие и упрощающие процесс разработки. А вот создать полноценную веб-страницу вполне возможно.</p><b>Как создать сайт в блокноте </b><br>Для начала необходимо небольшое знакоство с теорией и общими терминами. Подавляющее большинство страниц сайтов представляют собой обычные текстовые документы, которые оформлены специальным образом – языком гипертекстовой разметкой сокращенно называемой HTML. Некоторые причисляют разметку HTML к языкам программирования, но это не верно.<p>HTML – это всего лишь способ стандартизации разметки документов, который однозначно интерпретируется браузерами для отображения на экранах компьютеров в удобной для пользователей форме. Основным инструментом языка HTML являются специальные структурные элементы, с помощью которых и оформляется документ. Их называют дескрипторами или тегами.</p><p>В общем виде тег представляет собой конструкцию вида <table> Таким образом, тег начинается знаком < после которого следует название тега table и вся конструкция завершается знаком >. Теги бывают парными как выделение текста <a href="/rabota-s-dokumentami-po-programme-vord-detalnyi-gid-po-ispolzovaniyu-microsoft-word-kak-vydelit/">жирным шрифтом</a> <b> и </b> и непарными как перевод строки <br>. В случае использования парных тегов обязательно использование как открывающегося тега <b>, так и закрывающегося </b>. Закрывающимся тегом является дескриптор со знаком косой черты /.</p><p>Рассмотрим основные виды тегов и их назначение.</p><ul><li><span><i>Элемент <b><!DOCTYPE html> </b>. </i> Устанавливается в самое начало страницы и служит для указания браузеру того, как интерпретировать <a href="/programmy-dlya-biznesa-programmy-dlya-biznesa-programma-dlya-vpechatyvaniya/">данный документ</a>. Является не обязательным, но очень желателен на странице для избежания <a href="/dvi-d-vga-perehodnik-rabotaet-perehodnik-dvi-d-vga-rasskazyvaem-ob/">возможных проблем</a> с ее отображением.<br></span></li><li><span><i>Тег <b><html> </b>. </i> Является парным тегом и состоит из двух частей <html> и </html>. Каждая страница сайта начинается с этого тега и заканчивается им.<br></span></li><li><span><i>Тег <b><head> </b>. </i> Также является парным тегом и состоит из двух частей <head> и </head>. Внутри данного тега размещается различная важная информация о странице: ее заголовок, ссылки на используемые стили оформления, подключаемые скрипты, специальные метаданные. <br></span></li><li><span><i>Тег <b><title> </b>. </i> <title> и и располагается внутри тега . Данный тег определяет заголовок страницы, с которым она будет видна в браузере. - Центральное устройство компьютера, производящее обработку информации в двоичном коде.
< LI >Системные программы
< LI >Прикладные программы
< LI >Системы программирования
Маркированные списки. Маркированный список располагается внутри контейнера , а каждый элемент списка определяется тэгом < LI >. С помощью атрибута TYPE тэга
- можно задать вид маркера списка: "disc" (диск), "square" (квадрат) или "circle" (окружность):
< LI >текстовые редакторы;
< LI >графические редакторы;
< LI >электронные таблицы;
< LI >системы управления базами- данных.
На Web-страницу "Программы" поместим нумерованный список, содержащий перечень основных типов программного обеспечения компьютера.
Во второй элемент основного нумерованного списка вставим вложенный маркированный список (рис. 6.30).
Список определений. Список определений располагается внутри контейнера
- /
- . Внутри него текст оформляется в виде терминов, которые выделяются одинарными тэгами
.
Относится к парным тегам и состоит из двух частей . С его помощью оформляется текстовый абзац.
,
,
,
,
,
. Относятся к парным тегам, так как состоят из двух тегов, например
и
. Данные теги служат для создания подзаголовков шести уровней и одновременно показывают важность заключенного в них текста относительно всего документа.
. Наберите внутри тега подзаголовок страницы.
Обо мне
Обо мне
Меня зовут Иванов Иван. Я создаю свой сайт.
Обо мне
Меня зовут Иванов Иван. Я создаю свой сайт.
. Впишите между тегами какой-либо текст.
Обо мне
Меня зовут Иванов Иван. Я создаю свой сайт.
Мои успехи
Обо мне
Меня зовут Иванов Иван. Я создаю свой сайт.
Мои успехи
и важнейший тег для создания ссылок . Применим их. Перед последним закрывающимся тегом впишите дескриптор
, а между
и конструкцию вида . У вас должно получится следующее.
Обо мне
Меня зовут Иванов Иван. Я создаю свой сайт.
Мои успехи
Освоен базовый синтаксис HTML и создана первая страница будущего сайта.
В процессе обучения использованы материалы сайта сайт
Обо мне
Меня зовут Иванов Иван. Я создаю свой сайт.
Мои успехи
Освоен базовый синтаксис HTML и создана первая страница будущего сайта.
В процессе обучения использованы материалы сайта сайт
Ссылка: сайт