Scribd Logo
Upload

Welcome to Scribd!

  • Απλές HTML Ασκήσεις

    Uploaded by

    GeorgePapaloukas
    2K views3 pages
    Βασικά tags html, head, title, body, p, b, i, u Links, εικόνες

    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
    Βασικά tags html, head, title, body, p, b, i, u Links, εικόνες

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    2K views3 pages

    Απλές HTML Ασκήσεις

    Uploaded by

    GeorgePapaloukas
    Βασικά tags html, head, title, body, p, b, i, u Links, εικόνες

    Copyright:

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

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

    ΤΑΞΗ Α ΓΕΛ

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

    ΦΥΛΛΟ ΕΡΓΑΣΙΑΣ Ασκήσεις #1

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

    ΑΣΚΗΣΕΙΣ HTML

    Άσκηση #1
    Γράψτε σε απλό κειμενογράφο (π.χ. Σημειωματάριο – Notepad) HTML κώδικα για να δημιουργήσετε την
    ιστοσελίδα που φαίνεται στην Εικόνα 1. Αποθηκεύστε το αρχείο με όνομα ex1.html

    Εικόνα 1: Η ιστοσελίδα ex1.html στον φυλλομετρητή Chrome

    Άσκηση #2
    Γράψτε σε απλό κειμενογράφο (π.χ. Σημειωματάριο – Notepad) HTML κώδικα για να δημιουργήσετε την
    ιστοσελίδα που φαίνεται στην Εικόνα 2. Αποθηκεύστε το αρχείο με όνομα ex2.html

    Ο υπερσύνδεσμος (link) Εδώ οδηγεί στην ιστοσελίδα ex1.html ενώ ο υπερσύνδεσμος Εκεί οδηγεί στην ιστοσελίδα
    users.sch.gr/papalouk

    Εικόνα 2: Ιστοσελίδα ex2.html με υπερσυνδέσμους


    HypertexT Markup Language | Γ λ ώ σ σ α σ υ γ γ ρ α φ ή ς ι σ τ ο σ ε λ ί δ ω ν | Σ ε λ ί δ α |2
    Άσκηση #3
    Γράψτε σε απλό κειμενογράφο (π.χ. Σημειωματάριο – Notepad) HTML κώδικα για να δημιουργήσετε την
    ιστοσελίδα που φαίνεται στην Εικόνα 3. Αποθηκεύστε το αρχείο με όνομα ex3.html

    Η 1η εικόνα (παπαρούνες) δεν έχει υπερσύνδεσμο.

    Ο υπερσύνδεσμος (link) της 2ης εικόνας οδηγεί στην ιστοσελίδα ex1.html

    Εικόνα 3: Ιστοσελίδα ex3.html με υπερσυνδέσμους και εικόνες


    HypertexT Markup Language | Γ λ ώ σ σ α σ υ γ γ ρ α φ ή ς ι σ τ ο σ ε λ ί δ ω ν | Σ ε λ ί δ α |3
    Λύση Άσκησης #1

    <html>
    <head><title>Ιστοσελίδα 1ης Άσκησης</title></head>
    <body>
    <h1>Κατασκευή ιστοσελίδων</h1>
    <p>Αν και ο τρόπος κατασκευής ιστοσελίδων έχει αλλάξει δραματικά, εμείς στο μάθημα <i>ΕΦΑΡΜΟΓΕΣ
    ΠΛΗΡΟΦΟΡΙΚΗΣ</i> ζούμε τη συγκίνηση των πρώτων web developers χάρη στο <b>καταπληκτικό</b> μάθημα του
    καθηγητή μας!</p>
    <p>Αν καταφέρατε να φτάσετε ως εδώ, γνωρίζετε τα <u>βασικά της HTML</u></p>
    </body>
    </html>

    Λύση Άσκησης #2

    <html>
    <head><title>Ιστοσελίδα 2ης Άσκησης</title></head>
    <body>
    <h1>Links - Υπερσύνδεσμοι</h1>
    <p>Για να επισκεφτείτε την ιστοσελίδα ex1.html πατήστε <a href="ex1.html" target="_blank">Εδώ</a>.</p>
    <p>Για να επισκεφτείτε την ιστοσελίδα του καθηγητή σας πατήστε <a href="http://users.sch.gr/papalouk"
    target="_blank">Εκεί</a>.</p>
    <p>Αν καταφέρατε να φτάσετε ως εδώ, γνωρίζετε να εισάγετε links - υπερσυνδέσμους</p>
    </body>
    </html>

    Λύση Άσκησης #3
    <html>
    <head><title>Ιστοσελίδα 3ης Άσκησης</title></head>
    <body>
    <h1>Εικόνες και Υπερσύνδεσμοι σε εικόνες</h1>
    <p>Για να επισκεφτείτε την ιστοσελίδα ex1.html πατήστε την παρακάτω εικόνα</p>
    <a href="ex1.html" target="_blank"><img
    src="paparounes.jpg" alt="Παπαρούνες"></a>.
    <p>Η επόμενη εικόνα δεν έχει υπερσύνδεσμο.</p>
    <img src="flowers.jpg" alt="Λουλούδια">
    <p>Αν καταφέρατε να φτάσετε ως εδώ, γνωρίζετε να εισάγετε εικόνες και υπερσυνδέσμους σε εικόνες</p>
    </body>
    </html>

    You might also like