mina's: Εργασια στην Διδακτικη

ΟΔΗΓΟΣ ΕΚΜΑΘΗΣΗΣ HTML

Τα αρχικά HTML προέρχονται από τις λέξεις HyperText Markup Language. Η html δεν είναι μια γλώσσα προγραμματισμού. Είναι μια γλώσσα σήμανσης (markup language), δηλαδή ένας ειδικός τρόπος γραφής κειμένου.
Η HTML χρησιμοποιεί τις ειδικές ετικέτες (τα tags) να δώσει τις απαραίτητες οδηγίες στον browser. Τα tags είναι εντολές που συνήθως ορίζουν την αρχή ή το το τέλος μιας λειτουργίας.
Ο καθένας μπορεί να δημιουργήσει ένα αρχείο HTML χρησιμοποιώντας απλώς εναν επεξεργαστή κειμένου.
Θα δείξουμε πόσο εύκολα μπορεί ο καθένας να δημιουργήσει την δική του ιστοσελίδα.

Πρώτο Βήμα : Κατεβάστε και εγκαταστήστε στον υπολογιστή σας έναν HTML editor. Υπάρχουν αρκετοί open source. Να θυμαστε παντα να σωζετε τα αρχεια σας με την καταληξη .html η .htm !!!
Δεύτερό Βήμα :Καθε κωδικας σε html ξεκιναει με την ετικετα <html> και τελειωνει με την ετικετα </html> .
   To κειμενο μεταξυ των δυο ετικετων περιγραφει την ιστοσελιδα.
   Επισης ακολουθει παντα η ετικετα <body>...</body>..To κειμενο μεταξυ των δυο ετικετων
   περιγραφει το περιεχομενο της ιστοσελιδας.

   Aρα :
   <html>
   <body>


   </body>
   </html>

Τρίτο βήμα : Βασικές ετικέτες

Eπικεφαλίδες : <h1> έως <h6> .Η <h1> ειναι η μεγαλυτερη επικεφαλιδα σε μεγεθος και η <h6> ειναι η μικρότερή .

<html>

<body>

<h1>This is a heading </h1>

<h2>This is another heading </h2>

</body>

</html>

Παραγραφοι : Με την ετικετα <p> χωρίζουμε το κειμενο μας σε παραγραφους.Σε html αυτο σημαινει οτι αφηνεται μια κενη σειρα κατω απο κάθε παραγραφο.

     <html>
   <body>
   <p> this is a text in first paragraph   </p>
   <p> this is a text in second paragraph </p>
   </body>
   </html>

Μορφοποιηση : Mπορουμε να μορφοποιήσουμε το κειμενο μας με διαφορες ετικετες.

   <b> : Κανει το κειμενο bold
   <i> : Kανει το κειμενο italic
   <em> : Δινει εμφαση στο κείμενο
   <sub>: Kανει το κειμενο υπογεγραμμένο
   <pre>: Το κειμενο μορφοποιείται από τον χρηστη αναμεσα σ'αυτες τις ετικετες
   <blink>: Το κειμενο αναβοσβήνει(προσοχή δεν δουλεύει σ'ολους τους browsers)
       < marquee> :Κυλιομενο κειμενο

      <html>

<body>

<h1><b>This is a heading in bold </b></h1>

<h2><i>This is another heading in italic</i></h2>

<h3><em> This text is emphasized </em></h3>

<h4><sub>This is a heading underlined </sub></h4>

<h5><pre>This is another heading in italic</pre></h5>

<h6><blink> This is a blinkink text </blink></h6>

</body>

</html>

Links : Γραφοντας <a href="url">Link text</a> εισαγουμε εναν συνδεσμο στο κειμενο μας .Στην θεση του url βαζουμε την ηλεκτρονικη διευθυνση και στην θεση του Link text βαζουμε το κειμενο που εμφανιζεται στην οθονη.

<html>

<body>

<h1><b>This is a heading in bold </b></h1>

<h2><i>This is another heading in italic</i></h2>

<a href="www.google.com">Google</a>

</body>

</html>

Εικονες : Γραφοντας <img src="url" alt="some_text" width="Χ" height="Υ"/> εισαγουμε μια εικονα στο κειμενο. Στην θεση του url βαζουμε ειτε την ηλεκτρονικη διευθυνση της εικονας αν την παιρνουμε απο το διαδικτυο η τον πληρες μονοπατι της εικονας για να προσδιορισουμε που ειναι αποθηκευμενο στον υπολογιστη μας.

     <html>
   <body>
     <a href="www.google.com">Google</a>
     <img src="http://www.fort.com fairies.gif" alt="some_text">
      </body>
   </html>

Πινακες : Με την <table> εισαγουμε πινακες στο κειμενο.Ενας πινακας διαιρειται σε γραμμες με την ετικετα <tr> και καθε γραμμη σε κελια με την ετικετα <td>.

<html>

<body>

</body>

</html>

Λιστες :Υπαρχουν διατεταγμενες λιστες που εμφανιζουν τα στοιχεια με αριθμηση με την ετικετα <ol>

data
data
data

Και αδιατακτες που εμφανιζουν τα στοιχεια με bullets με την ετικετα <ul>

data
data
data

Σημειωση :μπορουμε να καθορισουμε την μορφη του bullet με την παραμετρο type :
Γραφοντας πχ <ul type="square"> βαζουμε αντι για κυκλο τετραγωνο.Υπαρχουν πολλες

μορφοποιησεις.το ιδιο ισχυει και για την αριθμηση που μπορουμε να καθορισουμε πως θελουμε

να εμφανιζεται.

Φορμες : οι φόρμες χρησιμοποιούνται για να περασουμε δεδομενα στο server (oπως πχ username,passwords etc.). χρησιμοποιούμε την συνταξη :

<html>

<body>

<form>

input elements

</form>

</body>

</html>

Xρωματα : Μπορουμε να χρωματίσουμε την σελιδα μας με μια σειρα απο χρωματα των οποίων οι κωδικοι φαίνονται εδω :http://www.w3schools.com/html/html_colors.asp γράφοντάς μεσα στην ετικετα του body -> <body bgcolor="#colorCode">
Στοίχιση κειμενου(προσοχη πρέπει να ναι μεσα σε ετικετα γιατι η align ειναι παραμετρος) :

   <p align=center>   κείμενο να πάει στο κέντρo
   <p align=right>   κείμενο να πάει στα δεξια
   <p align= left>   κείμενο να πάει στα αριστερά
   </body>
   </html>
   *** Για περισσοτερες και αναλυτικοτερες πληροφοριες πατηστε εδώ

Το παρακατω βιντεο ειναι ενα συνοπτικο tutorial - βοηθημα για την html :

mina's

Δευτέρα 11 Οκτωβρίου 2010

Εργασια στην Διδακτικη

Δεν υπάρχουν σχόλια:

Δημοσίευση σχολίου