Αντιγράψτε τα παρακάτω παραδείγματα, πολλά απο τα οποία θα σας φανούν χρήσιμα, είτε είστε αρχάριος είτε προχωρημένος 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>
Ελπίζω να φανούν χρήσιμα σε κάποιους. Αν ναι, τότε μαρκάρετε αυτήν την ανάρτηση κάπου, για να την έχετε πρόχειρη ανά πάσα στιγμή.
by AATON.
Δεν υπάρχουν σχόλια:
Δημοσίευση σχολίου