Limbajul HTML pentru începători. Bazele limbajului HTML

24.06.2019 Sfat

Acest articol nu pretinde a fi un ghid exhaustiv al limbajului de marcare HTML. Descrie elementele de bază ale HTML - principiile de bază, conceptele și definițiile acestei tehnologii, după ce o stăpânești, poți trece cu ușurință la învățarea codării HTML.

Pentru a studia lecția, descărcați arhiva cu fișierele necesare.

HTML este un limbaj de marcare documente. pronunție corectă - HTMEL.

Ați lucrat vreodată în editorul de documente Word sau în aplicații de birou similare? Probabil știi că acest tip de editor are funcții bogate pentru editarea textului, aranjarea elementelor, inserarea imaginilor etc.

De ce, vă întrebați, să scrieți într-un articol despre HTML despre procesoarele de text? Dar de ce. Dacă vă dați seama ce este un editor de birou? Aceasta este o aplicație pentru editarea și afișarea documentelor.

Cuvântul cheie aici este document . Adică creăm, edităm și vizualizam un document într-un program, în acest caz, într-un editor de birou. Dacă deschidem un astfel de document într-un editor de text simplu, cum ar fi Notepad, vom vedea o mulțime de simboluri și semne ciudate. Această mizerie de simboluri este de neînțeles pentru omenire, dar de înțeles pentru computere. Datorită acestui limbaj intern, documentul Word capătă o anumită structură și aspect în editorul propriu-zis, iar documentul apare în fața noastră în toată splendoarea cu text formatat și imagini la locul său.

HTML este un limbaj de marcare pentru browser. Cuvântul „aici este browserul, iar documentul este pagina HTML. Aceasta este însăși baza tehnologiei HTML, a cărei înțelegere este necesară pentru a nu confunda limbajul de marcare al documentelor web cu limbajele de programare. Numele vorbește de la sine. - cu ajutorul HTML noi marcare, unde va fi afișat elementul, imaginea sau textul pe pagină și în ce ordine vor apărea unul lângă celălalt.

Da, simpla tastare și formatarea textului în aplicațiile de birou nu au nimic de-a face cu programarea. Dar cititorul atent va observa un detaliu important - într-un procesor de text tastăm, edităm și formatăm text și imagini folosind butoane și meniuri vizuale, dar de ce este scris codul HTML de mână? De ce să studiezi atât de multe detalii tehnice despre scrierea de markup pentru un document?

De fapt, există multe editoare cu care puteți crea și edita pagini HTML prin analogie cu Word. Adică, codul HTML sursă este ascuns pentru noi și nu urcăm în el.

Un fel de Word pentru HTML. Acești editori vizuali se numesc:

WYSIWYG editori - W pălărie Y ou S ee eu s W pălărie Y ou G et. Adică, dacă este tradus în rusă: ceea ce vedem este ceea ce primim.

Eu le numesc „woozies”. Deși acest lucru nu este corect fonetic, indică în mod clar inutilitatea acestei invenții. Începătorii folosesc foarte des astfel de editori pentru a-și crea primele site-uri. Desigur, acest lucru este convenabil - nu este nevoie să vă aprofundați în studiul etichetelor, stilurilor de design și alte lucruri, la prima vedere, neplăcute și complexe. Editorul însuși va converti automat acțiunile noastre în cod HTML.

Dar, după cum se spune, nu se întâmplă nimic. Mai precis, această abordare are dezavantaje foarte serioase. Ce îi împiedică pe toți la rând să folosească editori vizuali pentru a proiecta pagini HTML? Cert este că paginile astfel formate au de obicei mult cod în plus, multe erori din punct de vedere semantic. Acum, desigur, nu există probleme cu conexiunea la Internet de mare viteză, iar diferența de dimensiune a paginii de 400 kb și 100 kb nu este semnificativă pentru viteză, totuși, un cod HTML optimizat și scris corect elimină multe probleme și oferă o mulțime de avantaje si anume:

Codul HTML competent are un efect pozitiv asupra optimizării motoarelor de căutare, viteza de accesare cu crawlere a unui site de către un robot de căutare. Kiloocteții de cod generați aici nu sunt acceptabili și chiar dăunători;

Codul HTML generat de editorul WYSIWYG are multe erori semantice. Adică, etichetele generate de un astfel de editor sunt folosite în alte scopuri, unde este necesar să se utilizeze, de exemplu, liste

Sunt generate o mulțime de etichete inutile și structura documentului este umflată. Să presupunem că mutați un element într-un astfel de program, mai întâi la dreapta, apoi la stânga, apoi la centru - fiecare acțiune lasă o urmă în codul HTML sursă. Editorul este un program și nu poate ști exact ce vrei să obții ca rezultat, generează tone de cod, ținând cont de toate comportamentele posibile ale documentului în browser.
De regulă, editorii pentru designul vizual al codului HTML devin rapid învechiți. Și din cauza lipsei de interes din partea profesioniștilor, ei își pierd în general sprijinul și se opresc în dezvoltare. Și HTML evoluează. Totul se dezvoltă, în afară de vuzivugi. În consecință, aceștia nu pot genera cod corect și actualizat care ar implica noi caracteristici și soluții.
A susține și a dezvolta astfel de proiecte este o pedeapsă cerească. Nu se poate vorbi deloc despre utilizarea modelelor și reutilizarea codului.

Deci, vom scrie HTML numai cu pixuri. Instrumente adecvate pentru editarea vizuală a HTML nu au fost încă inventate și este puțin probabil să apară. Limbajul de marcare HTML este ușor de învățat și de înțeles și există multe instrumente de automatizare pentru scrierea codului HTML, dar mai multe despre asta în alte lecții.

După ce s-au jucat puțin cu editorul WYSIWYG, tinerii guru HTML părăsesc această sarcină inutilă și merg mai departe.

Structura documentului HTML

Recomand să descărcați și să instalați editorul Sublime Text pentru cursuri. Nu recomand cu tărie să utilizați Notepad-ul încorporat în Windows pentru aspectul HTML dacă nu doriți să vă rupeți psihicul în primele etape ale învățării HTML.

Am decis că vom scrie manual codul documentului HTML, adică tipărit. Aspect HTML- procesul de creare a unui document HTML. În oamenii obișnuiți și cercurile de cunoștințe - doar aspect. Orice document are o structură și anumite reguli de construcție. Din ce elemente constă codul, care este structura HTML?

Să creăm un șablon inițial pe computer - fișier index.html, deschideți-l cu un editor și inserați următorul cod în el:

antet Corpul documentului Rețineți că documentele HTML au extensia .html.

Deci, în ordine din exemplu.

- tipul documentului (doctype)

Această construcție este întotdeauna indicată la începutul documentului, astfel încât browserul să „înțeleagă” corect ce versiune de HTML este folosită la construirea documentului.

Datorită faptului că HTML este în continuă evoluție, are mai multe versiuni, ca orice produs software. Versiunea HTML actuală este a cincea și este dată în exemplu doctype este la zi.

În principiu, nu are rost să ne aprofundăm în studiul tipurilor de documente, deoarece odată cu lansarea HTML5, acest design a devenit standard. Doar lipiți-l la începutul documentului de fiecare dată când începeți să așezați aspectul site-ului.

- începutul documentului

Prima etichetă pe care o vedem după doctype este .

Etichetă HTML- unitatea structurală de marcare a unui document HTML. Codul HTML este format din blocuri numite etichete. Fiecare etichetă are propria sa funcție, iar învățarea limbajului de marcare HTML înseamnă în cele din urmă învățarea etichetelor și a proprietăților acestora în document.

Aș dori să observ că învățarea HTML nu este o sarcină atât de dificilă așa cum ar părea la prima vedere. Învățarea etichetelor utilizate în marcarea documentelor nu este o sarcină atât de mare pentru creier.

Deci, marcarea documentului începe cu eticheta și se termină cu o etichetă de închidere. Fiecare etichetă care conține alte etichete sau elemente trebuie să fie închisă eticheta de inchidere. De exemplu, , ,

, etc.

Etichetă este necesar deoarece conține întreaga structură a documentului și înfășoară restul elementelor.

Etichetă

În continuare, vedem etichetă , care conține și alte elemente care nu ne sunt încă clare. Conține alte elemente - asta înseamnă că elementele sau etichetele se află între etichetele de deschidere și de închidere ale construcției:

<тег>conținut sau alte etichete

Etichetă este conceput pentru a stoca metainformațiile unui document HTML, adică informații care nu sunt afișate în documentul în sine, dar sunt importante și determină în mare măsură modul în care va arăta și se va comporta documentul.
Această etichetă este necesară în document.

Etichetă - titlul documentului</h4> <title>antet
antet este o <b>eticheta necesară</b> A care conține metainformații textuale care sunt afișate în titlul browserului sau al filei. Etichetă <title>trebuie să fie în etichetă <head>. De asemenea, conținutul acestei etichete este folosit de motoarele de căutare pentru a afișa documentul în rezultatele căutării.</p> <h4>Metaetichetă <meta charset="UTF-8" ></h4> <meta charset="UTF-8" > <p><b>Metaetichetă</b>- o etichetă specializată concepută pentru a oferi date structurate despre o pagină. Metaetichetele sunt cel mai des folosite într-o etichetă <head>. Metaetichetele sunt opționale ca structură <b>HTML</b> document.</p> <h4>Favicon (favicon)</h4> <link rel="icon" href="favicon.ico" > <p>Atașează documentului un fișier cu o imagine favicon. <b>Favicon (favicon)</b>- o pictogramă în miniatură afișată lângă numele documentului în fila browser. Un favicon este un fișier grafic de 16 x 16 (sau 32 x 32) pixeli care poate fi în diferite formate, cum ar fi png, jpg, ico, gif. Formatul ico este folosit în mod tradițional. Favicon-urile animate sunt fișiere gif care conțin animație. Puteți viziona o favicon animată, de exemplu, pe VKontakte când sosește un mesaj nou.</p> <h4>Stiluri de documente CSS</h4> <link rel="stylesheet" href="style.css"> <p>Atașează un fișier de stil HTML la un document CSS.</p> <p><b>css</b> - <i>în cascadă</i> stilul documentului HTML. Fiecare etichetă care se află în etichetă <body>, există un set de proprietăți, precum - culoare, lățime, înălțime, poziție față de alte elemente. Toate aceste proprietăți sunt stiluri CSS care pot fi preluate într-un fișier extern. Proiecta <link>conectează fișiere externe la documentul HTML, inclusiv stiluri CSS.</p> <p>Notă: proprietate <b>href</b> desene <link >specifică locația fișierului extern. În exemplul nostru, fișierul <i>stil.css</i>și <i>favicon.ico</i>, se află în același folder cu fișierul <i>index.html</i>. <link>nu are o etichetă de închidere.</p> <h4>Etichetă <script></h4> <script src="script.js" type="text/javascript"></script> <p>Etichetă<script> содержит код или ссылку на файл <b>javaScript </b> и чаще всего используется внутри тега <head>, хотя инструмент оптимизации скорости загрузки страниц от Google, рекомендует данный тег использовать в конце документа, перед закрывающим тегом </body>.</p> <p>В нашем примере подключается внешний файл <i>script.js </i>, который находится в той-же папке, что и основной файл index.html.</p> <p>Итак, друзья, мы рассмотрели основные элементы, которые используются в теге <head> чаще всего. Кроме этих элементов, для <head> есть ряд других, более специфичных и не обязательных.</p> <h4>Тело aka body</h4> <body> <p>Вот здесь то и начинается все самое интересное и визуально осязаемое в HTML верстке документа.</p> <p>Перейдем, непосредственно, к верстке видимой части страницы. Все, что мы пишем и верстаем внутри тега <body> будет отображено в браузере. Откроем наш файл <b><i>index.html </i> </b> в браузере для того, чтобы наглядно видеть, что мы делаем в редакторе.</p> <p>Тег <body> может содержать любые HTML теги, необходимые для оформления документа и обеспечения его функционала (формы). Приведу таблицу наиболее используемых тегов и вкратце опишу каждый. Вы можете сразу выполнять приведенные примеры в редакторе.</p> <table><tr><td><h4>Тег</h4> </td> <td><h4>Описание</h4> </td> </tr><tr><td> <a> </td> <td> Тег для создания ссылок в документе.<br> Пример: текст ссылки Атрибут <b>href </b> указывает документ, на который будет вести данная ссылка. </td> </tr><tr><td> <em>, <strong> </td> <td> Делает текст <i>курсивом </i>или <b>жирным </b> (акцентируемым).<br> Пример: <em>текст курсивом</em> <strong>жирный (акцентируемый) текст</strong> </td> </tr><tr><td> <h1>, <h2>, <h3>, <h4>, <h5>, <h6> </td> <td> Заголовки документа. Всего существует 6 уровней заголовков, но на практике используются только от h1 до h4. В документе должен быть только один заголовок, выделенный тегом h1, как главный заголовок документа.<br> Примеры: <h1>Заголовок первого уровня</h1> <h2>Заголовок второго уровня</h2> <h3>Заголовок третьего уровня</h3> ... и т. д. </td> </tr><tr><td> <ol>, <ul> </td> <td> Списки документа. Представляют собой нумерованный или маркированный список. Элементом такого списка является тег <li><br> Примеры: <ul> <li>Элемент маркированного списка 1</li> <li>Элемент маркированного списка 2</li> </ul> <ol> <li>Элемент нумерованного списка 1</li> <li>Элемент нумерованного списка 2</li> </ol> </td> </tr><tr><td> <p> </td> <td> Абзац. Данный тег определяет абзац текста, отбитый от остальных абзацев. Закрывать данный тег очень желательно.<br>Пример: <p>Внешний вид HTML разметки во многом определяется CSS стилями.</p> <p>Тем не менее, некоторые веб-мастера предпочитают не использовать стили на первых этапах проекта.</p> </td> </tr><tr><td> <img> </td> <td> Картинка. С помощью данного тега в HTML разметку можно вставить картинку. Обязательно указывайте у всех изображений альтернативный текст - атрибут "alt". Данный тег "самозакрывающийся".<br>Пример: <img src='https://i1.wp.com/путь_до_картинки.jpg' loading=lazy loading=lazy> </td> </tr><tr><td> <form> + <input> + <textarea> </td> <td> Формы и элементы ввода.<br> Формы предназначены для ввода информации в систему на сервере. Этакая обратная связь пользователя и сайта. Например, формы используются, когда нужно отправить какое-то сообщение на сервер. Кроме того, формы могут выполнять и другие функции, но основная задача - отправка данных на сервер.<br> Пример - простая форма отправки сообщения, в которой пользователь сайта указывает свое имя, E-mail и какой-то текст: <form action="ссылка_на_скрипт_обработки_формы"> <input type="text" name="name"> <input type="text" name="email"> <textarea name="text"> Текст сообщения <textarea> <input type="submit" value="Написать"> </form> </td> </tr><tr><td> <span> </td> <td> Определяет подстроку в строке.<br>Применяется для определения стиля части строки посредством CSS. Один из самых часто используемых тегов. Без оформления, ни как не проявляет себя в браузере.<br>Пример: Изучение HTML, в большинстве случаев, не вызывает <span>ни каких сложностей</span> у новичков. </td> </tr><tr><td> <video>, <audio> </td> <td> Теги предназначены для вставки видео и аудио в документ. Обязателен закрывающий тег.<br>Примеры: <video src="rolik_chuma.mp4" controls></video> <audio src="muzichka.mp3" controls></audio> Параметр <b>controls </b> говорит нам о том, что на странице должны отображаться элементы управления медиаконтентом, как в обычном аудио/видео плеере. </td> </tr><tr><td> <div> </td> <td> Во истину, королевский тег. Самый используемый и популярный тег в HTML разметке страницы. Это блочный элемент, предназначенн для управления блоками на сайте. Часто употребляется понятие "дивной" верстки - это значит, что все блоки на сайте сверстаны с использованием данных тегов. Может содержать другие теги <div>.<br>Пример: <div> <div> Текст во вложенном блоке </div> </div> Все элементы <div>, в большинстве случаев, оформляются свойствами CSS стилей. Обязателен закрывающий тег </div>. </td> </tr><tr><td> <iframe> </td> <td> Данный тег загружает внешнюю страницу в документ.<br>Пример: <iframe src="http://rtfm.org.ru"></iframe> </td> </tr></table><p>Мы рассмотрели далеко не все теги, да это и не нужно на данном этапе. Главное - понять основную идею HTML, научиться использовать представленные выше теги, а потом двигаться дальше.</p> <p>Обратите внимание на то, что все названия в подключаемых файлах должны писаться латинскими символами, без пробелов.</p> <p>Например, не:</p><p> <video src="ролик чума.mp4" controls></video> </p><p> <video src="rolik_chuma.mp4" controls></video> </p><p>Это необходимо для большей совместимости содержимого страницы. К тому-же, стандарты написания HTML кода, диктуют.</p> <p>Итак, теперь мы знаем некоторые <b>основы HTML </b>: какая структура должна быть у типового HTML документа, знаем некоторые наиболее ходовые теги, пора приступить к самому вкусному - а именно, печенькам.</p> <h3>Практическое задание по HTML верстке</h3> <p>Если вы еще не скачали архив с примерами, сделайте это . Для примера, можете подглядывать в файл example.html, который также находился в архиве.</p> <ol><li>Распакуйте архив и в папке с распакованными файлами создайте файл index.html. Откройте созданный файл с помощью текстового редактора Sublime Text;</li> <li>Создайте первоначальную структуру документа с доктайпом, тегом <html>, содержащим <header> и <body> и перейдите к редактированию содержимого тега <body>;</li> <li>Откройте файл readme.txt и выполните соответствующие задания в созданном вами файле index.html. Для проверки результата, откройте index.html в вашем любимом браузере.</li> </ol><p>На этом урок по основам HTML окончен, в следующем уроке "Основы CSS " мы научимся управлять стилями элементов документа, познакомимся ближе с каскадными таблицами стилей, научимся использовать классы стилей и сделаем нашу верстку красивой и красочной.</p> <p>До новых встреч, друзья!</p> <p>Основы html для начинающих, что сейчас должен знать каждый начинающий вебмастер или блогер. Если вы хотите научиться создавать элементарные сайты, понимать сам код, знать, что за чем стоит и должно идти, без знаний основ языка хтмл этого сделать просто невозможно. На своем блоге у меня будет целая цепочка статей, которые я посвящу этой теме от А до Я, опишу каждый тег, который присутствует в документе, что он обозначает и как его правильно использовать.</p> <i> </i> <h2>Основы хтмл</h2> <p>Если не знать самого элементарного, дальше вам путь закрыт. Я считаю, что каждый человек, который решил заниматься разработкой и созданием сайтов, должен знать и понимать основы, из чего состоит сам сайт, как он работает и что происходит в самом коде.</p> <p>Языков программирования конечно не мало, все они по-своему сложные, но есть такие, которые нужно знать обязательно. Если вы хотите красиво оформить письмо для отправки по почте, у вас имеется своя группа Вконтакте, группа в других социальных сетях, тот же канал youtube, вам необходимо ковыряться в коде на любом из движков сайта, базовые понятия вы просто должны знать.</p> <p>Навел только несколько примеров, на самом деле сейчас эти знания все чаще и чаще применяются в интернете. Я больше практик чем теоретик, поэтому в моих статьях в данной рубрике я буду показывать вам свои примеры, как и что я делал, step by step. Буду выкладывать как примеры страниц, так и целые сайты.</p> <p>Html документ это самый простой текстовый документ, язык тегов, с которым вы сталкиваетесь каждый день на просторах интернета. Теги описывают структуру документа. Оформляются теги угловыми < >скобками, внутри которых пишется название тега. Браузер просматривает структуру документа, выстраивает ее и отображает уже по своим инструкциям на вашем мониторе, если вы конечно все сделали правильно.</p> <p>Весь этот процесс начинается перед тем, как вы уже видите готовую картинку. Браузеры обрабатывают документ последовательно, от самого начала и до конца. Включая в себя полностью все, что должно быть на странице. Таблицы, картинки, скрипты и так далее, кроме это включая в себя стили CSS.</p> <h2>Основы для начинающих</h2> <p>Что такое html — если посмотреть, что пишет <b>Википедия - </b>(HyperText Markup Language)язык гипертекстовой разметки документов. Большинство страниц в интернете содержат разметку страницы на этом языке. Данный язык интерпретируется браузерами, полученный в результате форматированный текст отображается на вашем мониторе компьютера или мобильного устройства.</p> <p>Данный язык по своей сути очень легкий и доступный в обучении. Выучить и понять его основы может каждый желающий человек. Для использования такого языка нужно знать и применять дескрипторы, которые еще называются тегами. Именно с помощью тегов и создается документ.</p> <p>Из чего должна состоять структура документа, какие теги должны присутствовать. Давайте разберем все на одном маленьком примере. Я написал некоторый текст в MS Office и показал его вот на этом скриншоте.</p> <p><img src='https://i2.wp.com/nesmelov.ru/wp-content/uploads/2015/06/osnov1.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p>Чтобы отобразить данный текст в браузере так же само, как он был написан в документе, для этого нужно к нему добавить разметку страницу, которая включает в себя некоторые теги. Для начала посмотрите на них, дальше я опишу каждый, кто за что отвечает.</p> <p><html> <body> <h2></h2> <p>Добро пожаловать на мой блог, сейчас вы проходите урок по Основам HTML. Если вам понравилась данная статья, можете подписаться на данный блог, чтоб получать новые статьи на свой электронный ящик.</p> <h2>Блог Евгения Несмелова! сайт Основы html и css для начинающих</h2> <p>Из каких тегов состоит любой html документ, что в него входит и где все это нужно прописать.</p> </body> </html></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< html > </p><p>< body > </p><p>< h2 >< / h2 > </p><p>< p > Добропожаловатьнамойблог, сейчасвыпроходитеурокпоОсновамHTML . Есливампонравиласьданнаястатья, можетеподписатьсянаданныйблог, чтобполучатьновыестатьинасвойэлектронныйящик. < / p > </p><p>< h2 > БлогЕвгенияНесмелова! Nesmelov . ru Основыhtml иcss дляначинающих< / h2 > </p><p>< / body > </p><p>< / html > </p> </td> </tr></table><p>Любой код состоит из символов, которые помещаются в угловые скобки. Все это называется элементами. Все элементы, как правило состоят из двух тегов, открывающего и закрывающего. Советую вам изначально внимательно смотреть за тегами, если вы пропустите один из них и не закроете его, вам нужно будет пересматривать большие части кода, чтоб найти ошибку.</p> <p>Были случаи, когда на это уходил не один день, человек обращается и просит ему помочь, он не может найти у себя ошибку на сайте, поэтому всегда смотрите очень внимательно, что и где вы пишите. Давайте теперь на данном примере посмотрим на каждый элемент из кода, что в нем написано, что это означает и что получается в итоге.</p> <p>Большинство тегов парные, которые включают в себя открывающийся тег и закрывающийся. Кроме таких тегов, существуют еще и одиночные теги. Теги могут идти вместе с другими, таким образом вкладываются друг в друга. Например отобразить текст сразу жирным и курсивом.</p> <p><strong><i>Текст</strong></i></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< strong > < i > Текст< / strong > < / i > </p> </td> </tr></table><h2>Структура html документа</h2> <p>Напомню еще раз раз, нужно следовать правилам, которые присутствуют в документе. Именно так браузер понимает что находится на странице, ее последовательность, содержание и так далее.</p> <p>Тег — это компонент, который говорит веб браузеру выполнить ту или иную задачу. Например присутствие абзаца, таблицы, формы или изображения.</p> <p>Атрибут — изменяет тег. Например можно абзац выровнять по центру или по правому краю, задать так же расположение изображения на странице и так далее.</p> <p>ВСЕГДА закрывайте теги, если вы его отрыли, обязательно нужно его закрыть. В противном случае будет ошибка и ваш документ будет некорректно отображаться на странице. Так же существуют исключения, про них не следует забывать.</p> <p>Четко нужно понимать, что существует заголовок документа и его тело. Заголовок это все, что состоит в теге <head>. Тело документа (<body>), в теле документа состоит все содержимое страницы. Если возникает необходимость оставить участок кода для себя, тем самым заключить данные теги в комментарии, для этого используется тег <!>. Все, что находится внутри такого тега, служит в роли комментария и не воспринимается браузерами.</p> <h3><html></h3> <p>Начнем с самого первого. В начале документа я открыл тег <html> и в конце я его закрыл </html>. Данный код присутствует абсолютно в каждом документе, он говорит браузеру, что все, помещенное между этими тегами, является HTML кодом. Является корнем самого документа, все, что в дальнейшем присутствует за этим тегом, уже не включается в документ и не воспринимается браузерами. В самом начале документа тег открывается и в самом конце он обязательно должен быть закрытым.</p> <h3><head></h3> <p>Весь раздел этого тега содержит в себе всю техническую информацию документа. Как и предыдущий тег, head так же должен быть открыт и в конце закрыт. В такую информацию относится заголовок страницы, ее описание, ключевые слова для поисковых систем и кодировку. Про кодировку немного ниже.</p> <p><head> Содержание </head></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< head > Содержание< / head > </p> </td> </tr></table><h3><Title></h3> <p>Данный тег включается в head, он должен быть написан внутри тега head. Данный тег title является обязательным и должен присутствовать в каждом html документе. В добавок к этому он отображается как заголовок окна браузера. Длинна такого заголовка не должна превышать 60 символов. В тексте такого заголовка должна содержаться максимально полная информация, которая характеризует содержание страницы.</p> <p>Если вы написали в заголовке "Привет Мир", именно эта информация должна отображаться на странице и никакой другой. Не стоит обманывать людей и поисковые машины, они этого не любят, тем самым вы делаете хуже себе. Информация, которая содержится в этом теге, должна соответствовать содержанию вашей страницы.</p> <h3><meta></h3> <p>После обязательного тега title, идет необязательный, но так же не мало важный тег meta. Данный тег является одинарным. С помощью данного тега задается описание для страницы (description) и ее ключевые слова (keywords).</p> <p><meta name="keywords" content="Ключевые слова задаются через запятую"> <meta name="description" content="Описание страницы не больше двух предложений"></p> <p>Кроме этого, в теге meta могут содержаться данные про автора страницы и другие свойства метаданных. Можно запретить индексацию страницы в целом для поисковых машин. Поставить автоматическое обновление страницы через 20 секунд или через 5 секунд с последующим переходом на другую страницу. </p> <p><meta name="robots" content="index, follow"> <meta content="20"> <meta content="5; url=http://сайт/"></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< meta name = "robots" content = "index, follow" > </p><p>< meta http - equiv = "refresh" content = "20" > </p><p>< meta http - equiv = "refresh" content = "5; url=http://сайт/" > </p> </td> </tr></table><p>Таких элементов meta может быть несколько, так как они могут нести абсолютно разную информацию. Остальные пользователи, когда открывают страницу в браузере, не видят все ваши описания, все это остается скрытым от глаз. </p> <h3><style></h3> <p>Тег style так же можно использовать для задания стилей на странице. Если вы используете много разных стилей css, в таком случае желательно задавать их в отдельном файле. Если нужно указать несколько из них, все это можно задать прямо в html документе.</p> <p><style type="text/css"> .base { width: 100px; background-color: #000; height: 150px; color: #fff; }</p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< style type = "text/css" > </p><p>Base { </p><p>width : 100px ; </p><p>background - color : #000; </p><p>height : 150px ; </p><p>color : #fff; </p> </td> </tr></table><p>Или добавить стили конкретно к одному тегу, для этого внутри самого тега нужно добавить элемент style. Данный тег нужно использовать внутри контейнера <head>, который задает стили для страницы. Можно использовать несколько таких тегов, ошибкой это не будет.</p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"> </td> </tr></table><h3><link></h3> <p>Немного похожий с предыдущим тегом, с помощью тега link можно задать стили для документа, которые находятся в другом файле. Другими словами, можно подключить к существующему документу полную таблицу стилей css, которая состоит из множества свойств. Тем самым вы уменьшаете размер документа, который в итоге будет быстрее грузиться и открываться на компьютере или мобильном устройстве при слабой скорости интернета.</p> <p>Подключать можно больше одного файла, тут ограничений нет. Закрывать такой тег не нужно. Если все сделать правильно, к вашему документу будут подгружаться конкретные стили из отдельного файла. Данный тег можно добавить в основы html и не забывать про его существование. В итоге получается такая картинка:</p> <p><link href="css/style-lg.css" rel="stylesheet"> <link href="css/style-md.css" rel="stylesheet"> <link href="css/style-sm.css" rel="stylesheet"></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p>< link href = "css/style-lg.css" rel = "stylesheet" > </p><p>< link href = "css/style-md.css" rel = "stylesheet" > </p><p>< link href = "css/style-sm.css" rel = "stylesheet" > </p> </td> </tr></table><h3><script></h3> <p>С помощью тега script к документу можно подключить разные сценарии (скрипты). Присутствие закрывающего тега обязательно. Сам скрипт может располагаться в начале документа, внутри и в конце.</p> <p><script type="text/javascript" href="http://html5shim.googlecode.com/svn/trunk/html5.js"></script></p> <table class="crayon-table"><tr class="crayon-row"><td class="crayon-nums " data-settings="show"> </td> <td class="crayon-code"><p><script type = "text/javascript" href = <span>"http://html5shim.googlecode.com/svn/trunk/html5.js" </span>> </script> </p> </td> </tr></table><h3><body></h3> <p>Spune browserului că totul dintre aceste etichete ar trebui să fie afișat în fereastra browserului dvs. Iată principalele etichete care pot fi prezente în absolut fiecare document. Eticheta body servește ca corp principal al paginii, care include tot conținutul acesteia. Este de dorit să deschideți această etichetă și să nu uitați să o închideți la sfârșitul documentului.</p> <h3>Titlurile paginilor h1 h2 h3</h3> <p>Să mergem mai departe, vedem eticheta <h1>care se deschide și se închide. Această etichetă denotă titlul principal al textului, în cele mai multe cazuri sub titlul H1 se află titlul paginii. De fapt, există doar șase anteturi de date. <h1> <h2> <h3> <h4> <h5> <h6>. Sunt folosite și în SEO, dar acesta este un subiect ușor diferit. Cu siguranță voi evidenția un articol pentru asta și le voi oferi o descriere detaliată, abonați-vă la actualizările blogului pentru a nu rata nimic.</p> <p>Prezența unui astfel de titlu în articol va juca un rol important în promovarea paginii. În plus, utilizarea acestora vă oferă o structură clară a paginii, titlul, subtitlurile, evidențierile, subparagrafele și așa mai departe. Folosește-le întotdeauna și pune-le în practică. Pe multe CMS, cum ar fi WordPress, atunci când scrieți text, veți observa „Titlul 1”, „Titlul 2”, „Titlul 3” și așa mai departe. Ei sunt responsabili pentru h1, h2 și h3.</p> <h3><p></h3> <p>Dacă scrieți textul corpului dintr-un paragraf nou, scrieți o etichetă <p>La început și închideți-l la sfârșit</p>. Desemnarea unui paragraf în html este echivalentă cu crearea unui nou paragraf într-un document MS Word. Nu am adăugat nimic nou în document. Dar, acest lucru nu este tot ceea ce ar trebui să fie prezent în documentul html. Să ne uităm la un alt exemplu, descrierea va fi puțin mai târziu.</p> <p><!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>document HTML
Acest text va fi aldine, iar acesta este cu caractere cursive

< ! DOCTYPE html >
< html >
< head >
< meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / >
< title >document HTML< / title >
< / head >
< body >
< p >
< b >
< / b >
< / p >
< / body >
< / html >

Elemente de bază pentru cap și titlu

Fiecare document are un element head și un element title. Primul , care vine imediat după prima etichetă . Această etichetă conține toate informațiile despre pagină, conține și elementul . Titlu - informații despre titlul paginii, cu alte cuvinte, titlul paginii, numele acesteia. În titlu indicați numele corect al paginii prin care utilizatorul vă va căuta prin motorul de căutare, punct foarte important. Ambele elemente trebuie să fie deschise și închise în același mod. Fiecare element este închis cu semnul „/”. Drept urmare, aceasta este imaginea.</p> <p><html> <head> <title>Antet& \Conţinutul paginii

< / html >

După cum puteți vedea, nu este nimic complicat. Iată cele mai de bază etichete care ar trebui să fie prezente în fiecare document html. Nu uitați să închideți fiecare dintre ele, altfel browserul nu va putea percepe imaginea completă a codului. Acest lucru trebuie cunoscut și amintit întotdeauna. Apoi începeți să inserați text, imagini, videoclipuri și așa mai departe. Dar asta va fi în alte articole.

Editor Notepad++

Utilizați Notepad++ pentru a lucra cu codul. Este gratuit și ușor de găsit online. Foarte convenabil pentru perceperea oricărui cod, este, de asemenea, convenabil să afișați etichetele de deschidere și de închidere. Suportăm sintaxa a peste 40 de limbaje de programare. Exact ceea ce aveți nevoie pentru a învăța elementele de bază ale html.

Blocnotesul este superior în toate privințele unui blocnotes obișnuit. Pentru confort, simplitate și studiu maxim, acest editor trebuie mai întâi instalat pe un computer. Cel mai de bază avantaj și comoditate, editorul Notepad++ arată indicii atunci când scrieți cod, ceea ce vă face munca mai rapidă și mai bună uneori.

element DOCTYPE

Fiecare document trebuie să specifice, de asemenea, următorul element doctype. De ce este nevoie și ce ar trebui să fie în el. De obicei oamenii nu sunt foarte pasionați de aceste rânduri, le copiază în documente și lucrează calm. Aceste elemente spun browserului ce versiune de html este folosită în document, ce descriere a paginii, ce codificare este folosită, ce cuvinte cheie sunt incluse, cine este autorul și cum se numește pagina.

Ele sunt de obicei plasate chiar la început. Există mai multe opțiuni și toate sunt diferite unele de altele, voi scrie un exemplu care este folosit cel mai des. Acest gol poate fi folosit ca șablon gata făcut. În continuare, va exista o descriere clară a fiecărei linii, nu ar trebui să existe probleme cu aceasta.

Pe scurt, într-un limbaj simplu, despre elementele de bază ale html: Această linie spune browserului că acest document este versiunea XHTML 1.0, se folosește limba engleză și toată această mizerie se află la această adresă. Apoi, în metaeticheta, specificați codarea care este utilizată. Windows 1251 este cel mai des folosit.

Descriere – este afectată tema SEO, una dintre cele trei etichete principale care trebuie să fie prezente în absolut fiecare document, această etichetă indică descrierea paginii. Ce este scris pe această pagină, o scurtă descriere, nu mai mult de două propoziții. Eticheta de cuvinte cheie afectează și subiectul SEO, această etichetă este necesară. Conține cuvinte cheie prin care utilizatorii de internet vă vor găsi prin motoarele de căutare.

Eticheta de titlu conține numele documentului în sine, titlul acestuia, pe care îl vedem în browser. Probabil cea mai importantă etichetă din întregul document care are cel mai mare impact asupra promovării paginii. Articolul despre adăugarea și proiectarea descrie această etichetă mai detaliat.

Ce trebuie să rețineți din această lecție despre elementele de bază ale html:

Aproape toate etichetele se deschid și se închid;
Documentul începe cu o etichetă ;
Prezența etichetei ;
Prezența etichetei ;
Structura clară a documentului html.

Toate paginile principale ar trebui să fie întotdeauna denumite cu cuvântul index. Așa se acceptă și toată lumea este obișnuită, indiferent de extensia fișierului, poate fi atât html, cât și php. Întotdeauna se numește așa.

Urmărește videoclipul de bază html de la Webformyself.

Limbajul de marcare hipertext, elemente de bază și structură. Toate acestea și multe altele voi încerca să le descriu pe blogul meu. În primul rând, vor fi scrise informații utile pentru începători, va fi furnizat un cod exemplu și posibilitatea de a descărca exemplul în sine împreună cu pagina finală.

Buna ziua!!! Sunt foarte bucuros că ai decis să cucerești culmile elementelor de bază ale HTML și aceasta este alegerea potrivită. La urma urmei, înainte de a crea primul tău site web, trebuie să cunoști elementele de bază ale HTML. Mai mult decât atât, va trebui să te ocupi de codificarea HTML pe un site web de mai multe ori. Recomand cu căldură să aruncați o privire la tutoriale. HTML pentru începători pe blogul meu și vă garantez că, după finalizarea acestui curs, veți putea crea cu ușurință o pagină web sau chiar un site web.

Să începem! Pentru început, să aflăm
HTML- (din engleza. H ypert ext Markup Language) este un limbaj de marcare hipertext. A fost dezvoltat pentru prima dată de omul de știință britanic Tim Berners-Lee în 1991-1992. HTML a fost menit doar să marcheze text, imagini și tabele pe paginile web. Acum pot fi inserate limbaje de programare suplimentare, cum ar fi JavaScript, VBScript, în documentul HTML.

HTML nu este un limbaj de programare, este destinat doar pentru marcarea documentelor text.

Pentru a învăța HTML trebuie doar să ai un browser și un bloc de note standard sau .
Pentru a deschide Standard Notepad, faceți următoarele pe computer: Start => Programe => Accesorii => Notepad .

Dacă ați auzit de programe care ușurează scrierea codului HTML (Microsoft FrontPage, Adobe Dreamweaver), atunci nu vă recomand să le folosiți în această etapă de învățare. Completați-vă mâna într-un blocnotes standard sau în editorul de text Notepad ++, iar când veți finaliza acest curs, veți putea folosi programe de accelerare. Abonați-vă la actualizările blogului meu și citiți cum să utilizați Microsoft FrontPage, Adobe Dreamweaver.

Pentru o mai bună înțelegere, am pregătit un exemplu. Luați în considerare desenul cu atenție:

Explicaţie.

unu). Fiecare document HTML începe cu această linie:

„https://www.w3.org/TR/html4/loose.dtd”>

Cu această linie, spunem browserului că documentul nostru HTML respectă specificația internațională versiunea 4.01. Datorită acestei linii, pagina ta va arăta la fel.
Nu este necesar să memorați această linie, documentul HTML va funcționa fără ea. Asta doar ca să știi ce este.

2). și sunt începutul și sfârșitul documentului.

3). și- capul documentului. Aici sunt adesea inserate etichete de serviciu suplimentare, una dintre aceste etichete este . Veți afla despre alte etichete de serviciu în lecțiile ulterioare, în această etapă de învățare aceste informații sunt suficiente.

4). și- titlul documentului.
Acest titlu va fi afișat în browser:

în căutare I index sau în Google.

5). și- corpul documentului.
Conținutul documentului se află aici, de exemplu, text, imagini, tabele, muzică, filme etc. Veți afla mai multe despre cum să inserați muzică, text, imagini în corpul unui document în lecțiile următoare.

Notă:

De multe ori va trebui să citiți și să auziți cuvântul „etichetă”.
Eticheta este totul între paranteze.< >. De exemplu: , , <html> , <head> , <br> , <p> </i>și altele - toate acestea sunt etichete. <br>Etichetele nu sunt vizibile atunci când pagina este vizualizată într-un browser, dar orice nu este între paranteze va fi afișat în browser atunci când este vizualizat.</p> <p>Există multe etichete și au scopuri diferite.</p> <p>Există etichete care trebuie închise. De exemplu, <br>eticheta deschisă <i><p> </i> <br>și asigurați-vă că închideți eticheta <i></p> </i> </p> <p>Și există etichete singleton, de exemplu, aceasta <i><br> </i> .</p> <p>O etichetă este un fel de container care poate conține text, imagini și alte etichete...</p> <p>○ Acordați atenție secvenței corecte a etichetelor de deschidere și închidere:</p> <p><тэг1> <тэг2> <тэг3> ... </тэг3> </тэг2> </тэг1> <i> </i></p> <p>Eticheta pe care am deschis-o prima este închisă ultima, a doua - penultima etc.</p> <p>○ Și iată un exemplu de secvență incorectă a etichetelor de deschidere și de închidere. Cu această comandă, pot apărea erori pe pagina web:</p> <p><тэг1> <тэг2> <тэг3> ... </тэг3> </тэг1> </тэг2> </p> <p>Eroarea a fost în<тэг1>și<тэг2> .<br>Aveți grijă când scrieți cod.</p> <p><img src='https://i0.wp.com/bloggood.ru/wp-content/uploads/2013/05/osnovi-html-100.jpg' align="center" width="100%" loading=lazy loading=lazy></p> <p><b>Cod gata.</b><br>Așa arată codul HTML necesar standard al unei pagini web.</p><p> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "https://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Titlul paginii Text în pagină, tabele, imagini, muzică și video.

Nu vă descurajați dacă înțelegeți puțin sau aproape nimic din toate cele de mai sus. În a doua lecție va fi mai multă practică și vei putea scrie totul manual și vei vedea cum funcționează HTML.

Treci la următoarea lecție

Limbajele de hiper-markup, cum ar fi html și CSS, nu sunt atât de dificil de învățat pe cât ar părea la începutul cunoașterii lor. Ele se bazează pe principii destul de naturale și de înțeles, stăpânind pe care le puteți rezolva cu ușurință numeroase probleme care apar în activitatea propriului site.

Cunoștințele de bază ale html și CSS vă vor permite să remediați în mod independent problemele minore inevitabile în funcționarea unei resurse web, să editați informații de pe site, să plasați hyperlinkuri, să plasați imagini, să evidențiați informațiile necesare în diferite moduri.

Html este baza aspectului și componenta de bază în organizarea elementelor site-ului

Html este baza pe care se suprapun ulterior alte cunoștințe despre managementul resurselor și organizarea elementelor acesteia. Acest limbaj de marcare este unul dintre cele mai importante și mai frecvent utilizate. Și capabilitățile html vă permit să plasați elemente pe o pagină web în locul potrivit și să le oferiți dimensiunea și aspectul potrivit.

Citiți informații care sunt marcate cu ajutorul html, aplicații special concepute, mai bine cunoscute ca browsere sau browsere de internet. Cele mai utilizate browsere de internet astăzi sunt:

Internet Explorer

Google Chrome;

Operă;

Mozilla Firefox.

În același timp, creatorii de browsere pot forma în mod independent noi seturi de elemente pentru html. La sfârșitul anilor 90, tocmai din cauza creativității atât de active a dezvoltatorilor de browsere concurenți s-a format fenomenul „războiului browserului”. Esența sa se rezuma la faptul că unele pagini html sunt afișate corect într-un browser de internet, iar în altul utilizatorul le vede cu erori. Singura cale de ieșire din situația de conflict de browser este utilizarea aspectului încrucișat.

Editori pentru crearea paginilor html

Puteți crea sau edita o pagină html folosind editori html. Cel mai simplu și mai faimos editor de text este Notepad, care nu este scris special pentru lucrul cu marcajul html, dar acceptă această funcție. Mai funcționale și concepute special pentru lucrul cu html sunt editorii:

Notepad++ - Funcționează cu codul sursă și este distribuit gratuit.

Macromedia Dreamweaver - dispune de un set de caracteristici avansate pentru editarea și vizualizarea marcajului creat și are, de asemenea, capacitatea de a afișa pagina finală.

Adobe Dreamweaver - ca și editorul anterior, are funcția de a afișa pagina finalizată, adică permite utilizatorului să vizualizeze versiunea editată în forma în care va fi afișată în browser. Acest program este o versiune ulterioară, apărută ca urmare a îmbunătățirii de către specialiștii Adobe a editorului lor achiziționat de la Macromedia. Din cauza acestei circumstanțe, Macromedia Dreamweaver și Adobe Dreamweaver sunt foarte asemănătoare.

Microsoft Front Page - este inclus în pachetul de aplicații Office și are o cantitate suficientă de capabilități pentru procesarea și crearea de markup html.

Etichete principale

Un document care utilizează marcajul html este un set simplu de componente care sunt segmentate folosind caractere speciale numite etichete. Etichetele includ un element, dându-i astfel un anumit aspect și definindu-i locul. Există, de asemenea, cazuri în care eticheta nu include nimic: acest lucru se aplică combinației
, care se potrivește cu șirul.

Eticheta care vine înaintea elementului de încadrare se numește eticheta de deschidere și arată astfel< тег >. Eticheta care vine după elementul de închidere se numește eticheta de închidere și arată astfel. Este necesară prezența unei bare oblice (/) pentru a închide eticheta, altfel componenta nu va funcționa. Această regulă se aplică majorității etichetelor, cu excepția celei menționate mai sus.
si altii unii. Principalele etichete html sunt:

- o etichetă care indică direct că fișierul aparține formatului html;

- o etichetă care este invizibilă în document și are rolul de a indica numele documentului și caracteristicile acestuia pentru roboții de căutare;

- o etichetă care definește limitele părții vizibile a documentului;

- tag care trimite titlul paginii la cuprins;

, , , sunt etichete de formatare a textului care creează text aldine, text cursiv, întreruperi de paragraf și numerotare.

Alături de etichete, al căror rezultat este văzut de vizitatorul paginii sub formă de scriere îngroșată sau italic, există și etichete de serviciu numite metaetichete și oferă informațiile necesare motoarelor de căutare, browserului, dar nu sunt vizibile pentru medie. utilizator.

Pentru a crea o pagină html, trebuie să efectuați succesiv pașii descriși mai jos. Puteți folosi notepad obișnuit.

1) Creați un document. Introduceți următorul cod în el:

Conținutul acestui element va fi afișat în browser

Notă: neapărat în » specificați codificarea documentului așa cum se arată mai sus.

2) În continuare: fișier - salvați ca. În câmpul „tip fișier” în loc de „txt” selectați „Toate fișierele” (toate fișierele), în câmpul pagina de coduri (codarea paginii) - selectați 65001 (UTF-8), în câmpul „nume fișier” după numele lui documentul punem un punct și extensia html (.html), apoi facem clic pe salvare. Avem un al doilea document în același folder, dar deja în html. Aceasta este pagina noastră web, care poate fi deschisă acum în orice browser.

exemple de cod html

Text împărțit în paragrafe

Paragraful 1

paragraful 2

paragraful 3

Titluri și paragrafe centrate

Acest titlu este aliniat la centru.

Titlul de al doilea nivel este aliniat la centru.

Textul paragrafului este aliniat la centru.

Metaetichete, titlul paginii (titlu), descrierea paginii (descriere) și cuvinte cheie (cuvinte cheie)

Titlul paginii

Paragraf cu cuvinte cheie specificate în „cuvinte cheie”

CSS - care completează mecanismele html

Acolo unde funcționalitatea html este insuficientă, foile de stil în cascadă - CSS - vin în ajutor. Sunt opțiuni avansate puternice pentru schimbarea aspectului unei pagini web. CSS funcționează împreună cu capabilitățile html. Aceste două seturi de parametri interacționează și nu se înlocuiesc în niciun fel.

Opțiunile CSS pot fi plasate pe documentul web în sine utilizând:

Etichete, care sunt între etichete și;

atributul de stil situat în interiorul oricărei alte etichete.

De asemenea, indicii CSS pot fi atașate unui document web cu:

etichetă plasat între și;

Directiva @import plasată între etichete.

În procesul de scriere a unei foi de stil, este necesar să se respecte cu strictețe o sintaxă specială care implică subordonarea elementelor și ierarhia acestora, în care pozițiile sunt distribuite între pointer, proprietate, valoare, descriere și șir. Acoladele sunt folosite pentru a desemna proprietăți și pot fi atribuite mai multe proprietăți fiecărei etichete simultan.

Modalități de a include foi de stil CSS

Există mai multe moduri de a conecta CSS la html:

tabele inline, în care o foaie de stil este încorporată în antetul paginii folosind eticheta;

Pagina cu foaie de stil încorporată

folosind element . Elementul nu necesită o etichetă de închidere. Acest element definește relația dintre pagina curentă și alte documente. Pot exista mai multe astfel de elemente pe o pagină. Intrarea va arăta astfel:

Tabelul 4. Atributele etichetei

Atribut Descriere, valoare acceptată
origine încrucișată Specifică dacă CORS (o tehnologie de browser care permite unei pagini web să acceseze resurse dintr-un alt domeniu) ar trebui utilizată atunci când preia o imagine de pe un site.
anonim - într-o solicitare între domenii, browserul adaugă automat un antet Origin care conține numele domeniului din care a fost făcută cererea. Dacă serverul nu răspunde cu un antet CORS Access-Control-Allow-Origin: * (sau un nume de domeniu în loc de un asterisc), atunci imaginea va fi blocată de la încărcare.
use-credentials - dacă serverul nu oferă acreditări cu Access-Control-Allow-Credentials: true , atunci imaginea va fi blocată de la încărcare.
href Atributul principal al etichetei, valoarea este calea către fișierul cu stiluri.
hreflang Specifică limba textului din documentul legat.
mass-media Specifică tipul de dispozitiv la care urmează să fie aplicată resursa de legătură.
nonce O variabilă șir generată aleatoriu de partea serverului care stabilește regulile de utilizare a stilurilor inline pentru a proteja conținutul. Valoarea atributului este un șir de text.
rel Atributul definește relația dintre documentul curent și documentul referit.
alternativ - un link către același document, dar într-un format diferit (de exemplu, pagini imprimabile, traducere, oglindă, flux RSS sau Atom),
.

arhivele indică faptul că documentul legat este de interes istoric. Linkul poate indica o colecție de înregistrări, documente și alte materiale.
linkul autorului către pagina despre autorul documentului sau către pagina cu datele de contact ale autorului.
marcaj O referire la cel mai apropiat strămoș al articolului care este linkul sau la secțiunea articolului cel mai strâns legată de element dacă nu există un strămoș.
extern este folosit pentru a indica faptul că pagina legată nu face parte din acest site.
mai întâi specifică o legătură către primul document dintr-o succesiune de documente.
link de ajutor către un document de ajutor.
pictograma specifică calea către pictograma care va fi utilizată pentru documentul curent.
last specifică o legătură către ultimul document dintr-o secvență de documente.
licență Un link către informațiile privind drepturile de autor pentru document.
în continuare indică faptul că acest document face parte dintr-o serie și că linkul indică următorul document din serie.

nofollow indică faptul că linkul nu este aprobat de autorul paginii sau că linkul este comercial.
noreferrer specifică că antetul cererii client care conține url-ul sursei solicitării nu trebuie transmis atunci când urmărește linkul.
pingback specifică adresa serverului de pingback, ceea ce permite blogului să notifice automat site-urile care leagă la acesta.
prefetch specifică faptul că fișierul la care se face referire trebuie să fie memorat în cache în prealabil.
prev indică faptul că acest document face parte dintr-o serie și că linkul indică documentul anterior din serie.

căutare indică faptul că documentul la care se face referire conține o interfață de căutare și resurse aferente.
bara laterală indică faptul că documentul legat, dacă este posibil, va fi afișat într-un context suplimentar de browser, iar unele browsere, când se face clic pe hyperlink, vor deschide o fereastră pentru adăugarea linkului la bara de marcaje.
foaia de stil este o referință la un fișier extern care va fi folosit ca foaie de stil pentru acest document.
eticheta indică faptul că eticheta la care duce hyperlinkul aparține acestui document.
sus indică faptul că pagina face parte dintr-o structură ierarhică și că hyperlinkul duce la o resursă de nivel superior în structură.
dimensiuni Specifică dimensiunea pictogramelor pentru afișarea vizuală. Atributul sizes este utilizat numai împreună cu rel="icon" și poate lua următoarele valori:
lățimi înălțime - specifică o listă de dimensiuni separate prin spații, fiecare dimensiune trebuie să fie în format - lățimi înălțime (dimensiunile pictogramei sunt specificate în pixeli), de exemplu:
;
orice - pictograma poate fi scalată la orice dimensiune.
titlu Specifică titlul link-ului sau numele setului de foi de stil alternative. Valoarea atributului este text.
tip Specifică tipul MIME al documentului la care se face legătura. În acest caz, ia valoarea „text/css” .
1.2.5. Element

Atribut	Descriere, valoare acceptată
origine încrucișată	Specifică dacă CORS (o tehnologie de browser care permite unei pagini web să acceseze resurse dintr-un alt domeniu) ar trebui utilizată atunci când preia o imagine de pe un site. anonim - într-o solicitare între domenii, browserul adaugă automat un antet Origin care conține numele domeniului din care a fost făcută cererea. Dacă serverul nu răspunde cu un antet CORS Access-Control-Allow-Origin: * (sau un nume de domeniu în loc de un asterisc), atunci imaginea va fi blocată de la încărcare. use-credentials - dacă serverul nu oferă acreditări cu Access-Control-Allow-Credentials: true , atunci imaginea va fi blocată de la încărcare.
href	Atributul principal al etichetei, valoarea este calea către fișierul cu stiluri.
hreflang	Specifică limba textului din documentul legat.
mass-media	Specifică tipul de dispozitiv la care urmează să fie aplicată resursa de legătură.
nonce	O variabilă șir generată aleatoriu de partea serverului care stabilește regulile de utilizare a stilurilor inline pentru a proteja conținutul. Valoarea atributului este un șir de text.
rel	Atributul definește relația dintre documentul curent și documentul referit. alternativ - un link către același document, dar într-un format diferit (de exemplu, pagini imprimabile, traducere, oglindă, flux RSS sau Atom), . arhivele indică faptul că documentul legat este de interes istoric. Linkul poate indica o colecție de înregistrări, documente și alte materiale. linkul autorului către pagina despre autorul documentului sau către pagina cu datele de contact ale autorului. marcaj O referire la cel mai apropiat strămoș al articolului care este linkul sau la secțiunea articolului cel mai strâns legată de element dacă nu există un strămoș. extern este folosit pentru a indica faptul că pagina legată nu face parte din acest site. mai întâi specifică o legătură către primul document dintr-o succesiune de documente. link de ajutor către un document de ajutor. pictograma specifică calea către pictograma care va fi utilizată pentru documentul curent. last specifică o legătură către ultimul document dintr-o secvență de documente. licență Un link către informațiile privind drepturile de autor pentru document. în continuare indică faptul că acest document face parte dintr-o serie și că linkul indică următorul document din serie. nofollow indică faptul că linkul nu este aprobat de autorul paginii sau că linkul este comercial. noreferrer specifică că antetul cererii client care conține url-ul sursei solicitării nu trebuie transmis atunci când urmărește linkul. pingback specifică adresa serverului de pingback, ceea ce permite blogului să notifice automat site-urile care leagă la acesta. prefetch specifică faptul că fișierul la care se face referire trebuie să fie memorat în cache în prealabil. prev indică faptul că acest document face parte dintr-o serie și că linkul indică documentul anterior din serie. căutare indică faptul că documentul la care se face referire conține o interfață de căutare și resurse aferente. bara laterală indică faptul că documentul legat, dacă este posibil, va fi afișat într-un context suplimentar de browser, iar unele browsere, când se face clic pe hyperlink, vor deschide o fereastră pentru adăugarea linkului la bara de marcaje. foaia de stil este o referință la un fișier extern care va fi folosit ca foaie de stil pentru acest document. eticheta indică faptul că eticheta la care duce hyperlinkul aparține acestui document. sus indică faptul că pagina face parte dintr-o structură ierarhică și că hyperlinkul duce la o resursă de nivel superior în structură.
dimensiuni	Specifică dimensiunea pictogramelor pentru afișarea vizuală. Atributul sizes este utilizat numai împreună cu rel="icon" și poate lua următoarele valori: lățimi înălțime - specifică o listă de dimensiuni separate prin spații, fiecare dimensiune trebuie să fie în format - lățimi înălțime (dimensiunile pictogramei sunt specificate în pixeli), de exemplu: ; orice - pictograma poate fi scalată la orice dimensiune.
titlu	Specifică titlul link-ului sau numele setului de foi de stil alternative. Valoarea atributului este text.
tip	Specifică tipul MIME al documentului la care se face legătura. În acest caz, ia valoarea „text/css” .

Limbajul HTML pentru începători. Bazele limbajului HTML

Structura documentului HTML

- tipul documentului (doctype)

- începutul documentului

Etichetă

Elemente de bază pentru cap și titlu

Editor Notepad++

element DOCTYPE

Editori pentru crearea paginilor html

exemple de cod html

Acest titlu este aliniat la centru.

Titlul de al doilea nivel este aliniat la centru.

CSS - care completează mecanismele html

Modalități de a include foi de stil CSS

Top articole similare