Как создать сайт в блокноте готовый?
Создание сайта в блокноте может быть достаточно сложным и трудоемким процессом, поскольку вам нужно будет вручную написать и отформатировать все коды HTML, CSS и JavaScript для вашего сайта. Но если вы все же решили создать свой сайт в блокноте, следуйте этим простым шагам:
- Откройте Блокнот на вашем компьютере.
- Напишите код HTML для создания основной структуры вашего сайта. Например, вы можете создать заголовок, меню навигации, контент и подвал.
- Используйте CSS для форматирования внешнего вида вашего сайта. Вы можете изменить цвет фона, шрифты, размер текста и другие атрибуты, чтобы сделать ваш сайт более привлекательным.
- Добавьте JavaScript, если нужно, чтобы ваш сайт был интерактивным. Например, вы можете добавить функции для проверки форм, создания анимации и других динамических элементов.
- Сохраните файл с расширением .html на вашем компьютере.
- Откройте ваш веб-браузер и перетащите файл .html в окно браузера, чтобы увидеть, как выглядит ваш сайт.
Но обратите внимание, что создание сайта в блокноте — это только первый шаг. Чтобы сделать его доступным в Интернете, вам нужно загрузить его на сервер, купить доменное имя и настроить хостинг. Если вы не знакомы с этими терминами, вам может потребоваться помощь специалиста в области веб-разработки или использование онлайн-платформ для создания сайтов, которые позволяют создавать и хостить сайты без необходимости в написании кода.
Как создать сайт с помощью блокнота
На своём компьютере в левом нижнем углу монитора нажмите кнопку «Пуск»,
затем — » Все программы | Стандартные | Блокнот «.
Напечатайте следующее предложение.
Нажмите » Файл | Сохранить как «.
Сохраните на рабочий стол с именем файла index.html
На рабочем столе появится соответствующий значок.
Левой кнопкой мыши щёлкните дважды по нему.
В левом верхнем углу браузера вы видите свою запись.
Для того чтобы её отредактировать, закройте окно.
По значку щёлкните правой кнопкой мыши и в контекстном меню выберите » Открыть с помощью | Блокнот «
Измените текст.
Нажмите » Файл | Сохранить «.
Закройте. А, теперь открыв окно браузера, вы увидите произошедшие изменения.
Если вы отправите свой файл index.html на сервер хостинг-провайдера,
он станет доступным для просмотра из любой точки Земного шара.
Таким способом вы можете хоть «Войну и мир» напечатать, и выложить в Интернете.
Но, допустим, вам надо изменить размер шрифта, придать ему какой-то цвет, вставить рисунки, фотографии.
Как всё это сделать? А для этого нужно применить язык гипертекстовой разметки — HTML.
Это язык, на котором можно «разговаривать» с браузером (Internet Explorer, Opera, Mozilla Firefox, и другие).
Вот почему своё творение мы сохранили с расширением html.
А теперь удалите index.html, и вместо него сохраните на рабочий стол архив с учебным материалом .
Распакуйте. Итак, у вас на рабочем столе находятся файл index.html и папка doc.
Откройте на своём компьютере файл index.html.
Изучите его глазами пользователя: понажимайте на ссылки,
обратите внимание — что и как работает.
Оставляя его открытым, приступим к изучению HTML-кода.
HTML-код учебного сайта
Учебный сайт
Описание HTML-кода
Красным цветом обозначены теги.
Тег (tag — указатель, метка) — это код, идентифицирующий определённый элемент документа,
например: заголовок, ссылку, таблицу. Теги заключаются в угловые скобки <>.
Большинство тегов являются парными, то есть для каждого начального тега
есть конечный тег </Имя>, в котором к имени тега добавляется косая черта «/» (слеш).
Самый первый тег в нашем коде , а самый последний .
Они обозначают границы HTML-документа.
Следующий тег
, и на 11 строчке .Элемент HEAD обозначает заголовочную часть,
и предоставляет браузеру общую информацию о HTML-файле.
В контейнер HEAD вложен элемент TITLE (5 строка) — название WEB-страницы.
Сюда ещё вложен элемент META. Он предназначен для поисковых роботов.
Когда поисковый робот обнаружит ваш новый сайт в Интернете,
он просмотрит содержимое тегов
и включит указанные вами ключевые слова (чёрного цвета) в свою базу данных.
После заголовочной части идёт тег
, и второй снизу конечный тег .Всё, что находится между этими тегами, является телом документа.
Тег дополнен атрибутами (синего цвета):
bgcolor (цвет фона всего документа), text (цвет текста всего документа).
Атрибут пишется после названия тега через пробел, и заканчивается перед закрывающей угловой скобкой.
Если атрибутов несколько, то они между собой отделяются пробелами.
Атрибутам мы задали соответствующее значение (чёрного цвета).
Цвет можно задавать двумя способами: цифрами или английскими словами.
В цифровом варианте надо использовать 6 знаков: все цифры от 0 до 9 и буквы A, B, C, D, E, F.
Вот некоторые цвета: 000000 (чёрный), FFFFFF (белый), FF0000 (красный), 00FF00 (зелёный), 0000FF (синий).
Кстати, отсюда пошёл термин «цифровая фотография» — Там каждый пиксель на снимке задан такими вот числами.
Пиксель — это минимальный адресуемый элемент экранного изображения.
Следующий видим тег (разрыв или перевод строки), то же самое, что клавиша Enter при печати.
Этот тег одиночный, конечный тег со слешем ему не требуется.
Если хотим сделать отступ на несколько строк, пишем например .
Ниже идёт тег (заголовок первого уровня).
Всего бывает 6 уровней: H1 -самый крупный и H6 -самый мелкий.
Внутри H1 ещё находится элемент center (выравнивание по центру окна).
Также бывают left (выравнивание по левой стороне) и right (выравнивание по правой стороне).
И уже внутри элемента мы видим сам текст заголовка (чёрного цвета).
Чем вам не матрёшка?
Ну а ниже идёт самая громоздкая конструкция — TABLE (таблица)
с атрибутами bgcolor (цвет фона таблицы), border (толщина внешней рамки),
width (ширина таблицы в пикселях), align (выравнивание по горизонтали).
Чтобы не запутаться, код пишем не последовательно — слева направо, а сначала создаём каркас.
А потом наполняем его содержанием.
Вот так мы создавали таблицу.
— Написали теги самой таблицы: .
— В ней создали 3 строки: .
— В первой строке создали 3 ячейки: .
Во второй — тоже 3, в третьей — 2 ячейки. Всё делаем на своё усмотрение.
Теперь теги дополняем атрибутами.
Здесь появятся новые атрибуты: ;
colspan=2 (объединение двух соседних ячеек);
valign (выравнивание содержимого по вертикали),
top (выравнивание по верхнему краю), bottom (по нижнему), middle (центрирование).
И уже потом заполняем каждую ячейку: вписываем код между тегами
Работает принцип: от простого — к сложному.
Со структурой таблицы разобрались. Теперь вернёмся к нашему цветному коду.
После тега со своими атрибутами идет тег первой строки .
Ниже — тег первой ячейки с атрибутом выравнивания по левому краю.
А в качестве содержимого этой ячейки выступает обычный текст.
В нашем случае «Переход на вторую страницу моего сайта» — это текст ссылки,
а «doc/2.html» — адрес перехода.
Когда пользователь наводит курсор мыши на текст ссылки — курсор принимает вид руки.
А если щёлкнуть левой кнопкой мыши по тексту ссылки, то срабатывает адрес перехода.
То есть перед нами открывается страница, которая записана в адресе перехода.
В нашем случае будет doc/2.html. (doc — название папки, 2.html — имя файла).
Теперь поясню, для чего нужна была эта ссылка?
Сайт очень редко состоит из одной страницы, их всегда несколько,
и пользователь должен иметь возможность переходить от одной страницы к другой.
А мы переходим к изучению 3 ячейки 1 строки нашей таблицы.
Здесь тоже ссылка. Но посмотрите на адрес перехода: https://mail.ru.
Это адрес всем известного почтового сервиса.
А каким боком он связан с нашим сайтом? Он — никаким, а мы его через ссылку к себе привязали!
Пошли дальше: 2 строка, 1 ячейка.
Элемент IMG (вставка изображения) с атрибутами width (ширина) и height (высота).
Схема выглядит так:
В нашем примере источником является графический файл 2.JPG, который находится в папке doc.
Если вы заметили — у нас все документы лежат в папке doc.
Можно всё разложить по разным папкам.
Главное, чтобы адрес в написании кода не расходился с действительностью.
2 ячейка. Здесь опять встречается ссылка. Только вместо текста ссылки стоит изображение 3.JPG.
А в качестве адреса перехода — тоже изображение 4.JPG.
4.JPG — это фотография, а 3.JPG — её уменьшенная копия (Мы её создали заблаговременно
с помощью программы Microsoft Office PowerPoint). Такой способ применяется в фотогалереях.
3 ячейка. Графическая ссылка на URL-адрес (адрес какого-либо сайта, размещённого в Интернете).
3 строка, 1 ячейка. Атрибут colspan=2 (объединение двух ячеек). Ссылка на музыкальный файл 6.MP3.
Кроме того, здесь текст ссылки заключён в элемент FONT (свойства шрифта).
Для него предусмотрены атрибуты: size (размер шрифта от 1 до 7), color (цвет шрифта),
face (гарнитура шрифта, face=Arial).
И последняя ячейка. Ссылка на адрес электронной почты.
Удобно тем, что при нажатии пользователем на эту ссылку на его компьютере
автоматически запускается почтовая программа, и в поле «Кому» вводится нужный адрес сам.
Редактирование HTML-файлов
Теперь попробуйте отредактировать учебный сайт.
Двумя щелчками левой кнопки мыши откройте файл index.html.
Расположите окно на половину экрана.
По файлу index.html щёлкните правой кнопкой мыши — «Открыть с помощью | Блокнот».
Открытое окно Блокнота тоже разверните наполовину.
Итак, у нас открыто 2 окна: окно браузера с учебным сайтом и Блокнот с HTML-кодом этого же сайта.
Изменения производим в Блокноте.
В атрибутах bgcolor и text тега задайте другие цвета, на своё усмотрение.
В теге найдите атрибут border, и вместо двойки поставьте ноль.
После произведённых изменений нажмите меню «Файл | Сохранить».
Затем в верхней части окна браузера нажмите кнопку «Обновить».
В каждом браузере она может выглядеть по-разному.
При наведении курсора мыши на эту кнопку возникает всплывающая подсказка «Обновить».
И вот вы видите вступившие в силу изменения.
В данной статье мы описали не все теги, а только самые необходимые.
Имея представление о HTML-коде, вы сами можете пополнять базу своих знаний.
В поисковике можно задавать вопросы типа: «Как внедрить видео на WEB-страницу» и тому подобное.
Надеемся, что в скором времени Интернет-пространство пополнится вашим сайтом.
Создаем текстовый веб-документ в Блокноте
Что хорошо, что плохо – познается в сравнении. Поэтому, мы сделаем «как неправильно», а затем разберемся «как правильно».
Неграмотный текстовый веб-документ документ
В программе Windows Блокнот напишите любой текст, например, «Мой сайт» (рис. 1).
Рис. 1. Создание в Блокноте текстового документа
Сохраните документ командой Файл-Сохранить Как и дайте этому документу название index.html (рис. 2). При этом задайте Тип файла: Все файлы (это важно) – рис. 2.
Рис. 2. Сохраняем документ на диск
Откройте сохраненный файл с помощью любого браузера и просмотрите на результат (рис. 3).
Рис. 3. Открываем сохраненный файл в браузере
Так создается простейший текстовый веб-документ для Интернет. Но, это будет не по правилам языка HTML, хотя и «как-бы все работает».
Чего не хватает нашему документу, для правильности и грамотности?
Разметка элементов языка HTML сопровождаются специальными скобками: открывающая скобка отмечает начало части страницы, а закрывающая отмечает конец этой части страницы. При этом, как правило, документ состоит из двух частей – заголовка и тела:
В заголовке , используя теги , можно прописать название документа.
Текстовая HTML-страница в программе Блокнот
Создадим в Блокноте текстовый файл (*.txt) и сохраним его с расширением *.html. Код документа такой:
Листинг 1. Простейший html — документ
Писать тегb можно в любом регистре (не важно большими или маленькими буквами). Теги в HTML файле выполняются по порядку, столбиком: сверху — вниз.
Теперь сохраняем, как это было показано ранее на рис. 2 и смотрим сохраненный файл в браузере (рис. 4):
Рис. 4. Вид в браузере простейшего HTML-документа, созданного в программе Блокнот
Итак, создать одностраничный текстовый веб-документ очень просто. У текстового файла, созданного в программе Блокнот и имеющего по умолчанию расширение для файлов *.txt необходимо изменить расширение для сохраненных на диск файлов на *.html. Имя такого файла для главной страницы сайта принято писать, как index.html. Пока наш веб-документ еще не вполне корректен, например, мы пропустили запись . Как уже отмечалось во введении, это сокращение от «document type definition» — описание типа документа. Иначе говоря, DOCTYPE указывает тип документа (веб документ). Это необходимо, чтобы браузер понимал, согласно какому стандарту отображать текущую страницу.
Пример грамотного написания элементарной веб страницы с наиболее популярной сегодня кодировкой:
Это основное содержимое страницы.
Здесь тег уже был описан во введении. Так выглядит этот пример в браузере (рис. 5).
Рис. 5. Вид HTML документа с кодировкой символов
Задаем веб-странице русский язык
На рис. 6 показано, как в веб-документе задать русский язык
Рис. 6. Задаем русский язык
Далее рассматриваются основные теги, применимые к тексту документа.
Заголовки
В языке HTML определены 6 уровней заголовка, нумеруемых по убыванию их размера:
это самый крупный текст для заголовка.
это самый мелкий текст для заголовка.
Весь текст внутри таких скобок считается заголовком.
Документ с использованием заголовков первого (H1) и второго (H2) уровней:
Заголовок первого уровня
Заголовок второго уровня
Абзацы
Абзац в MS Word – это текст между двумя Enter, то есть, нажали на клавишу Enter написали какой-то текст и снова нажали на клавишу Enter. Так получиться один абзац. При этом каждый абзац начинается с новой «красной» строки.
В HTML абзац создается с помощью тега
таким образом:
Это еще один абзац.
И еще один абзац.
Так код будет выглядеть в браузере (рис. 7):
Рис. 7. Пример текста из трех абзацев
Переход на новую строку
Разрыв строк, наподобие абзаца, можно задать записью вида
(этот тег задает переход на новую строку). При этом задавать закрывающие скобки нет необходимости. Такой одинокий тег часто называют «меткой». Но, если закрывающий тег задан, то это не считается ошибкой. Пример на рис. 8.
Рис. 8. Задано 4 перехода на новую строку
Этот код в браузере смотриться так (рис. 9):
Рис. 9. Два заголовка и четыре абзаца
Выравнивание текста
Выравнивание производится тегом . Можно выравнивать текст по центру, по левому (правому) краю, или по ширине:
текст
текст выровнен по центру.
текст
текст выровнен по левому краю.
текст
текст выровнен по правому краю.
Текст по центру
На рис. 10 приведено, как этот код выглядит в браузере.
Рис. 10. Выравнивание текста по центру и по правому краю
В тегах могут размещаться атрибуты — специальные команды, которые расширяют действие тега. Атрибуты размещаются внутри открывающего тега в таком формате: . Кавычки могут быть любыми — одинарными или двойными.
Цвет фона и текста
Цвет фона и текста определяется шестнадцатиричным числом вида #hhhhhh, где первая пара символов является значением насыщенности для красного (Red) цвета, вторая — для зеленого (Green), и третья пара — для синего (Blue) цвета. #00 — минимальная насыщенность, #FF — максимальная насыщенность цвета. Пример изменения насыщенности красного цвета показан (поясняется) на рис. 11.
Рис. 11. Насыщенность красного цвета слева #00, а справа — #FF
Подобрать нужную насыщенность цвета вы можете с помощью таблиц кода цвета HTML, которая есть в Интернет (рис. 12). Как видно из таблицы красный цвет r=255, g=0, b=0 можно задать так: написать «red» или написать #FF0000 (максимальная насыщенность красного, и минимальная для остальных цветов). Таким образом, например, чтобы сделать цвет фона страницы серым, можно написать
Эти записи равноценны.
Рис. 12. Таблица для выбора нужного вам цвета
Задание параметров для шрифта
Для изменения параметров шрифта используется запись вида
Эта запись имеет такие дополнительные параметры:
| COLOR=»#hhhhhh» |
| SIZE=»n» |
| FACE=»имя_шрифта» |
– семейство шрифта (arial, verdana, helvetica, sans-serif и другие).
Пример задания параметров для шрифта:
Здесь на сером фоне крупным шрифтом красного цвета и без засечек написаны цифры 12345 (рис. 13).
Рис. 13. Вид кода в браузере
На рис. 14 показан этот код в браузере.
Рис. 14. Пример задания параметров для шрифта
Задавайте размер шрифта в пикселах от 1 до 10 px и сохраняйте результат на диск правильно (рис. 15).
Рис. 15. Так сохраняем веб-документ в Блокноте на диск
Вопросы и задания
Документ предназначен для просмотра в браузере
- Задаем (прказать):
- русский язык
- заголовки
- абзацы
- переход на новую строку
- выравнивание текста
- цвет фона и текста
- параметры для шрифта
- Создайте в Блокноте правильный (грамотный) одностраничный текстовый html-документ про своего домашнего питомца (кошку, собаку, рыбок в аквариуме или хомячка…). Можно написать про своего друга-приятеля (или про подругу). Документ должен иметь следующие параметры своего форматирования:
- Фон (BGCOLOR) — серый,
- Шрифт (COLOR) — синий,
- Текст выровнять (ALIGN) по центру,
- Размер шрифта (size) – 9,
- Семейство шрифта, то есть, его гарнитура (face) – ARIAL,
- Название документа (title) – МОЙ КОТ (собака, хомяк и др…). Или, «Мой приятель Вася, одноклассница Маша».
- Какое правильное название имени и расширения для сохраненного веб документа?
- В чем отличие заголовка документа от его названия ( от )?
- Как вы понимаете термин «атрибут текста»?
Быстро создаём страницу html — пошаговое руководство с разъяснением
Приветствую вас на страницах блога Start-Luck. Сегодня мне бы хотелось показать вам, как использовать код. Писать сайты – интересное занятие, которое многим может казаться невыполнимо сложным. На самом деле простенькую страничку можно создать всего за 5 минут.
В этой статье я расскажу про создание html страницы. Выполним мы эту задачу менее, чем за 10 минут, а потом более подробно разберемся с основными тегами. Было бы неправильно называть подобную публикацию уроком. Это скорее затравка, которая призвана показать вам простоту работы и родить в вас желание двигаться дальше, изучить больше, делать лучше.
Как создать страничку
Первую страницу я предлагаю вам сделать в блокноте. Самом простом, который находится в меню «Пуск», папка «Стандартные». Пока не нужно ничего скачивать. Попробуйте воспользоваться тем, что имеете.
Вставьте в него вот этот код.
html> head> title>Моя первая страница/title> /head> body> center>h1>Создать страницу проще, чем вы думаете/h1>/center> Многим может показаться, что создание сайтов дело сложное, даже невыполнимое. Для этого нужно много учиться, узнать, сделать. На самом деле существует около 100 тегов, которые даже не обязательно учить. Важно лишь понять, что и где применяется. Информацию можно подсмотреть в различных шпаргалках, а со временем вы начнете вспоминать теги на автомате. br/>br/> center>/center> br/>br/> font style="color:red">Простой код позволяет сделать текст красным/font> br/>br/> b>Написать жирным не намного сложнее/b> br/>br/> Мы дошли до самого низа br/>br/> Теперь вы знаете чуть больше о тегах и можете использовать их. Давайте попробуем вставить ссылочку, чтобы связать несколько страниц воедино. br/>br/> hr> К примеру, вот ссылка на мой блог - a href="https://start-luck.ru/">Start-Luck/a> - рассказывает просто о "сложном". br/>br/> Ну вот и все. Ваша первая страница готова br/>br/> /body> /html>
Создать страницу проще, чем вы думаете
Простой код позволяет сделать текст красным
Написать жирным не намного сложнее
Мы дошли до самого низа
Теперь вы знаете чуть больше о тегах и можете использовать их. Давайте попробуем вставить ссылочку, чтобы связать несколько страниц воедино.
К примеру, вот ссылка на мой блог — Start-Luck — рассказывает просто о «сложном».
Ну вот и все. Ваша первая страница готова
Теперь нажмите «Сохранить как…». Это очень важный момент.
Файл нужно назвать index.html. Окончание «.html» указывает на расширение файла. Если вы просто введете название индекс, то документ сохранится как текстовый файл и не откроется браузером.
Я сохранял документ на рабочий стол. Теперь нужно найти его, нажать правую кнопку мыши и открыть с помощью любого браузера. Я выберу Google Chrome.
Читайте также: Конструктор сайтов Fo.ru — интересная альтернатива Wix и Tilda
Вот так выглядит только что созданная мной страничка. Ваша ничем не будет отличаться. Все точно также: с картинками и цветным шрифтом.
Сейчас я более подробно расскажу о тегах, а пока давайте просто уберем из заголовка «center» и вставим строчку, в которой содержится слово «Color». Кстати, как менять цвет html я уже писал. Это очень просто, рекомендую к прочтению.
Еще раз сохраните документ, в этот раз можно просто воспользоваться сочетанием клавиш Ctrl+S, а затем обновите страницу в браузере при помощи кнопочки F5
Помните, практически любой тег должен открываться и закрываться. То есть где-то должен располагаться код со слешем. В данном случае он выглядит так: .
Видите, заголовок стал красным. Точно также вы можете придать нужный оттенок любой части текста.
Ну вот и все, пример готов, и вы должны гордиться собой. Конечно, она еще не находится онлайн, для этого веб-страницу надо выложить на сервер, который предоставляется хостингом. Нужно также подключить свой домен, чтобы и другие люди могли увидеть ваше творение.
Пока страничку видите только вы. Но согласитесь, таким сайтом можно удивить только человека из железного века. Но это первый опыт, давайте сделаем его еще более успешным, разобравшись с тегами, которые мы использовали. Это поможет вам научиться создавать свои проекты, без чьей либо помощи.
Теги
С вашего позволения я перейду в программу NotePad++. Она обладает целым рядом преимуществ в сравнении с обычным блокнотом. Сейчас мне очень пригодится подсветка тегов, чтобы показывать вам те элементы, о которых я буду рассказывать. Вообще, если вы собираетесь, изучать html, то я очень рекомендую установить эту бесплатную программу.
Она не единственная и я могу предложить вам еще несколько в своем обзоре, если кого-то заинтересуют альтернативы. Мы же перейдем к теоретической части.
Основные
Начинается и заканчивается страница с тегов . Они показывают браузеру, что это веб-документ, созданный при помощи html.
Далее идет или заголовок. В ней располагается самая важная информация о странице, в нашем случае – Title. Если вы еще не нашли фразу «Моя первая страница», которая присутствует в коде, обратите внимание на саму вкладку, над поисковой строчкой.
Именно теги отвечают за начало и конец основной информации о страничке.
Далее идет основная контентная часть. Теги . Все видимое на странице: заголовки, текст, картинки и так далее.
Тег указывает на то, что фраза является заголовком. По умолчанию, она чуть больше основного текста и выделяется жирным. Если бы мы с вами сейчас писали не только на html, но и создавали CSS-файл, с которым перекликался наш файл, то могли бы управлять размерами, шрифтом и даже цветом всех заголовков на странице, не прописывая font style, как мы это делали в примере. Хотя об этом тоже рановато.
Кстати, Title и H1 имеют свое влияние во время присваивания вашему сайту места в поисковой выдаче. Относиться к ним нужно с большим вниманием и не писать внутри лишь бы что. Они имеют отношение к сео-оптимизации. Помимо h1, существуют еще и h2, h3,h4.
В этой же строчке есть открывающийся и закрывающийся . Благодаря этому элементу можно выравнивать текст по середине. Если этот тег удалить, то текст встанет по правому краю.
— один из немногих единичных тегов. То есть он работает сам по себе. Благодаря этому элементы вы перепрыгиваете с одной строки, на другую. Проще говоря, делаете отступ. Написали его один раз, значит один раз переместились вниз, два, как у меня, и отступ получился чуть больше.
Читайте также: Что такое домен, для чего он нужен и как правильно выбрать хороший адрес для сайта
Картинка
Далее идет тег img, то есть image, картинка. Квадратная скобка открывается, в нее вписывается вся основная информация о изображении, только после этого она закрывается. Надо отметить, что img – это тег, а все остальные элементы кода, которые вписываются внутрь, это его атрибуты.
Первым делом идет alt, то есть описание. Это также необходимо для оптимизации. Иногда добавляется еще и title. При наведении на изображение мышью рядом с курсором появляется подсказка, когда страница уже открыта в браузере.
Можно было загрузить рисунок в папку сайта и прописать к ней путь, но я пошел простым путем. Среди бесплатных фотографий на Pixabay я нашел картинку, открыл ее в новом окне и вставил ссылку.
В теге src прописывается путь к картинке. Именно он указывает браузеру, что дальше нужно двигаться, чтобы найти нужное изображение, а в каком направлении искать – пишете вы сами.
Форматирование текста
отвечает за придание части текста какого-то особого стиля, к примеру, как в нашем случае другого цвета. style=»color:red» показывает, что цвет будет красным. Если хотите желтый, напишите yellow, зеленый – green. Можно пользоваться кодами цветов из фотошопа.
помогает выделить текст жирным.
рисует горизонтальную линию. Он одиночный и используется только в закрытом виде. Если вы напишете
несколько раз, то получите ровно столько же горизонтальных полос при открытии страницы в браузере.
Ссылки
указывает браузеру, что дальше будет ссылка. Вы хотите перенаправить читателя на другой адрес. Этот тег идет с обязательным атрибутом href=”адрес”. В кавычки вставляется путь, куда браузер должен перенести посетителя страницы. После того, как этот тег прописан, вставляется описание, слово или несколько, при нажатии на которое читателя будет переносить дальше. После того как эти условия выполнены, можно вставлять второй, закрывающийся тег .
После того как основная часть страницы написана, вы закрываете тег body, так как тело закончено. И указываете на то, что прекращаете на сегодня использовать html.
Если вы хотите больше узнать о тегах html и научиться вставлять не только картинки, но и видео, создавать кнопки, различные формы, списки, параграфы, то я могу предложить вам бесплатный курс Евгения Попова « Основы html ». Всего 33 урока помогут вам выйти на новый уровень.
Ещё хочу порекомендовать вам Видеокурс, который рассказывает, как верстаются сайты. Весь процесс показан на реальных примерах, что особенно хорошо. Курс предназначен как для новичков, которые ещё даже HTML не знают, так и для тех, кто уже хорошо знает и HTML, и CSS, однако, верстать сайты хорошо не умеет. Более полную информацию Вы можете получить, перейдя по ссылке: www.srs.myrusakov.ru/makeup
Помимо этого заберите Бесплатную книгу по созданию сайтов ! Эта книга рассчитана на начинающих, и вот там создаётся сайт ОТ и ДО. То есть готовится дизайн, затем верстаются страницы, пишется программная часть, а после сайт размещается в Интернете. Автор тщательно всё комментирует, а в книге очень много скриншотов и иллюстраций. Причём особенностью книги является то, что создаётся не какой-то абстрактный сайт, а вполне реальный и существующий в Интернете.
Сегодня вы сделали много, ведь первый шаг самый сложный.
Подписывайтесь на рассылку и группу ВКонтакте , и узнавайте еще: как и зачем нужен движок сайта, что такое блочная верстка и модульная сетка, как правильно писать сайты и многое другое.
До новых встреч и удачи!