Меню
✘Скрыть меню
Меню заработка
✘Скрыть меню
Загрузка.. nostroma.online from NOSTROMA - best life and beautiful workЭто ужасно тяжелая работа — ничего не делать – Оскар УайльдРешающую роль в работе играет не всегда материал, но всегда мастер – Максим ГорькийЯ слишком энергичен, чтобы работать – Марсель АшарЧто привлекло меня в карьере писателя? Отсутствие бумажной работы.Одни люди работают только для того чтобы работать, другие – для того, чтобы иметь возможность не работать в будущем.Занятие ерундой на рабочем месте развивает боковое зрение, слух и бдительность в целомСтоит статýя в лучах заката с огромным буем, в руках - граната.Друзья, если вы попались на лохотрон, не будьте эгоистами - предупредите других о таком сайте!Секрет гения — это работа, настойчивость и здравый смысл. Томас Эдисон
Меню заработка

Курсы HTML/CSS

Урок 1. Введение

Содержание курса

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

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

Многие сайты пестрят рекламами о продвинутых html и css онлайн-курсах, естественно за немалые, скажу я вам, деньги, но чтобы сделать свой сайт и даже выполнять многие сайты на заказ, вам не нужны новейшие разработки html и css, достаточно знать основы и понимать, как это работает, а остальные новшества можно посмотреть в справочниках - это дело пары минут. Научится вы можете самостоятельно! Естественно на это потребуется время и силы, но эти знания будут приносить вам деньги и работу в удовольствие. Итак, приступим.

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

Как все это устроено

Давайте разберёмся для начала, как работает веб-сервер, чтобы иметь представление, так сказать, о самой основе. В упрощённом виде виде работу сервер-клиент можно изобразить так:

Когда вы запрашиваете из интернета какую-то страниицу, ваш браузер стучится к веб-серверу и запрашивает нужный документ.

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

HTML был придуман в 1991 году и в начале был достаточно прост и примитивен. Затем, с развитием технологий он стал усложняться. В 1995 году на свет появилось CSS - каскадная таблица стилей, позволяющая разделить сам текстовый файл от его оформительских свойств. В общем-то говоря HTML - это не язык программирования, а банальный язык текстовой разметки.

Для работы с HTML рекомендую текстовый редактор Notepad++. Перед началом написания кодов в этом редакторе на вкладке "кодировка" установите кодировку "utf-8 без BOM", а для запуска написанного кода в браузере используйте вкладку "запуск".

Так повелось, что главный файл на сайте носит название index.html, хотя в настройках все это можно изменить.

Программы - браузеры, предназначенные для чтения документов, понимают только разметку, которая выглядит в виде специальных тегов. К примеру, если в блокноте вы нажмете enter и перенесете строку, то браузер вас не поймет и отобразит все в одну строчку; для разметки переноса строки в HTML используется тег <br />

Вся HTML разметка состоит из элементов. Любой элемент состоит из 3-х составляющих: открывающий тег <имя_тега> Содержание элемента и закрывающий тег </имя_тега>. Без комментариев это будет выглядеть так: <имя_тега>Содержание элемента</имя_тега>

Вот, в принципе, и весь механизм работы HTML и все, что потребуется дальше - это изучение тегов и их своиств (атрибутов).

Каждый HTML документ имеет древовидную структуру. Это напоминает принцип матрёшки, когда в одном элементе вложен другой, в нем третий и т.д. Однако есть основные элементы любого HTML документа, которые всегда следуют друг за другом и нарушение этих правил приведёт к неправильному отображению документа в браузере. Эта HTML структура такова:

<html>
<head>Служебная информация (в браузере не отображается)</head>
<body> Содержание документа, отображаемое в браузере </body>
</html>

внутри HTML документа, между тегами <html></html> мы видим две логические части head и body. Внутри элемента <head></head> располагается служебная информация, предназначенная для обработки серверными программами, а вот внутри элемента <body></body> распологается именно та информация, которая должна отображаться в браузере и быть видна пользователю.

Когда элементы вкладываются друг в друга, их принято сдвигать табуляцией или пробелами для того, чтобы код было удобнее читать человеку (программисту). Например, так:

<html>
    <head></head>
    <body></body>
</html>

К таким мелочам лучше приучаться сразу, т.к. переучиваться потом будет очень и очень сложно.

Содержание элемента head

Одним из самых важных элементов в <head> - это заголовок документа - элемент <title></title>

<html>
    <head>
        <title>
Заголовок документа</title>
    </head>
    <body>
Содержание документа</body>
</html>

Заголовок документа будет отображаться на вкладке в верхней части браузера.

Комментарии в HTML

В HTML есть комментарии, которые могут понадобиться программисту, чтобы не запутаться в коде. Комментарии никак не влияют на поведение документа в браузере и не отображаются в нем, а видны только программисту в его коде в текстовом редакторе.

Комментарии в HTML оформляются так: <!--Какой-то комментарий-->

Комментарии также могут использоваться для временного отключения участка кода.

Заголовки и абзацы в документе

В любом документе должны быть заголовки, отделяющие одну смысловую часть текста от другой. В HTML есть 6 уровней заголовков, которые выглядят так:

<html>
    <head>
        <title>
Заголовок документа</title>
    </head>
    <body>
        <h1>
Самый большой заголовок первого уровня </h1>
        <h6>
Самый маленький заголовок шестого уровня </h6>
    </body>
</html>
Вид в браузере:

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

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

Элементы заголовков относятся к блочным элементам и рядом стоять не могут, а будут занимать всю строку целиком. Запомните эту особенность блочных элементов в HTML.

Элемент абзаца в HTML также относится к блочным элементам и оформляется так:

<p>Какой-то абзац</p>

Следует учитывать, что в HTML не всегда можно вложить одни элементы в другие, например в заголовках не может быть ни каких других блочных элементов. Также обстоит дело и с абзацами - внутри абзацев не может быть других абзацев или заголовков.

Для принудительного разрыва строки (перевода на новую строку) существует тег <br />, который относится к разряду пустых тегов (т.е. внутри него не может быть содержимого, он выступает просто командой браузеру).

Комментарии

Введите Ваше имя:*

Введите e-mail:

Ваш комментарий:*

* Обязательные поля


Комментарий №3
07-11-2018 10:35:28
Нина
В данную тему начала погружаться совсем недавно.Очень довольна прочитанным. Все разложилось по полочкам.)) Благодарю !!!


Комментарий №2
14-10-2018 10:14:47
ВАлерия
Большое спасибо за подробное описание работы веб-сайтов. Доходчиво рассказано и показано, что новичку вполне понятненько. Создание сайта требует много навыков и ваш курс помог во многих вопросах. Уроки изложены доступным языком, картинки показаны хорошо. Опираясь на материал можно самой пробовать как наглядное пособие, чтобы набить руку. Теперь буду стараться изучать дальше материал для саморазвития очень подходит ваш сайт в целом.


Комментарий №1
01-10-2018 20:02:26
Марина
Отличная статья, написанная простым языком, позволяющая вникнуть в основы, наверное, самого простого языка для веб-программирования. Когда я начинала учить html и css, хорошего материала, который был бы прост для понимания школьника или студента, было трудновато найти. Были в основном просто справочники по тегам, из которых ты сам собирал код html-страницы как пазл. Спасибо автору!