SlideShare una empresa de Scribd logo
1 de 11
Descargar para leer sin conexión
Συγγραφή στατικών σελίδων με
χρήση HTML
Ανάγκες

  Ομαλή και ομοιόμορφη εμφάνιση της
  πληροφορίας σε όλους τους χρήστες που
  τη ζητούν, ανεξάρτητα πλατφόρμας
  εργασίας
   Εμφάνιση πολλαπλών τύπων δεδομένων
  (κείμενο, στατική εικόνα, κινούμενη
  εικόνα, ήχος) χωρίς την απαίτηση για
  πολλαπλά διαφορετικά προγράμματα
HyperText Markup Language

  Μετάφραση: Γλώσσα Σήμανσης Υπερκειμένου
   Απλή γλώσσα κειμένου
   Στηρίζεται στο πρότυπο SGML (Standard
  Generalized Markup Language) του οποίου
  αποτελεί εφαρμογή
  Χρησιμοποιείται για να δώσει πληροφορίες
  στο Web Browser για το πώς θα πρέπει να
  εμφανίσει το κείμενο και περιγράφει τη
  διάταξη των πληροφοριών στη σελίδα
Ετικέτες - Tags
   Τα tags χαρακτηρίζονται από ένα όνομα και μια
   λίστα παραμέτρων
   Τα tags εσωκλείονται σε τριγωνικές παρενθέσεις
   <όνομα παράμετροι>
    Τα tags εμφανίζονται σε δυο μορφές:
      Tags έναρξης (περιέχουν τις παραμέτρους), π.χ. <b>
      Tags τερματισμού (δεν περιέχουν παραμέτρους), π.χ. </b>
    Κάποια tags τερματίζονται εσωτερικά, π.χ. <br />
    Τα tags έναρξης και τερματισμού καθορίζουν τη
   μορφοποίηση του κειμένου που βρίσκεται ανάμεσα
   τους
Παραδείγματα Χρήσης Tags

   Έντονη γραφή <b>, <strong>
 π .χ. Ωραίος καιρός <strong>σήμερα</strong>
    π .χ. Ωραίος καιρός σήμερα


   Πλάγια γραφή <i>, <em>
   Ωραίος καιρός <em>σήμερα</em>
   π .χ. Ωραίος καιρός σήμερα
Σημαντικότερα Tags

  Έναρξη/Τερματισμός εγγράφου HTML
  <html>…</html>
  Έναρξη/Τερματισμός κεφαλίδας
  εγγράφου HTML <head>…</head>
   Έναρξη/Τερματισμός σώματος
  εγγράφου HTML <body>…</body>
Παράδειγμα Αρχείου HTML
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html;
    charset=windows-1253" />
 <title>Παράδειγμα Χρήσης της echo</title>
 </head> <body>
 <p align=center>Hello world
 </body>
 </html>
    Το έγγραφο HTML (αρχείο με κατάληξη htm ή html) αρχίζει
    και τελειώνει με τη χρήση ετικετών σήμανσης (markup tags)
       <html> έναρξη εγγράφου HTML
       </html> τερματισμός εγγράφου HTML
Κεφαλίδα HTML Εγγράφου
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=windows-
    1253" /> <title>Παράδειγμα Χρήσης της echo
 </title>
 </head>
    Περιέχει πληροφορίες σχετικές με το έγγραφο:
       Τίτλος εγγράφου, όπως θα εμφανίζεται στο
       παράθυρο του Web Browser
       Μετά-δεδομένα που χαρακτηρίζουν το κείμενο,
       ώστε να γίνεται σωστότερη αναγνώριση και
       απεικόνιση από τον Browser, π.χ. τύπος δεδομένων
       που περιέχει το έγγραφο, κωδικοποίηση κειμένου
       κ.λ.π.
Κεφαλίδα HTML Εγγράφου
 <body>
 <p align=center>Hello world
 </body>
     Περιέχει το σώμα του εμφανιζόμενου εγγράφου σε
    γλώσσα HTML
     Τα tags δεν είναι απαραίτητο να τερματίζονται,
    καθώς η εμφάνιση του επόμενου tag σημαίνει τον
    τερματισμό του ανοικτού tag
     Το όνομα και οι παράμετροι του tag μπορεί να είναι
    γραμμένα σε οποιαδήποτε μορφή (κεφαλαία, μικρά,
    μίξη)
    Η τιμή των παραμέτρων δίδεται είτε γυμνή, είτε μέσα
    σε "…"
Δημιουργία Εγγράφων HTML

  Εργαλεία ανάπτυξης σελίδων HTML:
    Επεξεργαστές Κειμένου - Text Editors
    Επεξεργαστές HTML - HTML Editors
    Εφαρμογές Άμεσης Οπτικής Σχεδίασης -
    What You See Is What You Get (WYSIWYG)
    Design Tools
Συγγραφή με WYSIWYG μεθόδους

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

Más contenido relacionado

Destacado

Toucan Graphics Portfolio
Toucan Graphics PortfolioToucan Graphics Portfolio
Toucan Graphics PortfolioToucan Graphics
 
PLAYDOUGH for financial education
PLAYDOUGH for financial educationPLAYDOUGH for financial education
PLAYDOUGH for financial educationzfy202
 
The Cup that Cheers: Journey of Tea from China to Europe.
The Cup that Cheers: Journey of Tea from China to Europe.The Cup that Cheers: Journey of Tea from China to Europe.
The Cup that Cheers: Journey of Tea from China to Europe.teatrunk
 
Html learning fornewbies
Html learning fornewbiesHtml learning fornewbies
Html learning fornewbiesPanagiotis Adam
 
'Around the world in eight teas' by Tea Trunk at The Goa Project
'Around the world in eight teas' by Tea Trunk at The Goa Project'Around the world in eight teas' by Tea Trunk at The Goa Project
'Around the world in eight teas' by Tea Trunk at The Goa Projectteatrunk
 
MoneyUp_PitchDeck_V2
MoneyUp_PitchDeck_V2MoneyUp_PitchDeck_V2
MoneyUp_PitchDeck_V2zfy202
 
MoneyTalks_Pitchdeck_V1
MoneyTalks_Pitchdeck_V1MoneyTalks_Pitchdeck_V1
MoneyTalks_Pitchdeck_V1zfy202
 
MoneyUp_Pitchdeck_v3
MoneyUp_Pitchdeck_v3MoneyUp_Pitchdeck_v3
MoneyUp_Pitchdeck_v3zfy202
 
Pert 2 crisis management
Pert 2  crisis managementPert 2  crisis management
Pert 2 crisis managementsutawidjaya_69
 
Tea Trunk E-Brochure
Tea Trunk E-BrochureTea Trunk E-Brochure
Tea Trunk E-Brochureteatrunk
 
116834983 hsp-matematik-tahun-5-kbsr-bahasa-melayu-draf
116834983 hsp-matematik-tahun-5-kbsr-bahasa-melayu-draf116834983 hsp-matematik-tahun-5-kbsr-bahasa-melayu-draf
116834983 hsp-matematik-tahun-5-kbsr-bahasa-melayu-draf720420085107
 

Destacado (14)

Nu uita overview
Nu uita overviewNu uita overview
Nu uita overview
 
Toucan Graphics Portfolio
Toucan Graphics PortfolioToucan Graphics Portfolio
Toucan Graphics Portfolio
 
Billboard research
Billboard researchBillboard research
Billboard research
 
PLAYDOUGH for financial education
PLAYDOUGH for financial educationPLAYDOUGH for financial education
PLAYDOUGH for financial education
 
The Cup that Cheers: Journey of Tea from China to Europe.
The Cup that Cheers: Journey of Tea from China to Europe.The Cup that Cheers: Journey of Tea from China to Europe.
The Cup that Cheers: Journey of Tea from China to Europe.
 
Html learning fornewbies
Html learning fornewbiesHtml learning fornewbies
Html learning fornewbies
 
'Around the world in eight teas' by Tea Trunk at The Goa Project
'Around the world in eight teas' by Tea Trunk at The Goa Project'Around the world in eight teas' by Tea Trunk at The Goa Project
'Around the world in eight teas' by Tea Trunk at The Goa Project
 
MoneyUp_PitchDeck_V2
MoneyUp_PitchDeck_V2MoneyUp_PitchDeck_V2
MoneyUp_PitchDeck_V2
 
MoneyTalks_Pitchdeck_V1
MoneyTalks_Pitchdeck_V1MoneyTalks_Pitchdeck_V1
MoneyTalks_Pitchdeck_V1
 
MoneyUp_Pitchdeck_v3
MoneyUp_Pitchdeck_v3MoneyUp_Pitchdeck_v3
MoneyUp_Pitchdeck_v3
 
81-82
81-8281-82
81-82
 
Pert 2 crisis management
Pert 2  crisis managementPert 2  crisis management
Pert 2 crisis management
 
Tea Trunk E-Brochure
Tea Trunk E-BrochureTea Trunk E-Brochure
Tea Trunk E-Brochure
 
116834983 hsp-matematik-tahun-5-kbsr-bahasa-melayu-draf
116834983 hsp-matematik-tahun-5-kbsr-bahasa-melayu-draf116834983 hsp-matematik-tahun-5-kbsr-bahasa-melayu-draf
116834983 hsp-matematik-tahun-5-kbsr-bahasa-melayu-draf
 

Similar a Html ekplog

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
 
Create Websites with HTML 5.0
Create Websites with HTML 5.0Create Websites with HTML 5.0
Create Websites with HTML 5.0DJ Dragon King
 
Βασικές έννοιες διαδικτύου και σχεδίασης ιστοσελίδων
Βασικές έννοιες διαδικτύου και σχεδίασης ιστοσελίδωνΒασικές έννοιες διαδικτύου και σχεδίασης ιστοσελίδων
Βασικές έννοιες διαδικτύου και σχεδίασης ιστοσελίδωνpasxelfstone
 
Tips & Tricks: Copy- paste, URL & link
Tips & Tricks: Copy- paste, URL & linkTips & Tricks: Copy- paste, URL & link
Tips & Tricks: Copy- paste, URL & linkNikos Papastamatiou
 
Εισαγωγή_στην_HTML.pdf
Εισαγωγή_στην_HTML.pdfΕισαγωγή_στην_HTML.pdf
Εισαγωγή_στην_HTML.pdfssuser9421c7
 
Εισαγωγή_στην_HTML.pdf
Εισαγωγή_στην_HTML.pdfΕισαγωγή_στην_HTML.pdf
Εισαγωγή_στην_HTML.pdfssuser9421c7
 
Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semant...
Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semant...Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semant...
Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semant...andreasabiou
 
Html – basics of static html pages
Html – basics of static html pagesHtml – basics of static html pages
Html – basics of static html pagesManolis Kosmidis
 
HTML-CSS για αρχάριους :: Μάθημα 1ο
HTML-CSS για αρχάριους :: Μάθημα 1οHTML-CSS για αρχάριους :: Μάθημα 1ο
HTML-CSS για αρχάριους :: Μάθημα 1οDespina Kamilali
 
HTML [from web] epilogis a kai b lyceiou - bmichal version 1
HTML [from web]   epilogis a kai b lyceiou - bmichal version 1HTML [from web]   epilogis a kai b lyceiou - bmichal version 1
HTML [from web] epilogis a kai b lyceiou - bmichal version 1Vassilis Michalopoulos
 
New Microsoft PowerPoint Presentation.pptx
New Microsoft PowerPoint Presentation.pptxNew Microsoft PowerPoint Presentation.pptx
New Microsoft PowerPoint Presentation.pptxandreasabiou
 
1 170516180903
1 1705161809031 170516180903
1 170516180903minap8
 
Γενική εισαγωγή στην HTML και η HTML5
Γενική εισαγωγή στην HTML και η HTML5Γενική εισαγωγή στην HTML και η HTML5
Γενική εισαγωγή στην HTML και η HTML5Panagiotis Larchanidis
 
Εισαγωγήoooooooooooooooooooooooooooooooo
ΕισαγωγήooooooooooooooooooooooooooooooooΕισαγωγήoooooooooooooooooooooooooooooooo
Εισαγωγήooooooooooooooooooooooooooooooooandreasabiou
 

Similar a Html ekplog (20)

05 - 06 Html blog wordpress demo
05 - 06 Html blog wordpress demo05 - 06 Html blog wordpress demo
05 - 06 Html blog wordpress demo
 
ergasthrio_8_diafaneies_2
ergasthrio_8_diafaneies_2ergasthrio_8_diafaneies_2
ergasthrio_8_diafaneies_2
 
Create Websites with HTML 5.0
Create Websites with HTML 5.0Create Websites with HTML 5.0
Create Websites with HTML 5.0
 
Βασικές έννοιες διαδικτύου και σχεδίασης ιστοσελίδων
Βασικές έννοιες διαδικτύου και σχεδίασης ιστοσελίδωνΒασικές έννοιες διαδικτύου και σχεδίασης ιστοσελίδων
Βασικές έννοιες διαδικτύου και σχεδίασης ιστοσελίδων
 
Tips & Tricks: Copy- paste, URL & link
Tips & Tricks: Copy- paste, URL & linkTips & Tricks: Copy- paste, URL & link
Tips & Tricks: Copy- paste, URL & link
 
Εισαγωγή_στην_HTML.pdf
Εισαγωγή_στην_HTML.pdfΕισαγωγή_στην_HTML.pdf
Εισαγωγή_στην_HTML.pdf
 
Εισαγωγή_στην_HTML.pdf
Εισαγωγή_στην_HTML.pdfΕισαγωγή_στην_HTML.pdf
Εισαγωγή_στην_HTML.pdf
 
Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semant...
Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semant...Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semant...
Εκμάθηση και ερμηνεία προηγμένων στοιχείων και δομών της HTML, όπως τα semant...
 
Eisagogi
EisagogiEisagogi
Eisagogi
 
Html – basics of static html pages
Html – basics of static html pagesHtml – basics of static html pages
Html – basics of static html pages
 
HTML-CSS για αρχάριους :: Μάθημα 1ο
HTML-CSS για αρχάριους :: Μάθημα 1οHTML-CSS για αρχάριους :: Μάθημα 1ο
HTML-CSS για αρχάριους :: Μάθημα 1ο
 
Joomla seo
Joomla seoJoomla seo
Joomla seo
 
Html
HtmlHtml
Html
 
Drupal seo
Drupal seoDrupal seo
Drupal seo
 
HTML [from web] epilogis a kai b lyceiou - bmichal version 1
HTML [from web]   epilogis a kai b lyceiou - bmichal version 1HTML [from web]   epilogis a kai b lyceiou - bmichal version 1
HTML [from web] epilogis a kai b lyceiou - bmichal version 1
 
New Microsoft PowerPoint Presentation.pptx
New Microsoft PowerPoint Presentation.pptxNew Microsoft PowerPoint Presentation.pptx
New Microsoft PowerPoint Presentation.pptx
 
Sample dreamweaver
Sample dreamweaver Sample dreamweaver
Sample dreamweaver
 
1 170516180903
1 1705161809031 170516180903
1 170516180903
 
Γενική εισαγωγή στην HTML και η HTML5
Γενική εισαγωγή στην HTML και η HTML5Γενική εισαγωγή στην HTML και η HTML5
Γενική εισαγωγή στην HTML και η HTML5
 
Εισαγωγήoooooooooooooooooooooooooooooooo
ΕισαγωγήooooooooooooooooooooooooooooooooΕισαγωγήoooooooooooooooooooooooooooooooo
Εισαγωγήoooooooooooooooooooooooooooooooo
 

Html ekplog

  • 2. Ανάγκες Ομαλή και ομοιόμορφη εμφάνιση της πληροφορίας σε όλους τους χρήστες που τη ζητούν, ανεξάρτητα πλατφόρμας εργασίας Εμφάνιση πολλαπλών τύπων δεδομένων (κείμενο, στατική εικόνα, κινούμενη εικόνα, ήχος) χωρίς την απαίτηση για πολλαπλά διαφορετικά προγράμματα
  • 3. HyperText Markup Language Μετάφραση: Γλώσσα Σήμανσης Υπερκειμένου Απλή γλώσσα κειμένου Στηρίζεται στο πρότυπο SGML (Standard Generalized Markup Language) του οποίου αποτελεί εφαρμογή Χρησιμοποιείται για να δώσει πληροφορίες στο Web Browser για το πώς θα πρέπει να εμφανίσει το κείμενο και περιγράφει τη διάταξη των πληροφοριών στη σελίδα
  • 4. Ετικέτες - Tags Τα tags χαρακτηρίζονται από ένα όνομα και μια λίστα παραμέτρων Τα tags εσωκλείονται σε τριγωνικές παρενθέσεις <όνομα παράμετροι> Τα tags εμφανίζονται σε δυο μορφές: Tags έναρξης (περιέχουν τις παραμέτρους), π.χ. <b> Tags τερματισμού (δεν περιέχουν παραμέτρους), π.χ. </b> Κάποια tags τερματίζονται εσωτερικά, π.χ. <br /> Τα tags έναρξης και τερματισμού καθορίζουν τη μορφοποίηση του κειμένου που βρίσκεται ανάμεσα τους
  • 5. Παραδείγματα Χρήσης Tags Έντονη γραφή <b>, <strong> π .χ. Ωραίος καιρός <strong>σήμερα</strong> π .χ. Ωραίος καιρός σήμερα Πλάγια γραφή <i>, <em> Ωραίος καιρός <em>σήμερα</em> π .χ. Ωραίος καιρός σήμερα
  • 6. Σημαντικότερα Tags Έναρξη/Τερματισμός εγγράφου HTML <html>…</html> Έναρξη/Τερματισμός κεφαλίδας εγγράφου HTML <head>…</head> Έναρξη/Τερματισμός σώματος εγγράφου HTML <body>…</body>
  • 7. Παράδειγμα Αρχείου HTML <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=windows-1253" /> <title>Παράδειγμα Χρήσης της echo</title> </head> <body> <p align=center>Hello world </body> </html> Το έγγραφο HTML (αρχείο με κατάληξη htm ή html) αρχίζει και τελειώνει με τη χρήση ετικετών σήμανσης (markup tags) <html> έναρξη εγγράφου HTML </html> τερματισμός εγγράφου HTML
  • 8. Κεφαλίδα HTML Εγγράφου <head> <meta http-equiv="Content-Type" content="text/html; charset=windows- 1253" /> <title>Παράδειγμα Χρήσης της echo </title> </head> Περιέχει πληροφορίες σχετικές με το έγγραφο: Τίτλος εγγράφου, όπως θα εμφανίζεται στο παράθυρο του Web Browser Μετά-δεδομένα που χαρακτηρίζουν το κείμενο, ώστε να γίνεται σωστότερη αναγνώριση και απεικόνιση από τον Browser, π.χ. τύπος δεδομένων που περιέχει το έγγραφο, κωδικοποίηση κειμένου κ.λ.π.
  • 9. Κεφαλίδα HTML Εγγράφου <body> <p align=center>Hello world </body> Περιέχει το σώμα του εμφανιζόμενου εγγράφου σε γλώσσα HTML Τα tags δεν είναι απαραίτητο να τερματίζονται, καθώς η εμφάνιση του επόμενου tag σημαίνει τον τερματισμό του ανοικτού tag Το όνομα και οι παράμετροι του tag μπορεί να είναι γραμμένα σε οποιαδήποτε μορφή (κεφαλαία, μικρά, μίξη) Η τιμή των παραμέτρων δίδεται είτε γυμνή, είτε μέσα σε "…"
  • 10. Δημιουργία Εγγράφων HTML Εργαλεία ανάπτυξης σελίδων HTML: Επεξεργαστές Κειμένου - Text Editors Επεξεργαστές HTML - HTML Editors Εφαρμογές Άμεσης Οπτικής Σχεδίασης - What You See Is What You Get (WYSIWYG) Design Tools
  • 11. Συγγραφή με WYSIWYG μεθόδους Ο χρήστης σχεδιάζει τη σελίδα σε υψηλό επίπεδο αφαίρεσης με ειδικά εργαλεία οπτικής σχεδίασης χωρίς να απαιτείται γνώση ή χειρισμός σε επίπεδο κώδικα HTML Το πρόγραμμα σχεδίασης σελίδας σε χαμηλότερο επίπεδο παράγει αυτόματα τον κώδικα HTML ο οποίος περιγράφει τη σελίδα που σχεδιάζει ο χρήστης οπτικά