HTML Основные понятия

В связи с развитием сетевых технологий, появлением глобальной сети Интернет появились такие понятия, как WWW (World Wide Web — всемирная паутина), HTML (HyperText Markup Language — язык разметки гипертекста).

Интернет Internet (сокр. от Interconnected Networks — объединённые сети) — глобальная телекоммуникационная сеть информационных и вычислительных ресурсов. Интернет является физической основой для всемирной паутины WWW.

Приблизительно в 1991-92 годах был изобретен основной язык документов в сети Интернет – язык HTML. Поэтому этот год считается одним годов рождения Интернет. Автором стал Тим Бернерс-Ли.

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

Язык HTMLнельзя назвать языком программирования. HTML- средство описания структуры документа, его стиля и связей с другими документами.

Практически вместе с появлением языка гипертекстовой разметки HTMLпоявился протокол передачи гипертекстовых документов HTTP (HyperText Transfer Protocol, протокол передачи гипертекстовых документов). Протокол (protocol) — это совокупность правил передачи данных, позволяющий компьютерным системам с различной архитектурой общаться между собой. Для создания ссылок Тим-Бернерс Ли разработал унифицированный указатель ресурса — Uniform Resource Locator (URL).

С появлением протокола HTTP появилась возможность передавать документы по сети Интернет. Здесь популярной стала архитектура «Клиент-сервер», позволяющая хранящиеся на сервере (англ.: to serve — служить, обслуживать) документы передаются при запросе пользователю. Для такой работы на сервере должно быть установлено специальное программное обеспечение, а на компьютере пользователя программа преобразующая гипертекстовую информацию в визуальную – Интернет браузер.

Браузеры позволяют просматривать HTML документы (страницы), расположенные как локально на компьютере, так и на сайте. Web – сайты это так называемые узлы Интернет. Сайты размещаются на серверах, которые отличаются высокой производительностью и работают круглосуточно. Для возможности поддержки сайтов на серверах устанавливается специальное программное обеспечение web-серверов. Причем, если на сервере установлена операционная система UNIX, то под ней работает web-сервер Apache, а если установлена операционная система Windows, то — web-сервер MicrosoftInternetInformationServer (IIS).

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

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

В целях большей совместимости гипертекстового языка и браузеров был создан WorldWideWebconsortium (W3C – Консоциум всемирной паутины).

HTMLдокумент можно создать в обычном текстовом редакторе. Это может быть блокнот или другой простейший редактор. Нужно помнить, что при сохранении файлов в блокноте автоматически подставляется расширение txt, его нужно заменять на html. Тажке для создания html страниц можно использовать программы-редакторы (MicrosoftOfficeWord, AdobeDreamweaver, HomeSiteи т.д.). При использовании редакторов генерируемых html код может быть «засоренным», то есть подставлены сотни ненужных тегов. Поэтому результаты работы таких программ часто нужно еще редактировать вручную.

Неплохой программой для работы с HTMLможно считать Notepad++. Дело в том, что программа подсвечивает теги в коде, тем самым визуально облегчая работу с документом.

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

Дополнительные материалы:

Основные теги HTML.

Создание таблиц в HTML

Поделиться в соц. сетях:

Основные понятия языка гипертекстовой разметки документов HTML. Структура html-документа

Похожие презентации:

Проблема. Мне бы хотелось найти друзей

Cloud and Mobile technology

Анализ воздействия социальных сетей на формирование зависимого поведения у молодежи

Облачные технологии

Киберспорт

Основы web-технологий. Технологии создания web-сайтов

Веб-дизайн

Социальная сеть Facebook

Системы телекоммуникации

Новый Пульт ГрузовичкоФ

1. Тема занятия: Основные понятия языка гипертекстовой разметки документов HTML. Структура html-документа.

2. Цель занятия: сформировать знания об основных понятиях языка гипертекстовой разметки документов HTML, структуре html-документа.

Основные понятия:
• Интернет образуют web-серверы.
Веб-сервер (программа + компьютер, на котором эта
программа работает) получает по сети запрос на
определённый ресурс (web-страницу), находит
соответствующий файл на локальном жёстком диске и
отправляет его по сети запросившему компьютеру.
• Web-страница – является обычным текстовым файлом,
в формате html. Содержит гиперссылки для перехода на
другие страницы, текст, графику, звуковое
сопровождение, анимацию и другие мультимедийные
объекты .
• Гиперссылка – цветной текст или графический объект,
осуществляющий переходы между различными
компонентами Web-сайта.
• Web-сайт – группа тематически связанных Webстраниц, располагающихся на одном компьютере.
Web-сайты хранятся на web-серверах.
• Браузер – программа для просмотра Web-страниц на
компьютере клиента. Opera, GoogleChrom, Амиго,
Internet Explorer и др.

5. Назначение языка гипертекстовой разметки документов HTML:

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

6. Структура html-документа

<HEAD> и </HEAD> — раздел документа,
ограниченный тэгами называется его
заголовком.
Например,
• Название html-документа,
выделяемое парными тэгами <title>
и </title>.

Метатеги <meta> используются для
хранения информации,
предназначенной для браузеров и
поисковых систем.
Например,
<Meta charset=“кодировка”> — задает
кодировку документа
<Meta name=“keywords” content=“поиск,
информация, поисковая система”> устанавливает ключевые слова для поиска
<Meta name=“author ” content=“железная
С.В.”> — Устанавливает автора документа
Элементы, заключенные в значки
“<“ и “>”,
называются тегами или
дескрипторами.
Теги несут информацию о структуре и
особенностях форматирования webстраницы. Теги, обычно следуют в паре
— открывающий и закрывающий.
Например,
<I>курсивное начертание</i>
ФОРМАТ ОПИСАНИЯ ЭЛЕМЕНТА
<BODY> И </BODY> -ТЕЛО ДОКУМЕНТА. В
ЭТОМ РАЗДЕЛЕ РАЗМЕЩАЕТСЯ ТЕКСТОВАЯ И
ГРАФИЧЕСКАЯ ИНФОРМАЦИЯ, ТАБЛИЦЫ И
ДРУГИЕ ЭЛЕМЕНТЫ СОСТАВЛЯЮЩИЕ
СОДЕРЖИМОЕ СТРАНИЦЫ.
У этого тега есть атрибуты:
Bgcolor=“цвет фона”
Background=“путь к файлу”
Text=“color ”
Alink=“цвет’
Vlink=“цвет”
Тэги, определяющие структуру документа
<hn> текст </hn> — выделение текста
заголовком n-го уровня. n принимает
значения от 1 до 6.
<p> текст </p> — создание абзаца текста.
Основной атрибут для данных тэгов
Align=left|right|center|justify –
выравнивание текста
<div> текст </div> — задает
информационный блок
примечание: для разработки структуры
web-страницы используют табличную или
блочную верстку (блоками div).
ТЭГИ, ОПРЕДЕЛЯЮЩИЕ ВНЕШНИЙ ВИД
ДОКУМЕНТА
ПРИМЕЧАНИЕ: В ПРЕДСТАВЛЕННОЙ ВЫШЕ
ТАБЛИЦЕ УКАЗАНО, ЧТО РАЗМЕР ШРИФТА ТЕКСТА
УСТАНАВЛИВАЕТСЯ ЧИСЛОВЫМИ КОНСТАНТАМИ
ОТ 1 ДО 7. УСТАНОВИМ СООТВЕТСТВИЕ МЕЖДУ
КАЖДОЙ КОНСТАНТОЙ И РАЗМЕРОМ ШРИФТА В
ПУНКТАХ.
Нумерованные списки.
Для создания используются тэги:
•<ol>элементы списка</ol>
открывающий и закрывающий тэги
маркированного списка
•<li>значение</li>
определение
конкретного элемента списка
форматирование нумерованных списков
заключается в изменении стиля номера type
и порядка нумерации start.
<ol type=значение start=номер начального
элемента списка>
ЗНАЧЕНИЯ АТРИБУТА TYPE
Маркированные. Для создания
используются тэги:
•<ul>элементы списка</ul>
открывающий и закрывающий тэги
маркированного списка
•<li>значение</li>
определение
конкретного элемента списка
Форматирование маркированных списков
заключается в изменении типа маркеров
type.
Тэги, применяемые для вставки ссылок,
закладок и графики
Создание ссылок
<a href=“имя_файла”> тип ссылки </a>
<a href=“#имя_закладки”> тип ссылки </a>
вставка закладок для перехода внутри текущего
документа
<a name=“имя закладки”>контент</a>
Типы ссылок:
•Текстовая
•Графическая
Пример. Необходимо с текущей страницы
перейти на страницу lab2.Html.
ВСТАВКА РИСУНКОВ
<IMG SRC=“ИМЯ_ФАЙЛА”>
ПРИМЕР. ВСТАВИТЬ РИСУНОК PRIRODA.GIF ПО
ЦЕНТРУ И УСТАНОВИТЬ ДЛЯ НЕГО РАЗМЕРЫ:
ШИРИНА = 300 PIX, ВЫСОТА = 250 PIX
у тега img есть следующие атрибуты:
<src=“путь к файлу”>
<align=“bottom | left | middle | right | top»> определяет выравнивание рисунка
<alt=“текст”> — задает альтернативный текст
<border=“толщина рамки в px ”>
<hspace=“отступ”> — горизонтальный отступ от
окружающего текста в пикселях
<vspace=“отступ”> — вертикальный отступ от
окружающего текста
<width=“”> — ширина в пикселях или процентах
<height=“”> — высота в пикселях или процентах
тэги, применяемые для описания таблиц
таблица — набор ячеек, находящихся на
пересечении строк и столбцов.
основные структурные элементы таблицы:
• строка набор ячеек, расположенных слева
направо
• ячейка находится на пересечении строки и
столбца
• граница
служит для заключения всей
таблицы в рамку и для разделения линиями ее
строк и столбцов
рассмотрим основные тэги:
• <table>содержимое таблицы</table>
начало и конец, создаваемой таблицы
основные атрибуты
border=n
задает толщину в пикселях рамки таблицы
width=n
задает ширину таблицы на странице в
пикселях или процентах (например, 50%)
height=n
задает высоту таблицы на странице в
пикселях или процентах (например, 80%)
align=“left|right|center ”
выравнивание таблицы
cellpadding=n
задает отступ от рамки до содержимого
ячейки в px или процентах
cellspacing=n
задает расстояние между ячейками в px
или процентах
backgroung=“путь к фоновому рисунку”
bgcolor=“цвет”
<caption> заголовок таблицы </caption>

<tr>содержимое строки</tr>
описывает строку таблицы. строка
таблицы состоит из ячеек.
• <td>содержимое ячейки</td>
описывает ячейку таблицы.
основные атрибуты тега <td>
• rowspan=n
объединяет n ячеек, расположенных в одном
столбце
• colspan=n
объединяет n ячеек, расположенных в одной
строке
Пример 1: создадим таблицу вида:
Объект базы данных
Назначение
таблица
для хранения информации
форма
для удобства ввода данных
HTML – код
<table border=»1″>
<tr align=»center»>
<td><b>Объект базы данных</b></td>
<td><b>Назначение</b></td>
</tr>
<tr>
<td>Таблица</td>
<td>Для хранения структуры базы данных и ее содержимого</td>
</tr>
<tr>
<td>Форма</td>
<td>Для удобства ввода данных в таблицу</td>
</tr>
</table>
Пример 2: создадим таблицу вида:
Запросы
Классификация
на выборку
перекрестные
итоговые
HTML – код
<table border=»1″>
<tr align=»center»>
<td rowspan=“2″><i>Запросы</i></td>
<td colspan=»3″><b>Классификация</b></td>
</tr>
<tr>
<td>на выборку</td>
<td>перекрестные</td>
<td>итоговые</td>
</tr>
</table>

32.

ФреймыФреймы позволяют разбить
пространство окна web-браузера
на две или более обособленные
прямоугольные части.
Каждая часть предназначена для
отображения отдельного
html-документа web-сайта.
Чаще всего фреймы используют для
создания фиксированной
навигационной панели web-сайта.
Web-страница, содержащая фреймы,
состоит из следующих компонент:
• Управляющего файла <frameset>.
Это особый тип html-документа, в
котором указывается количество
фреймов, на который разбивается
web-страница, их расположение и
размер
• Набора отдельных html-документов,
которые должны быть отображены
в соответствующих фреймах. <frame>
Пример 1
<html>
<head>
<title> Управляющий документ</title>
</head>
<frameset rows=”25%,*”>
<frame src=”page1.html”>
<frame src=”page2.html”>
</frameset>
</html>
Контрольные вопросы
1. Для чего предназначены html-дескрипторы?
2. Опишите структуру html-документа.
3. Как создать абзац текста и выровнять его?
4. Как выделить текст заголовком определенного уровня?Для чего
применяются заголовки?
5. Как выделить текст курсивом, полужирным? Подчеркнуть?
6. Как установить цвет, тип шрифта и размер текста?
7. Что такое гиперссылка? Как вставить в документ текстовую ссылку?
8. Как вставить рисунок?
9. Какие тэги используются для создания маркированных списков?
10. Какие тэги используются для создания нумерованных списков?
11. Какие тэги используются для создания таблиц?
12. Объясните назначение свойств rowspan и colspan тэга <td>?
13. Для чего применяют фреймы?

37. Спасибо за внимание

English     Русский Правила

Основы HTML — GeeksforGeeks

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

Базовый HTML-документ: Ниже перечислены основные теги HTML, которые делят весь документ на различные части, такие как заголовок, тело и т. д.

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

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

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

Пример: Этот пример иллюстрирует базовую структуру HTML .

HTML

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

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

9от 0004 до

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

Большинство HTML Tag Tag, которую мы используем:-

• . > в HTML.

  HTML

< html >   < head >                       < title >GeeksforGeeks title > head >   < body >      Body > HTML >

< HTML >   < head >      < title >GeeksforGeeks title > head > < тело >      < h2 >Hello GeeksforGeeks1 900 90 >      < h3 >Hello GeeksforGeeks h3 >      < h4 >Hello GeeksforGeeks h4 > < H5 > Hello Geeksforgeeks H5 > < . 0071 h5 >Hello GeeksforGeeks h5 >      < h6 >Hello GeeksforGeeks h6 > body > HTML >

Выход :

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

и заканчиваются тегом

.

Разрыв HTML: — Эти теги используются для вставки разрыва одной строки. У него нет закрывающего тега. В HTML тег разрыва записывается как
.  

Пример : В этом примере показано использование тега

для написания оператора абзаца в HTML.

HTML

< html >   < head >      < title >GeeksforGeeks title > Головка >   < Корпус 9 0072 > 0071 < H2 > Hello Geeksforgeeks H2 > < < < . >          Портал компьютерных наук для гиков< br >     9 Компьютерные науки для гиков A0072 br >      p >         body >   html >

Вывод :

Параграф HTML

Горизонтальная линия HTML: Тег

---

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

Пример : Этот пример иллюстрирует использование тега

---

для горизонтальной линии в HTML.

HTML

< html >   < head >      < title >GeeksforGeeks title > головка >   < body >      < h2 >Hello GeeksforGeeks h2 >            < p >          Портал информатики для гиков< br >          A Computer Science portal for geeks< br >          A Computer Science portal for geeks< br >      p > < HR > > > > > 0005     < p >          A Computer Science portal for geeks< br >          A Computer Science portal for geeks< br >         Портал информатики для гиков< br >      72 p >              < hr >            < p > Портал информатики для гиков< br >          Портал информатики для гиков< br >          A Computer Science portal for geeks< br >      p >              < час > корпус > 5 072 HTML >

Выход :

Добавление горизонтальной линии с использованием

---

Tag

HTML Image : . . Источник вставляемого изображения помещается в тег .

Изображение может быть вставлено в тег изображения в двух форматах: – 

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

Пример : В этом примере показано использование тега для вставки изображений в HTML.

Вывод :

Добавление изображения с помощью тега

Поддерживаемые браузеры:

• Google Chrome 93.0 и выше
• Internet Explorer 11.0
• Microsoft Edge 93.0
• Firefox 92.0 и выше
• . вставляйте ссылки, аудио и различные другие теги форматирования, которые мы изучим в следующих разделах.

  Эту статью предоставил Чинмой Ленка . Если вам нравится GeeksforGeeks и вы хотите внести свой вклад, вы также можете написать статью с помощью write.geeksforgeeks.org или отправить ее по адресу review-team@geeksforgeeks.org. Посмотрите, как ваша статья появится на главной странице GeeksforGeeks, и помогите другим гикам.

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

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

  
  

  Учебное пособие по изучению HTML — javatpoint

  следующий → Учебное пособие по HTML Учебное пособие по или HTML 5 содержит базовые и расширенные концепции HTML. Наш учебник HTML разработан для начинающих и профессионалов. В нашем учебнике каждая тема дана шаг за шагом, так что вы можете изучить ее очень легко. Если вы новичок в изучении HTML, вы можете изучить HTML от базового до профессионального уровня, а после изучения HTML с помощью CSS и JavaScript вы сможете создать свой собственный интерактивный и динамичный веб-сайт. Но сейчас в этом уроке мы сосредоточимся только на HTML. Основные моменты HTML приведены ниже: HTML означает язык гипертекстовой разметки. HTML используется для создания веб-страниц и веб-приложений. HTML широко используется в Интернете. Мы можем создать статический веб-сайт только с помощью HTML. Технически HTML — это язык разметки, а не язык программирования. Пример HTML с редактором HTML В этом руководстве вы получите множество примеров HTML, по крайней мере, один пример для каждой темы с объяснением. Вы также можете редактировать и запускать эти примеры с помощью нашего онлайн-редактора HTML. Изучение HTML — это весело, и его очень легко выучить. <голова> <тело> Напишите свой первый заголовок Напишите свой первый абзац. Протестируйте сейчас Индекс HTML Учебник HTML Введение в HTML Что такое HTML HTML-теги Форматирование HTML HTML-заголовок HTML-абзац Якорь HTML HTML-изображение Таблица HTML HTML-списки Нумерованный список HTML Ненумерованный список HTML Список HTML-описаний HTML-форма HTML-классы Идентификатор HTML HTML-фреймы HTML JavaScript Путь к файлу HTML HTML-заголовок Макет HTML Адаптивный HTML Компьютерный код HTML HTML-сущности HTML-символы Кодировка HTML HTML-код URL-адреса Теги HTML Выделение HTML Текстовая область HTML HTML-кавычки Стиль HTML Заголовок HTML HTML-ДОКТИП Тег HTML Div Предварительный тег HTML Тег кода HTML Тег метки HTML Тег ввода HTML HTML-тег кнопки Тег HTML HR Тег HTML BR Тег HTML-скрипта Тег HTML NoScript Тег HTML b Учебное пособие по HTML5 Учебное пособие по HTML5 Руководство пользователя HTML5 Теги HTML 5 HTML-аудио HTML-видео HTML-прогресс HTML-метр HTML-тег данных HTML-тег списка данных Тег заголовка HTML HTML-тег нижнего колонтитула HTML-тег рисунка Тег HTML Figcaption HTML-тег статьи Отступающий HTML-тег HTML-тег диалога HTML-тег сведений Тег сводки HTML Тег раздела HTML Метка времени HTML Основной тег HTML Тег WBR HTML Холст HTML HTML SVG Перетаскивание HTML HTML Карты Google Семантика HTML5 Миграция HTML5 Имена цветов HTML Имена цветов HTML Вопросы для интервью HTML вопросы для интервью Теги HTML 5 В этом уроке мы изучим теги HTML 5, такие как тег аудио, тег видео, тег холста, HTML svg, геолокация HTML, перетаскивание HTML и т. Добавить комментарий Отменить ответ Ваш адрес email не будет опубликован. Обязательные поля помечены * Комментарий * Имя * Email * Сайт