Internet
Now Reading
13ο Μάθημα HTML-Χρήση Πλαισίων
0

13ο Μάθημα HTML-Χρήση Πλαισίων

by Ελένη Χαλικιά20 November, 2012

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

Εισαγωγή
Η χρήση πλαισίων χρησιμεύει για την εισαγωγή περισσότερων από μία ιστοσελίδων μέσα σε μία μόνο ιστοσελίδα, δηλαδή με τη χρήση πλαισίων ενσωματώνετε τα περιεχόμενα ιστοσελίδων σε μία μόνο.

Σημασιολογία ετικετών 

<iframe: Αυτό χρησιμεύει για να ανοίξετε την ετικέτα δημιουργίας πλαισίου

src=” arxeio_istoselidas”: Αυτό χρησιμεύει για να προσδιορίσετε το αρχείο της ιστοσελίδας σας, δηλαδή να προσδιορίστε την ονομασία αλλά και την ακριβή μορφή του της ιστοσελίδας σας
 
width=”150″ : Αυτό χρησιμεύει για να προσδιορίσετε το πλάτος, το οποίο θέλετε να έχει το πλαίσιο της ιστοσελίδας σας
 
height=”150″: Αυτό χρησιμεύει για να προσδιορίσετε το ύψος, το οποίο θέλετε να έχει το πλαίσιο της ιστοσελίδας σας
 
frameborder=”1″: Αυτό χρησιμεύει για να ορίσετε το πάχος του περιγράμματος του πλαισίου στην ιστοσελίδα σας
 
name=”onomasia_plaisiou”: Αυτό χρησιμεύει για να ορίσετε την ονομασία του πλαισίου σας
 

</iframe>: Αυτόχρησιμεύει για να κλείσετε την ετικέτα δημιουργίας πλαισίου

Σύνταξη Κώδικα

Αυτή είναι η σύνταξη του html κώδικα για να δείτε πως να χρησιμοποιήσετε πλαίσια σε ιστοσελίδες σας με δυνατότητα να ορίσετε το πλάτος αλλά και το ύψος τους.

<!DOCTYPE html>
<body>
<iframe src=”Εδώ βάζετε την ονομασία και τον τύπο της ιστοσελίδας σας”  
width=”Εδώ βάζετε το πλάτος του πλαισίου σας” height=”Εδώ βάζετε το ύψος του πλαισίου σας“>
</iframe>
</body>
</html>
Αυτή είναι η σύνταξη του html κώδικα για να δείτε πως να χρησιμοποιήσετε πλαίσια σε ιστοσελίδες σας με τη χρήση περιγράμματος στα πλαίσια σας.
 
<!DOCTYPE html>
<body>
<iframe src=”Εδώ βάζετε την ονομασία και τον τύπο της ιστοσελίδας σας” width=”Εδώ βάζετε το πλάτος του πλαισίου σας” height=”Εδώ βάζετε το ύψος του πλαισίου σας” frameborder=”Εδώ βάζετε το πάχος του περιγράμματος του πλαισίου σας“>
</iframe>
</body>
</html>
 
Αυτή είναι η σύνταξη του html κώδικα για να δείτε πως να χρησιμοποιήσετε πλαίσια σε ιστοσελίδες σας με τη χρήση περιγράμματος στα πλαίσια σας αλλά και με την δυνατότητα να δώσετε ονομασία στο πλαίσιο σας.
 
<!DOCTYPE html>
<body>
<iframe src=”Εδώ βάζετε την ονομασία και τον τύπο της ιστοσελίδας σας” width=”Εδώ βάζετε το πλάτος του πλαισίου σας” height=”Εδώ βάζετε το ύψος του πλαισίου σας” frameborder=”Εδώ βάζετε το πάχος του περιγράμματος του πλαισίου σας” name=”Εδώ βάζετετην ονομασία του πλαισίου σας>
</iframe>
</body>
</html>

Παράδειγμα  1
Αυτό είναι ένα μικρό παράδειγμα για τη χρήση πλαισίου σε ιστοσελίδες
με δυνατότητα ορισμού του πλάτους αλλά και του ύψους τους.
 
<!DOCTYPE html>                                                                                                     
<body>                                                                                                                        
<iframe src=”plaisia.html” width=”300″ height=”250″>
</iframe>                                                                                                                   
</body>                                                                                                                         
</html>

Παράδειγμα  2

Αυτό είναι ένα μικρό παράδειγμα για τη χρήση πλαισίου σε ιστοσελίδες με δυνατότητα χρήσης περιγράμματος στα πλαίσια σας αλλά και με την δυνατότητα να δώσετε ονομασία στο πλαίσιο σας.
 
<!DOCTYPE html>                                                                                                     
<body>                                                                                                                         
 <iframe src=”plaisia.html” width=”300″ height=”250″ frameborder=”2″>         
</iframe>                                                                                                                   
</body>                                                                                                                         
</html>
 
Παράδειγμα  3
Αυτό είναι ένα μικρό παράδειγμα για τη χρήση πλαισίου σε ιστοσελίδες με δυνατότητα ορισμού του πλάτους αλλά και του ύψους τους.
 
<!DOCTYPE html>                                                                                                     
<body>                                                                                                                           
<iframe src=”plaisia.html” width=”300″ height=”250″ frameborder=”2″   name=”παράδειγμα“>         
</iframe>                                                                                                                   
</body>                                                                                                                          
</html>
 
Παράδειγμα  4
Ένα ολόκληρο παράδειγμα για να κατανοήσετε τη σωστή χρήση και λειτουργία των πλαισίων.
 
Βήματα Ιστοσελίδας με τη χρήση πλαισίων:
1.Δημιουργείτε το περιεχόμενο κάθε πλαισίου σε ξεχωριστή ιστοσελίδα, δηλαδή δημιουργείτε μια ιστοσελίδα η οποία περιέχει το περιεχόμενο σας (Στο παράδειγμα μας δημιουργούμε 3 διαφορετικά πλαίσια, δηλαδή 3 διαφορετικές ιστοσελίδες με το δικό τους περιεχόμενο)
 

 

 
2.Δημιουργείτε την κεντρική ιστοσελίδα σας η οποία συνδέει όλα τα πλαίσια σε μία,
δηλαδή ενσωματώνει τις 3 ιστοσελίδες μόνο σε μία.
 
 
1οΠλαίσιο
<!DOCTYPE html>                                                                                                     
<head>
<title>frame1</title>
</head>
<body>
<p>HelloHTML-1ο Πλαίσιο!!!</p>
</body>
</html>
 
2οΠλαίσιο
<!DOCTYPE html>                                                                                                     
<head>
<title>frame2</title>
</head>
<body>
<p>Hello HTML-2οΠλαίσιο!!!</p>
</body>
</html>
 
3οΠλαίσιο
<!DOCTYPE html>                                                                                                     
<head>
<title>frame3</title>
</head>
<body>
<p>Hello HTML-3οΠλαίσιο!!!</p>
</body>
</html>
 
 ΚεντρικήΙστοσελίδα
<!DOCTYPE html>                                                                                                     
<head>
<title>Κεντρική Σελίδα Εισαγωγής Όλων των πλαισίων</title>
</head>
<body>
<center>
<iframe src=”frame1.html” width=”300″ height=”250″ frameborder=”2″   name=”πλαίσιο 1″></iframe>                                                              
<iframe src=”frame2.html” width=”300″ height=”250″ frameborder=”2″   name=”πλαίσιο 2″></iframe>     
<iframe src=”frame3.html” width=”300″ height=”250″ frameborder=”2″   name=”πλαίσιο 3″></iframe>     
</center>
</body>
</html>
 
Το αποτέλεσμα χρήσης πλαισίων σε ιστοσελίδες είναι εμφανές στην παρακάτω εικόνα:
 
 
Επίλογος
Στο επόμενο μάθημα μας για την HTML θα δείτε τις ετικέτες για το πως να δημιουργήσετε φόρμες σε μια ιστοσελίδα και ποιο συγκεκριμένα τα εξής:
  • Σημασιολογία των ετικετών
  • Χρήση των ετικετών
  • Παραδείγματα ετικετών

Κατέβασμα Μαθήματος

Κατεβάστε το δέκατο τρίτο μας μάθημα HTML στον υπολογιστή σας εντελώς δωρεάν σε μορφή pdf.
Download 
 
Συντάκτης
Ελένη Χαλικιά
Τεχνικός Τεχνολογίας Internet
Τεχνικός Εφαρμογών Πληροφορικής

Comments

comments