10 Αυγούστου 2010



9 11 βασικές γνώσεις HTML

Αντιγράψτε τα παρακάτω παραδείγματα, πολλά απο τα οποία θα σας φανούν χρήσιμα, είτε είστε αρχάριος είτε προχωρημένος blogger.
Κάνοντας χρήση αυτών των βασικών HTML κωδικών, μπορείτε να επεξεργαστείτε ένα κείμενο, έναν HTML/JavaScript κώδικα, ή το πρότυπό σας ανάλογα με τις επιθυμίες σας.


1. Comments
Συχνά θα παρατηρήσατε στον HTML κώδικα του προτύπου σας διάφορα "comments". Ο σκοπός που βρίσκονται εκεί, είναι για να σας βοηθήσουν να διαμορφώσετε τον κώδικα, ή για να σας επισημάνουν κάτι. Θα τα δείτε να εμφανίζονται με την παρακάτω μορφή:

<!-- Comment κείμενο -->

Θα μου πείτε τώρα, "εμένα πού με βιοηθάει αυτό;"
Σας βοηθάει, εάν τοποθετώντας ένα widget κώδικα στο blog sας, να βάλετε στην αρχή και στο τέλος του ένα τέτοιο comment, ώστε να εξηγεί ποιό widget ειναι, απο πού αρχίζει και που τελειώνει.
Παράδειγμα:
<!-- Αρχή κώδικα Calendar widget -->
εδώ ξεκινάει ο κώδικας (HTML/JavaScript)
κ.λ.π. κ.λ.π. κ.λ.π.
εδώ τελειώνει ο κώδικας
<!--  Τέλος κώδικα Calendar widget -->

Καταλάβατε τώρα; Οπότε, κάθε φορά που θα βλέπετε τον κώδικα του προτύπου σας, θα ξέρετε και τι βλέπετε μπροστά σας. Αν θέλετε φυσικά.. μην ταράζεστε.


2. Κάνοντας ένα text bold
Για να κάνουμε τα γράμματα bold, χρησιμοποιούμε το <b> και </b> γύρω απο το κείμενο η την λέξη.
Παράδειγμα:

Κάνε <b>τα γράμματα παχειά</b>

Αλλάζει το πάχος και δείχνει::

Κάνε τα γράμματα παχειά

3. Πλαγιάζοντας τα γράμματα (italic)
Για να κάνετε ένα κείμενο σε italic, χρησιμοποιήστε τα <i> και </i> στην αρχή και στο τέλος του κειμένου αντίστοιχα.
Παράδειγμα:
Κάνε <i>gtτα γράμματα italic</i>

θα γίνει:

Κάνε τα γράμματα italic

4. Υπογραμίστε ένα text (underlined)
Για να υπογραμίσετε ένα κείμενο, μια λέξη κ.λ.π. (δίχως να είναι κάποιο ενεργό link), βάζουμε το <u> και το </u> γύρω απο το text που θέλουμε να υπογραμίσουμε.
Παράδειγμα:
Υπογραμίζω <u>αυτές τις λέξεις</u>

Θα γίνει:

Υπογραμίζω αυτές τις λέξεις

5. Δημιουργώντας line breaks
Υπάρχουν δύο βασικές line breaks στην HTML. Χρησιμοποιώντας την <br> για να κάνετε break στην επόμενη γραμμή, ή το <p> για να υπερπηδήσετε μια γραμμή.
Παράδειγμα:

1<br>2<p>3

Φαίνεται έτσι:

1
2

3 (εδώ βλέπετε πως το 3 υπερπήδησε μια γραμμή)

6. Αλάζοντας το μέγεθος του text
Για να αλάξετε το μέγεθος των γραμμάτων ενός κειμένου (text), χρησιμοποιήστε το <font size="+1"> για να μεγαλώσουν, ή το <font size="-1"> για να μικρύνουν. Κλείστε κατόπιν στο τέλος του κειμένου, με </font>. Μπορείτε φυσικά να αλλάξετε τις μεταβλητές των αριθμών.
Για παράδειγμα:

Κάνε το text <font size="+2">μεγαλύτερο</font> ή <font size="-2">μικρότερο</font>

και θα γίνει αυτή η αλλαγή:

Κάνε το text μεγαλύτερο ή μικρότερο

7. Αλλάξτε την γραμματοσειρά
Υπάρχουν αρκετά fonts που μπορείτε να χρησιμοποιήσετε, και τα πιο συνηθισμένα είναι:

Times New Roman: (είναι το Standard για κάθε browser)

Arial η Helvetica: χρησιμοποιείστε το <font face="arial, helvetica"> και κλείστε με </font>

Verdana: <font face="verdana"> και μετά </font>

Garamond: <font face="garamond"> και </font>

Παράδειγμα:
Το κείμενο είναι <font face="helvetica">σε font Helvetica</font>

θα μετατραπεί σε:

Το κείμενο είναι σε font Helvetica

8. Αλάζοντας το χρώμα των γραμμάτων (font color)
Για να αλάξετε το χρώμα κάποιας γραμματοσειράς, χρησιμοποιήστε color codes σαν αυτόν: <font color="#FF0000">.
Για παράδειγμα:

Κάνε <font color="#FF0000">αυτά τα γράμματα κόκκινα</font>

και θα γίνει αυτό:

Κάνε αυτά τα γράμματα κόκκινα

Για να κάνετε set τα default font colors για ολόκληρη την σελίδα, χρησιμοποιήστε color codes στο <body> command.
Παράδειγμα, εάν θέλετε:

font = black
link = blue
'visited' link = red
'while being clicked' link = pink

τότε χρησιμοποιείστε:

<body text="#000000" link="#FFFF00" vlink="#FF0000" alink="#FF00CC">

9. Προσθέτοντας μια εικόνα
Για να προσθέσετε μια εικόνα στο HTML template σας, χρησιμοποιείστε το <img src="URL">. Σιγουρευτείτε ότι έχετε συμπεριλάβει ολόκληρο το URL της εικόνας, μαζί με το http://.


10. Προσθέτοντας ένα link
Για να προσθέσουμε ένα link στο HTML template μας, χρησιμοποιούμε το <a href="URL"> και μετά το </a> . Σιγουρευτείτε πως έχετε συμπεριλάβει ολόκληρο το URL, και να ξεκινάει με http://. Παράδειγμα:

Κάνε <a href="http://nikos63.blogspot.com/">αυτά τα γράμματα Link για το http://nikos63.blogspot.com/</a>

Τότε θα δείτε:

Κάνε αυτά τα γράμματα Link για το http://nikos63.blogspot.com/

Εάν τώρα, προσθέσουμε ανάμεσα και την μεταβλητή target="_blank", τότε το Link μας θα ανοίγει σε νέο παράθυρο.

Παράδειγμα:
Κάνε <a href="http://nikos63.blogspot.com/" target="_blank">αυτά τα γράμματα Link για το http://nikos63.blogspot.com/</a>

Τότε έχουμε το ίδιο με επάνω, αλλά ανοίγει σε νέο παράθυρο τώρα.
Κάνε αυτά τα γράμματα Link για το http://nikos63.blogspot.com/


11. Φτιάχνοντας μια numbered ή bulleted λίστα
Για αριθμημένη (numbered) η με τελεία μπροστά (bulleted) λίστα χρησιμοποιούμε τα <ol> και </ol> στην αρχή και στο τέλος της λίστας, καθώς και <li> για να δημιουργήσουμε ξεχωριστές γραμμές.
Παράδειγμα:

<ol>
<li>γραμμή πρώτη
<li>γραμμή δεύτερη
</ol>

τότε έχουμε:

1. γραμμή πρώτη

2. γραμμή δεύτερη

Εάν θέλουμε να είναι bulleted λίστα αντί για numbered λίστα, χρησιμοποιούμε τότε <ul> και </ul> αντι των <ol> και </ol>

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



"Γειά σου, Εάν βρέθηκες για πρώτη φορά στο Blog μου, και εάν σε ενδιαφέρουν οι αναρτήσεις μου, μπορείς να εγγραφείς στο RSS feed του Blog. Μπορείς επίσης να κάνοντας εγγραφή στο Newsletter του blog μου, να λαβαίνεις απ ευθείας κάθε μου ανάρτηση στο email σου. Είσαι Twitter user; τότε μπορείς επίσης να με κάνεις Follow στο Twitter. Σε ευχαριστώ που με διαβάζεις."




Print this post



Related Posts :



9 σχόλια:

pan de lees είπε... Best Blogger Tips

ειναι αυτο που λενε : πες τα χρυσοστομε....εδω ταιριαζει :γραψτα νικολαε....οποιος τη ψαχνει με τους κωδικες, σιγουρα το χρειαζεται...


TwistedTool είπε... Best Blogger Tips

Νίκο, μπορείς να δώσεις και τον κώδικα για να αλλάξω το χρώμα του background ενός συγκεκριμένου σημείου κάποιου κειμένου;

Είμαι σίγουρος ότι είναι κάτι απλό, αλλά δεν το βρίσκω!

Ευχαριστώ εκ των προτέρων!


AATON είπε... Best Blogger Tips

Οκ, ας πάρουμε για παράδειγμα την λέξη "τέστ" και θέλουμε να την "βάψουμε" κόκκινη. Ορίστε ο κώδικας:

<span style="color: rgb(255, 0, 0);">τεστ</span>


AATON είπε... Best Blogger Tips

Γειά σου Παντελή :)


TwistedTool είπε... Best Blogger Tips

Βλέπεις; Το ήξερα ότι ήταν κάτι απλό! Τστς..

Ευχαριστώ πολύ, Νίκο μου! Να'σαι καλά!


TwistedTool είπε... Best Blogger Tips

Τώρα που το θυμήθηκα: Δοκίμασα τον τρόπο που λες Νίκο, για το background, αλλά δε δούλεψε.

Γι'αυτό έψαξα ακόμα περισσότερο και τελικά το ανακάλυψα.

Είναι αυτός ο κώδικας: <**span style='background:ΚΩΔΙΚΟΣ ΧΡΩΜΑΤΟΣ BACKGROUND(#FFFFFF ΓΙΑ ΑΣΠΡΟ Π.Χ.)'>ΚΕΙΜΕΝΟ

(τα αστεράκια δίπλα στα span, τα διαγράφουμε)

Πάλι απλό είναι, αλλά με δυσκόλεψε το καταραμένο!

Για τον κώδικα σου δεν ξέρω αν έκανες κάποιο λάθος ή αν δουλεύει αλλού, πάντως σε μένα δε δούλεψε!

Ευχαριστώ πολύ πάντως :)


Ό,τι δε σε σκοτώνει... είπε... Best Blogger Tips

Τέλεια όλα και συγχαρητήρια (στον καλλιτέχνη)! Ξέρεις τι έκανα ο αρχάριος, π.χ. για bold λέξη; Την έγραφα στο "Νέα Ανάρτηση", την έκανα bold, πήγαινα στην προβολή με HTML, έβλεπα πώς την έγραφε και το ξεπατίκωνα. Ευχαριστώ, λοιπόν, για την πληθώρα των πληροφοριών και για τη... σιγουριά ότι θα γίνουν σωστά!


AATON είπε... Best Blogger Tips

να στε καλά.


Fani Flou είπε... Best Blogger Tips

widget = Δεν γνωρίζω τι είναι που και πως και γιατί το χρησιμοποιούμε = είμαι αρχάρια. Δυο λεξούλες μόνο για να καταλάβω..


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

Πες πως δεν έχεις χρόνο να σχολιάσεις.. να 'χεις πάρει όμως σοβαρό ύφος, καλά;

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.

Next Next Next