Εικόνες Γαλάτης Παναγιώτης 1 ο ΕΠΑΛ Ηρακλείου
Υποστηριζόμενοι Tύποι Εικόνων GIF JPG ή JPEG BMP PNG Δυστυχώς δεν υποστηρίζονται απευθείας όλα τα formats εικόνας από τους Web Browsers. Πάντως το σύνολο αυτών υποστηρίζει εικόνες GIF, JPG και PNG.
Ετικέτα Εικόνων IMG Η ετικέτα IMG καθορίζει την εικόνα που θα εμφανιστεί στο κείμενο HTML. Η εικόνα αυτή μπορεί να είναι: Μια απλή εικόνα που φαίνεται στο κείμενό μας (με αυτή θα ασχοληθούμε). Μια εικόνα, στην οποία ο χρήστης μπορεί να κάνει κλικ και να μεταφερθεί σε μία άλλη URL διεύθυνση (εικόνα σύνδεσμος). Ένα image map. <IMG SRC="location" ALT="alterntiveText" ALIGN="alignment" HEIGHT="height" WIDTH="width" >
Παράμετροι ετικέτας IMG Όνομα Λειτουργία SRC="τοποθεσία" Προσδιορίζει το όνομα του αρχείου της εικόνας. ALT="κείμενο" Καθορίζει κάποιο επεξηγηματικό κείμενο που αντικαθιστά την εικόνα σε περιπτώσεις που αυτή δεν εμφανίζεται. ALIGN Ορίζει τη θέση της εικόνας σε σχέση με το κείμενο που βρίσκεται δίπλα της. (Εξ ορισμού τιμή: BOTTOM). Τιμές: LEFT: Στοιχίζει την εικόνα αριστερά του κειμένου. RIGHT: Στοιχίζει την εικόνα δεξιά του κειμένου. TOP: Στοιχίζει την εικόνα στο πάνω μέρος του κειμένου. MIDDLE: Στοιχίζει την εικόνα στο κέντρο του κειμένου. BOTTOM: Στοιχίζει την εικόνα στο κάτω μέρος του κειμένου. HEIGHT="ύψος" WIDTH="πλάτος" Καθορίζει το ύψος της εικόνας. Η τιμή του μπορεί να έχει δύο μορφές: Αριθμός σημείων (ακέραιος αριθμός, π.χ. ) Ποσοστό ως προς το συνολικό (π.χ. 20% ) Καθορίζει το πλάτος της εικόνας. Η τιμή του μπορεί να έχει δύο μορφές: Αριθμός σημείων (ακέραιος αριθμός, π.χ. ) Ποσοστό ως προς το συνολικό πλάτος (π.χ. 20% )
Παράδειγμα εμφάνισης εικόνας <HTML> <HEAD> <TITLE> Παράδειγμα εικόνας </TITLE> </HEAD> <BODY> <H1> Εικόνα στο κείμενο </H1> <HR> <IMG SRC= "paris.gif" >Το Παρίσι <HR> </BODY> </HTML>
Στοίχιση Εικόνας <HTML> <HEAD> <TITLE> Παράδειγμα εικόνας ALIGN</TITLE> </HEAD> <BODY> <H2> Τοποθέτηση εικόνας οθόνη</h2> <HR> <H3> <IMG SRC= paris.gif ALIGN=LEFT> <IMG SRC= paris.gif ALIGN=RIGHT> <Β>Το κείμενο εμφανίζεται μεταξύ των δύο εικόνων </Β><BR> </H3> </BODY> </HTML> με στην
Στοίχιση εικόνας <HTML> <HEAD> <TITLE> Και άλλο παράδειγμα εικόνας με ALIGN </TITLE> </HEAD> <BODY> <H1> Εικόνα ως προς κείμενο</h1> <HR> Μπορούμε να τοποθετήσουμε την εικόνα<br> Κι άλλο παράδειγμα στοίχισης εικόνας <IMG SRC= paris.gif ALIGN=TOP> στο επάνω <IMG SRC= paris.gif ALIGN=MIDDLE> στο κέντρο <IMG SRC= paris.gif ALIGN=BOTTOM> ή στο κάτω <BR> μέρος του κειμένου </BODY> </HTML>
Στοίχιση εικόνων
Αλλαγή μεγέθους εικόνας και επεξήγηση <HTML> <TITLE> Αλλαγή μεγέθους εικόνας </TITLE> <BODY> <IMG SRC="paris.gif" HEIGHT=180 WIDTH=150 ALT="Παρίσι"> </BODY> </HTML>
Σύνδεσμοι 1 η κατηγοριοποίηση συνδέσμων Σύνδεσμοι που συνδέουν σε εξωτερικά αρχεία (κείμενα, εικόνες, ήχοι, video). Σύνδεσμοι που οδηγούν σε κάποιο συγκεκριμένο σημείο ενός κειμένου HTML (anchor). 2 η κατηγοριοποίηση συνδέσμων Unvisited link: σύνδεσμος που δεν έχει γίνει κλικ Visited ή followed link: σύνδεσμος που έχει γίνει κλικ Αctive link: σύνδεσμος που είναι στη διαδικασία να γίνει κλικ
Ετικέτα Συνδέσμων Η ετικέτα A χρησιμοποιείται για να δημιουργηθούν οι σύνδεσμοι (links και να) οριστούν τα anchors (Θέσεις σε σελίδες ).
A σαν link (σύνδεσμος) Ένας υπερκείμενος σύνδεσμος είναι ένα κομμάτι από περιεχόμενα, στα οποία ο χρήστης κάνει κλικ για να αφυπνίσει μια ενέργεια. Οι πιο συνηθισμένες ενέργειες είναι η μετάβαση σε ένα άλλο σημείο του ίδιου κειμένου και η μετάβαση σε ένα άλλο κείμενο. Ένας υπερκείμενος σύνδεσμος μπορεί να περιέχει κείμενο ή και γραφικά. Για τον ορισμό του πρέπει να οριστεί η παράμετρος HREF και το </Α> για το τέλος του συνδέσμου. Η σύνταξη έχει ως εξής: <A HREF="location">... </A> π.χ. <Α HREF="links2.htm"> Κ. Καβάφης</Α>
Απόλυτη ή Σχετική Διεύθυνση Για το άνοιγμα ενός κειμένου, τη URL διεύθυνση του κειμένου. H URL διεύθυνση μπορεί να είναι: Απόλυτη: HREF=http://home.netscape.com/index. html Απόλυτη: C:\webpages\mysite\index.html Σχετική: HREF="page2.html" (Στον ίδιο φάκελο με την αρχική σελίδα) Σχετική: HREF="documents/nextdoc.html (στον υποφάκελο documents το αρχείο nextdoc.html)
A σαν anchor (θέση) Ένα anchor ορίζει ένα κομμάτι στο HTML κείμενο. Πρέπει να οριστεί η παράμετρος NAME, που καθορίζει το όνομα του anchor. Η σύνταξη έχει ως εξής: <A NAME="anchorName">...</A> π.χ. <A name="cpu">
Μετάβαση σε θέση κειμένου Για τη μετάβαση σε μέρος του ίδιου κειμένου, το σύμβολο # και το όνομα του anchor. Παράδειγμα: <Α HREF="#anchor1"> </A> Για το άνοιγμα άλλου κειμένου σε ένα anchor, τη URL διεύθυνση του κειμένου, το # και το όνομα του anchor. Παράδειγμα: <A HREF="documents/nextdoc.html#anchor1"> </A>
Παράδειγμα σύνδεσης δύο κειμένων μέσω ενός συνδέσμου Αρχείο links1.htm: <HTML> <HEAD> <TITLE> Ποιητές </TITLE> </HEAD> <BODY> <H2> Μεγάλοι Έλληνες Ποιητές </H2> <HR> <UL> <LI>Γ. Σεφέρης <LI><Α HREF= links2.htm > Κ.Καβάφης</Α> <LI>Ο.Ελύτης </UL> <HR> </BODY> </HTML>
Αρχείο Στόχος Αρχείο links2.htm: <HTML> <HEAD> <TITLE> Καβάφης </TITLE> </HEAD> <BODY> <H2> Ποιήματα του Κ.Καβάφη </H2> <HR> «Κρυμμένα»<BR> «Μισή ώρα»<br> «Αριστόβουλος»<BR> «Θερμοπύλες»<BR> <HR> </BODY> </HTML>
Ορισμός θέσεων κειμένου Αρχείο link4.htm: <HTML> Κείμενο 4: links4.htm <HEAD> <TITLE> Αρχικά </TITLE> </HEAD> <BODY> <H1> Αρχικά ορολογίας </H1> <DL> <DT><A NAME= ALU ></A>ALU <DD> Arithmetic and Logical Unit = Αριθμητική λογική μονάδα <DT><A NAME= BIT ></A>BIT <DD> Binary Digit = Δυαδικό ψηφίο <DT><A NAME= CPU ></A>CPU <DD> Central Processing Unit = Κεντρική μονάδα επεξεργασίας <DT><A NAME= FDD ></A>FDD <DD> Floppy Disk Drive = Μονάδα εύκαμπτης δισκέτας <DT><A NAME= HDD ></A>HDD <DD> Hard Disk Drive = Μονάδα σκληρού δίσκου <DT><A NAME= RAM ></A>RAM <DD> Random Access Memory = Μνήμη τυχαίας προσπέλασης <DT><A NAME= ROM ></A>ROM <DD> Read Only Memory = Μνήμη μόνο για ανάγνωση </DL> </BODY> </HTML>
Σύνδεσμοι σε θέσεις άλλου αρχείου Αρχείο links3.htm: <HTML> <HEAD> <TITLE> Τεχνική Ορολογία </TITLE> </HEAD> <BODY> <H1> Βασικά μέρη ενός Η/Υ </H1> Το βασικότερο στοιχείο ενός υπολογιστή είναι η <A HREF= links4.htm#cpu > CPU </A> που υποστηρίζεται όσον αναφορά τις αριθμητικές πράξεις από την <A HREF= links4.htm#alu > ALU </A>. Απαραίτητη είναι και η μνήμη που διακρίνεται σε κύρια και δευτερεύουσα. Την κύρια μνήμη αποτελούν οι <A HREF= links4.htm#ram > RAM</A> και η <A HREF= links4.htm#rοm > RΟM</A>, ενώ τη δευτερεύουσα αποτελούν τα εξωτερικά αποθηκευτικά μέσα, όπως Κείμενο 3: links3.htm <A HREF= links4.htm#hdd > HDD</A> και <A HREF= links4.htm#fdd >FDD</A>. </BODY> </HTML>
Σύνδεση σε αρχεία Τύποι Αρχείων Εικόνες (gif, jpg, png) Κείμενα (doc,pdf) Βίντεο(mov, avi, mp4) Ήχοι(wav,mp3) http://www.fileinfo.com/
Εικόνα Σύνδεσμος <HTML> <HEAD> <TITLE> Εικόνα Σύνδεσμος </TITLE> </HEAD> <BODY> <H1> Εικόνα Σύνδεσμος </H1> <HR> <A HREF=paris.htm> <IMG SRC= paris.jpg ></A><BR> <HR> </BODY> </HTML>
Οδηγίες Βρείτε μια εικόνα του Πύργου του Αϊφελ και αποθηκεύστε την με όνομα paris.jpg Βρείτε πληροφορίες από το Διαδίκτυο και δημιουργήστε μια σελίδα για το Παρίσι με όνομα paris.htm