Html τι είναι και σε τι χρησιμεύει; Για να βοηθήσει τον προγραμματιστή. Πώς χρησιμοποιήθηκε η HTML πριν από το CSS

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

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

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



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

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

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

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

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

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

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

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

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

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

Βασικοί Στόχοι και Στόχοι της HTML

Πριν από λίγο καιρό ήμουν στο blog μου. Από αυτό μπορείτε να μάθετε πώς να χρησιμοποιείτε το CSS για να αλλάξετε την εμφάνιση μιας σελίδας ιστότοπου και το στυλ της. Τώρα ας δούμε τα βασικά της διάταξης HTML για αρχάριους.

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

Η HTML είναι ένα εργαλείο για τη λεγόμενη ανάπτυξη ιστοσελίδων front-end. Τι σημαίνει αυτό; Σίγουρα έχετε ακούσει περισσότερες από μία φορές ότι υπάρχουν τέτοιες έννοιες στο περιβάλλον δημιουργίας ιστότοπου όπως το front-end και το back-end. Έτσι, η ανάπτυξη front-end (εξωτερική διεπαφή) περιλαμβάνει εργαλεία και γλώσσες που είναι υπεύθυνες για την απευθείας εμφάνιση του ιστότοπου στον χρήστη. Εμφανίζεται με χρήση διαφορετικών προγραμμάτων περιήγησης (Internet Explorer, Opera, Mozilla, Chrome κ.λπ.). Διαβάστε σχετικά. Τα προγράμματα περιήγησης κατανοούν καλά την HTML και το CSS και μετατρέπουν τις ληφθείσες πληροφορίες σε μια φόρμα που μπορεί να κατανοήσει ο χρήστης.

Η ανάπτυξη back-end βασίζεται σε γλώσσες του διακομιστή, όπως η PHP. Χρησιμοποιώντας τον κώδικα PHP, τα δεδομένα τοποθεσίας αναγνωρίζονται από τον διακομιστή και στη συνέχεια μεταδίδονται στο πρόγραμμα περιήγησης μετά τη μετατροπή του κώδικα από έναν ειδικό διερμηνέα. Εκείνοι. Το πρόγραμμα περιήγησης λαμβάνει κατά κάποιο τρόπο τον ιστότοπο με τη μορφή σήμανσης HTML και στυλ CSS. Μπορείτε να προβάλετε τον πηγαίο κώδικα του ιστότοπου, για παράδειγμα, στο . Δεν είναι πάντα δυνατό να ξεχωρίσετε από τον πηγαίο κώδικα σε ποια γλώσσα προγραμματισμού είναι γραμμένος ο ιστότοπος, αλλά θα βλέπετε κώδικες στυλ CSS και ετικέτες HTML ανεξάρτητα.

Από πού να ξεκινήσω την εκμάθηση HTML;

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

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

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

Για να δημιουργήσουμε ένα έγγραφο HTML θα χρησιμοποιήσουμε έναν βολικό επεξεργαστή.

Το πρώτο πράγμα που πρέπει να δηλωθεί είναι ο τύπος του εγγράφου με έναν σύνδεσμο προς την αντίστοιχη ενότητα:

1 2 "https://www.w3.org/TR/html4/loose.dtd">

Τώρα ας δημιουργήσουμε μια απλή σελίδα index.html με τα ακόλουθα σχόλια:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 "https://www.w3.org/TR/html4/loose.dtd"> <html > <κεφάλι > <meta http-equiv = περιεχόμενο "Τύπος περιεχομένου" = "text/html; charset=utf-8" / > <τίτλος >Τίτλος σελίδας</τίτλος> <style type = "text/css" > </στυλ> </κεφάλι> <σώμα > <h1 >Επικεφαλίδα σελίδας #1</h1> <div class = "blok1" > </div> <h2 >Υπότιτλος 2</h2> <div class = "blok2" >Δεύτερο μπλοκ της σελίδας</div> </σώμα> </html>

Τίτλος σελίδας

Επικεφαλίδα σελίδας #1

Το πρώτο μπλοκ της σελίδας είναι μια παράγραφος. Δεύτερη γραμμή μπλοκ από την παράγραφο

Υπότιτλος 2

Δεύτερο μπλοκ της σελίδας


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

Ας δούμε τα συστατικά του με περισσότερες λεπτομέρειες.

Το πλαίσιο του εγγράφου είναι οι ετικέτες: html, head, body. Επιπλέον, η ετικέτα html περιέχει όλα τα υπόλοιπα:

1 2 3 4 5 6 <html > <κεφάλι > </κεφάλι> <σώμα > </σώμα> </html>



Αντίστοιχα, η ετικέτα html ανακοινώνει το άνοιγμα και το κλείσιμο ενός εγγράφου html για ανάγνωση ( - ετικέτα ανοίγματος,- ετικέτα κλεισίματος).

Η κεφαλή είναι η "κεφαλή" του εγγράφου, περιλαμβάνει πληροφορίες που δεν εμφανίζονται στο σώμα του εγγράφου. Κατά συνέπεια, το σώμα είναι το «σώμα» του εγγράφου ή το ορατό μέρος του.

Στο head υποδεικνύουμε την κωδικοποίηση (charset=utf-8) και τον τίτλο της σελίδας. Στη συνέχεια, για τη δεδομένη επιλογή, συνδέουμε στυλ χρησιμοποιώντας την ετικέτα

Στην περίπτωσή μας, ορίζουμε στυλ για μπλοκ blok1 και blok2. Δημιουργήσαμε αυτά τα μπλοκ μέσα στις ετικέτες σώματος χρησιμοποιώντας ετικέτες

, για την οποία καθορίστηκε η αντίστοιχη κλάση (class=”blok1”). Έτσι, συσχετίσαμε το όνομα της κλάσης με το στυλ της.

Όπως μπορείτε να δείτε στο στιγμιότυπο οθόνης, το πρώτο μπλοκ blok1 έχει κίτρινο γέμισμα και το blok2 είναι πλαισιωμένο και το χρώμα του κειμένου του είναι μπλε. Όλα αυτά τα ορίσαμε χρησιμοποιώντας στυλ css συνδεδεμένα χρησιμοποιώντας την ετικέτα στυλ html.

Δώστε προσοχή στο σχέδιο: