HTML
Τι είναι η HTML? H HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language (γλώσσα μορφοποίηση υπερκειμένου) και είναι η βασική γλώσσα δόμηση σελίδων του World Wide Web (ή απλά ιστού: Web).
Tags Η γλώσσα χρησιμοποιεί ένα αριθμό από tags για την μορφοποίηση κειμένου, για την δημιουργία συνδέσμων (links) μετάβασης ανάμεσα στις ιστοσελίδες, για την εισαγωγή εικόνων, ήχου κ.α. Όταν ένας browser ανοίγει ένα αρχείο HTML τα στοιχεία (tags) μεταφράζονται σε κατάλληλα χαρακτηριστικά με αποτελέσματα στην εμφάνιση και στην λειτουργικότητα της συγκεκριμένης σελίδας.
Υπερκείμενο Τα αρχεία υπερκειμένων αποτελούν δίκτυα πληροφοριών ηλεκτρονικής μορφής, που στην πιο απλή μορφή είναι κείμενο. Οι παραπομπές είναι το συνδετικό στοιχείο που ορίζει αυτό το δίκτυο. Η λειτουργία των παραπομπών ελέγχεται από τον υπολογιστή.
Εκδόσεις HTML Το 1994 αναπτύσσεται το πρότυπο HTML 2.0 η έκδοση 3.0 δεν έγινε αποδεκτή από τις εταιρείες Microsoft και Netscape και αντι-καταστάθηκε το 1996 από την έκδοση 3.2 η έκδοση 4.0 παρουσιάστηκε τον Ιούνιο του 1997 ασυμβατότητες
Γλώσσες προγραμματισμού στο Internet Αρχικά, αναπτύχθηκε από την εταιρεία Netscape η γλώσσα JavaScript. Παράλληλα η εταιρεία Microsoft ανέπτυξε απ' την πλευρά της μια δική της έκδοση της γλώσσας JavaScript, την οποία ονόμασε Jscript, καθώς και μια έκδοση της γλώσσας Basic ειδικά για το διαδίκτυο την οποία ονόμασε VBScript. Οι ενδογενείς αδυναμίες της HTML, μιας κατεξοχήν γλώσσας μορφοποίησης υπερκειμένου, σύντομα οδήγησαν στην ανάπτυξη γλωσσών προγραμματισμού για το διαδίκτυο.
Δημιουργία αρχείων HTML Η δημιουργία αρχείων HTML είναι πολύ απλή. Αρκεί να «τρέξουμε» έναν οποιοδήποτε διορθωτή κειμένου text, όπως το Notepad των Windows. Να γράψουμε τον κώδικα HTML που επιθυμούμε και να το αποθηκεύσουμε (σώσουμε) σε ένα αρχείο με κατάληξη .htm ή .html. Εναλλακτικά χρήση ειδικών εφαρμογών HTML editors
Παράδειγμα Κώδικας <html> <head> <title> Αυτός είναι ο τίτλος μου </title> </head> </html>
Αποτέλεσμα
Παράδειγμα Κώδικας <html> <body> αυτό είναι ένα παράδειγμα που δείχνει ότι ανεξάρτητα από το πόσες φορές έχουμε πατήσει enter το κείμενο θα εμφανίζεται σε μία σειρά έως τη δεξιά άκρη του παραθύρου </body> </html>
Αποτέλεσμα
Δομή αρχείου HTML <html> <head> ..... </head> <body> ...... </body> </html>
Tags στη περιοχή του tag <head> <title> This is my title </title> <meta name=keywords content= “συνταγές, υλικά, μαγείρεμα”> <meta name=description content=“Συνταγές μαγειρικής”>
Περιοχή <head> προσωπικής σελίδας <html> <head> <title> Προσωπική σελίδα Ανδρέα Βέγλη </title> <meta name=keyword content=“σπουδές εργασίες, ενδιαφέροντα”> <meta name=description content = “Ελάτε να με γνωρίσετε από κοντά”> </head>
Tags καθορισμού περιβάλλοντος <body topmargin=20 leftmargin=25> Το Enter δεν εισάγει κενές γραμμές Tag <br> δεν έχει tag τέλους Tag <p> παραγράφου μπορεί να χρησιμοποιηθεί και χωρίς tag τέλους
Μορφοποίηση κειμένου Tag <pre> Tag επικεφαλίδων <h1>, <h2>,...<h6> Tag εσοχής <blockquote>
Επικεφαλίδες
Blockquote
Μορφοποίηση κειμένου <b> έντονα <Ι> πλάγια <u> υπογραμμισμένα <tt> γραφομηχανή <strike> διακριτή γραφή <sup> εκθέτης <sub> δείκτης <small> μικρά γράμματα <big> μεγάλα γράμματα
Tag <basefont> Παράμετροι : Face, Color, Size
Tag <basefont> Sizes: 1 8pt 2 10pt 3 12pt 4 14pt Colors: Black Silver Gray White Maroon Red Fuchia Green Lime Olive Yellow Navy Blue Teal Aqua
Tag <font> Ίδιες παραμέτρους με το tag <basefont> Μία βασική διαφορά έχει tag αρχής tag τέλους
Tag < body> Παράμετροι text, bgcolor
Χρώμα σε κείμενο Σε περίπτωση που θέλουμε να ορίσουμε γενικά το χρώμα του κειμένου σε ολόκληρη της ιστοσελίδα χρησιμοποιούμε τα tags <basefont> ή <body> Σε περίπτωση που θέλουμε να ορίσουμε χρώμα μόνο για συγκεκριμένο κείμενο χρησιμοποιούμε το tag <font>
Εικόνα υπόβαθρου Παράμετρος background του tag <body>
Οριζόντιες γραμμές Tag <hr> παράμετροι: size, width, color, align Size: πάχος (1-100) Width: % του πλάτους του παραθύρου της ιστοσελίδας Color: χρώμα Align: στοίχιση (left, right, center)
Οριζόντιες γραμμές
Προσθήκη γραφικού <img src = "image.gif"> Το αρχείο image.gif πρέπει να βρίσκεται στον ίδιο φάκελο με το έγγραφο html. Το γραφικό καταλαμβάνει χώρο σαν ένας χαρακτήρας κειμένου.
Στοίχιση του γραφικού: align = top, center, bottom
Στοίχιση του γραφικού
Στοίχιση κειμένου γύρω από γραφικό Align=left, right
Στοίχιση κειμένου γύρω από γραφικό Align=left, right
Ρυθμίσεις απόστασης κειμένου από γραφικό vspace, hspace
Ρυθμίσεις απόστασης κειμένου από γραφικό vspace, hspace
Καθορισμός διαστάσεων γραφικού width, height
Καθορισμός διαστάσεων γραφικού width, height
Κείμενο ή πολυμεσικό στοιχείο. Υπερ-συνδέσεις Οι υπερ-συνδέσεις είναι το χαρακτηριστικό που επιτρέπει στους χρήστες να μετακινού-νται από τη μία ιστοσελίδα σε μία άλλη. Το anchor (άγκυρα) είναι το τμήμα της υπερ-σύνδεσης που εμφανίζεται στην ιστοσελίδα Κείμενο ή πολυμεσικό στοιχείο. <a href= "http://www.auth.gr"> κάνε κλικ για να πας στο Αριστοτέλειο Πανεπιστήμιο </a>
Υπερ-συνδέσεις Υπερ-σύνδεση κειμένου <a href= "http://www.auth.gr"> κάνε κλικ για να πας στο Αριστοτέλειο Πανεπιστήμιο </a> Υπερ-σύνδεση γραφικού <a href= "http://www.mysite.com"> <img src=online.gif></a> Υπερ-σύνδεση e-mail <a href= "mailto:youraddress@server.com"> e-mail</a>.
Υπερ-συνδέσεις
Υπερ-συνδέσεις
Εσωτερικές υπερ-συνδέσεις Αποτελούνται από δύο τμήματα <a name="gothere"> προορισμός </a> <a href= "#gothere"> αποστολή</a>