Άζκηζη 1 -Δημιοςπγία ιζηοζελίδων με HTML μέπορ 1 ο

HTML
DOWNLOAD

Μέγεθος: px

Εμφάνιση ξεκινά από τη σελίδα:

Download "Άζκηζη 1 -Δημιοςπγία ιζηοζελίδων με HTML μέπορ 1 ο"

Οὐρανός Κοντόσταυλος
7 χρόνια πριν
Προβολές:

Άζκηζη 1 -Δημιοςπγία ιζηοζελίδων με HTML μέπορ 1 ο Γενικά ζσεηικά με ηην HTML Οη Ιζηνζειίδεο είλαη γξακκέλεο ζε κηα εηδηθή γιώζζα, ηελ HTML (Hyper-Text Markup Language - γιώζζα ζήκαλζεο

1 Άζκηζη 1 -Δημιοςπγία ιζηοζελίδων με HTML μέπορ 1 ο Γενικά ζσεηικά με ηην HTML Οη Ιζηνζειίδεο είλαη γξακκέλεο ζε κηα εηδηθή γιώζζα, ηελ HTML (Hyper-Text Markup Language - γιώζζα ζήκαλζεο ππέξ-θεηκέλνπ). Η HTML κπνξεί λα δηαβαζηεί από νπνηνδήπνηε ππνινγηζηή δηαζέηεη έλα web browser, όπωο ηνλ Internet Explorer. Παγκόζμιορ ιζηόρ - Web Σύλνιν πιεξνθνξηώλ ζηηο νπνίεο έρνπκε πξόζβαζε κέζω ίληεξλεη κε ην πξωηόθνιιν http (hypertext transfer protocol). Τν http είλαη πξωηόθνιιν κεηαθνξάο αξρείωλ. HTTP HyperText Transfer Prolocol (Πξωηόθνιιν κεηαθνξάο Υπεξθεηκέλνπ) URL "Uniform Resource Locator": Δίδνο δηεπζύλζεωλ γηα πιεξνθνξίεο ζην web πνπ νξίδνπλ κε ζπληνκία, αθξίβεηα θαη κνλνζήκαληα ην ζεκείν όπνπ βξίζθνληαη νη πιεξνθνξίεο.

Σπλήζε αξρεία πνπ κεηαθέξνληαη κέζω πξωηνθόιινπ http είλαη αξρεία πνπ ν web browser έρεη ηελ δπλαηόηεηα λα απεηθνλίζεη. Αξρεία HTML text/html. Αξρεία Υπεξθεηκέλνπ ζε κνξθή HTML Αξρεία εηθόλαο.

2 Σπλήζε αξρεία πνπ κεηαθέξνληαη κέζω πξωηνθόιινπ http είλαη αξρεία πνπ ν web browser έρεη ηελ δπλαηόηεηα λα απεηθνλίζεη. Αξρεία HTML text/html. Αξρεία Υπεξθεηκέλνπ ζε κνξθή HTML Αξρεία εηθόλαο. image/jpeg image/gif (*.jpg, *.gif, *.png) Αξρεία πνιπκέζωλ. video/mpeg Αναπηςξη ιζηοζελίδαρ HTML(HyperTextMarkupLanguage) Πεξηερόκελν ηνπ site CSS(Cascading Style Sheets) Μνξθνπνίεζε πεξηερνκέλνπ Javascript Αιιειεπίδξαζε ρξήζηε θαη εθαξκνγήο HTML Δίλαη ε θύξηα γιώζζα ζήκαλζεο γηα ηηο ηζηνζειίδεο. Μαο επηηξέπεη λα κνξθνπνηήζνπκε ην θείκελν, λα πξνζζέζνπκε γξαθηθά, λα δεκηνπξγήζνπκε ππεξ-ζπλδέζκνπο, κνξθέο εηζόδνπ, θόξκεο, πιαίζηα, πίλαθεο, θιπ. Έλα αξρείν html είλαη αξρείν θεηκέλνπ θαη επεμεξγάδεηαη κε απιό θεηκελνγξάθν. Κάζε browser κπνξεί λα δηαβάζεη θαη λα εκθαλίζεη απηό ην αξρείν. Πεξηιακβάλεη mark-up tags(εηηθέηεο ζήκαλζεο) ηα νπνία θαζνξίδνπλ ηνλ ηξόπν εκθάληζεο ηεο ζειίδαο. Έλα αξρείν html έρεη θαηάιεμε.html ή.htm

Eηικέηερ Γεληθή κνξθή: <tag_name> πεξηερόκελν εηηθέηαο </tag_name> Γηα λα εκθαλίζεη ν Browser κία ζειίδα θάλεη ην εμήο: 1)Γηαβάδεη έλα αξρείν απινύ θεηκέλνπ (ην html αξρείν) 2) Ψάρλεη γηα εηηθέηεο

3 Eηικέηερ Γεληθή κνξθή: <tag_name> πεξηερόκελν εηηθέηαο </tag_name> Γηα λα εκθαλίζεη ν Browser κία ζειίδα θάλεη ην εμήο: 1)Γηαβάδεη έλα αξρείν απινύ θεηκέλνπ (ην html αξρείν) 2) Ψάρλεη γηα εηηθέηεο πνπ ππάξρνπλ κεηαμύ ηωλ ζπκβόιωλ < θαη > Κάζε εηηθέηα έρεη όλνκα (πρ: html ή body). Πξέπεη λα αλνίγεη (πρ: <html> ή <body>) θαη λα θιείλεη (πρ:</html>ή </body>). Δλδηάκεζα ζηηο εηηθέηεο βξίζθεηαη ην πεξηερόκελν. Δηηθέηεο πνπ δελ έρνπλ πεξηερόκελν, θιείλνπλ ηνλ εαπηό ηνπο. (Πρ: <br/> θαη <hr/>) Σηελ HTML δελ είλαη απαξαίηεην λα θιείλνπλ νη ζπγθεθξηκέλεο εηηθέηεο, ζε αληίζεζε κε ηελ XHTML. Πξνηείλεηαη όκωο λα θιείλνπλ όιεο νη εηηθέηεο. Κύπιερ εηικέηερ: <html> Πεξηέρεη όιε ηε ζειίδα <head> Πεξηέρεη meta-πιεξνθνξίεο <title> Πεξηέρεη ην ηίηιν ηεο ζειίδαο <body> Πεξηέρεη ην πεξηερόκελν ηεο ζειίδαο (απηό πνπ είλαη νξαηό!!) Τν <html> πξέπεη λα πεξηέρεη κε ζεηξά ηηο εηηθέηεο <head> θαη <body> Ιεπαπσία εηικεηών Μία εηηθέηα κπνξεί λα πεξηέρεηαη νιόθιεξε (άλνηγκα - θιείζηκν) κέζα ζε κία άιιε. Όπνηα εηηθέηα αλνίγεη πξώηε, θιείλεη ηειεπηαία (εθόζνλ ε κία εηηθέηα πεξηέρεηαη κέζα ζηελ άιιε).

4 Ιδιόηηηερ εηικεηών Οη ηδηόηεηεο ηωλ εηηθεηώλ εκθαλίδνληαη ζην άλνηγκα ηεο εηηθέηαο κεηά ην όλνκα. Κάζε ηδηόηεηα έρεη όλνκα θαη ηηκή. Αλάκεζα ζην όλνκα θαη ζηε ηηκή ππάξρεη ην ζύκβνιν = θαη ε ηηκή πεξηιακβάλεηαη ζε "εηζαγωγηθά". Η θάζε ηδηόηεηα ρωξίδεηαη κε θελό από ην όλνκα ηεο εηηθέηαο θαη από ηηο άιιεο ηδηόηεηεο. Εηικέηερ επικεθαλίδων Οη επηθεθαιίδεο πεξηγξάθνληαη κε ηηο εηηθέηεο <h1>, <h2>,..,<h6>. Τν κεγαιύηεξν κέγεζνο είλαη ην <h1>θαη ην κηθξόηεξν ην <h6>. Οη επηθεθαιίδεο βνεζνύλ ζην λα γίλεηαη δηαθξηηή ε δνκή ηεο ζειίδαο. Καιό είλαη όκωο λα ρξεζηκνπνηνύκε επηθεθαιίδεο γηα ηίηινπο κόλν. Μπνξνύκε λα ρξεζηκνπνηήζνπκε ηελ ηδηόηεηα align γηα λα ζηνηρήζνπκε ηε θεθαιίδα. Π.ρ. <h1 align= "center"> Εηικέηα διασωπιζμού παπαγπάθων Οη παξάγξαθνη νξίδνληαη κε ηελ εηηθέηα <p>. Οη browsers πξνζζέηνπλ απηόκαηα κηα θελή γξακκή πξηλ θαη κεηά από κηα παξάγξαθν

5 Μπνξνύκε λα ρξεζηκνπνηήζνπκε ηελ ηδηόηεηα align (ηηκέο: right, left, center, justify) γηα λα ζηνηρίζνπκε ην πεξηερόκελν. Εηικέηα αλλαγήρ γπαμμήρ <br> Τν <br> ρξεζηκνπνηείηαη γηα αιιαγή γξακκήο (λέα γξακκή). Γελ είλαη ζωζηό λα ρξεζηκνπνηείηαη γηα κνξθνπνίεζε. Σε πεξίπηωζε πνπ γξάθνπκε XHTML, ε εηηθέηα αλνίγεη θαη θιείλεη καδί<br/>. Εηικέηα οπιζόνηιαρ γπαμμήρ <hr> Οπηηθά είλαη κηα νξηδόληηα γξακκή. Οη νξηδόληηεο γξακκέο (Horizontal Rule) ρξεζηκνπνηνύληαη γηα λα δείμνπλ κηα ελλνηνινγηθή αιιαγή ζην θείκελν. Οη ηδηόηεηεο ηνπ ζηνηρείνπ hr είλαη: align: Οξίδεη ηε ζηνίρηζε ηεο γξακκήο ωο πξνο ηα παξόληα όξηα ηνπ παξαζύξνπ ηνπ browser. Παίξλεη ηηο ηηκέο: left, center ή right. Δμ νξηζκνύ είλαη center (εθόζνλ δώζνπκε κήθνο ζηε γξακκή). noshade: Η γξακκή δελ ζα έρεη ζθηά size: Οξίδεη ην πάρνο ηεο γξακκήο ζε Pixel width: Οξίδεη ην κήθνο ηεο γξακκήο ζε Pixel (πρ:width=100) ή ζε πνζνζηό κήθνπο επί ηνπ παξαζύξνπ(πρ:width="30%"). Δμ νξηζκνύ είλαη width=100%. Πξνζνρή: Οη παξαπάλω ηδηόηεηεο δελ είλαη ζπκβαηέο κε ηελ html5! Άλλερ σπήζιμερ εηικέηερ Εηικέηα <b> ή <strong> <big> <small> <i> ή <em> <u> <sub> <sup> <del> Πεπιγπαθή Έληνλε γξαθή (Bold) Μεγάιν κέγεζνο γξακκάηωλ Μηθξό κέγεζνο γξακκάηωλ Πιάγηα γξαθή Υπνγξακηζκέλν θείκελν Κέηκελν ζε κνξθή δείθηε Κέηκελν ζε κνξθή εθζέηε Βάδεη κηα γξακκή πάλω ζην θέηκελν (ην δηαγξάθεη)

6 Ιζηοζελίδα 1

7 Ιζηοζελίδα 2

Σχετικά έγγραφα

DOM. Γηδάζθνληεο: Π. Αγγειάηνο, Γ. Εήλδξνο Δπηκέιεηα δηαθαλεηώλ: Π. Αγγειάηνο. Σρνιή Ζιεθηξνιόγωλ Μεραληθώλ θαη Μεραληθώλ Υπνινγηζηώλ

DOM. Γηδάζθνληεο: Π. Αγγειάηνο, Γ. Εήλδξνο Δπηκέιεηα δηαθαλεηώλ: Π. Αγγειάηνο. Σρνιή Ζιεθηξνιόγωλ Μεραληθώλ θαη Μεραληθώλ Υπνινγηζηώλ DOM Γηδάζθνληεο: Π. Αγγειάηνο, Γ. Εήλδξνο Δπηκέιεηα δηαθαλεηώλ: Π. Αγγειάηνο Σρνιή Ζιεθηξνιόγωλ Μεραληθώλ θαη Μεραληθώλ Υπνινγηζηώλ Σηόρνο ηεο ώξαο Δμνηθείωζε κε ην DOM Γέληξν DOM: Γηάζρηζε Τξνπνπνίεζε