Задание к третьему уроку HTML
Cверстать на выбор веб-дизайн или порода Японская Хаски
- Скопируйте «2urok.html» и переименуйте его на 3urok.html. В title замените 2 урок на 3 урок
- В самом конце документа создайте таблицу Плюсы и минусы профессии. В таблице создайте 4 строки и 2 столбца
<table> <tr> <th>1 строка 1 заголовок столбца</th> <th>1 строка 2 заголовок столбца</th> </tr> <tr> <td>2 строка 1 столбец</td> <td>2 строка 2 столбец</td> </tr> <tr> <td>3 строка 1 столбец</td> <td>3 строка 2 столбец</td> </tr> <tr> <td>4 строка 1 столбец</td><td>4 строка 2 столбец</td> </tr> </table>
Плюсы и минусы профессии
1 строка 1 заголовок столбца 1 строка 2 заголовок столбца 2 строка 1 столбец 2 строка 2 столбец 3 строка 1 столбец 3 строка 2 столбец 4 строка 1 столбец 4 строка 2 столбец После открывающегося тега <table> пропишите название таблицы используя парный тег <caption></caption> — Плюсы и минусы профессии, и задайте следующие стили: размер шрифта — 20px, толщина текста — bold, фон — #FFDCF3;
Объедините смежные ячейки строк первого столбца используется атрибут colspan=»2″
Плюсы и минусы профессии
1 строка 1 заголовок столбца 1 строка 2 заголовок столбца 2 строка 1 столбец 2 строка 2 столбец 2 строка 3 столбец 3 строка 1 столбец 3 строка 2 столбец 3 строка 3 столбец 4 строка 1 столбец 4 строка 2 столбец 4 строка 3 столбец <table> <caption style="font-size:20px;font-weight:bold;background:#FFDCF3;">Плюсы и минусы профессии</caption> <th colspan="2">1 строка 1 заголовок столбца</th> <th>1 строка 2 заголовок столбца</th> </tr> <tr> <td>2 строка 1 столбец</td> <td>2 строка 2 столбец</td> <td>2 строка 3 столбец</td> </tr> <tr> <td>3 строка 1 столбец</td> <td>3 строка 2 столбец</td> <td>3 строка 3 столбец</td> </tr> <tr> <td>4 строка 1 столбец</td> <td>4 строка 2 столбец</td> <td>4 строка 3 столбец</td> </tr> </table>
Объедините смежные ячейки столбцов второго столбца используется атрибут rowspan=»2″ во втором столбце второй ячейке, удалив лишние элементы во втором столбце
Плюсы и минусы профессии
1 строка 1 заголовок столбца 1 строка 2 заголовок столбца 2 строка 1 столбец 2 строка 2 столбец 2 строка 3 столбец 3 строка 1 столбец 3 строка 2 столбец 4 строка 1 столбец 4 строка 2 столбец <table> <caption style="font-size:20px;font-weight:bold;background:#FFDCF3;">Плюсы и минусы профессии</caption> <tr> <th colspan="2">1 строка 1 заголовок столбца</th> <th>1 строка 2 заголовок столбца</th> </tr> <tr> <td>2 строка 1 столбец</td> <td>2 строка 2 столбец</td> <td rowspan="3">2 строка 3 столбец</td> </tr> <tr> <td>3 строка 1 столбец</td> <td>3 строка 2 столбец</td> </tr> <tr> <td>4 строка 1 столбец</td> <td>4 строка 2 столбец</td> </tr> </table>
Заполните таблицу следующим содержимым как на рис.1:
Плюсы профессии:
- постоянная востребованность на рынке труда,
- работа не ограничивается пределами одной страны,
- возможность удаленной работы,
- широкие возможности профессионального роста,
- можно реализовать практически любую идею без денежных затрат,
- достойная оплата труда.
Минусы профессии:
- несовпадение (иногда) художественного видения заказчика и исполнителя, из-за чего приходится либо убеждать в необходимости конкретного дизайнерского решения, либо соглашаться с поправками.
рис.1
<table border="" style="border-collapse:collapse;"> <caption style="font-size:20px;font-weight:bold;background:#FFDCF3;">Плюсы и минусы профессии</caption> <tr><th colspan="2">Плюсы профессии:</th><th>Минусы профессии:</th></tr> <tr><td>постоянная востребованность на рынке труда,</td><td >работа не ограничивается пределами одной страны,</td><td rowspan="3">несовпадение (иногда) художественного видения заказчика и исполнителя, из-за чего приходится либо убеждать в необходимости конкретного дизайнерского решения, либо соглашаться с поправками.</td></tr> <tr><td>возможность удаленной работы,</td><td>широкие возможности профессионального роста,</td></tr> <tr><td>можно реализовать практически любую идею без денежных затрат,</td><td>достойная оплата труда.</td></tr> </table>
- После таблицы вставте следующий текст в абзац
«Конечно, немного странно требовать от дизайнера верстать и программировать то, что он нарисовал. Для верстки существуют верстальщики, для программирования — php-программисты. Но сейчас многие компании ищут универсальных специалистов, которые могут закрыть в компании сразу несколько «дыр». За это, впрочем, и платят значительно лучше и берут на работу охотнее.»
4. Используя маркированный список, добавьте следующее содержимое:
Требования к веб-дизайнеру
Основные требования к веб-дизайнеру таковы:
- Портфолио проектов (иначе говоря, опыт работы).
- Базовые знания HTML‚ CSS и начальные навыки верстки.
- Знание Photoshop, Illustrator, CorelDraw, Flash (изредка другие графические программы).
- Умение создавать иконки, иллюстрации и баннеры.
-
<h3>Требования к веб-дизайнеру</h3> <ul> <strong>Основные требования к веб-дизайнеру таковы:</strong> <li>Портфолио проектов (иначе говоря, опыт работы).</li> <li>Базовые знания HTML‚ CSS и начальные навыки верстки.</li> <li>Знание Photoshop, Illustrator, CorelDraw, Flash (изредка другие графические программы).</li> <li>Умение создавать иконки, иллюстрации и баннеры.</li> </ul>
5. Используя ссылки создайте 3 якоря для заголовков второго уровня и к таблице: w1, w2, w3
<h2 id="w1" style="text-align:center;background: #F1C1FD;letter-spacing:0.3em;">Кто такой Web-дизайнер?</h2> <h2 id="w2" style="text-align:center; background: #FFDCF3;letter-spacing:0.3em;">Описание деятельности</h2> <table id="w3" border="1" style="border-collapse:collapse;">
Используя 3 верхних изображения, сделайте их ссылками на созданные якоря
<a href="#w1"><img src="images/web_design.jpg" alt="Веб дизайнер" height="300px;"></a> <a href="#w2"><img src="images/colorwebdesign.jpg" alt="Веб дизайнер" height="300px;"></a> <a href="#w3"><img src="images/web_design3.png" alt="Веб дизайнер" height="300px;"></a>
6. После заголовка первого уровня создайте тег <nav> и разместите в нем ссылки на, созданные вами на предыдущих занятиях, документы. При этом они должны открываться в новом окне
<nav style="text-align:center;"><a href="1.html" target="_blank">1 урок</a> | <a href="2.html" target="_blank">2 урок</a> | <a href="3.html" target="_blank">3 урок</a></nav>
Вот что у вас должно получиться
<html>
<head>
<title>3 урок-Профессия WEB-ДИЗАЙНЕР</title>
<meta charset="utf-8">
<meta name="description" content="Веб-дизайнер - профессия 21 века.Профессию web-дизайнера является перспективной в карьерном плане.Он специалист в области компьютерных технологий, который отвечает за то, как выглядит и воспринимается Интернет-сайт.">
<meta name="keywords" content="Web дизайнер дизайн страниц графический дизайн интернет сайт компьтерные технологии баннер фриланс свободный график создание сайта web интерфейс художественное оформление сайта">
<meta name="author" lang="ru" content="Жарова Салтанат" >
<meta name="robots" content="index,follow">
</head>
<body style="font-family: Courier New,sans-serif;width:1200px;">
<h1 style="text-align:center;background: #FFDCF3;">Профессия <span style="color:brown;">WEB-ДИЗАЙНЕР</span></h1>
<nav style="text-align:center;"><a href="1.html" target="_blank">1 урок</a> | <a href="2.html" target="_blank">2 урок</a> | <a href="3.html" target="_blank">3 урок</a></nav>
<a href="#w1"><img src="images/web_design.jpg" alt="Веб дизайнер" height="300px;"></a>
<a href="#w2"><img src="images/colorwebdesign.jpg" alt="Веб дизайнер" height="300px;"></a>
<a href="#w3"><img src="images/web_design3.png" alt="Веб дизайнер" height="300px;"></a>
<pre style="text-align: right;">
«Цифровой дизайн похож на живопись, только краски никогда не сохнут».
Невилл Броуди (Neville Brody)</pre>
<hr>
<h2 id="w1" style="text-align:center;background: #F1C1FD;letter-spacing:0.3em;">Кто такой Web-дизайнер?</h2>
<p>Web-дизайн (от англ. Web design) - отрасль web-разработки и разновидность дизайна.<br> <strong>Web-дизайнер</strong> – это специалист в области компьютерных технологий, который отвечает за то, как выглядит и воспринимается Интернет-сайт.</p>
<h3 style="color:#FF00D2;">В обязанности Веб-дизайнера входит:</h3>
<ol>
<li>создание логотипов, баннеров и других элементов графики</li>
<li>продумывает навигацию по сайту</li>
<li>определяет, где следует разместить текст</li>
<li>учет времени загрузки сайта</li>
<li>проектирует пользовательский интерфейс</li>
</ol>
<p style="font-weight: bold; background: #FFDCF3;line-height: 2em;"> <i>Его задача:</i> помочь пользователю сориентироваться на веб-сайте, сделать работу пользователя с веб-сайтом легкой и приятной. В тоже время веб-дизайнер должен помнить, что он создает рекламный продукт, который должен соответствовать поставленным задачам (т.е. доносить некое рекламное сообщение до пользователя). </p>
<hr>
<img src="images/web_design2.jpg" alt="обязанности веб-дизайнера" >
<h2 id="w2" style="text-align:center; background: #FFDCF3;letter-spacing:0.3em;">Описание деятельности</h2>
<p>Основной сферой деятельности web-дизайнера является стилевая, визуальная и программная организация информации электронного формата, логичное и приятное оформление информации, графическое отображение её на страницах Интернета.</p>
<h3>Cредняя заработная плата</h3>
<p style="width: 500px;text-align: center;background: #9BEA9B;line-height: 3em;font-weight: bolder;font-size: 20px;">В Казахстане — 90-200 тысяч тенге</p>
<p style="text-align:right;"><em>Источник HeadHunter</em></p>
<table id="w3" border="" style="border-collapse:collapse;">
<caption style="font-size:20px;font-weight:bold;background:#FFDCF3;">Плюсы и минусы профессии</caption>
<tr><th colspan="2">Плюсы профессии:</th><th>Минусы профессии:</th></tr>
<tr><td>постоянная востребованность на рынке труда,</td><td >работа не ограничивается пределами одной страны,</td><td rowspan="3">несовпадение (иногда) художественного видения заказчика и исполнителя, из-за чего приходится либо убеждать в необходимости конкретного дизайнерского решения, либо соглашаться с поправками.</td></tr>
<tr><td>возможность удаленной работы,</td><td>широкие возможности профессионального роста,</td></tr>
<tr><td>можно реализовать практически любую идею без денежных затрат,</td><td>достойная оплата труда.</td></tr>
</table>
<p>Конечно, немного странно требовать от дизайнера верстать и программировать то, что он нарисовал. Для верстки существуют верстальщики, для программирования — php-программисты. Но сейчас многие компании ищут универсальных специалистов, которые могут закрыть в компании сразу несколько «дыр». За это, впрочем, и платят значительно лучше и берут на работу охотнее.</p>
<h3>Требования к веб-дизайнеру</h3>
<ul>
<strong>Основные требования к веб-дизайнеру таковы:</strong>
<li>Портфолио проектов (иначе говоря, опыт работы).</li>
<li>Базовые знания HTML‚ CSS и начальные навыки верстки.</li>
<li>Знание Photoshop, Illustrator, CorelDraw, Flash (изредка другие графические программы).</li>
<li>Умение создавать иконки, иллюстрации и баннеры.</li>
</ul>
</body>
</html>