|
Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология Образование Политология Производство Психология Стандартизация Технологии |
|
|
Архитектура Аудит Военная наука Иностранные языки Медицина Металлургия Метрология Образование Политология Производство Психология Стандартизация Технологии |
Определение функциональных разделов документаСтр 1 из 3Следующая ⇒
Оглавление World Wide Web и HTML.. 3 Назначение языка HTML.. 4 Теги HTML.. 5 Атрибуты тегов. 5 Комментарии. 5 Структура документа HTML.. 6 Задание. 6 Определение функциональных разделов документа. 8 Задание. 9 Гипертекстовые ссылки и якоря. 9 Задание. 10 Рисунки на Web-страницах. 11 Задание. 12 Управление стилем шрифта. 15 Задание. 16 Определение элементов фразы.. 16 Задание. 17 Создание списков. 18 Задание. 19 Задание. 20 Мультимедийные объекты в документе HTML.. 21 Задание. 21 Создание таблиц. 22 Задание. 23 Размещение нескольких документов на одной Web-странице. 24 Задание 1. 25 Полосы прокрутки фреймов. 27 Задание 2. 27 Как разместить свою страницу в интернете. 28 Что такое хостинг и где взять место под страницу. 28 Пара слов о платных хостерах. 29 Как закачать ваши файлы (картинки, html-документы и др.) на ваш сайт. Программы для закачки. 30 Где разместить свой сайт?. 31 Размещение страницы на Narod.yandex.ru. 34 Экскурсия на Яндекс. 35 Что такое narod.ru?. 36 Создание своей страницы.. 37 Правила такие: 38 ПРИЛОЖЕНИЕ 1 Основные теги. 44 ПРИЛОЖЕНИЕ 2 Таблица цветов. 48 ПРИЛОЖЕНИЕ 3 Что такое CGI, SSI….?. 50
World Wide Web и HTML Современный этап развития Интернета начался в начале 90-х годов с появлением нового протокола обмена информацией. Этот протокол называется HTTР (HyperText Transfer Protocol – протокол передачи гипертекста). Вместе с этим протоколом появилась и служба World Wide Web (часто также называемая WWW или просто Web), которая представляет собой обширную сеть серверов HTTP, передающих файлы через Интернет.
Язык HTML появился одновременно со службой World Wide Web и развивался вместе с ней, постепенно вбирая в себя новые черты, которые позволяли создавать всё более и более впечатляющие Web-страницы. Он является основой World Wide Web и одновременно причиной её широчайшей популярности. Смысл и назначение языка HTML можно понять, исходя из его названия. Гипертекст – это текст, в который встроены специальные коды, управляющие дополнительными элементами, такими как форматирование, иллюстрации, мультимедийные вставки и гиперссылки на другие документы. Под разметкой понимается вставка в текст этих кодов, определяющих то, как итоговый гипертекстовый документ должен отображаться специальной программой-броузером. Разметка может быть простой или сложной, но в любом случае исходный текст сохраняется в документе в неизменном виде. Но самое важное в этом описании – язык. HTML представляет собой компьютерный язык, в некотором смысле родственный языкам программирования. Он включает достаточно строгие правила, которые необходимо соблюдать, чтобы получить правильные результаты. HTML не является языком программирования. С его помощью создаются статичные документы, позволяющие пользователю только просматривать их содержимое. Для создания динамических страничек используются языки Java, JavaScript, PHP и др. Для создания HTML-страниц можно пользоваться любым текстовым редактором (например, Блокнотом), но существуют и специализированные программы. Пользоваться ими удобно, так как в большинстве своем они обладают функцией подсветки кода, что значительно облегчает ориентацию, а так же генерируют участки кода, что позволяет сократить время создания странички. Редакторы делятся на два типа: визуальные и невизуальные. Визуальные HTML-редакторы позволяют создавать документы даже без знания языка HTML по типу MS Word, но генерируют очень длинный, перегружающий страницу ненужными элементами HTML-код, который потом приходится корректировать. Стоит отметить, что некоторые визуальные редакторы вполне подходят для быстрого создания HTML-документов и при этом не сильно " мусорят". Невизуальные редакторы требуют знания HTML, но лишены недостатков визуальных редакторов. Это, как правило, небольшие программы, в большинстве бесплатные и их легко можно найти в Интернете. Жесткого стандарта HTML пока нет. Некоторые конструкции языка отображаются в разных броузерах по-разному, поэтому необходимо проверять все ваши странички не только в Internet Explorer, но так же и в Opera, Mozilla и других броузерах и при разном разрешении экрана, если вы хотите что бы у всех пользователей Интернета они отображались корректно.
Назначение языка HTML Несмотря на то, что Web-страницы появляются на экране компьютера в отформатированном виде, язык html не предназначен для форматирования документов, поскольку жёсткое задание оформления и точное позиционирование элементов текста на странице приводит к ограничениям, недопустимым в Интернете.
Может быть, текст появится на экране компьютера, работающего в системе Windows в окне одного из современных броузеров. Может быть, это будет текстовый броузер (неспособный отображать графику), работающий в системе MS-DOS. Возможно, текст документа вообще не будет отображаться на экране, а будет воспроизводиться вслух с помощью синтезатора речи. Для слепого пользователя документ может выводиться на специальное устройство шрифтом Брайля. В связи с необходимостью подготавливать документы для столь разнообразных устройств, язык HTML не предназначен для описания формата документа. Он служит для функциональной разметки документа, то есть позволяет определить назначение фрагментов текста. Например, если в тексте встречается заголовок, то код HTML просто указывает, что соответствующий фрагмент является заголовком. Получив такой код, программа просмотра (броузер) сама " решает", что ей делать с заголовком. Возможно, она отобразит его более крупным шрифтом, а, может быть, выровняет по центру экрана. Возможно, что синтезатор речи, воспроизводящий текст документа, использует код заголовка для того, чтобы повысить громкость и сделать необходимую интонационную паузу. Хотя, справедливости ради надо сказать, что HTML всё-таки имеет некоторые команды форматирования, но общий курс на разделение содержания и оформления документа выдерживается чётко. Теги HTML Теперь самое время наконец-то приступить и к самому языку HTML. Из определения понятно, что он служит для разметки текста. Для этой цели используются различные " дескрипторы" (tags) или в просторечье " теги". Коды языка HTML, с помощью которых выполняется разметка исходного текста, называются тегами. Тег –это набор символов. Каждый тег в языке HTML имеет специальное назначение. Регистр букв в названиях тегов не имеет значения, хотя общепринято использовать прописные буквы, чтобы теги отличались от обычного текста документа.
Некоторые теги дают разовый эффект в месте своего появления. В этом случае необходимости в закрывающем теге нет, и он не употребляется. Если по ошибке в теге указано ключевое слово, отсутствующее в языке HTML, то тег игнорируется целиком. При отображении документа в броузере сами теги не отображаются, но влияют на способ отображения документа.
Атрибуты тегов Открывающие теги часто могут содержать атрибуты, влияющие на эффект, создаваемый тегом. Атрибуты – это дополнительные ключевые слова, отделённые от ключевого слова тега и друг от друга пробелами. Некоторые атрибуты требуют указания значения атрибута. Это значение отделяется от ключевого слова знаком равенства (=). Значение атрибута должно заключаться в кавычки, но во многих случаях эти кавычки могут опускаться без какого-либо вреда. Закрывающие теги не содержат атрибуты. Комментарии В языках программирования общепринята возможность использования комментариев – текстовых строк, не являющихся частью программы, а служащих для пояснения. Язык HTML тоже имеет такую возможность. Комментарии в языке HTML начинаются со специального тега <! --. Следует обратить внимание на отсутствие закрывающей угловой скобки. Любой текст, идущий за этим тегом, рассматривается как комментарий и не отображается при просмотре документа. Заканчивают комментарий символами -->. Комментарий может содержать любые символы, кроме символа " больше" (> ), и, таким образом, не может включать в себя теги.
Структура документа HTML Документ HTML состоит из основного текста документа и тегов разметки, которые, как мы уже знаем, являются наборами обычных символов. Таким образом, документ HTML – это, по существу, обычный текстовый файл. Для его создания можно использовать любой текстовый редактор. Мы будем использовать редактор Блокнот.
Рис. 1 Структура документа HTML
Сам текст документа располагается в теле документа. Тело документа располагается между тегами < BODY> и < /BODY>, см. Рис. 1.
Четыре перечисленных парных тега определяют основную структуру документа HTML. Они встречаются (или их наличие подразумевается) во всех документах HTML.
На практике определить местоположение этих основных структурных тегов можно и при их отсутствии. Поэтому, если теги < HTML>, < HEAD> и < BODY>, а также соответствующие им закрывающие теги опущены, то программа - броузер может сама определить то место, где они должны были находиться. Тег < TITLE>, определяющий заголовок документа, считается обязательным, но и его пропуск не вызовет катастрофических последствий в современных броузерах. Но всё-таки при создании Web-страницы опускать все эти теги не рекомендуется, ведь заранее неизвестно, как поведёт себя конкретный броузер, установленный на компьютере читателя. Задание. Создадим простейший правильный документ HTML. Запускаем редактор Блокнот и вводим следующий текст, см. Рис. 2
Рис. 2 Простейший правильный документ
Рис. 3 Сохранение первого документа Открываем документ, при этом броузер выбирается исходя из того, что установлено на вашем компьютере, см. Рис. 4 и Рис. 5
Рис. 4 Документ, открытый с помощью Internet Explore
Рис. 5 Документ, открытый с помощью броузера Mozilla Firefox Для просмотра и редактирования кода напрямую из веб-страницы воспользуйтесь командой Вид – Просмотр кода, Рис. 6. Отредактированный код компьютер предложит сохранить.
Рис. 6 Как просмотреть код
Задание. Создайте по образцу текстовый документ и просмотрите его через броузер, Рис. 7 и Рис. 8.
Рис. 7 Документ в Блокноте.
Рис. 8 Просмотр с помощью броузера.
Рисунки на Web-страницах Иллюстрации играют важнейшую роль в оформлении Web-страниц. Сами рисунки хранятся в отдельных файлах вне документа HTML, но отображаются броузером внутри Web-страницы. Для размещения рисунков служит одиночный тег < IMG>. Этот тег всегда должен содержать обязательный атрибут SRC=, значение которого составляет адрес URL файла изображения, записанный в абсолютной или в относительной форме. При загрузке документа рисунок также загружается и отображается в том месте документа, где расположен тег < IMG>. Изображение переносится на Web-страницу с сохранением размера. Если при компоновке изображения необходимо его перемасштабировать, нужные размеры рисунка можно задать с помощью атрибутов WIDHT= (ширина) и HEIGT= (высота). Значения этих атрибутов определяют ширину и высоту изображения на Web-странице в пикселах. Используя иллюстрации в документах, мы вступаем на зыбкую почву. Во-первых, Web-страница может отображаться броузером, не имеющим средств для показа отображений. Во-вторых, пользователи часто отключают показ рисунков, чтобы ускорить приём документа и чтобы не тратить трафик. И в том, и в другом случае желательно дать возможность узнать, что же изображено на картинке, если её нельзя увидеть. Для этой цели используют альтернативный текст. Альтернативный текст – это, по сути, более или менее подробное описание изображения. Если броузер не может по той или иной причине показать рисунок, он вместо него выводит этот альтернативный текст. Альтернативный текст задаётся в теге < IMG> значением специального атрибута ALT=. Задание. Скопируйте в папку " Мои документы" рисунок " Будильник", находящийся по адресу Р: \ Студенты \ Кафедры \ Информационные технологии \ Для HTML. Создайте текстовый файл " Рисунок", Рис. 11:
Рис. 11 Для задания 4 Просмотрите страницу в броузере, Рис. 12:
Рис. 12 Просмотр страницы
Теперь добавляем текст – описание механизма будильника (папка HTML на диске Р: \) и альтернативный текст, Рис. 13:
Рис. 13 Добавление описания и альтернативного текста
Рис. 14 Всплывающая подсказка
Приятная особенность обозревателя Internet Explorer заключается в том, что он позволяет увидеть альтернативный текст и в том случае, когда рисунок отображается. При наведении указателя мыши на рисунок альтернативный текст отображается во всплывающем окне, Рис. 14.
Изображение переносится на Web-страницу с сохранением размера. Если при компоновке изображения необходимо его перемасштабировать, нужные размеры рисунка можно задать с помощью атрибутов WIDTH= (ширина) и HEIGHT (высота). Значения этих атрибутов определяют ширину и высоту изображения на Web-странице в пикселях. Подкорректируйте размер изображения, Рис. 15:
Рис. 15 Устанавливаем размер рисунка Теперь страница выглядит так, Рис. 16:
Рис. 16 Страница с изменённым размером рисунка
Изображение, как и текст, можно использовать в качестве ссылки. Для этого тег < IMG> должен быть помещён между тегами < А> и < /А>, определяющими ссылку. Изображение – ссылка отображается в синей рамке. При наведении на такой рисунок указатель принимает ту же форму, что и при наведении на текстовую ссылку. Этим приёмом на Web-страницах создают графические кнопки перехода.
Управление стилем шрифта Для задания размера, цвета и начертания шрифта служит тег < FONT>. Этот парный тег влияет на весь текст, заключенный между открывающим и закрывающим тегами. Тег < FONT> должен иметь хотя бы один из трех возможных атрибутов: SIZE=; COLOR=; FASE=. o Атрибут SIZE= задает размер шрифта, возможны 7 заданных параметров размера шрифта (от 1 до 7). Чем больше число, тем больше размер, по умолчанию – 3. o Атрибут COLOR= задает цвет шрифта, который может быть задан либо ключевым словом (например, RED), либо шестнадцатеричным значением в системе RGB (например, #FF0000 тоже красный). o Атрибут FASE= задает вид шрифта, этот атрибут лучше не использовать. Значением этого атрибута должно быть название одного из шрифтов, установленных на компьютере. Но для документа, размещённого в интернете, нельзя предсказать, какие шрифты доступны на компьютере пользователя.
Рис. 17 Стили шрифта
o Чтобы задать значения этих параметров для всего документа в целом, используют одиночный тег < BASEFONT>. Он содержит аналогичные атрибуты и задаёт значение вида, цвета и размера шрифта, используемое по умолчанию. o Специальная группа тегов служит для изменения начертания шрифта. Теги < B> и < /B> делают текст, заключенный между ними, полужирным. Теги < I> и < /I> задают курсивное начертание, < U> и < /U> подчёркивание, < S> и < /S> - вычёркивание текста. Задание. Создайте документ по образцу, Рис. 17 Просмотрите его в броузере, Рис. 18
Рис. 18 Просмотр задания
Определение элементов фразы Рассматриваемые здесь теги по своему эффекту напоминают теги, задающие оформление текста. Однако принципиальное различие заключается в том, что эти теги действительно описывают реальные свойства текста. Это означает, что текст может отображаться по-разному в разных броузерах, но какой то эффект гарантирован даже в том случае, когда по какой-либо причине нет возможности применить шрифтовые эффекты. Все эти теги парные и воздействуют на текст, который заключен между открывающим и закрывающим тегами. Закрывающий тег обязателен для каждого из открывающих тегов этой группы. 1. Тег < CITE> указывает, что соответствующий текст является цитатой из другого источника. Такой текст обычно изображается курсивом. 2. Так как язык HTML был создан людьми, связанными с компьютерами, целая группа тегов предназначена для представления текстов компьютерных программ и результатов взаимодействия пользователя с ними. Так, тег < CODE> указывает на исходный текст компьютерной программы. Тег < KBD> оформляет текст, который должен быть (или был) введён с помощью клавиатуры. Этими тегами принято размечать команды пользователя и названия клавиш. Тег < SAMP> заключат в себе текст, который является примером вывода компьютерной программы. Тег < VAR> служит для оформления названий программных переменных или выбранных пользователем параметров компьютерной команды. Текст, ограниченный любым из этих тегов, обычно изображается при выводе на экран моноширинным шрифтом. Кроме того, некоторые броузеры выводят текст, содержащийся между тегами < KBD> и < /KBD> , полужирным шрифтом. 3. Тег < EM> предназначен для выделения текста. Выделенный текст обычно изображается курсивом. Более сильное выделение обозначается тегом < STRONG>. Такой текст изображается полужирным шрифтом. Так как здесь используется смысловое выделение вместо чисто оформительского, рекомендуется использовать теги < EM> и < STRONG> вместо тегов < I> и < /I>, соответственно.
Задание. Создайте документ по образцу,
Рис. 19 Определение элементов фразы
Просмотрите его в броузере, Рис. 20
Рис. 20 Просмотр документа
Создание списков При работе с текстовыми процессорами обычно используют два типа списков – упорядоченные (нумерованные) и неупорядоченные (маркированные). Язык HTML позволяет создавать целых пять разных видов списков. Правда, из этих пяти видов списков два (списки меню и списки каталога) считаются устаревшими и практически не употребляются. Таким образом, в настоящее время используют три вида списков: упорядоченные, неупорядоченные, и списки определений. Упорядоченные и неупорядоченные списки создают примерно одинаковым образом. Список всегда располагается между открывающим и закрывающим тегами списка: < OL> и < /OL> в случае упорядоченного списка; < UL> и < /UL> в случае неупорядоченного. Внутри списка располагаются элементы списка. Их заключают между тегами < LI> и < /LI>, хотя в данном случае закрывающий тег может опускаться, так как в этом случае ясно, где он должен располагаться. Теги < OL>, < UL> и < LI> могут содержать атрибут TYPE=, значение которого указывает на способ пометки элементов списка. Упорядоченные списки можно нумеровать арабскими и римскими цифрами, латинскими буквами (как в верхнем, так и в нижнем регистре). Неупорядоченные списки помечаются маркерами в виде чёрного кружка (по умолчанию), белого кружка или квадратика. Списки могут быть вложенными. Кроме того, элементы списков могут содержать гиперссылки, а также теги, используемые для форматирования и для выделения элементов фразы. Задание. Создайте документ по образцу, Рис. 21. Просмотрите его в броузере.
Рис. 21 Фрагмент кода для создания списков
Просмотрите его в броузере. У вас должна получиться такая web-страница, Рис. 22:
Рис. 22 Готовая страница со списком.
Списки определений начинаются с тега < DL> и заканчиваются тегом < /DL>. Маркеры или нумерацию в этих списках не используют. Список состоит из определяемых терминов и соответствующих определений. Определяемые термины помечаются тегом < DT>, а определения - тегом < DD>. Закрывающие теги можно опускать. Предполагается, что определяемые термины и определения чередуются, хотя это и не требуется строго. Определения изображаются на экране с отступом от левого края. Задание. Создайте web-страницу, используя Рис. 23. Текст для этого задания вы можете взять по адресу P: \ Студенты\ Кафедры\ Информационные технологии\ Для HTML Рис. 23 Фрагмент кода для задания 2.
Рис. 24 Готовая страница для задания 2.
Задание. Создайте документ по образцу, Рис. 25. Видеоролик находится на диске Р:
Рис. 25 Внедрение видеофайла
Рис. 26 Просмотр странички с видеофайлом
Создание таблиц Таблица – это один из наиболее удобных способов представления больших объёмов данных. Язык HTML имеет богатейшие возможности по созданию разных видов таблиц. 1. Таблица в языке HTML начинается с тега < TABLE> и заканчивается закрывающим тегом < /TABLE>. Текст внутри таблицы должен быть заключен в специальные теги, определяющие элементы таблицы (заголовки, строки и ячейки). 2. Между тегами < TABLE> и < /TABLE> может один раз встретиться пара тегов < CAPTION> и < /CAPTION>, определяющая заголовок таблицы. Заголовок таблицы размещается непосредственно над таблицей (по умолчанию) или непосредственно под таблицей. 3. Далее следуют теги < TR> и < /TR>, определяющие строки таблицы. Закрывающий тег можно опускать, так как строка таблицы заканчивается перед началом следующей строки или вместе с таблицей. 4. Каждая строка таблицы состоит из ячеек. Ячейки помечаются либо тегами < TH>, содержащими заголовки столбцов и строк, либо тегами < TD>, содержащими обычные данные. Эти теги также являются парными, но закрывающие теги и здесь могут опускаться, так как это не вызывает разночтений. 5. Внутри ячеек могут содержаться любые данные и любые теги HTML, допустимые в разделе тела документа. Например, ячейка таблицы может содержать вложенную таблицу. Броузеры автоматически вычисляют размеры ячеек и всей таблицы, хотя эти свойства частично можно задать и при помощи атрибутов. 6. Из специфических атрибутов таблиц можно, например, указать атрибут BORDER=, который позволяет создавать рамку вокруг таблицы и вокруг отдельных ячеек. Значением этого атрибута является толщина внешней рамки в пикселях. 7. В задании, приведённом ниже, использованы и другие атрибуты, с помощью которых увеличены промежутки между ячейками и созданы ячейки увеличенной высоты. Задание. Создайте документ по образцу, см. Рис. 27 и Рис. 28
Рис. 27 Создание таблиц
Рис. 28 Готовая страница с таблицей
Задание 1. 1) Делим страницу на два столбца с помощью фрейма, Рис. 29:
Рис. 29 Страница с вертикальным разделением.
2) Рис. 30 Страница с горизонтальным разделением.
3) Добавляем документы во фреймы, Рис. 31 Добавление документов:
Рис. 31 Добавление документов
Получается так, Рис. 32:
Рис. 32 Просмотр страницы с документами во фреймах. Полосы прокрутки фреймов По умолчанию браузер отображает полосы прокрутки только в том случае, если данные не укладываются в размеры фрейма. Присвоив атрибуту SCROLLING значение yes/no, можно предписать браузеру всегда сохранять полосы прокрутки в скрытом состоянии, либо постоянно отображать их. Сокрытие полос прокрутки с одной стороны увеличивает размеры видимой области фрейма. С другой стороны - если данные не помещаются в окно, то они будут недоступны для пользователя.
Задание 2. Создание трех фреймов, Рис. 33иРис. 34:
Рис. 33 Разбивка страницы на три фрейма
Рис. 34 Просмотр страницы с тремя фреймами
Напутствие.
Вот и вся премудрость. Еще раз повторюсь, на сайте вашего хостера обязательно должен существовать раздел Помощь, где вы найдете все необходимые данные для того, чтобы зайти на свой сайт, используя FTP, а также, возможно, ответы на некоторые свои вопросы. Если вы пользуетесь платным хостером – никогда не стесняйтесь обратиться в службу поддержки, они обязаны быстро отреагировать на ваш призыв о помощи и помочь вам. Это еще одно ваше преимущество перед пользователями бесплатных хостингов, служба поддержки которых, как правило, перегружена, и может ответить стандартными, ничего не объясняющими, письмами на вопрос пользователя.
Где разместить свой сайт? В этой статье будут описываться серверы, предоставляющие только бесплатный хостинг, платные не вошли по понятным причинам. £ www.narod.ru - появился в начале 2000 года, предоставляет 20 Mb дискового пространства в виде www.ваше_имя.narod.ru. Нет поддержки CGI, SSI, Perl, однако дают гостевую книгу, форум, поиск по сайту, статистику посещений, доступ по FTP и электронную почту: ваше_имя@narod.ru. И самое главное для начинающих web-мастеров - позволяют создать сайт по уже готовым шаблонам, как они считают, за 60 секунд. Плюс они не вешают рекламу на ваш сайт. £ www.boom.ru - недавно открытый сервер, предлагает 50 Mb. Также не поддерживает CGI, SSI, Perl. £ www.newmail.ru - довольно известная почтовая служба, предоставляющая почтовый ящик ваше_имя@newmail.ru и место на сервере в виде www.ваше_имя.newmail.ru. На все это они дают 16 Mb. Имеется доступ по FTP. £ www.agava.ru - хорошо известный сервер. Дают 20 Mb, но если нужно больше, напишите письмо и вам дадут неограниченное пространство. Адрес вашего сайта будет выглядеть так: www. ваш_сайт.agava.ru. Есть поддержка наворотов и доступ по FTP. £ www.i-connect.ru Дают до 50 Mb под сайт и почту. Можно размещать скрипты, предварительно отправив его по почте администраторам сервера на проверку. £ www.serge.cc - Российский сервер, дающий минимум 50 Mb диского пространства, доступ по FTP, поддержку CGI, SSI, Perl. Однако за это нужно разместить их баннер на вашем сайте. £ www.hobby.ru - дают много места, но за это вешают баннер размером 468 на 60 пикселов.
Экскурсия на Яндекс По этому адресу можно " прогуляться" по Яндексу: узнать, где и как работают его сотрудники:
http: //ya-excursion.narod.ru/
Что такое narod.ru?
Создание своей страницы Так как мы будем работать на Яндексе, нам надо создать свой почтовый ящик.
После создания почтового ящика переходим на страницу http: //narod.yandex.ru/:
Заходим в мастерскую и загружаем созданные заранее Web-страницы.
Правила такие:
Заходим в Мастерскую:
Загружаем наши файлы на сайт:
Возвращаемся в Мастерскую в раздел Управление файлами:
Для изменения HTML-кода надо нажать на значок Редактировать:
Для просмотра своей страницы нажмите на саму страничку Index.html.
Итак, страница размещена в глобальной сети:
ПРИЛОЖЕНИЕ 1 Основные теги
Популярное:
|
Последнее изменение этой страницы: 2016-05-29; Просмотров: 893; Нарушение авторского права страницы
Основную часть этих файлов представляют собой Web-страницы – специальные файлы, написанные на языке HTML (HyperText Markup Language – язык разметки гипертекста). Web-страницы публикуются в Интернете путём размещения таких файлов на серверах HTTP (Web-узлах). Содержание Web-страниц может быть разным и посвящённым совершенно произвольным темам, но все они используют одну и ту же основу – язык HTML. Документы HTML обычно имеют расширение.HTM или HTML.
Так, например, когда мы форматируем текст с помощью текстового процессора Word, мы однозначно определяем, как должен выглядеть этот текст при печати на совершенно определённом принтере и на бумаге заданного формата. Когда документ размещён в интернете, невозможно предсказать, какой компьютер будет использован для его просмотра, да и будет ли вообще у этого компьютера монитор.
Как правило, один тег HTML воздействует только на часть документа, например, на абзац. В таких случаях используют парные теги: открывающий и закрывающий. Открывающий тег создаёт эффект, а закрывающий – прекращает его действие. Закрывающие теги начинаются с символа косой черты (/).
Все документы HTML имеют строго заданную структуру. Документ должен начинаться с тега < HTML> и заканчиваться соответствующим закрывающим тегом < /HTML>. Эта пара тегов сообщает браузеру, что перед ним действительно документ HTML.
Документ HTML состоит из раздела заголовков и тела документа, идущих именно в таком порядке. Раздел заголовком заключен между тегами < HEAD> < /HEAD> и содержит информацию о документе в целом. В частности, этот раздел должен содержать внутри себя теги < TITLE> и < /TITLE>, между которыми размещают " официальный" заголовок документа. Большинство броузеров, работающих в системе Windows, используют этот заголовок, чтобы заполнить строку заголовка окна броузера.
Сохраняем документ на диске Z, указывая необходимое расширение, см. Рис. 3: 
Просмотрите станицу, Рис. 14: 
Просмотрите его в броузере, Рис. 26: 
Мы уже говорили об ограниченных возможностях языка HTML по точному размещению текста на странице. Эти ограничения объяснимы и понятны, но профессиональные Web-дизайнеры мириться с этим не хотят. Таблицы – это именно то средство, с помощью которого они преодолевают естественные ограничения языка и достигают эффектных результатов.
Делим страницу на две строки, Рис. 30: 
