Основы HTML

Основы HTMLЗдравствуйте, уважаемые читатели  блога https://delajblog.ru!

В общем случае, весь интернет – это огромное количество веб-страниц, связанных между собой гиперссылками. Для создания веб-страниц был создан язык HTML(англ. HyperText Markup Language — язык разметки гипертекста). По-простому – текст со ссылками. Увидел ссылку, нажал на неё и попал на другую страницу. Веб-страница иначе может называться как документ, и имеет расширение файла .html. Документ HTML  — это фактически файл с простым текстом, содержащим некоторые фрагменты кода, которые несут информацию о том, как страница должна отображаться.

Веб-страницу можно создать в любом текстовом редакторе, хоть в Notepad.

Вот пример простейшего кода, набранного в тестовом редакторе:

<html>

<head>

<title> Пример простой веб-страницы </ title>

</ head>

<body>

Здесь располагается текст, который нужно отобразить в браузере, например, как сделать свой блог.

</ body>

</ html>

Для просмотра веб-страниц созданы специальные программы – браузеры, например, Internet Explorer, Opera, Chrome и т.д. При открытии документа, браузер считывает те инструкции, которые дают указания, как надо считывать программный код.

Теги

HTML использует систему «тегов» для записи инструкции о том, как страница должна отображаться в браузере. Они заключаются в угловые скобки, например, <title> — это тег, под названием title.

В общем виде они записываются так:

< тег атрибут1= «значение»   атрибут2= «значение»>

< тег атрибут1= «значение»   атрибут2= «значение»>…</тег>

В первом случае записан одинарный тег, а во втором парный (или контейнер). Обратите внимание, что парный состоит из открывающего <тег>, и закрывающего  </тег> (в закрывающем добавляется слэш).

Каждый тег может иметь атрибут, т.е. его свойства и соответственно значение этого атрибута.

Пример:

<html  lang=»ru-RU»>

Где, html – название тега, lang – атрибут тега html, ru-RU – значение атрибута.

Структура HTML кода

Любая веб страница содержит следующие обязательные элементы. Рассмотрим пример:

<html>

<head>

<title> Простейшая веб-страница</title>

</head>

<body>

Здесь располагается текст, который будет виден в браузере.

</body>

</html>

Открывающий <html> и закрывающий </html> теги сообщают браузеру, что этот код следует читать и интерпретировать, как код языка HTML (все, что записано в этом контейнере – HTML).

В контейнере head записывается служебная информация для поисковых систем. Здесь располагается контейнер title, в котором записывается  название веб-документа (это название будет видно заголовке браузера).

В контейнере body располагается контент (содержание) документа: текст, видео, рисунки и т.д.

 

Ссылки

Поскольку весь интернет состоит из ссылок, то в рассматриваемом языке   имеется очень важный тег — <a>.

Он выглядит примерно так:

<a href=» https://delajblog.ru/sozdat-blog/kak-sozdat-svoj-blog.html »>Нажми здесь</a>

Такая запись создала гиперссылку. В браузере будет видна подчеркнутая ссылка с тестом  Нажми здесь, при нажатии на который вы перейдёте на веб-страницу по адресу https://delajblog.ru/kak-sozdat-svoj-blog/.

Тегов в этом языке много. Заучить их сходу не получится. Но, сделаны справочники этого языка. В которых, всегда можно посмотреть применение того или иного тега. Одним из наиболее простых, ясных и понятных (по моему мнению, автор вполне понимает, о чём пишет) — это http://htmlbook.ru/html

Вполне понятно, что в отдельной статье (да и такого маленького объёма) невозможно рассказать о языке разметки гипертекста даже основы. Но иметь хотя бы общее представление просто необходимо. Так столкнулся с решением простой задачи – изменить внешний вид сайта, и тут деваться некуда. Как минимум нужно иметь представление о HTML, CSS и PHP. Так что придётся постигать их основы.

Похожие статьи:

  1. Плагин подсветки кода
  2. Красивый текст в WordPress
  3. Воровство контента
  4. Что такое RSS?
  5. Установка WordPress на Денвер. Часть 2

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

*

Подтвердите, что Вы не бот — выберите человечка с поднятой рукой:

© All Rights Reserved