Add to collection(s) Add to saved
  1. No category
Uploaded by Павел Дойков

Лабораторная номер 2 (1)

advertisement 
Государственный университет Молдовы
Департамент «информатики»
Дисциплина «HTML & CSS»
Лабораторная работа #1
Тема:
”Изображения. Карты изображений. Формы. Фреймы. Аудио и видео.”
Выполнил студент: IA2303
Дойков Павел
Преподаватель: Марин Генадий
Задания
Создайте папку с именем Lab2_ student_name, которая будет содержать: файл index.html (структура файла
будет такой же, как и в предыдущей лабораторной работе), папку HTML, Images, Audio и Video.
Задача 1.
С помощью тега img и атрибутов src, alt, title, width, height вставьте 3 изображения — два рядом (без рамки),
одинакового размера, и третье с рамкой, выровненные по центру. Расположите картинки по приведенной
ниже схеме с помощью таблиц (или другим известным способом).
Задача 2.
Используя необходимые HTML-теги, постройте следующую таблицу так, чтобы все картинки имели
одинаковую высоту и ширину.
Задание 3.
Создайте изображения-ссылки на фотографии детей в таблице (задача 2), чтобы при переходе по ссылке
отображались подробности о ребенке (картинка, где он учится, увлечения, любимые игрушки и т.д.).
Используйте ссылки на веб-страницы, созданные для каждого ребенка. Примечание. Вы можете создать
таблицу с другим содержимым (изображения и текст), но структура таблицы (строки и столбцы), должна
быть одинаковой.
Задача 4.
Используйте теги img, map и area и вставьте изображение-карту с небольшим описанием изображения.
Затем определите области на изображении с помощью атрибута shape (используйте 3 разных типа), при
доступе к которым открывается веб-страница с информацией об элементе в этой области.
Задание 5. Разработайте следующую форму с помощью HTML-тегов (для расположения элементов можно
использовать таблицы). В textarea можно ввести не более 1000 символов. Используйте атрибут pattern для
входных данных Nume, Prenume, Denumirea produs и Producătorul, ограничив ввод только букв. Поля,
отмеченные *, должны подлежать обязательному заполнению.
Задача 6.
Определите iframe, внутри которого вы вставляете карту с местоположением компании. Для этого
выполните следующие действия: a) заходим на maps.google.com и в строке поиска вводим местоположение:
страна, город и т.д. b) перейдите к опции Share на google.maps и выберите «share or embed map». c)
скопируйте сгенерированный код и вставьте его на веб-страницу index.html.
Задача 7.
Вставьте аудио- и видеофрагменты на веб-страницу. a) Используя теги audio и source, вставьте песню в 2-х
форматах (предварительно сохраненную в папке Audio) на веб-странице. Если у вас есть только файл .mp3,
вы можете конвертировать его в формат .ogg, используя конвертер, доступный в Интернете. Например:
http://audio.online-convert.com/. b) Используя теги video и source, вставьте на веб-страницу видеоряд в 2-х
форматах (предварительно сохраненный в папке Video). Если у вас есть только один формат видеофайла, вы
можете использовать конвертер: http://video.online-convert.com/.
Структура файлов и папок:
Код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
td{
vertical-align: top;
}
.tab{
width: 100%;
justify-content: center;
}
</style>
</head>
<body>
<!--Задание номер 1-->
<table
class="tab">
<tr align="center">
<td><img src="/img/images.jpg" alt="ent1" width="300px"
height="300px" title="enot1"></td>
<td ><img src="/img/noncler (1).jpg" alt="ent2" width="300px"
height="300px" title="enot2"></td>
</tr>
<tr align="center">
<td colspan="2"><img src="/img/noncler (3).jpg" alt="ent3"
width="300px" height="300px" title="enot3"></td>
</tr>
</table>
<hr>
<!--Задание номер 2 и 3-->
<table border="1px" style="border-collapse:collapse;">
<tr>
<th colspan="5">Date despre copiii colaboratorilor</th>
</tr>
<tr>
<th>Nume,Prenume</th>
<th>Adresa fizica</th>
<th>Numar copii minori</th>
<th>Prenume copil si anul de nastere</th>
<th>Poza copil</th>
</tr>
<tr>
<td rowspan="2">Ivanov Elena</td>
<td rowspan="2">Str. Codrilor 45, ap.56</td>
<td rowspan="2"> 2 </td>
<td>Elena, 2006</td>
<td><a href="childrenInfo/Elena.html"><img src="img/t-1.png"
height="100px" width="100px" alt="Elena"></a></td>
</tr>
<tr>
<td>Valeriu,2011</td>
<td><a href="childrenInfo/Valeriu.html"><img src="img/t-2.png"
height="100px" width="100px" alt="Valeriu"></a></td>
</tr>
<tr>
<td rowspan="3">Mihailov Marta</td>
<td rowspan="3">Str. Puskin 10,ap.45</td>
<td rowspan="3"> 3 </td>
<td>Ion, 2008</td>
<td><a href="childrenInfo/Ion.html"><img src="img/t-3.png"
height="100px" width="100px" alt="Ion"></a></td>
</tr>
<tr>
<td>Ecaterina,2010</td>
<td><a href="childrenInfo/Ecaterina.html"><img src="img/t-4.png"
height="100px" width="100px" alt="Ecaterina"></a></td>
</tr>
<tr>
<td>Valentin,2011</td>
<td><a href="childrenInfo/Valentin.html"><img src="img/t-5.png"
height="100px" width="100px" alt="Valentin"></a></td>
</tr>
<tr>
<td>Cliucnicov Magdalena</td>
<td>Str.Nucilor 34,ap. 22</td>
<td> 1 </td>
<td>Mariuta, 2012</td>
<td><a href="childrenInfo/Mariuta.html"><img src="img/t-6.png"
height="100px" width="100px" alt="Mariuta"></a></td>
</tr>
<tr>
<th colspan="2">Total numar copii</th>
<td colspan="3">6</td>
</tr>
</table>
<hr>
<!--Задание 4-->
<img src="img/amazonka.jpg" width="500px" height="500px" alt="Описание
изображения" usemap="#image-map">
<map name="image-map">
<!-- Область 1: Круглая область -->
<area shape="circle" coords="100,205,8" href="map-info/page1.html"
alt="Область 1">
<!-- Область 2: Прямоугольная область -->
<area shape="poly" coords="306,156,297,138,322,120,340,154,321,166"
href="map-info/page2.html" alt="Область 2">
<!-- Область 3: Полигон -->
<area shape="rect" coords="145,203,156,338" href="map-info/page3.html"
alt="Область 3">
</map>
<!--Задание 5-->
<hr>
<form method="post">
<table>
<tr>
<td valign="center" rowspan="2">
<fieldset>
<legend><b>Date personale</b></legend>
<table>
<tr>
<td align="left"><label
align="left"for="numele">*Numele: </label></td>
<td align="right"><input type="text" name="numele"
required><br></td>
</tr>
<tr>
<td align="left"><label for="prenumele">*Prenumele:
</label></td>
<td align="right"><input type="text" name="prenumele"
required><br></td>
</tr>
<tr>
<td align="left"><label for="E-mail">Email:
</label></td>
<td align="right"><input type="text" name="E-mail"
><br></td>
</tr>
<tr>
<td align="left"><label for="DataNasterii">*Data
nasterii</label></td>
<td align="right"><input type="date"
name="DataNasterii" required><br></td>
</tr>
<tr>
<td align="left"><label for="Sexul">Sexul:
</label></td>
<td align="center"><b>F</b><input type="radio"
name="Sexul" value="F" >
<b>M</b><input type="radio" name="Sexul"
value="M"><br></td>
</tr>
<tr>
<td align="left"><label for="Telefonul">Telefonul:
</label></td>
<td align="right"><input type="tel"
name="Telefonul"><br></td>
</tr>
<tr>
<td align="left"><label for="Raionul">Raionul:
</label></td>
<td align="center"><select name="Raionul" id="1">
<option value="Cahul">Cahul</option>
<option value="Comrat">Comrat</option>
<option value="Taraklia">Taraklia</option>
</select><br></td>
</tr>
<tr>
<td align="left"><label for="Studii">Studii:
</label></td>
<td align="center">Colegiu<input type="checkbox"
name="Studii" value="Colegiu"><br>
Licenta<input type="checkbox" name="Studii"
value="Licenta"><br>
Masterat<input type="checkbox" name="Studii"
value="Masterat"><br>
</td>
</tr>
<tr>
<td align="left"><label
for="Suplimentat">Suplimentar: </label></td>
<td align="right">
<textarea
name="Suplimentar"
placeholder="Type here ..."
cols="30"
rows="5"
maxlength="1000"
>
</textarea><br></td>
</tr>
</table>
</fieldset>
</td>
<td>
<fieldset>
<legend><b>Date despre produsul ales</b></legend>
<table style="border-collapse: collapse;">
<tr>
<td align="left">
<label for="produs" >*Denumirea produs:
</label>
</td>
<td align="right">
<input type="text" name="produs"
required><br>
</td>
</tr>
<tr>
<td align="left">
<label for="producatorul">*Producatorul:
</label>
</td>
<td align="right">
<input type="text" name="producatorul"
required><br>
</td>
</tr>
<tr>
<td align="left">
<label for="cantitatea" required>*Cantitatea
de produse: </label>
</td>
<td align="right">
<input type="text" name="cantitatea"
required><br>
</td>
</tr>
<tr>
<td>
<label for="color">*Color:</label>
</td>
<td>
<input
type="color"
name="color"
id="color"
required
><br><br>
</td>
</tr>
<tr>
<td align="left"><label for="Marimea">Marimea:
</label></td>
<td align="right"><input type="text"
name="Marimea" required></td>
</tr>
</table>
</fieldset>
</td>
</tr>
<tr>
<td style="vertical-align: top;">
<fieldset style="height: 168px;">
<legend><b>Date Bancare</b></legend>
<table
style="height: 100%; width: 100%;">
<tr>
<td>
*Card type:
</td>
<td>
<input type="radio" name="card" id="visa"
required>
<label for="visa"><b>Visa</b></label>
<input type="radio" name="card"
id="mastercard" required>
<label
for="mastercard"><b>MasterCard</b></label>
</td>
</tr>
<tr>
<td>
<label for="card_number">*Card
Number:</label>
</td>
<td>
<input type="text" name="card_number"
id="card_number" pattern="[1-9]+" required>
</td>
</tr>
<tr>
<td>
<label for="exp_date">*Expiration
Date:</label>
</td>
<td>
<input type="month" name="exp_date"
id="exp_date" required>
</td>
</tr>
</table>
</fieldset>
</td>
</tr>
<tr>
<td>
<button type="reset">Reset</button>
<button type="submit">Sumbit</button>
</td>
<td>*Required</td>
</tr>
</table>
<hr>
<!--Задание 6 -->
<div align="center">
<iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2720.0712658619823!2d2
8.820510775746214!3d47.01920612835609!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3
!1m2!1s0x40c97c2d03e2c6b1%3A0xd8e8b74ac8c3ef7b!2z0JzQvtC70LTQsNCy0YHQutC40Lkg0JPQ
vtGB0YPQtNCw0YDRgdGC0LLQtdC90L3Ri9C5INCj0L3QuNCy0LXRgNGB0LjRgtC10YI!5e0!3m2!1sru!
2s!4v1696189996773!5m2!1sru!2s" width="600" height="450" style="border:0;"
allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-whendowngrade"></iframe>
</div>
<hr>
<!--Задание 7 -->
<div align="center">
<audio controls>
<source src="audio/audio.ogg" type="audio/ogg">
<source src="audio/audio.mp3" type="audio/mpeg">
Your browser doesn't support the audio tag!
</audio>
<br>
<video controls>
<source src="video/someVideo.mp4" type="video/mp4">
<source src="video/someVideo.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
<hr>
</form>
</body>
</html>
Download
advertisement