Μάθημα : Σχεδίαση και Ανάπτυξη Ιστοτόπων - Β ΕΠΑΛ

Σχεδίαση και Ανάπτυξη Ιστοτόπων - Β ΕΠΑΛ

2040045155 - ΖΩΗ ΓΚΑΡΑΝΑΤΣΗ

Ενότητες μαθήματος

Εφαρμογή 5: Εμφάνιση… με στυλ

Εφαρμογή 4: Περισσότερες μορφο... Εφαρμογή 6: Οργάνωση του περιε...

<!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">
&lt;!DOCTYPE html>
&lt;html>
&lt;head>
&lt;title>Τίτλος&lt;/title>
&lt;meta charset="UTF-8">
&lt;/head>
&lt;body>
Περιεχόμενο
&lt;/body>
&lt;/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>