Создаем текстовый документ. Открываем его и у вас открывается стандартный блокнот.
Создаем структуру документа html, то есть «кодим» свой первый простой сайт. Переключаем клавиатуру на английский язык, только на этом языке можно кодить веб страницы.
<!Doctype html><head><title> Мой первый сайт</title></head><body> <h1>Здравствуйте, меня зовут........ </h1><p>Я рад приветствовать Вас на своем сайте. Здесь Вы можете найти много полезной информации о художественной обработке фотографии. </p><!--Важное значение--><p><strong>Внимание:</strong>некоторые мои мастер классы платные! </p><p><b>Что бы записаться на курс:</b> <em>вам нужно заполнить анкету. </em></p><p><i>Найти форму анкеты можно внизу страницы</i></p><p>Пример моей работы:</p><img src="фото1.jpg"> </body></ html> Сохраним документ-файл-сохранить как-дадим название файлу «мой сайт.html»-все документы-код-8-сохранить и в папке у нас появился файл который откроем в браузере. Добавим теперь к нашим тегам атрибут <cener> <!Doctype html><head><title> Мой первый сайт</title></head><body> <center><h1>Здравствуйте, меня зовут........ </h1></center><center><p>Я рад приветствовать Вас на своем сайте. Здесь Вы можете найти много полезной информации о художественной обработке фотографии. </p></center><!--Важное значение--><center><p><strong>Внимание:</strong>некоторые мои мастер классы платные! </p></center><center><p><b>Что бы записаться на курс:</b> <em>вам нужно заполнить анкету. </em></p></center><center><p><i>Найти форму анкеты можно внизу страницы</i></p></center><center><p>Пример моей работы:</p></center><center><img src="фото1.jpg"></center> </body></ html> С помощью добавленного атрибута <center> вся наша информация выровнялась по центру. Добавим атрибут тегу <body> <!Doctype html><head><title> Мой первый сайт</title></head><body bgcolor="#00CCFF" text=#FFFF00"> <center><h1>Здравствуйте, меня зовут........ </h1></center><center><p>Я рад приветствовать Вас на своем сайте. Здесь Вы можете найти много полезной информации о художественной обработке фотографии. </p></center><!--Важное значение--><center><p><strong>Внимание:</strong>некоторые мои мастер классы платные! </p></center><center><p><b>Что бы записаться на курс:</b> <em>вам нужно заполнить анкету. </em></p></center><center><p><i>Найти форму анкеты можно внизу страницы</i></p></center><center><p>Пример моей работы:</p></center><center><img src="фото1.jpg"></center> </body></ html> Теперь ваш результат должен быть вот таким
Что бы не было бардака в папке проекта создадим папку для картинок под названием img и теперь нужно в теге картинки прописать путь перед именем картинки <!Doctype html><head><title> Мой первый сайт</title></head><body bgcolor="#00CCFF" text=#FFFF00"> <center><h1>Здравствуйте, меня зовут........ </h1></center><center><p>Я рад приветствовать Вас на своем сайте. Здесь Вы можете найти много полезной информации о художественной обработке фотографии. </p></center><!--Важное значение--><center><p><strong>Внимание:</strong>некоторые мои мастер классы платные! </p></center><center><p><b>Что бы записаться на курс:</b> <em>вам нужно заполнить анкету. </em></p></center><center><p><i>Найти форму анкеты можно внизу страницы</i></p></center><center><p>Пример моей работы:</p></center><center><img src="img/фото1.jpg" alt="Ретушь фото"></center> </body></ html> Добавим описание картинки вставив атрибут alt=
Картинку в HTML можно вставить через тег IMG, например:
<img src="Ссылка на изображение" alt="Название изображения" />, которое не будет показано на сайте но в документе мы будем видеть что за картинку мы вставили...
HTML Цвета
В HTML цвет можно задавать тремя способами: