Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

HTML

Για κάποιον που ξεκινάει τη δημιουργία ιστοσελίδων.
by

georgios ntouvelos

on 19 March 2011

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of HTML

Γλώσσα HTML
Τι είναι μια
Web Σελίδα
Μία Web Σελίδα είναι ένα αρχείο κειμένου με συγκεκριμένη μορφή έτσι ώστε να εκτελείτε απο ένα web client. Κάθε Web σελίδα έχει την δική της διεύθυνση μέσα στο Internet. Αυτή η διεύθυνση είναι η διεύθυνση του κόμβου στον οποίο είναι αποθηκευμένη.
Πώς κατασκευάζουμε
σελίδες με Ελληνικούς
Χαρακτήρες
Απλώς γράφουμε Ελληνικά Ο βασικός κανόνας που πρέπει να έχετε υπ όψιν σας είναι ότι αν οι σελίδες σας περιέχουν Ελληνικούς χαρακτήρες, αυτοί θα μπορούν να διαβαστούν από όσους έχουν το ίδιο character set στον Η/Υ τους. Προβλήματα με τα Ελληνικά εμφανίζονται συνήθως όταν ορίζουμε γραμματοσειρές.
Τι είναι ένα Web Site
Web Site ονομάζουμε ένα σύνολο από ενότητες Web σελίδων που συνήθως συστεγάζονται (φιλοξενούνται) στον ίδιο Web Server.

Ενότητα στο Web είναι ένα σύνολο από Web σελίδες με λίγο ως πολύ κοινό αντικείμενο, αρχιτεκτονική και δομή.
Τι είναι Web Server
και Web Client
Web Server ονομάζουμε το λογισμικό που τρέχει σε ένα κόμβο Internet και επιτρέπει σε άλλους υπολογιστές να αποκτούν αντίγραφα των Web σελίδων που είναι αποθηκευμένες σε αυτόν.

Web Client ονομάζουμε το λογισμικό που τρέχει ένας Η/Υ και του επιτρέπει να "διαβάζει" Web σελίδες (από το σκληρό του δίσκο ή από το Internet αν είναι συνδεδεμένος με αυτό).
Τι είναι η γλώσσα
HTML
Τα αρχικά HTML προέρχονται από τις λέξεις HyperText Markup Language. Η HTML δεν είναι μια γλώσσα προγραμματισμού (αν και ονομάζουμε όσους την χρησιμοποιούν HTML programmers). Είναι μια περιγραφική γλώσσα, δηλαδή ένας ειδικός τρόπος γραφής κειμένου και κλήσης άλλων αρχείων ή εφαρμογών βασισμένος σε οδηγίες (tags). Ο Web client αναγνωρίζει αυτόν τον ειδικό τρόπο γραφής και εκτελεί τις εντολές που περιέχονται σε αυτόν.
Τι είναι μια Οδηγία
(Tag)
Tag ονομάζουμε μία οδηγία γραμμένη σε HTML, την οποία πρέπει να αναγνωρίσει και ερμηνεύσει ο browser. Τα tags βρίσκονται πάντοτε μεταξύ των συμβόλων < και >. Π.χ. η οδηγία για να γίνει ένα κείμενο bold είναι:
<b>το κείμενο που θα είναι bold </b>.

Αυτό ερμηνεύεται ως:

<b> = (ότι βρεις από δω και πέρα θα το παρουσιάζεις σαν bold)

</b> = (σταματάς να κάνεις bold ότι βρεις από δω και κάτω)

Οι οδηγίες δεν επηρεάζονται από το αν έχουν γραφτεί με πεζά (μικρά) ή κεφαλαία (είναι case insensitive). Δηλαδή οι οδηγίες <title> και <TITLE> είναι ισοδύναμες.
Κατασκευή σελίδων
με κώδικα HTML
ή με προγράμματα;
Ο εύκολος: Δηλαδή, να χρησιμοποιηθεί ένα αυτόματο πρόγραμμα όπως το Dreamweaver ή κάποιο άλλο online εργαλείο σαν το http://www.jimdo.com/ για να σχεδιαστεί η σελίδα με τρόπο ανάλογο της δημιουργίας ενός εγγράφου.

Ο δύσκολος: Δηλαδή, να δημιουργηθούν τα πάντα από το μηδέν με τη χρήση κώδικα HTML.
Πώς κατασκευάζεται
μια απλή Web σελίδα
<HTML>

Αυτή είναι η πρώτη μου σελίδα.

</HTML>
Ορισμός Παραγράφων
<HTML>
<P>Wiki (προφέρεται βίκι ή γουίκι) είναι ένας τύπος ιστοτόπου που επιτρέπει σε οποιονδήποτε να δημιουργήσει και να επεξεργαστεί τις σελίδες του
<P>Σε ένα wiki, διάφορα άτομα μπορούν να γράφουν μαζί (όχι ταυτοχρόνως)
<P> Έτσι, διευκολύνεται η συνεργασία πολλών ατόμων για τη συγγραφή ενός έργου.
</HTML>
Αλλαγές Γραμμών
<HTML>
Αν ένα άτομο κάνει κάποιο λάθος, το επόμενο μπορεί να το διορθώσει.
<BR>Μπορεί επίσης να προσθέσει κάτι νέο στην σελίδα, πράγμα που επιτρέπει την συνεχή βελτίωση και ενημέρωση.
</HTML>
Παραπομπές (Links)
<HTML>
Η <A HREF="http://www.google.com">Google</A> είναι το πιο δημοφιλές εργαλείο αναζήτησης.
</HTML>
Τίτλος σελίδας
<HTML><HEAD><TITLE>Βικιπαίδεια</TITLE></HEAD>
</HTML>
Πώς ορίζουμε το χρώμα
του φόντου και του
κειμένου της σελίδας
<HTML><HEAD><TITLE>Βικιπαίδεια</TITLE></HEAD>

<BODY BGCOLOR=RED TEXT=WHITE LINK=LIME VLINK=YELLOW ALINK=BLACK><P>Ο σκοπός και οι κανόνες είναι διαφορετικοί σε διάφορα wiki.</BODY></HTML>
Επικεφαλίδες
(Headings)
<HTML><HEAD><TITLE>Βικιπαίδεια</TITLE></HEAD><BODY>
<H2>Ιστορία </H2>Το πρώτο wiki, δημιουργήθηκε το 1994 και εγκαταστάθηκε στον Ιστό στις 25 Μαρτίου του 1995 από τον Ward Cunningham.</BODY></HTML>
Στοίχιση
<ALIGN>
<HTML><HEAD><TITLE>Βικιπαίδεια</TITLE></HEAD><BODY>
<DIV ALIGN=RIGHT><H1>Επικεφαλίδα 1</H1><H3>Επικεφαλίδα 2</H3><P>Παράγραφος με κείμενο</DIV></BODY></HTML>
Ορισμός
γραμματοσειρών
<HTML><HEAD><TITLE>Βικιπαίδεια</TITLE></HEAD><BODY>
<FONT FACE="Times New Roman" COLOR=YELLOW>Η ανοικτή φιλοσοφία των περισσότερων wiki</FONT></BODY></HTML>
Εισαγωγή Εικόνων
<HTML><HEAD><TITLE>Βικιπαίδεια</TITLE></HEAD><BODY>
<IMG SRC="image2.gif" border=5 height=38 width=756 ></BODY></HTML>
Πώς δημιουργούμε
απλούς πίνακες
<HTML><HEAD><TITLE>Βικιπαίδεια</TITLE></HEAD><BODY>
<TABLE>
<TR>
<TH>ΕΠΙΚΕΦΑΛΙΔΑ</TH>
<TD>ΔΕΔΟΜΕΝΑ</TD> <TD>ΔΕΔΟΜΕΝΑ</TD>
<TD>ΔΕΔΟΜΕΝΑ</TD></TR> </TABLE></BODY></HTML>
Τι είναι τα
Stylesheets
Τα Cascading Stylesheets (για συντομία, CSS) εμφανίστηκαν για πρώτη φορά το 1996. Αποτελούν μια ειδική διάλεκτο της γλώσσας HTML και μας επιτρέπουν να ορίσουμε με μεγαλύτερη ακρίβεια τον τρόπο απεικόνισης των σελίδων μας από τον browser.
Κατασκευή σελίδας
με style sheets
<HTML> <STYLE TYPE="text/css"><!--H2 { color: green } P, BLOCKQUOTE { font-family: arial }--></STYLE><HEAD><TITLE>Η πρώτη μου σελίδα με styles</TITLE></HEAD><BODY>
Πώς προσθέτουμε
javascripts
<HTML><HEAD>
<SCRIPT LANGUAGE="JavaScript">
var d=new Date();
d.setTime(d.getTime());
var month = 1;
var sk="";
if (d.getDate() == 1) {sk="
Have a nice month!"}
if (d.getDay() == 0) {day="Sunday"}
if (d.getDay() == 1) {day="Monday"; sk="
Have a nice week!"}
if (d.getDay() == 2) {day="Tuesday"}
if (d.getDay() == 3) {day="Wednesday"}
if (d.getDay() == 4) {day="Thursday"}
if (d.getDay() == 5) {day="Friday"; sk="
Have a nice weekend!"}
if (d.getDay() == 6) {day="Saturday"}
month = d.getMonth() + 1;
document.write("<B><FONT FACE=Arial COLOR=#FDEDB5 SIZE=-1>" + day + " " +
d.getDate() + "/" + month + "/" + d.getYear() + "</FONT></B><FONT SIZE=-2
FACE=Arial COLOR=#000000><BLINK>" + sk +"</BLINK></FONT>");
</SCRIPT></HEAD><BODY>
Πώς προσθέτουμε μια
σελίδα μέσα σε μια άλλη
(iframe)
<HTML><HEAD>
TEST</HEAD>
<iframe src="../../index.htm" width=100% height="300"></iframe>
<BODY>
Full transcript