HTML5


Εισαγωγή

HTML προέρχεται από τα αρχικά των λέξεων Hyper Text Markup Language και είναι η δημοφιλέστερη γλώσσα «προγραμματισμού» για την δημιουργία ιστοσελίδων. Δεν συγκαταλέγεται στις Γλώσσες Προγραμματισμού αλλά στις γλώσσες σήμανσης αφού περιγράφει την δομή και το περιεχόμενο κάθε ιστοσελίδας. Η HTML δημιουργήθηκε από τον Berners-Lee το 1991. Με τα χρόνια εξελίχθηκε : HTML (1991), HTML 2.0 (1995), HTML 3.2 (1997), HTML 4.01 (1999), XHTML (2000), HTML5 (2014)

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

 

Elements
Έτσι ονομάζουμε οτι υπάρχει από την αρχή μιας ετικέτας μέχρι και το κλείσιμο της. Το ακόλουθο αποτελεί ένα element: <h1>Η Πρώτη μας Ιστοσελίδα!</h1>.

Ιδιότητες ετικετών (Attributes)
Οι ιδιότητες ετικετών βρίσονται μέσα στο πρώτο από το ζεύγος ετικετών και δίνουν επιπλέον πληροφορίες . Οι τιμές των ιδιοτήτων πρέπει να βρίσκονται μέσα σε εισαγωγικά. Έστω το παράδειγμα: <h2><a id=»top»>Some heading</a></h2>. 

Δύο εξαιρετικά χρήσιμες ιδιότητες είναι οι id και η class. Τις χρησιμοποιούμε όταν θέλουμε να θέλουμε να δώσουμε δικά μας ονόματα σε elements. Όταν δύο οι περισσότερα elements θέλουμε να χρησιμοποιούν το ίδιο όνομα τότε προτιμάται η χρήση της class αλλιώς η id. Μέσα στην class μπορούμε να γράψουμε περισσότερα από ένα ονόματα. Στο παρακάτω παράδειγμα η παράγραφος έχει δύο ονόματα ορίσει στην class.
<p class=»simantika eiserxomena«>Μπλά μπλά μπλά μπλά μπλά μπλά … </p>

Σχόλια – Παρατηρήσεις στο Παράδειγμα 1
Γραμμή 1 : Η ετικέτα <!DOCTYPE html> δηλώνει οτι οι εντολές που ακολουθούν είναι σε HTML5.
Γραμμή 4 : Η ετικέτα <meta charset=»UTF-8″> δηλώνει την κωδικοποίηση του κειμένου. Σχεδόν πάντα πρέπει να χρησιμοποιείται η UTF-8.
Γραμμή 11 : Τα σχόλια συνήθως μπαίνουν για να επεξηγήσουν τμήματα του κώδικα.

 

 

 

Βασικές ετικέτες (tags) της HTML

<html> ….. </html>  Δηλώνει την αρχή και το τέλος μιας ιστοσελίδας
<head> ….. </head>  Στο τμήμα αυτό της ιστοσελίδας περιλαμβάνονται πληροφορίες σχετικές με το περιεχόμενο της ιστοσελίδας
<body> ….. </body>  Το ορατό τμήμα της ιστοσελίδας
<title> ….. </title>  Βρίσκεται μέσα στην ετικέτα <head>  </head> και ορίζει τον τίτλο της ιστοσελίδας.
<h1> ….. </h1>
<h2> ….. </h2>
<h3> ….. </h3>
<h4> ….. </h4>
<h5> ….. </h5>
<h6> ….. </h6>
 Χρησιμοποιείται για τις επικεφαλίδες : <h1> για τις μεγαλύτερες επικεφαλίδες και <h6> για τις μικρότερες. Πριν και μετά από την επικεφαλίδα εμφανίζεται μία κενή γραμμή.
<p> ….. </p>  Το κείμενο μέσα στην ετικέτα εμφανίζεται ως παράγραφος.
<b> ….. </b>
<strong> … </strong>
 Έντονη γραφή
<i> ….. </i>
<em> …..</em>
 Πλάγια γραφή
<u> ….. </u>  Υπογράμμιση
<strike> …..</strike>  Για να φαίνεται το κείμενο διαγραμμένο
<br>  Αλλαγή γραμμής
<hr>  Εισαγωγή οριζόντιας γραμμής
&nbsp;  Τα προγράμματα περιήγησης χρησιμοποιούν Για να προσθέσετε πραγματικά κενά στο κείμενό σας, μπορείτε να χρησιμοποιήσετε τον ειδικό χαρακτήρα &nbsp;
<ul> ….. </ul>  Για δημιουργία λίστας με κουκίδες. Συνδυάζεται με την ετικέτα <li>
<ol> ….. </ol>  Για δημιουργία αριθμημένης λίστας. Συνδυάζεται με την ετικέτα <li>
<li> ….. </li>  Καθορίζει τα στοιχεία μιας λίστας. Για αριθμημένη λίστα:
<ol>
<li> Το πρώτο στοιχείο της λίστας </li>
<li> Το δεύτερο στοιχείο της λίστας </li>
<li> Το τρίτο στοιχείο της λίστας </li>
</ol>
<img src= «tree.jpg» width=»200″ height=»150″>  Εμφάνιση εικόνας αποθηκευμένης με το όνομα π.χ. tree.jpg και προσαρμογή της σε συγκεκριμένες διαστάσεις. Αν η εικόνα δεν βρίσκεται στον φάκελο που είναι η ιστοσελίδα τότε πρέπει να γραφεί στην μορφή π.χ. <img src= «./eikones/tree.jpg» >
<a href= «….»> …. </a>  Το κείμενο ανάμεσα στο <a> και στο </a> μετατρέπεται σε υπερσύνδεσμος που οδηγεί είτε σε άλλο σημείο της ίδιας ιστοσελίδας (δείτε το παράδειγμα που ακολουθεί) είτε σε άλλη ιστοσελίδα.

<h2><a  id=»top»>Μία επικεφαλίδα</a></h2>
<p>Μπλά μπλά μπλά  …</p>
<p>Μπλά μπλά μπλά  …</p>
<p>Μπλά μπλά μπλά  …</p>
<p>Μπλά μπλά μπλά  …</p>
<a href=»#top»>Πήγαινε με στην κορυφή!</a>

<table style=»width:100%»>
<tr>
<td>Όνομα</td>
<td>Ηλικία</td>
<td>Τάξη</td>
</tr>
<tr>
<td>Μάρκος</td>
<td>16</td>
<td>B</td>
</tr>
<tr>
<td>Άννα</td>
<td>18</td>
<td>Γ</td>
</tr>
</table>
 Δημιουργεί πίνακα
<iframe src=»https://ragoussis.com/zenos»>
<p>Your browser does not support iframes.</p>
</iframe>
 Δημιουργεί ένα πλαίσιο και μέσα εμφανίζει μία ιστοσελίδα.
<div> εντολές HTML</div>  Ομαδοποιεί εντολές HTML προκειμένου να επηρεάσουμε την εμφάνιση τους με την βοήθεια CSS

 

Για να εμφανίσουμε σύμβολα που χρησιμοποιεί ή ίδια η HTML ή που δεν φαίνονται στο πληκτρολόγιο (π.χ. ευρώ) πρέπει να χρησιμοποιήσουμε entities. Μερικά παραδείγματα: κενό (&nbsp;), €(&#8364;), © (&#169;). Περισσότερα εδώ.

Ετικέτες (tags) για δημιουργία Φόρμας

Δημιουργία πλαισίου για πληκτρολόγηση δεδομένων

Μέσα στην ετικέτα <form> μπορούμε να προσθέσουμε:

  • action=»action_page.php» (τι ενέργειες να κάνει όταν γίνει αποστολή της φόρμας)
  • method=»get» ή method=»post». Για ευαίσθητα προσωπικά δεδομένα χρησιμοποιείται η post.

Αντί για text μπορούμε να γράψουμε radio, checkbox, password, submit, button, number, date, color, range, month, week, time, datetime, email, search, url

Μέσα στην ετικέτα input μπορούμε να συμπληρώσουμε:

  • value=»Maνόλης» (Ορίζει αρχική τιμή στο πλαίσιο)
  • name (Κάθε στοιχείο της φόρμας πρέπει να έχει όνομα)
  • readonly (Δεν μπορεί ο χρήστης να τροποποιήσει το περιεχόμενο του πλαισίου )
  • disabled (Δεν μπορεί να τροποιηθεί και ούτε θα σταλεί με τα υπόλοιπα δεδομένα της φόρμας)
  • size=«40» (Μήκος πλαισίου σε χαρακτήρες)
  • maxlength=«10» (Μέγιστο επιτρεπτό πλήθος χαρακτήρων)
  • autocomplete (http://www.w3schools.com/html/html_form_attributes.asp)
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

 

 

Δημιουργία μενού από το οποίο ο χρήστης μπορεί να επιλέξει

 

Δημιουργία πλαισίου για πληκτρολόγηση κειμένου

 

Δημιουργία κουμπιού

 

Εμφάνιση αποτελεσμάτων

Η ετικέτα <fieldset> χρησιμοποιείται για ομαδοποίηση δεομένων σε μία φόρμα, ενώ η ετικέτα <legend> για να ορίσουμε λεζάντα.

 

 

 

 

 

 

HTML Tags Ordered by Category


Basic HTML

Tag Description
<!DOCTYPE> Defines the document type
<html> Defines an HTML document
<title> Defines a title for the document
<body> Defines the document’s body
<h1> to <h6> Defines HTML headings
<p> Defines a paragraph
<br> Inserts a single line break
<hr> Defines a thematic change in the content
<!–…–> Defines a comment

Formatting

Tag Description
<acronym> Not supported in HTML5. Use <abbr> instead.
Defines an acronym
<abbr> Defines an abbreviation or an acronym
<address> Defines contact information for the author/owner of a document/article
<b> Defines bold text
<bdi> Isolates a part of text that might be formatted in a different direction from other text outside it
<bdo> Overrides the current text direction
<big> Not supported in HTML5. Use CSS instead.
Defines big text
<blockquote> Defines a section that is quoted from another source
<center> Not supported in HTML5. Use CSS instead.
Defines centered text
<cite> Defines the title of a work
<code> Defines a piece of computer code
<del> Defines text that has been deleted from a document
<dfn> Represents the defining instance of a term
<em> Defines emphasized text
<font> Not supported in HTML5. Use CSS instead.
Defines font, color, and size for text
<i> Defines a part of text in an alternate voice or mood
<ins> Defines a text that has been inserted into a document
<kbd> Defines keyboard input
<mark> Defines marked/highlighted text
<meter> Defines a scalar measurement within a known range (a gauge)
<pre> Defines preformatted text
<progress> Represents the progress of a task
<q> Defines a short quotation
<rp> Defines what to show in browsers that do not support ruby annotations
<rt> Defines an explanation/pronunciation of characters (for East Asian typography)
<ruby> Defines a ruby annotation (for East Asian typography)
<s> Defines text that is no longer correct
<samp> Defines sample output from a computer program
<small> Defines smaller text
<strike> Not supported in HTML5. Use <del> or <s> instead.
Defines strikethrough text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<time> Defines a date/time
<tt> Not supported in HTML5. Use CSS instead.
Defines teletype text
<u> Defines text that should be stylistically different from normal text
<var> Defines a variable
<wbr> Defines a possible line-break

Forms and Input

Tag Description
<form> Defines an HTML form for user input
<input> Defines an input control
<textarea> Defines a multiline input control (text area)
<button> Defines a clickable button
<select> Defines a drop-down list
<optgroup> Defines a group of related options in a drop-down list
<option> Defines an option in a drop-down list
<label> Defines a label for an <input> element
<fieldset> Groups related elements in a form
<legend> Defines a caption for a <fieldset> element
<datalist> Specifies a list of pre-defined options for input controls
<keygen> Defines a key-pair generator field (for forms)
<output> Defines the result of a calculation

Frames

Tag Description
<frame> Not supported in HTML5.
Defines a window (a frame) in a frameset
<frameset> Not supported in HTML5.
Defines a set of frames
<noframes> Not supported in HTML5.
Defines an alternate content for users that do not support frames
<iframe> Defines an inline frame

Images

Tag Description
<img> Defines an image
<map> Defines a client-side image-map
<area> Defines an area inside an image-map
<canvas> Used to draw graphics, on the fly, via scripting (usually JavaScript)
<figcaption> Defines a caption for a <figure> element
<figure> Specifies self-contained content

Audio / Video

Tag Description
<audio> Defines sound content
<source> Defines multiple media resources for media elements (<video> and <audio>)
<track> Defines text tracks for media elements (<video> and <audio>)
<video> Defines a video or movie

Links

Tag Description
<a> Defines a hyperlink
<link> Defines the relationship between a document and an external resource (most used to link to style sheets)
<nav> Defines navigation links

Lists

Tag Description
<ul> Defines an unordered list
<ol> Defines an ordered list
<li> Defines a list item
<dir> Not supported in HTML5. Use <ul> instead.
Defines a directory list
<dl> Defines a description list
<dt> Defines a term/name in a description list
<dd> Defines a description of a term/name in a description list
<menu> Defines a list/menu of commands
<menuitem> Defines a command/menu item that the user can invoke from a popup menu

Tables

Tag Description
<table> Defines a table
<caption> Defines a table caption
<th> Defines a header cell in a table
<tr> Defines a row in a table
<td> Defines a cell in a table
<thead> Groups the header content in a table
<tbody> Groups the body content in a table
<tfoot> Groups the footer content in a table
<col> Specifies column properties for each column within a <colgroup> element
<colgroup> Specifies a group of one or more columns in a table for formatting

Styles and Semantics

Tag Description
<style> Defines style information for a document
<div> Defines a section in a document
<span> Defines a section in a document
<header> Defines a header for a document or section
<footer> Defines a footer for a document or section
<main> Specifies the main content of a document
<section> Defines a section in a document
<article> Defines an article
<aside> Defines content aside from the page content
<details> Defines additional details that the user can view or hide
<dialog> Defines a dialog box or window
<summary> Defines a visible heading for a <details> element

Meta Info

Tag Description
<head> Defines information about the document
<meta> Defines metadata about an HTML document
<base> Specifies the base URL/target for all relative URLs in a document
<basefont> Not supported in HTML5. Use CSS instead.
Specifies a default color, size, and font for all text in a document

Programming

Tag Description
<script> Defines a client-side script
<noscript> Defines an alternate content for users that do not support client-side scripts
<applet> Not supported in HTML5. Use <embed> or <object> instead.
Defines an embedded applet
<embed> Defines a container for an external (non-HTML) application
<object> Defines an embedded object
<param> Defines a parameter for an object