[Академия]: Курс "Основы Веб-дизайна и Программирования"
Доброго времени суток!
Я решил принять участие в проекте Академия от @ontofractal. И как удачно совпали оставшиеся темы с моими увлечениями. Основы Веб-дизайна и Программирования от Университета Дьюка(Северная Каролина). Это прямо то, что я искал.
Пройдена первая неделя обучения. Во вступлении сказали, что лучше разбивать курс, иначе тяжело воспринимается информация. Не получилось. Курс состоит из 3 частей: HTML, CSS, JavaScript. Подробнее, о том что это такое я расскажу позднее.
Программа
Для начала меня познакомили с программой, в которой, будет проходить обучение. Здесь разделено поле на 2 части. Слева поле для ввода в виде HTML, справа для CSS. Работа над одной и той же страничкой ведется сразу в двух полях.
Регистрация по email и паролю, так же можно и через соц. сети.
HTML
Раньше мощности компьютеров и скорости интернета не хватало почти ни на что. Соединение через телефонную линию, не позволяло даже изображения открыть. С развитием технологии, и компьютеры и скорости интернета позволяют смотреть все онлайн, то есть загрузка идет быстрее чем воспроизведение, что не может не радовать. И старой версии HTML с обычными ссылками, и отсутствием картинок, стало не хватать. В 2014 году вышла текущая версия HTML5. Прогресс не стоит на месте.
Синтаксис
Из чего же состоит страница в интернете? Ссылки, просто текст, картинки, видеозаписи. В общем все, что будет удобно для пользования интернетом. И чтобы все это было на странице, обычно используется язык HTML(Hyper Text Markup Language). Он используется не для программирования, а для браузеров. Браузеры нужны, как раз, для того чтобы превратить этот язык в то, что мы видим на экране. Другими словами HTML- это родной язык на котором "говорят" браузеры. А браузеры, по сути, просто переводчики.
Какой язык бы вы не начинали учить, первое что надо сделать это написать программу, которая выводит на экран "Hello world!". Традиция такая. Посмотрим на код такой страницы.
Примерно так будет выглядеть эта страничка.
Привет мир!
Заголовки
, это тэги которые есть в любом сайте. html отвечает за существование страницы. Остальное можно понять, если внимательно посмотреть на картинку и на код. Здесь так же используются заголовки, если вам знаком markdown, где заголовки обозначаются "####". Здесь они выделяются тэгами h1.....h6 . Чем больше цифра, тем меньше буквы. Закрывающий тэг содержит символ "/" и обозначение. Почти все тэги должны закрываться, например.
Вот эта строка будет выделена. Если вставить просто код, то он его преобразует:
Заголовок 1 уровня самый большой
Тэг div используется для отделения элементов страницы, например заключим картинку и текст в тэг div. В дальнейшем мы сможем именно эту картинку с текстом перекрасить в другой цвет или прикрепить к определенному участку страницы.
Если вы еще не попробовали все, что описано выше, то настало время попробовать.
Продолжим изучение, в этом языке есть возможность выделять текст для более удобного чтения.
Изображения
Дальше я расскажу как вставить картинку. Так же через тэги.
Обратите внимание на знаки для тэгов. Пока это единственный тэг из тех, что мне показали, который не требует закрытия. Так же есть опция "width", которая позволяет изменить размер картинки, можно уменьшить, а можно и увеличить, если поставить значение более 100%. Здесь хотелось бы рассказать об авторских правах. Многие картинки из интернета, созданы человеком, организацией, или группой людей и их права стоит уважать. Я бы, например, хотел, чтобы мою картинку без разрешения не использовали. Многие изображения находятся в публичном доступе, их можно использовать без проблем.
Ссылки
Для ссылок используется тэг
Списки
Списки неотъемлемая часть практически всех страниц. Их есть два вида определенный список, и неопределенный.
В определенном списке, выделяется порядковым номером. Так же может быть список в списке. Выглядит это вот так.
Теперь о впечатлениях.
Я в восторге!!!. Поначалу испугало то, что все лекции на английском, ведь практики не было довольно долго, но буквально через 2-3 лекции, уже почти перестал замечать. Преподаватели с огоньком. Видно, что им нравится их предмет, и то зачем они это делают, и это подкупает. Все, что я учил до этого, мне очень сильно помогло. Возможно после markdown, или после java, но все было просто и понятно. Стараюсь преподносить в доступном варианте. И вот такая страничка получилась в конце 1 части.
А это код
Конспект подготовлен для Академии Голоса @academy.