Текст в html

HTML Tags

<!—><!DOCTYPE><a><abbr><acronym><address><applet><area><article><aside><audio><b><base><basefont><bdi><bdo><big><blockquote><body><br><button><canvas><caption><center><cite><code><col><colgroup><data><datalist><dd><del><details><dfn><dialog><dir><div><dl><dt><em><embed><fieldset><figcaption><figure><font><footer><form><frame><frameset><h1> — <h6><head><header><hr><html><i><iframe><img><input><ins><kbd><label><legend><li><link><main><map><mark><meta><meter><nav><noframes><noscript><object><ol><optgroup><option><output><p><param><picture><pre><progress><q><rp><rt><ruby><s><samp><script><section><select><small><source><span><strike><strong><style><sub><summary><sup><svg><table><tbody><td><template><textarea><tfoot><th><thead><time><title><tr><track><tt><u><ul><var><video>

The xml:lang Attribute

The xml:lang attribute is the XHTML replacement for the lang attribute. The value of the xml:lang attribute should be an ISO-639 country code as mentioned in previous section.

Generic Attributes

Here’s a table of some other attributes that are readily usable with many of the HTML tags.

Attribute	Options	Function
align	right, left, center	Horizontally aligns tags
valign	top, middle, bottom	Vertically aligns tags within an HTML element.
bgcolor	numeric, hexidecimal, RGB values	Places a background color behind an element
background	URL	Places a background image behind an element
id	User Defined	Names an element for use with Cascading Style Sheets.
class	User Defined	Classifies an element for use with Cascading Style Sheets.
width	Numeric Value	Specifies the width of tables, images, or table cells.
height	Numeric Value	Specifies the height of tables, images, or table cells.
title	User Defined	«Pop-up» title of the elements.

We will see related examples as we will proceed to study other HTML tags. For a complete list of HTML Tags and related attributes please check reference to HTML Tags List.

Core Attributes

The four core attributes that can be used on the majority of HTML elements (although not all) are −

Id
Title
Class
Style

The Id Attribute

The id attribute of an HTML tag can be used to uniquely identify any element within an HTML page. There are two primary reasons that you might want to use an id attribute on an element −

If an element carries an id attribute as a unique identifier, it is possible to identify just that element and its content.
If you have two elements of the same name within a Web page (or style sheet), you can use the id attribute to distinguish between elements that have the same name.

We will discuss style sheet in separate tutorial. For now, let’s use the id attribute to distinguish between two paragraph elements as shown below.

Example

<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>

The title Attribute

The title attribute gives a suggested title for the element. They syntax for the title attribute is similar as explained for id attribute −

The behavior of this attribute will depend upon the element that carries it, although it is often displayed as a tooltip when cursor comes over the element or while the element is loading.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>The title Attribute Example</title>
   </head>
	
   <body>
      <h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
   </body>
	
</html>

This will produce the following result −

Now try to bring your cursor over «Titled Heading Tag Example» and you will see that whatever title you used in your code is coming out as a tooltip of the cursor.

The class Attribute

The class attribute is used to associate an element with a style sheet, and specifies the class of element. You will learn more about the use of the class attribute when you will learn Cascading Style Sheet (CSS). So for now you can avoid it.

The value of the attribute may also be a space-separated list of class names. For example −

class = "className1 className2 className3"

The style Attribute

The style attribute allows you to specify Cascading Style Sheet (CSS) rules within the element.

<!DOCTYPE html>
<html>

   <head>
      <title>The style Attribute</title>
   </head>
	
   <body>
      <p style = "font-family:arial; color:#FF0000;">Some text...</p>
   </body>
	
</html>

This will produce the following result −

At this point of time, we are not learning CSS, so just let’s proceed without bothering much about CSS. Here, you need to understand what are HTML attributes and how they can be used while formatting content.

Ссылки. Все о работе с ссылками.

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

<a></a> — тэг ссылки<a href=»ссылка»>Текст</a>в атрибуте href пишите ссылку на страницу или сайт. Между тэгом <a> вот тут </a> пишется текст. При клике на этот текст пользователь попадет на страничку или сайт написанный вами в атрибуте href.

Ссылки бывают разные. Пример ссылок.

<a href=»страничка»>Ваш текст</a>Пример: <a href=»index.htm»>Главная страничка</a>

Этот пример ссылки показывает, что ссылка стоит на страничку index.htm, которая находится в одной папке с этой страничкой.

<a href=»имя папки/страничка»>Ваш текст</a>Пример: <a href=»about/index.htm»>Обо мне</a>

Этот пример ссылки показывает, что ссылка стоит на страничку index.htm в папке about, которая находится в одной папке с этой страничкой.

<a href=»../страничка»>Назад</a>Пример: <a href=»../08.htm»>Назад</a>

Тут ссылка стоит на страничку, которая находится в папке, в которой находится попка с этой страничкой. Разбираемся…

<a href=»сайт»>Ваш текст</a>Пример: <a href=»http://www.maxtorg.ru»>Мой сайт</a>

Этот пример ссылки показывает, что ссылка стоит на сайт www.maxtorg.ru.

Ссылки можно открыть в новом окне. Для этого нужен атрибут target.

<a href=»ссылка» target=»_blank»>Текст ссылки</a>Пример: <a href=»friends.html» target=»_blank»>Мои друзья</a>

Чтобы открыть ссылку в новом окне, как я уже говорил, нужен атрибут target который равен «_blanck»(target=»_blank»). Он пишется в тэге <a target=»_blank»></a>

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

<a name=»имя закладки»>Тут можете написать текст, но не обязательно</a>Пример: <a name=»top»></a>

Закладку мы поставили, а теперь нужно сделать на нее ссылку чтобы на нее попасть. Делается это следующим образом:

<a href=»имя вашей закладки, на которую нужно перейти»>Текст</a>Пример: <a href=»#top»>Вверх</a>

Когда пишете ссылку на закладку нужно перед именем закладки поставить знак # (переключиться на английский и нажать SHIFT+3).

<a href=»mailto:ваш ящик»>Напишите мне</a>Пример: <a href=»[email protected]»>Напишите мне</a>

Замените [email protected] на ваш ящик и все. Mailto: должно быть всегда, если делаете ссылку на ящик.

Если вы делаете ссылку, то она будет синего цвета. Ссылка, по которой уже заходили будет красного цвета. Активная ссылка будет зеленого цвета. Чтобы изменить эти цвета вам нужны атрибуты тэга <body>, новые для вас: link=»цвет ссылки», vlink=»цвет» и alink=»цвет». А пишутся они так.

В этом примере цвет ссылки будет красный, цвет ссылки которую уже посещали будет желтый, цвет активной ссылки будет зеленый.

Итак, перейдем к примерам. Для этого вам нужно создать папку(пусть будет: мой сайт), в ней еще папку с именем about. В первой папке создайте 3 HTML документы с именем texts.html, anekdots.html, other.html. В папке about создайте HTML документ с именем index.html. Содержимое документов придумайте сами. Это вы уже умеете.

А теперь напишите следующий текст в блокноте.

Text font attribute supplement

If the set font does not exist, the system will use the default font to display the default use of Times New Roman.
What if the set font does not exist and we don’t want to display it with the default font?
- Can set alternatives for fonts
What if I want to set the font separately for Chinese and English?
- But all Chinese fonts contain English.
- But in English fonts, there is no Chinese in it.
- Chinese fonts can handle English, while English fonts cannot handle Chinese
The most common fonts in enterprise development are the following
- Chinese://
- English:/
- be careful:
  - It is not that the name is English. It must be an English font. Because Chinese fonts actually have their own English names, so is it true that Chinese fonts can mainly handle Chinese?
  - In enterprise development, using Chinese fonts generally writes his corresponding English name or uses the corresponding unicode font name, which can reduce some unnecessary bugs.

Internationalization Attributes

There are three internationalization attributes, which are available for most (although not all) XHTML elements.

dir
lang
xml:lang

The dir Attribute

The dir attribute allows you to indicate to the browser about the direction in which the text should flow. The dir attribute can take one of two values, as you can see in the table that follows −

Value	Meaning
ltr	Left to right (the default value)
rtl	Right to left (for languages such as Hebrew or Arabic that are read right to left)

Example

<!DOCTYPE html>
<html dir = "rtl">

   <head>
      <title>Display Directions</title>
   </head>
	
   <body>
      This is how IE 5 renders right-to-left directed text.
   </body>
	
</html>

This will produce the following result −

When dir attribute is used within the <html> tag, it determines how text will be presented within the entire document. When used within another tag, it controls the text’s direction for just the content of that tag.

The lang Attribute

The lang attribute allows you to indicate the main language used in a document, but this attribute was kept in HTML only for backwards compatibility with earlier versions of HTML. This attribute has been replaced by the xml:lang attribute in new XHTML documents.

The values of the lang attribute are ISO-639 standard two-character language codes. Check HTML Language Codes: ISO 639 for a complete list of language codes.

Example

<!DOCTYPE html>
<html lang = "en">

   <head>
      <title>English Language Page</title>
   </head>

   <body>
      This page is using English Language
   </body>

</html>

This will produce the following result −

Списки, нумерация.

Есть несколько видов списков.

Для списков используется тэг <ul></ul>, а для нумерации <ol></ol>.текст 1 текст 2 <ul><li type=»disk»>текст 1</li><li type=»disk»>текст 2</li></ul>

У списков так же есть атрибут type (тип) и его свойства disk, circle, square, для данного вида используется свойство disk (type=»disk»).

Просто меняйте значение type на disk, circle или square и вид изменится. Так же можно менять шрифт текста, размер, цвет. Это уже за вами. Вы это все умеете.

Теперь нумерация.

текст 1 текст 2 <ol><li type=»1″>текст 1</li><li type=»1″>текст 2</li></ol>

У тэга li в тэге ol тоже есть атрибут type, но с другими значениями — I, i, A, a, 1. В данном примере используется значение по умолчанию (type=»1″).

Просто заменяйте значение type на I, i, 1, A, a и вид изменится.

Создаем простую таблицу.

Иногда без таблиц даже не обойтись. Сейчас, почти все профессиональные сайты сделаны из таблиц. И мы будем учиться создавать их. Таблица задается тэгом <table></table>.Так же таблицы состоят из строк и столбцов. Строка таблицы задается тэгом <tr></tr>, столбец(ячейка) таблицы задается тэгом <td></td>.

Давайте создадим простую таблицу.Для начала создадим новую страницу. Напечатайте обязательные тэги. Сохраните в файл. Назовем его table1.html. Теперь между тэгами <body> и </body> напечатайте следующий текст.<table><tr><td bgcolor=»#808080″>текст</td><td bgcolor=»#FF9900″>текст</td><td bgcolor=»#808080″>текст</td></tr><tr><td bgcolor=»#FF9900″>текст</td><td bgcolor=»#808080″>текст</td><td bgcolor=»#FF9900″>текст</td></tr></table>У вас должно получиться что-то вроде этого:

<html><head><head><body><table><tr><td bgcolor=»#808080″>текст</td><td bgcolor=»#FF9900″>текст</td><td bgcolor=»#808080″>текст</td></tr><tr><td bgcolor=»#FF9900″>текст</td><td bgcolor=»#808080″>текст</td><td bgcolor=»#FF9900″>текст</td></tr></table> </body></html>

Поздравляю, Вы ознакомились с основными командами языка HTML.

Basic text attributes

Text style attributefont-style
- Set the font tilt style
- Set default style

Text thickness attributefont-weight
- Set the font bold
- Set the font size to bolder and bolder
- Set the font thin line style

Text size attribute
- Set the text size to 30 pixels
- Px is a unit, meaning pixel. You must add a unit when setting the text size attribute.

Text font attribute
- Set the text font to
- Note:
  - If the value is Chinese, you need to useorEnclose
  - The font to be set must be the font already installed on the user’s computer.
- hot key:
Text attribute abbreviation
- format:
- Note:
  - The style attribute can be omitted, and the weight attribute can also be omitted.
  - In this abbreviated format, the position of style and weight can be exchanged.
  - The size attribute cannot be omitted, and the family attribute cannot be omitted.
  - The size and family positions cannot be placed by the way, the size must be written in front of the family, and the size and family must be written at the end of all attributes.

Специальные символы.

Они нам нужны для того, чтобы писать символы типа < > & » и пробел. А вы спросите: А почему просто не поставить < или >? А потому-то и нельзя, потому что, как мы уже знаем, символ < и > используются при написании тэгов. Если вы напишете: Я сравнил 1 < 100 > 20, то у вас < 100 > будет как тэг. И что у вас получится? Так вот для чего они и нужны. Список этих символов ниже.

< — символ <> — символ > — ставит пробел» — » (кавычка)& — & (амперсант)

Пример: <font color=»#CC0000″><b><u><i>1<100>20</i></u></b></font> = 1<100>20

Запомните. Спецсимволы не пишутся в тэгах. Они как текст.

Вот такой маленький урок получился, но нужно знать(иногда). Линии — очень просто.

Сейчас буду учить вас вставлять линии. Они задаются тэгом <hr> и его не надо закрывать. У них есть несколько атрибутов. Они нижу.

<hr align=»left»>Ну эти атрибуты мы уже знаем, на линию они действуют так же, как и на текст. У линии они такие же, как у тэга <p> (left, right, center) и других.

<hr width=»100%»> или <hr width=»30″>Атрибут width устанавливает ширину линии. Можно задать в процентах или в пикселях.

<hr color=»#CC0000″>Этот атрибут устанавливает цвет линии.

<hr size=»цифра»>Этот атрибут устанавливает толщину линии.

<hr NoShade>Если написать этот атрибут, то у линии не будет тени. Она не будет объемная.

Можно все эти атрибуты использовать вместе.

Text color attribute

How to modify the text color by color attribute in CSS
Color attribute value
- English words represent colors, this expression color is limited
- In fact, it is the three primary colors, of which
  - format:
  - The first number is the brightness of the red display of the light source component used to set the three primary colors. The second number is the brightness of the green display of the light source component used to set the three primary colors. The third number is the brightness of the blue display of the light source component used to set the three primary colors. Each of these numbers has a value before 0-255, 0 means no light, 255 means hair light, the bigger the value, the brighter it is
- Rgba This a represents transparency, the value is 0-1, the smaller the value, the more transparent
- Use hexadecimal to represent color

HTML References

HTML by AlphabetHTML by CategoryHTML Browser SupportHTML AttributesHTML Global AttributesHTML EventsHTML ColorsHTML CanvasHTML Audio/VideoHTML Character SetsHTML DoctypesHTML URL EncodeHTML Language CodesHTML Country CodesHTTP MessagesHTTP MethodsPX to EM ConverterKeyboard Shortcuts

More Examples

Example

Add a background image to a document (with CSS):

<html><head><style>body {
background-image: url(w3s.png);}</style>
</head><body><h1>Hello world!</h1>
<p><a href=»https://www.w3schools.com»>Visit W3Schools.com!</a></p>
</body>

Example

Set the background color of a document (with CSS):

<html><head><style>body {
background-color: #E6E6FA;}</style>
</head><body><h1>Hello world!</h1>
<p><a href=»https://www.w3schools.com»>Visit W3Schools.com!</a></p>
</body>

Example

Set the color of text in a document (with CSS):

<html><head><style>body { color: green;}</style>
</head><body><h1>Hello world!</h1><p>This is some text.</p>
<p><a href=»https://www.w3schools.com»>Visit W3Schools.com!</a></p>
</body></html>

Example

Set the color of unvisited links in a document (with CSS):

<html><head><style>a:link { color:#0000FF;}
</style></head><body><p><a
href=»https://www.w3schools.com»>W3Schools.com</a></p><p><a
href=»https://www.w3schools.com/html/»>HTML Tutorial</a></p></body>
</html>

Example

Set the color of active links in a document (with CSS):

<html><head><style>a:active { color:#00FF00;}
</style></head><body><p><a
href=»https://www.w3schools.com»>W3Schools.com</a></p><p><a
href=»https://www.w3schools.com/html/»>HTML Tutorial</a></p></body>
</html>

Example

Set the color of visited links in a document (with CSS):

<html><head><style>a:visited { color:#FF0000;}
</style></head><body><p><a
href=»https://www.w3schools.com»>W3Schools.com</a></p><p><a
href=»https://www.w3schools.com/html/»>HTML Tutorial</a></p></body>
</html>

HTML Tags

The xml:lang Attribute

Generic Attributes

Core Attributes

The Id Attribute

The title Attribute

The class Attribute

The style Attribute

Ссылки. Все о работе с ссылками.

Text font attribute supplement

Internationalization Attributes

The dir Attribute

The lang Attribute

Списки, нумерация.

Basic text attributes

Специальные символы.

Text color attribute

HTML References

HTML Tags

More Examples

Example

Example

Example

Example

Example

Example

Похожие записи:

Похожие записи: