Конспект по HTML5/CSS3

Материалы по оформлению веб-страниц


Страница занятия
https://medium.com/@proorlov/dcfe1f631af1

Редакторы и сервисы для создания веб-страниц

https://www.sublimetext.com — оптимально
http://notepad-plus-plus.org — бесплатно win
http://www.barebones.com/products/textwrangler/ — бесплатно mac
http://www.jetbrains.com/webstorm/ — IDE для сложных проектов
http://www.eclipse.org — IDE для сложных проектов
http://codepen.io — online сервис
http://jsfiddle.net — online сервис

Имя и кодировка файла, ведение проекта

index.html, utf8 no-BOM — главный файл
/css/ — папка со стилями
/js/ — папка со скриптами
/img/ — папка со служебными картинками
/pub/ — папка с картинками из контента

Простейший современный html-документ

<!DOCTYPE html>
<html>
<head><title>заголовок<title><head>
<body>текст</body>
</html>

Добавление информации на страницу

<h1>,<h2>,<h3>,<h4>,<h5>,<h6> — заголовки
<img src=“…”> — картинка
<ul><li> — ненумерованный список
<ol><li> — нумерованный список
youtube — вставка видео
vimeo — вставка видео
<table><tr><td> — не использовать для структуры страницы

Типографика

http://www.htmlhelp.com/reference/html40/entities/
кавычки &laquo; &raquo;
тире &mdash;
неразрывные пробелы &nbsp;
отсутствие лишних переносов строк

Оформление содержания

<br> — перенос строки
<p> — абзац
разница между <strong> и <b>
разница между <em> и <i>

Контейнеры

<span> — строчный
<div> — блочный

Адаптивная верстка

размеры в em, ширины в %

Связь между несколькими страницами

тег <a>

Системные шрифты

Arial
Arial Black
Comic Sans MS
Courier New
Georgia
Impact
Times New Roman
Trebuchet MS
Verdana

Валидаторы для проверки кода

http://validator.w3.org
http://jigsaw.w3.org/css-validator/
http://www.jslint.com

Участникам занятия доступна видеозапись.

Самостоятельная работа

  • сверстать спроектированную страницу
  • найти в интернете ответы на возникшие вопросы
  • что хотите узнать подробнее по теме занятия?
  • что хотите узнать по смежным темам?
Вопросы по курсу и запись на курс
https://www.facebook.com/proorlov
Skype: orlov.mobile
E-mail: orlov.mobile@gmail.com
Tel: +7 919-393-16-09

ilia orlov

Email me when ilia orlov publishes or recommends stories