Ασκήσεις HTML - CSS
Μπορείτε να χρησιμοποιήσετε ένα απλό σημειωματάριο για να επεξεργαστείτε τον κώδικα ή για μεγαλύτερη ευκολία μπορείτε να κατεβάσετε έναν από τους παρακάτω editors:
ΑΣΚΗΣΕΙΣ:
Παρακάτω θα βρείτε παραδείγματα απλών ιστοσελίδων με HTML και CSS.
HTML Εργασία (ZIP)
ZIP • 18.7MB
ZIP • 18.7MB
Βασικές Ετικέτες HTML
| Ετικέτα | Περιγραφή |
|---|---|
<html> | Η βασική ετικέτα που περιέχει όλο το έγγραφο HTML. |
<head> | Περιέχει πληροφορίες για τη σελίδα (τίτλο, συνδέσεις CSS κλπ). |
<body> | Περιέχει όλο το περιεχόμενο που εμφανίζεται στη σελίδα. |
<title> | Ο τίτλος της σελίδας που εμφανίζεται στην καρτέλα του browser. |
<h1> – <h6> | Επικεφαλίδες με διαφορετικά μεγέθη. |
<p> | Δημιουργεί μια παράγραφο κειμένου. |
<a> | Δημιουργεί έναν υπερσύνδεσμο. |
<link> | Συνδέει εξωτερικά αρχεία όπως CSS. |
<ul> | Μη αριθμημένη λίστα. |
<ol> | Αριθμημένη λίστα. |
<li> | Στοιχείο λίστας. |
<img> | Εμφανίζει μια εικόνα στη σελίδα. |
<table> | Δημιουργεί έναν πίνακα. |
<tr> | Μια γραμμή πίνακα. |
<th> | Κεφαλίδα πίνακα. |
<td> | Κελί δεδομένων πίνακα. |
<div> | Χρησιμοποιείται για ομαδοποίηση στοιχείων. |
Βασικές Παράμετροι HTML
| Παράμετρος | Περιγραφή | Παράδειγμα |
|---|---|---|
href |
Διεύθυνση ενός συνδέσμου. | <a href="https://example.com">Σύνδεσμος</a> |
src |
Διεύθυνση αρχείου (π.χ. εικόνα). | <img src="image.jpg"> |
id |
Μοναδικό αναγνωριστικό στοιχείου. | <div id="menu"></div> |
class |
Κατηγορία για styling ή JavaScript. | <p class="text"></p> |
Βασικές Ιδιότητες CSS
| Ιδιότητα | Περιγραφή | Inline Παράδειγμα |
|---|---|---|
color |
Χρώμα κειμένου | <p style="color:red;">Κείμενο</p> |
font-size |
Μέγεθος γραμματοσειράς | <p style="font-size:20px;">Κείμενο</p> |
border |
Περίγραμμα στοιχείου | <div style="border:2px solid black;"></div> |
margin |
Εξωτερικό κενό γύρω από στοιχείο | <div style="margin:20px;"></div> |
padding |
Εσωτερικό κενό στοιχείου | <div style="padding:10px;"></div> |
background-color |
Χρώμα φόντου | <div style="background-color:yellow;"></div> |
font-family |
Τύπος γραμματοσειράς | <p style="font-family:Arial;">Κείμενο</p> |
float |
Τοποθετεί στοιχείο αριστερά ή δεξιά | <img style="float:left;"> |
clear |
Καθαρίζει floating στοιχεία | <div style="clear:both;"></div> |
display |
Τρόπος εμφάνισης στοιχείου | <div style="display:none;"></div> |
text-align |
Στοίχιση κειμένου | <p style="text-align:center;">Κείμενο</p> |
width |
Πλάτος στοιχείου | <div style="width:200px;"></div> |
height |
Ύψος στοιχείου | <div style="height:100px;"></div> |
