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

Μέγεθος: px

Εμφάνιση ξεκινά από τη σελίδα:

Download "ΚΕΡΑΜΟΠΟΥΛΟΣ ΕΥΚΛΕΙΔΗΣ"

Σαπφειρη Μήτζου
7 χρόνια πριν
Προβολές:

1 ΚΕΡΑΜΟΠΟΥΛΟΣ ΕΥΚΛΕΙΔΗΣ

2 H HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language (γλώσσα μορφοποίησης υπερκειμένου) και είναι η βασική γλώσσα δόμησης σελίδων του World Wide Web. 2

3 Βασικά χαρακτηριστικά ενός <tag> Η HTML είναι μία γλώσσα σήμανσης κειμένου. Χρησιμοποιεί "HTML tags". Ένα tag: αρχίζει με ένα σύμβολο '<' τερματίζεται με ένα σύμβολο /> και μεταξύ αυτών τοποθετείται κείμενο που καθορίζει ποιο tag χρησιμοποιείται. 3

4 Πρώτο Παράδειγμα <HTML> <HEAD> <TITLE>My first HTML document</title> </HEAD> <BODY> <P>Hello world!</p> </BODY> </HTML> 4

5 Αποθηκεύουμε το αρχείο με κατάληξη.htm ή.html Το μεταφέρουμε στον διακομιστή Η προβολή γίνεται από έναν browser 5

6 Δεύτερο Παράδειγμα <HTML> <HEAD> <TITLE>My first HTML document</title> </HEAD> <BODY> <h1>beautiful World</h1> <P>Hello world!</p> </BODY> </HTML> 6

7 Επικεφαλίδες <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

8 παράγραφοι και κείμενο <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

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> 9

10 παράγραφοι και κείμενο <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

11 Entities Οτιδήποτε περιέχεται ανάμεσα στις ετικέτες (tags) 11

12 Attributes Χρησιμοποιούνται για να προσφέρουν πληροφορίες σχετικά με ένα entity <a href=" is a link</a> entity attribute 12

13 ιδιότητες και συνδέσεις <HTML> <HEAD> <TITLE>My first HTML document</title> </HEAD> <BODY> <a href=" is a link</a> </BODY> </HTML> 13

14 συνδέσεις (links) Για να δημιουργήσουμε ένα link χρησιμοποιούμε το tag <a>. Μπορούμε να δημιουργήσουμε δύο ειδών συνδέσεις: Προς ένα άλλο έγγραφο με την ιδιότητα href Προς το ίδιο έγγραφο με την ιδιότητα (anchor) name και href 14

15 έξωτερικές συνδέσεις (links) <HTML> <BODY> <a href=" συνδέσμου</a> <a href=" Πληροφορικής του ΤΕΙ Θεσσαλονίκης </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

16 έξωτερικές συνδέσεις (links) Υποθέστε ότι βρίσκεστε στην σελίδα με URL: Βρείτε σε ποια διεύθυνση (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/ 5</a> 6. <a href=" 6</a> 16

17 εσωτερικές συνδέσεις (links) Δημιουργία anchors Μέσα στο HTML έγγραφο βάζουμε την παρακάτω γραμμή στο σημείο που θέλουμε να μετακινούμαστε <a NAME="anchorname"> Έτσι, δημιουργούμε ένα σελιδοδείκτη μέσα στο έγγραφο. Μετακίνηση στο anchor <a href="# anchorname"> κείμενο<a/> Μετακίνηση στο anchor άλλου αρχείου <a href="# anchorname"> κείμενο<a/> 17

18 εσωτερικές συνδέσεις (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

19 σύνδεση σε 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

20 εικόνες Χρησιμοποιούμε το tag <img> <img src="activate.gif">εικόνα</img> 20

Σχετικά έγγραφα

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

Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html Χρ. Ηλιούδης Παγκόσμιος Ιστός (WWW) Ο Παγκόσμιος Ιστός (World Wide Web WWW), ή απλώς Ιστός, βασίζεται στην ιδέα των κατανεμημένων πληροφοριών. Αντί όλες