Html задание: Андроид в тени | htmlbook.ru — Программирование на Python и Objective-C в Mac OS

Содержание

Ваша первая HTML форма — Изучение веб-разработки

Первая статья в данной главе предоставит вам первый опыт создания веб-форм, в том числе проектирование простой формы, её реализацию с использованием HTML-элементов управления формой и других HTML-элементов, добавление стилей через CSS и описание того, как данные из формы отсылаются на сервер. Мы более подробно остановимся на каждой из этих подтем далее в статье.

Необходимые знания:	Базовое представление о компьютерах и базовое понимание HTML.
Цель:	Ознакомиться с веб-формами, узнать, для чего они используются, как их проектировать, и какие базовые HTML-элементы могут понадобиться в простых ситуациях.

Веб-формы являются одним из основных элементов взаимодействия между пользователем и сайтом или приложением. Формы позволяют пользователю ввести данные, которые затем отправляются на сервер для их дальнейшей обработки и хранения или используются на стороне клиента для обновления интерфейса (например, добавление нового элемента в список или открытие и закрытие элемента интерфейса).

Веб-формы — их также часто называют HTML-формы — состоят из одного или нескольких элементов управления форм (иногда их также называют виджетами) и некоторых дополнительных элементов для структурирования формы. Элементами управления могут быть однострочные или многострочные текстовые поля, выпадающие списки, кнопки, чекбоксы, радиокнопки, большинство из которых создаются через html-элемент <input>, однако есть и другие элементы, о которых тоже стоит узнать.

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

Перед тем, как начать программировать, всегда лучше остановиться и подумать о вашей форме. Создание быстрого наброска поможет определить верный набор данных, которые вы хотите получить от пользователя. С точки зрения UX, удобства использования интерфейса, важно помнить о том, что чем длиннее ваша форма, тем больше риск потерять пользователей. Сделайте форму краткой и лаконичной: спрашивайте только о той информации, которая вам действительно необходима.

Проектирование форм является важным этапом при создании сайта или приложения. Удобство использования форм (UX) выходит за рамки данной статьи, однако если вы хотите углубиться в эту тему, то вам следует прочитать следующие статьи:

В этой статье мы создадим простую контактную форму. Давайте сделаем набросок.

Наша форма будет состоять из трёх текстовых полей и одной кнопки. Мы узнаём у пользователя его имя, e-mail и сообщение, которое он хочет отправить. После нажатия на кнопку данные будут отправлены на веб-сервер.

Итак, теперь мы готовы обратиться к HTML и создать нашу форму. Для этого мы будем использовать следующие HTML-элементы: <form>, <label>, <input>, <textarea> (en-US) и <button>.

Прежде, чем продолжить, скопируйте простой HTML-шаблон — вы будете создавать свою форму внутри него.

Элемент

<form>

Создание форм начинается с элемента <form>:

<form action="/my-handling-form-page" method="post">

</form>

Этот элемент формально определяет форму. Он является элементом-контейнером, как HTML-элементы <div> или <p>, но при этом он поддерживает некоторые специфические атрибуты для настройки поведения формы. Все атрибуты являются опциональными, но в стандартной практике принято указывать атрибуты action и method:

Атрибут action определяет адрес, куда должны быть посланы данные после отправки формы.
Атрибут method указывает, какой HTTP-метод будет использован при передаче данных (это может быть «get» или «post»).

Теперь добавьте указанный выше код с элементом <form> внутрь тега <body> в вашем HTML.

Элементы

<label>, <input> и <textarea> (en-US)

Наша контактная форма несложная: часть, в которую будут вводиться данные, состоит из трёх текстовых полей, каждое их которых связано с HTML-элементом <label>:

Поле ввода для имени — single-line text field (en-US)
Поле ввода для e-mail — input of type email (en-US): однострочное текстовое поле, которое принимает только e-mail адреса.
Поле ввода для сообщения — <textarea> (en-US), многострочное текстовое поле.

В терминах HTML нам нужен код наподобие представленного ниже, чтобы добавить виджеты форм:

<form action="/my-handling-form-page" method="post">
  <ul>
    <li>
      <label for="name">Name:</label>
      <input type="text" name="user_name">
    </li>
    <li>
      <label for="mail">E-mail:</label>
      <input type="email" name="user_mail">
    </li>
    <li>
      <label for="msg">Message:</label>
      <textarea name="user_message"></textarea>
    </li>
  </ul>
</form>

Добавьте в вашу форму код, чтобы она выглядела так же, как форма выше.

Здесь элементы <li> используются для структурирования кода и облегчения стилизации (будет разобрано далее в статье). Для доступности и удобства использования мы указали определённый текст-подсказку для каждого элемента управления. Обратите внимание на использование атрибута for на каждом элементе <label>, который принимает в качестве значение id элемента управления формы, с которым он связан — этот подход позволяет привязать тексты-подсказки к форме.

Такой подход полезен тем, что позволяет пользователям с мышью, трекпадом и сенсорным устройством кликнуть на текст-подсказку для активации связанного с ним виджета формы, а также обеспечивает читабельное имя для пользователей скрин-ридеров. Вы найдёте более детальный разбор текстов-подсказок в статье Как структурировать HTML-форму.

В HTML-элементе <input> самым важным атрибутом является атрибут type. Этот атрибут чрезвычайно важен, потому что он определяет внешний вид и поведение элемента <input>. Вы найдёте больше информации об этом далее в статье Стандартные виджеты форм.

В нашем простом примере мы используем <input/text> (en-US) для первого поля ввода — значение по умолчанию для данного атрибута. Оно представляет однострочное текстовое поле, которое может принимать любые значения.
Для второго поля ввода мы используем тип <input/email> (en-US), который представляет собой однострочное текстовое поле, которое принимает в качестве значения корректно составленный e-mail адрес. Он делает простое текстовое поле «умным», позволяя проверять введённые пользователем данные на корректность. Также это позволяет открывать более подходящие для ввода e-mail адреса клавиатуры (например, с символом @ при базовой раскладке) на устройствах с динамической клавиатурой, таких как смартфоны. Вы найдёте более подробную информацию про валидацию форм далее в статье Валидация формы.

Последнее, но не менее важное, обратите внимание на разницу синтаксиса у HTML-элементов <input> и <textarea></textarea>. Это одна из странностей HTML. Тег <input> — это пустой элемент, то есть он не нуждается в закрывающем теге. <textarea> (en-US) — это непустой элемент, что говорит о том, что ему необходим закрывающий тег. Это важно при использовании одного из свойств форм: определения значения по умолчанию. Для определения начального значения для HTML-элемента <input> вам необходимо использовать атрибут value следующим образом:

<input type="text" value="по умолчанию в этом элементе находится этот текст" />

Если вы хотите определить значение по умолчанию для HTML-элемента <textarea> (en-US), вам просто нужно поместить это начальное значение между открывающим и закрывающим тегами:

<textarea>
по умолчанию в этом элементе находится этот текст
</textarea>

Элемент

<button>

Разметка нашей формы почти готова, но нам ещё необходимо добавить кнопку, которая позволит пользователю отправлять или «представлять» информацию после заполнения формы. Это делается с помощью HTML-элемента <button>. Необходимо добавить следующий код перед закрывающим тегом </form>:

<li>
  <button type="submit">Send your message</button>
</li>

HTML-элемент <button> также принимает атрибут type, который может быть равен одному из трёх значений: submit, reset или button.

Клик по кнопке submit (значение по умолчанию) отправляет данные из формы на страницу, определённую в атрибуте action элемента <form>.
Клик по кнопке reset сбрасывает значения всех элементов управления формы к их начальному значению. С точки зрения UX, это считается плохой практикой.
Клик по кнопке button не делает ничего! Звучит странно, но на самом деле это очень удобно использовать для создания собственных кнопок — вы можете определить их поведение через JavaScript.

Примечание: вы также можете использовать HTML-элемент <input> с соответствующим атрибутом type , чтобы создать кнопку: <input type="submit">. Главным преимуществом HTML-элемента <button> в сравнении с элементом <input> заключается в том, что <input> может принимать в себя только простой текст, в то время как <button> позволяет использовать весь HTML для создания более стилизованного текста внутри кнопки.

Теперь после того, как вы закончили писать HTML-код формы, сохраните его и откройте в браузере. Вы увидите, что на данный момент форма выглядит достаточно не красиво.

Красиво стилизовать формы достаточно сложно. Эта тема выходит за рамки этой статьи, поэтому на данный момент мы просто добавим некоторый CSS-код для приведения формы в нормальный вид.

Сначала необходимо добавить HTML-элемент <style> на вашу страницу внутрь тега head в HTML. Это должно выглядеть следующим образом:

Внутри тега стилей добавьте следующий код:

form {
  
  margin: 0 auto;
  width: 400px;
  
  padding: 1em;
  border: 1px solid #CCC;
  border-radius: 1em;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

form li + li {
  margin-top: 1em;
}

label {
  
  display: inline-block;
  width: 90px;
  text-align: right;
}

input,
textarea {
  
  font: 1em sans-serif;

  
  width: 300px;
  box-sizing: border-box;

  
  border: 1px solid #999;
}

input:focus,
textarea:focus {
  
  border-color: #000;
}

textarea {
  
  vertical-align: top;

  
  height: 5em;
}

.button {
  
  padding-left: 90px; 
}

button {
  
  margin-left: .5em;
}

Теперь наша форма выглядит намного лучше.

Последняя и, наверно, самое сложное — это обработка данных формы на стороне сервера. HTML-элемент <form> определяет куда и каким способом отправить данные благодаря атрибутам action и method.

Мы определяем имя name для каждого виджета формы. Указание имён важно как для браузера, так и для сервера: браузер узнаёт, какие имена дать каждой части данных, а сервер может получить эти данные, обратясь к ним по заданному имени. Данные форму отправляются на сервер в виде пары имя/значение.

Чтобы переименовать данные, вам необходимо использовать атрибут name на каждом виджете формы, который будет собирать определённую часть информации. Давайте взглянем на код нашей формы ещё раз:

<form action="/my-handling-form-page" method="post">
  <div>
    <label for="name">Name:</label>
    <input type="text" name="user_name" />
  </div>
  <div>
    <label for="mail">E-mail:</label>
    <input type="email" name="user_email" />
  </div>
  <div>
    <label for="msg">Message:</label>
    <textarea name="user_message"></textarea>
  </div>

  ...

В нашем примере форма отправит три куска данных с именами «user_name«, «user_email» и «user_message«. Эти данные будут отправлены на URL «/my-handling-form-page» через метод HTTP POST.

На стороне сервера скрипт, расположенный на URL «/my-handling-form-page» получит данные в виде списка из 3 элементов вида ключ/значение, содержащихся в HTTP-запросе. То, как скрипт будет обрабатывать данные, зависит от вас. Каждый язык серверного программирования (PHP, Python, Ruby, Java, C# и т.д.) имеет свой механизм обработки данных из формы. Эта тема выходит за рамки данной статьи, если вы хотите углубиться в неё, мы привели несколько примеров далее в статье Отправка данных формы.

Поздравляем! Вы создали свою первую HTML-форму. Вживую это выглядит так:

Однако это только начало — пришло время взглянуть глубже. HTML-формы намного мощнее, чем то, что мы видели здесь, и другие статьи этого раздела помогут освоить остальное.

Дополнительные темы

Самостоятельная работа | Практическая контрольная работа

Планирование уроков на учебный год (по учебнику Н.Д. Угриновича, профильный уровень)

Главная | Информатика и информационно-коммуникационные технологии | Планирование уроков и материалы к урокам | 11 классы | Планирование уроков на учебный год (по учебнику Н.Д. Угриновича, профильный уровень) | Самостоятельная работа. Практическая контрольная работа

Содержание урока

Практические работы по HTML

Задание № 1. Создание простейшего файла HTML

Задание № 2. Управление расположением текста на экране

Задание № 3. Некоторые специальные команды форматирования текста

Задание № 4. Выделение фрагментов текста

Задание № 5. Задание размеров символов Web-страницы

Задание № 6. Установка размера текущего шрифта

Задание № 7. Установка гарнитуры и цвета шрифта

Задание № 8. Выравнивание текста по горизонтали

Задание № 9. Задание цвета фона и текста

Задание № 10. Размещение графики на Web-странице

Задание № 11. Использование атрибутов изображения

Задание № 12. Установка фонового изображения на Web-странице

Задание № 13. Создание таблицы

Задание № 14. Построение гипертекстовых связей

Задание № 15. Создание ссылки на другой HTML-документ

Задание № 16. Редактирование ссылки на другой HTML-документ

Задание № 17. Самостоятельное итоговое задание

Как подготовить хорошую Web-страницу

Тестирование

Практическая контрольная работа

Практические работы по HTML

Задание № 13. Создание таблицы

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

Таблица состоит из трех основных частей:

• названия таблицы,

• заголовков столбцов,

• ячеек таблицы.

Таблица в Web-документе заполняется по строкам (слева направо по строке, затем переход на новую строку). Каждая ячейка таблицы должна быть заполнена (хотя бы пробелом, которые используются для создания пустых ячеек).

1. Запустите программу Блокнот и наберите текст следующей Web-страницы. Применяйте приемы копирования при создании таблицы, работая в программе Блокнот.

<HTML>

<HEAD>

<TITLE>Расписание занятий 5 классов</TITLE>

</HEAD>

<BODY BGCOLOR=»FFFFFF»>

<P ALIGN=»CENTER»>

<FONT COLOR=»RED» SIZE=»6″ FACE=»ARIAL»>

<B>5 класс</B></FONT><BR></P>

<FONT COLOR=»BLUE» SIZE=»4″ FACE=»COURIER»>

<B>Понедельник</B></FONT><BR>

<TABLE BORDER=»1″ WIDTH=100% BGCOLOR=»#99CCCC»>

<TR BGCOLOR=»#CCCCFF» ALIGN=»CENTER»>

<TD>Урок</TD> <TD>5 «А»</TD> <TD>5 «Б»</TD>

<TD>5 «В»</TD>

</TR>

<TR>

<TD>1</TD> <TD>Русский язык</TD>

<TD>Литература</TD> <TD>История</TD>

</TR>

<TD>2</TD> <TD>Математика</TD>

<TD>Информатика</TD> <TD>Английский язык</TD>

<TR>

</TR>

<TD>3</TD> <TD>История</TD>

<TD>Математика</TD> <TD>Информатика</TD>

<TR>

</TR>

</TABLE>

</BODY>

</HTML>

2. Сохраните файл в личной рабочей папке под именем 5.HTML

3. Для просмотра созданной Web-страницы в окне личной рабочей папки двойным щелчком левой клавиши мыши загрузите браузер.

На экране вы увидите то, что показано на рисунке 8.

Рис. 8

Следующая страница Задание № 14. Построение гипертекстовых связей

Cкачать материалы урока

Задание HTML

Задание
HTML

Для
выполнения задания по HTML
понадобится:

1.
Текстовый редактор Блокнот (установлен
на любом компьютере).

2.
Шпаргалка — таблица тегов, которые будут
использованы при выполнении задания:

Тег	Описание
<html>…</html>	Указывает программе просмотра страниц что это HTML документ. Открывающий тег ставится в самом начале документа, закрывающий — в самом конце.
<head>…</head>	Предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. В основном содержит служебные команды, которые не видит обычный пользователь. Открывающий тег обычно расположен сразу после тега <html>, закрывающий — после указания всех служебных слов заголовка.
<title>…</title>	Определяет заголовок документа. Отображается вверху браузера, располагается в теге <head>…</head>
<body>…</body>	Предназначен для хранения содержания веб-страницы, отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри этого тега. Открывающий тег ставится после тега </head>, закрывающий — перед концом документа (перед </html>)
bgcolor=»?»	Устанавливает цвет фона документа, используя значение цвета в виде RRGGBB. Пишется внутри открывающего тега <body>, с двух сторон отделяется пробелами.
text=»?»	Устанавливает цвет текста документа, используя значение цвета в виде RRGGBB. Пишется внутри открывающего тега <body>, с двух сторон отделяется пробелами.
<h2>…</h2>, <h3>…</h3>, <h4>…</h4>, <h5>…</h5>, <h5>… </h5> , <h6>…</h6>	Применяет к тексту, помещенному между открывающим и закрывающим тегом, стиль заголовка. <h2> — заголовок самого большого размера, <h6> — самого маленького.
<b>…</b>	Применяет к тексту, помещенному между открывающим и закрывающим тегом, полужирный стиль начертания.
<i>…</i>	Применяет к тексту, помещенному между открывающим и закрывающим тегом, курсивный стиль начертания.
<p>…</p>	Создает новый параграф (не требует обязательного использования закрывающего тега)
align=»?»	Параметр, который отвечает за выравнивание текста по левой (left), правой (right) стороне, или по центру (center). Может писаться внутри различных открывающих тегов, например, тегов заголовка <h…>, или тега <p>. Внутри тега, отвечающего за вставку изображения, дополнительно могут использоваться значения bottom, top, middle.
<img src=»name»>	Добавляет в документ изображение, которое находится по адресу, записанному вместо name. Не требует закрывающего тега.
height=»?» ,	Параметр, который отвечает за высоту и ширину изображения. Используется внутри тега <img>, отделяется пробелами.
<table>…</table>	Создает таблицу. Внутри тега надо указать количество строк и ячеек в каждой строке.
<tr>…</tr>	Определяет строку в таблице. Используется внутри тега создания таблицы. Дополнительно внутри тега следует указывать количество и содержимое ячеек.
<td>…</td>	Определяет отдельную ячейку в таблице. Внутри тега может находиться содержимое различных типов — текст, рисунки и пр. Используется внутри тега для создания строк в таблице.
colspan=»число»	Используется внутри тега создания ячейки. Устанавливает число ячеек, которые должны быть объединены по горизонтали.
rowspan=»число»	Используется внутри тега создания ячейки. Устанавливает число ячеек, которые должны быть объединены по вертикали.
<a href=»URL»>…</a>	Создает гиперссылку на другую страницу или сайт. Внутри тега может быть помещен текст, рисунок или другой объект, при нажатии на который пользователь будет уходить на заданную страницу.

<HTML>

<HEAD>

<TITLE>
Первая
страница
</TITLE>

</HEAD>

<BODY>
Это моя первая страница </BODY>

</HTML>

3.
Цветовая схема с кодами цветов для HTML,
которые будут использованы при выполнении
задания:

Задание
1. Создаем Веб-страницы

Цель:
создать несколько веб — страниц, связанных
друг с другом посредствам гиперссылок,
посвященных Вашему
колледжу/специальности/придуманной
фирме/любому другому выбранному
объекту/интересной истории с альтернативными
концовками, которые будут отвечать
заданным ниже условиям и составлять
единый проект.

Замечание
1:
для того, чтобы Ваши веб — страницы стали
едиными проектом, все страницы необходимо
хранить в одной папке, вместе с картинками.

Замечание
2:
для того, чтобы Вам было проще, названия
выбранных картинок лучше будет поменять
на 01, 02, 03 и т.д или на 1, 2, 3 и т.д.

Структура
проекта представлена на схем:

1.
Страницы 00.htm

Первая
страница Вашего проекта (страница —
приветствие)

Условия
оформления страницы:

страница
должна иметь цветной фон;
заголовок
на странице должен быть отцентрировав
с использованием тегов HTML;
страница
должна содержать небольшой тематический
рассказ — введение о выбранном
объекте/истории. Рассказ должен быть
отцентрирован при помощи тегов HTML;
страница
должна содержать две отцентрированных
при помощи тегов HTML
картинки
— ссылки
небольшого размера с подписями. Ссылки
с картинок которые ведут на страницы
10.htm
и
20.htm
соответственно;
титл
в шапке должен совпадает с заголовком
страницы.

Содержание
страницы: возможны варианты

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

2.
Страницы 10.htm
и 20.htm

Условия
оформления страниц:

страница
должна иметь цветной фон;
титл
страницы содержит имя героя или название
специальности;
страница
содержит несколько фраз, описывающих
Вашу историю/приключение/выбранный
объект, которые отцентрированы при
помощи тегов HTML;
страницы
содержит созданную при помощи тегов
HTML
таблицу следующего вида, в которой в
левом столбике или слова, или картинки
являются гиперссылками на страницы:

11.htm,
12.htm,
13.htm
для страницы 10.htm

21.htm,
22.htm,
23.htm
для страницы 20.htm

Заголовок столбца 1	Заголовок столбца 2
Общее свойство


Другое общее свойство

Содержание
страницы — возможны варианты:

Классический
вариант — Вы продолжаете рассказ о
колледже/специальности/о том, что
выбрали. Например, если Вы выбрали
рассказа о колледже, то таблицы будет
содержать в себе: выпускники этой
специальности будут обладать такими-то
навыками, знаниями, умениями.

Таблица
в таком случае может содержать, например,
названия предметов, которые изучают
выпускники специальности(столбик один
— название предмета) и краткое описание
содержания данного предмета (столбик
2 — описание предмета, общее свойство —
допустим, общенаучные и профессиональные).
Тогда названия предметов будут являться
одновременно и гиперссылками для
перехода на страницы:

11.htm,
12.htm,
13.htm
для страницы 10.htm

21.htm,
22.htm,
23.htm
для страницы 20.htm

Альтернативный
вариант — содержит сюжет развития вашей
истории (например, спасти мир, разгадать
тайну, разгадать загадку приключения
при помощи специальных способностей
или специальных приборов, тогда столбец
1 — название способностей или приборов,
столбец 2 — описание как работает
способность или прибор, общее свойство
— например, магия льда, магия огня, или
оптический и электронный). Тогда, в
данном случае, названия способностей,
приборов будут являться одновременно
и гиперссылками для перехода на страницы

11.htm,
12.htm,
13.htm
для страницы 10.htm

21.htm,
22.htm,
23.htm
для страницы 20.htm

3.
Страницы 11.htm,
12.htm,
13.htm,
21.htm,
22.htm,
23.htm

Условия
оформления страниц:

страница
должна иметь цветной фон;
титл
страницы содержит название предмета
или навыка, способности или прибора;
страница
содержит несколько фраз, описывающих
продолжение и окончание Вашей
истории/приключения/выбранного объекта,
которые отцентрированы при помощи
тегов HTML;
cтраница
содержит картинку и гиперссылку на
страницу — приветствие (00.htm).

Содержание
страницы — возможны варианты:

Классический
вариант — содержит более подробное
описание предмета, с названия которого
будет осуществляться переход на
страницы, картинку, с хотя бы отдаленно
подходящей тематикой и слово/словосочетание
— гиперссылку для перехода на главную
страницу (00.htm).
Альтернативный
вариант — содержит описание концовки
сюжета Вашей истории (концовки должны
быть разыми для каждой страницы).
Возможны хорошие и/или плохие концовки
истории. Страница содержит картинку,
с хотя бы отдаленно подходящей тематикой
и слово/словосочетание — гиперссылку
для перехода на главную страницу
(00.htm),
например «Начать сначала».

После
того, как Ваш проект будет готов необходимо
проверить его полную работоспособность
и наличие ошибок (если есть ошибки —
исправить их).

Готовый
проект сохранить в Вашей папке на диске
:F
и показать результаты работы преподавателю.

задание 1. Работа с браузером.

Цель
работы:
получить основные навыки работы с
браузером Internet
Explorer.

1.В результате
набора в адресной строке www.aport.ru
и нажатия клавиши Enter,
загружается соответствующая веб-страница.
Кнопка «Остановить» остановит загрузку
документа. Кнопка «Обновить» дает
возможность перезагрузить текущий
документ с сервера. Документ можно
сохранить на диске (меню: Файл – Сохранить
как…), распечатать (Файл – Печать…),
просмотреть в исходном гипертексте
(Вид – В виде HTML),
сделать закладку (Избранное).

2. Используя
поисковые различные поисковые системы,
нашла информацию о праздниках, отмечаемых
26 августа (см. дискету).

Задание 2. Основы разработки html-страниц.

Цель
работы:
Усвоить, что из себя представляет
разработка HTML-страниц.
Научиться создавать простую HTML-страницу.

<html>

<head>

<title>Моя
первая страница</title>

</head>

<p
align=»center»>Мой текст
<b>первого</b>
абзаца.</p>

<p>Мой
текст второго абзаца.</p>

</body>

</html>

Задание 3. Использование графических изображений в html-страницах.

Цель
работы:
Научиться размещать графические
изображения в HTML-странице.

	<head>
	<title>Задание № 2-3</title>
	</head>
	<body bgcolor=»#00000″ text=»#FFFFF»>
	<p align=»center»>Мой текст <b>первого</b> абзаца.</p>
	<img src=»images/1.jpg» widgh=»200″ border=»3″>
	<p>Мой текст второго абзаца.</P>
	<img src=»2.jpg» widgh=»200″ border=»3″>
	<img src=»images/images2/3.jpg«widgh=»200″ height=»200″ border=»3»>
	</body>
	</html>

Задание 4. Оформление текстовой информации.

Цель
работы:
Получить основные навыки использования
различных шрифтов на HTML-странице.

<html>

<head>

<title>Моя
первая страница</title>

</head>

<font
size=»5″>Д</font>обро
пожаловать на мою страницу!<br>

<font size=»3″
face=»Times, Palatino, serif»

color=»#FF0000″>Это
пример № 1</font>

<br>

<font size=»2″
face=»Arial, Helvetica, nonserif»

color=»#008000″>Это
пример № 1</font>

<br>

<font size=»5″
face=»Verdana, Arial, Courier, Times»

color=»#FF8000″>Это
пример № 1</font>

<h2>Заголовок
1</h2>

<h3>
Заголовок 2</h3>

<h6>
Заголовок 6</h6>

</body>

</html>

Задание 5. Работа со списком.

Цель
работы:
Изучить основные приемы работы с
различными видами списков.

<ol>

<li>Глава
1

<ol>

<li>Раздел
1.1</li>

<li>Раздел
1.2</li>

</ol>

</li>

<li>Глава
2

<ol>

<li>Раздел
2.1</li>

<li>Раздел
2.2</li>

<li>Раздел
2.3</li>

</ol>

</li>

</ol>

Список тестовых заданий для frontend разработчиков #1

В vk получил следующее предложение:

Последний месяц много ходил на собеседования и накопилось много тестовых заданий с них и просто небольшой багаж общих вопросов. Если хочешь могу скинуть и описать как происходило собеседование. (Александр Насонов)

Не вопрос! В конце каждого ТЗ краткий комментарий от редакции.

Если вам есть о чем рассказать — пишите в vk/telegram. Так же у мы проводим разборы тестовых заданий.

Задания с собеседования Web-программист/верстальщик

Задачи:

Общение перед заданием:

Сначала общение с HR общие вопросы о прошлом месте работы, что разрабатывали, с чем работали и причина ухода

Потом общение с лидом вопросы про общие вопросы про верстку (про способы центрования, позиционирование). Вопросы про CMS(с какими и как работал), немного Javascript

Задание

Сверстать макет
В шапке сайта изображение заполняет весь блок и располагается по центру.
Контент страницы может быть от 1 до 1000 строк.
Количество пунктов и подпунктов правого меню может варьироваться в диапазоне от 1 до 10.
Эффект для разворачивания подменю выбирается самостоятельно.
Боковое меню является фиксированным при прокрутке до тех пор, пока блок соцсетей не оказывается на расстоянии 50 пикселей от футера. При этом следует учитывать различные размеры меню, контента и экрана.

От редакции «Без воды»:

Адекватное задание для требуемой позиции. Стандартная задача, разумные временные затраты

Тестовое задание из вакансии junior front-end developer

Требования к разработчику

HTML5/CSS/LESS/SASS/SCSS
Работа со сборщиками GULP/WEBPACK
Базовые навыки Javascript/ES5/ES6

Общение перед заданием:

Примерно минут 5 пообщались в скайпе о том что делал и какие у меня примерно знания после чего добавили в гит и трелло с задачами
На выходе нужно было небольшое CRUD приложение на react, делать только фронт, бэк уже был.

Задачи

Создать компонент для отображения таблицы с данными (Таблица с фейковыми данными из JSON’a, данные любого вида)

Получить данные с backend’a и вывести полученные данные в табличку, описание запросов было предоставлено.
Кнопка добавления новой записи
Запись посылаем на бэкэнд
Кнопка удаления записи напротив каждой строки таблицы, по клику запись удаляется запросом на бэкэнде, по успеху — на фронтэнде удаляется
Кнопка редактирования напротив каждой строки таблицы
- По клику на нее, в таблице все инпуты становятся редактируемыми и на месте кнопки редактировать, появляется кнопка сохранить
- По нажатию на сохранить, отправляется запрос на бэкэнд, по успеху — инпуты опять становятся ридонли и кнопка меняется на «редактировать».

От редакции:

Отличное задание.

Задания с собеседования HTML-верстальщик

Задачи:

Адаптивная блочная верстка страниц pixel perfect (мобильные устройства, десктоп)
Табличная вёрстка писем
Photoshop (base)
HTML5 (tags)
CSS3 (flexbox, grid layout, media queries, pixel ratio, etc …)
Markdown
Stylus
SVG fonts
Gulp
Git
NPM (Yarn)
опыт вёрстки под мобильные устройства.

Общение перед заданием:

Вопросы про то с какими сборщиками работал, как происходит отрисовка сайта(введение имени, запрос, отрисовка документа),какие навыки JS имеются. Как происходила работа совместно с дизайнером.

На выбор давалось одно из трех заданий

Задание 1

Вариант №1:

Нужно выводить текстовые сообщения в html блок (общий вид приведён в приложенном файле «messages.jpg»).

В блоке 1 — по очереди показываются все сообщения из списка с интервалом в несколько секунд. Показываться они могут несколько раз, но если пользователь нажал «х» слева в блоке 1, то это сообщение больше не будет показываться.

Блок 2 — отображает полный список сообщений, удалённые сообщения помечены знаком «х», новые сообщения добавляются в конец списка.

Блок 3 и 4 для отправки сообщений и включения в очередь для показа.

Вариант №2 (для усложнения):

На одном из серверных языков с подгрузкой данных с сервера. Данные будут добавляться в блок 2 и также отображаться по очереди в п1.

Не функциональные требования:

Разрешено использовать js фреймворки
Желательно, чтобы html был максимально чист (минимум вёрстки, скриптов в html)
Кроссбраузерная вёрстка, в т.ч. для мобильных устройств.

Перед выполнением нужно оценить трудозатраты в часах и дату, когда будет готово задание.

Задание 2

Есть таблица, в которой есть числа. Числа сравниваются с каким то интервалом в прошлом. При выборе строки (щелчке) на графике отображается информация по этому показателю.

Для отображения график можно использовать сторонний компонент, например
http://www.highcharts.com/demo/ или любой другой.

Вёрстка должна быть адаптированной с поддержкой мобильных устройств (на одном из изображений есть пример). Должна быть возможность скрывать некоторые строки из таблицы (например удалением через настройки).

Нужно в html+js (можно использовать фреймворки) сверстать. Данные для таблицы и графика нужно хранить в json-файле. Бэкенд вообще не нужен.

Задание 3

Нужно сверстать расписание работы сотрудников. На графике отображено плановое время работы сотрудника (закрашенные прямоугольники) и фактическое (закрашено штриховкой). На вход приходит 2 набора данных в json формате, которые содержат 2 набора строк. На выходе ожидаем: html страницу + js + css + json-файл с данными. БД & бэкэнд не требуются. В json-файле должны быть данные с приложенной картинки.

План: {Сотрудник, Ресторан, Роль, ДатаВремя_ПланС, ДатаВремя_ПланПо}

Факт: {Сотрудник, Ресторан, Роль, ДатаВремя_ФактС, ДатаВремя_ФактПо}

Вариант №1. Облегченная задача (минимум):

Отобразить план работы всех сотрудников;
В диапазоне дат ограничиваем принудительно максимальную длительность – 4 дня;
У одного сотрудника может быть несколько смен в выбранном фильтре дат в одном ресторане (как у Гоку Петра), нужно отобразить оба отрезка в одной строке, как на приложенной картинке;
При щелчке на смене сотрудника отображать плановую длительность этой смены.

Вариант №2. Задача нормальной сложности:

Дополнительно к минимуму: отображать факт, прогулы, опоздания, ранние уходы;
Максимальная длительность в фильтре не ограничена.

Важно:

Перед выполнением оцените время на выполнение задания, выберите вариант (1 или 2) и дату выполнения задания.

От редакции:

Задание 1/2 неплохо. Задание 3 уже сложновато.

Задания с собеседования на Frontend разработчика

Веб-приложение для проведения тестирования (es5)

Требования:

Хорошее знание Javascript, css, html
Знание любого UI framework (React/Redux, Vue, Angular and etc.). Мы работаем с React/Redux
Желательно знание webpack, TypeScript, SASS (SCSS)

Общение перед заданием:
Общие вопросы про верстку, алгоритмы и базовые понятия js/react , в чем фишка реакт, взаимодействие между родителем/потомком. Несколько вопросов про es5/es6 зачем были созданы, какие преимущества дают

Написать веб-приложение для проведения тестирования.

Описание:

Вид начального экрана — название теста, кнопка запуска.
Вид экрана вопроса — текст вопроса, варианты ответов, кнопка «Продолжить».
Вид экрана результата — текст «Ваши баллы:», и кнопка «Пройти еще раз»

Back-end: создать базу данных с помощью Entity Framework подходом Code First, в которой
будут храниться вопросы тестирования. Заполнить БД данными из скрипта (приложен к заданию).

Сервис должен реализовывать интерфейс ITestService из диаграммы классов.

Метод TestInit случайным образом выбирает N вопросов из БД и сохраняет в сессии. Возвращает количество вопросов N.
Метод GetNext возвращает данные вопроса из списка(п.1) по индексу(берется из тела запроса)
Front-end: в соответствии с диаграммой классов на js реализовать объектную модель приложения.

Для разработки логики руководствоваться UML диаграммой.

testController — основной класс для управления процессом тестирования.

question — общий класс(родитель) для объекта вопроса.

radioQuestion — класс потомок question для вопросов с одним правильным вариантом ответа.

checkboxQuestion — класс потомок question для вопросов с несколькими правильными вариантами ответов.

Схема БД:

Название DAL.TestModel.

Поле Text — текст вопроса в формате Base64.
Поле Options — варианты ответов в формате Base64 с разделителем «#;» пример(base64#;base64).
Поле Answers — правильные ответы, в формате как в поле Options.
Поле TimeOut — необязательное, время для ответа на вопрос в секундах.

Доп.Задание(необязательное): реализовать таймер для вопросов, у которых в поле Timeout !== null

Веб-приложение для проведения тестирования (es6)

Тоже самое, что и выше, но с дополнениями:

Для выполнения задания необходимо настроить webpack (версии 2, 3 или 4) для работы с кодом ES6+ используя babel-polyfill и babel-loader c пресетами env и stage-3.

Пояснения по заданию:

В задании идет основной упор на синтаксис ES6+ и новые возможности языка, а именно:
1. Новый синтаксис классов
2. Промисы (Promises)
3. Генераторы и итераторы (включая их асинхронные варианты)
4. Коллекции Map и WeakMap

Перед выполнением задания рекомендую ознакомиться с книгой «ECMASrcipt для разработчиков» (автор Николас Закас).

Для реализации методов загрузки данных (прим. ajaxToService) использовать API Fetch, организовать перехват ошибок.

Наследование использовать с новым синтаксисом, обязательно использование ключевого слова super.

Приватные переменные реализовать с использованием WeakMap (посмотреть в книге как это делается)

Пояснения по классам:

TestController — класс синглтон. Содержит асинхронную функцию init, которая запускает тест через асинхронный итератор, который получает из функции questionGenerator.

Функция questionGenerator представляет собой асинхронный генератор.
Метод questionFactory создает экземпляр дочернего класса для Question и возвращает его.

Подробнее по асинхронным итераторам:
https://github.com/tc39/proposal-async-iteration

От редакции:

Задание определенно «Борщ». Большое, сложное, зачем такое давать на тестовое? Да еще и для такой позиции.

Регистрация — Интернет-олимпиада школьников по физике

Идёт регистрация учащихся 7-11-х классов для участия в олимпиаде 2021/2022 учебного года.

Перед началом первого тура и в промежутке между турами олимпиады сразу после регистрации доступны тренировочные задания — для них нет ограничения по времени выполнения, и результаты их выполнения никак не учитываются и нигде не публикуются.

Во время тура проверить и если необходимо настроить работу с моделями можно под отладочным логином tren7 пароль tren — это не прохождение олимпиады, а тренировочные задания!

Участникам олимпиады каждый новый учебный год надо заново регистрироваться, прошлогодние учётные записи не будут работать.

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

Регистрация, как и участие в олимпиаде, является свободной, бесплатной и проводится единственным способом:

Самостоятельная регистрация учащихся — с самостоятельным получением пароля. Даёт возможность участия в олимпиаде без регистрации представителем учебного заведения. При этом не требуется никаких разрешительных действий со стороны школы или Оргкомитета олимпиады. Просьба участникам ответственно относиться к регистрации и не создавать многократно дублирующихся записей.

Таким же способом могут зарегистрироваться учителя (в качестве номера класса выбрать в выпадающем списке «учителя») для того, чтобы иметь возможность выполнять тренировочные задания, а после окончания тура олимпиады — на две недели получать доступ к заданиям туров.

Зарегистрированные участники (при заходе из BARSIC на сайт олимпиады и входе в олимпиадную систему по полученным логинам и паролям — см. ниже) во время между турами олимпиады сразу получают доступ к выполнению тренировочных заданий. А во время туров — после входа по своему логину и паролю необходимо сразу выполнять олимпиадные задания.

Во время тренировок ограничений в доступе к заданиям нет. Во время прохождения тура олимпиады будьте внимательны, отсчёт времени олимпиады идёт от первого входа по логину и паролю во время олимпиадного тура, через 1 час 20 мин после входа для 7 класса, через 1 час 30 мин для 8-9 классов, через 2 часа для 10-11 классов время прохождения тура для данного участника заканчивается — даже если он не просматривал и не выполнял никаких заданий.

Для прохождения олимпиады (или тренировочных заданий) при наличии на компьютере Windows 10 сначала следует загрузить на компьютер архив
http://distolymp2.spbu.ru/olymp/files/barsic1191_distolymp.zip с проигрывателем BARSIC — специальной программой, позволяющей выполнять модели виртуальных лабораторий.
В этой версии BARSIC используются настройки браузера Internet Explorer, установленного на Вашем компьютере, поэтому если их меняли, может понадобиться настройка параметров Internet Explorer.

Необходимо извлечь из zip-архива папку barsic1191_distolymp на жесткий диск компьютера, с которого будет проходить олимпиада — зайти в Проводнике в архив и перетащить находящуюся в нём папку barsic1191_distolymp со всем содержимым на диск компьютера. Например, на рабочий стол.

Затем следует войти в эту папку и запустить файл barsic.exe (двойным щелчком по имени файла), перейти в открывшемся ОКНЕ BARSIC по ссылке «Интернет-олимпиада школьников по физике» на страницу проведения олимпиады, ввести В ОКНЕ BARSIC логин и пароль участника, и выполнять задания.

Для прохождения олимпиады (или тренировочных заданий) при наличии на компьютере Windows с версией отличной от Windows 10 действия аналогичны, но на некоторых компьютерах возникают проблемы, поэтому в этом случае надо использовать верию BARSIC, которая находится в архиве http://distolymp2.spbu.ru/olymp/files/barsicLaz_v4.zip. Извлекать из этого архива надо папку barsicLaz.

Если на компьютере с Windows 10 возникают проблемы с barsic1191, на них также можно использовать версию barsicLaz_v4.

Для работы BARSIC в интернет под Linux требуется, чтобы на компьютере была установлена программа wine одной из последних версий. С помощью wine следует инсталлировать на компьютере одну из последних версий gecko для wine (запустить из-под установленного wine) — для 64-разрядной платформы Linux можно скачать архив http://distolymp2.spbu.ru/olymp/files/wine_gecko-2.24-x86_64.msi. После чего скачать архив http://distolymp2.spbu.ru/olymp/files/barsicLaz_v4.zip с проигрывателем BARSIC, и извлечь из него папку barsicLaz на диск компьютера. После этого можно из-под wine запускать находящийся в папке barsicLaz файл Barsic.exe, перейти В ОКНЕ BARSIC по ссылке «Интернет-олимпиада по физике» на страницу проведения олимпиады, ввести В ОКНЕ BARSIC логин и пароль участника, и выполнять задания.

Сразу после регистрации до и в промежутках между турами олимпиады доступны тренировочные задания.

Во время тура олимпиады для выполнения тренировочных заданий войдите в систему BARSIC под логином tren7 и паролем tren . Это позволит Вам попрактиковаться в использовании виртуальной лаборатории и проверить, нет ли проблем при работе с моделями, до прохождения тура олимпиады. ВНИМАНИЕ! Во время тура олимпиады после вхождения в систему под полученными при регистрации логином и паролем режим тренировки будет недоступен, так как после подтверждения, что вы готовы пройти олимпиаду, СРАЗУ начнется отсчет времени. И второй попытки для прохождения тура у Вас НЕ БУДЕТ!

При наличии проблем прочитайте информацию в разделе Вопрос-ответ.

Проходить задания с моделями можно только из проигрывателя BARSIC, другие задания можно выполнять как из BARSIC, так и из любого браузера.

За повторную отсылку результатов на сервер начисляются штрафные баллы (обычно 1 штрафной балл за неверный ответ в каждой части задания).
Находить ответы перебором значений запрещено.

После входа по логину и паролю во время дистанционного тура олимпиады участнику обычно дается 1 час 30 мин на выполнение заданий ( для 7 класса 1 час 20 мин, для 11 класса 2 часа ), в том числе разрешены повторные входы в случае технических проблем, набранные до того баллы сохраняются. При повторном заходе в задание параметры задания меняются — будьте внимательны!

Повторное прохождение олимпиады под другим логином или другие варианты нечестного прохождения олимпиады категорически запрещены.

Тренировки разрешается проходить без ограничений времени произвольное число раз. Баллы, набранные во время тренировок, нигде не учитываются и не публикуются. Тренировки помогают заранее справиться с возможными техническими проблемами, особенно — для моделей.

Попробовать настроить систему во время тура олимпиады можно под отладочным логином tren7 пароль tren — но учтите, что олимпиаду под этим логином пройти нельзя, он предназначен только для настройки программного обеспечения на компьютерах участников во время прохождения тура олимпиады. Под этим логином заходят десятки и сотни участников, и много раз отсылаются результаты на сервер, поэтому за задания начисляется много штрафных баллов — но для настройки программного обеспечения это неважно.

Как задать цвет шрифта с помощью HTML

Цвет шрифта на сайте можно задать при помощи HTML-кода. Для этого существует тег font. По определению, тег font служит некой «обёрткой» или «контейнером» для текста, управляя свойствами которого можно изменять оформление текста.

Тег font применяется следующим образом:

<p>Конструктор сайтов <font>"Нубекс"</font></p>

Самый простой способ, как изменить цвет шрифта в HTML, это использовать атрибут color тега font:

Конструктор сайтов <font color="blue">"Нубекс"</font>

Здесь задается синий цвет для слова, обрамленного тегом font.

Но помимо параметра color, тег имеет и другие атрибуты.

Атрибуты тега FONT

Тег font имеет всего три атрибута:

color – задает цвет текста;

size – устанавливает размер текста;

face – задает семейство шрифтов.

Параметр color может быть определен названием цвета (например, “red”, “blue”, “green”) или шестнадцатеричным кодом (например, #fa8e47).

Атрибут size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута – “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 больше или меньше, соответственно.

Рассмотрим применение этих атрибутов на нашем примере:

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Меняем цвет шрифта при помощи HTML</title>
 </head>
 <body>
 <p>Конструктор сайтов <font size="6" color="#fa8e47" face="serif">"Нубекс"</font></p>
 </body>
</html>

Мы применили тег font к одному слову, задали для него размер 6, оранжевый цвет и семейство шрифтов “Serif”.

Задание цвета текста при помощи CSS

Если вам нужно применить определенное форматирование (например, изменить цвет текста) к нескольким участкам текста, то более правильно будет воспользоваться CSS-кодом. Для этого существует атрибут color. Рассмотрим способ его применения на нашем примере:

<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Меняем цвет шрифта при помощи CSS</title>
  <style>
 .nubex {
  color:#fa8e47;
  font-size: 150%;
  }
  .constructor {
  color: blue;
  }
  .saitov {
  color: green;
  font-size: 125%;
  }
  </style>
 </head>
 <body>
 <p><span>Конструктор</span> <span>сайтов</span> <span>"Нубекс"</span></p>
 </body>
</html>

Здесь мы задали синий цвет для слова «Конструктор» (размер его, по умолчанию, 100% от базового), зеленый цвет и размер 125% для слова «сайтов», оранжевый цвет и размер 150% для слова «Нубекс».

HTML-вакансий — Stack overflow на русском

Сначала разработчики. Вы никогда не получите спам от рекрутеров и не увидите на нашем сайте фальшивые объявления о вакансиях.

Хорошо, вы больше не увидите эту вакансию. Отменить

избранный