κωδικας html για τις βασικές χρήσεις Σε αυτό το άρθρο παρουσιάζεται ο κωδικας html για τις βασικές χρήσεις. Είναι μια εισαγωγή στην html.
Όλες οι σελίδες html έχουν την παρακάτω δομή: 1 <!DOCTYPE html> 2 <html> 3 <body> 4 <h1>My First Heading</h1> 5 6 <p>My first paragraph.</p> 7 8 </body> 9 </html> 10 Το έγγραφο html (HTML document) χωρίζεται σε δυο μεγάλα κομμάτια: στο head και στο body.
κωδικας html Οι ακόλουθες εττικέτες (tags) μπορούν να χρησιμοποιηθούν στο head: title, style, meta, link, script, noscript, και base.
Το title δηλώνει έναν τίτλο για το HTML έγγραφο html Το base δηλώνει το προκαθορισμένο URL και το προκαθοσισμένο target για όλα τα links Το meta παρέχει metadata για το έγγραφο html Ο παρακάτω κωδικας html δείχνει τη χρήση των title, base, meta στο head:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
<!DOCTYPE html> <html> <head> <title>My first HTML page</title> <base href="http://www.w3schools.com/images/" target="_blank"> <meta <meta <meta <meta
name="description" content="Free Web tutorials"> name="keywords" content="HTML,CSS,XML,JavaScript"> name="author" content="Hege Refsnes"> charset="UTF-8">
</head> <body> <p>The content of the body element is displayed in the browser.</p> <p>The content of the title element is displayed in the browser's title.</p> </body> </html>
Επικεφαλίδες (HTML Headings) Οι επικεφαλίδες παρουσιάζονται με τις ετικέτες (tags): h1 h2 h3 h4 h5 h6 Οι επικεφαλίδες είναι πολύ σημαντικές. Πρέπει να χρησιμοποιούμε επικεφαλίδες μόνο εκεί που πρέπει. Δεν πρέπει να χρησιμοποιούμε επικεφαλίδες για να κάνουμε το κείμενο BIG ή bold. Αυτό είναι ένα από τα πιο συνηθισμένα λαθη seo που κάνουν οι αρχάριοι χρήστες. Οι μηχανές αναζήτησης χρησιμοποιούν τις επικεφαλίδες για να ταξινομήσουν τη δομή και το περιεχόμενο της κάθε ιστοσελίδας. Είναι σημαντικό οι επικεφαλίδες να απεικονίζουν τη δομή της σελίδας σας ώστε να πετύχετε αποτελεσματικό seo. Ο παρακάτω κωδικας html δείχνει τη χρήση επικεφαλίδας:
1 2 3 4 5 6 7 8 9 10 11 12 13
<!DOCTYPE html> <html> <body> <h1>This <h2>This <h3>This <h4>This <h5>This <h6>This
is is is is is is
heading heading heading heading heading heading
1</h1> 2</h2> 3</h3> 4</h4> 5</h5> 6</h6>
</body> </html>
Παράγραφοι (HTML Paragraphs) Οι παράγραφοι δημιουργούνται με την ετικέτα p Ο παρακάτω κωδικας html δείχνει τη χρήση παραγράφου:
1 2 3 4 5 6 7 8 9 10
<!DOCTYPE html> <html> <body> <p>This is a paragraph.</p> <p>This is a paragraph.</p> <p>This is a paragraph.</p> </body> </html>
Ένα συνηθισμένο λάθος που κάνουν όσοι μαθαίνουν html είναι να αγνοήσουν το κλείσιμο της ετικετας p. Αυτό δεν θα βγάλει πρόβλημα στους περισσότερους browsers, όμως δεν πρέπει να στηρίζεστε εκεί. Ο παρακάτω κωδικας html παρουσιάζει αυτό το λάθος στη χρήση παραγράφου:
1 2 3 4 5 6 7 8 9 10
<!DOCTYPE html> <html> <body> <p>This is a paragraph. <p>This is a paragraph. <p>This is a paragraph. <p>Don't forget to close your HTML tags!</p> </body>
11 12
</html>
Σύνδεσμοι (HTML Links) Οι συνδεσμοι δημιουργούνται με την ετικέτα a Ο παρακάτω κωδικας html δείχνει τη χρήση συνδέσμου:
1 2 3 4 5 6 7 8 9
<!DOCTYPE html> <html> <body> <a href="http://www.infopolis.gr"> This is a link</a> </body> </html>
HTML Images Οι εικόνες δημιουργούνται με την ετικέτα img Ο παρακάτω κωδικας html δείχνει τη χρήση εικόνας:
1 2 3 4 5 6
<!DOCTYPE html> <html> <body> <img src="infopolis.jpg" width="104" height="142"></body> </html>
HTML Lines Οι γραμμές δημιουργούνται με την ετικέτα hr Ο παρακάτω κωδικας html δείχνει τη χρήση γραμμής:
1 2 3 4 5 6 7 8 9 10 11 12
<!DOCTYPE html> <html> <body> <p>The hr tag defines a horizontal rule:</p> <hr> <p>This is a paragraph.</p> <hr> <p>This is a paragraph.</p> <hr> <p>This is a paragraph.</p> </body> </html>
HTML Comments Ο παρακάτω κωδικας html δείχνει τη χρήση σχολίων:
1 2 3 4 5 6 7 8 9
<!DOCTYPE html> <html> <body> <!--This comment will not be displayed--> <p>This is a regular paragraph</p> </body> </html>
Σε αυτό το άρθρο παρουσιάστηκε ο κωδικας html για τις βασικές χρήσεις. Τα παραδείγματα αυτά αποτελούν html μαθηματα τα οποία αποτελούν την βάση για την δημιουργία μιας ιστοσελίδας
html μαθηματα αποτελεσματικό seo εισαγωγή στην html κωδικας html λαθη seo
Πηγή: http://www.infopolis.gr/kodikas-html/