SlideShare una empresa de Scribd logo
1 de 12
HTML
Τι είναι η HTML? HyperTextMarkup Language Δεν είναι γλώσσα προγραμματισμού, είναι markup γλώσσα. Μια markup γλώσσα είναι ένας ειδικός τρόπος γραφής ενός αρχείου, χρησιμοποιώντας tags. Κάθε ιστοσελίδα είναι ένα HTML αρχείο. Το αρχείο αυτό αποτελείται από tags που περιγράφουν την ιστοσελίδα. Δουλειά ενός browser είναι να διαβάσει το αρχείο και να σχεδιάσει την ιστοσελίδα.
Βασική Δομή της HTML Κάθε tag έχει ένα opening tagκαι (πιθανώς) ένα ending tag. Ανάμεσα στο opening και στο ending υπάρχει το περιεχόμενο του tag. Μέσα στο περιεχόμενο μπορεί να υπάρχουν άλλα tags ή μόνο απλό κείμενο. Κάθε tag αντιπροσωπεύει ένα διαφορετικό αντικείμενο που κάνει διαφορετικές λειτουργίες. Κάθε tag μπορεί να έχει και κάποια attributesπου το περιγράφουν.
Βασική Δομή της HTML <nameattribute=“value”></name> <nameattribute=“value” /> <div id=“header”> 	<p>Click  	<a href=“www.studentguru.gr”>here</a> to go to SG!</p><br /> 	<imgsrc=“sample.jpg” alt=“image” /> </div>
Βασική Δομή της HTML Κάθε HTML σελίδα ξεκινάει με το tag <html> και τελειώνει με το </html>. Μέσα στην σελίδα υπάρχουν δύο βασικές περιοχές που ορίζονται με τα tags <head></head> και <body></body>. ΌΛΑ τα tags βρίσκονται μέσα σε αυτές τις περιοχές, τίποτε δεν ορίζεται έξω από αυτές. Άλλα tags μπαίνουν στο <head> και άλλα στο <body>.
Παραδείγματα
Tagsστην περιοχή <head> Τα tags της περιοχής <head> είναι εντολές προς τον browser για το που βρίσκονται αρχεία CSS και script, καθώς και metadata. Μερικά από αυτά τα tags: <title>First Steps in Web Development</title> <linkrel="shortcut icon” href=“logo.ico" /> <meta name=“description” content=“Tutorial Page” /> <meta name=“author” content=“Kostas Voulgaris” /> <meta name=“keywords” content=“HTML, CSS, JS” /> <meta http-equiv=“Content-Type” content=“text/html;charset=ISO-8859-1” />
Tags στην περιοχή <body> Τα tags της περιοχής <body> είναι αντικείμενα τα οποία ο browser θα κάνει render στην οθόνη μας. <div></div> Ορίζει μια περιοχή της σελίδας. <p></p>Ορίζει μια παράγραφο μέσα στην σελίδα. <span></span> Ξεχωρίζει ένα κομμάτι κειμένου. <br /> Το new line της HTML. <h1></h1>, <h2></h2> … <h6></h6> Επικεφαλίδες κομματιών της σελίδας. <strong></strong> και<em></em>
Tags στην περιοχή <body> Εικόνες: Εικόνες στην HTML βάζουμε με το tag img. <imgsrc=“./sample.jpg” alt=“Image” /> Srcείναι το urlόπου βρίσκεται η εικόνα Alt είναι ένα κείμενο που θα εμφανιστεί αν δεν βρεθεί η εικόνα.
Tags στην περιοχή <body> Σύνδεσμοι: Σύνδεσμοι σε άλλες σελίδες ορίζονται με το tag a. <a href=“../index.html”>Home Page</a> Στο attribute hrefδίνουμε το url (απόλυτο ή και σχετικό) της σελίδας στην οποία θα μας στέλνει. Με το attribute targetορίζουμε αν η νέα σελίδα θα ανοίξει στο ίδιο παράθυρο ή σε καινούργιο tab.
Tags στην περιοχή <body> Λίστες: <ul></ul>Unordered list, κάθε στοιχείο έχει ένα σύμβολο δίπλα του. <ol></ol> Ordered list, κάθε στοιχείο έχει ένα αύξοντα αριθμό δίπλα του. Κάθε στοιχείο μιας λίστας ορίζεται με το tag <li></li>
Tags στην περιοχή <body> Tables:Ορίζονται με το tag <table></table>. Κάθε γραμμή ορίζεται με το tag <tr></tr>. Κάθε κελί μέσα σε μια γραμμή με το tag <td></td>. Με το <th></th>ορίζουμε επικεφαλίδα σε μια κολώνα. <table border=“1”> 	<tr> 		<td>Row 1, Cell 1</td> 		<td>Row 1, Cell 2</td> 	</tr> </table>

Más contenido relacionado

Similar a HTML

Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semant...
Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semant...Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semant...
Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semant...andreasabiou
 
05 - 06 Html blog wordpress demo
05 - 06 Html blog wordpress demo05 - 06 Html blog wordpress demo
05 - 06 Html blog wordpress demoeretrianews
 
ergasthrio_8_diafaneies_2
ergasthrio_8_diafaneies_2ergasthrio_8_diafaneies_2
ergasthrio_8_diafaneies_2vaseisdedom
 
HTML-CSS για αρχάριους :: Μάθημα 1ο
HTML-CSS για αρχάριους :: Μάθημα 1οHTML-CSS για αρχάριους :: Μάθημα 1ο
HTML-CSS για αρχάριους :: Μάθημα 1οDespina Kamilali
 

Similar a HTML (7)

Html
HtmlHtml
Html
 
Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semant...
Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semant...Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semant...
Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semant...
 
05 - 06 Html blog wordpress demo
05 - 06 Html blog wordpress demo05 - 06 Html blog wordpress demo
05 - 06 Html blog wordpress demo
 
CSS
CSSCSS
CSS
 
ergasthrio_8_diafaneies_2
ergasthrio_8_diafaneies_2ergasthrio_8_diafaneies_2
ergasthrio_8_diafaneies_2
 
Eisagogi
EisagogiEisagogi
Eisagogi
 
HTML-CSS για αρχάριους :: Μάθημα 1ο
HTML-CSS για αρχάριους :: Μάθημα 1οHTML-CSS για αρχάριους :: Μάθημα 1ο
HTML-CSS για αρχάριους :: Μάθημα 1ο
 

Último

Επίσκεψη στο 11ο Γυμνάσιο Πάτρας
Επίσκεψη              στο 11ο Γυμνάσιο ΠάτραςΕπίσκεψη              στο 11ο Γυμνάσιο Πάτρας
Επίσκεψη στο 11ο Γυμνάσιο ΠάτραςDimitra Mylonaki
 
ΙΣΤΟΡΙΑ Α' ΓΥΜΝΑΣΙΟΥ : ΕΠΑΝΑΛΗΠΤΙΚΕΣ ΑΣΚΗΣΕΙΣ ΜΕΡΟΣ 2ο
ΙΣΤΟΡΙΑ Α' ΓΥΜΝΑΣΙΟΥ : ΕΠΑΝΑΛΗΠΤΙΚΕΣ ΑΣΚΗΣΕΙΣ ΜΕΡΟΣ 2οΙΣΤΟΡΙΑ Α' ΓΥΜΝΑΣΙΟΥ : ΕΠΑΝΑΛΗΠΤΙΚΕΣ ΑΣΚΗΣΕΙΣ ΜΕΡΟΣ 2ο
ΙΣΤΟΡΙΑ Α' ΓΥΜΝΑΣΙΟΥ : ΕΠΑΝΑΛΗΠΤΙΚΕΣ ΑΣΚΗΣΕΙΣ ΜΕΡΟΣ 2οΧρύσα Παπακωνσταντίνου
 
EKSETASTEA KAI DIDAKTEA YLH G TAKSHS GENIKOY LYKEIOY
EKSETASTEA KAI DIDAKTEA YLH G TAKSHS GENIKOY LYKEIOYEKSETASTEA KAI DIDAKTEA YLH G TAKSHS GENIKOY LYKEIOY
EKSETASTEA KAI DIDAKTEA YLH G TAKSHS GENIKOY LYKEIOYssuser369a35
 
2η Διεθνική Συνάντηση μαθητών και καθηγητών στο Σαλέρνο της Ιταλίας
2η Διεθνική Συνάντηση μαθητών και καθηγητών στο Σαλέρνο της Ιταλίας2η Διεθνική Συνάντηση μαθητών και καθηγητών στο Σαλέρνο της Ιταλίας
2η Διεθνική Συνάντηση μαθητών και καθηγητών στο Σαλέρνο της ΙταλίαςKonstantina Katirtzi
 
Σουρεαλιστικά ταξίδια μέσα από την τέχνη
Σουρεαλιστικά ταξίδια μέσα από την τέχνηΣουρεαλιστικά ταξίδια μέσα από την τέχνη
Σουρεαλιστικά ταξίδια μέσα από την τέχνηTheodora Chandrinou
 
Πασχαλινές λαμπάδες από τη Δ΄ τάξη του σχολείου μας.pptx
Πασχαλινές λαμπάδες από τη Δ΄ τάξη του σχολείου μας.pptxΠασχαλινές λαμπάδες από τη Δ΄ τάξη του σχολείου μας.pptx
Πασχαλινές λαμπάδες από τη Δ΄ τάξη του σχολείου μας.pptx36dimperist
 
Η ΑΔΙΚΕΙΑ ΤΟΥ ΔΙΑΓΩΝΙΣΜΟΥ ΑΣΕΠ ΕΚΠΑΙΔΕΥΤΙΚΩΝ 2008
Η ΑΔΙΚΕΙΑ ΤΟΥ ΔΙΑΓΩΝΙΣΜΟΥ ΑΣΕΠ ΕΚΠΑΙΔΕΥΤΙΚΩΝ  2008Η ΑΔΙΚΕΙΑ ΤΟΥ ΔΙΑΓΩΝΙΣΜΟΥ ΑΣΕΠ ΕΚΠΑΙΔΕΥΤΙΚΩΝ  2008
Η ΑΔΙΚΕΙΑ ΤΟΥ ΔΙΑΓΩΝΙΣΜΟΥ ΑΣΕΠ ΕΚΠΑΙΔΕΥΤΙΚΩΝ 2008Θεόδωρος Μαραγκούλας
 
Επίσκεψη στο 10ο Γυμνάσιο Πάτρας
Επίσκεψη          στο 10ο Γυμνάσιο ΠάτραςΕπίσκεψη          στο 10ο Γυμνάσιο Πάτρας
Επίσκεψη στο 10ο Γυμνάσιο ΠάτραςDimitra Mylonaki
 
Η Κινέζικη Αστρολογία - Ημερολόγιο - Ζώδια.docx
Η Κινέζικη Αστρολογία - Ημερολόγιο - Ζώδια.docxΗ Κινέζικη Αστρολογία - Ημερολόγιο - Ζώδια.docx
Η Κινέζικη Αστρολογία - Ημερολόγιο - Ζώδια.docxeucharis
 
Μια νύχτα σε κατάστημα παιχνιδιώνΚΕΙΜΕΝΑ
Μια νύχτα σε κατάστημα παιχνιδιώνΚΕΙΜΕΝΑΜια νύχτα σε κατάστημα παιχνιδιώνΚΕΙΜΕΝΑ
Μια νύχτα σε κατάστημα παιχνιδιώνΚΕΙΜΕΝΑDimitra Mylonaki
 
9.SPSS και δείκτες περιγραφικής στατιστικής.pdf
9.SPSS και δείκτες περιγραφικής στατιστικής.pdf9.SPSS και δείκτες περιγραφικής στατιστικής.pdf
9.SPSS και δείκτες περιγραφικής στατιστικής.pdfssuser2f8893
 
Πασχαλινά αυγά από τη Β΄ τάξη του σχολείου μας.pptx
Πασχαλινά αυγά από τη Β΄ τάξη του σχολείου μας.pptxΠασχαλινά αυγά από τη Β΄ τάξη του σχολείου μας.pptx
Πασχαλινά αυγά από τη Β΄ τάξη του σχολείου μας.pptx36dimperist
 
Γιορτή της μητέρας-Φύλλα εργασιών για όλες τις τάξεις
Γιορτή της μητέρας-Φύλλα εργασιών για όλες τις τάξειςΓιορτή της μητέρας-Φύλλα εργασιών για όλες τις τάξεις
Γιορτή της μητέρας-Φύλλα εργασιών για όλες τις τάξειςΟΛΓΑ ΤΣΕΧΕΛΙΔΟΥ
 
Πασχαλινές Λαμπάδες από ΣΤ τάξη του σχολείου μας.pptx
Πασχαλινές Λαμπάδες από ΣΤ τάξη του σχολείου μας.pptxΠασχαλινές Λαμπάδες από ΣΤ τάξη του σχολείου μας.pptx
Πασχαλινές Λαμπάδες από ΣΤ τάξη του σχολείου μας.pptx36dimperist
 
Μαθητικές καταλήψεις
Μαθητικές                                  καταλήψειςΜαθητικές                                  καταλήψεις
Μαθητικές καταλήψειςDimitra Mylonaki
 
Επίσκεψη στο 12ο Γυμνάσιο Πάτρας
Επίσκεψη          στο 12ο Γυμνάσιο ΠάτραςΕπίσκεψη          στο 12ο Γυμνάσιο Πάτρας
Επίσκεψη στο 12ο Γυμνάσιο ΠάτραςDimitra Mylonaki
 
Μαθητικά συμβούλια .
Μαθητικά συμβούλια                                  .Μαθητικά συμβούλια                                  .
Μαθητικά συμβούλια .Dimitra Mylonaki
 

Último (20)

ΙΣΤΟΡΙΑ Α΄ΓΥΜΝΑΣΙΟΥ : ΕΠΑΝΑΛΗΨΗ 2024
ΙΣΤΟΡΙΑ Α΄ΓΥΜΝΑΣΙΟΥ  : ΕΠΑΝΑΛΗΨΗ 2024ΙΣΤΟΡΙΑ Α΄ΓΥΜΝΑΣΙΟΥ  : ΕΠΑΝΑΛΗΨΗ 2024
ΙΣΤΟΡΙΑ Α΄ΓΥΜΝΑΣΙΟΥ : ΕΠΑΝΑΛΗΨΗ 2024
 
Επίσκεψη στο 11ο Γυμνάσιο Πάτρας
Επίσκεψη              στο 11ο Γυμνάσιο ΠάτραςΕπίσκεψη              στο 11ο Γυμνάσιο Πάτρας
Επίσκεψη στο 11ο Γυμνάσιο Πάτρας
 
ΙΣΤΟΡΙΑ Α' ΓΥΜΝΑΣΙΟΥ : ΕΠΑΝΑΛΗΠΤΙΚΕΣ ΑΣΚΗΣΕΙΣ ΜΕΡΟΣ 2ο
ΙΣΤΟΡΙΑ Α' ΓΥΜΝΑΣΙΟΥ : ΕΠΑΝΑΛΗΠΤΙΚΕΣ ΑΣΚΗΣΕΙΣ ΜΕΡΟΣ 2οΙΣΤΟΡΙΑ Α' ΓΥΜΝΑΣΙΟΥ : ΕΠΑΝΑΛΗΠΤΙΚΕΣ ΑΣΚΗΣΕΙΣ ΜΕΡΟΣ 2ο
ΙΣΤΟΡΙΑ Α' ΓΥΜΝΑΣΙΟΥ : ΕΠΑΝΑΛΗΠΤΙΚΕΣ ΑΣΚΗΣΕΙΣ ΜΕΡΟΣ 2ο
 
EKSETASTEA KAI DIDAKTEA YLH G TAKSHS GENIKOY LYKEIOY
EKSETASTEA KAI DIDAKTEA YLH G TAKSHS GENIKOY LYKEIOYEKSETASTEA KAI DIDAKTEA YLH G TAKSHS GENIKOY LYKEIOY
EKSETASTEA KAI DIDAKTEA YLH G TAKSHS GENIKOY LYKEIOY
 
2η Διεθνική Συνάντηση μαθητών και καθηγητών στο Σαλέρνο της Ιταλίας
2η Διεθνική Συνάντηση μαθητών και καθηγητών στο Σαλέρνο της Ιταλίας2η Διεθνική Συνάντηση μαθητών και καθηγητών στο Σαλέρνο της Ιταλίας
2η Διεθνική Συνάντηση μαθητών και καθηγητών στο Σαλέρνο της Ιταλίας
 
Σουρεαλιστικά ταξίδια μέσα από την τέχνη
Σουρεαλιστικά ταξίδια μέσα από την τέχνηΣουρεαλιστικά ταξίδια μέσα από την τέχνη
Σουρεαλιστικά ταξίδια μέσα από την τέχνη
 
ΙΣΤΟΡΙΑ Γ΄ ΓΥΜΝΑΣΙΟΥ : ΕΠΑΝΑΛΗΨΗ 2024
ΙΣΤΟΡΙΑ Γ΄ ΓΥΜΝΑΣΙΟΥ : ΕΠΑΝΑΛΗΨΗ 2024ΙΣΤΟΡΙΑ Γ΄ ΓΥΜΝΑΣΙΟΥ : ΕΠΑΝΑΛΗΨΗ 2024
ΙΣΤΟΡΙΑ Γ΄ ΓΥΜΝΑΣΙΟΥ : ΕΠΑΝΑΛΗΨΗ 2024
 
Σεβασμός .
Σεβασμός                                   .Σεβασμός                                   .
Σεβασμός .
 
Πασχαλινές λαμπάδες από τη Δ΄ τάξη του σχολείου μας.pptx
Πασχαλινές λαμπάδες από τη Δ΄ τάξη του σχολείου μας.pptxΠασχαλινές λαμπάδες από τη Δ΄ τάξη του σχολείου μας.pptx
Πασχαλινές λαμπάδες από τη Δ΄ τάξη του σχολείου μας.pptx
 
Η ΑΔΙΚΕΙΑ ΤΟΥ ΔΙΑΓΩΝΙΣΜΟΥ ΑΣΕΠ ΕΚΠΑΙΔΕΥΤΙΚΩΝ 2008
Η ΑΔΙΚΕΙΑ ΤΟΥ ΔΙΑΓΩΝΙΣΜΟΥ ΑΣΕΠ ΕΚΠΑΙΔΕΥΤΙΚΩΝ  2008Η ΑΔΙΚΕΙΑ ΤΟΥ ΔΙΑΓΩΝΙΣΜΟΥ ΑΣΕΠ ΕΚΠΑΙΔΕΥΤΙΚΩΝ  2008
Η ΑΔΙΚΕΙΑ ΤΟΥ ΔΙΑΓΩΝΙΣΜΟΥ ΑΣΕΠ ΕΚΠΑΙΔΕΥΤΙΚΩΝ 2008
 
Επίσκεψη στο 10ο Γυμνάσιο Πάτρας
Επίσκεψη          στο 10ο Γυμνάσιο ΠάτραςΕπίσκεψη          στο 10ο Γυμνάσιο Πάτρας
Επίσκεψη στο 10ο Γυμνάσιο Πάτρας
 
Η Κινέζικη Αστρολογία - Ημερολόγιο - Ζώδια.docx
Η Κινέζικη Αστρολογία - Ημερολόγιο - Ζώδια.docxΗ Κινέζικη Αστρολογία - Ημερολόγιο - Ζώδια.docx
Η Κινέζικη Αστρολογία - Ημερολόγιο - Ζώδια.docx
 
Μια νύχτα σε κατάστημα παιχνιδιώνΚΕΙΜΕΝΑ
Μια νύχτα σε κατάστημα παιχνιδιώνΚΕΙΜΕΝΑΜια νύχτα σε κατάστημα παιχνιδιώνΚΕΙΜΕΝΑ
Μια νύχτα σε κατάστημα παιχνιδιώνΚΕΙΜΕΝΑ
 
9.SPSS και δείκτες περιγραφικής στατιστικής.pdf
9.SPSS και δείκτες περιγραφικής στατιστικής.pdf9.SPSS και δείκτες περιγραφικής στατιστικής.pdf
9.SPSS και δείκτες περιγραφικής στατιστικής.pdf
 
Πασχαλινά αυγά από τη Β΄ τάξη του σχολείου μας.pptx
Πασχαλινά αυγά από τη Β΄ τάξη του σχολείου μας.pptxΠασχαλινά αυγά από τη Β΄ τάξη του σχολείου μας.pptx
Πασχαλινά αυγά από τη Β΄ τάξη του σχολείου μας.pptx
 
Γιορτή της μητέρας-Φύλλα εργασιών για όλες τις τάξεις
Γιορτή της μητέρας-Φύλλα εργασιών για όλες τις τάξειςΓιορτή της μητέρας-Φύλλα εργασιών για όλες τις τάξεις
Γιορτή της μητέρας-Φύλλα εργασιών για όλες τις τάξεις
 
Πασχαλινές Λαμπάδες από ΣΤ τάξη του σχολείου μας.pptx
Πασχαλινές Λαμπάδες από ΣΤ τάξη του σχολείου μας.pptxΠασχαλινές Λαμπάδες από ΣΤ τάξη του σχολείου μας.pptx
Πασχαλινές Λαμπάδες από ΣΤ τάξη του σχολείου μας.pptx
 
Μαθητικές καταλήψεις
Μαθητικές                                  καταλήψειςΜαθητικές                                  καταλήψεις
Μαθητικές καταλήψεις
 
Επίσκεψη στο 12ο Γυμνάσιο Πάτρας
Επίσκεψη          στο 12ο Γυμνάσιο ΠάτραςΕπίσκεψη          στο 12ο Γυμνάσιο Πάτρας
Επίσκεψη στο 12ο Γυμνάσιο Πάτρας
 
Μαθητικά συμβούλια .
Μαθητικά συμβούλια                                  .Μαθητικά συμβούλια                                  .
Μαθητικά συμβούλια .
 

HTML

  • 2. Τι είναι η HTML? HyperTextMarkup Language Δεν είναι γλώσσα προγραμματισμού, είναι markup γλώσσα. Μια markup γλώσσα είναι ένας ειδικός τρόπος γραφής ενός αρχείου, χρησιμοποιώντας tags. Κάθε ιστοσελίδα είναι ένα HTML αρχείο. Το αρχείο αυτό αποτελείται από tags που περιγράφουν την ιστοσελίδα. Δουλειά ενός browser είναι να διαβάσει το αρχείο και να σχεδιάσει την ιστοσελίδα.
  • 3. Βασική Δομή της HTML Κάθε tag έχει ένα opening tagκαι (πιθανώς) ένα ending tag. Ανάμεσα στο opening και στο ending υπάρχει το περιεχόμενο του tag. Μέσα στο περιεχόμενο μπορεί να υπάρχουν άλλα tags ή μόνο απλό κείμενο. Κάθε tag αντιπροσωπεύει ένα διαφορετικό αντικείμενο που κάνει διαφορετικές λειτουργίες. Κάθε tag μπορεί να έχει και κάποια attributesπου το περιγράφουν.
  • 4. Βασική Δομή της HTML <nameattribute=“value”></name> <nameattribute=“value” /> <div id=“header”> <p>Click <a href=“www.studentguru.gr”>here</a> to go to SG!</p><br /> <imgsrc=“sample.jpg” alt=“image” /> </div>
  • 5. Βασική Δομή της HTML Κάθε HTML σελίδα ξεκινάει με το tag <html> και τελειώνει με το </html>. Μέσα στην σελίδα υπάρχουν δύο βασικές περιοχές που ορίζονται με τα tags <head></head> και <body></body>. ΌΛΑ τα tags βρίσκονται μέσα σε αυτές τις περιοχές, τίποτε δεν ορίζεται έξω από αυτές. Άλλα tags μπαίνουν στο <head> και άλλα στο <body>.
  • 7. Tagsστην περιοχή <head> Τα tags της περιοχής <head> είναι εντολές προς τον browser για το που βρίσκονται αρχεία CSS και script, καθώς και metadata. Μερικά από αυτά τα tags: <title>First Steps in Web Development</title> <linkrel="shortcut icon” href=“logo.ico" /> <meta name=“description” content=“Tutorial Page” /> <meta name=“author” content=“Kostas Voulgaris” /> <meta name=“keywords” content=“HTML, CSS, JS” /> <meta http-equiv=“Content-Type” content=“text/html;charset=ISO-8859-1” />
  • 8. Tags στην περιοχή <body> Τα tags της περιοχής <body> είναι αντικείμενα τα οποία ο browser θα κάνει render στην οθόνη μας. <div></div> Ορίζει μια περιοχή της σελίδας. <p></p>Ορίζει μια παράγραφο μέσα στην σελίδα. <span></span> Ξεχωρίζει ένα κομμάτι κειμένου. <br /> Το new line της HTML. <h1></h1>, <h2></h2> … <h6></h6> Επικεφαλίδες κομματιών της σελίδας. <strong></strong> και<em></em>
  • 9. Tags στην περιοχή <body> Εικόνες: Εικόνες στην HTML βάζουμε με το tag img. <imgsrc=“./sample.jpg” alt=“Image” /> Srcείναι το urlόπου βρίσκεται η εικόνα Alt είναι ένα κείμενο που θα εμφανιστεί αν δεν βρεθεί η εικόνα.
  • 10. Tags στην περιοχή <body> Σύνδεσμοι: Σύνδεσμοι σε άλλες σελίδες ορίζονται με το tag a. <a href=“../index.html”>Home Page</a> Στο attribute hrefδίνουμε το url (απόλυτο ή και σχετικό) της σελίδας στην οποία θα μας στέλνει. Με το attribute targetορίζουμε αν η νέα σελίδα θα ανοίξει στο ίδιο παράθυρο ή σε καινούργιο tab.
  • 11. Tags στην περιοχή <body> Λίστες: <ul></ul>Unordered list, κάθε στοιχείο έχει ένα σύμβολο δίπλα του. <ol></ol> Ordered list, κάθε στοιχείο έχει ένα αύξοντα αριθμό δίπλα του. Κάθε στοιχείο μιας λίστας ορίζεται με το tag <li></li>
  • 12. Tags στην περιοχή <body> Tables:Ορίζονται με το tag <table></table>. Κάθε γραμμή ορίζεται με το tag <tr></tr>. Κάθε κελί μέσα σε μια γραμμή με το tag <td></td>. Με το <th></th>ορίζουμε επικεφαλίδα σε μια κολώνα. <table border=“1”> <tr> <td>Row 1, Cell 1</td> <td>Row 1, Cell 2</td> </tr> </table>

Notas del editor

  1. Blank page from Expression Web 4 and layout
  2. Start htmlTags.html
  3. Heading important for search engines, for importance as well
  4. Heading important for search engines, for importance as well
  5. Heading important for search engines, for importance as well