ΕΙΣΑΓΩΓΗ
Στο σημερινό δωρεάν μάθημα HTML & CSS θα δούμε πως προσθέτουμε σχόλια (comments) στο HTML κώδικα, όπως και πως δημιουργούμε τρία διαφορετικά είδη λίστας: ordered, unordered, και description.
CODE COMMENTS
Κάθε site, όσο μικρό και αν ξεκινήσει στην αρχή, με το πέρασμα του χρόνου σίγουρα θα μεγαλώσει τόσο στο κώδικα όσο και στις λειτουργίες που θα προσφέρει. Για τους τελικούς χρήστες και τους πελάτες του site αυτές οι αλλαγές κατά μεγάλο ποσοστό θα είναι ευχάριστες αφού θα έχουν περισσότερες επιλογές και δυνατότητες. Για τον web προγραμματιστή όμως αυτό σημαίνει σημαντική αύξηση του κώδικα τόσο σε HTML όσο και σε CSS και JavaScript. Σε αυτές τις περιπτώσεις είναι συνετό και χρήσιμο να προσθέτουμε σχόλια στο κώδικα μας έτσι ώστε ανά πάσα στιγμή βλέποντας τα σχόλια να θυμηθούμε πολύ γρήγορα ποια είναι η λειτουργία του κώδικα που μελετάμε εκείνη τη στιγμή.
Τα σχόλια, αν και γράφονται μέσα στον HTML κώδικα δεν είναι ορατά στη σελίδα που εμφανίζεται στο browser. Χρησιμοποιούνται μόνο από τους προγραμματιστές για να δώσουν μια σύντομη περιγραφή και επεξήγηση για τον κώδικα που πρόκειται να ακολουθήσει.
Εκτός όμως από το γεγονός ότι περιγράφουν τον κώδικα, προσφέρουν ταυτόχρονα και μια συνοπτική εικόνα της δομής της σελίδας. Πριν όμως αναλύσουμε ένα συγκεκριμένο παράδειγμα ας δούμε πως ορίζουμε σχόλια σε HTML σελίδες. Τα comments ξεκινάμε με <!-- και τελειώνουν με --> . Ανάμεσα γράφουμε όσες λέξεις ή προτάσεις χρειαζόμαστε για να περιγράψουμε τον κώδικα που πρόκειται να ακολουθήσει.
Ας γυρίσουμε πίσω στην index.html σελίδα με την οποία πειραματιζόμαστε από την αρχή των δωρεάν HTML & CSS μαθημάτων και ας την απλοποιήσουμε λίγο δημιουργώντας μόνο δύο παραγράφους με την κάθε παράγραφο να έχει ένα τίτλο.
!DOCTYPE html>
<html lang="en">
<head>
<met acharset="UTF-8">
<meta http-equiv="X-UA-Compatible"content="IE=edge">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>Ground of Code</title>
</head>
<body>
<h1>Ground of Code - #1 Site in free programming lessons</h1>
<h3>Introduction to HTML</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Quia at molestias dolorum, modi cum repudiandae est enim.
Harum possimus facilis esse asperiores, a ipsum. Excepturi.</p>
<h3>Introduction to Python</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Id quae impedit consequuntur. Assumenda, labore soluta.
Esse praesentium vero tempora quod, totam officia? Labore,
corrupti odio!</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<met acharset="UTF-8">
<meta http-equiv="X-UA-Compatible"content="IE=edge">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>Ground of Code</title>
</head>
<body>
<h1>Ground of Code - #1 Site in free programming lessons</h1>
<!-- Beginning of first article -->
<h3>Introduction to HTML</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit.
Quia at molestias dolorum, modi cum repudiandae est enim.
Harum possimus facilis esse asperiores, a ipsum. Excepturi.</p>
<!-- End of first article -->
<!-- Beginning of second article -->
<h3>Introduction to Python</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
Id quae impedit consequuntur. Assumenda, labore soluta.
Esse praesentium vero tempora quod, totam officia? Labore,
corrupti odio!</p>
<!-- End of second article-->
</body>
</html>
Αν και μπορεί να σας φαίνεται στην αρχή λίγο χρονοβόρα αυτή η διαδικασία, πιστέψτε με αξίζει τον κόπο και θα εκτιμήσετε την αξία τους όταν ξανακοιτάξετε τον κώδικα σας μερικούς μήνες αργότερα.
LISTS
Η παρουσίαση δεδομένων με τη μορφή λίστας είναι συνηθισμένο φαινόμενο στις ιστοσελίδες. Η τελική μορφή μιας λίστας είναι παρόμοια με εκείνη που θα δημιουργούσατε μέσα από ένα text editor όπως Microsoft Word. Δηλαδή μπορεί να παρουσιάζει τα στοιχεία του κειμένου είτε με bullets, είτε με αριθμούς είτε με άλλα διαφορετικά σύμβολα ανάλογα με την ανάγκη του κειμένου.
Στην HTML5 υπάρχουν τρία διαφορετικά είδη λίστας – ordered, unordered, και description. Πάμε να τα δούμε ένα προς ένα μέσα από απλά παραδείγματα.
ORDERED LIST
Μια ordered list πάντα παρουσιάζει τα στοιχεία έχοντας μπροστά έναν αριθμό ή σύμβολο που ορίζει την αρίθμηση των στοιχείων. Αν δεν ορίσουμε εμείς πως ακριβώς θέλουμε να αριθμήσουμε τα στοιχεία μας (αλφαβητικά, αριθμητικά, κτλ) τότε ο προκαθορισμένος τρόπος από την HTML5 είναι ο αριθμητικός.
Για ορίσουμε ότι θέλουμε να δημιουργήσουμε μια λίστα αριθμημένων στοιχείων πρέπει σαν πρώτο βήμα να ορίσουμε την αρχή και το τέλος της λίστας χρησιμοποιώντας το <ol> tag.
!DOCTYPE html>
<html lang="en">
<head>
<met acharset="UTF-8">
<meta http-equiv="X-UA-Compatible"content="IE=edge">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>Ground of Code</title>
</head>
<body>
<h1>Ground of Code - #1 Site in free programming lessons</h1>
<!-- Beginning of first article -->
<h3>Introduction to HTML</h3>
<p>On this free training you will learn:</p>
<ol>
</ol>
</body>
</html>
Ανάμεσα στα <ol> tags, γράφουμε το <li> tag σε κάθε στοιχείο πληροφορίας που περιέχει η λίστα.
<!DOCTYPE html>
<html lang="en">
<head>
<met acharset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ground of Code</title>
</head>
<body>
<h1>Ground of Code - #1 Site in free programming lessons</h1>
<!-- Beginning of first article -->
<h3>Introduction to HTML</h3>
<p>On this free training you will learn:</p>
<ol>
<li>Basic structure of an html page</li>
<li>Common HTML5 elements</li>
<li>Ordered and unordred lists</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<met acharset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ground of Code</title>
</head>
<body>
<h1>Ground of Code - #1 Site in free programming lessons</h1>
<!-- Beginning of first article -->
<h3>Introduction to HTML</h3>
<p>On this free training you will learn:</p>
<ol type="A">
<li>Basic structure of an html page</li>
<li>Common HTML5 elements</li>
<li>Ordered and unordred lists</li>
</ol>
</body>
</html>
Μπορούμε επίσης να αντιστρέψουμε την μέτρηση με το reversed attribute.
<!DOCTYPE html>
<html lang="en">
<head>
<met acharset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ground of Code</title>
</head>
<body>
<h1>Ground of Code - #1 Site in free programming lessons</h1>
<!-- Beginning of first article -->
<h3>Introduction to HTML</h3>
<p>On this free training you will learn:</p>
<ol type="A" reversed="true">
<li>Basic structure of an html page</li>
<li>Common HTML5 elements</li>
<li>Ordered and unordred lists</li>
</ol>
</body>
</html>
Μπορούμε επίσης να αλλάξουμε τον αριθμό από τον οποίο αρχίζει η αρίθμηση χρησιμοποιώντας το start attribute.<!DOCTYPE html>
<html lang="en">
<head>
<met acharset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ground of Code</title>
</head>
<body>
<h1>Ground of Code - #1 Site in free programming lessons</h1>
<!-- Beginning of first article -->
<h3>Introduction to HTML</h3>
<p>On this free training you will learn:</p>
<ol start="10">
<li>Basic structure of an html page</li>
<li>Common HTML5 elements</li>
<li>Ordered and unordred lists</li>
</ol>
</body>
</html>
UNORDERED LIST
Το unordered list δεν παρουσιάζει καμία αρίθμηση στα δεδομένα της λίστας αλλά απλά τα εμφανίζει συνήθως με το σύμβολο του bullet ( του μαύρου μικρού κύκλου).
Για να ορίσουμε ένα unordered list χρησιμοποιούμε το <ul> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<met acharset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ground of Code</title>
</head>
<body>
<h1>Ground of Code - #1 Site in free programming lessons</h1>
<!-- Beginning of first article -->
<h3>Introduction to HTML</h3>
<p>On this free training you will learn:</p>
<ul>
<li>Basic structure of an html page</li>
<li>Common HTML5 elements</li>
<li>Ordered and unordred lists</li>
</ul>
</body>
</html>
Υπάρχει και εδώ το attribute type που μπορούμε να χρησιμοποιήσουμε για να αλλάξουμε το σχήμα του bullet. Οι επιλογές μας είναι οι εξής:
Πάμε λοιπόν να χρησιμοποιήσουμε το type attribute για να αλλάξουμε το bullet σε square.<!DOCTYPE html>
<html lang="en">
<head>
<met acharset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ground of Code</title>
</head>
<body>
<h1>Ground of Code - #1 Site in free programming lessons</h1>
<!-- Beginning of first article -->
<h3>Introduction to HTML</h3>
<p>On this free training you will learn:</p>
<ul type="square">
<li>Basic structure of an html page</li>
<li>Common HTML5 elements</li>
<li>Ordered and unordred lists</li>
</ul>
</body>
</html>
Με την ίδια λογική μπορούμε να αλλάξουμε το σύμβολο σε circle ή να μην χρησιμοποιήσουμε κανένα σύμβολο με την τιμή none.
DESCRIPTION LIST
Το description list έχει το ιδιαίτερο χαρακτηριστικό αφού δημιουργήσει μια λίστα να προσθέτει και μια περιγραφή σε κάθε στοιχείο της λίστας.
Η αρχή του description list ορίζεται από το <dl> tag. Μέσα σε αυτό κάθε στοιχείο ορίζεται από το <dt> tag ενώ η περιγραφή του ορίζεται από το <dd> tag. Σε αυτή τη μορφή λίστας είναι η μόνη φορά που δεν θα χρησιμοποιήσετε το <li> tag. Ας τα βάλουμε όλα μαζί για να δούμε το τελικό αποτέλεσμα.
!DOCTYPE html>
<html lang="en">
<head>
<met acharset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ground of Code</title>
</head>
<body>
<h1>Ground of Code - #1 Site in free programming lessons</h1>
<!-- Beginning of first article -->
<h3>Introduction to HTML</h3>
<p>On this free training you will learn</p>
<p>basic html terminology</p>
<dl>
<dt>-em-</dt>
<dd>marks text that has stress emphasis</dd>
<dt>-strong-</dt>
<dd>indicates that its contents have strong importance</dd>
<dt>-p-</dt>
<dd>represents a paragraph</dd>
</dl>
</body>
</html>
Πριν κλείσουμε το σημερινό δωρεάν μάθημα HTML & CSS θα ήθελα επίσης να επισημάνω ότι μπορούμε, και είναι συνηθισμένη τακτική, να έχουμε μια λίστα μέσα σε μια άλλη. Ο τρόπος δηλώνουμε την κάθε λίστα είναι ακριβώς όπως τα μάθαμε στα παραπάνω παραδείγματα.<!DOCTYPE html>
<html lang="en">
<head>
<met acharset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ground of Code</title>
</head>
<body>
<h1>Ground of Code - #1 Site in free programming lessons</h1>
<!-- Beginning of first article -->
<h3>Introduction to HTML</h3>
<p>On this free training you will learn:</p>
<li>HTML5 web site structure</li>
<li>
Basic HTML elements
<!-- Look, the closing </li> tag is not placed here! -->
<ol>
<li>em - marks text that has stress emphasis</li>
<li>strong - indicates that its content have strong importance</li>
<li>p - represents a paragraph</li>
</ol>
<!-- Here is the closing </li> tag -->
</li>
<li>Importing images to a web page</li>
</ul>
</body>
</html>
Μην ξεχάσετε να κάνετε ένα μικρό donation έτσι ώστε αυτό το blog να μεγαλώσει ακόμα πιο πολύ και να έχει περισσότερες δυνατότητες στην online παράδοση δωρεάν μαθημάτων.
0 Comments
Η γνώμη σας είναι σημαντική.