ГЛАВНАЯ Визы Виза в Грецию Виза в Грецию для россиян в 2016 году: нужна ли, как сделать

Создание html страницы в блокноте: разъяснения для чайников. Как сохранить веб-страницу

Как известно, все великое всегда начинается с малого. Если вас заинтересовал ответ на вопрос как создать сайт через блокнот, то наверняка вы где-то слышали о такой возможности. Это, действительно, возможно. Но стоит сразу оговориться, что создавать современный динамический интерактивный сайт через блокнот в настоящее время скорее всего никто не будет, так как для этого существуют специальные программы, многократно ускоряющие и упрощающие процесс разработки. А вот создать полноценную веб-страницу вполне возможно.

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

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

В общем виде тег представляет собой конструкцию вида

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

Рассмотрим основные виды тегов и их назначение.

Всего насчитывается около ста тегов, но рассмотренных десяти уже хватит для оформления простейшей страницы сайта в блокноте. Основные теги документа , , , <body> распределяются в строгом порядке. Внутри тега <body> остальные дескрипторы могут находится в различных порядках в пределах стандартов языка HTML. Проще всего это понять на примере создания простой веб-страницы.<ol><li><span>Запустите Блокнот и в самой первое его строке установите элемент <!DOCTYPE html>, подсказывающий браузеру как следует интерпретировать ваш документ.<p> <!DOCTYPE html></p></span></li><li><span>Сделайте перевод строки и добавьте парный тег <html>. Переведите закрывающийся тег </html> на две строки вниз.<p> <!DOCTYPE html><br><html></p></span></li><li><span>Добавьте парный тег <head> в строке между тегами <html> и переведите закрывающийся тег </head> на две строки вниз.<p> <!DOCTYPE html><br><html><br><head></p><p></head><br></html></p></span></li><li><span>В строке между тегами <head> и </head> напишите парный тег <title> в одну строку.






  • Введите заголовок вашей веб-страницы между тегами и . Например, такой.




    Моя первая страница сайта

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




    Моя первая страница сайта


  • Сделайте двойной перевод между внутри тегами и . В появившуюся строку впишите парный тег заголовка

    . Наберите внутри тега

    подзаголовок страницы.




    Моя первая страница сайта


    Обо мне



  • После закрывающегося тега заголовка сделайте перевод строки и в новой строке установите парные теги абзаца . Впишите между ними текст. Например, так.




    Моя первая страница сайта


    Обо мне


    Меня зовут Иванов Иван. Я создаю свой сайт.



  • Заключите имя и фамилию в парный тег для выделения их жирным шрифтом.




    Моя первая страница сайта


    Обо мне


    Меня зовут Иванов Иван. Я создаю свой сайт.



  • После закрывающегося тега абзаца

    выполните перевод строки и впишите в новой строке парный тег

    . Впишите между тегами какой-либо текст.




    Моя первая страница сайта


    Обо мне


    Меня зовут Иванов Иван. Я создаю свой сайт.


    Мои успехи



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




    Моя первая страница сайта


    Обо мне


    Меня зовут Иванов Иван. Я создаю свой сайт.


    Мои успехи




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

    конструкцию вида . У вас должно получится следующее.




    Моя первая страница сайта


    Обо мне


    Меня зовут Иванов Иван. Я создаю свой сайт.


    Мои успехи


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



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




    Моя первая страница сайта


    Обо мне


    Меня зовут Иванов Иван. Я создаю свой сайт.


    Мои успехи


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

    Ссылка: сайт



  • На этом создание простейшей страницы для сайта может быть завершено. В принципе, его можно было завершить еще и п.9, но если вы серьезно намерены изучать язык HTML, то дополнительная практика не будет лишней. Сохраните страницу с расширением *.html и можете открыть ее в любом браузере, чтобы просмотреть результаты своей работы. Если все сделано правильно, то вы должны увидеть примерно следующее.
    • Если после прочтения статьи решимость в создании сайта у вас не иссякла, то обязательно ознакомтесь с полным синтаксисом языка HTML, а также изучите использование каскадных стилей CSS для оформления страниц.

    Транскрипт

    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 достаточно указать только имя файла: Если файл находится в другом каталоге на данном локальном компьютере, то значением атрибута должно быть полное имя файла, включая путь к нему в иерархической файловой системе. Например: Если файл находится на удаленном сервере в Интернете, то должен быть указан URLадрес этого файла. Например: Расположить рисунок относительно текста различным образом позволяет атрибут ALIGN тэга , который может принимать пять различных значений: TOP (верх), MIDDLE (середина), BOTTON (низ), LEFT (слева) и RIGHT (справа). Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид:


    4 В окне приложения Блокнот в контейнер вставьте перед абзацами текста тэг вставки изображения, просмотрите результат в браузере. 4 Задание 4. Гиперссылки на Web-страницах Первая титульная страница должна обеспечивать посетителю Web-сайта возможность начать путешествие по сайту. Для этого на титульную страницу должны быть помещены гиперссылки на другие страницы сайта. Для создания гиперсвязей между титульной страницей и другими страницами сайта необходимо, прежде всего, создать заготовки Web-страниц. Такие пустые страницы должны иметь заголовок, но могут пока не иметь содержания. Все создаваемые страницы необходимо сохранить в виде файлов в папке сайта. Каждая страница будет содержать следующий HTML-код: Заголовок страницы</тitlе> </HEAD> <BODY> </BODY> </HTML> Создать пустые страницы Программы, Словарь, Комплектующие и Анкета. Сохранить их в файлах с именами software.htm, glossary.htm, hardware.htm и anketa.htm в каталоге сайта. Гиперссылка состоит из двух частей: указателя ссылки и адресной части ссылки. Указатель ссылки это то, что мы видим на Web-странице (текст или рисунок), обычно выделенный синим цветом и подчеркиванием. Активизация гиперссылки вызывает переход на другую страницу.</p> <span> <br><img src='https://i0.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://i1.wp.com/docplayer.ru/docs-images/43/257732/images/page_5.jpg' align="left" width="100%" loading=lazy></span> <p><img src='https://i0.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://i0.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://i2.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 Структура языка HTML Структура 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><b>Основы языка гипертекстовой разметки документов </b></p> <p>Публикации во Всемирной паутине реализуются в форме Web-сайтов. Web-сайт по своей структуре напоминает журнал, который содержит информацию, посвященную какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web-сайт состоит из Web-страниц.</p> <p>Обычно сайт имеет титульную страницу (страницу с оглавлением), на которой имеются гиперссылки на его основные разделы (Web-страницы). Гиперссылки также имеются на других Web-страницах сайта, что обеспечивает возможность пользователю свободно перемещаться по сайту.</p> <p>Web-сайты обычно являются мультимедийными, так как кроме текста могут содержать иллюстрации, анимацию, звуковую- и видеоинформацию.</p> <p>Создание Web-сайтов реализуется с использованием языка разметки гипертекстовых документов HTML. Технология HTML состоит в том, что в обычный текстовый документ вставляются <i>управляющие символы (тэги) </i> и в результате мы получаем Web-страницы в том виде, который задается тэгами.</p> <p>Основными достоинствами HTML-документов являются:</p> <p>· малый информационный объем;</p> <p>· возможность просмотра на персональных компьютерах, оснащенных различными операционными системами.</p> <p>Для создания Web-страниц используются простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.</p> <p>Рассмотрим, как создаются Web-сайты, на примере разработки тематического сайта «Компьютер». Сначала необходимо разработать проект сайта, то есть определить, какова будет их тематика и как они будут связаны между собой.</p> <p>Пусть наш сайт кроме титульной страницы «Компьютер» будет содержать:</p> <p>· страницу «Программы», содержащую классификацию программного обеспечения;</p> <p>· страницу «Словарь», содержащую словарь компьютерных терминов;</p> <p>· страницу «Комплектующие» с ценами на устройства компьютера;</p> <p>· страницу «Анкета», содержащую анкету для посетителей сайта.</p> <br><br><p><b>Форматирование текста и размещение графики </b></p> <p>1. Открыть окно текстового редактора Блокнот.</p> <p>Вид Web-страницы задается тэгами, которые заключаются в угловые скобки. Тэги могут быть одиночными или парными, для которых обязательно наличие открывающего и закрывающего тэгов (такая пара тэгов называется <i>контейнером </i>). Закрывающий тэг содержит прямой слэш (/) перед обозначением. Тэги могут обозначаться как прописными, так и строчными буквами.</p> <table border="1"><tr><td> Тэги и атрибуты </td> <td> Обозначения </td> </tr><tr><td> <HTML> </HTML> </td> <td> HTML-код страницы помещается внутрь данного контейнера без них браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и содержание. </td> </tr><tr><td> <HEAD> </HEAD> </td> <td> Заголовок Web-страницы заключается в данный контейнер и содержит название документа и справочную информацию о странице (например, тип кодировки), которая используется браузером для ее правильного отображения. </td> </tr><tr><td> <TITLE>

    Название Web-страницы содержится в данном контейнере и отражается в строке заголовка браузера при просмотре страницы.
    Основное содержание страницы помещается в данный контейнер и может включать текст, таблицы, бегущие строки, ссылки на графические изображения и так далее.
    Назовем нашу Web-страницу «Компьютер» и поместим для начала на страницу текст «Все о компьютере». Компьютер Все о компьютере
    Созданную Web-страницу сохранить в виде файла в своей папке. Принято сохранять титульный файл сайта, то есть тот, который первый загружается в браузер, под именем index.htm. Для этого в поле Имя файла вместо * набрать имя index, а после точки расширение txt заменит на htm или html. Значок файла будет содержать значок браузера Internet Explorer. Не закрывать.
    Загрузить файл index.htm в окно браузера для просмотра (для этого открыть файл с помощью программы Internet Explorer). Не закрывать. Для удобства работы можно окна уменьшить и расположить их рядом.
    Теперь научимся форматировать текст.

    		Размер шрифта задается с помощью данных тэгов (от

    (самый крупный) до

    (самый мелкий). Заголовок страницы целесообразно выделить самым крупным шрифтом. Компьютер

    Все о компьютере

    Отредактировать текст в Блокноте, сохранить и просмотреть в Internet Explorer, для этого не забудьте обновить окно командой Вид - Обновить. (данные команды повторяйте после каждого этапа редактирования)
    ALIGN Некоторые тэги имеют атрибуты, которые являются именами свойств и могут принимать определенные значения. Так, заголовок по умолчанию выровнен по левому краю страницы, однако принято заголовок размещать по центру. Задать тип выравнивания для тэга заголовка позволяет заданный атрибут, которому требуется присвоить определенное значение. Выравнивание по правой границе окна реализуется с помощью записи ALIGN=”right”, а по центру - ALIGN=”center ”. Компьютер

    Все о компьютере

    С помощью данного тэга и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста. Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE=”Arial”), атрибут SIZE – размер шрифта (например, SIZE=4), атрибут COLOR – цвет шрифта (например, COLOR=”blue”). Значение атрибута COLOR можно задать либо названием цвета (например, “red”, “green” и т.д.). либо его шестнадцатеричным значением. Шестнадцатеричное представление цвета использует RGB-формат “#RRGGBB”, где первые цифры задают интенсивность красного (red), две последние – интенсивность зеленого (green) и две последние - интенсивность синего (blue) цветов. Минимальная интенсивность цвета задается 16-ричным числом 00, максимальная – FF. Следовательно, синий цвет имеет код “#0000FF”. Зададим заголовку синий цвет. Компьютер

    Все о компьютере

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

    Все о компьютере

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

    Все о компьютере

    Вставим изображение компьютера в текст с правой стороны. На Web-страницах могут размещаться графические файлы трех форматов – GIF, JPG и PNG. Если рисунок сохранен в другом формате, его необходимо предварительно преобразовать в один из вышеуказанных форматов с помощью графического редактора (Photo Editor, Paint). Для вставки изображения используется указанный тэг с атрибутом SCR, который указывает на место хранения файла на локальном компьютере или в Интернете. Нужно указать путь файла. Иллюстрации на web-страницах стали неотъемлемым элементом дизайна. Однако пользователи иногда в целях экономии времени отключают в браузере загрузку графического файла и читают только тексты. Поэтому, чтобы не терялся смысл и функциональность страницы, вместо рисунка должен выводиться поясняющий текст с помощью атрибута ALT, поясняющий, что должен был бы увидеть пользователь на рисунке: . Для вставки рисунка с правой стороны текста тэг должен иметь следующий вид: Компьютер

    Все о компьютере

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

    Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.

    Можно найти рисунок компьютера в коллекции ClipArt, которую обычно используют в текстовом редакторе Word. Вставить его в текст word-ского документа, скопировать, затем вставить в документ графического редактора и сохранить в той же папке, что и Web-страница в формате GIF.

    В целом оценю время на базовое изучение html как 2-8 часов, остальное по желанию. Ну и, конечно же, время изучения зависит от заинтересованности. Рекомендую разбить на несколько дней по 20-30 минут.

    Вы готовы? Тогда поехали!

    Подключение к интернету для создания страницы на html нам НЕ нужно.

    Нам понадобится

    1) Выбираем текстовой редактор . На первое время достаточно Блокнота (Notepad) (в нём нам понадобится только команда Сохранить как )
    Если Вы сразу хотите начать программировать в специализированных текстовых редакторах, то обратите внимание на:
    1) для Windows
    NotePad++ (скачать или )
    Intype (скачать)

    2) для Mac и Linux
    Bluefish Editor (скачать)

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

    2) Любой интернет-браузер, например, Internet Explorer для Windows или Safari для Mac OS X и iOS. Да-да, можно также Mozilla , Google Chrome , Opera , Yandex и Mail браузеры и тд.

    Приступим к созданию страницы HTML

    1) создаём на рабочем столе папку html . Это мы сделаем для того, чтобы уроки были структурированы и содержались в одном месте.

    2) Создаём наш файл в текстовом редакторе, например в Блокноте (NotePad). Далее Сохранить как .

    Кодировку лучше выбирать UTF-8, затем выбрать все типы файлов и выбрать название файла с.html на конце, например index.html

    Выбираем в качестве директории (папки), куда сохранить, нашу html
    Нажимаем сохранить . Готово!

    Часто задают вопрос о том, что не видно расширения файла . Разберём по порядку

    Возможность видеть расширения файла может помочь в точном определении типа файла и даёт возможность вручную (при команде переименовать ) сменить не только расширение, но и следовательно тип файла (например, с txt на html)

    так НЕ должно выглядеть: photo, текстовой документ, game
    так Должно выглядеть: photo.jpg; текстовой документ.txt; game.exe

    Но если же у Вас всё-таки названия файлов выглядят как в первом варианте (БЕЗ, например, .txt ; jpg ; .exe в конце названия файлов), делаем следующее:

    Смотрим настройки файлов и папок:

    Для Win XP Открываем любую папку - Сервис (сверху в панели) - Свойства папки - Вид - Скрывать расширения для зарегистрированных файлов (снять галочку) - Применить

    Для Win 7 Открываем любую папку - Упорядочить - Параметры файлов и поиска -Вид - Скрывать расширения для зарегистрированных типов файлов (снять галочку) - Применить

    Для Mac OS Щёлкаем мышью по рабочему столу - Finder - Preferences (Настройки) - Advanced (Дополнительно) - выставить флажок в Show all file extensions (Показывать расширения всех файлов) - Применить

    3) вставляем в него Весь код (вместе с комментариями), указанный ниже:



    <br>


    Заголовок моей странички


    4) открываем файл. Можете выбрать другой браузер для открытия данного файла, для этого нажимаем правую кнопку мыши на нашем файле index.html - Открыть с помощью и выбираем какой-нибудь браузер из списка, например, Internet Explorer, Google Chrome, Mozilla, Яндекс Браузер и тд.

    В итоге, открыв Интернет-Браузером получившийся index.html , Вы должны увидеть страничку такого вида:


    Рисунок 1.

    На Рисунке 1 мы видим как в результате браузер отобразил Вашу страничку. Красным выделен текст следующих элементов:



    <br> Название Вашей первой странички <br>

    Заголовок моей странички

    Это моя первая web-страничка!

    В коде представленном снизу Вы сможете увидеть базовый минимум html-документа. Её нужно обязательно выучить и не путать местами открывающие и закрывающие теги.



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

    Тег title обозначает Название страницы. Это единственный тег, содержащийся в head , который отображается на странице. То, что вписать после открывающего и перед закрывающим тегом и будет Названием Вашей страницы в Интернете



    <br> Название страницы <br>


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


    <br> Название страницы <br>

    Любой заголовок


    Просто текст

    Текст в параграфе. Он будет писаться с новой строки и заканчиваться с закрывающим тегом


    Другой текст



    Почти все теги в HTML открывающие и закрывающие (исключение, например, тег img, который обозначает вставку изображеия).



    <br> Название страницы <br>



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



    <br>

    Хочу выделить текст жирным, а этот уже курсивом



    Мы намерено после слова жирным забыли закрывающий тег b. В итоге браузер вывел следующее

    Хочу выделить текст жирным, а этот уже курсивом

    Как видите, текст до конца будет выделяться жирным, а тот, что подразумевался курсивом, тот будет и жирным, и курсивом. Так что будьте внимательны!

    5) Если Вы хотите что-то подредактировать в Вашем файле index.html (а он теперь по умолчанию открывается только браузером), то тогда нажимаем правую кнопку мыши на нашем файле index.html - выбираем Открыть с помощью а из списка выбираем уже текстовой редактор, это будет либо Блокнот (в англ. Notepad) , либо установленный Вами другой текстовой редактор.

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

    Мои поздравления!
    Несложно же?)