Σας επιτρέπει να παρακάμψετε αυτήν τη δυνατότητα και να εμφανίσετε κείμενο όπως απαιτείται από τον προγραμματιστή.

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

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


— είναι ένα δοχείο για την αλλαγή των χαρακτηριστικών της γραμματοσειράς, όπως το μέγεθος, το χρώμα και η γραμματοσειρά.  Παρόλο που αυτή η ετικέτα εξακολουθεί να υποστηρίζεται από όλα τα προγράμματα περιήγησης, θεωρείται ξεπερασμένη και συνιστάται να εγκαταλειφθεί η χρήση της υπέρ των στυλ.  Η ετικέτα έχει 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;
Γραμματοσειρές Ιστούείναι μια τεχνολογία που επιτρέπει στους ανθρώπους να χρησιμοποιούν γραμματοσειρές κατά παραγγελία μέσω του Web χωρίς να απαιτείται εγκατάσταση στο λειτουργικό σύστημα.  Το W3C έχει εμπειρία σε γραμματοσειρές με δυνατότητα λήψης HTML, CSS2 και SVG.  Μέχρι πρόσφατα, οι γραμματοσειρές με δυνατότητα λήψης δεν ήταν συνηθισμένες στον Ιστό λόγω της έλλειψης διαλειτουργικής μορφής γραμματοσειράς.  Η προσπάθεια WebFonts σχεδιάζει να το αντιμετωπίσει μέσω της δημιουργίας μιας ανοιχτής μορφής γραμματοσειράς που υποστηρίζεται από τη βιομηχανία για τον Ιστό (ονομάζεται "WOFF").






Η διάλεξη έφτασε στο τέλος της, ελπίζω οι γνώσεις που αποκτήσατε να σας φανούν χρήσιμες!  Στην επόμενη διάλεξη θα σας πω τι αποθηκεύει η ετικέτα από μόνη της , θα μάθουμε πώς να εκτελούμε κάθε είδους χειρισμούς με εικόνες και να εξοικειωθούμε με πίνακες.
Κατά τη σύνταξη αυτού του άρθρου, η περιγραφή ορισμένων ετικετών ελήφθη από εδώ
Αποφάσισα να συνεχίσω αυτό το καυτό θέμα.  Έχω συντάξει μια λίστα με τους καλύτερους πόρους για την εκμάθηση html και css για να βοηθήσω όσους ενδιαφέρονται να μάθουν αυτά τα ζητήματα.  Θυμάμαι όταν ξεκίνησα ως webmaster, μου έλειπε πραγματικά μια τέτοια επιλογή από υψηλής ποιότητας και χρήσιμους πόρους.
Πρώτα μερικοί ορισμοί:
Html (από τα αγγλικά "HyperText Markup Language" - γλώσσα σήμανσης υπερκειμένου) είναι μια τυπική γλώσσα σήμανσης για ιστοσελίδες.
Το Css (από τα αγγλικά "Cascading Style Sheets" - cascading style sheets) είναι μια τεχνολογία για την περιγραφή της εμφάνισης μιας ιστοσελίδας.
Χωρίς γνώση html και css, η λειτουργία του ιστότοπού σας θα είναι πολύ προβληματική - δεν θα μπορείτε καν να εγκαταστήσετε έναν μετρητή στατιστικών ή ακόμα και ένα banner.  Δεν πρέπει να τρέχουμε σε ειδικούς για βοήθεια ή να δημιουργούμε θέμα μετά από θέμα σε φόρουμ;  Απλά πρέπει να το πάρετε και να το μάθετε.
Από τη δική μου εμπειρία, μπορώ να πω ότι html και css μαθαίνονται σε 1 μήνα.  Φυσικά, δεν μιλάω για επαγγελματικά ύψη - μπορείτε να τα φτάσετε μόνοι σας αν θέλετε.
Κατά τη γνώμη μου, ο καλύτερος τρόπος για να μάθετε html, css και άλλα θέματα, συμπεριλαμβανομένης της προώθησης ιστότοπου, είναι να δημιουργήσετε τον δικό σας ιστότοπο και να εξασκηθείτε σε αυτόν.  Παρεμπιπτόντως, μπορείτε να δείτε τον πρώτο ιστότοπο που δημιούργησα για χάρτες για το παιχνίδι Counter-Strike, τη δημιουργία του οποίου είχα τότε ενθουσιάσει.  Εδώ είναι οι χάρτες και τα στιγμιότυπά τους, που δημιούργησε ο γέρος Globator εκείνες τις μέρες που δεν ήξερε ακόμα ποια ήταν τα top 10, το TCI και το PR, και ξετρελάθηκε ανέμελα στον ήλιο δημιουργώντας τρισδιάστατους χάρτες :)  Δημιούργησα αυτόν τον ιστότοπο σε ένα μήνα, μαθαίνοντας html και css στην πράξη.
Δεν χρειάζεται να είστε τεχνικός για να μάθετε html και css.  Για παράδειγμα, γενικά είμαι ανθρωπιστής και στα μαθηματικά έπαιρνα κυρίως "2" :)  Έτσι, ο καθένας μπορεί να μάθει html και css.  Οι πόροι που έχω παραθέσει είναι επίσης κατάλληλοι ώστε ανά πάσα στιγμή να μπορείτε να τους χρησιμοποιήσετε για να μάθετε οποιοδήποτε σημείο σας ενδιαφέρει σχετικά με το html και το css.
Ιστοσελίδες για εκμάθηση html και css
Θα ξεκινήσω μια επιλογή χρήσιμων πόρων για την εκμάθηση html και css από έναν ιστότοπο που χρησιμοποίησα ο ίδιος.  Αυτά είναι μαθήματα Wild html γραμμένα από τη Valentina Akhmetzyanova aka Dikarka.  Περιέγραψε όλα τα απαραίτητα σημεία τόσο χαρούμενα και ενδιαφέροντα που η εκμάθηση html και css με τη βοήθεια των μαθημάτων της μετατρέπεται σε μια συναρπαστική δραστηριότητα.  Παρεμπιπτόντως, μπορείτε να διαβάσετε τον ιστότοπο για το ιστολόγιο.  Τα άγρια ​​μαθήματα είναι αρκετά για να μάθετε html και css στο επίπεδο που είναι απαραίτητο για να εργαστείτε ως webmaster.
Μπορείτε να φανταστείτε ποιος θα ήμουν αν εξελισσόμουν περαιτέρω στο θέμα του Photoshop;  Θα ήμουν ένα πραγματικό τέρας!  Αλλά έμπλεξα με το SEO και φυτεύω εδώ, πληκτρολογώντας αυτά τα γράμματα με δάχτυλα στριμωγμένα από τον παγετό :)  Απλά αστειεύομαι, είναι επίσης ζεστό εδώ και το φαγητό είναι καλό :)
Κύριε Ολυμπία
 5 Αυγούστου 2014 στις 11:17 π.μ
 
Γιατί πρέπει να ασχοληθείτε με την ανάπτυξη ιστού και πού να ξεκινήσετε
 
CSS
 
HTML,
 
Ανάπτυξη ιστοσελίδων
Γεια σε όλους!
Δουλεύω στον τομέα της ανάπτυξης ιστοσελίδων για περισσότερα από δύο χρόνια, και νομίζω ότι μπορώ να εκφράσω κάποιες σκέψεις για αυτό το θέμα. 
Ενδιαφέρθηκα για τον προγραμματισμό πριν από τρία χρόνια.  Στην αρχή δοκίμασα τον εαυτό μου σε γλώσσες προγραμματισμού από την οικογένεια C, αλλά δεν κατάφερα να δείξω τη δημιουργικότητά μου εκεί.  Μετά άκουσα κάπου για την ανάπτυξη ιστού.  Και όπως αποδείχθηκε, αυτό ήταν που χρειαζόμουν.
Γιατί πρέπει να ασχοληθείτε με την ανάπτυξη Ιστού;
Για μένα αυτό είναι καθαρή δημιουργικότητα.  Φανταστείτε έναν εντελώς κενό καμβά, όπως ένας καλλιτέχνης.  Έχετε όλα τα χρώματα και τα πινέλα, το μόνο που έχετε να κάνετε είναι να μάθετε πώς να σχεδιάζετε.  Αυτό είναι συνήθως πιο δύσκολο από όσο φαίνεται, αλλά όχι για έναν webmaster.  Τώρα στο Διαδίκτυο υπάρχουν πολλές κάθε είδους οδηγίες, διαδικτυακά μαθήματα, παραδείγματα με οπτικές απεικονίσεις.  Και κατ 'αρχήν, η δημιουργία κάτι νέου χρησιμοποιώντας αυτά τα εγχειρίδια δεν είναι τόσο δύσκολη.  Η ανάπτυξη Ιστού ανοίγει ευρείες, σχεδόν απεριόριστες δυνατότητες για δημιουργικότητα.  Φυσικά, οι γλώσσες προγραμματισμού που δεν έχουν σχεδιαστεί για τον Ιστό σας επιτρέπουν επίσης να εφαρμόσετε πολλά ενδιαφέροντα πράγματα, αλλά μου φαίνεται ότι είναι πολύ πιο εύκολο να το κάνετε αυτό σε ένα περιβάλλον ανάπτυξης ιστού. 
Εάν μόλις αρχίζετε να ρίχνετε μια πιο προσεκτική ματιά στο θέμα της ανάπτυξης ιστού, τότε σας συμβουλεύω να δώσετε προσοχή σε αυτό το άρθρο.  Μπορείτε να βρείτε μερικά χρήσιμα πράγματα εδώ.
Από πού να ξεκινήσω;
Η πιο συνηθισμένη ερώτηση μεταξύ εκείνων που μόλις αρχίζουν να μαθαίνουν την ανάπτυξη Ιστού.  Πρώτα απ 'όλα, σας συμβουλεύω να κατανοήσετε και να κατανοήσετε πώς κατασκευάζεται μια ιστοσελίδα.  Αυτό απαιτεί γνώση των ετικετών HTML, ή τουλάχιστον των περισσότερων από αυτές.  Είναι αυτοί που σχηματίζουν τη σελίδα.  Υπάρχουν πολλές ετικέτες, αλλά στην πράξη χρησιμοποιούνται συνήθως 30-40 και μερικές φορές λιγότερες. 
Μια ετικέτα HTML είναι ένα στοιχείο μιας ιστοσελίδας που έχει συνήθως την ακόλουθη μορφή: 
 
Περιεχόμενο ετικέτας
 
Αφού αφομοιώσετε τις ετικέτες, ήρθε η ώρα να αρχίσετε να μαθαίνετε τα χαρακτηριστικά για κάθε ετικέτα.  Ένα χαρακτηριστικό είναι μια ιδιότητα μιας ετικέτας.  Υπάρχουν πολλά χαρακτηριστικά και είναι όλα διαφορετικά, δηλαδή είναι υπεύθυνα για διαφορετικές λειτουργίες της ετικέτας.  Υπάρχουν καθολικά χαρακτηριστικά που είναι κατάλληλα για όλες τις ετικέτες, αλλά συχνά υπάρχουν και χαρακτηριστικά που είναι μοναδικά για μια ετικέτα.  Αυτό είναι λίγο πιο περίπλοκο, αλλά μπορεί εύκολα να το θυμόμαστε αν κάθε ετικέτα ενισχύεται με εξάσκηση.
Το χαρακτηριστικό είναι γραμμένο μέσα στην ετικέτα: 
 
Περιεχόμενο ετικέτας
 
Σε αυτήν την περίπτωση, επιλέγεται το χαρακτηριστικό ευθυγραμμίζω, το οποίο καθορίζει την ευθυγράμμιση του περιεχομένου εντός της ετικέτας.  Ένα χαρακτηριστικό έχει συνήθως πολλές έννοιες. Κέντροσημαίνει ότι το περιεχόμενο θα είναι κεντραρισμένο.
Ακολουθούν μερικοί πολύ χρήσιμοι σύνδεσμοι για να ξεκινήσετε γρήγορα: 
htmlbook.ru/html 
html.manual.ru 
www.codecademy.com/tracks/web
Μετά από αυτό, θα πρέπει να αρχίσετε να μαθαίνετε στυλ CSS.  Τι είναι αυτό;  Με απλά λόγια, αυτά είναι στυλ για ετικέτες HTML που βρίσκονται σε μια ιστοσελίδα.  Υπάρχουν πολλά περισσότερα στυλ από τις ετικέτες HTML.  Αλλά αυτό είναι καλό, αφού μπορείτε να δημιουργήσετε εντελώς διαφορετικές επιλογές με την ίδια ετικέτα.  Πρέπει να γνωρίζετε στυλ, και όσο περισσότερα, τόσο το καλύτερο.  Για τον εαυτό σας, μπορείτε να σχεδιάσετε τον ακόλουθο παραλληλισμό: στυλ - σχεδιασμός ετικετών.
Συνήθως, τα στυλ γράφονται είτε απευθείας στο έγγραφο HTML, χρησιμοποιώντας μια ειδική ετικέτα στυλ:
 
 
Ή σε ένα ξεχωριστό αρχείο CSS χωρίς ετικέτες: 
div (χρώμα φόντου: #FFFFFF; ) 
Και στις δύο περιπτώσεις, όλες οι ετικέτες divσε μια ιστοσελίδα, το χρώμα φόντου θα εκχωρηθεί, στην πρώτη περίπτωση μαύρο και στη δεύτερη περίπτωση λευκό. 
Προτιμώ τη δεύτερη επιλογή, δηλαδή τη δημιουργία ξεχωριστού αρχείου, αλλά συχνά χρησιμοποιώ και την πρώτη.
Παρακάτω υπάρχουν σύνδεσμοι όπου μπορείτε να βρείτε μια πιο λεπτομερή περιγραφή κάθε στυλ: 
htmlbook.ru/css 
css.manual.ru 
www.codecademy.com/tracks/web
Εάν έχετε κατακτήσει την τεχνολογία HTML και CSS, προσπαθήστε να δημιουργήσετε έναν απλό ιστότοπο στον τοπικό σας υπολογιστή.  Μην προσπαθήσετε να το κάνετε τέλειο, απλώς παίξτε με τα στυλ, εξασκηθείτε με ετικέτες HTML και γενικά ενοποιήστε τις πληροφορίες που έχετε μάθει.  Στο μέλλον, δεν θα έχετε χρόνο να σκεφτείτε αυτήν ή εκείνη την ετικέτα ή να ελέγξετε τον ιστότοπό σας μετά από κάθε αλλαγή στυλ.  Προσπαθήστε να φανταστείτε στο μυαλό σας πώς θα μοιάζει ενώ γράφετε το στυλ και στη συνέχεια θα ξοδεύετε πολύ λιγότερο χρόνο στη διάταξη της ιστοσελίδας.
Θα ήθελα να προσθέσω μερικές ακόμη χρήσιμες συμβουλές: 
- Να δίνετε πάντα ιδιαίτερη προσοχή στις διαδρομές (URL) προς αρχεία ή εικόνες.  Συχνά εδώ σκοντάφτουν όχι μόνο οι αρχάριοι, αλλά και οι έμπειροι webmasters. 
- Προσπαθήστε να θυμάστε 20-30 χρωματικούς κωδικούς.  Για παράδειγμα, το #000000 είναι μαύρο, το #FFFFFF είναι λευκό και ούτω καθεξής.  Εδώ είναι χρήσιμοι σύνδεσμοι: www.puzzleweb.ru/html/colors_html.php, www.artlebedev.ru/tools/colors. 
- Ξεκινήστε να εργάζεστε με HTML, CSS στο περιβάλλον Notepad++.  Ένας πολύ απλός, διαισθητικός επεξεργαστής με επισήμανση σύνταξης. 
- Σας συμβουλεύω να εξοικειωθείτε με το DOM 
- Προσπαθήστε να βελτιώσετε τα αγγλικά σας.
Είναι δύσκολο να καλυφθούν όλες οι πτυχές της ανάπτυξης ιστού ταυτόχρονα σε ένα άρθρο.  Αυτό που γράφτηκε παραπάνω είναι απλώς μια ματιά στον τεράστιο και ενδιαφέροντα κόσμο της ανάπτυξης Ιστού.  Αλλά από εδώ προτείνω να ξεκινήσετε.  Αφού περάσετε από αυτό το στάδιο, θα καταλάβετε πόσες ευκαιρίες εμφανίζονται μπροστά σας και, ίσως, θα σκάψετε λίγο πιο βαθιά.
Στο επόμενο άρθρο θα προσπαθήσω να περιγράψω την HTML με περισσότερες λεπτομέρειες, αναφέροντας μερικές από τις παγίδες που σκοντάφτουν πιο συχνά οι αρχάριοι.
Ετικέτες: ανάπτυξη ιστοσελίδων, κατασκευή ιστοσελίδων
Στις μέρες μας είναι δύσκολο να φανταστεί κανείς έναν άνθρωπο να δουλεύει με το Διαδίκτυο και να μην ξέρει τι είναι η html.  Πολλοί άνθρωποι θέλουν να μάθουν αυτή τη γλώσσα.  Φαίνεται ότι τίποτα δεν θα μπορούσε να είναι πιο απλό - υπάρχει ένας τρομακτικά τεράστιος αριθμός βιβλίων αφιερωμένων σε αυτό το θέμα.  Είναι πραγματικά τόσο πολύπλοκη η γλώσσα html που αφιερώνονται τεράστιοι τόμοι σε αυτήν;
Σε αυτό το άρθρο θέλω να προσπαθήσω να δώσω βασικές γνώσεις για το θέμα σε εκείνους τους ανθρώπους που θέλουν να μάθουν τη διάταξη, να τους κατευθύνω προς τη σωστή κατεύθυνση.  Αυτό δεν σημαίνει ότι αυτό που έγραψα είναι μια αμετάβλητη αλήθεια.  Θέλω απλώς οι αρχάριοι να έχουν μια μικρή εικόνα για γενικά θέματα.
Αρχικά, θα ήθελα να δώσω μια πρόχειρη περιγραφή αυτού του άρθρου.  Αν κάποιος δεν ενδιαφέρεται για κάτι, μπορεί να το παραλείψει με ασφάλεια.

 
Ποιες ετικέτες πρέπει να γνωρίζετε;
 
Πώς να το κάνετε όμορφο;
 
Τι είναι η html και γιατί χρειάζεται;
Η html δεν είναι γλώσσα προγραμματισμού, όπως νομίζουν πολλοί.  Είναι απλώς μια γλώσσα σήμανσης.  Σκοπός του είναι να προσδιορίσει τη δομή του εγγράφου.  Αν κάποιος σας πει ότι χρειάζεται html για να προσδιορίσετε την εμφάνιση της σελίδας, μην τον πιστεύετε!  Αυτό το άτομο είτε είναι από το παρελθόν είτε δεν κατανοεί πλήρως το θέμα.
Το html ορίζει τη σημασιολογική (με νόημα) διάταξη των στοιχείων.  Ποια παράγραφος ακολουθεί ποια, ποιο περιεχόμενο είναι λογικά συνδεδεμένο και που αντιπροσωπεύει εντελώς διαφορετικά σύνολα δεδομένων, πού να εισαγάγετε μια εικόνα και πού να πάτε κάνοντας κλικ σε αυτόν τον σύνδεσμο.  Κατ' αρχήν, αν χρησιμοποιούταν τώρα μόνο η html για τη διάταξη σελίδας, όλοι οι ιστότοποι δύσκολα θα ήταν πολύ διαφορετικοί στην εμφάνιση.  Εάν κάποιος πει ότι η ρύθμιση εικόνας φόντου είναι μια εργασία html - φτύσει στο πρόσωπο τουμην τον πιστέψεις.
Η HTML, όπως και πολλές άλλες τεχνολογίες που σχετίζονται με τον ιστό, υποστηρίζεται από την κοινοπραξία του W3C.  Αν θέλετε να μάθετε τα πάντα από πρώτο χέρι, επισκεφτείτε τον ιστότοπό τους.  Αλλά πρέπει να σας προειδοποιήσω: οι προδιαγραφές που εκδίδονται από το W3C είναι συμβουλευτικής φύσης, επομένως τα προγράμματα περιήγησης ερμηνεύουν πάντα τον ίδιο κώδικα html διαφορετικά.  Αυτό κάνει τη διάταξη να φαίνεται πολύ πιο περίπλοκη από ό,τι είναι στην πραγματικότητα.
Επί του παρόντος, η πιο πρόσφατη προδιαγραφή html είναι 4.0.  Υπάρχει επίσης η γλώσσα xhtml, η οποία είναι πολύ πιο απαιτητική για τον προγραμματιστή γιατί περιέχει πιο αυστηρά πρότυπα.  Έτσι, οι ετικέτες σε html μπορούν να γραφτούν σε κάθε περίπτωση, αλλά σε xhtml - μόνο σε πεζά.  Και ούτω καθεξής.  Επιμένω στις προδιαγραφές xhtml και θα το περιγράψω παρακάτω.
Η γλώσσα HTML αποτελείται από ένα σύνολο ετικετών.  Αυτές είναι οδηγίες προς το πρόγραμμα περιήγησης που του λένε τη δομή του εγγράφου σας.  Σημείωση: δομή .  Σήμερα μια άλλη τεχνολογία είναι υπεύθυνη για την εμφάνιση - CSS, η οποία θα συζητηθεί παρακάτω.  Για να μάθετε html, στην πραγματικότητα, πρέπει να μάθετε ένα σύνολο ετικετών και των ιδιοτήτων τους και αυτό είναι!  Μπορείτε να ξεκινήσετε τη δημιουργία τοποθεσιών δοκιμών.
Ποιες ετικέτες πρέπει να γνωρίζετε;
Για να ξεκινήσετε, πρέπει να μάθετε ένα μικρό σύνολο ετικετών.  Τώρα θα τα απαριθμήσω, ομαδοποιώντας τα σύμφωνα με ορισμένα κριτήρια. (Η ομαδοποίηση είναι η υποκειμενική μου άποψη για το θέμα και δεν ισχυρίζεται ότι είναι απολύτως αληθινή)
Βασικά: html, κεφάλι, τίτλος, σώμα.
 
Δομικό: div, span;
 
Κείμενο: p, ul, ol, li, h1-h6, br, pre;
 
Πίνακες: τραπέζι, tr, td;
 
Σύνδεσμοι: α;
 
Πολυμέσα: img, αντικείμενο;
 
Πλαίσια: σύνολο πλαισίων, πλαίσιο, iframe;
 
Φόρμες: φόρμα, εισαγωγή, περιοχή κειμένου, ετικέτα, επιλογή, επιλογή.
 
Προαιρετικά: hr;
 
Ειδικά: σενάριο, σύνδεσμος, meta;
Όπως μπορείτε να δείτε, δεν υπάρχουν τόσες πολλές ετικέτες.  Ωστόσο, η εκμάθησή τους μπορεί να διαρκέσει σημαντικό χρόνο, επειδή πολλές από αυτές τις ετικέτες μπορεί να έχουν χαρακτηριστικά που προκαλούν τα στοιχεία να συμπεριφέρονται διαφορετικά.
Κάποιος μπορεί να αγανακτήσει και να πει ότι γνωρίζει άλλες ετικέτες που λειτουργούν.  Ναι, πράγματι, δεν ανέφερα όλες τις ετικέτες που υποστηρίζονται από προγράμματα περιήγησης.  Ωστόσο, αυτές οι ετικέτες είναι βασικές και ένα άτομο που τις γνωρίζει μπορεί να πει ότι ξέρει html.  Σκόπιμα δεν συμπεριέλαβα ετικέτες όπως γραμματοσειρά στη λίστα μου, οι οποίες είναι ξεπερασμένες.  Αυτές οι ετικέτες είναι τόσο κακές που δεν έχει νόημα να μιλάμε για αυτές, γιατί τώρα υπάρχουν πολύ πιο ισχυρά εργαλεία που σας επιτρέπουν να ελέγχετε την εμφάνιση των σελίδων και των τμημάτων τους.  Προσωπικά θεωρώ απαραίτητη και επαρκή τη γνώση των παραπάνω tags.  Γιατί τα υπόλοιπα είτε χρειάζονται πολύ σπάνια είτε δεν χρειάζονται καθόλου.  Επομένως, προτείνω να αρχίσετε να μελετάτε το html μελετώντας αυτές τις ετικέτες.
Πώς να το κάνετε όμορφο;
Όποιος επιχειρήσει να σχεδιάσει μια σελίδα χρησιμοποιώντας τις παραπάνω ετικέτες θα καταλήξει σε μια αρκετά μέτρια σχεδιασμένη σελίδα, η οποία θα είναι λευκή με μαύρο κείμενο και μπλε συνδέσμους.  Μερικοί άνθρωποι μπορεί να είναι σε θέση να διαφοροποιήσουν την τοποθέτηση μπλοκ πληροφοριών χρησιμοποιώντας πίνακες και να ευθυγραμμίσουν χαρακτηριστικά.  Κάποιος θα προσπαθήσει να ζωντανέψει τη σελίδα εισάγοντας εικόνες.  Ωστόσο, υπάρχει ένα ειδικό εργαλείο για την προσαρμογή της εμφάνισης των σελίδων.  Αυτό είναι CSS.
Σήμερα, σχεδόν κανένας ιστότοπος δεν μπορεί να κάνει χωρίς τη χρήση της τεχνολογίας CSS.  Είναι η CSS στην οποία έχει ανατεθεί η αποστολή να καθορίσει τη σχεδίαση ενός εγγράφου.  Το φόντο της σελίδας, το padding, η στοίχιση, οι γραμματοσειρές, τα χρώματα και πολλά άλλα είναι ευθύνη της CSS.  Επομένως, τώρα συνιστάται να μην χρησιμοποιείτε ετικέτες και χαρακτηριστικά που καθορίζουν τη σχεδίαση σελίδων και στοιχείων, αλλά να χρησιμοποιείτε κανόνες CSS.  Είναι καλύτερο να διαβάζετε βιβλία σχετικά με τον τρόπο χρήσης του CSS.  Αλλά θέλω να πω ότι αν συναντήσετε μια ετικέτα ή ένα χαρακτηριστικό που καθορίζει την εμφάνιση ενός στοιχείου, σκεφτείτε 10 φορές πριν το χρησιμοποιήσετε!  Είναι καλύτερα να μάθετε ποιος κανόνας CSS είναι υπεύθυνος για την εμφάνιση του στοιχείου με τον τρόπο που θέλετε να εμφανίζεται.  Με πολύ σπάνιες εξαιρέσεις, ένας τέτοιος κανόνας βρίσκεται πάντα.
Πού είναι το καλύτερο μέρος για να ξεκινήσετε την εκμάθηση της διάταξης;
Είναι καλύτερο να ξεκινήσετε τη δημιουργία διατάξεων αφού κατανοήσετε τις αρχές του τρόπου λειτουργίας του ιστού.  Προσωπικά, θα έκανα ένα πρόγραμμα προπόνησης όπως αυτό:
Μελέτη των αρχών του web και της δομής πελάτη-διακομιστή
 
Μελέτη των ετικετών και των ιδιοτήτων τους, με πρακτικές ασκήσεις για τη χρήση τους
 
Μάθετε κανόνες CSS με πρακτικές ασκήσεις για τον τρόπο εφαρμογής τους
 
Μελέτη διάταξης τραπεζιού
 
Διάταξη απλής διάταξης με πίνακες
 
Διάταξη σύνθετης διάταξης με πίνακες
 
Διερεύνηση των οδηγιών DOCTYPE
 
Διάταξη μπλοκ εκμάθησης (ετικέτα div)
 
Διάταξη μιας απλής διάταξης χρησιμοποιώντας ντίβες
 
Διάταξη σύνθετης διάταξης με χρήση ντίβες
 
Κόλπα, κόλπα, αμυχές και άλλη σοφία από τον γκουρού
Κατ' αρχήν, για ένα αρχικό επίπεδο εκπαίδευσης και γνώσης των βασικών της HTML, αρκεί να περάσετε μόνο από τα 5 πρώτα σημεία. (αυτή η επιλογή θα είναι ιδανική για προγραμματιστές Ιστού που δεν θα σχεδιάζουν ιστότοπους. Χρειάζονται μόνο γνώσεις html για να εμφανίσουν τα δεδομένα που λαμβάνονται ως αποτέλεσμα της εκτέλεσης σεναρίου.)
Το HTML είναι συντομογραφία Γλώσσα σήμανσης υπερκειμένου(Γλώσσα σήμανσης υπερκειμένου), οι ιστότοποι δημιουργούνται σε αυτήν τη γλώσσα.  Εάν δεν έχετε προγραμματίσει ποτέ, η εκμάθηση μπορεί να φαίνεται τρομακτική, αλλά στην πραγματικότητα, το μόνο που χρειάζεστε για να ξεκινήσετε είναι ένα βασικό πρόγραμμα επεξεργασίας κειμένου και πρόγραμμα περιήγησης.  Θα μάθετε πώς η HTML επηρεάζει το κείμενο, τη διάταξη διάφορων τοποθεσιών και ούτω καθεξής.  Η γνώση της HTML θα είναι εξαιρετικά χρήσιμη για κάθε χρήστη του Διαδικτύου και η εκμάθηση των βασικών θα πάρει λιγότερο χρόνο από όσο νομίζετε.
Βήματα
 

Εκμάθηση Βασικών HTML

 
Ανοίξτε το αρχείο HTML.Τα περισσότερα προγράμματα επεξεργασίας κειμένου (Notepad ή Word για Windows, TextEdit για Mac) μπορούν να χρησιμοποιηθούν για τη δημιουργία αρχείων HTML.  Δημιουργήστε ένα νέο έγγραφο και αποθηκεύστε το (Αρχείο > Αποθήκευση ως) σε μορφή ιστοσελίδας ή αλλάξτε την επέκταση αρχείου σε ".html" ή ".htm" αντί για ".doc", ".rtf" ή άλλη επέκταση. 

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


 
Μάθετε ετικέτες σήμανσης.Οι ετικέτες δεν εμφανίζονται στη σελίδα όπως το κανονικό κείμενο.  Αντίθετα, λένε στο πρόγραμμα περιήγησης πώς να εμφανίζει τη σελίδα και το περιεχόμενό της.  Η "ετικέτα ανοίγματος" περιέχει οδηγίες.  Για παράδειγμα, υπάρχει μια ετικέτα για τολμηρόςκείμενο.  Χρειάζεστε επίσης μια "ετικέτα κλεισίματος" για να οριοθετήσετε το εύρος της εντολής: σε αυτό το παράδειγμα, το κείμενο μεταξύ των ετικετών ανοίγματος και κλεισίματος θα εμφανίζεται με έντονη γραφή.  Οι ετικέτες γράφονται με ίσα σημάδια, αλλά η ετικέτα κλεισίματος αρχίζει με κάθετο.
Η ετικέτα ανοίγματος γράφεται μεταξύ των ίσων συμβόλων:< Открывающий тег >
Στην ετικέτα κλεισίματος, τοποθετείται μια κάθετη προς τα εμπρός πριν από τον περιγραφέα της ετικέτας (όνομα):)
Διαβάστε παρακάτω για να μάθετε σχετικά με τη χρήση ετικετών.  Για αυτό το βήμα, αρκεί να θυμάστε ότι οι ετικέτες εγγραφής είναι γραμμένες μεταξύ των πινακίδων ανισότητας:< >Και
Σε ορισμένα μαθήματα HTML, οι ετικέτες ονομάζονται "στοιχεία" και το κείμενο μεταξύ των ετικετών ανοίγματος και κλεισίματος ονομάζεται "περιεχόμενο στοιχείου".


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

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


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

Ανάμεσα σε ετικέτες , γράψε 3 τρόποι εκμάθησης HTML - wikiHow.
Αποθηκεύστε τις αλλαγές σας και ανοίξτε το αρχείο στο πρόγραμμα περιήγησής σας (ή ανανεώστε τη σελίδα εάν το αρχείο είναι ήδη ανοιχτό).  Πρέπει το κείμενο να εμφανίζεται στον τίτλο της σελίδας, πάνω από τη γραμμή διευθύνσεων;


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




.  Για το υπόλοιπο αυτού του σεμιναρίου, εργαστείτε με το τμήμα του σώματος.  Το αρχείο σας θα πρέπει να μοιάζει κάπως έτσι:













 
Προσθέστε κείμενο χρησιμοποιώντας διαφορετικά στυλ.Ήρθε η ώρα να προσθέσετε πραγματικό περιεχόμενο σελίδας!  Ό,τι γράψετε ανάμεσα στις ετικέτες σώματος θα εμφανιστεί στη σελίδα αφού ανανεώσετε το πρόγραμμα περιήγησης. Μην χρησιμοποιείτεσύμβολα <
ή >
, επειδή το πρόγραμμα περιήγησης θα προσπαθήσει να ερμηνεύσει το περιεχόμενο ως ετικέτα αντί για κείμενο.  Γράφω Γεια σου κόσμο!(ή ό,τι άλλο θέλετε), στη συνέχεια δοκιμάστε να προσθέσετε αυτές τις ετικέτες στο κείμενο και δείτε τι συμβαίνει:
Γεια σου κόσμο!επισημαίνει το κείμενο με πλάγιους χαρακτήρες: Γεια σου κόσμο!
Γεια σου κόσμο!κάνει το κείμενο "έντονο": Γεια σου κόσμο!
Γεια σου κόσμο!διαγράφει το κείμενο: Γεια σου κόσμο!
Γεια σου κόσμο!εμφανίζει τη γραμματοσειρά ως εκθέτη: Hello world!
Γεια σου κόσμο!εμφανίζει τη γραμματοσειρά ως δείκτη: Γεια σου κόσμο!
Δοκιμάστε διαφορετικές ετικέτες μαζί: Πώς θα φαίνεται Γεια σου κόσμο! ?


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

 
Μάθετε να δημιουργείτε λίστες.Υπάρχουν διάφοροι τρόποι δημιουργίας λιστών σε μια σελίδα.  Δοκιμάστε τις παρακάτω επιλογές για να δείτε ποια σας αρέσει περισσότερο.  Λάβετε υπόψη ότι η λίστα τοποθετείται μεταξύ δύο ετικετών (για παράδειγμα, για μια λίστα με κουκκίδες) και τα στοιχεία της λίστας επισημαίνονται επίσης με ειδικές ετικέτες, για παράδειγμα.
Λίστα με κουκκίδες: 
 
Πρώτη γραμμή
Δεύτερη γραμμή
Και ούτω καθεξής
Αριθμημένη λίστα: 
 
Ενας
Δυο
Τρία
Κατάλογος ορισμών: 
 
Καφές
- ζεστό ρόφημα
Λεμονάδα
- κρύο ποτό


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

Οριζόντια γραμμή: 

Εισαγωγή εικόνας: 


 
Δημιουργήστε μια ετικέτα αγκύρωσης στη θέση στη σελίδα στην οποία θέλετε να συνδεθείτε.  Βρείτε ένα ακριβές και αξέχαστο όνομα: 
Χρήση ετικέτας για να δημιουργήσετε έναν σχετικό σύνδεσμο ή έναν σύνδεσμο προς έναν εξωτερικό πόρο:

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

Προηγμένη HTML


 
Μάθετε τις ιδιότητες.Τα χαρακτηριστικά γράφονται μέσα σε μια ετικέτα για να υποδείξουν πρόσθετες πληροφορίες.  Η μορφή του χαρακτηριστικού είναι: όνομα = "τιμή", Πού Ονομαορίζει ένα χαρακτηριστικό ("χρώμα", για ένα χαρακτηριστικό χρώματος) και μια τιμή υποδεικνύει την τιμή του (για παράδειγμα, "κόκκινο", για το κόκκινο χρώμα).
Τα χαρακτηριστικά είχαν ήδη χρησιμοποιηθεί στην προηγούμενη ενότητα Βασικά HTML.  Ετικέτα χρησιμοποιεί χαρακτηριστικό src, οι σχετικές αγκυρώσεις συνδέσμων χρησιμοποιούν το χαρακτηριστικό όνομακαι οι σύνδεσμοι χρησιμοποιούν το χαρακτηριστικό href.  Όπως έχετε ήδη παρατηρήσει, όλα τα χαρακτηριστικά είναι γραμμένα στη μορφή ___="___"
?


 
Πειραματιστείτε με πίνακες HTML.Η δημιουργία ενός πίνακα περιλαμβάνει τη χρήση διαφόρων ετικετών.  Μπορείτε να πειραματιστείτε ή να διαβάσετε τις οδηγίες.
Δημιουργία ετικετών πίνακα: 
Περικλείστε τα περιεχόμενα κάθε σειράς πίνακα σε ετικέτες: 
Η κεφαλίδα της στήλης καθορίζεται από την ετικέτα: 
Κελιά στις επόμενες σειρές: 
Ένα παράδειγμα χρήσης αυτών των ετικετών: 
 
Στήλη 1: Μήνας
Στήλη 2: Εξοικονομήθηκαν χρήματα
Ιανουάριος
100 ρούβλια