ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 1 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ

Σχετικά έγγραφα
Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML)

Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head>

Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο

Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I

Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία

CSS Εργαστήριο 1. Εισαγωγή - Σύνταξη - Εφαρμογή στην HTML

ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 1o ΕΡΓΑΣΤΗΡΙΟ ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML

Διαχείριση Πληροφοριών στο Διαδίκτυο. Εργαστήριο 2

Κεφάλαιο 4 HyperText Markup Language - HTML. Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013

Σχεδιασμός και Ανάπτυξη Ιστότοπων

Εισαγωγή στην HTML (1)

Περιεχόμενα. Λίγα λόγια από το συγγραφέα... 7

ΟΔΗΓΟΣ ΕΓΚΑΤΑΣΤΑΣΗΣ ΠΙΣΤΟΠΟΙΗΤΙΚΟΥ ΑΣΦΑΛΕΙΑΣ WEBMAIL ΤΕΙ ΚΑΛΑΜΑΤΑΣ

Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης

Σταύρος Καουκάκης Ευτύχιος Βαβουράκης

Προγραμματισμός Διαδικτύου

Τι είναι η HTML; Τί είναι οι ετικέτες (tags); Πώς είναι μια ετικέτα (tag);

Διαχείριση Πληροφοριών στο Διαδίκτυο. Εργαστήριο 1

ΕΠΛ 012 Εισαγωγή στο Παγκόσμιο Πλέγμα Πληροφοριών

Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7

ιαχείριση Πληροφοριών στο ιαδίκτυο

Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface

ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΚΑ ΣΥΣΤΗΜΑΤΑ

Νέες Τεχνολογίες στην Εκπαίδευση

ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 2o ΕΡΓΑΣΤΗΡΙΟ ΜΟΡΦΟΠΟΙΗΣΗ ΣΤΗΝ HTML

Μάθηµα 3 Περ ε ισ ι σότ ό ε τ ρ ε α α γ ια ι α τ η τ η γ λώσ ώ σα α HTML

Γαβαλάς αµιανός

Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος

ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής)

Α ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ

Εγχειρίδιο Συμμετοχής σε Ψηφοφορία για την ανάδειξη Διευθυντή Σχολής ΤΕΙ ΑΘΗΝΑΣ 2014

Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου.

Αλεξιάδης Γεώργιος (ΠΕ86) -

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

Δημοσίευση στο Διαδίκτυο

Η Γλώσσα Προγραμματισμού του Internet HTML

ΔΗ Μ Ι Ο ΥΡ Γ Ι Α W I K I με τ η χρήση τ η ς υπ ηρεσίας h t t p : / id ot.com /

<a href=" στο κείμενο</a>.

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

ΔΙΑΔΙΚΑΣΙA ΜΕΤΑΦΟΡΑΣ ΥΛΙΚΟΥ ΜΑΘΗΜΑΤΟΣ ΑΠΟ BLACKBOARD VISTA ΣΕ MOODLE

2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ

ΑΣΠΑΙΤΕ. ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α. Υπερκείμενο και HTML. Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :...

ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ. Παγκόσμιος Ιστός

Εργαλεία ανάπτυξης εφαρμογών internet Ι

Άσκηση 6 Επαναληπτική Άσκηση HTML

ΕΠΛ 003: ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ. Παγκόσμιος Ιστός

Κειµενογράφοι ετικετών

Σχεδιασμός και Ανάπτυξη Ιστοτόπων. ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος

HTML 1. Στόχος της ώρας 11/3/2014. Εισαγωγή της γλώσσας HTML σε αρχάριο επίπεδο:

Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5

HTML Εργαστήριο 1.1 Μάθημα (Ορισμός εικόνας ως φόντου - Μορφοποιήσεις κειμένου Λίστες)

ΔΙΑΔΙΚΑΣΙA ΜΕΤΑΦΟΡΑΣ ΥΛΙΚΟΥ ΜΑΘΗΜΑΤΟΣ ΑΠΟ BLACKBOARD VISTA ΣΕ OPEN ECLASS

Σταύρος Καουκάκης Ευτύχιος Βαβουράκης

Δυναμικές Ιστοσελίδες Εισαγωγή στην Javascript για προγραμματισμό στην πλευρά του client

Βαρβάκειο Πρότυπο Γυμνάσιο

ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ

Δημιουργία δυναμικής ιστοσελίδας Joomla

Στην τεχνολογία των CSS, οι κανόνες στυλ (style

Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους

Βασίλειος Κοντογιάννης ΠΕ19

Παρουσίαση και μορφοποίηση κειμένου

<HTML> <HEAD> <TITLE> <BODY>

Σχεδιάζοντας Εφαρμογές για το Διαδίκτυο

ΤΕΙ ΚΑΒΑΛΑΣ. Πτυχιακή εργασία ΕΙΣΑΓΩΓΗ. Μιλτιάδης Κακλαμάνης

Τεχνολογίες Παγκόσμιου Ιστού. 1η διάλεξη

Διαδίκτυο: Ιστορία, Δομή, Υπηρεσίες

Οδηγός χρήσης για Σύστημα κρατήσεων εργαστηριών

ΕΡΓΑΣΤΗΡΙΟ 1: Εισαγωγή, Χρήσιμες Εφαρμογές

ΕΙΔΙΚΟΙ ΧΑΡΑΚΤΗΡΕΣ ΧΑΡΑΚΤΗΡΕΣ ΜΕ ΕΙΔΙΚΕΣ ΛΕΙΤΟΥΡΓΙΕΣ. ΠΙΝΑΚΑΣ ΚΩΔΙΚΩΝ ΔΙΑΦΥΓΗΣ Χαρακτήρας Κωδικός διαφυγής Ερμηνεία Συμβόλου & nbsp;

2. Επιλέξτε την σωστή ετικέτα HTML που προσφέρει το μεγαλύτερο φόντο κειμένου. <head> <heading> <h6> <h1>

ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ

Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος

ΤΕΙ ΠΕΙΡΑΙΑ ΣΧΟΛΗ ΤΕΧΝΟΛΟΓΙΚΩΝ ΕΦΑΡΜΟΓΩΝ ΤΜΗΜΑ ΑΥΤΟΜΑΤΙΣΜΟΥ. Εργαστηριακές ασκήσεις του µαθήµατος «ΙΑ ΙΚΤΥΑΚΑ ΠΡΩΤΟΚΟΛΛΑ»

Καςάλξγξι ρε γλώρρα HTML Χοιρςίμα Χαοαλάμπξσπ

ΟΛΟΚΛΗΡΩΜΕΝΟ ΣΥΣΤΗΜΑ ΤΗΛΕΚΑΤΑΡΤΙΣΗΣ E-AGIOGRAFIA

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ

ΟΔΗΓΙΕΣ ΣΥΣΤΗΜΑΤΟΣ ΤΗΛΕΚΑΤΑΡΤΙΣΗΣ

Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML

ΟΔΗΓΙΕΣ ΕΓΚΑΤΑΣΤΑΣΗΣ

7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα. Europe Code Week

Δημιουργία δυναμικής ιστοσελίδας

ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΥΠΡΟΥ ΟΔΗΓΟΣ ΧΡΗΣΗΣ ΓΙΑ ΣΥΣΤΗΜΑ ΚΡΑΤΗΣΕΩΝ ΕΡΓΑΣΤΗΡΙΩΝ ΥΠΗΡΕΣΙΑ ΠΛΗΡΟΦΟΡΙΚΩΝ ΣΥΣΤΗΜΑΤΩΝ ΥΠΣ-ΕΔ/69

ΙΔΡΥΜΑΤΙΚΟ ΑΠΟΘΕΤΗΡΙΟ ΤΕΙ ΔΥΤΙΚΗΣ ΜΑΚΕΔΟΝΙΑΣ

Φύλλο Εργασίας: «Το Εσωτερικό του Υπολογιστή»

Αλλαγή της εμφάνισης κειμένου: μέγεθος γραμματοσειράς, είδος γραμματοσειράς

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ

Πανεπιστήμιο Αιγαίου. Χειμερινό εξάμηνο. Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας

ΥΠΗΡΕΣΙΕΣ ΔΙΑΔΙΚΤΟΥ Explorer & Outlook 2013

Σχεδίαση ιστοσελίδων

ΣΥΣΤΗΜΑΤΑ SCADA. Μέρος 5. Δικτύωση για Απομακρυσμένο Έλεγχο και Μεταφορά Δεδομένων

[συνέχεια του εγγράφου Word 2]

Δυναμικές Ιστοσελίδες στο Πανελλήνιο Σχολικό Δίκτυο

Εργαστήριο Εφαρμοσμένης Πληροφορικής

ΠΛΗΡΟΦΟΡΙΚΗ Ι Εργαστήριο 1 MATLAB ΠΛΗΡΟΦΟΡΙΚΗ Ι ΕΡΓΑΣΤΗΡΙΟ 1. Θέμα εργαστηρίου: Εισαγωγή στο MATLAB και στο Octave

Εγχειρίδιο χρήσης εφαρμογής online 2017 (Οδηγίες προς τον Αιτούντα)

Λειτουργικά Συστήματα

Εισαγωγή στις ΤΠΕ ΙΙ Γιάννης Βρέλλης ΠΤΔΕ-Πανεπιστήμιο Ιωαννίνων. World Wide Web. Παγκόσμιος Ιστός

Οδηγίες χρήσης πλατφόρμας τηλεκατάρτισης

1. <body> 2. <header> 3. <h1> My Page </h1> 4. </header> 5. <section>

Δραστηριότητα : Προστασία προσωπικών δεδομένων στο ΛΣ Windows 8

Transcript:

ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 1 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ 1. ΒΑΣΙΚΕΣ ΕΝΝΟΙΕΣ HTML ΣΕΛΙΔΩΝ Ας δούμε τι συμβαίνει όταν «μπαίνουμε» στο internet και επισκεπτόμαστε μια ιστοσελίδα. Για να μπούμε στο Internet χρησιμοποιούμε ένα πρόγραμμα φυλλομέτρησης παγκόσμιου ιστού ή αλλιώς browser (όπως λέγεται διεθνώς). Τέτοια προγράμματα είναι: internet explorer, Mozilla firefox, google chrome, κ.λ.π. Στο κατάλληλο πεδίο του browser, πληκτρολογούμε μια διεύθυνση (π.χ. http://www.teiste.gr/) η οποία ονομάζεται και URL. Ουσιαστικά ζητάμε από το browser να χρησιμοποιήσει το πρωτόκολλο http για να επικοινωνήσει με τον υπολογιστή/server με όνομα www.teiste.gr και να μας μεταφέρει το αρχείο που θα βρεί εκεί το οποίο (αν εμείς δεν ορίσουμε διαφορετικά) είναι το index.html. Στην οθόνη θα δούμε το παρακάτω το οποίο έχει περιγραφεί από το αρχείο index.html. Ελένη-Αικατερίνη Λελίγκου Σελίδα 1 από 8

1.1. Ορισμός HTML σελίδων Οι HTML σελίδες είναι απλά αρχεία κείμενου (γνωστά και ως ASCII αρχεία) τα οποία μπορούν να δημιουργηθούν χρησιμοποιώντας οποιονδήποτε κειμενογράφο (π.χ., Emacs, vi σε μηχανήματα UNIX, SimpleText σε Macintosh ή Notepad σε περιβάλλον Windows). διαβάζονται από τους Browser (φυλλομετρητές) περιλαμβάνουν αφενός το περιεχόμενο (π.χ. κείμενο) που εμφανίζεται στο χρήστη όσο και οδηγίες για τον browser σχετικά με την εμφάνιση αυτού του περιεχομένου. (Για παράδειγμα, στην παραπάνω σελίδα, το αρχείο περιγράφει ότι στα δεξια θα υπάρχει μια λίστα.) Στους υπολογιστές του εργαστηρίου θα βρείτε εγκατεστημένο το λογισμικό html-kit. 1.2. Επεξήγηση Tags Ένα tag (στοιχείο) είναι μία στοιχειώδης συνιστώσα της δομής ενός κειμένου. Μερικά παραδείγματα στοιχείων είναι heads, tables, paragraphs, and lists. Τα HTML tags χρησιμοποιούνται για τα δηλώσουμε τα στοιχεία του κειμένου στον browser. Τα στοιχεία μπορούν να περιλαμβάνουν απλό κείμενο, άλλα στοιχεία ή και τα δύο. Τα HTML tags αποτελούνται από το σύμβολο (<) στα αριστερά, το όνομα του tag και το σύμβολο (>) στα δεξιά. Τα tags εμφανίζονται συνήθως κατά ζεύγη (π.χ., <H1> και </H1>), για την αρχική και τελική εντολή. Το tag τέλους είναι ακριβώς ίδιο με το αρχικό tag με την διαφορά ότι προηγείται μία πλάγια γραμμή (/) του κειμένου μεταξύ των παρενθέσεων. Ορισμένα από τα πιο ευρέως χρησιμοποιούμενα tags περιγράφονται στην επόμενη ενότητα. Σημειώνεται, ότι η HTML δεν ξεχωρίζει, εκτός από ελάχιστες εξαιρέσεις, τα κεφαλαία από τα μικρά γράμματα.. Έτσι, το tag <title> είναι ισοδύναμο με το <TITLE> ή και το <TiTlE>. Ελένη-Αικατερίνη Λελίγκου Σελίδα 2 από 8

Πρέπει να τονιστεί επίσης ότι όλοι οι World Wide Web browsers δεν υποστηρίζουν όλα τα tags. Εάν αυτό συμβαίνει τότε το συγκεκριμένο tag, απλά, θα αγνοηθεί, ενώ το κείμενο ανάμεσα στο ζεύγος των μη υποστηριζόμενων tags θα εμφανιστεί κανονικά. 1.3. Μία απλή HTML σελίδα Κάθε HTML σελίδα πρέπει να περιέχει κατ ελάχιστο ένα συγκεκριμένο σύνολο από HTML tags. Έτσι, κάθε σελίδα αποτελείται από την επικεφαλίδα (head) και το κυρίως κείμενο (body text). Η επικεφαλίδα περιέχει τον τίτλο (title) και ο κυρίως σώμα περιέχει το βασικό κείμενο και περιλαμβάνει παραγράφους, λίστες και άλλα στοιχεία. Ο τίτλος στο παραπάνω παράδειγμα είναι «ΤΕΙ ΣΤΕΡΕΑΣ ΕΛΛΑΔΑΣ» και φαίνεται στο κόκκινο παραλληλόγραμμο στο παραπάνω σχήμα. Ένα απλό HTML κείμενο φαίνεται στη συνέχεια. <html> <head> <TITLE>A Simple HTML Example</TITLE> </head> <body> <H1>HTML is Easy To Learn</H1> <P>Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!</p> <P>And this is the second paragraph.</p> </body> </html> Τα στοιχεία που χρειάζονται είναι τα <html>, <head>, <title>, και <body> tags (και τα αντίστοιχα τελικά tags). 1 ο βήμα πειραματισμού: Γράψτε το παραπάνω παράδειγμα χρησιμοποιώντας οποιονδήποτε κειμενογράφο. Σώστε το αρχείο σε φάκελο που θα δημιουργήσετε εσείς στο C://ComputerNetworks/Deftera_HH όπου ΗΗ η ώρα του εργαστηρίου, δηλαδή 16 για το τμήμα 4-6 και 18 για το τμήμα 6-8. ΠΡΟΣΟΧΗ: το αρχείο πρέπει να είναι τύπου text και να έχει κατάληξη.html Στη συνέχεια, ανοίξτε το αρχείο με όποιο web browdser επιθυμείτε. Ελένη-Αικατερίνη Λελίγκου Σελίδα 3 από 8

ΕΦΑΡΜΟΓΕΣ 1.4. Εφαρμογή βασικών tags Όπως αναφέραμε η HTML είναι απλή. Απλά ορίζουμε το είδος της διαμόρφωσης που θέλουμε να έχουμε για το κείμενό μας. Για τη διαμόρφωση της HTML σελίδας χρησιμοποιούμε ειδικά tags.στη συνέχεια αναφέρουμε τις βασικότερες σημασίες. Τα tags αυτά είναι αρκετά για να διαμορφώσετε την πρώτη σας ιστοσελίδα, όπως περίπου θα το κάνατε με το Word.Όλα τα tags που υπάρχουν στον επόμενο πίνακα απαιτούν και την αρχή και το τέλος. Διαφορετικά επιδρούν σε όλο το κείμενο που ακολουθεί. Η αρχή καθορίζεται από το <tag> και το τέλος της από το </tag>. Tag Σημασία Σύνταξη Αποτέλεσμα Β Έντονα γράμματα <B>Παράδειγμα</Β> Παράδειγμα Ι Πλάγια γράμματα <Ι>Παράδειγμα</Ι> Παράδειγμα U Υπογραμμισμένα γράμματα <U>Παράδειγμα</U> Παράδειγμα CENTER Κείμενο στο κέντρο της σελίδας <CENTER>Παράδειγμα </CENTER> Παράδειγμα TT Γράμματα Γραφομηχανής <TT>Παράδειγμα</TT> Παράδειγμα Sup Εκθέτης Παράδειγμα<Sup>2</SUP> Παράδειγμα 2 Sub Δείκτης Παράδειγμα<Sub>2</Sub> Παράδειγμα2 ΕΜ Έμφαση <ΕΜ>Παράδειγμα</ΕΜ> Παράδειγμα BLINK Κείμενο που αναβοσβήνει(!) <BLINK>Παράδειγμα</BLINK> Παράδειγμα Σημειώνεται επίσης ότι οποιοσδήποτε συνδυασμός των παραπάνω είναι εφικτός. Αν, για παράδειγμα, θέλουμε και έντονα, αλλά και πλάγια γράμματα απλά χρησιμοποιούμε και τα δύο ή περισσότερα στυλ. Έτσι, γράφουμε: <Β><Ι><BLINK>Παράδειγμα</BLINK></I></B > 2 ο βήμα πειραματισμού: Επαναλάβατε το κείμενο του παραδείγματος της προηγούμενης ενότητας, αλλά χρησιμοποιώντας διαφορετικά είδη διαμόρφωσης. Ελένη-Αικατερίνη Λελίγκου Σελίδα 4 από 8

1.5. Εφαρμογή tags διαμόρφωσης παραγράφου Το πώς μπορούμε να διαχειριστούμε μεμονωμένες λέξεις, ή και γράμματα το είδαμε στην προηγούμενη ενότητα. Ας δούμε τώρα τί μπορούμε να κάνουμε για ολόκληρες παραγράφους. Θα ξεκινήσουμε από τα απλά, δηλαδή, από το πως μπορούμε να αλλάξουμε γραμμές. Υπάρχουν δύο τρόποι. Ο πρώτος είναι να ορίσουμε ότι το κείμενο από εδώ και κάτω βρίσκεται σε άλλη γραμμή. Ο δεύτερος τρόπος είναι να αλλάξει παράγραφος. Και τα δύο έχουν σχεδόν το ίδιο αποτέλεσμα. Αλλά, στους νέους browsers κι ειδικά στον Explorer, η διαφορά τους είναι κάτι παραπάνω από εμφανής. Αν θέλουμε να αλλάξουμε τη γραμμή (αλλά να μείνουμε στην ίδια παράγραφο, χρησιμοποιούμε το <BR>, ενώ αν θέλουμε να αλλάξουμε παράγραφο χρησιμοποιούμε το <P>. Κάτι που είναι ενδιαφέρον είναι η χρήση του tag τέλους. Το <BR> απλά δεν έχει. To </P> είναι χρήσιμο όταν χρησιμοποιούμε πλήρη στοίχιση ή όταν έχουμε Style Sheets, ώστε να μπορούμε να κρατάμε στο ελάχιστο τις διαφορές ανάμεσα στους παλιούς και νέους browsers. Αν γράψουμε: Εδώ είναι ένα παράδειγμα για το πως εργάζεται το "<ΒR>" <ΒΡ>Η γραμμή που διαβάζετε άλλαξε γιατί χρησιμοποιήσαμε το <BR> Θα πάρουμε τελικά: Εδώ είναι ένα παράδειγμα για το πως εργάζεται το "<ΒR>" Η γραμμή που διαβάζετε άλλαξε γιατί χρησιμοποιήσαμε το <BR> Υπάρχουν όμως, κι άλλοι τρόποι μορφοποίησης του κειμένου. Ένας καλός τρόπος είναι η χρήση επικεφαλίδων, τα γνωστά κι ως Headings. Υπάρχουν 6 τύποι επικεφαλίδων. Τα Heading 1 ως Heading 6. Είναι προφανές ότι αντιστοιχούν σε επικεφαλίδες από το 1 ως το 6. Δηλαδή, μπορούμε να έχουμε μία κύρια και 5 υπό-κεφαλίδες. Επικεφαλίδα Συμβολισμός Σύνταξη Επικεφαλίδα 1 Η1 <H1>Παράδειγμα</Η1> Επικεφαλίδα 2 Η2 <H2>Παράδειγμα</Η2> Επικεφαλίδα 3 Η3 <H3>Παράδειγμα</Η3> Επικεφαλίδα 4 Η4 <H4>Παράδειγμα</Η4> Επικεφαλίδα 5 Η5 <H5>Παράδειγμα</Η5> Επικεφαλίδα 6 Η6 <H6>Παράδειγμα</Η6> 1.5.1. Διαμορφωμένο Κείμενο Το <PRE> tag (το οποίο αντιστοιχεί στο "preformatted") χρησιμοποιείται για τη διατήρηση της στίχισης του κειμένου που περικλείεται μεταξύ των tags αρχής και τέλους. Για παράδειγμα οι γραμμές: <PRE> Ελένη-Αικατερίνη Λελίγκου Σελίδα 5 από 8

Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph!</pre> θα παρουσιαστούν ως: Welcome to the world of HTML. This is the first paragraph. While short it is still a paragraph! 3 ο βήμα πειραματισμού: Επαναλάβατε το κείμενο του παραδείγματος της πρώτης ενότητας, αλλά χρησιμοποιώντας όσο το δυνατόν περισσότερα tags διαμόρφωσης παραγράφου. 1.6. Εφαρμογή tag λίστας Στον παρακάτω πίνακα φαίνονται μερικά από τα tags που χρησιμοποιούνται για την απεικόνιση κειμένου σε μορφή λίστας. Tags Σημασία Περιγραφή <LI> Όροι Λίστας Δηλώνει κείμενο ως λίστα. Βλέπε και ορισμό <OL>, </OL>. <OL>, </OL> Αριθμημένη λίστα <OL> <LI> Item number one. <LI> Item number two. <LI> Item number three. </OL> Το αποτέλεσμα θα είναι το ακόλουθο: 1. Item number one. 2. Item number two. 3. Item number three. <UL>, </UL> Μη αριθμημένη λίστα <UL> <LI> First item <LI> Second item <LI> Third item </UL> Το αποτέλεσμα θα είναι το ακόλουθο: First item Ελένη-Αικατερίνη Λελίγκου Σελίδα 6 από 8

Second item Third item <DT> Ορος Το tag χρησιμοποιείται για να χωρέσει σε μία γραμμή της Web σελίδας. Βλέπε επίσης τον ορισμό <DL>, </DL>. <DD> Ορισμός Το tag αυτό δέχεται μία πλήρη παράγραφο ή κείμενο, το οποίο είναι στοιχισμένο κάτω από το <DT>. Βλέπε επίσης τον ορισμό <DL>, </DL> Description. <DL>, </DL> Λίστα ορισμών Αυτό επιτρέπει δύο επίπεδα όρων το <DT> και <DD>. Χρησιμοποιείται όταν υπάρχουν μία λίστα μία περισσότερους από έναν ορισμούς Όλα τα παραπάνω tags μπορούν να είναι φωλιασμένα (nested) όπως φαίνεται στο παρακάτω παράδειγμα. <HTML> <HEAD> <TITLE>List Tag Examples</TITLE> </HEAD> <BODY> The following is an example of nesting the different list tags: <OL> <LI>Introduction <LI>Chapter One <UL> <LI>Section 1.1 <LI>Section 1.2 <LI>Section 1.3 </UL> <LI>Chapter Two </OL> Computer Terms <DL> <DT>CPU <DD>Central Processing Unit. This is the "brain" of a computer, where instructions created by the computer system software and application software are carried out. Ελένη-Αικατερίνη Λελίγκου Σελίδα 7 από 8

<DT>Hard Drive <DD>Sometimes called fixed drive, this is a device (generally mounted inside a computer's case) with spinning magnetic plates that is designed to store computer data. When a file is "saved" to the hard drive, it is available for accessing at a later time. </DL> </BODY> </HTML> 4 ο βήμα πειραματισμού Επαυξήστε το παράδειγμα της πρώτης ενότητας, χρησιμοποιώντας tag λίστας. Άσκηση για παράδοση Για να θεωρηθεί ολοκληρωμένη η παρούσα άσκηση για ένα φοιτητή, πρέπει να παρουσιάσει είτε την ημέρα που διεξάγεται το εργαστήριο είτε στην αρχή της επόμενης εργαστηριακής άσκησης την παρακάτω ιστοσελίδα. Με βάση τη θεωρία των παραπάνω ενοτήτων το μέλος κάθε ομάδας να φτιάξει την προσωπική του ιστοσελίδα, η οποία να περιέχει: 1. Τα προσωπικά του στοιχεία. 2. Μια αριθμημένη λίστα με τα μαθήματα πρώτου εξαμήνου που έχει παρακολουθήσει και να υπάρχει φωλιασμένη μη αριθμημένη λίστα με το βαθμό του εργαστηρίου και θεωρίας. 3. Μια αριθμημένη λίστα με τα hobby του και 4. Μια παράγραφο με τους λόγους που τον οδήγησαν στην επιλογή αυτής της κατεύθυνσης. To αρχείο που θα φτιάξετε θα το αποθηκεύσετε στο σκληρό δίσκο, χρησιμοποιώντας ως όνομα αρχείου το όνομα του σπουδαστή. Ελένη-Αικατερίνη Λελίγκου Σελίδα 8 από 8