Здравствуйте уважаемые начинающие веб-мастера. Начинаем изучать языки программирования.
И начнём мы их изучать с html.
Сразу скажу, что в конце курса Вы уже сможете самостоятельно написать сайт на чистом html, и выложить его в интернет. Но я всё же порекомендую не торопиться, и после html, познакомиться с css.
Тогда и сайт Вы сделаете покруче, и сможете исправлять внешний вид сайта, созданного на готовой CMS(система управления контентом).
Изучение языка программирования, и изучение иностранного языка — это далеко не одно и тоже, и оно гораздо легче. Более того, это не страшно, а очень увлекательно.
Просто непонятное всегда пугает, но я вам обещаю, что после первых же занятий, пройдут все страхи.
Учиться мы будем при помощи редактора Notepad++, который Вам нужно установить на свой компьютер.
В этом редакторе файлов, можно написать код, и тут-же посмотреть, как отобразит его браузер. Очень удобно.
Давайте, сначала я Вам немного расскажу, что из себя представляет HTML, и это будет скучная часть нашего курса, а затем займёмся интереснейшей практикой. Там уж, точно, скучно не будет.
НТМL (HyperText Markup Language) дословно — язык разметки гипертекста. С помощью его создаются веб-страницы.
И если, совокупность просто страниц, объединённых одной тематикой, в нашем понимании — книга, или даже, лучше сказать, толстый журнал, то совокупность веб-страниц объединённых одним доменным именем — это и есть сайт.
Каждая веб-страница имеет свой уникальный текст, написанный Вами, и заключенный в html-код.
Код — это команды браузеру, как отображать тот или иной элемент. Допустим, написали Вы слово, а вот в каком виде оно будет на экране, зависит от того, в какой код вы его заключите.
Код html состоит из следующих элементов:
1. Теги.
2. Атрибуты тегов.
3. Значения атрибутов.
Давайте рассмотрим их по порядку.
Тег html — это основной элемент кода. Пишется он так:
<html></html>
Как видите, состоит он из двух частей. Первые угловые скобки — это открывающая часть, а вторые, со слешем — закрывающая.
Между этими двумя частями, пишется весь остальной код страницы, которая будет отображаться на экране.
Тег <html> сообщает браузеру, что это html-документ, и является основным (родительским) тегом для всех остальных элементов.
В остальных тегах, элементах кода, в угловых скобках пишется буква, или слово, которое будет являться названием тега и определит, какой элемент будет этим тегом выведен на экран.
Например, если поставить в угловых скобках букву h1, то на экране выведется текст в виде заголовка.
<h1>Здравствуйте<h1>
То есть шрифт слова «Здравствуйте», будет крупнее и жирнее остального текста.
Если в угловые скобки поставить букву p, то текст заключённый в тег, будет выведен в виде абзаца.
<p>Здравствуйте</p>
То есть, шрифт будет обычный, но всё, что написано после этого тега, будет начинаться с новой строки.
И таких букв, и даже слов, определяющих вид команды, в html несколько десятков, хотя в частом использовании находятся не больше 10-15 тегов.
Более подробно, каждый из них, мы рассмотрим по ходу этого курса
Следующие — это атрибуты тегов. Часто используемых, тоже не более десятка. А в последнее время и того меньше, так как все функции атрибутов перенесены в css.
Но об этом попозже, а пока всё же узнаем, что такое атрибут, так как некоторые из них не потеряли актуальности и не потеряют никогда.
Атрибут — это дополнительная команда. Пишется он в открывающей части тега. Например, захочется вам сделать заголовок цветным, тогда в открывающую часть тега h1, нужно вставить атрибут color
<h1 color></h1>
И сразу переходим к значениям атрибутов. Дело в том, что атрибут обязательно должен быть со значением. То есть, дали вы команду, что заголовок должен быть цветным, значит нужно указать, какой будет цвет.
Это указание и будет значением атрибута. Выглядит оно так:
<h1 color="#FF000D"></h1>
Это красный цвет.
Точно так же, но при помощи других атрибутов, можно задавать размер текста, отступы, выравнивания, и много чего ещё.
Хотя, оформление всё больше переходит к CSS, а атрибуты оформления постепенно устаревают и выходят из практики.
Всё это мы рассмотрим далее по ходу курса, подробно и наглядно.
А сейчас делаем вывод из всего вышесказанного:
Язык HTML — это язык, который понимают браузеры. Нам он необходим для того, чтоб общаться с браузером, или можно сказать, управлять им, то есть давать ему команды на то, как воспринимать и отображать на экране то, что мы напишем.
Хочу добавить, что теги, атрибуты, и их значения, легко запоминаются во время практических занятий, чем и будут по сути все последующие статьи.
Там сразу видишь тег, узнаёшь его значение, в каком случае и каком месте он применяется, какими знаками сопровождается, и как пишется, так что сейчас я не буду показывать Вам все теги и атрибуты, увидим всё на практике.
Полный список тегов и атрибутов html, если кому то интересно, всегда можно посмотреть в Шпаргалках. .
Хотя, если вы не собираетесь профессионально заниматься программированием, будет достаточно знать несколько (около десятка) основных тегов и несколько же атрибутов.
Ну, и всё, пожалуй. Мало? А больше пока и не надо. Остальное будем узнавать в процессе обучения на конкретных примерах.
Думаю, на примерах будет лучше усваиваться. Наша цель сделать сайт и понять, как же всё это работает, так что вперёд на практику.
Перемена
Только сядешь за учёбу — так обязательно какая-то падла разбудит!!!
В школе учитель говорит ученикам:
— Кто из вас окончательно считает себя тупицей? Встаньте.
После долгой паузы поднимается один ученик:
— Так ты считаешь себя тупицей?
— Ну не совсем, но как — то неловко, что вы стоите один.
Как сделать иконку для сайта — favicon < < < В раздел > > > Комментарии
Спасибо огромное за Ваш блог. Шесть часов билась над созданием сайта и только у Вас нашла доступно изложенную информацию. Серьезно, огромное спасибо. Вы очень крутой!)
Можно и быстрее. Намного. Но только при наличии логического мышления и, безусловно, дизайнерской «жилки». Я не могу похвастать ни тем, ни другим — результат перед вами.
Ну примерно если этим заниматься года 3?
А если самому изучать языки программирования, и понемногу учиться создавать крутые сайты, можно стать веб-программистом?
Пришлите мне этот файл на адрес tatsek@mail.ru, я посмотрю и скажу что сделать, чтоб услышать Брамса. А курс можно усвоить, хотя-бы потому, что html — это очень интересно, вот только для сохранения музыки используются другие расширения.
У меня в загрузках скаченный из Яндекс-музыки файл html. Если я усвою ваш курс, смогу я открыть этот файл и услышать, наконец, Брамса?
Прекрасно!Все очень понятно.Спасибо.
Эт очень хорошо, что всё понятно, тёзка. На днях начну публиковать процесс изучения javascript и jQery. Заглядывай.
Всем добрый вечер!!
Уважаемый !
С.Ю., извините что так обращаюсь к вам
ваши обучающие курсы заинтриговали, прочёл и стал изучать дальше, до попадания к вам знания HTML. и другие были на нуле, но потихоньку движение пошло, главное ваших курсов простота и доходчивость, и ни какой воды,
спасиб , не буду слишком вас хвалить иначе получится заказной отзыв
ещё раз спасиб!!!
по больше бы вот таких простых и доходчиых, свежих пояснений
Очень хорошо что есть такие люди как Вы большое спасибо вам за подробный рассказ. Буду учить язык HTML и css что бы переделать сайт. Сейчас пытаюсь сделать новый сайт на WordPress . Потому что этот уже устарел, технологии двигаются вперед. Но столько всего не понятного, с вашими объяснениями становится что то понятно.
Юрий — это мой папа. Я же Сергей. Конечно заходите и спрашивайте. Вообще-то я предполагал, что Вы с html и scc давно знакомы. Уж больно сайт у Вас хороший.
Юрий, у Вас явно талант преподавателя! Мне даже захотелось наконец-то изучить HTML. Буду стараться заходить к Вам каждый день, и хотя бы по часу изучать эту науку, а то у меня постоянно проблемы с сайтом, а как все исправить, и спросить не у кого.
Так-так, прогресс налицо — применили спецсимволы в комментариях. Всё OK.
На клавиатуре конечно же угловые скобки, но их можно использовать и как знаки больше или меньше.
Вы ведь сейчас на своём сайте работаете только в визуальном режиме редактора. В нём можно писать так как есть. Хочешь — как скобки, хочешь — как знак больше-меньше.
А вот в режиме «Текст», они уже будут только скобками, и обозначать тег.
В Notepad они тоже, только скобки. А больше-меньше пишется спецсимволом.
Кеш в Chrome чистится так: Вверху экрана справа, три чёрные, жирные полоски, щёлкаете по ним, откроется меню, выбираете «Настройки», когда откроются, в самом низу будет «Показать дополнительные настройки», щелкаете по этой надписи, находите «Личные данные», а в них «Очистить историю», щёлкаете по «Очистить историю», откроется диалоговое окно, в строчке «Удалить указанные ниже элементы», выбираете «За всё время», затем ставите галочку в чекбоксе «Изображения и другие файлы сохранённые в кеше», в других чекбоксах галочек быть не должно, если есть то снимите, затем «Очистить историю». И всё.
доброго-предоброго Вам дня.
читаю, вот, очень интересно. но …Вы мне только скажите, то, что на клавиатуре >< это угловая скобка или это знак больше и меньше?
а браузер у меня — хром. подскажите насчёт, как почистить кэш.
спасибо