Веб-разработка лабораторные работы. контрольные вопросы и скриншоты. Лабораторная работа (Текстовое оформление страниц) Задание

Название	Лабораторная работа (Текстовое оформление страниц) Задание
Анкор	Веб-разработка лабораторные работы
Дата	29.01.2023
Размер	2.61 Mb.
Формат файла
Имя файла	контрольные вопросы и скриншоты.docx
Тип	Лабораторная работа #910214

Установка и <a href="/ustanovka-i-nastrojka-veb-servera-apache/index.html" title="Установка и настройка веб-сервера Apache">настройка Веб сервера</a><img src="910214_html_367cd14456702fb1.png" name="ð ð¸ññð½ð¾ðº 1" align="bottom" hspace="1" width="623" height="294" border="0"/> <img src="910214_html_91c1c1678c8b340c.jpg" name="ð ð¸ññð½ð¾ðº 2" align="bottom" hspace="1" width="623" height="332" border="0"/> <img src="910214_html_8e8f2ae8926962f0.png" name="ð ð¸ññð½ð¾ðº 3" align="bottom" hspace="1" vspace="1" width="623" height="333" border="0"/> <img src="910214_html_dd6f21b57d9c3dd2.png" name="ð ð¸ññð½ð¾ðº 4" align="bottom" hspace="1" width="591" height="462" border="0"/> <img src="910214_html_2ae521fba725a1c6.png" name="ð ð¸ññð½ð¾ðº 5" align="bottom" hspace="1" width="623" height="332" border="0"/> <img src="910214_html_48501240da1e9515.png" name="ð ð¸ññð½ð¾ðº 6" align="bottom" hspace="1" vspace="1" width="623" height="333" border="0"/> Настройка WordPress <img src="910214_html_e7351093bf445f04.png" name="ð ð¸ññð½ð¾ðº 7" align="bottom" hspace="1" vspace="1" width="623" height="333" border="0"/> <img src="910214_html_83f99384679196a0.png" name="ð ð¸ññð½ð¾ðº 8" align="bottom" hspace="1" vspace="1" width="623" height="333" border="0"/> <img src="910214_html_9fd983503e5e2025.png" name="ð ð¸ññð½ð¾ðº 9" align="bottom" hspace="1" vspace="1" width="623" height="333" border="0"/> <img src="910214_html_6fe99a8a306b3d69.png" name="ð ð¸ññð½ð¾ðº 10" align="bottom" hspace="1" width="623" height="334" border="0"/> <img src="910214_html_9858c86beaba35d8.png" name="ð ð¸ññð½ð¾ðº 11" align="bottom" hspace="1" vspace="1" width="623" height="275" border="0"/> Пример работы (создание записи) <img src="910214_html_bfcb5c162fbc5a4a.png" name="ð ð¸ññð½ð¾ðº 12" align="bottom" hspace="1" width="623" height="334" border="0"/> <img src="910214_html_cb477a0895874dac.png" name="ð ð¸ññð½ð¾ðº 13" align="bottom" hspace="1" vspace="1" width="623" height="333" border="0"/> Лабораторная работа (Текстовое оформление страниц) Задание. Оформите текст, как показано ниже (для прорисовки между абзацами линии используйте тег <hr>, для правильного вывода <tag> на странице используйте конструкцию < tag > ) <table width="623" cellpadding="7" cellspacing="0"> <col width="609"> <tr> <td width="609" valign="top"> <html lang="en"> <body> <div align=justify>Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1986-1991 годах в стенах ЦЕРНа в Женеве в Швейцарии. HTML создавался как язык для обмена научной и технической документацией, пригодный для использования людьми, не являющимися специалистами в области вёрстки.</div> <hr> <div align=center>HTML успешно справлялся с проблемой сложности <strike>SGML</strike> путём определения небольшого набора структурных и семантических элементов – дескрипторов. Дескрипторы также часто называют «тегами». С помощью HTML можно легко создать относительно простой , но красиво оформленный <strike>документ</strike>.</div> <hr> <div align=right>Помимо упро<strike>ще</strike>ния структуры документа, в HTML внесена поддержка гипертекста. Мультимедийные возможности были добавлены позже. Изначально язык HTML был задуман и создан как средство структурирования и форматирования документов без их привязки к средствам воспроизведения (<strike>отображения</strike>).</div> <hr> <div align=left>В идеале, текст с разметкой HTML должен был без стилистических и структурных <strike>искажений</strike> воспроизводиться на оборудовании с различной технической оснащённостью (цветной экран современного компьютера, монохромный экран органайзера, ограниченный по размерам экран мобильного телефона или <strike>устройства</strike> и программы голосового воспроизведения текстов).</div> <hr> <div >Однако современное применение <strike>HTML</strike> очень далеко от его изначальной задачи. Например, тег ‹<strike>TABLE</strike>› предназначен для создания в документах таблиц, но часто используется и для оформления размещения элементов на странице. С течением времени основная идея платформонезависимости языка <strike>HTML</strike> была принесена в жертву современным потребностям в мультимедийном и графическом оформлении.</div> <h2>Словарь терминов</h2> <hr> <h2> A B C D E F</h2> <div>A</div> <div>‹A›</div> <div>Тег ‹a› является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег ‹a› устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.</div> <div>‹AREA›</div> <div>Каждый элемент ‹area› определяет активные области изображения, которые являются ссылками. Рисунок с привязанными к нему активными областями называется в совокупности картой-изображением. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой.</div> <div>В начало</div> <hr> <div>B</div> <div>‹B›</div> <div>Тег ‹b› устанавливает жирное начертание шрифта. Допустимо использовать этот тег совместно с другими тегами, которые определяют начертание текста.</div> <div>‹BODY›</div> <div>Элемент ‹body› предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера ‹body›. К <a href="/referat-po-discipline-vvedenie-v-professionalenuyu-deyatelenos-vsem1/index.html" title="Реферат по дисциплине «Введение в профессиональную деятельность» на тему «Строение искусственных нейронных сетей»">такой информации относится текст</a>, изображения, теги, скрипты JavaScript и т.д.</div> <div>Тег ‹body› также применяется для определения цветов ссылок и текста на веб-странице. Подобная практика в HTML 4 осуждается и взамен для указания цветовой схемы рекомендуется использовать стили, применяя их к селектору BODY.</div> <div>‹BR›</div> <div>Тег ‹br› устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега абзаца ‹p›, использование тега ‹br› не добавляет пустой отступ перед строкой. Если текст, в котором используется перевод строки, обтекает плавающий элемент, то с помощью атрибута clear тега ‹br› можно сделать так, чтобы следующая строка начиналась ниже элемента.</div> <div>В начало</div> <hr> <div>C</div> <div>‹CENTER›</div> <div>Тег ‹center› выравнивает содержимое контейнера по центру относительно родительского элемента.</div> <div>В начало</div> <hr> <div>D</div> <div>‹DIV›</div> <div>Элемент ‹div› является блочным элементом и предназначен для выделения фрагмента документа с целью изменения вида содержимого. Как правило, вид блока управляется с помощью стилей. Чтобы не описывать каждый раз стиль внутри тега, можно выделить стиль во внешнюю таблицу стилей, а для тега добавить атрибут class или id с именем селектора.</div> <div>В начало</div> <hr> <div>E</div> <div>‹EM›</div> <div>Тег ‹em› предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.</div> <div>В начало</div> <hr> <div>F</div> <div>‹FONT›</div> <div>‹font› представляет собой <a href="/oglavlenie-vvedenie-3-mediakontejneri-4-tipi-mediakontejnerov/index.html" title="Оглавление Введение 3 Медиаконтейнеры 4 Типы медиаконтейнеров 6 Контейнер avi. 6 Контейнер asf. 7 Контейнер Ogg и mkv 8 Контейнер Wcbm webM 10 Контейнер mp4 ">контейнер для изменения характеристик шрифта</a>, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей.</div> <div>В начало</div> <div> <ol> <li>Оглянись, дружок, вокруг!</li> <li>Вот компьютер – верный друг.</li> <li>Он всегда тебе поможет:</li> <li>Сложит, вычтет и умножит.</li> </ol> </div> <div> <ol type="i"> <li>Наверху машины всей</li> <li>Размещается дисплей.</li> <li>Словно смелый капитан!</li> <li>А на нем горит экран.</li> </ol> </div> <div> <ol type="a"> <li>Ну а рядом главный блок:</li> <li>Там бежит электроток</li> <li>К самым важным микросхемам.</li> <li>Этот блок зовут системным.</li> </ol> </div> <div> <ol type="i"> <li>Он считает, он считает,</li> <li>Сотни слов запоминает!</li> <li>Он мыслитель хоть куда!</li> <li>Только знаешь, в чем беда?</li> </ol> </div> <div> <ol start="5"> <li>Выключаешь, все забудет,</li> <li>Ничего он знать не будет –</li> <li>Прямо как Рассеянный</li> <li>С улицы Бассейной.</li> </ol> </div> <div> <ol type="i" start="4"> <li>Кто ж ему поможет? Вот,</li> <li>Познакомьтесь – дисковод!</li> <li>Коль с компьютером ты дружен –</li> <li>То и справочник не нужен!</li> </ol> </div> <div>Перейти на страницу №2</div> <div> <ul> <li>Поздравляю вас, друзья!</li> <li>Нынче весть услышал я:</li> <li>Твиттер русским стал, ей-богу!</li> </ul> </div> <div> <ul type="square"> <li>Если хочешь микроблогу</li> <li>Сделать русский интерфейс –</li> <li>Заходи в настройки смело</li> <li>И скорей берись за дело!</li> </ul> </div> <div> <ul type="circle"> <li>Измени язык и сервис</li> <li>Выдаст блогов разных кучу</li> <li>На великом, на могучем…</li> <li>Твиттер стал сегодня круче!</li> </ul> </div> <div> <ul> <li type="square">Не сказать ли тут «Ура!»?</li> <li>Мы теперь не лыком шиты,</li> <li type="square">Мы в струе, в тенденции.</li> <li type="circle">Вмиг расширить русский сектор –</li> <li>В нашей компетенции!</li> </ul> </div> <div>Перейти на страницу №1</div> <div > <img src="/lab-html-01/04/pic1.png" width=300 height=300 hspace=10 vspace=10 align=left></img> Этот рисунок находится слева и текст выравнивается по левой границе. Эффект достигается без таблицы. </div> <div > <img src="/lab-html-01/04/pic2.png" width=300 height=300 hspace=10 vspace=10 align=left></img> Этот рисунок находится слева и текст выравнивается по центру. Эффект достигается без таблицы. </div> <div > <img src="/lab-html-01/04/pic3.png" width=300 height=300 hspace=10 vspace=10 align=right></img> Этот рисунок находится справа и текст выравнивается по правой границе. Эффект достигается без таблицы. </div> <h2>1.1 Coздание таблицы</h2> <table border=2 align=center> <tr> <td colspan=2 align=center>Заголовок Таблицы.</td> </tr> <tr> <td align="center">Первая <a href="/elektronnie-tablici-excel-naznachenie-elektronnih-tablic/index.html" title="Электронные таблицы Excel Назначение электронных таблиц">ячейка первой строки</a></td> <td align="center">Вторая ячейка первой строки</td> </tr> <tr> <td align="center">Первая ячейка второй строки</td> <td align="center">Вторая ячейка второй строки</td> </tr> </table> <h2>1.2 Сложная таблица</h2> <table border=1 width="75%" align=center> <tr> <td width="66%" colspan=2> Две ячейки, объединенные по горизонтали </td> </tr> <tr> <td width="33%" rowspan=2 valign=middle>Две ячейки, объединенные по вертикали</td> <td width="33%">по левому краю</td> </tr> <tr> <td width="33%"> по правому краю </td> </tr> </table> <h2>1.3 Более сложная таблица</h2> <table width="50%" border="6" cellspacing="6" cellpadding="20" align="center" bordercolorlight="lime" bordercolordark="green" bgcolor="#dfffdf"> <thead bgcolor="Aqua"> <tr> <th colspan="3">УЧЕБНАЯ ТАБЛИЦА</th></tr> </thead> <tbody> <tr> <td width="33%">Это первая ячейка</td> <td width="33%">Это вторая ячейка</td> <td rowspan="3">А это три ячейки третьего столбца объединились в одну большую</td> </tr> <tr> <td colspan="2">Это единственная ячейка второй строки, <a href="/blok-a--zadanie-vopros/index.html" title="Блок а № Задание (вопрос)">объединяющая оба столбца</a></td> </tr> <tr> <td>Это первая ячейка третьей строки</td> <td width="33%">А это вторая ячейка третьей строки</td> </tr> </tbody> <tfoot bgcolor="yellow"> <tr> <td colspan="3" align="center"> конец </td> </tr> </tfoot> </table> <h2>1.4 Создание таблицы результатов чемпионата по хоккею</h2> <table align="center" bgcolor="yellow" width="84%"> <thead align="center"> <td colspan=10 cellpadding="5"> <div > ЧЕМПИОНАТ ГОРОДА ПО ХОККЕЮ </div> ТAБЛИЦА РЕЗУЛЬТАТОВ </td> </thead> <tr border="1"> <td bgcolor="grey" align="center" width="5%"></td> <td bgcolor="grey" align="left">Команда</td> <td bgcolor="grey" align="center" width="10%">1</td> <td bgcolor="grey" align="center" width="10%">2</td> <td bgcolor="grey" align="center" width="10%">3</td> <td bgcolor="grey" align="center" width="10%">4</td> <td bgcolor="grey" align="center" width="10%">5</td> <td bgcolor="grey" align="center" width="10%">6</td> <td bgcolor="grey" align="center" width="10%">Шайбы</td> <td bgcolor="grey" align="center">Очки</td> </tr> <tr border="1"> <td bgcolor="grey" align="center">1</td> <td bgcolor="grey" align="left">«POTOP»</td> <td bgcolor="#000" align="center"></td> <td bgcolor="#fff" align="center">6:4</td> <td bgcolor="#fff" align="center">2:3</td> <td bgcolor="#fff" align="center">7:3</td> <td bgcolor="#fff" align="center">2:1</td> <td bgcolor="#fff" align="center">0:0</td> <td bgcolor="green" align="center">17—11</td> <td bgcolor="red" align="center">7</td> </tr> <tr border="1"> <td bgcolor="grey" align="center">2</td> <td bgcolor="grey" align="left">«POTАТOP»</td> <td bgcolor="#fff" align="center">4:6</td> <td bgcolor="#000" align="center"></td> <td bgcolor="#fff" align="center">5:4</td> <td bgcolor="#fff" align="center">5:3</td> <td bgcolor="#fff" align="center">5:5</td> <td bgcolor="#fff" align="center">2:2</td> <td bgcolor="green" align="center">21—20</td> <td bgcolor="red" align="center">6</td> </tr> <tr border="1"> <td bgcolor="grey" align="center">3</td> <td bgcolor="grey" align="left">«УРОЖАЙ»</td> <td bgcolor="#fff" align="center">3:2</td> <td bgcolor="#fff" align="center">4:5</td> <td bgcolor="#000" align="center"></td> <td bgcolor="#fff" align="center">0:1</td> <td bgcolor="#fff" align="center">11:2</td> <td bgcolor="#fff" align="center">14:4</td> <td bgcolor="green" align="center">32—14</td> <td bgcolor="red" align="center">6</td> </tr> <tr border="1"> <td bgcolor="grey" align="center">4</td> <td bgcolor="grey" align="left">«МAЧТА»</td> <td bgcolor="#fff" align="center">3:7</td> <td bgcolor="#fff" align="center">3:5</td> <td bgcolor="#fff" align="center">1:0</td> <td bgcolor="#000" align="center"></td> <td bgcolor="#fff" align="center">1:1</td> <td bgcolor="#fff" align="center">10:0</td> <td bgcolor="green" align="center">18—13</td> <td bgcolor="red" align="center">5</td> </tr> <tr border="1"> <td bgcolor="grey" align="center">5</td> <td bgcolor="grey" align="left">«МЕЧТА»</td> <td bgcolor="#fff" align="center">1:2</td> <td bgcolor="#fff" align="center">5:5</td> <td bgcolor="#fff" align="center">2:11</td> <td bgcolor="#fff" align="center">1:1</td> <td bgcolor="#000" align="center"></td> <td bgcolor="#fff" align="center">8:3</td> <td bgcolor="green" align="center">17—22</td> <td bgcolor="red" align="center">4</td> </tr> <tr border="1"> <td bgcolor="grey" align="center">6</td> <td bgcolor="grey" align="left">«ОКАЗИЯ»</td> <td bgcolor="#fff" align="center">0:0</td> <td bgcolor="#fff" align="center">2:2</td> <td bgcolor="#fff" align="center">4:14</td> <td bgcolor="#fff" align="center">0:10</td> <td bgcolor="#fff" align="center">3:8</td> <td bgcolor="#000" align="center"></td> <td bgcolor="green" align="center">9—34</td> <td bgcolor="red" align="center">2</td> </tr> </table> <h2>Анкета пользователя</h2> Oтветьте, пожалуйста, на вопросы: <form> <div> <div> <label for="text">Ваше имя:</label> <input type="text" id="text" placeholder="Введите ваше имя"/> </div> <div> <label>Пол:</label> Мужчина <input type="radio" name="man"> Женщина <input type="radio" name="woman"> </div> <div> <label for="number">Детей</label> <input type="number" id="number" min="0" placeholder="Введите количество ваших детей"/> </div> <div> <label for="text">Страна</label> <input type="text" id="text" placeholder="Введите название страны"/> <div> <ul> <li>Россия <input type="checkbox" name="RU"></li> <li> Украина <input type="checkbox" name="UK"></li> </ul> </div> <div> <label for="message"> <ul> <li>Другая</li> </ul> </label> <textarea id="message" cols="30" rows="2" placeholder="Введите название страны ..." >

Электронный адрес:

Для подтверждения ввода нажмите на кнопку SUBMIT.

Для сброса введенных данных нажмите на кнопку RESET.

Первый параграф

Второй

Третий

Тень

Text