Homework 2: Creating an Interactive Webpage with Forms, Tables, and Multimedia
Overview
This assignment will help you practice creating more dynamic and interactive webpages using HTML. You'll integrate forms for user input, tables for structured data presentation, and multimedia elements to enhance user engagement.
Objectives
- Implement and style HTML forms to collect user data effectively.
- Use tables to organize and display structured information clearly.
- Integrate multimedia elements like images, videos, and audio to enrich the webpage content.
Requirements
Part 1: HTML Form for User Feedback
- Create a User Feedback Form:
- Use the
<form> tag to structure your form, specifying action (you can set this to a placeholder URL like #) and method (use "post" for practice).
- Include input fields for user name (text type), email (email type), and feedback (textarea).
- Add options for user rating using radio buttons (e.g., 1 to 5 stars).
- Provide a submit button (
<input type="submit">).
- Organize the elements with
<fieldset> and describe each section with <legend>.
- Ensure each input field is paired with a
<label> for accessibility.
Part 2: Table Displaying Structured Information
- Create a Table:
- Use the
<table> element to build a table that might display a schedule, price list, or similar data.
- Include at least 3 columns and 4 rows, using
<tr>, <th>, and <td> tags appropriately.
- Apply the
colspan or rowspan attributes where necessary to demonstrate the ability to merge cells.
- Style the table with CSS (in a
<style> tag within your <head> or an external stylesheet) to improve its readability and visual appeal.
Part 3: Integrating Multimedia Elements
- Embed Multimedia:
- Insert at least one image using the
<img> tag, ensuring it has appropriate alt text.
- Embed a video and an audio clip using the
<video> and <audio> tags. Include controls and ensure you provide fallback content or messages for browsers that do not support media playback.
- Use responsive design techniques (like setting
max-width: 100%; and height: auto; for images and videos) to ensure multimedia elements display correctly on all devices.
Submission Guidelines
- Check your code: Ensure that your HTML is well-formed and validates against HTML5 standards.
- Comment your HTML: Provide comments to describe the purpose of different sections and elements.
- Prepare a zip file: Include all files related to the project in a single zip file. If external resources are referenced, ensure they are publicly accessible or included in the zip.
- Upload to the learning management system: Submit your assignment via the course's online portal.
- Deadline: Submit by the end of the next week following this lesson.
Evaluation Criteria
- Functionality: The form should be functional (the data need not actually be submitted anywhere), the table should be correctly formatted, and multimedia elements should load and play.
- Compliance with the Assignment Requirements: All parts of the assignment should be completed as described.
- Code Quality: The HTML should be clean, well-organized, and free of errors, with proper use of comments.
This comprehensive assignment will test your ability to combine various HTML elements to create a functional and visually appealing webpage. It’s an excellent opportunity to demonstrate your growing skills in web development!
Տնային աշխատանք 2. ձևաթղթերի, աղյուսակների և մուլտիմեդիայի միջոցով ինտերակտիվ կայքէջի ստեղծում
Ընդհանուր ակնարկ
Այս հանձնարարությունը կօգնի ձեզ վարժեցնել HTML-ի միջոցով ավելի դինամիկ և ինտերակտիվ վեբ էջեր ստեղծելը: Դուք կինտեգրեք օգտատերերի մուտքագրման ձևեր, կառուցվածքային տվյալների ներկայացման աղյուսակներ և մուլտիմեդիա տարրեր՝ օգտատերերի ներգրավվածությունը բարձրացնելու համար:
Նպատակներ
- Կիրառել և ոճավորել HTML ձևերը՝ օգտատերերի տվյալները արդյունավետ հավաքելու համար:
- Օգտագործեք աղյուսակներ՝ հստակորեն կազմակերպելու և ցուցադրելու կառուցվածքային տեղեկատվությունը:
- Ինտեգրեք մուլտիմեդիա տարրեր, ինչպիսիք են պատկերները, տեսանյութերը և աուդիոները՝ վեբ էջի բովանդակությունը հարստացնելու համար:
Պահանջներ
Մաս 1. HTML ձև Օգտագործողի հետադարձ կապի համար
- Ստեղծեք օգտվողի հետադարձ կապի ձև .
- Օգտագործեք
<form>պիտակը ձեր ձևը կառուցելու համար՝ նշելով action(սա կարող եք սահմանել տեղապահի URL-ի նման #) և method(օգտագործել «գրառումը» գործնականում):
- Ներառեք մուտքագրման դաշտերը օգտվողի անվան համար (տեքստի տեսակ), էլ. փոստի (էլ․ փոստի տեսակ) և հետադարձ կապի համար (textarea):
- Ավելացրեք օգտատերերի վարկանիշի ընտրանքներ՝ օգտագործելով ռադիո կոճակները (օրինակ՝ 1-ից 5 աստղ):
- Տրամադրեք ուղարկել կոճակը (
<input type="submit">):
- Կազմակերպեք տարրերը
<fieldset>և նկարագրեք յուրաքանչյուր բաժինը <legend>:
- Համոզվեք, որ մուտքագրման յուրաքանչյուր դաշտը զուգակցված է
<label>մատչելիության համար:
Մաս 2. Աղյուսակ, որը ցուցադրում է կառուցվածքային տեղեկատվություն
- Ստեղծեք աղյուսակ .
- Օգտագործեք
<table>տարրը՝ աղյուսակ ստեղծելու համար, որը կարող է ցուցադրել ժամանակացույց, գնացուցակ կամ նմանատիպ տվյալներ:
- Ներառեք առնվազն 3 սյունակ և 4 տող՝ օգտագործելով
<tr>, <th>, և <td>պիտակները:
- Կիրառեք
colspanկամ rowspanատրիբուտները, որտեղ անհրաժեշտ է, ցույց տալու բջիջները միաձուլելու ունակությունը:
- Ոճավորեք աղյուսակը CSS-ով (
<style>ձեր <head>կամ արտաքին ոճաթերթի պիտակով)՝ դրա ընթերցանությունը և տեսողական գրավչությունը բարելավելու համար:
Մաս 3. Մուլտիմեդիա տարրերի ինտեգրում
- Տեղադրել մուլտիմեդիա .
- Տեղադրեք առնվազն մեկ պատկեր՝ օգտագործելով թեգը
<img>՝ համոզվելով, որ այն ունի համապատասխան altտեքստ:
- Տեղադրեք տեսանյութ և աուդիո հոլովակ՝ օգտագործելով
<video>և <audio>պիտակները: Ներառեք հսկիչները և համոզվեք, որ տրամադրում եք հետադարձ բովանդակություն կամ հաղորդագրություններ բրաուզերների համար, որոնք չեն աջակցում մեդիա նվագարկումը:
- Օգտագործեք արձագանքող նախագծման տեխնիկա (օրինակ՝ կարգավորումներ
max-width: 100%;, height: auto;պատկերներ և տեսանյութեր)՝ ապահովելու համար, որ մուլտիմեդիա տարրերը ճիշտ ցուցադրվեն բոլոր սարքերում:
Ներկայացման ուղեցույցներ
- Ստուգեք ձեր կոդը . Համոզվեք, որ ձեր HTML-ը լավ ձևավորված է և վավերացված է HTML5 ստանդարտներին համապատասխան:
- Մեկնաբանեք ձեր HTML-ը : Տրամադրեք մեկնաբանություններ՝ նկարագրելու տարբեր բաժինների և տարրերի նպատակը:
- Պատրաստեք zip ֆայլ . ներառեք նախագծին առնչվող բոլոր ֆայլերը մեկ zip ֆայլում: Եթե ​​արտաքին ռեսուրսները հղում են կատարում, համոզվեք, որ դրանք հասանելի են հանրությանը կամ ներառված են zip-ում:
- Վերբեռնեք ուսուցման կառավարման համակարգ . Ներկայացրեք ձեր առաջադրանքը դասընթացի առցանց պորտալի միջոցով:
- Վերջնաժամկետ . Ներկայացրեք մինչև այս դասին հաջորդող հաջորդ շաբաթվա վերջ:
Գնահատման չափանիշներ
- Ֆունկցիոնալություն . Ձևը պետք է լինի ֆունկցիոնալ (տվյալներն իրականում որևէ տեղ չպետք է ներկայացվեն), աղյուսակը պետք է ճիշտ ձևաչափված լինի, և մուլտիմեդիա տարրերը պետք է բեռնվեն և նվագարկվեն:
- Համապատասխանություն առաջադրանքի պահանջներին . առաջադրանքի բոլոր մասերը պետք է ավարտվեն այնպես, ինչպես նկարագրված է:
- Կոդի որակ . HTML-ը պետք է լինի մաքուր, լավ կազմակերպված և առանց սխալների՝ մեկնաբանությունների պատշաճ օգտագործմամբ:
Այս համապարփակ հանձնարարությունը կփորձարկի ձեր կարողությունը՝ համատեղելու տարբեր HTML տարրեր՝ ֆունկցիոնալ և տեսողականորեն գրավիչ վեբ էջ ստեղծելու համար: Դա հիանալի հնարավորություն է ցուցադրելու ձեր աճող հմտությունները վեբ զարգացման գործում:
Домашнее задание 2. Создание интерактивной веб-страницы с формами, таблицами и мультимедиа.
Обзор
Это задание поможет вам попрактиковаться в создании более динамичных и интерактивных веб-страниц с использованием HTML. Вы интегрируете формы для ввода данных пользователем, таблицы для представления структурированных данных и мультимедийные элементы для повышения вовлеченности пользователей.
Цели
- Внедряйте и оформляйте HTML-формы для эффективного сбора пользовательских данных.
- Используйте таблицы для организации и четкого отображения структурированной информации.
- Интегрируйте мультимедийные элементы, такие как изображения, видео и аудио, чтобы обогатить содержимое веб-страницы.
Требования
Часть 1. HTML-форма для обратной связи с пользователем
- Создайте форму обратной связи с пользователем :
- Используйте
<form>тег, чтобы структурировать форму, указав action(вы можете установить URL-адрес-заполнитель, например #) и method(для практики используйте «post»).
- Включите поля ввода для имени пользователя (тип текста), электронной почты (тип электронной почты) и обратной связи (текстовое поле).
- Добавьте варианты рейтинга пользователей с помощью переключателей (например, от 1 до 5 звезд).
- Предоставьте кнопку отправки (
<input type="submit">).
- Организуйте элементы с помощью
<fieldset>и опишите каждый раздел с помощью <legend>.
- Убедитесь, что каждое поле ввода связано с значком
<label>доступности.
Часть 2. Таблица, отображающая структурированную информацию
- Создайте таблицу :
- Используйте этот
<table>элемент для создания таблицы, которая может отображать расписание, прайс-лист или аналогичные данные.
- Включите как минимум 3 столбца и 4 строки, используя соответствующие теги
<tr>, <th>и .<td>
- Примените атрибуты
colspanили rowspanтам, где необходимо, чтобы продемонстрировать возможность объединения ячеек.
- Оформите таблицу с помощью CSS (в
<style>теге внутри вашей <head>или внешней таблицы стилей), чтобы улучшить ее читабельность и визуальную привлекательность.
Часть 3. Интеграция мультимедийных элементов
- Вставить мультимедиа :
- Вставьте хотя бы одно изображение с помощью
<img>тега и убедитесь, что оно содержит соответствующий altтекст.
- Вставьте видео и аудиоклип с помощью тегов
<video>и <audio>. Включите элементы управления и убедитесь, что вы предоставляете резервный контент или сообщения для браузеров, которые не поддерживают воспроизведение мультимедиа.
- Используйте методы адаптивного дизайна (например, настройки
max-width: 100%;, height: auto;изображения и видео), чтобы обеспечить правильное отображение мультимедийных элементов на всех устройствах.
Рекомендации по подаче
- Проверьте свой код . Убедитесь, что ваш HTML-код правильно сформирован и соответствует стандартам HTML5.
- Прокомментируйте свой HTML-код : добавьте комментарии, описывающие назначение различных разделов и элементов.
- Подготовьте zip-файл . Включите все файлы, относящиеся к проекту, в один zip-файл. Если есть ссылки на внешние ресурсы, убедитесь, что они общедоступны или включены в zip-архив.
- Загрузите в систему управления обучением . Отправьте задание через онлайн-портал курса.
- Срок : отправьте до конца следующей недели после этого урока.
Критерии оценки
- Функциональность : форма должна быть функциональной (данные фактически не нужно никуда отправлять), таблица должна быть правильно отформатирована, а мультимедийные элементы должны загружаться и воспроизводиться.
- Соответствие требованиям задания : Все части задания должны быть выполнены, как описано.
- Качество кода : HTML-код должен быть чистым, хорошо организованным и не содержать ошибок, с правильным использованием комментариев.
Это комплексное задание проверит вашу способность комбинировать различные элементы HTML для создания функциональной и визуально привлекательной веб-страницы. Это отличная возможность продемонстрировать свои растущие навыки в веб-разработке!