Видео курс HTML и CSS. Введение в HTML
Здравствуйте, дорогие слушатели! Меня зовут Александр и мы с вами приступаем к цыклу лекций по языку HTML. HTML – это аббревиатура от английских слов Hyper Text Markup Language.
На русский это можно перевести как язык разметки гипертекста. Зачем он нужен? Может быть вы слышали, в современном мире есть огромное количество языков программирования. Может быть вы знаете такой язык как Ассемблер, ну, или слышали о нем что-нибудь. На нем можно написать, например, драйверы устройств – программы, которые управляют мобильными телефонами, компьютерами, платами расширения (видеоадаптеры, звуковые адаптеры) и т.д. Вы может быть слышали о таком языке как С++. На нем можно написать также драйверы устройств, игры. На языке С# можно написать, например, консольное приложение, веб-приложение, также можно создать какие-то глобальные решения для бизнеса.
Что же можно сделать с помощью HTML? — Можно создать разметку текста.
Давайте представим ситуацию, что мы с вами являемся собственниками большого издательского дома.
И вот наш новый журнал требуется разместить в интернете. Что нам для этого нужно? Наверное нам хотелось бы сохранить аутентичность, т.е. чтобы наш журнал в киосках прессы и в интернете на веб-странице имел одинаковый вид.
Это значит, что заголовки, шрифты основного текста и общее оформление первой страницы должно совпадать как в печатном виде, так и в электронном.
Давайте откроем веб-браузер и представим, чтобы мы хотели увидеть. Допустим, это у нас поэтический журнал. Поэтому где-то в левой части страницы мы бы хотели увидеть один стих, в правой – другой, а где-то внизу – контактная информация нашего издательства.
Давайте откроем блокнот, наберем здесь какой-нибудь стих и попытаемся открыть его с помощью браузера. У меня этот стих сохранен на диске G, поэтому я захожу в браузер, набираю тут G:\ и браузер мне подсказывает, что на диске G у меня есть такой файл G:\стихи.txt. Кликаем левой кнопкой мышки и видим стих в окне браузера.
Давайте сравним. Видите, что здесь получилось: во-первых, шрифт нашего браузера и шрифт блокнота не совпадают.
Также видим, что в блокноте у меня шрифт жирный, а в браузере — обычный. Следовательно, форматирование не было перенесено на нашу страницу. Как же решить эту проблему?
Давайте откроем нашу презентацию и немножко поговорим об HTML.
Как я уже говорил, HTML – это язык разметки гипертекста. Здесь, в частности, написано, что это стандартный язык разметки документа во всемирной паутине и большинство веб-страниц создаются при помощи языка HTML. Вот и решение нашей проблемы.
Мы можем, используя язык HTML, в том же блокноте создать разметку нашего документа таким образом, чтобы он отображался в интернет браузере в таком виде, в котором нам хотелось бы.
Давайте перейдем на следующий слайд. Здесь написано, что HTML был разработан Тимом Бернерсом Ли в Церне для общения со своими коллегами. И, как видим, язык прижился и используется не только физиками, а и всеми желающими разместить свою страницу в интернете.
Ну а мы с вами переходим к следующему слайду презентации и рассмотрим основные составляющие языка HTML.
Цельный элемент языка (пункт 5 презентации) состоит из открывающегося тега и закрывающегося тега. Кроме того, каждый тег может содержать в себе какие-то атрибуты. В частности, у нас здесь атрибут align, который в данном случае (указываем значение атрибута – “center”) выравнивает наш текст по центру. Между открывающимся и закрывающимся тегами находится содержание всего элемента.
Давайте теперь поговорим о семантике языка. Первое, что нам нужно сделать при создании HTML документа – это указать одноименный тег, открывающийся (<html>) и закрывающийся (</html>). Следовательно, браузер будет знать, что между этими тегами следует искать инструкции по отображению страницы.
Внутри тега <html> существует еще два очень важных тега: <head> и <body>. В теге <head> содержится вся справочная, или служебная, информация, которую мы не видим, но она очень важна для работы нашей страницы.
В теге <body> находится та информация, которую мы хотим отобразить на странице.
Давайте теперь поговорим о правилах размещения этих тегов. В частности, первое правило – элементы не должны пересекаться. Т.е., если открывающийся тег располагается внутри элемента, то и соответствующий закрывающийся тег должен располагаться внутри этого же элемента.
Блочные элементы могут содержать вложенные блочные и текстовые элементы. О текстовых мы немного позже поговорим.
Текстовые элементы могут содержать вложенные текстовые элементы.
Текстовые элементы не могут содержать вложенные блочные элементы. Это правило мы будем рассматривать глубже при рассмотрении текстовых элементов.
А теперь давайте посетим сайт нашего учебного центра и посмотрим на HTML код этого сайта. Для этого нажимаем комбинацию клавиш Ctrl + u. Открывается дополнительная вкладка и мы видим как много кода содержит наш сайт.
Давайте попробуем найти что-нибудь знакомое. В частности, мы знаем уже тег <html>, тег <head>, а вот и тег <body>.
Давайте теперь закроем и попробуем немного отредактировать наш блокнот.
Я уже внес некоторые изменения. Я добавил тег <html>, тег <head>, тег <body> и внизу их закрыл.
Попробуем теперь его открыть. Заходим в браузер, вводим путь к файлу (файл в этот раз я сохранил с расширением .html) и нажимаем Enter.
Теперь у нас пропало минимальное редактирование, которое было, но при этом мы получили очень мощный инструмент, который мы сейчас и рассмотрим.
Давайте откроем нашу презентацию и посмотрим на основные элементы для работы с текстом.
Первый из них – это параграф.
Давайте откроем наш блокнот и попробуем создать здесь тег параграф, т.е. напишем открывающиеся <p> и закрывающиеся </p> теги. Сохраняем, переходим в браузер, нажимаем Ctrl + r. Мы видим, что строка, которую мы обработали в блокноте, отделилась от остального текста.
Давайте в презентации посмотрим на тег <br/>. Он делает перенос на следующую строку. Обратите внимание – этот тег не имеет открывающегося и закрывающегося тегов, т.к. не имеет содержимого.
Посмотрим, как он работает. Откроем блокнот и где-нибудь поставим данный тег. Сохраним, зайдем в браузер и по открытии страницы увидим изменения.
<br/> — аббревиатура от английских слов broken row. Суть его заключается в переводе каретки на новую строку.
С помощью тегов <br/> мы можем создать нашей странице приятный для взгляда вид.
Но данный тег не очень удобен тем, что нужно ставить его вручную на каждой необходимой строке.
Альтернативой тегу <br/> является тег <pre></pre>.
Давайте проверим его работу на нашем стихе.
В результате мы получили полностью отредактированный текст с учетом тега <pre></pre>.
Внутри данного тега мы можем делать с текстом все, что нам необходимо.
Справедливо можно задать вопрос: насколько удобно использовать блокнот для создания веб-сайта.
Если у нас программа небольшая, то блокнот довольно удобен, но, если проект большой, сайт большой, то легко можно потеряться в таком блокноте.
Посмотрим, то может предложить компания Microsoft для веб-разработки. Зайдем на решение под названием Visual Studio.
Visual Studio позволяет удобно работать с программным кодом и создавать большие проекты.
Давайте среди различных версий данной программы посмотрим решение Express for Web.
Visual Studio Express 2013 for Web включает в себя инструменты для веб разработки и для разработки служб.
Если вам интересна не только веб разработка, то я вам рекомендую изначально установить Ultimate решение. В этой версии включено все, что только может понадобиться веб программисту, следовательно, не нужно будет устанавливать дополнительный софт для новых идей.
Я вам рекомендую установить версию Ultimate.
У меня оно уже установлено и давайте посмотрим, как с ним можно работать.
Чтобы создать HTML документ, заходим на вкладку File -> New -> Website, создаем ASP .NET Empty Website, даем ему имя, сохраняем его на диск G.
У нас создался проект.
Теперь к нему нужно добавить HTML документ: Add new item -> HTML Page. Даем название по умолчанию, нажимаем Add.
У нас создался HTML документ, в котором не нужно прописывать теги <body> и <html>.
Осталось зайти в блокнот, выделить стих и вставить его в тег <body>. Запустим теперь наш проект. Получился такой же результат, как и в предыдущем примере, когда мы работали с блокнотом.
Обратите внимание, там где мы используем тег <pre> по умолчанию используется так называемый моноширинный шрифт, в котором каждая буква занимает одинаковую ширину.
Откроем теперь Visual Studio и посмотрим на проекты, подготовленные к данному уроку.
Первый пример. Посмотрим на новый тег <title> и посмотрим, где это используется.
Текст, записанный в теге <title> является названием вкладки, которая напоминает корешок книги.
Посмотрим на следующий пример. Браузер по умолчанию игнорирует большие пробелы.
Теперь посмотрим, как создаются комментарии к коду HTML.
Отмечу, что комментарии необходимо ставить, чтобы через некоторое время легче было разобраться в уже написанном коде.
Начало комментария в HTML обозначается набором символов <!— , а конец —>.
Комментарий можно ставить в любом месте – браузер из не видит. Давайте запустим проект и убедимся в этом.
Посмотрим еще раз на использование тега <br/>.
Запустим проект и посмотрим на работу тега <p>.
Идем далее. Теперь поговорим об атрибутах.
Атрибут align. Используется он в теге параграф. Если данному атрибуту присвоить значение “сenter” – это будет способствовать тому, что текст будет расположен по центру страницы. Значение “right” – текст будет выровнен по правому краю страницы, “left” – содержимое будет выровнено по левому краю.
Давайте убедимся, что это так.
Вот эта фраза находится по центру.
Вот эта – выровнена по правому краю.
И третья фраза – по левому краю.
Возвратимся в нашу презентацию и рассмотрим следующий слайд.
Здесь нам предлагается посмотреть на заголовки.
Заголовки используются для того, чтобы сделать акцент на каких-то частях Вашего документа.
Заголовки могут быть от h2 до h6.
h2 – это наиболее важные заголовки. Например, название вашего реферата.
h3 – это менее важные, например, разделы вашего реферата.
h4 – это подразделы и т.д.
h6 – самые незначительные, но все же заголовки.
Вот такая вот есть иерархия от h2 до h6.
Давайте теперь откроем Visual Studio и посмотрим, как это используется в реальном HTML документе.
Запускаем пример. Обратите внимание, наш пример открылся в браузере и вот что мы видим.
Вот самый главный заголовок – название вашего реферата.
Вот это, например, раздел вашего реферата.
Это подраздел и т.д.
Давайте рассмотрим следующий пример для закрепления этого материала.
Открою более детальный пример.
Представьте себе, что вы пишете статью об HTML. Давайте запустим и посмотрим.
Название HTML вы выделяете тегом h2.
Раздел выделяете тегом h3. Подраздел — тегом h3 и т.д.
Как вы видите, вот так вот формируется HTML документы. Т.е. что-то у вас уже прорисовывается какое-то понимание о том, как это все работает и, думаю, вскоре мы сможем очень просто создавать вот такие HTML страницы.
Давайте опять откроем нашу презентацию и посмотрим на следующий слайд.
Здесь нам предлагается рассмотреть такой тег как </hr>. Этот тег для рисования линий. Обратите внимание, что этот тег имеет несколько атрибутов. Давайте их подробнее рассмотрим.
Значит, атрибут align мы с вами знаем. Это выравнивание. В частности, это будет выравнивание нашей линии. Можно по левому, по правому краям и по центру выравнивать.
Атрибут color – это атрибут тега </hr>, который указывает цвет нашей линии.
Атрибут size указывает ширину прямой, width – толщину, noshade – контролирует тень прямой.
Давайте посмотрим, как это все работает. Открываем Visual Studio и посмотрим на тег </hr>.
Запускаем. Видим, фраза-линия, фраза-линия в соответствии с нашей программой.
Давайте посмотрим более детально на некоторые атрибуты.
Давайте рассмотрим тег color. Если мы пропишем: color = “Red”. Очевидно, что мы увидим нашу линию красного цвета. Если напишем color = “Blue” — линия будет синего цвета и color = “Green”, соответственно, зеленого.
Давайте убедимся в этом.
Да, действительно, смотрите, вот так вот можно делать разноцветные линии. Обратите внимание, линия рисуется от левого края до правого по умолчанию.
Идем далее. Давайте посмотрим на атрибут width. Данный атрибут задает ширину нашей линии. Ширина задается в пикселях. Первую линию мы хотели бы нарисовать шириной 600 пикселей и выровнять по левому краю. Видите, здесь еще добавлен атрибут align.
Вторую линию мы хотели бы увидеть шириной в 300 пикселей и третью линию – шириной в 800 пикселей. Давайте посмотрим, так ли это. Да, смотрите: первая линия выровнена по левому краю, остальные две – по центру, и, соответственно, размеры такие, как мы задавали.
Хорошо. Давайте посмотрим дальше.
Атрибут size. Здесь мы указывает цвет линии атрибутом color, а здесь хотим, чтобы первая линия была размером в один пиксель, вторая- 4 пикселя и третья – в 10 пикселей.
Запускаемся, смотрим. Да, действительно. Вот разноцветные линии разной толщины.
Закрываем и идем далее.
И последний атрибут тега </hr> — noshade. Что он делает? Нужно запустить и посмотреть. Приблизим и посмотрим. Обратите внимание, здесь у нас по умолчанию присутствует тень. Видите, вот такая вот серая линия. А здесь ее нет.
Визуально, если мы поставим экран на стандартный размер, то первая линия будет без тени, а вот эти две будут иметь тень. Т.е., задавая атрибут noshade мы явно указываем, что наша линия не должна содержать тени.
Давайте теперь опять откроем нашу презентацию на 10й странице и посмотрим на некоторые теги форматирования текста.
1й – это тег <strong> </strong>. Содержимое, помещенное внутрь этого тега, приобретает жирное очертание.
Возможно вложение этого тега в другие теги для работы с текстом. Т.е. – это то же, что мы пытались с вами сделать в блокноте – выделить текст жирные начертанием и отобразить его в браузере. Теперь мы сможем это сделать с помощью тега <strong> </strong>.
Следующий тег – тег <big></big>. Размер содержимого, помещенное внутрь этого тега, увеличивается на единицу. Возможно вложение этого тега в другие теги для работы с текстом. Здесь нужно сказать, что весь текст по умолчанию в HTML равен трем, а вообще от варьируется от единицы до семи. Так вот, тег <big></big> увеличивает на единицу исходный текст.
Следующий тег – тег <small> </small>. Размер содержимого, помещенное внутрь этого тега, уменьшается на единицу. Т.е. если по умолчанию величина текста равна трем, то после применения тега <small> </small> мы его уменьшим на единицу.
Следующий тег — <b> </b>. содержимое, помещенное внутрь этого тега, приобретает жирное очертание (как и тег <strong> </strong>).
Отличие между этими тегами в том, что тег <strong> </strong> еще используется для акцентирования текста. Т.е. текст, заключенный в тег <strong> </strong> будет более виден поисковым системам.
Давайте рассмотрим следующие теги. Это тег <i> </i>. содержимое, помещенное внутрь этого тега, приобретает курсивное начертание.
Тег <em> </em>. Содержимое, помещенное внутрь этого тега, приобретает акцентированное состояние. Также оно будет курсивным. По аналогии с тегом <strong> </strong> поисковик будет больше обращать внимание на тег <em> </em>.
Следующий тег <sub> </sub>. Содержимое, помещенное внутрь этого тега, переходит в нижний индекс предыдущего текстового содержимого. Этот тег необходим, например, в случае записи дробных чисел – он перенесет число в нижнюю часть дроби.
Тег <sup> </sup>. Тоже используется для математических функций. Часто встречается такое выражение, например, как икс квадрат.
Вот эту двойку мы можем перенести в верхний индекс с помощью тега <sup> </sup>.
А теперь давайте перейдем в Visual Studio.
Первым у нас идет тег <strong> </strong>. Текст заключен в тег <strong> </strong>, а значит мы хотим видеть его в жирном очертании. Давайте в этом убедимся. Ctrl + F5 и вот правда. Этот текст не заключен в тег <strong> </strong>. Видно, что он не имеет жирного очертания. А вот этот текст заключен в данный тег и, соответственно, имеет жирное очертание.
Вот этот пример показывает, что тег заключен в тег <strong> </strong> внутри параграфа. Это значит, что мы можем делать вложенность тега.
Давайте посмотрим на следующий пример.
Тег <big></big>. Давайте сразу же запустим этот пример и посмотрим уже в браузере.
Это текст, не заключенный в тег <big></big> и его размер по умолчанию равен трем.
Это такой же текст, но заключенный в тег <big></big>.
Т.е. его размер уже равен 4. Это тег, заключенный в тег <big></big> внутри параграфа дважды.
Давайте в этом убедимся. Вот у нас два тега <big></big> и, соответственно, размер нашего текста по отношению к тексту по умолчанию увеличивается в два раза.
Давайте посмотрим на тег <small>. Запустим этот пример. Обратите внимание – этот текст не заключен в тег <small>, а вот этот текст заключен в тег <small> один раз. Мы можем в этом убедиться – вот у нас этот текст. Теперь давайте посмотрим на текст, который в два раза заключен в тег <small>.
Вот он у нас.
Давайте рассмотрим следующий. Это тег <b>. Вы видите, что результат такой же, как и в теге <strong>.
Следующий тег – тег <i>. Как вы помните из недавно сказанного, он выводит текст курсивом. Давайте в этом убедимся.
Следующий пример – тег <em>. Результат в браузере будет такой же.
И вот здесь вот сравнение тега <i> и тега <em>.
Как видите, разницы в браузере у нас никакой. Давайте на следующий посмотрим. Тег <sub>. Запустим. Вы видите, вот у нас просто текст, и вот у нас применяется тег <sub>. Обратите внимание, в коде это у нас вот здесь вот. Мы часть текста из строки заключили в тег <sub> и у нас получилось, что он оказался в нижнем индексе. Вот у нас получается такая «ступенька».
Тег <sup>. Давайте запустим этот проект. Результат аналогичен с предыдущим примером, только «ступенька» уже восходящая.
Давайте посмотрим на тег center. Давайте посмотрим его на примере. Мы используем данный тег и как результат мы увидим, что в браузере наш текст расположен посередине страницы.
Посмотрим, что делает тег MARQUE. Как видим, на экране появилось две бегущие строки. Давайте посмотрим в код. На 11й странице мы используем просто тег MARQUE, а на 13й используем его с атрибутом loop, который равен 3. Текст на 13й строке пробежит по окну браузера всего 3 раза, поскольку loop указывает количество циклов.
Как вы видите, тег MARQUE имеет один существенный недостаток – текст по окну браузера перемещается рывками. Для устранения этого недостатка функция прокрутки браузера была перенесена в JavaScript. Там это реализуется намного лучше.
Давайте теперь посмотрим на атрибут style. Он является первой формой использования CSS. О CSS мы будем говорить позже, но сейчас нужно сказать, что атрибут style позволяет нам управлять стилем нашего текста.
Давайте посмотрим на наш атрибут style. На строке 16 нашего кода можно увидеть, что мы хотим, чтобы шрифт данной текстовой строки был verdana. Обратите внимание на 17 строку. Мы также здесь используем атрибут style. Здесь мы указываем еще один параметр – это color, и также указываем frontsize, а это значит, что мы хотели бы размер шрифта увидеть в 20 пикселей. Запустим этот пример и посмотрим, что из этого получилось.
Теперь рассмотрим такую важную особенность, как работа со ссылками.
Принципиально новое слово в практике использования ссылок было сказано в 1991 году с изобретением идеологии World Wide Web.
Давайте посмотрим, как можно реализовать ссылку в языке HTML. Для этого нам понадобится использовать тег <a>. Давайте рассмотрим этот тег более детально. У него есть следующие атрибуты: href, name, target, title.
href — это атрибут, который содержит в себе адрес страницы, на которую ведет ссылка. Ссылка “#” – ссылка на ту же страницу, т.е. на саму себя.
Также у нас есть атрибут name. Это атрибут, который содержит в себе имя данной ссылки.
Атрибут target говорит нам о том, каким образом открывать ссылку. Если мы укажем _self, то ссылка будет открыта в том же окне, где мы находимся. Если укажем _blank, то ссылка будет открыта в новой вкладке.
Атрибут title указывает тултип на ссылку (выскакивающее окошко с подсказкой). Об этом поговорим позже.
Посмотрим теперь на примерах. Запустим наш пример. Переходим по ссылке и попадаем на сайт нашего учебного центра.
Давайте посмотрим следующий пример. Первая ссылка отправляет нас на сайт нашего учебного центра.
Давайте посмотрим, куда отправляет нас вторая ссылка. Когда мы нажимаем на вторую ссылку, мы попадаем на первый пример. Третья ссылка отправляет на саму себя.
Рассмотрим следующий пример. Здесь указан новый атрибут name. Результат тот же, а детали данного атрибута рассмотрим позже.
В четвертом примере мы используем атрибут target. Результат тот же благодаря _self и _blank.
Атрибут title. Запускаем пример и смотрим на тултипы. Видите, выскакивает подсказка.
Теперь рассмотрим такой механизм, как отправка почты. Вы наверняка видели когда-нибудь на сайтах кнопку «почта», вы на нее кликаете и отправляете какие-то данные по почте. Давайте посмотрим, как это реализуется.
А атрибуте <a> мы указываем mailto, далее идет адрес электронной почты. Далее мы указываем subject %20 again. На строке 15 раскрыто значение символов %20.
Запустим наш пример и посмотрим, как это работает. В поле to указан имейл, а в поле subject – Hello again.
Рассмотрим такое понятие, как якоря.
Якорь – это значение в документе, на которое можно создать ссылку. Очень популярны якоря в Википедии, где вначале статьи идет перечень параграфов, а далее вы кликаете по ним и автоматически на них переадресовываетесь. Для этого в HTML используется <a href= “#C1”> Ссылка №1 </a>. C1 – имя нашего якоря. Далее где-нибудь в документе мы указываем <a name = “C1”> Заголовок </a>. когда мы кликнем на имя Ссылка №1, мы автоматически переместимся на соответствующий заголовок. Давайте посмотрим, как это работает.
Видео курс HTML и CSS. Таблицы стилей CSS.
Здравствуйте, уважаемые слушатели. Меня зовут Александр Петрик. Я сотрудник компании CyberBionicSystematics. Мы с вами продолжаем цикл лекций по языку HTML. Сегодня мы рассмотрим такую важную вещь как CSS.
CSS – это специальный язык для описания внешнего вида документа, который создан с использованием языка разметки. CSS является акронимом от слов Cascading Style Sheet/ Каскадные таблицы стилей. Этот термин был предложен норвежским инженером Хоакин Виум Ли.
Помните, мы писали с вами такое свойство как style, указывали фон и т.д. Это все и является элементами CSS.
Давайте посмотрим, как можно использовать CSS на нашей странице. С первым мы с вами знакомы.
В теге <head> указываем тег < style >. На этот пример посмотрим более детально на примере.
Давайте посмотрим на семантику языка, на особенности его применения. Она достаточно проста. Мы просто указываем селектор и в нем задаем значения. Самым простым использованием CSS является использование атрибута style. В теге <body> мы указываем атрибут style. Segoe UI значит, что вот этому тексту будет установлен этот шрифт. Тексту мы также задаем размер и цвет.
Запустим и посмотрим. Давайте попробуем что-нибудь поменять. Теперь шрифт у нас увеличился.
Посмотрим на следующий пример. Тег style мы используем в теге head. В теге style мы используем селектор. Чтобы не писать везде одни и те же значения, я вынес их в тег р один раз и смогу его использовать по всей программе.
Давайте запустим. Мы применили эти значения ко всем тегам <p> программы (также и вложенным).
Вот третий пример. Здесь речь идет о вложенном файле CSS. Давайте найдем его. В этом примере все то же, что и в предыдущем, только тег <р> вырезал и перенес его в текст отдельного файла CSS. Чтобы его использовать в нашем HTML документе нужно его подключить с помощью тега link. Он указывает нашем браузеру, где находится наш CSS файл. В href указываем название подключаемого документа, в атрибуте rel указываем stylesheet. Этот атрибут показывает браузеру, какого рода этот файл. В данном случае это файл стилей. Также указываем, что он имеет расширение .css. запустим и посмотрим. Вот мы видим, что результат тот же. Вот такой(второй) подход является более правильным. При загрузке большой страницы таким образом будет снижена нагрузка на браузер.
Давайте посмотрим, что будет , если мы начнем комбинировать три описанных выше подхода.
На 9 строке мы выносим таблицу стилей в отдельный документ, также записываем тег <style> в тег <head>.
Запустим и посмотрим. Наивысшим приоритетом среди трех способов указания стиля для вашей страницы есть использование такого атрибута style в конкретном теге. Давайте попробуем его убрать и посмотрим, что же у нас получится. Запускаем. Теперь фраза, содержимое параграфа, отображается красным цветом. Вывод: средним приоритетом обладает способ указания стиля с использованием тега style, который вынесен в заголовок head. Давайте здесь также уберем свойство color. Запустим. Мы видим, что нисший приоритет у третьего, рассмотренного нами способа. Всегда нужно помнить такую вот градацию.
Поговорим о выражениях селектора. Ко всем параграфам нашего документа будет применен такой вот стиль.
Второй вид селектора – селектор – класс. Чтобы использовать класс в нашем документе, мы ставим точку-имя класса – в фигурных скобках указываем таблицу стилей.
При использовании классов мы просто указываем в необходимом теге слово class и его имя.
Посмотрим на селектор – идентификатор. Для использования указываем #, имя идентификатора и в фигурных скобках таблицу стилей.
В необходимом теге указываем атрибут id, имя идентификатора. После этого данный стиль будет применен к этому параграфу.
Переходим к примерам. Первый пример показывает использование селектора, в качестве которого выступает имя стиля.
Обратите внимание, я не пишу таким образом, я просто указываю имя тега.
Я хочу, чтобы все слои имели вот такой вот стиль.
У этого параграфа будет вот этот стиль. На строке 40 тег р является вложенным. Какой же стиль будет вот здесь вот. Давайте запустим пример, чтобы разобраться. Все три параграфа имеют один и тот же стиль. Значение стиля в теге дочернего элемента имеет высший приоритет над родительским. Вот здесь уберем цвет шрифта. Вот здесь шрифт стал черного цвета, фон – красного, а здесь мы ничего на видим. Потому, что у нас шрифт стал красного цвета. Давайте посмотрим, почему. Тег div отдал свой цвет вот этому тексу. Имеет место перекрытие значений в том случае, если теге (в данном случае) <p> не указан какой-либо из атрибутов.
Рассмотрим селектор класс. Здесь использован селектор тег, и здесь. А здесь использован селектор класс. давайте посмотрим, как он у нас используется. Мы говорим, что вот этому тегу <p> мы хотим придать какой-нибудь стиль. Очевидно тот, который указан в селекторе класса. Давайте посмотрим, не будет ли у нас какого-нибудь перекрытия между значениями в теге <р> и <class>. У нас есть подсказка: селектор класса доминирует над тегом класса. Те свойства, которые совпадают, то приоритет будет тому, который указан в селекторе класса. Вот здесь он у нас доминирует над тегом <p>, а здесь над тегом <div>. Давайте посмотрим. Вот смотрите, у нас размер — 20 пикселей, а 36 вот здесь зачеркнуто. Мы можем изменить, и у нас автоматически будет указано свойство в теге <p>.
Еще один простой параграф. Вот он. У него есть вот такой стиль.
Здесь у нас в теге <div> указан селектор класса, цвет у текста красный, а фон aqua. Давайте смоделируем перекрытие.
Здесь укажем Green. Видите, ничего не изменилось, т.к. селектор класс доминирует над тегом <div>.
И третий пример. Здесь мы посмотрим на использование идентификаторов. По умолчанию предполагается, что такой селектор у нас один.
На 48 строке мы указываем id. Это значит, что мы подключаем вот этот вот идентификатор.
Мы ожидаем, что здесь вот будет такой стиль. Вот у нас первая строка. Тег <p> у нас никак не определен и поэтому он у нас черного цвета.
Вот вторая строка. Мы видим, что вот этот текст получил вот этот стиль.
Здесь мы ожидаем, что вот этот текст будет красного цвета.
Давайте используем идентификатор дважды. Программа нам подсказывает, что мы уже использовали данный идентификатор. Смотрите, результат тот же, но такая запись яявляется плохим тоном.
Давайте посмотрим, какой из вариантов является приоритетным. В данном случае наиболее приоритетным является идентификатор.
Поговорим о конструкции селектора. Будем говорить о сложных селекторах.
Поговорим о вложенных селекторах, мультиклассах и соседних селекторах.
Вложенный селектор. На эту конструкцию посмотрим более детально на примерах.
Мультиселекторы. При их записи следует использовать такую вот конструкцию. Посмотрим, как они работают, на примерах.
Соседний селектор. Ключевой его особенностью является символ +. Если мы хотим указать стиль второму селектору, то он должен следовать первому селектору.
Посмотрим на примеры.
Рассмотрим вложенные селекторы. На 25 строке используем тег <div>. Далее. На строке 32 указано, что если у нас будет элемент, вложенный в тег <div>, то он будет отображен синим цветом.
На 37 строке у нас также вложенный селектор в качестве дочернего элемента. Если у нас тег <div> будет вложен в тег <p>, то тег <p> у нас будет отображен вот в таком стиле.
Давайте посмотрим, какой будет стиль у тега на 45 строке. Это не будет работать на 45 строке.
На 47 строке тег <p> вложен в тег <div>.
Во-первых, у нас сработает вот этот стиль. Но мы с вами используем здесь еще и вложенный селектор. Вот он на 37 строке. Мы с вами говорили, что ели тег <p> вложен в тег <div>, то мы хотим, чтобы он был красного цвета. Все остальные свойства будут здесь присутствовать.
На 51 строке есть тег <div>. он вложенный. Вот у нас указано, что если тег <div> вложен в еще один тег <div>, то мы хотим задать вот этот стиль. Мы с вами говорим, что вот здесь вот мы увидим цвет шрифта – синий. Что у нас получается. В теге <div> мы указывали цвет зеленый, но вот здесь вот он у нас переопределен. Это значение будет преобладать. Давайте запустим и посмотрим. Вторая строка зеленого цвета на красном фоне. Почему? Тег <div> у нас зеленый, а вот здесь вот у нас переопределен только цвет фона. Это еще можно увидеть , нажав F12. Мы вот здесь определили фон. Мы его можем выключить.
Смотрим далее. Стиль у нас здесь такой: шрифт синий, фон зеленый. Приоритет имеет сложный вложенный селектор над обычным селектором.
Давайте напишем здесь фон и посмотрим, как это отработает.
Вот у нас доминирование сложного селектора над обычным.
Посмотрим на мультиселекторы. селектор класс и мультикласс очень близкие понятия. На 24 строке у нас указан селектор класс, указана таблица стилей. На 30 строке у нас указан мультикласс. Здесь указан как-бы первый селектор, в данном случае тег <p>, далее точка и указан class2 и указана для него вот такая таблица стилей.
На 36 строке у нас также указан мультикласс. И вот здесь у нас указан просто селектор тег <p>. На 50 строке, подключаем селектор class1. Давайте посмотрим, как это сработает. Вот наша строка зеленого цвета на черном фоне и ее шрифт явно больше, чем стандартный. Давайте посмотрим, почему так получилось. Мы хотим для начала понять, почему фон черный. Мы подключаем class1, а в нем указан черный цвет фон. Почему цвет зеленый? Потому что, color = Green. Также смотрите, мы тегу <p> задали вот такой вот стиль. Это значит, что очертание нашего шрифта будет жирным.
Да, смотрите, это действительно так.
Вот у нас указан на 52 строке тег <span>, мы ему с помощью атрибута <class> задаем какой-то стиль – стиль, указанный с помощью селектора класса class1. Тег <span> у нас нигде не определен, поэтому у нас на второй строке нету жирного очертания. Все остальное такое же, как и на строке 50.
На 54 строке у нас есть тег <p>, у него есть атрибут <class> и подключен селектор class2. Давайте посмотрим. Отдельно селектора class2 у нас нету. У нас есть вот такой вот мультикласс. Мы написали p.class2. Это значит, что если у нас где-то в теге <p> используется class2, то нужно установить какой-то стиль. Вот у нас большие буквы и без фона. Буквы красный потому, что у нас указано color = Red, а размер – 50 пикселей.
Вот у нас определение нашего мультикласса. У нас здесь не задается фон, поэтому мы его и не видим. Начертание нашего шрифта – жирное. Если вот здесь мы поставим class1, то у нас получится то же самое, что и в первом варианте.
Вот у нас первая и третья строки совпали.
Посмотрим на 56 строку. У нас здесь подключение class2. Данный селектор нигде не определен. Мы видим на экране простую строку. Т.е. такой класс мы не определяли. Он есть в контексте мультикласса, но не самостоятельно.
Мы не описывали также стиль для селектора тега <span>, поэтому мы видим простую строку на белом фоне.
Посмотрим на 58 строку. У нас здесь использование мультикласса. На 36 строке мы его описывали, и на 58 строке мы его подключаем. Вот что у нас получилось (нижняя строка).
Синий шрифт вот где задается, фон – вот здесь вот. Где же у нас устанавливается шрифт ? нажмем F12 и посмотрим вот сюда. У нас есть класс1 с зеленым цветом и т.д. но мы его как-бы зачеркнули, т.к. переопределили. Мы не переопределяли размер шрифта. Также у нас используется жирное начертание.
Давайте теперь поставим здесь class2. Сохраним и запустим.
Запустим. Есть какие-то изменения. У нас теперь отработал другой мультикласс – p.
class1.Он перекрыл определение селектора .class1. Давайте посмотрим почему.
Мультиклассы перекрывают обычные классы, поэтому вот это вот определение было перекрыто вот этим вот классом.
Я вам советую зайти в этот пример самостоятельно, прочувствовать это все богатство мультикласса, поменять что-нибудь, и, думаю, этот материал у вас окончательно закрепится.
Давайте поговорим теперь о соседних селекторах. Если вам нужно установить стиль соседнего элемента. Например, тегу <div>установить какой-то стиль. Например, я хочу, чтобы где-бы не встречался тег <span>, если после него идет тег <div>, отображать фон красного цвета.
Запустим. Здесь фона нет. Нам требуется соблюсти определенную последовательность. Давайте поменяем. Теперь у нас появился красный фон.
Переходим к третей части урока.
Поговорим о свойствах CSS. Поговорим о свойстве font-family. Мы уже с ним немного знакомы, но у него есть несколько особенностей. Можно задавать несколько шрифтов на тот случай, если какого-нибудь из них нет на компьютере, то текст будет отображаться другим шрифтом.
Если название шрифта состоит из нескольких слов, то оно помещается в кавычки.
Вот мы формируем такую таблицу.
Можно их указывать через запятую. С помощью классов мы задаем стили. Запустим. Цветом мы ничего не выделяли, а шрифт различный в каждой строке.
Идем далее.
Поговорим о том, какие есть способы задания различных элементов в CSS. Это абсолютные и относительные единицы.
Относительные единицы: проценты, пиксели, относительно х и т.д.
Абсолютные единицы: дюймы, см, мм, и т.д. в абсолютных единицах не всегда комфортно задавать размеры.
Посмотрим на наш новый пример. Указываем hr – линия, clear – отмена обтекания. Вот на странице 45 мы посмотрим, как используются абсолютные единицы. Small, large и т.д. – это константы. Вот пики.
Вот пошли уже относительные единицы. Посмотрим сейчас это все в браузере.
Вот мы задаем стили параграфам. Запустим и посмотрим. Вот у нас абсолютные единицы
Давайте теперь посмотрим на относительные единицы.
Чаще всего вы можете встретить процентные соотношения.
Поговорим о свойстве font-weight. Оно устанавливает насыщенность шрифта.
Здесь у нас указан заголовок. На 101 строке мы формируем слой, указываем ему стиль. На 102 строке мы подключаем какой-то стиль с использованием класса. Давайте посмотрим, что за стиль. Это нормальное начертание нашего шрифта.
Bold будет у нас иметь полужирное очертание. Обратим внимание на строку 107. Посмотрим, что находится в three. Здесь задано нормальное начертание.
На 41 строке задан стиль для тега <span>, если он вложен в тег <p>.
Посмотрим далее. Обратим внимание на строку 110. Нам нужно посмотреть на класс four. Внутри тега <p>, если в нем используется класс four, то текст примет полужирное начертание. Если же в таком теге еще используется тег <span>, то текст в последнем будет light. Запустим.
Вот это просто заголовок.
Здесь не совсем корректно, т.к. шрифт у нас все-таки жирный.
Каждому классу мы указываем какие-то стили.
Ничего необычного в этой части мы не видим – обычный шрифт. Выключаем и ничего не изменяется. А 600 – пропадает жирное начертание. Вывод: в значениях от 100 до 500 разницы мы не видим.
Рассмотрим свойство font-style. Оно может принимать три значения: normal, italic и oblique.
На строке 28 пример их использования.
На 20 строке у нас определено, какие классы какое значение font-style свойства принимают.
Запустим и посмотрим в чем между ними разница.
Следующий пример показывает нам свойство font-variant. Оно определяет, как мы можем использовать строчные буквы.
На 32 строке вот этот вот шрифт будет соответствовать тому, который установлен в теге <p>, у нас указан тег <span> и ему присвоен класс smallcaps.
Запустим и посмотрим.
Давайте смотреть дальше. Font-color. Мы уже с ним знакомы, давайте его вспомним.
Вот здесь мы увидим стандартный стиль. Вот здесь мы с помощью класса задаем тегу какой-то стиль.
Решетка – указание цвета в шестнадцатеричной системе счисления.
Полезная возможность Visual Studio: если поставить сюда курсор, нажать Ctrl + пробел, то появляется вот такое вот меню и я могу менять цвета. Запустим пример.
Заголовок, обычный текст.
Следующий пример. Свойство text-align. Свойство text-align применяется для выравнивания текста. Может принимать четыре значения: left, right, center, justify. Justify означает выравнивание по ширине.
Сейчас посмотрим, как это все работает.
Заголовок нашей страницы.
Margin — это у нас внешние отступы. Вот у нас показаны margin. Посмотрим, какие у нас были размеры. Вот у нас 500 пикселей его ширина. Вот она. Вот таким вот образом у нас задан отступ и слои.
Вот первый слой и выравнивание по левому краю. Далее второй – выравнивание по правому краю. Третий – выравнивание по центру, и четвертый – по ширине.
Давайте выключим свойство width. Текст автоматически растянулся на всю страницу и эти края выровнены – текст растянулся по ширине.
Посмотрим на следующий пример.
Свойство text-decoration. Значение blink устаревшее и работает не во всех браузерах, поэтому рекомендуется использовать другие, более новые, техники вместо него.
Вот с помощью класса задается параграфу какой-то стиль. Мы увидим здесь подчеркивание. Здесь – надчеркнутый текст, а здесь – перечеркнутый.
Давайте добавим еще одно свойство. Сначала создадим его. Запустим. Мигания не наблюдается. Сменим браузер на Firefox. Снова не работает.
Посмотрим на следующий пример. Свойство text-indent.
Также демонстрировать его работу мы будем с помощью стиля. Здесь вот мы подключили этот класс.
Запускаем. Вот эта строка записана без отступа, а вот эта с отступом.
Посмотрим на следующий пример и поговорим о свойстве text-transform. Это свойство может принимать четыре значения.
Задаем заголовок нашей странице. Задаю стиль каждому и параграфов с помощью классов.
Вот наше свойство и разными параметрами.
Вот здесь мы не увидим никаких изменений. Здесь все первые буквы будут в верхнем регистре.
Здесь все буквы будут в верхнем регистре. Здесь все буквы будут в нижнем регистре. Давайте проверим это.
Вот просто обычный текст.
Вот все первые буквы в верхнем регистре и т.д.
Посмотрим на свойство letter-spacing. Посмотрим, как это реализуется. Каждому из этих параграфов мы подключаем какой-то стиль. Здесь будут нормальные отступы между буквами, здесь – будут равняться 3 пикселям. Здесь между каждой буквой будет убрано по одному пикселю.
Следующее свойство — word-spacing.
У нас здесь есть три класса. Вот что мы увидим в результате выполнения кода.
Вот здесь у нас 20 пикселей. Давайте изменим отрицательное значение, чтобы было нагляднее. Сделаем его равным -3.
Поговорим о псевдо-свойствах.
Наводим , например, курсор на какую-то строку и она у нас светится. Вот это и есть hover.
Мы указываем вот это псевдо-свойство. Здесь делаем то же самое. Ту ссылку, которую посетим, будет зеленого цвета, а ту, на которую наведем курсор – красного.
Давайте выполним этот пример. Первые две ссылки зеленые потому, что я их уже посещал. Давайте перейдем на ссылку Контакты и посмотрим, что у нас произойдет. Теперь данная ссылка также стала зеленого цвета.
Здесь есть один нюанс, о котором следует помнить. Есть обязательная последовательность. Например, я не могу вот так вот указывать (поменять местами) hover и visited потому, что у меня перестанет все корректно работать и я не буду видеть этого подсвечивания. Для корректной работы сначала нужно указывать visited, а потом hover.
На этом наш урок подошел к концу. Напомним слушателям, что обязательно нужно проходить тесты, делать домашние задания для закрепления материала.
На этом наш урок закончен. Всем спасибо за внимание. Всего доброго, до свиданья.
Видеоуроки по CSS | LearnWebCode
25 ноября 2014 г. В этом уроке мы узнаем, как сделать так, чтобы рядом с нашими веб-сайтами в результатах поиска отображался новый ярлык Google «Для мобильных устройств».
Мы выполняем полную «мобильную переделку» устаревшего настольного веб-сайта, чтобы отработать ключевые концепции. Демонстрационный сайт из видео Zip Загрузка демонстрационных файлов Если вы предпочитаете учиться на едином унифицированном […]
В этом уроке мы научимся создавать фотогалерею с аккуратно выровненной сеткой для миниатюр. Когда миниатюра щелкнута / коснется, модальные окна (лайтбокс) будут открыты с версией фотографии с более высоким разрешением. Этот урок представляет собой фрагмент моего 8-часового курса премиум-класса по веб-дизайну. Присоединяйтесь к 4000+ […]
21 октября 2014 г.Это руководство по Sass предназначено для абсолютных новичков или тех, кто в прошлом боялся препроцессоров. Мы рассмотрим основные функции Sass и даже напишем два миксина вручную (градиенты и медиа-запросы). Этот урок представляет собой фрагмент моего 8-часового курса премиум-класса по веб-дизайну. Присоединяйтесь к более чем 4000 других, которые уже […]
Узнайте, как добавлять фоновые изображения с помощью CSS (повторение или мозаика, положение, размер и несколько изображений, назначенных одному элементу). Этот урок представляет собой фрагмент моего 8-часового курса премиум-класса по веб-дизайну. Присоединяйтесь к более чем 4000 других людей, которые уже изучили HTML, CSS и адаптивный дизайн на профессиональном уровне.
19 июня 2014 г.В этом уроке мы узнаем, как система сетки столбцов Bootstrap невероятно упрощает создание адаптивных макетов. Мы также создали адаптивное навигационное меню и, наконец, узнали об «отзывчивых служебных классах» Bootstrap, которые мы можем использовать для скрытия и отображения определенного контента для определенных размеров области просмотра. Принципы адаптивного веб-дизайна легко реализовать […]
15 июня 2014 г. В этом уроке мы научимся создавать адаптивное меню навигации. Для больших экранов мы используем традиционную горизонтальную строку меню, но для небольших экранов мы изначально скрываем навигацию до тех пор, пока не будет нажата или нажата кнопка «меню».
Для общего ознакомления с JavaScript вы можете просмотреть это руководство. Для общего ознакомления с […]
В этом видео мы узнаем, что такое адаптивный веб-дизайн и как написать необходимый код для создания собственных адаптивных веб-макетов. Более техническим термином для этого урока было бы «Введение в медиа-запросы». Демонстрационная страница, показанная в уроке Прямая ссылка на CSS «Desktop» Прямая ссылка на CSS «Mobile» Download […]
В этом видео мы узнаем, как смешивать фоновые контейнеры полной ширины с контейнерами содержимого фиксированной ширины. Если вы предпочитаете учиться на одном унифицированном видеокурсе, а не на отдельных одноразовых видеоуроках, ознакомьтесь с моим обновленным 8-часовым видеокурсом и изучите HTML, CSS и адаптивный дизайн профессионального уровня.
31 марта 2014 г. В этом видео мы рассмотрим два самых популярных метода центрирования изображений по горизонтали. Если вы предпочитаете учиться на одном унифицированном видеокурсе, а не на отдельных одноразовых видеоуроках, ознакомьтесь с моим обновленным 8-часовым видеокурсом и изучите HTML, CSS и адаптивный дизайн профессионального уровня.
В этом уроке по CSS мы рассмотрим свойство display. Мы узнаем о трех самых популярных значениях свойства, когда они используются и как они используются. Акцент делается на том, как эти три ценности соотносятся друг с другом, с надеждой, что если кто-то сможет понять эти построения […]
лучших видеоуроков по HTML и CSS: начните изучение {skill}
HTML и CSS — это языки программирования, которые информируют веб-браузер о том, как отображать различные цифровые активы на экране пользователя. HTML отличает визуальные элементы друг от друга, а CSS управляет визуальным представлением этих ресурсов. Просмотр видеоуроков онлайн — популярный метод изучения HTML и CSS. Видеоуроки полезны для изучения HTML и CSS, поскольку они дают пользователям больший контроль над темпом обучения. Большинство студентов, изучающих HTML и CSS, относительно плохо знакомы с кодированием, и навыки, связанные с программированием, могут быть требовательными поначалу.
Кроме того, видеоуроки по HTML и CSS дают пользователям больше гибкости при обучении и выборе видов обучения.
Это важно, учитывая, что очень немногие современные программисты работают только с HTML и CSS. В этой статье будет представлен ряд видеороликов, включая то, чему они учат и где их найти.
Язык гипертекстовой разметки (HTML) и каскадные таблицы стилей (CSS) — два основных языка программирования, на которых построена вся современная веб-инфраструктура. Эти два языка программирования сообщают вашему компьютеру, как отображать веб-страницу и отличать один веб-элемент от другого. HTML использует систему тегов и разрывов, чтобы сообщить веб-браузерам, как данная веб-страница должна отображаться для пользователей. Это то, что сообщает веб-странице, на которую вы смотрите прямо сейчас, в чем разница между заголовком и абзацем, чтобы веб-страница знала, когда разделить два блока текста. CSS сообщает веб-браузеру, как он должен отображать некоторые аспекты контента, назначая шрифты, размеры, цвета и другие визуальные данные элементам веб-страницы. Он указывает веб-странице отображать эти слова определенным шрифтом, размером и цветом.
Вместе эти два языка помогают создавать простые веб-страницы, состоящие из текста, изображений и гиперссылок.С момента своего появления в середине 90-х HTML и CSS стали наиболее часто используемыми языками программирования для веб-разработки, поскольку практически все веб-страницы работают на каркасе, построенном с использованием этих двух языков. В то время как вывод HTML и CSS по современным стандартам не впечатляет, поскольку он касается только создания визуальных элементов, текста, изображений и ссылок. Однако современные веб-страницы, несмотря на всю их сложность, невозможно было бы разработать без HTML и CSS. Это означает, что любой, кто стремится работать в веб-разработке, должен научиться кодировать в HTML и CSS, прежде чем он сможет начать изучать более сложные языки.
Что можно сделать с помощью HTML и CSS?
Используя HTML и CSS, вы можете создавать элементарные веб-страницы и начать процесс обучения созданию динамичных и запоминающихся веб-страниц.
В то время как большинство современных программ для дизайна веб-страниц, таких как WordPress, позволяют начинающим пользователям создавать более сложные веб-страницы, чем только обучение HTML и CSS, изучение того, как работать с HTML и CSS, подготавливает студентов к сложным процессам кодирования с использованием таких языков программирования, как JavaScript, React или Питон. Изучение HTML и CSS также является важным первым шагом в обучении профессиональному программированию веб-страниц. Поскольку все больше и больше предприятий, компаний, организаций и групп стремятся установить присутствие в Интернете, квалифицированные веб-разработчики пользуются большим спросом. В то время как любому профессиональному веб-разработчику также потребуется дополнительное обучение, изучение основ интерфейсной веб-разработки гарантирует, что у студентов есть основа для построения прибыльной будущей карьеры.
Видеоуроки — хорошее место для начала изучения HTML и CSS по нескольким причинам.
Они бесплатны, они хороши для начинающих студентов, и они дают студентам возможность контролировать темп своего обучения и гибкость в учебе. Хотя начинающим разработчикам, скорее всего, потребуется больше обучения, чем просто видеоуроки, они — отличное место, чтобы начать путь к образованию в области компьютерных наук.Большинство онлайн-видеоуроков бесплатны для пользователей, что делает их идеальным выбором для начинающих программистов. Поскольку HTML и CSS часто являются первыми языками, которые изучают новые программисты, может быть полезно проверить воду, прежде чем переходить к более интенсивной программе обучения. Бесплатные учебные пособия позволяют учащимся понять, является ли обучение кодированию правильным выбором, не чувствуя, что они вложили какие-либо средства в свое обучение.
Для студентов, которые хотят научиться кодировать, видеоуроки также полезны для начинающих программистов, поскольку они дают студентам больший контроль над жизненно важными первыми шагами их обучения кодированию.
Обучение кодированию может быть пугающим для новичков, и поначалу легко запутаться и бороться. Видеоуроки дают учащимся больше свободы для замедления и повторения материала до тех пор, пока они не почувствуют себя достаточно комфортно в своих базовых навыках HTML и CSS, чтобы записаться на курс повышения квалификации.
Видеоуроки также позволяют учащимся работать в своем собственном темпе. Это верно в краткосрочной перспективе, поскольку учащиеся могут перематывать видео назад, вперед или иным образом перемещаться по видео; в долгосрочной перспективе учащиеся могут приостановить просмотр видео и вернуться к уроку, когда им будет удобно. Это делает видеоуроки идеальными для студентов, нуждающихся в большей гибкости обучения HTML и CSS.
Типы видео HTML и CSS
Noble Desktop предлагает несколько вариантов онлайн-курсов на своем веб-сайте и официальной странице YouTube. Эти курсы предназначены для отражения опыта прохождения онлайн-курсов по развитию навыков, поскольку они воспроизводят ключевые элементы цифрового семинара.
Пользователи могут посетить свой плейлист «Веб-дизайн и разработка», чтобы найти видеоролики, знакомящие учащихся с основами веб-разработки с использованием HTML и CSS и связанных с ними языков программирования. Noble также предоставляет бесплатный курс «Введение в интерфейсную веб-разработку» на странице бесплатных семинаров. Подобно другим бесплатным учебным пособиям, этот класс научит студентов как основам кодирования, так и вводным урокам по использованию HTML и CSS.
Второй тип обучающего видео — это короткое видео, посвященное одному элементу HTML и CSS, скорее всего, демонстрирующее, как использовать определенный тег/свойство или создать элементарный актив на этих языках. Эти видеоролики полезны для учащихся, которые ставят перед собой конкретные цели в своих проектах, поскольку они позволяют учащимся выбирать виды уроков, которые они получают, и порядок их получения. Кроме того, поскольку алгоритмы таких веб-сайтов, как YouTube, вознаграждают такой короткий контент из нескольких видео, многие из этих руководств будут доступны.
Третьим распространенным типом видео является процессно-ориентированное видео, в котором разработчик помогает зрителям пройти процесс создания веб-страницы с использованием HTML и CSS. Эти видео идеально подходят для учащихся, ориентированных на процесс, с базовым пониманием программирования с помощью HTML и CSS, поскольку они больше сосредоточены на практических шагах по созданию дизайна.
Зачем изучать HTML и CSS?
Если ваша цель — создавать веб-страницы лично или профессионально, вам необходимо научиться использовать HTML и CSS. Хотя почти все современные веб-страницы используют более сложные языки программирования, такие как JavaScript или Python, HTML и CSS являются основой современного веб-сайта. Это языки, которые сообщают браузеру, как различать элементы веб-страницы для отображения, а это означает, что это языки, которые делают возможным просмотр в Интернете. Веб-разработчики не могут построить архитектуру, на основе которой они создают более сложные цифровые элементы для веб-страниц, не зная, как использовать эти два языка.
Кроме того, изучение HTML и CSS — отличный способ начать обучение веб-разработке. Сегодня почти ни один веб-сайт строго не использует HTML и CSS, но, по той же причине, ни одна веб-страница не работает без HTML и CSS. Это означает, что, хотя любому, кто надеется работать в области веб-разработки, потребуется больше обучения, практически все это обучение будет каким-то осмысленным образом опираться на его знания HTML и CSS. Например, когда студенты хотят научиться создавать интерактивные элементы для своих веб-страниц, они, вероятно, захотят изучить JavaScript, который требует знания HTML и CSS. Независимо от того, что студент хочет изучить, когда дело доходит до создания веб-страниц, HTML и CSS почти наверняка будут необходимым предварительным условием.
Узнайте больше о том, почему вы должны изучать HTML и CSS.
Насколько сложно выучить HTML и CSS?
HTML и CSS являются одними из самых простых языков кодирования для изучения, но они по-прежнему являются языками кодирования, а это означает, что пользователям необходимо будет изучить сложный синтаксис и научиться читать и отлаживать код, который не компилируется правильно.
Это может быть сложно для начинающих программистов, но это необходимый первый навык для всех, кто стремится создавать веб-страницы.
Формальных предпосылок для изучения HTML и CSS нет, так как эти языки являются предпосылкой для изучения почти всего остального в области кодирования переднего плана. Учащимся должно быть удобно пользоваться компьютером, и они должны ожидать процесс кодирования веб-страницы. Тем не менее, помимо этого, студентам не потребуются предварительные знания для изучения HTML и CSS.
HTML и CSS — это языки программирования с открытым исходным кодом, которые можно использовать бесплатно. Начинающим программистам также потребуется приобрести приложение для редактирования HTML и CSS для создания веб-страницы. Существует множество различных инструментов, таких как Notepad++, Adobe Dreamweaver, UltraEdit и Bluefish. Цена на эти программы будет разной, но многие из них либо полностью бесплатны, либо имеют расширенные бесплатные версии. Фактический процесс запуска и обслуживания веб-страниц будет сопровождаться регулярной платой за обслуживание.
Прочтите о том, как сложно изучать HTML и CSS.
Изучайте HTML и CSS с помощью практического обучения в Noble Desktop
Студенты, желающие изучать HTML и CSS, могут найти несколько специализированных учебных курсов в Noble Desktop. Эти курсы, доступные как лично в кампусе Noble на Манхэттене, так и в режиме онлайн-обучения, предоставят студентам углубленную подготовку по HTML и CSS и многим языкам программирования, созданным на основе HTML и CSS. Независимо от того, на какой курс они зачислены, студенты получат возможность работать напрямую с опытными инструкторами Noble. Даже онлайн классы остаются небольшими, чтобы учащиеся не соперничали за внимание преподавателя. В качестве бонуса на всех курсах Noble есть возможность пройти курс бесплатно в течение года после зачисления, что дает студентам дополнительные возможности для получения практических инструкций и опыта в области HTML и CSS.
Noble предлагает ознакомительный курс веб-разработки через свои курсы веб-разработки с HTML и CSS и продвинутые курсы HTML и CSS.
Эти курсы предназначены для того, чтобы дать учащимся представление о интерфейсной веб-разработке, обучая их основным методам кодирования веб-страниц с использованием HTML и CSS. Эти курсы идеально подходят для студентов без опыта программирования, которые заинтересованы в изучении основных процессов изучения синтаксиса языка программирования и переводе этих знаний в создание практического проекта. Учащиеся изучат основные принципы использования тегов HTML для различения элементов веб-страницы и способы использования тегов CSS для применения шрифтов и стилей к тексту. На более продвинутых курсах студенты узнают, как создавать многостраничные веб-сайты, которые ссылаются друг на друга.
Большинство студентов, стремящихся изучать веб-разработку, не будут удовлетворены изучением того, как создавать веб-страницы, которые выглядят так, как будто они последний раз обновлялись в 1997 году. Эти студенты могут захотеть зарегистрироваться в программе Noble Front End Web Development Certificate.