Μάθημα : Σχεδίαση και Ανάπτυξη Ιστοτόπων - Β ΕΠΑΛ
Κωδικός : 2040045155
-
Εμφάνιση όλων των ενοτήτων
-
Εφαρμογή 1: Μια πρώτη, μινιμαλιστική ιστοσελίδα
-
Βίντεο - Παρουσίαση 1ου Μέρους
-
Εφαρμογή 2: Συμβολικό… κείμενο
-
Παράγραφοι, unicode χαρακτήρες και επικεφαλίδες
-
Εφαρμογή 3: Περιεχόμενο με σημασία
-
Εφαρμογή 4: Περισσότερες μορφοποιήσεις
-
Εφαρμογή 5: Εμφάνιση… με στυλ
-
Εφαρμογή 6: Οργάνωση του περιεχομένου με λίστες
-
Εφαρμογή 7: Χρησιμοποιώντας στυλ… εξωτερικό
-
Εφαρμογή 8: Πίνακας… κλασικών επιτυχιών
-
Εφαρμογή 9: Σύνδεσμοι σε χρήσιμα εργαλεία λογισμικού
-
Εφαρμογή 10: Κρυφτό!
-
Εφαρμογή 11: Ελληνικό καλοκαιρινό στυλ
-
Εφαρμογή 12: Δεδομένα σε… φόρμα
-
Εφαρμογή 13: Πολυμεσική πανδαισία
-
Εφαρμογή 14: Χάρτης εικόνας
-
Εφαρμογή 15: Διανυσματικά γραφικά με… τύπο
-
Εφαρμογή 16: Ευπροσάρμοστο περιεχόμενο
-
Glitch environment
-
Εφαρμογή 1: Μια πρώτη, μινιμαλιστική ιστοσελίδα
Εφαρμογή 5: Εμφάνιση… με στυλ
<!DOCTYPE html>
<!-- Εφαρμογή 5: Μορφοποίηση με CSS μέσα στο κείμενο
Αρχείο p05.html
-->
<html lang="el-GR">
<head>
<title>1η ιστοσελίδα HTML</title>
<meta charset="utf-8">
</head>
<body style="">
<h1 style="text-align:center; color:white; background-color:blue;">
Ανάπτυξη ιστοσελίδων (Β<sub>π</sub>): 1<sup>o</sup> παράδειγμα</h1>
<p>Ξεκινούμε τη σειρά παραδειγμάτων περιγράφοντας το σκελετό μιας
ιστοσελίδας HTML, δηλαδή τον ελάχιστο απαραίτητο κώδικα που πρέπει
να γράψουμε και ο οποίος υπάρχει σε κάθε έγγραφο HTML5.</p>
<h2 style="color:blue; background-color:yellow">Περιγραφή</h2>
<p>Το πρώτο παράδειγμα ανάπτυξης ιστοσελίδων με HTML είναι ο βασικός
κώδικας, ο οποίος είναι απαραίτητος για κάθε ιστοσελίδα γραμμένη σε
HTML.</p>
<h2 style="color:blue; background-color:yellow">Μεταδεδομένα</h2>
<p>Δυσκολία: Αρχάριοι - <del>Προχωρημένοι</del></p>
Προγραμματιστής: <ins>Μάριος Κωνσταντίνου</ins>
<p><datetime>Υλοποίηση: Σάββατο, 8 Αυγούστου 2015, 17:20.</datetime></p>
<address>Τόπος:<br>Αγία Τριάδα, <br>Δήμος Θερμαϊκού, <br>Θεσσαλονίκη.</address>
<h2 style="color:blue; background-color:yellow">Ο κώδικας της ιστοσελίδας</h2>
<pre style="font-family:courier; font-size:120%; background-color:lightgreen;
border:1px solid black; display: inline-block">
<!DOCTYPE html>
<html>
<head>
<title>Τίτλος</title>
<meta charset="UTF-8">
</head>
<body>
Περιεχόμενο
</body>
</html>
</pre>
<h2 style="color:blue; background-color:yellow">Διαδικασία</h2>
<p>Χρησιμοποιώντας ένα συντάκτη κειμένου, όπως το Σημειωματάριο ή το Notepad++,
πληκτρολογούμε τον κώδικα της ιστοσελίδας και τον αποθηκεύουμε με όνομα
<code>i01.html</code>.</p>
<p>Κατόπιν ανοίγουμε το αρχείο <code>i01.html</code> με διπλό κλικ από τη
διαχείριση αρχείων του λειτουργικού ή από το μενού Αρχείο, Άνοιγμα του
φυλλομετρητή.</p>
<p>Τότε θα πρέπει να δούμε στο παράθυρο του φυλλομετρητή τη λέξη <samp>
Περιεχόμενο</samp>, γραμμένη με μαύρα γράμματα σε λευκό φόντο και στον
τίτλο του παραθύρου ή στην καρτέλα του φυλλομετρητή τη λέξη <samp>
Τίτλος</samp></p>
</body>
</html>