Задачи для должности
младший web-программист

HTML

  1. Почему следующий html-документ не пройдет W3C-валидации? 
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta name="author" content="">
<BODY>
  Приветсвуем гостей на нашем сайте!
  <table border="0" cellpadding=0 cellspacing=0 width=100% height="100%">
    <tr>
      <td>
        <select>
          <option> <10
          <option> 10-20
          <option selected> >20
        </select>
      </td>
      <td>
        <img src=/images/blank.png?show_full=1&align_left=1>
      </td>
    </tr>
    <tr>
      <td>
        <form method="POST">
          <input type="text" name="Число"/>
          <input type="submit" value="Посчитать" />
        </form>
      </td>
      <td>
        <p>Здесь будет копирайт <div class="strong">&copy; 2010</p></div>
      </td>
    </tr>
  </table>
</BODY>
</html>
  2. Вам предстроит задача сверстать блоками страницу новостей организации. Документ состоит из шапки, основной части, подвала. Шапка состоит из логотипа. В Основной части находится список новостей, каждая новость имеет свою дату, вводный текст и ссылку на полный текст. Подвал состоит из блока цитаты слева и авторы справа. Накидайте схематично html-структуру этого документа (В данном пример css использовать не надо).

CSS

  1. написать селектор который выберет каждую 6 строчку в таблице
    написать селектор, который выберет каждую 6 строчку в таблице, начиная с 2
    написать селектор, который выберет 3,6,9 строчку в таблице, если всего строк 18
    написать селектор, который выберет все теги div на странице, кроме первых 5
    написать селектор, который выберет все теги p, которые точно лежат в div c id равным content и идут за h3.
    каждый пункт должен быть из одного селектора
  2. Какого цвета будет слово "Привет"? Почему? 
    <html>
<head>
<style>
#i3 {
  color: blue;
}
#i1 #i2.c1 h1#i3.c3 {
  color: black;
}
#i3.c3 {
  color: red;
}
body#i1 h3 {
  color: white;
}
body#h1 h3#i2 #i3{
  color: red;
}
#i1 #i2 #i3 {
  color: green;
}
h1#i3.c3 {
  color: blue !;
}
#i1 #i2.c2 #i3 {
  color: red;
}
h3.c3 {
  color: green !important;
}

</style>
</head>
<body id="i1" class="c1">
  <div id="i2" class="c2">
    <h1 id="i3" class="c3">Привет</h1>
  </div>
</body>
</html>
  3. Если известны стили для html-документа, каким цветом будут показываться ссылки в IE6? А в IE7? Почему? 
    <head>
<style>
a { color: red; }
</style>
<!--[if IE 6]>
<style>
 a { color: blue; }
</style>
<![endif]-->
<!--[if lt IE 8]>
<style>
 a { color: purple; }
</style>
<![endif]-->
<!--[if lt IE 7]>
<style>
 a { color: green; }
</style>
<![endif]-->
<title>тест</title>
</head>

PHP

  1. Вам предстоит задача импортировать мета данные из каталога картинок в базу данных. Структура Каталога: 
    Корневой Каталог
|-> Каталог 1
|   |-> картинка 1.1
|   |-> картинка 1.2
|-> Каталог 2
    |-> картинка 2.1
    |-> картинка 2.2
    Структура базы данных.
    1. Таблица директории folders(id, title, parent)
    2. Таблица картинок images(id, title, dir) (где dir - это внешний ключ на folders)

    При импортировании нужно уменьшить картинку до размера 100x100 ( предполаем, что задана функция
    resizeImg(filename,width,height) )
    Напишите схематично скрипт на php (python или perl).

SQL(mysql)

  1. Для задачи PHP1 напишите запрос, который выведет заголовки всех картинок из директории "Каталог 2".
  2. Для задачи PHP1 напишите запрос, который таблицу директорий представит в виде дерева (следует использовать колонку parent). Например для задачи PHP1 это будет выглядеть так 
    Корневой каталог
  Каталог 1
  Каталог 2

Javascript

Мы используем библиотеку jQuery. Вопросы связанны с ней.

  1. Иногда случаются ситуации, что надо сохранить у элемента его особое состояние или вообще данные ( например есть некоторый див который то показан, то скрыт). Как вы будете добавлять этот флаг с помощью jQuery?
  2. Вам надо у элемента div#test изменить цвет заднего фона, изменить ширину на 150, добавить класс new, дабавить обработчик события на click onclick, добавить в конец <p>тест</p>, найти первую вложеную в этот div ссылку и добавить ей цвет на синий, затем скрыть div#test
  3. Вопрос в коде 
    $('table tr').click(function(){
  //Как тут получить номер строки таблицы?
});
  4. Как добавить свой псевдо-класс в селекоторы? Например надо найти все ссылки которые уходят на другие сайты, назовем их external. Хочется получить их так 
    var externals = $('a:external');
  5. Как добавить свой плагин, который расширяет возможности jQuery?

концепция Ajax

Задач в данный момент не опубликованно

Услуги