HTML etiketleri html, head, body. İnternetin herhangi bir sayfasında bulunan etiketler

26.05.2019

Daha önce de söylediğim gibi, HTML etiketleri, tarayıcılara bir sayfanın belirli bir bölümünü nasıl görüntüleyeceğini söyleyen özel talimatlardır. Şimdi onlar hakkında daha ayrıntılı konuşacağız, ancak her şeyi bir kerede ezberlemeye çalışmayın - başarılı olmayacaksınız ve buna ihtiyacınız yok, çünkü kalan bölümlerde her adımda etiketlerle karşılaşacaksınız - yavaş yavaş her şey olacak. kendi kendine hatırlanmak. Sadece okuyun ve anlamaya çalışın.

Açma ve kapama etiketleri, kapsayıcı etiketleri

Etiketler olabilir açılış(başlangıç) ve kaplama(son). Açılış etiketleri " karakterlerinden oluşur.<» и «>»Etiket adının gösterildiği arasına, kapanışta ismin önüne bir bölü (/) işareti konur.

Çoğu HTML etiketi eşleştirilmiştir - gerekli açılış ve kapanış etiketlerine sahiptirler, örneğin: ve... Bazılarının yalnızca bir açılış etiketi vardır, örneğin
, ve denir boş... Diğerleri bir açılış etiketine sahip olabilir ve kapanış etiketini belirtebilir veya belirleyemezsiniz, o zaman tarayıcının kendisi etiketin eyleminin nerede biteceğini belirleyecektir.

Gerekli veya isteğe bağlı bir bitiş etiketine sahip etiketler genellikle konteyner etiketleri veya konteyner elemanları.

Tüm HTML etiketleri büyük/küçük harfe duyarlı değildir, yani belirtebilirsiniz ve ya da .

Şimdi tavsiye. Etiketlerinizi her zaman küçük harfle (küçük harf) yazmanızı ve isteğe bağlı bitiş etiketleri eklemenizi öneririm. Birincisi, bu bir profesyonellik ve görgü işaretidir ve ikincisi, tüm kapanış etiketleriyle HTML kodunda gezinmek ve düzenlemek çok daha kolaydır. Evet, bunu sana bir kereden fazla hatırlatacağım.

Etiketleri kullanma örneği
kalın yazı tipi italik yazı tipi
Tarayıcıda sonuç

Ve yine de, doğru olan ne olacak - "etiketler" veya "öğeler"?

Genel olarak, çoğu durumda - "öğeler" demek doğru olacaktır. Bir web sayfasının oluşturduğu HTML öğelerindendir ve tarayıcı penceresinde resimleri, tabloları, bağlantıları vb. görüntüleyen öğelerdir. Ve etiketler, tarayıcıya nerede ve hangi öğenin olduğunu, başladığını ve bittiğini söylemek içindir. Yukarıdaki örneğe bir kez daha bakalım. B ve I öğelerini listeler. Her biri düz metin içerir ve bir başlangıç ve bitiş etiketine sahiptir.

Öyle oldu ki, bugün "etiket" kelimesi Rus dilinde (ve sadece Rusça'da değil) "element" kelimesinin eşanlamlısı olarak sağlam bir şekilde yerleşmiştir. Bence her iki kelimeyi de kullanmak hikayenin anlamını kaybetmediği için. Bu nedenle, bu derste, bu kelimelerin her ikisini de kullanacağım, böylece onlara alışacaksınız ve her bir özel durumda neyin tehlikede olduğunu bilinçaltında belirlemeyi öğreneceksiniz. Ve fazla uğraşmayın, bir etiketin bir elementten ne kadar farklı olduğunu bilirsiniz - bu iyi.

Etiketler bir satırda veya birkaç satırda belirtilebilir.

Evet, HTML etiketleri bir satırda veya birkaç satırda belirtilebilir, tarayıcılar için bu önemli değil, satır sonlarını yok sayarlar. Ayrıca etiketler arasına istediğiniz kadar boşluk koyabilirsiniz - tarayıcılar ardışık tüm boşlukları tek olarak algılar. Örneğin, bunun gibi:

kalın yazı tipi italik yazı tipi
Tarayıcıda sonuç

Etiketlerin doğru şekilde yerleştirilmesi

Aynı sayfa öğesi üzerinde birlikte çalışmaları için birçok etiket iç içe yerleştirilebilir. Ancak doğru yerleştirmeyi gözlemlemek önemlidir - daha önce görünen etiket daha sonra kapatılmalıdır. Bu arada, yuvalama hatası yeni başlayanlar arasında en yaygın olanlardan biridir.

<тег1><тег2><тег3> ... - sağ

<тег1><тег2><тег3> ... - doğru değil

İç içe etiketlerin kullanımına bir örnek
Kalın italik yazı tipi
Tarayıcıda sonuç

Ebeveyn ve çocuk etiketleri, torunları ve ataları

HTML etiketlerinin hiyerarşik yapısını belirtmek için, bunlara belirli kelimelerle atıfta bulunmak gelenekseldir. Aslında, her şey çok basit. O halde şöyle bir örnek verelim:
<тег1> <тег2>... <тег3><тег4>...
üst etiketler- bir etiket, içinde bir düzey yuvalanmışsa, diğer etiketler için bir üst öğedir. Örneğimizde<ТЕГ1>ebeveyni<ТЕГ2>ve<ТЕГ3>ama etiket için değil<ТЕГ4>... Ve burada<ТЕГ3>ebeveyn<ТЕГ4> .

Alt etiketler- ebeveyne geri dön.<ТЕГ2>ve<ТЕГ3>için yan kuruluşlar<ТЕГ1>, a<ТЕГ4>etiket için<ТЕГ3> .

atalar- etiket, içinde herhangi bir yuvalama düzeyinde bulunan tüm etiketlerin atasıdır.<ТЕГ1>tüm etiketlerin atası ve<ТЕГ3>Ata<ТЕГ4> .

Torunları- atalara dönüş. Tüm etiketler bir etiketin torunlarıdır<ТЕГ1>, ancak<ТЕГ4>ayrıca etiketin soyundan<ТЕГ3> .

Pekala, kafan karışmadı mı? Hatırlamayı kolaylaştırmak için soy ağacınızla bir benzetme yapın, her şey hemen yerine oturacaktır.

"Bir etiket diğerini içeriyor" ne anlama geliyor?

Bildiğiniz gibi, etiketler iç içe yerleştirilebilir ve buna göre bazıları başkalarını içerebilir. Ancak yeni başlayanların genellikle yeterince dikkat etmediği küçük ama çok önemli bir nokta var. Şimdi bildiğimiz bir örnek verelim:
<тег1> <тег2>... <тег3><тег4>...
Bir etiketin diğerini içerdiğini, yalnızca ilkinin bir ebeveyn etiketi ve ikincisinin bir alt olması ve başka bir şey olmaması gerektiğini söylüyorlar. yani, bizim örneğimizde<ТЕГ1>içerir<ТЕГ2>ve<ТЕГ3>ama içermiyor<ТЕГ4>... Ve burada<ТЕГ3>sadece içerir<ТЕГ4>... Biraz sıradışı, değil mi? Ama bunun kendi mantığı var, kabul etmelisiniz.

Her HTML öğesi yalnızca belirli bir etiket kümesi içerebilir ve bazıları metin dışında hiçbir şey içerebilir. Her şey etiketin ait olduğu türe bağlıdır, bu nedenle etiketleri yerleştirmeden önce birinin diğerini içerip içermediğini kontrol edin.

Etiket türleri

HTML'de etiketler birkaç türe veya modele ayrılır:

Satır içi (satır içi, satır düzeyi)- sayfada bu etiketleri görüntüleyen her şey tarayıcı tarafından her zaman aynı terimde görüntülenir. Ve yalnızca mevcut genişlik (örneğin, tarayıcı penceresinin genişliği) yeterli değilse, satır bir sonrakine kaydırılır, vb.

Satır içi etiketlerin kullanımına bir örnek
kalın yazı tipi italik yazı tipi
Tarayıcıda sonuç

Blok (blok, blok seviyesi)- sayfada bu etiketlerin her birini görüntüleyen her şey tarayıcı tarafından yeni bir satırda görüntülenir.Kendilerinden sonra bu tür öğeler de satır sonları oluşturur.

Blok etiketlerini kullanma örneği

Paragraf 1

2. paragraf

Tarayıcıda sonuç

Paragraf 1

2. paragraf

Başka türlerde etiketler de vardır, ancak bunlardan daha sonraki derslerde bahsedeceğiz ve bu iki tür HTML'de en yaygın olanlardır.

Umarım buraya kadar her şey açıktır? Sonra devam edelim.

Programcı, HTML etiketleri yazarken bir takım sorunlarla karşılaşır. Büyük bir sitede çalışırken, program kodu büyür ve kontrolü sürdürmek sorunlu hale gelir, programcı etiketi kapatmayabilir ve sitenin düzeni "ayrılır" - blok bir başkasıyla örtüşür ve görünümün görünümü sitesi bozulur.

Bloklu düzen, bir programcının cehennemidir

Büyük bir sitede, özellikle geliştirme üzerinde çalışan birkaç programcı varsa, izleme etiketleri sorunludur. HTML'nin kurucuları programcıları uyarır ve onları standartlara uymaya teşvik eder. Koddaki küçük hatalar normaldir ve düzeltilmesi kolaydır. Hatalar için HTML kodunu kontrol etmenin yollarını düşünün ve kapatılmamış etiketleri ve diğer öğeleri tanımlama.
Kapatılmamış etiketleri belirleme

Kapatılmamış divas için kod nasıl kontrol edilir (
), tablo öğeleri ( / / , a .
Etiketler nedir?
Çoğu HTML etiketi eşleştirilir: bir açılış etiketi vardır (örneğin, ) ve açılış etiketinden bir eğik çizgi ile ayrılan bir kapanış etiketi ( / ) ilk açılı ayraçtan sonra (örneğin, ). Bir çift etiketin içindeki her şeye onların adı verilir. içerik.
<Открывающий_тег>İçerik Bu etiketlerin içine yerleştirilen metin kalın olur
olarak adlandırılan eşleştirilmemiş (tek) etiketler de vardır. etiketler... Eşleştirilmiş etiketlerin aksine, içerikle çalışmadıkları, ancak kendi başlarına bazı işlevleri yerine getirdikleri için kapatılmaları gerekmez. Tek bir etiketin bir örneği -
... Metni bir sonraki satıra kaydırılacak şekilde ayarlar.
Rus dili ile paralellikler çizersek, eşleştirilmiş etiketlerin, içine alınan metnin özelliklerini etkileyen tırnaklar veya parantezler olduğunu (tırnakları zamanında kapatmamaya çalışın) ve tek etiketlerin (etiketler) noktalama işaretleri olduğunu söyleyebiliriz. (ünlem, soru veya nokta).
Herhangi bir etiket şunlardan oluşur:
açılı ayraç ( < ).

Özel kelime (etiket adı). Örneğin, saat, iframe,B.

açılı ayraç kapatma ( > ).

Temel HTML etiketleri
Etiketler bir biçimlendirme dilinin kalbi olduğundan, bunlardan birkaçının olması şaşırtıcı değildir. Ana, en önemli etiketleri ele alalım.
- içine yorumun yerleştirildiği tek bir etiket. Bir yorum tarayıcı tarafından işlenmeyen metindir. Etiketin içine herhangi bir şey yazabilirsiniz, diğer etiketler bile - çalışmayacaklar, ekranda görüntülenmeyecekler. Geliştiriciler, ya diğer web yöneticilerinin anlamasını kolaylaştırmak için ya da uzun bir süre sonra kendilerinin hızlıca anlayabilmeleri için kod hakkında yorum yapar.

, , , , </b>- herhangi bir uygun HTML belgesinde bulunması gereken etiketler (daha fazla ayrıntı için bkz. "Not Defteri'nde bir web sitesi nasıl oluşturulur").</li> <li><b><meta> </b>- etiketi, tarayıcılar ve arama motorları için yardımcı bilgiler içerir. İçine anahtar kelimeler, sayfa açıklaması, belge kodlaması, yazarın adı vb. yazabilirsiniz.</li> <li><b><script> </b> содержит ссылку на файл сценария или сам код.</li> <li><b><style> </b> - тег, задающий стиль документа и/или его элементов с помощью CSS. HTML-документ может содержать множество тегов <b><style> </b>, определяющих разные стили разных частей страницы.</li> <li><b><header> </b> - полная противоположность <b><footer> </b>, его дополняющая. Тег задаёт «шапку» (заголовок) раздела или всей страницы.</li> <li><b><footer> </b> хранит в себе «ноги» сайта или раздела. Внутри него можно разместить вспомогательную информацию, копирайт, контактные данные и т. д.</li> <li><b><main> </b> содержит основной контент страницы. Ни шапку, ни блок меню, ни «ноги» сайта, а то, ради чего страница создавалась. Например, на странице, которую вы сейчас читаете, внутри <b><main> </b> должна располагаться как раз эта статья.</li> <li><b><a> </b> предназначен для создания ссылок. Ссылки - корень гипертекста, поэтому им посвящена .</li> <li><b><img> </b> нужен для добавления на веб-страницу картинок (к вашим услугам посвящённая этому действу ).</li> <li><b><blockquote> </b>, <b><br> </b>, <b><hi1>-<hi6> </b>, <b><hr> </b>, <b><i> </b>, <b><p> </b>, <b><s> </b>, <b><strong> </b>, <b><ins> </b> и другие теги форматирования текста составляют большую группу HTML-тегов, о них рассказывает статья «Форматирование текста в HTML» .</li> <li><b><div> </b> - блочный элемент. Текст внутри <b><div></div> </b> форматируется с помощью CSS (каскадных таблиц стилей, которым посвящена вторая часть самоучителя).</li> <li><b><span> </b>. У вас есть абзац <b><p> </b> или блок <b><div> </b>. Текст в нём оформлен в едином стиле, но вы бы хотели, не нарушая структуры, сделать так, чтобы несколько слов имели другой размер шрифта или цвет. Именно для таких ситуаций и предназначен тег <span>.</li> <li><b><ol> </b>, <b><ul> </b>, <b><li> </b> - теги списков. Маркированные, нумерованные - работа этих тегов. Есть ещё списки определений, за которые отвечают теги <b><dd> </b>, <b><dt> </b> и <b><dl> </b>, но подробно обо всей это шестёрке вы узнаете из статьи «Создание списков» .</li> <li><b><table> </b>, <b><tbody> </b>, <b><thead> </b>, <b><td> </b>, <b><th> </b> и <b><tr> </b> используются при создании таблиц и подробно рассматриваются в отдельной статье .</li> <li><b><form> </b> - тег, добавляющий странице интерактивности, то есть позволяющий пользователю взаимодействовать с веб-сайтом. Конечно, форме необходим обработчик, но зато с помощью тегов внутри <b><form></form> </b> вы можете создать интерфейс. Флажки, кнопки, переключатели, поля ввода и другие объекты, которые требуют от вас активных действий - всё это элементы формы, код которых размещается внутри контейнера <b><form> </b>.</li> <li><b><button> </b> - тег, создающий интерактивную кнопку. Чтобы при нажатии на неё что-нибудь произошло, кнопка должна находиться в форме (располагаться между тегами <b><form></form> </b>).</li> <li><b><input> </b> создаёт элементы формы: переключатели, флажки, кнопки, всевозможные поля ввода. Вставляется в контейнер <b><form> </b>. Но зачем нам тогда отдельно <b><button> </b>, если есть универсальный <b><input> </b>? <b><button> </b> позволяет создать кнопку с расширенными параметрами. Например, на кнопке <button> можно разместить картинку. На элементе, созданном через <b><input> </b>, такого сделать нельзя.</li> <li><b><menu> </b> и <b><command> </b> - теги создания меню в HTML 5. <b><menu> </b> - это контейнер, внутри которого помещаются элементы <b><command> </b>, добавление которых и приводит к созданию пунктов меню. Довольно интересная парочка. Например, с её помощью вы можете создать собственное контекстное меню для страницы или отдельного её элемента.</li> <li><b><textarea> </b> - ещё один тег формы, создающий в ней большое поле, в которое можно вводить не одну строку текста, а целые абзацы.</li> </ul> XML предназначен для широкого использования, символы не ограничены 7-битным набором символов ASCII . К числу символов, допустимых в языке XML , относятся три управляющих символа СО стандарта ASCII , все обычные символы этого стандарта и почти все остальные символы Unicode <h3>Имена.</h3><p>В языке XML все имена должны начинаться с буквы, символа нижнего подчеркивания (_) или двоеточия (:) и продолжаться только допустимыми для имен символами, а именно они могут содержать только буквы, входящие в секцию букв кодировки Unicode, арабские цифры, дефисы, знаки подчеркивания, точки и двоеточия. Однако имена не могут начинаться со строки xml в любом регистре. Имена, начинающиеся с этих символов, зарезервированы для использования консорциумом W3C . Нужно помнить что так как буквы не ограничены исключительно символами ASCII , то в именах можно использовать слова из родного языка.</p> <h3>Структура XML- документа.</h3><p>Любой XML -документ состоит из следующих частей:</p><ul><li>Необязательный пролог.</li> <li>Тело документа.</li> <li>Необязательный эпилог, следующего за деревом элементов.</li> </ul><p>Рассмотрим каждую из частей более подробно.</p> <h3>Пролог XML- документа.</h3><p>Документ XML начинается с пролога. В прологе содержатся некоторые указания, предназначенные для анализатора XML и приложений.</p><p>Пролог состоит из нескольких частей:</p><ol><li>необязательное объявление XML (XML Declaration) которое заключено между символами <?...?>. Объявление содержит:<ul><li>пометку xml и номер версии (version) спецификации XML;</li> <li>указание на кодировку символов (encoding), в которой написан документ (по умолчанию encoding="UTF-8" );</li> <li>параметр standalone который может принимать значения "yes" или "no" (по умолчанию standalone="yes" ). Значение "yes" показывает, что в документе содержатся все требуемые декларации элементов, a "no" - что нужны внешние определения DTD .</li> </ul><p>Все это вместе может выглядеть следующим образом:</p> <p><?xml version ="1.0" encoding="windows-1251" standalone="yes"?>.</p> <p>Важно отметить, что в объявлении XML только атрибут version является обязательным, все остальные атрибуты могут быть опущены и, следовательно, принимать значения по умолчанию. Так же нужно помнить, что все эти атрибуты следует указывать только в приведенном выше порядке.</p> </li> <li>комментарии.</li> <li>команды обработки.</li> <li>символы пустых пространств.</li> <li>необязательное <span>объявление типа документа </span>, DTD (Document Type Declaration ) которое заключено между символами <!DOCTYPE...> и может занимать несколько строк. В этой части объявляются теги, использованные в документе, или приводится ссылка на файл, в котором записаны такие объявления.</li> </ol><p>После <span>объявление типа документа </span> так же могут следовать комментарии, команды обработки и символы пустых пространств.</p><p>Поскольку все эти части необязательны, пролог может быть опущен.</p> <h3>Тело XML-документа.</h3><p>Тело документа состоит из одного или больше элементов. В правильно оформленном XML документе элементы формируют простое иерархическое дерево , в котором обязательно присутствует <span>корневой элемент </span> ( root element ) в который вложены все остальные элементы документа. Язык XML налагает на элементы чрезвычайно важное ограничение - они должны быть правильно вложены. Это позволяет достаточно легко вложить один XML - документ в другой не нарушая структуру документа, при этом <span>корневой элемент </span> вложенного документа станет просто одним из элементов документа, в который он вложен. В связи с этим мы сталкиваемся с еще одним ограничением, а именно с тем, что имена элементов должны быть уникальны в пределах документа, поскольку во включенном документе такие же имена, что и во включающем могут иметь совершенно иной смысл. Для решения проблемы совпадающих имен введено понятие пространства имен.</p><p>Имя корневого элемента считается именем всего документа и указывается во второй части пролога после слова Doctype . Если определение DTD находится внутри XML - документа, то оно помещается в квадратных скобках после имени корневого элемента:</p><p><!DOCTYPE имя_корневого_элемента [описание DTD ]></p><p>Но обычно определение DTD составляется сразу для нескольких XML -документов. В таком случае его удобно записать отдельно от документа и тогда вместо квадратных скобок записывается одно из слов System или Public после которого идет адрес в форме URI ( Uniform Resource Identifier ) файла с определением DTD . Для всех практических целей URI считается эквивалентом адреса URL , хотя в принципе это может быть любое уникальное имя. Определение DTD , например, может выглядеть следующим образом:</p><p><!DOCTYPE root_element_name SYSTEM "DTD.dtd"></p> <h3>Пространства имен XML</h3><p>Поскольку в разных XML -документах могут встретится одни и те же имена тегов и их атрибутов, имеющие совершенно разный смысл, надо иметь возможность их как-то различать. Для этого имена тегов и атрибутов снабжают кратким префиксом, который отделяется от имени двоеточием. Префикс имени связывается с идентификатором, определяющим <span>пространство имен </span> (namespace ). Все имена тегов и атрибутов, префиксы которых связаны с одним и тем же идентификатором, образуют одно <span>пространство имен </span>, в котором имена должны быть уникальны. Префикс и идентификатор пространства имен определяются атрибутом xmlns следующим образом:</p><p><ns:root_element_name xmlns:ns = "http://URI_namespace"></p><p>В дальнейшем имена тегов и атрибутов, которые мы хотим отнести к пространству имен "http://URI_namespace" , снабжаются префиксом ns, например:</p><p><ns:city ns:type="город">Новосибирск</ns:city>.</p><p>Атрибут xmlns может появиться в любом элементе XML , а не только в корневом. Определенный им префикс можно применять в том элементе, в котором записан атрибут xmlns , и во всех вложенных в него элементах. Более того, в одном элементе можно определить несколько пространств имен. Во вложенных элементах <span>пространство имен </span> можно переопределить, связав префикс с другим идентификатором. Появление имени тега без префикса в документе, использующем <span>пространство имен </span>, означает, что имя принадлежит пространству имен по умолчанию. Префиксы, начинающиеся с символов xml с любым регистром букв, зарезервированы за самим языком XML .</p><p>Имя вместе с префиксом называется расширенным или уточненным именем. Часть имени, записанная после двоеточия, называется локальной частью имени.</p> <p>Здравствуйте, уважаемые читатели блога сайт! В прошлой статье мы разобрались, а также что такое тип документа и как браузеры определяют используемый язык с помощью . Тег то рассмотрели, а вот само понятие (термин) нет. В этой статье я расскажу, что такое тег, зачем он нужен и какие теги бывают. Как я и говорил в прошлой статье данной рубрики, мы создадим файл-страничку, над которой будем экспериментировать, опираясь на полученные знания. Но это в конце статьи, а пока разберемся с HTML-тегом. </p> <h3>Что такое HTML-тег, виды HTML-тегов, примеры написания</h3><b>HTML-тег </b>— в переводе с английского <b>tag — помечать </b> -символы, заключенные в угловые скобки и являющиеся элементами языка гипертекстовой разметки (HTML). Символы могут быть толок на английском языке (весь интернет на нем построен). Тег имеет вид <strong></strong> <p>Это тег выделения текста жирным шрифтом. Теги имеют три вида:</p> <ul><li><b>Открывающий тег </b> - тег, стоящий в начале. В рассмотренном выше примере тег <strong> является открывающим и стоит перед тем текстом, который нужно выделить.</li> <li><b>Закрывающий тег </b> - тег, стоящий в конце. Отличительной чертой служит слеш «/» перед символами в угловых скобках. Опять же обратимся к рассмотренному выше примеру. Тег </strong> является закрывающим и стоит после текста, который следует выделить жирным</li> <li><b>Одиночные теги </b> — теги, которые не имеют закрывающего тега. Примером может служить <br /> Вот пример открывающего и закрывающего тега:</li> </ul> <strong></strong> <p>Вся конструкция, включая текст, будет выглядеть следующим образом:</p><p> <strong>Этот текст будет выделен жирным</strong> </p><p>А вот так будет выглядеть этот текст, когда его обработает браузер и предоставит нам:<b>Этот текст будет выделен жирным. </b> Существует еще такое понятие, как<b> контейнерные теги </b>, но это просто обобщенное название открывающего и закрывающего тегов. Как я писал выше, помимо контейнерных есть еще и одиночные теги. Отличие заключается в том, что такие теги не нужно закрывать. Ярким и наиболее частым примером служит тег новой строки.</p><p>В основном, одиночные теги используются для вставки какого-либо элемента, например изображения или таблицы.</p> <h3>Что такое атрибуты,правила написания и зачем они нужны</h3> Помимо тегов существуют еще и так называемые <b>атрибуты </b>. Точнее не помимо, а в тегах. С помощью атрибутов можно задать дополнительные параметры для какого-либо тега. <b>Атрибуты </b> для каждого тега свои, а в данной теме мы будем экспериментировать над тегом <font>, который без атрибутов, собственно, ничего толкового не делает. <p><b>Font </b> — контейнерный тег, применяемый для форматирования текста. С помощью данного тега вы сможете и выделить текст жирным, и изменить размер, и расстояние между строк — в общем все, что можно делать с текстом. Рассмотрим пример с размером текста. Для начала заключим текст в тег Font.</p><p> <font> Текст </font> </p><p>Теперь немного про правила написания атрибутов. Атрибуты<b> всегда </b> пишутся в открывающем теге и после символов самого тега. Можно написать в одном теге несколько атрибутов в любом порядке. Атрибуты вы можете найти на сайте валидатора W3C (про который я напишу чуть ниже). Итак, вот пример тега font с атрибутом size:</p><p> <font size="5"> Текст</font> </p><p>Данный атрибут в теге font изменяет размер заключенного в теги Текста.<br> Если вы откроете исходный код страницы, то увидите, что место, где находится большое слово «Текста» имеет вид</p><p> <font size="5"> Текста </font> </p><p>Вы уже увидели как пишутся атрибуты. Ровно также они пишутся и в других тегах: сначала пишем сам атрибут (в данном случае size), затем ставим «=» и заключаем параметр атрибута в двойные кавычки. Параметры атрибутов вы сможете найти все на том же сайте консорциума всемирной паутины.</p> <h3>Что такое валидатор (validator) W3C, правила написания и список тегов</h3> Как я и писал, существует великое множество тегов. Но где их всех найти? Вот для этой цели существует <b>валидатор W3C </b> W3C -<b> World Wide Web Consorcium, </b>а по-русски — консорциум всемирной паутины. Не совсем понятно, да? Это такое место, где разрабатывают веб-стандарты — (языки гипертекстовой разметки — их детище). Во главе всего консорциума стоит, известный из прошлой статьи, Тим Бернерс-Ли — создатель HTML. Сайт этой организации — w3.org . Предупреждаю, сайт полностью на английском, так что запаситесь словарем или переводчиком в браузере. Кстати, Google у данного сайта равен 9, а — 37000 (это все очень много, если кто не в курсе). <p>Возвращаемся к теме статьи. Нас интересуют стандарты языка HNTML 4.01. Переходим по ссылке HTML 4.01 Specification , после чего вверху видим вкладку elements , кликаем на нее. Вот и открывается страница со всеми тегами. Данные теги разработаны и приняты за стандарт консорциумом. Все, опять же, на английском. Сразу после слов «Index of Elements» мы видим легенду (значение букв в столбцах): <br><img src='https://i2.wp.com/monetavinternete.ru/wp-content/uploads/2012/09/Legenda-validatora-W3C.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>А сразу после легенды идет таблица самих тегов:</p> <p><img src='https://i2.wp.com/monetavinternete.ru/wp-content/uploads/2012/09/Tablitsa-tegov-na-sayte-W3C.png' align="center" width="100%" loading=lazy loading=lazy></p> <ul><li>В первом столбце — <b>Name </b> — само название тега — то что должно стоять в угловых скобках (< и >).</li> <li>Второй столбец — <b>Start Tag </b> — наличие открывающего тега. В данном столбце вы можете увидеть букву «O», что значит «Optional», а в переводе с английского - Опционально. Данная буква присутствует только напротив тегов <html>, <head>, <body> и <tbody> и означает, что можно ставить открывающий тег, а можно не ставить — браузер сам все сделает.</li> <li>Третий столбец — <b>End Tag </b> — наличие закрывающего тега. Напротив данного тега можно увидеть как букву «O», так и букву «F». Значение первой не изменилось. Вторая же буква — «F» — дословно с английского «запрещено» — означает, что закрывающий тег ставить запрещено, его просто не существует. Например, не существует тега </img>, ибо нечего в нем закрывать.</li> <li>Четвертый -<b> Empty </b> — означает, что тег является одиночным (пустым). Все теги, напротив которых стоит буква «E» в данном столбце, стоит еще и буква «F» в предыдущем столбце. Ведь у одиночных тегов не бывает закрывающих. Примером служит все тот же тег <img>.</li> <li>Пятый столбец — <b>Depr. </b> или <b>Deprecated </b> — с английского «не рекомендуемые». Если в данном столбце стоит буква «D» (которая расшифровывается точно также) значит, что данный тег не рекомендуется к использованию в HTML. Забегая немного вперед, сегодня для оформления как текста, так и внешнего вида всего сайта и HTML-документа используются каскадные таблицы стилей — CSS. Если коротко и просто, то создается один файл, в котором прописываются все параметры текста, которые можно вызвать определенными атрибутами тегов. Так вот, данная функция используется только на сайтах, потому что при рассылке новостей по почте или в RSS CSS не применим. И тут приходит на помощь эти самые теги. Большинство таких тегов, кстати, относятся к оформлению текста (<font> и <Center> являются примером)</li> <li>Шестой столбец — <b>DTD </b> — может содержать либо букву <b>«L» </b>, либо <b>«F» </b>. Первая — <b>«L» </b> - <b>Loose DTD </b> — означает, что тег, напротив которого стоит данная буква, может использоваться только в переходном типе документов (<!DOCTYPE> — Transitional, про который я писал в предыдущей статье). Вторая — <b>«F» </b> — <b>Frameset DTD </b> — означает, что тег может использоваться только в документе, типа FRAMESET (<!DOCTYPE> — Frameset). Если же буква отсутствует, то тег можно использовать во всех типах документов.</li> <li>И последний, седьмой столбец - <b>Description </b> — краткое описание тега, опять же на английском</li> </ul><p>Атрибуты же содержаться на той же страничке спецификации HTML 4.01, но уже во вкладке «attributes». Атрибутов намного больше, нежели тегов. И опять распишу все по пунктам.</p> <ul><li>Первая колонка — <b>Name </b> — как и в случае с тегами — название атрибута. Все на английском, но имея базовые знания можно догадаться, что делает тот или иной атрибут.</li> <li>Вторая колонка — <b>Related Elements </b> — это перечень всех тегов, в которых используется какой-либо атрибут. Все теги со ссылками, поэтому сразу можно будет перейти к информации о теге.</li> <li>Третья колонка — <b>Type </b> — это все возможные значения определенного атрибута. Например напротив выбранного нами атрибута size в теге Font стоит значение CDATA. Его мы рассмотрим позже, а если коротко, то это специальный набор вариантов размера (в данном случае). Ведь можно писать как пиксели, так и проценты</li> <li>Четвертая колонка — <b>Default </b> — означает, обязателен ли атрибут в определенном теге. Например, в теге Img атрибут src обязателен, так как указывает на источник, из которого брать картинку.</li> <li>6, 7, и 8 колонки означают то же самое, что и в случае с тегами.</li> </ul><p>Все вышеописанное относится только к HTML версии 4.01. Про HTML 5 мы поговорим в другой статье, затронем и XHTML. А сейчас, как я и обещал, мы создадим страничку на языке HTML, над которой и будем экспериментировать.</p> <h3>Создание файла в формате html — HTML-документ</h3> <p>Прежде всего, разберемся что такое <b>HTML-документ </b>. А это, собственно, файл в формате HTML. И все интернет странички являются HTML- документами. Например, при попадании на сайт в адресной строке в конце можно увидеть после адреса «.html» или «.htm». Вот файл с таким расширением мы и создадим. Вообще, если хотите экспериментировать над сайтом, а не над страничкой, то лучше создать локальный сервер — Денвер (про который я все хочу написать).</p> <p>Учитывая то, что я не рассказал даже о тегах, присутствующих на каждой страничке, то просто создадим файл с любым именем и расширением.html. Можно (и лучше всего) использовать <b>Notepad++ </b> , потому что в данном текстовом редакторе используется подсветка кода, что очень удобно при редактировании кода и сохранять файлы можно во множестве форматов. Также есть программы, в которых при наборе кода сразу появляется результат в обработанном виде</p> <p>Итак, нам нужно просто открыть <b>Notepad++ </b> и сохранить файл с произвольным текстом (можно и пустой), но в формате.html. Для этого, как обычно, кликаете на надпись файл, затем "сохранить как " и ищем среди большого списка расширений <b>«HyperText Markup Language file </b> (расширения файлов)». Вот, собственно, и все. Первые строки в этот файл мы добавим уже в следующей статье из рубрики «Создаем сайт с нуля»</p> <script type="text/javascript">  </script><br> <br> <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> <br clear="all"> </div> <div class="related" style="background:none;"> <p class="h1"><span>İlgili Makaleler</span></p> <style> </style> <style> #perelink-horizontal{ vertical-align: top; margin: 0 -5px; text-align: left; } #perelink-horizontal .perelink-horizontal-item { vertical-align: top; display: inline-block; width: 220px; margin: 0 5px 10px; } #perelink-horizontal .perelink-horizontal-item a span { display: block; margin-top: 10px; } #perelink-horizontal img{ width:220px; height:138px; margin-bottom:10px; } </style> <div id="perelink-horizontal"> <div class="perelink-horizontal-item"> <a href="https://rzdoro.ru/tr/entertainment/sdelat-smartfon-veb-kameroi-dlya-kompyutera-kak-prevratit.html"> <img src="/uploads/4a47c24f70479a388210279c581e271c.jpg" height="138" width="220" loading=lazy loading=lazy> <span>Android akıllı telefon nasıl güvenlik kamerasına dönüştürülür</span> </a> </div> <div class="perelink-horizontal-item"> <a href="https://rzdoro.ru/tr/windows-10/kak-vyglyadit-klaviatura-na-kitaiskom-kak-vyglyadit-kitaiskaya.html"> <img src="/uploads/d6b60f069aad6f3da72dbc2f1abd5297.jpg" height="138" width="220" loading=lazy loading=lazy> <span>Çince klavye neye benziyor (geçmiş ve fotoğraflar)</span> </a> </div> <div class="perelink-horizontal-item"> <a href="https://rzdoro.ru/tr/iron/chto-oznachaet-bukva-s-v-avatarke-znachenie-avatarok-v-psihologii.html"> <img src="/uploads/eb91fa06b79ec005a8aae028ddc35507.jpg" height="138" width="220" loading=lazy loading=lazy> <span>Avatarların psikolojideki değeri</span> </a> </div> <div class="perelink-horizontal-item"> <a href="https://rzdoro.ru/tr/windows-10/samaya-chastaya-avatarka-znachenie-avatarok-v-psihologii.html"> <img src="/uploads/f156136d8ca22fa79d34b002ccc56440.jpg" height="138" width="220" loading=lazy loading=lazy> <span>Avatarların psikolojideki değeri</span> </a> </div> <div class="perelink-horizontal-item"> <a href="https://rzdoro.ru/tr/windows-xp/kak-postavit-udarenie-na-kompyutere-kak-postavit-udarenie-nad-bukvoi-v.html"> <img src="/uploads/86fb0351975968ddd5e921943b5a0181.jpg" height="138" width="220" loading=lazy loading=lazy> <span>MS Word'de bir harf nasıl vurgulanır</span> </a> </div> <div class="perelink-horizontal-item"> <a href="https://rzdoro.ru/tr/internet/chto-znachit-esli-avatar-cheloveka-chto-znachit-tvoya-avatarka.html"> <img src="/uploads/66246e4607759f79721e65d6f8c26323.jpg" height="138" width="220" loading=lazy loading=lazy> <span>Bir kişinin avatarı ne anlama gelir?</span> </a> </div> </div> </div> </div> <div class="sidebar"> <div class="aside last_articles"> <div class="h2">En son makaleler</div> <ul> <li> <div class="article_info"> <div class="replace post_4385"> <div class="top"> <div class="img_border"> <span></span> <img src="/uploads/bd0d3f20502bc7b83568852d0ad440a1.jpg" alt="Kendi Twitter Anınızı Nasıl Yaratabilirsiniz?" title="Kendi Twitter Anınızı Nasıl Yaratabilirsiniz?" loading=lazy loading=lazy> </div> <div class="right_info"> <div class="date">2021-11-11 12:38:28</div> <a href="https://rzdoro.ru/tr/internet/kak-sozdat-svoi-sobstvennyi-tvitter-moment-chto-takoe.html" class="replace post_4385">Kendi Twitter Anınızı Nasıl Yaratabilirsiniz?</a> </div> </div> </div> <div class="clear"></div> </div> </li> <li> <div class="article_info"> <div class="replace post_4385"> <div class="top"> <div class="img_border"> <span></span> <img src="/uploads/6298f1e304003d1a1f04f3b8c0e71558.jpg" alt="Bir sosyal ağdaki bir avatar sahibi hakkında ne söyleyebilir?" title="Bir sosyal ağdaki bir avatar sahibi hakkında ne söyleyebilir?" loading=lazy loading=lazy> </div> <div class="right_info"> <div class="date">2021-11-11 12:38:28</div> <a href="https://rzdoro.ru/tr/network/lisa-na-avatarke-chto-znachit-chto-mozhet-rasskazat-avatarka-v.html" class="replace post_4385">Bir sosyal ağdaki bir avatar sahibi hakkında ne söyleyebilir?</a> </div> </div> </div> <div class="clear"></div> </div> </li> <li> <div class="article_info"> <div class="replace post_4385"> <div class="top"> <div class="img_border"> <span></span> <img src="/uploads/d53d981c80b9a70a410249d31f098ff2.jpg" alt="Kendi Twitter Anınızı Nasıl Yaratabilirsiniz?" title="Kendi Twitter Anınızı Nasıl Yaratabilirsiniz?" loading=lazy loading=lazy> </div> <div class="right_info"> <div class="date">2021-11-11 12:38:28</div> <a href="https://rzdoro.ru/tr/different/kak-sozdat-svoi-sobstvennyi-tvitter-moment.html" class="replace post_4385">Kendi Twitter Anınızı Nasıl Yaratabilirsiniz?</a> </div> </div> </div> <div class="clear"></div> </div> </li> </ul> </div> <div class="aside" style="display:none;"> <span class="related-link" data-href="/author/dergachev"><img src="https://rzdoro.ru/wp-content/themes/ostroymaterialah/img/banner.jpg" loading=lazy loading=lazy> </div> <div class="aside" > <div class="top_comment"> <div class="h2">Popüler Makaleler</div> <ul> <li> <a href="https://rzdoro.ru/tr/program/pervyi-skaniruyushchii-zondovyi-mikroskop-skaniruyushchii.html"> <div class="pull-left"> <div class="img_container"> <div class="img_border"> <img src="/uploads/ece4391a2ebebf26b67a1196e8b98d22.jpg" alt="Taramalı Atomik Kuvvet Mikroskobu Laboratuvar raporu şunları içermelidir:" / loading=lazy loading=lazy> </div> </div> </div> <div class="title_text"> <p>Taramalı Atomik Kuvvet Mikroskobu Laboratuvar raporu şunları içermelidir:</p> </div> </a> </li> <li> <a href="https://rzdoro.ru/tr/entertainment/detali-i-razmery-kontaktnoi-seti-podbor-stoek-opor-kontaktnoi-seti.html"> <div class="pull-left"> <div class="img_container"> <div class="img_border"> <img src="/uploads/fcc5244f94b83766b1dafda84fe5a2a4.jpg" alt="İletişim ağının destek raflarının seçimi" / loading=lazy loading=lazy> </div> </div> </div> <div class="title_text"> <p>İletişim ağının destek raflarının seçimi</p> </div> </a> </li> <li> <a href="https://rzdoro.ru/tr/audio-video/podbor-oborudovaniya-kontaktnoi-seti-proektirovanie-i-raschet-kontaktnoi-seti.html"> <div class="pull-left"> <div class="img_container"> <div class="img_border"> <img src="/uploads/929d13fc1fa57dbf0c543ebbd3b2593e.jpg" alt="AC katener tasarımı ve hesaplanması" / loading=lazy loading=lazy> </div> </div> </div> <div class="title_text"> <p>AC katener tasarımı ve hesaplanması</p> </div> </a> </li> <li> <a href="https://rzdoro.ru/tr/internet/proektirovanie-avtomaticheskih-sistem-na-baze-mikroprocessorov.html"> <div class="pull-left"> <div class="img_container"> <div class="img_border"> <img src="/uploads/e6e9c8bc4e2d4403b3c93a0f5411ff1b.jpg" alt="Mikroişlemci sistemlerinin geliştirilmesi Mikroişlemci sistemlerinin tasarım aşamaları" / loading=lazy loading=lazy> </div> </div> </div> <div class="title_text"> <p>Mikroişlemci sistemlerinin geliştirilmesi Mikroişlemci sistemlerinin tasarım aşamaları</p> </div> </a> </li> <li> <a href="https://rzdoro.ru/tr/entertainment/mikrokontrollery-semeistva-mcs51-mikrokontrollery-mcs-51.html"> <div class="pull-left"> <div class="img_container"> <div class="img_border"> <img src="/uploads/3af815db5e7fb7f42ee040abe703a4d3.jpg" alt="mcs51 ailesinin mikrodenetleyicileri" / loading=lazy loading=lazy> </div> </div> </div> <div class="title_text"> <p>mcs51 ailesinin mikrodenetleyicileri</p> </div> </a> </li> </ul> </div> </div> <div class="aside"> <div class="most_commented"> <div class="h2">Editörün Seçimi</div> <ul> <li> <div class="full_date">2021-11-06 10:20:40</div> <div class="clear"></div> <a href="https://rzdoro.ru/tr/windows-8/vybor-sredy-programmirovaniya-delphi-sreda-programmirovaniya-delphi.html" class="title">Delphi programlama ortamı</a> <p class="desc">Delphi görsel programlama sistemi, geniş bir kullanıcı yelpazesi arasında çok popülerdir: sıradan insanlardan sisteme ...</p> </li> <li> <div class="full_date">2021-11-06 10:20:40</div> <div class="clear"></div> <a href="https://rzdoro.ru/tr/iron/mikrokontrollery-mcs-51-programmnaya-model-struktura-komandy.html" class="title">Mikrodenetleyiciler MCS-51: yazılım modeli, yapısı, talimatları</a> <p class="desc">UDC 681.5, 681.325.5 (075.8) BBK 32.973.202-018.2 i 73 Shcherbina A.N. Bilgi işlem makineleri, sistemleri ve ağları. Mikrodenetleyiciler ve mikroişlemciler ...</p> </li> <li> <div class="full_date">2021-11-06 10:20:40</div> <div class="clear"></div> <a href="https://rzdoro.ru/tr/windows-7/teoriya-kodirovaniya-vidy-kodirovaniya-rozhdenie-teorii.html" class="title">Kodlama teorisi. Kodlama türleri. Kodlama teorisinin doğuşu Kodlama yöntemlerinin sınıflandırılması</a> <p class="desc">"Bu kursun amacı sizi teknik geleceğiniz için hazırlamaktır." Merhaba, Habr. "Siz ve işiniz" harika makalesini hatırlayın (+219, 2442 yer imi, ...</p> </li> <li> <div class="full_date">2021-11-06 10:20:40</div> <div class="clear"></div> <a href="https://rzdoro.ru/tr/windows-xp/vvedenie-v-osnovy-sovremennyh-shifrov-s-simmetrichnym-klyuchom-registry.html" class="title">Geri Besleme Kaydırma Kayıtları Doğrusal Geri Besleme Kaydırma Kaydı c</a> <p class="desc">Doğrusal bir geri besleme kaydırma kaydı (LFSR), değeri ... olan bir bit sözcük kaydırma kaydıdır.</p> </li> <li> <div class="full_date">2021-11-01 11:09:32</div> <div class="clear"></div> <a href="https://rzdoro.ru/tr/windows-xp/kak-zarabotat-s-pomoshchyu-s-rfinga-kak-zarabotat-na-serfinge.html" class="title">Sörf ve otomatik sörften nasıl para kazanılır?</a> <p class="desc">Sörf yaparak para kazanmak: sörf özellikleri + 5 avantaj ve dezavantaj + otomatik sörf için 3 özel program + 5 popüler hizmet ...</p> </li> </ul> </div> </div> <div class="aside"> </div> </div> </div> </div> <div class="push"></div></div> <footer> <div class="colomn-first"> <p><span class="related-link" data-href="/"><img src="/uploads/logo.png" alt="Bilgisayar yardım sitesi" / loading=lazy loading=lazy></span></p> <p><span style="color:#27a98c;">©</span> Telif hakkı 2021, <br>rzdoro.ru - Bilgisayar yardım sitesi</p> <div class="colomn"> <ul> <li>Kategoriler</li> <li><span class="related-link" data-href="/category/iron/">Demir</span></li> <li><span class="related-link" data-href="/category/windows-10/">Windows 10</span></li> <li><span class="related-link" data-href="/category/scan/">Tarama</span></li> <li><span class="related-link" data-href="/category/windows-7/">Windows 7</span></li> </ul> <ul style="margin-top: 23px;"> <li><span class="related-link" data-href="/category/iron/">Demir</span></li> <li><span class="related-link" data-href="/category/windows-10/">Windows 10</span></li> <li><span class="related-link" data-href="/category/scan/">Tarama</span></li> <li><span class="related-link" data-href="/category/windows-7/">Windows 7</span></li> </ul> <ul> <li>Başka</li> <li><span class="related-link" data-href="">site hakkında</span></li> <li><a href="https://rzdoro.ru/tr/sitemap.xml">site haritası</a></li> <li><span class="related-link" data-href="">Kişiler</span></li> <li><span class="related-link" data-href="">reklam</span></li> </ul> </div> </div> </footer> <script type="text/javascript" src="https://rzdoro.ru/wp-content/plugins/service_binet/ajax.js"></script> <script> jQuery(document).ready(function() { // Get all thumbs containers jQuery( ".thumbs-rating-container" ).each(function( index ) { // Get data attribute var content_id = jQuery(this).data('content-id'); var itemName = "thumbsrating"+content_id; // Check if this content has localstorage if (localStorage.getItem(itemName)){ // Check if it's Up or Down vote if ( localStorage.getItem("thumbsrating" + content_id + "-1") ){ jQuery(this).find('.thumbs-rating-up').addClass('thumbs-rating-voted'); } if ( localStorage.getItem("thumbsrating" + content_id + "-0") ){ jQuery(this).find('.thumbs-rating-down').addClass('thumbs-rating-voted'); } } } ); } ); </script> <div id="wprmenu_bar" class="wprmenu_bar left"> <div class="hamburger hamburger--slider"> <span class="hamburger-box"> <span class="hamburger-inner"></span> </span> </div> <div class="menu_title"> <a href="https://rzdoro.ru/tr/">rzdoro.ru</a> </div> </div> <div class="cbp-spmenu cbp-spmenu-vertical cbp-spmenu-left " id="mg-wprm-wrap"> <ul id="wprmenu_menu_ul"> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://rzdoro.ru/tr/category/iron/">Demir</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://rzdoro.ru/tr/category/windows-10/">Windows 10</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://rzdoro.ru/tr/category/scan/">Tarama</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://rzdoro.ru/tr/category/windows-7/">Windows 7</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://rzdoro.ru/tr/category/windows-xp/">Windows XP</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://rzdoro.ru/tr/category/printers-driver/">Yazıcı Sürücüleri</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://rzdoro.ru/tr/category/laptops/">dizüstü bilgisayarlar</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://rzdoro.ru/tr/category/windows-8/">Windows 8</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://rzdoro.ru/tr/category/audio-video/">Ses videosu</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://rzdoro.ru/tr/category/gadgets/">gadget'lar</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://rzdoro.ru/tr/category/different/">Çeşitli</a></li> <li id="menu-item-" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-"><a href="https://rzdoro.ru/tr/category/linux/">Linux</a></li> </ul> </div> <script type="text/javascript"> jQuery(document).ready(function($){ $("a[rel*=lightbox]").colorbox({ width:false,height:false,innerWidth:false,innerHeight:false,initialWidth:"30%",initialHeight:"30%",maxWidth:"90%",maxHeight:"90%",current:"Фото { current} из { total} ",previous:"назад",next:"далее",close:"закрыть",top:false,right:false,bottom:false,left:false} ); } ); </script> <script type='text/javascript' src='https://rzdoro.ru/wp-content/plugins/wp-polls/polls-js.js?ver=2.73.8'></script> <script type='text/javascript' src='https://rzdoro.ru/wp-content/plugins/lightbox-plus/js/jquery.colorbox.1.5.9.js?ver=1.5.9'></script> <script type='text/javascript' src='https://rzdoro.ru/wp-content/plugins/lightbox-plus/css/fancypants/helper.js?ver=2.7'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9.1'></script> <script type="text/javascript">  </script><br> <br> </body> </html>
) ve diğer etiketler? En basit yol, sözdizimi vurgulamalı bir metin düzenleyicidir. Onlarca programlama dilini destekleyen notepad++'ı indirin. Web kodlaması için gereken HTML, JavsScript, PHP ve diğer dilleri vurgular.

Normal HTML öğelerini kontrol etmek zor değildir ve kapatılmamış köprü ekleme etiketleri varsa “ "Etiketleri biçimlendirme" » / «
" veya " "Görsel olarak tanımlanabilir, div'ler ve tablolar gibi blok öğelerle çalışmaz. Kod büyüktür, bir div diğerinin sarmalayıcısıdır, çok sayıda iç içe geçmiş durumda, bir öğeyi karıştırabilir ve yanlışlıkla silebilirsiniz ve düzen gidecektir.

Kapatılmamış bir etiketi (html sayfa öğesi) algılamak için not defterinde vurgulamayı açın ++
1. Menüde "Sözdizimi"ni seçin

2. İstenen dili seçin, bizim durumumuzda HTML

3. Satır numarası

4. Etiketlerin içini görmenizi sağlayan ağaç benzeri bir çubuk

Kontrol, "+" artı işaretlerine tıklayarak bir div'i birbiri ardına kapatmaktan ibarettir, etiket kapanmazsa, kapatma etiketi yoktur. Kodu inceliyoruz ve eksik olanı doğru yere yazıyoruz.

Bir elemanın hangi kapanış etiketine ait olduğunu düzenleyicide bu etikete tıklayarak belirleyebilirsiniz. Düzenleyici, açılış etiketini ve bununla ilişkili kapanış etiketini vurgulayacaktır. Kapatma elemanının bulunmadığı veya kod mantığını bozan başka bir elemana atıfta bulunduğu bir görüntüleme hatası tespit etmek mümkündür.

Bu, manuel çalışma gerektiren en basit doğrulama yöntemidir. Otomatik sistemler yoktur, yalnızca bir programcı, sayfanın görsel tasarımını bozmadan bir div veya tablonun kapanışını nereye kaydedeceğini anlayabilir.

Yerleşik FireBug (FireFox) hata ayıklayıcılarını ve tarayıcıda yerleşik denetçileri kullanın. Opera'da kodun hata ayıklayıcısını (editörünü) "Ctrl-Shift-C" kombinasyonuna basarak veya şekilde gösterildiği gibi açabilirsiniz. İncelenen nesneye sağ tıklayın ve içerik menüsünde "Öğe kodunu görüntüle"ye tıklayın.
HTML Doğrulayıcı: Genel Analiz ve Koddaki Hataları Bulma

HTML doğrulayıcı - W3C ile kodda hata olup olmadığını kontrol edebilirsiniz.

İşaretleme Doğrulama Hizmeti (MVS) - Bu doğrulayıcı, HTML, XHTML, SMIL, MathML, vb.'deki web belgelerinin doğru işaretlemesini doğrular. RSS / Atom beslemeleri veya CSS stil sayfaları, MobileOK içeriği gibi belirli içeriği kontrol etmek veya bozuk bağlantıları bulmak istiyorsanız, başka doğrulayıcılar ve araçlar mevcuttur. Alternatif olarak, DTD tabanlı olmayan doğrulayıcımızı deneyebilirsiniz.

Hizmet, CSS, HTML, XHTML, JS'yi kontrol etmenizi sağlar ... siteyi analiz ettikten sonra, hizmet hataları ve kodun sorunlu bölümünü ortadan kaldırmak için bir yöntem gösterecektir .. Düzeltebilirsiniz, ancak gerekli değildir. siteniz normal şekilde görüntüleniyor ve dizine ekleniyorsa hizmeti dinleyin. Her 2 büyük site HTML standartlarına tam olarak uymuyor, kendiniz kontrol edin.

Etiket köşeli parantez içine alınmış özel bir ayrılmış kelimedir (örneğin, ). Etiket, HTML'nin ana bileşenidir: kod onunla başlar, onunla biter ve web sayfasında görüntülenen bilgiler etiketlerin içinde yer alır. Bunları küçük harfle, yani sıradan küçük harflerle yazmanız önerilir: değil