Τι είναι η html;

Ερωτήσεις και απαντήσεις σχετικές με την HTML, XHTML και την κατασκευή σελίδων για το Web.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
Άβαταρ μέλους
cordis
Administrator, [F|H]ounder, [C|S]EO
Δημοσιεύσεις: 27626
Εγγραφή: 09 Οκτ 1999 03:00
Τοποθεσία: Greece
Επικοινωνία:

Τι είναι η html;

Δημοσίευση από cordis » 08 Νοέμ 2004 17:54

Τι είναι η HTML;

HTML - HyperText Markup Language [1] [2]

Ας πούμε πρώτα τι ΔΕΝ είναι η HTML:

Η HTML δεν είναι γλώσσα προγραμματισμού [1] [2], γιατί δεν έχει τα στοιχεία που χρειάζονται για να χαρακτηριστεί έτσι. Δεν μπορεί να παίρνει αποφάσεις, δεν μπορεί να κάνει πράξεις και αναθέσεις, δεν μπορεί να παρεκκλίνει την ροή της, και άλλα πολλά πράγματα τα οποία δεν τα κάνει γιατί δεν είναι σχεδιασμένη για κάτι τέτοιο.

Τελικά τι είναι η HTML;

Η HTML είναι μια περιγραφική γλώσσα που κάθε έκδοσή της ορίζετε από ένα Document Type Definition (DTD) [1] [2] του Standard Generalized Markup Language (SGML) [1] [2] [3]

Η HTML μας βοηθάει να περιγράψουμε, με τα διάφορα στάνταρτ tags [1] που περιλαμβάνει, το πως θέλουμε να εμφανίζετε το κείμενό μας μέσα στο World Wide Web [2] και τα οποία ο web browser του επισκέπτη αναλαμβάνει να τα μετατρέψει στην επιθυμητή μορφή.

Κάθε HTML αρχείο αποτελείται από ένα στοιχείο <html> το οποίο χωρίζετε σε δύο μέρη το <head> και το <body>

Κώδικας: Επιλογή όλων

<html>
    <head>
    </head>
    <body>
    </body>
</html>
αυτός είναι και ο σκελετός κάθε HTML αρχείου.
Δεν απαντάω σε προσωπικά μηνύματα με ερωτήσεις που καλύπτονται από τις ενότητες του forum. Για ο,τι άλλο είμαι εδώ για εσάς.
- follow me @twitter

Άβαταρ μέλους
Basilakis
PHP Moderator
Δημοσιεύσεις: 8574
Εγγραφή: 17 Νοέμ 2003 13:03
Τοποθεσία: Womans' Brain
Επικοινωνία:

Τι είναι η html;

Δημοσίευση από Basilakis » 12 Νοέμ 2004 16:13

very very very nice... Και μία σελίδα που νομίζω τα εξηγεί όλα αυτά...

http://www.arm0nia.org/ndc/doc/html-start.html

Inzoy
Δημοσιεύσεις: 23
Εγγραφή: 17 Μαρ 2004 17:01

Τι είναι η html;

Δημοσίευση από Inzoy » 13 Νοέμ 2004 18:27

very very very nice nice :P

Συνεχίζοντας...
1. Καλά αυτό. Πως βάζω τίτλο;

Στο βασικό σκελετό (βλέπε παραπάνω) αναμεσα στο <head> και </head> βάζουμε το παρακάτω:

Κώδικας: Επιλογή όλων

<title>Ο τίτλος της σελίδας μας </title>
Παράδειγμα:

Κώδικας: Επιλογή όλων

<html>
<head>
<title>Δοκιμαστική Σελίδα 1</title>
</head>
<body>
</body>
</html>
2. ΟΚ Έβαλα τον τίτλο. Πως βάζω τώρα κείμενο;

Το κείμενο γράφετε ανάμεσα στα <body> και </body>, κάπως έτσι:

Κώδικας: Επιλογή όλων

<body>Καλημέρα Κόσμε</body>
Παράδειγμα:

Κώδικας: Επιλογή όλων

<html>
<head>
<title>Δοκιμαστική Σελίδα 1</title>
</head>
<body>
Καλημέρα Κόσμε!
</body>
</html>
3. Μπορώ να κάνω και μορφοποιήσεις όπως στο Word;

Φυσικά! (Πάντα μέσα στα <body> και </body>, μόνο αυτά βλέπουμε στην οθόνη)
.Για Έντονα Γράμματα: Κείμενο μέσα σε

Κώδικας: Επιλογή όλων

<b> </b>
ή

Κώδικας: Επιλογή όλων

<strong> </strong>
.Για Πλάγια Γράμματα: Κείμενο μέσα σε

Κώδικας: Επιλογή όλων

<em> </em>
.Για κεντράρισμα κειμένου: Κείμενο μέσα σε

Κώδικας: Επιλογή όλων

<center> </center> 
Παραδείγματα:
1)Έντονα:

Κώδικας: Επιλογή όλων

<b> Καλημέρα </b> και <strong> Καληνύχτα </strong>
Αποτέλεσμα: Καλημέρα και Καληνύχτα
2)Πλάγια:

Κώδικας: Επιλογή όλων

<em> Καλη Όρεξη </em>
Αποτέλεσμα: Καλή Όρεξη
3)Κεντράρισμα:

Κώδικας: Επιλογή όλων

<center>Καλό Βράδυ</center>
Αποτέλεσμα: :) (Κείμενο στο κέντρο) :)

4. Πώς αλλάζω το χρώμα της σελίδας;

Για να αλλάξουμε το φόντο της σελιδας μας θα πρέπει να προσθέσουμε κάτι στο <body>:

Κώδικας: Επιλογή όλων

<body bgcolor="HEX VALUE">
Όπου 'HEX VALUE' θα είναι το χρώμα που θέλουμε, ένας εξαψήφιος συνδιασμός γραμμάτων και αριθμών με ένα # μπροστά. Πολλά απο τα χρώματα μπορούμε να τα δούμε εδώ. Κάποια συνηθισμένα είναι τα

Κώδικας: Επιλογή όλων

#000000 = Μαύρο
#FFFFFF = Λευκό
#FF0000 = Κόκκινο
Παράδειγμα:

Κώδικας: Επιλογή όλων

<body bgcolor="#000000"> </body>
Αποτέλεσμα: Μια Μαύρη σελίδα.

5. ΩΧ!! Μαύρη σελίδα και δεν φαίνετε το κείμενο!! Τι κάνω;

Πολύ απλά θα δώσουμε χρώμα (πιθανόν λευκό στην περίπτωση του μαύρου φόντου) στο κείμενο. Αυτό θα γίνει αν βάλουμε στο <body> ακόμα ένα στοιχείο

Κώδικας: Επιλογή όλων

<body bgcolor="HEX VALUE" text="HEX VALUE">
Παράδειγμα:

Κώδικας: Επιλογή όλων

<body bgcolor="#000000" text="#FFFFFF"> HELLO!!</body>
Αποτέλεσμα: Μια Μαύρη σελίδα που γράφει με άσπρα γράμματα: HELLO!!
Tip: Χρησιμοποιείτε χρώματα αντίθετα μεταξύ τους για να είναι ευανάγνωστα (και να φαίνονται φυσικά!)

:arrow: Ούφ! Τα υπόλοιπα κατόπιν ερωτήσεως! :kaloe: :kaloe:

Ryu
Δημοσιεύσεις: 74
Εγγραφή: 24 Σεπ 2004 16:32

Τι είναι η html;

Δημοσίευση από Ryu » 14 Νοέμ 2004 03:43

Μια σημαντική μεν αλλά σε παλιούς browsers δε, διευκρίνηση:
Για Έντονα Γράμματα:
<b> </b>
ή
<strong> </strong>
Το <b> είναι του netscape. Ο explorer το βλέπει.
Το <strong> είναι του explorer. Ο netscape δεν το βλέπει. Βάζετε μόνο <b>


Το ίδιο ισχύει για τα πλάγια γράμματα:
Για Πλάγια Γράμματα: Κείμενο μέσα σε κώδικας:
<em> </em>
Το <em> είναι μόνο του explorer. Για netscape και explorer βάζετε <i></i> (Italics)


Συγχαρητήρια στους κοπιάζοντες! :lol: :wink: :kaloe:

Άβαταρ μέλους
softius
Script Master
Δημοσιεύσεις: 241
Εγγραφή: 11 Ιαν 2004 19:07
Επικοινωνία:

Τι είναι η html;

Δημοσίευση από softius » 14 Νοέμ 2004 09:58

Η διαφορά μεταξύ b και strong, i και em δεν είναι ποιοι φυλλομετρητές το υποστηρίζουν και ποιοι όχι.

Κατ' αρχήν τα b και i είναι καθαρά σημαντήρες μορφοποίησης (presentational markup). Δηλαδή απλά κάνουν τα γράμματα έντονα και πλάγια αντίστοιχα - τίποτα περισσότερα.

Από την άλλη τα strong και em είναι σημαντήρες δόμησης (structural markup) του κειμένου. Συγκεκριμένα το em δίνει έμφαση σε κάποιο κείμενο ενώ το strong ακόμη έντονη έμφαση.

Απλά τυχγάνει στην οπτική αναπαράσταση να μην υπάρχει καμία διαφορά. Αυτό όμως δεν συμβαίνει όταν ο χρήστης χρησιμοποιεί κάποιον screen reader (π.χ. κάποιο άτομο με απώλεια όρασης) αντί μία οθόνη.

Αν χρησιμοποιούμε b και i, ο screen reader θα αναγνώσει απλά το κείμενο χωρίς καμία αλλαγή. Τι συμβαίνει όμως αν χρησιμοποιούμε strong και em; O screen reader θα δώσει έμφαση στο κείμενο που βρίσκεται ανάμεσα στα em - π.χ. με κάποια αλλαγή στον τόνο της φωνής - ενώ το κείμενο που βρίσκεται ανάμεσα στα strong θα τα διαβάσει έντονα π.χ. με πιο δυνατή φωνή.

Συνεπώς αν θέλουμε απλά να μορφοποιήσουμε το κείμενό μας χρησιμοποιούμε τα b & i. Αν θέλουμε να τονίσουμε ή να δώσουμε έμφαση σε κάποιες λέξεις χρησιμοποιούμε τα strong & em.

Άβαταρ μέλους
jps
Δημοσιεύσεις: 53
Εγγραφή: 28 Σεπ 2003 18:16
Τοποθεσία: Orchomenos
Επικοινωνία:

Τι είναι η html;

Δημοσίευση από jps » 24 Δεκ 2004 08:43

Σχετικά με την γραμματοσειρά και το μέγεθός της.

<font size="12" face="Verdana">Εδώ γράφουμε το κείμενο</font>

Αν δεν ορίσουμε τα παραπάνω τότε ο κάθε επισκέπτης της σελίδας θα βλέπει το κείμενο ανάλογα με τις ρυθμίσεις που έχει κάνει στον browser που χρησιμοποιεί. Αλλά ακόμα κι αν έχουμε γράψει τον παραπάνω κώδικα και πάλι μπορεί ο επισκέπτης να απενεργοποιήσει τη δική μας μορφοποίηση και να βλέπει το κείμενο με τις δικές του προτιμήσεις. Αυτό μπορεί να έχει δραματικό αποτέλεσμα στο πως θα εμφανίζεται η σελίδα μας.
Π.χ. μπορεί να έχουμε γράψει μια πρόταση σε τέτοιο μέγεθος ώστε να χωράει σε μια γραμμή ενός πίνακα σε μέγεθος κειμένου μεσαίο. Αν κάποιος τώρα έχει ρυθμίσει τον browser σε μέγιστο μέγεθος τότε σε μια γραμμή του πίνακα είναι πιθανό να χωράει μόνο μια λέξη και όχι όλη η πρόταση. Το αισθητικό αποτέλεσμα είναι... χάλια.
Αυτό μπορούμε να το αποφύγουμε καθορίζοντας μέγεθος και γραμματοσειρά με style. Ο κώδικας είναι:

<font class="a1">Εδώ γράφουμε το κείμενο</font>

Όπου a1 είναι το όνομα του style που θα γράψουμε στο head.
Π.χ.

<style>
<!--
.a1{font-weight: bold; font-size: 12; font-family: arial, verdana, arial, helvetica, sans-serif;}
-->
</style>


Αν το κείμενο είναι μέσα σε πίνακα μπορείτε να κάνετε συνολική ρύθμιση για το περιεχόμενο στον πίνακα κείμενο με το παρακάτω:

<style>
<!--
table#{font-weight: bold; font-size: 24; font-family: arial, verdana, arial, helvetica, sans-serif;}
td#{font-size: 12; font-family: arial, verdana, arial, helvetica, sans-serif;}
-->
</style>


Οι ρυθμίσεις στο table#... αφορούν ολόκληρο τον πίνακα, ενώ στο td#... αφορούν τα περιεχόμενα ενός κελιού. Με το παραπάνω οι ρυθμίσεις θα εφαρμοστούν σε όλους τους πίνακες που υπάρχουν στη σελίδα.
Συνήθως όμως δεν θέλουμε κάτι τέτοιο, αλλά μορφοποίηση διαφορετική σε κάποιους πίνακες ή σε κελιά του ίδιου πίνακα. Στην περίπτωση αυτή γράφουμε το πρώτο style

<style>
<!--
.a1{font-weight: bold; font-size: 12; font-family: arial, verdana, arial, helvetica, sans-serif;}
.a2{font-weight: bold; font-size: 12; font-family: arial, verdana, arial, helvetica, sans-serif;}
-->
</style>


και στον πίνακα ή στο κελί γράφουμε:

<table >
<tr>
<td class="a1">κείμενο</td>
<td class="a2">κείμενο</td>
</tr>
</table>


Εδώ έχουμε έναν πίνακα μιας γραμμής με 2 κελιά. Στο πρώτο κελί έχει εφαρμοστεί η μορφοποίηση a1 και στο δεύτερο η μορφοποίηση a2.

Στο style μπορεί να καθορίζετε και το περίγραμμα του πίνακα ή του κάθε κελιού.
Αλλά γιαυτό σε άλλη... παράγραφο.
Το ωραίο είναι παντού...
Μόνο που τα μάτια της ψυχής μας δεν είναι πάντα ανοιχτά.

Απάντηση

Επιστροφή στο “HTML και XHTML”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης