HTML - CSS Δίνεται παρακάτω ο κώδικας HTML μιας ιστοσελίδας

Slides:



Advertisements
Παρόμοιες παρουσιάσεις
Τεχνολογίες Web Απαραίτητες γνώσεις για την υλοποίηση της άσκησης.
Advertisements

Εργαστήριο 17 Εκπαιδευτικό Εργαστήριο Πληροφορικής Χειμερινό Εξάμηνο 2006 Οικονομικό Πανεπιστήμιο Αθηνών Τμήμα Διοικητικής Επιστήμης & Τεχνολογίας.
Προγραμματισμός Διαδικτύου Δρ. Παναγιώτης Συμεωνίδης Διεπαφή Εφαρμογής Παγκόσμιου Ιστού (Front End Programming)
Επιμέλεια: Δέγγλερη Σοφία
Η γλώσσα μορφοποίησης υπερκειμένου HTML
Δ.Π.Θ. Επεξεργασία Κειμένου - 1 Επεξεργασία Κειμένου Ένα πρόγραμμα σε γλώσσα HTML είναι ανεξάρτητο της μηχανής όπου θα εκτελεστεί. Δηλαδή αγνοούνται τα.
HTML.
Επιμέλεια: Δέγγλερη Σοφία
Πάντειο Πανεπιστήμιο Κοινωνικών και Πολιτικών Επιστημών ΠΜΣ Δυνητικές κοινότητες Μάθημα: Εισαγωγικά Θέματα W.W.W. CSS CASCADING STYLE SHEETS ΑΠΟΔΟΣΗ ΕΚΦΡΑΣΤΙΚΟΥ.
CSS – Cascading Style Sheets (Ιδιότητες γραμματοσειράς - font)
CSS Cascading Style Sheets
Τμήμα Φυσικής - Αριστοτέλειο Πανεπιστήμιο Θεσσαλονίκης
Εργαστήριο Εφαρμοσμένης Πληροφορικής
Εικόνες στην HTML Η HTML υποστηρίζει δύο ειδών αρχεία εικόνων 4 GIF 4 JPEG ¶ Ολοι οι ψηφιακοί σαρωτές (scanners), υποστηρίζουν τουλάχιστον μιά από τις.
Ειδικά Θέματα Η/ΥΕργαστήριο 7 Χ. Καραγιαννίδης1/17 Γλώσσα HTML Εργαστήριο 7 Χαράλαμπος Καραγιαννίδης
Συντάκτης :Δομουχτσής Στέργιος Κατασκευή Ιστοσελίδας Αυτόματο σύστημα Σχολικού Δικτύου Iware.
HTML: Η ΓΛΩΣΣΑ ΤΟΥ WEB  Απλά αρχεία.  Περιέχουν εντολές και κείμενο μαζί. BROWSER.  Οι εντολές απευθύνονται στον BROWSER.  Καθορίζουν τον τρόπο εμφάνισης.
Η γλώσσα HTML Επιμέλεια: Δέγγλερη Σοφία. Υπερκείμενο Το δομικό χαρακτηριστικό του Παγκόσμιου Ιστού Ένα αρχείο Απλό κείμενο και υπερσύνδεσμοι.
Δημιουργία Παρουσίασης
Microsoft Excel 4.5 Μορφοποίηση Κίκα Χρυσοστόμου.
Επεξεργασία Κειμένου Ονομ/νυμο Επιμορφωτή Επιμορφωτής: Ονομ/νυμο Επιμορφωτή ΥΠΕΠΘ ΠΑΙΔΑΓΩΓΙΚΟ ΙΝΣΤΙΤΟΥΤΟ ΠΡΟΓΡΑΜΜΑ «ΚΟΙΝΩΝΙΑ ΤΗΣ ΠΛΗΡΟΦΟΡΙΑΣ» ΕΠΙΜΟΡΦΩΣΗ.
ΕΙΣΑΓΩΓΗ ΣΤΗΝ ΠΛΗΡΟΦΟΡΙΚΗ Κεφάλαιο 11 Eισαγωγή στην ανάπτυξη ιστοσελίδων με HMTL Γιώργος Γιαγλής.
Διδάσκοντας με τη βοήθεια του επεξεργαστή κειμένου.
CSS – Cascading Style Sheets (Ιδιότητες κειμένου - text)
Εισαγωγή στην κατασκευή δικτυακών τόπων. Εισαγωγή στην ενότητα.
Ιστοσελίδες -- Web-site. Εισαγωγή Στατικές ιστοσελίδες Δυναμικές ή Διαδραστικές ιστοσελίδες:  Ο τρόπος παρουσίασης και τα περιεχόμενά της ιστοσελίδας.
Τα Διαδοχικά Φύλλα Στυλ CSS
Διεύθυνση Α/θμιας Εκπ/σης Ν. Σερρών Κατασκευή Ιστοσελίδας  Απόλυτα πεπεισμένοι πως η κοινωνία της γνώσης προσκαλεί αλλά και προκαλεί τα Στελέχη της Εκπαίδευσης.
Microsoft PowerPoint Powerpoint Κίκα Χρυσοστόμου.
Τεχνολογίες δημοσίευσης στον παγκόσμιο ιστό Κωνσταντίνος Αλεξίου Κέρκυρα, Ιούνιος 2004 Ιόνιο Πανεπιστήμιο Τμήμα Αρχειονομίας – Βιβλιοθηκονομίας Π.Μ.Σ.
Επικοινωνία Ανθρώπου Μηχανής HTML CGI JAVASCRIPT Κουμπούλης Χρήστος Α.Μ. 921 Χαλαβαζής Βασίλης Α.Μ. 988.
Γλώσσα Χαρακτηρισμού (Σήμανσης- Μορφοποίησης)
Η Γλώσσα Σήμανσης ΥπερΚειμένου HTML
Στυλ με συνέπεια. Cascading Style Sheets (CSS) Ποιόν σκοπό εξυπηρετούν ? 4 Τα "Στυλιστικά Φύλλα" σκοπό έχουν να επιδρούν στην εμφάνιση των σελίδων με.
CSS – Cascading Style Sheets (Φύλλα επάλληλων στυλ) Κανόνες που καθορίζουν τη μορφή και τη διάταξη των στοιχείων των σελίδων (X)HTML Σκοπός είναι ο διαχωρισμός.
Applets Εκμεταλλεύονται τo γραφικό υπόβαθρο που παρέχουν οι browsers, έχοντας έτσι τη δυνατότητα προβολής γραφικών και τη δυνατότητα υλοποίησης ενός γραφικού.
CSS – Cascading Style Sheets (Εξωτερική γραμμή, περιθώριο, ενδιάμεση απόσταση) Η εξωτερική γραμμή (outline) σχεδιάζεται γύρω από ένα στοιχείο της HTML,
CSS – Cascading Style Sheets (Το μοντέλο box) Κάθε στοιχείο της HTML περιέχεται σε ένα “κουτί” (box). Το μοντέλο box μας βοηθάει στο σχεδιασμό της ιστοσελίδας.
Eπικοινωνία Ανθρώπου Μηχανης
CSS – Cascading Style Sheets (Ιδιότητες φόντου - background) Καθορίζουν το φόντο των στοιχείων της HTML Χρώμα φόντου Φόντο εικόνας (τοποθέτηση εικόνας,
1Κεφάλαιο 4 Κανόνες Σύνταξης HTML Όλες οι ετικέτες εσωκλείονται μεταξύ των χαρακτήρων “ “. Κάθε τι που βρίσκεται μεταξύ των χαρακτήρων “ ”, αποτελεί σχόλιο.
CSS – Cascading Style Sheets (μορφοποίηση συνδέσμων) Οι σύνδεσμοι μπορεί να βρίσκονται σε μία από τέσσερις καταστάσεις: link(ένας κανονικός σύνδεσμος που.
HTML-PHP Καμπέρης Άρης Α.Μ. 763 Zaher Owda Α.Μ. 849.
ΑΝΑΠΤΥΞΗ WEB ΕΦΑΡΜΟΓΩΝ
Εφαρμογές Πολυμέσων: Εισαγωγή στην HTML (1)
HTML 3. Στόχος της ώρας Απαιτήσεις XHTML 1.0 Strict Ιδιότητα title HTML Entities Ετικέτα label Favicon «Κακές» ιδιότητες Παραδείγματα.
Ο Παγκόσμιος ιστός World Wide Web (WWW) Είναι μια υπηρεσία του Internet ΠΡΟΣΟΧΗ μην την ταυτίζουμε με το ιντερνέτ Αποτελείται από εκατομμύρια ιστοσελίδες.
ΠΡΙΝ ΞΕΚΙΝΗΣΟΥΜΕ Πράγματα που αξιολογείτε θετικά σε σχέση με το μάθημα του προηγούμενου τετραμήνου Πράγματα που θα μπορούσαν να βελτιωθούν.
Ενότητα 2: HTML – Hypertext Markup Language. Φώτης Κόκκορας, Καθηγητής Εφαρμογών, Τμήμα Μηχανικών Πληροφορικής Τ.Ε., T.E.I. Θεσσαλίας Προγραμματισμός Εφαρμογών.
HTML/CSS: Εισαγωγή Θερινό Σχολείο, 14 – 20 Ιουλίου 2014 Γιώργος Φουρτούνης Μονάδα Αριστείας ΕΛ/ΛΑΚ ΤΕΙ Αθήνας.
Βασικά Web εργαλεία και τεχνολογίες
Αρχές Πληροφορικής Ενότητα # 12: Επεξεργασία κειμένου – LibreOffice #2
Εργασία στο μάθημα «Προγραμματισμός ΙΙ»
Μάθημα 9ο HTML.
Κεφαλαιο 11 ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML.
Αρχές Πληροφορικής Ενότητα # 10: Ιστολόγια. Η υπηρεσία Blogger
HTML.
Εφαρμογές Πληροφορικής Κεφάλαιο 11
Εισαγωγή στην HTML ΚΕΦΑΛΑΙΟ 11.
Εισαγωγή στην HTML Κεφάλαιο 11.
CSS Cascading Style Sheets
HTML.
Μορφοποίηση Περιεχομένου και εμφάνισης κελιών, γραμμών, στηλών
Javascript – Χειρισμός της σελίδας
Cascading Style Sheets (CSS)
Εισαγωγή στην HTML ΚΕΦΑΛΑΙΟ 11.
θέμα δήλωση Γραφικό SmartArt με εικόνες σε κόκκινο φόντο
Λογισμικό Εφαρμογών/Επεξεργασία Κειμένου
Η Ιστοσελίδα της Α΄ Τάξης Αυτή η πολύ απλή σελίδα είναι φτιαγμένη
Εισαγωγή στη δημιουργία ιστοσελίδων Διδάσκων:
Μεταγράφημα παρουσίασης:

HTML - CSS Δίνεται παρακάτω ο κώδικας HTML μιας ιστοσελίδας <head> <title> Ηλιούπολη </title> <style> body {background-color: black; width: 900px;} h1 { color: red; text-align: center } p { color: white; font-size: 14; padding: 10px; } </style> </head> <body> <h1> Το σχολείο μας </h1> <a href=″http://www.sch.gr″>Πανελλήνιο Σχολικό Δίκτυο</a> <p> Στόχος του Πανελλήνιου Σχολικού Δικτύου είναι να διασυνδέσει όλα τα σχολεία σε ένα εκπαιδευτικό Intranet.</p> <img src=″athens.jpg″> <video src=″giorti.mp4″ width=″320″ height=″240″controls></video> </body> </html>   Να εξηγήσετε το ρόλο των εξής ετικετών: <h1>, <a>, <p>, <img>, <video> καθώς και των 3 κανόνων μορφοποίησης CSS που περικλείονται στην ετικέτα <style>.

HTML - CSS <h1> → ετικέτα επικεφαλίδας (1ο μέγεθος) Με αυτή η πρόταση Το σχολείο μας θα εμφανιστεί με μεγάλα έντονα γράμματα <a> → ετικέτα δεσμού δηλαδή συνδέσμου προς άλλα σημεία της ιστοσελίδας ή άλλη εξωτερική ιστοσελίδα (εδώ μετάβαση στη σελίδα http://www.sch.gr) <p> → ετικέτα παραγράφου <img> → ετικέτα εισαγωγής εικόνας (εδώ εισάγεται η εικόνα athens.jpg) <video> → ετικέτα εισαγωγής βίντεο (εδώ εισάγεται το αρχείο βίντεο giorti.mp4) Κανόνες CSS body {background-color: black; width: 900px;} Το φόντο της ιστοσελίδας θα είναι μαύρο και θα έχει πλάτος στον browser 900px. h1 { color: red; text-align: center } η ετικέτα h1 θα εμφανίζεται με κόκκινα γράμματα, και θα γίνεται στοίχιση κειμένου στο κέντρο p { color: white; font-size: 14; padding: 10px; } Τα κείμενα που είναι μέσα σε παράγραφο θα εμφανίζονται με άσπρα γράμματα, μέγεθος γραμματοσειράς 12 και θα υπάρχει περιθώριο γύρω από τα γράμματα 10px.