Δημιουργώντας μια απλή ιστοσελίδα σε html:
Αντιγράφουμε το παρακάτω σε έναν επεξεργαστή κειμένου (σημειωματάριο) και αποθηκεύουμε ως mypage.html
<!DOCTYPE html>
<html>
<title>IEK ΣΙΝΔΟΥ</title>
<body>
<h1> ΤΙΤΛΟΣ </h1>
<h2> ΥΠΟΤΙΤΛΟΣ </h2>
<p>Η πρώτη παράγραφος.</p>
</body>
</html>
Πειραματιζόμαστε με τα παρακάτω:
Εισαγωγή link:
<a href="https://www.google.com">μηχανή αναζήτησης</a>
Εισαγωγή εικόνας:
<img src="image.jpg" alt="my image" width="104" height="142">
Μορφοποίηση παραγράφου:
<p style="color:red;">Η δεύτερη παράγραφος.</p>
Εισάγοντας έξτρα πληροφορία για ένα αντικείμενο – το πεδίο τίτλος εμφανίζεται στην οθόνη όταν με το ποντίκι κινηθούμε πάνω από το αντικείμενο:
<p title="3d paragraf"> Η τρίτη παράγραφος.</p>
Εισάγοντας πεδία CSS σε μια ιστοσελίδα HTML:
Δημιουργήστε το παρακάτω αρχείο mypage1.html
<!DOCTYPE html>
<html>
<title>IEK ΣΙΝΔΟΥ</title>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
h2{
background-color: green;
color: #ff6347;
text-align: center;
}
p {
font-family: verdana;
font-size: 20px;
}
</style>
</head>
<body>
<h1> ΤΙΤΛΟΣ </h1>
<h2> ΥΠΟΤΙΤΛΟΣ </h2>
<p>Η πρώτη παράγραφος.</p> /* Εισαγωγή σχολίων */
</body>
</html>
Εισαγωγή εικόνας ως background:
Δημιουργήστε το παρακάτω αρχείο mypage2.html
<!DOCTYPE html>
<html>
<title>IEK ΣΙΝΔΟΥ</title>
<head>
<style>
body
{
background-image: url("img_tree1.png");
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1> ΤΙΤΛΟΣ </h1>
<h2> ΥΠΟΤΙΤΛΟΣ </h2>
<p>Η πρώτη παράγραφος.</p>
</body>
</html>
