Introducing

Prezi AI.

Your new presentation assistant.

Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.

HTML

georgios ntouvelos

Updated March 19, 2011

Transcript

Τι είναι μια

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"></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>

Γλώσσα HTML

Choose a template

Constellations (AI Assisted)

Illuminate your ideas with our captivating Constellations Prezi AI-assisted presentation template, merging celestial elegance with professional design to elevate your content and guide your audience through a stellar visual experience.

Sheet Music (AI Assisted)

Elevate your presentations with our Sheet Music Prezi AI-assisted presentation template, seamlessly blending aesthetics and functionality for a harmonious visual experience.

Data Analysis (AI Assisted)

Transform data into insights with our Data Analysis Prezi AI-assisted presentation template, strategically designed to visually convey complex information, enabling impactful presentations that drive informed decision-making.

See more templates →

Presentations from around the world

comida japonesa

Victor Aguiar

ANTEPROYECTO Y SUS PASOS

Mariangelica Mendoza

Trabalho

Aristóteles de Almeida Silva

See staff picks →

Learn more about creating dynamic, engaging presentations with Prezi

Why Prezi is better