Html

Η HTML αποτελείται από ετικέτες (tags), οι οποίες περικλείονται μέσα σε σύμβολα «μεγαλύτερο από» και «μικρότερο από» (για παράδειγμα <html>).
Οι ετικέτες συνήθως λειτουργούν ανά ζεύγη (για παράδειγμα <h1> και </h1>), με την πρώτη να ονομάζεται ετικέτα έναρξης και τη δεύτερη ετικέτα λήξης.

Πίνακας HTML Tags και Χρήσης τους

TagΧρήση / Περιγραφή
<!DOCTYPE>Δήλωση τύπου εγγράφου.
<html>Ρίζα του HTML εγγράφου.
<head>Περιέχει metadata, τίτλο, links σε CSS/JS.
<body>Ορατό περιεχόμενο σελίδας.
<h1> ...<h6>Επικεφαλίδες.
<p>Παράγραφος κειμένου.
<a>Υπερσύνδεσμος.
<span>Inline στοιχείο για styling.
<ul>Μη ταξινομημένη λίστα.
<ol>Ταξινομημένη λίστα.
<li>Στοιχείο λίστας.
<img>Εικόνα.
<audio>Ενσωμάτωση ήχου.
<video>Ενσωμάτωση βίντεο.
<form>Φόρμα.
<input>Πεδία εισαγωγής δεδομένων.
<textarea>Περιοχή κειμένου.
<button>Κουμπί.
<label>Ετικέτα για input.
<select>Λίστα επιλογών.
<option>Στοιχείο επιλογής.
<table>Πίνακας.
<tr>Σειρά πίνακα.
<td>Κελί πίνακα.
<th>Κεφαλίδα πίνακα.
<div>Block στοιχείο.
<section>Τμήμα εγγράφου.
<article>Αυτόνομο περιεχόμενο.
<nav>Πλοήγηση.
<footer>Υποσέλιδο.
<header>Κεφαλίδα.
<script>JavaScript.
<link>Σύνδεση σε CSS/αρχείο.
<meta>Metadata (charset, description).
<style>CSS μέσα στο έγγραφο.
<details>Πτυσσόμενο περιεχόμενο.
<figure>Περιέχει εικόνα/διάγραμμα.
<figcaption>Λεζάντα για το
.
<source>Πηγή πολυμέσων (για video/audio).
<track>Υπότιτλοι/λεζάντες σε video/audio.
<map>Περιοχή χάρτη εικόνας.
<area>Ορίζει clickable περιοχές σε.
<canvas>Σχεδίαση γραφικών με JavaScript.
<svg>Διανυσματικά γραφικά.
<br>Αλλαγή γραμμής.
<strong>Έντονο (σημασιολογικό).
<b>Έντονο (χωρίς σημασιολογία).
<em>Έμφαση (πλάγια).
<>i>Πλάγια γράμματα.
<>u>Υπογράμμιση.
<>mark>Επισήμανση (highlight).
<>small>Μικρό κείμενο.
<>sup>Εκθέτης.
<>sub>Δείκτης.
<>code>Κώδικας.
<>pre>Προμορφοποιημένο κείμενο.
<>kbd>Πλήκτρο/εντολή πληκτρολογίου.
<>samp>Δείγμα εξόδου προγράμματος.
<>blockquote>Απόσπασμα/παράθεση.
<>q>Σύντομη παράθεση (inline).
<abbr>Συντομογραφία (με τίτλο).
<cite>Παραπομπή.
<address>Διεύθυνση επαφής.
<del>Διαγραμμένο κείμενο.
<ins>Προσθήκη κειμένου.
<progress>Γραμμή προόδου.
<hr>Οριζόντια γραμμή.
<fieldset>Ομαδοποίηση στοιχείων φόρμας.
<legend>Τίτλος για το
.
<datalist>Προτεινόμενες τιμές για input.
<output>Εμφάνιση αποτελέσματος υπολογισμού.

Input

<input type="text" name="username">

Αυτό μπορεί να εμποδίσει τα προγράμματα περιήγησης από το να προσφέρουν αυτόματη συμπλήρωση σε φόρμες.

<input type="text" autocomplete="off">

Aναζήτησης (Search)

<input type="search" name="query">

Κωδικός (Password)

<input type="password" name="password">

Κουμπί υποβολής (Submit)

<input type="submit" value="Υποβολή">

Κουτί επιλογής (Checkbox)

Test
<input type="checkbox">

Κατανομή (Range)

<input type="range" name="volume" min="0" max="100">

Κουτί κειμένου (Textarea)

<textarea name="comments" rows="4" cols="50"></textarea>

Time

<input type="time">

Date

<input type="date">

Date Time

<input type="datetime-local">

Αριθμοί (Number)

<input type="number" name="quantity" min="1" max="100">

URL

<input type="url" name="website">

Color

<input type="color">

Upload File

<input type="file">

Σύνδεσμοι στην html

Στη γλώσσα HTML οι σύνδεσμοι ορίζονται με την ετικέτα ως εξής:

<a href=”url”>κείμενο του συνδέσμου</a>

Τοπικοί σύνδεσμοι (Local Links)
Ο τοπικός σύνδεσμος (local link) είναι ένας υπερσύνδεσμος που παραπέμπει σε μια άλλη σελίδα ή αρχείο μέσα στον ίδιο ιστότοπο. Σε αντίθεση με τους εξωτερικούς συνδέσμους, που οδηγούν σε διαφορετικούς ιστότοπους, οι τοπικοί σύνδεσμοι επιτρέπουν την πλοήγηση εντός της ίδιας ιστοσελίδας ή δικτυακής εφαρμογής.

Οι τοπικοί σύνδεσμοι χρησιμοποιούν σχετικά URL (relative URLs), δηλαδή διευθύνσεις που δεν περιλαμβάνουν το πλήρες URL με το πρωτόκολλο (π.χ., http://www.example.com). Αντίθετα, καθορίζουν τη διαδρομή σε σχέση με τη δομή των φακέλων του ιστότοπου.

Kείμενο

Αυτό είναι ένα κείμενο με κανονικό κείμενο.

<p>Αυτό είναι ένα κείμενο με κανονικό κείμενο.</p>

Αυτό είναι έντονο (bold) κείμενο.

<p><strong>Αυτό είναι έντονο (bold) κείμενο.</strong></p>

Αυτό είναι πλάγιο (italic) κείμενο.

<p><em>Αυτό είναι πλάγιο (italic) κείμενο.</em></p>

Αυτό είναι υπογραμμισμένο (underlined) κείμενο.

<p><u>Αυτό είναι υπογραμμισμένο (underlined) κείμενο.</u></p>

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

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

Επικεφαλίδα 3

Επικεφαλίδα 4

Επικεφαλίδα 5
Επικεφαλίδα 6
<h1>Επικεφαλίδα 1</h1>
<h2>Επικεφαλίδα 2</h2>
<h3>Επικεφαλίδα 3</h3>
<h4>Επικεφαλίδα 4</h4>
<h5>Επικεφαλίδα 5</h5>
<h6>Επικεφαλίδα 6</h16><h1>Επικεφαλίδα 1</h1>
<h2>Επικεφαλίδα 2</h2>
<h3>Επικεφαλίδα 3</h3>
<h4>Επικεφαλίδα 4</h4>
<h5>Επικεφαλίδα 5</h5>
<h6>Επικεφαλίδα 6</h16>

Πίνακες

Οι πίνακες χρησιμοποιούνται στην HTML για να οργανώνουν δεδομένα σε σειρές και στήλες. Μπορούν να εμφανίζουν πληροφορίες όπως στατιστικά στοιχεία, χρονοδιαγράμματα κ.λπ.

Για να δημιουργήσουμε έναν πίνακα στην HTML, χρησιμοποιούμε την ετικέτα . Ο πίνακας αποτελείται από:

  1. Γραμμές (<tr>): Ορίζουν τις σειρές του πίνακα.
  2. Κελιά δεδομένων (<td>): Περιέχουν τις πληροφορίες του πίνακα.
  3. Κεφαλίδες (<th>) → Δημιουργούν επικεφαλίδες στηλών με έντονη γραφή.

Χρησιμοποιούμε το colspan για να συγχωνεύσουμε κελιά σε περισσότερες από μία στήλες.

<table border="1">
    <tr>
        <th colspan="2">Ονοματεπώνυμο</th>
        <th>Ηλικία</th>
    </tr>
    <tr>
        <td>Νίκος</td>
        <td>Παπαδόπουλος</td>
        <td>28</td>
    </tr>
</table>
  • Το border=”1″ προσθέτει περίγραμμα στον πίνακα.

Χρησιμοποιούμε το rowspan για να συγχωνεύσουμε κελιά σε περισσότερες από μία γραμμές.

<table border="1">
    <tr>
        <th rowspan="2">Όνομα</th>
        <td>Μαρία</td>
    </tr>
    <tr>
        <td>Γιώργος</td>
    </tr>
</table>
  • ο border=”1″ προσθέτει περίγραμμα στον πίνακα.

Όταν οι πίνακες περιέχουν μεγάλο όγκο δεδομένων, μπορούμε να τους οργανώσουμε καλύτερα χρησιμοποιώντας τις ετικέτες <thead>, <tbody>, <tfoot>.

Αυτές οι ετικέτες διαχωρίζουν τον πίνακα σε ξεχωριστά λογικά τμήματα:

  1. <thead> : Περιέχει τις επικεφαλίδες.
  2. <tbody> : Περιέχει το κυρίως περιεχόμενο.
  3. <tfoot> : Περιέχει σύνολα, υποσημειώσεις ή στατιστικά δεδομένα.
<table border="1">
    <thead>
        <tr>
            <th>Όνομα</th>
            <th>Ηλικία</th>
            <th>Πόλη</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Μαρία</td>
            <td>25</td>
            <td>Αθήνα</td>
        </tr>
        <tr>
            <td>Γιώργος</td>
            <td>30</td>
            <td>Θεσσαλονίκη</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Σύνολο: 2 εγγραφές</td>
        </tr>
    </tfoot>
</table>

Η ετικέτα <caption> προσθέτει έναν τίτλο στον πίνακα, βελτιώνοντας την προσβασιμότητα και την κατανόηση των δεδομένων.

<table border="1">
    <caption>Λίστα Χρηστών</caption>
    <tr>
        <th>Όνομα</th>
        <th>Ηλικία</th>
        <th>Πόλη</th>
    </tr>
    <tr>
        <td>Μαρία</td>
        <td>25</td>
        <td>Αθήνα</td>
    </tr>
    <tr>
        <td>Γιώργος</td>
        <td>30</td>
        <td>Θεσσαλονίκη</td>
    </tr>
</table>

Λίστα

    Στοιχείο 1 Στοιχείο 2 Στοιχείο 3
<ol>
<il>Στοιχείο 1</il>
<il>Στοιχείο 2</il>
<il>Στοιχείο 3</il>                        
</ol>
  1. Στοιχείο 1
  2. Στοιχείο 2
  3. Στοιχείο 3
<ol style="list-style:lower-roman;">
<li>Στοιχείο 1</li>
<li>Στοιχείο 2</li>
<li>Στοιχείο 3</li>
</ol>
  1. Στοιχείο 1
  2. Στοιχείο 2
  3. Στοιχείο 3
<ol style="list-style:lower-greek;">
<li>Στοιχείο 1</li>
<li>Στοιχείο 2</li>
<li>Στοιχείο 3</li>
</ol>
  1. Στοιχείο 1
  2. Στοιχείο 2
  3. Στοιχείο 3
<ol style="list-style:lower-latin;">
<li>Στοιχείο 1</li>
<li>Στοιχείο 2</li>
<li>Στοιχείο 3</li>
</ol>

Πολυμέσα

Εικόνα

<img src="image.jpg" alt="Περιγραφή εικόνας">

Video

<video width="320" height="240" controls>
    <source src="movie.mp4" type="video/mp4">
</video>

Yutube Video

<iframe width="420" height="315" src="https://www.youtube.com"> </iframe>
HTML Meta Tags