Είστε Blogger; Στη συνέχεια, θα επωφεληθείτε από τη γνώση κάποιου κώδικα HTML

Μπερδεμένος Κωδικός HTML? Δεν είσαι ο μόνος.


Θα το παραδεχτώ. Όταν άρχισα να γράφω για το διαδίκτυο, ήξερα το zilch Κωδικός HTML. Και θα το παραδεχτώ ξανά. Ακόμα δεν ξέρω πολλά.

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

μάθετε γλώσσα σήμανσης υπερ κειμένου

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

Θέλετε να εξαλείψετε αυτήν τη σύγχυση και να μάθετε λίγο για την κωδικοποίηση HTML; Ας αρχίσουμε.

Τι είναι ο κώδικας HTML?

Το έχετε δει γύρω, αλλά πιθανότατα δεν γνωρίζετε τι σημαίνει αυτό το ασυναρτησία HTML.

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

Τα προγράμματα περιήγησης στο Web διαβάζουν HTML και χρησιμοποιούν τις ετικέτες για να καθορίσουν τον τρόπο εμφάνισης του περιεχομένου. Ένα παράδειγμα μιας ετικέτας είναι αυτή που δημιουργεί έντονο κείμενο, το οποίο μοιάζει με αυτό:

Αυτό είναι έντονο κείμενο.

Στη σελίδα, μοιάζει με αυτό:

Αυτό είναι έντονο κείμενο.

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

Γιατί είναι καλό να γνωρίζουν οι Blogger

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

Ακολουθούν ορισμένες καταστάσεις στις οποίες το θεωρώ χρήσιμο:

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

Συνηθισμένοι κώδικες χρήσης Bloggers

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

Ακούγεται σύγχυση; Είναι πιο εύκολο αν δώσω μερικά παραδείγματα. Ας ρίξουμε μια ματιά σε μερικές από τις κοινές ετικέτες HTML που πρέπει να γνωρίζετε ως blogger.

Σκελετικές ετικέτες

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

Παρόλα αυτά, είναι καλό να γνωρίζουμε. Για παράδειγμα, έχετε συνεργαστεί ποτέ με ένα πρόγραμμα που σας ζητά να επικολλήσετε έναν κώδικα στην ενότητα “κεφάλι” του ιστότοπού σας; Θα μπορείτε να το βρείτε με λίγη γνώση HTML. Εδώ είναι μερικές σκελετικές ετικέτες που πρέπει να γνωρίζετε:

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

    : Αυτή η ετικέτα περιγράφει μια παράγραφο.

Να θυμάστε ότι το κείμενο της σελίδας σας περικλείεται στις ετικέτες έναρξης και τέλους. Ακολουθεί ένα παράδειγμα:

Αυτό είναι κείμενο παραγράφου.

Ετικέτες επικεφαλίδας

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

Η επικεφαλίδα 1 πρέπει να χρησιμοποιηθεί για την κύρια επικεφαλίδα του εγγράφου, όπως ο τίτλος της ανάρτησης ιστολογίου σας. Η επικεφαλίδα 2 πρέπει να είναι δευτερεύουσες πληροφορίες, όπως οι κύριες υπότιτλοι. Χρησιμοποιήστε την επικεφαλίδα 3 για υπο-υπότιτλους και ούτω καθεξής έως την επικεφαλίδα 6. Αυτές οι ετικέτες μοιάζουν με αυτό:

Ακολουθεί ένα παράδειγμα του πώς μεταφράζεται:

Αυτή είναι η επικεφαλίδα 5

Αυτή είναι η επικεφαλίδα 5

Εσωτερικές ετικέτες κειμένου

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

και

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

Λίστα ετικετών

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

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

    Ακολουθεί ένα παράδειγμα του πώς θα μοιάζει ο κώδικας HTML για μια λίστα με παραγγελίες:

    1. Στοιχείο λίστας 1
    2. Στοιχείο λίστας 2
    3. Στοιχείο λίστας 3

    Δείτε πώς εμφανίζεται στη σελίδα:

    1. Στοιχείο λίστας 1
    2.  Στοιχείο λίστας 2
    3.  Στοιχείο λίστας 3

    Ετικέτες εικόνας και συνδέσμου

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

    Σύνδεσμος

    ΤΟ ΚΕΙΜΕΝΟ ΑΓΚΥΡΙΑ ΣΑΣ

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

    Ας δούμε ένα παράδειγμα. Αν ήθελα να συνδεθώ με ένα προηγούμενο άρθρο του Hosting Kingdom, ο κώδικας θα μοιάζει με τον εξής:

    Πρέπει να καταχωρίσετε έναν τομέα μέσω του οικοδεσπότη Ιστού σας?

    Ο σύνδεσμος θα εμφανιστεί έτσι στη σελίδα:

    Πρέπει να καταχωρίσετε έναν τομέα μέσω του οικοδεσπότη Ιστού σας?

    Εικόνα

    Ο κωδικός για μια εικόνα μοιάζει με αυτόν:

    Λάβετε υπόψη ότι πρόκειται για ετικέτα χωρίς κοντέινερ, επομένως δεν έχει την τελική ετικέτα, αλλά χρειάζεστε το χαρακτηριστικό src. Μπορείτε να προσθέσετε πρόσθετα σε αυτήν την ετικέτα, όπως εναλλακτικό κείμενο ή ορισμό μεγέθους. Αυτό θα μοιάζει με αυτό:

    ”YOUR

    Και πάλι, βεβαιωθείτε ότι δεν καταργείτε τα εισαγωγικά.

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

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

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map