ΑΡΧΙΚΗ ΚΑΤΑΣΚΕΥΗ Bloggs ΚΩΔΙΚΑΣ html JavaScript ΕΙΣΑΓΩΓΗ ManiacΑΝΑΛΥΣΗ Site ΕΙΔΗΣΕΩΝ GadgetManiac ΓΕΝΙΚΑ

Τρίτη, 26 Φεβρουαρίου 2013

ΑΝΑΡΤΗΣΗ ΧΩΡΙΣΜΕΝΗ ΣΕ ΔΥΟ ΣΤΗΛΕΣ

 Χωρίστε την ανάρτησή σας σε δύο  στήλες:


   Στην ανάρτηση που θέλουμε να χωρίσουμε προσθέτουμε τον παρακάτω κώδικα:
 Ως γνωστόν την ανάρτηση την γράφουμε στο κουμπί Σύνθεση. Τον κώδικα αυτόν τον τοποθετούμε στο κουμπί HTML  της και ανάμεσα βάζουμε το κείμενο.

<div style="float: left; width: 45%"><span style="font-weight: bold;">Εδώ το κείμενο της αριστερής στήλης</span></div>

<div style="float: right; width: 45%"><span style="font-weight: bold;"> Εδώ το κείμενο της δεξιάς στήλης</span></div>

<div style="clear: both"></div>


ΠΕΡΙΣΣΟΤΕΡΑ

Πέμπτη, 21 Φεβρουαρίου 2013

DOCTYPE.ΟΡΙΣΜΟΣ ΚΑΙ ΧΡΗΣΗ



 Το <! DOCTYPE> δήλωση υποστηρίζεται σε όλες τις μεγάλες μηχανές αναζήτησης.

Ορισμός και Χρήση
Το <! DOCTYPE> δήλωση πρέπει να είναι το πρώτο πράγμα στο HTML έγγραφο σας, πριν από την <html> ετικέτα.
Η δήλωση αυτή δεν είναι μια ετικέτα HTML <DOCTYPE!>? Είναι μια εντολή στο πρόγραμμα περιήγησης στο Web για το τι έκδοση του HTML η σελίδα είναι γραμμένει μέσα.
Στην HTML 4.01, ο <! DOCTYPE> δήλωση αναφέρεται σε ένα DTD, επειδή HTML 4.01 βασίστηκε σε SGML. Το DTD καθορίζει τους κανόνες για τη γλώσσα σήμανσης, έτσι ώστε οι μηχανές αναζήτησης να καταστήσει το περιεχόμενο σωστά.
HTML5 δεν βασίζεται σε SGML, και επομένως δεν απαιτεί μια αναφορά σε μια DTD.
Συμβουλή: Πάντα να προσθέτετε τη δήλωση σε έγγραφα HTML σας, έτσι ώστε το πρόγραμμα περιήγησης να ξέρει τι τύπο του εγγράφου να αναμένει <DOCTYPE!>.
  
 Διαφορές μεταξύ 4,01 HTML και HTML5
Υπάρχουν τρεις διαφορετικές <! DOCTYPE> δηλώσεων σε HTML 4.01. Σε HTML5 υπάρχει μόνο ένα:

<!DOCTYPE html>

Κοινή Δήλωση DOCTYPE
HTML 5

<!DOCTYPE html>

HTML 4.01 Strict

Αυτό το DTD HTML περιέχει όλα τα στοιχεία και χαρακτηριστικά, αλλά δεν περιλαμβάνει την παρουσίαση ή μη αποδεκτά στοιχεία (όπως η γραμματοσειρά). Framesets δεν επιτρέπονται.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional

Αυτό το DTD HTML περιέχει όλα τα στοιχεία και χαρακτηριστικά, ΣΥΜΠΕΡΙΛΑΜΒΑΝΟΜΕΝΩΝ παρουσίασης και μη αποδεκτά στοιχεία (όπως η γραμματοσειρά). Framesets δεν επιτρέπονται.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset

Αυτό το DTD είναι ίση με HTML 4.01 Transitional, αλλά επιτρέπει τη χρήση του περιεχομένου πλαισίων.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
XHTML 1.0 Strict

Αυτό το DTD HTML περιέχει όλα τα στοιχεία και χαρακτηριστικά, αλλά δεν περιλαμβάνει την παρουσίαση ή μη αποδεκτά στοιχεία (όπως η γραμματοσειρά). Framesets δεν επιτρέπονται. Η σήμανση πρέπει επίσης να γραφτεί ως καλοσχηματισμένο XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Transitional

Αυτό το DTD HTML περιέχει όλα τα στοιχεία και χαρακτηριστικά, ΣΥΜΠΕΡΙΛΑΜΒΑΝΟΜΕΝΩΝ παρουσίασης και μη αποδεκτά στοιχεία (όπως η γραμματοσειρά). Framesets δεν επιτρέπονται. Η σήμανση πρέπει επίσης να γραφτεί ως καλοσχηματισμένο XML.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
XHTML 1.0 Frameset

Αυτό το DTD είναι ίσο με το πρότυπο XHTML 1.0 Transitional, αλλά επιτρέπει τη χρήση του περιεχομένου πλαισίων.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1

Αυτό το DTD είναι ίσο με το XHTML 1.0 Strict, αλλά σας επιτρέπει να προσθέσετε ενότητες (για παράδειγμα, για την παροχή υποστήριξης για ρουμπίνι Ανατολή-ασιατικές γλώσσες).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
ΠΕΡΙΣΣΟΤΕΡΑ

HTML - ΤΟ ΣΤΟΙΧΕΙΟ object



Α.
HTML - Το στοιχείο <object>


Ο σκοπός του στοιχείου <object> είναι η υποστήριξη HTML βοηθοί (plug-ins).

HTML Helpers (Plug-ins)
  Μια βοηθητική εφαρμογή είναι ένα μικρό πρόγραμμα υπολογιστή που επεκτείνει το πρότυπο λειτουργικότητα του browser. Οι εφαρμογές Helper που ονομάζεται επίσης plug-ins.
Τα Plug-ins συχνά χρησιμοποιείται από προγράμματα περιήγησης για αναπαραγωγή ήχου και βίντεο.
  Παραδείγματα γνωστών plug-ins είναι το Adobe Flash Player και QuickTime.
Plug-ins μπορεί να προστεθεί σε ιστοσελίδες μέσω του ετικέτας <object> ή την ετικέτα <embed>.
Τα περισσότερα plug-ins επιτρέπουν εγχειρίδιο (ή προγραμματισμένο) έλεγχο των ρυθμίσεων για τον όγκο, προς τα πίσω, προς τα εμπρός, παύση, διακοπή και δραστηριότητες.
  Τι είναι ο καλύτερος τρόπος για να παίξει ήχου / βίντεο σε HTML;
 Για τον καλύτερο τρόπο για να ενσωματώσετε ήχο ή βίντεο στην ιστοσελίδα σας, παρακαλούμε διαβάστε τις επόμενες κεφάλαια.

   QuickTime - Αναπαραγωγή ήχου WAV
Παράδειγμα

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="liar.wav">
<param name="controller" value="true">
</object>


   QuickTime - Αναπαραγωγή βίντεο MP4
Παράδειγμα

<object width="420" height="360"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"
codebase="http://www.apple.com/qtactivex/qtplugin.cab">
<param name="src" value="movie.mp4">
<param name="controller" value="true">
</object>


   Adobe Flash Player - Play SWF βίντεο
Παράδειγμα

<object width="400" height="40"
classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"
codebase="http://fpdownload.macromedia.com/
pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0">
<param name="SRC" value="bookmark.swf">
<embed src="bookmark.swf" width="400" height="40">
</embed>
</object>


   Το Windows Media Player - Play ταινία WMV
Το παρακάτω παράδειγμα δείχνει τον προτεινόμενο κώδικα που χρησιμοποιείται για την εμφάνιση ενός αρχείου Windows Media.

Παράδειγμα

<object width="100%" height="100%"
type="video/x-ms-asf" url="3d.wmv" data="3d.wmv"
classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6">
<param name="url" value="3d.wmv">
<param name="filename" value="3d.wmv">
<param name="autostart" value="1">
<param name="uiMode" value="full">
<param name="autosize" value="1">
<param name="playcount" value="1">
<embed type="application/x-mplayer2" src="3d.wmv" width="100%" height="100%" autostart="true" showcontrols="true" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/"></embed>
</object>


Β.
     HTML ήχου
   Οι ήχοι μπορούν να αναπαραχθούν σε μορφή HTML με πολλές διαφορετικές μεθόδους.
Προβλήματα, προβλήματα, λύσεις και
Παίζοντας ήχου σε μορφή HTML δεν είναι εύκολο!
  Πρέπει να ξέρετε πολλά κόλπα για να βεβαιωθείτε ότι τα αρχεία ήχου σας θα παίξει σε όλους τους browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) και για όλο το υλικό (PC, Mac, iPad, iPhone).
Σε αυτό το κεφάλαιο W3Schools συνοψίζει τα προβλήματα και τις λύσεις.
Χρησιμοποιώντας Plug-ins
Το plug-in είναι ένα μικρό πρόγραμμα υπολογιστή που επεκτείνει το πρότυπο λειτουργικότητα του browser.
Plug-ins μπορεί να προστεθεί σε σελίδες HTML με το tag <object> ή την ετικέτα <embed>.
Αυτές οι ετικέτες ορίζουν δοχεία για τους πόρους (συνήθως μη-HTML μέσα), το οποίο, ανάλογα με τον τύπο, θα πρέπει είτε να εμφανιστεί από τα προγράμματα περιήγησης, ή από εξωτερικό plug-in.
Χρησιμοποιώντας το στοιχείο <embed>
Η ετικέτα <embed> ορίζει ένα δοχείο για εξωτερικούς (μη-HTML) περιεχόμενο.
Το παρακάτω κομμάτι κώδικα θα πρέπει να παίξει ένα αρχείο MP3 ενσωματωμένα σε μια ιστοσελίδα:
Παράδειγμα

<embed height="50" width="100" src="horse.mp3">

Προβλήματα:

Διαφορετικά προγράμματα περιήγησης υποστηρίζουν διαφορετικές μορφές ήχου
Εάν ένα πρόγραμμα περιήγησης δεν υποστηρίζει τη μορφή αρχείου, ο ήχος δεν θα παίξει χωρίς ένα plug-in
Αν το plug-in δεν είναι εγκατεστημένο στον υπολογιστή του χρήστη, ο ήχος δεν θα παίξει
Αν μετατρέψετε το αρχείο σε άλλη μορφή, θα εξακολουθούν να μην παίξει σε όλους τους browsers
Χρησιμοποιώντας το στοιχείο <object>
Η ετικέτα <object tag> επίσης να ορίσετε ένα δοχείο για την εξωτερική (μη-HTML) περιεχόμενο.

Το παρακάτω κομμάτι κώδικα θα πρέπει να παίξει ένα αρχείο MP3 ενσωματωμένα σε μια ιστοσελίδα:

Παράδειγμα

<object height="50" width="100" data="horse.mp3"></object>


Προβλήματα:

Διαφορετικά προγράμματα περιήγησης υποστηρίζουν διαφορετικές μορφές ήχου
Εάν ένα πρόγραμμα περιήγησης δεν υποστηρίζει τη μορφή αρχείου, ο ήχος δεν θα παίξει χωρίς ένα plug-in
Αν το plug-in δεν είναι εγκατεστημένο στον υπολογιστή του χρήστη, ο ήχος δεν θα παίξει
Αν μετατρέψετε το αρχείο σε άλλη μορφή, θα εξακολουθούν να μην παίξει σε όλους τους browsers
Χρησιμοποιώντας το στοιχείο HTML5 <audio>
Η HTML5 <audio> ετικέτα καθορίζει τον ήχο, όπως μουσική ή άλλα ηχητικά ρεύματα.

Η <audio> στοιχείο λειτουργεί σε όλα τα σύγχρονα προγράμματα περιήγησης.

Το ακόλουθο παράδειγμα χρησιμοποιεί την ετικέτα <audio>, και ορίζει ένα αρχείο MP3 (για τον Internet Explorer, Chrome και Safari), OGG και ένα αρχείο (για Firefox και Opera). Αν μη τι άλλο δεν εμφανίζει ένα κείμενο:

Παράδειγμα

<audio controls>
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  Your browser does not support this audio format.
</audio>


Προβλήματα:

Θα πρέπει να μετατρέψετε τα αρχεία ήχου σε διάφορες μορφές
Το στοιχείο <audio> δεν λειτουργεί σε παλαιότερα προγράμματα περιήγησης
Η καλύτερη λύση HTML
Το παρακάτω παράδειγμα χρησιμοποιεί το στοιχείο <audio> HTML5 και προσπαθεί να παίξει τον ήχο, είτε ως MP3 ή OGG. Αν αυτό αποτύχει, ο κωδικός "πέφτει πίσω" για να δοκιμάσετε το <embed> στοιχείο:

Παράδειγμα

<audio controls height="100" width="100">
  <source src="horse.mp3" type="audio/mpeg">
  <source src="horse.ogg" type="audio/ogg">
  <embed height="50" width="100" src="horse.mp3">
</audio>


Προβλήματα:

Θα πρέπει να μετατρέψετε τα αρχεία ήχου σε διάφορες μορφές
Το στοιχείο <embed> δεν μπορεί να "εφεδρική" για να εμφανιστεί ένα μήνυμα σφάλματος
Yahoo Media Player - Ένας εύκολος τρόπος για να προσθέσετε ήχου στο site σας
Η ΕΛΕΥΘΕΡΗ Yahoo Media Player είναι σίγουρα ένα από τα αγαπημένα: Απλά αφήστε Yahoo κάνει τη δουλειά του παίζει τα τραγούδια σας.

Παίζει MP3 και πολλές άλλες μορφές. Μπορείτε να προσθέσετε στη σελίδα σας (ή blog) με μια ενιαία γραμμή κώδικα, και εύκολα να μετατραπεί HTML σελίδα σας σε μια επαγγελματική λίστα αναπαραγωγής:

Παράδειγμα

<a href="horse.mp3">Play Sound</a>
<script src="http://mediaplayer.yahoo.com/js"></script>

Για να το χρησιμοποιήσετε, εισαγάγετε τον ακόλουθο JavaScript στο κάτω μέρος της ιστοσελίδας σας:

<script src="http://mediaplayer.yahoo.com/js"></script>

Στη συνέχεια, απλά σύνδεση με τα αρχεία ήχου σας σε μορφή HTML σας, και ο κωδικός JavaScript δημιουργεί αυτόματα ένα κουμπί play για κάθε τραγούδι:
<a href="song1.mp3"> Play Song 1 </ a> <a href = "song2.wav "> Τραγούδι Play 2 </ a> ... ...

  Η Yahoo Media Player παρουσιάζει στους αναγνώστες σας με ένα μικρό κουμπί αναπαραγωγής αντί της πλήρους παίκτη. Ωστόσο, όταν κάνετε κλικ στο κουμπί, ένα πλήρες παίκτης σκάει επάνω. Σημειώστε ότι ο παίκτης είναι πάντα συνδεδεμένο και έτοιμο στο κάτω μέρος του παραθύρου. Απλά κάντε κλικ πάνω του για να τη βγάλετε.

  Χρησιμοποιώντας μια υπερ-σύνδεση
Εάν μια ιστοσελίδα περιέχει μια υπερ-σύνδεση σε ένα αρχείο πολυμέσων, τα περισσότερα προγράμματα περιήγησης θα χρησιμοποιήσει ένα "βοηθητική εφαρμογή" για να παίξει το αρχείο.

  Το παρακάτω κομμάτι κώδικα εμφανίζει ένα σύνδεσμο σε ένα αρχείο MP3. Εάν ένας χρήστης κάνει κλικ στο σύνδεσμο, ο browser θα ξεκινήσει μια βοηθητική εφαρμογή για την αναπαραγωγή του αρχείου:
Παράδειγμα

<a href="horse.mp3">Play the sound</a>

  Μια σημείωση για Inline Ήχοι
Όταν ο ήχος περιλαμβάνεται σε μια ιστοσελίδα, ή ως μέρος μιας ιστοσελίδας, που ονομάζεται ενσωματωμένο ήχο.

  Αν σκοπεύετε να χρησιμοποιήσετε ενσωματωμένα ήχους, να γνωρίζετε ότι πολλοί άνθρωποι θα το βρείτε ενοχλητικό. Επίσης, σημειώστε ότι ορισμένοι χρήστες μπορεί να έχουν απενεργοποιήσει το ενσωματωμένο ήχο επιλογή στον browser τους.

  Καλύτερη συμβουλή μας είναι να περιλαμβάνουν ενσωματωμένο ήχους μόνο σε σελίδες στις οποίες ο χρήστης αναμένει να ακούσει ήχους. Ένα παράδειγμα αυτού είναι μια σελίδα που ανοίγει αφού ο χρήστης έχει κάνει κλικ σε ένα σύνδεσμο για να ακούσετε μια ηχογράφηση.

Γ..
    HTML Βίντεο

   Τα βίντεο μπορούν να αναπαραχθούν σε μορφή HTML με πολλές διαφορετικές μεθόδους.
Παίζοντας βίντεο σε HTML
Παράδειγμα

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240">
  </object>
</video>


 Προβλήματα, προβλήματα, λύσεις και
 Προβολή βίντεο σε HTML δεν είναι εύκολο!
Μπορείτε να προσθέσετε πολλά κόλπα για να βεβαιωθείτε ότι το βίντεό σας θα παίξει σε όλους τους browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) και για όλο το υλικό (PC, Mac, iPad, iPhone).
Σε αυτό το κεφάλαιο W3Schools συνοψίζει τα προβλήματα και τις λύσεις.
Το στοιχείο <embed>
Ο σκοπός της ετικέτας <embed> είναι να ενσωματώσετε στοιχεία πολυμέσων σε σελίδες HTML.
Η παρακάτω κώδικα HTML κομμάτι εμφανίζει ένα βίντεο Flash ενσωματωμένα σε μια ιστοσελίδα:
Παράδειγμα

<embed src="intro.swf" height="200" width="200">

Προβλήματα
Εάν το πρόγραμμα περιήγησης δεν υποστηρίζει Flash, το βίντεο δεν θα παίξει
iPad και το iPhone δεν υποστηρίζει Flash βίντεο
Αν μετατρέψετε το βίντεο σε άλλη μορφή, θα εξακολουθούν να μην παίξει σε όλους τους browsers
Χρησιμοποιώντας το στοιχείο <object>
Ο σκοπός της ετικέτας <object> είναι να ενσωματώσετε στοιχεία πολυμέσων σε σελίδες HTML.
Η παρακάτω κώδικα HTML κομμάτι εμφανίζει ένα βίντεο Flash ενσωματωμένα σε μια ιστοσελίδα:
Παράδειγμα

<object data="intro.swf" height="200" width="200"></object>

Προβλήματα:
Εάν το πρόγραμμα περιήγησης δεν υποστηρίζει Flash, το βίντεο δεν θα παίξει
iPad και το iPhone δεν υποστηρίζει Flash βίντεο
Αν μετατρέψετε το βίντεο σε άλλη μορφή, θα εξακολουθούν να μην παίξει σε όλους τους browsers
Χρησιμοποιώντας το στοιχείο HTML5 <video>

Η HTML5 <video> ετικέτα ορίζει ένα βίντεο ή ταινία.

Η <video> στοιχείο λειτουργεί σε όλα τα σύγχρονα προγράμματα περιήγησης.
Η παρακάτω κώδικα HTML κομμάτι εμφανίζει ένα βίντεο σε OGG, MP4, ή WebM μορφή:
Παράδειγμα

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>


Προβλήματα:

Θα πρέπει να μετατρέψετε τα βίντεό σας σε πολλές διαφορετικές μορφές
Το στοιχείο <video> δεν λειτουργεί σε παλαιότερα προγράμματα περιήγησης
Η καλύτερη λύση HTML
Το παρακάτω παράδειγμα χρησιμοποιεί 4 διαφορετικές μορφές βίντεο. Η HTML 5 στοιχείο <video> προσπαθεί να παίξει το βίντεο είτε σε MP4, OGG, ή WebM μορφή. Εάν αυτό αποτύχει, ο κωδικός "πέφτει πίσω" για να δοκιμάσετε το στοιχείο <object>. Εάν αυτό αποτύχει, επίσης, ότι "πέφτει πίσω" στο στοιχείο <embed>:

HTML 5 + + <object> <embed>

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.webm" type="video/webm">
  <object data="movie.mp4" width="320" height="240">
    <embed src="movie.swf" width="320" height="240">
  </object>
</video>


Προβλήματα:

Θα πρέπει να μετατρέψετε τα βίντεό σας σε πολλές διαφορετικές μορφές
Η λύση του YouTube
Ο ευκολότερος τρόπος για να εμφανίσετε βίντεο σε HTML είναι να χρησιμοποιήσετε το YouTube (βλ. επόμενο κεφάλαιο)!
Χρησιμοποιώντας μια υπερ-σύνδεση
Εάν μια ιστοσελίδα περιέχει μια υπερ-σύνδεση σε ένα αρχείο πολυμέσων, τα περισσότερα προγράμματα περιήγησης θα χρησιμοποιήσει ένα "βοηθητική εφαρμογή" για να παίξει το αρχείο.

Το παρακάτω κομμάτι κώδικα εμφανίζει ένα σύνδεσμο σε ένα βίντεο Flash. Εάν ένας χρήστης κάνει κλικ στο σύνδεσμο, ο browser θα ξεκινήσει μια βοηθητική εφαρμογή για την αναπαραγωγή του αρχείου:

Παράδειγμα

<a href="intro.swf">Play a video file</a>

Μια σημείωση για Inline Βίντεο
Όταν ένα βίντεο περιλαμβάνεται σε μια ιστοσελίδα που ονομάζεται ενσωματωμένο βίντεο.
Αν σκοπεύετε να χρησιμοποιήσετε ενσωματωμένα βίντεο, να γνωρίζουν ότι πολλοί άνθρωποι το βρίσκουν ενοχλητικό. Επίσης, σημειώστε ότι ορισμένοι χρήστες μπορεί να έχουν απενεργοποιήσει το ενσωματωμένο επιλογή βίντεο στο πρόγραμμα περιήγησής τους.
Καλύτερη συμβουλή μας είναι να περιλαμβάνει ενσωματωμένα βίντεο μόνο σε σελίδες στις οποίες ο χρήστης αναμένει να δει ένα βίντεο. Ένα παράδειγμα αυτού είναι μια σελίδα που ανοίγει αφού ο χρήστης έχει κάνει κλικ σε ένα σύνδεσμο για να δείτε το βίντεο.

   Ο ευκολότερος τρόπος για να παίξει βίντεο (ή άλλα δικά σας) σε HTML είναι να χρησιμοποιήσετε το YouTube.
Αναπαραγωγή βίντεο από το YouTube σε μορφή HTML
Αν θέλετε να παίξετε ένα βίντεο σε μια ιστοσελίδα, μπορείτε να ανεβάσετε το βίντεο στο YouTube και τοποθετήστε το κατάλληλο HTML κώδικα για να εμφανίσετε το βίντεο:
Παράδειγμα - YouTube iFrame

<iframe width="420" height="345"
src="http://www.youtube.com/embed/XGSy3_Czz8k">
</iframe>


Παράδειγμα - Ενσωματωμένα YouTube

<embed
width="420" height="345"
src="http://www.youtube.com/v/XGSy3_Czz8k"
type="application/x-shockwave-flash">
</embed>


ΠΕΡΙΣΣΟΤΕΡΑ

Τετάρτη, 20 Φεβρουαρίου 2013

ΔΙΑΦΗΜΙΣΗ Η ΜΙΑ ΔΙΠΛΑ ΣΤΗΝ ΑΛΛΗ

 Πώς βάζουμε δύο διαφημίσεις τη μία δίπλα στην άλλη.

Απλά βάζουμε τον κώδικα της διαφήμισης μέσα σε πίνακα table.Και εξηγούμαι:

<table><tbody>              
<tr>                                
<td>                               
κώδικας 1ης διαμήφισης
</td>                              
<td>                               
κώδικας 2ης διαμήφισης
</td>                              
</tr>                               
</tbody></table>
            

Προσοχή! Αν βάλετε τον κώδικα των διαφημίσεων μέσα gadget δεν χρειάζεται μετατροπές.Αν τον βάλετε μέσα στο τέμπλειτ,διαβάστε εδώ.


@Πνευματικά δικαιώματα ανάρτησης symvl.blogspot.com Επιτρέπεται η αντιγραφή με υποχρεωτικό ενεργό backlink πίσω στην πηγή με ένα κλικ.

ΠΕΡΙΣΣΟΤΕΡΑ

Τρίτη, 19 Φεβρουαρίου 2013

Μedia player ΣΤΟ Blog ΜΑΣ

   Ο κώδικας που θα χρησιμοποιήσουμε για να τοποθετήσουμε έναν media player στο Blogs μας δίνεται ποιο κάτω:

<embed type="application/x-mplayer2" pluginspage="http://www.microsoft.com/Windows/MediaPlayer/" name="mediaplayer1" ShowStatusBar="true" EnableContextMenu="false" autostart="false" width="320" height="240" loop="false" src="YOUR-VIDEO-FILE-LINK" />

Με κόκκινο το σημείο που έχω τοποθετήσει το βίντεο ή τον ήχο  μου.
Με μπλε ειναι οι διαστασεις του.
  Το τοποθετώ σαν gadget(javascript) με τον κλασικό τρόπο.
ΠΕΡΙΣΣΟΤΕΡΑ

Δευτέρα, 18 Φεβρουαρίου 2013

Ο ΚΩΔΙΚΑΣ ΕΝΟΣ HTML 5 player ΓΙΑ blogspot

Αν θέλουμε στο blog μας που παίζει μουσική να εγκαταστήσουμε έναν html 5 player ο κώδικας που θα χρησιμοποιήσουμε είναι ο εξής απλός:

 <audio controls autoplay="autoplay">
<source src="URL STRAEM;stream.mp3" type="audio/mp3">
Your browser does not support the audio element.
</audio>
Τον τοποθετούμε με τον γνωστό τρόπο σαν gadget  από το μενού Διάταξη του blogger.
Με κόκκινο το streem του σταθμού μας.
ΠΕΡΙΣΣΟΤΕΡΑ

ΔΙΚΤΥΟ ΜΕΤΑΞΥ ΔΥΟ ΥΠΟΛΟΓΙΣΤΩΝ W7

Στον πρώτο υπολογιστή

Βήμα 1ο
Κάνετε δεξί κλικ στο μικρό εικονίδιο δικτύου κάτω  δεξιά.
Κάντε κλικ στην επιλογή «Άνοιγμα Κέντρου δικτύου και κοινής χρήσης»

Βήμα 2ο
Κάντε κλικ στην επιλογή «Τοπική σύνδεση»

Βήμα 3ο
Κάντε κλικ στο κουμπί «Ιδιότητες»
Βήμα 4ο
Κάντε κλικ στη επιλογή «Πρωτόκολλο Internet  Έκδοση 4 (TCP/IPv4)» και μετά κλικ στο κουμπί «Ιδιότητες»
Βήμα 5ο
Βάζουμε τις ρυθμίσεις :
1 Επιλέγουμε «Χρήση της παρακάτω διεύθυνσης IP:» και βάζουμε τη ρύθμιση στην επιλογή «Διεύθυνση IP :» 192.168.0.1.
2 Στην επιλογή «Μάσκα υποδικτύου» βάζουμε τη ρύθμιση 255.255.255.0
3 Τα υπόλοιπα τα αφήνουμε όπως είναι κενά.
4 Πατάμε «ΟΚ»
Στο δεύτερο υπολογιστή

Βήμα 1ο
Επαναλαμβάνουμε τα βήματα 1 μέχρι 4 που κάναμε στο πρώτο Υπολογιστή.

Βήμα 2ο
Βάζουμε τις ρυθμίσεις :
1 Επιλέγουμε «Χρήση της παρακάτω διεύθυνσης IP:» και βάζουμε τη ρύθμιση στην επιλογή «Διεύθυνση IP :» 192.168.0.2.
2 Στην επιλογή «Μάσκα υποδικτύου» βάζουμε τη ρύθμιση 255.255.255.0
3 Στην επιλογή «Προεπιλεγμένη πύλη» βάζουμε τη ρύθμιση 192.168.0.1
4 Τα υπόλοιπα τα αφήνουμε όπως είναι κενά.
5 Πατάμε «ΟΚ»

κάνατε δίκτυο μεταξύ δυο υπολογιστών στα Windows 7.

                                                                                                                         insomnia.gr

ΠΕΡΙΣΣΟΤΕΡΑ

Κυριακή, 17 Φεβρουαρίου 2013

ΟΔΗΓΟΣ ΤΟΠΙΚΟΥ ΔΙΚΤΥΟΥ

        Ο οδηγός περιέχει τα παρακάτω:

1. Τι θα χρειαστούμε
2. Ρυθμίσεις στο “server” PC
3. Ρυθμίσεις στα client PC
4. File Sharing
5. Printer Sharing
6. Internet Connection Sharing


1.Τι θα χρειαστούμε
Για να δημιουργήσουμε ένα δίκτυο, θα χρειαστούμε μερικά πράγματα, τα οποία, ανάλογα με το πόσα PC έχουμε, ποικίλλουν.
• Αρχικά θέλουμε οπωσδήποτε κάρτα δικτύου. Στους σύγχρονους υπολογιστές βρίσκεται ενσωματωμένη πάνω στη μητρική με ταχύτητες 10/100/1000mbps.
Αν διαθέτουμε παλιούς υπολογιστές που δεν ενσωματώνουν κάρτες δικτύου, υπάρχουν στην αγορά έτοιμες λύσεις που θα καλύψουν μια θέση PCI στη μητρική μας.
• Πάμε στην καλωδίωση. Για την απευθείας σύνδεση 2 υπολογιστών θα χρειαστούμε ένα καλώδιο Cross-over Cat5 ενώ για παραπάνω από 2 υπολογιστές θα χρειαστούμε καλώδια Utp Cat 5e.
• Τέλος θα χρειαστούμε hub ή switch (ανάλογα με τις ανάγκες μας) για να βοηθήσει στη σωστή τοποθέτηση του δικτύου.
Έπειτα καθορίζουμε μερικά στοιχεία για το δίκτυό μας που είναι απαραίτητα.
1. Ποιος θα είναι ο server, δηλαδή ο υπολογιστής που θα παίζει το ρόλο του διαχειριστή και θα επιβλέπει τους υπόλοιπους. Είναι προτιμότερο αυτός ο υπολογιστής, αν δεν ανήκει στην κατηγορία των server PC, να έχει αρκετή μνήμη RAM και γρήγορη CPU, έτσι ώστε να χρησιμοποιείται ως επί των πλείστον για τη διευθέτηση και διαχείριση του δικτύου και όχι για άλλους σκοπούς (gaming κ.λπ.)
2. Έπειτα πρέπει να δώσουμε στους υπολογιστές ονόματα έτσι ώστε να τους ξεχωρίζουμε αμέσως, (π.χ. Server, pc1, download pc κ.λπ.).
3. Ακόμη, πρέπει να φροντίσουμε, τα όποια περιφερειακά χρησιμοποιούμε, να τα διατηρούμε σε καλή κατάσταση και να μην βάζουμε καλώδια χύμα στο χώρο μας.
4. Τέλος, θα πρέπει να ελέγξουμε αν όλες οι κάρτες δικτύου και τα καλώδια είναι σωστά συνδεδεμένα. Για τις μεν κάρτες θα βεβαιωθούμε ότι στη διαχείριση συσκευών δεν παρουσιάζεται ούτε ένα θαυμαστικό, πόσο μάλλον ερωτηματικό. Για τα δε καλώδια, μόλις τα συνδέουμε στις κάρτες, ελέγχουμε 2 πράγματα: πρώτον από πίσω να αναβοσβήνουν κάποια φωτάκια και δεύτερον στην taskbar να εμφανιστεί το εξής μήνυμα.

2.Ρυθμίσεις στο “server” PC
Πάμε στον υπολογιστή που έχουμε ορίσει ως server και συγκεκριμένα:
My computer->δεξί κλικ->Properties->καρτέλα Computer name, πατάμε Change, δίνουμε το όνομα που έχουμε ορίσει π.χ. server και ορίζουμε και το όνομα που θέλουμε στο workgroup π.χ. HOME.
Όπως φαίνεται και στην εικόνα:

Κάνουμε ένα restart στον υπολογιστή μας για να αλλάξουν οι ρυθμίσεις.
ΠΡΟΣΟΧΗ:
Το όνομα του Workgroup πρέπει να είναι κοινό σε όλα τα PC του δικτύου.
Το όνομα σε κάθε PC πρέπει να είναι διαφορετικό από τα υπόλοιπα.
Μετά το restart πάμε: Start -> Connect to -> Show all connections και κάνουμε δεξί κλικ στο Local Area Connection .
Έπειτα, στην καρτέλα General επιλέγουμε το Internet Protocol (TCP/IP) και στη συνέχεια Properties και εισάγουμε τις ακόλουθες ρυθμίσεις:
Το IP Αddress μπορεί να παίξει μεταξύ των αριθμών 192,168,0,1-192,168,0,255 και των αριθμών 10,10,10,0-10,10,10,255. Αφού πατήσουμε ΟΚ και κάνουμε restart, το server PC μας είναι έτοιμο.

3.Ρυθμίσεις στα client PC
Στα client PC η μόνη διαφορά που υπάρχει σε σχέση με τα παραπάνω βήματα είναι στο όνομα του PC και στην IP address.
Αν διαθέτουμε παραπάνω από ένα PC, τότε στην IP address 192,168,0,x  θα αλλάζει μόνο το x μεταξύ των αριθμών 1-255.
Με μια επανεκκίνηση είμαστε έτοιμοι.

4. File Sharing
Για να μοιράσουμε ένα φάκελο κάνουμε το εξής:
Βρίσκουμε το φάκελο που θέλουμε, έστω το φάκελο My Received Files στο My Documents, και πατάμε δεξί κλικ και έπειτα Sharing. Στη συνέχεια πάμε στην καρτέλα "Kοινή χρήση" και επιλέγουμε τα εξής
• Κοινή χρήση του φακέλου στο δίκτυο
• Κοινόχρηστο στοιχείο: δίνουμε το όνομα με το οποίο θέλουμε να εμφανίζεται ο φάκελος στο δίκτυο.
• Οι χρήστες δικτύου μπορούν να αλλάξουν αρχεία: επιτρέπεται έτσι η ανταλλαγή αρχείων από ένα υπολογιστή σε έναν άλλο.
Πατάμε ΟΚ και ήμαστε έτοιμοι.
Για να είναι σαφές ότι ο φάκελος έχει γίνει κοινόχρηστος και μπορούν να τον δουν οι υπόλοιποι υπολογιστές θα γίνει το εξής:
Από έτσι θα γίνει έτσι: 

5.Printer Sharing
Όσον αφορά τους εκτυπωτές, υπάρχουν οι δικτυακοί εκτυπωτές που συνδέονται κατευθείαν στο δίκτυο καθώς και εκτυπωτές που συνδέονται με USB/σειριακή θύρα σε κάποιον υπολογιστή και μέσω αυτού στο δίκτυο. Το μειονέκτημα των δεύτερων είναι ότι πρέπει να είναι και ο υπολογιστής που είναι συνδεδεμένοι, ανοικτός για να μπορέσει κανείς να εκτυπώσει έγγραφα. Εμείς θα ασχοληθούμε με τη δεύτερη περίπτωση, μιας και οι δικτυακοί υπολογιστές είναι πολύ ακριβότεροι από έναν οικιακό εκτυπωτή.
Για να διαμοιράσουμε έναν εκτυπωτή έτσι ώστε να τον χρησιμοποιούν όλα τα PC, ακολουθούμε τα εξής βήματα (τα ίδια ισχύουν όταν θέλουμε να μοιράσουμε ένα πολυμηχάνημα, scanner κ.λπ.):
Πάμε Start->Control Panel->Printers and Faxes, δεξί κλικ στον εκτυπωτή που θέλουμε να μοιράσουμε, επιλέγουμε Sharing.
Όπως φαίνεται και στην εικόνα, επιλέγουμε Share this printer και στο Share name βάζουμε το όνομα του εκτυπωτή μας, π.χ. HP DeskJet 930c, έτσι ώστε αν υπάρχουν περισσότεροι από έναν εκτυπωτές στο δίκτυό μας, να ξέρουμε σε ποιον να στείλουμε τα αρχεία μας για εκτύπωση.
Για να είναι εμφανές ότι ο εκτυπωτής έχει γίνει κοινόχρηστος, θα γίνει ως εξής:
Από έτσι θα γίνει έτσι

6. Internet Connection Sharing
Αρχικά να διευκρινίσω ότι για να υπάρχει η δυνατότητα να μπαίνουν πάνω από 1 PCστο διαδίκτυο ταυτόχρονα και να μη χρειάζεται να είναι ανοικτός κάποιος υπολογιστής, πρέπει να υπάρχει router και όχι modem.
Αρκετοί χρήστες διαθέτουν DSL αλλά υπάρχουν και αυτοί που έχουν σύνδεση dial up. Πάντως οι ρυθμίσεις είναι σχεδόν οι ίδιες.
Στο server PC πάμε:
Start->Connect to>Show all connections και βρίσκουμε το εικονίδιο της σύνδεσης Internet που έχουμε.
Στο παράδειγμά μας επιλέγουμε τη σύνδεση Dial-up Panafonet.
Δεξί κλικ->Properties και πάμε στην καρτέλα Advanced
Όπου επιλέγουμε:
• Να επιτρέπεται η σύνδεση άλλων χρηστών του δικτύου μέσω της σύνδεσης Internet αυτού του υπολογιστή.
• Δημιουργία μιας σύνδεσης μέσω τηλεφώνου κάθε φορά που ένας υπολογιστής του δικτύου μου επιχειρεί πρόσβαση στο internet.
• Να επιτρέπεται σε χρήστες του δικτύου να ελέγχουν ή να απενεργοποιούν την κοινή σύνδεση στο Internet.
Τέλος πατάμε οκ.
Έπειτα, σε κάθε υπολογιστή client, πάμε στο Internet Protocol TCP/IP properties για να ορίσουμε τη default Gateway και τον DNS server. Εδώ θα δώσουμε την IP address του υπολογιστή που μοιράζει την σύνδεση στο διαδίκτυο.
Στο παράδειγμά μας, ο server υπολογιστής που μοιράζει τη σύνδεσή μας, έχει IP address: 192,168,0,1.
Πατάμε ΟΚ.
Με αυτόν τον τρόπο δημιουργήσαμε το δίκτυό μας "χειροκίνητα". Ωστόσο, τα Windows έχουν ρυθμιστεί έτσι ώστε να κάνουν όλες αυτές τις ενέργειες αυτόματα, γι' αυτό και καλό είναι να απενεργοποιήσουμε αυτή τη ρύθμιση.
Πάμε στο:
Start->Control Panel->Internet Options καρτέλα Connections και απενεργοποιούμε την επιλογή Automatically detects settings μιας και έχουμε κάνει με το χέρι τις όποιες ρυθμίσεις.
ΠΕΡΙΣΣΟΤΕΡΑ

Πέμπτη, 14 Φεβρουαρίου 2013

ΕΓΚΑΤΑΣΤΑΣΗ ΤΟΠΙΚΟΥ SERVER

A
  Ο WAMP server μας δίνει την δυνατότητα να εγκαταστήσουμε στον υπολογιστή μας γρήγορα και εύκολα  Apache, Php  ,Mysql, PhpMyadmin, SQLBuddy  χωρίς να χρειάζονται παράμετροι και κάποια εργασία από εμάς. Αναζητώ και κατεβάζω από το διαδίκτυο( http://www.wampserver.com), το πακέτο WAMP server  για windows, ανάλογα  32 η 64 bit. Δημιουργεί εικονίδιο  κάτω δεξιά στα προγράμματα που τρέχουν, από όπου και τα ενεργοποιώ όλα.
   Πληκτρολογώντας το localhost (δηλ. ip : 127.0.0.1)  στο url του περιηγητή μου, μπαίνω στο μενού του server WAMP.
     Πηγαίνω στο σημείο του C που έχω εγκαταστήσει το φάκελο του WAMP >μετά WWW όπου δημιουργώ φάκελο που τοποθετώ τα αρχεία μου (ιστοσελίδα) .index.php.



B       Πώς εγκαθιστώ Apache και Mysql σε Windows εύκολα;

   Το XAMPP  είναι ένα πακέτο προγραμμάτων ελεύθερου λογισμικού, λογισμικού ανοικτού κώδικα και ανεξάρτητου πλατφόρμας το οποίο περιέχει το εξυπηρετητή ιστοσελίδων http Apache, την βάση ιστοσελίδων MySQL και ένα διερμηνέα για σενάρια γραμμένα σε γλώσσες προγραμματισμού PHP και Perl.
Το XAMPP είναι ακρωνύμιο και αναφέρεται στα παρακάτω αρχικά:

    X (αναφέρεται στο "cross-platform" που σημαίνει λογισμικό ανεξάρτητο πλατφόρμας)
    Apache HTTP εξυπηρετητής
    MySQL
    PHP
    Perl

Το XAMPP είναι ένα ελεύθερο λογισμικό το οποίο περιέχει ένα εξυπηρετητή ιστοσελίδων το οποίο μπορεί να εξυπηρετεί και δυναμικές ιστοσελίδες τεχνολογίας PHP/MySQL. Είναι ανεξάρτητο πλατφόρμας και τρέχει σε Microsoft Windows, Linux, Solaris, and Mac OS X και χρησιμοποιείται ως πλατφόρμα για την σχεδίαση και ανάπτυξη ιστοσελίδων με την τεχνολογίες όπως PHP, JSP και Servl


     Σ’ αυτό video θα δούμε πως μπορούμε να εγκαταστήσουμε apache και MySQL σε Windows εύκολα. Μην ξεχάσετε να πατήσετε το κουμπί HD παρακάτω, ώστε να δείτε όλες τις λεπτομέρειες. Η απάντηση στο πως εγκαθιστώ apache και MySQL σε Windows εύκολα είναι μία λέξη Xampp
     Αν πάμε στο Google και ψάξουμε για Xampp, θα δούμε το πρώτο link και είναι αυτή
 η σελίδα.http://www.apachefriends.org/en/index.html  Αν πάμε εδώ Xampp for Windows», θα δούμε την έκδοση για τα Windows.
 http://www.youtube.com/watch?feature=player_embedded&v=5Wmzpxlh5_Q
  Τώρα εδώ υπάρχει ένα τρικ. Αν θέλουμε να παίξουμε με Joomla και άλλα τέτοια προγράμματα, χρειαζόμαστε php έκδοση 5.2. Όπως βλέπουμε εδώ η τελευταία έκδοση του Xampp έχει php 5.3, άρα δεν μας κάνει. Γι’ αυτό το λόγο θα πάμε εδώ πέρα download older versions. Κάνουμε κλικ εδώ λοιπόν και πάμε Xampp for Windows, η πιο σύγχρονη έκδοση που μας κάνει είναι 1.7.1 και από ’δω κατεβάζουμε το πιο δημοφιλές αρχείο το 1.7.1. Με το που ολοκληρώνεται το κατέβασμα, μπορούμε να κάνουμε ένα διπλό κλικ και να αρχίσουμε την εγκατάσταση. Πατάμε yes σε τυχόν μηνύματα, πατάμε o.k. και ξεκινάμε την εγκατάσταση. Ο default κατάλογος C/Xampp είναι μια χαρά. Next, εμένα προσωπικά δεν μ’ αρέσει να βάζω πράγματα στο desktop και apache και MySQL on services είναι μια χαρά. Και αρχίζει η εγκατάσταση. Με το που ολοκληρώνεται η εγκατάσταση, εκτελείται το πρόγραμμα το οποίο κάνει set up. Τώρα είμαστε έτοιμοι, μπορούμε να πατήσουμε finish. Βλέπουμε γίνεται έλεγχος με τις πόρτες και προσπαθεί να ανοίξει το apache. Μπορούμε να του επιτρέψουμε να έχει πρόσβαση. Πατάμε o.k. και ας πατήσουμε έναρξη του Xampp Control Panel. Βλέπουμε εδώ ότι μας δείχνει δυο services apache και MySQL ότι τρέχουνε. Για να δοκιμάσουμε ότι όντως τρέχουνε βάζουμε εδώ πάνω http://localhost. Αυτή εδώ είναι η default σελίδα του Xampp. Βλέπουμε ότι όλα τρέχουν τέλεια και πάμε php info. Θα δούμε ότι έχουμε php έκδοση 5.2.9. Αν θέλουμε να ελέγξουμε ότι πράγματι μπορούμε να έχουμε πρόσβαση στη MySQL μπορούμε να κάνουμε κλικ στο localhost/phpmyadmin. Βλέπουμε εδώ όλες τις βάσεις δεδομένων. Αν θέλουμε να ελέγξουμε ότι προγραμματιστικά μέσα στους php μπορούμε με δικό μας κώδικα να έχουμε πρόσβαση στην MySQL, πάμε στον κατάλογο Xampp και μετά htdocs και κάνουμε ένα νέο αρχείο test php. Το αρχείο αυτό το ανοίγουμε να είναι editor. Αν πάμε στο internet τώρα και ψάξουμε για php script for testing a MySQL database connection, θα δούμε εδώ ένα ωραίο παράδειγμα. Κάνουμε copy-paste μέσα στο αρχείο μας και είμαστε έτοιμοι να πάμε στο localhost.test.php. εδώ συμπληρώνουμε localhost, μετά root, αφήνουμε το password κενό και το database κενό, κάνουμε test connection και βλέπουμε ότι η σύνδεση δούλεψε μια χαρά. Τώρα είμαστε έτοιμοι να τρέξουμε τα δικά μας προγράμματα. Σ’ αυτήν την παρουσίαση είδαμε πως εγκαθιστούμε apache και MySQL σε Windows εύκολα. Σε επόμενο video θα δούμε και επόμενα βήματα, δηλαδή πως μπορούμε να δημιουργήσουμε μια απλή εφαρμογή. Ελπίζω να σας φάνηκε χρήσιμο. Αν σας άρεσε μην ξεχάσετε να αφήσετε σχόλια παρακάτω. Ευχαριστώ πολύ.
                                                                                     
                                                                                        Δημήτρης Κουζής-Λουκάς για το saites.gr
ΠΕΡΙΣΣΟΤΕΡΑ

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

          
       Δημιουργώ στο dyndns λογαριασμό.

Πάμε https://account.dyn.com/ και στο πεδίο  Create new account  δημιουργώ λογαριασμό συμπληρώνοντας όλα τα στοιχεία.
  Μου αποστέλλεται email επαλήθευσης που το ανοίγω και επιβεβαιώνω..Μπαίνω στον λογαριασμό μου:  my account>my services>host services>add hostname> δίνω ένα όνομα στην ιστοσελίδα μου  του τύπου   ονομα.dyndns.com
Στην συνέχεια κλικάρω την  IP Address>Add To Cart>Proseed to checkout>Activate Services  όπου βλέπω ότι έχει ενεργοποιηθεί.
   Και πάμε τώρα να κατεβάσουμε το πρόγραμμα Dyn Update Clients  :
Support>Dyn Update Clients>Download Now Dyn Updater (v4.1.10) for Windows 2000 or later   το κάνουμε εγκατάσταση όπου μας ζητάει το usser, pass του λογαριασμού μου στο dyndns.Το τσεκάρομαι και πατάμε start updater.
  Έτσι έχουμε δημιουργήσει το url της ιστοσελίδας μας στο υπολογιστή μας-server.Τέλος την ανοίγουμε με το αγαπημένο περιηγητή για επαλήθευση αφού πρώτα ενεργοποιήσουμε τον server(XAMPP, WAMP) που έχουμε εγκαταστήσει στον υπολογιστή μας.
  Άλλοι σερβερ Δυναμικοί  είναι :http://www.dnsdynamic.org/  ο  www.no-ip.com  
   Μια λίστα με τέτοιους είναι εδώ.  http://dnslookup.me/dynamic-dns/
ΠΕΡΙΣΣΟΤΕΡΑ

Τετάρτη, 13 Φεβρουαρίου 2013

ΑΝΟΙΓΜΑ ΠΟΡΤΑΣ 80 ΣΕ ROUTER Thomson TG585 v8

   Πληκτρολογώ την διεύθυνση ROUTER μου  thomson  192.168.150.254 στο url του περιηγητη μου.
. Για να την βρω χρησιμοποιώ η πίνακα εντολών (dos) cmd (ipconfig) η κατεβάζω το Colasoft MAC Scanner από google.
     Για οποιαδήποτε μάρκα ROUTER πάω στον κατάλογο  http://portforward.com, όπου βρίσκω το ROYTER μου, και στην συνέχεια  στον τύπο της πόρτας που θέλω  να ανοίξω όπου υπάρχουν οι ανάλογες  οδηγίες.
      Πάμε : http://192.168.1.254/ > Toolbox >Game & Application Sharing>Create a new game or application>τσεκάρω Manual Entry of Port Maps  και ονομάζω την πόρτα porta80>συμπληρώνω τα πεδία με την porta80>Game & Application Sharing>Assign a game or application to a local network device>βρίσκω την porta80 &όνομα pc>κλικαρω για να μείνει ανοιχτή η πόρτα.
ΠΕΡΙΣΣΟΤΕΡΑ

Τρίτη, 12 Φεβρουαρίου 2013

ΤΙ ΕΙΝΑΙ Ο HTML ΚΩΔΙΚΑΣ

   Τα αρχικά HTML προέρχονται από τις λέξεις HyperText Markup Language. Η HTML δεν είναι μια γλώσσα προγραμματισμού. Είναι μια περιγραφική γλώσσα, δηλαδή ένας ειδικός
 τρόπος γραφής κειμένου και κλήσης
άλλων αρχείων ή εφαρμογών βασισμένος σε οδηγίες (tags). Ο Web client αναγνωρίζει αυτόν τον ειδικό τρόπο γραφής και εκτελεί τις εντολές που περιέχονται σε αυτόν.Αυτή η υπέρ-γλώσσα δεν αποτελείτε μονό από γράμματα και αριθμούς αλλά από όλα τα σύμβολα που υπάρχουν στο πληκτρολόγιο μας(</.΄¨"{ }[ %!_ κλπ και το καθένα έχει την δικιά του ερμηνεία.Πρέπει να τονίσουμε ότι διάκριση μεταξύ Πεζών και Κεφαλαίων δεν υπάρχει, ο Web client  τα βλέπει ίδια.
Web Server ονομάζουμε τον υπολογιστή που, λογισμικό του τρέχει σε ένα κόμβο Internet και επιτρέπει σε άλλους υπολογιστές να αποκτούν αντίγραφα των Web σελίδων που είναι αποθηκευμένες σε αυτόν(σερβίρει λογισμικό να το πούμε λαϊκά). 
Web Client ονομάζουμε το λογισμικό που τρέχει ένας Η/Υ και του επιτρέπει να "διαβάζει" Web σελίδες (από το σκληρό του δίσκο ή από το Internet αν είναι συνδεδεμένος με αυτό).
   
Τι είναι μια Οδηγία (Tag)
Tag ονομάζουμε μία οδηγία γραμμένη σε HTML, την οποία πρέπει να αναγνωρίσει και ερμηνεύσει ο browser. Τα tags βρίσκονται πάντοτε μεταξύ των συμβόλων < και >.

      Πώς κατασκευάζω μια απλή Web σελίδα:

Μία Web Σελίδα είναι ένα text αρχείο. Για τον λόγο αυτό μπορούμε να χρησιμοποιήσουμε οποιοδήποτε πρόγραμμα μας δίνει την δυνατότητα να παράγουμε text αρχεία. Το notepad, Word, των Windows. Αν θέλετε να χρησιμοποιήσετε το Word for Windows μην ξεχάσετε πως το αρχείο πρέπει να σωθεί σε μορφή txt και όχι doc.Εμείς θα χρησιμοποιήσουμε το Notepad++ για το παράδειγμα μας.
  Ανοίγουμαι το Notepad++ και γράφουμε κατά γράμμα.
     
 <html>

<head>
<title>ΟΙ ΣΕΛΙΔΕΣ ΜΟΥ</title>
</head>

<body>
<body background="">
<body bgcolor="#6B77FF">
<body text="#2833B6">
<body background="">

<h2 align=center>ΕΛΑΙΟΥ ΠΑΡΑΓΩΓΟΣ</h2>
<CENTER>
<a href="">ΑΡΧΙΚΗ</a>
<a href="">ΠΡΟΦΙΛ</a>
<a href="">ΕΠΙΚΟΙΝΩΝΙΑ</a>
<a href="">ΔΟΚΙΜΗ</a>
</CENTER>

</body>

</html>



     Με πράσινη αγκύλη, βλέπεται φώτο,δηλώνουμε τον κώδικα  <html>......</html>
     Με την μαύρη αγκύλη δηλώνουμε, τον τίτλο οδηγία      <head>......</head>
     Με την κόκκινη,  δηλώνουμε το ορατό κείμενο οδηγία  <body>......</body>
Με άλλα λόγια  μια web σελίδα αποτελείται από τρία μερη
   α) το μέρος που δηλώνουμε τον κώδικα
   β)το μέρος που δηλώνουμε τον τίτλο
   γ)το ορατό μέρος της σελίδας.
και πάμε να δούμε πως βλέπει ο explorer αυτό το αρχείο,αφού το αποθηκεύσουμε σε .html μορφή.


   Επίσης με αυτές τις δυο εντολές ορίσαμε το χρώμα και το μέγεθος της γραμματοσειράς              <body bgcolor="#6B77FF">,   <body text="#2833B6">

Κατά αυτόν τον απλό τρόπο φτιάξαμε την πρώτη  HTML σελίδα μας με τον τίτλο ΟΙ ΣΕΛΙΔΕΣ ΜΟΥ.
ΠΕΡΙΣΣΟΤΕΡΑ

ΣΗΜΑΣΙΑ ΤΟΥ DNS

Το Domain Name System ή DNS

(Σύστημα Ονομάτων Τομέων ή Χώρων ή Περιοχών) είναι ένα ιεραρχικό σύστημα ονοματοδοσίας για δίκτυα υπολογιστών, που χρησιμοποιούν το πρωτόκολλο IP. Το σύστημα DNS μπορεί και αντιστοιχίζει ονόματα με διευθύνσεις IP ή άλλα ονόματα στο Διαδίκτυο ή κάποιο άλλο δίκτυο.

Το σύστημα DNS προέκυψε επειδή στους άνθρωπους ονόματα σημαίνουν περισσότερα από αριθμητικές διευθύνσεις αλλά στην συνέχεια το συστημα DNS απέκτησε και άλλες χρήσεις εξίσου σημαντικές.
Το DNS επιτρέπει την ανεύρεση ενός εξυπηρετητή (server) ή μιας υπηρεσίας σε έναν εξυπηρετητή χρησιμοποιώντας ένα όνομα. Ένας εξυπηρετητής μπορεί να προσφέρει ταυτόχρονα περισσότερες από μια υπηρεσίες, σύμφωνα με διάφορα πρωτόκολλα, όπως το HTTP, το FTP, το POP, το IMAP και το SMTP, δίνοντας τη δυνατότητα στο χρήστη να συνδεθεί σε μια ιστοσελίδα (HTTP), σε μια αποθήκη αρχείων (FTP), ή να λάβει email (POP ή IMAP). Για ένα χρήστη είναι ευκολότερο να θυμάται το όνομα της ιστοσελίδας www.google.gr [σ 10] παρά το χ.ψ.ω.ζ:80 (ο συνδυασμός διεύθυνσης IP και θύρας TCP στην οποία βρίσκεται ο εξυπηρετητής HTTP του www.google.gr).
Επίσης το DNS χρησιμοποιείται για να αντιστοιχίσει διευθύνσεις IP με ονόματα. Έτσι ο διαχειριστής ενός δικτύου μπορεί να χρησιμοποιήσει ονόματα για να επικοινωνήσει ή να απλώς να θυμάται ονόματα μηχανημάτων, τοποθεσίες, ονόματα χώρου, και ότι άλλο σκεφτεί.[σ 11] Τα ονόματα των διευθύνσεων IP λειτουργούν και κατά κάποιον τρόπο σαν εγγυήσεις μιας και μόνο οι διαχειριστές των δικτύων - κάτοχοι των διευθύνσεων μπορούν να τα αλλάξουν. Στην λειτουργία του ηλεκτρονικού ταχυδρομείου το όνομα της διεύθυνσης IP του εξυπηρετητή ηλεκτρονικού ταχυδρομείου (Mail Server) θεωρείται απόδειξη του ότι είναι αυτός που λέει.
Το σύστημα DNS δίνει, τέλος, τη δυνατότητα αντιστοίχισης μεταξύ ονομάτων, καθώς και τη δυνατότητα αντιστοίχισης ενός ονόματος σε πολλαπλές διευθύνσεις IP (round robin DNS και IP sorting), πράγμα που βοηθά στη διαμοίραση του φόρτου μιας δικτυακής υπηρεσίας σε περισσότερους του ενός εξυπηρετητές ή την κατεύθυνση των πελατών δικτυακών υπηρεσιών σε γεωγραφικά κοντινότερους εξυπηρετητές.
Στο σύστημα DNS είναι δυνατή η αντιστοίχιση άπειρων ονομάτων σε μία διεύθυνση IP ή μια ομάδα διευθύνσεων IP. Αυτό διευκολύνει λογιστικά την διαχείριση εξυπηρετητών δικτυακών υπηρεσιών και βοηθά στην οικονομία διευθύνσεων IP.

                                                                            Από τη Βικιπαίδεια
ΠΕΡΙΣΣΟΤΕΡΑ

ΚΑΘΕΤΟ ΜΕΝΟΥ ΣΤΟ ΣΑΙΤ ΜΟΥ

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



  Σαν συνέχεια του προηγουμένου άρθρου, μπορούμε
πάρα πολύ εύκολα ακολουθώντας την κλασική διαδρομή:
Σύνδεση>Blogger> πρότυπο> Επεξεργασία html> Επέκταση προτύπων γραφικών στοιχείων και ψάχνουμε να βρούμε τον κώδικα</header>και κάτω από αυτόν προσθέτουμε τον κώδικα του μενού.

  Έναν πρόχειρο κωδικα κάθετου μενού που έχω φτιάξει είναι ο εξής:

<ul>
<li><a href='#'>ΑΡΧΙΚΗ</a></li>
<li><a href='#'>ΠΡΟΦΙΛ</a></li>
<li><a href='#'>ΕΠΙΚΟΙΝΩΝΙΑ</a></li>
</ul>


το οποίο εμφανίζεται στην αρχή της σελίδας..


Τέλος κάνουμε προεπισκοπιση και αποθήκευση
ΠΕΡΙΣΣΟΤΕΡΑ

Δευτέρα, 11 Φεβρουαρίου 2013

ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ ΣΤΟ ΣΑΙΤ ΜΟΥ

ΠΩΣ ΜΠΟΡΩ ΝΑ ΠΡΟΣΘΕΣΩ ΟΡΙΖΟΝΤΙΟ ΜΕΝΟΥ ΣΤΟ ΣΑΙΝΤ ΜΟΥ

  Πάρα πολύ εύκολα ακολουθώντας την κλασική διαδρομή:
Σύνδεση>Blogger> πρότυπο> Επεξεργασία html> Επέκταση προτύπων γραφικών στοιχείων και ψάχνουμε να βρούμε τον κώδικα</header>και κάτω από αυτόν προσθέτουμε τον κώδικα του μενού.

  Έναν πρόχειρο που έχω φτιάξει να εμφανίζεται στο κέντρο είναι ο εξής:

  <CENTER>
<a href="">ΑΡΧΙΚΗ</a>
<a href="">ΠΡΟΦΙΛ</a>
<a href="">ΕΠΙΚΟΙΝΩΝΙΑ</a>
<a href="">ΔΟΚΙΜΗ</a>
</CENTER>

Κάνουμε προεπισκόπιση και τέλος αποθήκευση.
ΠΕΡΙΣΣΟΤΕΡΑ

Κυριακή, 10 Φεβρουαρίου 2013

ΠΛΩΤΟΣ ΔΙΑΦΑΝΟΣ ΣΛΑΙΝΤΕΡ

     

   Το κώδικα ενός πλωτού Σλάιντερ που κινείται καθώς κάνουμε περιήγηση στο site μας βλέπουμε ποιο κάτω, μπορούμε να τον επικολλήσουμε σαν gadget με τον γνωστό τρόπο. Είναι ένα πολυ έξυπνο gadget για το site μας.

 ΣΧΕΔΙΑΣΗ-ΔΙΑΤΑΞΗ-ΠΡΟΣΘΗΚΗ Gadget-HTML/JavaScript-ΕΠΙΚΟΛΛΗΣΗ -ΑΠΟΘΗΚΕΥΣΗ


<!-- Edit the HTML: Set first image path and size //-->
<div id="FloatSlideShow" style="position:absolute;z-index:1000000">
<a href="URL ΠΑΡΑΠΟΜΠΗΣ" target=_new>
<img border=0 src="url εικονας" name='SlideShow' width=200 height=200></a>
</div>
<!-- End of editable HTML //-->

<script>

/* Floating Slide Show Script C.2004 by CodeLifter.com */

// You *must* add onload="runSlideShow()" to the <body> tag
// of the page.

// In the section marked Edit the HTML, above, remember to
// set the path and size for the first image.

// =======================================
// Set the following variables
// =======================================

// Set slideShowSpeed (milliseconds):
var slideShowSpeed = 3000

// Duration of crossfade (seconds) for IE:
var crossFadeDuration = 3

// Set the positioning variables, below:
// Negative numbers are relative to right (whereX) or bottom (whereY)
// Positive numbers are relative to left (whereX) or (whereY) top
// Experiment with values to get positioning exact, and allow
// for the dimensions of the image in the positioning

var whereX = 140;
var whereY = -233;

// Specify the image files:
var Pic = new Array() // don't touch this!
// to add more images, just continue
// the pattern, adding to the array below

Pic[0] = 'float1_trans.gif'
Pic[1] = 'float2_trans.gif'
Pic[2] = 'float3_trans.gif'
Pic[3] = 'float4_trans.gif'
Pic[4] = 'float5_trans.gif'

// =======================================
// Do not edit *anything* below this line!
// =======================================

var nn=(navigator.appName.indexOf("Netscape")!=-1);
var t;var j=0;var p=Pic.length;var preLoad=new Array();
for (i=0;i<p;i++){preLoad[i]=new Image();preLoad[i].src = Pic[i];}
function runSlideShow(){
if (document.all){
document.images.SlideShow.style.filter="blendTrans(duration=2)";
document.images.SlideShow.style.filter="blendTrans(duration=crossFadeDuration)";
document.images.SlideShow.filters.blendTrans.Apply();}
if (document.all || document.getElementById){document.images.SlideShow.src = preLoad[j].src;}else{
document.FloatSlideShow.document.images["SlideShow"].src = preLoad[j].src;}
if (document.all){document.images.SlideShow.filters.blendTrans.Play();}
j=j+1;if (j>(p-1))j=0;t=setTimeout('runSlideShow()', slideShowSpeed);}
var dD=document,dH=dD.html,dB=dD.body,px=dD.layers?'':'px';
function floatSS(iX,iY,id){
var L=dD.getElementById?dD.getElementById(id):dD.all?dD.all[id]:dD.layers[id];       
this[id+'O']=L;if(dD.layers)L.style=L;L.nX=L.iX=iX;L.nY=L.iY=iY;
L.P=function(x,y){this.style.left=x+px;this.style.top=y+px;};L.Fss=function(){var pX, pY;   
pX=(this.iX >=0)?0:nn?innerWidth:nn&&dH.clientWidth?dH.clientWidth:dB.clientWidth;   
pY=nn?pageYOffset:nn&&dH.scrollTop?dH.scrollTop:dB.scrollTop;   
if(this.iY<0)pY+=nn?innerHeight:nn&&dH.clientHeight?dH.clientHeight:dB.clientHeight;   
this.nX+=.1*(pX+this.iX-this.nX);this.nY+=.1*(pY+this.iY-this.nY);this.P(this.nX,this.nY);
setTimeout(this.id+'O.Fss()',33);};return L;}
floatSS(whereX,whereY,'FloatSlideShow').Fss();
</script>

<!-- END FLOATING SLIDE SHOW CODE //-->


          Με πράσινο το url που θα παραπέμπει
          Με κόκκινο το url που έχουμε τοποθετήσει την εικόνα μας.Καλο θα ηταν η εικονα μας να ειναι αρχειο  τυπου .png ,για να ειναι πολυ ελαφρια.
          Με μπλε οι διαστάσεις της εικόνας.
ΠΕΡΙΣΣΟΤΕΡΑ

ΦΩΡΤΟΣΗ ΤΗΣ ΣΕΛΙΔΑΣ ΜΑΣ ΜΕ ΕΝΔΕΙΞΗ ΤΟΥ ΧΡΟΝΟΥ


  Με τον ποιο κάτω κώδικα ρυθμίζουμε τον χρόνο που θέλουμε να φορτώνει το blog μας ιδίως όταν είναι λίγο βαρύ.Τοποθετούμε τον κωδικό σε δυο βήματα:
 
       Στο πρώτο στάδιο μέσα στο <HEAD> τον  παρακάτω κώδικα:



<HEAD>
<script type="text/javascript">
<!-- Begin
/* This script and many more are available free online at
The JavaScript Source!! Created by: Abraham Joffe ::  */

var startTime=new Date();

function currentTime(){
  var a=Math.floor((new Date()-startTime)/100)/10;
  if (a%1==0) a+=".0";
  document.getElementById("endTime").innerHTML=a;
}

window.onload=function(){
  clearTimeout(loopTime);
}

// End -->
</script>
</HEAD>


         Σε δεύτερο στάδιο μέσα στο <BODY> το παρακάτω κώδικα:

<BODY>

<script type="text/javascript">
<!-- Begin
  document.write('This page took <span id="endTime">0.0</span> seconds to load.');
  var loopTime=setInterval("currentTime()",100);
// End -->
</script>

<!-- Script Size:  1.14 KB -->



      Με κόκκινο: ρυθμίζουμε τον χρόνο
ΠΕΡΙΣΣΟΤΕΡΑ

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



           Τον κώδικα ενός παράθυρου που καταδύεται και που περιέχει το μήνυμα του κειμένου μας θα δείτε ποιο κάτω που το εγκαθιστώ  σε δυο στάδια.

     1. Στο πρώτο στάδιο επικολλώ τον παρακάτω κώδικα μέσα στο <HEAD> του HTML  κώδικα  του blog μου σαν gadget:

      Πάμε λοιπόν  Σχεδίαση> διάταξη>προσθήκη Gadget>HTML/JavaScript    και  επικολλώ τον κώδικα παρακάτω:

<HEAD>



<!-- This script and many more are available free online at -->

<!-- The JavaScript Source!! http://www.javascriptsource.com -->

<!-- Original:  DynamicDrive -->

<!-- Web Site:  http://www.dynamicdrive.com -->


    

<style type="text/css">

#dropinboxv2cover{
width: 320px; /*change width to desired */
height: 220px;  /*change height to desired. REMOVE if you wish box to be content's natural height */
position:absolute; /*Don't change below 4 rules*/
z-index: 100;
overflow:hidden;
visibility: hidden;
}

#dropinboxv2{
width: 300px; /*change width to above width-20. */
height: 200px; /*change height to above height-20. REMOVE if you wish box to be content's natural height*/
border: 2px solid black; /*Customize box appearance*/
background-color: lightyellow;
padding: 4px;
position:absolute; /*Don't change below 3 rules */

left: 0;
top: 0;
}

</style>

<script type="text/javascript">



/***********************************************

* Amazon style Drop-in content box- © Dynamic Drive DHTML code library (www.dynamicdrive.com)

* Visit DynamicDrive.com for hundreds of DHTML scripts

* This notice must stay intact for legal use

* Go to http://www.dynamicdrive.com/ for full source code

***********************************************/

var dropboxleft=200 //set left position of box (in px)
var dropboxtop=100 //set top position of box (in px)
var dropspeed=15 //set speed of drop animation (larger=faster)
//Specify display mode. 3 possible values are:
//1) "always"- This makes the fade-in box load each time the page is displayed
//2) "oncepersession"- This uses cookies to display the fade-in box only once per browser session
//3) integer (ie: 5)- Finally, you can specify an integer to display the box randomly via a frequency of 1/integer...
// For example, 2 would display the box about (1/2) 50% of the time the page loads.
var displaymode="always"
///Don't edit beyond here///////////
if (parseInt(displaymode)!=NaN)
var random_num=Math.floor(Math.random()*displaymode)
var ie=document.all
var dom=document.getElementById
function initboxv2(){
if (!dom&&!ie)
return
crossboxcover=(dom)?document.getElementById("dropinboxv2cover") : document.all.dropinboxv2cover
crossbox=(dom)?document.getElementById("dropinboxv2"): document.all.dropinboxv2
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
crossbox.height=crossbox.offsetHeight
crossboxcover.style.height=parseInt(crossbox.height)+"px"
crossbox.style.top=crossbox.height*(-1)+"px"
crossboxcover.style.left=dropboxleft+"px"
crossboxcover.style.top=dropboxtop+"px"
crossboxcover.style.visibility=(dom||ie)? "visible" : "show"
dropstart=setInterval("dropinv2()",50)
}
function dropinv2(){
scroll_top=(ie)? truebody().scrollTop : window.pageYOffset
if (parseInt(crossbox.style.top)<0){
crossboxcover.style.top=scroll_top+dropboxtop+"px"
crossbox.style.top=parseInt(crossbox.style.top)+dropspeed+"px"
}
else{
clearInterval(dropstart)
crossbox.style.top=0
}
}
function dismissboxv2(){
if (window.dropstart) clearInterval(dropstart)
crossboxcover.style.visibility="hidden"
}
function truebody(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function get_cookie(Name) {
var search = Name + "="
var returnvalue = ""
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(";", offset)
if (end == -1)
end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}

if (displaymode=="oncepersession" && get_cookie("droppedinv2")=="" || displaymode=="always" || parseInt(displaymode)!=NaN && random_num==0){

if (window.addEventListener)

window.addEventListener("load", initboxv2, false)

else if (window.attachEvent)

window.attachEvent("onload", initboxv2)

else if (document.getElementById || document.all)

window.onload=initboxv2

if (displaymode=="oncepersession")

document.cookie="droppedinv2=yes"

}

</script>

</HEAD>



 2    Στο δευτερο βημα μου βρίσκω το  </BODY> με την βοηθια του ctrl+f,  και πριν  από αυτό επικολλώ τον ποιο κάτω κώδικα.



<!-- This script and many more are available free online at -->


<!-- Original:  DynamicDrive -->



<div id="dropinboxv2cover">
<div id="dropinboxv2">


Εδω μπορουμε να γραψουμε κειμενο !!!!!!!

Thanks DynamicDrive.


<br>
<p align="right"><a href="#" onClick="dismissboxv2();return false">Close It</a></p>
</div>
</div>


<!-- Script Size:  5.04 KB -->



Με κόκκινο:  εδώ γράφουμε  το κείμενό μας
Με μπλέ    :  ρυθμίζω το μέγεθος του παραθύρου  καθώς και την ταχύτητα.

 Να συμπληρώσουμε δω ότι μέσα στο χώρο με το κόκκινο, μπορούμε να τοποθετήσουμε όποια εικόνα θέλουμε εμείς, η οποία να ανοίγει και σε νέο παράθυρο, χρησιμοποιώντας τον ποιο κάτω κώδικα.
   
      <a target='_blank' href="URL ΠΑΡΑΠΟΜΠΗΣ"><img src="URL ΕΙΚΟΝΑΣ" height='110' width='130'/></a>
                        
                                   τέλος.


ΠΕΡΙΣΣΟΤΕΡΑ

ΚΕΙΜΕΝΟ ΠΟΥ ΔΗΜΙΟΥΡΓΕΙΤΑΙ ΜΕ ΑΛΦΑΒΗΤΙΚΗ ΣΕΙΡΑ

   Ένα πολύ όμορφο τρικ κειμένου που δημιουργείτε τρέχοντας το αγγλικό αλφάβητο θα σας δώσω ποιο κάτω. Ο κώδικας τρέχει μόνο την αγγλική γλώσσα, ενώ κάλλιστα μπορούμε να δημιουργήσουμε και το ελληνικό αλφάβητο από μόνοι μας. Είναι ένα τρικ κειμένου που το βλέπουμε στις αναχωρήσεις των αεροπλάνων στα αεροδρόμια.
   Σαν gadget μπορούμε να τον τοποθετήσουμε ακολουθώντας την κλασική διαδρομή:

ΣΧΕΔΙΑΣΗ-ΔΙΑΤΑΞΗ-ΠΡΟΣΘΗΚΗ Gadget-HTML/JavaScript-ΕΠΙΚΟΛΛΗΣΗ -ΑΠΟΘΗΚΕΥΣΗ

 <!-- ONE STEP TO INSTALL TRAIN STATION TEXT:


  1.  Copy the coding into the BODY of your HTML document  -->


<!-- STEP ONE: Paste this code into the BODY of your HTML document  -->


<BODY>


<script>

var text="This Text Here Scroll Thrpugh The ALPHABET!!! Numbers 0 1 2 3 4 5 6 7 8 and 9, comma, full stop. JavaScriptSource, your place for free scripts.";



document.write("<big><tt id=dis nowrap>Display Area</tt></big>");

var symtype=new Array(" ","A","a","B","b","C","c","D","d","E","e","F","f","G","g","H","h","I","i","J","j","K","k","L","l","M","m","N","n","O","o","P","p","Q","q","R","r","S","s","T","t","U","u","V","v","W","w","X","x","Y","y","Z","z","0","1","2","3","4","5","6","7","8","9",".",",","&","!","?","-","_");

var symarray=new Array();

for (var i=0; i<text.length; i++){

symarray[i]=" ";}

function scroll(){

for (var i=0; i<text.length; i++){

if (symarray[i]!=text.substring(i,i+1)) {

for (var x=0; x<70; x++) if (symarray[i]==symtype[x]) {symarray[i]=symtype[x+1]; break}}

}var outsym="";

for (var i=0; i<text.length; i++) outsym+=symarray[i];

dis.innerHTML=outsym;

setTimeout('scroll()',100);

}scroll();

</script>

<!-- Script Size:  1.45 KB -->


  Με κίτρινο   :    γράφουμε το κείμενο μας
  Με κόκκινο :   μπορούμε να δημιουργήσουμε  έναν κλώνο με το Ελληνικό αλφάβητο.
ΠΕΡΙΣΣΟΤΕΡΑ

Σάββατο, 9 Φεβρουαρίου 2013

ΤΑ ΚΟΥΜΠΙΑ: ΑΡΧΙΚΗΣ ΚΑΙ ΣΤΗΝ ΑΡΧΗ

  Για να μην χάνεται κάποιος στο blog μας, καλό θα ήταν να χρησιμοποιήσουμε τα κουμπιά που μας πάνε στην ΑΡΧΙΚΗ σελίδα του, καθώς και στην ΑΡΧΗ των αναρτήσεων μας.Με μια αναζήτηση στο διαδίκτυο μπορούμε να βρούμε πάρα πολλά (icons png download).Αυτά τα κουμπιά υπάρχουν σχεδόν στα περισσότερα blogs, σε διάφορες μορφές.Πώς το κάνουμε θα δούμε ακριβώς ποιο κάτω.

   Συνδεόμαστε στον πίνακα ελέγχου του bloger μας και πάμε:

Σχεδίαση>Πρότυπο>Επεξεργασία HTML>τσεκάρω την Επέκταση προτύπων γραφικών στοιχείων>και  βρίσκω με την βοήθεια του ctrl+f τον ποιο κάτω κώδικα:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

  
και από πάνω επικολλώ τον παρακάτω κώδικα:

<!-- PAGE NAVIGATION STOP-->
<a href='#' style='position: fixed; bottom:70px; left:10px;' title='Στην αρχή'>
<img height='50' src='http://2.bp.blogspot.com/-lFcOGB9BW84/T559mAu9qtI/AAAAAAAAFrw/yJqyCUL8wN4/s1600/arrow%2Bup%2Bgreen.png' style='border: none;' width='50'/>
</a>
<a href='url  του blogs μας' itle='Αρχική Σελίδα' style='position: fixed; bottom:10px; left:10px;' title='ΑΡΧΗΚΗ'>
<img height='50' src='http://2.bp.blogspot.com/-iZFL8SAuzfw/T559lynmo1I/AAAAAAAAFrk/uyzpJMlCmoE/s1600/2%2BHot%2BHome.png' style='border: none;' width='50'/>
</a>


     Με κόκκινο και μπλε είναι οι διευθύνσεις των εικόνων που χρησιμοποιώ σαν κουμπιά.
Μπορούμε να βρούμε πολλά με μια αναζήτηση στο google.
     Με πράσινο την διεύθυνση του ιστολογικού μας.(για ΑΡΧΙΚΗ).
Ακόμα ρυθμίζοντας τα  pixes  των εικόνων και την απόσταση με τα: 10px; left:10px και
   width='50', μπορούμε να βελτιώσουμε την εικόνα των κουμπιών μας.
ΠΕΡΙΣΣΟΤΕΡΑ

ΚΟΥΜΠΙ ΜΕ ΚΕΙΜΕΝΟ ΠΟΥ ΤΡΕΧΕΙ


   Τον κώδικα ενός χρωματιστού κουμπιού που να φέρει πάνω του κείμενο που να τρέχει παρουσιάζω ποιο κάτω.Τον τοποθετούμε μέσα στο blog μας με τον κλασικό τρόπο:

Σχεδίαση -- Διάταξη -- Προσθήκη gadget -- HTML/JavaScript-- Επικολούμαι τον κώδικα -- προεπισκοπηση   και τέλος αποθήκευση.


<script type="text/javascript">
<!--
var author="jdstiles.com";
var DS_ScrollText="ΚΑΝΕ  ΚΛΙΚ  ΕΔΩ";
var DS_Speed=(5-(1))*35; // Change the last number to change the speed of the scroll
document.write("<form name=\"ds_form\"><input type=\"button\" name=\"ds_scrollb\" value=\"\" onClick=\"javascript:window.location.href='URL ΠΑΡΑΠΟΜΠΗΣ'\" style=\"background-color:#000098;font-size:12;color:#ffffff;font-family:monospace\">");
var DS_ScrollCounter=0;
var DS_I=0;
while(DS_I++<4)
DS_ScrollText=" 
ΑΑΑ "+DS_ScrollText;
function DS_ButtonScroll(){
document.ds_form.ds_scrollb.value=DS_ScrollText.substring(DS_ScrollCounter,DS_ScrollText.length)+DS_ScrollText.substring(0,DS_ScrollCounter);;
DS_ScrollCounter++;
DS_ScrollCounter%=(DS_ScrollText.length);
setTimeout("DS_ButtonScroll()",DS_Speed);
}
DS_ButtonScroll();
// -->
</script>



 Με κόκκινο :  το κείμενο πάνω στο κουμπί.
 Με κίτρινο   :  που θα παραπέμπει.
 Με πράσινο:  η ταχύτητα κύλισης.

    Ακόμα μπορούμε να ρυθμίσουμε χρώματα,μέγεθος κειμένου κλπ. Μπορούμε να το τοποθετήσουμε και σαν μπάρα εναλλασσόμενων μηνυμάτων στο πάνω μέρος του blog μας.Τα μηνύματα μπορούμε να τα γράψουμε στα δυο διαφορετικά κόκκινα σημεία.Το μήκος της Μπάρας αυξάνεται αυτόματα.

                                                                                                                    SiteManiac

ΠΕΡΙΣΣΟΤΕΡΑ

ΠΩΣ ΚΑΝΩ ΕΝΑ ΚΕΙΜΕΝΟ ΝΑ ΤΡΕΧΕΙ

   Ο  παρακάτω κώδικας χρησιμοποιείται για να κάνει ένα κείμενο να τρέχει(scroll). Γράφουμε το κείμενο εκεί που είναι οι τελείες και ο αριθμός δίνει την ταχύτητα του κειμένου.Μπορούμε να το χρησιμοποιήσουμε και σαν Gadget αλλά και μέσα στις αναρτήσεις μας.

   1α.    <marquee scrolldelay = 85>....κείμενο......</marquee>

        β.   <marquee bgcolor=LightBlue>........................</marquee>

Για να χρησιμοποιηθεί στις αναρτήσεις ,πρέπει απλά να πάμε από το κουμπί  HTML  και να επιλέξουμε το σημείο που θα το τοποθετήσουμε.

 Σαν gadget πάμε με τον γνωστό τρόπο.blogger>διάταξη>προσθήκη gadget>HTML/JavaScript>
επικόλληση

κάνουμε αποθήκευση και τέλος. 

     Ένας άλλος δεύτερος τρόπος, με τον οποίο μπορούμε να εμπλουτίσουμε το κείμενό μας, δίνω ποιο κάτω.

    2.     <marquee bgcolor="ΧΡΩΜΑ" direction="left" height="50" scrollamount="34" style="color:ΧΡΩΜΑ 2; font-family: Arial Black; font-size: 25pt;" width="300">...........κείμενο...........</marquee>

   
  Κόκκινο  :  το χρώμα του  κουτιού

  μπλε       :  κατεύθυνση που τρέχει το κείμενο.(left,right,up,down) είναι οι τιμές που παίρνει
  Πράσινο  : Χρώμα κειμένου
  Κίτρινο    : Ταχύτητα κειμένου
  Γκρι        : είδος γραμματοσειράς , μέγεθος.


    Μπορείτε να βάλετε και εικόνα

<marquee direction="right" scrollamount="22"><img alt="ορισμος" src=".η διευθηνση της εικονας μας .gif" /></marquee>



        Τον αποθηκεύουμε σαν gadget μέσα στο bloggs μας με τον γνωστό τρόπο.

ΠΕΡΙΣΣΟΤΕΡΑ

ΕΦΕ ΕΛΑΣΤΙΚΟΥ ΚΕΙΜΕΝΟΥ

  Τον κώδικα  ενός κείμενου που κινείται ελαστικά παρουσιάζω πιο κάτω.Πολύ καλό εφέ για κόποι σημείο του blog μας που θέλουμε να τονίσουμε.Μπορούμε να το βάλουμε σαν gadget στο σαιτ μας.
 Πάμε λοιπόν
:
 
Σχεδίαση  > Διάταξη > Προσθήκη  gadget > HTML/JavaScript > Επικόλληση κώδικα >Αποθήκευση

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta http-equiv="Content-Language" content="en-us">
<title>Elastic text</title>
</HEAD>

<BODY BGCOLOR="#FFFFFF">

<p>If you enjoy it, visit my site <a href="url site">here</a></p>

<p align="center" ID='elastic' style="font-size:25px; position:relative; top:100px;">
<!-- put desired text below. Replase my text.  HTML tag allowed-->
<a href='url site'>Visit my site</a>
<!-- put desired text above. Replase my text. HTML tag allowed -->
</p>

<script LANGUAGE="JavaScript">
string="<a href='url site'>Visit my site</a>"   // string to elastic text
pausetime=100; // time to elastic effect. Decrease to slow

// do not modify below this line
var sizes = new Array("-8px","-4px","-2px","-1px","0px", "1px", "2px", "4px", "8px", "16px", "32px");
sizes.pos = 0;

function rubberBand()
 {
  var el = document.all.elastic;
  if (el.direction==null)  {el.direction = 1;}
  else if ((sizes.pos > sizes.length-2) || (sizes.pos==0)) {el.direction *= -1;}
  el.style.letterSpacing = sizes[sizes.pos += el.direction];
  setTimeout('rubberBand()',pausetime);
}


//document.all.elastic.innerHTML=string;
rubberBand();

</script>
</BODY>
</HTML>
</HTML>


κόκκινο το σημείο που θα παραπέμπει
μπλε το μήνυμα που θα μεταδίδει 
ροζ το χρωμα του κειμενου
ΠΕΡΙΣΣΟΤΕΡΑ

ΚΕΙΝΕΝΟ ΠΟΥ ΤΡΕΧΕΙ ΣΑΝ ΦΩΤΑ ΝΕΟΝ



  Εδώ θα δούμε έναν κώδικα κειμένου, που το κάνει να τρέχει σαν τα φέτα ΝΕΟΝ, που έχουμε δει όλοι στις διάφορες διαφημιστικές πινακίδες στους δρόμους .Τον τοποθετούμε εμείς όπου θέλουμε μέσα στο ορατό μέρος του HTML κώδικα(body).Σαν gadget τον τοποθετώ με τον γνωστό τρόπο από τον Πίνακα ελέγχου του blogger μου.

Πάμε  Σχεδίαση  > Διάταξη > Προσθήκη  gadget > ΗΤΜΛ/JavaScript > Επικόλληση κώδικα >Αποθήκευση.

<BODY>

<h1>

<script language="JavaScript1.2">


var message="Καλως ηρθατε στο blogg moy...!!!"

var neonbasecolor="gray"

var neontextcolor="yellow"

var flashspeed=100  //in milliseconds


///No need to edit below this line/////
var n=0

if (document.all||document.getElementById){

document.write('<font color="'+neonbasecolor+'">')

for (m=0;m<message.length;m++)

document.write('<span id="neonlight'+m+'">'+message.charAt(m)+'</span>')

document.write('</font>')

}
else
document.write(message)
function crossref(number){

var crossobj=document.all? eval("document.all.neonlight"+number) : document.getElementById("neonlight"+number)

return crossobj

}

function neon(){

//Change all letters to base color

if (n==0){

for (m=0;m<message.length;m++)

//eval("document.all.neonlight"+m).style.color=neonbasecolor

crossref(m).style.color=neonbasecolor

}

//cycle through and change individual letters to neon color

crossref(n).style.color=neontextcolor

if (n<message.length-1)

n++

else{

n=0

clearInterval(flashing)

setTimeout("beginneon()",1500)

return

}

}

function beginneon(){

if (document.all||document.getElementById)

flashing=setInterval("neon()",flashspeed)

}

beginneon()

</script>

</h1>


<!-- Script Size:  1.72 KB -->


Με κόκκινο  γράφουμε το κείμενο
Με μπλε  ορίζουμε τα χρώματα
Με κίτρινο την ταχύτητα
ΠΕΡΙΣΣΟΤΕΡΑ

Παρασκευή, 8 Φεβρουαρίου 2013

ΚΕΙΜΕΝΟ ΠΟΥ ΤΡΕΧΕΙ ΑΛΛΑΖΟΝΤΑΣ ΧΡΩΜΑΤΑ


   Τον κώδικα ενός, άλλου gadget κειμένου που τρέχει(Scroller), που όμως αναβοσβήνει σε διάφορα χρώματα τα οποία μπορούμε να αλλάξουμε δίνω ποιο κάτω, τον προσθέτουμε και στο κείμενο και μέσα στον HTML κώδικα, όπου θέλουμε εμείς.
   Σαν gadget τον επικολλούμε με τον γνωστό τρόπο:
 ΣΧΕΔΙΑΣΗ-ΔΙΑΤΑΞΗ-ΠΡΟΣΘΗΚΗ Gadget-HTML/JavaScript-ΕΠΙΚΟΛΛΗΣΗ -ΑΠΟΘΗΚΕΥΣΗ
 

var i=0;                    // a counter

var colors = new Array("FF0000","FFFF66","FF3399","00FFFF","FF9900","00FF00"); // the colors
var aColor;                 // the chosen color

function loadText()
{
    // randomly choose color
    aColor = colors[Math.floor(Math.random()*colors.length)];

    aChar = someText.charAt(i);
    if (i == 0)
        aSentence = aChar;
    else
        aSentence += aChar;

    // 50 iterations max.
    if (i < 50)  i++;
    
    // For IE
    if (document.all)
    {
        textDiv.innerHTML= "<font color='#"+aColor+"' face='Tahoma' size='5'><i>"+aSentence+"</i></font>";
        setTimeout("loadText()",100);
    }
        
    // For Netscape Navigator 4
    else if (document.layers)
    {
        document.textDiv.document.write("<font color='#"+aColor+"' face='Tahoma'                                 size='5'><i>"+aSentence+"</i></font>");
        document.textDiv.document.close();
        setTimeout("loadText()",100);
    }
        
    // For other
    else if (document.getElementById)
    {
        document.getElementById("textDiv").innerHTML = "<font color='#"+aColor+"'            face='Tahoma'size='5'><i>"+aSentence+"</i></font>";
        setTimeout("loadText()",100);
    }
}
</script>
</head>
<body bgcolor="#000000" onload="loadText()" text="#ffffff">

<div id="textDiv">
</div>
</body>
</html>
</div>


    Εδώ μπορούνε να κάμουμε πολλές τροποποιήσεις στα χρώματα, στον τύπο κειμένου,στην ταχύτητα στο μέγεθος των γραμμάτων κλπ.
ΠΕΡΙΣΣΟΤΕΡΑ