Найти в Дзене

Программирование на HTML | #1

1. Программирование на HTML. Введение
HTML рис. 1
HTML - на английском обозначает Hyper Text Markup Language. По русски же HTML - это язык гипер-текстовой разметки. Он нужен для создания фундамента сайта чтобы потом картинками, текстом, ссылками и т.д. можно было управлять с помощью других языков. Но сейчас не об этом.
Как я сказал ранее, HTML - это язык гипер-текстовой разметки. Некоторые
Оглавление

1. Программирование на HTML. Введение

HTML  рис. 1
HTML рис. 1

  1. HTML - на английском обозначает Hyper Text Markup Language. По русски же HTML - это язык гипер-текстовой разметки. Он нужен для создания фундамента сайта чтобы потом картинками, текстом, ссылками и т.д. можно было управлять с помощью других языков. Но сейчас не об этом.
    Как я сказал ранее, HTML - это язык гипер-текстовой разметки. Некоторые начинающие разработчики путают его с языком программирования. Но на самом деле это не так.
    и я повторюсь, HTML создает различные ссылки, текст, картинки и тому подобное, то-есть основы сайта. И сегодня мы узнаем как создать нашу первую ссылку в HTML.

2. Программирование на HTML. Создание ссылки

ссылка в HTML
ссылка в HTML

  1. Ссылка как вы наверно уже знаете - запись в документе, указывающая на другой документ. То-есть простыми словами, ссылка - это слово (целая фраза или даже предложение) при нажатии на которое вы можете отправиться на другую интернет-страничку. Например кликнув по этой ссылке вы никуда не отправитесь потому что у этой ссылки не указан адрес. Но при этом она горит синим цветом и ее можно нажать! Чтобы сделать такой эффект, достаточно просто указать адрес у ссылки в виде символа решётки.

Как создать основу сайта для ссылки

Для того чтобы создать ссылку, необходимо уже написать наш первый html код. Но сперва нужно создать папку, в которой будут хранится все файлы которые буду касаться нашего сайта. Я думаю многие знают как создать папку, но для тех кто не знает, вот подробный алгоритм:

1. Кликаем правой кнопкой мыши по рабочему столу.
2. Ищем пунктик "создать".
3. Дальше нажимаем "создать папку".
4. Папка готова!

Как создать папку на рабочем столе - программирование на HTML
Как создать папку на рабочем столе - программирование на HTML

И дальше в этой папке создаем текстовый документ. Чтобы создать текстовый документ, нужно проделать тоже самое только в конце выбрать не "Папку" а "Текстовый документ". Далее кликаем 1 раз на наш файл и нажимаем клавишу "F2" на клавиатуре. Переименовываем название нашего файла например в "Index". Далее, открываем наш файл текстового документа и пишем данную строчку кода:

<!DOCTYPE html>

Данная строчка кода, указывает тип документа. а именно указывает тип нашей интернет странички - тип HTML. Эта строчка очень важна для составления сайта. Она пишется на абсолютно ВСЕХ сайтах.

Далее прописываем следующие команды:

<!DOCTYPE html>
<html>
</html>

Обратите внимание, что команды в HTML называются ТЭГИ. В данном случае есть ОТКРЫТЫЕ и ЗАКРЫТЫЕ тэги. Сначала ставится открытый тэг (открывающийся), потом пишется что-нибудь и пишется закрывающийся тэг. А также обратите внимание на то, что в закрывающемся тэге перед буквой тэга ставится косая черта. Это важно! В данном случае этим тэгом является тэг <html> который создает как-бы всю основу. То-есть представьте что есть голова и туловище у тела. И вот тэг <html> - создает голову и туловище вместе то-есть создает ТЕЛО страницы. Но раз есть тело, значит есть туловище и голова. Они тоже являются тэгами и пишутся ОБЯЗАТЕЛЬНО внутри тэга <html>. А также они тоже являются ДВОЙНЫМИ тэгами (двойной тэг - тэг с открытым и закрытым тэгом).

Синтаксис тэга "голова" таков: <head></head> (открывающиеся и закрывающиеся тэги). А синтаксис тэга туловище таков: <body></body>

Программирование на HTML - основы
Программирование на HTML - основы

Как создать ссылку

Итак, теперь приступим к самому главному! Как создать ссылку? Для того чтобы создать ссылку, пишем внутри двойного тэга <body> двойной тэг <p>. Вот синтаксис этого тэга:

<p>Текст (или ссылка)</p>

Но если мы просто вставим в тэг <p> какое-нибудь слово то ссылка на получится, так-как для того чтобы сделать ссылку, необходимо написать в тэге <p> еще один тэг. Он называется <a>. Он также двойной, и вот его синтаксис:

<a href="URL-адрес страницы">Название ссылки</a>

Итак, вы заметили в открывающемся тэге <a> какое-то непонятное слово href? В HTML языке разметки бывают тэги, а также бывают атрибуты. Атрибуты - это специальные слова, используемые внутри открывающего тега для управления поведением элемента. Например href - атрибут, который позволяет указывать адрес, куда будет отправлять вас ссылка, если вы на нее нажмете. Как видите чтобы указать адрес куда отправит вас ссылка при нажатии, нужно написать тэг href внутри открывающегося тэга <a> и после этого через знак равенства в кавычках указать URL-адрес. Если что то URL-адрес, это вот это:

URL-адрес страницы Яндекс
URL-адрес страницы Яндекс

Итак, и теперь мы должны написать этот двойной тэг <a> в двойном тэге <p>, и также указать атрибут href, указать ему адрес куда будет отправляться ссылка а также между тэгами <a></a> поместить как будет называться ссылка.

Далее мы должны написать в двойном тэге <head> данные команды:

<head>
<meta charset="UTF-8">
<title>Document</title>
</head>

Сейчас внутри тэга <head> мы записали кодировку нашей веб-странички которая указывает что у веб-странички кодировка UTF и в двойном тэге <title> можно указать как будет называться ярлык вашей страницы в интернете. Я назову ее "Document". Эти команды нужно просто запомнить и они очень пригодятся вам когда вы будете создавать сайты.

Итак. Теперь сохраняем текстовый документ (Сочетание горячих клавиш Ctrl + S ) и закрываем. Далее как всегда переименовываем но теперь нужно поменять расширение этого файла с .txt на .html . То-есть вот как это сделать:

Далее меняем расширение с txt на html как показано в ролике и Готово! Открываем файл, и все работает отлично! Вы создали первую вашу ссылку!

Ну а с вами был я, Всем пока.