Pages

theoriahtml

ΘΕΩΡΙΑ ΜΕ ΒΙΝΤΕΟΜΑΘΗΜΑΤΑ

ΘΕΩΡΙΑ: ΒΙΝΤΕΟΜΑΘΗΜΑ 1 - ΛΕΙΤΟΥΡΓΙΑ ΔΙΑΔΙΚΤΥΟΥ 

ΘΕΩΡΙΑ: ΒΙΝΤΕΟΜΑΘΗΜΑ 2 - ΙΣΤΟΡΙΑ ΙΣΤΟΣΕΛΙΔΩΝ

ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML

ΘΕΩΡΙΑ: ΒΙΝΤΕΟΜΑΘΗΜΑ 3 - ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML PART1

ΘΕΩΡΙΑ: ΒΙΝΤΕΟΜΑΘΗΜΑ 4 - ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML PART2

ΘΕΩΡΙΑ: ΒΙΝΤΕΟΜΑΘΗΜΑ 5 - ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML PART3

ΘΕΩΡΙΑ: ΠΕΡΙΣΣΟΤΕΡΕΣ ΠΛΗΡΟΦΟΡΙΕΣ ΓΙΑ ΤΗΝ HTML 

https://www.w3schools.com/html/default.asp

Για να δω τον κώδικα html από κάθε ιστοσελίδα κάνω δεξί κλικ σε κάποιο σημείο της ιστοσελίδας και επιλέγω "Προβολή κώδικα σελίδας"

ΒΑΣΙΚΕΣ ΕΝΤΟΛΕΣ HTML (με παραδείγματα μέσα στα μαύρα κουτιά)

ΜΠΟΡΩ ΝΑ ΤΡΕΞΩ ΚΑΘΕ ΚΟΜΜΑΤΙ ΚΩΔΙΚΑ ΠΟΥ ΠΕΡΙΕΧΕΤΑΙ ΜΕΣΑ ΣΤΑ ΜΑΥΡΑ ΚΟΥΤΙΑ ΠΑΡΑΚΑΤΩ ΑΠΛΩΣ ΑΝΤΙΓΡΑΦΟΝΤΑΣ ΚΑΙ ΕΠΙΚΟΛΛΟΝΤΑΣ ΤΟ ΠΕΡΙΕΧΟΜΕΝΟ ΤΟΥΣ ΣΤΟΝ ΠΑΡΑΚΑΤΩ ΜΕΤΑΦΡΑΣΤΗ

Εναλλακτικά εδώ: https://www.w3schools.com




Όλα τα έγγραφα HTML πρέπει να ξεκινά με μια δήλωση τύπου εγγράφου: <!DOCTYPE html>.
Το ίδιο το έγγραφο HTML ξεκινά με <html> και τελειώνει με </html>.
Το ορατό μέρος του εγγράφου HTML βρίσκεται μεταξύ <body> και </body>.
<!DOCTYPE html>
<html>
<body>

<h1> Η πρώτη μου επικεφαλίδα. </h1>
<p> Η πρώτη μου παράγραφος. </p>

</body>
</html>
<h1> ορίζει τον πιο σημαντικό τίτλο. <h6> ορίζει τον λιγότερο σημαντικό τίτλο.
<h1> Αυτή  είναι η επικεφαλίδα 1.</h1>
<h2> Αυτή  είναι η επικεφαλίδα 2.</h2>
<h3> Αυτή  είναι η επικεφαλίδα 3.</h3>

Οι παράγραφοι HTML ορίζονται με την <p> ετικέτα η οποία τελειώνει σε </p>.
<p> Αυτή είναι μια παράγραφος.</p>
<p> Ακόμα μία παράγραφος.</p>

ΤΡΟΠΟΣ 1:
<!-- Εδώ το σχόλιό -->
ΤΡΟΠΟΣ 2:
/* Εδώ το σχόλιο */

Η <a> ετικέτα η οποία τελειώνει σε </a>.
Ο προορισμός του συνδέσμου καθορίζεται στο href.
<a href="https://www.w3schools.com">ΚΛΙΚ ΕΔΩ ΓΙΑ ΝΑ ΕΠΙΣΚΕΦΤΕΙΣ ΤΟΝ ΣΥΝΔΕΣΜΟ ΤΟΥ W3SCHOOLS </a>
Οι εικόνες HTML ορίζονται με την <img> ετικέτα. Περιέχει το αρχείο προέλευσης (src), το εναλλακτικό κείμενο (alt) , καθώς και το width και height ως χαρακτηριστικά:
<img src="https://travel.gr/w3schools.jpg" alt="ΕΝΑΛΛΑΚΤΙΚΟ ΚΕΙΜΕΝΟ ή ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ" width="104" height="142">

Η <br> ετικέτα ορίζει μια αλλαγή γραμμής και είναι ένα κενό στοιχείο χωρίς ετικέτα κλεισίματος (δηλαδή δεν κλείνει με </br>).
<p style="color:red; fontsize:12px; background-color:powderblue; font-family:verdana; text-align:center;">Αυτή είναι μια παράγραφος με κόκκινα γράμματα, με γραμματοσειρά Verdana, μεγέθους 12px, χρώμα φόντου μπλε ανοιχτό και στοίχιση στο κέντρο.</p>

Η <hr> ετικέτα ορίζει ένα θεματικό διάλειμμα σε μια σελίδα HTML και εμφανίζεται συχνότερα ως οριζόντιος κανόνας. 
Το <hr> στοιχείο χρησιμοποιείται για να διαχωρίσει το περιεχόμενο (ή να ορίσει μια αλλαγή) σε μια σελίδα HTML.
<h1>Αυτή είναι η ενότητα 1.</h1>
<p> Ακόμα μία παράγραφος.</p>

Οι σύνδεσμοι HTML ορίζονται με την <a> ετικέτα η οποία τελειώνει σε </a>.
Ο προορισμός του συνδέσμου καθορίζεται στο href.
<a href="https://www.w3schools.com">ΚΛΙΚ ΕΔΩ ΓΙΑ ΝΑ ΕΠΙΣΚΕΦΤΕΙΣ ΤΟΝ ΣΥΝΔΕΣΜΟ ΤΟΥ W3SCHOOLS </a>
Οι εικόνες HTML ορίζονται με την <img> ετικέτα. Περιέχει το αρχείο προέλευσης (src), το εναλλακτικό κείμενο (alt) , καθώς και το width και height ως χαρακτηριστικά:
<img src="https://travel.gr/w3schools.jpg" alt="ΕΝΑΛΛΑΚΤΙΚΟ ΚΕΙΜΕΝΟ ή ΔΙΕΥΘΥΝΣΗ ΕΙΚΟΝΑΣ" width="104" height="142">

Η <br> ετικέτα ορίζει μια αλλαγή γραμμής και είναι ένα κενό στοιχείο χωρίς ετικέτα κλεισίματος (δηλαδή δεν κλείνει με </br>).
<p>Αυτή είναι μια παράγραφος που συνεχίζεται <br>στην επόμενη αμέσως γραμμή.</p>

Το style χαρακτηριστικό χρησιμοποιείται για την προσθήκη στυλ σε ένα στοιχείο, όπως χρώμα, γραμματοσειρά, μέγεθος και άλλα.
<p style="color:red; fontsize:12px; background-color:powderblue; font-family:verdana; text-align:center;">Αυτή είναι μια παράγραφος με κόκκινα γράμματα, με γραμματοσειρά Verdana, μεγέθους 12px, χρώμα φόντου μπλε ανοιχτό και στοίχιση στο κέντρο.</p>

Η <hr> ετικέτα ορίζει ένα θεματικό διάλειμμα σε μια σελίδα HTML και εμφανίζεται συχνότερα ως οριζόντιος κανόνας. 
Το <hr> στοιχείο χρησιμοποιείται για να διαχωρίσει το περιεχόμενο (ή να ορίσει μια αλλαγή) σε μια σελίδα HTML.
<h1>Αυτή είναι η ενότητα 1.</h1>
<p>Εδώ περιέχεται το κείμενο της ενότητας 1.</p>
<hr>
<h2>Αυτή είναι η ενότητα 2.</h2>
<p>Εδώ είναι το κείμενο της δεύτερης ενότητας.</p>
<hr>

Το <pre> στοιχείο HTML καθορίζει το προσχηματισμένο κείμενο. Το κείμενο μέσα σε ένα <pre> στοιχείο εμφανίζεται σε γραμματοσειρά σταθερού πλάτους (συνήθως Courier) και διατηρεί τόσο τα κενά όσο και τις αλλαγές γραμμής.
<pre>
  Αυτός είναι ο πρώτος στίχος.

  Αυτός είναι ο δεύτερος στίχος.

  Αυτός είναι ο τρίτος στίχος.

  Αυτός είναι ο τελευταίος στίχος.
</pre>

Στοιχεία μορφοποίησης κειμένου:
  • <b> - Έντονο Κείμενο </b>
  • <strong> - Σημαντικό κείμενο </strong>
  • <i> - Πλάγιο κείμενο </i>
  • <em> - Τονισμένο κείμενο </em>
  • <mark> - Επισημασμένο κείμενο </mark>
  • <small> - Μικρότερο κείμενο </small>
  • <del> - Διαγραμμένο κείμενο </del>
  • <ins> - Έγινε εισαγωγή κειμένου </ins>
  • <sub> - Κείμενο συνδρομής </sub>
  • <sup> - Υπερκείμενο κείμενο </sup>
<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>

<a href="url">Κείμενο συνδέσμου.</a>
Το πιο σημαντικό χαρακτηριστικό του <a> στοιχείου είναι το href χαρακτηριστικό, το οποίο δείχνει τον προορισμό του συνδέσμου.
Το κείμενο συνδέσμου είναι το μέρος που θα είναι ορατό στον αναγνώστη.
Κάνοντας κλικ στο κείμενο του συνδέσμου, θα στείλετε τον αναγνώστη στην καθορισμένη διεύθυνση URL. Παράδειγμα παρακάτω:

<a href="https://www.w3schools.com/"> W3Schools.com!</a>
Από προεπιλογή, η συνδεδεμένη σελίδα θα εμφανίζεται στο τρέχον παράθυρο του προγράμματος περιήγησης. Για να το αλλάξετε αυτό, πρέπει να καθορίσετε έναν άλλο στόχο για τον σύνδεσμο.
Το targetχαρακτηριστικό καθορίζει πού να ανοίξετε το συνδεδεμένο έγγραφο.
Το targetχαρακτηριστικό μπορεί να έχει μία από τις ακόλουθες τιμές:
  • _self- Προκαθορισμένο. Ανοίγει το έγγραφο στο ίδιο παράθυρο / καρτέλα με το οποίο έγινε κλικ
  • _blank - Ανοίγει το έγγραφο σε νέο παράθυρο ή καρτέλα
  • _parent - Ανοίγει το έγγραφο στο γονικό πλαίσιο
  • _top - Ανοίγει το έγγραφο σε ολόκληρο το παράθυρο
<a href="https://www.w3schools.com/" target="_blank">W3Schools!</a>
<a href="https://www.w3schools.com/" target="_blank">W3Schools!</a>

Από προεπιλογή, η συνδεδεμένη σελίδα θα εμφανίζεται 

ΒΑΣΙΚΕΣ ΕΝΤΟΛΕΣ CSS (με παραδείγματα μέσα στα μαύρα κουτιά)

Τα Cascading Style Sheets (CSS) χρησιμοποιούνται για τη μορφοποίηση της διάταξης μιας ιστοσελίδας.

Με το CSS, μπορείτε να ελέγξετε το χρώμα, τη γραμματοσειρά, το μέγεθος του κειμένου, το διάστημα μεταξύ των στοιχείων, τον τρόπο τοποθέτησης και διάταξης των στοιχείων, ποιες εικόνες φόντου ή χρώματα φόντου πρόκειται να χρησιμοποιηθούν, διαφορετικές οθόνες για διαφορετικές συσκευές και μεγέθη οθόνης και πολύ περισσότερο!

Συμβουλή: Η λέξη Cascading (επικαλυπτόμενη) σημαίνει ότι ένα στυλ που εφαρμόζεται σε ένα γονικό στοιχείο (parent element) θα ισχύει και για όλα τα θυγατρικά στοιχεία του γονέα. Έτσι, εάν ορίσετε το χρώμα του κυρίως κειμένου σε "μπλε", όλες οι επικεφαλίδες, οι παράγραφοι και άλλα στοιχεία κειμένου στο σώμα θα έχουν επίσης το ίδιο χρώμα (εκτός αν ορίσετε κάτι άλλο)!

Το CSS μπορεί να προστεθεί σε έγγραφα HTML με 3 τρόπους:

  • Inline - χρησιμοποιώντας το styleχαρακτηριστικό μέσα σε στοιχεία HTML
  • Εσωτερικό - χρησιμοποιώντας ένα <style>στοιχείο στην <head>ενότητα
  • Εξωτερικό - χρησιμοποιώντας ένα <link> στοιχείο για σύνδεση με ένα εξωτερικό αρχείο CSS

ΠΑΡΑΔΕΙΓΜΑ ΙΝLΙΝΕ CSS

<h1 style="color:blue;">Μπλε κεφαλίδα</h1>

<p style="color:red;">Κόκκινη παραάγραφος</p>

ΠΑΡΑΔΕΙΓΜΑ ΕΣΩΤΕΡΙΚΟΥ 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>