), но с ними я познакомлю вас чуть позже.
Теперь давайте поговорим о «закрывающихся» тегах. Само название «закрывающийся тег», говорит о том, что тег требует обязательного закрытия. Это сделано для того, чтобы чётко ограничить часть текста, на которую действует тег.
Для наглядного примера взглянем на тег , который используется для выделения текста, он устанавливает жирное начертание шрифта. Теги и
являются границами, которые определяют область выделения текста. Вот код, где в последней строке забыли закрыть тег :
Мой первый сайт
Привет всем! А это мой первый сайт.
Привет всем! А это мой первый сайт.
Как видите, ничего сложного нет, теперь вы можете создать несколько страниц перелинкованных между собой.
Теги для выделения текста
Существует несколько способов выделить текст на странице. Сделать это можно с помощью стилей, а можно с помощью тегов. Нас (пока) интересует второй вариант.
— устанавливает жирное начертание шрифта.
— устанавливает курсивное начертание шрифта.
— добавляет подчеркивание к тексту.
— предназначен для акцентирования текста. Браузеры отображают такой текст курсивным начертанием.
— отображает текст моноширинным текстом. Исключён из HTML5.
— отображает шрифт в виде верхнего индекса. Шрифт при этом отображается выше базовой линии текста и уменьшенного размера.
— отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.
— предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
— уменьшает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Тег уменьшает текст на одну условную единицу. Допускается применение вложенных тегов , при этом размер шрифта будет меньше на 1 с каждым вложенным уровнем, но не может быть меньше, чем 1.
— увеличивает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега увеличивает текст на одну условную единицу. Допускается применение вложенных тегов , при этом размер шрифта будет больше с каждым уровнем.
— используется для выделения в тексте цитат. Содержимое контейнера автоматически отображается в браузере в кавычках.
— предназначен для выделения длинных цитат внутри документа. Текст, обозначенный этим тегом, традиционно отображается как выровненный блок с отступами слева и справа (примерно по 40 пикселов), а также с отбивкой сверху и снизу.
— определяет блок предварительно форматированного текста. Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Тег
Позволяет обойти эту особенность и отображать текст как требуется разработчику.
— определяет текстовый абзац. Тег Является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента.
....
— HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность секции, расположенной после заголовка. Так, тег
представляет собой наиболее важный заголовок первого уровня, а тег служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги ,…, относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. Тег имеет атрибут align
, который определяет выравнивание заголовка, может принимать значения left
— выравнивание заголовка по левому краю, center
— выравнивание по центру, right
— выравнивание по правому краю, justify
— выравнивание по ширине (одновременно по правому и левому краю). Это значение работает только для заголовка, длина которого более, чем одна строка.
— представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей. Тег имеет 3 атрибута: color
— устанавливает цвет текста, face
— определяет гарнитуру шрифта, size
— задает размер шрифта в условных единицах.
— помечает текст как цитату или сноску на другой материал. Такое выделение удобно для изменения стиля текста через CSS, а также применяется для разделения кода HTML на структурные элементы. Браузеры обычно устанавливают текст внутри контейнера курсивом.
— указывает, что последовательность символов является аббревиатурой. С помощью атрибута title
дается расшифровка сокращения, что позволяет понимать аббревиатуру тем людям, которые с ней не знакомы. Кроме того, поисковые системы индексируют полнотекстовый вариант сокращения, что может использоваться для повышения рейтинга документа.
По умолчанию, текст заключенный в контейнере подчеркивается пунктирной линией.
Ниже приведу код, в котором я использовал все эти теги:
Мой первый сайт
HTML and CSS are two of the core technologies for building Web pages. HTML provides the structure of the page, CSS the (visual and aural) layout, for a variety of devices. Along with graphics and scripting, HTML and CSS are the basis of building Web pages and Web Applications. Learn more below about:
What is HTML?
HTML is the language for describing the structure of Web pages. HTML gives authors the means to:
Publish online documents with headings, text, tables, lists, photos, etc.
Retrieve online information via hypertext links, at the click of a button.
Design forms for conducting transactions with remote services, for use in searching for information, making reservations, ordering products, etc.
Include spread-sheets, video clips, sound clips, and other applications directly in their documents.
With HTML, authors describe the structure of pages using markup. The elements of the language label pieces of content such as “paragraph,” “list,” “table,” and so on.
What is XHTML?
XHTML is a variant of HTML that uses the syntax of XML, the Extensible Markup Language. XHTML has all the same elements (for paragraphs, etc.) as the HTML variant, but the syntax is slightly different. Because XHTML is an XML application, you can use other XML tools with it (such as XSLT, a language for transforming XML content).
What is CSS?
CSS is the language for describing the presentation of Web pages, including colors, layout, and fonts. It allows to adapt the presentation to different types of devices, such as large screens, small screens, or printers. CSS is independent of HTML and can be used with any XML-based markup язык language. The separation of HTML from CSS makes it easier to maintain sites, share style sheets across pages, and tailor pages to different environments. This is referred to as the separation of structure (or: content) from presentation.
What is WebFonts?
WebFonts is a technology that enables people to use fonts on demand over the Web without requiring installation in the operating system. W3C has experience in downloadable fonts through HTML, CSS2, and SVG. Until recently, downloadable fonts have not been common on the Web due to the lack of an interoperable font format. The WebFonts effort plans to address that through the creation of an industry-supported, open font format for the Web (called "WOFF").
Лекция подошла к концу, надеюсь приобретённые знания вам пригодятся! В следующей лекции я расскажу вам о том, что в себе хранит тег
, научимся выполнять всевозможные манипуляции с изображениями, и познакомимся с таблицами.
При написании данной статьи описание некоторых тегов было взято отсюда
HTML (H
ypert
ext M
arkup L
anguage) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. As the title suggests, this article will give you a basic understanding of HTML and its functions.
So what is HTML?
HTML is not a programming language; it is a markup language
that defines the structure of your content. HTML consists of a series of elements
, which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing for paragraph. Note that the end tag" s name is preceded by a slash character>", and that in empty elements the end tag is neither required nor allowed. If attributes are not mentioned, default values are used in each case.">tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. For example, take the following line of content:
My cat is very grumpy
If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags:
My cat is very grumpy
Anatomy of an HTML element
Let"s explore this paragraph element a bit further.
The main parts of our element are as follows:
- The opening tag:
This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets
. This states where the element begins or starts to take effect - in this case where the paragraph begins.
- The closing tag:
This is the same as the opening tag, except that it includes a forward slash
before the element name. This states where the element ends - in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.
- The content:
This is the content of the element, which in this case, is just text.
- The element:
The opening tag, the closing tag and the content together comprise the element.
Elements can also have attributes that look like the following:
Attributes contain extra information about the element that you don"t want to appear in the actual content. Here, class is the attribute name
and editor-note is the attribute value
. The class attribute allows you to give the element an identifier that can be used later to target the element with style information and other things.
An attribute should always have the following:
- A space between it and the element name (or the previous attribute, if the element already has one or more attributes).
- The attribute name followed by an equal sign.
- The attribute value wrapped by opening and closing quotation marks.
Note
: Simple attribute values that don"t contain ASCII whitespace (or any of the characters " " ` = < >) can remain unquoted, but it is recommended that you quote all attribute values, as it makes the code more consistent and understandable.
Nesting elements
You can put elements inside other elements too - this is called nesting
. If we wanted to state that our cat is very
grumpy, we could wrap the word "very" in a ) indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type."> element, which means that the word is to be strongly emphasized:
My cat is very grumpy.
You do however need to make sure that your elements are properly nested. In the example above, we opened the element represents a paragraph.">
element first, then the ) indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type."> element; therefore, we have to close the ) indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type."> element first, then the element represents a paragraph."> element. The following is incorrect:
My cat is very grumpy.
The elements have to open and close correctly so that they are clearly inside or outside one another. If they overlap as shown above, then your web browser will try to make the best guess at what you were trying to say, which can lead to unexpected results. So don"t do it!
Empty elements
Some elements have no content and are called empty elements
. Take the element embeds an image into the document."> ![]()
element that we already have in our HTML page:
This contains two attributes, but there is no closing tag and no inner content. This is because an image element doesn"t wrap content to affect it. Its purpose is to embed an image in the HTML page in the place it appears.
Anatomy of an HTML document
That wraps up the basics of individual HTML elements, but they aren"t handy on their own. Now we"ll look at how individual elements are combined to form an entire HTML page. Let"s revisit the code we put into our index.html example (which we first met in the Dealing with files article):
My test page
Here, we have the following:
- - the doctype. It is required preamble. In the mists of time, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However these days, they don"t do much, and are basically just needed to make sure your document behaves correctly. That"s all you need to know for now.
- - the element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element."> element. This element wraps all the content on the entire page and is sometimes known as the root element.
- - the element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets."> element. This element acts as a container for all the stuff you want to include on the HTML page that isn"t
the content you are showing to your page"s viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations and more.
- - This element sets the character set your document should use to UTF-8 which includes most characters from the vast majority of written languages. Essentially, it can now handle any textual content you might put on it. There is no reason not to set this and it can help avoid some problems later on.
- - the ) defines the document" s that is shown in a browser bar or page tab.> element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favourite it.</li>
<li><body></body> - the element. This contains <i>all
</i> the content that you want to show to web users when they visit your page, whether that"s text, images, videos, games, playable audio tracks or whatever else.</li>
</ul><h2>Images</h2>
<img src='https://i2.wp.com/images/firefox-icon.png' loading=lazy loading=lazy>
<p>As we said before, it embeds an image into our page in the position it appears. It does this via the src (source) attribute, which contains the path to our image file.</p>
<p>We have also included an alt (alternative) attribute. In this attribute, you specify descriptive text for users who cannot see the image, possibly because of the following reasons:</p>
<ol><li>They are visually impaired. Users with significant visual impairments often use tools called screen readers to read out the alt text to them.</li>
<li>Something has gone wrong causing the image not to display. For example, try deliberately changing the path inside your src attribute to make it incorrect. If you save and reload the page, you should see something like this in place of the image:</li>
</ol><p><img src='https://i2.wp.com/mdn.mozillademos.org/files/9349/alt-text-example.png' height="36" width="108" loading=lazy loading=lazy></p>
<p>The keywords for alt text are "descriptive text". The alt text you write should provide the reader with enough information to have a good idea of what the image conveys. In this example, our current text of "My test image" is no good at all. A much better alternative for our Firefox logo would be "The Firefox logo: a flaming fox surrounding the Earth."</p>
<p>Try coming up with some better alt text for your image now.</p>
<h2>Marking up text</h2>
<p>This section will cover some of the essential HTML elements you"ll use for marking up the text.</p>
<h3>Headings</h3>
<p>Heading elements allow you to specify that certain parts of your content are headings - or subheadings. In the same way that a book has the main title, chapter titles and subtitles, an HTML document can too. HTML contains 6 heading levels, <h1> – <h6> , although you"ll commonly only use 3 to 4 at most:</p><p>
<h1>My main title</h1>
<h2>My top level heading</h2>
<h3>My subheading</h3>
<h4>My sub-subheading</h4>
</p><p>Now try adding a suitable title to your HTML page just above your element embeds an image into the document."> <img> element.</p>
<p><b>Note
</b>: You"ll see that your heading level 1 has an implicit style. Don"t use heading elements to make text bigger or bold, because they are used for accessibility and other reasons such as SEO . Try to create a meaningful sequence of headings on your pages, without skipping levels.</p>
<h3>Paragraphs</h3>
<h3>Lists</h3>
<p>A lot of the web"s content is lists and HTML has special elements for these. Marking up lists always consist of at least 2 elements. The most common list types are ordered and unordered lists:</p>
<ol><li><b>Unordered lists
</b> are for lists where the order of the items doesn"t matter, such as a shopping list. These are wrapped in a element represents an unordered list of items, typically rendered as a bulleted list."> <ul> element.</li>
<li><b>Ordered lists
</b> are for lists where the order of the items does matter, such as a recipe. These are wrapped in an element represents an ordered list of items, typically rendered as a numbered list."> <ol> element.</li>
</ol><p><img src='https://i2.wp.com/mdn.mozillademos.org/files/9351/finished-test-page-small.png' width="100%" loading=lazy loading=lazy></p>
<p>If you get stuck, you can always compare your work with our finished example code on GitHub.</p>
<p>Here, we have only really scratched the surface of HTML. To find out more, go to our topic.</p>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy loading=lazy>");</script>
</div>
</div>
</div>
</div>
<aside class="col-lg-4 col-md-12 col-md-offset-4 col-lg-offset-0" id="right">
<div>
</div>
<br/>
<div>
</div>
<br/>
<div>
</div>
<br/>
<div>
</div>
<br/>
</aside>
</div>
</div>
</div>
<div class="popup" id="share">
<div class="perfect-scroll" style="text-align: center">
<div style="margin-bottom: 20px">
<strong>سيبدأ التنزيل الآن ...</strong>
<br>لا تنسى مشاركة المواد <br>على الشبكات الاجتماعية مع الخاص بك <br>زملاء العمل</div>
<div>
<div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus" data-counter=""></div>
</div>
</div>
<div class="close-pop pull-right">
<svg width="10px" height="10px" viewBox="0 0 10 10">
<path fillrule="evenodd"
d="M 6.41 5C 6.41 5 9.24 7.83 9.24 7.83 9.63 8.22 9.63 8.85 9.24 9.24 8.85 9.63 8.22 9.63 7.83 9.24 7.83 9.24 5 6.41 5 6.41 5 6.41 2.17 9.24 2.17 9.24 1.78 9.63 1.15 9.63 0.76 9.24 0.37 8.85 0.37 8.22 0.76 7.83 0.76 7.83 3.59 5 3.59 5 3.59 5 0.76 2.17 0.76 2.17 0.37 1.78 0.37 1.15 0.76 0.76 1.15 0.37 1.78 0.37 2.17 0.76 2.17 0.76 5 3.58 5 3.58 5 3.58 7.83 0.76 7.83 0.76 8.22 0.37 8.85 0.37 9.24 0.76 9.63 1.15 9.63 1.78 9.24 2.17 9.24 2.17 6.41 5 6.41 5Z"></path>
</svg>
</div>
</div>
<section id="views">
<div class="container">
</div>
</section>
<script type="text/javascript">
$(document).ready(
function () {
$('.kursiv').readmore({
speed: 75,
maxHeight: 84,
heightMargin: 16,
moreLink: '<a href="#"><span>Показать полностью</span>',
lessLink: '<a href="#"><span>Скрыть</span></a>',
} );
} );
</script>
<style>
div.kursiv {
margin-bottom: 0;
}
#razrabotka {
margin-top: 30px;
}
.readmore-js-toggle {
font-style: italic;
color: #999;
display: inline;
margin-right: 10px;
font-size: 14px;
cursor: pointer;
border-bottom: 1px dotted #e6e6e6;
}
</style></section>
<footer>
<div class="container">
<div class="row">
<div class="col-xs-16 col-sm-4 col-md-3">
<p>© 2021، mkr-novo2.ru، الإنترنت. تعليم. البرامج. البرامج الثابتة. التثبيت والتكوين. الملاحون</p>
<div class="social">
<a target="_blank" href="">
<svg width="32px" height="19px" viewBox="0 0 32 19">
<path fillRule="evenodd"
d="M 15.36 18.01C 15.36 18.01 17.24 18.01 17.24 18.01 17.24 18.01 17.81 17.94 18.1 17.64 18.36 17.37 18.35 16.85 18.35 16.85 18.35 16.85 18.32 14.41 19.49 14.05 20.64 13.7 22.12 16.4 23.69 17.45 24.87 18.23 25.77 18.06 25.77 18.06 25.77 18.06 29.97 18.01 29.97 18.01 29.97 18.01 32.16 17.87 31.12 16.21 31.03 16.07 30.51 14.97 28 12.72 25.37 10.35 25.72 10.74 28.89 6.65 30.82 4.16 31.59 2.65 31.35 2 31.12 1.38 29.7 1.54 29.7 1.54 29.7 1.54 24.98 1.57 24.98 1.57 24.98 1.57 24.63 1.52 24.37 1.67 24.12 1.82 23.95 2.16 23.95 2.16 23.95 2.16 23.21 4.09 22.21 5.72 20.11 9.18 19.27 9.36 18.92 9.15 18.12 8.65 18.32 7.14 18.32 6.07 18.32 2.72 18.85 1.32 17.3 0.96 16.79 0.84 16.41 0.76 15.1 0.75 13.41 0.73 11.99 0.76 11.18 1.14 10.64 1.39 10.23 1.96 10.48 1.99 10.79 2.03 11.5 2.18 11.88 2.67 12.36 3.31 12.34 4.74 12.34 4.74 12.34 4.74 12.62 8.68 11.69 9.17 11.06 9.5 10.18 8.82 8.31 5.68 7.35 4.08 6.62 2.3 6.62 2.3 6.62 2.3 6.48 1.97 6.23 1.8 5.93 1.58 5.51 1.51 5.51 1.51 5.51 1.51 1.02 1.54 1.02 1.54 1.02 1.54 0.35 1.56 0.1 1.84-0.12 2.09 0.08 2.62 0.08 2.62 0.08 2.62 3.6 10.57 7.57 14.57 11.22 18.25 15.36 18.01 15.36 18.01 15.36 18.01 15.36 18.01 15.36 18.01Z"/>
</svg>
</a>
<a target="_blank" href="">
<svg viewBox="0 0 25 25" width="25px" height="25px">
<path class="st0" d="M12.5,12.7c3.2,0,5.8-2.6,5.8-5.8c0-3.2-2.6-5.8-5.8-5.8C9.3,1,6.7,3.6,6.7,6.8C6.7,10,9.3,12.7,12.5,12.7z
M12.5,3.9c1.6,0,2.9,1.3,2.9,2.9c0,1.6-1.3,2.9-2.9,2.9c-1.6,0-2.9-1.3-2.9-2.9C9.6,5.2,10.9,3.9,12.5,3.9z M19.2,13.4
c-0.3-0.7-1.2-1.2-2.5-0.3c-1.6,1.3-4.3,1.3-4.3,1.3s-2.6,0-4.3-1.3c-1.2-1-2.1-0.4-2.5,0.3c-0.6,1.2,0.1,1.7,1.5,2.7
c1.3,0.8,3,1.1,4.1,1.2l-0.9,0.9c-1.3,1.3-2.6,2.6-3.4,3.4c-0.5,0.5-0.5,1.4,0,1.9l0.2,0.2c0.5,0.5,1.4,0.5,1.9,0l3.4-3.4
c1.3,1.3,2.6,2.6,3.4,3.4c0.5,0.5,1.4,0.5,1.9,0l0.2-0.2c0.5-0.5,0.5-1.4,0-1.9l-3.4-3.4l-0.9-0.9c1.1-0.1,2.8-0.4,4.1-1.2
C19.2,15.1,19.8,14.5,19.2,13.4z"/>
</svg>
</a>
<a target="_blank" href="https://facebook.com/">
<svg width="26px" height="25px" viewBox="0 0 26 25">
<path fillRule="evenodd"
d="M 24.33-0C 24.33-0 1.96-0 1.96-0 1.19-0 0.57 0.62 0.57 1.38 0.57 1.38 0.57 23.62 0.57 23.62 0.57 24.38 1.19 25 1.96 25 1.96 25 14 25 14 25 14 25 14 15.32 14 15.32 14 15.32 10.72 15.32 10.72 15.32 10.72 15.32 10.72 11.54 10.72 11.54 10.72 11.54 14 11.54 14 11.54 14 11.54 14 8.76 14 8.76 14 5.53 15.98 3.77 18.88 3.77 20.27 3.77 21.46 3.88 21.81 3.92 21.81 3.92 21.81 7.3 21.81 7.3 21.81 7.3 19.8 7.3 19.8 7.3 18.22 7.3 17.92 8.04 17.92 9.13 17.92 9.13 17.92 11.54 17.92 11.54 17.92 11.54 21.68 11.54 21.68 11.54 21.68 11.54 21.19 15.32 21.19 15.32 21.19 15.32 17.92 15.32 17.92 15.32 17.92 15.32 17.92 25 17.92 25 17.92 25 24.33 25 24.33 25 25.09 25 25.71 24.38 25.71 23.62 25.71 23.62 25.71 1.38 25.71 1.38 25.71 0.62 25.09-0 24.33-0Z"/>
</svg>
</a>
<a target="_blank" href="https://youtube.com/">
<svg width="26px" height="19px" viewBox="0 0 26 19">
<path fillRule="evenodd"
d="M 25.75 14.46C 25.75 14.46 25.5 16.18 24.75 16.93 23.79 17.92 22.72 17.93 22.23 17.99 18.71 18.24 13.43 18.25 13.43 18.25 13.43 18.25 6.89 18.19 4.88 18 4.32 17.89 3.06 17.92 2.11 16.93 1.35 16.18 1.11 14.46 1.11 14.46 1.11 14.46 0.86 12.45 0.86 10.44 0.86 10.44 0.86 8.55 0.86 8.55 0.86 6.54 1.11 4.52 1.11 4.52 1.11 4.52 1.35 2.81 2.11 2.05 3.06 1.06 4.14 1.06 4.63 1 8.15 0.75 13.42 0.75 13.42 0.75 13.42 0.75 13.43 0.75 13.43 0.75 13.43 0.75 18.71 0.75 22.23 1 22.72 1.06 23.79 1.06 24.75 2.05 25.5 2.81 25.75 4.52 25.75 4.52 25.75 4.52 26 6.54 26 8.55 26 8.55 26 10.44 26 10.44 26 12.45 25.75 14.46 25.75 14.46ZM 10.83 5.73C 10.83 5.73 10.83 12.72 10.83 12.72 10.83 12.72 17.62 9.24 17.62 9.24 17.62 9.24 10.83 5.73 10.83 5.73Z"/>
</svg>
</a>
</div>
</div>
<div class="col-lg-2 col-sm-4 col-xs-16 links">
<h4>mkr-novo2.ru</h4>
<a href="https://mkr-novo2.ru/ar/category/internet/">إنترنت</a>
<a href="https://mkr-novo2.ru/ar/category/multimedia/">الوسائط المتعددة</a>
<a href="https://mkr-novo2.ru/ar/category/navigation/">الملاحون</a>
<a href="https://mkr-novo2.ru/ar/category/education/">تعليم</a>
<a href="https://mkr-novo2.ru/ar/category/at/">على</a>
<a href="https://mkr-novo2.ru/ar/category/problems/">مشاكل</a>
</div>
<div class="col-lg-2 col-sm-3 col-xs-16 links">
<h4>حول المشروع</h4>
<a href="">ردود الفعل</a>
<a href="">عن الموقع</a>
</div>
<div class="col-lg-5 col-sm-1 col-xs-16 links"></div>
<div class="col-lg-4 col-sm-5 col-xs-16 links">
</div>
</div>
<div class="row v-center">
<div class="col-md-8 col-xs-16">
<a data-fancybox data-type="iframe" data-src="">جهات الاتصال</a>
</div>
<div class="col-md-8 col-xs-16">
<div class="share pull-right">
<script type="text/javascript" src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js" charset="utf-8"></script>
<script type="text/javascript" src="//yastatic.net/share2/share.js" charset="utf-8"></script>
<div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus" data-counter=""></div>
</div>
</div>
</div>
</div>
</footer>
<a href="#bot" id="to-top">
<svg width="50px" height="50px" viewBox="0 0 50 50">
<circle cx="25.00" cy="25.00" r="25.00" fill="rgb(0,0,0)" opacity="0.37"/>
<path fillRule="evenodd"
d="M 33.94 24.46C 33.94 24.46 25.89 16.3 25.89 16.3 25.32 15.73 24.41 15.73 23.84 16.3 23.84 16.3 15.79 24.46 15.79 24.46 14.88 25.38 15.52 26.97 16.81 26.97 16.81 26.97 20.43 26.97 20.43 26.97 21.23 26.97 21.88 27.62 21.88 28.43 21.88 28.43 21.88 32.51 21.88 32.51 21.88 33.71 22.83 34.68 24.01 34.68 24.01 34.68 25.72 34.68 25.72 34.68 26.9 34.68 27.86 33.71 27.86 32.51 27.86 32.51 27.86 28.43 27.86 28.43 27.86 27.62 28.5 26.97 29.31 26.97 29.31 26.97 32.92 26.97 32.92 26.97 34.21 26.97 34.85 25.38 33.94 24.46Z"
fill="rgb(241,241,241)"/>
</svg>
</a>
<div class="overlay"></div>
<div class="popup" id="password">
<div class="perfect-scroll">
<h2>استعادة كلمة السر <div class="close-pop pull-right">
<svg width="10px" height="10px" viewBox="0 0 10 10">
<path fillRule="evenodd"
d="M 6.41 5C 6.41 5 9.24 7.83 9.24 7.83 9.63 8.22 9.63 8.85 9.24 9.24 8.85 9.63 8.22 9.63 7.83 9.24 7.83 9.24 5 6.41 5 6.41 5 6.41 2.17 9.24 2.17 9.24 1.78 9.63 1.15 9.63 0.76 9.24 0.37 8.85 0.37 8.22 0.76 7.83 0.76 7.83 3.59 5 3.59 5 3.59 5 0.76 2.17 0.76 2.17 0.37 1.78 0.37 1.15 0.76 0.76 1.15 0.37 1.78 0.37 2.17 0.76 2.17 0.76 5 3.58 5 3.58 5 3.58 7.83 0.76 7.83 0.76 8.22 0.37 8.85 0.37 9.24 0.76 9.63 1.15 9.63 1.78 9.24 2.17 9.24 2.17 6.41 5 6.41 5Z"/>
</svg>
</div>
</h2>
<div class="recover-success">
<form action="/recovery/request" data-method="post" method="post" class="recover_form">
<p>أدخل بريدك الإلكتروني لاستعادة كلمة المرور الخاصة بك!</p>
<div class="input-wrp">
<input name="email" type="text" placeholder="أدخل بريدك الإلكتروني">
</div>
<input type="submit" data-disable-with="Отправить..." class="btn green" value="يرسل">
</form>
</div>
<div class="auth-form_error" style="padding-top: 10px"></div>
</div>
</div>
<script>
$('.user.one').click(function (e, ob) {
$('.user').removeClass('active-user');
$('.user.one').addClass('active-user');
$('#user_type').val('1');
e.stopPropagation();
} );
$('.user.two').click(function (e, ob) {
$('.user').removeClass('active-user');
$('.user.two').addClass('active-user');
$('#user_type').val('2');
e.stopPropagation();
} );
$('.user.three').click(function (e, ob) {
$('.user').removeClass('active-user');
$('.user.three').addClass('active-user');
$('#user_type').val('3');
e.stopPropagation();
} );
function clearErrors() {
$('.auth-form_error').each(function () {
$(this).html('');
} );
}
$('body').on('click', '.open-login-form', function (e) {
$('#register, .overlay').removeClass('visible-pop');
$('#login, .overlay').addClass('visible-pop');
e.preventDefault();
} );
$('body').on('click', '.open-pass-form', function (e) {
$('#register, .overlay').removeClass('visible-pop');
$('#password, .overlay').addClass('visible-pop');
e.preventDefault();
} );
$('.login_form')
.on('ajax:beforeSend', function (event, xhr, settings) {
clearErrors();
} )
.on('ajax:complete', function (event, xhr, status) {
} )
.on('ajax:success', function (event, data, status, xhr) {
if (data.status == 0) {
$('.auth-form_error').html(data.text + '<br>');
} else {
$('.open-register').html(data.text);
var delay = 1000;
window.location.href = url = window.location.href + "?login=ok";
location.replace(url);
setTimeout('window.location.reload(true);', delay);
}
} ).on('ajax:error', function (event, xhr, status, error) {
} );
$('.recover_form')
.on('ajax:beforeSend', function (event, xhr, settings) {
clearErrors();
} )
.on('ajax:complete', function (event, xhr, status) {
} )
.on('ajax:success', function (event, data, status, xhr) {
console.log(data);
if (data.status == 0) {
$('.auth-form_error').html(data.text + '<br>');
} else {
$('.recover-success').html('<div class="success" >' + data.text + '</div>');
}
} ).on('ajax:error', function (event, xhr, status, error) {
} );
$('.registration_form')
.on('ajax:beforeSend', function (event, xhr, settings) {
var emailError = $('#emailError');
var passwordError = $('#passwordError');
var passwordVerify = $('#passwordVerifyError');
var userTypeError = $('#userTypeError');
var emailExist = $('#emailExist');
emailError.html('');
passwordError.html('');
passwordVerify.html('');
userTypeError.html('');
emailExist.hide();
} )
.on('ajax:complete', function (event, xhr, status) {
} ).on('ajax:success', function (event, data, status, xhr) {
// insert the failure message inside the "#account_settings" element
//console.log(data);
if (data.status == 0) {
//$('.reg-info').html('<div class="error">' + data.text + '</div>');
if (data.text.email) {
var emailError = $('#emailError');
var emailExist = $('#emailExist');
console.log(data.text.email);
if (data.text.email == 'Найдена совпадающая со значением запись') {
console.log('alert');
emailExist.show();
} else {
emailError.html('<i class="icon-error"></i><div class="error_note_wrapper">' +
'<div class="error_note">' +
'<span class="error_note_text">' + data.text.email + '</span></div></div>');
}
}
if (data.text.password) {
var passwordError = $('#passwordError');
console.log(data.text.password);
passwordError.html('<i class="icon-error"></i><div class="error_note_wrapper">' +
'<div class="error_note">' +
'<span class="error_note_text">' + data.text.password + '</span></div></div>');
}
if (data.text.passwordVerify) {
var passwordVerify = $('#passwordVerifyError');
console.log(data.text.passwordVerify);
passwordVerify.html('<i class="icon-error"></i><div class="error_note_wrapper">' +
'<div class="error_note">' +
'<span class="error_note_text">' + data.text.passwordVerify + '</span></div></div>');
}
if (data.text.captcha) {
var captcha = $('#captchaError');
console.log(data.text.captcha);
captcha.html('<i class="icon-error"></i><div class="error_note_wrapper">' +
'<div class="error_note">' +
'<span class="error_note_text">' + data.text.captcha + '</span></div></div>');
}
if (data.text.userType) {
var user_type = $('#userTypeError');
console.log(data.text.userType);
user_type.html('<i class="icon-error"></i><div class="error_note_wrapper">' +
'<div class="error_note">' +
'<span class="error_note_text">' + data.text.userType + '</span></div></div>');
}
} else {
$('.reg-success').html(data.text);
var delay = 2000;
window.location.href = url = window.location.href + "?reg=ok";
location.replace(url);
setTimeout('window.location.reload(true);', delay);
}
} ).on('ajax:error', function (event, xhr, status, error) {
} );
</script>
<div class="popup" id="premium-pop">
</div>
<link rel="stylesheet" href="/videouroki/res/lightslider/lightslider.min.css">
<link rel="stylesheet" href="/videouroki/res/perfectScrollbar/perfect-scrollbar.css">
<link rel="stylesheet" href="/videouroki/assets/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="/assets/vendor/fancybox/jquery.fancybox.min.css">
<script src="/videouroki/res/perfectScrollbar/perfect-scrollbar.jquery.min.js"></script>
<script src="/js/rails.js"></script>
<script src="/videouroki/res/lightslider/lightslider.min.js"></script>
<script src="/videouroki/res/jquery.validate.min.js"></script>
<script src="/videouroki/res/autosize-master/autosize.min.js"></script>
<script src="/videouroki/js/tabs.js"></script>
<script src="/videouroki/js/select.js"></script>
<script src="/videouroki/js/global.js?2109"></script>
<script src="/videouroki/js/views.js"></script>
<script src="/videouroki/plugin/notify/notify.min.js"></script>
<script src="/videouroki/plugin/notify/notify-metro.js"></script>
<script src="/videouroki/js/lazyload.min.js"></script>
<script src="/assets/vendor/fancybox/jquery.fancybox.min.js"></script>
<script type="text/javascript">
$(document).ready(
function () {
// new LazyLoad();
} )
</script>
<!--[if gte IE 9]><script type="text/javascript" src="/videouroki/assets/ckeditor-mini/ckeditor.js"></script><![endif]-->
<script type="text/javascript" src="/videouroki/js/readmore.js"></script></body>
</html>
مدخل
أرز. 1. أبسط هيكل لصفحة الويب