ΚΕΡΑΜΟΠΟΥΛΟΣ ΕΥΚΛΕΙΔΗΣ
H HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language (γλώσσα μορφοποίησης υπερκειμένου) και είναι η βασική γλώσσα δόμησης σελίδων του World Wide Web. 2
Βασικά χαρακτηριστικά ενός <tag> Η HTML είναι μία γλώσσα σήμανσης κειμένου. Χρησιμοποιεί "HTML tags". Ένα tag: αρχίζει με ένα σύμβολο '<' τερματίζεται με ένα σύμβολο /> και μεταξύ αυτών τοποθετείται κείμενο που καθορίζει ποιο tag χρησιμοποιείται. 3
Πρώτο Παράδειγμα <HTML> <HEAD> <TITLE>My first HTML document</title> </HEAD> <BODY> <P>Hello world!</p> </BODY> </HTML> 4
Αποθηκεύουμε το αρχείο με κατάληξη.htm ή.html Το μεταφέρουμε στον διακομιστή Η προβολή γίνεται από έναν browser 5
Δεύτερο Παράδειγμα <HTML> <HEAD> <TITLE>My first HTML document</title> </HEAD> <BODY> <h1>beautiful World</h1> <P>Hello world!</p> </BODY> </HTML> 6
Επικεφαλίδες <HTML> <HEAD> <TITLE>My first HTML document</title> </HEAD> <BODY> <h1>beautiful World</h1> <h2>beautiful World</h2> <h3>beautiful World</h3> <h4>beautiful World</h4> <h5>beautiful World</h5> <h6>beautiful World</h6> <h7>beautiful World</h7> <h8>beautiful World</h8> <h9>beautiful World</h9> <P>Hello world!</p> </BODY> </HTML> 7
παράγραφοι και κείμενο <HTML> <HEAD> <TITLE>My first HTML document</title> </HEAD> <BODY> <h1>beautiful World</h1> <P>Hello world1!</p> <P>Hello world2!</p> <P>Hello <br /> world3!</p> <P>Hello world4!</p> </BODY> </HTML> 8
παράγραφοι και κείμενο <HTML> <HEAD> <TITLE>My first HTML document</title> </HEAD> <BODY> <h1>beautiful World</h1> Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello <P>Hello world1!</p> Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello <P>Hello world2!</p> <P>Hello world3!</p> <P>Hello world4!</p> </BODY> </HTML> 9
παράγραφοι και κείμενο <HTML> <HEAD> <TITLE>My first HTML document</title> </HEAD> <BODY> <h1>beautiful World</h1> Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello <P>Hello world1!</p> Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello Hello <P>Hello world2!</p> <P>Hello world3!</p> <P>Hello world4!</p> </BODY> </HTML> 10
Entities Οτιδήποτε περιέχεται ανάμεσα στις ετικέτες (tags) 11
Attributes Χρησιμοποιούνται για να προσφέρουν πληροφορίες σχετικά με ένα entity <a href="http://www.w3schools.com">this is a link</a> entity attribute 12
ιδιότητες και συνδέσεις <HTML> <HEAD> <TITLE>My first HTML document</title> </HEAD> <BODY> <a href="http://www.w3schools.com">this is a link</a> </BODY> </HTML> 13
συνδέσεις (links) Για να δημιουργήσουμε ένα link χρησιμοποιούμε το tag <a>. Μπορούμε να δημιουργήσουμε δύο ειδών συνδέσεις: Προς ένα άλλο έγγραφο με την ιδιότητα href Προς το ίδιο έγγραφο με την ιδιότητα (anchor) name και href 14
έξωτερικές συνδέσεις (links) <HTML> <BODY> <a href="http://erodios.it.teithe.gr/intprog/users/t4/euclid/1.html">κείμενο συνδέσμου</a> <a href="http://www.it.teithe.gr">tμήμα Πληροφορικής του ΤΕΙ Θεσσαλονίκης </a> <a href="./2.html">2o παράδειγμα</a> <a href="../2.html">2o παράδειγμα</a> <a href="../../2.html">2o παράδειγμα</a> <a href="../euclid/folder/2.html">2o παράδειγμα</a> <a href="3.html"><img SRC="activate.gif">3ο παράδειγμα</a> </BODY> </HTML> 15
έξωτερικές συνδέσεις (links) Υποθέστε ότι βρίσκεστε στην σελίδα με URL: http://www.example.org/lessons/labs/lab1.html Βρείτε σε ποια διεύθυνση (URL) θα μετα κινηθείτε με τους παρακάτω συνδέσμους: 1. <a href="/portal/lab2.html">σύνδεσμος 1</a> 2. <a href="/portal/../labs.html">σύνδεσμος 2</a> 3. <a href="/portal/lab1/example1.html">σύνδεσμος 3</a> 4. <a href="/portal/lessons.html">σύνδεσμος 4</a><a href="/portal/../lessons.html"></a> 5. <a href="/portal/www.teithe.gr">σύνδεσμος 5</a> 6. <a href="http://www.teithe.gr">σύνδεσμος 6</a> 16
εσωτερικές συνδέσεις (links) Δημιουργία anchors Μέσα στο HTML έγγραφο βάζουμε την παρακάτω γραμμή στο σημείο που θέλουμε να μετακινούμαστε <a NAME="anchorname"> Έτσι, δημιουργούμε ένα σελιδοδείκτη μέσα στο έγγραφο. Μετακίνηση στο anchor <a href="# anchorname"> κείμενο<a/> Μετακίνηση στο anchor άλλου αρχείου <a href="# anchorname"> κείμενο<a/> 17
εσωτερικές συνδέσεις (links) <HTML> <HEAD> <TITLE>My first HTML document</title> </HEAD> <BODY> <h1>beautiful World</h1> <a NAME="thessaloniki"> Hello Thessaloniki <a href="#athens"> go to athens<a/> <P>Hello world1!</p> <P>Hello world1!</p> <a NAME="athens"> Hello Athens <a href="#thessaloniki"> go to thessaloniki<a/> </BODY> </HTML> 18
σύνδεση σε anchor άλλου αρχείου <HTML> <HEAD> <TITLE>My first HTML document</title> </HEAD> <BODY> <h1>beautiful World</h1> <a NAME="thessaloniki"> Hello Thessaloniki <a href="#athens"> go to athens<a/> <P>Hello world1!</p> <P>Hello world1!</p> <a NAME="athens"> Hello Athens <a href="1.html#thessaloniki"> go to thessaloniki<a/> </BODY> </HTML 19
εικόνες Χρησιμοποιούμε το tag <img> <img src="activate.gif">εικόνα</img> 20