УРОКИ HTML5 и CCSS для начинающих с НУЛЯ. Основы. Создание сайта.

Бесплатные видеуроки для новичков. Онлайн обучение для взрослых и школьников.

1. Задания по HTML       2. Задания по CSS3

Здравствуйте друзья !!!


Здесь находятся уроки по курсу "Создание сайтов для новичков. Базовый курс. Frontend разработчик. ". Рассматриваются основы языка HTML, а замем CSS.

А вообще развернутый курс будет состоять из нескольких частей:

1. Вначале у нас идет базовый язык разметки HTML, который вы видите на этой странице. (все уроки по курсу HTML5 здесь)
2. Дальше идет язык который расширяет возможности предыдущего это язык CSS (список уроков по курсу CSS3 тут)
3. Практика 1 и 2. Где мы создадим 2 современных адаптивных сайта лендинга. (весе материалы по практике по ссылке)
4. Обучение - язык программирования JavaScript
5. Курс по языку программирования PHP


Программы для верстки HTML+CSS (бесплатные) Download
Скачать бесплатно Sublime Text текстовый редактор на русском / Саблайм Текст Sublime_Text_Build_3114_Setup.exe
Блокнот Notepad++ – Скачать бесплатно русскую версию для windows / Нотепад++ npp.7.3.Installer-32.exe

1. Создание сайта с нуля html. Начало. Создание сайта самому. Урок 1. HTML5

2. HTML5 с нуля. Создание сайтов для начинающих. Том Круз и его секрет.

3. Создайте первого веб-документа HTML . Расширение и как его включить на операционной системе "Windows".

Элемент <br> (Break) позволяет вставлять в нужном месте перевод строки.

4. HTML теги . Код пробела:   , strong, p. Виды тегов. Закрывающие и открывающие команды языка.

Фрагменты заключенные между знаками "<" и ">" (например, <br>) называется меткой (по-английски — tag, читается "тэг"). ("tag" - переводится как "размечать", "прикреплять бирку" или "помечать")

Код пробела: &nbsp; (суммируется)

(тег <br> от "break" - переводится как "перелом" или "ломать", позволяет вставлять в нужном месте перевод строки. Не имеет закрывающего тега.) (суммируется)
(тег <strong> от "strong" - переводится как сильный " жирный ")
(тег <p> от "paragraph" - переводится как "абзац")
(тег <i> от "italic" - переводится как "курсивный" или "италийский")

5. Обучение HTML5. Теги: "!DOCTYPE HTML" , "head" , "title" , "body" . Структура HTML5 документа. Из чего состоит веб-документ в интернете.

<!DOCTYPE HTML>
<html>

<head>
<title> Заголовок страницы </title>
</head>

<body>
Содержание
</body>

</html>

(тег <head> - переводится как "голова")
(тег <title> - переводится как "заглавие")
(тег <body> - переводится как "тело")

6. HTML5 с нуля. Теги заголовков "h1" - "h6" HTML5. Атрибут "align"

Заголовки в HTML размечаются с помощью тегов <h1> , <h2> , <h3> , <h4>, <h5> , <h6> .

(тег <h1> от "header" - переводится как "головная часть" или "основание", "header" от "head" - голова)

аттрибут (от лат. attribuo — свойство, придаю, наделяю), необходимое, существенное, неотъемлемое свойство объекта. Напр., А. стола — вес. А. материи — движение. <h1 align="center"> и <p align="center"> , <br align="center">.

( align - переводится как "выравнивать" или "присоединяться" . Атрибут может принимать значения : left, center, right, justify)
( left - переводится как "левый")
( center - переводится как "центр")
( right - переводится как "правый")
( justify - переводится как "выравнивать")

7. Веб программирование. Метатеги, utf-8. Юникод. Кодировка текста. Unicode. Ошибки отображения текста на страницах сайта.

<meta charset="utf-8"> кодировка текста
Метатеги (англ. meta tags) предназначенные для предоставления структурированных метаданных (дополнительных, сопроводительных) о веб-странице. 
( charset - переводится как кодировка )

utf-8 (от англ. Unicode Transformation Format - Формат преобразования Unicode, 8-bit — «формат преобразования Юникода, 8-битный»)
Юнико́д (чаще всего) или Унико́д (англ. Unicode) — стандарт кодирования символов, позволяющий представить знаки почти всех письменных языков. Стандарт предложен в 1991 году некоммерческой организацией «Консорциум Юникода» (англ. UnicodeConsortium, Unicode Inc.).

8. Списки HTML5. Теги: "ol", "ul", "li". Атрибут type (disc, circle, square ... )

<ol>
<li>Закрывайте теги</li>
<li>Ставьте кавычки</li>
<li>Пишите на аглийском</li>
</ol>

(тег <ol> от Ordered List - переводится как "упорядоченный список")
(тег <ul> от Unordered List - переводится как "неупорядоченный список")
(тег <li> от List Item - переводится как "элемент списка")

<ul>
<li>выполняйте обещания</li>
<li>будте ответственны</li>
<li>будте вежливы</li>
</ul>
Атрибут type ( type - переводится как "тип")

<ol> type="1" type="a" type="A" type="i" type="I"

<ul> type="disc", type="circle", type="square"

9. Ссылки на документ. Тег "a". Атрибут href="#" . Абсолютные и относительные ссылки. HTML5

тег <а> - для разметки ссылок.
("а" от "Anchor" - переводится как "якорь") <a href="#"> ссылка </a> не на что
<a href="1.html">ссылка</a> на файл 1.html

Для обозначения точки назначения ссылки используется
атрибут href (Hypertext Reference - "hypertext" - ссылка, "reference" - справка ), а в качестве его значения указывается URI (Universal Resource Identifier - адрес что ссылка открывает) универсальный идентификатор ресурса.
Ссылки делятся на абсолютные и относительные.

<a href="http://24navo.com/">ссылка</a>
Это абсолютная ссылка, потому что в атрибуте href указан полный адрес. Полный адрес обычно применяется для создания ссылок, которые ведут на внешний сайт.

Для ссылок на страницы собственного сайта могут использовать относительные ссылки. Они отличаются от абсолютных тем, что адрес задается относительно данной страницы:
<a href="uchenik.html">КАК ПОДГОТОВИТЬСЯ К ЭКЗАМЕНУ </a>

Такая ссылка будет корректно работать, если файлы находятся в одной директории (папке) на сервере. Если вы создадите директорию 11clas и перенесете в нее файл uchenik.html, то ссылка примет такой вид:
<a href="11clas/3.html"> переход к документу 3 </a>

10. тег "img" вставка картинки в HTML. Атрибуты: src, height, width. HTML5 CSS для новичков.Верстка

Картинки размечают с помощью  тега <img> (Image - изображение). У него есть обязательный атрибут src, в котором указывается путь к файлу с изображением. 

атрибут src (source - источник) принимает значения адреса страницы

<img src="1.gif">
<img src="i/2.png">
<a href="1.html"><img src="3dog.jpg"></a>

атрибут height (высота) принимает значения высоты
атрибут width (ширина) принимает значения ширины

11. Тег "img". Атрибуты: alt, title. HTML5 CSS3. Создание сайта с нуля. Для начинающих
Картинки размечают с помощью  тега <img> (Image - изображение). У него есть обязательный атрибут src, в котором указывается путь к файлу с изображением. 

атрибут alt (альтернативный текст) принимает значение описания страницы
атрибут title (заглавие) принимает значение описания объекта

12. Ссылки на .mp3, .mp4, .doc, .rar, .txt . Атрибут: target (_self, _blank). Создание сайта html
атрибут target (цель, мишень) принимает значения _self (себя), _ blank (чистый, пустой) ...

Как выгрузить сайт в интернет на хостинг. Что такое домен. Коды стран. Справочник. ISO. Сокращенные обозначения стран


Отзывы


Выражаю огромную благодарность Михаилу за обучение. За время обучения я освоил помимо начальных знаний о вёрстке сайтов, также большинство интересных трюков программирования и web дизайна. Благодаря полученным знаниям HTML и CSS для меня теперь, также просто как чтение простых книг. Опять же, выражаю благодарность Михаилу за его усилия в обучении. Создал свой первый сайт, который у меня заказали ritual-victor.by    Instagram
Артем



Доброе утро! Проходя курсы по вестке сайта html + css + php я узнал о том, как создаются страницы сайтов. В ходе обучения я создал свой небольшой адаптивный сайт на музыкальную тематику(Landing Page). Верстка сайта оказалась для меня очень интересной темой и я хочу сказать спасибо Михаилу за интресные уроки и полученные знания. В дальнейшем планирую использовать пройденный материал на создании сайтов. 21.08.2017   Вконтакте
Денис Курьян



Добрый день.Работаю геодезистом в проектной организации. Задался целью освоения новых для себя знаний. Проходил курсы по html-верстке. Целью было узнать основы создания Интеренет-страниц. Результатом моего двухмесячного обучения стал небольшой сайт. В нем я использовал усвоенные мною знания после прослушивания полного курса. Понравился принцип построения занятий. В дальнейшем планирую обучаться языкам программирования, и самосовершенствоваться в данном направлении. Спасибо преподавателю Михаилу за полученные знания и терпение!    Вконтакте
Антон Зинченко



Всем доброго времени суток. На данный момент я являюсь студенткой 2 курса БГУИР (Белорусского Государственного университета информатики и радиоэлектроники). Обучаясь на курсах по Web-программированию, я изучила язык HTML, научилась работать с каскадными таблицами стилей (CSS). Освоила программу Dreamweaver.С помощью всех этих знаний смогла создать сайт. Сейчас продолжаю проходить курсы по JavaScript. Спасибо за обучение. (Все очень понятно и доступно).
Романовская Алеся



Пришла на курсы "по созданию и продвижению сайтов", для того что бы, созданный сайт продвинуть в интернете в топ 3, за буквально занятия 4 мой сайт minsk-krovlya.by поднялся по 9 высокочастотным запросом в топ 3, результатом очень довольна благодаря Михаилу. Спасибо большое за результат тот которого я ждала. Сейчас продолжаю проходить курсы по HTML+CSS, Javascript.    Вконтакте
Ярошевич Татьяна



Проходила курсы по html-верстке. Изначально хотела узнать основы для личного понимания написания сайтов. Но в процессе обучения, во многом благодаря преподавателю Михаилу, его умению вовлечь в рабочий процесс, разъяснить и помочь, у меня проснулся большой интерес к занятию в этой сфере. После двух месяцев обучения html, css, основам php и javascript, моей завершающей работой стал одностраничный сайт. В нем я использовала усвоенные мною знания после прослушивания полного курса. Понравился принцип построения занятий. Преподаватель подает современную информацию, что немаловажно в столь быстро изменяющихся условиях создания и продвижения сайтов. Кроме того, в процессе обучения я научилась писать сайт по шаблону, созданному в Photoshop. В дальнейшем планирую обучаться языкам программирования, перепрофилироваться и стать хорошим верстальщиком. Спасибо за обучение и терпение к слушателям курсов!    Вконтакте
Оля Володько



Обучаясь на курсах по программе Web-программирование, научилась разбираться в кодах html5, css3, flash, JavaScript, php. Материал подан качественно и понятным языком. Спасибо преподавателю Михаилу. Считаю большим плюсом наличие видео уроков. Если что-то не понятно, можно вернуться и повторить. Благодаря Михаилу, заданные вопросы нашли решения. В конце обучения сверстала    адаптивный одностаничный сайт    Landing page и выгрузила в интернет. Изучала курс для того, чтобы самой научится разбираться в технической части создания сайта, чтобы расширить свои возможности в области дизайна. Спасибо за обучение!!!    facebook
Полина Ивановна Ширченк



Я, Кузнецова Татьяна Леонидовна работаю дизайнером в издательском центре «Марка» при «Белпочте» Посещала курсы и научилась многим полезным вещам, нужным для моей работы. Я изучала 3D MAX и вёрстку в HTML и PHP. Я узнала о новых возможностях работы в Internet(e) и сделала свой сайт-визитку. Хорошо, что есть такие курсы и большое спасибо преподавателю за терпение и желание научить.
В результате занятий получился сайт с моим портфолио.
Кузнецова Татьяна Леонидовна


Проходя текущий курс я узнал:что такое HTML и CSS , сcылки, таблицы, объекты и так далее в HTML.Узнал что такое "Каскадные таблицы стилей" и их применение.Научился верстать сайт блочным и табличным методом. Большое спасибо преподавателю Михаилу за поняное обьяснение курса. Всем советую обращаться в данное заведение.
Эдуард Грунин



Я прошла курс верстки HTML и CSS, изучила, как делать web-страницы, как менять текст, как применять каскадные таблице стилей, как вставлять картинки и ссылки, и др. В отзыве все не опишешь, надо приходить и делать самим, чтобы убедиться, что это на самом деле просто и, при этом, интересно.
Еще со времен активного использования сайта diary.ru меня интересовало, как самой сделать красивый CSS дизайн страницы, теперь мне понятно, как это можно сделать, хотя сайтом уже практически не пользуюсь, но уверена, что эти знания пригодятся в других сферах.
Никогда бы не подумала, что заинтересуюсь такой сферой, но тем не менее рада, что поменяла свое мнение на этот счет.
Полезные навыки, сама бы так и не собралась все это изучить, курсы очень помогли. С благодарностью, Нэтта. Вконтакте
Нэтта Корниенко


Во время данного курса были изучены основные понятия по HTML и CSS (структура html-документа; основные теги и стили относительно таблиц, ссылок, картинок и списков; особенности подключения стилей; свойства текста и фона; блоки и формы; границы и отступы). Были рассмотрены основные понятия по CSS, которые необходимы для верстки сайта. Также были изучены возможности Flash и Dreamweaver.Все вопросы рассматривались теоретически и отрабатывались на практике. На основании полученных знаний был создан сайт.
Мне очень понравилось, что на практике отрабатывалось именно то, что может пригодиться в работе. Также очень удобно проходить весь материал в своем темпе и не зависеть от группы. В дальнейшем я хочу заниматься версткой сайтов. Данный курс дал необходимые знания. Думаю, что полученные знания, пригодятся и помогут в работе.
Солонович Марина


1 Пока я был на курсах, я научился обрабатывать фотографии в фотошопе, и работать в Corel. Так же я сделал свой первый сайт с использванием полученых знаний по HTML+CSS, Dreamveawer, о игре Сonter-Strike, сокр.CS:GO .
Вообще я умею работать в Adobe Primier Pro cs 5,6 Sony Vegas pro 10,11,12,13. Camtasia Studio. (Монтаж видео) Записывать видео в Bandicam. И ещё работать в CINEMA 4D R12,13,14,17. Рад Вас приветствовать на своём сайте.
Антон Витальевич Анопреенко (10 лет) Вконтакте


1 Я, Анищенко Александр Евгеньевичь проходил эти курсы узнал что такое HTML и CSS : ссылки, таблицы, обьекты многое другое. Узнал по каким правилам создаються те или иные варианты web-документов. Эти знания и их сила навсегда преобразовала мою жизнь в корне. Проходя фотошоп вобрал в себя всю силу этого растрогого редактора. Благодаря уникальным урокам стал настоящими профи(как я думаю). В итоге я сам смог создать портфолио по веб-дизайну и оформил его как сайт. Остался очень доволен.


Анищенко Александр


За время обучения я получил для себя новый опыт и знания в области Web-программирования. Научился работать с вэб сайтами и понял как это работает, а так же узнал много нового для себя. Научился использовать каскадные табличные стили и многое другое, а также применял это на практике. Полученные знания я буду использовать для продвижения и обслуживания своего сайта по ремонту и пошиву обуви и кожгалантереии kachestvorabot.by

Вконтакте, Группа вконтакте
Иванов Владимир Олегович



Я ходила на курсы верстка web-сайта (HTML, CSS, JavaScript, PHP). На курсах я научилась создавать таблицы, вставлять фотографии, музыку, загружать видео на страницы html, создавать разный дизайн страницы. Создавать сайты оказалось очень интересным занятием. Надеюсь полученные знания помогут мне в моей дальнейшей работе. Преподователи хорошие, всегда приходили на помощь, если что-то не получалось. По итогу курса создала свой первый сайт посвещенный моему брату, профессиональному боксеру (будущему "Майк Тайсону") Ивану Баранчику

Вконтакте
Баранчик Дарья Анатольевна



Буквально пару дней назад я завершил работу над своим партфолио-сайтом с работами по web дизайну. Во время работы я прописывал код HTML + CSS, применял код javascript для работы галереи на сайте и проделывал работу с контактной формой с применением языка PHP, а так же я создавал ссылку для мобильного номера. Тема разработки сайтов для меня оказалась очень увлекательной и запоминающейся. Я очень благодарен администрации курсов и Михаилу за то что научили меня этому творческому делу.

Вконтакте
Денис Курьян


 

 

 

 

 

 

перейти вверх страницы