Εφαρμοσμένος 

Βασικά στοιχεία HTML για αρχάριους. Βασικά στοιχεία της γλώσσας προγραμματισμού WEB HTML

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

Ποια είναι η δομή ενός εγγράφου HTML;

Η ετικέτα υποδεικνύει ότι η δομή του εγγράφου html αρχίζει και τελειώνει. Οι περισσότερες πληροφορίες για το πρόγραμμα περιήγησης και τις μηχανές αναζήτησης αποθηκεύονται μεταξύ των ετικετών. Οι ετικέτες περιέχουν τον τίτλο της σελίδας μας. Η ετικέτα υποδεικνύει ότι περισσότερες πληροφορίες προορίζονται για τον χρήστη και φυσικά υποδεικνύει ότι οι πληροφορίες για τον χρήστη τελειώνουν.

Τώρα να εξηγήσω λίγο. Όλες οι ετικέτες ( ετικέτα - στοιχείο γλώσσας σήμανσης υπερκειμένου) χωρίζονται σε δύο τύπους: "μονό" και "κλείσιμο". Επιπλέον, οι ετικέτες περικλείονται στους ακόλουθους χαρακτήρες< и >, είναι αυτά που διακρίνουν την ετικέτα από το κανονικό κείμενο html. Ας δούμε μερικές από τις πιο απλές «μονές» ετικέτες:


— μια ετικέτα που είναι υπεύθυνη για τη μετάβαση σε μια νέα γραμμή στο μέρος όπου είναι εγκατεστημένη αυτή η ετικέτα. Ας δούμε τον κώδικα χρησιμοποιώντας αυτήν την ετικέτα.

Η πρώτη μου ιστοσελίδα Γεια σε όλους!
Και αυτό είναι το πρώτο μου site.

Το αποτέλεσμα μπορεί να προβληθεί.

— μια ετικέτα που τραβάει μια οριζόντια γραμμή. Αυτή η ετικέτα ισχύει για στοιχεία μπλοκ, η γραμμή ξεκινά πάντα από μια νέα γραμμή. Έχει 5 χαρακτηριστικά:

  • align — Καθορίζει τη στοίχιση της γραμμής. Μπορεί να πάρει την τιμή αριστερά, κέντρο, δεξιά.
  • χρώμα — Ορίζει το χρώμα της γραμμής.
  • noshade - Σχεδιάζει μια γραμμή χωρίς εφέ 3D.
  • μέγεθος — Ορίζει το πάχος της γραμμής.
  • πλάτος — Ορίζει το πλάτος της γραμμής.

Κωδικός χρησιμοποιώντας την ετικέτα:

Ο πρώτος μου ιστότοπος Γεια σε όλους Αυτό είναι το πρώτο μου site.

Ένα οπτικό παράδειγμα μπορείτε να βρείτε εδώ.

Μια άλλη "ενιαία" ετικέτα είναι . Αυτή η ετικέτα χρησιμοποιείται για την αποθήκευση πληροφοριών που προορίζονται για προγράμματα περιήγησης και μηχανές αναζήτησης. Οι μηχανές αναζήτησης αναζητούν μετα-ετικέτες για να λάβουν περιγραφές ιστότοπων, λέξεις-κλειδιά και άλλα δεδομένα. Επιτρέπεται να χρησιμοποιείτε απεριόριστο αριθμό μετα-ετικέτες, όλες πρέπει να είναι μεταξύ και . Οι παράμετροι οποιασδήποτε μετα-ετικέτας είναι της μορφής «όνομα=τιμή», η οποία καθορίζεται από τις λέξεις-κλειδιά περιεχόμενο , όνομα ή http-equiv . Επειδή Οι μετα-ετικέτες προορίζονται για μηχανές, δεν κάνουν οπτικές αλλαγές, επομένως θα παράσχω μόνο τον πηγαίο κώδικα:

Αυτή η γραμμή υποδεικνύει ότι ο δημιουργός της σελίδας πιστεύει ότι η σελίδα χρησιμοποιεί κωδικοποίηση UTF-8. Στην HTML5 όλα έχουν γίνει πιο απλά για να καθορίσετε την κωδικοποίηση, το μόνο που χρειάζεστε είναι η ακόλουθη γραμμή:

Υπάρχουν και άλλες μεμονωμένες ετικέτες (, ,
, , , , , , , , , , , , , ), αλλά θα σας παρουσιάσω λίγο αργότερα.

Τώρα ας μιλήσουμε για το «κλείσιμο» των ετικετών. Το ίδιο το όνομα "ετικέτα κλεισίματος" υποδηλώνει ότι η ετικέτα απαιτεί υποχρεωτικό κλείσιμο. Αυτό γίνεται για να περιοριστεί σαφώς το τμήμα του κειμένου που επηρεάζει η ετικέτα.

Για ένα σαφές παράδειγμα, ας δούμε την ετικέτα, η οποία χρησιμοποιείται για την επισήμανση του κειμένου και ορίζει τη γραμματοσειρά σε έντονη γραφή. Οι ετικέτες είναι όρια που ορίζουν την περιοχή επιλογής κειμένου. Εδώ είναι ο κωδικός όπου ξέχασαν να κλείσουν την ετικέτα στην τελευταία γραμμή:

Η πρώτη μου ιστοσελίδα Γεια σε όλους! Και αυτό είναι το πρώτο μου site.
Γεια σε όλους! Και αυτό είναι το πρώτο μου site.

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

Ετικέτες για την επισήμανση κειμένου

Υπάρχουν διάφοροι τρόποι για να επισημάνετε κείμενο σε μια σελίδα. Αυτό μπορεί να γίνει χρησιμοποιώντας στυλ ή μπορείτε να χρησιμοποιήσετε ετικέτες. Μας ενδιαφέρει (προς το παρόν) η δεύτερη επιλογή.

— ορίζει τη γραμματοσειρά σε έντονη γραφή.

— ορίζει το στυλ πλάγιας γραμματοσειράς.

— προσθέτει μια υπογράμμιση στο κείμενο.

— προορίζεται να δώσει έμφαση στο κείμενο. Τα προγράμματα περιήγησης εμφανίζουν αυτό το κείμενο με πλάγιους χαρακτήρες.

- διαγράφει το κείμενο. Αυτή η ετικέτα έχει αφαιρεθεί από την HTML5, συνιστάται η χρήση της

— εμφανίζει κείμενο ως μονοδιάστατο κείμενο. Καταργήθηκε από την HTML5.

— εμφανίζει τη γραμματοσειρά ως εκθέτη. Η γραμματοσειρά εμφανίζεται πάνω από τη γραμμή βάσης του κειμένου και σε μειωμένο μέγεθος.

— εμφανίζει τη γραμματοσειρά ως δείκτη. Το κείμενο τοποθετείται κάτω από τη γραμμή βάσης των υπόλοιπων χαρακτήρων στη γραμμή και μειώνεται σε μέγεθος.

— προορίζεται να δώσει έμφαση στο κείμενο. Τα προγράμματα περιήγησης εμφανίζουν αυτό το κείμενο με έντονη γραφή.

— μειώνει το μέγεθος της γραμματοσειράς κατά ένα σε σύγκριση με το κανονικό κείμενο. Σε HTML, το μέγεθος της γραμματοσειράς μετριέται σε συμβατικές μονάδες από το 1 έως το 7, το μέσο προεπιλεγμένο μέγεθος κειμένου είναι 3. Η ετικέτα μειώνει το κείμενο κατά μία συμβατική μονάδα. Οι ένθετες ετικέτες επιτρέπονται και το μέγεθος της γραμματοσειράς θα είναι μικρότερο κατά 1 με κάθε ένθετο επίπεδο, αλλά δεν μπορεί να είναι μικρότερο από 1.

— αυξάνει το μέγεθος της γραμματοσειράς κατά ένα σε σύγκριση με το κανονικό κείμενο. Σε HTML, το μέγεθος της γραμματοσειράς μετριέται σε μονάδες από το 1 έως το 7, το μέσο προεπιλεγμένο μέγεθος κειμένου είναι 3. Έτσι, η προσθήκη μιας ετικέτας αυξάνει το κείμενο κατά μία μονάδα. Οι ένθετες ετικέτες επιτρέπονται και το μέγεθος της γραμματοσειράς θα είναι μεγαλύτερο σε κάθε επίπεδο.

- χρησιμοποιείται για την επισήμανση εισαγωγικών στο κείμενο. Τα περιεχόμενα του κοντέινερ εμφανίζονται αυτόματα στο πρόγραμμα περιήγησης σε εισαγωγικά.

— έχει σχεδιαστεί για να επισημαίνει μεγάλα εισαγωγικά σε ένα έγγραφο. Το κείμενο που επισημαίνεται με αυτήν την ετικέτα εμφανίζεται παραδοσιακά ως ευθυγραμμισμένο μπλοκ με γέμιση αριστερά και δεξιά (περίπου 40 εικονοστοιχεία), καθώς και με επένδυση στο επάνω και στο κάτω μέρος.

— ορίζει ένα μπλοκ προδιαμορφωμένου κειμένου. Ένα τέτοιο κείμενο εμφανίζεται συνήθως με γραμματοσειρά μονοδιάστατα και με όλα τα κενά μεταξύ των λέξεων. Από προεπιλογή, οποιοσδήποτε αριθμός διαστημάτων στον κώδικα σε μια σειρά εμφανίζεται ως ένα στην ιστοσελίδα. Ετικέτα Σας επιτρέπει να παρακάμψετε αυτήν τη δυνατότητα και να εμφανίσετε κείμενο όπως απαιτείται από τον προγραμματιστή.

— ορίζει μια παράγραφο κειμένου. Ετικέτα

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

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

— είναι ένα δοχείο για την αλλαγή των χαρακτηριστικών της γραμματοσειράς, όπως το μέγεθος, το χρώμα και η γραμματοσειρά. Αν και αυτή η ετικέτα εξακολουθεί να υποστηρίζεται από όλα τα προγράμματα περιήγησης, θεωρείται ξεπερασμένη και συνιστάται να εγκαταλειφθεί η χρήση της υπέρ των στυλ. Η ετικέτα έχει 3 χαρακτηριστικά: χρώμα — ορίζει το χρώμα του κειμένου, πρόσωπο — καθορίζει τη γραμματοσειρά, μέγεθος — ορίζει το μέγεθος της γραμματοσειράς σε συμβατικές μονάδες.

— επισημαίνει το κείμενο ως απόσπασμα ή υποσημείωση σε άλλο υλικό. Αυτή η επισήμανση είναι χρήσιμη για την αλλαγή του στυλ του κειμένου μέσω CSS και χρησιμοποιείται επίσης για τον διαχωρισμό του κώδικα HTML σε δομικά στοιχεία. Τα προγράμματα περιήγησης συνήθως ορίζουν το κείμενο μέσα σε ένα κοντέινερ να είναι πλάγιο.

— υποδηλώνει ότι η ακολουθία χαρακτήρων είναι συντομογραφία. Χρησιμοποιώντας το χαρακτηριστικό τίτλος, αποκρυπτογραφείται η συντομογραφία, η οποία επιτρέπει σε όσους δεν είναι εξοικειωμένοι με αυτήν να κατανοήσουν τη συντομογραφία. Επιπλέον, οι μηχανές αναζήτησης ευρετηριάζουν την έκδοση πλήρους κειμένου της συντομογραφίας, η οποία μπορεί να χρησιμοποιηθεί για τη βελτίωση της κατάταξης του εγγράφου.

Από προεπιλογή, το κείμενο που περικλείεται στο κοντέινερ είναι υπογραμμισμένο με μια διακεκομμένη γραμμή.

Παρακάτω είναι ο κώδικας στον οποίο χρησιμοποίησα όλες αυτές τις ετικέτες:

Ο πρώτος μου ιστότοπος

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

Τι είναι η HTML;

Η HTML είναι η γλώσσα για την περιγραφή της δομής των ιστοσελίδων. Η HTML δίνει στους συγγραφείς τα μέσα να:

Δημοσιεύστε ηλεκτρονικά έγγραφα με επικεφαλίδες, κείμενο, πίνακες, λίστες, φωτογραφίες κ.λπ.
Ανάκτηση πληροφοριών στο διαδίκτυο μέσω συνδέσμων υπερκειμένου, με το πάτημα ενός κουμπιού.
Σχεδιάστε φόρμες για τη διενέργεια συναλλαγών με υπηρεσίες εξ αποστάσεως, για χρήση στην αναζήτηση πληροφοριών, την πραγματοποίηση κρατήσεων, την παραγγελία προϊόντων κ.λπ.
Συμπεριλάβετε υπολογιστικά φύλλα, βίντεο κλιπ, κλιπ ήχου και άλλες εφαρμογές απευθείας στα έγγραφά τους.
Με την HTML, οι συγγραφείς περιγράφουν τη δομή των σελίδων χρησιμοποιώντας σήμανση. Τα στοιχεία της γλώσσας χαρακτηρίζουν κομμάτια περιεχομένου όπως «παράγραφος», «λίστα», «πίνακας» και ούτω καθεξής. Τι είναι το XHTML;

Το XHTML είναι ένα παραλλαγή της HTMLπου χρησιμοποιεί τη σύνταξη της XML, της επεκτάσιμης γλώσσας σήμανσης. Το XHTML έχει όλα τα ίδια στοιχεία (για παραγράφους, κ.λπ.) με την παραλλαγή HTML, αλλά η σύνταξη είναι ελαφρώς διαφορετική. Επειδή η XHTML είναι μια εφαρμογή XML, μπορείτε να χρησιμοποιήσετε άλλα εργαλεία XML μαζί της (όπως η XSLT, μια γλώσσα για τη μετατροπή περιεχομένου XML).

Τι είναι το CSS;

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

Τι είναι το WebFonts; Το WebFonts είναι μια τεχνολογία που επιτρέπει στους χρήστες να χρησιμοποιούν γραμματοσειρές κατά παραγγελία μέσω του Web χωρίς να απαιτείται εγκατάσταση στο λειτουργικό σύστημα. Το W3C έχει εμπειρία σε γραμματοσειρές με δυνατότητα λήψης μέσω HTML, CSS2 και SVG. Μέχρι πρόσφατα, οι γραμματοσειρές με δυνατότητα λήψης δεν ήταν συνηθισμένες στον Ιστό λόγω της έλλειψης διαλειτουργικής μορφής γραμματοσειράς. Η προσπάθεια WebFonts σχεδιάζει να το αντιμετωπίσει μέσω της δημιουργίας μιας ανοιχτής μορφής γραμματοσειράς για τον Ιστό που υποστηρίζεται από τη βιομηχανία (που ονομάζεται "WOFF").

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

Κατά τη σύνταξη αυτού του άρθρου, η περιγραφή ορισμένων ετικετών ελήφθη από εδώ

Βασικά στοιχεία HTML για αρχάριους, αυτό που κάθε αρχάριος webmaster ή blogger πρέπει να γνωρίζει τώρα. Εάν θέλετε να μάθετε πώς να δημιουργείτε βασικούς ιστότοπους, να κατανοείτε τον ίδιο τον κώδικα, να γνωρίζετε τι κρύβεται πίσω από τι και τι πρέπει να υπάρχει, είναι απλά αδύνατο να το κάνετε αυτό χωρίς γνώση των βασικών στοιχείων της γλώσσας HTML. Στο ιστολόγιό μου θα έχω μια ολόκληρη αλυσίδα άρθρων που θα αφιερώσω σε αυτό το θέμα από το Α έως το Ω, θα περιγράψω κάθε ετικέτα που υπάρχει στο έγγραφο, τι σημαίνει και πώς να τη χρησιμοποιήσω σωστά.

Βασικά στοιχεία HTML

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

Φυσικά, υπάρχουν αρκετές γλώσσες προγραμματισμού, όλες είναι περίπλοκες με τον δικό τους τρόπο, αλλά υπάρχουν μερικές που πρέπει οπωσδήποτε να γνωρίζετε. Εάν θέλετε να σχεδιάσετε όμορφα μια επιστολή που θα αποσταλεί ταχυδρομικώς, έχετε τη δική σας ομάδα VKontakte, μια ομάδα σε άλλα κοινωνικά δίκτυα, το ίδιο κανάλι YouTube, πρέπει να επεξεργαστείτε τον κώδικα σε οποιαδήποτε από τις μηχανές του ιστότοπου, απλά χρειάζεστε να γνωρίζουν τις βασικές έννοιες.

Έδωσα μόνο μερικά παραδείγματα, στην πραγματικότητα, τώρα αυτή η γνώση χρησιμοποιείται όλο και πιο συχνά στο Διαδίκτυο. Είμαι περισσότερο επαγγελματίας παρά θεωρητικός, επομένως στα άρθρα μου σε αυτήν την ενότητα θα σας δείξω τα παραδείγματα μου για το πώς και τι έκανα, βήμα προς βήμα. Θα δημοσιεύσω τόσο σελίδες παραδειγμάτων όσο και ολόκληρους ιστότοπους.

Ένα έγγραφο Html είναι το απλούστερο έγγραφο κειμένου, μια γλώσσα προσθήκης ετικετών που συναντάτε καθημερινά στο Διαδίκτυο. Οι ετικέτες περιγράφουν τη δομή ενός εγγράφου. Οι ετικέτες μορφοποιούνται ως γωνιακές< >αγκύλες, μέσα στις οποίες αναγράφεται το όνομα της ετικέτας. Το πρόγραμμα περιήγησης εξετάζει τη δομή του εγγράφου, το δημιουργεί και το εμφανίζει σύμφωνα με τις οδηγίες του στην οθόνη σας, αν, φυσικά, τα κάνατε όλα σωστά.

Όλη αυτή η διαδικασία ξεκινά πριν καν δείτε την ολοκληρωμένη εικόνα. Τα προγράμματα περιήγησης επεξεργάζονται ένα έγγραφο διαδοχικά, από την αρχή μέχρι το τέλος. Συμπεριλαμβανομένων όλων όσων πρέπει να υπάρχουν στη σελίδα. Πίνακες, εικόνες, σενάρια και ούτω καθεξής, εκτός από αυτό περιλαμβάνει στυλ CSS.

Βασικά για αρχάριους

Τι είναι η html - αν κοιτάξετε τι γράφει η Wikipedia - (HyperText Markup Language) γλώσσα σήμανσης υπερκειμένου για έγγραφα. Οι περισσότερες σελίδες στο Διαδίκτυο περιέχουν σήμανση σελίδας σε αυτήν τη γλώσσα. Αυτή η γλώσσα ερμηνεύεται από προγράμματα περιήγησης και το μορφοποιημένο κείμενο που προκύπτει εμφανίζεται στην οθόνη του υπολογιστή σας ή στην κινητή συσκευή σας.

Αυτή η γλώσσα είναι εγγενώς πολύ εύκολη και προσβάσιμη στην εκμάθηση. Ο καθένας μπορεί να μάθει και να κατανοήσει τα βασικά του. Για να χρησιμοποιήσετε μια τέτοια γλώσσα, πρέπει να γνωρίζετε και να χρησιμοποιείτε περιγραφείς, οι οποίοι ονομάζονται επίσης ετικέτες. Είναι με τη βοήθεια ετικετών που δημιουργείται ένα έγγραφο.

Από τι πρέπει να αποτελείται η δομή του εγγράφου, ποιες ετικέτες πρέπει να υπάρχουν. Ας τα δούμε όλα με ένα μικρό παράδειγμα. Έγραψα κάποιο κείμενο στο MS Office και το έδειξα σε αυτό το στιγμιότυπο οθόνης.

Για να εμφανίσετε αυτό το κείμενο στο πρόγραμμα περιήγησης με τον ίδιο τρόπο που γράφτηκε στο έγγραφο, πρέπει να προσθέσετε σήμανση σελίδας σε αυτό, το οποίο περιλαμβάνει ορισμένες ετικέτες. Πρώτα, κοιτάξτε τα και μετά θα περιγράψω τον καθένα που είναι υπεύθυνος για τι.

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

Blog του Evgeny Nesmelov! ιστοσελίδα Βασικά στοιχεία html και css για αρχάριους

Από ποιες ετικέτες αποτελείται ένα έγγραφο html, τι περιλαμβάνει και πού πρέπει να καταγράφονται όλα;

< html >

< body >

< h2 >< / h2 >

< p >Καλώς ήλθατε στο ιστολόγιό μου, τώρα ακολουθήστε το σεμινάριο βασικών HTML. Αν σας άρεσε αυτό το άρθρο, μπορείτε να εγγραφείτε σε αυτό το ιστολόγιο για να λαμβάνετε νέα άρθρα στα εισερχόμενα του email σας.< / p >

< h2 >Blog της Evgenia Nesmelov! Ο Νεσμελόφ. ru Βασικά στοιχεία HTML και CSS για αρχάριους< / h2 >

< / body >

< / html >

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

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

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

Κείμενο

< strong > < i >Κείμενο< / strong > < / i >

Δομή εγγράφου HTML

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

Μια ετικέτα είναι ένα στοιχείο που λέει στο πρόγραμμα περιήγησης Ιστού να εκτελέσει μια συγκεκριμένη εργασία. Για παράδειγμα, η παρουσία μιας παραγράφου, πίνακα, φόρμας ή εικόνας.

Χαρακτηριστικό - τροποποιεί την ετικέτα. Για παράδειγμα, μπορείτε να στοιχίσετε μια παράγραφο στο κέντρο ή δεξιά, να ορίσετε επίσης τη θέση της εικόνας στη σελίδα και ούτω καθεξής.

ΠΑΝΤΑ να κλείνετε ετικέτες, αν το ανοίξετε, φροντίστε να το κλείσετε. Διαφορετικά, θα προκύψει σφάλμα και το έγγραφό σας δεν θα εμφανίζεται σωστά στη σελίδα. Υπάρχουν και εξαιρέσεις, που δεν πρέπει να ξεχνάμε.

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

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

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

Περιεχόμενο

< head >Περιεχόμενο< / head >

Αυτή η ετικέτα περιλαμβάνεται στην κεφαλίδα και πρέπει να γράφεται μέσα στην ετικέτα κεφαλής. Αυτή η ετικέτα τίτλου είναι υποχρεωτική και πρέπει να υπάρχει σε κάθε έγγραφο HTML. Επιπλέον, εμφανίζεται ως ο τίτλος του παραθύρου του προγράμματος περιήγησης. Το μήκος μιας τέτοιας κεφαλίδας δεν πρέπει να υπερβαίνει τους 60 χαρακτήρες. Το κείμενο μιας τέτοιας κεφαλίδας θα πρέπει να περιέχει τις πληρέστερες πληροφορίες που χαρακτηρίζουν το περιεχόμενο της σελίδας.

Εάν γράψατε "Hello World" στον τίτλο, αυτές είναι οι πληροφορίες που πρέπει να εμφανίζονται στη σελίδα και καμία άλλη. Δεν πρέπει να εξαπατάτε τους ανθρώπους και τις μηχανές αναζήτησης, δεν τους αρέσει και έτσι κάνετε τα πράγματα χειρότερα για τον εαυτό σας. Οι πληροφορίες που περιέχονται σε αυτήν την ετικέτα πρέπει να είναι σχετικές με το περιεχόμενο της σελίδας σας.

Μετά την υποχρεωτική ετικέτα τίτλου, υπάρχει μια προαιρετική, αλλά εξίσου σημαντική μετα-ετικέτα. Αυτή η ετικέτα είναι απλή. Χρησιμοποιώντας αυτήν την ετικέτα, ορίζετε μια περιγραφή για τη σελίδα (περιγραφή) και τις λέξεις-κλειδιά της (λέξεις-κλειδιά).

Επιπλέον, η μετα-ετικέτα μπορεί να περιέχει δεδομένα σχετικά με τον συγγραφέα της σελίδας και άλλες ιδιότητες μεταδεδομένων. Μπορείτε να αποτρέψετε την ευρετηρίαση ολόκληρης της σελίδας από τις μηχανές αναζήτησης. Ρυθμίστε τη σελίδα να ανανεώνεται αυτόματα μετά από 20 δευτερόλεπτα ή μετά από 5 δευτερόλεπτα, ακολουθούμενη από μετάβαση σε άλλη σελίδα.

< meta name = "robots" content = "index, follow" >

< meta http - equiv = "refresh" content = "20" >

< meta http - equiv = "refresh" content = "5; url=http://сайт/" >

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

Η ετικέτα στυλ μπορεί επίσης να χρησιμοποιηθεί για να ορίσετε στυλ στη σελίδα. Εάν χρησιμοποιείτε πολλά διαφορετικά στυλ css, τότε καλό είναι να τα ορίσετε σε ξεχωριστό αρχείο. Εάν πρέπει να καθορίσετε πολλά από αυτά, όλα αυτά μπορούν να καθοριστούν απευθείας στο έγγραφο html.

.βάση (πλάτος: 100 εικονοστοιχεία; χρώμα φόντου: #000; ύψος: 150 εικονοστοιχεία; χρώμα: #fff; )

< style type = "text/css" >

Βάση(

πλάτος: 100 px;

φόντο - χρώμα : #000;

ύψος: 150 px;

χρώμα : #fff;

Ή προσθέστε στυλ ειδικά σε μία ετικέτα για να το κάνετε αυτό, πρέπει να προσθέσετε ένα στοιχείο στυλ μέσα στην ίδια την ετικέτα. Αυτή η ετικέτα πρέπει να χρησιμοποιείται μέσα σε ένα κοντέινερ που ορίζει στυλ για τη σελίδα. Μπορείτε να χρησιμοποιήσετε πολλές τέτοιες ετικέτες, αυτό δεν θα είναι σφάλμα.

Λίγο παρόμοια με την προηγούμενη ετικέτα, η ετικέτα συνδέσμου σάς επιτρέπει να ορίσετε στυλ για ένα έγγραφο που βρίσκονται σε άλλο αρχείο. Με άλλα λόγια, μπορείτε να επισυνάψετε ένα πλήρες φύλλο στυλ css, το οποίο αποτελείται από πολλές ιδιότητες, σε ένα υπάρχον έγγραφο. Έτσι, μειώνετε το μέγεθος του εγγράφου, το οποίο τελικά θα φορτώνει και θα ανοίγει πιο γρήγορα σε υπολογιστή ή φορητή συσκευή με χαμηλές ταχύτητες Διαδικτύου.

Μπορείτε να συνδέσετε περισσότερα από ένα αρχεία, δεν υπάρχουν περιορισμοί. Δεν χρειάζεται να κλείσετε μια τέτοια ετικέτα. Εάν όλα γίνονται σωστά, συγκεκριμένα στυλ από ξεχωριστό αρχείο θα φορτωθούν στο έγγραφό σας. Αυτή η ετικέτα μπορεί να προστεθεί στα βασικά της html και να μην ξεχνάμε την ύπαρξή της. Το αποτέλεσμα είναι μια εικόνα σαν αυτή:

< link href = "css/style-lg.css" rel = "stylesheet" >

< link href = "css/style-md.css" rel = "stylesheet" >

< link href = "css/style-sm.css" rel = "stylesheet" >

Χρησιμοποιώντας την ετικέτα σεναρίου, μπορείτε να συνδέσετε διαφορετικά σενάρια (σενάρια) σε ένα έγγραφο. Απαιτείται η ετικέτα κλεισίματος. Το ίδιο το σενάριο μπορεί να βρίσκεται στην αρχή του εγγράφου, μέσα ή στο τέλος.

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

Επικεφαλίδες σελίδων h1 h2 h3

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

Η παρουσία τέτοιων επικεφαλίδων στο άρθρο θα παίξει σημαντικό ρόλο στην προώθηση της σελίδας. Επιπλέον, η χρήση τους σάς δίνει μια σαφή δομή σελίδας, τον τίτλο, τους υποτίτλους, τις επισημάνσεις, τις υποπαραγράφους και ούτω καθεξής. Να τα χρησιμοποιείτε πάντα και να τα εφαρμόζετε στην πράξη. Σε πολλά CMS, όπως το WordPress, όταν γράφετε κείμενο, μπορείτε να δείτε "επικεφαλίδα 1", "κεφαλίδα 2", "κεφαλίδα 3" και ούτω καθεξής. Αυτοί είναι υπεύθυνοι για τα h1, h2 και h3.

Εάν γράψετε κείμενο σώματος από μια νέα παράγραφο, γράφετε μια ετικέτα

Στην αρχή και κλείστε το στο τέλος

. Η σήμανση μιας παραγράφου σε html ισοδυναμεί με τη δημιουργία μιας νέας παραγράφου σε ένα έγγραφο MS Word. Δεν πρόσθεσα τίποτα νέο στο έγγραφο. Αλλά αυτό δεν είναι το μόνο που πρέπει να υπάρχει σε ένα έγγραφο html. Ας δούμε ένα άλλο παράδειγμα, η περιγραφή θα έρθει λίγο αργότερα.

έγγραφο HTML

Αυτό το κείμενο θα είναι τολμηρό, και αυτό είναι επίσης με πλάγιους χαρακτήρες

< ! DOCTYPE html >

< html >

< head >

< meta http - equiv = "Content-Type" content = "text/html; charset=utf-8" / >

< title >έγγραφο HTML< / title >

< / head >

< body >

< p >

< b >

< / b >

< / p >

< / body >

< / html >

Βασικά στοιχεία Κεφαλή και τίτλος

Κάθε έγγραφο περιέχει ένα στοιχείο κεφαλής και τίτλου. Το πρώτο, που έρχεται αμέσως μετά το πρώτο tag. Αυτή η ετικέτα περιέχει όλες τις πληροφορίες για τη σελίδα, περιέχει επίσης το στοιχείο. Τίτλος – πληροφορίες για τον τίτλο της σελίδας, με άλλα λόγια τον τίτλο της σελίδας, το όνομά της. Είναι στον τίτλο που υποδεικνύετε το σωστό όνομα της σελίδας με την οποία ο χρήστης θα σας αναζητήσει μέσω μιας μηχανής αναζήτησης, ένα πολύ σημαντικό σημείο. Και τα δύο στοιχεία πρέπει να είναι ανοιχτά και επίσης κλειστά. Κάθε στοιχείο κλείνει με ένα "/". Το αποτέλεσμα είναι μια εικόνα σαν αυτή.

Επικεφαλίδα & Περιεχόμενα σελίδας

< / html >

Όπως μπορείτε να δείτε, δεν υπάρχει τίποτα περίπλοκο. Εδώ είναι οι πιο βασικές ετικέτες που πρέπει να υπάρχουν σε κάθε έγγραφο html. Μην ξεχάσετε να κλείσετε καθένα από αυτά, διαφορετικά το πρόγραμμα περιήγησης δεν θα μπορεί να αντιληφθεί την πλήρη εικόνα του κώδικα. Αυτό πρέπει να το γνωρίζετε και να το θυμάστε πάντα. Στη συνέχεια ξεκινάτε να εισάγετε κείμενο, εικόνες, βίντεο κ.λπ. Αλλά αυτό θα είναι ήδη σε άλλα άρθρα.

Πρόγραμμα επεξεργασίας Notepad++

Για να εργαστείτε με τον κώδικα, χρησιμοποιήστε το πρόγραμμα Notepad++. Είναι δωρεάν και δεν είναι δύσκολο να το βρείτε στο Διαδίκτυο. Πολύ βολικό για την κατανόηση οποιουδήποτε κώδικα, εμφανίζει επίσης εύκολα τις ετικέτες ανοίγματος και κλεισίματος. Υποστηρίζουμε τη σύνταξη περισσότερων από 40 γλωσσών προγραμματισμού. Ό,τι χρειάζεστε για να μάθετε τα βασικά της html.

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

Στοιχείο DOCTYPE

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

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

Εν συντομία σε σαφή γλώσσα σχετικά με τα βασικά της html: Αυτή η γραμμή λέει στο πρόγραμμα περιήγησης ότι αυτό το έγγραφο είναι XHTML έκδοση 1.0, χρησιμοποιούνται αγγλικά και όλο αυτό το χάος βρίσκεται σε αυτήν τη διεύθυνση. Στη συνέχεια, στη μετα-ετικέτα υποδεικνύουμε την κωδικοποίηση που χρησιμοποιείται. Το πιο συχνά χρησιμοποιούμενο είναι τα Windows 1251.

Περιγραφή - αγγίζεται το θέμα του SEO, μία από τις τρεις κύριες ετικέτες που πρέπει να υπάρχουν σε απολύτως κάθε έγγραφο, αυτή η ετικέτα υποδεικνύει την περιγραφή της σελίδας. Τι είναι γραμμένο σε αυτή τη σελίδα, μια σύντομη περιγραφή, όχι περισσότερες από δύο προτάσεις. Η ετικέτα λέξεων-κλειδιών καλύπτει επίσης το θέμα του SEO, αυτή η ετικέτα είναι απαραίτητη. Περιέχει λέξεις-κλειδιά που θα χρησιμοποιήσουν οι χρήστες του Διαδικτύου για να σας βρουν μέσω των μηχανών αναζήτησης.

Η ετικέτα τίτλου περιέχει το όνομα του ίδιου του εγγράφου, τον τίτλο του, που βλέπουμε στο πρόγραμμα περιήγησης. Ίσως η πιο σημαντική ετικέτα σε ολόκληρο το έγγραφο, η οποία έχει τη μεγαλύτερη επίδραση στην προώθηση της σελίδας. Το άρθρο για την προσθήκη και το σχεδιασμό περιγράφει αυτήν την ετικέτα με περισσότερες λεπτομέρειες.

Τι πρέπει να θυμάστε από αυτό το μάθημα σχετικά με τα βασικά της html:

  • Σχεδόν όλες οι ετικέτες ανοίγουν και κλείνουν.
  • Το έγγραφο ξεκινά με την ετικέτα ;
  • Παρουσία ετικέτας;
  • Παρουσία ετικέτας;
  • Σαφής δομή του εγγράφου html.

    • Όλες οι κύριες σελίδες πρέπει πάντα να ονομάζονται ευρετήριο. Έτσι είναι αποδεκτό και το έχουν συνηθίσει όλοι, όποια και αν είναι η επέκταση του αρχείου μπορεί να είναι html ή php. Πάντα έτσι λέγεται.

    Παρακολουθήστε ένα βίντεο σχετικά με τις βασικές αρχές HTML από το Webformyself.

    Γλώσσα σήμανσης υπερκειμένου, βασικά στοιχεία και δομή. Όλα αυτά και πολλά άλλα θα προσπαθήσω να τα περιγράψω στο blog μου. Πρώτα απ 'όλα, θα γραφτούν χρήσιμες πληροφορίες για αρχάριους, θα δοθεί ένα παράδειγμα κώδικα και θα δοθεί η ευκαιρία λήψης του ίδιου του παραδείγματος μαζί με την τελική σελίδα.

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

    Σε αυτό το άρθρο θέλω να σας πω πώς να μάθετε αυτή τη γλώσσα πιο γρήγορα και αποτελεσματικά, ώστε μέσα σε ένα ή δύο μήνες να τη γνωρίζετε τέλεια. Πιστεύεις ότι είναι αδύνατο; Ξεκίνησα να μαθαίνω html στα τέλη Μαρτίου. Στα τέλη Μαΐου, ήξερα ήδη το 90% των ετικετών που απαιτούνται για εργασία χωρίς κανένα πρόβλημα.

    Πώς να μάθετε μια γλώσσα δωρεάν;

    Φυσικά, για την ταχύτερη εκμάθηση, θα πρέπει να βρείτε αρκετούς χρήσιμους ιστότοπους. Αρχικά, θα χρειαστείτε την αναφορά html. Ακόμη και έμπειροι προγραμματιστές το χρησιμοποιούν, γιατί είναι απλά αδύνατο να κρατήσετε δεκάδες ετικέτες και τα χαρακτηριστικά τους στο μυαλό σας.

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

    Διαδραστικά μαθήματα

    Και εδώ μιλάω για διαδραστικά μαθήματα. Αυτή είναι η δυνατότητα να γράφετε κώδικα και να βλέπετε αμέσως πώς εμφανίζεται. Κατά τη διάρκεια των μαθημάτων θα σας δοθούν εργασίες. Πρώτα, απλές, για παράδειγμα, μετατροπή του κειμένου σε τίτλο ή δημιουργία πίνακα. Τότε είναι πιο δύσκολο. Τελικά θα καταλάβετε τι μπορείτε να κάνετε με την HTML. Αν νομίζετε ότι πρέπει να πληρώσετε για αυτό, κάνετε λάθος.

    είναι ένας υπέροχος ιστότοπος με μαθήματα html και css. Τα πρώτα 16-18 μαθήματα είναι δωρεάν! Εάν θέλετε να συνεχίσετε τις σπουδές σας και να αποκτήσετε πρόσβαση σε αμειβόμενες, θα πρέπει να πληρώνετε 300 ρούβλια το μήνα ή 1800 ετησίως. Προσωπικά, πλήρωσα 300 ρούβλια, ολοκλήρωσα όλα τα αμειβόμενα μαθήματα σε ένα μήνα και πήρα πολλά οφέλη από αυτό.

    Σημασία των αρχείων

    Μια άλλη συμβουλή από εμένα - γράψτε την! Καταγράψτε όλες τις πληροφορίες που είναι νέες και σημαντικές για εσάς. Χωρίς να το γράψετε, κινδυνεύετε να μην διατηρήσετε τις απαραίτητες γνώσεις στη μνήμη σας. Προσωπικά, έχω τρία γενικά τετράδια στο ράφι μου, σχεδόν πλήρως γεμάτα γραφή, και από καιρό σε καιρό τα κοιτάζω όταν ξεχνάω αυτό ή εκείνο το ακίνητο.

    Παράλληλη μελέτη html και css

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

    Ανεξάρτητη πρακτική

    Μόλις αποκτήσετε κάποιες γνώσεις, μπορείτε να εξασκηθείτε μόνοι σας. Πως να το κάνεις; Δοκιμάστε να σχεδιάσετε ένα άρθρο με εικόνες, έναν πίνακα, μια ένθετη λίστα, μια απλή διάταξη σελίδας δύο στηλών ή κάτι άλλο. Πρέπει να εξασκηθείτε γιατί αυτός είναι ο μόνος τρόπος για να εμπεδώσετε γρήγορα στον εγκέφαλό σας την κατανόηση του πώς λειτουργούν τα πράγματα. Το καλύτερο, φυσικά, είναι να βρείτε τον εαυτό σας δάσκαλο σε αυτό το θέμα, αλλά πιθανότατα θα πρέπει να πληρώσετε για αυτό.

    Μαθήματα από την ομάδα webformyself

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

    Στο τέλος της ημέρας, θα πρέπει να έχετε έναν λόγο για τον οποίο μαθαίνετε αυτές τις τεχνολογίες Ιστού. Αυτό γίνεται συνήθως για να μάθετε πώς να δημιουργείτε μόνοι σας διατάξεις ιστότοπου. Εάν έχετε επίσης αυτόν τον στόχο, τότε μια εξαιρετική επιλογή για εσάς θα ήταν να αγοράσετε πρόσβαση σε premium μαθήματα στο webformyself.com. Ως αποτέλεσμα, μπορείτε να έχετε πρόσβαση όχι μόνο σε μαθήματα HTML και CSS, αλλά και σε πολλά άλλα. Για παράδειγμα, JavaScript και WordPress.

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

    Πόσος χρόνος χρειάζεται για την εκμάθηση γλωσσών;

    Κατά μέσο όρο, η HTML και η CSS μπορούν να μάθουν πολύ γρήγορα με τη σωστή προσέγγιση. Για παράδειγμα, μου πήρε αρκετούς μήνες. Εάν ξέρετε πού να πάρετε γνώσεις, η διαδικασία εκμάθησης μπορεί να επιταχυνθεί αρκετές φορές.

    Σας έδωσα καλούς ιστότοπους με χρήσιμο υλικό - τότε εξαρτάται από εσάς. Κατ 'αρχήν, οι παραπάνω πόροι είναι οι καλύτεροι στο Διαδίκτυο. Για παράδειγμα, περισσότερα από εκατό χιλιάδες άτομα έχουν ολοκληρώσει μαθήματα από το Htmlacademy και περισσότερα από 87 χιλιάδες άτομα έχουν εγγραφεί στις ενημερώσεις Webformyself.

    Η HTML είναι η γλώσσα σήμανσης υπερκειμένου που έκανε το Διαδίκτυο αυτό που γνωρίζουμε και αγαπάμε. Χάρη σε αυτό το θαυμάσιο εργαλείο, οι ιστότοποι φαίνονται όμορφοι και μοντέρνοι και εξασφαλίζουν επίσης ευκολία στη χρήση. Η HTML απλώς τακτοποιεί τα στοιχεία μιας ιστοσελίδας σε μια φιλική προς το χρήστη μορφή. Το έργο του είναι συγκρίσιμο με αυτό που κάνουν άνθρωποι όπως το MS Word ή το OpenOffice. Μετατρέπουν μια άχαρη μάζα γραμμάτων σε έγγραφο που περιέχει παραγράφους, έντονους χαρακτήρες, πλάγιους χαρακτήρες, πίνακες, ακόμη και εικόνες. Η γλώσσα HTML κάνει περίπου το ίδιο πράγμα, με τη μόνη διαφορά ότι τα έγγραφά της εμφανίζονται στο πρόγραμμα περιήγησης και οι δυνατότητες αυτού του εργαλείου είναι πολύ ευρύτερες από αυτές ενός επεξεργαστή κειμένου. Οι ετικέτες χρησιμοποιούνται για τη σήμανση - ειδικές εντολές που περιγράφουν τη δομή μιας ιστοσελίδας. Περικλείονται σε αγκύλες - έτσι ώστε το πρόγραμμα περιήγησης να μπορεί να τις διακρίνει από το μεγαλύτερο μέρος του κειμένου. Στη συνέχεια, θα καλύψουμε τα βασικά της HTML για αρχάριους.

    Visual editors

    Οι αρχάριοι που μόλις ξεκίνησαν την πορεία προς την εκμάθηση HTML ξεκινούν συχνά την εργασία τους με προγράμματα που τους επιτρέπουν να δημιουργούν ιστοσελίδες χωρίς καμία γνώση. Σε αυτά μπορείτε απλά να τακτοποιήσετε στοιχεία στην οθόνη με τον τρόπο που θα εμφανίζονται στο πρόγραμμα περιήγησης. Φαίνεται ότι αυτή είναι η πηγή της αιώνιας χάρης που σας επιτρέπει να απαλλαγείτε από την πλειοψηφία των προγραμματιστών ιστού. Δεν είναι όμως όλα τόσο απλά, αφού οι οπτικοί συντάκτες έχουν πολλές ελλείψεις που καθιστούν αδύνατη τη χρήση τους σε σοβαρά έργα.

    Όλα αυτά τα προγράμματα δημιουργούν πολλές περιττές ετικέτες που κάνουν την τελική σελίδα δυσκίνητη και μη βέλτιστη. Φυσικά, στην εποχή μας του Internet υψηλής ταχύτητας, αυτό είναι λιγότερο σημαντικό από πριν, αλλά υπάρχουν αρκετοί λόγοι για τους οποίους ένας συνοπτικός και καλογραμμένος ιστότοπος αποδεικνύεται πιο πρακτικός από τον αντίστοιχο που δημιουργήθηκε σε ένα οπτικό πρόγραμμα επεξεργασίας. Μια ιστοσελίδα που δημιουργείται σε ένα τέτοιο πρόγραμμα θα υποστεί κακή επεξεργασία από τα ρομπότ αναζήτησης, καθώς κάθε kilobyte κώδικα είναι σημαντικό γι 'αυτούς και ο ογκώδης και παράλογος κώδικας με μια δέσμη είναι απίθανο να ταιριάζει με το γούστο τους. Επιπλέον, οι συντάκτες συχνά υστερούν από την εποχή, γίνονται άσχετοι και η δαπάνη πόρων για την ανάπτυξή τους δεν είναι πρακτική, καθώς κανένας επαγγελματίας δεν χρησιμοποιεί αυτά τα προϊόντα. Επομένως, όποιος θέλει να εργαστεί στον κλάδο ανάπτυξης ιστοσελίδων πρέπει να γνωρίζει τα βασικά της HTML.

    Ετικέτες

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

    Υπάρχουν επίσης μεμονωμένες ετικέτες που δεν χρειάζεται να κλείσουν. Σε αυτά, το περιεχόμενο βρίσκεται μέσα, όπως ακριβώς μπορεί να γραφτεί για τις περισσότερες ετικέτες HTML, και ορίζει τις ιδιότητες του στοιχείου. Υποδεικνύεται στην αρχική ετικέτα και μοιάζει κάπως έτσι: χαρακτηριστικό="...", όπου αντί για τελείες υπάρχει η τιμή του χαρακτηριστικού. Η γνώση των ετικετών είναι το πρώτο και πιο σημαντικό βήμα για την εκμάθηση της HTML. Τα βασικά αυτής της τέχνης περιλαμβάνουν επίσης την κατανόηση της δομής μιας ιστοσελίδας.

    Δομή εγγράφου

    Κάθε έγγραφο HTML έχει μια αντίστοιχη επέκταση, για παράδειγμα Index.html. Με αυτόν τον τρόπο το πρόγραμμα περιήγησης μπορεί να καταλάβει τι έχει να κάνει και να εμφανίσει σωστά τη σελίδα. Συνιστάται να αποθηκεύετε όλα τα αρχεία που χρησιμοποιούνται για τη δημιουργία ενός ιστότοπου σε έναν κατάλογο, κάτι που θα κάνει τη ζωή σας πολύ πιο εύκολη στο μέλλον. Τα βασικά της γλώσσας σήμανσης υπερκειμένου HTML απαιτούν σαφή κατανόηση της δομής του εγγράφου. Ξεκινά με μια ετικέτα που λέει στο πρόγραμμα περιήγησης την έκδοση του HTML που χρησιμοποιείται σε αυτό το έγγραφο. Προς το παρόν, η πέμπτη έκδοση της γλώσσας είναι σχετική, επομένως δεν χρειάζεται να επινοήσετε τίποτα, μπορείτε να εισαγάγετε με ασφάλεια την παραπάνω ετικέτα στην αρχή οποιασδήποτε σελίδας.

    Στη συνέχεια, υπάρχουν οι κύριες ζευγαρωμένες δομές που αποτελούν τον «σκελετό» της τοποθεσίας. Η πρώτη ετικέτα, στην οποία είναι ένθετες όλες οι άλλες, είναι .... Οτιδήποτε έξω από αυτήν δεν αναγνωρίζεται από το πρόγραμμα περιήγησης ως ιστοσελίδα, οπότε ανοίγει το έγγραφο και το κλείνει. Αυτή η ετικέτα απαιτείται για οποιοδήποτε έγγραφο. Περιέχει επίσης αρκετές ακόμη απαιτούμενες ετικέτες, οι οποίες θα συζητηθούν παρακάτω.

    Κεφάλι

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

    Σύνδεσμος

    Η γνώση των βασικών στοιχείων της HTML περιλαμβάνει επίσης τη χρήση cascading styling ή css. Ορίζουν τις ιδιότητες των στοιχείων που θα εμφανίζονται στη σελίδα. Μια σύγχρονη προσέγγιση σε αυτήν την εργασία περιλαμβάνει την τοποθέτηση χαρακτηριστικών όπως το χρώμα, το ύψος και η θέση του στοιχείου σε ένα εξωτερικό αρχείο για μεγαλύτερη ευκολία. Για να συμπεριλάβετε ένα αρχείο css, χρησιμοποιήστε την ετικέτα. Στην τελική του μορφή, μοιάζει κάπως έτσι: όπου href υποδεικνύει τη θέση του αρχείου και ο τύπος υποδεικνύει τον τύπο του.

    Σώμα

    Σε αυτό το τμήμα του εγγράφου HTML δημιουργείται το ορατό τμήμα της σελίδας. Όλα όσα γίνονται μέσα στο "σώμα" θα εμφανίζονται από το πρόγραμμα περιήγησης. Χρησιμοποιεί έναν τεράστιο αριθμό ετικετών HTML. Τα βασικά είναι η μορφοποίηση κειμένου, η εργασία με συνδέσμους και τα βασικά εργαλεία για τη δόμηση μιας ιστοσελίδας. Για να ξεκινήσετε να εργάζεστε σε HTML, πρέπει απλώς να γνωρίζετε τις βασικές ετικέτες και να μπορείτε να τις χρησιμοποιήσετε. Παρακάτω είναι τα πιο δημοφιλή:

    Έχετε ερωτήσεις;

    Αναφέρετε ένα τυπογραφικό λάθος

    Κείμενο που θα σταλεί στους συντάκτες μας:

    Στείλετε