Добавить в корзинуПозвонить
Найти в Дзене

Учимся делать веб сайты. Курс для новичков. Первый урок.

Итак вы решили создать свою первую веб страницу. Самый первый вопрос, который возникнет у вас - Что мне для этого потребуется и с чего мне начать? Здравствуйте, меня зовут Михаил Алексеевич и я являюсь преподавателем и методистом в школе программирования "КИДКОД". Сейчас мы с вами вместе начнем путь веб разработчика, который расскажет вам, как делать простые сайты, выкладывать их в интернет, создавать игры и многое другое. А начнем мы с того, что ответим на поставленный в самом начале вопрос - как и с чего начать. Веб страница это по своей сути обработанный текст вашим браузером. Кстати, какой браузер используешь ты? Напиши в комментариях. Текст передаваемый браузеру, является серией команд или как называют их веб разработчики - теги (tag). Сами теги обычно описывают, что будет означать по смыслу тот или иной контент (контент - это любая передаваемая вами информация, например: текст, картинки, аудио и т.д.). Перед тем как мы с вами изучим несколько базовых тегов, давайте решим куда м

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

Здравствуйте, меня зовут Михаил Алексеевич и я являюсь преподавателем и методистом в школе программирования "КИДКОД". Сейчас мы с вами вместе начнем путь веб разработчика, который расскажет вам, как делать простые сайты, выкладывать их в интернет, создавать игры и многое другое. А начнем мы с того, что ответим на поставленный в самом начале вопрос - как и с чего начать.

Веб страница это по своей сути обработанный текст вашим браузером. Кстати, какой браузер используешь ты? Напиши в комментариях. Текст передаваемый браузеру, является серией команд или как называют их веб разработчики - теги (tag). Сами теги обычно описывают, что будет означать по смыслу тот или иной контент (контент - это любая передаваемая вами информация, например: текст, картинки, аудио и т.д.).

Перед тем как мы с вами изучим несколько базовых тегов, давайте решим куда мы с вами их будем записывать. Нам потребуется любой текстовый редактор установленный на ваш компьютер. Это может быть блокнот, или специальная программа для написания кода (например: visual studio code). Давайте откроем эту программу (я буду использовать обычный блокнот, для создания первой страницы).

Примерно так может выглядеть ваш редактор для текста
Примерно так может выглядеть ваш редактор для текста

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

HTML - hyper-text markup language (язык гипертекстовой разметки).

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

Что за странный клон тега html у нас появился?
Что за странный клон тега html у нас появился?

<html> - Открывающий тег. Инструкция начинается.

Hello, world! - Текст, который мы увидим в браузере.

</html> - Закрывающий тег. Инструкция закончилась.

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

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

Выбираем "Сохранить как"
Выбираем "Сохранить как"
Сохраняем с названием index.html
Сохраняем с названием index.html
Открываем созданный файл в браузере
Открываем созданный файл в браузере

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

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

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

-6