Scribd Logo
Upload

Welcome to Scribd!

  • Εισαγωγή στην HTML

    Uploaded by

    GeorgePapaloukas
    434 views6 pages
    Εισαγωγή στην HTML, Βασικά tags, elements. attributes

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Εισαγωγή στην HTML, Βασικά tags, elements. attributes

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    434 views6 pages

    Εισαγωγή στην HTML

    Uploaded by

    GeorgePapaloukas
    Εισαγωγή στην HTML, Βασικά tags, elements. attributes

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 6

    HypertexT Markup Language | Γ λ ώ σ σ α σ υ γ γ ρ α φ ή ς ι σ τ ο σ ε λ ί δ ω ν | Σ ε λ ί δ α |1

    ΤΑΞΗ Α ΓΕΛ

    ΜΑΘΗΜΑ Εφαρμογές Πληροφορικής

    ΦΥΛΛΟ ΕΡΓΑΣΙΑΣ -

    ΠΕΡΙΕΧΕΙ Βασική θεωρία και HTML ετικέτες (Tags)

    Τι είναι η HTML

    Η HTML, ένα ακρωνύμιο για την HyperText Markup Language, είναι μια γλώσσα προγραμματισμού για τη συγγραφή
    ιστοσελίδων. Η HTML επινοήθηκε από τον Βρετανό Φυσικό Tim Berners-Lee το 1990 (έκδοση HTML 1.0). Έκτοτε έχει
    δεχτεί πολλές αναβαθμίσεις. Η πλέον πρόσφατη έκδοση είναι η HTML 5.1 το 2016.

    Μια ιστοσελίδα είναι ένα αρχείο κειμένου με επέκταση html1. Η ιστοσελίδα ονομάζεται και HTML αρχείο. Το
    κείμενο της ιστοσελίδας είναι γραμμένο σε γλώσσα HTML.

    Όταν το HTML αρχείο «ανοίξει» με μια εφαρμογή κειμενογράφου (π.χ. Σημειωματάριο / Notepad, MS Word)
    βλέπουμε τον HTML κώδικα της ιστοσελίδας, ο οποίος είναι ακατανόητος για τον επισκέπτη της ιστοσελίδας και
    μοιάζει κάπως έτσι:
    <html>
    <body>
    <p>I am normal</p>
    <p style="color:red;">I am red</p>
    <p style="color:blue;">I am blue</p>
    <p style="font-size:36px;">I am big</p>
    </body>
    </html>

    Όταν το HTML αρχείο «ανοίξει» με έναν φυλλομετρητή2 (π.χ. Google Chrome, Mozilla Firefox, Opera) ο επισκέπτης
    της ιστοσελίδας δε βλέπει τα ακατανόητα τμήματα του κώδικα, όπως <html>, <body> κ.λπ. Βλέπει κάτι πιο όμορφο
    και κατανοητό:

    1
    Επέκταση ή extension είναι τα 3 ή 4 γράμματα που χαρακτηρίζουν τον τύπο του αρχείου, π.χ. png ή gif ή jpg είναι αρχείο
    εικόνας, doc ή txt είνι αρχείου κειμένου, wav ή mp3 είναι αρχείο ήχου.
    2
    εφαρμογή πλοήγησης στο διαδίκτυο
    HypertexT Markup Language | Γ λ ώ σ σ α σ υ γ γ ρ α φ ή ς ι σ τ ο σ ε λ ί δ ω ν | Σ ε λ ί δ α |2
    Στόχος του βοηθήματος είναι να εξοικειώσει τον μαθητή με τη γλώσσα HTML και να τον βοηθήσει στη συγγραφή
    απλών ιστοσελίδων.

    Διαλέγοντας τον HTML κειμενογράφο

    Για να δημιουργήσουμε ιστοσελίδες σε γλώσσα HTML χρειαζόμαστε έναν κειμενογράφο (editor) προκειμένου να
    γράψουμε HTML εντολές (ετικέτες ή tags, όπως αυτές ονομάζονται). Η δουλειά μπορεί να γίνει με τους γνωστούς
    κειμενογράφους Σημειωματάριο (Notepad) ή MS Word.

    Ωστόσο, υπάρχουν πολλοί εξειδικευμένοι κειμενογράφοι για συγγραφή ιστοσελίδων όπως οι CoffeeCup, Kompozer,
    Notepad++, Bluefish κ.λπ.

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

    Τα βασικά δομικά στοιχεία της HTML

    Ετικέτες ή tags: είναι «εντολές» που εκτελούνται από το πρόγραμμα περιήγησης (φυλλομετρητής) και έχουν σκοπό
    να δώσουν μορφή, να μορφοποιήσουν δηλαδή, το κείμενο ή άλλα στοιχεία της ιστοσελίδας.

    Τα tags συνήθως συντάσσονται σε ζεύγη (αρχή- τέλος). Δηλώνουμε την αρχή μιας ετικέτας εσωκλείοντάς την μέσα
    σε “<” και “>” (π.χ. <b>). Σχεδόν κάθε φορά που ανοίγουμε μια ετικέτα, θα πρέπει να την κλείσουμε. Δηλώνουμε το
    τέλος μιας ετικέτας εσωκλείοντας την μέσα σε “<” και “>”, αλλά αυτή τη φορά με μια επιπλέον κάθετο”/” (</b>) .
    HypertexT Markup Language | Γ λ ώ σ σ α σ υ γ γ ρ α φ ή ς ι σ τ ο σ ε λ ί δ ω ν | Σ ε λ ί δ α |3
    Στο παράδειγμα που ακολουθεί το tag αρχής <b> και το ταίρι του tag τέλους </b> δίνουν τη μορφή BOLD (έντονα
    γράμματα) στη λέξη καλημέρα.

    Κάθε ιστοσελίδα περιέχει δομημένα τα παρακάτω βασικά tags:

    <html>
    <head>
    <title> </title>
    </head>
    <body>
    </body>
    </html>
    Tag αρχής Tag τέλους Λειτουργία Παράδειγμα
    ορίζει την αρχή και το τέλος της
    <html> </html> ιστοσελίδας

    περιέχει μεταπληροφορίες για


    την ιστοσελίδα, όπως τον τίτλο
    <head> </head> της, λέξεις κλειδιά χρήσιμες στις
    μηχανές αναζήτησης κ.λπ.

    <title> </title> ορίζει τον τίτλο της ιστοσελίδας

    περιέχει το ορατό (στον


    <body> </body> φυλλομετρητή) τμήμα της
    ιστοσελίδας

    Στοιχείο ή Element: είναι το tag αρχής, το tag τέλους και το μεταξύτους περιεχόμενο. Άρα το <b>Καλημέρα</b>
    είναι ένα element. Τα elements είναι απλά (όπως παραπάνω) ή σύνθετο, όταν απαρτίζεται από άλλα εμφωλευμένα
    elements. Έτσι το <i><b>Καλημέρα</b></i> είναι σύνθετο element.

    Γνώρισμα ή ιδιότητα ή attribute: Ενώ οι HTML ιστοσελίδες χρησιμοποιούν κατά κανόνα tags για το κάθε τι, κάποιες
    φορές είναι ανάγκη να προσθέσουμε περιγραφική πληροφορία μέσα στο element. Στην περίπτωση αυτή
    χρησιμοποιούμε το attribute. Το attribute προσδιορίζει κάποιο χαρακτηριστικό του element και τοποθετείται μέσα
    στο tag αρχής. Το attribute απαρτίζεται από το όνομα και την τιμή του.
    HypertexT Markup Language | Γ λ ώ σ σ α σ υ γ γ ρ α φ ή ς ι σ τ ο σ ε λ ί δ ω ν | Σ ε λ ί δ α |4
    Το attribute align=”center” προσδιορίζει ότι η στοίχιση του κειμένου στο element <p align="center">Σε γνωρίζω από
    την κόψη του σπαθιού την τρομερή</p> είναι στοίχιση στο κέντρο.

    Σχόλιο ή comment: Τα σχόλια δεν εκτελούνται και αγνοούνται από το πρόγραμμα περιήγησης. Είναι πληροφορίες
    που υπομνηματίζουν τμήματα κώδικα, απευθύνονται στον προγραμματιστή και τον βοηθούν στην κατανόση του
    κώδικα (είτε τον έχει γράψει ο ίδιος είτε κάποιος άλλος).

    Αν θέλουμε να βάλουμε ένα σχόλιο θα πρέπει να το εσωκλείσουμε σε “<!--“ και “-->”.

    Η φράση «αυτό είναι ένα σχόλιο» δεν εμφανίζεται στο πρόγραμμα περιήγησης.

    Τα βασικά tags της HTML


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

    Λειτουργία Παράδειγμα

    ορίζει την αρχή και


    <html> </html> το τέλος της
    ιστοσελίδας
    περιέχει
    μεταπληροφορίες
    για την ιστοσελίδα,
    όπως τον τίτλο της,
    <head> </head>
    λέξεις κλειδιά
    χρήσιμες στις
    μηχανές
    αναζήτησης κ.λπ.

    ορίζει τον τίτλο της


    <title> </title>
    ιστοσελίδας

    περιέχει το ορατό
    (στον
    <body> </body> φυλλομετρητή)
    τμήμα της
    ιστοσελίδας
    ορίζει επικεφαλίδα
    από την πλέον
    σημαντική (h1)
    <h1> </h1> μέχρι την πλέον
    ασήμαντη (h6).
    <h2> </h2>
    Κάθε επικεφαλίδα
    … … έχει διαφορετική
    <h6> </h6> απόσταση
    γραμμάτων και
    μέγεθος
    γραμματοσειράς
    οριοθετεί το
    <p> </p> κείμενο
    παραγράφου

    <b> </b> έντονο κείμενο


    HypertexT Markup Language | Γ λ ώ σ σ α σ υ γ γ ρ α φ ή ς ι σ τ ο σ ε λ ί δ ω ν | Σ ε λ ί δ α |5
    πλαγιογράμματο
    <i> </i>
    κείμενο

    υπογραμμισμένο
    <u> </u>
    κείμενο

    <table> </table> ορίζει πίνακα

    ορίζει επικεφαλίδα
    <th> </th>
    πίνακα

    ορίζει γραμμή
    <tr> </tr>
    πίνακα

    <td> </td> ορίζει κελί πίνακα

    Ασυμβατότητα με
    HTML 5. Ορίζει
    <font> </font> τύπο και μέγεθος
    γραμματοσειράς,
    χρώμα κειμένου.

    ορίζει
    υπερσύνδεσμο σε
    ιστοσελίδα ή σε e
    mail διεύθυνση. Το
    href attribute ορίζει
    τον προορισμό του
    υπερσυνδέσμου και
    <a> </a> το target attribute
    ορίζει το παράθυρο
    στο οποίο θα
    ανοίξει η
    ιστοσελίδα –
    προορισμός (_blank
    για νέα καρτέλα ή
    παράθυρο)

    ορίζει εικόνα. Το src


    attribute
    empty προσδιορίζει το που
    tag, δεν βρίσκεται η εικόνα
    <img> υπάρχει (path ή web
    tag διεύθυνση). Το alt
    τέλους attribute είναι το
    εναλλακτικό
    κείμενο.
    HypertexT Markup Language | Γ λ ώ σ σ α σ υ γ γ ρ α φ ή ς ι σ τ ο σ ε λ ί δ ω ν | Σ ε λ ί δ α |6

    empty
    tag, δεν ορίζει αλλαγή
    <br> υπάρχει γραμμής στο
    tag κείμενο
    τέλους

    εισάγει μια html


    σελίδα μέσα σε
    άλλη html σελίδα.
    Χρησιμοποιείται για
    εισαγωγή
    <iframe> </iframe> εγγράφων, ήχου,
    βίντεο σε
    ιστοσελίδα μέσω
    αυτοματοποιημένης
    παραγωγής κώδικα
    ενσωμάτωσης

    You might also like