Презентация, доклад на тему Создание сайта в HTML и СSS

Содержание

ТегТег – указатель разметки

Слайд 1Основы HTML

Основы HTML

Слайд 2Тег
Тег – указатель разметки

CELLSPACING=2 BORDER=6>


ТегТег – указатель разметки

Слайд 3Контейнер
Контейнер – это элемент разметки HTML

содержание контейнера


web-страница
абзац
таблица

КонтейнерКонтейнер – это элемент разметки HTMLсодержание контейнераweb-страницаабзацтаблица

Слайд 4Есть не закрывающиеся теги:




Есть не закрывающиеся теги:

Слайд 5Правила организации разметки


1
2


3
4


Правила организации разметки			1		 2				3		 4

Слайд 6Специальные символы CER (Character Entity Reference)

Специальные символы CER (Character Entity Reference)

Слайд 7Группы тегов:
определяющие структуру документа;
оформление блоков гипертекста (параграфы, списки, таблицы, картинки);


гипертекстовые ссылки и закладки;
формы для организации диалога;
вызов программ.

Группы тегов:определяющие структуру документа; оформление блоков гипертекста (параграфы, списки, таблицы, картинки); гипертекстовые ссылки и закладки; формы для

Слайд 8Структура html-документа


Простейший документ

Пример простого документа



Структура html-документаПростейший документ Пример простого документа

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

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

Слайд 10CSS
Cascading Style Sheets (Таблицы Каскадных Стилей) – это язык, содержащий набор

свойств для описания внешнего вида любых HTML документов.
CSSCascading Style Sheets (Таблицы Каскадных Стилей) – это язык, содержащий набор свойств для описания внешнего вида любых

Слайд 11Стилевые правила

Стилевые правила

Слайд 12Внутренние таблицы стилей




Внутренние таблицы стилей

Слайд 13Внешние таблицы стилей
body {
color: #545C66;
background: #FFFFFF;
}

h1 {
font-size: 1.5em;
font-weight: normal;
}

a:hover {
text-decoration: underline;
}


Внешние таблицы стилейbody {	color: #545C66;	background: #FFFFFF;}h1 {	font-size: 1.5em;	font-weight: normal;}a:hover {	text-decoration: underline;}

Слайд 14Классы и идентификаторы
.имя_класса {стилевые правила}

#имя_идентификатора {стилевые правила}

Классы и идентификаторы.имя_класса {стилевые правила}#имя_идентификатора {стилевые правила}

Слайд 15.small {
color: #8E9CAE;
}

a.buttonl:hover {
text-decoration:none;
color:#aaa;
background-color:#99ccff;
}

#body {border: 1px;

width:776px;
}



текст




текст








.small {	color: #8E9CAE;}a.buttonl:hover {	text-decoration:none;	color:#aaa;	background-color:#99ccff; }#body {border: 1px;       width:776px;}тексттекст

Слайд 16Ссылки на документы
contact.html
image/contact.png
../image/contact.png

Ссылки на документыcontact.htmlimage/contact.png../image/contact.png

Слайд 17Справочники
http://htmlbook.ru/
http://css.manual.ru/
http://www.wisdomweb.ru/
и др.

Справочникиhttp://htmlbook.ru/http://css.manual.ru/http://www.wisdomweb.ru/и др.

Что такое shareslide.ru?

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


Для правообладателей

Яндекс.Метрика

Обратная связь

Email: Нажмите что бы посмотреть