Βασικά στοιχεία HTML για αρχάριους. Βασικά στοιχεία HTML και CSS για αρχάριους. Πώς να μάθετε τη γλώσσα δωρεάν

Βασικά στοιχεία HTML Αυτοί είναι οι βασικοί κανόνες της γλώσσας HTML, η περιγραφή της δομής της σελίδας HTML, η σχέση στη δομή του εγγράφου HTML μεταξύ στοιχείων HTML.

Το έγγραφο HTML είναι ένα συνηθισμένο κείμενο κειμένου, μπορεί να δημιουργηθεί όπως στον συνήθη επεξεργαστή κειμένου. (Σημειωματάριο)και σε έναν εξειδικευμένο, με τον κώδικα φωτισμού (Notepad ++, κώδικας οπτικού στούντιο κ.λπ.). Το έγγραφο HTML έχει επέκταση .html.

Το έγγραφο HTML αποτελείται από ένα δέντρο στοιχείων HTML και κειμένου. Κάθε στοιχείο δηλώνεται στο αρχικό αρχικό έγγραφο (άνοιγμα) και την τελική (κλείσιμο) ετικέτα (με σπάνια εξαίρεση).

Εκκίνηση Δείχνει πού αρχίζει το στοιχείο, ο τελικός - όπου τελειώνει. Ετικέτα κλεισίματος Δημιουργείται με την προσθήκη μιας κοπής / πριν από το όνομα της ετικέτας:<имя тега> … . Μεταξύ των αρχικών και κλεισίματος ετικετών υπάρχει το περιεχόμενο της ετικέτας - περιεχόμενο.

Οι μονές ετικέτες δεν μπορούν να αποθηκεύουν απευθείας περιεχομένου, προδιαγράφεται ως τιμή χαρακτηριστικού, για παράδειγμα, ετικέτα Δημιουργήστε ένα κουμπί με κείμενο Κουμπί Μέσα.

Οι ετικέτες μπορούν να επενδυθούν μεταξύ τους, για παράδειγμα,

Κείμενο

. Κατά την επένδυση, πρέπει να ακολουθηθεί η σειρά του κλεισίματος τους. (Η αρχή της "Matryshka")Για παράδειγμα, η επόμενη καταχώρηση θα είναι εσφαλμένη:

Κείμενο

Τα στοιχεία HTML ενδέχεται να έχουν χαρακτηριστικά (συνολικά ισχύοντα για όλα τα στοιχεία HTML και τη δική τους). Τα χαρακτηριστικά γράφονται στην ετικέτα στοιχείου ανακάλυψης και περιέχουν το όνομα και την τιμή που καθορίζεται στη μορφή του ονόματος χαρακτηριστικών \u003d "τιμής". Τα χαρακτηριστικά σας επιτρέπουν να αλλάξετε τις ιδιότητες και τη συμπεριφορά του στοιχείου για την οποία καθορίζονται.

Κάθε στοιχείο μπορεί να εκχωρηθεί αρκετές τιμές κλάσης και μόνο μία τιμή ταυτότητας. Οι πολλαπλές τιμές κλάσης καταγράφονται μέσω χώρου,

. Οι τιμές τάξης και ταυτότητας πρέπει να αποτελούνται μόνο γράμματα, αριθμοί, παύλες και χαμηλότερες υπογραμμίσεις και θα πρέπει να ξεκινούν μόνο με γράμματα ή αριθμούς.

Η περιήγηση στο πρόγραμμα περιήγησης (ερμηνεύει) ένα έγγραφο HTML, δημιουργώντας τη δομή του (DOM) και το εμφανίζει σύμφωνα με τις οδηγίες που περιλαμβάνονται σε αυτό το αρχείο (στυλ, σενάρια). Εάν η σήμανση είναι σωστή, η σελίδα HTML που περιέχει στοιχεία HTML θα εμφανιστεί στο παράθυρο του προγράμματος περιήγησης - τίτλους, πίνακες, εικόνες, κλπ.

Διαδικασία διερμηνείας (ΤΕΧΝΟΛΟΓΙΑ) Ξεκινάει πριν η ιστοσελίδα είναι πλήρως φορτωμένη στο πρόγραμμα περιήγησης. Τα προγράμματα περιήγησης χειρίζονται τα έγγραφα HTML διαδοχικά, από την αρχή, ενώ επεξεργάζονται CSS και συσχετισμένα φύλλα στυλ με στοιχεία σελίδων.

Το έγγραφο HTML αποτελείται από δύο τμήματα - τίτλους - μεταξύ ετικετών … και ουσιαστικό μέρος - μεταξύ ετικετών …

.

Δομή ιστοσελίδας

1. Δομή εγγράφων HTML

Η γλώσσα HTML ακολουθεί τους κανόνες που περιέχονται στο αρχείο διαφημίσεων τύπου διαφήμισης εγγράφων. (Ορισμός τύπου εγγράφου ή DTD). Το DTD είναι ένα έγγραφο XML που καθορίζει ποιες ετικέτες, χαρακτηριστικά και οι τιμές τους ισχύουν για έναν συγκεκριμένο τύπο HTML. Κάθε έκδοση του HTML έχει το δικό της DTD.

Doctype. Υπεύθυνος για τη σωστή εμφάνιση του προγράμματος περιήγησης ιστοσελίδων. Ο Doctype ορίζει όχι μόνο την έκδοση HTML (για παράδειγμα, HTML), αλλά και το αντίστοιχο αρχείο DTD στο Internet.

...

Στοιχεία που βρίσκονται μέσα στην ετικέτα , σχηματίζουν ένα δέντρο ενός εγγράφου που ονομάζεται Λειτουργικό μοντέλο εγγράφου, DOM (μοντέλο αντικειμένου εγγράφου). Την ίδια στιγμή Είναι ένα στοιχείο ρίζας.

Σύκο. 1. Απλούστερη δομή ιστοσελίδας

Για να κατανοήσετε την αλληλεπίδραση των στοιχείων ιστοσελίδας, είναι απαραίτητο να εξεταστεί το λεγόμενο "Σχετική σχέση" Μεταξύ των στοιχείων. Η σχέση μεταξύ πολλαπλών μορφωμένων στοιχείων χωρίζεται σε γονέα, θυγατρικές και νοσηλεία.

Πρόγονος - ένα στοιχείο που εισέρχεται σε άλλα στοιχεία. Σχήμα 1, ο πρόγονος για όλα τα στοιχεία είναι . Την ίδια στιγμή Είναι ο πρόγονος για όλες τις ετικέτες που περιέχονται σε αυτό:

,
, ,
και τα λοιπά.

Απόγονος - ένα στοιχείο που βρίσκεται μέσα σε ένα ή περισσότερα είδη αντικειμένων. Για παράδειγμα, Είναι ένας απόγονος , και στοιχείο
Είναι ένας απόγονος ταυτόχρονα για και .

Γονικό στοιχείο - το στοιχείο που σχετίζεται με άλλα στοιχεία του κατώτερου επιπέδου και στο δέντρο πάνω από αυτά. Φιγούρα 1. και . Ετικέτα
Είναι ο γονέας μόνο για .

Κόρη στοιχείο - το στοιχείο άμεσα υποδεέστερα σε ένα άλλο στοιχείο υψηλότερου επιπέδου. Σχήμα 1 μόνο στοιχεία
,
,
ΚΑΙ
είναι θυγατρικές σε σχέση με .

Νοσηλευτικό στοιχείο - ένα στοιχείο που έχει ένα κοινό γονικό στοιχείο με τα αποκαλούμενα στοιχεία ενός επιπέδου. Φιγούρα 1. και - Στοιχεία ενός επιπέδου, καθώς και στοιχεία
,
και
Είναι μεταξύ των ίδιων η νοσηλευτική.

1.1. Στοιχείο

1.2. Στοιχείο

Ενότητα ... Περιέχει τεχνικές πληροφορίες σχετικά με τη σελίδα: Τίτλος, Περιγραφή, Λέξεις-κλειδιά για μηχανές αναζήτησης, κωδικοποίηση κ.λπ. Ωστόσο, οι πληροφορίες που εισάγονται σε αυτό δεν εμφανίζονται στο παράθυρο του προγράμματος περιήγησης, περιέχει τα δεδομένα που υποδεικνύει το πρόγραμμα περιήγησης τον τρόπο επεξεργασίας της σελίδας.

1.2.1. Στοιχείο </h4> <p>Υποχρεωτικό τμήμα ετικέτας <head> είναι ετικέτα <title> . Το κείμενο που βρίσκεται μέσα σε αυτήν την ετικέτα εμφανίζεται στη γραμμή τίτλου του προγράμματος περιήγησης ιστού. Το μήκος κεφαλίδας δεν πρέπει να είναι περισσότερο από 60 χαρακτήρες για να ταιριάζει πλήρως στον τίτλο. Το κείμενο κεφαλίδας πρέπει να περιέχει την πιο πλήρη περιγραφή των περιεχομένων της ιστοσελίδας.</p> <h4>1.2.2. Στοιχείο <meta></h4> <p>Προαιρετική τμηματική ετικέτα <head> είναι η ίδια ετικέτα <meta> . Με αυτό, μπορείτε να ορίσετε μια περιγραφή των περιεχομένων της σελίδας και των λέξεων-κλειδιών για τις μηχανές αναζήτησης, τον συντάκτη του εγγράφου HTML και άλλες ιδιότητες των μεταδεδομένων. Στοιχείο <head> Μπορεί να περιέχει πολλά στοιχεία <meta> Επειδή ανάλογα με τα χαρακτηριστικά που χρησιμοποιούνται, φέρουν διάφορες πληροφορίες.</p><p> <meta name="description" content="Περιγραφή περιεχομένου σελίδας"> <meta name="keywords" content="Λέξεις-κλειδιά μέσω ενός κόμματος"> </p><p>Η περιγραφή περιεχομένου της σελίδας και των λέξεων-κλειδιών μπορεί να υποδειχθεί ταυτόχρονα σε διάφορες γλώσσες, για παράδειγμα, στα ρωσικά και στα αγγλικά:</p><p> <meta name="description" lang="ru" content="Περιγραφή περιεχομένου σελίδας"> <meta name="description" lang="en" content="Περιγραφή."> <meta name="keywords" lang="ru" content="Λέξεις-κλειδιά μέσω ενός κόμματος"> <meta name="keywords" lang="en" content="Λέξεις-κλειδιά."> </p><p>Χρησιμοποιώντας ετικέτα <meta> Μπορείτε να απαγορεύσετε ή να επιτρέψετε την ευρετηρίαση της ιστοσελίδας από τις μηχανές αναζήτησης:</p> <p> <meta name="robots" content="index, follow"> </p><p> <meta name="robots" content="index, nofollow"> </p><p> <meta name="robots" content="noindex, nofollow"> </p><p>Για να επανεκκινήσετε αυτόματα τη σελίδα σε μια συγκεκριμένη χρονική περίοδο, πρέπει να χρησιμοποιήσετε την τιμή ανανέωσης:</p><p> <meta content="30"> </p><p>Η σελίδα θα επανεκκινηθεί μετά από 30 δευτερόλεπτα. Για να μεταφέρετε τον επισκέπτη σε άλλη σελίδα, πρέπει να καθορίσετε τη διεύθυνση URL στην παράμετρο URL:</p><p> <meta content="0; url=http://yandex.ru/"> </p><table class="t3"> Πίνακας 2. Χαρακτηριστικά ετικέτας <meta> <tbody><tr><th style="width: 20%;">Χαρακτηριστικό</th> <th></th> </tr><tr><td> Charset.</td> <td>Καθορίζει την κωδικοποίηση χαρακτήρων για το τρέχον έγγραφο HTML: <meta charset="UTF-8"> </td> </tr><tr><td> Περιεχόμενο</td> <td>Περιέχει αυθαίρετο κείμενο που καθορίζει την τιμή που σχετίζεται με το χαρακτηριστικό HTTP-Equiv ή ονόματος, ανάλογα με την αξία τους.</td> </tr><tr><td> Http-equiv.</td> <td>Ελέγχει τις ενέργειες του προγράμματος περιήγησης σε αυτήν την ιστοσελίδα (ισοδύναμο κεφαλής HTTP). Κατά την εμφάνιση της σελίδας, το πρόγραμμα περιήγησης θα ακολουθήσει τις οδηγίες που καθορίζονται στο χαρακτηριστικό: <br> Το προεπιλεγμένο στυλ καθορίζει το προτιμώμενο στυλ που χρησιμοποιείται στη σελίδα. Το χαρακτηριστικό περιεχομένου πρέπει να περιέχει ένα αναγνωριστικό στοιχείου <link> που αναφέρεται στον πίνακα στυλ CSS ή αναγνωριστικό στοιχείου<style> , содержащего таблицу стилей.<br> refresh указывает время в секундах до перезагрузки страницы или время до перенаправления на другую страницу, если в атрибуте content после указания времени идет строка "url=адрес_страницы" .<br> Автоматическая перезагрузка страницы через заданный промежуток времени, в данном примере, через 30 секунд:<br> <meta content="30"> <br> Если необходимо сразу перебросить посетителя на другую страницу, то можно указать URL-адрес в параметре url:<br> <meta content="0; url=http://mail.ru/"> </td> </tr><tr><td> name </td> <td>Ассоциируется со значением, содержащемся в атрибуте content . Не должен использоваться в случае, если для элемента уже заданы атрибуты http-equiv , charset или itemprop .<br> application-name указывает название веб-приложения, используемого на странице.<br> author указывает имя автора документа в свободном формате.<br> description определяет краткое описание к содержимому страницы, например:<br> <meta name="description" content="Описание содержимого страницы"> <br> generator указывает один из пакетов программного обеспечения, используемого для создания документа, например:<br> <meta name="generator" content="WordPress 4.0"> .<br> keywords содержит список ключевых слов, разделенных запятыми, соответствующих содержимому страницы, например:<br> <meta name="keywords" content="Ключевые слова через запятую"> .<br><i>Также атрибут name может принимать следующие значения из расширенной спецификации, такие как creator , googlebot , publisher , robots , slurp , viewport , хотя ни одно из них еще не было официально принято. </i> </td> </tr></tbody></table><h4>1.2.3. Элемент <style></h4> <p>Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.</p> <p>Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.</p><p> <style type="text/css"> .paper { width: 200px; height: 300px; background-color: #ef4444; color: #666666; } </p><p>Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:</p><p> <div class="paper"> ... </div> </p><p>CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style , например:</p><p> <h4>1.2.4. Элемент <link></h4> <p>Задать стили для документа можно также при помощи другого способа - записать их в отдельный файл с расширением.css , например, style.css .</p> <p>Подключить файл со стилями к веб-странице можно двумя способами:<br>через директиву @import url</p><p> <!DOCTYPE html> <html> <head> <style> @import url(style.css); </style> <meta> <title>
χρησιμοποιώντας το στοιχείο . Το στοιχείο δεν απαιτεί ετικέτα κλεισίματος. Αυτό το στοιχείο καθορίζει τη σχέση μεταξύ της τρέχουσας σελίδας και άλλων εγγράφων. Μπορεί να υπάρχουν πολλά τέτοια στοιχεία στη σελίδα. Το αρχείο θα έχει την ακόλουθη φόρμα:

Πίνακας 4. Χαρακτηριστικά ετικέτας

Χαρακτηριστικό Περιγραφή
Crossorigin. Καθορίζει αν πρέπει να χρησιμοποιηθούν οι Κορές (τεχνολογία προγράμματος περιήγησης που σας επιτρέπει να παρέχετε πρόσβαση σε ιστοσελίδα σε άλλους πόρους τομέα) κατά την εξαγωγή μιας εικόνας από την τοποθεσία.
Ανώνυμος - Στο ερώτημα στα διατομών, το πρόγραμμα περιήγησης προσθέτει αυτόματα την κεφαλίδα προέλευσης που περιέχει το όνομα τομέα από το οποίο πραγματοποιείται αίτημα. Εάν ο διακομιστής δεν απαντήσει στην προέλευση του ελέγχου ελέγχου πρόσβασης: * (ή το όνομα τομέα αντί των αστεριών), τότε το φορτίο εικόνας θα αποκλειστεί.
Χρήση-διαπιστευτήρια - Εάν ο διακομιστής δεν παρέχει διαπιστευτήρια χρησιμοποιώντας πιστοποιητικά ελέγχου πρόσβασης-ελέγχου πρόσβασης: TRUE, τότε το φορτίο εικόνας θα αποκλειστεί.
href. Το κύριο χαρακτηριστικό της ετικέτας, ως τιμή, είναι η διαδρομή προς το αρχείο με στυλ.
hreflang. Καθορίζει τη γλώσσα του κειμένου στο έγγραφο στο οποίο είναι ο σύνδεσμος.
Μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ Ορίζει τον τύπο της συσκευής στην οποία πρέπει να εφαρμοστεί ο πόρος αναφοράς.
Όχι Η Randing μεταβλητή που δημιουργήθηκε τυχαία στο διακομιστή, η οποία καθορίζει τους κανόνες για τη χρήση ενσωματωμένων στυλ για την προστασία του περιεχομένου. Αξία χαρακτηριστικού - Σειρά κειμένου.
El. Το χαρακτηριστικό καθορίζει τη σχέση μεταξύ του τρέχοντος εγγράφου και του εγγράφου που αναφέρεται.
Εναλλακτική - σύνδεση με το ίδιο έγγραφο, αλλά σε άλλη μορφή (για παράδειγμα, σελίδες εκτύπωσης, μετάφραση, καθρέφτη, κορδέλα σε μορφή RSS ή Atom),
.

Αρχεία - Υποδεικνύει ότι το έγγραφο σχετικά με τη σύνδεση αντιπροσωπεύει ιστορικό ενδιαφέρον. Ο σύνδεσμος μπορεί να υποδεικνύει μια συλλογή αρχείων, εγγράφων και άλλων υλικών.
Συγγραφέας Συγγραφέας στη σελίδα σχετικά με τον συγγραφέα του εγγράφου ή τη σελίδα με τα στοιχεία επικοινωνίας του συντάκτη.
Αναφορά σελιδοδεικτών στον πλησιέστερο πρόγονο του άρθρου, ο οποίος είναι ένας σύνδεσμος ή το τμήμα του άρθρου, που σχετίζονται περισσότερο με το στοιχείο, εάν δεν υπάρχει πρόγονος.
Το εξωτερικό χρησιμοποιείται για να υποδείξει ότι η σελίδα στην οποία ο σύνδεσμος δεν αποτελεί μέρος αυτού του ιστότοπου.
Καθορίζει πρώτα τον σύνδεσμο που οδηγεί στο πρώτο έγγραφο από την ακολουθία εγγράφων.
Βοηθήστε να αναφέρετε σε ένα έγγραφο με πιστοποιητικό.
Το εικονίδιο ορίζει τη διαδρομή προς το εικονίδιο που θα χρησιμοποιηθεί για το τρέχον έγγραφο.
Το τελευταίο καθορίζει τη σύνδεση που οδηγεί στο τελευταίο έγγραφο στην ακολουθία εγγράφων.
Αναφορά άδειας σε πληροφορίες πνευματικών δικαιωμάτων για το έγγραφο.
Στη συνέχεια υποδεικνύει ότι αυτό το έγγραφο είναι μέρος της σειράς και ότι ο σύνδεσμος οδηγεί στο ακόλουθο έγγραφο σε αυτή τη σειρά.

Το Nofollow δείχνει ότι ο σύνδεσμος δεν εγκρίνεται από τον συντάκτη της σελίδας ή ότι ο σύνδεσμος είναι εμπορικός.
Ο Noreferrer υποδεικνύει ότι η κεφαλίδα αιτήματος πελάτη που περιέχει τη διεύθυνση URL της πηγής αιτήσεως δεν πρέπει να μεταδίδεται κατά τη διάρκεια του συνδέσμου.
Το Pingback καθορίζει τη διεύθυνση του διακομιστή pingback, η οποία επιτρέπει στο blog να ειδοποιεί αυτόματα τους ιστότοπους που συνδέονται με αυτό.
Το Prefetch υποδεικνύει ότι το αρχείο πρέπει να διατηρείται εκ των προτέρων στο οποίο ο σύνδεσμος οδηγεί.
Προηγούμενη υποδεικνύει ότι το έγγραφο αυτό είναι μέρος της σειράς και ότι ο σύνδεσμος οδηγεί στο προηγούμενο έγγραφο σε αυτή τη σειρά.

Η αναζήτηση υποδεικνύει ότι το έγγραφο αναφοράς περιέχει τη διεπαφή αναζήτησης και τους σχετικούς πόρους.
Η πλευρική γραμμή υποδεικνύει ότι το έγγραφο αναφοράς, αν είναι δυνατόν, θα εμφανιστεί στο πρόσθετο πλαίσιο του προγράμματος περιήγησης και ορισμένα προγράμματα περιήγησης όταν κάνετε κλικ στην υπερσύνδεση ανοίξτε το παράθυρο για να προσθέσετε έναν σύνδεσμο στον πίνακα σελιδοδεικτών.
Το σύνδεσμο Stylesheet σε ένα εξωτερικό αρχείο που θα χρησιμοποιηθεί ως φύλλο στυλ για αυτό το έγγραφο.
Η ετικέτα υποδεικνύει ότι η ετικέτα στην οποία η υπερσύνδεση οδηγεί σε αυτό το έγγραφο.
Το UP δείχνει ότι η σελίδα είναι μέρος της ιεραρχικής δομής και ότι η υπερσύνδεση οδηγεί σε υψηλότερο επίπεδο πόρων στη δομή.
Μεγέθη. Καθορίζει το μέγεθος των εικονιδίων για την οπτική οθόνη. Το χαρακτηριστικό μεγέθους χρησιμοποιείται μόνο με rel \u003d "εικονίδιο" και μπορεί να λάβει τις ακόλουθες έννοιες:
Τα πλάτη είναι ύψος - ορίζει μια λίστα με τα μεγέθη που διαχωρίζονται από κενά, κάθε μέγεθος πρέπει να είναι στη μορφή - τα πλάτη του ύψους (οι διαστάσεις των εικονιδίων ρυθμίζονται σε εικονοστοιχεία), για παράδειγμα:
;
Οποιοδήποτε - το εικονίδιο μπορεί να κλιμακωθεί σε οποιοδήποτε μέγεθος.
Τίτλος Καθορίζει τον τίτλο του συνδέσμου ή το όνομα του συνόλου των πινάκων εναλλακτικών στυλ. Αξία χαρακτηρισμού - Κείμενο.
Τύπος Καθορίζει τον τύπο του εγγράφου MIME στο οποίο είναι ο σύνδεσμος. Σε αυτή την περίπτωση, παίρνει την αξία "κείμενο / css".
1.2.5. Στοιχείο

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

Элемент является родительским для элементов и , а они соответственно дочерними, так как находятся внутри тега … . Такая иерархия будет распространяться на все вложенные элементы документа.

Элемент

В теге … содержится техническая информация о web-странице: кодировка, заголовок, описание, ключевые слова, подключение таблицы стилей, шрифтов и т.д. То, что находится в этом разделе, не выводится в окне браузера, но эти данные указывают браузеру, как именно показать страницу.

Обязательным тегом, входящим в … , является … . Это заголовок всего документа, он отображается на открытой вкладке браузера и в результатах выдачи поисковых систем, в так называемом, сниппете, а его размер не должен превышать 60 символов. Тег очень важен для SEO-продвижения сайта.</p><p> <title>Заголовок всего документа
Тег считается необязательным элементом раздела , но он используется почти всегда. Этот тег является одинарным и не требует закрытия, как, например, … . С его помощью указываются метаданные страницы, о которых говорилось выше, еще всевозможные элементы разметки, закрытие от индексации и т.д.

Описание страницы задается с помощью атрибута name и его значения - description . Описание так же важно для продвижения сайта в поисковых системах.

На счет значения keywords ходит много споров, многие вебмастера считают, что на ключевые слова поисковые системы давно не обращают внимания и поэтому вообще их не прописывают, а другие утверждают обратное.

Атрибут charset указывает кодировку документа, на данный момент стоит UTF-8 .

Тег как и является одинарным, используется для определения отношения между текущим документом и другими файлами или, проще говоря, подключает содержимое стороннего файла к нашей странице, таких подключений может быть несколько. Так же может указывать каноничность документа.

Элемент

Элемент это основная часть документа, которая выводится в окне браузера, то есть, что находится в теге …

, показывается пользователю при открытии HTML-документа. В этом разделе прописываются разные теги и их атрибуты с разными значениями, о которых просто не реально рассказать в одной статье, поэтому я рекомендую сайт htmlbook.ru . На этом сайте вы найдете все теги HTML и CSS с примерами использования и подробным описанием каждого. Также рекомендую посмотреть бесплатные мини-курсы по сайтостроению . Эти курсы состоят из видеоуроков и позволяют более наглядно познакомится с написанием кода.

HTML (H ypert ext M arkup L anguage) is the code that is used to structure a web page and its content. For example, content could be structured within a set of paragraphs, a list of bulleted points, or using images and data tables. As the title suggests, this article will give you a basic understanding of HTML and its functions.

So what is HTML?

HTML is not a programming language; it is a markup language that defines the structure of your content. HTML consists of a series of elements , which you use to enclose, or wrap, different parts of the content to make it appear a certain way, or act a certain way. The enclosing for paragraph. Note that the end tag" s name is preceded by a slash character>", and that in empty elements the end tag is neither required nor allowed. If attributes are not mentioned, default values are used in each case.">tags can make a word or image hyperlink to somewhere else, can italicize words, can make the font bigger or smaller, and so on. For example, take the following line of content:
My cat is very grumpy
If we wanted the line to stand by itself, we could specify that it is a paragraph by enclosing it in paragraph tags:

My cat is very grumpy

Anatomy of an HTML element

Let"s explore this paragraph element a bit further.

The main parts of our element are as follows:

The opening tag: This consists of the name of the element (in this case, p), wrapped in opening and closing angle brackets . This states where the element begins or starts to take effect - in this case where the paragraph begins.

The closing tag: This is the same as the opening tag, except that it includes a forward slash before the element name. This states where the element ends - in this case where the paragraph ends. Failing to add a closing tag is one of the standard beginner errors and can lead to strange results.

The content: This is the content of the element, which in this case is just text.

The element: The opening tag, the closing tag, and the content together comprise the element.

Elements can also have attributes that look like the following:

Attributes contain extra information about the element that you don"t want to appear in the actual content. Here, class is the attribute name , and editor-note is the attribute value . The class attribute allows you to give the element an identifier that can be used later to target the element with style information and other things.

An attribute should always have the following:

A space between it and the element name (or the previous attribute, if the element already has one or more attributes).

The attribute name, followed by an equals sign.

The attribute value, wrapped by opening and closing quotation marks.

Note : Simple attribute values that don"t contain ASCII whitespace (or any of the characters " " ` = < >) can remain unquoted, but it is recommended that you quote all attribute values, as it makes the code more consistent and understandable.

Nesting elements

You can put elements inside other elements too - this is called nesting . If we wanted to state that our cat is very grumpy, we could wrap the word "very" in a ) indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type."> element, which means that the word is to be strongly emphasized:

My cat is very grumpy.

You do however need to make sure that your elements are properly nested: in the example above, we opened the element represents a paragraph.">
element first, then the ) indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type."> element; therefore, we have to close the ) indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type."> element first, then the element represents a paragraph.">
element. The following is incorrect:

My cat is very grumpy.

The elements have to open and close correctly so that they are clearly inside or outside one another. If they overlap as shown above, then your web browser will try to make the best guess at what you were trying to say, which can lead to unexpected results. So don"t do it!

Empty elements

Some elements have no content and are called empty elements . Take the element embeds an image into the document. It is a replaced element."> element that we already have in our HTML page:

This contains two attributes, but there is no closing tag and no inner content. This is because an image element doesn"t wrap content to affect it. Its purpose is to embed an image in the HTML page in the place it appears.

Anatomy of an HTML document

That wraps up the basics of individual HTML elements, but they aren"t handy on their own. Now we"ll look at how individual elements are combined to form an entire HTML page. Let"s revisit the code we put into our index.html example (which we first met in the Dealing with files article):
My test page

Here, we have the following:

- The doctype. In the mists of time, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However, these days no one cares about them, and they are just a historical artifact that needs to be included for everything to work right. For now, that"s all you need to know.

- the element represents the root (top-level element) of an HTML document, so it is also referred to as the root element. All other elements must be descendants of this element."> element. This element wraps all the content on the entire page and is sometimes known as the root element.

- the element contains machine-readable information (metadata) about the document, like its title, scripts, and style sheets."> element. This element acts as a container for all the stuff you want to include on the HTML page that isn"t the content you are showing to your page"s viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.

- This element sets the character set your document should use to UTF-8, which includes most characters from the vast majority of written languages. Essentially, it can now handle any textual content you might put on it. There is no reason not to set this, and it can help avoid some problems later on.

- the ) defines the document" s that is shown in a browser bar or page tab.> element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favourite it.</li> <li><body><script type="text/javascript">  </script><br> <br> </body> - the element. This contains <i>all </i> the content that you want to show to web users when they visit your page, whether that"s text, images, videos, games, playable audio tracks, or whatever else.</li> </ul><h2>Images</h2> <img src='https://i0.wp.com/images/firefox-icon.png' loading=lazy loading=lazy> <p>As we said before, it embeds an image into our page in the position it appears. It does this via the src (source) attribute, which contains the path to our image file.</p> <p>We have also included an alt (alternative) attribute. In this attribute, you specify descriptive text for users who cannot see the image, possibly because of the following reasons:</p> <ol><li>They are visually impaired. Users with significant visual impairments often use tools called screen readers to read out the alt text to them.</li> <li>Something has gone wrong causing the image not to display. For example, try deliberately changing the path inside your src attribute to make it incorrect. If you save and reload the page, you should see something like this in place of the image:</li> </ol><p><img src='https://i1.wp.com/mdn.mozillademos.org/files/9349/alt-text-example.png' height="36" width="108" loading=lazy loading=lazy></p> <p>The keywords for alt text are "descriptive text". The alt text you write should provide the reader with enough information to have a good idea of what the image conveys. In this example, our current text of "My test image" is no good at all. A much better alternative for our Firefox logo would be "The Firefox logo: a flaming fox surrounding the Earth."</p> <p>Try coming up with some better alt text for your image now.</p> <h2>Marking up text</h2> <p>This section will cover some of the essential HTML elements you"ll use for marking up the text.</p> <h3>Headings</h3> <p>Heading elements allow you to specify that certain parts of your content are headings - or subheadings. In the same way that a book has the main title, chapter titles, and subtitles, an HTML document can too. HTML contains 6 heading levels, <h1> – <h6> , although you"ll commonly only use 3 to 4 at most:</p><p> <h1>My main title</h1> <h2>My top level heading</h2> <h3>My subheading</h3> <h4>My sub-subheading</h4> </p><p>Now try adding a suitable title to your HTML page just above your element embeds an image into the document. It is a replaced element."> <img> element.</p> <p><b>Note </b>: You"ll see that your heading level 1 has an implicit style. Don"t use heading elements to make text bigger or bold, because they are used for accessibility and other reasons such as SEO . Try to create a meaningful sequence of headings on your pages, without skipping levels.</p> <h3>Paragraphs</h3> <h3>Lists</h3> <p>A lot of the web"s content is lists, and HTML has special elements for these. Marking up lists always consist of at least 2 elements. The most common list types are ordered and unordered lists:</p> <ol><li><b>Unordered lists </b> are for lists where the order of the items doesn"t matter, such as a shopping list. These are wrapped in a element represents an unordered list of items, typically rendered as a bulleted list."> <ul> element.</li> <li><b>Ordered lists </b> are for lists where the order of the items does matter, such as a recipe. These are wrapped in an element represents an ordered list of items, typically rendered as a numbered list."> <ol> element.</li> </ol><p><img src='https://i1.wp.com/mdn.mozillademos.org/files/9351/finished-test-page-small.png' width="100%" loading=lazy loading=lazy></p> <p>If you get stuck, you can always compare your work with our finished example code on GitHub.</p> <p>Here, we have only really scratched the surface of HTML. To find out more, go to our topic.</p> <p>Всем привет! Сегодня провел утро в объяснениях «на пальцах», как ручками прописывать текстовые ссылки и ссылки изображения. Думаю, что начальные знания HTML никому не помешают, поэтому кратенько изложу основную суть HTML. Чтобы, так сказать, начинающие SEO оптимизаторы и блогеры имели представление об этом языке и о том, как построены страницы.</p> <h2>Что такое HTML?</h2> <p>HTML расшифровывается, как язык гипертекстовой разметки. Это компьютерный язык, используемый для создания документов в интернете. Эти документы представляют собой текстовые файлы, содержащие ваш контент (текст, изображения, видео и т.д.) и HTML теги, используемые для структурирования этого содержимого. Браузеры читают страницу, а HTML и HTML-теги говорят им, что и как показать. HTML-теги не отображаются в браузере. Все теги начинаются с левой стороны значком меньше «<» и заканчиваются значком больше «>» . Чтобы построить базовую HTML страницу вам потребуется текстовый редактор Notepad++ (на мой взгляд лучший) либо любой простой текстовый редактор на выбор TextEdit, TextWrangler, SimpleText, TextPad или даже Блокнот. Так же существуют специализированные программы, которые упрощают жизнь вебмастерам, такие как Adobe Dreamweaver, но это не обязательно. Не используйте <a href="https://comuedu.ru/el/computer/sohranenie-dokumenta-v-programme-microsoft-word-sohranenie-dokument-v-word.html">Microsoft Word</a>! HTML не чувствительны к регистру.</p> <h2>Подробнее о HTML-тегах</h2> <p>Есть два вида тегов: контейнерные и пустые. </p> <ul><li>Контейнерный тег «оборачивает» текст или изображение и должен состоять из открывающего и закрывающего тега, такие как <html> … </ html> . Закрывающий тег имеет косую черту / говоря браузеру, что тег закончился.</li> <li>Пустой тег стоит особняком, такой как <br> для разрыва строки или <hr> для горизонтальной линии. Пустые теги не требуют закрывающего тега, поскольку они ничего не «оборачивают».</li> </ul><h2>Как создать страницу HTML</h2> <p>Чтобы с чего-нибудь начать, предлагаю взглянуть на очень простой шаблон HTML.</p> <p><html> <br> <head> <br> <title> Название сайта либо страницы </ title> <br> </ head> <br> <body> <br> Основной контент страницы <br> </ body> <br> </ html></p> <p>Обратите внимание на то, что когда мы открываем тег, мы должны <b>обязательно </b> закрыть его. HTML документы делятся на две основные части — голова (head) и тело (body). <html> тег сообщает браузеру, что это HTML документ. <head> тег включает в себя информацию о документе, такую как:</p> <ul><li>заголовок страницы — тег <title> , который появляется в браузерах, в названии вкладки</li> <li>тег автора — <author></li> <li>тег ключевых слов — <keywords></li> <li>тег описания — <description>и т.д.</li> </ul><p>Здесь же подключаются файлы стилей (CSS)? но это уже для более продвинутых товарищей. Наконец, тег <body>, который содержит весь контент страницы сайта: текст, изображения, графики, и т.д.</p> <h2>Создание первой HTML страницы</h2> <p>Откройте текстовый редактор и вставьте следующий код в новый документ:</p> <p><html> <br> <head> <br> <title> Моя первая веб страница </ title> <br> </ head> <br> <body> <br> Обучение HTML<br> Здравствуйте!<br> Это моя первая веб-страница.<br> Я учусь основам HTML и тегам заголовков<br> HTML ОСНОВЫ</p><p> </ body> <br> </ html></p> <p>Должно выглядеть вот таким образом:</p> <p>Сохраните файл как example.html на рабочий стол. Откройте файл в веб-браузере, чтобы увидеть, как он преобразует теги. Это будет выглядеть довольно скучно, на данном этапе, но это только начало.</p> <p>Можно немного и приукрасить:).</p> <h2>Форматирование текста</h2> <p>Мы можем добавлять теги к тексту, чтобы добавить ему больше структуры. На первом этапе выделим заголовки, абзацы, разрывы строк и горизонтальную линию, но обо всем по порядку.</p> <h3>Рубрики</h3> <p>Есть 6 уровней заголовков в HTML, они определяют уровень важности. Например на блоге, ваше название статьи может быть h1 тегом, в то время, как названия абзацев вашего поста могут быть h2 или h3 тегами. Например:</p> <p><h1> Заголовок h1 </h1> <br> <h2> Заголовок h2 </h2> <br> <h3> Заголовок h3 </h3></p> <h3>Пункты</h3> <p>Для отдельных участков текста можно использовать <p>Тег для добавления пробела между параграфами.</p> <p><p>Параграф </p></p> <h3>Разрыв строк</h3> <p>Чтобы добавить один разрыв строки используем пустой тег <br>, то есть его не надо закрывать /. Это создает пустую строку и отправляет следующий код на следующую строку.</p> <h3>Горизонтальная линия</h3> <p>Чтобы создать горизонтальную линию поперек вашей странице мы используем тег </span> <span><hr>. </p> <h2>Как добавить форматирование текста на страницу?</h2> <p>Откройте example.html в текстовом редакторе снова и добавляйте форматирование текста следующим образом:</p> <p><img src='https://i1.wp.com/promotiger.ru/wp-content/uploads/2014/05/my_html_pages_1.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>В результате этих телодвижений получаем следующее:</p> <p><img src='https://i0.wp.com/promotiger.ru/wp-content/uploads/2014/05/my_html_1.png' align="center" width="100%" loading=lazy loading=lazy></p> <p>Уже приятнее глазу.</p> <p>Вот абсолютные основы HTML и, вероятно, самая скучная часть! </span><span>Я планирую в будущих постах немного развить данную тему, т.к. любому SEO специалисту в конце-концов приходится сталкиваться с основами HTML. </p> <p>Этот раздел сайта полностью посвящен двум языкам создания сайта, а именно HTML и CSS. Здесь вы сможете поэтапно изучить языки, узнать все от основ до самых сложных моментов.</p> <p>Данный раздел построен по принципу пошагового изучения материала, поэтому перед каждым названием урока по HTML и CSS, стоит цифра соответствующая порядковому номеру урока. Это естественно на тот случай если вы хотите изучить все от самых основ и не сделать себе кашу в голове. Если же вы уже знаете, что-либо о языках HTML и CSS, то вы так же можете найти здесь недостающие вам знания, или же, углубить уже изученное.</p> <p>В данном разделе размещены уроки по стандартам языка HTML5 и CSS3, соответственно, если же будут какие либо более новые версии данных языков, они так же будут отражены в новых уроках этого раздела, и вы обязательно узнаете .</p> <br><br><img src='https://i1.wp.com/for-net.ru/src/htmlcss/ico_first.png' height="115" width="220" loading=lazy loading=lazy><p>Наверное, каждый человек, который хоть раз в своей жизни сталкивался с созданием сайта, безусловно, слышал о такой связке как html и css я могу с уверенностью заявить, что если вы хотите делать сайты самостоятельно, то вам ни как не обойтись без знаний этих двух вещей.</p> <h3></h3> <img src='https://i1.wp.com/for-net.ru/src/htmlcss/ico_first_html.jpg' height="140" width="220" loading=lazy loading=lazy><p>После того как вы получили общие понятия о том, что такое html у вас в голове, явно сложилась неоднозначная картина, и я думаю это не удивительно. Пора переходить непосредственно к практике и создать-таки свой первый html документ.</p> <h3></h3> <img src='https://i0.wp.com/for-net.ru/src/htmlcss/ico_first_css.jpg' height="140" width="220" loading=lazy loading=lazy><p>Как и в языке html, так и в CSS есть свои особенности, правила и структура. В этом уроке я расскажу вам об основных понятиях языка CSS, о его структуре, устройстве и мы сделаем с вами первую CSS таблицу стилей и узнаете, как подключить таблицу стилей к html документу.</p> <h3></h3> <p>Селекторы в CSS являются основой самого языка и их изучение и понимание очень важно, поэтому в этом уроке я вам расскажу еще о нескольких видах селекторах и опишу их возможности.</p> <h3></h3> <p>Очень важным моментом в создании сайта, является работа с текстом, и как вы понимаете, с текстом в html так же необходимо уметь работать, и знать какие теги бывают и как их можно использовать.</p> <h3></h3> <p>После того как вы узнали все html теги для работы с текстом, теперь пора перейти непосредственно к CSS работе с текстом, которая уже значительно расширит ваши познания и возможности.</p> <h3></h3> <p>В CSS огромное количество всевозможных удобных и качественно меняющих <a href="https://comuedu.ru/el/windows/vidy-naushnikov-i-kak-ih-vybrat-dlya-kompyutera-kakie-vidy-naushnikov-byvayut.html">внешний вид</a> свойств и мы продолжаем изучать CSS работу с текстом и в этом уроке, мы углубимся в тему работы с текстом и рассмотрим новые свойства текста.</p> <h3></h3> <p>Работа с изображениями при создании с сайта, один из ключевых моментов, как при создании дизайна, также при простой верстке или написании каких либо материалов для вашего сайта.</p> <h3></h3> <p>CSS значительно расширяет возможности работы с любыми объектами html, в этом уроке я хотел бы вам подробно рассказать о тех параметрах которые можно применять к изображениям.</p> <script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+""+screen.height+""+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+ ";"+Math.random()+ "border='0' width='1' height='1' loading=lazy loading=lazy>");</script> </div> <div class="data"> <div class="datatop clearfix"> <div class="dataprint"> <a href='javascript:window.print(); void 0;'> Τυπώνω</a> </div> </div> <div class="databottom clearfix"> <div class="datashare"> <script src="//yastatic.net/es5-shims/0.0.2/es5-shims.min.js"></script> <script src="//yastatic.net/share2/share.js"></script> <div class="ya-share2" data-services="vkontakte,facebook,odnoklassniki,moimir,gplus,twitter,evernote,whatsapp,skype"></div> </div> </div> </div> <div class="navi"> <a href="https://comuedu.ru/el/windows/skachat-prilozhenie-taksi-draiver-dlya-voditelei-voditelskie-terminaly-maxima-taxi.html" class="navi__prev"></a>  <a href="https://comuedu.ru/el/routers/obnulenie-akkumulyatora-kak-otkalibrovat-batareyu-na-androide.html" class="navi__next"></a>  </div> </div> </div> <div class="news-blocks clearfix"> <div class="news-block"> <div class="papers"> <div class="paperstitle">Επίσης ενδιαφέρον:</div> <div class="papersitems"> <style> </style> <div class="papersitem"> <div class="papersimg"> <a href="https://comuedu.ru/el/apple/kalibrovka-akkumulyatora-telefona-android-sposoby.html"><img src="/uploads/526b5d8f9bbe376f5a3dc72ba541f3b7.jpg" style="width:70px; height:70px;" / loading=lazy loading=lazy></a> </div> <div class="papersovh"> <div class="papersname"> <a href="https://comuedu.ru/el/apple/kalibrovka-akkumulyatora-telefona-android-sposoby.html">Μέθοδοι για τη διεξαγωγή βαθμονόμησης για την μπαταρία Tablet στο Android OS</a> </div> <div class="paperscategory"> </div> </div> </div> <div class="papersitem"> <div class="papersimg"> <a href="https://comuedu.ru/el/linux/pochemu-ya-ne-mogu-ustanovit-prilozhenie-pochemu-ne-ustanavlivaetsya.html"><img src="/uploads/56c647224f58d2e0a7e13af54f59c117.jpg" style="width:70px; height:70px;" / loading=lazy loading=lazy></a> </div> <div class="papersovh"> <div class="papersname"> <a href="https://comuedu.ru/el/linux/pochemu-ya-ne-mogu-ustanovit-prilozhenie-pochemu-ne-ustanavlivaetsya.html">Γιατί η εφαρμογή στην εφαρμογή Android δεν έχει εγκατασταθεί</a> </div> <div class="paperscategory"> </div> </div> </div> <div class="papersitem"> <div class="papersimg"> <a href="https://comuedu.ru/el/internet/smartfon-alcatel-one-touch---otzyvy-i-obzor-alcatel-smartfony-alkatel-one-touch-idol-h.html"><img src="/uploads/889e6a69126f726962d954dd112ad288.jpg" style="width:70px; height:70px;" / loading=lazy loading=lazy></a> </div> <div class="papersovh"> <div class="papersname"> <a href="https://comuedu.ru/el/internet/smartfon-alcatel-one-touch---otzyvy-i-obzor-alcatel-smartfony-alkatel-one-touch-idol-h.html">Alcatel Smartphones Alcatel One Touch Idol X: Χαρακτηριστικά και σχόλια</a> </div> <div class="paperscategory"> </div> </div> </div> </div> </div> </div> <div class="news-block"> <div class="papers"> <div class="paperstitle">Σας συνιστούμε να διαβάζετε:</div> <div class="papersitems"> <div class="papersitem"> <div class="papersimg"> <a href="https://comuedu.ru/el/the-device/melodiya-zvonka-na-zte-melodiya-zvonka-na-zte-smena-melodii-zvonka-cherez.html"> <img width="50" height="50" src="/uploads/6e77f1236e930371ee0e153f702925bc.jpg" class="attachment-50 size-50 wp-post-image" alt="Ringtone Ringtone σε ZTE Αλλαγή κλήσης μελωδία μέσω των τυπικών ρυθμίσεων του λειτουργικού συστήματος Smartphone ZTE" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papersovh"> <div class="papersdate">2021-05-12 09:05:55</div> <div class="papersname"> <a href="https://comuedu.ru/el/the-device/melodiya-zvonka-na-zte-melodiya-zvonka-na-zte-smena-melodii-zvonka-cherez.html">Ringtone Ringtone σε ZTE Αλλαγή κλήσης μελωδία μέσω των τυπικών ρυθμίσεων του λειτουργικού συστήματος Smartphone ZTE</a> </div> </div> </div> <div class="papersitem"> <div class="papersimg"> <a href="https://comuedu.ru/el/smartphone/hard-reset-lg-l5-e612-kak-sbrosit-nastroiki-lg-do-zavodskih-nastroek.html"> <img width="50" height="50" src="/uploads/58be13d965656aab2ca5ba96defaa360.jpg" class="attachment-50 size-50 wp-post-image" alt="Πώς να επαναφέρετε τις ρυθμίσεις LG στις εργοστασιακές ρυθμίσεις: Οδηγίες και συστάσεις" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papersovh"> <div class="papersdate">2021-05-12 09:05:55</div> <div class="papersname"> <a href="https://comuedu.ru/el/smartphone/hard-reset-lg-l5-e612-kak-sbrosit-nastroiki-lg-do-zavodskih-nastroek.html">Πώς να επαναφέρετε τις ρυθμίσεις LG στις εργοστασιακές ρυθμίσεις: Οδηγίες και συστάσεις</a> </div> </div> </div> <div class="papersitem"> <div class="papersimg"> <a href="https://comuedu.ru/el/network/pervyi-rossiiskii-brendovyi-planshet-proshivka-plansheta-bilain-m2.html"> <img width="50" height="50" src="/uploads/1029db9e8e645508bf012f0af7584657.jpg" class="attachment-50 size-50 wp-post-image" alt="Υλικολογισμικό tablet beeline m2 beeline m2 firmware κατεβάσετε βήμα προς βήμα" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papersovh"> <div class="papersdate">2021-05-12 09:05:55</div> <div class="papersname"> <a href="https://comuedu.ru/el/network/pervyi-rossiiskii-brendovyi-planshet-proshivka-plansheta-bilain-m2.html">Υλικολογισμικό tablet beeline m2 beeline m2 firmware κατεβάσετε βήμα προς βήμα</a> </div> </div> </div> </div> </div> </div> </div> <div class="rate clearfix"> <div class="paperstitle">Συνεχίζοντας το θέμα:</div> </div> <div class="rate clearfix"> <div class="rateimg"> <a href="https://comuedu.ru/el/linux/gde-nahodyatsya-sms-na-android-gde-hranyatsya-moi-mms-gde-v-lenovo-hranyatsya-faily.html"> <img width="150" height="150" src="/uploads/4ac98e74f323dfcbc61d74737b35defe.jpg" class="attachment-alm-thumbnail size-alm-thumbnail wp-post-image" alt="Πού είναι το SMS στο Android;" sizes="(max-width: 150px) 100vw, 150px" / loading=lazy loading=lazy> </a> </div> <div class="rateovh"> <div class="ratelabel"> <span>Linux.</span> </div> <div class="ratename"> <a href="https://comuedu.ru/el/linux/gde-nahodyatsya-sms-na-android-gde-hranyatsya-moi-mms-gde-v-lenovo-hranyatsya-faily.html">Πού είναι το SMS στο Android;</a> </div> <div class="ratedescription"> <p>Ο χρήστης στην ορολογία των προδιαγραφών) είναι ένα λογισμικό στο πλάι του συνδρομητή, το οποίο σας επιτρέπει να λαμβάνετε, να στείλετε, να δείτε και να επεξεργαστείτε ...</p> </div> </div> </div>  </div> <div class="button-menu"></div> <div class="pageright"> <div class="menu"> <div class="menuexit">×</div> <ul> <li><a href="https://comuedu.ru/el/category/wi-fi/" class="link-catalog">Wi-fi</a> </li> <li><a href="https://comuedu.ru/el/category/linux/" class="link-catalog">Linux.</a> </li> <li><a href="https://comuedu.ru/el/category/windows/" class="link-catalog">Παράθυρα</a> </li> <li><a href="https://comuedu.ru/el/category/different/" class="link-catalog">παραπομπή</a> </li> <li><a href="https://comuedu.ru/el/category/network/" class="link-catalog">Δίκτυο</a> </li> <li><a href="https://comuedu.ru/el/category/smart-tv/" class="link-catalog">Εξυπνη τηλεόραση.</a> </li> <li><a href="https://comuedu.ru/el/category/solutions/" class="link-catalog">Λύσεις</a> </li> <li><a href="https://comuedu.ru/el/category/android/" class="link-catalog">Ανδροειδής</a> </li> </ul> </div> <div id="husevi1" style="height:400px;width:290px;" align="center"></div> <div class="pagehidden-mobile"> <div class="papers"> <div class="paperstabs"> <div class="active" data-eq="0">Νέα άρθρα</div> <span>/</span> <div data-eq="1">Δημοφιλής</div> </div> <div class="papersblocks"> <div class="papersblock active"> <div class="papersitems"> <div class="papersitem"> <div class="papersimg"> <a href="https://comuedu.ru/el/program/na-kakih-ustroistvah-izobrazhen-zelenyi-chelovechek-android-chto.html"> <img width="50" height="50" src="/uploads/971946661e5d35161e26c57159175afe.jpg" class="attachment-50 size-50 wp-post-image" alt="Τι να κάνετε εάν το δισκίο δεν ενεργοποιηθεί" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papersovh"> <div class="papersdate">2021-05-12 09:05:55</div> <div class="papersname"> <a href="https://comuedu.ru/el/program/na-kakih-ustroistvah-izobrazhen-zelenyi-chelovechek-android-chto.html">Τι να κάνετε εάν το δισκίο δεν ενεργοποιηθεί</a> </div> <div class="paperscategory"> <a href="https://comuedu.ru/el/category/program/">Προγράμματα</a> </div> </div> </div> <div class="papersitem"> <div class="papersimg"> <a href="https://comuedu.ru/el/solutions/gde-naiti-mms-na-androide-gde-hranyatsya-moi-mms-gde-v-hranyatsya.html"> <img width="50" height="50" src="/uploads/5a8235744c365158e56dc528a4dd95dc.jpg" class="attachment-50 size-50 wp-post-image" alt="Πού να βρείτε MMS στο Android" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papersovh"> <div class="papersdate">2021-05-12 09:05:55</div> <div class="papersname"> <a href="https://comuedu.ru/el/solutions/gde-naiti-mms-na-androide-gde-hranyatsya-moi-mms-gde-v-hranyatsya.html">Πού να βρείτε MMS στο Android</a> </div> <div class="paperscategory"> <a href="https://comuedu.ru/el/category/solutions/">Λύσεις</a> </div> </div> </div> <div class="papersitem"> <div class="papersimg"> <a href="https://comuedu.ru/el/windows/prilozhenie-lenovo-launcher-ne-otvechaet-lenovo-launcher-ne-otvechaet-chto-delat-esli.html"> <img width="50" height="50" src="/uploads/f41ff3d42bc2085c93748a70aab51d4f.jpg" class="attachment-50 size-50 wp-post-image" alt="Το Lenovo Launcher δεν απαντά" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papersovh"> <div class="papersdate">2021-05-12 09:05:55</div> <div class="papersname"> <a href="https://comuedu.ru/el/windows/prilozhenie-lenovo-launcher-ne-otvechaet-lenovo-launcher-ne-otvechaet-chto-delat-esli.html">Το Lenovo Launcher δεν απαντά</a> </div> <div class="paperscategory"> <a href="https://comuedu.ru/el/category/windows/">Παράθυρα</a> </div> </div> </div> <div class="papersitem"> <div class="papersimg"> <a href="https://comuedu.ru/el/linux/telefon-ne-zahodit-v-plei-market-chto-delat-esli-otsutstvuet.html"> <img width="50" height="50" src="/uploads/74b2809684c4941cbbb3d74d22343bf5.jpg" class="attachment-50 size-50 wp-post-image" alt="Τι γίνεται αν δεν υπάρχει σύνδεση;" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papersovh"> <div class="papersdate">2021-05-12 09:05:55</div> <div class="papersname"> <a href="https://comuedu.ru/el/linux/telefon-ne-zahodit-v-plei-market-chto-delat-esli-otsutstvuet.html">Τι γίνεται αν δεν υπάρχει σύνδεση;</a> </div> <div class="paperscategory"> <a href="https://comuedu.ru/el/category/linux/">Linux.</a> </div> </div> </div> <div class="papersitem"> <div class="papersimg"> <a href="https://comuedu.ru/el/routers/udalyayutsya-faily-s-sd-reshenie-problemy-s-failami-na-karte.html"> <img width="50" height="50" src="/uploads/62940de7b81042283db6af376889c6f9.jpg" class="attachment-50 size-50 wp-post-image" alt="Επίλυση των προβλημάτων του αρχείου στην κάρτα μνήμης" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papersovh"> <div class="papersdate">2021-05-12 09:05:55</div> <div class="papersname"> <a href="https://comuedu.ru/el/routers/udalyayutsya-faily-s-sd-reshenie-problemy-s-failami-na-karte.html">Επίλυση των προβλημάτων του αρχείου στην κάρτα μνήμης</a> </div> <div class="paperscategory"> <a href="https://comuedu.ru/el/category/routers/">Δρομολογητές</a> </div> </div> </div> <div class="papersitem"> <div class="papersimg"> <a href="https://comuedu.ru/el/routers/kak-delat-skrin-na-filips-ksenium-kak-delat-skrinshot-na-android.html"> <img width="50" height="50" src="/uploads/a2d02915b255fd384f54e0329b9eabfc.jpg" class="attachment-50 size-50 wp-post-image" alt="Πώς να κάνετε το στιγμιότυπο οθόνης στο Android: Πιθανοί τρόποι" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a> </div> <div class="papersovh"> <div class="papersdate">2021-05-12 09:05:55</div> <div class="papersname"> <a href="https://comuedu.ru/el/routers/kak-delat-skrin-na-filips-ksenium-kak-delat-skrinshot-na-android.html">Πώς να κάνετε το στιγμιότυπο οθόνης στο Android: Πιθανοί τρόποι</a> </div> <div class="paperscategory"> <a href="https://comuedu.ru/el/category/routers/">Δρομολογητές</a> </div> </div> </div> </div> </div> <div class="papersblock"> <div class="papersitems"> <div class="papersitem"> <div class="papersimg"><a href="https://comuedu.ru/el/apple/kak-sdelat-skrinshot-na-kompyutere-i-mobilnom-ustroistve-kak-na-telefone-ili.html"> <img width="50" height="50" src="/uploads/988216399dc634d8cf2b81398a9ef89b.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="Πώς τα στιγμιότυπα οθόνης γίνονται στο τηλέφωνο ή το tablet και όπου αποθηκεύονται πώς να κάνουν μια οθόνη στο Phillips Xenium" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a></div> <div class="papersovh"> <div class="papersname"> <a href="https://comuedu.ru/el/apple/kak-sdelat-skrinshot-na-kompyutere-i-mobilnom-ustroistve-kak-na-telefone-ili.html">Πώς τα στιγμιότυπα οθόνης γίνονται στο τηλέφωνο ή το tablet και όπου αποθηκεύονται πώς να κάνουν μια οθόνη στο Phillips Xenium</a> </div> <div class="paperscategory"><a href="https://comuedu.ru/el/category/apple/" rel="tag">μήλο</a></div> </div> </div> <div class="papersitem"> <div class="papersimg"><a href="https://comuedu.ru/el/different/v-iphone-ne-fokusiruetsya-kamera---prichiny-i-chto-delat-sboi-kamery-na.html"> <img width="50" height="50" src="/uploads/db0440d8f7929dc7cb7dd24530fe8b4d.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="Αποτυχία κάμερας"Самсунге": методы устранения Почему не фокусируется камера на самсунг галакси" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a></div> <div class="papersovh"> <div class="papersname"> <a href="https://comuedu.ru/el/different/v-iphone-ne-fokusiruetsya-kamera---prichiny-i-chto-delat-sboi-kamery-na.html">Αποτυχία κάμερας στο "Samsung": Μέθοδοι εξάλειψης Γιατί η κάμερα δεν εστιάζει στο Samsung Galaxy</a> </div> <div class="paperscategory"><a href="https://comuedu.ru/el/category/different/" rel="tag">παραπομπή</a></div> </div> </div> <div class="papersitem"> <div class="papersimg"><a href="https://comuedu.ru/el/solutions/kak-ubrat-vlagu-iz-pod-zashchitnogo-stekla-steklo-ne-kleitsya-po-krayam.html"> <img width="50" height="50" src="/uploads/c1acd9c6b862bfe18571021fba15aaf9.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="Γυαλί δεν κολλάει γύρω από τις άκρες" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a></div> <div class="papersovh"> <div class="papersname"> <a href="https://comuedu.ru/el/solutions/kak-ubrat-vlagu-iz-pod-zashchitnogo-stekla-steklo-ne-kleitsya-po-krayam.html">Γυαλί δεν κολλάει γύρω από τις άκρες</a> </div> <div class="paperscategory"><a href="https://comuedu.ru/el/category/solutions/" rel="tag">Λύσεις</a></div> </div> </div> <div class="papersitem"> <div class="papersimg"><a href="https://comuedu.ru/el/network/chto-luchshe-kabelnoe-ili-sputnikovoe-televidenie-chto-luchshe-vybrat.html"> <img width="50" height="50" src="/uploads/139e6eefc40448c1677cc803a949a730.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="Τι είναι καλύτερο να επιλέξετε: Δορυφορική ή καλωδιακή τηλεόραση;" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a></div> <div class="papersovh"> <div class="papersname"> <a href="https://comuedu.ru/el/network/chto-luchshe-kabelnoe-ili-sputnikovoe-televidenie-chto-luchshe-vybrat.html">Τι είναι καλύτερο να επιλέξετε: Δορυφορική ή καλωδιακή τηλεόραση;</a> </div> <div class="paperscategory"><a href="https://comuedu.ru/el/category/network/" rel="tag">Δίκτυο</a></div> </div> </div> <div class="papersitem"> <div class="papersimg"><a href="https://comuedu.ru/el/the-device/ne-poluchaetsya-zaregistrirovatsya-v-aske-icq-registraciya.html"> <img width="50" height="50" src="/uploads/ce29c2842d584c59315e7ba02ddaf708.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="Εγγραφή ICQ - Απλά βήματα εγγραφής" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a></div> <div class="papersovh"> <div class="papersname"> <a href="https://comuedu.ru/el/the-device/ne-poluchaetsya-zaregistrirovatsya-v-aske-icq-registraciya.html">Εγγραφή ICQ - Απλά βήματα εγγραφής</a> </div> <div class="paperscategory"><a href="https://comuedu.ru/el/category/the-device/" rel="tag">συσκευές</a></div> </div> </div> <div class="papersitem"> <div class="papersimg"><a href="https://comuedu.ru/el/network/ochumelye-ruchki-podstavka-dlya-noutbuka-v-pomoshch-noutbuku-podstavka.html"> <img width="50" height="50" src="/uploads/e152344ed6f4354d744070e35c386166.jpg" class="attachment-50x50 size-50x50 wp-post-image" alt="Τρελά χέρια. Σταθμός σημειωματάριων. Για να βοηθήσετε το laptop: Σταθείτε τα χέρια σας για μισή ώρα ψύξης στάση για φορητό υπολογιστή με τα χέρια σας" sizes="(max-width: 50px) 100vw, 50px" / loading=lazy loading=lazy> </a></div> <div class="papersovh"> <div class="papersname"> <a href="https://comuedu.ru/el/network/ochumelye-ruchki-podstavka-dlya-noutbuka-v-pomoshch-noutbuku-podstavka.html">Τρελά χέρια. Σταθμός σημειωματάριων. Για να βοηθήσετε το laptop: Σταθείτε τα χέρια σας για μισή ώρα ψύξης στάση για φορητό υπολογιστή με τα χέρια σας</a> </div> <div class="paperscategory"><a href="https://comuedu.ru/el/category/network/" rel="tag">Δίκτυο</a></div> </div> </div> </div> </div> </div> </div> <div class="comments"> <div id="husevi2" class="husevi-sticky" style="height:500px;width:254px;" align="center"></div> </div> </div> </div> </div> </div> </div> <div class="footer"> <div class="footertop"> <div class="cnt"> <div class="footernav"> <ul> <li><a href="">Επαφές</a></li> <li><a href="">Διαφήμιση</a></li> <li><a href="">Σχετικά με τον ιστότοπο</a></li> </ul> </div> <div class="footercounter"> </div> <div class="footerlogo1" align="right"> <img style="max-height:60px;" src="/assets/logo.png" alt="" loading=lazy loading=lazy> </div> </div> </div> <div class="footerbottom"> <div class="cnt"> <div class="footer__copyright"> © comedu.ru 2021 Ιστοσελίδα σχετικά με τον τεχνικό υπολογιστών</div> </div> </div> </div> <a href="https://comuedu.ru/el/#top" class="up"></a> </div> <script src="https://comuedu.ru/wp-content/themes/tehnika-expert/js/jquery-1.12.0.js"></script> <script src="https://comuedu.ru/wp-content/themes/tehnika-expert/js/owl.carousel.min.js"></script> <script src="https://comuedu.ru/wp-content/themes/tehnika-expert/js/mousewheel.js"></script> <script src="https://comuedu.ru/wp-content/themes/tehnika-expert/js/jscrollpane.min.js"></script> <script src="https://comuedu.ru/wp-content/themes/tehnika-expert/js/scripts.js?v=8"></script>  <script type='text/javascript' src='https://comuedu.ru/wp-content/plugins/table-of-contents-plus/front.min.js?ver=1509'></script> <script type='text/javascript' src='https://comuedu.ru/wp-content/plugins/wp-ajaxify-comments/js/wp-ajaxify-comments.min.js?ver=1.5.0'></script> <script type='text/javascript' src='https://comuedu.ru/wp-content/plugins/wp-polls/polls-js.js?ver=2.73.8'></script> <script type='text/javascript' src='https://comuedu.ru/wp-content/plugins/wp-postratings/js/postratings-js.js?ver=1.85'></script> <script type='text/javascript' src='https://comuedu.ru/wp-content/plugins/wp_testme/js/testme.js?ver=1.1'></script> <script type='text/javascript' src='/wp-includes/js/comment-reply.min.js?ver=4.9'></script> <script type='text/javascript'> var q2w3_sidebar_options = new Array(); q2w3_sidebar_options[0] = { "sidebar" : "sidebar-2", "margin_top" : 10, "margin_bottom" : 112, "stop_id" : "", "screen_max_width" : 0, "screen_max_height" : 0, "width_inherit" : false, "refresh_interval" : 1500, "window_load_hook" : false, "disable_mo_api" : false, "widgets" : ['cb_widget-2'] } ; </script> <script type='text/javascript' src='https://comuedu.ru/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.0.4'></script> <script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=4.9'></script> <script type="text/javascript">  </script><br> <br> </body> </html>