Html основы: Основы CSS — Руководство для самых маленьких

Содержание

Язык HTML — Как создать сайт

HTML — язык разметки

Тим Бернерс-Ли
Создатель языка HTML

В этой статье о HTML дан небольшой обзор языку, его структуре, характеристике, истории. Данная статья о языке HTML предназначена к прочтению для общего развития и на начальном этапе изучения HTML вы можете её пропустить, а вернуться к ней позже, после прочтения учебника по HTML.

HTML (HyperText Markup Language) — язык разметки гипертекста. Сайты создаются с помощью языка HTML.

Создателем языка HTML, является выдающийся британский учёный — Тим Бернерс-Ли.

Версии HTML

До 1995 года официального стандарта языка HTML не существовало, но было несколько не стандартизированных версий языка HTML. 22 сентября 1995 года, создали первый официальный стандарт языка HTML, он сразу получил номер 2.0 (HTML 2.0).

14 января 1997 года появилась версия HTML 3.

2,
18 декабря 1997 года HTML 4.0,
24 декабря 1999 года HTML 4.01

В 00-х годах, также существовал язык разметки XHTML (то же самое что и HTML, но с более строгим синтаксисом). XHTML предназначался для того, чтобы подготовить вебмастеров, к строгим правилам разметки языка XML. Благодаря строгой разметке, различные программы и сервисы понимающие XML, могут эффективно обрабатывать данные на сайтах написанные на XHTML, также в этом языке появилась возможность внедрять SVG, MathML, CML и другие производные языка XML.

XHTML существовал в трёх версиях в строгой, переходной и frameset, в переходной можно было использовать устаревшие теги такие как center или font. На данный момент, разработку языка XHTML закрыли.

Современной версией языка HTML, является HTML5, именно эту версию мы и будем изучать в данном учебнике. HTML5 более удобен чем предыдущие языки и вобрал в себя все их преимущества, также в нём уделено большое значение семантике.

Язык CSS и HTML

Начиная с 4 версии языка HTML, изменять внешний вид HTML тегов рекомендуется только с помощью языка CSS. Поэтому языки HTML и CSS желательно изучать параллельно. В этом учебнике по HTML для начинающих мы также ознакомимся с начальными аспектами языка CSS, ну а для продолжения изучения вы можете почитать и сам учебник по CSS

История HTML

Язык HTML был создан в 1991 году, британским учёным Тимом Бернерсом-Ли. Тогда Тим работал в CERN (Европейская организация по ядерным исследованиям) и сайтов еще не существовало. Ученые работавшие в данном центре нуждались в надежном и эффективном способе обмена информацией.

Выбор пал на язык SGML, но он был слишком сложен и тогда Тим на основе SGML, создал упрощенную его вариацию — HTML, благодаря чему любой ученый мог создать простой документ с информацией, обрамив её различными тегами: абзацами, заголовками, ссылками и разместить его в интернете, а другие ученые в то же время могли читать данную информацию.

Изначально в HTML-документах (на страницах сайтов), можно было размещать только текстовую информацию, возможность добавления медиафайлов: изображений, видео и аудио появилась чуть позже.

На данный момент, поддержкой и развитием языка HTML занимается W3C (World Wide Web Consortium) — консорциум всемирной паутины. W3C состоит из различных рабочих групп, которые внедряют и развивают интернет стандарты и технологии.

Таблица распространения браузеров

Файлы HTML, обычно имеют расширения .html или .htm. Эти файлы можно просматривать с помощью интернет-браузеров.

Таблица имён браузеров и количество их распространения в мире, на январь 2016 года, в порядке уменьшения:

БраузерРаспространение
Google Chrome54,22 %
Internet Explorer14,67 %
Mozilla Firefox14,61 %
Safari9,43 %
Opera1,96 %
Прочие5,11 %

Читать далее: Учебник HTML


Дата публикации поста: 7 февраля 2016

Дата обновления поста: 14 октября 2014


Навигация по записям

Основы Html

Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали, как установить favicon на сайт. В данной статье я бы хотел рассказать, что такое фреймы в html. В переводе с англ. фрейм означает «рамка». С точки зрения html, фрейм — это некая выделенная область на странице, которая ссылается на другую страницу и выводит её содержимое (той самой другой страницы или сайта). Стоит сразу отметить, что фреймы не получили большого развития и сейчас почти не используются, разве что в каких-то специализированных проектах. Подробнее


Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали, как выводить спецсимволы в HTML. В данной статье я бы хотел рассказать о том, как установить favicon на сайт. Кто не знает, что такое favicon — кратко расскажу. favicon — это картинка, которая выводится на закладке слева от названия вашего браузера. Размер данной картинки обычно 16 на 16 или 32 на 32 пикселя. Подробнее


Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали что такое пробелы в HTML. В данной статье я бы хотел рассказать о том, что такое

спецсимволы в HTML и как их выводить. Спецсимволы — это такие символы, которых на клавиатуре нет, но их можно вывести по имени (или коду), например знак торговой марки ™. Практически в каждой своей статье я использую кавычки. Подробнее


Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали что такое «страница 404». В данной статье я бы хотел рассказать, как вставить пробелы в HTML. Уверен, что вы хотя бы раз пробовали написать что-то вроде этого: Подробнее


Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали что такое DOCTYPE. В данной статье я бы хотел рассказать, что такое страница 404. Страница 404 — это та страница, которая открывается при попытке открыть несуществующую страницу или при переходе по битой ссылке Подробнее


Всем доброго времени суток. На связи Алексей Гулынин. В данной короткой статье я расскажу о том, зачем нужен DOCTYPE. Язык HTML не всегда был таким, каким мы его видим теперь. Некоторые теги со временем устаревали, сейчас уже есть html5 с кучей новых тегов, которых не было раньше. DOCTYPE нужен для того, чтобы явно дать понять браузеру, какую версию HTML (или XHTML) мы используем, какой набор тегов у нас имеется и как их отображать. Подробнее


Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали создание форм в HTML. В данной статье я бы хотел поговорить о мета-тегах в HTML. По сути, мета-теги несут в себе специальную служебную информацию и делятся на несколько типов Подробнее


Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали проблему с кодировкой на сайте. В данной статье я бы хотел рассказать о создании форм в HTML. Мне кажется, что это самая важная тема в HTML. Мне вспоминаются слова моей учительницы по английскому языку. Она говорила, если вы знаете значения всех словоформ глагола get, то вы сможете объясниться на английском только с их помощью. То же самое и с формами в HTML. Подробнее


Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали создание таблиц в html. В данной статье я бы хотел рассказать о проблеме, с которой вы обязательно столкнетесь (если ещё не столкнулись) в своей практике. А проблема эта связана с кодировкой на сайте. Подробнее


Всем доброго времени суток. На связи Алексей Гулынин. В прошлой статье мы разобрали как вставлять ссылки и изображения в html. В этой статье я хочу рассказать о достаточно важной теме — это

создание таблиц в HTML.
Практически на любом сайте можно встретить HTML-таблицы. Подробнее


Уровень 1. Основы HTML.

Приветствую! 

Это страница вводного уровня к обучающей программе «Верстка веб-страниц».

Это программа, в которой вы вместе с наставником будете разбираться в этой сфере, выполнять задания и смотреть обучающие материалы.

Это программа для начинающих, кто только знакомиться со сферой создания сайтов, для тех, кто хочет развиваться в этом максимально быстро и в поддержке практикующих программистов.

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

Что будет на этих страницах:

+ Форматированный текст (абзацы, заголовки, списки, таблицы и.т.д)

+ Изображения.

+ Фоновый цвет и изображения.

+ Размеры элементов

+ Расположение элементов веб-страницы в колонки.

+ Позиционирование элементов в нужное место.

+ и.т.д.

Программа состоит из уровней в зависимости от сложности их выполнения и уровня вашей подготовки. 

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

Если задание выполнено правильно, вы можете посмотреть, как это задание выполняли другие участники программы, находить оригинальные решения и развиваться.

Если что-то не получается, спрашиваете у меня.

Интересно?

Тогда начинаем. Первое, что нужно освоить — это язык HTML. Задача этого уровня максимально быстро погрузиться в эту тему.

Мы не будем глубоко погружаться в детали этого языка, а остановимся лишь на самом необходимом, что нужно знать, чтобы уже на этой неделе создать первые веб-страницы.

Чтобы пройти уровень, выполните следующие задания.

Что нужно изучить?

Задание уровня.  

Давайте представим, что мы с вами работаем веб-разработчиком в какой-нибудь фирме и к нам обращается заказчик, у которого есть Интернет-магазин.

Заказчик дает нам задание выбрать любой товар из магазина и сделать веб-страницу с его описанием. 

Примечание:

Можете для этого задания выбрать любой товар из любого Интернет-магазина и сделать описание на него (можно просто скопировать текст этого описания).

Например, можно взять товар с этих сайтов: aliexpress.com, wildberries.ru, и.т.д.

Пока для заказчика достаточно просто одного HTML-каркаса страницы, без оформления, чтобы в эскизном варианте посмотреть, что будет получаться, определиться с текстовым содержимым, положением главных блоков и.т.д. 

Чем больше будет обговорено и решено на этом этапе, тем меньше правок будет далее. 

Товар может быть любой. Это не важно. 

Что главное?

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

 

Примечание к макету:

Важно.

Макет вашей веб-страницы нужно будет разместить на сервисе GitHub Pages. Это бесплатный хостинг. Что это такое и зачем это нужно здесь.

В отчете нужно будет просто привести ссылку на ваш макет там.

1) Разбить страницу на основные логические блоки (шапка сайта, подвал, …)

2) Область «Навигация»:

+ Логотип можно выбрать на сайте https://www.iconfinder.com

В поиске набираем «logo» и подбираем какое-нибудь бесплатное изображение для логотипа.

+ Пункты главного меню сайта сформировать в виде списка маркированного.

3) Область «Шапки» сайта:

+ В «шапку» сайта (в элемент h2) разместить название товара. Тем самым мы выделяем важность этого для поисковых систем (Яндекс и Google). Таким образом, посетители сайта смогут легче находить ваш товар в поиске по его названию. Подробнее здесь. 

Название товара также разместите в элемент title, который находится в элементе <head>. Это тоже очень важно для поискового продвижения.

+ Под названием размещаем подзаголовок (в элементе h3), который каким-либо образом описывает товар.

4) Область «Основной раздел»

+ Вставить в основной раздел изображение товара (можете использовать любое).

+ Описание товара должно состоять из абзацев. 

Важные моменты должны быть выделены полужирным шрифтом.

Примечания выделить курсивом.

В описании должна быть ссылка на внешний сайт, которая открывается в новом окне.

Преимущества товара оформить в виде нумерованного списка:

1. Преимущество 1

2. Преимущество 2

3. Преимущество 3

7) В подвале страницы написать, что все права защищены и указать контактную информацию.

Если есть вопросы по заданию, пишите в личку вконтакте или телеграм.

Желаю вам скорейшего выполнения этого задания и встретимся на следующем уровне.

С уважением, Дмитрий Ченгаев.

HTML | Основы — GeeksforGeeks

В этой статье мы рассмотрим все основы кодирования HTML. Существуют различные теги, которые мы должны учитывать и включать при запуске кода в HTML. Эти теги помогают в организации и базовом форматировании элементов нашего скрипта или веб-страниц. Эти пошаговые процедуры проведут вас через процесс написания HTML.

Базовый документ HTML
Ниже перечислены основные теги HTML, которые разделяют весь документ на различные части, такие как голова, тело и т. Д.
  • Каждый документ HTML начинается с тега документа HTML. Хотя это не обязательно, но рекомендуется начинать документ с указанного ниже тега:
      
  • : каждый HTML-код должен быть заключен между основными HTML-тегами. Он начинается с и заканчивается тегом .
  • : Далее идет тег заголовка, который содержит всю информацию заголовка веб-страницы или документа, такую ​​как заголовок страницы и другую разную информацию.Эта информация заключена в тег заголовка, который открывается с и заканчивается . Конечно, содержимое этого тега будет объяснено в следующих разделах.
  • : </strong> Мы можем указать заголовок веб-страницы с помощью тега <strong><title> </strong>. Это информация заголовка и, следовательно, упоминается в тегах заголовка. Тег начинается с <strong><title> </strong> и заканчивается <strong>
  • : Следующий шаг — самый важный из всех тегов, которые мы изучили до сих пор.Тег body содержит фактическое тело страницы, которое будет видно всем пользователям. Это начинается с и заканчивается . Каждый контент, заключенный в этот тег, будет отображаться на веб-странице, будь то записи, изображения, аудио, видео или даже ссылки. Позже в этом разделе мы увидим, как с помощью различных тегов мы можем вставлять упомянутое содержимое на наши веб-страницы.

Весь шаблон кода будет выглядеть примерно так:

< html >

< головка >

< название > GeeksforGeeks название >

головка >

< корпус >

корпус >

html >

Этот код ничего не отображает. Он просто показывает базовый шаблон того, как написать HTML-код, и назовет заголовок страницы как GeeksforGeeks . - это тег комментария в HTML, и он не читает строку внутри этого тега.

HTML-заголовков
Эти теги помогают нам давать заголовки содержанию веб-страницы. Эти теги в основном записываются внутри тега body. HTML предоставляет нам шесть тегов заголовков от

до
.Каждый тег отображает заголовок в своем стиле и размере шрифта.

Пример :

< html >

< головка >

< название > GeeksforGeeks название >

головка >

< корпус >

< h2 > Привет, GeeksforGeeks h2 >

< h3 > Привет, GeeksforGeeks h3 >

< h4 > Привет, GeeksforGeeks h4 >

< h5 > Привет, GeeksforGeeks h5 >

< h5 > Привет, GeeksforGeeks h5 >

< h6 > Привет, GeeksforGeeks h6 >

корпус >

html >

Выход :

HTML Параграф
Эти теги помогают нам писать абзацы на веб-странице. Они начинаются с тега

и заканчиваются

. Здесь тег
используется для разрыва строки и действует как возврат каретки.
- пустой тег.
Пример :

< html >

< головка >

< название > GeeksforGeeks название >

головка >

< корпус >

< h2 > Привет, GeeksforGeeks h2 >

< p >

Портал информатики для вундеркиндов < br >

Портал информатики для вундеркиндов < br >

Портал информатики для вундеркиндов < br >

p >

корпус >

html >

Выход :

Горизонтальные строки HTML
Тег
используется для разделения страницы на различные части, создавая горизонтальные поля с помощью горизонтальной линии, идущей слева направо от страницы. Это также пустой тег, который не принимает никаких дополнительных операторов.
Пример :

< html >

< головка >

< название > GeeksforGeeks название >

головка >

< корпус >

< h2 > Привет, GeeksforGeeks h2 >

< p >

Портал информатики для вундеркиндов < br >

Портал информатики для вундеркиндов < br >

Портал информатики для вундеркиндов < br >

p >

< час >

< p >

Портал информатики для вундеркиндов < br >

Портал информатики для вундеркиндов < br >

Портал информатики для вундеркиндов < br >

p >

< час >

< p >

Портал информатики для вундеркиндов < br >

Портал информатики для вундеркиндов < br >

Портал информатики для вундеркиндов < br >

p >

< час >

корпус >

html >

Выход :

изображений HTML
Тег изображения используется для вставки изображения на нашу веб-страницу. Источник вставляемого изображения помещается в тег source_of_image “> .
Пример :

Вывод :

В HTML также есть различные другие теги для вставки ссылок, аудио и различных других тегов форматирования, которые мы изучим в следующих разделах.

Автор статьи Чинмой Ленка . Если вам нравится GeeksforGeeks, и вы хотели бы внести свой вклад, вы также можете написать статью, используя вклад.geeksforgeeks.org или отправьте свою статью по адресу [email protected]. Смотрите, как ваша статья появляется на главной странице GeeksforGeeks, и помогайте другим гикам.

Пожалуйста, напишите комментарии, если вы обнаружите что-то неправильное, или вы хотите поделиться дополнительной информацией по теме, обсужденной выше.


Курс HTML | Основы HTML

Курс HTML | Основы HTML

Навигация по курсу

В этой статье мы рассмотрим все основные моменты, необходимые для написания HTML. Существуют различные теги, которые мы должны учитывать и знать, начиная кодировать в HTML. Эти теги помогают в организации и базовом форматировании элементов нашего скрипта или веб-страниц. Эти пошаговые процедуры проведут вас через процесс написания HTML.

HTML Параграф
Эти теги помогают нам писать абзацы на веб-странице. Они начинаются с тега

и заканчиваются

. Здесь тег
используется для разрыва строки и действует как возврат каретки.
- пустой тег.
Пример :

< html >

< головка >

< название > GeeksforGeeks название >

головка >

< корпус >

< h2 > Привет, GeeksforGeeks h2 >

< p >

Портал информатики для вундеркиндов < br >

Портал информатики для вундеркиндов < br >

Портал информатики для вундеркиндов < br >

p >

корпус >

html >

Выход :

Горизонтальные строки HTML
Тег
используется для разделения страницы на различные части, создавая горизонтальные поля с помощью горизонтальной линии, идущей слева направо от страницы. Это также пустой тег, который не принимает никаких дополнительных операторов.
Пример :

< html >

< головка >

< название > GeeksforGeeks название >

головка >

< корпус >

< h2 > Привет, GeeksforGeeks h2 >

< p >

Портал информатики для вундеркиндов < br >

Портал информатики для вундеркиндов < br >

Портал информатики для вундеркиндов < br >

p >

< час >

< p >

Портал информатики для вундеркиндов < br >

Портал информатики для вундеркиндов < br >

Портал информатики для вундеркиндов < br >

p >

< час >

< p >

Портал информатики для вундеркиндов < br >

Портал информатики для вундеркиндов < br >

Портал информатики для вундеркиндов < br >

p >

< час >

корпус >

html >

Выход :

изображений HTML
Тег изображения используется для вставки изображения на нашу веб-страницу. Источник вставляемого изображения помещается в тег source_of_image “> .
Пример :

Выход :

HTML - Атрибуты
Атрибут используется для предоставления дополнительной или дополнительной информации об элементе.
  • Все элементы HTML могут иметь атрибуты. Атрибуты предоставляют дополнительную информацию об элементе.
  • Принимает два параметра: имя и значение. Они определяют свойства элемента и помещаются внутри открывающего тега элемента.Параметр name принимает имя свойства, которое мы хотели бы присвоить элементу, а значение принимает значение свойства или степень имен свойств, которые могут быть выровнены по элементу.
  • У каждого имени есть значение, которое следует писать в кавычках.
HTML - Комментарии

Используется для вставки комментариев в HTML-код. Использование комментариев, особенно в сложном коде, является лучшим методом кодирования, чтобы кодировщик и читатель могли получить помощь для понимания.

  • Это просто фрагмент кода, который стирается веб-браузерами, т.е. не отображается браузером.
  • Это помогает кодировщику / читателю кода идентифицировать фрагмент кода специально в сложном исходном коде.

Синтаксис комментариев HTML:


Пример:



< html >

< корпус >

< p > geeksforgeeks. п. >

корпус >

html >

Выход:

 geeksforgeeks.  
HTML - Списки
Что такое список?
Список - это запись коротких фрагментов информации, таких как имена людей, обычно написанных или напечатанных по одному значку в каждой строке и упорядоченных таким образом, чтобы можно было легко найти конкретный элемент.

Например, :

  • Список покупок
  • Список дел
Списки в HTML
HTML предлагает три способа определения списков информации. Все списки должны содержать один или несколько списков
элементы.

В HTML могут использоваться следующие типы списков:

  • ul: Неупорядоченный список. Это будет список элементов с использованием простых маркеров.
  • ol: Упорядоченный список. Это будет использовать разные схемы номеров для перечисления ваших товаров.
  • dl: Список определений. Это упорядочивает ваши элементы так же, как они расположены в словаре.

Подробнее о HTML см. : https://www.geeksforgeeks.org/html-tutorials/

HTML | Введение - GeeksforGeeks

HTML означает язык гипертекстовой разметки. Он используется для разработки веб-страниц с использованием языка разметки.HTML - это комбинация гипертекста и языка разметки. Гипертекст определяет связь между веб-страницами. Язык разметки используется для определения текстового документа внутри тега, который определяет структуру веб-страниц. Этот язык используется для аннотирования (создания заметок для компьютера) текста, чтобы машина могла его понять и соответствующим образом манипулировать текстом. Большинство языков разметки (например, HTML) удобочитаемы. Язык использует теги, чтобы определить, какие манипуляции над текстом должны выполняться.

HTML - это язык разметки, используемый браузером для управления текстом, изображениями и другим контентом, чтобы отображать его в требуемом формате. HTML был создан Тимом Бернерсом-Ли в 1991 году. Первой версией HTML был HTML 1.0, но первой стандартной версией был HTML 2.0, опубликованный в 1999 году.

Версия HTML Год
HTML 1.0 1991
HTML 2.0 1995
HTML 3,2 1997
HTML 4.01 1999
XHTML 2000
HTML 5 2014

Элементы и теги: HTML использует предопределенные теги и элементы, которые сообщают браузеру, как правильно отображать контент.Не забудьте добавить закрывающие теги. Если он не указан, браузер применяет эффект открывающего тега до конца страницы.

Структура HTML-страницы: Базовая структура HTML-страницы представлена ​​ниже. Он содержит основные элементы строительных блоков (например, объявление документа, html, заголовок, заголовок и элементы тела), на основе которых создаются все веб-страницы.


: Это объявление типа документа (технически не тег).Он объявляет документ как HTML-документ. В объявлении doctype регистр не учитывается.
: Это называется корневым элементом HTML. Все остальные элементы содержатся в нем.
: Тег заголовка содержит скрытые элементы для веб-страницы. Элементы в заголовке не отображаются в интерфейсе веб-страницы. HTML-элементы, используемые внутри элемента, включают:

  • <стиль>
  • <название>
  • <база>
  • <приписка>
  • <сценарий>
  • <название>
  • <ссылка>

: тег body используется для включения всего видимого содержимого веб-страницы.Другими словами, основной контент - это то, что браузер будет показывать во внешнем интерфейсе.

HTML-документ можно создать с помощью любого текстового редактора. Сохраните текстовый файл с использованием .html или .htm . После сохранения в виде HTML-документа файл можно открыть как веб-страницу в браузере.

ПРИМЕЧАНИЕ. Основными / встроенными текстовыми редакторами являются Блокнот (Windows) и TextEdit (Mac). Базовых текстовых текстовых редакторов вполне достаточно, когда вы только начинаете. По мере вашего продвижения будет доступно множество многофункциональных текстовых редакторов, которые обеспечивают большую функциональность и гибкость.

Вот пример веб-страницы в формате HTML:

HTML

< html >

< Головка >

< заголовок > демонстрационная веб-страница заголовок >

< стиль >

h2 {

цвет: # 009900;

font-size: 46px;

}

п {

font-size: 17px;

margin-top: -25px;

левое поле: 15 пикселей;

}

стиль >

головка >

< корпус >

< h2 > GeeksforGeek h2 >

< p > Портал компьютерных наук для вундеркиндов p >

корпус >

html >

Выход:

Особенности HTML:

  • Его легко освоить и легко использовать.
  • Не зависит от платформы.
  • На веб-страницу можно добавлять изображения, видео и аудио.
  • К тексту можно добавить гипертекст.
  • Это язык разметки.

Зачем изучать HTML?

  • Это простой язык разметки. Его реализация проста.
  • Используется для создания сайта.
  • Помогает в разработке основ веб-программирования.
  • Повышайте профессиональную карьеру.

Преимущества:

  • HTML используется для создания веб-сайтов.
  • Поддерживается всеми браузерами.
  • Может быть интегрирован с другими языками, такими как CSS, JavaScript и т. Д.

Недостатки:

  • HTML позволяет создавать только статические веб-страницы. Для динамических веб-страниц необходимо использовать другие языки.
  • Для создания простой веб-страницы необходимо написать большой объем кода.
  • Неудовлетворительная функция безопасности.

Примечание: Пожалуйста, перейдите по адресу https: // www.geeksforgeeks.org/html-basics/ по основам HTML.


Основы HTML

Язык разметки HTML

HTML - это язык для описания структуры веб-страниц. Страницы, созданные с его помощью, можно просматривать только с помощью специальных программ (браузеров), установленных на компьютерах пользователей.

  • Аббревиатура HTML расшифровывается как H yper T ext M arkup L anguage.
  • Помните, это не язык программирования, это язык разметки.
  • HTML использует теги разметки для описания структуры веб-страницы.

Теги

HTML-теги

- это ключевые слова или символы, заключенные в угловые скобки, например ,

,

и т. Д. Теги бывают двух типов: пар и одиночные (они также называется пустым). Парные теги состоят из открывающего и закрывающего тегов, например:

текст

.Символ «/» после угловой скобки означает, что тег закрывается. Одиночные теги состоят только из открывающего тега, например:
. Теги не чувствительны к регистру, поэтому их можно писать как прописными, так и строчными буквами:

означает то же, что и

. Теги определяют начало и конец HTML-элемента.

С помощью тегов браузер распознает структуру и значение вашего текста, например, они сообщают браузеру, какая часть текста является заголовком, где начинается новый абзац, что выделить и где разместить изображение (картинку).Когда эта информация получена, браузер использует правила по умолчанию для отображения каждого из этих элементов.

Примечание: в нашем руководстве по CSS вы можете увидеть стили по умолчанию для любого интересующего вас тега.

Без использования HTML-тегов браузер будет выводить просто сплошной поток текста без отступов, заголовков, абзацев и т. Д., Чтобы сделать его более понятным, рассмотрим это более подробно в примерах.

Это похоже на страницу, на которой используются теги для разметки:



  
    
     Летнее меню 
  
  
     

Напитки в нашем кафе

Смузи - 4 $.

Морс, содержащий апельсиновый и ананасовый соки с мякотью.

Молочный коктейль - 6 $.

Мороженое, смешанное с шоколадным сиропом.

То же, но без использования тегов:

Напитки в нашем кафе

Смузи - 4 $.
Морс, содержащий апельсиновый и ананасовый соки с мякотью.

Молочный коктейль - 6 $.
Мороженое, смешанное с шоколадным сиропом.

Основы HTML

Автор Xah Lee. Дата: . Последнее обновление: .

Эта страница представляет собой базовое практическое 5-минутное руководство по HTML.

Базовая структура

HTML - очень простой язык разметки. Вот пример. Сохраните следующий текст в файле, назовите его sample.html , затем откройте файл в браузере.

 


 
  
   Образец HTML 
 

 
   

Образец HTML

Земля круглая!

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

содержит метаинформацию о файле.

<var>… </var> дает заголовок файла.

- это содержимое файла.

- это заголовок содержимого.

- абзац.

Каждый из <> называется тегом .

Открывающий и закрывающий теги вместе называются элементом . Например,

называется «элементом p».

Самые важные элементы

Вот наиболее часто используемые элементы.

Заголовки h2 h3 h4 ...

  • Жатка первого рычага

  • Жатка второго рычага

  • Третий рычаг коллектора

Есть h2 до h6 .

пункт

кое-что

 

«p» означает абзац.
«Br» означает разрыв строки внутри абзаца. Текст можно выделить полужирным шрифтом с помощью тега «b», например: жирным шрифтом введите . Также есть «i» для наклонного / курсивного текста .

Компьютерный код, буквальный текст

«pre» означает текст, отформатированный с разрывами строк, как правило, для компьютерного кода или стихов.

х = 3
напечатать x + y

Неупорядоченный список

 
  • элемент списка 1
  • элемент списка 2

Заказанный список

 
  1. элемент упорядоченного списка 1
  2. элемент упорядоченного списка 2

Универсальный блок-контейнер, div

кое-что

«div» - это общая разметка для блока текста.Это похоже на «p». «Div» обычно используется для группировки других элементов внутри.

 
«div» - это общая разметка для блока текста. Это похоже на «p». «Div» обычно используется для группировки других элементов внутри.

Изображение

Для встроенного изображения.

my cat

полужирный

это

курсив

это

пролет

что-то

«span» - это общая разметка для встроенного текста.Аналогично выделенному жирным шрифтом тегу «b»

Самозакрывающиеся теги

Некоторые элементы не имеют закрывающего тега. Например,

 my cat 

Это так называемые самозакрывающиеся теги.

[см. Список самозакрывающихся тегов HTML]

Атрибуты элемента

Каждый элемент может иметь « атрибутов ».

Атрибуты представляют собой пары имя / значение.

Синтаксис атрибутов такой:

name = " value ">

или

name >

Атрибут без знака равенства называется логическим атрибутом.Они редкие.

Какие атрибуты разрешены для каждого элемента, зависит от элемента.

Наиболее важные атрибуты: class, id

Два наиболее часто используемых атрибута, которые можно использовать с любым элементом: class и id атрибуты.

 

«класс» позволяет идентифицировать элемент с помощью CSS и JavaScript.

 

«id» позволяет идентифицировать элемент с помощью CSS и JavaScript. Значение идентификатора должно быть уникальным для каждой HTML-страницы.

У элемента может быть много атрибутов. Например, вот встроенное изображение:

 

Я путешествовал по миру.

Атрибуты class и id используются каскадной таблицей стилей и JavaScript для идентификации элемента.

Чувствительность корпуса

Чувствительность к регистру в HTML / CSS

Версии HTML

Существует много версий HTML и XHTML, и это действительно беспорядок. Если вы создаете новые страницы, а не обслуживаете старые, я рекомендую HTML5.Поместите следующую строку в начало вашего файла.

  

Основы HTML

Язык гипертекстовой разметки (HTML) - один из наиболее часто используемых языков для проектирования и разработки веб-страниц. Чтобы создать веб-страницу с использованием HTML, вы должны быть знакомы с основами HTML.

Итак, изучите основы HTML, такие как теги и содержимое, встроенное в теги HTML, атрибуты и типы данных.

HTML-теги указывают веб-браузеру, как он должен интерпретировать документ.Атрибуты тега предоставляют дополнительная информация, такая как его поведение и свойства. Контент отображается в браузере в соответствии со свойствами и поведение, определяемое тегом и атрибутами.

HTML-теги

можно разделить на следующие части в зависимости от поведения, которое они отображают на веб-странице:

  • root - содержит основной тег HTML
  • метаданные - содержат теги, которые определяют поведение всего HTML-документа
  • Раздел
  • - содержит теги, которые используются для представления различных разделов документа HTML.
  • Заголовок
  • - содержит теги, которые представляют заголовки в документе HTML
  • поток - содержит теги, которые используются в теге BODY документа HTML для определения структуры документа.
  • phrasing - содержит теги, которые используются для отображения текста HTML-документа
  • встроенный - содержит теги, которые используются для встраивания содержимого в документ HTML.
  • интерактивный - содержит теги, которые используются для взаимодействия с пользователем.

Пример основы HTML

Вот несколько примеров HTML Basics, на которые вы можете пойти:

 


 Это заголовок 



 

Это главный заголовок

Это абзац.

Это подзаголовок

Это тоже абзац

Напишите указанный выше HTML-код в текстовом редакторе (блокноте или другом) и сохраните его вместе с расширением .html. Теперь откройте сохраненный файл в вашем браузер, это будет выглядеть так:

Вот еще один базовый пример HTML

 


 Пример учебного пособия по основам HTML 



 

Основы HTML

Это руководство по основам HTML

Пример основ HTML

Это базовый пример HTML

Вот вывод HTML-кода выше:

HTML онлайн-тест


«Предыдущее руководство Следующее руководство »



.
Оставить комментарий

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

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