HTML Εισαγωγή στην HTML και τα CSS

Μέγεθος: px
Εμφάνιση ξεκινά από τη σελίδα:

Download "HTML... 1. Εισαγωγή στην HTML και τα CSS"

Transcript

1 HTML Εισαγωγή στην HTML και τα CSS

2 HTML HTML. H HTML (HYPERTEXT MARKUP LANGUAGE), είναι µία γλώσσα η οποία «λέει» στον υπολογιστή πως θα πρέπει να εµφανίσει µία ιστοσελίδα. Τα αρχεία στα οποία γράφεται αυτή η γλώσσα είναι απλά αρχεία κειµένου (ASCII), τα οποία µπορούν να δηµιουργηθούν ακόµη και µε το Notepad (Σηµειωµατάριο), των Windows έχοντας απλώς την κατάληξη.htm ή.html. Περιλαµβάνουν µέσα τα λεγόµενα tags, τα οποία χρησιµοποιούνται σε κάποιο πρόγραµµα εµφάνισης ιστοσελίδων (π.χ. Internet Explorer), για να δηµιουργηθούν και να εµφανιστούν οι ιστοσελίδες. Βασική οµή µιας ιστοσελίδας γραµµένης µε HTML Ο παρακάτω κώδικας αποτελεί τη βασική δοµή µιας HTML, σελίδας. Οι 6 γραµµές κώδικα που υπάρχουν παρακάτω απαρτίζουν οποιαδήποτε σελίδα HTML. Κάθε γραµµή αυτού του κώδικα αποτελεί και ένα tag. Όλα τα tags της HTML, δηλώνονται ως εξής: < ονοµασία του tag >. Όλα τα tags της HTML έχουν µία αρχή και ένα τέλος. Στο ενδιάµεσο παρεµβάλλεται το περιεχόµενο του tag. Η αρχή κάθε tag δηλώνεται µε <tag> ενώ το τέλος µε </tag>. Γενικά το περιεχόµενο µίας ιστοσελίδας είναι tags τα οποία περιέχουν άλλα tags κ.λ.π. Πάντα τα tags τα οποία δηµιουργούνται (ανοίγουν), θα πρέπει αφού πληκτρολογηθεί το περιεχόµενό τους να κλείνουν (τελειώνουν). Υπάρχουν εξαιρέσεις, κάποια tags δεν κλείνουν ποτέ. Πρέπει λοιπόν όλα τα tags τα οποία ανοίγουν αφού πληκτρολογηθεί το περιεχόµενο τους να κλείνουν, εκτός βέβαια των tags τα οποία δεν πρέπει εξ ορισµού να κλείσουν. Παρακάτω περιγράφεται η σηµασία των tags που πάντα πρέπει να υπάρχουν σε µια σελίδα HTML. <html> TAG µε ονοµασία HTML. Στην κορυφή του κώδικα βρίσκεται πάντα το tag αυτό, το οποίο δηλώνει ότι ο κώδικας που ακολουθεί παρακάτω είναι κώδικας HTML. <head> TAG µε ονοµασία HEAD. Ακριβώς µετά το tag html, βρίσκεται το tag head. Ανάµεσα στο άνοιγα (< >) και στο κλείσιµο (</ >) του tag, αυτού, υπάρχει περιεχόµενο που αφορά την ιστοσελίδα όπως: Ο τίτλος της Η γλώσσα που υποστηρίζει η σελίδα (π.χ. ελληνικά) ιάφορα keywords κ.α. Το περιεχόµενο αυτό, δεν πρέπει να γραφτεί σε κανένα άλλο µέρος του κώδικα. </head> TAG µε ονοµασία HEAD. Σε αυτό το σηµείο το tag head κλείνει. <body> TAG µε ονοµασία BODY. Από αυτό το σηµείο και έπειτα, γράφεται ο κώδικας που αφορά την εµφάνιση της ιστοσελίδας µας στον browser. Π.Χ. τα κείµενα, οι εικόνες, οι φόρµες, κ.λ.π. θα εισάγονται πάντα µε τη βοήθεια άλλων tags, που θα αναφερθούν παρακάτω, µετά και κάτω από αυτό το tag. </body> TAG µε ονοµασία BODY. Σε αυτό το σηµείο το tag body, κλείνει και πάντα πριν κλείσει το tag HTML. </html> TAG µε ονοµασία HTML. Πάντα στο τέλος της σελίδας το tag µε ονοµασία HTML κλείνει, δηλώνοντας ότι δεν υπάρχει πλέον άλλος κώδικας HTML.

3 HTML Επεκτείνοντας τη βασική δοµή µιας ιστοσελίδας HTML Ο παρακάτω κώδικας αφορά το βασικό περιεχόµενο του tag HEAD. <head> <title>τίτλος Σελίδας</title> To tag <title> µας δίνει τη δυνατότητα να δώσουµε ένα τίτλο στην ιστοσελίδα µας. Ανάµεσα στο άνοιγµα και στο κλείσιµο του tag, πληκτρολογούµε αυτό που θέλουµε να είναι ο τίτλος της ιστοσελίδας µας. <meta http-equiv="content-type" content="text/html; charset=iso "> Το tag <meta> αποτελεί εξαίρεση σε ότι έχει αναφερθεί σχετικά µε τα tags της HTML. ΤΟ TAG <meta> δεν κλείνει. εν υπάρχει δηλαδή το </meta>. Το tag αυτό χρησιµοποιείται µε κάποιες παραµέτρους (π.χ. <meta name= description content= Η σελίδα αυτή είναι µία σελίδα που ) που συνήθως διαβάζουν οι µηχανές αναζήτησης. Η χρήση του που αφορά καθαρά τον κώδικα HTML που αναφέρεται παραπάνω, σχετίζεται µε τη δήλωση της γλώσσας που θα χρησιµοποιήσει η ιστοσελίδα µας. Οι παράµετροι του tag <meta> που αφορούν στη χρήση της γλώσσας φαίνονται παραπάνω. Η δήλωση της γλώσσας γίνεται στο κοµµάτι που αναφέρεται ως charset, το οποίο παίρνει ως τιµές ονόµατα κωδικοσελίδων που αναπαριστούν τη γλώσσα για τους υπολογιστές. Οι τιµές του πεδίου charset που µας αφορούν και χρησιµοποιούνται επί το πλείστον είναι iso για τις λατινογενείς γλώσσες και iso , για την ελληνική γλώσσα. </head> Ο παρακάτω κώδικας αφορά τις βασικές παραµέτρους του tag BODY. Σηµειώνεται πως καµία από τις παραµέτρους που αναφέρονται παρακάτω, δεν είναι υποχρεωτικό να υπάρχουν σε κάποια σελίδα. <body bgcolor="#009900" background="back.jpg" text="#003399" link="#993300" vlink="#009999" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0"> Το tag body, παίρνει κάποιες παραµέτρους. Παρακάτω αναφέρεται η χρήση της καθεµίας. Παράµετρος bgcolor. Η παράµετρος αυτή παίρνει ως τιµή το χρώµα που θα είναι το φόντο της σελίδας µας. Π.χ. bgcolor="#009900" θα φέρει ως φόντο της σελίδας µας ένα πράσινο σκούρο χρώµα. Το χρώµα δηλώνεται σε hexademical code όπως φαίνεται και παραπάνω και αυτό για να διατηρείται οµοιοµορφία όταν η σελίδα πρόκειται να εµφανιστεί σε διαφορετικούς υπολογιστές µε διαφορετικούς browsers κ.λ.π. Εναλλακτικά µπορούν να χρησιµοποιηθούν ονοµασίες χρωµάτων όπως red, green κ.λ.π. Παράµετρος background. Η παράµετρος αυτή παίρνει ως τιµή µια εικόνα που θα χρησιµοποιηθεί ως φόντο της σελίδας µας. Στο παραπάνω παράδειγµα ως φόντο της σελίδας µας θα εµφανιστεί η εικόνα back.jpg. Η χρήση των παραµέτρων bgcolor και background αλληλοαναιρείται. Αν δηλαδή δηλωθούν και οι δύο παράµετροι, τότε θα υλοποιηθεί µόνο η

4 HTML παράµετρος background. Σηµειώνεται ότι η τιµή της παραµέτρου background, ορίζει και την διαδροµή στο σκληρό δίσκο στον οποίο βρίσκεται η εικόνα. Στο παραπάνω παράδειγµα εννοείται πως η εικόνα βρίσκεται στον ίδιο φάκελο µε το αρχείο html που δηµιουργούµε. Αν η εικόνα βρισκόταν σε κάποιο φάκελο τότε θα έπρεπε να οριστεί και το όνοµα του φακέλου στον οποίο βρίσκεται η εικόνα (π.χ. αν η εικόνα βρισκόταν στο φάκελο images τότε θα έπρεπε να γράψουµε background="images/back.jpg" Γενικά όλα τα αρχεία ιστοσελίδων βρίσκονται σε κάποιο κύριο φάκελο π.χ. web. O φάκελος αυτός µπορεί να περιέχει υποφακέλους. Όταν καλούµε αρχεία (εικόνες, αρχεία πολυµέσων, ) µέσα από κάποια παράµετρο ενός tag, τότε θα πρέπει να ορίζονται οι απόλυτες διαδροµές των αρχείων αυτών. Υπάρχουν οι εξής 3 περιπτώσεις. Σε ένα αρχείο html πρέπει να γίνει αναφορά σε µία εικόνα img.gif που βρίσκεται σε ένα φάκελο imgs. Το αρχείο html βρίσκεται µέσα στο φάκελο imgs. Η αναφορά θα γίνει ως img.gif. Σε ένα αρχείο html πρέπει να γίνει αναφορά σε µία εικόνα img.gif που βρίσκεται σε ένα φάκελο imgs. Το αρχείο html βρίσκεται έξω από το φάκελο imgs. Η αναφορά θα γίνει ως imgs/img.gif. Σε ένα αρχείο html που βρίσκεται σε ένα φάκελο imgs, πρέπει να γίνει αναφορά σε µία εικόνα img.gif. Το αρχείο img.gif βρίσκεται εκτός του φακέλου imgs. Η αναφορά θα γίνει ως /img.gif. Παράµετρος text. Η παράµετρος αυτή παίρνει ως τιµή το χρώµα µε το οποίο θα εµφανίζεται το κείµενο της σελίδας µας. Παράµετρος link. Η παράµετρος αυτή παίρνει ως τιµή το χρώµα µε το οποίο θα εµφανίζονται τα links της σελίδας µας. Παράµετρος vlink. Η παράµετρος αυτή παίρνει ως τιµή το χρώµα µε το οποίο θα εµφανίζονται τα links της σελίδας µας τα οποία κάποιος χρήστης τα έχει επισκεφτεί (τα έχει επιλέξει). Παράµετρος leftmargin & marginwidth. Οι παράµετροι αυτοί παίρνουν ως τιµές των αριθµό των pixels τα οποία θα απέχει η αρχή της σελίδας µας από τo αριστερό περιθώριο του browser. Η πρώτη παράµετρος αφορά την υλοποίηση για τον Internet Εxplorer, η δεύτερη για το Netscape Navigator. Παράµετρος topmargin & marginheight. Οι παράµετροι αυτοί παίρνουν ως τιµές των αριθµό των pixels τα οποία θα απέχει η αρχή της σελίδας µας από τo πάνω περιθώριο του browser. Η πρώτη παράµετρος αφορά την υλοποίηση για τον Internet Εxplorer, η δεύτερη για το Netscape Navigator.

5 HTML Εισαγωγή Κειµένου Εικόνων και link σε µία ιστοσελίδα Τα tags που θα αναφερθούν παρακάτω πρέπει πάντα να µπαίνουν µετά το tag <BODY> και τις παραµέτρους αυτού. Επίσης τα tags που αναφέρονται παρακάτω θα πρέπει να βρίσκονται πριν από το κλείσιµο του tag body (</BODY>). ηλαδή: <body> Τα tags που αφορούν κείµενο, εικόνες, links, πίνακες, frames και φόρµες, εισάγονται εδώ. </body> Εισαγωγή κειµένου. Για να εισάγετε κείµενο σε µία σελίδα html, αρκεί να χρησιµοποιήσετε το tag <p> (ή απλά να πληκτρολογήσετε το κείµενo). ηλαδή: <p> Εισάγετε το κείµενο σας εδώ </p> <p> Και να συνεχίσετε εδώ</p> Σηµειώνεται πως το tag <p> δηµιουργεί παραγράφους µε µία κενή γραµµή ανάµεσα σε αυτές. Στο παραπάνω παράδειγµα το αποτέλεσµα σε µία ιστοσελίδα θα ήταν: Εισάγετε το κείµενο σας εδώ Και να συνεχίσετε εδώ Αν θέλουµε το αποτέλεσµα να µην είναι αυτό που φαίνεται παραπάνω, αλλά απλά να συνεχίζει το κείµενο στην αµέσως επόµενη γραµµή, π.χ. Κείµενο Χωρίς κενή γραµµή ανάµεσα. Τότε, θα έπρεπε να χρησιµοποιηθεί το tag <br> (το tag br δεν κλείνει, δηλαδή δεν υπάρχει το </br>). Ο κώδικάς µας, θα ήταν: <p>κείµενο<br>χωρίς κενή γραµµή ανάµεσα.</p> Επίσης το tag <p> παίρνει την παράµετρο align µε τιµές left ή right ή center ή justify (π.χ. <p align= center >) που αφορούν στη στοίχιση του κειµένου. Υπάρχουν περιπτώσεις στις οποίες µπορεί να µην χρησιµοποιήσουµε το tag <p> για να εισάγουµε κείµενο παρά µόνο να γράψουµε το κείµενο ως έχει µέσα στον κώδικα. Σε αυτές τις περιπτώσεις για να στοιχίσουµε το κείµενό µας χρησιµοποιούµε το tag <div> µε τις παραµέτρους που αναφέρθηκαν παραπάνω και το οποίο επίσης κλείνει µόλις εισαχθεί το περιεχόµενο. Π.χ. <div align= right >Κείµενο</div>

6 HTML Γραµµατοσειρές, µεγέθη, bold, italics και χρώµα στο κείµενο. Αν θέλουµε να δηλώσουµε πως το κείµενό µας θα χρησιµοποιεί κάποια γραµµατοσειρά, τότε πρέπει να χρησιµοποιήσουµε το tag <font>. Το tag κλείνει ως </font>. Για να υλοποιηθεί η χρήση της γραµµατοσειράς πρέπει στο tag font να δώσουµε κάποιες παραµέτρους. Αυτές είναι: color="#003399" : Η παράµετρος color παίρνει ως τιµή το χρώµα που θα έχει το κείµενο. size="2" : Η παράµετρος size παίρνει ως τιµή το µέγεθος της γραµµατοσειράς. Σηµειώνεται πως το µέγεθος αυτό δεν σχετίζεται µε το κλασσικό µέγεθος που συναντάµε σε κάποια προγράµµατα. Π.χ. µέγεθος γραµµατοσειράς 2 στην html, αντιστοιχεί σε γραµµατοσειρά 11 στο Microsoft Word. face="tahoma, Verdana, Arial, Helvetica, Sans-serif" : H παράµετρος face, παίρνει ως τιµή το όνοµα ή τα ονόµατα της γραµµατοσειράς που θα χρησιµοποιήσει το κείµενό µας. Καλό είναι να χρησιµοποιούνται παραπάνω από µία γραµµατοσειρές ίδιας περίπου εµφάνισης, διότι µπορεί ο υπολογιστής στον οποίο εµφανίζεται η γραµµατοσειρά να µην έχει εγκατεστηµένη την πρώτη από αυτές. Τότε θα χρησιµοποιηθεί η δεύτερη κ.λ.π. Σηµειώνεται πως δεν είναι υποχρεωτική η χρήση όλων των παραµέτρων. BOLD & ITALICS Τα tags που θα αναφερθούν και αφορούν στην υλοποίηση bold και italics στο κείµενό µας, χρησιµοποιούνται µετά το tag <font> (µε την προϋπόθεση βέβαια ότι το tag αυτό έχει χρησιµοποιηθεί) και εντός του κειµένου. Αν θέλουµε να δηλώσουµε πως µία λέξη ή ένα µέρος της πρότασης είναι bold, τότε χρησιµοποιούµε το tag <strong> στη συνέχεια ακολουθεί η λέξη ή η πρόταση και το tag κλείνει </strong>. Αντίστοιχα αν θέλουµε να ορίσουµε πως λέξη ή µέρος πρότασης είναι italic, τότε χρησιµοποιείται το tag <em> το οποίο επίσης κλείνει. Εννοείται πως αν θέλουµε να υλοποιήσουµε bold italics, τότε χρησιµοποιούµε συνδυασµό των δύο παραπάνω tags ως εξής <em><strong> και τα οποία επίσης κλείνουν </strong></em> Συνδυάζοντας όλα τα παραπάνω, αν θέλουµε να εµφανιστεί το παρακάτω κείµενο: Κείµενο µε χρώµα µπλέ και γραµµατοσειρά tahoma. Η λέξη TAHOMA είναι bold. Ενώ η λέξη Κείµενο είναι Italics. Θα πρέπει να εισάγουµε τον παρακάτω κώδικα: <font color="#003399" size="2" face="tahoma, Verdana, Arial, Helvetica, Sans-serif"> <em>κείµενο</em> µε χρώµα µπλέ και γραµµατοσειρά <strong>tahoma</strong>.

7 HTML <em> <strong>η λέξη TAHOMA είναι bold. Ενώ η λέξη Κείµενο είναι Italics. </strong> </em> </font> ηµιουργία links στο κείµενό µας. Εάν θελήσουµε να δηµιουργήσουµε κάποιο link στο κείµενό µας, τότε χρησιµοποιούµε το tag <a>. Το tag αυτό κλείνει ως </a>, ενώ ανάλογη είναι η χρήση του και στις εικόνες όπως θα δούµε και παρακάτω. Το tag <a> παίρνει κάποιες παραµέτρους: href="http://www.yahoo.com" : H παράµετρος HREF παίρνει ως τιµή το link το οποίο θα δηµιουργηθεί, το οποίο µπορεί να είναι είτε µία διεύθυνση στο Internet είτε ένα άλλο αρχείο html που έχουµε στο φάκελό µας. Σηµειώνεται πως το αρχείο html θα πρέπει να δηλωθεί µε την απόλυτη διαδροµή του π.χ. href= morehtmls/html_other.html ή href=../html_other.html, ανάλογα µε το ποια είναι η διάταξη των αρχείων µέσα στους φακέλους και τους υποφακέλους του site που δηµιουργούµε. Επίσης η παράµετρος href, µπορεί να πάρει ως τιµή την mailto:το κάποιου, στην περίπτωση που δηµιουργούµε ένα link που έχει ως στόχο να ανοίξει το πρόγραµµα ηλεκτρονικού ταχυδροµείου και να στείλουµε στο άτοµο που είναι µετά το πεδίο mailto. target="_blank" : Η παράµετρος target παίρνει ως τιµή τον τρόπο µε τον οποίο θα ανοίξει το καινούριο link. Οι τιµές αυτές είναι: _blank : Θα ανοίξει το link που εµφανίζεται στο href σε ένα καινούριο παράθυρο του browser. _parent, _self, top, όνοµα frame : χρησιµοποιούνται όλα όταν υλοποιούµε frames στην ιστοσελίδα µας. Σηµειώνεται πως η παράµετρος αυτή δεν είναι υποχρεωτική. Π.Χ. Αν θέλαµε να δηµιουργήσουµε ένα κείµενο ηµιουργία link στο Yahoo, το οποίο όταν κάποιος το πατάει θα ανοίγει η σελίδα του YAHOO σε κάποιο νέο παράθυρο, θα έπρεπε να εισάγουµε τον παρακάτω κώδικα: <p> <a href="http://www.yahoo.com" target="_blank"> ηµιουργία link στο Yahoo </a> </p> Αν θέλουµε να δηµιουργήσουµε link σε κάποια λέξη ή κάποιο µέρος της πρότασης τότε θα πρέπει το tag <a> να χρησιµοποιηθεί στο σηµείο της πρότασης και να κλείσει αµέσως µετά από αυτή.

8 HTML Αν π.χ. θέλουµε ένα link της µορφής Για να στείλετε στον Χρήστο, πατήστε στο όνοµά του., τότε θα έπρεπε ο κώδικάς µας να έχει ως εξής: Για να στείλετε στον <a Χρήστο </a>, πατήστε στο όνοµά του. Εισαγωγή εικόνων σε µία ιστοσελίδα Για να εισάγουµε µία εικόνα στην ιστοσελίδα µας πρέπει να χρησιµοποιήσουµε το tag <img>. Σηµειώνεται πως το tag αυτό δεν κλείνει, δηλαδή δεν υπάρχει το </img>. Το tag <img>, παίρνει τις εξής παραµέτρους: src="images/square.jpg" : Η παράµετρος src παίρνει ως τιµή την απόλυτη διαδροµή και το όνοµα της εικόνας που θα εµφανιστεί. Σηµειώνεται πως οι εικόνες που υποστηρίζει ένας web browser είναι της µορφής jpg, gif και png. width="400" height="267": Η παράµετρος width παίρνει ως τιµή το πλάτος της εικόνας σε pixels, ενώ η παράµετρος height το ύψος της εικόνας σε pixels. Σηµειώνεται πως δεν είναι απαραίτητο αλλά είναι καλό να χρησιµοποιούνται και επίσης πως αν αυξηθούν ή µειωθούν σε σχέση µε το πραγµατικό µέγεθος της εικόνας τότε η εικόνα θα µεγαλώσει ή µικρύνει αντίστοιχα. Υπάρχουν περιπτώσεις όπου για σχεδιαστικούς λόγους το πλάτος και ύψος µιας εικόνας πρέπει να δηλωθεί ως ποσοστό π.χ. 100%. Αν για παράδειγµα θέλαµε να εισάγουµε την παρακάτω µία εικόνα που ονοµάζεται square.jpg στην ιστοσελίδα µας ο κώδικας θα ήταν. <img src="images/square.jpg" width="400" height="267"> µε δεδοµένο ότι η εικόνα βρίσκεται σε ένα φάκελο images και το αρχείο html βρίσκεται εκτός του φακέλου. ηµιουργία links σε µία εικόνα Αν θέλουµε σε µία εικόνα να δηµιουργήσουµε κάποιο Link, ώστε όταν ένας χρήστης πατάει πάνω της να ανοίγει µία ιστοσελίδα ή να στέλνεται ένα , τότε χρησιµοποιούµε το tag <a> όπως περιγράψαµε παραπάνω για το κείµενο. Η µόνη διαφορά είναι ότι περιεχόµενο του tag <a> δεν θα είναι κείµενο αλλά ο κώδικας που εµφανίζει µία εικόνα. Π.χ. <a href="http://www.sidney.org">

9 HTML <img src="images/square.jpg" width="400" height="267" border="0"> </a> Εισαγωγή πινάκων Για να δηµιουργήσουµε ένα πίνακα σε µία σελίδα χρησιµοποιούµε το tag <table>. To tag table παίρνει κάποιες παραµέτρους (µη υποχρεωτικές): Π.χ <table width="200" height="200" border="1" align="center" cellpadding="2" cellspacing="2" bordercolor="#999999" background="images/square.jpg" bgcolor="#666666"> Width: το πλάτος του πίνακα σε pixels (µπορεί για σχεδιαστικούς λόγους να εκφραστεί και σαν ποσοστό. Π.χ. width= 80% σηµαίνει πλάτος το 80% της οθόνης που καταλαµβάνει ο web browser. Height : Το ύψος του πίνακα σε pixels (µπορεί επίσης να εκφραστεί σαν ποσοστό αλλά δεν υποστηρίζεται από όλους τους browsers) Border : Το πάχος των περιθωρίων σε pixels Align : Η στοίχιση του πίνακα στην οθόνη Cellpadding: H απόσταση οποιουδήποτε στοιχείου εισαχθεί σε κελί του πίνακα (π.χ. κείµενο) από την άκρη της γραµµής του κελιού Cellspacing: H απόσταση της γραµµής του κελιού από την άκρη του πίνακα. Bordercolor: Το χρώµα του περιθωρίου του πίνακα. Background : Μία εικόνα που µπορεί να χρησιµοποιηθεί ως φόντο του πίνακα Bgcolor: το χρώµα του φόντου του πίνακα. Το tag <table> αφού εισαχθούν τα περιεχόµενα του κλείνει </table>. Περιεχόµενα του tag αυτού είναι τα tags <tr> και <td> τα οποία επίσης πρέπει να κλείνουν </tr> & </td> H υλοποίηση των γραµµών ενός πίνακα γίνεται µέσα από το tag <tr> ενώ η υλοποίηση των στηλών του πίνακα µέσα από το tag <td> Π.χ. ο παρακάτω κώδικας δηµιουργεί έναν πίνακα µε 2 γραµµές και 2 στήλες <table width="300" > <tr> πρώτη γραµµή του πίνακα <td></td> πρώτη στήλη του πίνακα <td></td> δεύτερη στήλη του πίνακα </tr> τέλος της πρώτης γραµµής του πίνακα <tr> δεύτερη γραµµή του πίνακα <td></td> πρώτη στήλη της δεύτερης γραµµής του πίνακα <td></td> δεύτερη στήλη της δεύτερη γραµµής του πίνακα </tr> τέλος της δεύτερης γραµµής του πίνακα </table> τέλος του πίνακα Το tag <td> είναι αυτό στο οποίο εισάγεται το περιεχόµενο του κελιού. Π.χ. <td><img src="images/square.jpg" width="400" height="267" border="0"></td>, θα εισήγαγε µία εικόνα ως περιεχόµενο του κελιού. Το tag αυτό παίρνει κάποιες παραµέτρους: Π.χ. <td width="80" height="120" align="center" valign="top" bordercolor="#990000" background="images/square.jpg" bgcolor="#cccccc">

10 HTML Η έννοια των παραµέτρων του tag <td> είναι αντίστοιχη µε τις παραµέτρους του πίνακα απλά προστίθεται η παράµετρος valign που παίρνει τιµές top,middle,bottom,baseline η οποία αφορά στην κατακόρυφη στοίχιση του περιεχοµένου του κελιού του πίνακα. Εισαγωγή φορµών σε µία ιστοσελίδα Για να εισάγουµε µία φόρµα (π.χ. φόρµα επικοινωνίας) σε µία σελίδα χρησιµοποιούµε το tag <form> το οποίο αφού προστεθούν τα περιεχόµενα της φόρµας (πεδία) κλείνει </form> To tag <form> παίρνει κάποιες παραµέτρους. Π.χ. <form action="formaction.jsp" method="post" name="myform" > Action : καθορίζει το script στο οποίο θα σταλούν τα περιεχόµενα της φόρµας για επεξεργασία. Method : καθορίζει τον τρόπο µε τον οποίο θα σταλούν τα περιεχόµενα της φόρµας (οι τιµές είναι post και get). H µέθοδος post στέλνει τα περιεχόµενα της φόρµας ξεχωριστά από το url ενώ η µέθοδος get προσθέτει τα περιεχόµενα της φόρµας στο τέλος του url. Name : Αντιστοιχεί ένα όνοµα στην φόρµα µας. Είναι χρήσιµο όταν αναφερόµαστε στη φόρµα µέσα από διάφορα scripts (π.χ. javascript, jsp,..) Υπάρχουν και άλλες παράµετροι του tag <form>, όπως enctype, accept, accept-charset. Για περισσότερα πάνω στις παραµέτρους αυτές αναφερθείτε στη τυποποίηση της html (www.w3c.org) Αφού οριστούν οι παράµετροι του tag <form>, καθορίζονται τα πεδία της φόρµας µέσα από διάφορα tags. Τα περισσότερα πεδία ορίζονται µέσα από το tag <input> το οποίο δεν κλείνει. εν υπάρχει δηλαδή το </input> To tag αυτό παίρνει κάποιες παραµέτρους που καθορίζουν το είδος των δεδοµένων που εισάγουµε. Π.χ. <input name="phone" type="text" value="hello" size="15" maxlength="12"> Τo tag input παίρνει τις εξής παραµέτρους. Name: αντιστοιχεί ένα όνοµα στο πεδίο. Πρέπει να ορίζεται καθώς θα χρησιµοποιηθεί από το script που ορίζεται στην παράµετρο action του tag <form> για να αντιστοιχίσει σε αυτό την τιµή που θα πληκτρολογήσει ο χρήστης. Type : Ορίζει τον τύπο του πεδίου. Οι τιµές είναι text (ορίζει πεδίο κειµένου µίας γραµµής), hidden (ορίζει κρυφό πεδίο), checkbox (ορίζει ένα κουτί τύπου checkbox), radio (ορίζει ένα κουτί τύπου radiobutton), file (ορίζει ένα πεδίο στο οποίο θα εισαχθεί ένα αρχείο), password (ορίζει ένα πεδίο στο οποίο θα εισαχθεί κωδικός ο οποίος θα φαίνεται µε *** όταν τον πληκτρολογεί ο χρήστης), submit (ορίζει ένα κουµπί αποστολής της φόρµας), reset (ορίζει ένα κουµπί επαναφοράς της φόρµας στην αρχική της κατάσταση, δηλαδή χωρίς τιµές στα πεδία). Value (µη υποχρεωτικό): Ορίζει µία τιµή εξ ορισµού για το πεδίο. Αυτές είναι οι παράµετροι του tag input που παίρνουν όλα τα πεδία που καθορίζονται µέσα από την παράµετρο type. Πέραν αυτών υπάρχουν παράµετροι οι οποίες ορίζονται βάση του τύπου του πεδίου: Για τύπο πεδίου text & file (σε πεδίο τύπου file οι παρακάτω παράµετροι είναι περιττές): Size : ορίζει το µέγεθος του πεδίου κειµένου σε χαρακτήρες Maxlength : ορίζει τους µέγιστους επιτρεπόµενους χαρακτήρες που µπορεί να εισάγει ένας χρήστης. Π.χ. <input name="phone" type="text" value="hello" size="15" maxlength="12">

11 HTML Για τύπο πεδίου hidden: Καµία επιπλέον παράµετρος Για τύπο πεδίου checkbox & radiobutton: Checked : Η παράµετρος αυτή δεν παίρνει τιµή. Ορίζει ότι το πεδίο είναι εξ ορισµού τσεκαρισµένο Π.χ. <input name="checkbox" type="checkbox" value="yes" checked> Π.χ. <input name="radiobutton" type="radio" value="radiobutton" checked> Εκτός του tag <input> υπάρχουν και άλλα τα οποία χρησιµοποιούνται σε µία φόρµα: Το tag <textarea> το οποίο αφού εισαχθούν τα περιεχόµενά του κλείνει </textarea>. To tag αυτό εισάγει ένα πεδίο κειµένου πολλαπλών γραµµών. Οι παράµετροι του tag αυτού είναι οι εξής: Π.χ. <textarea name="textarea" cols="30" rows="8" wrap="physical">εδώ ή αρχική τιµή </textarea> name : όπως και παραπάνω. Cols : το µήκος των χαρακτήρων που χωράει κατά µήκος η περιοχή κειµένου Rows : ο αριθµός των γραµµών του πεδίου κειµένου. Wrap (µη υποχρεωτικό): ορίζει εάν το κείµενο που θα εισάγει ο χρήστης θα αναδιπλώνεται µέσα στο πλαίσιο κειµένου. Οι τιµές είναι physical,virtual,off. Σηµειώνεται πως πριν κλείσει το tag, µπορεί να µπεί η εξ ορισµού τιµή του πεδίου όπως φαίνεται στο παραπάνω παράδειγµα. Το tag <select>, το οποίο αφού εισαχθεί το περιεχόµενό του κλείνει </select>. Χρησιµοποιείται για να δηµιουργηθεί ένα µενού ή µία λίστα επιλογών. Το tag αυτό παίρνει κάποιες παραµέτρους: Π.χ. <select name="select"> ή <select name="select2" size="3" multiple> Name : όπως και παραπάνω Size : Χρησιµοποιείται στις λίστες και όχι στα µενού για να οριστεί το µέγεθος σε ύψος του πλαισίου της λίστας επιλογών. Multiple (µη υποχρεωτικό): Ορίζει ότι από τη λίστα επιλογών ο χρήστης µπορεί να επιλέξει περισσότερες από µία. Το tag <select> παίρνει ως περιεχόµενό του το tag <option> το οποίο επίσης κλείνει µόλις εισαχθεί το περιεχόµενό του </option> Παράµετροι του tag <option> είναι: Π.χ. <option value="τιµή 2" selected>επιλογή 2</option> Value: H τιµή η οποία αντιστοιχεί στην ονοµασία της επιλογής. Η ονοµασία της επιλογής εισάγεται πριν κλείσει το tag <option> Selected (µη υποχρεωτικό): Ορίζει ότι η αναφερόµενη επιλογή είναι η εξ ορισµού επιλεγµένη.

12 HTML CSS Τα CSS (Cascading Style Sheets), είναι ένα σύνολο από ορίσµατα, διαφορετικά από αυτά που συναντάµε στην HTML, τα οποία αναπτύχθηκαν µε στόχο την καλύτερη διαχείριση της εµφάνισης των ιστοσελίδων. Μπορούµε µέσα από τα CSS, να ορίσουµε γραµµατοσειρές, χρώµατα, στοίχιση, backgrounds, κ.λ.π. Ουσιαστικά αποτελούν κλάσεις αντικειµένων τα οποία παρέχουν µεθόδους για υλοποίηση σε κάποια tags της HTML. Για παράδειγµα µία κλάση CSS µπορεί να είναι η main, η οποία ορίζει ότι η γραµµατοσειρά που θα χρησιµοποιηθεί είναι η Verdana, µεγέθους 11, bold και το κείµενο θα είναι στοιχισµένο στο κέντρο. Για να εφαρµόσουµε αυτή την κλάση και τις ιδιότητες µεθόδους της µέσα στην HTML, χρησιµοποιούµε εντός όλων σχεδόν των tags της HTML που αφορούν σε εµφάνιση κειµένου, πινάκων, γραµµών ή στηλών πινάκων, links, φορµών κ.λ.π. την παράµετρο class= όνοµα κλάσης CSS. Για παράδειγµα αν θέλουµε σε µία παράγραφο να εφαρµόσουµε τις ιδιότητες της κλάσης main που αναφέραµε παραπάνω πρέπει να γράψουµε: <p class="main">το κείµενό µας</p> Τα ορίσµατα των CSS, µπορούν να εισαχθούν ως κώδικας τόσο µέσα στην HTML, όσο και σε ξεχωριστό αρχείο µε κατάληξη.css το οποίο στη συνέχεια αναφέρεται ως link στην HTML. Εισαγωγή ορισµάτων CSS Για να ορίσετε ότι σε µία σελίδα HTML, θα εισαχθεί κώδικας CSS πρέπει εντός της HTML και µέσα στο tag <HEAD> να εισάγετε τα εξής: <style type="text/css"> <!-- Ακολουθεί ο κώδικας των CSS. --> </style> Στην περίπτωση που ο κώδικας των CSS, έχει γραφτεί σε ξεχωριστό αρχείο µε κατάληξη.css τότε αντίστοιχα πρέπει εντός της HTML και µέσα στο tag <HEAD> να εισάγετε τα εξής: <link href=" διαδροµή και όνοµα αρχείου.css " rel="stylesheet" type="text/css">

13 HTML Κλάσεις CSS Παραπάνω αναφέραµε ότι τα CSS, αποτελούνται από κλάσεις και ιδιότητες αυτών των κλάσεων. Ένα παράδειγµα µπορεί να είναι το παρακάτω το οποίο έχει δύο κλάσεις τις main και small οι οποίες ορίζουν διαφορετικές ιδιότητες..main { font-family: Verdana, Tahoma, Arial, Helvetica, Sans-serif; font-size: 12px; color: #FFFFFF; line-height: 110%; list-style-type: disc; }.small { font-family: Verdana, Tahoma, Arial, Helvetica, Sans-serif; font-size: 9px; color: #333333; } Κοινώς για να ορίσετε µία κλάση CSS, εντός ενός αρχείου ή εντός της ίδιας της HTML σελίδας, όπως αναφέρθηκε παραπάνω πρέπει να εισάγετε τα εξής:.όνοµα κλάσης { ιδιότητες κλάσης } Ιδιότητες κλάσεων CSS Οι ιδιότητες κλάσεων ορίζονται ως εξής: Ιδιότητα : Παράµετροι Ιδιότητας ; Παρακάτω αναφέρονται οι πιο συνήθεις ιδιότητες κλάσεων που χρησιµοποιούνται στα CSS. font-family: Verdana, Tahoma, Arial, Helvetica, Sans-serif; Αναφέρεται στη γραµµατοσειρά που θα χρησιµοποιηθεί. Παράµετροι είναι τα ονόµατα των γραµµατοσειρών που θα χρησιµοποιηθούν για την εµφάνιση κειµένου µε προτεραιότητα από αριστερά προς δεξιά. font-size: 10px; Το µέγεθος της γραµµατοσειράς. font-style: italic; Το στυλ της γραµµατοσειράς. Παράµετροι είναι normal,italic,oblique. font-weight: bold;

14 HTML To πόσο έντονη θα είναι η γραµµατοσειρά. Παράµετροι είναι normal, bold, bolder, lighter. text-decoration: underline overline line-through blink ή none; H διακόσµηση του κειµένου. Οι παράµετροι όπως φαίνονται στα δεξιά του ορίσµατος διακοσµούν ο καθένας διαφορετικά το κείµενο στο οποίο εφαρµόζονται π.χ. overline δηµιουργεί µία γραµµή πάνω από το κείµενο. text-align: left; Η στοίχιση του κειµένου. Παράµετροι είναι left, right, center, justify. color: #006699; Το χρώµα της γραµµατοσειράς που θα χρησιµοποιηθεί. background-color: #003366; Το χρώµα του φόντου στο σηµείο που θα χρησιµοποιηθεί η κλάση. background-image: url(διαδροµή και όνοµα αρχείου); Η εικόνα που θα χρησιµοποιηθεί ως φόντο στο σηµείο που θα χρησιµοποιηθεί η κλάση. background-repeat: repeat; Αν χρησιµοποιηθεί εικόνα ως φόντο, αν η εικόνα θα επαναλαµβάνεται ή όχι για να επικαλύψει όλη ή όχι την περιοχή όπου εφαρµόζεται η κλάση. Για παράδειγµα σε ένα πίνακα µήκους 500 pixels αν εφαρµοστεί η κλάση που περιέχει αυτή την ιδιότητα και η παράµετρος της είναι no-repeat τότε η εικόνα θα εµφανιστεί ως φόντο µία µόνο φορά. Παράµετροι είναι repeat, no-repeat, repeat-x, repeat-y. background-attachment: fixed; Αν χρησιµοποιηθεί εικόνα ως φόντο, αν η εικόνα θα µετακινείται όσο ο χρήστης µετακινεί την σελίδα πάνω κάτω ή όχι. Παράµετροι είναι fixed και scroll. background-position: left top; Αν χρησιµοποιηθεί εικόνα ως φόντο σε πιο σηµείο της περιοχής που εφαρµόζεται η κλάση θα τοποθετηθεί το φόντο. Παράµετροι είναι Left, center, right ή απόσταση σε pixels για την οριζόντια τοποθέτηση και top, center, bottom ή απόσταση σε pixels για την κάθετη τοποθέτηση. Οι παραπάνω είναι οι πιο συνήθεις ιδιότητες κλάσεων. Για µία πλήρη λίστα των ιδιοτήτων των CSS αναφερθείτε στην τυποποίησή τους στο

Άσκηση 6 Επαναληπτική Άσκηση HTML

Άσκηση 6 Επαναληπτική Άσκηση HTML Άσκηση 6 Επαναληπτική Άσκηση HTML ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει τον τύπο του αρχείου Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο

Διαβάστε περισσότερα

Ετικέτες HTML. : Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον

Ετικέτες HTML. <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον Ετικέτες HTML : Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον πηγαίο κώδικα για να διευκολύνουμε την επεξεργασία και την συντήρηση του αρχείου. Τα σχόλια δεν εμφανίζονται στην οθόνη

Διαβάστε περισσότερα

Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML

Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο για το αρχείο Ορίζει το σώµα της background URL

Διαβάστε περισσότερα

Άσκηση 5 -Δηµιουργία ιστοσελίδων µε HTML µέρος 5 ο

Άσκηση 5 -Δηµιουργία ιστοσελίδων µε HTML µέρος 5 ο Άσκηση 5 -Δηµιουργία ιστοσελίδων µε HTML µέρος 5 ο HTML Φόρµες Για να δηµιουργήσουµε µια φόρµα στην οποία θα γράφουν σχόλια ή παρατηρήσεις οι επισκέπτες των σελίδων µας, χρειαζόµαστε την ετικέτα .

Διαβάστε περισσότερα

Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία

Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία Η γλώσσα HTML Επιμέλεια: Δέγγλερη Σοφία Υπερκείμενο Το δομικό χαρακτηριστικό του Παγκόσμιου Ιστού Ένα αρχείο Απλό κείμενο και υπερσύνδεσμοι Υπερσύνδεσμος Μετάβαση σε διάφορα άλλα έγγραφα Αποτελείται από

Διαβάστε περισσότερα

Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος

Εισαγωγή σε HTML και CSS. Παναγιώτης Τσαρχόπουλος Εισαγωγή σε HTML και CSS Παναγιώτης Τσαρχόπουλος Περιεχόμενα Εισαγωγικές έννοιες Ορολογία και σύνταξη Κείμενο σε HTML έγγραφα Σύνδεσμοι Ψηφιακές - Ευφυείς Πόλεις - Εισαγωγή σε HTML και CSS 2 Εισαγωγικές

Διαβάστε περισσότερα

ΠΛΗΡΟΦΟΡΙΑΚΑ & ΤΗΛΕΠΙΚΟΙΝΩΝΙΑΚΑ ΣΥΣΤΗΜΑΤΑ

ΠΛΗΡΟΦΟΡΙΑΚΑ & ΤΗΛΕΠΙΚΟΙΝΩΝΙΑΚΑ ΣΥΣΤΗΜΑΤΑ Οικονοµικό Πανεπιστήµιο Αθηνών Τµήµα ιοικητικής Επιστήµης & Τεχνολογίας ΠΛΗΡΟΦΟΡΙΑΚΑ & ΤΗΛΕΠΙΚΟΙΝΩΝΙΑΚΑ ΣΥΣΤΗΜΑΤΑ Κεφάλαιο 11 Eισαγωγή στην ανάπτυξη ιστοσελίδων µε HMTL Γιώργος Γιαγλής Περίληψη Κεφαλαίου

Διαβάστε περισσότερα

Cascading Style Sheets (CSS)

Cascading Style Sheets (CSS) Cascading Style Sheets (CSS) Τα Cascading Style Sheets προσφέρουν έναν εύκολο τρόπο για να ορίσουμε τη μορφοποίηση που επιθυμούμε να έχουν οι σελίδες μία τοποθεσίας του Παγκόσμιου Ιστού που δημιουργούμε.

Διαβάστε περισσότερα

Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας

Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας Σε αυτό το µάθηµα θα ασχοληθούµε µε τη βελτίωση της εµφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισµό όλων των αλλαγών στην εµφάνιση της σελίδας µέσω της τεχνολογίας των ιαδοχικών Φύλλων Στυλ (cascading

Διαβάστε περισσότερα

Διάλεξη 3η HTML intermediate

Διάλεξη 3η HTML intermediate Διάλεξη 3η HTML intermediate Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e. c o. d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Επέκταση γνώσεων στην html

Διαβάστε περισσότερα

Φόρμες. Γενικοί κανόνες. Η ετικέτα

Φόρμες. Γενικοί κανόνες. Η ετικέτα <form> Φόρμες Οι φόρμες περιέχουν τα στοιχεία φόρμας στο οποία ένας χρήστης μπορεί να εισαγάγει δεδομένα τα οποία στη συνέχεια αποστέλλονται σε έναν εξυπηρετητή για παραπέρα επεξεργασία. Γενικοί κανόνες Για τις

Διαβάστε περισσότερα

Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης

Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html Χρ. Ηλιούδης Παγκόσμιος Ιστός (WWW) Ο Παγκόσμιος Ιστός (World Wide Web WWW), ή απλώς Ιστός, βασίζεται στην ιδέα των κατανεμημένων πληροφοριών. Αντί όλες

Διαβάστε περισσότερα

ΗTML και XHTML Βασικές. Βασική σύνταξη HTML και HTML Ηδομή μιας HTML σελίδας

ΗTML και XHTML Βασικές. Βασική σύνταξη HTML και HTML Ηδομή μιας HTML σελίδας ΗTML και XHTML Βασικές έννοιες Βασική σύνταξη HTML και HTML Ηδομή μιας HTML σελίδας Η γραμματική της ΗΤML Όπως κάθε γλώσσα έχει μια γραμματική

Διαβάστε περισσότερα

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ Κεφάλαιο 4. Η γλώσσα HTML Επιμέλεια: Καραγιάννης Σπύρος Καθηγητής ΠΕ19 Βασικοί κανόνες σύνταξης HTML ομή σελίδας HTML Μορφοποίηση κειμένου Κατάλογοι Εισαγωγή

Διαβάστε περισσότερα

Η Βίβλος των CSS. Εισαγωγή στα CSS

Η Βίβλος των CSS. Εισαγωγή στα CSS Η Βίβλος των CSS Εισαγωγή στα CSS Τα Διαδοχικά Φύλλα Στυλ (CSS, Cascading Style Sheets) αποτελούν ένα πολύ καλό εργαλείο για να μπορούμε να αλλάζουμε την εμφάνιση και τη διάταξη (layout) των ιστοσελίδων

Διαβάστε περισσότερα

3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ

3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ 2014 3. ΕΙΣΑΓΩΓΗ ΣΤΟ CSS ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ Εισαγωγή Το CSS (Cascading Style Sheets) είναι αρχεία με κατάληξη.css τα οποία καθορίζουν την μορφοποίηση των ιστοσελίδων. Μέσω αυτών επιτυγχάνεται

Διαβάστε περισσότερα

Γαβαλάς Δαμιανός dgavalas@aegean.gr

Γαβαλάς Δαμιανός dgavalas@aegean.gr Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα IΙ (Β Έτος, 4ο εξ) Εργαστήριο #3ο: Ορισμός επιλογέων, μορφοποίηση με CSS Γαβαλάς Δαμιανός

Διαβάστε περισσότερα

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) Διάλεξη #5η: HTML: πίνακες (tables), πλαίσια (frames) Γαβαλάς Δαμιανός

Διαβάστε περισσότερα

2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ

2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ 2014 2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ H HTML είναι μία γλώσσα σήμανσης και αποτελεί την κύρια γλώσσα δημιουργίας ιστοσελίδων του διαδικτύου. Είναι το ακρωνύμιο των λέξεων HyperText

Διαβάστε περισσότερα

Οδηγίες Στο σημερινό εργαστήριο θα αρχίσετε να χρησιμοποιείτε βασικές οδηγίες μορφοποίησης της ιστοσελίδας σας (κάτι που έχουμε αποφύγει έως τώρα!).

Οδηγίες Στο σημερινό εργαστήριο θα αρχίσετε να χρησιμοποιείτε βασικές οδηγίες μορφοποίησης της ιστοσελίδας σας (κάτι που έχουμε αποφύγει έως τώρα!). Εργαστήριο #8 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Το σημερινό εργαστήριο είναι ανεξάρτητο από τα προηγούμενα, επειδή όμως θα ζητηθεί να ανακυκλώσετε υλικό από εκείνα, βεβαιωθείτε

Διαβάστε περισσότερα

Εισαγωγή στην πληροφορική

Εισαγωγή στην πληροφορική Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Εισαγωγή στην πληροφορική Ενότητα 5: Εισαγωγή στην HTML (Μέρος Α) Αγγελίδης Παντελής Τμήμα Μηχανικών Πληροφορικής και Τηλεπικοινωνιών Άδειες Χρήσης Το παρόν

Διαβάστε περισσότερα

Διάλεξη 2η Εισαγωγή στο CSS

Διάλεξη 2η Εισαγωγή στο CSS Διάλεξη 2η Εισαγωγή στο CSS Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e c o d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Τι είναι το CSS? Γιατί να χρησιμοποιήσω

Διαβάστε περισσότερα

Συλλογή και Επεξεργασία Δεδομένων με Φόρμες

Συλλογή και Επεξεργασία Δεδομένων με Φόρμες Συλλογή και Επεξεργασία Δεδομένων με Φόρμες Οι φόρμες αποτελούν τον πιο δημοφιλή τρόπο για τη συλλογή δεδομένων μέσω του World Wide Web (WWW). Επιτρέπουν στους χρήστες να επικοινωνούν με τη βοήθεια του

Διαβάστε περισσότερα

TEC510 Ανάπτυξη Δικτυακών Τόπων (Ε εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Γιώργος Μηλιώτης

TEC510 Ανάπτυξη Δικτυακών Τόπων (Ε εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Γιώργος Μηλιώτης TEC510 Ανάπτυξη Δικτυακών Τόπων (Ε εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Γιώργος Μηλιώτης Χειμερινό εξάμηνο 2011-2012 Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό

Διαβάστε περισσότερα

Πίνακες HTML. Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου

Πίνακες HTML. Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου Πίνακες HTML Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου Τι είναι Πίνακας Ένας πίνακας στοιχείων αποτελείται από γραμμές και στήλες. Το σημείο τομής μιας γραμμής και μιας στήλης ονομάζεται κελί (cell( cell).

Διαβάστε περισσότερα

Νέες Τεχνολογίες στην Εκπαίδευση

Νέες Τεχνολογίες στην Εκπαίδευση Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Επάλληλα φύλλα στυλ (CSS): Μια εισαγωγή Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης

Διαβάστε περισσότερα

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)

TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί

Διαβάστε περισσότερα

Σχεδιασμός και Ανάπτυξη Ιστοτόπων. ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος

Σχεδιασμός και Ανάπτυξη Ιστοτόπων. ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος Σχεδιασμός και Ανάπτυξη Ιστοτόπων ΕΠΑ.Λ. ΑΛΙΜΟΥ Τομέας Πληροφορικής Κ. Φλώρος H γλώσσα HTML Άλλες Βιβλιογραφικές πηγές για HTML http://www.w3schools.com/html/ http://www.it.uom.gr/project/html2/lessons.html

Διαβάστε περισσότερα

Περιεχόμενα. Γαβαλάς Δαμιανός

Περιεχόμενα. Γαβαλάς Δαμιανός Δικτυακά Πολυμέσα ΙΙ Διάλεξη #5 η : Τυπογραφία στο web Γαβαλάς Δαμιανός dgavalas@aegean.gr Περιεχόμενα Κατανόηση αρχών σχεδιασμού με γραμματοσειρές Κατανόηση των μονάδων μέτρησης που χρησιμοποιούνται στα

Διαβάστε περισσότερα

Υπερσυνδέσεις (hyperlinks)

Υπερσυνδέσεις (hyperlinks) Υπερσυνδέσεις (hyperlinks) Οι υπερσυνδέσεις αποτελούν το δυναμικό στοιχείο σε ένα έγγραφο html. Με τις υπερσυνδέσεις είναι δυνατή, εύκολη και γρήγορη η μετάβαση ή η παραπομπή από ένα αρχείο html (πηγή)

Διαβάστε περισσότερα

Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου.

Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου. Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου. 1 η ΑΣΚΗΣΗ Οι HTML σελίδες είναι απλές σελίδες κειμένου και μπορούν να δημιουργηθούν από οποιοδήποτε πρόγραμμα επεξεργασίας

Διαβάστε περισσότερα

Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους

Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους Με την γλώσσα περιγραφής υπερ-κειμένου (HTML) μπορούμε να σχεδιάζουμε ιστοσελίδες. Η HyperText Markup Language βασίζεται στην SGML (Standard Generalized

Διαβάστε περισσότερα

ΕΘΝΙΚΟ ΜΕΤΣΟΒΙΟ ΠΟΛΥΤΕΧΝΕΙΟ. Σηµειώσεις για τη γλώσσα HTML (HyperText Markup Language)

ΕΘΝΙΚΟ ΜΕΤΣΟΒΙΟ ΠΟΛΥΤΕΧΝΕΙΟ. Σηµειώσεις για τη γλώσσα HTML (HyperText Markup Language) ΕΘΝΙΚΟ ΜΕΤΣΟΒΙΟ ΠΟΛΥΤΕΧΝΕΙΟ ΣΧΟΛΗ ΗΛΕΚΤΡΟΛΟΓΩΝ ΜΗΧΑΝΙΚΩΝ ΚΑΙ ΜΗΧΑΝΙΚΩΝ ΥΠΟΛΟΓΙΣΤΩΝ Σηµειώσεις για τη γλώσσα HTML (HyperText Markup Language) ιδάσκων Αν. Καθηγητής Ι.Σ.Βενιέρης Αθήνα, Ιανουάριος 2003 1

Διαβάστε περισσότερα

Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML)

Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) 1. Δημιουργία μιας απλής σελίδας HTML Ανοίξτε το Notepad ακολουθώντας τη διαδρομή Start All Programs Accessories Notepad Πληκτρολογήστε το ακόλουθο κείμενο:

Διαβάστε περισσότερα

ΑΣΠΑΙΤΕ. ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α. Υπερκείμενο και HTML. Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :...

ΑΣΠΑΙΤΕ. ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α. Υπερκείμενο και HTML. Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :... ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α Υπερκείμενο και HTML ΑΣΠΑΙΤΕ Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :... Η HTML (HyperText Markup Language) είναι η γλώσσα που χρησιμοποιείται για να περιγράψει τη δομή και τη διαμόρφωση

Διαβάστε περισσότερα

Σχεδίαση ιστοσελίδων

Σχεδίαση ιστοσελίδων Τ.Ε.Ι. Δυτικής Ελλάδας Σχολή Διοίκησης και Οικονομίας Τμήμα Διοίκησης Επιχειρήσεων - Πάτρα Σχεδίαση ιστοσελίδων Θεώνη Πιτουρά, Γιάννης Κουτσονίκος Σημειώσεις για το Εργαστήριο «Επιχειρηματικές δικτυακές

Διαβάστε περισσότερα

Κεφάλαιο 4 HyperText Markup Language - HTML. Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013

Κεφάλαιο 4 HyperText Markup Language - HTML. Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013 Κεφάλαιο 4 HyperText Markup Language - HTML Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013 Τι είναι η HTML; Ένας τρόπος για να πεις στον σελιδομετρητή πώς να αναπαραστήσει

Διαβάστε περισσότερα

Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS)

Γαβαλάς Δαμιανός dgavalas@aegean.gr. Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS) Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #3 0 : Εισαγωγή στacascading Style Sheets (CSS) Γαβαλάς Δαμιανός dgavalas@aegean.gr Επικαλυπτόμενα Φύλλα Στυλ (Cascading Style Sheets, CSS) Η (X)HTML προσδιορίζει τη βασική

Διαβάστε περισσότερα

Στην τεχνολογία των CSS, οι κανόνες στυλ (style

Στην τεχνολογία των CSS, οι κανόνες στυλ (style Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #4 0 : CSS: Βασικές και προχωρημένες τεχνικές επιλογής, τα στοιχεία και , ψευδο κλάσεις και ψευδο επιλογείς Γαβαλάς Δαμιανός dgavalas@aegean.gr CSS κανόνες στυλ

Διαβάστε περισσότερα

ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ

ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ Βαγγελιώ Καβακλή Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας 8 Μαρτίου 2001 Hypertext Markup Language (HTML)! Σε μια ιστοσελίδα μπορούν να εμφανίζονται διαφορετικά

Διαβάστε περισσότερα

11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες

11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες 11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες Σκοπός του Εργαστηρίου: Σκοπός της παρούσας εργαστηριακής άσκησης είναι η εμβάθυνση σε συχνά χρησιμοποιούμενες ετικέτες HTML, όπως οι πίνακες και οι λίστες, καθώς

Διαβάστε περισσότερα

CSS 1. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών

CSS 1. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών CSS 1 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Δ. Ζήνδρος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης Creative

Διαβάστε περισσότερα

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας

Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας ικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) ιάλεξη #6η: HTML: ετικέτες ΜΕΤΑ, Cascading Style Sheet (CSS) Γαβαλάς Δαμιανός

Διαβάστε περισσότερα

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ. Κεφάλαιο 5. Αλληλεπιδραστικές ιστοσελίδες (χρήση ετικέτας και η τεχνική CGI)

ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ. Κεφάλαιο 5. Αλληλεπιδραστικές ιστοσελίδες (χρήση ετικέτας <FORM> και η τεχνική CGI) ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ Κεφάλαιο 5. Αλληλεπιδραστικές ιστοσελίδες (χρήση ετικέτας και η τεχνική CGI) Επιμέλεια: Καραγιάννης Σπύρος Καθηγητής ΠΕ19 ΦΟΡΜΕΣ (FORM) Είναι ο κύριος

Διαβάστε περισσότερα

<BODY></a> </h3> <p> <img alt="<HTML> <HEAD> <TITLE> <BODY>" title="<HTML> <HEAD> <TITLE> <BODY>" class="news-block-img pull-right" src="/thumbs/26/2082816.jpg"> ΑΣΚΗΣΗ 1 1. Ανοίξτε τον επεξεργαστή ιστοσελίδων 2. Αποθηκεύστε στο X:/mathimata/html/askiseis/ με όνομα askisi1b.html 3. Θα φτιάξουμε μια νέα ιστοσελίδα, χρησιμοποιώντας τις βασικές ετικέτες </p> <a href="/2082816-Html-head-title-body.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/45540589-Eisagogi-stin-html-i-domi-mias-istoselidas-arheio-html-i-vasiki-domi-enos-arheioy-html-einai-i-exis-html-head.html">Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head></a> </h3> <p> <img alt="Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head>" title="Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head>" class="news-block-img pull-right" src="/thumbs/61/45540589.jpg"> Εισαγωγη στην html Ο παγκόσμιος ιστός (αγγ.: World Wide Web ή www) είναι η πιο δημοφιλής υπηρεσία που μας παρέχει το Διαδίκτυο (Internet) και είναι ένα σύστημα διασυνδεδεμένων πληροφοριών (κειμένου, εικόνας, </p> <a href="/45540589-Eisagogi-stin-html-i-domi-mias-istoselidas-arheio-html-i-vasiki-domi-enos-arheioy-html-einai-i-exis-html-head.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/33507130-Tec410-anaptyxi-diktyakon-topon-d-examino.html">TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)</a> </h3> <p> <img alt="TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)" title="TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)" class="news-block-img pull-right" src="/thumbs/54/33507130.jpg"> TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί </p> <a href="/33507130-Tec410-anaptyxi-diktyakon-topon-d-examino.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/10949159-2-epilexte-tin-sosti-etiketa-html-poy-prosferei-to-megalytero-fonto-keimenoy-head-heading-h6-h1.html">2. Επιλέξτε την σωστή ετικέτα HTML που προσφέρει το μεγαλύτερο φόντο κειμένου. <head> <heading> <h6> <h1></a> </h3> <p> <img alt="2. Επιλέξτε την σωστή ετικέτα HTML που προσφέρει το μεγαλύτερο φόντο κειμένου. <head> <heading> <h6> <h1>" title="2. Επιλέξτε την σωστή ετικέτα HTML που προσφέρει το μεγαλύτερο φόντο κειμένου. <head> <heading> <h6> <h1>" class="news-block-img pull-right" src="/thumbs/27/10949159.jpg"> ΤΜΗΜΑ ΗΛΕΚΤΡΟΝΙΚΗΣ Τομέας Υπολογιστικών Συστημάτων και Ελέγχου Τεχνολογίες Πολυμέσων - Εφαρμογές Δρ. Β. ΒΑΛΑΜΟΝΤΕΣ Ε-mail: vala@teiath.gr Να απαντήσετε στις παρακάτω ερωτήσεις. 1. Τι σημαίνουν τα αρχικά </p> <a href="/10949159-2-epilexte-tin-sosti-etiketa-html-poy-prosferei-to-megalytero-fonto-keimenoy-head-heading-h6-h1.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/37298802-Askisi-3-diuioyrgia-istoselidon-ue-html-ueros-3-o.html">Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο</a> </h3> <p> <img alt="Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο" title="Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο" class="news-block-img pull-right" src="/thumbs/55/37298802.jpg"> Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο Εικόνες στην HTML Oι εικόνες ορίζονται µε την ετικέτα . Η συγκεκριµένη ετικέτα δεν κλείνει (είναι λάθος το: ) ή µπορούµε να πούµε ότι ανοίγει </p> <a href="/37298802-Askisi-3-diuioyrgia-istoselidon-ue-html-ueros-3-o.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/46215691-Varvakeio-protypo-gymnasio.html">Βαρβάκειο Πρότυπο Γυμνάσιο</a> </h3> <p> <img alt="Βαρβάκειο Πρότυπο Γυμνάσιο" title="Βαρβάκειο Πρότυπο Γυμνάσιο" class="news-block-img pull-right" src="/thumbs/61/46215691.jpg"> Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2016-2017 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού», </p> <a href="/46215691-Varvakeio-protypo-gymnasio.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/45011543-I-glossa-css-hrisimopoieitai-gia-ti-morfopoiisi-istoselidon-kai-i-syntaxi-tis-einai-arketa-apli.html">Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων και η σύνταξη της είναι αρκετά απλή.</a> </h3> <p> <img alt="Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων και η σύνταξη της είναι αρκετά απλή." title="Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων και η σύνταξη της είναι αρκετά απλή." class="news-block-img pull-right" src="/thumbs/60/45011543.jpg"> Εισαγωγή στο CSS Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση ιστοσελίδων και η σύνταξη της είναι αρκετά απλή. Πλεονεκτήματα CSS έναντι χρήσης μόνο HTML Μεγαλύτερη ευελιξία μορφοποιήσεων. Το CSS κατέστησε </p> <a href="/45011543-I-glossa-css-hrisimopoieitai-gia-ti-morfopoiisi-istoselidon-kai-i-syntaxi-tis-einai-arketa-apli.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/30361572-Vasileios-kontogiannis-pe19.html">Βασίλειος Κοντογιάννης ΠΕ19</a> </h3> <p> <img alt="Βασίλειος Κοντογιάννης ΠΕ19" title="Βασίλειος Κοντογιάννης ΠΕ19" class="news-block-img pull-right" src="/thumbs/52/30361572.jpg"> Ενότητα3 Επικοινωνία και Διαδίκτυο 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML (HyperText Markup Language); Είναι μια γλώσσα σήμανσης (Markup) με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου </p> <a href="/30361572-Vasileios-kontogiannis-pe19.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/34692357-Ref-slws-1-5copyright-2005-the-european-computer-driving-licence-foundation-ltd-selida-1-apo-7.html">Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7</a> </h3> <p> <img alt="Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7" title="Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7" class="news-block-img pull-right" src="/thumbs/54/34692357.jpg"> The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7 ΣΤΟΧΟΙ ΕΞΕΤΑΣΗΣ Η ενότητα ECDL WebStarter απαιτεί από τον Υποψήφιο να κατανοεί τις κύριες έννοιες της σχεδίασης και δημοσίευσης δικτυακών </p> <a href="/34692357-Ref-slws-1-5copyright-2005-the-european-computer-driving-licence-foundation-ltd-selida-1-apo-7.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/40710394-Ergastirio-tehnologies-pliroforias-kai-epikoinonias-ston-toyrismo-4o-ergastirio-eikones-stin-html.html">ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 4o ΕΡΓΑΣΤΗΡΙΟ ΕΙΚΟΝΕΣ ΣΤΗΝ HTML</a> </h3> <p> <img alt="ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 4o ΕΡΓΑΣΤΗΡΙΟ ΕΙΚΟΝΕΣ ΣΤΗΝ HTML" title="ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 4o ΕΡΓΑΣΤΗΡΙΟ ΕΙΚΟΝΕΣ ΣΤΗΝ HTML" class="news-block-img pull-right" src="/thumbs/57/40710394.jpg"> ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ ΠΕΡΙΕΧΟΜΕΝΟ ΜΑΘΗΜΑΤΟΣ 1. Εικόνες 2. Ασκήσεις 4o ΕΡΓΑΣΤΗΡΙΟ ΕΙΚΟΝΕΣ ΣΤΗΝ HTML 1. Εικόνες 1. Οι μορφές (format) των εικόνων που μπορείτε </p> <a href="/40710394-Ergastirio-tehnologies-pliroforias-kai-epikoinonias-ston-toyrismo-4o-ergastirio-eikones-stin-html.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/32032465-Cascading-style-sheets-formes-forms.html">Cascading Style Sheets Φόρμες (Forms)</a> </h3> <p> <img alt="Cascading Style Sheets Φόρμες (Forms)" title="Cascading Style Sheets Φόρμες (Forms)" class="news-block-img pull-right" src="/thumbs/53/32032465.jpg"> Cascading Style Sheets Φόρμες (Forms) Πανεπιστήμιο Πελοποννήσου Τμήμα Επιστήμης & Τεχνολογίας Τηλεπικοινωνιών Ευάγγελος Α. Κοσμάτος Cascading Style Sheets Τα Cascading Style Sheets (CSS) είναι οδηγίες </p> <a href="/32032465-Cascading-style-sheets-formes-forms.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/844210-Iuioyrgia-istoselidon-ue-to-1-microsoft-frontpage.html">ηµιουργία ιστοσελίδων µε το 1 Microsoft FrontPage</a> </h3> <p> <img alt="ηµιουργία ιστοσελίδων µε το 1 Microsoft FrontPage" title="ηµιουργία ιστοσελίδων µε το 1 Microsoft FrontPage" class="news-block-img pull-right" src="/thumbs/18/844210.jpg"> ηµιουργία ιστοσελίδων µε το 1 Microsoft FrontPage Τι είναι µια ιστοσελίδα (Web page); Μια ιστοσελίδα (web page) είναι ένα αρχείο που εµφανίζεται στην οθόνη του υπολογιστή από ένα πρόγραµµα που λέγεται </p> <a href="/844210-Iuioyrgia-istoselidon-ue-to-1-microsoft-frontpage.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/44763809-Vasika-stoiheia-toy-css.html">Βασικά στοιχεία του CSS</a> </h3> <p> <img alt="Βασικά στοιχεία του CSS" title="Βασικά στοιχεία του CSS" class="news-block-img pull-right" src="/thumbs/60/44763809.jpg"> Βασικά στοιχεία του CSS Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS κανόνων 2 Μορφοποίηση με HTML Η HTML είναι σχεδιασμένη </p> <a href="/44763809-Vasika-stoiheia-toy-css.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/30203942-Ti-einai-i-html-ti-einai-oi-etiketes-tags-pos-einai-mia-etiketa-tag.html">Τι είναι η HTML; Τί είναι οι ετικέτες (tags); Πώς είναι μια ετικέτα (tag);</a> </h3> <p> <img alt="Τι είναι η HTML; Τί είναι οι ετικέτες (tags); Πώς είναι μια ετικέτα (tag);" title="Τι είναι η HTML; Τί είναι οι ετικέτες (tags); Πώς είναι μια ετικέτα (tag);" class="news-block-img pull-right" src="/thumbs/52/30203942.jpg"> Τι είναι η HTML; Η HTML είναι το ακρώνυμο από το Hyper Text Markup Language που σημαίνει γλώσσα χαρακτηρισμού υπερκειμένου. Η χρήση μιας γλώσσας χαρακτηρισμού σημαίνει ότι γράφεται πρώτα το κείμενο και </p> <a href="/30203942-Ti-einai-i-html-ti-einai-oi-etiketes-tags-pos-einai-mia-etiketa-tag.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/42160821-Glossa-perigrafis-odigion-eufanisis-stoiheiothetisis.html">Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης</a> </h3> <p> <img alt="Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης" title="Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης" class="news-block-img pull-right" src="/thumbs/58/42160821.jpg"> CASCADING STYLE-SHEETS CASCADING STYLE-SHEETS Γλώσσα περιγραφής οδηγιών εµφάνισης-στοιχειοθέτησης εφαρµογών HTML. Τα CSS ορίζονται σε δύο συστάσεις του W3C: CSS1, εκ. 1996 περιλαµβάνει περίπου 50 ιδιότητες </p> <a href="/42160821-Glossa-perigrafis-odigion-eufanisis-stoiheiothetisis.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/34306604-I-glossa-epikalyptomenon-morfopoiiseon-css.html">Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS</a> </h3> <p> <img alt="Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS" title="Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS" class="news-block-img pull-right" src="/thumbs/54/34306604.jpg"> Η ΓΛΩΣΣΑ ΕΠΙΚΑΛΥΠΤΩΜΕΝΩΝ ΜΟΡΦΟΠΟΙΗΣΕΩΝ CSS Πίνακες Ιδιοτήτων Μορφοποίησης CSS Ιδιότητες Διαστασιολόγησης Στοιχείων height Ορίζει το ύψος ενός στοιχείου auto lenght (px) line-height Ορίζει το ύφος μιας </p> <a href="/34306604-I-glossa-epikalyptomenon-morfopoiiseon-css.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/1361536-Spoydes-cad-pliroforikis-oikonomias-dioikisis-kai-d-t-p-me-systima-didaskalias-facetoface.html">Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface</a> </h3> <p> <img alt="Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface" title="Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface" class="news-block-img pull-right" src="/thumbs/22/1361536.jpg"> Copyright 2009-2012 -SYSTEM- All rights reserved 2/159 ΠΕΡΙΕΧΟΜΕΝΑ Μάθημα 1: New - Save Μάθημα 2: Εισαγωγή στη CSS Μάθημα 3: Τρόπος Σύνταξης Μάθημα 4: Σχόλια Μάθημα 5: ID Μάθημα 6: Class Μάθημα 7: Background </p> <a href="/1361536-Spoydes-cad-pliroforikis-oikonomias-dioikisis-kai-d-t-p-me-systima-didaskalias-facetoface.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/35041980-Stin-enotita-ayti-tha-doyme-pos-me-css-idiotites-mporoyme-na-orisoyme-megethos-grammatoseira-kai-alla-haraktiristika-toy-keimenoy-stin-istoselida-mas.html">Στην ενότητα αυτή θα δούμε πως με CSS ιδιότητες μπορούμε να ορίσουμε μέγεθος, γραμματοσειρά και άλλα χαρακτηριστικά του κειμένου στην ιστοσελίδα μας</a> </h3> <p> <img alt="Στην ενότητα αυτή θα δούμε πως με CSS ιδιότητες μπορούμε να ορίσουμε μέγεθος, γραμματοσειρά και άλλα χαρακτηριστικά του κειμένου στην ιστοσελίδα μας" title="Στην ενότητα αυτή θα δούμε πως με CSS ιδιότητες μπορούμε να ορίσουμε μέγεθος, γραμματοσειρά και άλλα χαρακτηριστικά του κειμένου στην ιστοσελίδα μας" class="news-block-img pull-right" src="/thumbs/54/35041980.jpg"> Γραμματοσειρά Στην ενότητα αυτή θα δούμε πως με CSS ιδιότητες μπορούμε να ορίσουμε μέγεθος, γραμματοσειρά και άλλα χαρακτηριστικά του κειμένου στην ιστοσελίδα μας Γραμματοσειρά κειμένου Με την CSS ιδιότητα </p> <a href="/35041980-Stin-enotita-ayti-tha-doyme-pos-me-css-idiotites-mporoyme-na-orisoyme-megethos-grammatoseira-kai-alla-haraktiristika-toy-keimenoy-stin-istoselida-mas.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/46762786-Css-eisagogi-vasikes-ennoies-cascading-style-sheets-epikalyptomena-fylla-styl.html">CSS. Εισαγωγή & Βασικές έννοιες. Cascading Style Sheets. Επικαλυπτόμενα φύλλα στυλ</a> </h3> <p> <img alt="CSS. Εισαγωγή & Βασικές έννοιες. Cascading Style Sheets. Επικαλυπτόμενα φύλλα στυλ" title="CSS. Εισαγωγή & Βασικές έννοιες. Cascading Style Sheets. Επικαλυπτόμενα φύλλα στυλ" class="news-block-img pull-right" src="/thumbs/62/46762786.jpg"> CSS Εισαγωγή & Βασικές έννοιες Cascading Style Sheets Επικαλυπτόμενα φύλλα στυλ Περιεχόμενα Τι είναι CSS Πλεονεκτήματα CSS μορφοποίησης Συντακτικό του CSS Ιδιότητες CSS Εφαρμογή CSS κανόνων Επικάλυψη CSS </p> <a href="/46762786-Css-eisagogi-vasikes-ennoies-cascading-style-sheets-epikalyptomena-fylla-styl.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2082644-Ergastirio-front-page-2.html">ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 2</a> </h3> <p> <img alt="ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 2" title="ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 2" class="news-block-img pull-right" src="/thumbs/26/2082644.jpg"> ΕΡΓΑΣΤΗΡΙΟ FRONT PAGE 2 Μάθαµε στο προηγούµενο µάθηµα πώς να δίνουµε ονόµατα στις ιστοσελίδες µας, να βάζουµε χρώµα και γραφικά, ή ακόµα να δηµιουργούµε υπερσυνδέσµους σε κείµενο και εικόνες. Σήµερα µεταξύ </p> <a href="/2082644-Ergastirio-front-page-2.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/35823271-Tec410-anaptyxi-diktyakon-topon-d-examino.html">TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)</a> </h3> <p> <img alt="TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)" title="TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)" class="news-block-img pull-right" src="/thumbs/55/35823271.jpg"> TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί </p> <a href="/35823271-Tec410-anaptyxi-diktyakon-topon-d-examino.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/46129518-Epl-003-epistimi-tis-pliroforikis-kai-pliroforiaka-systimata-html.html">ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML</a> </h3> <p> <img alt="ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML" title="ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML" class="news-block-img pull-right" src="/thumbs/61/46129518.jpg"> ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML Στόχοι 1 Να δημιουργήσουμε υπερκείμενα με την Γλώσσα Επισημείωσης Υπερκειμένων (hypertext markup language, HTML). Υπολογιστικά συστήματα: </p> <a href="/46129518-Epl-003-epistimi-tis-pliroforikis-kai-pliroforiaka-systimata-html.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/34148657-Stis-epouenes-diafaneies-tha-doyue-tis-idiotites-toy-css-poy-uporoyue-na-epireasoyue-ueso-toy-dreamweaver.html">Στις επόµενες διαφάνειες θα δούµε τις ιδιότητες του CSS που µπορούµε να επηρεάσουµε µέσω του Dreamweaver.</a> </h3> <p> <img alt="Στις επόµενες διαφάνειες θα δούµε τις ιδιότητες του CSS που µπορούµε να επηρεάσουµε µέσω του Dreamweaver." title="Στις επόµενες διαφάνειες θα δούµε τις ιδιότητες του CSS που µπορούµε να επηρεάσουµε µέσω του Dreamweaver." class="news-block-img pull-right" src="/thumbs/54/34148657.jpg"> Στις επόµενες διαφάνειες θα δούµε τις ιδιότητες του CSS που µπορούµε να επηρεάσουµε µέσω του Dreamweaver. 37 Αφού καθορίσετε τα βασικά στοιχεία του νέου κανόνα css, όπως είδαµε στις προηγούµενες διαφάνειες, </p> <a href="/34148657-Stis-epouenes-diafaneies-tha-doyue-tis-idiotites-toy-css-poy-uporoyue-na-epireasoyue-ueso-toy-dreamweaver.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/33593406-Shedon-oles-oi-istoselides-vasizontai-se-megalo-vathmo-se-pinakes-gia-na-eisagoyme-enan-pinaka-epilegoyme-apo-to-menoy-insert-table.html">Σχεδόν όλες οι ιστοσελίδες βασίζονται σε μεγάλο βαθμό σε πίνακες. Για να εισάγουμε έναν πίνακα επιλέγουμε από το μενού Insert->Table.</a> </h3> <p> <img alt="Σχεδόν όλες οι ιστοσελίδες βασίζονται σε μεγάλο βαθμό σε πίνακες. Για να εισάγουμε έναν πίνακα επιλέγουμε από το μενού Insert->Table." title="Σχεδόν όλες οι ιστοσελίδες βασίζονται σε μεγάλο βαθμό σε πίνακες. Για να εισάγουμε έναν πίνακα επιλέγουμε από το μενού Insert->Table." class="news-block-img pull-right" src="/thumbs/54/33593406.jpg"> DreamWeaver - Άσκηση 4η Πίνακες Παρακάτω θα δούμε πως μπορούμε να δημιουργούμε και να επεξεργαζόμαστε πίνακες, μια πολύ βασική δομή. Θα δούμε πως γίνεται εισαγωγή πίνακα, ένωση κελιών του πίνακα, προσθήκη </p> <a href="/33593406-Shedon-oles-oi-istoselides-vasizontai-se-megalo-vathmo-se-pinakes-gia-na-eisagoyme-enan-pinaka-epilegoyme-apo-to-menoy-insert-table.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/40710341-I-vivlos-ton-css-meros-3-to-box-model-ta-perithoria-kai-ta-perigrammata.html">Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα</a> </h3> <p> <img alt="Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα" title="Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα" class="news-block-img pull-right" src="/thumbs/57/40710341.jpg"> Η Βίβλος των CSS - Μέρος 3 Το Box Model, τα Περιθώρια και τα Περιγράμματα Το Box Model Το box model στα CSS περιγράφει τα πλαίσια (boxes) που δημιουργούνται για τα στοιχεία (elements) της HTML. Το box </p> <a href="/40710341-I-vivlos-ton-css-meros-3-to-box-model-ta-perithoria-kai-ta-perigrammata.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/46762791-Css-2-didaskontes-p-aggelatos-d-zindros-epimeleia-diafaneion-p-aggelatos-sholi-ilektrologon-mihanikon-kai-mihanikon-ypologiston.html">CSS 2. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος. Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών</a> </h3> <p> <img alt="CSS 2. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος. Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών" title="CSS 2. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος. Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών" class="news-block-img pull-right" src="/thumbs/62/46762791.jpg"> CSS 2 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης </p> <a href="/46762791-Css-2-didaskontes-p-aggelatos-d-zindros-epimeleia-diafaneion-p-aggelatos-sholi-ilektrologon-mihanikon-kai-mihanikon-ypologiston.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/35858216-To-apeikonistiko-montelo-morfopoiisis-ton-css.html">Το απεικονιστικό μοντέλο μορφοποίησης των CSS</a> </h3> <p> <img alt="Το απεικονιστικό μοντέλο μορφοποίησης των CSS" title="Το απεικονιστικό μοντέλο μορφοποίησης των CSS" class="news-block-img pull-right" src="/thumbs/55/35858216.jpg"> Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #6 0 : CSS: Χρήση των ιδιοτήτων του κουτιού (box properties). Διάταξη σελίδων Γαβαλάς Δαμιανός dgavalas@aegean.gr Το απεικονιστικό μοντέλο μορφοποίησης των CSS Περιγράφει </p> <a href="/35858216-To-apeikonistiko-montelo-morfopoiisis-ton-css.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/6576660-Keiuenografoi-etiketon.html">Κειµενογράφοι ετικετών</a> </h3> <p> <img alt="Κειµενογράφοι ετικετών" title="Κειµενογράφοι ετικετών" class="news-block-img pull-right" src="/thumbs/25/6576660.jpg"> ΕΠΛ 012 Γλώσσα Μορφοποίησης HTML Πως κτίζουµε τις Ετικέτες Notepad ή άλλο TEXT editor Πού τα κάνουµε Save? Πώς τα οργανώνουµε Πώς τα βάζουµε δηµόσια online Τα αρχεία να τελειώνουν σε.html ή.htm Πως ξεκινούµε </p> <a href="/6576660-Keiuenografoi-etiketon.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/31007132-Ergastirio-tehnologies-pliroforias-kai-epikoinonias-ston-toyrismo-2o-ergastirio-morfopoiisi-stin-html.html">ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 2o ΕΡΓΑΣΤΗΡΙΟ ΜΟΡΦΟΠΟΙΗΣΗ ΣΤΗΝ HTML</a> </h3> <p> <img alt="ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 2o ΕΡΓΑΣΤΗΡΙΟ ΜΟΡΦΟΠΟΙΗΣΗ ΣΤΗΝ HTML" title="ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 2o ΕΡΓΑΣΤΗΡΙΟ ΜΟΡΦΟΠΟΙΗΣΗ ΣΤΗΝ HTML" class="news-block-img pull-right" src="/thumbs/53/31007132.jpg"> ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ ΠΕΡΙΕΧΟΜΕΝΟ ΜΑΘΗΜΑΤΟΣ 2o ΕΡΓΑΣΤΗΡΙΟ ΜΟΡΦΟΠΟΙΗΣΗ ΣΤΗΝ HTML 1. Μορφοποίηση κειμένου Ετικέτες στυλ 2. Ιδιότητες ετικετών 3. Λίστες 4. Υπερσυνδέσεις </p> <a href="/31007132-Ergastirio-tehnologies-pliroforias-kai-epikoinonias-ston-toyrismo-2o-ergastirio-morfopoiisi-stin-html.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/33359887-Kefalaio-11-eisagogi-stin-html-efarmoges-pliroforikis-kef-11-karamaoynas-polykarpos.html">Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος</a> </h3> <p> <img alt="Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος" title="Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος" class="news-block-img pull-right" src="/thumbs/54/33359887.jpg"> Κεφάλαιο 11: Εισαγωγή στην HTML 1 11.1 Γενική εισαγωγή στην HTML Τι είναι η HTML HyperText Markup Language - Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου είναι η βασική γλώσσα με την οποία πραγματοποιείται η δόμηση </p> <a href="/33359887-Kefalaio-11-eisagogi-stin-html-efarmoges-pliroforikis-kef-11-karamaoynas-polykarpos.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/31457092-Dreamweaver-mx-7-me-poion-tropo-morfopoioyme-kapoioys-haraktires-tis-selidas-mas-sto-parathyro-properties-yparhei-i-pio-kato-grammi-ergaleion.html">DREAMWEAVER MX. 7. Με ποιον τρόπο μορφοποιούμε κάποιους χαρακτήρες της σελίδας μας; Στο παράθυρο Properties υπάρχει η πιο κάτω γραμμή εργαλείων:</a> </h3> <p> <img alt="DREAMWEAVER MX. 7. Με ποιον τρόπο μορφοποιούμε κάποιους χαρακτήρες της σελίδας μας; Στο παράθυρο Properties υπάρχει η πιο κάτω γραμμή εργαλείων:" title="DREAMWEAVER MX. 7. Με ποιον τρόπο μορφοποιούμε κάποιους χαρακτήρες της σελίδας μας; Στο παράθυρο Properties υπάρχει η πιο κάτω γραμμή εργαλείων:" class="news-block-img pull-right" src="/thumbs/53/31457092.jpg"> 1 Πώς δημιουργούμε ένα νέο Site; Πατάμε Site/ Manage Sites και μετά στο παράθυρο που εμφανίζεται πατάμε το κουμπάκι New και επιλέγουμε Site Στη συνέχεια θα πρέπει να δώσουμε: Α το όνομα που θέλουμε να </p> <a href="/31457092-Dreamweaver-mx-7-me-poion-tropo-morfopoioyme-kapoioys-haraktires-tis-selidas-mas-sto-parathyro-properties-yparhei-i-pio-kato-grammi-ergaleion.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/34306360-Stoiheia-orismoy-thesis-positioning-elements.html">Στοιχεία ορισμού θέσης (Positioning Elements)</a> </h3> <p> <img alt="Στοιχεία ορισμού θέσης (Positioning Elements)" title="Στοιχεία ορισμού θέσης (Positioning Elements)" class="news-block-img pull-right" src="/thumbs/54/34306360.jpg"> Δικτυακά Πολυμέσα ΙΙ Εργαστήριο #7 0 : Ορισμός θέσης σε διατάξεις (positioned layouts). Γαβαλάς Δαμιανός dgavalas@aegean.gr Στοιχεία ορισμού θέσης (Positioning Elements) Οι ιδιότητες τοποθέτησης των CSS </p> <a href="/34306360-Stoiheia-orismoy-thesis-positioning-elements.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/36672523-Nees-tehnologies-stin-ekpaideysi.html">Νέες Τεχνολογίες στην Εκπαίδευση</a> </h3> <p> <img alt="Νέες Τεχνολογίες στην Εκπαίδευση" title="Νέες Τεχνολογίες στην Εκπαίδευση" class="news-block-img pull-right" src="/thumbs/55/36672523.jpg"> Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Πλαίσια Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται </p> <a href="/36672523-Nees-tehnologies-stin-ekpaideysi.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/4407351-Eisagogi-sto-css-apo-lia-veroy.html">Εισαγωγή στο CSS Από: Λία Βέρου</a> </h3> <p> <img alt="Εισαγωγή στο CSS Από: Λία Βέρου" title="Εισαγωγή στο CSS Από: Λία Βέρου" class="news-block-img pull-right" src="/thumbs/24/4407351.jpg"> Εισαγωγή στο CSS Από: Λία Βέρου Τι είναι το CSS (Cascading Style Sheets); To CSS είναι μια απλή γλώσσα που μας βοηθάει να ορίσουμε με σαφήνεια και ιδιαίτερη ευελιξία τον τρόπο με τον οποίο θα εμφανίζονται </p> <a href="/4407351-Eisagogi-sto-css-apo-lia-veroy.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/30858238-Dialexi-4i-css-intermediate.html">Διάλεξη 4η CSS intermediate</a> </h3> <p> <img alt="Διάλεξη 4η CSS intermediate" title="Διάλεξη 4η CSS intermediate" class="news-block-img pull-right" src="/thumbs/53/30858238.jpg"> Διάλεξη 4η CSS intermediate Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e. c o. d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Κλάσεις & Ids Εμφώλευση & </p> <a href="/30858238-Dialexi-4i-css-intermediate.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/3603092-Iaheirisi-pliroforion-sto-iadiktyo.html">ιαχείριση Πληροφοριών στο ιαδίκτυο</a> </h3> <p> <img alt="ιαχείριση Πληροφοριών στο ιαδίκτυο" title="ιαχείριση Πληροφοριών στο ιαδίκτυο" class="news-block-img pull-right" src="/thumbs/24/3603092.jpg"> ιαχείριση Πληροφοριών στο ιαδίκτυο Εργαστήριο (Φυλλάδιο 7) ΤΕΙ Καβάλας - Σχολή ιοίκησης & Οικονοµίας Τµήµα ιαχείρισης Πληροφοριών ιδάσκων: Μαρδύρης Βασίλειος, ιπλ. Ηλ. Μηχανικός & Μηχ. Υπολογιστών, MSc </p> <a href="/3603092-Iaheirisi-pliroforion-sto-iadiktyo.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/9345353-Exetastea-uli-syllabus-ekdosi-1-5.html">Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5</a> </h3> <p> <img alt="Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5" title="Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5" class="news-block-img pull-right" src="/thumbs/26/9345353.jpg"> Εξεταστέα Ύλη (Syllabus) Έκδοση 1.5 Πνευματικά Δικαιώματα 2005 Ίδρυμα ECDL (ECDL Foundation www.ecdl.com) Όλα τα δικαιώματα είναι κατοχυρωμένα. Κανένα μέρος αυτού του εγγράφου δεν μπορεί να αναπαραχθεί </p> <a href="/9345353-Exetastea-uli-syllabus-ekdosi-1-5.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/119185-Eisagogi-sto-css-apo-mihailia-komvoyti-veroy.html">Εισαγωγή στο CSS Από: Μιχαήλια Κομβούτη Βέρου</a> </h3> <p> <img alt="Εισαγωγή στο CSS Από: Μιχαήλια Κομβούτη Βέρου" title="Εισαγωγή στο CSS Από: Μιχαήλια Κομβούτη Βέρου" class="news-block-img pull-right" src="/thumbs/17/119185.jpg"> Εισαγωγή στο CSS Από: Μιχαήλια Κομβούτη Βέρου Τι είναι το CSS (Cascading Style Sheets); To CSS είναι μια απλή γλώσσα που μας βοηθάει να ορίσουμε με σαφήνεια και ιδιαίτερη ευελιξία τον τρόπο με τον οποίο </p> <a href="/119185-Eisagogi-sto-css-apo-mihailia-komvoyti-veroy.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/45011553-Css-3-didaskontes-p-aggelatos-d-zindros-epimeleia-diafaneion-p-aggelatos-sholi-ilektrologon-mihanikon-kai-mihanikon-ypologiston.html">CSS 3. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών</a> </h3> <p> <img alt="CSS 3. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών" title="CSS 3. Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών" class="news-block-img pull-right" src="/thumbs/60/45011553.jpg"> CSS 3 Διδάσκοντες: Π. Αγγελάτος, Δ. Ζήνδρος Επιμέλεια διαφανειών: Π. Αγγελάτος Σχολή Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται σε άδειες χρήσης </p> <a href="/45011553-Css-3-didaskontes-p-aggelatos-d-zindros-epimeleia-diafaneion-p-aggelatos-sholi-ilektrologon-mihanikon-kai-mihanikon-ypologiston.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/6937673-Pinakes-perigrauuata-kai-skiasi.html">Πίνακες, περιγράµµατα και σκίαση</a> </h3> <p> <img alt="Πίνακες, περιγράµµατα και σκίαση" title="Πίνακες, περιγράµµατα και σκίαση" class="news-block-img pull-right" src="/thumbs/25/6937673.jpg"> Πίνακες, περιγράµµατα και σκίαση Οι πίνακες Οι πίνακες είναι ορθογώνια πλαίσια που χωρίζονται σε γραµµές και στήλες. Η τοµή µιας γραµµής µε µια στήλη προσδιορίζει ένα κελί. Τα στοιχεία, που παρουσιάζουµε, </p> <a href="/6937673-Pinakes-perigrauuata-kai-skiasi.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/37343923-Gnoriuia-ue-ti-microsoft-access.html">Γνωριµία µε τη Microsoft Access</a> </h3> <p> <img alt="Γνωριµία µε τη Microsoft Access" title="Γνωριµία µε τη Microsoft Access" class="news-block-img pull-right" src="/thumbs/55/37343923.jpg"> Γνωριµία µε τη Microsoft Access ηµιουργία νέας βάσης δεδοµένων Έναρξη - Προγράµµατα - Microsoft Access - ηµιουργία νέας βάσης δεδοµένων µε χρήση Κενής βάσης δεδοµένων - ΟΚ Επιλέγουµε Φάκελο και στο Όνοµα </p> <a href="/37343923-Gnoriuia-ue-ti-microsoft-access.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/9698235-Ergaleia-anaptyxis-efarmogon-internet-i.html">Εργαλεία ανάπτυξης εφαρμογών internet Ι</a> </h3> <p> <img alt="Εργαλεία ανάπτυξης εφαρμογών internet Ι" title="Εργαλεία ανάπτυξης εφαρμογών internet Ι" class="news-block-img pull-right" src="/thumbs/27/9698235.jpg"> IEK ΟΑΕΔ ΚΑΛΑΜΑΤΑΣ ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΟΦΟΡΙΚΗΣ Εργαλεία ανάπτυξης εφαρμογών internet Ι HTML Διδάσκουσα: Κανελλοπούλου Χριστίνα ΠΕ19 Πληροφορικής HTML (HyperText Markup Language) Η γλώσσα που χρησιμοποιείται </p> <a href="/9698235-Ergaleia-anaptyxis-efarmogon-internet-i.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/31636691-Epl-012-fylla-styl-ii.html">ΕΠΛ 012. Φύλλα Στυλ (ΙΙ)</a> </h3> <p> <img alt="ΕΠΛ 012. Φύλλα Στυλ (ΙΙ)" title="ΕΠΛ 012. Φύλλα Στυλ (ΙΙ)" class="news-block-img pull-right" src="/thumbs/53/31636691.jpg"> ΕΠΛ 012 Φύλλα Στυλ (ΙΙ) Τροποποίηση χρωµάτων Color: "όνοµα χρώµατος" rgb (rr,gg,bb) #RRGGBB RGB συνιστώσες όπου rr,gg,bb είναι ακέραιοι από το 0 255 H1 {color: rgb(255,0,0)} κόκκινες επικεφαλίδες background-colorcolor </p> <a href="/31636691-Epl-012-fylla-styl-ii.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/843213-Ergastirio-9-ti-prepei-na-ehete-oloklirosei-apo-to-proigoymeno-ergastirio-vevaiotheite-oti-ehete-oloklirosei-tis-proigoymenes-askiseis-odigies.html">Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. βεβαιωθείτε ότι έχετε ολοκληρώσει τις προηγούμενες ασκήσεις Οδηγίες</a> </h3> <p> <img alt="Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. βεβαιωθείτε ότι έχετε ολοκληρώσει τις προηγούμενες ασκήσεις Οδηγίες" title="Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. βεβαιωθείτε ότι έχετε ολοκληρώσει τις προηγούμενες ασκήσεις Οδηγίες" class="news-block-img pull-right" src="/thumbs/18/843213.jpg"> Εργαστήριο #9 Τι πρέπει να έχετε ολοκληρώσει από το προηγούμενο εργαστήριο. Το σημερινό εργαστήριο είναι ανεξάρτητο από τα προηγούμενα, επειδή όμως θα ζητηθεί να ανακυκλώσετε υλικό από εκείνα, βεβαιωθείτε </p> <a href="/843213-Ergastirio-9-ti-prepei-na-ehete-oloklirosei-apo-to-proigoymeno-ergastirio-vevaiotheite-oti-ehete-oloklirosei-tis-proigoymenes-askiseis-odigies.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/30748661-Se-ayto-to-mathima-tha-asholithoyme-me-ti-veltiosi-tis-emfanisis-enos-istotopoy-alla-kai-ton-eykolo-heirismo-olon-ton-allagon-tis-opoies-epithymoyme-na.html">Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να</a> </h3> <p> <img alt="Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να" title="Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να" class="news-block-img pull-right" src="/thumbs/52/30748661.jpg"> Σε αυτό το μάθημα θα ασχοληθούμε με τη βελτίωση της εμφάνισης ενός ιστοτόπου, αλλά και τον εύκολο χειρισμό όλων των αλλαγών τις οποίες επιθυμούμε να κάνουμε μέσω ενός εξωτερικού αρχείου.το αρχείο αυτό </p> <a href="/30748661-Se-ayto-to-mathima-tha-asholithoyme-me-ti-veltiosi-tis-emfanisis-enos-istotopoy-alla-kai-ton-eykolo-heirismo-olon-ton-allagon-tis-opoies-epithymoyme-na.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/31758098-1-apaitiseis-ergasias.html">1. Απαιτήσεις εργασίας</a> </h3> <p> <img alt="1. Απαιτήσεις εργασίας" title="1. Απαιτήσεις εργασίας" class="news-block-img pull-right" src="/thumbs/53/31758098.jpg"> ctxxxxx.html 1 η ΕΡΓΑΣΙΑ: ΑΝΑΠΤΥΞΗ ΔΙΑΔΙΚΤΥΑΚΟΥ ΤΟΠΟΥ (WEB SITE) Ημερομηνία Παράδοσης: Τρίτη 1 Δεκέμβρη 2009 (Η εργασία είναι ατομική!!) 1. Απαιτήσεις εργασίας Θα πρέπει να δημιουργήσετε το web site μιας </p> <a href="/31758098-1-apaitiseis-ergasias.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/36256359-I-lista-ol-ordered-list.html">Η λίστα <ol> (ordered list)</a> </h3> <p> <img alt="Η λίστα <ol> (ordered list)" title="Η λίστα <ol> (ordered list)" class="news-block-img pull-right" src="/thumbs/55/36256359.jpg"> Λίστες (lists) Σε πολλά έγγραφα απαιτείται η παρουσίαση ή η καταγραφή στοιχείων σε μορφή λίστας. Για παράδειγμα, μια λίστα από ονόματα ή μια λίστα από προϊόντα. Τα στοιχεία μιας λίστας μπορεί να είναι </p> <a href="/36256359-I-lista-ol-ordered-list.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/2372637-Giannena-syghroni-dimioyrgia-diaheirisi-giannena-syghroni-dimioyrgia.html">ΓΙΑΝΝΕΝΑ & ΣΥΓΧΡΟΝΗ ΔΗΜΙΟΥΡΓΙΑ ΔΙΑΧΕΙΡΙΣΗ ΓΙΑΝΝΕΝΑ & ΣΥΓΧΡΟΝΗ ΔΗΜΙΟΥΡΓΙΑ</a> </h3> <p> <img alt="ΓΙΑΝΝΕΝΑ & ΣΥΓΧΡΟΝΗ ΔΗΜΙΟΥΡΓΙΑ ΔΙΑΧΕΙΡΙΣΗ ΓΙΑΝΝΕΝΑ & ΣΥΓΧΡΟΝΗ ΔΗΜΙΟΥΡΓΙΑ" title="ΓΙΑΝΝΕΝΑ & ΣΥΓΧΡΟΝΗ ΔΗΜΙΟΥΡΓΙΑ ΔΙΑΧΕΙΡΙΣΗ ΓΙΑΝΝΕΝΑ & ΣΥΓΧΡΟΝΗ ΔΗΜΙΟΥΡΓΙΑ" class="news-block-img pull-right" src="/thumbs/24/2372637.jpg"> ΓΙΑΝΝΕΝΑ & ΣΥΓΧΡΟΝΗ ΔΗΜΙΟΥΡΓΙΑ ΔΙΑΧΕΙΡΙΣΗ Περιγραφή και επεξήγηση της χρήσης του χώρου διαχείρισης της ιστοσελίδας για τους καλλιτέχνες 1 Περιεχόμενα Είσοδος στο χώρο διαχείρισης...3 Επεξεργασία της σελίδας </p> <a href="/2372637-Giannena-syghroni-dimioyrgia-diaheirisi-giannena-syghroni-dimioyrgia.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/46015700-Iauorfosi-selidas-proepiskopisi-ektyposi.html">ιαµόρφωση σελίδας Προεπισκόπηση Εκτύπωση</a> </h3> <p> <img alt="ιαµόρφωση σελίδας Προεπισκόπηση Εκτύπωση" title="ιαµόρφωση σελίδας Προεπισκόπηση Εκτύπωση" class="news-block-img pull-right" src="/thumbs/61/46015700.jpg"> ιαµόρφωση σελίδας Προεπισκόπηση Εκτύπωση Η µορφοποίηση των σελίδων ενός εγγράφου Πριν ξεκινήσετε να δηµιουργείτε ένα έγγραφο, είναι χρήσιµο να έχετε σχεδιάσει ή να έχετε κατά νου πώς περίπου θέλετε να </p> <a href="/46015700-Iauorfosi-selidas-proepiskopisi-ektyposi.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/34670596-Tec410-anaptyxi-diktyakon-topon-d-examino.html">TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)</a> </h3> <p> <img alt="TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)" title="TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)" class="news-block-img pull-right" src="/thumbs/54/34670596.jpg"> TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί </p> <a href="/34670596-Tec410-anaptyxi-diktyakon-topon-d-examino.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/33625024-Diuioyrgontas-uia-paroysiasi-ue-to-prezi.html">Δηµιουργώντας µία παρουσίαση µε το Prezi</a> </h3> <p> <img alt="Δηµιουργώντας µία παρουσίαση µε το Prezi" title="Δηµιουργώντας µία παρουσίαση µε το Prezi" class="news-block-img pull-right" src="/thumbs/54/33625024.jpg"> Τάξη : Α ή B Λυκείου Ενότητα : Web 2.0 - Prezi Δηµιουργώντας µία παρουσίαση µε το Prezi Το Prezi είναι ένα site το οποίο σου δίνει την δυνατότητα να δηµιουργήσεις και να µοιραστείς µη γραµµικές παρουσιάσεις. </p> <a href="/33625024-Diuioyrgontas-uia-paroysiasi-ue-to-prezi.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/842968-Kataskeyi-istoselidon-frontpage.html">Κατασκευή ιστοσελίδων (FrontPage)</a> </h3> <p> <img alt="Κατασκευή ιστοσελίδων (FrontPage)" title="Κατασκευή ιστοσελίδων (FrontPage)" class="news-block-img pull-right" src="/thumbs/18/842968.jpg"> Κατασκευή ιστοσελίδων (FrontPage) Γραµµή τίτλου Γραµµή µενού Γραµµή εργαλείων Μορφοποίηση Εικόνα Πίνακες και περιγράµµατα Όταν ανοίγουµε το FrontPage, ανοίγει αυτόµατα µία νέα σελίδα. (Στο FrontPage τα </p> <a href="/842968-Kataskeyi-istoselidon-frontpage.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/744495-Ptyhiaki-ergasia-shediasmos-kai-ylopoiisi-vasis-dedomenon-odigon-epaggelmaton-eidikotiton-tei-ar-mitrooy-04-2557.html">ΠΤΥΧΙΑΚΗ ΕΡΓΑΣΙΑ. Σχεδιασμός και υλοποίηση βάσης δεδομένων οδηγών επαγγελμάτων / ειδικοτήτων ΤΕΙ. Αρ. Μητρώου: 04/2557</a> </h3> <p> <img alt="ΠΤΥΧΙΑΚΗ ΕΡΓΑΣΙΑ. Σχεδιασμός και υλοποίηση βάσης δεδομένων οδηγών επαγγελμάτων / ειδικοτήτων ΤΕΙ. Αρ. Μητρώου: 04/2557" title="ΠΤΥΧΙΑΚΗ ΕΡΓΑΣΙΑ. Σχεδιασμός και υλοποίηση βάσης δεδομένων οδηγών επαγγελμάτων / ειδικοτήτων ΤΕΙ. Αρ. Μητρώου: 04/2557" class="news-block-img pull-right" src="/thumbs/18/744495.jpg"> ΠΤΥΧΙΑΚΗ ΕΡΓΑΣΙΑ Σχεδιασμός και υλοποίηση βάσης δεδομένων οδηγών επαγγελμάτων / ειδικοτήτων ΤΕΙ Της φοιτήτριας Τσαντοπούλου Βαΐα- Αικατερίνη Επιβλέπων καθηγητής Βασίλης Κώστογλου Αρ. Μητρώου: 04/2557 Θεσσαλονίκη </p> <a href="/744495-Ptyhiaki-ergasia-shediasmos-kai-ylopoiisi-vasis-dedomenon-odigon-epaggelmaton-eidikotiton-tei-ar-mitrooy-04-2557.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/38423821-Ekpaideytika-perivallonta-diadiktyoy.html">Εκπαιδευτικά Περιβάλλοντα Διαδικτύου</a> </h3> <p> <img alt="Εκπαιδευτικά Περιβάλλοντα Διαδικτύου" title="Εκπαιδευτικά Περιβάλλοντα Διαδικτύου" class="news-block-img pull-right" src="/thumbs/56/38423821.jpg"> ΑΡΙΣΤΟΤΕΛΕΙΟ ΠΑΝΕΠΙΣΤΗΜΙΟ ΘΕΣΣΑΛΟΝΙΚΗΣ ΑΝΟΙΚΤΑ ΑΚΑΔΗΜΑΪΚΑ ΜΑΘΗΜΑΤΑ Εκπαιδευτικά Περιβάλλοντα Διαδικτύου Ενότητα 6: CSS Θρασύβουλος-Κωνσταντίνος Τσιάτσος Άδειες Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται </p> <a href="/38423821-Ekpaideytika-perivallonta-diadiktyoy.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/36612781-1-klik-stin-kartela-insert-2-tables-3-klik-table-4-syroyme-to-deikti-toy-pontikioy-kai-epilegoyme-ton-epithymito-arithmo-grammon-kai-stilon.html">1. Κλικ στην καρτέλα Insert 2. Tables 3. Κλικ Table 4. Σύρουμε το δείκτη του ποντικιού και επιλέγουμε τον επιθυμητό αριθμό γραμμών και στηλών</a> </h3> <p> <img alt="1. Κλικ στην καρτέλα Insert 2. Tables 3. Κλικ Table 4. Σύρουμε το δείκτη του ποντικιού και επιλέγουμε τον επιθυμητό αριθμό γραμμών και στηλών" title="1. Κλικ στην καρτέλα Insert 2. Tables 3. Κλικ Table 4. Σύρουμε το δείκτη του ποντικιού και επιλέγουμε τον επιθυμητό αριθμό γραμμών και στηλών" class="news-block-img pull-right" src="/thumbs/55/36612781.jpg"> ΜΑΘΗΜΑ 4 ΣΤΟΧΟΙ: 1. Προσθήκη Πίνακα (Table) 2. Εισαγωγή Και Μετακίνηση Κειμένου Σε Πίνακα 3. Εισαγωγή Στηλών Και Γραμμών Σε Πίνακα 4. Διαγραφή Στηλών Και Γραμμών Σε Πίνακα 5. Αλλαγή Πλάτους Στηλών Και </p> <a href="/36612781-1-klik-stin-kartela-insert-2-tables-3-klik-table-4-syroyme-to-deikti-toy-pontikioy-kai-epilegoyme-ton-epithymito-arithmo-grammon-kai-stilon.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> <div class="news-blocks"> <h3> <a href="/9092975-Spoydes-cad-pliroforikis-oikonomias-dioikisis-kai-d-t-p-me-systima-didaskalias-facetoface.html">Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface</a> </h3> <p> <img alt="Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface" title="Σπουδές CAD, Πληροφορικής, Οικονομίας, Διοίκησης και D.T.P. με Σύστημα διδασκαλίας facetoface" class="news-block-img pull-right" src="/thumbs/26/9092975.jpg"> Copyright 2009-2012 -SYSTEM- All rights reserved 2/200 ΠΕΡΙΕΧΟΜΕΝΑ Μάθημα 1: Εισαγωγή Μάθημα 2: Κειμενογράφοι Text Editors Μάθημα 3: Εγκατάσταση Text Editor Μάθημα 4: Ιστορική Αναδρομή HTML Μάθημα 5: Σύνολο </p> <a href="/9092975-Spoydes-cad-pliroforikis-oikonomias-dioikisis-kai-d-t-p-me-systima-didaskalias-facetoface.html" class="news-block-btn"> Διαβάστε περισσότερα <i class="m-icon-swapright m-icon-black"></i> </a> </div> </div> <!-- END RIGHT SIDEBAR --> </div> </div> </div> <!-- END CONTENT --> </div> <!-- END SIDEBAR & CONTENT --> </div> </div> <!-- BEGIN FOOTER --> <div class="footer"> <div class="container"> <div class="row"> <!-- BEGIN COPYRIGHT --> <div class="col-md-10 col-sm-10 padding-top-10"> 2017 © DocPlayer.gr <a href="/support/privacy-policy/">Πολιτική Απορρήτου</a> | <a href="/support/terms-of-service/">Όροι Χρήσης</a> | <a href="/support/feedback/">Σχόλια</a> </div> <!-- END COPYRIGHT --> <!-- BEGIN PAYMENTS --> <div class="col-md-6 col-sm-6"> </div> <!-- END PAYMENTS --> </div> </div> </div> <!-- END FOOTER --> <!--[if lt IE 9]> <script src="/static/theme/global/plugins/respond.min.js"></script> <![endif]--> <script src="/static/js/dedb/total.js" type="text/javascript"></script> <div style="display: none;"> <script> var page_data = {"domain_id":30,"design_id":0,"page_id":0}; (function(){ var img = new Image(); var pixel_image_src = '/pix/'+Math.random()+'/report/pixel.gif?type=pageview&domain_id=30&page_id=0&design_id=0&l='+encodeURIComponent(navigator.language)+'&p='+encodeURIComponent(navigator.platform)+'&url='+encodeURIComponent(document.location); document.write('<img src="'+pixel_image_src+'"> '); }()); </script> </div> </body> </html>