Web разработка для начинающих: HTML и CSS — Stepik

Основы Web-программирования

264

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

Ниже представлены разделы, которые входят в данную тему:

HTML5

HTML5 — это не просто новый язык разметки, а дюжина независимых веб-стандартов в одной упаковке. Новый стандарт позволяет воспроизводить видео, не прибегая к помощи модулей расширения браузера, таких как, например, Flash. Также в этом стандарте вводится лавина функциональностей, движимых JavaScript, которые могут придать веб-страницам определенные расширенные, интерактивные возможности, встречаемые в программном обеспечении для настольных компьютеров.

CSS3

Почти бессмысленно пытаться создать современный веб-сайт, не используя возможностей CSS (Cascading Style Sheet).

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

JavaScript, jQuery

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

ASP.NET

ASP.NET является основной технологией для построения серверных элементов веб-приложений от Microsoft. Заинтересовать разработчиков в ASP.NET совсем нетрудно. Без преувеличения, ASP.NET является наиболее полной платформой для веб-разработки из всех, которые когда-либо создавались.

PHP и MySQL

Сочетание PHP и MySQL является одним из самых удобных подходов к динамическому веб-конструированию, основанному на использовании базы данных. Благодаря открытости исходных кодов (в отличие от конкурирующей технологии ASP.NET) это технологическое сочетание можно использовать совершенно бесплатно, и поэтому оно приобрело очень большую популярность у веб-разработчиков. Любой претендующий на результативность разработчик, использующий платформу Unix/Linux или даже Windows/Apache, нуждается в серьезном освоении этих технологий.

Уроки веб дизайна с нуля и веб-программирование для начинающих

Палитра цветов

Выберите нужный цвет из представленной палитры подбора цвета онлайн и скопируйте код цвета в 16-й системе:

Опубликовано admin / August 6, 2019 / 0 Комментарии / Рубрики: Веб-программирование, HTML, Веб-программирование, Графика

На уроке рассматривается работа с меню в joomla: добавление пунктов главного меню, менеджер меню

Дальше — больше… урок 3 Joomla! Создание меню и работа с ним →

Опубликовано admin / August 2, 2019 / 0 Комментарии / Рубрики: Веб-программирование, Joomla

На уроке рассматривается административная панель joomla!, создание разделов и категорий, добавление и редактирование информационных статей, работа с меню и отображением программных модулей

Дальше — больше… урок 2 Joomla! Создание и вывод содержимого сайта →

Опубликовано admin / July 24, 2019 / 0 Комментарии / Рубрики: Веб-программирование, Joomla

Цель урока:
Создание «самописного» сайта средствами HTML и CSS .

Дальше — больше… Пишем сайт (электронный учебник) на HTML и CSS →

Опубликовано admin / December 8, 2018 / 0 Комментарии / Рубрики: Веб-программирование, CSS, Веб-программирование, HTML

Дальше — больше… HTML Урок 8. Вставка видео на сайт →

Опубликовано admin / November 23, 2018 / 2 Комментарии / Рубрики: Веб-программирование, HTML, Веб-программирование

На уроке будет рассмотрен объект javascript — canvas, разобраны примеры рисования фигур и интересные задания

Дальше — больше… JavaScript урок 14. Объект canvas, рисование в javascript →

Опубликовано admin / March 18, 2018 / 0 Комментарии / Рубрики: Веб-программирование, JavaScript

На уроке рассмотрены методы передачи данных форм GET и POST

Дальше — больше… PHP занятие 10. Сессии →

Опубликовано admin / April 4, 2017 / 0 Комментарии / Рубрики: Веб-программирование, PHP + MySQL, Веб-программирование

На уроке рассмотрены методы передачи данных форм GET и POST

Дальше — больше… PHP занятие 9. Cookie (Куки) →

Опубликовано admin / February 24, 2017 / 0 Комментарии / Рубрики: Веб-программирование, PHP + MySQL, Веб-программирование

На уроке рассмотрены методы передачи данных форм GET и POST

Дальше — больше… PHP занятие 8. Передача данных →

Опубликовано admin / February 23, 2017 / 4 Комментарии / Рубрики: Веб-программирование, PHP + MySQL, Веб-программирование

На уроке рассмотрены функции эмуляции SSI в php или подключения контента файлов

Дальше — больше… PHP занятие 7. Функции эмуляции SSI (подключение) →

Опубликовано admin / February 23, 2017 / 0 Комментарии / Рубрики: Веб-программирование, PHP + MySQL, Веб-программирование

Изготовление сайтов и веб-приложений — составной процесс, вовлекающий труд различных специалистов. Этот вид деятельности называется веб-разработка.

Для того чтобы определить понятия

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

Для цельного понимания сферы разработки веб-приложений и веб-сайтов необходимо рассмотреть способы построения сайтов в зависимости от их видов и этапы разработки сайтов и веб-приложений.

Способы построения сайта в зависимости от его вида:

• Статический сайт
• Динамический сайт (самописный)
• Флэш-сайт
• Сайт на «движке»

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

Разработка и дизайн веб-страниц и сайтов: этапы

Большинство разработчиков используют следующий алгоритм, включающий перечисленные ниже этапы создания сайта:

1. Разработка дизайна. Веб-дизайнеры разрабатывают макеты шаблонов страниц (главной и типовых страниц). Данный процесс определяет, каким образом пользователь будет получать доступ к информации и услугам сайта. То есть веб-дизайнер занимается непосредственно разработкой пользовательского интерфейса. Чаще всего макеты подготавливаются в основном с использованием графических редакторов.
2. Вёрстка Web-страниц. Так называемый верстальщик получает от дизайнера готовые макеты шаблонов в виде простых изображений (например, в формате JPEG, PNG), либо разбитых по слоям в формате PSD или AI. Данный специалист должен получить из этих графических макетов гипертекстовые страницы. На данном этапе применяются графические редакторы (Photoshop), различные визуальные конструкторы и специальные программы для веб-дизайна, WYSIWYG-редакторы для веб-дизайна и иногда полноценные платформы для создания сайтов. Верстальщик должен обладать навыками работы с данными программными средствами и знать язык HTML и CSS (как минимум).
3. Веб-программирование. Веб-программисты получают готовые шаблоны страниц и указания дизайнеров по работе и организации элементов сайта. Программист разрабатывает программную часть сайта либо, делая её с нуля, в таком случае чаще всего используется фреймворк, либо сайт создается при помощи специальной компьютерной программы на сервере — так называемого движка (от англ.  engine). Такая программа-движок может быть либо сделана на заказ для отдельного сайта, либо быть готовым продуктом, рассчитанным на некоторый класс сайтов (интернет-магазин, блог, сайт-визитка и т.п.). Примером может служить система управления содержимым сайта (CMS – Content Management System).
4. Размещение сайта в Веб, наполнение контентом и публикация.
5. Оптимизация Web-сайта с целью повышения его «видимости» в Веб.

В первых двух этапах разработки веб-сайта участвует веб-дизайнер (иногда с начальными знаниями веб-программирования). Третий этап разработки – полностью на веб-программисте. Последние два этапа могут выполняться другими специалистами либо веб-программистом при условии наличия соответствующих навыков (администрирования и продвижения).

Таким образом, веб-программирование — значительный и значимый раздел программирования, ориентированный на разработку веб-приложений (программ, обеспечивающих функционирование динамических сайтов).

Языки веб-программирования — это алгоритмические языки, которые в основном предназначены для работы с веб-технологиями. Условно языки веб-программирования делятся на две взаимосвязанные и пересекающиеся группы: клиентские языки веб-программирования и серверные языки веб программирования.

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

Введение в веб-разработку (бесплатное руководство)

💬 «Нет ничего лучше, чем ничего не знать, ведь тогда так многому еще предстоит научиться!»

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

Введение

В этом курсе вы узнаете все о том, как стать веб-разработчиком, от обязанностей, которые веб-разработчик выполняет изо дня в день, до набора навыков, которые вам понадобятся для достижения успеха. такая роль. И, конечно же, вы также запачкаете руки кодом: мы познакомим вас с фундаментальными строительными блоками Интернета и убедимся, что вы закончите этот курс, разработав свой самый первый веб-сайт!

Что мы будем делать сегодня?

1. Узнайте, какова роль веб-разработчика, и обсудите различные типы веб-разработчиков
2. Взгляните на навыки, необходимые для того, чтобы стать веб-разработчиком
3. Предварительный просмотр того, что мы будем изучать в течение следующих 5 дней
4. Создайте свою первую веб-страницу с помощью текстового редактора и браузера

Готовы окунуться в волшебный мир веб-разработки? Пойдем!

1. Кто такой веб-разработчик?

Веб-разработчик в душе интерактивный художник . Ими движет глубокое желание создавать вещи . Холст веб-разработчика — это веб-браузер пользователя.

Подобно тому, как любознательный ребенок получает удовольствие от создания игрушек, соединяя блоки LEGO, а затем испытывает такую ​​же радость, разбирая вещи, чтобы посмотреть, как они сделаны, работа веб-разработчика заключается в использовании основных строительных блоков сети. (например, HTML, CSS и JavaScript), чтобы создать что-то сложное, например веб-страницу. Не парься! Мы скоро разберемся во всех этих терминах.

В обязанности веб-разработчика также входит диагностировать проблемы в работе веб-сайта, понимать, как что-то работает, читая исходный код, и вносить изменения для устранения любых проблем. По сути, это делает веб-разработчиков врачами всемирной паутины. Когда мы говорим о всемирной паутине, мы в основном имеем в виду веб-сайты и веб-приложения. В этот момент любопытный начинающий разработчик внутри вас может задаться вопросом: «В чем разница между ними?»

Мы рады, что вы спросили! А 9Веб-сайт 0009 обычно представляет собой простую страницу или группу страниц (например, популярный сайт веб-комиксов xkcd). Однако современные веб-сайты — это гораздо больше. Возьмем, к примеру, Google Документы. У него приятный интерфейс, который после открытия очень похож на настольное программное обеспечение, такое как Microsoft Office. Такие сложные веб-сайты часто называют веб-приложениями . Сегодня ожидается, что веб-разработчик знает, как создавать веб-приложения и работать с ними. Сказав это, большинство людей используют термины взаимозаменяемо, так что не слишком зацикливайтесь на терминологии!

Типы веб-разработчиков

Существуют разные типы веб-разработчиков, занимающихся разными областями. К ним относятся:

• Frontend-разработчиков: Frontend-разработчиков реализуют дизайн веб-страниц с использованием HTML и CSS. Они следят за тем, чтобы сайт выглядел красиво на разных устройствах, а формы и кнопки работали.
• Backend-разработчиков: Backend-разработчиков создают основу веб-приложения. Они пишут логику кода, которая обрабатывает вводимые пользователем данные (например, что должно произойти, когда вы нажмете кнопку регистрации после заполнения формы).
• Разработчики с полным стеком: Разработчики с полным стеком занимаются как бэкендом, так и внешним интерфейсом. В зависимости от решаемой задачи они могут менять плащ 🦸‍♀️🦸‍♂️ и перемещать стопки. Вы можете узнать больше о различиях между frontend и backend разработкой в ​​этом руководстве.

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

2. Какие навыки необходимы, чтобы стать веб-разработчиком?

Что нужно, чтобы стать веб-разработчиком? По сути, всего три вещи: HTML, CSS и JavaScript — три столпа Интернета, о которых мы узнаем в течение следующих нескольких дней. Вместе эти три столпа обеспечивают работу каждого веб-сайта, определяя отображаемый контент (HTML), указывая браузеру, как отображать этот контент (CSS), и делая контент интерактивным (JavaScript) соответственно.

Веб-разработчик хорошо разбирается в этих трех технологиях. Они могут читать чужой код и вносить в него изменения. Они могут находить и устранять ошибки (недостатки в существующем коде). Иногда веб-разработчик может работать над новым проектом (новым веб-сайтом) с нуля или, возможно, ему придется работать над существующим веб-сайтом и улучшать его. Типичный день в жизни веб-разработчика включает в себя исправление ошибок, разработку новых функций (то есть усовершенствований) и веб-страниц, а также работу с другими разработчиками для обсуждения способов решения проблем.

Не обращайте внимания на все эти детали. Вскоре вы увидите, что все они очень взаимосвязаны, и изучение одного из них автоматически сделает вас лучше в нескольких других!

Каковы перспективы работы веб-разработчиков?

Короче говоря, очень хорошо. Прогнозируется, что занятость веб-разработчиков вырастет на 13 процентов с 2018 по 2028 год, что намного быстрее, чем в среднем по всем профессиям. Спрос будет обусловлен растущей популярностью мобильных устройств и электронной коммерции (Бюро статистики труда). Это прекрасное время для веб-разработчика, поскольку стартапы процветают, что приводит к тому, что зарплаты веб-разработчиков выше среднего в большинстве частей мира.

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

3. Что мы будем изучать в течение следующих пяти дней

Ни один курс веб-разработки не обходится без практического проекта. В этом курсе мы будем использовать три столпа Интернета (HTML, CSS и JavaScript) для создания вашего первого проекта — персонализированного веб-сайта-портфолио. Если у вас есть эти инструменты, вам будет намного проще освоить другие инструменты и языки. Уделите особое внимание основам, так как шаткий фундамент впоследствии приведет к путанице. Мы также предоставим вам ресурсы, необходимые для размещения вашего веб-сайта в Интернете, чтобы вы могли поделиться им со своими друзьями и семьей.

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

На второй день мы напишем больше HTML и HTML-элементов и создадим примерный макет веб-сайта нашего проекта.

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

На четвертый день мы углубимся в продвинутый CSS и добавим классные эффекты на нашу страницу.

В пятый и последний день мы научимся писать основы JavaScript. Мы также рассмотрим проверки форм и другие распространенные элементы программирования на JavaScript.

Чтобы дать вам небольшое представление, примерно так будет выглядеть ваш веб-сайт в конце этого курса. Довольно круто, правда?

Готовы начать? Начнем с настройки среды разработки.

Настройка среды разработки

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

1. Текстовый редактор для написания кода
2. Веб-браузер, чтобы увидеть, что мы создаем

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

• Google Chrome можно загрузить с https://www.google.com/chrome/
• Sublime Text можно загрузить с https://www.sublimetext.com/3.

Как и любому хорошему мастеру, важно знать и понимать свои инструменты. По этой причине давайте кратко рассмотрим то, что у нас есть на данный момент.

Google Chrome

Google Chrome — это веб-браузер. Вы можете или не можете уже использовать Google Chrome для просмотра веб-страниц. Веб-браузер позволяет нам просматривать веб-страницы (похожие на ту, на которой вы читаете этот текст). Мы будем использовать Google Chrome для просмотра результатов после написания и внесения изменений в наш код.

Sublime Text

Sublime Text — популярный текстовый редактор. Текстовый редактор — это программа с очень удачным названием; это помогает нам редактировать текст. Он похож на текстовый редактор по умолчанию, который предустановлен на Mac или Windows, но имеет дополнительные функции, такие как выделение кода, для улучшения нашего кода и отладки.

⚠️ Осторожно! Sublime Text — это платное программное обеспечение с неограниченным пробным периодом. Время от времени вы будете видеть всплывающее диалоговое окно с предложением заплатить за лицензию на программное обеспечение. Вы можете заплатить за него, если хотите, но вам не нужно платить только за этот курс.

Этот курс не зависит от ОС, что означает, что вы можете пройти его в Windows, Mac OS или Linux.

😎Совет профессионала : Если вы застряли при установке Chrome или Sublime или видите какие-либо сообщения об ошибках, лучше всего выполнить поиск в Интернете (попробуйте поиск в Google или DuckDuckGo) для точного сообщения об ошибке. Вполне вероятно, что у других людей была такая же проблема до нас, и решение уже существует.

После загрузки установите его в соответствии с инструкциями, которые вы найдете на этих сайтах. После завершения установки вы готовы перейти к следующему разделу.

4. Ваша очередь: Создание вашей первой веб-страницы

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

HTML означает H yper T ext M arkup L язык. В двух словах:

• Гипертекст просто означает текст, который может переходить из одной точки в другую. Если вы когда-либо нажимали ссылку на странице (попробуйте это: google.com), вы использовали гипертекст.
• Разметка — это просто способ структурировать содержимое, чтобы мы могли различать разные блоки текста.
• Язык означает, ммм, язык. Компьютерные языки похожи на языки реального мира, такие как английский и немецкий, но очень строги в своем синтаксисе.

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

Ладно, хватит теории. Давайте приступим к делу, открыв Sublime Text.

⚠️ Осторожно! Студенты часто застревают на этом шаге, так что не торопитесь.

Щелкните Файл > Открыть папку (или просто Открыть… , если вы используете MacOS). Обратите внимание, что в MacOS панель инструментов находится вверху экрана (как показано на снимке экрана ниже).

Как только вы выберете Файл > Открыть/Открыть папку, откроется новое окно, которое позволит вам выбрать существующую папку или создать новую папку. Перейдите на «Рабочий стол» и создайте там папку. Создание папки на рабочем столе облегчает поиск в дальнейшем.

Нажмите на маленькую иконку, которая позволит вам создать новую папку. В разных операционных системах он может выглядеть по-разному.

В MacOS это будет выглядеть так:

В Linux это будет выглядеть так. Если вы нажмете на нее, вы сможете создать папку, дав ей имя.

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

⚠️Осторожно! Хотя строго следовать схеме именования, которую мы используем, не требуется, мы рекомендуем вам придерживаться нашего пути в этом курсе. Это облегчит следование курсу позже, когда мы будем работать с несколькими файлами.

Если все пойдет хорошо, вы должны увидеть экран, подобный следующему.

Отсюда щелкните правой кнопкой мыши портфолио на левой боковой панели и выберите Новый файл . Вы должны увидеть новый файл с надписью « без названия» . Это нормально, так как мы еще не назвали его.

Сохраним файл. Щелкните Файл > Сохранить , и вы должны открыть окно с просьбой ввести имя файла. Здесь введите index.html и нажмите «Сохранить».

Мы называем его «index.html» в соответствии с соглашением. По умолчанию точка входа на веб-сайт называется индексной страницей, отсюда и название.

Также убедитесь, что вы сохранили файл в папке портфолио . Вот что вы должны увидеть сейчас.

Теперь пришло время написать первые несколько строк кода! На сегодня мы просто запустим нашу страницу. Завтра мы углубимся в смысл каждой строки, поговорим подробнее о том, что такое HTML, и создадим дополнительную структуру.

🙋  Обратите внимание: Фрагменты кода в видео могут не совпадать с фрагментами кода в тексте руководства. Ничего страшного — в программировании обычно существует более одного правильного способа достижения одного и того же результата. Будьте уверены, вы изучаете одни и те же концепции!

Итак, давайте приступим к кодированию вашей первой веб-страницы. Введите следующий код как в файл index.html :

Уже готово? Хороший. Вот как это должно выглядеть на вашем экране.

Посмотреть изменения кода на GitHub >

Хорошо, отличная работа! Вы только что написали настоящий HTML-код. Пришло время посмотреть, как это выглядит в браузере. Это называется с кодом , и мы будем делать это все время в этом курсе.

Чтобы запустить HTML, откройте веб-браузер Google Chrome, который мы установили ранее. Оказавшись там, нажмите Ctrl+O в Windows и Linux или Cmd+O на Mac, чтобы открыть диалоговое окно проводника.

Перейдите к папке Desktop , а затем к папке Portugal , и вы должны увидеть файл index. html , в который мы только что написали код. Откройте этот файл, и вы должны увидеть что-то вроде следующего:

Если вы видите страницу выше, похлопайте себя по плечу. Вы только что создали свою первую функциональную веб-страницу. Обратите внимание, где появляются тексты « Первая веб-страница » и « Hello World ».

Вернемся к Sublime Text и попробуем изменить Hello World в строке 7 до Hello World, загляните на мой сайт! Сохраните его и обновите страницу в Chrome. Вы должны увидеть обновленную версию текста.

Посмотреть изменения кода на GitHub >

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

Помимо «URL-адресов коммитов Github»

На протяжении всего курса вы время от времени будете встречать ссылку на Github (https://github. com), подобную приведенной выше. Github — это веб-сайт, который разработчики (и даже не разработчики) используют для размещения проектов кода и обмена ими с другими. Каждое изменение (например, изменение нашего заголовка) называется «коммит», и ссылка под изображениями приведет вас к соответствующему коммиту.

Эта ссылка приведет вас к точной точке истории проекта и покажет вам, что изменилось. Например, приведенная выше ссылка показывает, что строка красного цвета была удалена и добавлена ​​строка зеленого цвета . Это изменение, которое мы внесли.

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

На этом наш первый урок подходит к концу. Хорошая работа!

Резюме

Сегодня мы узнали, что значит быть веб-разработчиком и какие побочные роли в веб-разработке. Мы также получили представление о технологиях веб-разработки с высоты птичьего полета, которые мы собираемся изучить позже в ходе курса. Затем мы установили необходимые инструменты и подготовили наши компьютеры к следующим двум дням этого курса. Мы также создали нашу первую веб-страницу, внесли в нее изменения и научились «запускать» наш код. Это действительно хороший прогресс для первого дня! Завтра мы углубимся в некоторые синтаксические аспекты, связанные с HTML, поговорим обо всех элементах HTML, которые мы будем использовать в нашем курсе, и создадим базовую структуру страницы нашего портфолио в HTML.

Но подождите, это еще не все! Если вы чувствуете мотивацию и хотите добавить больше типов текста на свою веб-страницу до завтра, почему бы не попробовать ежедневную задачу?

🧐Ежедневное задание

Вы заметили, что текст в строке 4 () и строке 7 (

Hello World

) отображается в названии вкладки и выделен жирным шрифтом на страница соответственно?

title и h2 (заголовок 1) — это то, что мы называем элементами HTML. Таких элементов еще много, вроде р (абзац), х3 , х4 .. х6 (заголовок 2, заголовок 3…заголовок 6) и сильный (жирный текст).

В сегодняшнем задании попробуйте добавить следующие теги на свою страницу с собственным контентом

1. h4
2. сильный
3. р

Когда вы закончите, ваша страница должна выглядеть примерно так. Текст внутри тегов (например, «Я исследователь» ) можно настроить по своему усмотрению.

Ваша задача написать так, как показано на картинке (возможно, с вашим настроенным текстом) и объяснить себе, что сделали элементы h4 , strong и p . Если вам удалось заставить все работать, опубликуйте скриншот и отметьте @careerfoundry в Твиттере.

---

🙋Решение

Вы выяснили, что делает каждый тег?

h4 — заголовок, такой же, как h2 , но менее важный (и выглядит меньше). strong делает текст жирным. p — сокращение от абзаца и используется для текстового содержимого.

📗Ссылки

• Заголовки HTML (

  ,

  …

  )

❓ FAQ

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

A. Если вы не можете создать новую папку с помощью Sublime, вы можете создать ее с помощью файлового менеджера (например, Finder в MacOS). Важно то, что папка создается, и вы можете открыть ее в редакторе Sublime Text.

В. Могу ли я использовать Atom / Nodepad / Wordpad / Google Docs / «X» для написания кода и Firefox / Safari / Opera в качестве браузера?

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

В. Я не понял код, который мы написали сегодня. Что такое h4 и сильно? Как это работает?

А. Терпение! Завтра мы узнаем больше об HTML, и на эти вопросы будут даны ответы.

В. Я получаю сообщение « Ваш файл не найден » на темном и тусклом экране

О. Скорее всего, вы открыли не тот файл или ввели неверный путь к файлу. Проверьте это еще раз и попробуйте сделать это точно так же, как мы делали в курсе.

В. Почему мы создаем сайт-портфолио, а не онлайн-игру/анимацию/социальную сеть?

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

🦉Отзыв

У вас есть отзывы об этом уроке? Большой! Мы всегда стремимся улучшить его и сделать его лучшим ресурсом. Присылайте сюда свои мысли.

Веб-разработка для начинающих – Бесплатный курс (5 учебных пособий)

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

Учебное пособие 1

Введение в веб-разработку

В своем первом учебном пособии вы узнаете, чем именно занимается веб-разработчик, какие бывают типы разработчиков, а также какие навыки необходимы для достижения успеха в этой роли. 👩‍💻Не только что; вы также посмотрите, что приготовили для вас следующие пять дней, и вы создадите свою первую веб-страницу!

В своем первом уроке вы узнаете, чем именно занимается веб-разработчик, какие бывают типы разработчиков, а также какие навыки необходимы для достижения успеха в этой роли. 👩‍💻И не только это; вы также посмотрите, что приготовили для вас следующие пять дней, и вы создадите свою первую веб-страницу!

Учебник 2

Введение в HTML

HTML предназначен для структурирования данных; это скелет, который скрепляет все вместе.🧱В этом уроке вы изучите базовый синтаксис HTML, некоторые ключевые элементы HTML, а также создадите базовую структуру своей веб-страницы. Если вы полны амбиций, не пропустите ежедневный вызов!

HTML предназначен для структурирования данных; это скелет, который скрепляет все вместе.🧱В этом уроке вы изучите базовый синтаксис HTML, некоторые ключевые элементы HTML, а также создадите базовую структуру своей веб-страницы. Если вы полны амбиций, не пропустите ежедневный вызов!

Учебник 3

Введение в CSS и адаптивные веб-страницы

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

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

Учебник 4

Усовершенствованное оформление веб-страниц с помощью CSS

Это только четвертое руководство, а вы уже находитесь на Усовершенствованном оформлении веб-страниц. 😇Не плохо! Так что же это на самом деле влечет за собой? Что ж, в этом уроке вы будете настраивать свою веб-страницу, чтобы сделать ее более… вашей! Вы заметите, что ваш сайт внезапно начинает выглядеть немного более профессионально.

Это всего лишь четвертое руководство, а вы уже находитесь на странице Advanced Web Page Styles. 😇Не плохо! Так что же это на самом деле влечет за собой? Что ж, в этом уроке вы будете настраивать свою веб-страницу, чтобы сделать ее более… вашей! Вы заметите, что ваш сайт внезапно начинает выглядеть немного более профессионально.

Учебник 5

Введение в JavaScript

В современном мире разработки программного обеспечения JavaScript присутствует повсюду.🌎Он является основой фронтенд-разработки и ключевым компонентом таких фреймворков, как ReactJS, Angular и VueJS. В этом руководстве по JavaScript мы рассмотрим основы (переменные, функции, операторы), а затем добавим несколько эффектных фрагментов кода на ваш веб-сайт.

JavaScript повсюду в современном мире разработки программного обеспечения.🌎Это основа веб-разработки интерфейса и ключевой компонент таких фреймворков, как ReactJS, Angular и VueJS.