CINXE.COM

<!DOCTYPE html> <html class="client-nojs vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available" lang="el" dir="ltr"> <head> <meta charset="UTF-8"> <title>Εισαγωγή στην HTML - Βικιβιβλία</title> <script>(function(){var className="client-js vector-feature-language-in-header-enabled vector-feature-language-in-main-page-header-disabled vector-feature-sticky-header-disabled vector-feature-page-tools-pinned-disabled vector-feature-toc-pinned-clientpref-1 vector-feature-main-menu-pinned-disabled vector-feature-limited-width-clientpref-1 vector-feature-limited-width-content-enabled vector-feature-custom-font-size-clientpref-1 vector-feature-appearance-pinned-clientpref-1 vector-feature-night-mode-disabled skin-theme-clientpref-day vector-toc-available";var cookie=document.cookie.match(/(?:^|; )elwikibooksmwclientpreferences=([^;]+)/);if(cookie){cookie[1].split('%2C').forEach(function(pref){className=className.replace(new RegExp('(^| )'+pref.replace(/-clientpref-\w+$|[^\w-]+/g,'')+'-clientpref-\\w+( |$)'),'$1'+pref+'$2');});}document.documentElement.className=className;}());RLCONF={"wgBreakFrames":false,"wgSeparatorTransformTable":[",\t.",".\t,"],"wgDigitTransformTable":["",""], "wgDefaultDateFormat":"dmy","wgMonthNames":["","Ιανουάριος","Φεβρουάριος","Μάρτιος","Απρίλιος","Μάιος","Ιούνιος","Ιούλιος","Αύγουστος","Σεπτέμβριος","Οκτώβριος","Νοέμβριος","Δεκέμβριος"],"wgRequestId":"446b23de-5ed5-48dc-952e-a4706c7141d6","wgCanonicalNamespace":"","wgCanonicalSpecialPageName":false,"wgNamespaceNumber":0,"wgPageName":"Εισαγωγή_στην_HTML","wgTitle":"Εισαγωγή στην HTML","wgCurRevisionId":53785,"wgRevisionId":53785,"wgArticleId":1436,"wgIsArticle":true,"wgIsRedirect":false,"wgAction":"view","wgUserName":null,"wgUserGroups":["*"],"wgCategories":["Αλφαβητικά/Ε","Κύρια σελίδα","Γλώσσες προγραμματισμού"],"wgPageViewLanguage":"el","wgPageContentLanguage":"el","wgPageContentModel":"wikitext","wgRelevantPageName":"Εισαγωγή_στην_HTML","wgRelevantArticleId":1436,"wgIsProbablyEditable":true, "wgRelevantPageIsProbablyEditable":true,"wgRestrictionEdit":[],"wgRestrictionMove":[],"wgNoticeProject":"wikibooks","wgCiteReferencePreviewsActive":true,"wgMediaViewerOnClick":true,"wgMediaViewerEnabledByDefault":true,"wgVisualEditor":{"pageLanguageCode":"el","pageLanguageDir":"ltr","pageVariantFallbacks":"el"},"wgMFDisplayWikibaseDescriptions":{"search":true,"watchlist":true,"tagline":false,"nearby":true},"wgWMESchemaEditAttemptStepOversample":false,"wgWMEPageLength":50000,"wgCentralAuthMobileDomain":false,"wgEditSubmitButtonLabelPublish":true,"wgULSPosition":"interlanguage","wgULSisCompactLinksEnabled":false,"wgVector2022LanguageInHeader":true,"wgULSisLanguageSelectorEmpty":false,"wgCheckUserClientHintsHeadersJsApi":["brands","architecture","bitness","fullVersionList","mobile","model","platform","platformVersion"]};RLSTATE={"ext.globalCssJs.user.styles":"ready","site.styles":"ready","user.styles":"ready","ext.globalCssJs.user":"ready","user":"ready","user.options":"loading", "skins.vector.search.codex.styles":"ready","skins.vector.styles":"ready","skins.vector.icons":"ready","ext.wikimediamessages.styles":"ready","ext.visualEditor.desktopArticleTarget.noscript":"ready","ext.uls.interlanguage":"ready","wikibase.client.init":"ready","ext.wikimediaBadges":"ready"};RLPAGEMODULES=["site","mediawiki.page.ready","mediawiki.toc","skins.vector.js","ext.centralNotice.geoIP","ext.centralNotice.startUp","ext.urlShortener.toolbar","ext.centralauth.centralautologin","mmv.bootstrap","ext.visualEditor.desktopArticleTarget.init","ext.visualEditor.targetLoader","ext.echo.centralauth","ext.eventLogging","ext.wikimediaEvents","ext.navigationTiming","ext.uls.interface","ext.checkUser.clientHints"];</script> <script>(RLQ=window.RLQ||[]).push(function(){mw.loader.impl(function(){return["user.options@12s5i",function($,jQuery,require,module){mw.user.tokens.set({"patrolToken":"+\\","watchToken":"+\\","csrfToken":"+\\"}); }];});});</script> <link rel="stylesheet" href="/w/load.php?lang=el&modules=ext.uls.interlanguage%7Cext.visualEditor.desktopArticleTarget.noscript%7Cext.wikimediaBadges%7Cext.wikimediamessages.styles%7Cskins.vector.icons%2Cstyles%7Cskins.vector.search.codex.styles%7Cwikibase.client.init&only=styles&skin=vector-2022"> <script async="" src="/w/load.php?lang=el&modules=startup&only=scripts&raw=1&skin=vector-2022"></script> <meta name="ResourceLoaderDynamicStyles" content=""> <link rel="stylesheet" href="/w/load.php?lang=el&modules=site.styles&only=styles&skin=vector-2022"> <meta name="generator" content="MediaWiki 1.44.0-wmf.4"> <meta name="referrer" content="origin"> <meta name="referrer" content="origin-when-cross-origin"> <meta name="robots" content="max-image-preview:standard"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=1120"> <meta property="og:title" content="Εισαγωγή στην HTML - Βικιβιβλία"> <meta property="og:type" content="website"> <link rel="preconnect" href="//upload.wikimedia.org"> <link rel="alternate" media="only screen and (max-width: 640px)" href="//el.m.wikibooks.org/wiki/%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML"> <link rel="alternate" type="application/x-wiki" title="Επεξεργασία" href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit"> <link rel="icon" href="/static/favicon/wikibooks.ico"> <link rel="search" type="application/opensearchdescription+xml" href="/w/rest.php/v1/search" title="Βικιβιβλία (el)"> <link rel="EditURI" type="application/rsd+xml" href="//el.wikibooks.org/w/api.php?action=rsd"> <link rel="canonical" href="https://el.wikibooks.org/wiki/%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML"> <link rel="license" href="https://creativecommons.org/licenses/by-sa/4.0/deed.el"> <link rel="alternate" type="application/atom+xml" title="Βικιβιβλία ροή Atom" href="/w/index.php?title=%CE%95%CE%B9%CE%B4%CE%B9%CE%BA%CF%8C:%CE%A0%CF%81%CF%8C%CF%83%CF%86%CE%B1%CF%84%CE%B5%CF%82%CE%91%CE%BB%CE%BB%CE%B1%CE%B3%CE%AD%CF%82&feed=atom"> <link rel="dns-prefetch" href="//meta.wikimedia.org" /> <link rel="dns-prefetch" href="//login.wikimedia.org"> </head> <body class="skin--responsive skin-vector skin-vector-search-vue mediawiki ltr sitedir-ltr mw-hide-empty-elt ns-0 ns-subject mw-editable page-Εισαγωγή_στην_HTML rootpage-Εισαγωγή_στην_HTML skin-vector-2022 action-view"><a class="mw-jump-link" href="#bodyContent">Μετάβαση στο περιεχόμενο</a> <div class="vector-header-container"> <header class="vector-header mw-header"> <div class="vector-header-start"> <nav class="vector-main-menu-landmark" aria-label="Ιστότοπος"> <div id="vector-main-menu-dropdown" class="vector-dropdown vector-main-menu-dropdown vector-button-flush-left vector-button-flush-right" > <input type="checkbox" id="vector-main-menu-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-main-menu-dropdown" class="vector-dropdown-checkbox " aria-label="Κύριο μενού" > <label id="vector-main-menu-dropdown-label" for="vector-main-menu-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-menu mw-ui-icon-wikimedia-menu"></span> <span class="vector-dropdown-label-text">Κύριο μενού</span> </label> <div class="vector-dropdown-content"> <div id="vector-main-menu-unpinned-container" class="vector-unpinned-container"> <div id="vector-main-menu" class="vector-main-menu vector-pinnable-element"> <div class="vector-pinnable-header vector-main-menu-pinnable-header vector-pinnable-header-unpinned" data-feature-name="main-menu-pinned" data-pinnable-element-id="vector-main-menu" data-pinned-container-id="vector-main-menu-pinned-container" data-unpinned-container-id="vector-main-menu-unpinned-container" > <div class="vector-pinnable-header-label">Κύριο μενού</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-main-menu.pin">μετακίνηση στην πλαϊνή μπάρα</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-main-menu.unpin">απόκρυψη</button> </div> <div id="p-navigation" class="vector-menu mw-portlet mw-portlet-navigation" > <div class="vector-menu-heading"> Πλοήγηση </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="n-mainpage" class="mw-list-item"><a href="/wiki/%CE%9A%CF%8D%CF%81%CE%B9%CE%B1_%CE%A3%CE%B5%CE%BB%CE%AF%CE%B4%CE%B1" title="Επισκεφτείτε την αρχική σελίδα [z]" accesskey="z"><span>Κύρια Σελίδα</span></a></li><li id="n-portal" class="mw-list-item"><a href="/wiki/%CE%92%CE%B9%CE%BA%CE%B9%CE%B2%CE%B9%CE%B2%CE%BB%CE%AF%CE%B1:%CE%A0%CF%8D%CE%BB%CE%B7_%CE%9A%CE%BF%CE%B9%CE%BD%CF%8C%CF%84%CE%B7%CF%84%CE%B1%CF%82" title="Σχετικά με το εγχείρημα, τι μπορείτε να κάνετε, πού μπορείτε να βρείτε τι"><span>Πύλη Κοινότητας</span></a></li><li id="n-pump" class="mw-list-item"><a href="/wiki/%CE%92%CE%B9%CE%BA%CE%B9%CE%B2%CE%B9%CE%B2%CE%BB%CE%AF%CE%B1:%CE%91%CE%BD%CE%B1%CE%B3%CE%BD%CF%89%CF%83%CF%84%CE%AE%CF%81%CE%B9%CE%BF"><span>Αναγνωστήριο</span></a></li><li id="n-Wikijunior" class="mw-list-item"><a href="/wiki/Wikijunior"><span>Wikijunior</span></a></li><li id="n-Βιβλίο-μαγειρικής" class="mw-list-item"><a href="/wiki/%CE%92%CE%B9%CE%B2%CE%BB%CE%AF%CE%BF_%CE%BC%CE%B1%CE%B3%CE%B5%CE%B9%CF%81%CE%B9%CE%BA%CE%AE%CF%82"><span>Βιβλίο μαγειρικής</span></a></li><li id="n-recentchanges" class="mw-list-item"><a href="/wiki/%CE%95%CE%B9%CE%B4%CE%B9%CE%BA%CF%8C:%CE%A0%CF%81%CF%8C%CF%83%CF%86%CE%B1%CF%84%CE%B5%CF%82%CE%91%CE%BB%CE%BB%CE%B1%CE%B3%CE%AD%CF%82" title="Λίστα πρόσφατων αλλαγών στο wiki [r]" accesskey="r"><span>Πρόσφατες αλλαγές</span></a></li><li id="n-randompage" class="mw-list-item"><a href="/wiki/%CE%95%CE%B9%CE%B4%CE%B9%CE%BA%CF%8C:%CE%A4%CF%85%CF%87%CE%B1%CE%AF%CE%B1" title="Φόρτωση μιας τυχαίας σελίδας [x]" accesskey="x"><span>Τυχαία σελίδα</span></a></li><li id="n-help" class="mw-list-item"><a href="https://www.mediawiki.org/wiki/Special:MyLanguage/Help:Contents" title="Το μέρος για να βρείτε αυτό που ψάχνετε"><span>Βοήθεια</span></a></li> </ul> </div> </div> </div> </div> </div> </div> </nav> <a href="/wiki/%CE%9A%CF%8D%CF%81%CE%B9%CE%B1_%CE%A3%CE%B5%CE%BB%CE%AF%CE%B4%CE%B1" class="mw-logo"> <img class="mw-logo-icon" src="/static/images/icons/wikibooks.svg" alt="" aria-hidden="true" height="50" width="50"> <span class="mw-logo-container skin-invert"> <img class="mw-logo-wordmark" alt="Βικιβιβλία" src="/static/images/mobile/copyright/wikibooks-wordmark-el.svg" style="width: 7.5em; height: 0.9375em;"> <img class="mw-logo-tagline" alt="" src="/static/images/mobile/copyright/wikibooks-tagline-el.svg" width="120" height="10" style="width: 7.5em; height: 0.625em;"> </span> </a> </div> <div class="vector-header-end"> <div id="p-search" role="search" class="vector-search-box-vue vector-search-box-collapses vector-search-box-show-thumbnail vector-search-box-auto-expand-width vector-search-box"> <a href="/wiki/%CE%95%CE%B9%CE%B4%CE%B9%CE%BA%CF%8C:%CE%91%CE%BD%CE%B1%CE%B6%CE%AE%CF%84%CE%B7%CF%83%CE%B7" class="cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only search-toggle" title="Αναζήτηση στο Βικιβιβλία [f]" accesskey="f"><span class="vector-icon mw-ui-icon-search mw-ui-icon-wikimedia-search"></span> <span>Αναζήτηση</span> </a> <div class="vector-typeahead-search-container"> <div class="cdx-typeahead-search cdx-typeahead-search--show-thumbnail cdx-typeahead-search--auto-expand-width"> <form action="/w/index.php" id="searchform" class="cdx-search-input cdx-search-input--has-end-button"> <div id="simpleSearch" class="cdx-search-input__input-wrapper" data-search-loc="header-moved"> <div class="cdx-text-input cdx-text-input--has-start-icon"> <input class="cdx-text-input__input" type="search" name="search" placeholder="Αναζήτηση σε Βικιβιβλία" aria-label="Αναζήτηση σε Βικιβιβλία" autocapitalize="sentences" title="Αναζήτηση στο Βικιβιβλία [f]" accesskey="f" id="searchInput" > <span class="cdx-text-input__icon cdx-text-input__start-icon"></span> </div> <input type="hidden" name="title" value="Ειδικό:Αναζήτηση"> </div> <button class="cdx-button cdx-search-input__end-button">Αναζήτηση</button> </form> </div> </div> </div> <nav class="vector-user-links vector-user-links-wide" aria-label="Προσωπικά εργαλεία"> <div class="vector-user-links-main"> <div id="p-vector-user-menu-preferences" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-userpage" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <nav class="vector-appearance-landmark" aria-label="Εμφάνιση"> <div id="vector-appearance-dropdown" class="vector-dropdown " title="Change the appearance of the page's font size, width, and color" > <input type="checkbox" id="vector-appearance-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-appearance-dropdown" class="vector-dropdown-checkbox " aria-label="Εμφάνιση" > <label id="vector-appearance-dropdown-label" for="vector-appearance-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-appearance mw-ui-icon-wikimedia-appearance"></span> <span class="vector-dropdown-label-text">Εμφάνιση</span> </label> <div class="vector-dropdown-content"> <div id="vector-appearance-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <div id="p-vector-user-menu-notifications" class="vector-menu mw-portlet emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> <div id="p-vector-user-menu-overflow" class="vector-menu mw-portlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="//donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_el.wikibooks.org&uselang=el" class=""><span>Δωρεά</span></a> </li> <li id="pt-createaccount-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=%CE%95%CE%B9%CE%B4%CE%B9%CE%BA%CF%8C:%CE%94%CE%B7%CE%BC%CE%B9%CE%BF%CF%85%CF%81%CE%B3%CE%AF%CE%B1%CE%9B%CE%BF%CE%B3%CE%B1%CF%81%CE%B9%CE%B1%CF%83%CE%BC%CE%BF%CF%8D&returnto=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE+%CF%83%CF%84%CE%B7%CE%BD+HTML" title="Σας ενθαρρύνουμε να δημιουργήσετε ένα λογαριασμό και να συνδεθείτε· ωστόσο, δεν είναι υποχρεωτικό" class=""><span>Δημιουργία λογαριασμού</span></a> </li> <li id="pt-login-2" class="user-links-collapsible-item mw-list-item user-links-collapsible-item"><a data-mw="interface" href="/w/index.php?title=%CE%95%CE%B9%CE%B4%CE%B9%CE%BA%CF%8C:%CE%A3%CF%8D%CE%BD%CE%B4%CE%B5%CF%83%CE%B7%CE%A7%CF%81%CE%AE%CF%83%CF%84%CE%B7&returnto=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE+%CF%83%CF%84%CE%B7%CE%BD+HTML" title="Σας ενθαρρύνουμε να συνδεθείτε· ωστόσο, δεν είναι υποχρεωτικό [o]" accesskey="o" class=""><span>Σύνδεση</span></a> </li> </ul> </div> </div> </div> <div id="vector-user-links-dropdown" class="vector-dropdown vector-user-menu vector-button-flush-right vector-user-menu-logged-out" title="Περισσότερες επιλογές" > <input type="checkbox" id="vector-user-links-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-user-links-dropdown" class="vector-dropdown-checkbox " aria-label="Προσωπικά εργαλεία" > <label id="vector-user-links-dropdown-label" for="vector-user-links-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-ellipsis mw-ui-icon-wikimedia-ellipsis"></span> <span class="vector-dropdown-label-text">Προσωπικά εργαλεία</span> </label> <div class="vector-dropdown-content"> <div id="p-personal" class="vector-menu mw-portlet mw-portlet-personal user-links-collapsible-item" title="Μενού χρήστη" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-sitesupport" class="user-links-collapsible-item mw-list-item"><a href="//donate.wikimedia.org/wiki/Special:FundraiserRedirector?utm_source=donate&utm_medium=sidebar&utm_campaign=C13_el.wikibooks.org&uselang=el"><span>Δωρεά</span></a></li><li id="pt-createaccount" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=%CE%95%CE%B9%CE%B4%CE%B9%CE%BA%CF%8C:%CE%94%CE%B7%CE%BC%CE%B9%CE%BF%CF%85%CF%81%CE%B3%CE%AF%CE%B1%CE%9B%CE%BF%CE%B3%CE%B1%CF%81%CE%B9%CE%B1%CF%83%CE%BC%CE%BF%CF%8D&returnto=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE+%CF%83%CF%84%CE%B7%CE%BD+HTML" title="Σας ενθαρρύνουμε να δημιουργήσετε ένα λογαριασμό και να συνδεθείτε· ωστόσο, δεν είναι υποχρεωτικό"><span class="vector-icon mw-ui-icon-userAdd mw-ui-icon-wikimedia-userAdd"></span> <span>Δημιουργία λογαριασμού</span></a></li><li id="pt-login" class="user-links-collapsible-item mw-list-item"><a href="/w/index.php?title=%CE%95%CE%B9%CE%B4%CE%B9%CE%BA%CF%8C:%CE%A3%CF%8D%CE%BD%CE%B4%CE%B5%CF%83%CE%B7%CE%A7%CF%81%CE%AE%CF%83%CF%84%CE%B7&returnto=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE+%CF%83%CF%84%CE%B7%CE%BD+HTML" title="Σας ενθαρρύνουμε να συνδεθείτε· ωστόσο, δεν είναι υποχρεωτικό [o]" accesskey="o"><span class="vector-icon mw-ui-icon-logIn mw-ui-icon-wikimedia-logIn"></span> <span>Σύνδεση</span></a></li> </ul> </div> </div> <div id="p-user-menu-anon-editor" class="vector-menu mw-portlet mw-portlet-user-menu-anon-editor" > <div class="vector-menu-heading"> Σελίδες για αποσυνδεμένους συντάκτες <a href="/wiki/%CE%92%CE%BF%CE%AE%CE%B8%CE%B5%CE%B9%CE%B1:%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE" aria-label="Μάθετε περισσότερα σχετικά με την επεξεργασία"><span>μάθετε περισσότερα</span></a> </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="pt-anoncontribs" class="mw-list-item"><a href="/wiki/%CE%95%CE%B9%CE%B4%CE%B9%CE%BA%CF%8C:%CE%9F%CE%B9%CE%A3%CF%85%CE%BD%CE%B5%CE%B9%CF%83%CF%86%CE%BF%CF%81%CE%AD%CF%82%CE%9C%CE%BF%CF%85" title="Μια λίστα με τις επεξεργασίες που έγιναν από αυτή τη διεύθυνση IP [y]" accesskey="y"><span>Συνεισφορές</span></a></li><li id="pt-anontalk" class="mw-list-item"><a href="/wiki/%CE%95%CE%B9%CE%B4%CE%B9%CE%BA%CF%8C:%CE%97%CE%A3%CF%85%CE%B6%CE%AE%CF%84%CE%B7%CF%83%CE%AE%CE%9C%CE%BF%CF%85" title="Συζήτηση σχετικά με τις αλλαγές που έγιναν από αυτή τη διεύθυνση IP [n]" accesskey="n"><span>Σελίδα συζήτησης αυτής της διεύθυνσης IP</span></a></li> </ul> </div> </div> </div> </div> </nav> </div> </header> </div> <div class="mw-page-container"> <div class="mw-page-container-inner"> <div class="vector-sitenotice-container"> <div id="siteNotice"></div> </div> <div class="vector-column-start"> <div class="vector-main-menu-container"> <div id="mw-navigation"> <nav id="mw-panel" class="vector-main-menu-landmark" aria-label="Ιστότοπος"> <div id="vector-main-menu-pinned-container" class="vector-pinned-container"> </div> </nav> </div> </div> <div class="vector-sticky-pinned-container"> <nav id="mw-panel-toc" aria-label="Περιεχόμενα" data-event-name="ui.sidebar-toc" class="mw-table-of-contents-container vector-toc-landmark"> <div id="vector-toc-pinned-container" class="vector-pinned-container"> <div id="vector-toc" class="vector-toc vector-pinnable-element"> <div class="vector-pinnable-header vector-toc-pinnable-header vector-pinnable-header-pinned" data-feature-name="toc-pinned" data-pinnable-element-id="vector-toc" > <h2 class="vector-pinnable-header-label">Περιεχόμενα</h2> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-toc.pin">μετακίνηση στην πλαϊνή μπάρα</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-toc.unpin">απόκρυψη</button> </div> <ul class="vector-toc-contents" id="mw-panel-toc-list"> <li id="toc-mw-content-text" class="vector-toc-list-item vector-toc-level-1"> <a href="#" class="vector-toc-link"> <div class="vector-toc-text">Αρχή</div> </a> </li> <li id="toc-Εισαγωγή" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Εισαγωγή"> <div class="vector-toc-text"> <span class="vector-toc-numb">1</span> <span>Εισαγωγή</span> </div> </a> <ul id="toc-Εισαγωγή-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Βασικές_Γνώσεις" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Βασικές_Γνώσεις"> <div class="vector-toc-text"> <span class="vector-toc-numb">2</span> <span>Βασικές Γνώσεις</span> </div> </a> <button aria-controls="toc-Βασικές_Γνώσεις-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Εναλλαγή Βασικές Γνώσεις υποενότητας</span> </button> <ul id="toc-Βασικές_Γνώσεις-sublist" class="vector-toc-list"> <li id="toc-Ξεκίνημα" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Ξεκίνημα"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.1</span> <span>Ξεκίνημα</span> </div> </a> <ul id="toc-Ξεκίνημα-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Η_πρώτη_μας_ιστοσελίδα" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Η_πρώτη_μας_ιστοσελίδα"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.2</span> <span>Η πρώτη μας ιστοσελίδα</span> </div> </a> <ul id="toc-Η_πρώτη_μας_ιστοσελίδα-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Βασικές_Εντολές" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Βασικές_Εντολές"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.3</span> <span>Βασικές Εντολές</span> </div> </a> <ul id="toc-Βασικές_Εντολές-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Υπερσυνδέσεις_-_Links" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Υπερσυνδέσεις_-_Links"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.4</span> <span>Υπερσυνδέσεις - Links</span> </div> </a> <ul id="toc-Υπερσυνδέσεις_-_Links-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Εικόνες" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Εικόνες"> <div class="vector-toc-text"> <span class="vector-toc-numb">2.5</span> <span>Εικόνες</span> </div> </a> <ul id="toc-Εικόνες-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Προχωρημένες_εντολές" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Προχωρημένες_εντολές"> <div class="vector-toc-text"> <span class="vector-toc-numb">3</span> <span>Προχωρημένες εντολές</span> </div> </a> <button aria-controls="toc-Προχωρημένες_εντολές-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Εναλλαγή Προχωρημένες εντολές υποενότητας</span> </button> <ul id="toc-Προχωρημένες_εντολές-sublist" class="vector-toc-list"> <li id="toc-Δομή_σελίδας" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Δομή_σελίδας"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.1</span> <span>Δομή σελίδας</span> </div> </a> <ul id="toc-Δομή_σελίδας-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Πίνακες" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Πίνακες"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.2</span> <span>Πίνακες</span> </div> </a> <ul id="toc-Πίνακες-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Επικεφαλίδες" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Επικεφαλίδες"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.3</span> <span>Επικεφαλίδες</span> </div> </a> <ul id="toc-Επικεφαλίδες-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Λίστες" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Λίστες"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.4</span> <span>Λίστες</span> </div> </a> <ul id="toc-Λίστες-sublist" class="vector-toc-list"> <li id="toc-Αταξινόμητες_λίστες" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Αταξινόμητες_λίστες"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.4.1</span> <span>Αταξινόμητες λίστες</span> </div> </a> <ul id="toc-Αταξινόμητες_λίστες-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Ταξινομημένη_λίστα" class="vector-toc-list-item vector-toc-level-3"> <a class="vector-toc-link" href="#Ταξινομημένη_λίστα"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.4.2</span> <span>Ταξινομημένη λίστα</span> </div> </a> <ul id="toc-Ταξινομημένη_λίστα-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Χρώμα_Φόντου" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Χρώμα_Φόντου"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.5</span> <span>Χρώμα Φόντου</span> </div> </a> <ul id="toc-Χρώμα_Φόντου-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Χρώμα_Γραμματοσειράς" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Χρώμα_Γραμματοσειράς"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.6</span> <span>Χρώμα Γραμματοσειράς</span> </div> </a> <ul id="toc-Χρώμα_Γραμματοσειράς-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Εικόνα_για_φόντο" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Εικόνα_για_φόντο"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.7</span> <span>Εικόνα για φόντο</span> </div> </a> <ul id="toc-Εικόνα_για_φόντο-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Τυπωμένο_κείμενο" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Τυπωμένο_κείμενο"> <div class="vector-toc-text"> <span class="vector-toc-numb">3.8</span> <span>Τυπωμένο κείμενο</span> </div> </a> <ul id="toc-Τυπωμένο_κείμενο-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Ιδιότητες_(Attributes)" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Ιδιότητες_(Attributes)"> <div class="vector-toc-text"> <span class="vector-toc-numb">4</span> <span>Ιδιότητες (Attributes)</span> </div> </a> <button aria-controls="toc-Ιδιότητες_(Attributes)-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Εναλλαγή Ιδιότητες (Attributes) υποενότητας</span> </button> <ul id="toc-Ιδιότητες_(Attributes)-sublist" class="vector-toc-list"> <li id="toc-Η_Ιδιότητα_BORDER" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Η_Ιδιότητα_BORDER"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.1</span> <span>Η Ιδιότητα BORDER</span> </div> </a> <ul id="toc-Η_Ιδιότητα_BORDER-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Η_Ιδιότητα_ALT" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Η_Ιδιότητα_ALT"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.2</span> <span>Η Ιδιότητα ALT</span> </div> </a> <ul id="toc-Η_Ιδιότητα_ALT-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Η_ιδιότητα_WIDTH" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Η_ιδιότητα_WIDTH"> <div class="vector-toc-text"> <span class="vector-toc-numb">4.3</span> <span>Η ιδιότητα WIDTH</span> </div> </a> <ul id="toc-Η_ιδιότητα_WIDTH-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Πλαίσια" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Πλαίσια"> <div class="vector-toc-text"> <span class="vector-toc-numb">5</span> <span>Πλαίσια</span> </div> </a> <button aria-controls="toc-Πλαίσια-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Εναλλαγή Πλαίσια υποενότητας</span> </button> <ul id="toc-Πλαίσια-sublist" class="vector-toc-list"> <li id="toc-Εισαγωγή_2" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Εισαγωγή_2"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.1</span> <span>Εισαγωγή</span> </div> </a> <ul id="toc-Εισαγωγή_2-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Η_σελίδα_υποδομής" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Η_σελίδα_υποδομής"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.2</span> <span>Η σελίδα υποδομής</span> </div> </a> <ul id="toc-Η_σελίδα_υποδομής-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Οι_υπόλοιπες_σελίδες" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Οι_υπόλοιπες_σελίδες"> <div class="vector-toc-text"> <span class="vector-toc-numb">5.3</span> <span>Οι υπόλοιπες σελίδες</span> </div> </a> <ul id="toc-Οι_υπόλοιπες_σελίδες-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Σχετικά_Ζητήματα" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Σχετικά_Ζητήματα"> <div class="vector-toc-text"> <span class="vector-toc-numb">6</span> <span>Σχετικά Ζητήματα</span> </div> </a> <button aria-controls="toc-Σχετικά_Ζητήματα-sublist" class="cdx-button cdx-button--weight-quiet cdx-button--icon-only vector-toc-toggle"> <span class="vector-icon mw-ui-icon-wikimedia-expand"></span> <span>Εναλλαγή Σχετικά Ζητήματα υποενότητας</span> </button> <ul id="toc-Σχετικά_Ζητήματα-sublist" class="vector-toc-list"> <li id="toc-Εικόνες_2" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Εικόνες_2"> <div class="vector-toc-text"> <span class="vector-toc-numb">6.1</span> <span>Εικόνες</span> </div> </a> <ul id="toc-Εικόνες_2-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Κείμενο" class="vector-toc-list-item vector-toc-level-2"> <a class="vector-toc-link" href="#Κείμενο"> <div class="vector-toc-text"> <span class="vector-toc-numb">6.2</span> <span>Κείμενο</span> </div> </a> <ul id="toc-Κείμενο-sublist" class="vector-toc-list"> </ul> </li> </ul> </li> <li id="toc-Επίλογος" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Επίλογος"> <div class="vector-toc-text"> <span class="vector-toc-numb">7</span> <span>Επίλογος</span> </div> </a> <ul id="toc-Επίλογος-sublist" class="vector-toc-list"> </ul> </li> <li id="toc-Δείτε_επίσης" class="vector-toc-list-item vector-toc-level-1"> <a class="vector-toc-link" href="#Δείτε_επίσης"> <div class="vector-toc-text"> <span class="vector-toc-numb">8</span> <span>Δείτε επίσης</span> </div> </a> <ul id="toc-Δείτε_επίσης-sublist" class="vector-toc-list"> </ul> </li> </ul> </div> </div> </nav> </div> </div> <div class="mw-content-container"> <main id="content" class="mw-body"> <header class="mw-body-header vector-page-titlebar"> <nav aria-label="Περιεχόμενα" class="vector-toc-landmark"> <div id="vector-page-titlebar-toc" class="vector-dropdown vector-page-titlebar-toc vector-button-flush-left" > <input type="checkbox" id="vector-page-titlebar-toc-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-titlebar-toc" class="vector-dropdown-checkbox " aria-label="Εναλλαγή του πίνακα περιεχομένων" > <label id="vector-page-titlebar-toc-label" for="vector-page-titlebar-toc-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--icon-only " aria-hidden="true" ><span class="vector-icon mw-ui-icon-listBullet mw-ui-icon-wikimedia-listBullet"></span> <span class="vector-dropdown-label-text">Εναλλαγή του πίνακα περιεχομένων</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-titlebar-toc-unpinned-container" class="vector-unpinned-container"> </div> </div> </div> </nav> <h1 id="firstHeading" class="firstHeading mw-first-heading"><span class="mw-page-title-main">Εισαγωγή στην HTML</span></h1> <div id="p-lang-btn" class="vector-dropdown mw-portlet mw-portlet-lang" > <input type="checkbox" id="p-lang-btn-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-p-lang-btn" class="vector-dropdown-checkbox mw-interlanguage-selector" aria-label="Αυτό το λήμμα υπάρχει μόνο σε αυτή τη γλώσσα. Προσθέστε το λήμμα για άλλες γλώσσες" > <label id="p-lang-btn-label" for="p-lang-btn-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet cdx-button--action-progressive mw-portlet-lang-heading-0" aria-hidden="true" ><span class="vector-icon mw-ui-icon-language-progressive mw-ui-icon-wikimedia-language-progressive"></span> <span class="vector-dropdown-label-text">Προσθήκη γλωσσών</span> </label> <div class="vector-dropdown-content"> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> <div class="after-portlet after-portlet-lang"><span class="uls-after-portlet-link"></span><span class="wb-langlinks-add wb-langlinks-link"><a href="https://www.wikidata.org/wiki/Special:NewItem?site=elwikibooks&page=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE+%CF%83%CF%84%CE%B7%CE%BD+HTML" title="Προσθήκη διαγλωσσικών συνδέσεων" class="wbc-editpage">Προσθήκη συνδέσεων</a></span></div> </div> </div> </div> </header> <div class="vector-page-toolbar"> <div class="vector-page-toolbar-container"> <div id="left-navigation"> <nav aria-label="Ονοματοχώροι"> <div id="p-associated-pages" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-associated-pages" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-nstab-main" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML" title="Προβολή της σελίδας περιεχομένου [c]" accesskey="c"><span>Βικιβιβλίο</span></a></li><li id="ca-talk" class="vector-tab-noicon mw-list-item"><a href="/wiki/%CE%A3%CF%85%CE%B6%CE%AE%CF%84%CE%B7%CF%83%CE%B7:%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML" rel="discussion" title="Συζήτηση για τη σελίδα περιεχομένου [t]" accesskey="t"><span>Συζήτηση</span></a></li> </ul> </div> </div> <div id="vector-variants-dropdown" class="vector-dropdown emptyPortlet" > <input type="checkbox" id="vector-variants-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-variants-dropdown" class="vector-dropdown-checkbox " aria-label="Αλλαγή παραλλαγής γλώσσας" > <label id="vector-variants-dropdown-label" for="vector-variants-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Ελληνικά</span> </label> <div class="vector-dropdown-content"> <div id="p-variants" class="vector-menu mw-portlet mw-portlet-variants emptyPortlet" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </nav> </div> <div id="right-navigation" class="vector-collapsible"> <nav aria-label="Προβολές"> <div id="p-views" class="vector-menu vector-menu-tabs mw-portlet mw-portlet-views" > <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-view" class="selected vector-tab-noicon mw-list-item"><a href="/wiki/%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML"><span>Ανάγνωση</span></a></li><li id="ca-edit" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit" title="Επεξεργασία αυτής της σελίδας [e]" accesskey="e"><span>Επεξεργασία</span></a></li><li id="ca-history" class="vector-tab-noicon mw-list-item"><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=history" title="Παλιές αναθεωρήσεις της σελίδας [h]" accesskey="h"><span>Προβολή ιστορικού</span></a></li> </ul> </div> </div> </nav> <nav class="vector-page-tools-landmark" aria-label="Εργαλεία σελίδων"> <div id="vector-page-tools-dropdown" class="vector-dropdown vector-page-tools-dropdown" > <input type="checkbox" id="vector-page-tools-dropdown-checkbox" role="button" aria-haspopup="true" data-event-name="ui.dropdown-vector-page-tools-dropdown" class="vector-dropdown-checkbox " aria-label="Εργαλεία" > <label id="vector-page-tools-dropdown-label" for="vector-page-tools-dropdown-checkbox" class="vector-dropdown-label cdx-button cdx-button--fake-button cdx-button--fake-button--enabled cdx-button--weight-quiet" aria-hidden="true" ><span class="vector-dropdown-label-text">Εργαλεία</span> </label> <div class="vector-dropdown-content"> <div id="vector-page-tools-unpinned-container" class="vector-unpinned-container"> <div id="vector-page-tools" class="vector-page-tools vector-pinnable-element"> <div class="vector-pinnable-header vector-page-tools-pinnable-header vector-pinnable-header-unpinned" data-feature-name="page-tools-pinned" data-pinnable-element-id="vector-page-tools" data-pinned-container-id="vector-page-tools-pinned-container" data-unpinned-container-id="vector-page-tools-unpinned-container" > <div class="vector-pinnable-header-label">Εργαλεία</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-page-tools.pin">μετακίνηση στην πλαϊνή μπάρα</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-page-tools.unpin">απόκρυψη</button> </div> <div id="p-cactions" class="vector-menu mw-portlet mw-portlet-cactions emptyPortlet vector-has-collapsible-items" title="Περισσότερες επιλογές" > <div class="vector-menu-heading"> Ενέργειες </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="ca-more-view" class="selected vector-more-collapsible-item mw-list-item"><a href="/wiki/%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML"><span>Ανάγνωση</span></a></li><li id="ca-more-edit" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit" title="Επεξεργασία αυτής της σελίδας [e]" accesskey="e"><span>Επεξεργασία</span></a></li><li id="ca-more-history" class="vector-more-collapsible-item mw-list-item"><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=history"><span>Προβολή ιστορικού</span></a></li> </ul> </div> </div> <div id="p-tb" class="vector-menu mw-portlet mw-portlet-tb" > <div class="vector-menu-heading"> Γενικά </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="t-whatlinkshere" class="mw-list-item"><a href="/wiki/%CE%95%CE%B9%CE%B4%CE%B9%CE%BA%CF%8C:%CE%A4%CE%B9%CE%A3%CF%85%CE%BD%CE%B4%CE%AD%CE%B5%CE%B9%CE%95%CE%B4%CF%8E/%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML" title="Κατάλογος όλων των σελίδων wiki που έχουν συνδέσμους προς εδώ [j]" accesskey="j"><span>Τι συνδέει εδώ</span></a></li><li id="t-recentchangeslinked" class="mw-list-item"><a href="/wiki/%CE%95%CE%B9%CE%B4%CE%B9%CE%BA%CF%8C:%CE%A3%CF%85%CE%BD%CE%B4%CE%B5%CE%B4%CE%B5%CE%BC%CE%AD%CE%BD%CE%B5%CF%82%CE%A0%CF%81%CF%8C%CF%83%CF%86%CE%B1%CF%84%CE%B5%CF%82%CE%91%CE%BB%CE%BB%CE%B1%CE%B3%CE%AD%CF%82/%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML" rel="nofollow" title="Πρόσφατες αλλαγές σε σελίδες που παραπέμπουν οι σύνδεσμοι αυτής της σελίδας [k]" accesskey="k"><span>Σχετικές αλλαγές</span></a></li><li id="t-upload" class="mw-list-item"><a href="//commons.wikimedia.org/wiki/Special:UploadWizard?uselang=el" title="Ανέβασμα αρχείων [u]" accesskey="u"><span>Ανέβασμα αρχείου</span></a></li><li id="t-specialpages" class="mw-list-item"><a href="/wiki/%CE%95%CE%B9%CE%B4%CE%B9%CE%BA%CF%8C:%CE%95%CE%B9%CE%B4%CE%B9%CE%BA%CE%AD%CF%82%CE%A3%CE%B5%CE%BB%CE%AF%CE%B4%CE%B5%CF%82" title="Κατάλογος με όλες τις ειδικές σελίδες [q]" accesskey="q"><span>Ειδικές σελίδες</span></a></li><li id="t-permalink" class="mw-list-item"><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&oldid=53785" title="Μόνιμος σύνδεσμος προς αυτήν την αναθεώρηση αυτής της σελίδας"><span>Σταθερός σύνδεσμος</span></a></li><li id="t-info" class="mw-list-item"><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=info" title="Περισσότερες πληροφορίες σχετικά με αυτήν τη σελίδα"><span>Πληροφορίες σελίδας</span></a></li><li id="t-cite" class="mw-list-item"><a href="/w/index.php?title=%CE%95%CE%B9%CE%B4%CE%B9%CE%BA%CF%8C:%CE%A0%CE%B1%CF%81%CE%B1%CF%80%CE%BF%CE%BC%CF%80%CE%AE%CE%91%CF%85%CF%84%CE%AE%CE%A4%CE%B7%CE%A3%CE%B5%CE%BB%CE%AF%CE%B4%CE%B1&page=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&id=53785&wpFormIdentifier=titleform" title="Πληροφορίες για το πώς να δημιουργήσετε παραπομπή αυτής της σελίδας"><span>Παραπομπή αυτής της σελίδας</span></a></li><li id="t-urlshortener" class="mw-list-item"><a href="/w/index.php?title=%CE%95%CE%B9%CE%B4%CE%B9%CE%BA%CF%8C:UrlShortener&url=https%3A%2F%2Fel.wikibooks.org%2Fwiki%2F%25CE%2595%25CE%25B9%25CF%2583%25CE%25B1%25CE%25B3%25CF%2589%25CE%25B3%25CE%25AE_%25CF%2583%25CF%2584%25CE%25B7%25CE%25BD_HTML"><span>Λάβετε συντομευμένη διεύθυνση URL</span></a></li><li id="t-urlshortener-qrcode" class="mw-list-item"><a href="/w/index.php?title=%CE%95%CE%B9%CE%B4%CE%B9%CE%BA%CF%8C:QrCode&url=https%3A%2F%2Fel.wikibooks.org%2Fwiki%2F%25CE%2595%25CE%25B9%25CF%2583%25CE%25B1%25CE%25B3%25CF%2589%25CE%25B3%25CE%25AE_%25CF%2583%25CF%2584%25CE%25B7%25CE%25BD_HTML"><span>Λήψη κωδικού QR</span></a></li> </ul> </div> </div> <div id="p-coll-print_export" class="vector-menu mw-portlet mw-portlet-coll-print_export" > <div class="vector-menu-heading"> Εκτύπωση/εξαγωγή </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> <li id="coll-create_a_book" class="mw-list-item"><a href="/w/index.php?title=%CE%95%CE%B9%CE%B4%CE%B9%CE%BA%CF%8C:%CE%A3%CF%85%CE%BB%CE%BB%CE%BF%CE%B3%CE%AE&bookcmd=book_creator&referer=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE+%CF%83%CF%84%CE%B7%CE%BD+HTML"><span>Δημιουργία βιβλίου</span></a></li><li id="coll-download-as-rl" class="mw-list-item"><a href="/w/index.php?title=%CE%95%CE%B9%CE%B4%CE%B9%CE%BA%CF%8C:DownloadAsPdf&page=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=show-download-screen"><span>Κατέβασμα ως PDF</span></a></li><li id="t-print" class="mw-list-item"><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&printable=yes" title="Εκτυπώσιμη έκδοση αυτής της σελίδας [p]" accesskey="p"><span>Εκτυπώσιμη έκδοση</span></a></li> </ul> </div> </div> <div id="p-wikibase-otherprojects" class="vector-menu mw-portlet mw-portlet-wikibase-otherprojects emptyPortlet" > <div class="vector-menu-heading"> Σε άλλα εγχειρήματα </div> <div class="vector-menu-content"> <ul class="vector-menu-content-list"> </ul> </div> </div> </div> </div> </div> </div> </nav> </div> </div> </div> <div class="vector-column-end"> <div class="vector-sticky-pinned-container"> <nav class="vector-page-tools-landmark" aria-label="Εργαλεία σελίδων"> <div id="vector-page-tools-pinned-container" class="vector-pinned-container"> </div> </nav> <nav class="vector-appearance-landmark" aria-label="Εμφάνιση"> <div id="vector-appearance-pinned-container" class="vector-pinned-container"> <div id="vector-appearance" class="vector-appearance vector-pinnable-element"> <div class="vector-pinnable-header vector-appearance-pinnable-header vector-pinnable-header-pinned" data-feature-name="appearance-pinned" data-pinnable-element-id="vector-appearance" data-pinned-container-id="vector-appearance-pinned-container" data-unpinned-container-id="vector-appearance-unpinned-container" > <div class="vector-pinnable-header-label">Εμφάνιση</div> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-pin-button" data-event-name="pinnable-header.vector-appearance.pin">μετακίνηση στην πλαϊνή μπάρα</button> <button class="vector-pinnable-header-toggle-button vector-pinnable-header-unpin-button" data-event-name="pinnable-header.vector-appearance.unpin">απόκρυψη</button> </div> </div> </div> </nav> </div> </div> <div id="bodyContent" class="vector-body" aria-labelledby="firstHeading" data-mw-ve-target-container> <div class="vector-body-before-content"> <div class="mw-indicators"> </div> <div id="siteSub" class="noprint">Από Βικιβιβλία</div> </div> <div id="contentSub"><div id="mw-content-subtitle"></div></div> <div id="mw-content-text" class="mw-body-content"><div class="mw-content-ltr mw-parser-output" lang="el" dir="ltr"><p><span class="noprint"><span typeof="mw:File"><a href="/wiki/%CE%92%CE%BF%CE%AE%CE%B8%CE%B5%CE%B9%CE%B1:%CE%A3%CF%84%CE%AC%CE%B4%CE%B9%CE%B1_%CE%95%CE%BE%CE%AD%CE%BB%CE%B9%CE%BE%CE%B7%CF%82" title="50% ανεπτυγμένο  στις 15 Οκτωβρίου, 2005"><img alt="50% ανεπτυγμένο  στις 15 Οκτωβρίου, 2005" src="//upload.wikimedia.org/wikipedia/commons/thumb/c/c2/50%25.svg/9px-50%25.svg.png" decoding="async" width="9" height="9" class="mw-file-element" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/c/c2/50%25.svg/14px-50%25.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/c/c2/50%25.svg/18px-50%25.svg.png 2x" data-file-width="9" data-file-height="9" /></a></span><small> (15 Οκτωβρίου, 2005)</small></span> </p> <meta property="mw:PageProp/toc" /> <div class="mw-heading mw-heading2"><h2 id="Εισαγωγή"><span id=".CE.95.CE.B9.CF.83.CE.B1.CE.B3.CF.89.CE.B3.CE.AE"></span>Εισαγωγή</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=1" title="Επεξεργασία ενότητας: Εισαγωγή"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Στο βικιβιβλίο αυτό θα επιχειρήσουμε να κάνουμε μία εισαγωγή στον κώδικα html. Αρκετοί ίσως να θεωρούσαν το εγχείρημα αυτό άσκοπο καθώς ο κώδικας δεν πολυχρησιμοποιείται. Αυτό συμβαίνει διότι υπάρχουν αρκετά προγράμματα που προσφέρουν ιδιαίτερα εύχρηστο και απλό περιβάλλον για την κατασκευή επαγγελματικών και κομψών ιστοσελίδων με πολλές δυνατότητες σε ελάχιστο χρόνο και χωρίς να απαιτούν από τον χρήστη ειδικές γνώσεις. Επιπλέον η γλώσσα html τείνει να εξαφανιστεί καθώς υπάρχουν αρκετές άλλες περισσότερο εξελιγμένες και με μεγαλύτερες δυνατότητες όπως η XML, η sHTML κ.α. Ωστόσο η άποψη αυτή (ότι είναι άσκοπη η γνώση της html) είναι αβάσιμη καθώς αρκετές φορές θα χρειαστεί κάποιος να επέμβει στον κώδικα τόσο για αλλαγές ή ενέργειες τις οποίες το πρόγραμμα που χρησιμοποιούμε δεν μπόρεσε να εκτελέσει όσο και για διορθώσεις σφαλμάτων που μπορεί να οφείλονται σε πολλούς λόγους όπως π.χ. ασυμβατότητα προγράμματος κατασκευής ιστοσελίδων και παροχέα φιλοξενίας ιστοσελίδας. Στις περιπτώσεις αυτές αλλά και σε πολλές άλλες η γνώση html όχι μόνο μας διευκολύνει αλλά δύναται και να είναι η μόνη λύση για την κατασκευή μίας ιστοσελίδας. Ενδεικτικά μπορούμε να αναφέρουμε ότι κατά την δημιουργία λημμάτων στην Βικιπαίδεια και με δεδομένο ότι αυτή γίνεται σε ένα κειμενογράφο χωρίς πολλές δυνατότητες (σε σχέση π.χ. με το Word) η γνώση html μπορεί να δημιουργήσει εντυπωσιακές σελίδες με πλαίσια, φωτογραφίες, κ.α. Χωρίς την γνώση αυτή δεν θα ήταν δυνατόν κάτι τέτοιο να καταστεί εφικτό. </p><p><br /> Το Βικιβιβλίο αυτό είναι γραμμένο έτσι ώστε να είναι κατανοητό ακόμα και στον αρχάριο χρήστη υπολογιστή. Έτσι ορισμένες φορές η επιστημονική ακρίβεια δύναται να υποχωρήσει προς χάριν της απλοποίησης και της κατανόησης. Ωστόσο αυτό δεν γίνεται ποτέ εις βάρος της επιστήμης των υπολογιστών. </p> <div class="mw-heading mw-heading2"><h2 id="Βασικές_Γνώσεις"><span id=".CE.92.CE.B1.CF.83.CE.B9.CE.BA.CE.AD.CF.82_.CE.93.CE.BD.CF.8E.CF.83.CE.B5.CE.B9.CF.82"></span>Βασικές Γνώσεις</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=2" title="Επεξεργασία ενότητας: Βασικές Γνώσεις"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Πριν ξεκινήσουμε την εισαγωγή στον κώδικα αυτό σκόπιμο θεωρούμε να τονίσουμε ότι η html δεν είναι γλώσσα προγραμματισμού. Δηλαδή μέσα από την html δεν μπορούμε να κατασκευάσουμε προγράμματα (ακόμα και η αλληλεπίδραση χρήστη-διακομιστή πολλές φορές καθίσταται δύσκολη), αλλά μόνο να δώσουμε στον περιηγητή (web browser) τις οδηγίες για το τι θα εμφανίζει στο χρήστη που θα προσπελάσει μία ιστοσελίδα. </p> <div class="mw-heading mw-heading3"><h3 id="Ξεκίνημα"><span id=".CE.9E.CE.B5.CE.BA.CE.AF.CE.BD.CE.B7.CE.BC.CE.B1"></span>Ξεκίνημα</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=3" title="Επεξεργασία ενότητας: Ξεκίνημα"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Για να γράψουμε κώδικα html δεν χρειαζόμαστε κάποιο πρόγραμμα που να μεταφράζει σε γλώσσα υπολογιστή ή μέσα από το οποίο να γίνεται η όλη διαδικασία κατασκευής ιστοσελίδων. Έτσι ένας απλός επεξεργαστής κειμένου (text editor) όπως το Σημειωματάριο (Notepad) των Windows ή το Kate των Linux είναι αρκετός για να φτιάξουμε τις ιστοσελίδες μας. </p><p>Το αρχείο μας θα πρέπει να έχει κατάληξη .htm ή .html για να θεωρείται ιστοσελίδα από το λειτουργικό μας σύστημα και να ανοίγει με το κατάλληλο πρόγραμμα περιήγησης (π.χ. Internet Explorer, Mozilla, Firefox, Netscape, κ.α.). Πρέπει επίσης να αναφέρουμε ότι τα προγράμματα περιήγησης (όπως τα παραπάνω) έχουν ενσωματωμένες τις οδηγίες για την "μετάφραση" των εντολών html που περιέχονται στο αρχείο μας. Δύναται επίσης να υπάρχουν διαφορές από web browser σε web browser που οφείλονται σε διαφορετικό "στυλ μετάφρασης". </p> <div class="mw-heading mw-heading3"><h3 id="Η_πρώτη_μας_ιστοσελίδα"><span id=".CE.97_.CF.80.CF.81.CF.8E.CF.84.CE.B7_.CE.BC.CE.B1.CF.82_.CE.B9.CF.83.CF.84.CE.BF.CF.83.CE.B5.CE.BB.CE.AF.CE.B4.CE.B1"></span>Η πρώτη μας ιστοσελίδα</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=4" title="Επεξεργασία ενότητας: Η πρώτη μας ιστοσελίδα"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Εφόσον έχουμε ανοίξει έναν text editor (όπως το Σημειωματάριο ή Notepad των Windows, που μπορεί να βρεθεί στο Έναρξη > Προγράμματα > Βοηθήματα ή Έναρξη > Εκτέλεση > "notepad" και [OK] ή όπως το TextEdit στα Mac που βρίσκεται στα Applications) είμαστε έτοιμοι να γράψουμε κώδικα html. Η βασική εντολή που πρέπει γράψουμε προκειμένου το πρόγραμμα περιήγησης να "αναγνωρίσει" τον κώδικα είναι <html>. Γράφουμε html μέσα σε <> τα οποία επεξηγούν στο πρόγραμμα περιήγησης ότι το περιεχόμενό τους συνιστά εντολή. Κάθε εντολή του κώδικα html πρέπει και να κλείνει (σχεδόν το 95% των εντολών, υπάρχουν και μερικές όπως θα δούμε που δεν κλείνουν). Με το κλείσιμο εννοούμε ότι παύει να ισχύει η ιδιότητα που έχουμε θέσει. Έτσι στο τέλος του κειμένου θα πρέπει να κλείσουμε την εντολή <html> για να κλείσουμε και το αρχείο μας. Όταν βάλουμε εντολή για έντονα γράμματα (Bold) θα πρέπει να την κλείσουμε εκεί που επιθυμούμε να σταματήσουν να εμφανίζονται έντονα γράμματα. Κάθε εντολή κλεισίματος είναι παρόμοια με την εντολή ανοίγματος μόνο που περιέχει τον χαρακτήρα / αμέσως μετά το <. Δηλαδή η εντολή κλεισίματος της <html> είναι: </html>. </p><p>Έτσι μέχρι στιγμής έχουμε το εξής (καλό είναι μετά από κάθε εντολή να αλλάζουμε γραμμή): </p><p><html> <br /> </html> </p><p>Αυτή είναι η πρώτη μας ιστοσελίδα που βέβαια δεν περιέχει απολύτως τίποτα. Αν την αποθηκεύσουμε ως paradeigma.html και την ανοίξουμε με έναν περιηγητή ιστοσελίδων θα δούμε ένα γκρι παράθυρο χωρίς να εμφανίζει τίποτα. </p><p>Για να γράψουμε κάτι, πληκτρολογούμε ανάμεσα στην εντολή ανοίγματος και κλεισίματος το κείμενο που επιθυμούμε, π.χ.: </p><p><html> <br />Αυτό είναι ένα παράδειγμα <br /> </html> </p><p>Κατά την περιήγηση αυτής της σελίδας θα εμφανιστεί μόνο το κείμενο: Αυτό είναι ένα παράδειγμα </p><p>Στο σημείο αυτό πολύ σημαντικό είναι να διευκρινίσουμε το εξής: κατά την ανάγνωση του κώδικα από το πρόγραμμα η οποιαδήποτε μορφοποίηση θέτουμε στον κειμενογράφο ακυρώνεται. Έτσι αν πατήσουμε στο παραπάνω παράδειγμα ENTER ανάμεσα στο "είναι" και στο "ένα" ενώ στον επεξεργαστή κειμένου θα εμφανιστεί η αλλαγή γραμμής (ή παραγράφου) στην ιστοσελίδα μας δεν θα εμφανιστεί. Για να αλλάξουμε συνεπώς παράγραφο θα πρέπει να βάλουμε την ειδική εντολή <P> η οποία δεν κλείνει. Ομοίως αν στον επεξεργαστή μας έχουμε κείμενο υπογραμμισμένο δεν θα εμφανιστεί η υπογράμμιση στην ιστοσελίδα (γι' αυτό άλλωστε ένας απλός κειμενογράφος χωρίς πολλές δυνατότητες είναι αρκετός και μάλιστα προτιμητέος). </p> <div class="mw-heading mw-heading3"><h3 id="Βασικές_Εντολές"><span id=".CE.92.CE.B1.CF.83.CE.B9.CE.BA.CE.AD.CF.82_.CE.95.CE.BD.CF.84.CE.BF.CE.BB.CE.AD.CF.82"></span>Βασικές Εντολές</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=5" title="Επεξεργασία ενότητας: Βασικές Εντολές"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Στο σημείο αυτό θα περάσουμε στις πρώτες βασικές εντολές που θα πρέπει να γνωρίζουμε για να έχουμε την επιθυμητή μορφοποίηση στο κείμενο μας. </p><p><B> - Έντονη γραφή (bold) <br /> <U> - Υπογραμμισμένα (Underlined)<br /> </p><p> <I> - Πλάγια γραφή (Italics)</p><p> <CENTER> - Κεντρική στοίχιση<br /> <LEFT> - Αριστερή στοίχιση<br /> <RIGHT> - Δεξιά στοίχιση<br /> </p><p> Οι παραπάνω εντολές κλείνουν ( </B>, </U>, </I>, </CENTER> </LEFT>, </RIGHT>) </p><p> <P> - Παράγραφος<br /> <BR> - Συνέχιση γραφής στην αμέσως αποκάτω γραμμή<br /> <HR> - Η εντολή αυτή χαράσσει μία οριζόντια γραμμή στην σελίδα μας (χρησιμοποιείται κυρίως όταν αλλάζουμε θεματική ενότητα) </p><p> Οι τρεις παραπάνω εντολές δεν κλείνουν </p><div class="mw-heading mw-heading3"><h3 id="Υπερσυνδέσεις_-_Links"><span id=".CE.A5.CF.80.CE.B5.CF.81.CF.83.CF.85.CE.BD.CE.B4.CE.AD.CF.83.CE.B5.CE.B9.CF.82_-_Links"></span>Υπερσυνδέσεις - Links</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=6" title="Επεξεργασία ενότητας: Υπερσυνδέσεις - Links"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Το ξεχωριστό με τις ιστοσελίδες που τις κάνει να διαφοροποιούνται από το απλό κείμενο είναι ότι παρέχουν υπερσυνδέσεις, δηλαδή μέσα από μία ιστοσελίδα μπορεί κανείς να παραπεμφθεί σε πλήθος άλλων (εξωτερικών ή εσωτερικών) ιστοσελίδων. Το χαρακτηριστικό αυτό είναι ένα από τα κυριότερα που έχουν ωθήσει στην τωρινή ανάπτυξη του διαδικτύου. </p><p>Ο κώδικας για την δημιουργία υπερσύνδεσης είναι: <A HREF="www.tolinkmas.com">ΜΠΛΑ-ΜΠΛΑ</Α>. Στον παραπάνω κώδικα το πρώτο μέρος είναι <A HREF= όπου δηλώνεται η ύπαρξη ιστοσελίδας μέσα στα εισαγωγικά (τα οποία τοποθετούμε, δεν είναι δηλαδή για χάριν της ανάλυσης μας) την διεύθυνση στην οποία παραπέμπουμε. Μετά τον χαρακτήρα > δηλαδή στο ΜΠΛΑ-ΜΠΛΑ γράφουμε ότι θέλουμε να εμφανίζεται στην ιστοσελίδα μας και τέλος το </A> είναι η εντολή κλεισίματος του link μας. </p><p><br /> Παράδειγμα: <A HREF="<a class="external free" href="https://www.el.wikipedia.org">http://www.el.wikipedia.org</a>">Κάντε κλικ εδώ για να μπείτε στην ιστοσελίδα της Βικιπαίδειας</A>. Στο παράδειγμα μας το "Κάντε κλικ εδώ για να μπείτε στην ιστοσελίδα της Βικιπαίδειας" εμφανίζεται στη ιστοσελίδα μας μπλε και υπογραμμισμένο που υποδηλώνει πως όταν κάνουμε κλικ πάνω σε αυτές τις λέξεις θα μεταβούμε στην διεύθυνση: "<a class="external free" href="https://www.el.wikipedia.org">http://www.el.wikipedia.org</a>". </p> <div class="mw-heading mw-heading3"><h3 id="Εικόνες"><span id=".CE.95.CE.B9.CE.BA.CF.8C.CE.BD.CE.B5.CF.82"></span>Εικόνες</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=7" title="Επεξεργασία ενότητας: Εικόνες"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Προκειμένου η ιστοσελίδα μας να είναι ελκυστική δεν θα πρέπει να αρκούμαστε στο απλό κείμενο μας. Θα πρέπει για να μην γίνεται βαρετή η ανάγνωση να προστίθενται εικόνες που θα κάνουν την ανάγνωση πιο ευχάριστη και την ιστοσελίδα μας περισσότερο κομψή και ευπαρουσίαστη. </p><p>Η Εντολή για την προσθήκη εικόνας είναι: <IMG SRC="/εκείπουείναιηεικόναμας/εικόνα.gif">. Το εκείπουείναιηεικόναμας δηλώνει την τοποθεσία στην οποία θα ανατρέχει ο περιηγητής για να αντλεί την εικόνα και να την εμφανίζει στην ιστοσελίδα μας. Έτσι αν κάποιος έχει ανεβάσει την ιστοσελίδα του σε έναν παροχέα αυτός του προσφέρει χώρο για τις ιστοσελίδες και τα υπόλοιπα αρχεία του. Αν η διεύθυνση όπου βρίσκεται η ιστοσελίδα μας είναι για παράδειγμα www.tositemoy.gr τότε η εικόνα μπορεί να βρίσκεται στον φάκελο: www.tositemoy.gr/eikones. </p><p>Πολλές φορές κατασκευάζουμε τις ιστοσελίδες μας σε έναν τοπικό φάκελο στον σκληρό μας ή σε άλλο αποθηκευτικό μέσο. Κατασκευάζουμε στον φάκελο με την ιστοσελίδα μας έναν υποφάκελο με το όνομα π.χ. images (για να το θυμόμαστε ευκολότερα) όπου αποθηκεύουμε τις εικόνες που εμφανίζονται στην ιστοσελίδα μας. Αργότερα όταν κατασκευάσουμε όλο το site ανεβάζουμε όλα τα αρχεία (όχι μόνο τις ιστοσελίδες *.html αλλά και τους φακέλους με τις εικόνες, τους ήχους, τα βίντεο, κ.λ.π.). Στην αμέσως προηγούμενη περίπτωση (η οποία είναι και η συνηθέστερη) η εντολή θα είναι κάπως έτσι: <IMG SRC="/images/image1.gif">. Συνιστάται η χρήση όχι ολόκληρης της διαδρομής του δίσκου (π.χ. c:/istoselida/images/image1.gif) αλλά της συντμημένης, καθώς κατά το ανέβασμα θα πρέπει να την αλλάξουμε. Η συντμημένη μορφή μας εξασφαλίζει ότι η εικόνα μας θα λειτουργεί τόσο στην περιήγηση τοπικά όσο και στο ίντερνετ. Τέλος θα πρέπει να αναφέρουμε όπως είναι προφανές ότι η εντολή αυτή δεν κλείνει. </p> <div class="mw-heading mw-heading2"><h2 id="Προχωρημένες_εντολές"><span id=".CE.A0.CF.81.CE.BF.CF.87.CF.89.CF.81.CE.B7.CE.BC.CE.AD.CE.BD.CE.B5.CF.82_.CE.B5.CE.BD.CF.84.CE.BF.CE.BB.CE.AD.CF.82"></span>Προχωρημένες εντολές</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=8" title="Επεξεργασία ενότητας: Προχωρημένες εντολές"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Στην ενότητα αυτή θα εξετάσουμε ορισμένες περισσότερο προχωρημένες εντολές της html. Αν και με αυτές που ήδη έχουμε δει μέχρι τώρα επαρκούν για την κατασκευή μίας ιστοσελίδας οι επόμενες θα μας βοηθήσουν στο να βελτιώσουμε αλλά και να εμπλουτίσουμε τις σελίδες μας. </p> <div class="mw-heading mw-heading3"><h3 id="Δομή_σελίδας"><span id=".CE.94.CE.BF.CE.BC.CE.AE_.CF.83.CE.B5.CE.BB.CE.AF.CE.B4.CE.B1.CF.82"></span>Δομή σελίδας</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=9" title="Επεξεργασία ενότητας: Δομή σελίδας"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><HEAD> Η εντολή αυτή μπαίνει στην αρχή της σελίδας ώστε να περικλείει εντολές που περιέχουν πληροφορίες προς τον browser αλλά δεν είναι μέρος της σελίδας. Παράδειγμα: <HEAD> .... </HEAD> </p><p><BODY> Η εντολή αυτή δηλώνει στο πρόγραμμα που χρησιμοποιούμε για την περιήγηση ότι ο παρακάτω κώδικας και τα δεδομένα που γράφουμε ανήκουν στο κυρίως μέρος της ιστοσελίδας. Πρακτικά μετά την εντολή <HTML> και την HEAD με ότι περικλείει, μπαίνει η <BODY> ενώ κλείνει συνήθως αμέσως πριν από την </HTML> (η εντολή κλεισίματος όπως αναμέναμε είναι: </BODY>). </p><p><TITLE> Η εντολή αυτή δηλώνει στον web browser τι τίτλο επιθυμούμε να έχει η ιστοσελίδα. Ο τίτλος εμφανίζεται στην επάνω λωρίδα του παραθύρου του web browser (εκεί όπου εμφανίζεται ο τίτλος της εφαρμογής / προγράμματος που χρησιμοποιούμε). Η TITLE είναι απαραίτητο να μπει μέσα στην HEAD. Παράδειγμα: <HEAD> <TITLE>My Homepage</TITLE> </HEAD> </p> <div class="mw-heading mw-heading3"><h3 id="Πίνακες"><span id=".CE.A0.CE.AF.CE.BD.CE.B1.CE.BA.CE.B5.CF.82"></span>Πίνακες</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=10" title="Επεξεργασία ενότητας: Πίνακες"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Πολλές φορές σε μία ιστοσελίδα θα πρέπει να απεικονίσουμε δεδομένα σε μορφή πίνακα για καλύτερη ταξινόμηση ή για ευκολότερη παρουσίαση. Πέρα από την απεικόνιση δεδομένων όμως οι πίνακες μπορεί να χρησιμοποιηθούν και για κομψότερη εμφάνιση της ιστοσελίδας μας. Παρακάτω παρουσιάζονται οι εντολές για τη δημιουργία πίνακα. </p><p>Η εντολή για να δώσουμε στον περιηγητή να καταλάβει ότι σκοπεύουμε να απεικονίσουμε τα επόμενα δεδομένα σε πίνακα είναι: <TABLE>. Η εντολή φυσικά κλείνει (</TABLE>) μόλις τελειώσουμε με τον πίνακα. Ωστόσο μόνο η εντολή table δεν εξηγεί στο πρόγραμμα πόσες στήλες και γραμμές θέλουμε να συμπεριλάβουμε στον πίνακα μας. Οι εντολές για την δημιουργία γραμμών είναι <TR> και για τη δημιουργία στηλών <TD>. Πρέπει πάντα στον κώδικα να ξεκινάμε με τις γραμμές και μετά με τις στήλες. Το επόμενο παράδειγμα θα μας εξηγήσει αναλυτικά πως φτιάχνουμε έναν πίνακα σε html: </p><p><code> <TABLE><br /> <TR><br /> <TD>1</TD> <TD>2</TD><br /> </TR><br /> <TR><br /> <TD>3</TD> <TD>4</TD><br /> </TR><br /> </TABLE><br /> </code> </p><p>Ο πίνακας του παραδείγματος εξηγεί στον περιηγητή ιστοσελίδων να κατασκευάσει έναν πίνακα με τη πρώτη σειρά/γραμμή (<TR>) να περιέχει δύο στήλες (<TD>): στην πρώτη να γράφει τα δεδομένα "1" και στην δεύτερη τα δεδομένα "2". Ο πίνακας όμως συνεχίζει με δεύτερη γραμμή (<TR>) η οποία επίσης έχει δύο στήλες (<TD>) με τα δεδομένα "3" και "4" αντίστοιχα. Παρατηρούμε επίσης ότι μόλις τελειώσουν τα δεδομένα σε μία στήλη μας, την κλείνουμε με την εντολή </TD> για να αρχίσουμε καινούργια στήλη (<TD>) -εφόσον επιθυμούμε-. Ομοίως μόλις τελειώσουμε με την πρώτη γραμμή θα πρέπει να την κλείσουμε με το αντίστοιχο κλείσιμο της <TR> δηλαδή την: </TR>. Σημείωση: Τα κενά δεν παίζουν κανένα ρόλο στην απεικόνιση της σελίδας απλώς διευκολύνουν την ανάγνωση από τον χρήστη. </p> <div class="mw-heading mw-heading3"><h3 id="Επικεφαλίδες"><span id=".CE.95.CF.80.CE.B9.CE.BA.CE.B5.CF.86.CE.B1.CE.BB.CE.AF.CE.B4.CE.B5.CF.82"></span>Επικεφαλίδες</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=11" title="Επεξεργασία ενότητας: Επικεφαλίδες"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><H#> Η εντολή αυτή δηλώνει τις επικεφαλίδες των διάφορων μερών του κειμένου μας π.χ. τα κεφάλαια. Μπορεί να δηλώσει μέχρι 6 κεφάλαια-υποκεφάλαια ξεκινώντας από το Η1 έως το Η6. π.χ.: <br /> <code> <H1>Πρώτο κεφάλαιο</H1><br /> Το κείμενο του πρώτου κεφαλαίου είναι..... </code><br /> Για να δηλώσουμε ότι ένα μέρος του κειμένου είναι υπομέρος ενός άλλου ορίζουμε στην αρχή του επικεφαλίδα επιπέδου +1 από το μητρικό του, π.χ. για ένα υποκεφάλαιο του παραπάνω θα γράφαμε:<br /> <code> <H1>Πρώτο κεφάλαιο</H1><br /> Το κείμενο του πρώτου κεφαλαίου είναι.....<br /> .<br /> .<br /> <H2>Υποκεφάλαιο</H2><br /> Κείμενο υποκεφαλαίου.... </code><br /> Οποτεδήποτε θέλουμε μπορούμε να ορίσουμε αρχή ενός κεφαλαίου οποιουδήποτε επιπέδου. Συνήθως στους browser οι τίτλοι των κεφαλαίων εμφανίζονται με μεγαλύτερη γραμματοσειρά, αλλά αυτή η εντολή δεν θα πρέπει να χρησιμοποιείται απλώς για λόγους εμφάνισης αλλά μόνο για να σχηματιστεί η δομή του κειμένου. </p> <div class="mw-heading mw-heading3"><h3 id="Λίστες"><span id=".CE.9B.CE.AF.CF.83.CF.84.CE.B5.CF.82"></span>Λίστες</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=12" title="Επεξεργασία ενότητας: Λίστες"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Ορισμένες φορές χρειάζεται να εμφανίσουμε κάποια στοιχεία σε λίστες, με ταξινόμηση ή όχι. </p> <div class="mw-heading mw-heading4"><h4 id="Αταξινόμητες_λίστες"><span id=".CE.91.CF.84.CE.B1.CE.BE.CE.B9.CE.BD.CF.8C.CE.BC.CE.B7.CF.84.CE.B5.CF.82_.CE.BB.CE.AF.CF.83.CF.84.CE.B5.CF.82"></span>Αταξινόμητες λίστες</h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=13" title="Επεξεργασία ενότητας: Αταξινόμητες λίστες"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Για να δημιουργήσουμε λίστα χωρίς ταξινόμηση βάζουμε αρχικά την εντολή <UL> με την οποία δηλώνουμε ότι τα επόμενα θα είναι δεδομένα αταξινόμητης λίστας. Έπειτα για κάθε δεδομένο ή δεδομένα που θέλουμε να τοποθετήσουμε βάζουμε την εντολή <LI>. Στο τέλος του κάθε στοιχείου κλείνουμε και προχωράμε σε νέο <LI> στοιχείο της λίστας. Συνήθως το κάθε στοιχείο μιας αταξινόμητης λίστας εμφανίζεται μετά από κάποιο σύμβολο όπως η κουκκίδα. Παράδειγμα: </p><p><code> Οι λόγοι που οδήγησαν στο φαινόμενο είναι:<br /> <UL><br /> <LI>Λόγος α</LI><br /> <LI>Λόγος β</LI><br /> </UL> </code> </p><p>Αυτό έχει ως αποτέλεσμα:<br /> </p><p>Οι λόγοι που οδήγησαν στο φαινόμενο είναι:<br /> </p> <ul> <li>Λόγος α</li> <li>Λόγος β</li> </ul> <div class="mw-heading mw-heading4"><h4 id="Ταξινομημένη_λίστα"><span id=".CE.A4.CE.B1.CE.BE.CE.B9.CE.BD.CE.BF.CE.BC.CE.B7.CE.BC.CE.AD.CE.BD.CE.B7_.CE.BB.CE.AF.CF.83.CF.84.CE.B1"></span>Ταξινομημένη λίστα</h4><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=14" title="Επεξεργασία ενότητας: Ταξινομημένη λίστα"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Η ταξινομημένη λίστα είναι παρόμοια με την αταξινόμητη. Αντί για την αρχική εντολή <UL> βάζουμε <OL>. Το κάθε στοιχείο μιας ταξινομημένης λίστας εμφανίζεται με αύξουσα αρίθμηση ξεκινώντας από το 1. Παράδειγμα: </p><p><code> Οι λόγοι που οδήγησαν στο φαινόμενο είναι:<br /> <OL><br /> <LI>Λόγος α</LI><br /> <LI>Λόγος β</LI><br /> </OL> </code> </p><p>Αυτό έχει ως αποτέλεσμα:<br /> </p><p>Οι λόγοι που οδήγησαν στο φαινόμενο είναι:<br /> </p> <ol> <li>Λόγος α</li> <li>Λόγος β</li> </ol> <div class="mw-heading mw-heading3"><h3 id="Χρώμα_Φόντου"><span id=".CE.A7.CF.81.CF.8E.CE.BC.CE.B1_.CE.A6.CF.8C.CE.BD.CF.84.CE.BF.CF.85"></span>Χρώμα Φόντου</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=15" title="Επεξεργασία ενότητας: Χρώμα Φόντου"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Για να κάνουμε την ιστοσελίδα μας περισσότερο ευπαρουσίαστη πολλές φορές βάζουμε <a href="/w/index.php?title=%CE%94%CE%B9%CE%B1%CE%B4%CE%B9%CE%BA%CF%84%CF%85%CE%B1%CE%BA%CE%AC_%CF%87%CF%81%CF%8E%CE%BC%CE%B1%CF%84%CE%B1&action=edit&redlink=1" class="new" title="Διαδικτυακά χρώματα (η σελίδα δεν υπάρχει)">χρώμα</a> για φόντο. Η εντολή είναι: <body bgcolor="#######">. Η εντολή δεν κλείνει όπως είναι λογικό. Οι χαρακτήρες ###### υποδηλώνουν ότι πρέπει να αντικατασταθούν από τα κατάλληλους χαρακτήρες που υποδηλώνουν το χρώμα όμως ο πρώτος χαρακτήρας διατηρείται σταθερός. Το χρώμα στην html βγαίνει βάσει του τρόπου που απεικονίζεται το χρώμα σε συσκευές όπως η οθόνη, δηλαδή RGB (red-green-blue). Η οθόνη του υπολογιστή (όπως άλλωστε και η τηλεόραση αλλά και οι υπόλοιπες παρόμοιες συσκευές) συνθέτουν το χρώμα από τα τρία βασικά χρώματα: κόκκινο-πράσινο-μπλε. Οι χαρακτήρες ###### αναφέρονται σε αυτά τα <a href="/w/index.php?title=%CE%94%CE%B9%CE%B1%CE%B4%CE%B9%CE%BA%CF%84%CF%85%CE%B1%CE%BA%CE%AC_%CF%87%CF%81%CF%8E%CE%BC%CE%B1%CF%84%CE%B1&action=edit&redlink=1" class="new" title="Διαδικτυακά χρώματα (η σελίδα δεν υπάρχει)">χρώματα</a>. Τα δύο πρώτα # αναφέρονται στο κόκκινο, τα επόμενα δύο # στο πράσινο και τέλος τα τελευταία δύο # στο μπλε (όπως και η σειρά RGB). Οι τιμές που παίρνουν είναι σύμφωνες με το δεκαεξαδικό σύστημα δηλαδή από 0 έως F (0 είναι η μικρότερη τιμή και F η μεγαλύτερη). Η σειρά είναι 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F. Αν θέλουμε να έχουμε π.χ. άσπρο χρώμα θα πρέπει να βάλουμε τις τιμές "FFFFFF" (αφού το άσπρο αποτελεί την σύνθεση όλων των χρωμάτων). Αντίστροφα για το μαύρο "000000". Δείτε και κάποια άλλα παραδείγματα χρωμάτων <a rel="nofollow" class="external text" href="http://www.w3.org/TR/html401/types.html#type-color">εδώ</a>. Εναλλακτικά σε τελευταίες εκδόσεις της html μπορούμε να βάλουμε τα ονόματα των χρωμάτων στα αγγλικά (π.χ. green, red, κ.λ.π.) αντί για τα ορίσματα στο δεκαεξαδικό σύστημα, ωστόσο αυτό δεν μας δίνει πολλές επιλογές όπως για παράδειγμα όλες τις αποχρώσεις του πράσινου ή του κόκκινου κ.λ.π. </p> <div class="mw-heading mw-heading3"><h3 id="Χρώμα_Γραμματοσειράς"><span id=".CE.A7.CF.81.CF.8E.CE.BC.CE.B1_.CE.93.CF.81.CE.B1.CE.BC.CE.BC.CE.B1.CF.84.CE.BF.CF.83.CE.B5.CE.B9.CF.81.CE.AC.CF.82"></span>Χρώμα Γραμματοσειράς</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=16" title="Επεξεργασία ενότητας: Χρώμα Γραμματοσειράς"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Ομοίως μπορούμε να αλλάζουμε και τα χρώματα της γραμματοσειράς μας για κομψότερες ιστοσελίδες. Η εντολή είναι <font color="#######"> και κλείνει με απλό </font>. Εδώ ισχύουν ακριβώς ότι και παραπάνω για το φόντο όσον αφορά το ορίσματα για τα #######. </p> <div class="mw-heading mw-heading3"><h3 id="Εικόνα_για_φόντο"><span id=".CE.95.CE.B9.CE.BA.CF.8C.CE.BD.CE.B1_.CE.B3.CE.B9.CE.B1_.CF.86.CF.8C.CE.BD.CF.84.CE.BF"></span>Εικόνα για φόντο</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=17" title="Επεξεργασία ενότητας: Εικόνα για φόντο"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Εναλλακτικά αντί για χρώμα, μπορούμε να βάλουμε εικόνα για φόντο. Η εντολή είναι: <body background=”eikona.gif”>. Η εντολή όπως είναι λογικό δεν κλείνει. </p> <div class="mw-heading mw-heading3"><h3 id="Τυπωμένο_κείμενο"><span id=".CE.A4.CF.85.CF.80.CF.89.CE.BC.CE.AD.CE.BD.CE.BF_.CE.BA.CE.B5.CE.AF.CE.BC.CE.B5.CE.BD.CE.BF"></span>Τυπωμένο κείμενο</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=18" title="Επεξεργασία ενότητας: Τυπωμένο κείμενο"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p><TT> Η παραπάνω εντολή (με κλείσιμο </TT>) αλλάζει την προεπιλεγμένη γραμματοσειρά μας σε γράμματα γραφομηχανής. Δηλαδή στο παράδειγμα <TT>Αυτά είναι γράμματα γραφομηχανής</TT> οι λέξεις: "Αυτά είναι γράμματα γραφομηχανής" θα φαίνονται σαν γράμματα γραφομηχανής και θα ξεχωρίζουν από το υπόλοιπο κείμενο. </p> <div class="mw-heading mw-heading2"><h2 id="Ιδιότητες_(Attributes)"><span id=".CE.99.CE.B4.CE.B9.CF.8C.CF.84.CE.B7.CF.84.CE.B5.CF.82_.28Attributes.29"></span>Ιδιότητες (Attributes)</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=19" title="Επεξεργασία ενότητας: Ιδιότητες (Attributes)"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Οι ιδιότητες είναι μέρη του κώδικα HTML που προσθέτουν κάποια επιπλέον χαρακτηριστικά στο κώδικα μας και κατ' επέκταση στο τρόπο με τον οποίο εμφανίζεται η ιστοσελίδα μας. Οι ιδιότητες προστίθονται μέσα στο κώδικα HTML μας (δηλαδή < και >) μετά από κάθε εντολή (συνήθως στο τέλος ακριβώς πριν από το >. </p> <div class="mw-heading mw-heading3"><h3 id="Η_Ιδιότητα_BORDER"><span id=".CE.97_.CE.99.CE.B4.CE.B9.CF.8C.CF.84.CE.B7.CF.84.CE.B1_BORDER"></span>Η Ιδιότητα BORDER</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=20" title="Επεξεργασία ενότητας: Η Ιδιότητα BORDER"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Η ιδιότητα BORDER είναι ένα τμήμα που μπορεί να προστεθεί σε ορισμένες εντολές που εμφανίζουν πλαίσια. Συγκεκριμένα μπορούμε να χρησιμοποιήσουμε το BORDER στους πίνακες, στη δημιουργία πλαισίων και όταν βάζουμε ως απεικόνιση συνδέσμου εικόνα αντί για κείμενο (π.χ. <A HREF="selida.html"><IMG SRC="eikona.gif"></A>. Στο παράδειγμα αυτό μόλις κάνουμε κλικ στην εικόνα: eikona.gif θα μεταφερθούμε στην σελίδα: selida.html). Το BORDER υποδηλώνει το μέγεθος του πλαισίου. Έτσι όταν έχουμε BORDER="0" δεν εμφανίζεται το πλαίσιο. Όσο μεγαλύτερα νούμερα βάζουμε τόσο μεγαλύτερο (χονδρότερο) είναι και το πλαίσιο. Η ιδιότητα μπαίνει στο τέλος του κειμένου της εντολής πρίν βάλουμε τον χαρακτήρα >. (π.χ. <TABLE BORDER="0"> ή <IMG SRC="kati.jpg" BORDER="0">) </p> <div class="mw-heading mw-heading3"><h3 id="Η_Ιδιότητα_ALT"><span id=".CE.97_.CE.99.CE.B4.CE.B9.CF.8C.CF.84.CE.B7.CF.84.CE.B1_ALT"></span>Η Ιδιότητα ALT</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=21" title="Επεξεργασία ενότητας: Η Ιδιότητα ALT"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Η ιδιότητα ALT προστίθεται και αυτή σε ορισμένες εντολές και υποδηλώνει τον εναλλακτικό τρόπο εμφάνισης. Η κύρια χρήση του ALT είναι στις εικόνες. π.χ. <IMG SRC="eikona1.gif" ALT="Η Εικόνα 1">. Ορισμένοι παλαιοί web browser δεν είχαν την δυνατότητα εμφάνισης εικόνων (τώρα βέβαια όλοι έχουν αυτήν την δυνατότητα). Το τμήμα αυτό (ALT) υποδήλωνε στο περιηγητή που δεν εμφάνιζε εικόνες να εμφανίσει το κείμενο που περιείχε η ιδιότητα. Στο προηγούμενο παράδειγμα θα εμφανιζόταν στη θέση της εικόνας το κείμενο "Εικόνα 1" (χωρίς τα εισαγωγικά). Ακόμα όμως και σήμερα η ιδιότητα αυτή χρησιμοποιείται: Αν το χρησιμοποιήσουμε σε μία ιστοσελίδα μας, μέχρι να φορτωθούν οι εικόνες θα εμφανίζονται τα ορίσματα ALT των εικόνων αυτών (κάτι τέτοιο θα είναι ιδιαίτερα ορατό αν χρησιμοποιούμε γραφικά με μεγάλο μέγεθος τα οποία χρειάζονται κάποιο χρόνο για να φορτωθούν), επίσης η ιδιότητα αυτή είναι αρκετά φιλική στις μηχανές αναζήτησης καθώς το κείμενο προσφέρει κάποιου είδους "ταυτότητας" και περιγραφής της εικόνας σε σχέση με το περιεχόμενο της εικόνας που δεν είναι αντιληπτό από τις μηχανές. </p> <div class="mw-heading mw-heading3"><h3 id="Η_ιδιότητα_WIDTH"><span id=".CE.97_.CE.B9.CE.B4.CE.B9.CF.8C.CF.84.CE.B7.CF.84.CE.B1_WIDTH"></span>Η ιδιότητα WIDTH</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=22" title="Επεξεργασία ενότητας: Η ιδιότητα WIDTH"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Η ιδιότητα αυτή μας επιτρέπει να δηλώσουμε το επιθυμητό πλάτος ενός στοιχείου. Συνηθισμένα στοιχεία είναι π.χ. ένας πίνακας, μία εικόνα, κ.α. Η ιδιότητα αυτή μπορεί να υποδηλώνει το πλάτος τόσο ως ποσοστό της σελίδας μάς όσο και ως αριθμό pixels. Για παράδειγμα: <table border="1" width="50%">. Ο προηγούμενος πίνακας θα έχει πλάτος το 50% της ιστοσελίδας μας (είτε προβάλετε σε οθόνη ενός κινητού τηλεφώνου είτε σε μία οθόνη υπολογιστή αρκετά μεγαλύτερου μεγέθους φυσικά). Αντίστοιχα αν αλλάξουμε το 50% σε 300px τότε θα έχουμε ένα πίνακα πλάτους 300 pixels. </p><p>Παράδειγμα: </p> <table border="1" width="100%"> <tbody><tr> <td>Πίνακας</td><td></td></tr> <tr><td> 100%</td><td>πλάτους</td></tr> </tbody></table> <p>και </p> <table border="1" width="100px"> <tbody><tr> <td>Πίνακας</td><td></td></tr> <tr><td> 100</td><td>pixels</td></tr> </tbody></table> <p><br /> </p> <div class="mw-heading mw-heading2"><h2 id="Πλαίσια"><span id=".CE.A0.CE.BB.CE.B1.CE.AF.CF.83.CE.B9.CE.B1"></span>Πλαίσια</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=23" title="Επεξεργασία ενότητας: Πλαίσια"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <div class="mw-heading mw-heading3"><h3 id="Εισαγωγή_2"><span id=".CE.95.CE.B9.CF.83.CE.B1.CE.B3.CF.89.CE.B3.CE.AE_2"></span>Εισαγωγή</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=24" title="Επεξεργασία ενότητας: Εισαγωγή"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Η κατασκευή πλαισίων αποτελεί μία δύσκολη και χρονοβόρα σχετικά διαδικασία. Θα προσπαθήσουμε συνεπώς να την αναλύσουμε με τον ευκολότερο δυνατό και κατανοητό τρόπο. Το σημείο κλειδί εδώ είναι η δημιουργία μίας σελίδας "υποδομής" η οποία δεν θα περιέχει τίποτα για εμφάνιση εκτός από κώδικα. Στη σελίδα αυτή θα ορίσουμε πως ο περιηγητής μας θα εμφανίσει τα πλαίσια, που ακριβώς θα εμφανιστούν αυτά και τι σελίδες θα περιέχουν. Η πιο συνηθισμένη κατασκευή με πλαίσια περιλαμβάνει τον διαχωρισμό της οθόνης σε δύο πλαίσια. Ένα με το μενού - περιεχόμενα του ιστότοπου (το οποίο είναι συνήθως αριστερά) και ένα όπου εμφανίζονται οι επιμέρους ιστοσελίδες (συνήθως είναι το δεξί πλαίσιο και καταλαμβάνει το μεγαλύτερο μέρος της οθόνης). </p> <div class="mw-heading mw-heading3"><h3 id="Η_σελίδα_υποδομής"><span id=".CE.97_.CF.83.CE.B5.CE.BB.CE.AF.CE.B4.CE.B1_.CF.85.CF.80.CE.BF.CE.B4.CE.BF.CE.BC.CE.AE.CF.82"></span>Η σελίδα υποδομής</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=25" title="Επεξεργασία ενότητας: Η σελίδα υποδομής"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Θα πρέπει πάντα προκειμένου να εμφανιστούν τα πλαίσια να ορίσουμε την σελίδα υποδομής μας ως κεντρική σελίδα (π.χ. <tt>index.html</tt>). Την σελίδα αυτήν θα πρέπει να διαβάζει ο web browser για να εμφανίζει τα περιεχόμενα κάθε πλαισίου. Αν προσπαθήσουμε να ανοίξουμε απευθείας μία άλλη σελίδα του ιστότοπου μας, αυτή θα ανοίξει αλλά δεν θα εμφανιστούν τα άλλα πλαίσια. Θα παρουσιάσουμε την κατασκευή της ιστοσελίδας αυτής με ένα παράδειγμα: </p><p><code><HTML><br /> <TITLE>Ο ιστότοπος μου</TITLE><br /> <FRAMESET COLS="180,*"><br /> <FRAME SRC="MENU.HTML" NAME="ARISTERO"><br /> <FRAME SRC="MAIN.HTML" NAME="DEKSIO"><br /> </FRAMESET><br /> </HTML><br /> </code> τη σελίδα αυτή δίνουμε στο πρόγραμμα μας την εντολή να κατασκευάσει δύο πλαίσια σε στήλες - σειρές (<code><FRAMESET COLS </code>...). Αν βάζαμε <code>ROWS</code> (γραμμές) αντί για "<code>COLS</code>" θα φτιάχναμε οριζόντια πλαίσια (φυσικά μπορούμε να φτιάξουμε ταυτόχρονα και οριζόντια και κάθετα). Στην ίδια εντολή γράφουμε μετά το σύμβολο: = τα εξής: ( 180,* ). Αυτό σημαίνει ότι το πρώτο πλαίσιο θα έχει πλάτος 180 pixels και το * υποδηλώνει ότι το υπόλοιπο της οθόνης θα αποτελεί το άλλο πλαίσιο. Θα μπορούσαμε να βάλουμε και ποσοστά επί τοις εκατό (π.χ. 20%, 80%) δηλαδή το πρώτο πλαίσιο 20% και το υπόλοιπο 80% στο δεύτερο (το άθροισμα φυσικά θα πρέπει να συγκεντρώνει το 100%). Η σειρά με την οποία κατασκευάζονται τα πλαίσια είναι από αριστερά προς δεξιά και από πάνω προς τα κάτω (δηλαδή τα 180 pixels στο παράδειγμα μας αναφέρονται στο αριστερό πλαίσιο και το υπόλοιπο τμήμα στο αριστερό). </p><p>Στις επόμενες σειρές (<code> <FRAME SRC="MENU.HTML" NAME="ARISTERO"></code> και<code> <FRAME SRC="MAIN.HTML" NAME="DEKSIO"></code>) δηλώνουμε τα ονόματα των πλαισίων μας με τη σειρά που τα έχουμε κατασκευάσει απο την προηγούμενη εντολή και τις σελίδες που θα διαβάζει ο web browser μας για κάθε πλαίσιο από αυτά. Έτσι το πρώτο πλαίσιο με μέγεθος 180 pixel το ονομάζουμε ARISTERO και το δεύτερο DEKSIO. Τα ονόματα που θα διαβάσει το πρόγραμμα μας είναι <tt>menu.html</tt> για το αριστερό πλαίσιο και <tt>main.html</tt> για το δεξί. </p><p>Στο τέλος πριν κλείσουμε την εντολή html κλείνουμε την FRAMESET. </p><p>Παρατήρηση: Η μόνη εντολή που θα πρέπει (όχι βέβαια απαραίτητα) να περιέχει μία σελίδα υποδομής εκτός από αυτές για το καθορισμό των πλαισίων είναι ή TITLE. Εξάλλου όλες οι άλλες εντολές δεν έχουν νόημα: αυτό που ο χρήστης θα δει είναι τα περιεχόμενα των πλαισίων. Αν θέλουμε επίσης να μην εμφανίζονται διαχωριστικές ανάγλυφες γραμμές ανάμεσα στα πλαίσια, μπορούμε στην εντολή <code><FRAMESET COLS="180,*"></code> να προσθέσουμε το τμήμα: <code>BORDER="0"</code> (δηλαδή θα γίνει κάπως έτσι: <code><FRAMESET COLS="180,*" BORDER="0"></code>). </p> <div class="mw-heading mw-heading3"><h3 id="Οι_υπόλοιπες_σελίδες"><span id=".CE.9F.CE.B9_.CF.85.CF.80.CF.8C.CE.BB.CE.BF.CE.B9.CF.80.CE.B5.CF.82_.CF.83.CE.B5.CE.BB.CE.AF.CE.B4.CE.B5.CF.82"></span>Οι υπόλοιπες σελίδες</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=26" title="Επεξεργασία ενότητας: Οι υπόλοιπες σελίδες"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Στις υπόλοιπες σελίδες όταν τοποθετούμε έναν σύνδεσμο (link) γράφουμε και το πλαίσιο προορισμού. Έτσι στην εντολή <A HREF="kati.html">keimeno</A> Θα προσθέσουμε το κομμάτι TARGET="onoma_plaisiou". Η εντολή θα διαμορφωθεί δηλαδή έτσι: <A HREF="kati.html" TARGET="onoma_plaisiou">keimeno</A >. </p><p><br /> Στο προηγούμενο παράδειγμα μας η σελίδα menu.html μπορεί να περιέχει τις ιστοσελίδες του ιστότοπου μας. Αν για παράδειγμα μία ιστοσελίδα περιέχει φωτογραφίες μας θα πρέπει να συμπεριλάβουμε μεταξύ άλλων στο αρχείο menu.html τα εξής: </p><p><br /> <A HREF="fotos.html" TARGET="DEKSIO">Δείτε τις φωτογραφίες μου</A> -- Έτσι κάνοντας κλικ κάποιος στο κείμενο "Δείτε τις φωτογραφίες μου" στο δεξιό πλαίσιο θα ανοίξει η ιστοσελίδα "fotos.html". </p><p><br /> Με αυτό τον τρόπο μπορούμε να έχουμε τα περιεχόμενα μας στο αριστερό πλαίσιο και με κλικ στους συνδέσμους που αυτό περιέχει, ο χρήστης θα μεταφέρεται στην αντίστοιχη σελίδα (η οποία θα εμφανίζεται στο δεξί πλαίσιο). </p> <div class="mw-heading mw-heading2"><h2 id="Σχετικά_Ζητήματα"><span id=".CE.A3.CF.87.CE.B5.CF.84.CE.B9.CE.BA.CE.AC_.CE.96.CE.B7.CF.84.CE.AE.CE.BC.CE.B1.CF.84.CE.B1"></span>Σχετικά Ζητήματα</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=27" title="Επεξεργασία ενότητας: Σχετικά Ζητήματα"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Στην ενότητα αυτή παρουσιάζουμε ορισμένα βασικά ζητήματα που θα πρέπει ο ενδιαφερόμενος να γνωρίζει πριν κατασκευάσει μία ιστοσελίδα. </p> <div class="mw-heading mw-heading3"><h3 id="Εικόνες_2"><span id=".CE.95.CE.B9.CE.BA.CF.8C.CE.BD.CE.B5.CF.82_2"></span>Εικόνες</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=28" title="Επεξεργασία ενότητας: Εικόνες"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Οι εικόνες που δημοσιεύονται στο διαδίκτυο πρέπει να έχουν μικρό σχετικά μέγεθος και αυτό για να κατεβαίνουν γρήγορα και εύκολα. Θα πρέπει να μην ξεχνάμε ότι ο επισκέπτης της ιστοσελίδας μας δεν έχει πάντα την υπομονή να περιμένει αρκετή ώρα για να κατέβει μία εικόνα. Ιδίως όταν οι σελίδες μας περιέχουν αρκετές εικόνες. Θα πρέπει λοιπόν να χρησιμοποιούμε ειδική κωδικοποίηση στις εικόνες μας. Συνήθως οι εικόνες με την υψηλότερη συμπίεση (και άρα το μικρότερο μέγεθος) είναι αυτές οι οποίες έχουν προέκταση gif ή jpg (εναλλακτικά: jpeg). Οι εικόνες αυτές συνήθως καταλαμβάνουν μικρό μέγεθος (ανάλογα βέβαια την ποιότητα που θα καθορίσουμε κατά την συμπίεση). </p><p><br /> Για φωτογραφίες καλύτερα αποτελέσματα παρέχουν οι εικόνες jpg (ή jpeg), ενώ για γραφικά προτιμότερο είναι να χρησιμοποιούμε εικόνες gif οι οποίες μπορεί να καταλαμβάνουν ακόμα μικρότερο χώρο και συνεπώς να κατεβαίνουν ακόμα πιο γρήγορα σε σχέση με τις πρώτες. Ένα επίσης χαρακτηριστικό των εικόνων gif είναι ότι υποστηρίζουν και αδιαφάνεια (transparency). Αδιαφάνεια είναι όταν σε μία εικόνα ορισμένα εικονοστοιχεία (pixel) είναι διαφανή. Έτσι συνήθως αυτά τα pixel παίρνουν το χρώμα του φόντου της ιστοσελίδας μας. Έτσι αν θέλουμε να βάλουμε ως γραφικό ένα τρίγωνο ή ένα κύκλο για παράδειγμα, οι περιοχές έξω από το σχήμα οι οποίες δεν μπορούν να αποκοπούν καταστούν την ιστοσελίδα μας λιγότερο κομψή. Θα πρέπει αυτές τις περιοχές γύρω από τον κύκλο ή το τρίγωνο (ή φυσικά από οποιοδήποτε άλλο σχήμα ή γραφικό) να γίνουν διαφανείς. Αν επιχειρούσαμε να βάψουμε αυτές τις περιοχές με το χρώμα του φόντου της ιστοσελίδας μας εκτός από το μεγαλύτερο μέγεθος που θα αποκτούσε το γραφικό μας, θα καθιστούσε ασύμφορη την αλλαγή του χρώματος του φόντου μας, καθώς θα έπρεπε να ξαναλλάξουμε το χρώμα όλων των σχετικών εικόνων μας (κάτι ιδιαίτερα χρονοβόρο και ανιαρό). Τέλος άλλο ένα πολύ καλό χαρακτηριστικό που ενσωματώνουν οι εικόνες της μορφής gif είναι η δυνατότητα τους να είναι κινούμενες δηλαδή να εναλλάσσονται. Έτσι σε ένα γραφικό μπορούμε να βάλουμε δύο ή περισσότερες εικόνες που εναλλάσσονται με το πέρασμα του χρόνου. Ένα παράδειγμα είναι να βάλουμε για επικεφαλίδα της ιστοσελίδας μας για εικόνα, ένα μεγάλο χρωματιστό "Welcome" που θα αναβοσβήνει. Σχεδόν όλα τα προγράμματα επεξεργασίας εικόνας (ακόμα και τα πιο απλά) επιτρέπουν κωδικοποίηση αλλά και μετατροπή εικόνας από ένα τύπο αρχείου σε άλλο (π.χ. από bmp σε gif), έτσι δεν θα χρειαστεί να αποκτήσετε κάποιο εξειδικευμένο πρόγραμμα. </p><p><br /> Τέλος θα πρέπει να τονίσουμε ότι τα γραφικά και οι εικόνες βελτιώνουν την αισθητική μίας ιστοσελίδας αλλά την καθιστούν αργή στο κατέβασμα. Η χρήση εικόνων σε ιστοσελίδες συνεπώς θα πρέπει να γίνεται με μέτρο και σύνεση. Η ανάρτηση πολλών και μεγάλων εικόνων σε μία ιστοσελίδα δεν συνίσταται σε καμία περίπτωση. </p> <div class="mw-heading mw-heading3"><h3 id="Κείμενο"><span id=".CE.9A.CE.B5.CE.AF.CE.BC.CE.B5.CE.BD.CE.BF"></span>Κείμενο</h3><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=29" title="Επεξεργασία ενότητας: Κείμενο"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Βασικός κανόνας που θα πρέπει να ακολουθείται πάντα κατά την κατασκευή ιστοσελίδων είναι η αποφυγή συνεχόμενης γραφής με κεφαλαία γράμματα. Τα κεφαλαία γράμματα δηλώνουν ότι κάποιος είναι "φωνακλάς" και "εκνευριστικός". Επιπλέον τα κεφαλαία γράμματα είναι κουραστικά για το μάτι. Ο κανόνας αυτός ισχύει φυσικά για μεγάλο κείμενο στα Κεφαλαία. Μπορούμε εννοείται να βάζουμε λέξεις ή ακόμα και μικρές φράσεις στα κεφαλαία όταν αυτό θεωρούμε ότι είναι απαραίτητο. </p><p><br /> </p> <div class="mw-heading mw-heading2"><h2 id="Επίλογος"><span id=".CE.95.CF.80.CE.AF.CE.BB.CE.BF.CE.B3.CE.BF.CF.82"></span>Επίλογος</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=30" title="Επεξεργασία ενότητας: Επίλογος"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <p>Το βικιβιβλίο αυτό ελπίζουμε να βοηθήσει τους τόσο τους βικιπαιδιστές με την επιπλέον χρήση κώδικα html για καλύτερα αποτελέσματα σε αισθητικό και πρακτικό επίπεδο, όσο και αυτούς που ενδιαφέρονται για την κατασκευή ιστοσελίδων. </p><p><br /> Για καλύτερα αισθητικά αποτελέσματα με τον κώδικα html, χρησιμοποιούμε τον κώδικα <a href="/w/index.php?title=CSS&action=edit&redlink=1" class="new" title="CSS (η σελίδα δεν υπάρχει)">CSS</a> (Cascading Stylesheets) που δίνει πολλές δυνατότητες στην html. </p><p><br /> </p> <div class="mw-heading mw-heading2"><h2 id="Δείτε_επίσης"><span id=".CE.94.CE.B5.CE.AF.CF.84.CE.B5_.CE.B5.CF.80.CE.AF.CF.83.CE.B7.CF.82"></span>Δείτε επίσης</h2><span class="mw-editsection"><span class="mw-editsection-bracket">[</span><a href="/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&action=edit&section=31" title="Επεξεργασία ενότητας: Δείτε επίσης"><span>επεξεργασία</span></a><span class="mw-editsection-bracket">]</span></span></div> <ul><li><a href="/w/index.php?title=%CE%94%CE%B9%CE%B1%CE%B4%CE%B9%CE%BA%CF%84%CF%85%CE%B1%CE%BA%CE%AC_%CF%87%CF%81%CF%8E%CE%BC%CE%B1%CF%84%CE%B1&action=edit&redlink=1" class="new" title="Διαδικτυακά χρώματα (η σελίδα δεν υπάρχει)">Διαδικτυακά χρώματα</a></li></ul>    </div><noscript><img src="https://login.wikimedia.org/wiki/Special:CentralAutoLogin/start?type=1x1" alt="" width="1" height="1" style="border: none; position: absolute;"></noscript> <div class="printfooter" data-nosnippet="">Ανακτήθηκε από «<a dir="ltr" href="https://el.wikibooks.org/w/index.php?title=Εισαγωγή_στην_HTML&oldid=53785">https://el.wikibooks.org/w/index.php?title=Εισαγωγή_στην_HTML&oldid=53785</a>»</div></div> <div id="catlinks" class="catlinks" data-mw="interface"><div id="mw-normal-catlinks" class="mw-normal-catlinks"><a href="/wiki/%CE%95%CE%B9%CE%B4%CE%B9%CE%BA%CF%8C:%CE%9A%CE%B1%CF%84%CE%B7%CE%B3%CE%BF%CF%81%CE%AF%CE%B5%CF%82" title="Ειδικό:Κατηγορίες">Κατηγορίες</a>: <ul><li><a href="/wiki/%CE%9A%CE%B1%CF%84%CE%B7%CE%B3%CE%BF%CF%81%CE%AF%CE%B1:%CE%91%CE%BB%CF%86%CE%B1%CE%B2%CE%B7%CF%84%CE%B9%CE%BA%CE%AC/%CE%95" title="Κατηγορία:Αλφαβητικά/Ε">Αλφαβητικά/Ε</a></li><li><a href="/wiki/%CE%9A%CE%B1%CF%84%CE%B7%CE%B3%CE%BF%CF%81%CE%AF%CE%B1:%CE%9A%CF%8D%CF%81%CE%B9%CE%B1_%CF%83%CE%B5%CE%BB%CE%AF%CE%B4%CE%B1" title="Κατηγορία:Κύρια σελίδα">Κύρια σελίδα</a></li><li><a href="/wiki/%CE%9A%CE%B1%CF%84%CE%B7%CE%B3%CE%BF%CF%81%CE%AF%CE%B1:%CE%93%CE%BB%CF%8E%CF%83%CF%83%CE%B5%CF%82_%CF%80%CF%81%CE%BF%CE%B3%CF%81%CE%B1%CE%BC%CE%BC%CE%B1%CF%84%CE%B9%CF%83%CE%BC%CE%BF%CF%8D" title="Κατηγορία:Γλώσσες προγραμματισμού">Γλώσσες προγραμματισμού</a></li></ul></div></div> </div> </main> </div> <div class="mw-footer-container"> <footer id="footer" class="mw-footer" > <ul id="footer-info"> <li id="footer-info-lastmod"> Η σελίδα αυτή τροποποιήθηκε τελευταία φορά στις 18 Ιουλίου 2019, στις 18:41.</li> <li id="footer-info-copyright">Όλα τα κείμενα είναι διαθέσιμα υπό την <a rel="nofollow" class="external text" href="https://creativecommons.org/licenses/by-sa/4.0/deed.el">Άδεια Creative Commons Αναφορά Δημιουργού-Παρόμοια Διανομή 4.0</a>· μπορεί να ισχύουν πρόσθετοι όροι. Δείτε τους <a class="external text" href="https://foundation.wikimedia.org/wiki/Policy:Terms_of_Use/el">Όρους Χρήσης</a> για λεπτομέρειες.</li> </ul> <ul id="footer-places"> <li id="footer-places-privacy"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Privacy_policy">Πολιτική ιδιωτικότητας</a></li> <li id="footer-places-about"><a href="/wiki/%CE%92%CE%B9%CE%BA%CE%B9%CE%B2%CE%B9%CE%B2%CE%BB%CE%AF%CE%B1:%CE%A3%CF%87%CE%B5%CF%84%CE%B9%CE%BA%CE%AC">Σχετικά με Βικιβιβλία</a></li> <li id="footer-places-disclaimers"><a href="/wiki/%CE%92%CE%B9%CE%BA%CE%B9%CE%B2%CE%B9%CE%B2%CE%BB%CE%AF%CE%B1:%CE%93%CE%B5%CE%BD%CE%B9%CE%BA%CE%AE_%CE%B1%CF%80%CE%BF%CF%80%CE%BF%CE%AF%CE%B7%CF%83%CE%B7">Αποποίηση ευθυνών</a></li> <li id="footer-places-wm-codeofconduct"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Universal_Code_of_Conduct">Κώδικας συμπεριφοράς</a></li> <li id="footer-places-developers"><a href="https://developer.wikimedia.org">Προγραμματιστές</a></li> <li id="footer-places-statslink"><a href="https://stats.wikimedia.org/#/el.wikibooks.org">Στατιστικά</a></li> <li id="footer-places-cookiestatement"><a href="https://foundation.wikimedia.org/wiki/Special:MyLanguage/Policy:Cookie_statement">Δήλωση cookie</a></li> <li id="footer-places-mobileview"><a href="//el.m.wikibooks.org/w/index.php?title=%CE%95%CE%B9%CF%83%CE%B1%CE%B3%CF%89%CE%B3%CE%AE_%CF%83%CF%84%CE%B7%CE%BD_HTML&mobileaction=toggle_view_mobile" class="noprint stopMobileRedirectToggle">Προβολή κινητού</a></li> </ul> <ul id="footer-icons" class="noprint"> <li id="footer-copyrightico"><a href="https://wikimediafoundation.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/static/images/footer/wikimedia-button.svg" width="84" height="29" alt="Wikimedia Foundation" loading="lazy"></a></li> <li id="footer-poweredbyico"><a href="https://www.mediawiki.org/" class="cdx-button cdx-button--fake-button cdx-button--size-large cdx-button--fake-button--enabled"><img src="/w/resources/assets/poweredby_mediawiki.svg" alt="Powered by MediaWiki" width="88" height="31" loading="lazy"></a></li> </ul> </footer> </div> </div> </div> <div class="vector-settings" id="p-dock-bottom"> <ul></ul> </div><script>(RLQ=window.RLQ||[]).push(function(){mw.config.set({"wgHostname":"mw-web.codfw.main-f69cdc8f6-w8xh7","wgBackendResponseTime":133,"wgPageParseReport":{"limitreport":{"cputime":"0.026","walltime":"0.033","ppvisitednodes":{"value":180,"limit":1000000},"postexpandincludesize":{"value":507,"limit":2097152},"templateargumentsize":{"value":118,"limit":2097152},"expansiondepth":{"value":5,"limit":100},"expensivefunctioncount":{"value":0,"limit":500},"unstrip-depth":{"value":0,"limit":20},"unstrip-size":{"value":0,"limit":5000000},"entityaccesscount":{"value":0,"limit":400},"timingprofile":["100.00% 7.671 1 -total"," 60.10% 4.610 1 Πρότυπο:Αλφαβητικά"," 38.40% 2.946 1 Πρότυπο:Στάδιο"]},"cachereport":{"origin":"mw-web.codfw.main-b9f754956-tfzqk","timestamp":"20241029115646","ttl":2592000,"transientcontent":false}}});});</script> </body> </html>