Файловый архив студентов. Файловый архив студентов.
1261 вуз, 4607 предмет.
/ Регистрация
FAQ Обратная связь Вопросы и предложения
Добавил:
Upload Опубликованный материал нарушает ваши авторские права? Сообщите нам.
Вуз:
Минский государственный высший радиотехнический колледж
Предмет:
[НЕСОРТИРОВАННОЕ]
Файл:
Введение в Веб программирование.doc
Скачиваний:
81
Добавлен:
07.11.2018
Размер:
4.42 Mб
Скачать
☆
►Содержание►

Вопросы и задания

1. Перевод текста с кириллицы на транслит.

2. Перевод текста с транслита на кириллицу.

3. Перевод сайта на английский / с английского языка.

4. Сайт на белорусском языке. Какую кодировку использовать.

5. Кодировка UTF-8.

6. Встраивание MathML в HTML.

7. Что такое text/html.

8. Что такое валидность.

9. Как добавить статьи или новости не переделывая страницу. CMS.

Задания для выполнения

  1. визитка для ученого

  2. визитка учреждения

  3. блоги

  4. вики

  5. учебный сайт

  6. новостной сайт

  7. тематический сайт

  8. математический сайт

  9. электронный журнал

  10. бизнес – сайт

  11. корпоративный сайт

  12. Интернет магазин

  13. Книжный магазин

  14. Музыкальный магазин

  15. Интернет-магазин по продаже косметики.

  16. Интернет-магазин по продаже компьютерной техники.

  17. Сайт рекламирующий определенный товар, например баскетбольные мячи.

  18. Продажа печек для бань и сопутствующих товаров

  19. игровой сайт

  20. музыка

  21. служба знакомств

  22. словарь переводчик

  23. поддержка мобильной связи, рассылка SMS сообщений

  24. Электронный учебник

  25. Образовательный сайт

  26. Технология RSS. Агрегатор News Reader.

  27. Информеры. Погода, афиша, курсы валют, гороскоп: например, на afn.by

<a href= “http://www.afn.by/”>

<ima stc= “http://www.afn.by/finances/ticket/”>

border=”0”/> <a> – включение инфорера

  1. Баннеры. Банерные сети.

  2. Персонализированная on-line реклама.

  3. Системы коллективной разработки приложений assembla.com.

  4. Зоопарк

  5. Путешествие, отдых

  6. Сайт компании по производству специфического товара, например, сыра.

  7. Сайт болельщиков какой-либо спортивной команды.

  8. Сайт школьного учителя-предметника.

  9. Сайт преподавателя университета.

  10. Изучаем английский язык.

  11. Сайт студенческой группы.

  12. Сайт писателя.

  13. Сайт поклонников какой-либо знаменитости.

  14. Сайт турагенства.

  15. Сайт букмекерской конторы.

  16. Сайт любителей логических игр.

Каскадные таблицы стилей css

CSS (Cascading Style Sheets - Каскадные таблицы стилей) – это технология описания внешнего вида документа, написанного языком разметки. Основная идея CSS состоит в том, чтобы отделить дизайн документа от его содержимого. В CSS описываются характеристики объекта, затем объект связывается со стилем. Чтобы поменять характеристики объекта, достаточно изменить описание стиля.

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

CSS преимущественно используется как средство оформления веб-страниц в формате HTML и XHTML, но может применяться с любыми видами документов в формате XML.

Способы включения каскадных таблиц стилей

CSS можно включить в HTML-документ четырьмя способами:

Встраивание стиля (inline styles). Стиль встраивается непосредственно в тег HTML – документа в свойстве style этого тега. Например:

<p style="font-size: 21px; color: green;">текст</p>

<span style="color:red; background-color:yellow;

font-variant:small-caps">Красный текст на желтом фоне,

маленькими заглавными буквами.</span>

Кроме приведенных в примере стили часто встраиваются в теги h, body.

Считается, что способ встраивания стиля несколько нарушает идеологию CSS.

Внедрение таблицы стилей внутрь HTML документа (embedded style sheet). При этом CSS-стили располагаются между открывающим и закрывающим тегами элемента style. Тег <style> размещается в заголовке HTML-документа между тегами <head> и </head> и содержит определения стилей для данного HTML-документа:

<style type="text/css">

<!—описание стиля-->

</style>

Связывание. Если предполагается использовать один стиль для нескольких страниц документа, можно описать стиль в отдельном файле. Для подключения стилевого файла используется тег <link>, расположенный внутри тега <head>.

<link rel="stylesheet" type="text/css" href="style.css" />

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

Импортирование - добавление внешней таблицы стилей при помощи правила @import. В отличие от HTML-тега <link> правило @import является языковой конструкцией CSS и добавляется в элемент style:

<style type=”text/css”>

@import "style.css";

</style>

Свойство @import таблицы стилей следует задавать в начале стилевого блока или связываемой таблицы стилей перед заданием остальных правил. Значением свойства @import является URL файла, содержащего таблицы стилей. Импортирование - позволяет встраивать в документ таблицу стилей, расположенную на сервере.

Стили

Стиль – это правило, описывающее форматирование фрагмента документа. Каждое правило состоит из селектора и определения. Селектор задает элемент HTML, а определение задает значения свойств этого элемента в фигурных скобках.

Selector{

property: value;

property: value;

property: value;

}

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

Синтаксис. В CSS в качестве селектора выступают теги HTML. Определение задается в фигурных скобках. Если у заданного свойства несколько значений, то они отделяются друг от друга пробелами. Описания отделяются друг от друга точкой с запятой:

Тег-селектор{

свойство1: значение1 значение2;

свойство2: значение;

}

Селектором может быть любой элемент HTML, например

html {color: black;}

p {color: red;}

h2 {font-size: 110 %;}

Ниже приводится простой пример кода CSS, встраиваемого в HTML страницу. Этот код должен располагаться внутри элемента <head>. Селектором является тег <body>

<html>

<head>

<title>Пример css, встраиваемого в HTML страницу</title>

<style type="text/css">

<!-- body { color: gold; background: blue; font: bold 14px comic sans ms; text-align: justify; margin: 10px; } -->

</style>

</head>

<body>

Этот текст имеет вид, определенный таблицей стилей: золотые буквы на голубом фоне, жирный шрифт Comic Sans MS размером 14 пикселей и выровненный по обоим краям с отступами со всех сторон 10 пикселей.

</body>

</html>

По традиции для совместимости со старыми браузерами, не понимающими CSS содержимое элемента <style> заключают в комментариях <!-- -->, иначе содержимое будет отображено в окне браузера. Новые браузеры поймут, что в комментариях заключена таблица стилей и подключат ее. Для удобства чтения/правки, в таблицу стилей можно ставить любое количество пробелов и переносов строк, браузер оставит столько, сколько нужно.

Группирование. Если двум селекторам присваивается одинаковое определение, то можно записывать их через запятую:

h1, h2 {

font-family: arial

}

Если селектор имеет несколько определений:

h1{font-weight:bold} h1 {font-size: 14pt}

то они записываются через точку с запятой:

h1 {font-weight: bold; font-size: 14pt;}

Наследование. При определении стиля элемента, вложенные элементы наследуют свойства головного элемента. Например, если в параграфе <p> задается красный цвет шрифта, то выделенный с помощью <b> текст также будет красным:

<p style=”color: red;”>Внутри параграфа с красным цветом текста, <b>выделенный текст</b> наследует цвет головного тега.</p>

Наследование удобно использовать для описания свойств элементов по умолчанию. Для этого достаточно описать стиль тега <body>, порождающего остальные элементы документа.

CSS- Классы

Чтобы определить стиль так, чтобы одни и те же элементы в разных случаях отображались по-разному, необходимо использовать классы. Сначала класс описывается в виде:

.classname{свойства}

Затем свойства класса присваиваются тегу с помощью атрибута class этого тега:

class="classname"

Это можно продемонстрировать на следующем примере:

<html>

<head>

<title>Использование классов</title>

<style type="text/css">

.font1 {

color: yellow;

background: red;

}

.font2 {

color: blue;

background: yellow;

}

</style>

</head>

<body>

<span class="font1">Желтый текст на красном фоне</span>

<span class="font2">Синий текст на желтом фоне</span>

А здесь цвет фона и текста заданы по умолчанию.

</body>

</html>

В примере прописаны два класса «font1» и «font2» задающие цвет фона и изображения. Эти классы были затем применены к тегу <span>. Свойства, прописываемые классом, могут быть присвоены любому тегу (если он обладает свойствами, описанными в классе). Например, класс font1, определенный в предыдущем примере может быть применен к таблице:

<table class="font1"> <tr>

<td>Это ячейка таблицы</td>

<td>и это тоже</td>

</tr> <table>

Если необходимо определить класс для конкретного тега, то используется конструкция:

имя_тега.имя_класса {свойства}

Например, нам нужно часть текста выделить красным. Определим класс select для тега <span>:

<html>

<head>

<title>Использование классов</title>

<style type="text/css">

span.select {color: red;}

</style>

</head>

<body>

Здесь мы выделили <span class="select">часть текста.</span>

</body>

</html>

Если необходимо поменять стиль выделения текста с помощью класса «select» во всем документе с красного, на другой цвет, то достаточно поменять значение цвета в определении этого класса. Изменения вступят в силу сразу же во всем документе. Если на всех страницах сайта подключается один и тот же стилевой файл, то изменение свойств класса в этом файле приведет и к изменению стиля соответствующий тегов на всех страницах сайта.

Соседние файлы в предмете [НЕСОРТИРОВАННОЕ]
Помощь Обратная связь Вопросы и предложения Пользовательское соглашение Политика конфиденциальности