Home ›

html εισαγωγή

Submitted by soffia on Tue, 17/04/2012 - 15:38

HTML tags

Η HTML (HyperText Markup Language) επινοήθηκε από τον Tim Berners-Lee στα τέλη του 1991. Βασίστηκε στην SGML (Standard Generalized Markup Language), η οποία με τη σειρά της βασίστηκε στην GML (Generalized Markup Language) της IBM. Σκοπός ήταν ο εύκολος διαμοιρασμός πληροφοριών (θα μπορούσαμε να πούμε "αρχεία") σε ηλεκτρονική μορφή, αναγνώσιμων ακόμη και μετά από δεκαετίες - χρόνος πραγματικά μεγάλος για τον τομέα της πληροφορικής.

Ο browser αναγνωρίζει αυτόν τον τρόπο γραφής και εκτελεί τις εντολές που περιέχονται σε αυτόν. Αξίζει να σημειωθεί ότι η html είναι η πρώτη και πιο διαδεδομένη γλώσσα περιγραφής της δομής μιας ιστοσελίδας.

Η html χρησιμοποιεί τις ειδικές ετικέτες (τα λεγόμενα tags) για να δώσει τις απαραίτητες οδηγίες στον browser.
Τα tags είναι εντολές που συνήθως ορίζουν την αρχή ή το τέλος μιας λειτουργίας. Τα tags βρίσκονται πάντα μεταξύ των συμβόλων μικρότερο από (<) και μεγαλύτερο από (>), για παράδειγμα: <BODY>. Σε γενικές γραμμές, όλα τα tags αποτελούνται από ζεύγη: το tag ανοίγματος (<όνομα_tag>) και το tag κλεισίματος (</όνομα_tag>). Χαρακτηριστική εξαίρεση αποτελεί το tag img για εισαγωγή εικόνας, το οποίο δεν έχει ξεχωριστό tag για κλείσιμο, π.χ. <img src="/pictures/image.png" />

Οι οδηγίες είναι case insensitive, δεν επηρεάζονται δηλαδή από το αν έχουν γραφτεί με πεζά (μικρά) ή κεφαλαία γράμματα. Ένα αρχείο HTML είθισται να έχει κατάληξη .htm ή .html.
Σύνταξη:

<όνομα_tag [όνομα_ID] [κλάση_class] [ιδιότητες που αφορούν το tag *]>περιεχόμενο</όνομα_tag>
Όσα βρίσκονται μέσα σε αγκύλες ("[" και "]"), είναι προαιρετικά.
* Μπορούμε να γράψουμε ιδιότητες μέσα στην html, αλλά γενικά είναι προτιμότερο να μπαίνουν στο css.
Παράδειγμα:
<div id="main"> κείμενο</div>

Τα βασικά html tags

Παράδειγμα δομής ενός αρχείου html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Δήλωση (προς τον browser) για το ποια έκδοση της html χρησιμοποιείται από τη σελίδα.
<html xmlns="http://www.w3.org/1999/xhtml">
Ανοίγει html tag. Ορίζει ότι αυτό είναι μια html σελίδα.
<head>
Επικεφαλίδα. Εδώ μπαίνουν πληροφορίες που αφορούν το έγγραφο και δεν εμφανίζονται μέσα στην σελίδα.
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Πληροφορίες για την κωδικοποίηση της σελίδας.
<title>ο τίτλος της σελίδας μου</title>
Τίτλος της σελίδας, που εμφανίζεται πάνω στην γραμμή τίτλου του browser.
</head>
Τέλος της επικεφαλίδας.
<body>
Το κυρίως μέρος του έγγραφου, όπου εισάγουμε το περιεχόμενο της σελίδας μας.
</body>
Τέλος περιοχής περιεχομένου.
</html>
Τέλος html αρχείου

Συνήθη tags

Εισαγωγή εικόνας:
Παράδειγμα: <img src="/images/smile.jpg" width="567" height="567" alt="smile" />
Σύνταξη: <img src="διαδρομή/όνομα_αρχείου" width="πλάτος_σε_pixels" height="ύψος_σε_pixels" alt="εναλλακτικό κείμενο" />
Σημ.: Δεν υπάρχει τέλος μορφής (</...>) σε αυτό το tag.
Εναλλακτικό κείμενο είναι το κείμενο που εμφανίζεται πριν φορτώσει η εικόνα ή αν δεν μπορεί να εμφανιστεί και είναι αναγνώσιμο από τις μηχανές αναζήτησης.

<a href="http://www.designobsession.grl">σύνδεσμος </a>
<a href="διαδρομή/όνομα αρχείου">σύνδεσμος </a>
http://www.designobsession.gr

<h1>Επικεφαλίδα Η1</h1>

Επικεφαλίδα Η1

<h2>Επικεφαλίδα Η2</h2>

Επικεφαλίδα Η2

<br> Αλλαγή γραμμής (δεν υπάρχει tag για κλείσιμο)
<p> Αλλαγή παραγράφου </p>
<b> Bold </b> Bold
<i> Italics </i> Italics
<u> Underline </u> Underline
<div> περιεχόμενο </div> οριοθετεί μια περιοχή
<span>περιεχόμενο</span> οριοθετεί μια περιοχή
Η διαφορά είναι ότι, βάσει προεπιλογής, το span δεν περιέχει στυλ, ενώ το div περιέχει ως στυλ το style="display:block;". Αυτό σημαίνει πως το να γράψουμε πχ. Εκτός<div>Εντός</div>Εκτός ισοδυναμεί με το να γράψουμε Εκτός<br/>Εντός<br/>Εκτός
Kατά τα άλλα, τα δύο tags έχουν εντελώς ίδιες δυνατότητες και μπορούμε να ορίσουμε το στυλ τους, όπως και σε κάθε άλλο html tag.

Μη διατεταγμένη λίστα:
<ul> αρχή λίστας
<li>01</li> 1ο στοιχείo που ανήκει στην λίστα.
<li>02</li> 2ο στοιχείo που ανήκει στην λίστα.
<li>03</li> 3ο στοιχείo που ανήκει στην λίστα.
</ul> τέλος λίστας

  • 01
  • 02
  • 03

Σχετικοί σύνδεσμοι:
http://studentguru.gr/w/tutorials/a0-html-css-javascript.aspx
http://www.w3schools.com/html/default.asp

ΝΕWSLETTER