Μαθήματα γλώσσας HTML

mathimata-htmlΗ HTML είναι μια περιγραφική γλώσσα, δηλαδή ένας ειδικός τρόπος γραφής κειμένου και κλήσης άλλων αρχείων ή εφαρμογών βασισμένος σε οδηγίες (tags).

Ο Web client αναγνωρίζει αυτόν τον ειδικό τρόπο γραφής και εκτελεί τις εντολές που περιέχονται σε αυτόν.

Τα αρχικά HTML προέρχονται από τις λέξεις HyperText Markup Language. 

Tag ονομάζουμε μία οδηγία γραμμένη σε HTML, την οποία πρέπει να αναγνωρίσει και ερμηνεύσει ο browser. Τα tags βρίσκονται πάντοτε μεταξύ των συμβόλων < και >. Π.χ. η οδηγία για να γίνει ένα κείμενο bold είναι:

<b>το κείμενο που θα είναι bold </b>.

Αυτό ερμηνεύεται ως:

<b> = (ότι βρεις από δω και πέρα θα το παρουσιάζεις σαν bold)

</b> = (σταματάς να κάνεις bold ότι βρεις από δω και κάτω)

 

ΠΛΕΟΝΕΚΤΗΜΑΤΑ ΚΑΤΑΣΚΕΥΗΣ ΣΕΛΙΔΩΝ ΜΕ ΚΩΔΙΚΑ HTML

  • Σελίδες που φορτώνουν πιο γρήγορα - Τα αυτόματα προγράμματα τοποθετούν συχνά άχρηστο κώδικα που μπερδεύει τον browser και καθυστερεί την εμφάνιση της σελίδας (π.χ. table rendering)
  • Μεγαλύτερη αξιοπιστία - Όπως κάθε λογισμικό, έτσι και τα προγράμματα κατασκευής σελίδων δεν είναι 100% WYSIWYG (What you see is what you get). Το τελικό αποτέλεσμα που μας παρουσιάζουν λοιπόν δεν είναι πάντοτε ακριβώς το ίδιο με αυτό που θα δει ο επισκέπτης της σελίδας μας.
  • Εξυπνότερη σχεδίαση - Μας είναι ευκολότερο να δημιουργήσουμε σελίδες που θα προσαρμόζονται αυτόματα στις ιδιαιτερότητες της οθόνης κάθε χρήστη (π.χ. χρησιμοποιώντας ποσοστά αντί για απόλυτες τιμές στο πλάτος των tables).
  • Καλύτερος έλεγχος του αποτελέσματος - Κάθε αυτόματο πρόγραμμα αποτελεί ουσιαστικά έναν μεταφραστή που μετατρέπει τη σχεδίαση και τις επιθυμίες μας σε γλώσσα HTML. Καμία μετάφραση όμως δεν είναι άψογη (ειδικά αν γίνεται από υπολογιστή) και πολλά σημαντικά στοιχεία κινδυνεύουν να απαλειφθούν από το τελικό αποτέλεσμα.
  • Υψηλότερη ευελιξία - Μπορούμε να χρησιμοποιήσουμε το σύνολο των δυνατοτήτων της γλώσσας HTML, ενώ κάθε αυτόματο πρόγραμμα υποστηρίζει μόνο ένα υποσύνολο αυτών.
  • Ευκολότερη επίλυση προβλημάτων (debugging) - Επειδή κατανοούμε απόλυτα τις ιδιομορφίες και τα χαρακτηριστικά της σελίδας που δημιουργήσαμε, μπορούμε να βρούμε ευκολότερα και να διορθώσουμε τα όποια προβλήματα εμφανιστούν σε αυτήν (π.χ. ασυμβατότητα με κάποιους browsers).
  • Επέκταση σε άλλα γνωστικά αντικείμενα - Όποιος γνωρίζει κώδικα HTML μπορεί πολύ ευκολότερα να κατανοήσει και να αξιοποιήσει άλλες τεχνολογίες όπως XML, scripting κ.λπ.

 


ΠΡΟΓΡΑΜΜΑ ΣΠΟΥΔΩΝ   γλώσσα HTML


ΕΙΣΑΓΩΓΙΚΑ

  • Τι είναι μια web σελίδα (web page)
  • Τι είναι ένα web site
  • Τι είναι web server και web client
  • Τι ονομάζουμε δομή μιας web παρουσίασης η ενός web site
  • Τι είναι η γλώσσα html
  • Τι είναι μια οδηγία (tag)
  • Πλεονεκτήματα κατασκευής σελίδων με κώδικα html
  • Πως κατασκευάζεται μια απλή web σελίδα

ΤΑ ΠΡΩΤΑ ΒΗΜΑΤΑ

  • Βήμα 1
  • Βήμα 2
  • Βήμα 3

ΟΡΙΣΜΟΣ ΠΑΡΑΓΡΑΦΩΝ

  • Αλλαγές γραμμών
  • Τίτλος σελίδας
  • Πως ορίζουμε το χρώμα του φόντου και του κειμένου της σελίδας
  • Ο δεκαεξαδικός κωδικός bold κείμενο υπογραμμισμένο κείμενο έμφαση  περισσότερη έμφαση επικεφαλίδες (headings)
  • Στοίχιση <align>
  • Στοίχιση στο κέντρο
  • Οριζόντιες γραμμές <hr>
  • Ορισμός γραμματοσειρών <font> ... </font>

ΚΟΥΚΙΔΕΣ ΚΑΙ ΑΡΙΘΜΗΣΗ

  • Αριθμημένες λίστες
  • Λίστες χωρίς αρίθμηση (unordered lists)
  • Λίστες μέσα σε άλλες λίστες
  • ΕΙΚΟΝΕΣ
  • Προσθέτοντας μια εικόνα σε μια web σελίδα
  • Εικόνες και γραμμή κειμένου
  • Απόσταση του κειμένου από μια εικόνα (html 3.2)
  • Η παράμετρος border
  • Οι παράμετροι height & width

ΠΑΡΑΠΟΜΠΕΣ (LINKS)

  • Παραπομπές από μια σελίδα σε μια άλλη κάπου στο internet
  • Παραπομπές από μια σελίδα σε μια άλλη που βρίσκεται στον ίδιο φάκελο (directory)
  • Παραπομπές από μια σελίδα σε μια άλλη που βρίσκεται σε υποφάκελο (subdirectory)
  • Παραπομπές από μια σελίδα σε μια άλλη που βρίσκεται σε ανώτερο φάκελο (directory)
  • Παραπομπές από μια σελίδα σε μια άλλη που βρίσκεται σε άλλο (γενικά) φάκελο (directory)
  • Παραπομπές από ένα σημείο μιας σελίδας σε ένα άλλο
  • Παραπομπές από μια σελίδα σε ένα σημείο μιας άλλης σελίδας

ΠΙΝΑΚΕΣ

  • Πως δημιουργούμε απλούς πίνακες
  • Caption table headings table databorder παράμετρος border
  • <caption>...</caption> το θέμα (Τίτλος) του πίνακα
  • Η θέση ενός πίνακα μέσα σε μια σελίδα
  • Η θέση των περιεχομένων των κελιών ενός πίνακα
  • Οριζόντιες θέσεις των κελιών κάθετες θέσεις των κελιών περίπλοκοι πίνακες
  • Rowspan & colspan κελιά που εκτείνονται σε περισσότερες από μια σειρές η στήλες
  • Μέγεθος πίνακα
  • Μέγεθος εξωτερικού περιθωρίου (border)
  • Μέγεθος εξωτερικού περιθωρίου κελιών (cellspacing)
  • Μέγεθος εσωτερικού περιθωρίου κελιών (cellpadding)

ΠΡΟΧΩΡΗΜΕΝΕΣ ΤΕΧΝΙΚΕΣ

  • Πως κάνουμε μια σελίδα να παίζει ήχο
  • Στοίχιση με την τεχνική του διάφανου pixel
  • Η χρήση του transparent pixel διαχείριση ομάδων κειμένου με τις blockquote και div
  • Πως προσθέτουμε σχόλια στον κώδικα μιας σελίδας
  • Πως κάνουμε μια γραμμή κειμένου να σκρολαρει
  • Πως προσθέτουμε μια σελίδα μέσα σε μια άλλη (iframe)
  • Οδηγία <iframe>

 

Joomla Templates - by Joomlage.com