Προσθέστε έναν σύνδεσμο σε μια εικόνα σε HTML

Συγγραφέας: Christy White
Ημερομηνία Δημιουργίας: 12 Ενδέχεται 2021
Ημερομηνία Ενημέρωσης: 1 Ιούλιος 2024
Anonim
Οδηγός ΕΙΚΟΝΑΣ HTML
Βίντεο: Οδηγός ΕΙΚΟΝΑΣ HTML

Περιεχόμενο

Με μία μόνο γραμμή κώδικα HTML, μπορείτε να προσθέσετε μια εικόνα με δυνατότητα κλικ σε σχεδόν οποιονδήποτε ιστότοπο. Υπάρχουν δύο πράγματα που θα χρειαστείτε για να κάνετε αυτό το έργο. Χρειάζεστε μια διεύθυνση URL για την εικόνα και επίσης τη διεύθυνση URL ενός ιστότοπου.

Για να πας

Μέθοδος 1 από 2: Γράψτε τον κώδικα HTML

  1. Δημιουργήστε ένα αρχείο HTML. Ανοίξτε ένα πρόγραμμα επεξεργασίας κειμένου και, στη συνέχεια, δημιουργήστε ένα νέο αρχείο. Αποθηκεύστε το αρχείο ως index.html.
      • Μπορείτε να χρησιμοποιήσετε οποιοδήποτε πρόγραμμα επεξεργασίας κειμένου θέλετε, ακόμα και τους απλούς επεξεργαστές κειμένου των Windows (Σημειωματάριο) και Mac OS X (TextEdit).
      • Εάν θέλετε να χρησιμοποιήσετε ένα πρόγραμμα επεξεργασίας κειμένου που προορίζεται για εργασία με HTML, κάντε κλικ εδώ για να κατεβάσετε το Atom, ένα πρόγραμμα επεξεργασίας κειμένου για Windows, Mac OS X και Linux.
      • Εάν χρησιμοποιείτε TextEdit, κάντε κλικ στο μενού Μορφοποίηση πριν δημιουργήσετε το αρχείο HTML και, στη συνέχεια, κάντε κλικ στην επιλογή Δημιουργία απλού κειμένου. Αυτή η ρύθμιση διασφαλίζει ότι το αρχείο HTML φορτώνεται σωστά σε ένα πρόγραμμα περιήγησης ιστού.
      • Οι επεξεργαστές κειμένου όπως το Microsoft Word δεν είναι πραγματικά καλοί για τη σύνταξη HTML, επειδή προσθέτουν αόρατους χαρακτήρες και μορφοποιήσεις που μπορούν να καταστρέψουν το αρχείο HTML και να το καταστήσουν εσφαλμένα εμφανιζόμενο σε ένα πρόγραμμα περιήγησης ιστού.
  2. Αντιγράψτε και επικολλήστε τον τυπικό κώδικα HTML. Επιλέξτε και αντιγράψτε τον κώδικα HTML παρακάτω και επικολλήστε τον στο ανοιγμένο index.html.

    a href = "target url"> img src = "url εικόνας" /> / α>

  3. Βρείτε τη διεύθυνση URL της εικόνας σας. Βρείτε μια εικόνα στον ιστό, κάντε δεξί κλικ και (ανάλογα με το πρόγραμμα περιήγησής σας) κάντε κλικ στην επιλογή Αντιγραφή διεύθυνσης URL εικόνας, Αντιγραφή διεύθυνσης εικόνας ή Αντιγραφή θέσης εικόνας.
      • Ο Firefox και ο Internet Explorer χρησιμοποιούν Αντιγραφή θέσης εικόνας. Το Chrome χρησιμοποιεί αντιγραφή URL εικόνας. Το Safari χρησιμοποιεί Αντιγραφή διεύθυνσης εικόνας.
  4. Προσθέστε τη διεύθυνση URL της εικόνας. Στο αρχείο index.html, κάντε κλικ και σύρετε για να επιλέξετε τη διεύθυνση URL της εικόνας με το ποντίκι σας και, στη συνέχεια, πατήστε CTRL + V για να επικολλήσετε τη διεύθυνση URL.
  5. Προσθέστε τη διεύθυνση URL προορισμού. Στο index.html διαγράψτε τη διεύθυνση URL προορισμού και πληκτρολογήστε https://www.startpage.com.
      • Μπορείτε να χρησιμοποιήσετε οποιαδήποτε διεύθυνση URL ως διεύθυνση URL προορισμού.
  6. Αποθηκεύστε το αρχείο HTML.
  7. Ανοίξτε το αρχείο HTML σε πρόγραμμα περιήγησης ιστού. Κάντε δεξί κλικ στο index.html και, στη συνέχεια, ανοίξτε αυτό το αρχείο στο πρόγραμμα περιήγησης ιστού της επιλογής σας.
      • Εάν το πρόγραμμα περιήγησης ανοίγει αλλά δεν βλέπετε την εικόνα, βεβαιωθείτε ότι έχετε γράψει σωστά το όνομα του αρχείου εικόνας στο αρχείο index.html.
      • Όταν ανοίξει το πρόγραμμα περιήγησης, αλλά βλέπετε κώδικα HTML αντί για την εικόνα φόντου, το index.html αποθηκεύεται ως αρχείο .rtf (αρχείο εμπλουτισμένου κειμένου). Δοκιμάστε να επεξεργαστείτε το αρχείο HTML σε άλλο πρόγραμμα επεξεργασίας κειμένου.

Μέθοδος 2 από 2: Κατανόηση κώδικα HTML

  1. Κατανοήστε την ετικέτα αγκύρωσης. Ο κώδικας HTML αποτελείται από ετικέτες ανοίγματος και κλεισίματος. Η ετικέτα href = ""> είναι η ετικέτα έναρξης και / a> είναι η τελική ετικέτα. Αυτό ονομάζεται άγκυρα και χρησιμοποιείται για την προσθήκη συνδέσμων σε μια ιστοσελίδα.
    • ο ένα λέει σε ένα πρόγραμμα περιήγησης να δημιουργήσει έναν σύνδεσμο. ο href είναι μια συντομογραφία για την αναφορά HTML, το = λέει στο πρόγραμμα περιήγησης να αλλάξει τα πάντα ’ ’ δημιουργήστε έναν σύνδεσμο. Οποιαδήποτε διεύθυνση URL μπορεί να τοποθετηθεί μεταξύ των δύο εισαγωγικών.
    • ο / α> λέει στο πρόγραμμα περιήγησης ότι η ετικέτα αγκύρωσης είναι κλειστή.
    • Όταν προσθέτετε κείμενο μεταξύ a href = ""> και / α> αυτό το κείμενο γίνεται σύνδεσμος με δυνατότητα κλικ σε μια ιστοσελίδα. Για παράδειγμα: a href = "https://www.google.com"> Google / a> δημιουργεί έναν σύνδεσμο προς το Google.
  2. Κατανοήστε την ετικέτα εικόνας. Η ετικέτα img> είναι κλειστή. Μπορείτε να το κλείσετε με img src = "" /> ή img src = ""> / img>.
    • ο π.χ. Η ετικέτα λέει σε ένα πρόγραμμα περιήγησης να εμφανίζει μια εικόνα. ο src είναι μια συντομογραφία για την πηγή, de = λέει στο πρόγραμμα περιήγησης να διαγράψει τα πάντα μεταξύ του ’ ’ και ανακτήστε την εικόνα από αυτήν τη θέση.
    • ο /> λέει σε ένα πρόγραμμα περιήγησης να κλείσει την ετικέτα εικόνας.
    • Για παράδειγμα: {samp [} λαμβάνει την εικόνα από αυτήν τη διεύθυνση URL και, στη συνέχεια, την εμφανίζει σε πρόγραμμα περιήγησης ιστού.
  3. Χρησιμοποιήστε αυτόν τον κωδικό παντού. Τώρα που γνωρίζετε αυτόν τον κωδικό, μπορείτε a href = "target url"> img src = "url εικόνας" /> / α> για την προσθήκη εικόνων με δυνατότητα κλικ σε οποιαδήποτε ιστοσελίδα με κώδικα HTML.