HTML определяет структуру и макет Веб-документа с помощью различных тегов и атрибутов. Правильная структура HTML-документа начинается с <HTML><HEAD><BODY> и заканчивается </BODY></HTML>. Всю информацию, которую вы хотите включить в вашу Web-страницу помещается между тегами <BODY> и </BODY> .
Существуют сотни других тегов, которые используются для форматирования и размещения информации на Веб-странице. Теги используются также для указания гипертекстовых ссылок. Это позволяет Веб-разработчикам отправлять пользователей на другие Веб-страницы с помощью только одного клика мыши на изображение или слово.
Имя | HTML-Тег | Пример HTML-Кода | Вид Браузера |
| HTML Заголовок1 HTML Заголовок 2 HTML Заголовок 3 HTML Заголовок 4 HTML Заголовок 5 HTML Заголовок 6 | <h1> <h2> <h3> <h4> <h5> <h6> | <h1>Heading 1</h1> <h2>Heading 2</h2> <h3>Heading 3</h3> <h4>Heading 4</h4> <h5>Heading 5</h5> <h6>Heading 6</h6> | |
| Заголовок HTML-Документа, | <head> | <head>Содержит элементы, описывающие документ</head> | Ничего не покажет |
| HTML Горизонтальная линия | <hr> | <hr /> | Содержание вашей веб-страницы Содержание вашей веб-страницы |
| HTML Горизонтальная линия | <hr> | <hr width="50%" size="3" /> | Содержание вашей веб-страницы Содержание вашей веб-страницы |
| HTML Горизонтальная линия | <hr> | <hr width="50%" size="3" noshade /> | Содержание вашей веб-страницы Содержание вашей веб-страницы |
| HTML Горизонтальная линия | <hr> (Интернет Explorer) | <hr width="75%" color="#ff0000" size="4" /> | Содержание вашей веб-страницы Содержание вашей веб-страницы |
| HTML Горизонтальная линия | <hr> (Интернет Explorer) | <hr width="25%" color="#6699ff" size="6" /> | Содержание вашей веб-страницы Содержание вашей веб-страницы |
| HTML-Язык Разметки Гипертекста | <html> | <html> <head> <meta> <title>Название вашей веб-страницы</title> </head> <body>HTML веб-страницы содержание </body> </html> | Содержание вашей веб-страницы |
| HTML Курсив | <i> | <i>Пример</i> | Пример |
| Изображения в HTML | <img> | <img src="Earth.gif" width="41" height="41" border="0" alt="text описание изображения" /> |  |
| HTML Поле Ввода | <ввод> | Пример: <form method=post " action="/cgi-bin/example.cgi"> <input type="text" size="10" maxlength="30"> <input type="Submit" value="Submit"> </form> | |
| HTML Ввода Пароля | <ввод> | <form method=post " action="/cgi-bin/example.cgi"> <input type="пароль" size="10" maxlength="30"> <input type="Submit" value="Submit"> </form> | |
| Данные HTML (Цвет Фона) | <ввод> (Internet Explorer) | Пример: <form method=post " action="/cgi-bin/example.cgi"> <input type="text" style="color: #ffffff; font-family: Verdana; font-weight: bold; font-size: 12px; background-color: #72a4d2;" size="10" maxlength="30"> <input type="Submit" value="Submit"> </form> | |
| Данные HTML (Изображения Submit) | <ввод> | Пример: <form method=post " action="/cgi-bin/example.cgi"> <table border="0" cellspacing="0" cellpadding="2"><tr><td bgcolor="#8463ff"><input type="text" size="10" maxlength="30"></td><td bgcolor="#8463ff" valign="Middle"> <input type="image" name="submit" src="yourimage.gif"></td></tr> </table> </form> | |
| Данные HTML ("Комментарии") | <ввод> | Пример: <form method=post " action="/cgi-bin/example.cgi"> Введите Ваши Комментарии:<br> <textarea wrap="виртуальная" name="Комментарии" rows=3 cols=20 maxlength=100></textarea><br> <input type="Submit" value="Отправить"> <input type="Reset" value="Очистить"> </form> | |
| Данные HTML (Radio Button) | <ввод> | Пример: <form method=post " action="/cgi-bin/example.cgi"> Выберите один из вариантов:<br> <input type="radio" name="опции"> Вариант 1 <input type="radio" name="опции"> Вариант 2 <input type="radio" name="опции"> Вариант 3 <input type="Submit" value="Submit"> </form> | |
| Данные HTML (Checkbox) | <ввод> | Пример: <form method=post " action="/cgi-bin/example.cgi"> Выберите один из вариантов:<br> <input type="checkbox" name="выделение"> Выбор 1 <input type="checkbox" name="выбор">Выбор 2 <input type="checkbox" name="выделение">Выбор 3 <input type="Submit" value="Submit"> </form> | |
| HTML-Элемент Списка | <li> | Пример 1: <меню>. <li тип="диск">элемент Списка 1</li> <li type="circle">элемент Списка 2</li> <li type="square">элемент Списка 3</li> </MENU> Пример 2: <ol type="i"> <li>Элемент списка 1</li> <li>Элемент списка 2</li> <li>Элемент списка 3</li> <li>4 элемента списка</li> </ol> | Пример 1:
|
| HTML Link | <link> | <head> <link rel="stylesheet" type="text/css" href="style.css" /> </head> | |
| HTML-Прокрутка Текста | <marquee> (Интернет Explorer) | <marquee bgcolor="#cccccc" loop="-1" scrollamount="2" width="100%">Пример Область</marquee> | |
| "HTML " Меню" | <меню>. | <меню>. <li type="disc">элемент Списка 1</li> <li type="circle">элемент Списка 2</li> <li type="square">элемент Списка 3</li> </menu> |
|
| HTML Мета | <meta> | <мета name="Description" content="Описание вашей сайт"> <мета name="keywords" content="ключевые слова, описывающие ваш сайт"> | Ничего не покажет |
| HTML Мета | <meta> | <мета HTTP-EQUIV="Refresh" CONTENT="4;URL=http://www.yourdomain.com/"> | Ничего не покажет |
| HTML Мета | <meta> | <мета http-equiv="Прагма" content="no-cache"> | Ничего не покажет |
| HTML Мета | <meta> | <мета name="рейтинг" content="общие"> | Ничего не покажет |
| HTML Мета | <meta> | <мета name="robots" content="all"> | Ничего не покажет |
| HTML Мета | <meta> | <мета name="robots" content="noindex,follow"> | Ничего не покажет |
Имя | HTML-Тег | Пример HTML-Кода | Вид Браузера | ||||||||||||
| HTML Упорядоченный Список | <ol> | Нумерованный <ol> <li>элемент Списка 1</li> <li>элемент Списка 2</li> <li>элемент Списка 3</li> <li>Элемент Списка 4</li> </ol> Нумерованный Специальные Начать <ol start="5"> <li>элемент Списка 1</li> <li>элемент Списка 2</li> <li>элемент Списка 3</li> <li>элемент Списка 4</li> </ol> Строчные Буквы <ol type="a"> <ol type="A"> <ol type="A" Пуск " ="3"> <ol type="i"> <ol type="I"> <ol type="I" Пуск " ="7"> | Нумерованный
Нумерованный Специальные Начать
Строчные Буквы
Заглавными Буквами
Специальные Начальные Заглавные Буквы
Строчными Римскими Цифрами
Капитал Римскими Цифрами
Капитал Римскими Цифрами Специальные Начать
| ||||||||||||
| HTML Listbox " Option " (в выпадающем списке) | <option> | <form method=post " action="/cgi-bin/example.cgi"> <center> Выберите вариант: <select> <option>вариант 1</option> <опции, выбранной>вариант 2</option> <option>вариант 3</option> <option>вариант 4</option> <option>вариант 5</option> <option>вариант 6</option> </select><br> </center> </form> | |||||||||||||
| HTML-Ссылка на Адрес электронной почты Mailto | <a> | <a href="mailto:you@yourdomain.com">Email Ссылка</a> | Ссылка На Адрес Электронной Почты | ||||||||||||
| Абзац HTML-документа, | <p> | Это пример отображения использование тега абзаца. <p> Это создаст разрыв линии и расстояние между строками. Атрибуты: <p align="left"> Пример 1:<br /> <br /> Это пример<br> отображение использования<br> из тег параграфа.</p> <p align="right"> Пример 2:<br> <br> Это пример<br> отображение использования<br> из тег параграфа.</p> <p align="center"> Пример 3:<br> <br> Это пример<br> отображение использования<br> из тег параграфа.</p> | Это пример отображения использование HTML тега абзаца. Это создаст разрыв линии и расстояние между строками. Пример 1: Пример 2: Пример 3: | ||||||||||||
| Небольшой HTML (Текст) | <small> | <small>Пример</small> | Пример (Tip) | ||||||||||||
| HTML удаленный Текст | <strike> | <strike>Пример</strike> | |||||||||||||
| HTML Сильный | <strong> | <strong>Пример</strong> | Пример | ||||||||||||
| HTML-Таблицы | <table> | Пример 1: <table border="4" cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Столбец 1</td> <td>Столбец 2</td> </tr> </table> Пример 2: (Internet Explorer) <table border="2" bordercolor="#336699" cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Столбец 1</td> <td>Столбец 2</td> </tr> </table> Пример 3: <table cellpadding="2" cellspacing="2" width="100%"> <tr> <td bgcolor="#cccccc">Столбец 1</td> <td bgcolor="#cccccc">В графе 2</td> </tr> <tr> <td>Row 2</td> <td>Row 2</td> </tr> </table> | Пример 1: (Tip)
| ||||||||||||
| HTML-Таблицы Данных | <td> | <table border="2" cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Столбец 1</td> <td>Столбец 2</td> </tr> </table> |
| ||||||||||||
| HTML Заголовок Таблицы | <th> | <div align="center"> <table> <tr> <th>Столбец 1</th> <th>Столбец 2</th> <th>Столбец 3</th> </tr> <tr> <td>Row 2</td> <td>Row 2</td> <td>Row 2</td> </tr> <tr> <td>Строка 3</td> <td>Строка 3</td> <td>Строка 3</td> </tr> <tr> <td>Строка 4</td> <td>Строка 4</td> <td>Строка 4</td> </tr> </table> </div> |
| ||||||||||||
| Заголовок HTML-Документа | <title> | <title>Название HTML-страница</title> | Название вашей веб-странице будет отображаться в строке заголовка. | ||||||||||||
| HTML-Строки Таблицы | <tr> | <table border="2" cellpadding="2" cellspacing="2" width="100%"> <tr> <td>Столбец 1</td> <td>Столбец 2</td> </tr> </table> |
| ||||||||||||
| HTML Телетайп | <tt> | <tt>Пример</tt> | Пример | ||||||||||||
| HTML Подчеркнуть | <u> | <u>Пример</u> | Пример | ||||||||||||
| HTML маркированный Список | <ul> | Пример 1:<br> <br> <ul> <li>элемент Списка 1</li> <li>элемент Списка 2</li> </ul> <br> Пример 2:<br> <ul type="disc"> <li>элемент Списка 1</li> <li>элемент Списка 2</li> <ul type="circle"> <li>элемент Списка 3</li> <li>пункт 4 Списка</li> </ul> </ul> | Пример 1:
|
