Για να δω τον κώδικα html από κάθε ιστοσελίδα κάνω δεξί κλικ σε κάποιο σημείο της ιστοσελίδας και επιλέγω "Προβολή κώδικα σελίδας"
ΒΑΣΙΚΕΣ ΕΝΤΟΛΕΣ HTML (με παραδείγματα μέσα στα μαύρα κουτιά)
ΜΠΟΡΩ ΝΑ ΤΡΕΞΩ ΚΑΘΕ ΚΟΜΜΑΤΙ ΚΩΔΙΚΑ ΠΟΥ ΠΕΡΙΕΧΕΤΑΙ ΜΕΣΑ ΣΤΑ ΜΑΥΡΑ ΚΟΥΤΙΑ ΠΑΡΑΚΑΤΩ ΑΠΛΩΣ ΑΝΤΙΓΡΑΦΟΝΤΑΣ ΚΑΙ ΕΠΙΚΟΛΛΟΝΤΑΣ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥΣ ΣΤΟΝ ΠΑΡΑΚΑΤΩ ΜΕΤΑΦΡΑΣΤΗ
<ahref="https://www.w3schools.com">ΚΛΙΚ ΕΔΩ ΓΙΑ ΝΑ ΕΠΙΣΚΕΦΤΕΙΣ ΤΟΝ ΣΥΝΔΕΣΜΟ ΤΟΥ W3SCHOOLS </a>
Οι εικόνες HTML ορίζονται με την <img>ετικέτα. Περιέχει το αρχείο προέλευσης (src), το εναλλακτικό κείμενο (alt) , καθώς και το width και height ως χαρακτηριστικά:
<imgsrc="https://travel.gr/w3schools.jpg" alt="ΕΝΑΛΛΑΚΤΙΚΟ ΚΕΙΜΕΝΟ ή ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ" width="104" height="142">
<pstyle="color:red; fontsize:12px; background-color:powderblue; font-family:verdana; text-align:center;">Αυτή είναι μια παράγραφος με κόκκινα γράμματα, με γραμματοσειρά Verdana, μεγέθους 12px, χρώμα φόντου μπλε ανοιχτό και στοίχιση στο κέντρο.</p>
<ahref="https://www.w3schools.com">ΚΛΙΚ ΕΔΩ ΓΙΑ ΝΑ ΕΠΙΣΚΕΦΤΕΙΣ ΤΟΝ ΣΥΝΔΕΣΜΟ ΤΟΥ W3SCHOOLS </a>
Οι εικόνες HTML ορίζονται με την <img>ετικέτα. Περιέχει το αρχείο προέλευσης (src), το εναλλακτικό κείμενο (alt) , καθώς και το width και height ως χαρακτηριστικά:
<imgsrc="https://travel.gr/w3schools.jpg" alt="ΕΝΑΛΛΑΚΤΙΚΟ ΚΕΙΜΕΝΟ ή ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ" width="104" height="142">
Η <br> ετικέτα ορίζει μια αλλαγή γραμμής και είναι ένα κενό στοιχείο χωρίς ετικέτα κλεισίματος (δηλαδή δεν κλείνει με </br>).
<p>Αυτή είναι μια παράγραφος που συνεχίζεται <br>στην επόμενη αμέσως γραμμή.</p>
Το style χαρακτηριστικό χρησιμοποιείται για την προσθήκη στυλ σε ένα στοιχείο, όπως χρώμα, γραμματοσειρά, μέγεθος και άλλα.
<pstyle="color:red; fontsize:12px; background-color:powderblue; font-family:verdana; text-align:center;">Αυτή είναι μια παράγραφος με κόκκινα γράμματα, με γραμματοσειρά Verdana, μεγέθους 12px, χρώμα φόντου μπλε ανοιχτό και στοίχιση στο κέντρο.</p>
<h1>Αυτή είναι η ενότητα 1.</h1><p>Εδώ περιέχεται το κείμενο της ενότητας 1.</p><hr><h2>Αυτή είναι η ενότητα 2.</h2><p>Εδώ είναι το κείμενο της δεύτερης ενότητας.</p><hr>
<b>Κείμενο με έντονη γραφή.</b><strong>Κείμενο με έντονη γραφή.</strong><i>Κείμενο με πλαγία γραφή.</i><em>Κείμενο με πλαγία γραφή.</em><small>Κείμενο με μικρότερα γράμματα.</small><p>Το κείμενο που ακολουθεί είναι <mark>μαρκαρισμένο</mark></p><p>To κείμενο που ακολουθεί φαίνεται <del>διαγραμμένο</del> <ins>και υπογραμμισμένο</ins>το επόμενο.</p><p>Το νερό γράφεται Η<sub>2</sub>O.</p><p>Το 4 γράφεται και 2 στο <sup>2</sup> επίσης.</p>
Από προεπιλογή, η συνδεδεμένη σελίδα θα εμφανίζεται στο τρέχον παράθυρο του προγράμματος περιήγησης. Για να το αλλάξετε αυτό, πρέπει να καθορίσετε έναν άλλο στόχο για τον σύνδεσμο.
Το targetχαρακτηριστικό καθορίζει πού να ανοίξετε το συνδεδεμένο έγγραφο.
Το targetχαρακτηριστικό μπορεί να έχει μία από τις ακόλουθες τιμές:
_self- Προκαθορισμένο. Ανοίγει το έγγραφο στο ίδιο παράθυρο / καρτέλα με το οποίο έγινε κλικ
_blank - Ανοίγει το έγγραφο σε νέο παράθυρο ή καρτέλα
Τα Cascading Style Sheets (CSS) χρησιμοποιούνται για τη μορφοποίηση της διάταξης μιας ιστοσελίδας.
Με το CSS, μπορείτε να ελέγξετε το χρώμα, τη γραμματοσειρά, το μέγεθος του κειμένου, το διάστημα μεταξύ των στοιχείων, τον τρόπο τοποθέτησης και διάταξης των στοιχείων, ποιες εικόνες φόντου ή χρώματα φόντου πρόκειται να χρησιμοποιηθούν, διαφορετικές οθόνες για διαφορετικές συσκευές και μεγέθη οθόνης και πολύ περισσότερο!
Συμβουλή: Η λέξη Cascading (επικαλυπτόμενη) σημαίνει ότι ένα στυλ που εφαρμόζεται σε ένα γονικό στοιχείο (parent element) θα ισχύει και για όλα τα θυγατρικά στοιχεία του γονέα. Έτσι, εάν ορίσετε το χρώμα του κυρίως κειμένου σε "μπλε", όλες οι επικεφαλίδες, οι παράγραφοι και άλλα στοιχεία κειμένου στο σώμα θα έχουν επίσης το ίδιο χρώμα (εκτός αν ορίσετε κάτι άλλο)!
Το CSS μπορεί να προστεθεί σε έγγραφα HTML με 3 τρόπους:
Inline - χρησιμοποιώντας το styleχαρακτηριστικό μέσα σε στοιχεία HTML
Εσωτερικό - χρησιμοποιώντας ένα <style>στοιχείο στην <head>ενότητα
Εξωτερικό - χρησιμοποιώντας ένα <link> στοιχείο για σύνδεση με ένα εξωτερικό αρχείο CSS
<!DOCTYPE html><html><head><style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style></head><body><h1>Αυτή είναι μια κεφαλίδα.</h1><p>Αυτή είναι μια παράγραφος.</p></body></html>
ΠΑΡΑΔΕΙΓΜΑ ΕΞΩΤΕΡΙΚΟΥ CSS
<!DOCTYPE html><html><head><link rel="stylesheet" href="https://site.blogspot.gr/styles.css"></head><body><h1>Αυτή είναι μια κεφαλίδα.</h1><p>Αυτή είναι μια παράγραφος.</p></body></html>
.png "English"){kind=small}
