html - Работа с компьютером
advertisement
* Создание сайта —
визитка
Уроки по работе с компьютерами и
программированию
* HTML– язык разметки
гипертекста
*
Cтруктура html страницы
1. Копируем папку html в C:\xampp\htdocs
2. Набираем в браузере http://localhost/html/
*
Cтруктура html страницы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
- тег указывающий тип текущего документа,
чтобы браузер понимал, как следует
интерпретировать текущую веб-страницу
*
Cтруктура html страницы
<html> - тег определяющий начало html файла
<head> - тег в котором содержится заголовок
документа
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8">
- тег определяющий кодировку документа
*
Cтруктура html страницы
<title> - тег, определяющий заголовок web
страницы
<body> - тег, в котором содержатся теги
содержательной части веб-страницы
<h1> - тег, который выделяет текст, как
заголовок
<p> - тег, определяющий абзац текста
* CSS – язык описания внешнего
вида страницы(стили)
*
Подключение css
1. Копируем папку books в C:\xampp\htdocs
2. Набираем в браузере
http://localhost/books/
*
Структура css
Селектор – Свойство – Значение
body {
background: #fff;
color: #222;
padding: 0;
margin: 0;
font-family: "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
font-weight: normal;
font-style: normal;
line-height: 1.5;
position: relative;
cursor: auto; }
*
Значение свойств
background: свойство для изменения фона
color: свойство для изменения цвета текста
padding: свойство для изменения расстояния от
внутреннего края рамки элемента до содержимого
margin:свойство для изменения расстояния от границы
элемента до внутренней границы родительского
элемента
font-family: свойство для изменения типа шрифта
*
Значение свойств
font-weight: свойство для изменения насыщенности
шрифта
font-style: свойство для изменения начертания шрифта
line-height: свойство для изменения межстрочного
интеравала
position: свойство для изменения позиционирования
элемента
cursor: свойство для изменения формы курсора
*
Д/з
1. Читать самоучитель по html и сss:
http://htmlbook.ru/samhtml
http://htmlbook.ru/samcss
2. Придумать тему для своего сайта визитка и сделать
его на основе “books”
