Урок №1 - Мой первый код!
Привет, меня зовут Агент Mi… Я предлагаю вам пройти три пробных урока по разработке сайтов, с их помощью я смогу доказать вам, что на самом деле изучать программирование легко и интересно. Поэтому, сейчас, мы вместе с вами напишем первый код на языке HTML и всего лишь за полчаса создадим маленький интернет-проект, в который добавим немного текста, рандомное изображение и ссылку на какую-либо страницу — всё то, из чего состоит большинство сайтов… HTML — Hypertext Markup Language - Язык Разметки Гипертекста — код используемый для структурирования, отображения веб-страниц и их контента. Чтобы начать писать код, нам нужно открыть программу «Блокнот» на ПК, создать текстовый файл с названием «Index.html», сохранить его и закрыть. Index (с английского переводится как «указатель») + .html (указывает на формат текстового файла) — традиционное название файла, который используется в качестве индекса для каталога веб-сайта. Индексный файл ищется по умолчанию веб-сервером, если в URL указан не файл, а каталог. (Если вы планируете проходить обучение с мобильного, то просто смотрите на имитацию блокнота и браузера ниже и визуализируйте процесс...) Открываем сохранённый документ «Index.html» и вручную прописываем, в начальную строку, первый в нашем длинном пути элемент: <!doctype html> <!doctype html> — эта строка всегда пишется первой, пред написанием кода, чтобы дать понять браузеру на каком языке написана страница. !DOCTYPE - переводится как «Тип документа», в нашем случае это язык HTML, и всю эту информацию мы заключаем в треугольные скобки... |
Пишем в блокноте:
<!doctype html>
| Добавляем текст: Во вторую строку нам нужно ввести текст приветствия: Привет! Для это покажем браузеру, что это будет обычный абзац и начнём с <p>. <p> тег - (сокращение от английского слова «paragraph» — параграф), открывающий блочный элемент, начинается с новой строки. Поэтому пишем так: <p>Привет!</p>, после чего, посетитель сайта увидит слово: Привет! </p> - это закрывающий тег, отличается от открывающего тега наличием слеша - /. Тег - это ключевые слова, по которым можно легко найти нужный нам материал. Внимание: совершенно все теги в html оборачиваются в угловые скобки - < >. Давайте поприветствуем посетителя нашего сайта, для этого прописываем код… |
Пишем в блокноте:
<!doctype html>
<p>Привет!</p>
.
.
.
Результат в браузере:
Привет!
.
.
.
| Домашняя работа: Ура, у вас есть заказ! Клиент просит создать интернет-страницу с коротким текстом: «Привет команде Managers INC! Посмотрите на мой первый код.». Что нужно делать: Нажмите на кнопку «ВЫПОЛНИТЬ ЗАКАЗ» и напишите по памяти код, чтобы он корректно отобразился в браузере, согласно условиям вашего заказчика. Что ненужно делать:
|
Не пытайтесь скопировать код, он будет некорректно отображаться в браузере, а ваш аккаунт может быть заблокирован… Пишите всё ручками!
Homework:
<!doctype html>
<p>Привет команде Managers! Посмотрите на мой первый код.</p>
Homework:
<!doctype html>
<p>Привет команде Managers! Посмотрите на мой первый код.</p>
Homework:
<!doctype html>
<p>Привет команде Managers! Посмотрите на мой первый код.</p>
Ожидаю первую пятёрочку по программированию! :)
<!doctype html>
<p>Привет команде Managers! Посмотрите на мой первый код.</p>
Домашняя работа.
<!doctype html>
<p>Привет команде Managers! Посмотрите на мой первый код.</p>
<!doctype html>
<p>Привет команде Managers! Посмотрите на мой первый код.</p>
<!doctype html>
<p>Привет команде Managers! Посмотрите на мой первый код.</p>
Ок. Но только без предоплаты больше не буду начинать работать с заказами! ;)))
Легко! :)
<!doctype html>
<p>Привет команде Managers! Посмотрите на мой первый код.</p>
<!doctype html>
<p>Привет команде Managers! Посмотрите на мой первый код.</p>
<!doctype html>
<p>Привет команде Managers! Посмотрите на мой первый код.</p>
Домашка
<!doctype html>
<p>Привет команде Managers! Посмотрите на мой первый код.</p>
Привет команде Managers! Посмотрите на мой первый код.