HTML και CSS
Θα χρησιμοποιήσουμε το αρχείο skeleton.html για να εξηγήσουμε τη δομή ενός αρχείο HTML και το αρχείο style.css για να εξηγήσουμε τα λεγόμενα επάλληλα φύλλα στυλ (Cascading Style Sheets).
<!doctype html>
<html>
Γραμμές 1-2: Ορισμός του τύπου του αρχείου. Οδηγία προς τον σελιδομετρητή για την έκδοση
της γλώσσας HTML που χρησιμοποιήθηκε. Πρέπει να είναι η πρώτη εντολή σε κάθε αρχείο HTML. Η δεύτερη
γραμμή περιέχει την ετικέτα <html> η οποία σηματοδοτεί την αρχή του στοιχείου
html, τη ρίζα όλων των άλλων στοιχείων ενός αρχείου HTML.
<head>
<meta charset="utf-8" />
<title>MEM-339 - Technical support of Computer Labs</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Webpage of MEM-339 Department of Mathematics and Applied Mathematics" />
<meta name="keywords" content="mathematics, applied, applied mathematics, University of Crete, Heraklion, Crete, Greece" />
<meta name="robots" content="all" />
<meta name="revisit-after" content="5 days" />
<meta name="author" content="Michael Plexousakis" />
<link href="https://fonts.googleapis.com/css?family=Ubuntu:600,400italic,400&subset=greek" rel="stylesheet" type="text/css" />
<link href="https://fonts.googleapis.com/css?family=Inconsolata" rel="stylesheet" type="text/css" />
<link href="css/normalize.css" rel="stylesheet" type="text/css" media="all" />
<link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
<script>document.documentElement.className=document.documentElement.className.replace(/\bno-js\b/,'js');</script>
</head>
Γραμμές 3-18: Το στοιχείο head του αρχείου, που περιλαμβάνει δεδομένα για τα δεδομένα του κώδικα HTML.
Συγκεκριμένα: η γραμμή 4 ορίζει τον τρόπο κωδικοποίησης των χαρακτήρων, στο συγκεκριμένο παράδειγμα Unicode. H γραμμή 5
ορίζει τον τίτλο που ο σελιδομετρητής παρουσιάζει για το συγκεκριμένο αρχείο, Οι γραμμές 6 έως 12 παρέχουν πληροφορίες
για διάφορα χαρακτηριστικά του αρχείου, όπως το συγγραφέα του, μια μικρή σύνοψη του περιεχομένου του, λέξεις κλειδιά
για τις μηχανές αναζήτησης κ.λ.π. Οι γραμμές 13-16 είναι ετικέτες-σύνδεσμοι με άλλα αρχεία ή πόρους, όπως γιά
παράδειγμα επάλληλα φύλλα στυλ (Cascading Style Sheets) για τη μορφοποίηση του κειμένου. Η γραμμή 17 είναι μια
εντολή σε JavaScript η οποία ορίζει την κλάση js για την ετικέτα <html>.
<body class="home lang-el">
Γραμμή 19: Αρχή του στοιχείου <body> το οποίο περιέχει to κείμενο της ιστοσελίδας. Εδώ, το συγκεκριμένο
στοιχείο έχει τις κλασεις home και lang-el.
<header class="group">
<div class="container">
<div class="circle"><a href="skeleton.html">339</a></div>
<h1>Technical support of Computer Labs</h1>
</div>
</header>
Γραμμές 20-25: Το στοιχείο header περιέχει, συνήθως, εισαγωγικό κείμενο, ετικέτες επικαφαλίδες (h1, h2, κλπ.) και
στοιχεία πλοήγησης. Εδώ, το στοιχείο header είναι κλάσης group και περιέχει τα στοιχεία div και h1.
Το στοιχείο div χρησιμεύει ως μέσο ομαδοποίησης και περιορισμού άλλων στοιχείων. Το στοιχείο h1 είναι το σημαντικότερο
στοιχείο-επικαφαλίδα, ενώ h6 είναι το λιγότερο σημαντικό.
<div class="main-content">
<div class="container">
Γραμμές 26, 27: Δύο στοιχεία ομαδοποίησης περιεχομένου, το πρώτο κλάσης main-content, το δεύτερο κλάσης container. Οι
κλάσης χρησιμεύουν στη μορφοποίηση των στοιχείων στα οποία ορίζονται. Η μορφοποίηση ορίζεται σε αρχείο τύπου CSS.
<p><strong>Instructor</strong>: Michael Plexousakis. Office B-309, T: 2810-39-3709, E: <a href="mailto:plex@uoc.gr">plex@uoc.gr</a><br />
<strong;>Office hours</strong>: Tuesday 11-1, Friday 11-1 or by appointment.</p>
<p><strong>Lectures</strong>: Friday 1-3, Γ-109</p>
Γραμμές 28-30: Το στοιχεία p είναι μια παράγραφος. Το στοιχείο a ορίζει ένα σύνδεσμο στο αντικείμενο
mailto:plex@uoc.gr με ετικέτα plex@uoc.gr, ενώ το στοιχείο strong μορφοποιεί το περιεχόμενό του με έντονη
γραμματοσειρά. Η ετικέτα <br /> μεταφέρει τη στοιχειοθέτηση στην επόμενη γραμμή.
<h2 class="fancy">Ѕescription</h2>
<p>The course aims to …</p>
<h2 class="fancy">Course grading policy</h2>
<p>Two credits (ECTS) are awarded.</p>
<h2>Announcements</h2>
<h2>Calendar</h2>
Γραμμές 31-36: Το στοιχείο h2 είναι το αμέσως λιγότερο σημαντικό στοιχείο επικαφαλίδα από το στοιχείο h1, γεγονός που
αντικατοπτρίζεται με χρήση μικρότερης γραμματοσειράς. Η κλάση fancy
μορφοποιεί κατάλληλα κάθε στοιχείο h2, προσθέτοντας μια κάθετη, κόκκινη γραμμή πρίν το περιεχόμενο του στοιχείου.
<article>
<aside>4 Oct 2016
<p>See the <a href="lecture20161007.html">notes for the 4th Oct lecture</a>.</p>
</article>
Γραμμές 37-40: Τα στοιχεία article και aside χρησιμοποιούνται για την ομαδοποίηση περιεχομένου
όπως ένα άρθρο ή μια μικρή ιστορία, ή μια ανάρτηση σε blog (ιστολόγιο) ή forum. Τα περιεχόμενα του στοιχείου aside
έχουν, συνήθως, συνοδευτικό ρόλο προς κάποιο κείμενο μέσα σε ένα στοιχείο article.
</div> <!-- end container -->
</div> <!-- end main-content -->
Γραμμές 41, 42: Ετικέτες για το τέλος των στοιχείων container και main-content. Οι χαρακτήρες
<!-- και --> περικλείουν σχόλια.
<footer>
<div class="container">
<p>Made on a <a href="http://www.apple.com/">Mac</a>.
Type set in <a href="http://www.google.com/fonts/specimen/Ubuntu">Ubuntu</a>.</p>
</div>
</footer>
Γραμμές 43-48: Το στοιχείο footer χρησιμοποιείται για να ομαδαποιήσει άλλα στοιχεία τα οποία
εμφανίζονται στο τέλος ενός κειμένου, όπως το όνομα του συγγραφέα, στοιχεία επικοινωνίας ή πληροφορίες
πνευματικής ιδιοκτησίας.
</bod>>
</html>
Γραμμές 49, 50: Ετικέτες για το τέλος των στοιχείων body και html.