HTML Basic commands - Βασικές εντολές HTML

Τα αρχικά HTML σημαίνουν Hyper Text Markup Language ( Γλώσσα Σήμανσης Υπερκειμένου )

HTML είναι η γλώσσα με την οποία κατασκευάζονται οι ιστοσελίδες στο διαδίκτυο. Η τελευταία έκδοση είναι η HTML5.

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

Τα ειδικά αυτά σύμβολα της γλώσσας HTML που προσθέτουμε ονομάζονται ετικέτες (tags)

1. <HTML>...</HTML> Αρχή και τέλος κάθε σελίδας

2. <HEAD>.. .</HEAD> Δήλωση επικεφαλίδας

3. <TITLE>...</TITLE> Ορισμός της επικεφαλίδας μιας σελίδας

4. <BODY>...</BODY> Δήλωση σώματος-κειμένου, μιας σελίδαc

5. <Hl-6>...</Hl-6> Μέγεθος γραμματοσειράς

6. <P> ... </P> Αρχή παραγράφου - Δημιουργία κενής γραμμής

7. <BR> Μεταφέρει το υπόλοιπο κομμάτι της τρέχουσας γραμμής στην από κάτω

8. <NOBR>...</NOBR> Υποχρεώνουμε ένα κείμενο να μείνει ολόκληρο σε μια γραμμή

9. <UL>

<LI>...</LI>

<LI>...</LI> κ.λ.π.

</UL> Δημιουργία λίστας

10. <OL>

<LI>...</LI> <LI>...</LI> κ.λ.π.

</OL> Δημιουργία αριθμημένης λίστας

11. <A HREF-'URL ">...</A> Παραπομπή (Links) κάπου στο Internet

<A HREF="file name">.. .</A> Παραπομπή από μια σελίδα σε μια άλλη που βρίσκεται στον ίδιο φάκελο (directory)

<A HREF="/υποφάκελος/mypage2.htm">.. .</A> Παραπομπές από μια σελίδα σε μια άλλη που βρίσκεται σε υποφάκελο (subdirectory)

<A HREF="../mypage2.htm">...</A>

<A HREF="../. ./mypage 1 .htm">...</A> Παραπομπές από μια σελίδα σε μια άλλη που βρίσκεται σε ανώτερο φάκελο (directory)

<A HREF="mailto:info@......com">.. .</A> Παραπομπή για την αποστολή email

<A HREF="mailto: info@.......com?subject=Yπόψη Διευθυντού">.. .</A> Αν θέλουμε το παράθυρο αποστολής να έχει ήδη γραμμένο και το θέμα (subject) του mail

<A HREF="#XXX">.. .</A> Παραπομπές από ένα σημείο μιας σελίδας σε ένα άλλο ( δίνουμε όνομα XXX στο στόχο )

12. <A.. .</A> Όνομα (identifier) μπορούμε να δώσουμε είτε σε μια μεμονωμένη λέξη είτε σε ολόκληρο κείμενο

13. <BODY BGCOLOR=Red>.. .</BODY> To χρώμα του φόντου της σελίδας ορίζεται παραμετρικά μέσα στην οδηγία <BODY>

13. <BODY BGCOLOR=Red>.. .</BODY> Το χρώμα του φόντου της σελίδας ορίζεται παραμετρικά μέσα στην οδηγία <BODY>

14. <BODY TEXT=Green>.. .</BODY>

<BODY LINK=Blue>.. .</BODY> Το χρώμα του κειμένου της σελίδας ορίζεται παραμετρικά μέσα στην οδηγία <BODY>

15. <B>...</B> Bold κείμενο

16. <I>...</I> Italic κείμενο

17. <B>...<I>...<I>...<B> Bold & italic μαζί

18. <U>...</U> Υπογραμμισμένο κείμενο

19. <H1 ALIGN= CENTER >...</H1> Στοίχιση κειμένου ή φωτογραφιών

20. <CENTER>.. .</CENTER> Στοιχίζει στο κέντρο όλα όσα περικλύει (πίνακες, εικόνες, κείμενο κ.λπ.)

21. <HR> Οριζόντιες Γραμμές

22. <FONT SIZE=x>...</FONT> Καθορίζει το μέγεθος των γραμμάτων

23. <FONT COLOR= YELLOW>...</FONT> Καθορίζει το χρώμα των γραμμάτων - λέξεων

24. <FONT FACE="Arial">...</FONT> Καθορίζει την γραμματοσειρά

25. <IMG SRC-'όνομα ή/και path αρχείου"> Εισαγωγή εικόνας .GIF ή .JPG

26. <H6><IMG SRC="image.gif">κείμενο </H6> Εικόνα και γραμμή κειμένου

27. <IMG SRC="imagel.gif" ALIGN=TOP> Η εικόνα μπορεί να τοποθετηθεί σε διάφορες θέσεις σχετικά με το επίπεδο της γραμμής κειμένου που υπάρχει δεξιά και αριστερά της ( TOP ή MIDDLE ή BOTTOM )

28. <IMG SRC="image1.gif" ALIGN=RIGHT><P>κείμενο... Εικόνα και ροή κειμένου παραγράφου, λίστας, επικεφαλίδας ή άλλης εικόνας

29. <IMG SRC="image2.gif" VSPACE=50 HSPACE=45 ALIGN=RIGHT> Απόσταση του κειμένου από μια εικόνα σε pixel

30. <A HREF="https://www.linkstomarkets.com"><img src="https://links-to-markets.webnode.com/_files/200021909-941c6951a7/info%20linkstomarkets.com.jpg"></A> Πως κάνουμε μια εικόνα παραπομπή LINK

31. <IMG SRC="image2.gif" border=5> Η παράμετρος border καθορίζει το περιθώριο που θα έχει μια εικόνα

32. <IMG SRC="image2.gif" border=5 height=38 width=756 > Τα height & width ορίζουν το ύψος και το πλάτος της εικόνας, σε pixels

33. <BODY BACKGROUND= "όvoμα αρχείου">...</ΒΟDΥ> Αν θέλουμε το φόντο της σελίδας να μην είναι κάποιο χρώμα αλλά ένα γραφικό...

34. <TABLE>.. .</T ABLE> Ορίζω τη δημιουργία πίνακα

<TR>...</TR> Ορίζω το πλήθος των γραμμών του πίνακα

<TΉ>...</ΤΗ> Ορίζω το/τα κελί επικεφαλίδα ( Bold )

<TD ... </ΤD> Ορίζω το/τα κελιά δεδομένων

<TABLE Β ORDER>.. .</TABLE> Ο πίνακας θα έχει περιθώρια

<CAPTION>.. .</C APTION> Καθορίζω το τίτλο του πίνακα ( κοινός σε όλες τις στήλες)

<CENTER><TABLE> </TABLE></CENTER> Τοποθετεί τον πίνακα στο μέσον της σελίδας. Για οποιαδήποτε άλλη θέση του πίνακα, όπως εικόνα

Τα χρώματα στην γλώσσα HTML

Όπως έχω αναφέρει προηγουμένως για την κατασκευή ιστοσελίδων χρησιμοποιούμε την γλώσσα HTML.

Τα χρώματα στην γλώσσα HTML μπορεί να καθοριστούν χρησιμοποιώντας είτε το όνομα τους, είτε μια τιμή RGB, ή δεκαεξαδικές τιμές HEX.

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

<p style="color: red; background-color: yellow"> Η πρόταση αυτή είναι γραμμένη με γράμματα κόκκινου χρώματος και το φόντο είναι με κίτρινο χρώμα.</p>

Το αποτέλεσμα θα είναι:

Η πρόταση αυτή είναι γραμμένη με γράμματα κόκκινου χρώματος και το φόντο είναι με κίτρινο χρώμα.

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

<div style="background-image:url(https://affiliatemarketing9.webnode.com/_files/200000096-1106212067/b%20300X60px.jpg);width:280px;height:140px; border:1px solid black;"><p style="font-family:times new roman; color: white; font-size:12px; text-align:center"><B>Η Κύπρος είναι το νησί της θεάς Αφροδίτης και βρίσκεται στην Ανατολική Μεσόγειο. Στην πρόταση αυτή το κείμενο είναι γραμμένο με έντονα γράμματα άσπρου χρώματος, επίσης καθορίζουμε την γραμματοσειρά, το μέγεθος των γραμμάτων, καθορίζουμε την στοίχηση του κειμένου στο κέντρο και επίσης καθορίζουμε ότι το φόντο είναι μία εικόνα</B></p></div>

Το αποτέλεσμα θα είναι:

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

Τα ποιό βασικά χρώματα στην γλώσσα HTML

Τα ποιό κάτω βασικά Χρώματα στην γλώσσα HTML αναφέρονται και με το κανονικό όνομα χρώματος και επίσης αναφέρονται με το χρώμα Hex RGB και με το Δεκαδικό RGB

Black - #000000 - rgb(0,0,0)

Red - #FF0000 - rgb(255,0,0)

Lime - #00FF00 - rgb(0,255,0)

Blue - #0000FF - rgb(0,0,255)

Yellow - #FFFF00 - rgb(255,255,0)

Cyan - #00FFFF - rgb(0,255,255)

Fuchsia - #FF00FF - rgb(255,0,255)

Silver - #C0C0C0 - rgb(192,192,192)

White - #FFFFFF - rgb(255,255,255)

Ads help us operate our website. When you visit our website, our website and advertiser companies can access and use COOKIES on your device to display relevant personalised content ads. See how COOKIES are used and how you can change your settings. By Continuing on this site you accept the use of COOKIES on your device.