HTML YouTube βίντεο

HTML YouTube βίντεο

Διαφορετικές εκδόσεις από διαφορετικούς browsers υποστηρίζουν διαφορετικές μορφές βίντεο, πρέπει να μετατρέψετε τα βίντεο σας σε διάφορες μορφές βίντεο για να παίξουν σε όλους τους browsers. Η μετατροπή βίντεο σε διαφορετική μορφή μπορεί να είναι δύσκολη και χρονοβόρα. Μια εύκολη λύση θα ήταν να αφήσετε το YouTube να παίξει τα βίντεο στην ιστοσελίδα σας. Το YouTube αναφέρει το id του βίντεο (σαν QtXby3twMmI), με αυτό το id μπορείτε να τοποθετήσετε το βίντεο στην ιστοσελίδα σας.

 

Δοκιμάστε!

 

HTML Forms

HTML Forms

Οι HTML forms χρησιμοποιούνται για τη συλλογή δεδομένων από το χρήστη. Οι HTML forms περιέχουν διαφορετικούς τύπους εισαγωγής δεδομένων όπως πλαίσια ελέγχου(checkboxes), κουμπιά επιλογής(radio buttons) , κουμπιά υποβολής(submit), και άλλα.

 

Δοκιμάστε!

 

HTML Responsive Web Design.

responsive-1166833_1280

HTML Responsive Web Design

Η ιστοσελίδα σας θα πρέπει να δείχνει καλά και να είναι εύκολη στη χρήση, ανεξάρτητα από τη συσκευή που τη βλέπετε. Το Responsive Web Design κάνει τις ιστοσελίδες σας να φαίνονται καλά σε όλες τις συσκευές ( επιτραπέζιους υπολογιστές , ταμπλέτες και κινητά τηλέφωνα ). Το Responsive Web Design γίνεται με τη χρήση CSS και HTML για να αλλάξετε το μέγεθος , να κρύψετε , να μικρύνετε , να μεγεθύνετε  , ή να μετακινήσετε το περιεχόμενο για να φανεί όμορφο σε οποιαδήποτε οθόνη. Η πιο δημοφιλής πλατφόρμα για την εύκολη δημιουργία Responsive Web Design είναι το Bootstrap, στο οποίο θα αναφερθούμε αναλυτικά σε επόμενα μαθήματα.

Δοκιμάστε!

 

HTML Layouts

web-845803_1280

HTML Layouts(Διατάξεις)

Οι Δικτυακοί τόποι εμφανίζουν συχνά το περιεχόμενο τους σε πολλαπλές στήλες ( όπως ένα περιοδικό ή εφημερίδα ).
Η HTML5 προσφέρει σημασιολογικά στοιχεία που καθορίζουν τα διαφορετικά μέρη μιας ιστοσελίδας.

< Header >  Καθορίζει μια κεφαλίδα για ένα έγγραφο ή ένα τμήμα
< Nav > Καθορίζει το μενού πλοήγησης
< Section > Καθορίζει ένα τμήμα σε ένα έγγραφο
< Article > Καθορίζει ένα ανεξάρτητο αυτοτελές άρθρο
< Αside> Καθορίζει το περιεχόμενο δίπλα σε ένα άλλο περιεχόμενο ( όπως ένα sidebar )
< Footer > Καθορίζει ένα υποσέλιδο για ένα έγγραφο ή ένα τμήμα
< Details> – Καθορίζει επιπλέον λεπτομέρειες
< Summary> – Καθορίζει μια επικεφαλίδα για το < Details>

Δοκιμάστε!

 

HTML Iframes, Encoding

horse-1147790_1280

HTML Iframes(εσωτερικό παράθυρο)

Ένα Iframe χρησιμοποιείται για να εμφανίσει μια ιστοσελίδα μέσα σε μια άλλη ιστοσελίδα.

Δοκιμάστε!


HTML Encoding

Για να εμφανισθεί σωστά μια ιστοσελίδα, ο web browser πρέπει να γνωρίζει την κωδικοποίηση των χαρακτήρων, αυτό καθορίζεται στο meta.
Τι είναι Κωδικοποίηση Χαρακτήρων;
Το ASCII ήταν το πρώτο πρότυπο στη κωδικοποίηση χαρακτήρων, δηλώνει 127 διαφορετικούς αλφαριθμητικούς χαρακτήρες.  Το ANSI (Windows-1252) ήταν το πρότυπο στη κωδικοποίηση χαρακτήρων για τα Windows(256 χαρακτήρες). Το ISO-8859-1 ήταν το πρότυπο στη κωδικοποίηση χαρακτήρων HTML 4(256 χαρακτήρες). Επειδή ANSI και ISO είναι περιορισμένα, το πρότυπο στη κωδικοποίηση χαρακτήρων άλλαξε στο UTF-8 στην HTML5. Το UTF-8 (Unicode) καλύπτει σχεδόν όλους τους χαρακτήρες και σύμβολα παγκόσμια.

Δοκιμάστε!

 

HTML Block, Inline, Classes.

brick-258938_1280

HTML Block

Ένα Block ξεκινά πάντα σε μια νέα γραμμή και καταλαμβάνει όλο το διαθέσιμο πλάτος. Παραδείγματα από block είναι τα div, h1-h6, p, form.

HTML Inline

Ένα inline δεν ξεκινά σε μια νέα γραμμή και καταλαμβάνει όσο πλάτος είναι απαραίτητο. Παραδείγματα από inline είναι τα span, a, img.

Δοκιμάστε!


HTML Classes

Με το class μπορούμε να δηλώσουμε το ίδιο στυλ για ίδια div .

Δοκιμάστε!

 

HTML Πίνακες, Λίστες.

head-197345_1280

HTML Πίνακες

Στην HTML , οι πίνακες ορίζονται με  το < table>.
Οι  γραμμές του πίνακα δηλώνονται με το < tr >.
Κάθε γραμμή του πίνακα χωρίζεται σε δεδομένα με την < td >.

Δοκιμάστε!

 

HTML Λίστες

Στην HTML υπάρχουν τρεις κατηγορίες λιστών.

1. Μη αριθμημένες:
<ul>
<li>Καφές</li>
<li>Τσάι</li>
<li>Γάλα</li>
</ul>

2. Αριθμημένες:
<ol type=“1”>
<li>Καφές</li>
<li>Τσάι</li>
<li>Γάλα</li>
</ol>

3. Περιγραφικές:
<dl>
<dt>Καφές</dt>
<dd>– μαύρο ζεστό ρόφημα</dd>
<dt>Γάλα</dt>
<dd>– λευκό κρύο ρόφημα</dd>
</dl>

Δοκιμάστε!

 

Καλή επιτυχία

 

HTML χρώματα, σύνδεσμοι, εικόνες.

flower-302889_1280

HTML Χρώματα

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

1. Με τη χρήση των ονομάτων τους(π.χ. Red, Orange, Yellow, Cyan, Blue).

2. Με τη χρήση του τύπου: RGB (red, green, blue ). Κάθε παράμετρος (red, green, blue ) ορίζει την ένταση του χρώματος μεταξύ 0 και 255 .
Για παράδειγμα ,  rgb ( 255,0,0 ) εμφανίζεται ως κόκκινο , γιατί το κόκκινο έχει την υψηλότερη τιμή ( 255) ενώ το πράσινο και το μπλε είναι 0.

3. Με τη χρήση δεκαεξαδικών τιμών χρώματος σε μορφή : #RRGGBB , όπου RR (κόκκινο ) , GG ( πράσινο) και ΒΒ ( μπλε) είναι οι δεκαεξαδικές τιμές μεταξύ 00 και FF.
Για παράδειγμα , #FF0000 εμφανίζεται ως κόκκινο , γιατί το κόκκινο είναι στην υψηλότερη τιμή του ( FF) ενώ το πράσινο και το μπλε είναι 0.

Δοκιμάστε!

 

HTML Σύνδεσμοι

Ένας σύνδεσμος είναι ένα κείμενο ή μια εικόνα που μπορείτε να κάνετε κλικ για να πάτε σε ένα άλλο έγγραφο.
Οι σύνδεσμοι ορίζονται με την ετικέτα <a>.

Δοκιμάστε!


HTML Εικόνες

Στην HTML , οι εικόνες δηλώνονται  με την < img> .

Δοκιμάστε!

Καλή επιτυχία.

HTML code, σχόλια, συντομογραφίες, διεύθυνση.

wordpress-552922_1280

HTML για κώδικα προγραμματισμού
Η ετικέτα code χρησιμοποιείται για κώδικα προγραμματισμού. Tip: βάλετε το code μέσα σε ένα pre για να παραμείνουν τα κενά και οι νέες γραμμές.

Δοκιμάστε!

 

HTML σχόλια
Γράψτε <!– ΤΑ ΣΧΟΛΙΑ ΣΑΣ —> για να προσθέσετε σχόλια.

Δοκιμάστε!

 

HTML συντομογραφίες
Η ετικέτα abbr χρησιμοποιείται για συντομογραφίες. Με τις συντομογραφίες δίνετε πληροφορίες στους browsers, στα συστήματα μετάφρασης και τις μηχανές αναζήτησης.

Δοκιμάστε!

 

HTML διεύθυνση
Η ετικέτα address χρησιμοποιείται για να προσδιορίσει τα στοιχεία επικοινωνίας.

Δοκιμάστε!

 

Καλή επιτυχία.

HTML Στυλ – CSS, γραμματοσειρές, Box Μοντέλο, id, class.

internet-594148_1280

HTML Στυλ – CSS

CSS σημαίνει Cascading Style Sheets.
Μπορείτε να προσθέσετε CSS με τους παρακάτω τρόπους:

1. Inline – χρησιμοποιώντας ένα χαρακτηριστικό στυλ στα στοιχεία HTML

Δοκιμάστε!

 

2. Εσωτερική – χρησιμοποιώντας ένα style στοιχείο στην ενότητα head

Δοκιμάστε!

 

3. Εξωτερικές – χρησιμοποιώντας ένα ή περισσότερα εξωτερικά αρχεία CSS.
Ένα εξωτερικό αρχείο CSS μπορεί να γραφεί σε οποιοδήποτε πρόγραμμα επεξεργασίας κειμένου .
Το αρχείο δεν πρέπει να περιέχει καθόλου html tags.
Το αρχείο αρχείο CSS πρέπει να αποθηκεύονται με την επέκταση .css

Δοκιμάστε!

 

CSS – γραμματοσειρές
Το color ορίζει το χρώμα του κειμένου.
Το font-family καθορίζει τη γραμματοσειρά.
To font-size καθορίζει το μέγεθος του κειμένου.

Δοκιμάστε!

 

CSS – Box Μοντέλο
Κάθε στοιχείο HTML έχει ένα αόρατο κουτί γύρω του.
Το border καθορίζει το περίγραμμα.
Το padding ορίζει το κενό στο εσωτερικό του περιγράμματος.
Το margin ορίζει το κενό στο εξωτερικό του περιγράμματος.

Δοκιμάστε!

 

CSS – id 
Για να ορίσετε ένα ιδιαίτερο στυλ για ένα συγκεκριμένο στοιχείο HTML, πρέπει να προσθέσετε το id του.

CSS – class
Για να ορίσετε ένα στυλ για μία κατηγορία στοιχείων HTML, προσθέστε την class του.

Δοκιμάστε!

 

Καλή επιτυχία.

HTML Bold, Strong, Italic, Emphasized, small, mark, del, ins, sub, sup.

office-820390_1920

HTML Bold και Strong μορφοποίηση
Οι ετικέτες <b> </b> και <strong> </strong> χρησιμοποιούνται για έντονα γράμματα.

HTML Italic και Emphasized μορφοποίηση
Οι ετικέτες <i> </i> και <em> </em> χρησιμοποιούνται για πλάγια γράμματα.

HTML small μορφοποίηση
Η ετικέτα <small> </small>  χρησιμοποιείται για μικρά γράμματα.

HTML Marked μορφοποίηση
Η ετικέτα <mark> </mark>  χρησιμοποιείται για επισημασμένα γράμματα.

HTML Deleted μορφοποίηση
Η ετικέτα <del> </del>  χρησιμοποιείται για διαγραμμένα γράμματα.

HTML Inserted μορφοποίηση
Η ετικέτα <ins> </ins>  χρησιμοποιείται για υπογραμμισμένα γράμματα.

HTML Subscript μορφοποίηση
Η ετικέτα <sub> </sub>  χρησιμοποιείται για γράμματα με τη μορφή δείκτη.

HTML Superscript μορφοποίηση
Η ετικέτα <sup> </sup>  χρησιμοποιείται για γράμματα με τη μορφή εκθέτη.

 

Δοκιμάστε!

 

Καλή επιτυχία!

 

HTML επικεφαλίδα, τίτλος, meta, αλλαγή γραμμής, pre, style.

binary-1071776_1280

HTML επικεφαλίδα
Η επικεφαλίδα ορίζεται με τις ετικέτα <head> και περιέχει μεταδεδομένα τα οποία δεν εμφανίζονται. Τοποθετείται μεταξύ <html> και <body> ετικέτας.

HTML τίτλος
Οι τίτλοι ορίζονται με την ετικέτα <title>.

HTML meta
Το χαρακτηριστικό meta μπορεί να χρησιμοποιηθεί για να καθορίσει το σύνολο χαρακτήρων, καθώς και άλλες πληροφορίες σχετικά με το έγγραφο HTML.

Δοκιμάστε!


HTML αλλαγή γραμμής

Η ετικέτα br καθορίζει την αλλαγή γραμμής σε ένα κείμενο.

HTML στοιχείο pre
Το κείμενο μέσα σε ένα pre στοιχείο διατηρεί τα κενά και τις αλλαγές γραμμών.

Δοκιμάστε!

 

HTML style
Η ρύθμιση του στυλ ενός στοιχείου HTML, μπορεί να γίνει με το στοιχείο style (style=property:value).

HTML background-color
Το στοιχείο background-color καθορίζει το χρώμα του φόντου για ένα στοιχείο HTML.

HTML color
Το στοιχείο color καθορίζει το χρώμα για ένα στοιχείο HTML.

HTML font-family
Το στοιχείο font-family καθορίζει το γραμματοσειρά για ένα στοιχείο HTML.

HTML font-size
Το στοιχείο font-size καθορίζει το μέγεθος της γραμματοσειράς για ένα στοιχείο HTML.

HTML text-align
Το στοιχείο text-align καθορίζει την οριζόντια στοίχιση για ένα στοιχείο HTML.

Δοκιμάστε!

 

Καλή επιτυχία!

 

Μαθήματα προγραμματισμού και σχεδιασμού ιστοσελίδων – HTML αρχεία, επικεφαλίδες, παράγραφοι, σύνδεσμοι, εικόνες.

website-647013_1920

Θα ξεκινήσουμε μία σειρά μαθημάτων προγραμματισμού και σχεδιασμού ιστοσελίδων για ηλικίες από 6 μέχρι 106 ετών. Ο προγραμματισμός είναι για όλους, όχι μόνο για αυτούς που τελειώσαν μία σχολή πληροφορικής. Τα παιδιά μας πρέπει να ξεκινήσουν να μαθαίνουν γλώσσες προγραμματισμού από το δημοτικό. Κατά την έναρξη του σχολικού έτους το 2014 τα κρατικά σχολεία της Αγγλίας άρχισαν να διδάσκουν στους μαθητές τους αλγορίθμους. Αποφάσισαν ότι το πρόγραμμα σπουδών του κρατικού σχολείου πρέπει να εμπλουτισθεί με την εκμάθηση προγραμματισμού. Πιστεύουν ότι τα παιδιά δεν πρέπει μόνο να καταναλώνουν την τεχνολογία, αλλά να τη δημιουργούν. Να σταματήσουν να χάνουν το χρόνο τους στα κοινωνικά δίκτυα αλλά να δημιουργούν τα δικά τους προγράμματα. Τα πρώτα μαθήματα μας  είναι στις γλώσσες HTML, CSS και Javascript που είναι απαραίτητες για την δημιουργία ιστοσελίδων.

Τί είναι η HTML;
Η HTML είναι μια γλώσσα σήμανσης(markup) για την περιγραφή των ιστοσελίδων.
HTML σημαίνει Hyper Text Markup Language.
Μια γλώσσα σήμανσης είναι ένα σύνολο από ετικέτες σήμανσης.
Τα έγγραφα HTML περιγράφονται με ετικέτες HTML.
Κάθε ετικέτα HTML περιγράφει διαφορετικό περιεχόμενο του εγγράφου.

HTML Αρχεία
Τα HTML αρχεία ξεκινάνε με <html> και τελειώνουν με </html>.
Τα ορατά μέρη του HTML κειμένου βρίσκονται μεταξύ του <body> και </body>.

Δοκιμάστε!

 

HTML Επικεφαλίδες
Οι επικεφαλίδες HTML ορίζονται με τις ετικέτες < h1 > έως < h6 >.

Δοκιμάστε!

 

HTML παράγραφοι
Οι παράγραφοι HTML ορίζονται με την ετικέτα < p >.

Δοκιμάστε!

 

HTML Σύνδεσμοι
Οι παράγραφοι HTML ορίζονται με την ετικέτα < a >.

Δοκιμάστε!

 

HTML Εικόνες
Οι παράγραφοι HTML ορίζονται με την ετικέτα < img>.
Το αρχείο προέλευσης ( src ) , το εναλλακτικό κείμενο ( ALT ) και το μέγεθος ( πλάτος και ύψος) είναι τα χαρακτηριστικά τους.

Δοκιμάστε!

 

Καλή επιτυχία!!
Σε επόμενη ανάρτηση θα συνεχίσουμε με άλλα χαρακτηριστικά της HTML.