Pres 4

Η γλώσσα μορφοποίησης
υπερκειμένου HTML
Papakostas George
Μάθημα: Εισαγωγικά Θέματα WWW

Τι είναι η HTML
• HTML: Hyper Text Mark-up Language
• Hypertext: Υπερκείμενο
• Γλώσσα προγραμματισμού/«παρουσίασης»
για τη δημουργία ιστοσελίδων
• Mark-up: κωδικοποίηση κειμένου μαζί με
πληροφορίες σχετικά με τη δομή και την
εμφάνισή του
Άννα Γεωργιάδου
HTML
• 1989: Ο Tim Berners-Lee επινοεί την HTML στο
CERN (European Laboratory for Particle Physics,
Geneva, Switzerland)
• SGML (Standard Generalized Markup
Language): περιγραφή κειμένου σύμφωνα με τη
δομή του και ανεξάρτητα από την εμφάνισή του
• HTML
• CSS
Ισχύον Πρότυπο
• Το πρότυπο HTML και όλα τα σχετικά με το
web πρότυπα αναπτύσσονται από το World
Wide Web Consortium
• To πιο πρόσφατο πρότυπο της HTML είναι η
HTML 4.01- αναθεώρηση της HTML 4.0 (18
Δεκεμβρίου 1997)
Λειτουργία της HTML
• Ορίζει τη δομή και τη θέση των
στοιχείων (elements) που αποτελούν
ένα web αρχείο
• Όλα τα στοιχεία προσδιορίζονται από
ετικέτες (tags) που δίνουν στους
browsers οδηγίες για το πως θα
απεικονίσουν το περιεχόμενο. Οι ίδιες οι
ετικέτες δεν εμφανίζονται.
Tags and Attributes
• Tag (ετικέτα)
• Attribute (απόδοση χαρακτηριστικού
στην ετικέτα)
Elements- Έννοιες
• Περιέχουν
• Αρχή – Τέλος
• Ανοίγουν – Κλείνουν
• Μπορούν να ενσωματωθούν το ένα στο
άλλο
Elements- Παράδειγμα
Κώδικας:
• Ο καιρός είναι
<b><i>καταπληκτικός</i></b>σήμερα
Εμφάνιση:
• Ο καιρός είναι καταπληκτικός σήμερα
Attributes
• Τα attributes αποδίδουν χαρακτηριστικά
στις ετικέτες, δηλαδή διαφοροποιούν ή
επεκτείνουν την ετικέτα
• Σύνταξη: <element
attribute=“value”>Διαφοροποιημένο
κείμενο</element>
• Παράδειγμα: <font color=“red”>Κόκκινη
γραμματοσειρά</font>
Document Type Definitions
(DTD)
• Εγκυρότητα αρχείου (συμφωνo με το πρότυπο
HTML)
• Προσδιορίζεται πρώτο στο αρχείο
• 3 κατηγορίες
– HTML 4.01 Strict
– HTML 4.01 Transitional
– HTML 4.01 Frameset
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Δομή αρχείου HTML
Δύο κύρια τμήματα
• head: πληροφορίες για το αρχείο (τίτλος,
meta πληροφορίες που περιγράφουν τα
περιεχόμενα)
• body: περιεχόμενα του αρχείου- αυτό που
εμφανίζεται στον browser
Παράδειγμα κώδικα HTML (1)
<html>
<head>
<title>
Ο τίτλος της πρώτης HTML σελίδας
</title>
</head>
<body>
Η πρώτη HTML σελίδα
</body>
</html>
Αποτέλεσμα (1)
Header
Ορίζεται από το <head> και περιγράφει το HTML αρχείο
• <title>: το πιο συχνά χρησιμοποιούμενο και το πλέον
απαραίτητο
• <base>: ορίζει την κύρια τοποθεσία του αρχείου και
χρησιμεύει ως αναφορά για όλα τα pathnames και links
• <link>: ορίζει τη σχέση του παρόντος αρχείου με ένα άλλο
αρχείο
• <meta>: παρέχει πληροφορίες για το αρχείο, όπως λέξεις-
κλειδιά
• <script>: προστίθεται αν θέλουμε να χρησιμοποιήσουμε
JavaScript, VBScript
• <style>: για ενσωμάτωση CSS (Cascading Style Sheets)
Body
Ορίζεται από την ετικέτα <body> και σχεδιάστηκε για
να οριοθετεί το κυρίως σώμα του HTML αρχείου.
• <body bgcolor=“color” text=“color”

link=“color” vlink=“color” alink=“color”>
• <body background=“background.gif”>
• <body marginwidth=0 marginheight=0
leftmargin=0 topmargin=0>
Μορφοποίηση Κειμένου 1
Οι σχετικές με τη μορφοποίηση ετικέτες ορίζουν
πως θα εμφανιστεί το κείμενο στον browser
• Παράγραφοι και επικεφαλίδες
• Απεικόνιση κειμένου
• Απόσταση και θέση χαρακτήρων
• Λίστες
Μορφοποίηση Κειμένου 2
• <p>, <br>, <h1>, <h2>, .., <h6>
• <b>, <i>, <u>
• <font>,<basefont>
• <big>, <small>
• <center>, <left>, <right>
Lists Tags
• Χρησιμοποιούνται για να δημιουργήσουμε
λίστες
• Unordered Lists: “bullets”<ul>
• Ordered Lists: με κάποιου είδους
αρίθμηση<ol>
• Definition Lists: για ορισμούς<dt><dl>
Παράδειγμα κώδικα HTML (2)
<html>
<head>
<title>
Ο τίτλος της δεύτερης HTML σελίδας
</title>
</head>
<body>
<center>
<h2>Η δεύτερη HTML σελίδα</h2>
<p>
</center>
<b><i>Παράδειγμα unordered list</i></b>
<ul>
<li>Δευτέρα</li>
<li>Τρίτη</li>
<li>Τετάρτη</li>
<li>Πέμπτη</li>
<li>Παρασκευή</li>
</ul>
<b><i>Παράδειγμα ordered list</i></b>
<ol>
<li>Γνωστική Ψυχολογία </li>
<li>Ψυχολογία του Κυβερνοχώρου</li>
<li>Κοινωνιολογία του Κυβερνοχώρου</li>
<li>Εισαγωγικά Θέματα WWW</li>
<li>Δυνητική Πραγματικότητα - Βασικές Αρχές</li>
</ol>
<b><i>Παράδειγμα definition list</i></b><p>
<dt>HTML
<dd>Hypertext Mark-up Language</dd>
</dt>
</body>
</html>

Pres 4

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Pres 4

Uploaded by

Copyright:

Available Formats

Η γλώσσα μορφοποίησης

Μάθημα: Εισαγωγικά Θέματα WWW

• <body bgcolor=“color” text=“color”

You might also like