Введение в веб-программирование
Это будет серия статей, посвященных обучению основам веб-программирования. Статьи из этой серии будут публиковаться два раза в неделю.
Статья 1
Почему важно изучать веб-программирование?
Информатика — это новая дисциплина, возникшая в течение последних 100 лет. Прогресс в области технологий происходит каждый день, и рабочие места в сфере технологий сейчас востребованы как никогда. Это означает, что интуитивно понятно, что мы видим ценность в обучении разработке и использованию этих технологий.
Кроме того, изучение этого материала может помочь вам заработать большие деньги!
Итак, с чего мы начнем?
Я решил начать эту серию с базовых знаний HTML и CSS.
HTML — язык гипертекстовой разметки
CSS — каскадные таблицы стилей
Это пара стандартных языков программирования, используемых для веб-разработки.
Что такое язык программирования?
Язык программирования — это специальный язык, который программисты используют для разработки программ, скриптов или других наборов инструкций для выполнения компьютерами. - "Источник"
Мы можем выучить эти языки так же, как французский или испанский. В то время как в испанском языке мы можем спрягать наши глаголы, в языках программирования мы отлаживаем, оцениваем время выполнения и оптимизируем функции. Как только мы выучим эти языки, мы сможем использовать их для создания интересных вещей в Интернете, таких как веб-сайты и веб-приложения.
Есть десятки крутых языков программирования для изучения, и все они имеют свои отличия. Рекомендую ознакомиться с этой статьей, где я писал о том, какие языки программирования стоит изучать людям.
Я готов создать свой первый сайт
Не так быстро. Сначала нам нужно поговорить о расширениях файлов.
Каждый должен знать, что такое текстовый файл. Google определяет расширение файла как группу букв, стоящих после точки в имени файла и указывающую на формат файла.
Например: когда мы создаем файл страниц и сохраняем его, расширение нашего файла будет .pages. Когда мы создаем текстовый файл, расширение будет .txt.
Поэтому, когда мы создаем файл html или css, нам нужно будет использовать расширения файлов .html и .css.
Хорошо, теперь я действительно готов
Если вы хотите следить за моей видео серией, вы также можете это сделать. Я знаю, что некоторые люди способны лучше учиться визуально. Я скажу, что я новичок в процессе создания видео, поэтому вы можете просто придерживаться серии статей.
В любом случае, каждый открывает пустой файл.
Мне все равно, какой текстовый редактор вы используете. На Mac вы можете использовать textEdit, встроенный текстовый редактор. Если вы хотите почувствовать себя профессиональным программистом, вы можете поискать такие вещи, как возвышенный текст, скобки или атом.
Как только мы откроем наш файл, мы захотим продолжить и немедленно сохранить наш файл. Я рекомендую сохранить файл на рабочем столе, чтобы вы могли найти и открыть его быстро и легко.
Привет мир
Теперь, когда наш файл сохранен с правильным расширением, мы можем добавить HTML-код. Первое приложение, которому вас научит каждое руководство по программированию, — это приложение hello world.
Hello world — одна из самых простых вещей, которые мы можем создать.
Для начала мы добавим html-код шаблона, который нужен каждому html-файлу.
<!Doctype html> <html> <head><title>Hello World</title> </head> <body><h1>Hello World</h1> </body> </html>
По сути, это просто стандартный код шаблона, который вы можете скопировать и вставить прямо в свой файл.
Скопировав код, обязательно сохраните файл, а затем выберите его на рабочем столе. Файл должен открыться в любом установленном вами браузере (Chrome — лучший), и вы должны увидеть что-то вроде этого.
Если вы успешно дошли до этого момента, поздравляем! Вы только что создали свое первое веб-приложение.
Что означает код?
Есть две важные вещи, которые вам нужно знать о том, что у нас есть на данный момент.
HTML состоит из тегов. Например, ‹html›‹/html› — это один набор тегов. ‹head›‹/head› — это другое. Теги вложены друг в друга, как матрешки. (см. рис слева)
Каждый тег имеет свое значение, и почти все теги представляют собой пару открывающих и закрывающих тегов. Закрывающий тег всегда обозначается косой чертой. (пример: ‹/head› — это закрывающий тег пары ‹head›‹/head›.)
HTML-теги — это самые внешние теги нашего кода. Они будут контейнером для любых других тегов, которые мы добавим в наш файл. Это означает, что открывающий ‹html› всегда должен быть вверху нашего файла, а закрывающий ‹html› всегда должен быть внизу.
Теги head будут содержать важную информацию о нашем веб-приложении/веб-сайте, такую как ссылки на стили, ссылки на файлы javascript, метаданные, заголовок и многое другое. На данный момент мы добавили наши теги ‹title›‹/title› с заголовком Hello World. Название веб-приложения всегда отображается на небольшой панели вкладок в любом браузере, который вы используете.
Теги body будут содержать весь твердый контент, отображаемый на нашей странице. Прямо сейчас у нас есть несколько тегов заголовков в нашем файле. (‹h1›Hello World‹/h1›) h1 означает заголовок 1. Существует 6 различных тегов заголовка. Заголовок 1 (‹h1›) — самый большой, а заголовок 6 (‹h6›) — самый маленький. Подробнее об этом мы поговорим в следующей статье.
Последнее, что вам, ребята, нужно знать, это то, что все эти теги будут элементами нашего веб-приложения/веб-сайта. Эти элементы технически являются объектами HTML DOM. Ребята, у вас есть куча интересных ресурсов, чтобы узнать о DOM, но в основном люди, которые изобрели WWW (сеть), создали стандартную модель того, как люди будут программировать веб-сайты и прочее. Я стараюсь не углубляться в детали в этих статьях, потому что некоторые люди могут быть действительно сбиты с толку слишком большим количеством информации сразу.
Одним из моих любимых ресурсов, когда я впервые изучал этот материал, был w3schools.com. Если у вас есть какие-либо вопросы по этому поводу, они получат ваши ответы. Вот ссылка.
Конец статьи 1
Я надеюсь, что всем понравился и был понятен этот пост. Если вам интересно узнать больше о веб-программировании, следите за обновлениями. Постараюсь через пару дней опубликовать еще одну статью.
