MarkSheet: CSS & HTML σε απλά μαθήματα φροντιστηρίου.

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTVRi8IDcUehdUOzAm5nhShMHjXTH6tVojUCnYOle3sBQYdzF0ynyaNCu30isxQNz1Uz-bs63zLVWccopVbDghXGua38m0yhEMaFP5tX2VlC4R31197rL-S0oCZs_WlILKyM5mIiGHcfs/s1600/MarkSheet.jpg" imageanchor="1"><img border="0" height="379" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTVRi8IDcUehdUOzAm5nhShMHjXTH6tVojUCnYOle3sBQYdzF0ynyaNCu30isxQNz1Uz-bs63zLVWccopVbDghXGua38m0yhEMaFP5tX2VlC4R31197rL-S0oCZs_WlILKyM5mIiGHcfs/s640/MarkSheet.jpg" width="640" /></a></div><center>4 Ενότητες 9 κεφάλαια και 50 Μαθήματα για Css & Html. <br /> <br /> Εμείς σας προτείνουμε! Εσείς δεν έχετε παρά να την επισκεφθείτε...!!!<br /> <br /> <a href="http://marksheet.io/" target="_blank"><img oncontextmenu="return false" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFNk0sXwGZKL8A1nMOmecwbl7d1hDy9xgoMwdhIm5JP2_7t14N27eG8BY1rNrWkIzmTWALZpW0SWo9Ss6apJf7XeVtk3mXnhLfTmF79CkEVFAlOkRf6jOYTNYVwHuCJEfU0CtCTiCdeWc/s1600/TryItLE.png"></a></center>

CSS Tutorials HTML Tutorials Online Tools MarkSheet: CSS & HTML σε απλά μαθήματα φροντιστηρίου.

4 Ενότητες 9 κεφάλαια και 50 Μαθήματα για Css & Html. Εμείς σας προτείνουμε! Εσείς δεν έχετε παρά να την επισκεφθείτε...!!!

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

Μια τρισδιάστατη απεικόνιση του ηλιακού συστήματος φτιαγμένη με CSS από τον Julian Garnier (Tutorial - Code).

<div class="separator" style="clear: both; text-align: center;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb1GJVPO6EpFraGR4OrtpmmAXhWfh0ZSS3GGaFHZevB8JdZA9s_QrysTXnZbBb0Bdav-d7Q4HJB-TXgehztvQ2W42QV-qNjZcc-coAvNbTE0bFfi3Y5S5rtpj1wJ1PFd4cUvop7HzMelE/s1600/Animated_solar_system_made_of_CSS.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhb1GJVPO6EpFraGR4OrtpmmAXhWfh0ZSS3GGaFHZevB8JdZA9s_QrysTXnZbBb0Bdav-d7Q4HJB-TXgehztvQ2W42QV-qNjZcc-coAvNbTE0bFfi3Y5S5rtpj1wJ1PFd4cUvop7HzMelE/s640/Animated_solar_system_made_of_CSS.jpg" /></a></div>Δεν θα το πιστέψετε αλλά το "πλανητικό" μπαλέτο γίνεται <b>χωρίς</b> τη χρήση plugins! <br /> Το animation είναι εξαιρετικά ομαλή - εφ 'όσον είστε χρησιμοποιώντας ένα ενημερωμένο πρόγραμμα περιήγησης, ότι είναι <br /> <br /> Δεν χρειάζεται να είναι κανείς ειδικός για σχεδιασμό ιστοσελίδων για να εκτιμήσει αυτό το κινούμενο μοντέλο του ηλιακού συστήματος, άλλο ένα από τα καλύτερα παραδείγματα CSS έχουμε βρεθεί. <br /> <br /> Δημιουργήθηκε από τον <b>Julian Garnier</b> και μας δείχνει τους οκτώ πλανήτες σε τροχιά γύρω από τον ήλιο σε δισδιάστατη και τρισδιάστατη απεικόνιση <i>(2D 3D)</i> με παραμέτρους στην δεξιά πλευρά της σελίδας, την ταχύτητα, το μέγεθος και την απόσταση από τον ήλιο, επιλέγοντας τον καθένα ξεχωριστά.<br /> <br /> Ο παρακάτω κώδικας εμφανίζει όλο το HTML της σελίδας της απεικόνισης... και ότι χρειάστηκε για να φτιαχτεί. <br /> <br /> <center><p data-height="400" data-theme-id="dark" data-slug-hash="idhuG" data-default-tab="result" data-user="juliangarnier" data-embed-version="2" class="codepen">See the Pen <a href="http://codepen.io/juliangarnier/pen/idhuG/">CSS 3D Solar System</a> by Julian Garnier (<a href="http://codepen.io/juliangarnier">@juliangarnier</a>) on <a href="http://codepen.io">CodePen</a>.</p><script async src="//assets.codepen.io/assets/embed/ei.js"></script></center><br /> <br />

CSS Tutorials HTML Tutorials Julian Garnier Μια τρισδιάστατη απεικόνιση του ηλιακού συστήματος φτιαγμένη με CSS από τον Julian Garnier (Tutorial - Code).

Δεν θα το πιστέψετε αλλά το "πλανητικό" μπαλέτο γίνεται χωρίς τη χρήση plugins! Το animation είναι εξαιρετικά ομαλή - εφ...

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

Introducing HTML5 (2nd Edition) 2012.

</br><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVtBttQHI3rXIjpG1y_E3ih2sVtMtTfHVTRG2IY9cUbnyRxMI92NZjGcjmSRE8gkAWtlVb0sEw8jMiOK2u81DTnOogQLKZGtS2qh944s-5GBY6bRar0Xlc8aoK2hJglcvot9x2rwYY_S0/s1600/Introducing+HTML+5+2nd+Edition+2012.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5740608023752541778" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVtBttQHI3rXIjpG1y_E3ih2sVtMtTfHVTRG2IY9cUbnyRxMI92NZjGcjmSRE8gkAWtlVb0sEw8jMiOK2u81DTnOogQLKZGtS2qh944s-5GBY6bRar0Xlc8aoK2hJglcvot9x2rwYY_S0/s400/Introducing+HTML+5+2nd+Edition+2012.png" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 376px; height: 400px;" /></a>HTML5 continues to evolve, browsers are implementating at break-neck speed and HTML5 web sites spring up like flowers after rain. More than ever, you need to get acquainted with the powerful new possibilities in web and application design. That's why we've crafted a second edition of this book to help you stay on top of current developments.This book shows you how to start adapting the language now to realize its benefits on today's browsers. It concentrates on the practical the problems HTML5 can solve for you right away. By following the book's hands-on<br /> HTML5 code examples you'll learn about:<br /> - new semantics and structures to help your site become richer and more accessible<br /> - applying the most important javascript APIs that are already implemented<br /> - using and controlling native multimedia<br /> - how to build more intelligent web forms<br /> - implementing new storage options and web databases, including both WebSQL and IndexedDB<br /> - how geolocation works with HTML5 in both web and mobile applications<br /> And this new edition adds:<br /> - even more detail on canvas, geolocation and offline storage options<br /> - a peek around the corner for audio and video's new element, subtitling formats, in-browser web conference<br /> - browser history controls to make applications more usable and bookmarkable<br /> - ways to use HTML5 now in older browsers<br /> Language: English | Publisher: New Riders Press | ISBN: 0321784421 | 2011 | PDF | 312 pages | 8,4 Μb<br /> <center><a href="http://www.mediafire.com/file/v0r6t78brru1kc5/Introducing_HTML5_2nd_Edition_2012_by_Iva.rar" target="_blank"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizCZ3ozU7dbvtxr9e_KQtn3lz-xz_v2ZGqGFw0RRdMI4biH7rq2nwuj9gj0jT_VQuf25E-lV1NRcPErnvePTuvc2SyAq-rUe9nlGqcqhJV8TJtkOgBlBL37ZBs_CNsIzQ1vPsMWF3BYUI/s1600/DownloadLE.png" /></a></center>

Books HTML Tutorials Introducing HTML5 (2nd Edition) 2012.

HTML5 continues to evolve, browsers are implementating at break-neck speed and HTML5 web sites spring up like flowers after rain. More than ...

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

Pop-Up Image Viewer.

</br><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4hV2nVl7dlafVW2dy5h7ctHz3x5_dCaoEq-FJ6eL0t8DHNKHA3NuZ0YIfeWi1IypH97VtA1waZndo8rdDohOkBiilM465oN-5QGMMMlFnM940wg9DCJ0IerEE7baf-7vXF4m87uBQ4o8/s1600/Pop-Up+Image+Viewer.jpg"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5712741971735504130" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4hV2nVl7dlafVW2dy5h7ctHz3x5_dCaoEq-FJ6eL0t8DHNKHA3NuZ0YIfeWi1IypH97VtA1waZndo8rdDohOkBiilM465oN-5QGMMMlFnM940wg9DCJ0IerEE7baf-7vXF4m87uBQ4o8/s400/Pop-Up+Image+Viewer.jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 240px;" /></a><br /><h3 class="post-title entry-title"><span style="color:#99A3FF;">Δημιουργήστε όμορφα pop-up παράθυρα σε εικόνες ή συνδέσμους με χρήση css & html.<br />Ένα πολύ πρόχειρο παράδειγμα είναι το παρακάτω, που μπορείτε να χρησιμοποιήσετε ως css.<br />Από κει & πέρα μπορείτε να του προσθέσετε πολλά π.χ. εφέ αδιαφάνειας, αλλάγη στην εμφάνιση του περιγράμματος της εικόνας, σκιές....κτλ.<br /><br /><center><img oncontextmenu="return false" src="http://i41.tinypic.com/t0rt5x.jpg" /></center><br /><br /><div class="code"><div class="code_content"><br /><!--PopUp-Image-Viewer-STARTS-Widget-by-http://loneeagle110.blogspot.com/--><br /><style type=”text/css”><br />.imvle{<br />position:relative;<br />z-index:0;<br />}<br />.imvle:hover{<br />background-color:transparent;<br />z-index:50;<br />}<br />.imvle span{ <br />position:absolute;<br />background-color:fff;<br />padding:5px;<br />left:-1000px;<br />border:1px solid #111;<br />visibility:hidden;<br />color:#000;<br />text-decoration:none;<br />}<br />.imvle span img{ <br />border-width:0px;<br />padding:2px;<br />}<br />.imvle:hover span{ <br />visibility:visible;<br />top:0;<br />left:60px; <br />}<br /></style><br /><!--PopUp-Image-Viewer-STOPS-Widget-by-http://loneeagle110.blogspot.com/--><br /></div></div><br /><br />Και ο Html κωδικας του, είναι ο παρακάτω...<br /><br />Για κείμενο:<br /><br /><div class="code"><div class="code_content"><br /><!--PopUp-Image-Viewer-STARTS-Widget-by-http://loneeagle110.blogspot.com/--><br /><a class="imvle" href="..."><img src="..." width="80px" height="50px" border="0" /><span><img src="...." /></span></a><br /><!--PopUp-Image-Viewer-STOPS-Widget-by-http://loneeagle110.blogspot.com/--><br /></div></div><br /><br />Για εικόνα:<br /><br /><div class="code"><div class="code_content"><br /><!--PopUp-Image-Viewer-STARTS-Widget-by-http://loneeagle110.blogspot.com/--><br /><a class="imvle" href="...">....το κειμενο σας....<span><img src="...." /></span></a><br /><!--PopUp-Image-Viewer-STOPS-Widget-by-http://loneeagle110.blogspot.com/--><br /></div></div><br /></span></h3><br /><br /><marquee behavior="alternate" direction="left" scrollamount="3"><strong><em><span style="color:#cc0000;"><h2>ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!</h2></span></em></strong></marquee>

Blogger Help Blogger Tutorials CSS Tutorials HTML Tutorials Image Effects Pop-Up Image Viewer.

Δημιουργήστε όμορφα pop-up παράθυρα σε εικόνες ή συνδέσμους με χρήση css & html. Ένα πολύ πρόχειρο παράδειγμα είναι το παρακάτω, που μπο...

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

Font-family (HTML) - Οικογένειες γραμματοσειρών.

</br><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbKd0Xk1quAhyphenhyphen6MDPyDTMSlNeeiIlxYypr18Iwfjvrvah5E4Uqt1Fn7o6OJYSYXwOHjpUQKxw94jRVhh2_W8KfXEEhrRB_8TS-OnVPqY_zPBrjZHf50nKlY0CTQOgn3eFo_QghZwMHeho/s1600/Font-family+%2528HTML%2529.png"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5710130055371780354" oncontextmenu="return false" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbKd0Xk1quAhyphenhyphen6MDPyDTMSlNeeiIlxYypr18Iwfjvrvah5E4Uqt1Fn7o6OJYSYXwOHjpUQKxw94jRVhh2_W8KfXEEhrRB_8TS-OnVPqY_zPBrjZHf50nKlY0CTQOgn3eFo_QghZwMHeho/s400/Font-family+%2528HTML%2529.png" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 214px;" /></a><br /><h3 class="post-title entry-title"><span style="color:#99A3FF;"><span style="float:left;font-family:'Apple Chancery',cursive;font-size:70px;line-height:50px;margin:5px 5px 0px 0px; position:relative;text-shadow:2px 2px 2px rgb(153, 102, 255);">Σ</span>ήμερα θα σας παρουσιάσω έναν κατάλογο από ομάδες γραμματοσειρών.<br />Γραμματοσειρές που αναγνωρίζονται από όλους τους browsers χωρίς κανένα πρόβλημα.<br /><br />Μια πολύ καλή τακτική, για να ορίσετε την δική σας γραμματοσειρά στην ιστοσελίδα σας, είναι να χρησιμοποιείτε τα font stacks, για να υπάρχει δεύτερη επιλογή σε περίπτωση που ο browser του αναγνώστη σας δεν υποστηρίζει το @font-face που έχετε επιλέξει.<br /><br />Προτεινόμενες λύσεις, από τις πιο βασικές οικογένειες γραμματοσειρών!<br /><br />font-family: Arial, Helvetica, sans-serif;<br />font-family: 'Arial Black', Gadget, sans-serif;<br />font-family: 'Bookman Old Style', serif;<br />font-family: 'Comic Sans MS', cursive;<br />font-family: Courier, monospace;<br />font-family: 'Courier New', Courier, monospace;<br />font-family: Garamond, serif;<br />font-family: Georgia, serif;<br />font-family: Impact, Charcoal, sans-serif;<br />font-family: 'Lucida Console', Monaco, monospace;<br />font-family: 'Lucida Sans Unicode', 'Lucida Grande', sans-serif;<br />font-family: 'MS Sans Serif', Geneva, sans-serif;<br />font-family: 'MS Serif', 'New York', sans-serif;<br />font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif;<br />font-family: Symbol, sans-serif;<br />font-family: Tahoma, Geneva, sans-serif;<br />font-family: 'Times New Roman', Times, serif;<br />font-family: 'Trebuchet MS', Helvetica, sans-serif;<br />font-family: Verdana, Geneva, sans-serif;<br />font-family: Webdings, sans-serif;<br />font-family: Wingdings, 'Zapf Dingbats', sans-serif;<br /><br />Ενημερωτικά να σας πω πως, κάθε γραμματοσειρά ανήκει σε μία (και μόνο μία) από τις τρεις βασικές οικογένειες γραμματοσειρών (font families). <br /><br />* roman που χρησιμοποιείται κυρίως για εκτύπωση, <br />* sans-serif που χρησιμοποιείται κυρίως για εμφάνιση σε οθόνη <br />* type-writer (ή mono-space) που χρησιμοποιείται κυρίως σε προγραμματιστικές εφαρμογές.<br /><br />Πιστεύω να σας φανεί αρκετά χρήσιμη αυτή η ανάρτηση!<br /></span></h3>

Blogger Help Blogger Tutorials HTML Tutorials Font-family (HTML) - Οικογένειες γραμματοσειρών.

Σ ήμερα θα σας παρουσιάσω έναν κατάλογο από ομάδες γραμματοσειρών. Γραμματοσειρές που αναγνωρίζονται από όλους τους browsers χωρίς κανένα πρ...

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

Valentine's heart with css (2 styles) by LoneEagle.

</br><br /> <a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7oacuMLLd02pCWo8yFEJ0mC0TbBUqdN6HktYnaKQ1QTajkNRef5pAfbbcdRQm2zo4eeuO5-FX8YyPU_z0OfQl9gHZoC6oy-DnAWMua3aRHFAGlzZLVlVc9es1cGGoVp5F0JUxKApch8Q/s1600/Valentine%2527s+heart+with+css+%25282+styles%2529..png"><img alt="Valentine's heart with css (2 styles) by LoneEagle" border="0" id="BLOGGER_PHOTO_ID_5708345561592840802" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7oacuMLLd02pCWo8yFEJ0mC0TbBUqdN6HktYnaKQ1QTajkNRef5pAfbbcdRQm2zo4eeuO5-FX8YyPU_z0OfQl9gHZoC6oy-DnAWMua3aRHFAGlzZLVlVc9es1cGGoVp5F0JUxKApch8Q/s400/Valentine%2527s+heart+with+css+%25282+styles%2529..png" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 239px;" /></a>Δηλώστε την αγάπη σας & στολίστε το ιστολόγιό σας με μια καρδιά, με χρήση css & html.<br /> Ακολουθήστε τα παρακάτω βήματα για να εγκαταστήσετε αυτό το υπέροχο gadget.<br /> <center><img oncontextmenu="return false" src="http://i41.tinypic.com/t0rt5x.jpg" /></center>Αφού κάνετε σύνδεση στον λογαριαμό σας στον blogger θα πάτε από τον Πίνακα ελέγχου σας στην σελίδα της Σχεδίασης.<br /> Πίνακας Ελέγχου --> Σχεδίαση --> Στοιχεία Σελίδας<br /> <center><img oncontextmenu="return false" src="http://i52.tinypic.com/288ca9y.jpg" width="500"></center>Εκεί στην πλαινή σας στήλη πάνω-πάνω θα δείτε το Προσθήκη gadget, πατήστε το & μέσα από τη λίστα κοιτάξτε να βρείτε το HTML/JavaScript <br /> <center><img oncontextmenu="return false" src="http://i56.tinypic.com/24cegdl.jpg"></center>θα το ανοίξετε & θα ρίξετε έναν από τους παρακάτω κώδικες.<br /> <span style="color:#0D00FC;">Σχέδιο 1ο:<br /> Με χρήση χρώματος για φόντο.</span><br /> <br /> <div class="code"><div class="code_content"><!--Valentine's-heart-Widget-STARTS-Widget-http://loneeagle110.blogspot.com/--><br /> <center><style type="text/css"><br /> .valentinesheartle{<br /> display:block; <br /> height:234px; <br /> width:258px; <br /> margin:0 0 0 0; <br /> padding:0 0 0 0; <br /> position:relative}<br /> .valentinesheartle-left-half{<br /> display:block; <br /> width:150px; <br /> height:225px; <br /> background-color:<span style="color:lime;"><b>#FC0D00;</b></span> // Κόκκινο χρώμα<br /> -moz-border-radius-topleft:100px; <br /> -moz-border-radius-topright:100px; <br /> -webkit-border-radius-topleft:100px; <br /> -webkit-border-radius-topright:100px; <br /> border-top-left-radius:100px; <br /> border-top-right-radius:100px; <br /> -moz-transform:rotate(-45deg); <br /> -webkit-transform:rotate(-45deg); <br /> -o-transform:rotate(-45deg); <br /> transform:rotate(-45deg); <br /> position:absolute; <br /> top:-11px; <br /> left:27px}<br /> .valentinesheartle-right-half{<br /> display:block; <br /> width:150px; <br /> height:225px; <br /> background-color:<span style="color:lime;"><b>#FC0D00;</b></span> // Κόκκινο χρώμα<br /> -moz-border-radius-topleft:100px; <br /> -moz-border-radius-topright:100px; <br /> -webkit-border-radius-topleft:100px; <br /> -webkit-border-radius-topright:100px; <br /> border-top-left-radius:100px; <br /> border-top-right-radius:100px; <br /> -moz-transform:rotate(45deg); <br /> -webkit-transform:rotate(45deg); <br /> -o-transform:rotate(45deg); <br /> transform:rotate(45deg); <br /> position:absolute; <br /> top:-11px; <br /> right:27px}<br /> </style><br /> <div class="valentinesheartle"><br /> <div class="valentinesheartle-left-half"></div><br /> <div class="valentinesheartle-right-half"></div><br /> </div></center><br /> <!--Valentine's-heart-Widget-STOPS-Widget-http://loneeagle110.blogspot.com/--><br /> </div></div><br /> <span style="color:#0D00FC;">Σχέδιο 2ο:<br /> Με χρηση εικόνας για φόντο.</span><br /> Φυσικά μπορείτε να χρησιμοποιήσετε & εικόνες animated gifs όπως αυτή που σας προσφέρω στον παρακάτω κώδικα.<br /> <div class="code"><div class="code_content"><!--Valentine's-heart-Widget-STARTS-Widget-http://loneeagle110.blogspot.com/--><br /> <center><style type="text/css"><br /> .valentinesheartle{<br /> display:block; <br /> height:234px; <br /> width:258px; <br /> margin:0 0 0 0; <br /> padding:0 0 0 0; <br /> position:relative}<br /> .valentinesheartle-left-half{<br /> display:block; <br /> width:150px; <br /> height:225px; <br /> background: url("http://i987.photobucket.com/albums/ae359/LoneEagle110/WebEllements/colorhearts.gif"); // εικόνα<br /> -moz-border-radius-topleft:100px; <br /> -moz-border-radius-topright:100px; <br /> -webkit-border-radius-topleft:100px; <br /> -webkit-border-radius-topright:100px; <br /> border-top-left-radius:100px; <br /> border-top-right-radius:100px; <br /> -moz-transform:rotate(-45deg); <br /> -webkit-transform:rotate(-45deg); <br /> -o-transform:rotate(-45deg); <br /> transform:rotate(-45deg); <br /> position:absolute; <br /> top:-11px; <br /> left:27px}<br /> .valentinesheartle-right-half{<br /> display:block; <br /> width:150px; <br /> height:225px; <br /> background: url("http://i987.photobucket.com/albums/ae359/LoneEagle110/WebEllements/colorhearts.gif");// εικόνα<br /> -moz-border-radius-topleft:100px; <br /> -moz-border-radius-topright:100px; <br /> -webkit-border-radius-topleft:100px; <br /> -webkit-border-radius-topright:100px; <br /> border-top-left-radius:100px; <br /> border-top-right-radius:100px; <br /> -moz-transform:rotate(45deg); <br /> -webkit-transform:rotate(45deg); <br /> -o-transform:rotate(45deg); <br /> transform:rotate(45deg); <br /> position:absolute; <br /> top:-11px; <br /> right:27px}<br /> </style><br /> <div class="valentinesheartle"><br /> <div class="valentinesheartle-left-half"></div><br /> <div class="valentinesheartle-right-half"></div><br /> </div></center><br /> <!--Valentine's-heart-Widget-STOPS-Widget-http://loneeagle110.blogspot.com/--><br /> </div></div>Τέλος, πατήστε ΑΠΟΘΗΚΕΥΣΗ. <br /> Μέσα από τα "Στοιχεία Σελίδας" σύρτε το gadget στο σημείο που θέλετε να εμφανίζεται.<br /> Και κάντε Ανανέωση την σελίδα σας. <br /> <marquee behavior="alternate" direction="left" scrollamount="3"><strong><em><span style="color:#cc0000;"><h2>Καλή Επιτυχία!!!!!</h2></span></em></strong></marquee>

Blogger Help Blogger Tutorials CSS Tutorials HTML Tutorials Valentine Stuff Valentine's heart with css (2 styles) by LoneEagle.

Δηλώστε την αγάπη σας & στολίστε το ιστολόγιό σας με μια καρδιά, με χρήση css & html. Ακολουθήστε τα παρακάτω βήματα για να εγκατα...

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

Χρησιμοποιήστε την εντολή Marque για να δώσετε εφέ στα κείμενα σας.

</br> <br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_mCY7csDYqHj-DfG24Zoq7mirhmYckcN4cQwEdJ8afAbMhgP6V7lJmHjo6gtgk5uRPHg46N-YTg5muC9u6-4ccRNDNSTqZyaBQxxSihtJc21lpgsLHF4C-ANZQtD7bNT3mdPARlJcnaY/s1600/Html+Tutorial.png" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5475261659613973042" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_mCY7csDYqHj-DfG24Zoq7mirhmYckcN4cQwEdJ8afAbMhgP6V7lJmHjo6gtgk5uRPHg46N-YTg5muC9u6-4ccRNDNSTqZyaBQxxSihtJc21lpgsLHF4C-ANZQtD7bNT3mdPARlJcnaY/s400/Html+Tutorial.png" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 400px; height: 209px;" /></a> <br /> <br />Μια εντολή ( MARQUEE ) που μπορεί να δώσει κίνηση σε κείμενο ή φωτογραφία. Μπορείτε να έχετε εντυπωσιακά αποτελέσματα χρησιμοποιώντας την. Εδώ θα σας παρουσιάσουμε κάποια από αυτά κι από κει & πέρα μπορείτε να κάνετε άπειρους συνδυασμούς. <br /> <br />Δείτε τα & κάντε τους συνδιασμούς σας. <br /> <br /><b>Right to Left</b><br /> <br /><marquee direction="left">Right to Left</marquee><br /> <br /><br /> <br /><br /> <br /><input class="textbox" readonly="readonly" style="width: 580px;" type="text" value=" <marquee direction="left">.....your text....</marquee> " /><br /> <br /><br /> <br /><hr noshade="noshade" /><br /> <br /><b>Left to Right</b><br /> <br /><marquee direction="right">Left to Right</marquee><br /> <br /><br /> <br /><input class="textbox" readonly="readonly" style="width: 580px;" type="text" value=" <marquee direction="right">.....your text....</marquee> " /><br /> <br /><br /> <br /><br /> <br /><hr noshade="noshade" /><br /> <br /><b>Back and Forth</b><br /> <br /><marquee behavior="alternate">Back and Forth</marquee><br /> <br /><br /> <br /><input class="textbox" readonly="readonly" style="width: 580px;" type="text" value=" <marquee behavior="alternate">.....your text....</marquee> " /><br /> <br /><br /> <br /><hr noshade="noshade" /><br /> <br /><b>Up</b><br /> <br /><marquee direction="up" height="100">Up Up Up</marquee><br /> <br /><br /> <br /><input class="textbox" readonly="readonly" style="width: 580px;" type="text" value=" <marquee direction="up">.....your text....</marquee> " /><br /> <br /><br /> <br /><br /> <br /><hr noshade="noshade" /><br /> <br /><b>Down</b><br /> <br /><marquee direction="down" height="100">Down Down Down</marquee><br /> <br /><br /> <br /><input class="textbox" readonly="readonly" style="width: 580px;" type="text" value=" <marquee direction="down">.....your text....</marquee> " /><br /> <br /><br /> <br /><br /> <br /><hr noshade="noshade" /><br /> <br /><b>Up and Down</b><br /> <br /><marquee behavior="alternate" direction="up" height="100">Up and Down</marquee><br /> <br /><input class="textbox" readonly="readonly" style="width: 580px;" type="text" value=" <marquee behavior="alternate" direction="up">.....your text....</marquee> " /><br /> <br /><br /> <br /><br /> <br /><hr noshade="noshade" /><br /> <br /><b>Angle Down</b><br /> <br /><marquee><marquee direction="down" style="height: 100px;">Angle Down</marquee></marquee><br /> <br /><br /> <br /><input class="textbox" readonly="readonly" style="width: 580px;" type="text" value=" <marquee><marquee direction="down">.....your text....</marquee></marquee> " /><br /> <br /><br /> <br /><br /> <br /><hr noshade="noshade" /><br /> <br /><b>Angle Up</b><br /> <br /><marquee><marquee direction="up" style="height: 100px;">Angle Up</marquee></marquee><br /> <br /><input class="textbox" readonly="readonly" style="width: 580px;" type="text" value=" <marquee><marquee direction="up">.....your text....</marquee></marquee> " /><br /> <br /><br /> <br /><br /> <br /><hr noshade="noshade" /><br /> <br /><br /> <br /><b>Angle Up Back and Forth</b><br /> <br /><marquee direction="up" height="100"><marquee behavior="alternate">Angle Up Back and Forth</marquee></marquee><br /> <br /><input class="textbox" readonly="readonly" style="width: 580px;" type="text" value=" <marquee direction="up"><marquee behavior="alternate">.....your text....</marquee></marquee> " /><br /> <br /><br /> <br /><br /> <br /><hr noshade="noshade" /><br /> <br /><b>Bounce Around Back and Forth</b><br /> <br /><marquee behavior="alternate" direction="down" height="150"><marquee behavior="alternate">Bounce Around Back and Forth</marquee></marquee><br /> <br /><input class="textbox" readonly="readonly" style="width: 580px;" type="text" value=" <marquee behavior="alternate" direction="down"><marquee behavior="alternate">.....your text....</marquee></marquee> " /><br /> <br /><br /> <br /><hr noshade="noshade" /><br /> <br /><b>Multiple Lines</b><br /> <br /><marquee direction="right">Multiple Lines<br /> <br />Multiple Lines<br /> <br />Multiple Lines<br /> <br />Multiple Lines<br /> <br /></marquee><br /> <br /><br /> <br /><input class="textbox" readonly="readonly" style="width: 580px;" type="text" value=" <marquee direction="right">.....your text....<br>.....your text....<br>.....your text....<br>.....your text....</marquee> " /><br /> <br /><br /> <br /><br /> <br /><hr noshade="noshade" /><br /> <br /><h3><span style="font-size: small;"><b>Change the Scrolling Speed:</b></span></h3><marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll speed</marquee><br /> <br /><marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll speed</marquee><br /> <br /><marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll speed</marquee><br /> <br /><br /> <br /><br /> <br /><br /> <br /><input class="textbox" readonly="readonly" style="width: 580px;" type="text" value="<marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll speed</marquee> <br /><marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll speed</marquee> <br /><marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll speed</marquee> " /><br /> <br /><br /> <br /><br /> <br /><hr noshade="noshade" /><br /> <br /><b>Colored Background</b>  Για βοήθεια Δείτε <a href="http://html-color-codes.info/" target="_blank">εδώ</a>.<br /> <br /><marquee bgcolor="blue" style="color: white;">Colored Background</marquee><br /> <br /><br /> <br /><br /> <br /><input class="textbox" readonly="readonly" style="width: 580px;" type="text" value=" <marquee bgcolor=" COLOR " style="color: COLOR ">.....your text....</marquee> " /><br /> <br /><br /> <br /><br /> <br /><hr noshade="noshade" /><br /> <br /><b>Right to Left Blinking</b><br /> <br /><marquee direction="left"><blink>Right to Left Blinking</blink></marquee><br /> <br /><br /> <br /><input class="textbox" readonly="readonly" style="width: 580px;" type="text" value=" <marquee direction="left"><blink>.....your text....</blink></marquee> " /><br /> <br /><br /> <br /><br /> <br /><hr noshade="noshade" /><br /> <br /><b>Opposing Marqee's</b><br /> <br /><marquee direction="left">Right to Left</marquee><marquee direction="right">Left to Right</marquee><br /> <br /><br /> <br /><input class="textbox" readonly="readonly" style="width: 580px;" type="text" value=" <marquee>.....your text.... </marquee> <marquee direction="right">.....your text....</marquee> " /><br /> <br /><br /> <br /><br /> <br /><hr noshade="noshade" /><br /> <br /><b>Change Text Size</b><br /> <br /><marquee direction="left" style="font-size: 32px;">Change Text Size</marquee><br /> <br /><br /> <br /><br /> <br /><input class="textbox" readonly="readonly" style="width: 580px;" type="text" value=" <marquee style="font-size: NUMBERpx ">.....your text....</marquee> " /><br /> <br /><br /> <br /><br /> <br /><hr noshade="noshade" /><br /> <br /><b>Change Width</b><br /> <br /><marquee direction="left" width="50%">Change Width</marquee><br /> <br /><br /> <br /><input class="textbox" readonly="readonly" style="width: 580px;" type="text" value=" <marquee width=" NUMBER% ">.....your text....</marquee> " /><br /> <br /><br /> <br /><br /> <br /><hr noshade="noshade" /><h3 style="color: blue; font-weight: normal;"><span style="font-size: small;"><b>Scrolling Images:</b></span></h3><br /> <br /><marquee behavior="scroll" direction="left"><img alt="smile" height="50" src="http://i48.tinypic.com/1r4son.png" width="150" /></marquee><br /> <br /><br /> <br /><input class="textbox" readonly="readonly" style="width: 580px;" type="text" value=" <marquee behavior="scroll" direction="left"><img src="....your direct link image...." width="150" height="50" alt="smile" /></marquee> " /><br /> <br /><br /> <br /> <br />Δείτε τον πίνακα με όλες τις εντολές & το ΤΙ κάνουν. <br /> <br /><table border="1" bordercolor="#ffffff" cellpadding="2" dir="ltr"><tbody><tr> <td align="left" bgcolor="#949494" width="381"><b>The Value</b><br /></td> <td align="left" bgcolor="#949494" width="481"><br /></td> </tr><tr> <td align="left" bgcolor="#949494" width="381">direction="left"<br /></td> <td align="left" bgcolor="#949494" width="481">Moves the text to left<br /></td> </tr><tr> <td align="left" bgcolor="#949494" width="381">direction="right"<br /></td> <td align="left" bgcolor="#949494" width="481">Moves the text to right<br /></td> </tr><tr> <td align="left" bgcolor="#949494" width="381">direction="up"<br /></td> <td align="left" bgcolor="#949494" width="481">Moves the text to up<br /></td> </tr><tr> <td align="left" bgcolor="#949494" width="381">direction="down"<br /></td> <td align="left" bgcolor="#949494" width="481">Moves the text to down<br /></td> </tr><tr> <td align="left" bgcolor="#949494" width="381">behavior="alternate"<br /></td> <td align="left" bgcolor="#949494" width="481">Moves the text to right and when it reach the end Moves the text toleft<br /></td> </tr><tr> <td align="left" bgcolor="#949494" width="381">behavior="slide"<br /></td> <td align="left" bgcolor="#949494" width="481">Makes the text to Stop when<br /> <br />it reach to the end of your marquee box<br /></td> </tr><tr> <td align="left" bgcolor="#949494" width="381">loop="4"<br /></td> <td align="left" bgcolor="#949494" width="481">if you need to control<br /><br />the times that the text going to be displayed. add this value and change<br /><br />number 4 to the number of times that you need<br /></td> </tr><tr> <td align="left" bgcolor="#949494" width="381">scrollamount="2"<br /></td> <td align="left" bgcolor="#949494" width="481">Set your text speed, 1,2,3...so on increase the speed respectively<br /></td> </tr><tr> <td align="left" bgcolor="#949494" width="381">width="400"<br /></td> <td align="left" bgcolor="#949494" width="481">Control your text width<br /></td> </tr><tr> <td align="left" bgcolor="#949494" width="381">height="66"<br /></td> <td align="left" bgcolor="#949494" width="481">Control your text Height<br /></td> </tr><tr> <td align="left" bgcolor="#949494" width="381">onmouseover="this.stop()" onmouseout="this.start()"<br /></td> <td align="left" bgcolor="#949494" width="481">Makes the text stop when<br /><br />your is over the text:<br /></td> </tr><tr> <td align="left" bgcolor="#949494" width="381">bgcolor="#9999CC"<br /></td> <td align="left" bgcolor="#949494" width="481">Changing background color., change 9999CC to the color you want.<b>if you need to know more about colors numbers and values please see our surprise at the end of this Post</b><br /></td> </tr><tr> <td align="left" bgcolor="#949494" width="381">style="color: #FF0000"<br /></td> <td align="left" bgcolor="#949494" width="481">Changing Text color.,<br /><br />change FF0000 to the color you want. <b>if you need to know more about colors numbers and values please see our surprise at the end of this Post</b><br /></td> </tr><tr> <td align="left" bgcolor="#949494" width="381">style="font-size: 1em"<br /></td> <td align="left" bgcolor="#949494" width="481">Changing Text Size.<br /></td> </tr><tr> <td align="left" bgcolor="#949494" width="381">style="font-family: Tahoma"<br /></td> <td align="left" bgcolor="#949494" width="481">Changing Text Style.<br /></td> </tr><tr> <td align="left" bgcolor="#949494" width="381">style="font-size: 12pt; color:<br /><br /><br />#800000; font-family: Tahoma"<br /></td> <td align="left" bgcolor="#949494" width="481">to change the text color<br /><br /> <br />and size and style at the same time you may merge the values like this<br /></td> </tr></tbody></table> <br /> <br /> <br /><marquee behavior="alternate" direction="left" scrollamount="3"><strong><em><span style="color:#cc0000;"><h2>ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!</h2></span></em></strong></marquee>

Blogger Help HTML Tutorials Χρησιμοποιήστε την εντολή Marque για να δώσετε εφέ στα κείμενα σας.

Μια εντολή ( MARQUEE ) που μπορεί να δώσει κίνηση σε κείμενο ή φωτογραφία. Μπορείτε να έχετε εντυπωσιακά αποτελέσματα χρησιμοποιώντας ...

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

HTML Code TutoriaL

</br><br /><center>Σας παρουσιάζω ένα site με HTML Code TutoriaL.<br /><br /><a href="http://www.htmlcodetutorial.com/quicklist.html" target="_blank"><img src="http://i45.tinypic.com/2mq0zk2.jpg" /></a></center>

Blogger Help HTML Tutorials HTML Code TutoriaL

Σας παρουσιάζω ένα site με HTML Code TutoriaL.

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

Βασικότερες Ετικέτες για το HTML

</br><br /><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMxyQK6qskDdN5Hdj_WUnKq6-rhYe1BgQnOzDgu74QXohzpByc2Hy10qkKiLdut48x-DEAZIB8Mc-M76gQekasGB9K3AXwjIiz0Nw2rZB2libm7VYCiedPa6JqrUXaccPkn3129omORAQ/s1600-h/html.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5438835789867986418" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMxyQK6qskDdN5Hdj_WUnKq6-rhYe1BgQnOzDgu74QXohzpByc2Hy10qkKiLdut48x-DEAZIB8Mc-M76gQekasGB9K3AXwjIiz0Nw2rZB2libm7VYCiedPa6JqrUXaccPkn3129omORAQ/s320/html.jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 228px;" /></a><br /><br /><strong><em><span style="color:#cc0000;">HTML( < HTML >...< /HTML > )</span></em></strong> <br /><br />Η σημαντικότερη ετικέτα είναι η HTML καθώς είναι αυτή που περικλείει όλα τα υπόλοιπα και ολόκληρο βέβαια το κείμενο. <br />Δηλώνει ότι το κείμενο που περιβάλλει είναι ένα HTML αρχείο και πέρα από αυτό δίνει τη δυνατότητα στοπρόγραμμα ανάγνωσης να διακρίνει μεταξύ των διαφορετικών εκδόσεων της HTML. <br />Μπορεί να περιλαμβάνει μόνο τις ετικέτες HEAD και BODY.<br /><br /><br /><strong><em><span style="color:#cc0000;">HEAD και TITLE ( < HEAD >...< /HEAD > και < TITLE >...< /TITLE > )</span></em></strong> <br /><br />Η ετικέτα που βρίσκεται κάτω από το HTML ονομάζεται HEAD. <br />Περιλαμβάνει πληροφορίες που αφορούν το κείμενο, αλλά δε εμφανίζονται σαν μέρος του κειμένου από το πρόγραμμα ανάγνωσης. <br />Μια από αυτές τις πληροφορίες είναι η ετικέτα TITLE. <br />Η TITLE εμφανίζεται στην οθόνη του χρήστη ξεχωριστά από το υπόλοιπο κείμενο και συνήθως σε μια περιορισμένη περιοχή, όπως είναι ένα παράθυρο (title bar) ή μια μόνο γραμμή στην κορυφή του κειμένου. <br />Αν οι πληροφορίες που περιέχει είναι περισσότερες από τον προκαθορισμένο χώρο, τότε απλώς δεν θα εμφανιστούν όλες. <br />Η TITLE πρέπει να περιγράφει το κείμενο, αφού συνήθως χρησιμοποιείται σαν αναφορά για τις θέσεις (sites) που έχει κάποιος επισκεφτεί - πρέπει να είναι δυνατό να μαντέψουμε το περιεχόμενο μιας θέσης από το TITLE<br /><br /><br /><strong><em><span style="color:#cc0000;">BODY ( < BODY >...< /BODY > )</span></em></strong> <br /><br />Μέσα σε αυτή την ετικέτα περιλαμβάνεται όλο το κείμενο και ότι άλλο πρόκειται να εμφανιστεί από το πρόγραμμα ανάγνωσης. <br />Τυπικά, το BODY δεν μπορεί να περιέχει άμεσα κείμενο, αλλά θα περιέχει άλλ ετικέτες οι οποίες με τη σειρά τους θα περιέχουν κείμενο. <br />Αυτό γιατί το BODY δηλώνει "αυτό είναι το σώμα του αρχείου" και δεν δίνει καμία επιπλέον εξήγηση σε ότι περιεχέται σε αυτό. <br />Με άλλα λόγια, οι υπόλοιπες ετικέτες που περιλαμβάνονται μέσα του θα οργανώσουν το κείμενο και θα προσδιορίσουν κάθε φορά τη σημασία και τη διαμόρφωσή του. <br />Θα πρέπει να αναφέρουμε ότι τα περιεχόμενα των BODY και HEAD χρησιμοποιούνται αποκλειστικά και μόνο από το καθένα : έτσι οι ετικέτες που περιέχονται μέσα στο BODY δεν μπορούν να υπάρξουν μέσα στο HEAD και αντίστροφα (συνεπώς είναι προκαθορισμένες οι ετικέτες που μπορούν να συμπεριληφθούν στο BODY ή στο HEAD).<br /><br />Επιπλέον, με τη χρήση κάποιον συγκεκριμένων προσδιοριστικών μπορούμε να ορίσουμε το χρώμα του φόντου και του κειμένου. Έτσι, έχουμε :<br /><br /><center><table style="border: 2px solid rgb(51, 102, 255); margin: auto; padding-top: 1px; background: rgb(153, 153, 153) url(http://i46.tinypic.com/hs2xqv.jpg) no-repeat scroll 99% 99%; color: rgb(255, 255, 255); -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 400px; height:110px;"><tr><td style="vertical-align:top;"><code><br /><BODY BGCOLOR="#rrggbb" TEXT="#rrggbb" LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb"><br /></code></td></tr></table></center><br /><br /><br /><strong><em><span style="color:#cc0000;">Τα προσδιοριστικά που φαίνονται μέσα στο BODY δηλώνουν: </span></em></strong><br /><br />- <strong><em><span style="color:#cc0000;">BGCOLOR:</span></em></strong> το φόντο δηλαδή την περιοχή πίσω από το κείμενο.<br />- <strong><em><span style="color:#cc0000;">TEXT:</span></em></strong> όλο το περιεχόμενο του BODY, δηλαδή το κείμενο και οτιδήποτε άλλο εκτός από τους συνδέσμους.<br />- <strong><em><span style="color:#cc0000;">LINK:</span></em></strong> κείμενο που ενεργοποιεί σύνδεσμο, που δεν τον έχουμε ακόμα επισκεφτεί, αυτοί έχουν προκαθορισμένο χρώμα το μπλε.<br />- <strong><em><span style="color:#cc0000;">VLINK:</span></em></strong> κείμενο που ενεργοποιεί σύνδεσμο τον οποίο έχουμε επισκεφτεί και το χρώμα του προκαθορισμένα είναι μωβ.<br />- <strong><em><span style="color:#cc0000;">ALINK:</span></em></strong> κείμενο που σηματοδοτεί σύνδεσμο ο οποίος είναι ενεργός τη δεδομένη στιγμή της σύνδεσης και έχει προκαθορισμένο χρώμα το κόκκινο.<br /><br /> Τα χρώματα τα ορίζουμε σε δεκαεξαδικούς αριθμούς., έτσι το rr δηλώνει το κόκκινο, το gg το πράσινο και το bb το μπλε. <br />Για παράδειγμα, για να έχουμε σκούρο μπλε φόντο, κίτρινο κείμενο, σκούρο πράσινο του συνδέσμους που δεν έχουμε επισκεφτεί, φωτεινό κόκκινο τους συνδέσμους που έχουμε επισκεφτεί και ανοιχτό πράσινο τους ενεργούς συνδέσμους γράφουμε .<br /><br /><center><table style="border: 2px solid rgb(51, 102, 255); margin: auto; padding-top: 1px; background: rgb(153, 153, 153) url(http://i46.tinypic.com/hs2xqv.jpg) no-repeat scroll 99% 99%; color: rgb(255, 255, 255); -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 400px; height:110px;"><tr><td style="vertical-align:top;"><code><br /><BODY BGCOLOR="#OOOOCC" TEXT="#FFFFOO" LINK="#OODDOO" VLINK="#FFOOOO" ALINK="#OOFFOO"><br /></code></td></tr></table></center><br /><br />Με την HTML 3.0 έχουμε τη δυνατότητα εκτός από διαφορετικό χρώμα στο φόντο της σελίδας, να βάλουμε κάποια εικόνα που να επαναλαμβάνεται, σαν πλακάκι δαπέδου. <br /><br />Έτσι, γράφοντας:<br /><br /><center><table style="border: 2px solid rgb(51, 102, 255); margin: auto; padding-top: 1px; background: rgb(153, 153, 153) url(http://i46.tinypic.com/hs2xqv.jpg) no-repeat scroll 99% 99%; color: rgb(255, 255, 255); -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 400px; height:110px;"><tr><td style="vertical-align:top;"><code><br /><BODY BGCOLOR="graphic.gif" TEXT="#rrggbb" LINK="#rrggbb" VLINK="#rrggbb" ALINK="#rrggbb"><br /></code></td></tr></table></center><br /><br />εμφανίζεται στο φόντο η εικόνα που έχουμε ορίζει στο BGCOLOR επαναλαμβανόμενη σαν πλακάκι. <br />Φυσικά, η τεχνική αυτή θέλει ιδιαίτερη προσοχή καθώς μπορεί να δημιουργήσουμε εικόνες με τις οποίες είναι δύσκολο να διαβάσουμε το κείμενο. <br />Επίσης, μεγάλες εικόνες δυσχεραίνουν την εμφάνιση της σελίδας, ειδικά αν το εύρος ζώνης είναι περιορισμένο, όπως συμβαίνει τις περισσότερες φορές.. <br /><br />Γι' αυτούς τους λόγους είναι προτιμότερο να επιλέγουμε απλές εικόνας και ένα χρώμμα που να είναι ευανάγνωστο σε σχέση με αυτή. <br /><br />Πρέπει τέλος να τονίσουμε ότι τα προσδιοριστικά αυτά αποτελούν τμήμα του BODY. <br /><br />Για να είναι ενεργή η χρήση τους πρέπει να τοποθετηθούν μέσα στο κανονικό BODY και όχι μέσα σε μια δεύτερη ετικέτα.<br /><br /><br /><strong><em><span style="color:#cc0000;">BLOCK ΑΝΑΓΝΩΣΗΣ (IDENTIFICATION BLOCK)</span></em></strong> <br /><br />Το μπλοκ αναγνώρισης απευθύνεται σε χρήστες που δημιουργούνε HTML αρχεία. Εδώ χρησιμοποιούνται ετικέτες σχολίων, που δεν εμφανίζονται από το πρόγραμμα ανάγνωσης σαν μέρος του κειμένου. <br /><br />Το μπλοκ αναγνώρισης είναι ιδιαίτερα σημαντικό σε μεγάλα αρχεία που στη δημιουργία τους έχουν συμβάλλει περισσότεροι από ένας. <br /><br />Κάποιος που είδε μια ενδιαφέρουσα web θέση μπορεί απλά μέσα από την επιλογή View Document Source του προγράμματος ανάγνωσης, να δει τον κώδικα της HTML και μαζί με αυτόν και την ταυτότητα ή τις ταυτότητες των δημιουργών.<br /><br />Συνεπώς αν η ετικέτα:<br /><br /><center><table style="border: 2px solid rgb(51, 102, 255); margin: auto; padding-top: 1px; background: rgb(153, 153, 153) url(http://i46.tinypic.com/hs2xqv.jpg) no-repeat scroll 99% 99%; color: rgb(255, 255, 255); -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 400px; height:110px;"><tr><td style="vertical-align:top;"><code><br /><!-- this is a comment-- ><br /></code></td></tr></table></center><br /><br />δηλώνει οτι το κείμενο που εμπεριέχει είναι σχόλιο, τότε μπορούμε να έχουμε :<br /><br /><center><table style="border: 2px solid rgb(51, 102, 255); margin: auto; padding-top: 1px; background: rgb(153, 153, 153) url(http://i46.tinypic.com/hs2xqv.jpg) no-repeat scroll 99% 99%; color: rgb(255, 255, 255); -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 400px; height:110px;"><tr><td style="vertical-align:top;"><code><br /><!-----------------------------------------------><br /><!-- AUTHOR : your name goew here --><br /><!-- E-MAIL : your.address@whatever.domain --><br /><!-- CREATED : date page created --><br /><!-- MODIFIED : date page last changed --><br /><!-- FILE : filename.htm --><br /><!-- PURPOSE : what this page provides --><br /><!-----------------------------------------------><br /></code></td></tr></table></center><br /><br />Προφανώς, δεν αποτελεί σύμπτωση το γεγονός ότι το μπλοκ αναγνώρισης λειτουργεί με τον ίδιο τρόπο όπως και οι επικεφαλίδες σε οποιοδήποτε άλλο κώδικα αρχείου. Μια θέση ιστού αποτελεί εφαρμογή λογισμικού και έτσι πρέπει να έχει όλα τα χαρακτηριστικά μιας τέτοιας εφαρμογής. <br /><br /><strong><em><span style="color:#cc0000;">ΠΑΡΑΓΡΑΦΟΣ ( < P > )</span></em></strong> <br /><br />Η ετικέτα < P > δηλώνει την αρχή μιας παραγράφου και μπορεί να βρίσκεται οπουδήποτε μέσα σε μια γραμμή ενός αρχείου HTML. <br /><br />Για παράδειγμα : <br /><br />the WWW.<br />< P > Sorry, no such luck. This document <br /><br />και <br /><br />the WWW. < P > Sorry, no such luck. This document <br /><br />θα εμφανιστούν με την ίδια μορφή από το πρόγραμμα ανάγνωσης. <br /><br />Κάποιος θα παρατηρήσει ότι δεν υπάρχει < /P >, δηλαδή ότι δεν υπάρχει ετικέτα τέλους (ending tag) που θα καθορίζει το τέλος της παραγράφου. <br /><br />Στην HTML η ετικέτα τέλους ειδικά για την < P > είναι προαιρετική. <br /><br />Ο κανόνας αναφέρει ότι μία παράγραφος τελειώνει με το επόμενο < P > ή με την οποιοδήποτε επόμενη ετικέτα. <br /><br />Εκτός από τη χρήση που προαναφέραμε, η ετικέτα αυτή μπορεί να χρησιμοποιηθεί και για να μορφοποιήσει ένα αρχείο που περιέχει γραφικά ή κουμπιά, να ξεχωρίσει δηλαδή το κείμενο από τα γραφικά και τα γραφικά μεταξύ τους.<br /><br /><br /><strong><em><span style="color:#cc0000;">ΑΛΛΑΓΗ ΓΡΑΜΜΗΣ ( < BR > )</span></em></strong> <br /><br />Η ετικέτα < Br > δηλώνει ένα τερματισμό γραμμής (line break).<br /><br /><strong><em><span style="color:#cc0000;">ΟΡΙΖΟΝΤΙΑ ΓΡΑΜΜΗ ( < HR > )</span></em></strong> <br /><br />Η ετικέτα < Hr > τοποθετεί μια οριζόντια γραμμή κατά μήκος της σελίδας. <br /><br />Μπορεί να χρησιμοποιηθεί επίσης και για να χωρίσει μια σελίδα σε διαφορετικές περιοχές, ανάλογα με το περιεχόμενο της κάθε μιας. <br /><br />Μπορεί να πάρει τα παρακάτω προσδιοριστικά : <br /><br /><center><table style="border: 2px solid rgb(51, 102, 255); margin: auto; padding-top: 1px; background: rgb(153, 153, 153) url(http://i46.tinypic.com/hs2xqv.jpg) no-repeat scroll 99% 99%; color: rgb(255, 255, 255); -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 400px; height:110px;"><tr><td style="vertical-align:top;"><code><br /><HR WIDTH=75% SIZE=3 ALIGN=LEFT><br /></code></td></tr></table></center><br /><br /><br />Το μήκος <strong><em><span style="color:#FCFC06;">( WIDTH )</span></em></strong>  μπορεί να καθοριστεί με δυο τρόπους : ο ένας αναφέρεται σε ποσοστό επι τοις εκατό του μήκους της οθόνης και ο άλλος είναι σε εικονοστοιχεία (pixels). <br /><br />Έτσι, καθορίζοντας WIDTH = 50 % θα πάρουμε μια ευθεία γραμμή με μήκος ίσο με το μισό του παράθυρου, ενώ με WIDTH = 200 θα πάρουμε μια ευθεία με μήκος ίσο με 200 εικονοστοιχεία. <br /><br />Το μέγεθος <strong><em><span style="color:#FCFC06;">( SIZE )</span></em></strong> ορίζεται σε εικονοστοιχεία και το προκαθορισμένο μήκος ποικίλει ανάλογα με το πρόγραμμα ανάγνωσης ( μπορεί να είναι 2 ή 3 εικονοστοιχεία).<br /><br />Το κεντράρισμα <strong><em><span style="color:#FCFC06;">( ALIGN )</span></em></strong> έχει τη σημασία της στοίχησης της ευθείας στο κέντρο <strong><em><span style="color:#FCFC06;">( CENTER )</span></em></strong>, δεξιά <strong><em><span style="color:#FCFC06;">( RIGHT )</span></em></strong> ή αριστερά <strong><em><span style="color:#FCFC06;">( LEFT )</span></em></strong>.<br /><br />Στο δικό μας παράδειγμα, έχουμε μία οριζόντια γραμμή που έχει το προκαθορισμένο μέγεθος (3), μήκος ίσο με το 75% της οθόνης και είναι στοιχισμένη στο κέντρο.<br />Βέβαια, θα πρέπει να ληφθεί υπόψην ότι δεν υποστηρίζουν όλα τα προγράμματα ανάγνωσης τα προσδιοριστικά αυτά και σε αυτές τις περιπτώσεις θα εμφανίσουν μια ευθεία γραμμή στο προκαθορισμένο της μέγεθος και σε μήκος ίσο με το παράθυρο<br /><br /><br /><strong><em><span style="color:#cc0000;">ΠΡΟΚΑΘΟΡΙΣΜΕΝΟ ΣΤΥΛ ( < PRE >...< /PRE > )</span></em></strong> <br /><br />Το πρόγραμμα ανάγνωσης εμφανίζει ότι περικλείεται μέσα στην ετικέτα < PRE >...< /PRE > όπως ακριβώς το έχουμε γράψει. <br /><br />Έτσι, π.χ. το κείμενο που ακολουθεί θα εμφανιστεί στην οθόνη του χρήστη όπως ακριβώς το έχουμε γράψει :<br /><br /><center><table style="border: 2px solid rgb(51, 102, 255); margin: auto; padding-top: 1px; background: rgb(153, 153, 153) url(http://i46.tinypic.com/hs2xqv.jpg) no-repeat scroll 99% 99%; color: rgb(255, 255, 255); -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 400px; height:110px;"><tr><td style="vertical-align:top;"><code><br /><PRE> <br /><br /> This text<br /> will appear<br /> formatted<br /> just like this<br /><br /> </PRE><br /></code></td></tr></table></center><br /><br />Με την ετικέτα αυτή μπορούμε να ξεπεράσουμε δύο προβλήματα : <br />- να ελέξουμε την εμφάνιση του κειμένου και<br />- να εμποδίσουμε το πρόγραμμα ανάγνωσης να εμφανίσει το κείμενο με διαφορετική μορφή απο αυτή που εμείς επιθυμούμε..<br /><br />Παρόλο που ακούγονται σαν να λέμε το ίδιο πράγμα με δυο διαφορετικούς τρόπους, στην πραγματικότητα πρόκειται για δυο διαφορετικές κατηγορίες προβλημάτων. <br /> Έτσι, σχετικά με το πρώτο πρόβλημα μπορούμε να χρησιμοποιήσουμε το < PRE > για να εμφανίσουμε κείμενο όπως εμείς το θέλουμε. <br />Αυτό σημαίνει ότι μπορεί να θέλουμε το κείμενο να εμφανιστεί στη μέση της γραμμής ή στο τέλος της.<br /> Όταν χρησιμοποιούμε έναν επεξεργαστή κειμένου μπορούμε απλά να προσθέσουμε κενά με τον στηλοθέτη <strong><em><span style="color:#FCFC06;">( tab )</span></em></strong>  και να ρυθμίσουμε τη θέση του κειμένου. <br />Τα προγράμματα ανάγνωσης όμως αγνοούν τους στηλοθέτες ή τους μεταφράζουν με τρόπους που δεν περιμένουμε..<br />Όσον αφορά στο δεύτερο πρόβλημα υπάρχουν περιπτώσεις στις οποίες τα δεδομένα δεν θέλουμε εμφανίζονται ως μια ακολουθία, <br /><br />π.χ. μια αναφορά από μια βάση δεδομένων. <br /><br /><br /><strong><em><span style="color:#cc0000;">ΕΠΙΚΕΦΑΛΙΔΕΣ (Headings)</span></em></strong> <br /><br />Οι επικεφαλίδες επιτελούν τον ίδιο σκοπό πως και σε ένα βιβλίο: καθοδηγούν τον αναγνώστη - εδώ το χρήστη - δείχνοντάς του τη δομή της σελίδας αλλά και των σελίδων που έπονται. <br />Επίσης δηλώνουν την ιεραρχία που υπάρχει μεταξύ των διαφορετικών "περιοχών" ενός κειμένου. <br />Αν συνδιάσει κάποιος τις επικεφαλίδες με γραφικά κουμπιά, θα καταφέρει να κάνει την πλοήγηση μεσα στις σελίδες του πολύ ευκολή υπόθεση για τους χρήστες. Οι επικεφαλίδες είναι έξι μεγεθών: <br /><br />< H1 > Heading level one < /H1 ><br /><br /><center><table style="border: 2px solid rgb(51, 102, 255); margin: auto; padding-top: 1px; background: rgb(153, 153, 153) url(http://i46.tinypic.com/hs2xqv.jpg) no-repeat scroll 99% 99%; color: rgb(255, 255, 255); -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 400px; height:110px;"><tr><td style="vertical-align:top;"><code><br /><H1> Heading level one </H1><br /><H2> Heading level two </H2><br /><H3> Heading level three </H3><br /><H4> Heading level four </H4><br /><H5> Heading level five </H5><br /><H6> Heading level six </H6><br /></code></td></tr></table></center><br /><br /> Το μεγαλύτερο μέγεθος επικεφαλίδας είναι < H1 > και το μικρότερο < H6 >.<br /><br /> Ανάμεσα στις ετικέτες προσθέτουμε το κείμενο που θέλουμε να μορφοποιηθεί με το αντίστοιχο μέγεθος επικεφαλίδας <br /><br /><br /><strong><em><span style="color:#cc0000;">ΜΕΓΕΘΟΣ ΓΡΑΜΜΑΤΟΣΕΙΡΑΣ ( < Font size =.. > )</span></em></strong> <br /><br /> Τώρα πια τα προγράμματα ανάγνωσης μας δίνουν τη δυνατότητα να έχουμε μια ποικιλία στο στο μέγεθος που θα ορίσουμε τη γραμματοσειρά του κειμένου. Έτσι, μπορούμε να έχουμε μια λέξη ή και έναν χαρακτήρα σε διαφορετικό μέγεθος από τους υπόλοιπους. Το προκαθορισμένο μέγεθος είναι 3 και η κλίμακα κυμαίνεται από 1 ως και 7. <br />Αν δεν αλλάξουμε το μέγεθος τότε εξακολουθεί να ισχύει το τελευταίο που είχαμε ορίσει. Είναι :<br /><br /><center><table style="border: 2px solid rgb(51, 102, 255); margin: auto; padding-top: 1px; background: rgb(153, 153, 153) url(http://i46.tinypic.com/hs2xqv.jpg) no-repeat scroll 99% 99%; color: rgb(255, 255, 255); -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 400px; height:110px;"><tr><td style="vertical-align:top;"><code><br /><Font size=1> This is text at a size of 1. <br /><Font size=2> This is text at a size of 2.<br /><Font size=3> This is text at a size of 3. <br /><Font size=4> This is text at a size of 4. <br /><Font size=5> This is text at a size of 5. <br /><Font size=6> This is text at a size of 6. <br /><Font size=7> This is text at a size of 7. <Font size=3><br /></code></td></tr></table></center><br /><br /><strong><em><span style="color:#cc0000;">ΤΥΠΟΙ ΧΑΡΑΚΤΗΡΩΝ(Character styles)</span></em></strong> <br /><br /> Η HTML παρέχει αρκετούς τρόπους μορφοποίησης ενός κειμένου. <br />Μπορούμε να γράψουμε σε italics, bold κ.α. Έτσι, έχουμε : <br /><br /><strong><em><span style="color:#FCFC06;">< STRONG >.......< /STRONG ></span></em></strong>  και <strong><em><span style="color:#FCFC06;">< B >.......< /B ></span></em></strong>  που μορφοποιούν το ενδιάμεσο κείμενο ή χαρακτήρα σε bold.<br /><strong><em><span style="color:#FCFC06;">< EM >.......< /EM ></span></em></strong>  και <strong><em><span style="color:#FCFC06;">< I >.........< /I ></span></em></strong>  που μορφοποιούν το κείμενο σε italics.<br /><br /> Πρέπει και πάλι να αναφέρουμε ότι δεν εμφανίζουν όλα τα προγράμματα ανάγνωσης το κείμενο με την ίδια μορφοποίηση, γι' αυτό πρέπει να γνωρίζουμε από πριν τι υποστηρίζει κάποιο πρόγραμμα ανάγνωσης ή ακόμα καλύτερα να ελέξουμε το αρχείο μας σε περισσότερα από ένα, ώστε να δούμε τις διαφορές που υπάρχουν. <br /><br /><strong><em><span style="color:#cc0000;">ΕΙΚΟΝΕΣ</span></em></strong> <br /><br /> Ένα μεγάλο μέρος της δημοτικότητας του ιστού οφείλεται στο γεγονός ότι επιτρέπει την εμφάνιση γραφικών, αλλά και την επεξεργασία τους με οποιονδήποτε τρόπο. <br />Μικρές εικόνες μπορούν να χρησιμοποιηθούν σαν εικονίδια και να αποτελέσουν πολύ εύχρηστα κουμπιά πλοήγησης σε μια εκτενή θέση του ιστού με αρκετές σελίδες. <br />Ολα τα προγράμματα ανάγνωσης που υποστηρίζουν γραφικά μπορούν να εμφανίσουν αρχεία εικόνας σε GIF μορφή, ενώ μερικά από αυτά εμφανίζουν και JPEG γραφικά. <br /><br />Έτσι, μπορούμε να έχουμε :<br /><br />Απλά γραφικά <br /><br />Κείμενο στο οποίο δίπλα να υπάρχει ευθυγραμισμένο γραφικό<br /><br />Γραφικό που αποτελεί σύνδεσμο για εικόνα ή για ήχο, animation ή video clip<br /><br /><strong><em><span style="color:#FCFC06;">α)</span></em></strong> απλά γραφικά  <br /><br /><center><table style="border: 2px solid rgb(51, 102, 255); margin: auto; padding-top: 1px; background: rgb(153, 153, 153) url(http://i46.tinypic.com/hs2xqv.jpg) no-repeat scroll 99% 99%; color: rgb(255, 255, 255); -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 400px; height:110px;"><tr><td style="vertical-align:top;"><code><br /><IMG SRC="picture.gif" ALT="[text]"><br /></code></td></tr></table></center><br /><br />Εδώ, το picture.gif δηλώνει την URL της εικόνας και το text θα εμφανιστεί στην οθόνη των χρηστών που έχουν προγράμματα ανάγνωσης που δεν υποστηρίζουν γραφικά,<br /><strong><em><span style="color:#FCFC06;">β)</span></em></strong>  κείμενο στο οποίο δίπλα να υπάρχει ευθυγραμμισμένο γραφικό (που βέβαια σχετίζεται με το κείμενο). <br /><br />Η ευθυγράμμιση γίνεται με το προσδιοριστικό ALIGN. <br />Φυσικά, οι τιμές που δέχεται το ALIGN ποικίλουν μεταξύ των προγραμμάτων ανάγνωσης, γι' αυτό κάποιος που σχεδιάζει σελίδες πρέπει να το έχει υπόψη του. <br /><br />Έχουμε :<br /><br /><center><table style="border: 2px solid rgb(51, 102, 255); margin: auto; padding-top: 1px; background: rgb(153, 153, 153) url(http://i46.tinypic.com/hs2xqv.jpg) no-repeat scroll 99% 99%; color: rgb(255, 255, 255); -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 400px; height:110px;"><tr><td style="vertical-align:top;"><code><br /><IMG SRC="picture.gif" ALT="[text]" ALIGN=position><br /></code></td></tr></table></center><br /><br />Το position δηλώνει τη θέση την οποία θα λάβει η εικόνα μέσα στη σελίδα σε σχέση πάντα με το κείμενο και μπορεί να πάρει τις τιμές :<br /> <strong><em><span style="color:#FCFC06;">LEFT, RIGHT, TOP, MIDDLE ή BOTTOM</span></em></strong> . <br /><br />Τα περισσότερα προγράμματα ανάγνωσης υποστηρίζουν τις τιμές TOP, MIDDLE και BOTTOM, ενώ αν δεν χρησιμοποιηθεί το ALIGN το πρόγραμμα ανάγνωσης θα χρησιμοποιήσει αυτόματα το BOTTOM, και<br /> <strong><em><span style="color:#FCFC06;">γ)</span></em></strong> γραφικό που αποτελεί σύνδεσμο για εικόνα ή οτιδήποτε άλλο, το οποίο μπορεί να είναι ήχος, animation ή video clip.<br /><br />Εδώ έχουμε :<br /><br /><center><table style="border: 2px solid rgb(51, 102, 255); margin: auto; padding-top: 1px; background: rgb(153, 153, 153) url(http://i46.tinypic.com/hs2xqv.jpg) no-repeat scroll 99% 99%; color: rgb(255, 255, 255); -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 400px; height:110px;"><tr><td style="vertical-align:top;"><code><br /><A HREF="picture.gif"> <IMG SRC="iconfile.gif" ALT="[text]" > </A><br /></code></td></tr></table></center><br /><br /> Το picture.gif είναι η URL της εικόνας, του ήχου του animation ή του video clip που θα εμφανιστεί όταν ο χρήστης κάνει κλικ πάνω στο εικονίδιο που έχει URL την iconfile.gif και το text θα εμφανιστεί σε αυτούς που έχουν προγράμματα ανάγνωσης που δεν υποστηρίζουν γραφικά.<br /><br /><strong><em><span style="color:#cc0000;">ΣΥΝΔΕΣΜΟΙ (LINKS)</span></em></strong> <br /><br /> Οι σύνδεσμοι αποτελούν ένα από τα πιο βασικά συστατικά της HTML. <br />Αναφέραμε προηγουμένως γενικά πώς λειτουργούν και πώς το πρόγραμμα ανάγνωσης μεταφράζει έναν σύνδεσμο. <br />Οι περιοχές σε μια οθόνη του προγράμματος ανάγνωσης που περιέχουν συνδέσμους ονομάζονται θερμές (hot) και το κείμενο που αντιστοιχεί σε ένα σύνδεσμο συνήθως εμφανίζεται υπογραμμισμένο ή με διαφορετικό, πιο έντονο χρώμμα. <br />1/4πως είπαμε και προηγούμενα, οι σύνδεσμοι αποτελούνται από δύο μέρη: αυτό που βλέπουν οι χρήστες και κάνοντας κλικ πάνω σε αυτό ενεργοποιούν το σύνδεσμο (μπορεί να είναι κείμενο, εικονίδιο, κείμενο και εικονίδιο) και η URL, η διεύθυνση δηλαδή στην οποία θα κατευθυνθεί το πρόγραμμα ανάγνωσης σαν αποτέλεσμα της ενεργοποίησης του συνδέσμου (όλα αυτά μπορεί να ακούγονται βαρετά, καθώς σε γενικές γραμμές έχουν προαναφερθεί, αλλά είναι απαραίτητα για την κατανόηση αυτών που θα ακολουθήσουν). <br /><br />Έτσι, έχουμε :<br /><br /><center><table style="border: 2px solid rgb(51, 102, 255); margin: auto; padding-top: 1px; background: rgb(153, 153, 153) url(http://i46.tinypic.com/hs2xqv.jpg) no-repeat scroll 99% 99%; color: rgb(255, 255, 255); -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 400px; height:110px;"><tr><td style="vertical-align:top;"><code><br /><center><img src="http://i48.tinypic.com/1r4son.png"></center><br /></code></td></tr></table></center><br /><br /><strong><em><span style="color:#cc0000;">ΜΠΛΟΚ ΔΙΕΥΘΥΝΣΗΣ</span></em></strong> <br /><br />Το μπλοκ διεύθυνσης (address block) παρέχει πληροφορίες οι οποίες δίνουν τη δυνατότητα στους χρήστες μιας σελίδας ή μιας ολόκληρης θέσης στον ιστό να έρθουν σε επαφή με αυτόν ή αυτούς που δημιούργησαν τη σελίδα, να τους επαινέσουν ή να εκφράσουν τις παρατηρήσεις και τα σχόλιά τους. <br /><br />Μέσα απο το μπλοκ διεύθυνσης μπορεί να εφαρμοστεί η επανατροφοδότηση, δηλαδή η προσαρμογή του στις επιταγές και τις ανάγκες των χρηστών που ίσως δεν είχε προβλέψει. <br /><br />Συνήθως χρησιμοποιείται μόνο στις home pages και όχι σε όλες τις σελίδες. <br /><br />Τις περισσότερες φορές το άτομο που εμφανίζεται στην ετικέτα < ADDRESS > δεν είναι αυτό που δημιούργησε τον κόμβο του ιστού, αλλά αυτός που το "προωθεί" ή ο συντηρητής του (ο web master). <br /><br />Έχουμε :<br /><br /><center><table style="border: 2px solid rgb(51, 102, 255); margin: auto; padding-top: 1px; background: rgb(153, 153, 153) url(http://i46.tinypic.com/hs2xqv.jpg) no-repeat scroll 99% 99%; color: rgb(255, 255, 255); -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 400px; height:110px;"><tr><td style="vertical-align:top;"><code><br /><ADDRESS><br />your name<BR><br />your organization<BR><br /><br /><br />street address<BR><br />city, state of province, postal code<BR><br />phone number(s)<BR><br /><A HREF="MAILTO:name@what.ever.domain">name@what.ever.domain<br /></A><BR><br /></ADDRESS><br /></code></td></tr></table></center><br /><br />Τα περισσότερα στοιχεία δεν χρειάζονται εξήγηση, πρόκειται απλά για το όνομα, τη διεύθυνση, τον αριθμό τηλεφώνου και ίσως και την επωνυμία της εταιρίας. <br />Η τελευταία γραμμή δίνει ένα παράδειγμα της αλληλεπίδρασης μέσα από τον ιστό. <br />Έτσι, οι χρήστες όχι μόνο μπορούν να δουν τα στοιχεία που προαναφέραμε, αλλά να στείλουν και e-mail στο άτομα που αναφέρεται - αν βέβαια το πρόγραμμα ανάγνωσης που χρησιμοποιούν υποστηρίζει φόρμες για e-mail. <br /><br />Κάνοντας λοιπόν κλικ στη name@what.ever.domain μπορούν να επικονωνήσουν μαζί του. Ένα πρόβλημα που συνήθως προκύπτει είναι να ξεχάσουμε να ταποθετήσουμε στο τέλος κάθε γραμμής ένα <strong><em><span style="color:#FCFC06;">< BR ></span></em></strong> και σε αυτή την περίπτωση όλα τα στοιχεία εμφανίζονται σε μια ενιαία σειρά. Προσοχή λοιπόν.<br /><br /><strong><em><span style="color:#cc0000;">ΛΙΣΤΕΣ (LISTS)</span></em></strong><br /><br />Η HTML δίνει τη δυνατότητα δημιουργίας λίστας, έτσι ώστε να είναι δυνατή η πιο άρτια δόμηση ενός κειμένου, ειδικά όταν έχουμε να κάνουμε με εκτενές κείμενο. Έτσι, έχουμε :<br /><br /><a href="http://www.it.uom.gr/project/htmlman/pages/lisis.htm#lista1">Μη-αριθμημένη λίστα (Unordered list ή bullet list).</a> <br /><a href="http://www.it.uom.gr/project/htmlman/pages/lisis.htm#lista4">Αριθμημένη λίστα (Numbered list ή ordered list).</a><br /><a href="http://www.it.uom.gr/project/htmlman/pages/lisis.htm#lista2">Μη-αριθμημένη λίστα δυο επιπέδων (Bullet list, two level).</a> <br /><a href="http://www.it.uom.gr/project/htmlman/pages/lisis.htm#lista5">Αριθμημένη λίστα, δύο επιπέδων (Numbered list, two level).</a><br /><a href="http://www.it.uom.gr/project/htmlman/pages/lisis.htm#lista3">Μη-αριθμημένη λίστα με πολύπλοκα στοιχεία (Bullet list, complex items).</a> <br /><a href="http://www.it.uom.gr/project/htmlman/pages/lisis.htm#lista6">Λίστα ορισμού (Definition list).</a><br /><br /><strong><em><span style="color:#cc0000;">ΜΕΝΟΥ</span></em></strong><br /><br /> Με τα μενού οι χρήστες έχουν τη δυνατότητα επιλογής κάποιων αντικειμένων από μια δεδομένη ακολουθία. <br />Με τα μενού οι δημιουργοί των σελίδων προσπαθούν, κατά κάποιο τρόπο, να καθοδηγήσουν τους χρήστες τους σε πληροφορίες που δίνονται μέσα από συγκεκριμένα μονοπάτια. <br /><br />Το βασικό συστατικό στοιχείο ενός μενού είναι ο σύνδεσμος, είτε πρόκειται για κείμενο που ενεργοποιεί το σύνδεσμο, είτε για εικονίδιο, είτε και για τα δύο<br /><br /><br /><center><strong><em><span style="color:#cc0000;"><h2><br />Πιστεύω να σας φανούν χρήσιμα.<br /><br />ΚΑΛΗ ΕΠΙΤΥΧΙΑ!!!!!</h2></span></em></strong></center>

Blogger Help HTML Tutorials Βασικότερες Ετικέτες για το HTML

HTML( ... )   Η σημαντικότερη ετικέτα είναι η HTML καθώς είναι αυτή που περικλείει όλα τα υπόλοιπα και ολόκληρο βέβαια το κείμενο. Δηλώνει ...

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

Eτικέτες για τους πίνακες HTML - ( Table Tags )

</br><br /><center><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMxyQK6qskDdN5Hdj_WUnKq6-rhYe1BgQnOzDgu74QXohzpByc2Hy10qkKiLdut48x-DEAZIB8Mc-M76gQekasGB9K3AXwjIiz0Nw2rZB2libm7VYCiedPa6JqrUXaccPkn3129omORAQ/s1600-h/html.jpg" onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}"><img alt="" border="0" id="BLOGGER_PHOTO_ID_5438835789867986418" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjMxyQK6qskDdN5Hdj_WUnKq6-rhYe1BgQnOzDgu74QXohzpByc2Hy10qkKiLdut48x-DEAZIB8Mc-M76gQekasGB9K3AXwjIiz0Nw2rZB2libm7VYCiedPa6JqrUXaccPkn3129omORAQ/s320/html.jpg" style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 228px;" /></a><br /><br /><strong><em><span style="color:#cc0000;">Οι τρεις σημαντικότερες Eτικέτες για τους πίνακες είναι η επιτραπέζια Eτικέτα ανοίγματος, table , καθώς κι οι Eτικέτες επιτραπέζιων στοιχείων - tr κι td αντίστοιχα. <br /><br />Η ετικέτα tr αντιπροσωπεύει μια σειρά για τον πίνακα. <br /><br />Η ετικέτα td αντιπροσωπεύει ένα κύτταρο (ή τη στήλη) μέσα στη σειρά. <br /><br />Τώρα, με αυτά στο μυαλό, μπορείτε να δημιουργήσετε έναν απλό πίνακα:</span></em></strong> <br /><br /><br />Αυτόν το πίνακα τον χρησιμοποιούμε όταν θέλουμε να βάλουμε σε κάθετη διάταξη στοιχεία.<br /><br />Χωρίς περίγραμμα:<br /><br /><center><img src="http://i47.tinypic.com/f3dzev.jpg"></center><br /><br /><center><table style="border: 2px solid rgb(51, 102, 255); margin: auto; padding-top: 1px; background: rgb(153, 153, 153) url(http://i46.tinypic.com/hs2xqv.jpg) no-repeat scroll 99% 99%; color: rgb(255, 255, 255); -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 400px; height:110px;"><tr><td style="vertical-align:top;"><code><br /><table style="><br /><br /><tr><br /><td>1η Γραμμή 1ο πεδίο</td> <br /><td>1η Γραμμή 2ο πεδίο</td> <br /><td>1η Γραμμή 3ο πεδίο</td> <br /></tr> <br /><br /><tr><br /><td>2η Γραμμή 1ο πεδίο</td> <br /><td>2η Γραμμή 2ο πεδίο</td> <br /><td>2η Γραμμή 3ο πεδίο</td> <br /></tr> <br /></table><br /></code></td></tr></table></center><br /><br />Με περίγραμμα:<br /><br /><center><img src="http://i46.tinypic.com/r2135t.jpg"></center><br /><br /><center><table style="border: 2px solid rgb(51, 102, 255); margin: auto; padding-top: 1px; background: rgb(153, 153, 153) url(http://i46.tinypic.com/hs2xqv.jpg) no-repeat scroll 99% 99%; color: rgb(255, 255, 255); -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 400px; height:110px;"><tr><td style="vertical-align:top;"><code><br /><table style="border: 2px #f00 solid;"><br /><br /><tr><br /><td>1η Γραμμή 1ο πεδίο</td> <br /><td>1η Γραμμή 2ο πεδίο</td> <br /><td>1η Γραμμή 3ο πεδίο</td> <br /></tr> <br /><br /><tr><br /><td>2η Γραμμή 1ο πεδίο</td> <br /><td>2η Γραμμή 2ο πεδίο</td> <br /><td>2η Γραμμή 3ο πεδίο</td> <br /></tr> <br /></table><br /></code></td></tr></table></center><br /><br /><br />Μια άλλη τροποποίηση που μπορούμε να κάνουμε, είναι να ξεχωρίσουμε τα κελιά μεταξύ τους με κάποιο περίγραμμα ή με κάποιο χρώμμα όταν θέλουμε να επισημάνουμε κάτι σημαντικό.<br /><br />Δείτε τα παρακάτω παραδείγματα:<br /><br /><center><img src="http://i47.tinypic.com/f0rfc3.jpg"></center><br /><br /><center><table style="border: 2px solid rgb(51, 102, 255); margin: auto; padding-top: 1px; background: rgb(153, 153, 153) url(http://i46.tinypic.com/hs2xqv.jpg) no-repeat scroll 99% 99%; color: rgb(255, 255, 255); -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 400px; height:110px;"><tr><td style="vertical-align:top;"><code><br /><table style="border:2px #f00 solid;"><br /><tr><br /><td style="border:1px #56E4F3 solid;">1η Γραμμή 1ο πεδίο</td> <br /><td style="border:1px #56E4F3 solid;">1η Γραμμή 2ο πεδίο</td> <br /><td style="border:1px #56E4F3 solid;">1η Γραμμή 3ο πεδίο</td> <br /></tr> <br /><tr><br /><td style="border:1px #56E4F3 solid;">2η Γραμμή 1ο πεδίο</td> <br /><td style="border:1px #56E4F3 solid;">2η Γραμμή 2ο πεδίο</td> <br /><td style="border:1px #56E4F3 solid;">2η Γραμμή 3ο πεδίο</td> <br /></tr> <br /></table><br /></code></td></tr></table></center><br /><br /><br />Εδώ έχουμε αυξήσει το μέγεθος της 1ης στήλης στο 50% του συνολικού μήκους του παραθύρου.<br /><br />Αυτό μπορείτε να τ'αλλάξετε κατά τις ανάγκες σας.<br /><br /><br /><center><img src="http://i49.tinypic.com/21lqqvp.jpg"></center><br /><br /><center><table style="border: 2px solid rgb(51, 102, 255); margin: auto; padding-top: 1px; background: rgb(153, 153, 153) url(http://i46.tinypic.com/hs2xqv.jpg) no-repeat scroll 99% 99%; color: rgb(255, 255, 255); -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 400px; height:110px;"><tr><td style="vertical-align:top;"><code><br /><table style="border:2px #f00 solid;width:100%;"><br /><tr><br /><td style="border:1px #56E4F3 solid;width:50%;">1η Γραμμή 1ο πεδίο</td> <br /><td style="border:1px #56E4F3 solid;">1η Γραμμή 2ο πεδίο</td> <br /><td style="border:1px #56E4F3 solid;">1η Γραμμή 3ο πεδίο</td> <br /></tr> <br /><tr><br /><td style="border:1px #56E4F3 solid;">2η Γραμμή 1ο πεδίο</td> <br /><td style="border:1px #56E4F3 solid;">2η Γραμμή 2ο πεδίο</td> <br /><td style="border:1px #56E4F3 solid;">2η Γραμμή 3ο πεδίο</td> <br /></tr> <br /></table><br /></code></td></tr></table></center><br /><br />Και εδώ έχουμε δώσει χρώμμα στην πρώτη στήλη.<br /><br /><center><img src="http://i48.tinypic.com/5cceo1.jpg"></center><br /><br /><center><table style="border: 2px solid rgb(51, 102, 255); margin: auto; padding-top: 1px; background: rgb(153, 153, 153) url(http://i46.tinypic.com/hs2xqv.jpg) no-repeat scroll 99% 99%; color: rgb(255, 255, 255); -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 400px; height:110px;"><tr><td style="vertical-align:top;"><code><br /><table style="border:2px #f00 solid;width:100%;"><br /><tr><br /><td style="border:1px #56E4F3 solid;width:50%;background:#92ACB6;">1η Γραμμή 1ο πεδίο</td> <br /><td style="border:1px #56E4F3 solid;">1η Γραμμή 2ο πεδίο</td> <br /><td style="border:1px #56E4F3 solid;">1η Γραμμή 3ο πεδίο</td> <br /></tr> <br /><tr><br /><td style="border:1px #56E4F3 solid;background:#6BA7BD;">2η Γραμμή 1ο πεδίο</td> <br /><td style="border:1px #56E4F3 solid;">2η Γραμμή 2ο πεδίο</td> <br /><td style="border:1px #56E4F3 solid;">2η Γραμμή 3ο πεδίο</td> <br /></tr> <br /></table><br /></code></td></tr></table></center><br /><br />Ένα παράδειγμα πίνακα μπορείτε να δείτε <a href="http://loneeagle110.blogspot.com/search?updated-max=2010-02-16T00%3A29%3A00%2B02%3A00&max-results=1">εδώ!!!</a><br /><br /><strong><em><span style="color:#cc0000;">Τώρα από δω & πέρα χρειάζεται ΤΟΛΜΗ & ΦΑΝΤΑΣΙΑ.<br /><br />Εμείς ότι μπορούσαμε κάναμε....<br /><br />Καλά & πετυχημένα πειράματα</span></em></strong> <br /></center>

Blogger Help HTML Tutorials Eτικέτες για τους πίνακες HTML - ( Table Tags )

Οι τρεις σημαντικότερες Eτικέτες για τους πίνακες είναι η επιτραπέζια Eτικέτα ανοίγματος, table , καθώς κι οι Eτικέτες επιτραπέζιων στοιχε...

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

Special Characters.

<br/> <br /><b>ISO Entities</b></p><table class="entities_table" cellpadding="2" cellspacing="2" width="100%"><tbody><tr><td bgcolor="#293BCB" valign="bottom"> <b>Name Code</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Number Code</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Glyph</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Description</b></td></tr><tr><td> &lsquo;</td><td></td><td align="left"> <b>‘</b></td><td> left single quote</td></tr><tr><td> &rsquo;</td><td></td><td align="left"> <b>’</b></td><td> right single quote</td></tr><tr><td> &sbquo;</td><td></td><td align="left"> <b>‚</b></td><td> single low-9 quote</td></tr><tr><td> &ldquo;</td><td></td><td align="left"> <b>“</b></td><td> left double quote</td></tr><tr><td> &rdquo;</td><td></td><td align="left"> <b>”</b></td><td> right double quote</td></tr><tr><td> &bdquo;</td><td></td><td align="left"> <b>„</b></td><td> double low-9 quote</td></tr><tr><td> &dagger;</td><td></td><td align="left"> <b>†</b></td><td> dagger</td></tr><tr><td> &Dagger;</td><td></td><td align="left"> <b>‡</b></td><td> double dagger</td></tr><tr><td> &permil;</td><td></td><td align="left"> <b>‰</b></td><td> per mill sign</td></tr><tr><td> &lsaquo;</td><td></td><td align="left"> <b>‹</b></td><td> single left-pointing angle quote</td></tr><tr><td> &rsaquo;</td><td></td><td align="left"> <b>›</b></td><td> single right-pointing angle quote</td></tr><tr><td> &spades;</td><td></td><td align="left"> <b>¦</b></td><td> black spade suit</td></tr><tr><td> &clubs;</td><td></td><td align="left"> <b>¦</b></td><td> black club suit</td></tr><tr><td> &hearts;</td><td></td><td align="left"> <b>¦</b></td><td> black heart suit</td></tr><tr><td> &diams;</td><td></td><td align="left"> <b>¦</b></td><td> black diamond suit</td></tr><tr><td> &oline;</td><td></td><td align="left"> <b>?</b></td><td> overline, = spacing overscore</td></tr><tr><td> &larr;</td><td></td><td align="left"> <b><</b></td><td> leftward arrow</td></tr><tr><td> &uarr;</td><td></td><td align="left"> <b>^</b></td><td> upward arrow</td></tr><tr><td> &rarr;</td><td></td><td align="left"> <b>></b></td><td> rightward arrow</td></tr><tr><td> &darr;</td><td></td><td align="left"> <b>v</b></td><td> downward arrow</td></tr><tr><td> &trade;</td><td></td><td align="left"> <b>™</b></td><td> trademark sign</td></tr><tr><td bgcolor="#293BCB" valign="bottom"> <b>Name Code</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Number Code</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Glyph</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Description</b></td></tr><tr><td></td><td> &#00;-&#08;</td><td></td><td> unused</td></tr><tr><td></td><td> &#09;</td><td></td><td> horizontal tab</td></tr><tr><td></td><td> &#10;</td><td></td><td> line feed</td></tr><tr><td></td><td> &#11;</td><td></td><td> unused</td></tr><tr><td></td><td> &#32;</td><td></td><td> space</td></tr><tr><td></td><td> &#33;</td><td align="left"> <b>!</b></td><td> exclamation mark</td></tr><tr><td> &quot;</td><td> &#34;</td><td align="left"> <b>“</b></td><td> double quotation mark</td></tr><tr><td></td><td> &#35;</td><td align="left"> <b>#</b></td><td> number sign</td></tr><tr><td></td><td> &#36;</td><td align="left"> <b>$</b></td><td> dollar sign</td></tr><tr><td></td><td> &#37;</td><td align="left"> <b>%</b></td><td> percent sign</td></tr><tr><td> &amp;</td><td> &#38;</td><td align="left"> <b>&</b></td><td> ampersand</td></tr><tr><td></td><td> &#39;</td><td align="left"> <b>‘</b></td><td> apostrophe</td></tr><tr><td></td><td> &#40;</td><td align="left"> <b>(</b></td><td> left parenthesis</td></tr><tr><td></td><td> &#41;</td><td align="left"> <b>)</b></td><td> right parenthesis</td></tr><tr><td></td><td> &#42;</td><td align="left"> <b>*</b></td><td> asterisk</td></tr><tr><td></td><td> &#43;</td><td align="left"> <b>+</b></td><td> plus sign</td></tr><tr><td></td><td> &#44;</td><td align="left"> <b>,</b></td><td> comma</td></tr><tr><td></td><td> &#45;</td><td align="left"> <b>-</b></td><td> hyphen</td></tr><tr><td></td><td> &#46;</td><td align="left"> <b>.</b></td><td> period</td></tr><tr><td bgcolor="#293BCB" valign="bottom"> <b>Name Code</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Number Code</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Glyph</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Description</b></td></tr><tr><td> &frasl;</td><td> &#47;</td><td align="left"> <b>/</b></td><td> slash</td></tr><tr><td></td><td valign="bottom"> &#48;-&#57;</td><td></td><td valign="bottom"> digits 0-9</td></tr><tr><td></td><td> &#58;</td><td align="left"> <b>:</b></td><td> colon</td></tr><tr><td></td><td> &#59;</td><td align="left"> <b>;</b></td><td> semicolon</td></tr><tr><td> &lt;</td><td> &#60;</td><td align="left"> <b><</b></td><td> less-than sign</td></tr><tr><td></td><td> &#61;</td><td align="left"> <b>=</b></td><td> equals sign</td></tr><tr><td> &gt;</td><td> &#62;</td><td align="left"> <b>></b></td><td> greater-than sign</td></tr><tr><td></td><td> &#63;</td><td align="left"> <b>?</b></td><td> question mark</td></tr><tr><td></td><td> &#64;</td><td align="left"> <b>@</b></td><td> at sign</td></tr><tr><td></td><td valign="bottom"> &#65;-&#90;</td><td></td><td valign="bottom"> uppercase letters A-Z</td></tr><tr><td></td><td> &#91;</td><td align="left"> <b>[</b></td><td> left square bracket</td></tr><tr><td></td><td> &#92;</td><td align="left"> <b>\</b></td><td> backslash</td></tr><tr><td></td><td> &#93;</td><td align="left"> <b>]</b></td><td> right square bracket</td></tr><tr><td></td><td> &#93;</td><td align="left"> <b>]</b></td><td> caret</td></tr><tr><td></td><td> &#95;</td><td align="left"> <b>_</b></td><td> horizontal bar (underscore)</td></tr><tr><td></td><td> &#96;</td><td align="left"> <b>`</b></td><td> grave accent</td></tr><tr><td></td><td valign="bottom"> &#97;-&#122;</td><td></td><td valign="bottom"> lowercase letters a-z</td></tr><tr><td></td><td> &#123;</td><td align="left"> <b>{</b></td><td> left curly brace</td></tr><tr><td></td><td> &#124;</td><td align="left"> <b>|</b></td><td> vertical bar</td></tr><tr><td bgcolor="#293BCB" valign="bottom"> <b>Name Code</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Number Code</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Glyph</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Description</b></td></tr><tr><td></td><td> &#125;</td><td align="left"> <b>}</b></td><td> right curly brace</td></tr><tr><td></td><td> &#126;</td><td align="left"> <b>~</b></td><td> tilde</td></tr><tr><td></td><td valign="bottom"> &#127;-&#149;</td><td></td><td valign="bottom"> unused</td></tr><tr><td> &ndash;</td><td> &#150;</td><td align="left"> <b>–</b></td><td> en dash</td></tr><tr><td> &mdash;</td><td> &#151;</td><td align="left"> <b>—</b></td><td> em dash</td></tr><tr><td></td><td valign="bottom"> &#152;-&#159;</td><td></td><td valign="bottom"> unused</td></tr><tr><td> &nbsp;</td><td> &#160;</td><td align="left"></td><td> nonbreaking space</td></tr><tr><td> &iexcl;</td><td> &#161;</td><td align="left"> <b>?</b></td><td> inverted exclamation</td></tr><tr><td> &cent;</td><td> &#162;</td><td align="left"> <b>?</b></td><td> cent sign</td></tr><tr><td> &pound;</td><td> &#163;</td><td align="left"> <b>£</b></td><td> pound sterling</td></tr><tr><td> &curren;</td><td> &#164;</td><td align="left"> <b>¤</b></td><td> general currency sign</td></tr><tr><td> &yen;</td><td> &#165;</td><td align="left"> <b>¥</b></td><td> yen sign</td></tr><tr><td> &brvbar; or &brkbar;</td><td> &#166;</td><td align="left"> <b>¦</b></td><td> broken vertical bar</td></tr><tr><td> &sect;</td><td> &#167;</td><td align="left"> <b>§</b></td><td> section sign</td></tr><tr><td> &uml; or &die;</td><td> &#168;</td><td align="left"> <b>¨</b></td><td> umlaut</td></tr><tr><td> &copy;</td><td> &#169;</td><td align="left"> <b>©</b></td><td> copyright</td></tr><tr><td> &ordf;</td><td> &#170;</td><td align="left"> <b>?</b></td><td> feminine ordinal</td></tr><tr><td> &laquo;</td><td> &#171;</td><td align="left"> <b>«</b></td><td> left angle quote</td></tr><tr><td> &not;</td><td> &#172;</td><td align="left"> <b>¬</b></td><td> not sign</td></tr><tr><td> &shy;</td><td> &#173;</td><td align="left"> <b>­</b></td><td> soft hyphen</td></tr><tr><td> &reg;</td><td> &#174;</td><td align="left"> <b>®</b></td><td> registered trademark</td></tr><tr><td> &macr; or &hibar;</td><td> &#175;</td><td align="left"> <b>?</b></td><td> macron accent</td></tr><tr><td bgcolor="#293BCB" valign="bottom"> <b>Name Code</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Number Code</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Glyph</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Description</b></td></tr><tr><td> &deg;</td><td> &#176;</td><td align="left"> <b>°</b></td><td> degree sign</td></tr><tr><td> &plusmn;</td><td> &#177;</td><td align="left"> <b>±</b></td><td> plus or minus</td></tr><tr><td> &sup2;</td><td> &#178;</td><td align="left"> <b>²</b></td><td> superscript two</td></tr><tr><td> &sup3;</td><td> &#179;</td><td align="left"> <b>³</b></td><td> superscript three</td></tr><tr><td> &acute;</td><td> &#180;</td><td align="left"> <b>/</b></td><td> acute accent</td></tr><tr><td> &micro;</td><td> &#181;</td><td align="left"> <b>µ</b></td><td> micro sign</td></tr><tr><td> &para;</td><td> &#182;</td><td align="left"> <b>¶</b></td><td> paragraph sign</td></tr><tr><td> &middot;</td><td> &#183;</td><td align="left"> <b>·</b></td><td> middle dot</td></tr><tr><td> &cedil;</td><td> &#184;</td><td align="left"> <b>?</b></td><td> cedilla</td></tr><tr><td> &sup1;</td><td> &#185;</td><td align="left"> <b>?</b></td><td> superscript one</td></tr><tr><td> &ordm;</td><td> &#186;</td><td align="left"> <b>?</b></td><td> masculine ordinal</td></tr><tr><td> &raquo;</td><td> &#187;</td><td align="left"> <b>»</b></td><td> right angle quote</td></tr><tr><td> &frac14;</td><td> &#188;</td><td align="left"> <b>?</b></td><td> one-fourth</td></tr><tr><td> &frac12;</td><td> &#189;</td><td align="left"> <b>½</b></td><td> one-half</td></tr><tr><td> &frac34;</td><td> &#190;</td><td align="left"> <b>?</b></td><td> three-fourths</td></tr><tr><td> &iquest;</td><td> &#191;</td><td align="left"> <b>?</b></td><td> inverted question mark</td></tr><tr><td> &Agrave;</td><td> &#192;</td><td align="left"> <b>A</b></td><td> uppercase A, grave accent</td></tr><tr><td> &Aacute;</td><td> &#193;</td><td align="left"> <b>A</b></td><td> uppercase A, acute accent</td></tr><tr><td> &Acirc;</td><td> &#194;</td><td align="left"> <b>A</b></td><td> uppercase A, circumflex accent</td></tr><tr><td bgcolor="#293BCB" valign="bottom"> <b>Name Code</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Number Code</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Glyph</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Description</b></td></tr><tr><td> &Atilde;</td><td> &#195;</td><td align="left"> <b>A</b></td><td> uppercase A, tilde</td></tr><tr><td> &Auml;</td><td> &#196;</td><td align="left"> <b>A</b></td><td> uppercase A, umlaut</td></tr><tr><td> &Aring;</td><td> &#197;</td><td align="left"> <b>A</b></td><td> uppercase A, ring</td></tr><tr><td> &AElig;</td><td> &#198;</td><td align="left"> <b>?</b></td><td> uppercase AE</td></tr><tr><td> &Ccedil;</td><td> &#199;</td><td align="left"> <b>C</b></td><td> uppercase C, cedilla</td></tr><tr><td> &Egrave;</td><td> &#200;</td><td align="left"> <b>E</b></td><td> uppercase E, grave accent</td></tr><tr><td> &Eacute;</td><td> &#201;</td><td align="left"> <b>E</b></td><td> uppercase E, acute accent</td></tr><tr><td> &Ecirc;</td><td> &#202;</td><td align="left"> <b>E</b></td><td> uppercase E, circumflex accent</td></tr><tr><td> &Euml;</td><td> &#203;</td><td align="left"> <b>E</b></td><td> uppercase E, umlaut</td></tr><tr><td> &Igrave;</td><td> &#204;</td><td align="left"> <b>I</b></td><td> uppercase I, grave accent</td></tr><tr><td> &Iacute;</td><td> &#205;</td><td align="left"> <b>I</b></td><td> uppercase I, acute accent</td></tr><tr><td> &Icirc;</td><td> &#206;</td><td align="left"> <b>I</b></td><td> uppercase I, circumflex accent</td></tr><tr><td> &Iuml;</td><td> &#207;</td><td align="left"> <b>I</b></td><td> uppercase I, umlaut</td></tr><tr><td> &ETH;</td><td> &#208;</td><td align="left"> <b>?</b></td><td> uppercase Eth, Icelandic</td></tr><tr><td> &Ntilde;</td><td> &#209;</td><td align="left"> <b>N</b></td><td> uppercase N, tilde</td></tr><tr><td> &Ograve;</td><td> &#210;</td><td align="left"> <b>O</b></td><td> uppercase O, grave accent</td></tr><tr><td> &Oacute;</td><td> &#211;</td><td align="left"> <b>O</b></td><td> uppercase O, acute accent</td></tr><tr><td> &Ocirc;</td><td> &#212;</td><td align="left"> <b>O</b></td><td> uppercase O, circumflex accent</td></tr><tr><td> &Otilde;</td><td> &#213;</td><td align="left"> <b>O</b></td><td> uppercase O, tilde</td></tr><tr><td bgcolor="#293BCB" valign="bottom"> <b>Name Code</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Number Code</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Glyph</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Description</b></td></tr><tr><td> &Ouml;</td><td> &#214;</td><td align="left"> <b>O</b></td><td> uppercase O, umlaut</td></tr><tr><td> &times;</td><td> &#215;</td><td align="left"> <b>?</b></td><td> multiplication sign</td></tr><tr><td> &Oslash;</td><td> &#216;</td><td align="left"> <b>O</b></td><td> uppercase O, slash</td></tr><tr><td> &Ugrave;</td><td> &#217;</td><td align="left"> <b>U</b></td><td> uppercase U, grave accent</td></tr><tr><td> &Uacute;</td><td> &#218;</td><td align="left"> <b>U</b></td><td> uppercase U, acute accent</td></tr><tr><td> &Ucirc;</td><td> &#219;</td><td align="left"> <b>U</b></td><td> uppercase U, circumflex accent</td></tr><tr><td> &Uuml;</td><td> &#220;</td><td align="left"> <b>U</b></td><td> uppercase U, umlaut</td></tr><tr><td> &Yacute;</td><td> &#221;</td><td align="left"> <b>Y</b></td><td> uppercase Y, acute accent</td></tr><tr><td> &THORN;</td><td> &#222;</td><td align="left"> <b>?</b></td><td> uppercase THORN, Icelandic</td></tr><tr><td> &szlig;</td><td> &#223;</td><td align="left"> <b>?</b></td><td> lowercase sharps, German</td></tr><tr><td> &agrave;</td><td> &#224;</td><td align="left"> <b>a</b></td><td> lowercase a, grave accent</td></tr><tr><td> &aacute;</td><td> &#225;</td><td align="left"> <b>a</b></td><td> lowercase a, acute accent</td></tr><tr><td> &acirc;</td><td> &#226;</td><td align="left"> <b>a</b></td><td> lowercase a, circumflex accent</td></tr><tr><td> &atilde;</td><td> &#227;</td><td align="left"> <b>a</b></td><td> lowercase a, tilde</td></tr><tr><td> &auml;</td><td> &#228;</td><td align="left"> <b>a</b></td><td> lowercase a, umlaut</td></tr><tr><td> &aring;</td><td> &#229;</td><td align="left"> <b>a</b></td><td> lowercase a, ring</td></tr><tr><td> &aelig;</td><td> &#230;</td><td align="left"> <b>?</b></td><td> lowercase ae</td></tr><tr><td> &ccedil;</td><td> &#231;</td><td align="left"> <b>c</b></td><td> lowercase c, cedilla</td></tr><tr><td> &egrave;</td><td> &#232;</td><td align="left"> <b>e</b></td><td> lowercase e, grave accent</td></tr><tr><td bgcolor="#293BCB" valign="bottom"> <b>Name Code</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Number Code</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Glyph</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Description</b></td></tr><tr><td> &eacute;</td><td> &#233;</td><td align="left"> <b>e</b></td><td> lowercase e, acute accent</td></tr><tr><td> &ecirc;</td><td> &#234;</td><td align="left"> <b>e</b></td><td> lowercase e, circumflex accent</td></tr><tr><td> &euml;</td><td> &#235;</td><td align="left"> <b>e</b></td><td> lowercase e, umlaut</td></tr><tr><td> &igrave;</td><td> &#236;</td><td align="left"> <b>i</b></td><td> lowercase i, grave accent</td></tr><tr><td> &iacute;</td><td> &#237;</td><td align="left"> <b>i</b></td><td> lowercase i, acute accent</td></tr><tr><td> &icirc;</td><td> &#238;</td><td align="left"> <b>i</b></td><td> lowercase i, circumflex accent</td></tr><tr><td> &iuml;</td><td> &#239;</td><td align="left"> <b>i</b></td><td> lowercase i, umlaut</td></tr><tr><td> &eth;</td><td> &#240;</td><td align="left"> <b>?</b></td><td> lowercase eth, Icelandic</td></tr><tr><td> &ntilde;</td><td> &#241;</td><td align="left"> <b>n</b></td><td> lowercase n, tilde</td></tr><tr><td> &ograve;</td><td> &#242;</td><td align="left"> <b>o</b></td><td> lowercase o, grave accent</td></tr><tr><td> &oacute;</td><td> &#243;</td><td align="left"> <b>o</b></td><td> lowercase o, acute accent</td></tr><tr><td> &ocirc;</td><td> &#244;</td><td align="left"> <b>o</b></td><td> lowercase o, circumflex accent</td></tr><tr><td> &otilde;</td><td> &#245;</td><td align="left"> <b>o</b></td><td> lowercase o, tilde</td></tr><tr><td> &ouml;</td><td> &#246;</td><td align="left"> <b>o</b></td><td> lowercase o, umlaut</td></tr><tr><td> &divide;</td><td> &#247;</td><td align="left"> <b>?</b></td><td> division sign</td></tr><tr><td> &oslash;</td><td> &#248;</td><td align="left"> <b>o</b></td><td> lowercase o, slash</td></tr><tr><td> &ugrave;</td><td> &#249;</td><td align="left"> <b>u</b></td><td> lowercase u, grave accent</td></tr><tr><td> &uacute;</td><td> &#250;</td><td align="left"> <b>u</b></td><td> lowercase u, acute accent</td></tr><tr><td> &ucirc;</td><td> &#251;</td><td align="left"> <b>u</b></td><td> lowercase u, circumflex accent</td></tr><tr><td bgcolor="#293BCB" valign="bottom"> <b>Name Code</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Number Code</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Glyph</b></td><td bgcolor="#293BCB" valign="bottom"> <b>Description</b></td></tr><tr><td> &uuml;</td><td> &#252;</td><td align="left"> <b>u</b></td><td> lowercase u, umlaut</td></tr><tr><td> &yacute;</td><td> &#253;</td><td align="left"> <b>y</b></td><td> lowercase y, acute accent</td></tr><tr><td> &thorn;</td><td> &#254;</td><td align="left"> <b>?</b></td><td> lowercase thorn, Icelandic</td></tr><tr><td> &yuml;</td><td> &#255;</td><td align="left"> <b>y</b></td><td> lowercase y, umlaut</td></tr></tbody></table> <br /><br/>

HTML Tutorials JavaScript Webmaster Tools Special Characters.

ISO Entities Name Code Number Code Glyph Description &lsquo; ‘ left single quote &rsquo; ’ right single quote &sbqu...

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