Μαθήματα HTML www.w3schools.com 8/5/2017 HTML - Καραμαούνας Π. 1
World Wide Web Το World Wide Web (WWW) είναι ένα παγκόσμιο δίκτυο ΗΥ Όλοι οι ΗΥ χρησιμοποιούν ένα standard επικοινωνίας, το ΗΤΤP Όλες οι πληροφορίες του Web αποθηκεύονται σε αρχεία που λέγονται Web σελίδες και σε ΗΥ που λέγονται Web servers Οι ΗΥ που βλέπουν τις Web σελίδες λέγονται Web clients Τα προγράμματα προβολής των σελίδων λέγονται Web browsers ή φυλλομετρητές (π.χ. Chrome, Firefox) 8/5/2017 HTML - Καραμαούνας Π. 2
Πώς προβάλλονται οι σελίδες; Όλες οι Web σελίδες περιέχουν εντολές για την εμφάνιση του κειμένου Ο Web browser διαβάζει τις εντολές αυτές και εμφανίζει αναλόγως τη σελίδα Οι πιο κοινές εντολές εμφάνισης λέγονται HTML tags 8/5/2017 HTML - Καραμαούνας Π. 3
Εισαγωγή στην HTML HTML σημαίνει : Hyper Text Markup Language Ένα αρχείο HTML πρέπει να έχει την επέκταση.htm ή.html Ένα αρχείο HTML μπορεί να δημιουργηθεί με οποιονδήποτε επεξεργαστή κειμένου (π.χ. Notepad) 8/5/2017 HTML - Καραμαούνας Π. 4
Παράδειγμα HTML 1. Ξεκινήστε το Notepad (Σημειωματάριο) 2. Πληκτρολογήστε το παρακάτω κείμενο: <head> <title>title of page</title> </head> This is my first homepage. <b>this text is bold</b> 3. Αποθηκεύστε το αρχείο με το όνομα test.htm 4. Ανοίξτε to αρχείο με τον φυλλομετρητή 8/5/2017 HTML - Καραμαούνας Π. 5
Παράδειγμα HTML Εναλλακτικά χρησιμοποιήστε έναν online HTML editor: π.χ. http://www.onlinehtmleditor.net/ https://jsfiddle.net/ 8/5/2017 HTML - Καραμαούνας Π. 6
Headings (Επικεφαλίδες) Οι επικεφαλίδες ορίζονται με τα tags <h1>... </h1> έως <h6>... </h6> ξεκινώντας από το μεγαλύτερο προς το μικρότερο: <h1>this is heading 1</h1> <h2>this is heading 2</h2> <h3>this is heading 3</h3> <h4>this is heading 4</h4> <h5>this is heading 5</h5> <h6>this is heading 6</h6> <p>use heading tags only for headings. Don't use them just to make something bold. Use other tags for that.</p> 8/5/2017 HTML - Καραμαούνας Π. 7
Paragraphs (Παράγραφοι) Οι παράγραφοι ορίζονται με το tag <p>... </p>: <p>πρώτη παράγραφος</p> <p>δεύτερη παράγραφος</p> <p>τρίτη παράγραφος</p> 8/5/2017 HTML - Καραμαούνας Π. 8
Line breaks (Αλλαγές γραμμών) Οι αλλαγές γραμμών (χωρίς ορισμό νέας παραγράφου) ορίζονται με το tag <br>: <p> To break<br>lines<br>in a<br>paragraph,<br>use the br tag. </p> 8/5/2017 HTML - Καραμαούνας Π. 9
Comments (Σχόλια) Τα σχόλια ορίζονται με το tag <!--... -->: <!--This comment will not be displayed--> <p>this is a regular paragraph</p> 8/5/2017 HTML - Καραμαούνας Π. 10
Στοιχισμένες Επικεφαλίδες Οι επικεφαλίδες στοιχίζονται με το γνώρισμα align του tag <h*>: <h1 align="center">this is heading 1</h1> <p>the heading above is aligned to the center of this page. The heading above is aligned to the center of this page. The heading above is aligned to the center of this page.</p> 8/5/2017 HTML - Καραμαούνας Π. 11
Horizontal rules (γραμμές) Οι οριζόντιες γραμμές ορίζονται με το tag <hr>: <p>the hr tag defines a horizontal rule:</p> <hr> <p>this is a paragraph</p> <hr> <p>this is a paragraph</p> <hr> <p>this is a paragraph</p> 8/5/2017 HTML - Καραμαούνας Π. 12
Χρωματισμός σελίδας Οι σελίδες χρωματίζονται με το γνώρισμα bgcolor του tag : <body bgcolor="yellow"> <h2>look: Colored Background!</h2> 8/5/2017 HTML - Καραμαούνας Π. 13
Παράδειγμα: <b>this text is bold</b> <br> <i>this text is italic</i> <br> <u>this text is underlined</u> <br> This text contains<sub>subscript</sub> <br> This text contains<sup>superscript</sup> <br> This text <del>is deleted</del> Μορφοποίηση κειμένου 8/5/2017 HTML - Καραμαούνας Π. 14
HTML links (Σύνδεσμοι) Οι σύνδεσμοι ορίζονται με το tag <a> </a>: <p>σύνδεσμος για την <a href="test.htm/">τοπική σελίδα</a> </p> <p>σύνδεσμος για το <a href="http://www.ypepth.gr/">υπουργείο Παιδείας</a> </p> 8/5/2017 HTML - Καραμαούνας Π. 15
HTML images-links (Σύνδεσμοι) Οι εικόνες σύνδεσμοι ορίζονται ως εξής: <p> Μπορεί να χρησιμοποιηθεί και μία εικόνα σαν σύνδεσμος: <a href="http://www.ypepth.gr/"> <img border="0" src="buttonnext.gif" width="65" height="38"> </a> </p> 8/5/2017 HTML - Καραμαούνας Π. 16
HTML links (Σύνδεσμοι) Το άνοιγμα συνδέσμου σε νέο παράθυρο γίνεται με το γνώρισμα target= _blank του tag <a>: <a href="test.htm" target="_blank">test Page</a> <p> If you set the target attribute of a link to "_blank", the link will open in a new window. </p> 8/5/2017 HTML - Καραμαούνας Π. 17
HTML links (Σύνδεσμοι) Οι σύνδεσμοι σε σημεία της ίδιας σελίδας ορίζονται ως εξής: <p> <a href="#c4">see also Chapter 4.</a> </p> <h2>chapter 1</h2> <p>this chapter explains...</p> <h2>chapter 2</h2> <p>this chapter explains...</p> <h2>chapter 3</h2> <p>this chapter explains...</p> <a name="c4"><h2>chapter 4</h2></a> <p>this chapter explains...</p> <h2>chapter 5</h2> <p>this chapter explains...</p> <h2>chapter 6</h2> <p>this chapter explains...</p> <h2>chapter 7</h2> <p>this chapter explains...</p> <h2>chapter 8</h2> <p>this chapter explains...</p> <h2>chapter 9</h2> <p>this chapter explains...</p> <h2>chapter 10</h2> <p>this chapter explains...</p> 8/5/2017 HTML - Καραμαούνας Π. 18
HTML mail-links (Σύνδεσμοι) Οι ταχυδρομικοί σύνδεσμοι ορίζονται ως εξής: <p>this is a mail link: <a href="mailto:someone@microsoft.com?subject=hello%20again"> Send Mail</a> </p> 8/5/2017 HTML - Καραμαούνας Π. 19
HTML frames (Πλαίσια 1) Με τα frames μπορούν να εμφανισθούν παραπάνω από μία σελίδες στο ίδιο παράθυρο: <frameset cols="25%,50%,25%"> <frame src="frame_a.html"> <frame src="frame_b.html"> <frame src="frame_c.html"> </frameset> 8/5/2017 HTML - Καραμαούνας Π. 20
HTML frames (Πλαίσια 2) Τα οριζόντια frames μπορούν να ορισθούν ως εξής: <frameset rows="25%,50%,25%"> <frame src="frame_a.html"> <frame src="frame_b.html"> <frame src="frame_c.html"> </frameset> 8/5/2017 HTML - Καραμαούνας Π. 21
HTML frames (Πλαίσια 3) Ανάμεικτα οριζόντια και κάθετα frames μπορούν να ορισθούν ως εξής: <frameset rows="50%,50%"> <frame src="frame_a.html"> <frameset cols="25%,75%"> <frame src="frame_b.html"> <frame src="frame_c.html"> </frameset> </frameset> 8/5/2017 HTML - Καραμαούνας Π. 22
HTML frames (Πλαίσια 4) Frames σταθερού μεγέθους μπορούν να ορισθούν με το γνώρισμα noresize του tag <frame> ως εξής: <frameset rows="50%,50%"> <frame noresize="noresize" src="frame_a.html"> <frameset cols="25%,75%"> <frame noresize="noresize" src="frame_b.html"> <frame noresize="noresize" src="frame_c.html"> </frameset> </frameset> 8/5/2017 HTML - Καραμαούνας Π. 23
HTML frames (Πλαίσια 5) Ένα frame πλοήγησης (navigation) με μία λίστα από συνδέσμους και στόχο ένα δεύτερο frame, μπορεί να ορισθεί ως εξής: <frameset cols="120,*"> <frame src="19links_list.htm"> <frame src="frame_a.html" name="showframe"> </frameset> <a href ="frame_a.html" target ="showframe">frame a</a><br> <a href ="frame_b.html" target ="showframe">frame b</a><br> <a href ="frame_c.html" target ="showframe">frame c</a> 8/5/2017 HTML - Καραμαούνας Π. 24
HTML frames (Πλαίσια 6) Ένα inline frame με μία html σελίδα μέσα του, μπορεί να ορισθεί ως εξής: <p>inline frame :</p> <iframe src="19.htm"></iframe> 8/5/2017 HTML - Καραμαούνας Π. 25
HTML tables (Πίνακες 1) Ένας html πίνακας, μπορεί να ορισθεί ως εξής: <p> Each table starts with a table tag. Each table row starts with a tr tag. Each table data starts with a td tag. </p> <h4>one column:</h4> <table border="1"> <td>100</td> </table> <h4>one row and three columns:</h4> <table border="1"> <td>100</td> <td>200</td> <td>300</td> </table> <h4>two rows and three columns:</h4> <table border="1"> <td>100</td> <td>200</td> <td>300</td> <td>400</td> <td>500</td> <td>600</td> </table> HTML - Καραμαούνας Π. 26
HTML tables (Πίνακες 2) Παραδείγματα html πινάκων με διαφορετικούς τύπους ορίων (borders): <h4>with a normal border:</h4> <table border="1"> <td>first</td> <td>second</td> </table> <h4>with a thick border:</h4> <table border="8"> <td>first</td> <td>second</td> </table> <h4>with a very thick border:</h4> <table border="15"> <td>first</td> <td>second</td> </table> HTML - Καραμαούνας Π. 27
HTML tables (Πίνακες 3) Παράδειγμα html πίνακα με επικεφαλίδες (headings): <table border="1"> <th>heading</th> <th>another Heading</th> <td>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 2, cell 1</td> <td>row 2, cell 2</td> </table> 8/5/2017 HTML - Καραμαούνας Π. 28
HTML tables (Πίνακες 4) Παράδειγμα html πίνακα με άδεια κελιά: <table border="1"> <td>row 1, cell 1</td> <td>row 1, cell 2</td> <td>row 2, cell 1</td> <td> </td> </table> 8/5/2017 HTML - Καραμαούνας Π. 29
HTML tables (Πίνακες 5) Παράδειγμα html πίνακα χωρίς όρια (borders): <h4>this table has no borders:</h4> <table> <td>100</td> <td>200</td> <td>300</td> <td>400</td> <td>500</td> <td>600</td> </table> 8/5/2017 HTML - Καραμαούνας Π. 30
HTML tables (Πίνακες 6) Παράδειγμα html πίνακα με κάθετες επικεφαλίδες (headings): <h4>vertical headers:</h4> <table border="1"> <th>first Name:</th> <td>bill Gates</td> <th>telephone:</th> <td>555 77 854</td> <th>telephone:</th> <td>555 77 855</td> </table> 8/5/2017 HTML - Καραμαούνας Π. 31
HTML tables (Πίνακες 7) Παράδειγμα html πίνακα με κελιά που εκτείνονται (spam) σε παραπάνω από μία γραμμή / στήλη: <h4>cell that spans two columns:</h4> <table border="1"> <th>name</th> <th colspan="2">telephone</th> <td>bill Gates</td> <td>555 77 854</td> <td>555 77 855</td> </table> <h4>cell that spans two rows:</h4> <table border="1"> <th>first Name:</th> <td>bill Gates</td> <th rowspan="2">telephone:</th> <td>555 77 854</td> <td>555 77 855</td> </table> HTML - Καραμαούνας Π. 32
HTML tables (Πίνακες 8) Παράδειγμα html πίνακα με κελιά ανάμεικτων περιεχομένων: <table border="1"> <td> <p>this is a paragraph</p> <p>this is another paragraph</p> </td> <td>this cell contains a table: <table border="1"> <td>a</td> <td>b</td> <td>c</td> <td>d</td> </table> </td> <td>this cell contains a list <ul> <li>apples</li> <li>bananas</li> <li>pineapples</li> </ul> </td> <td>hello</td> </table> HTML - Καραμαούνας Π. 33
HTML tables (Πίνακες 9) Παράδειγμα html πίνακα με περιθώρια στα κελιά : <h4>with cellpadding:</h4> <table border="1" cellpadding="10"> <td>first</td> <td>second</td> 8/5/2017 HTML - Καραμαούνας Π. 34
HTML tables (Πίνακες 10) Παράδειγμα χρωματισμένου html πίνακα : <h4>a background color:</h4> <table border="1" bgcolor="red"> <td>first</td> <td>second</td> </table> <h4>a background image:</h4> <table border="1" background="bgdesert.jpg"> <td>first</td> <td>second</td> </table> HTML - Καραμαούνας Π. 35
HTML tables (Πίνακες 11) Παράδειγμα html πίνακα με χρωματισμένα στα κελιά : <h4>cell backgrounds:</h4> <table border="1"> <td bgcolor="red">first</td> <td background="bgdesert.jpg"> Second</td> </table> HTML - Καραμαούνας Π. 36
HTML tables (Πίνακες 12) Παράδειγμα html πίνακα με ευθυγραμμισμένα (align) κελιά : <table width="400" border="1"> <th align="left">money spent on...</th> <th align="right">january</th> <th align="right">february</th> <td align="left">clothes</td> <td align="right">$241.10</td> <td align="right">$50.20</td> <td align="left">make-up</td> <td align="right">$30.00</td> <td align="right">$44.45</td> <td align="left">food</td> <td align="right">$730.40</td> <td align="right">$650.00</td> <th align="left">sum</th> <th align="right">$1001.50</th> <th align="right">$744.65</th> </table> HTML - Καραμαούνας Π. 37
<h4>with frame="border":</h4> <table frame="border"> <td>first</td> <td>second</td> </table> <h4>with frame="box":</h4> <table frame="box"> <td>first</td> <td>second</td> </table> <h4>with frame="void":</h4> <table frame="void"> <td>first</td> <td>second</td> </table> <h4>with frame="above":</h4> <table frame="above"> <td>first</td> <td>second</td> </table> <h4>with frame="below":</h4> <table frame="below"> <td>first</td> <td>second</td> </table> <h4>with frame="hsides":</h4> <table frame="hsides"> <td>first</td> <td>second</td> </table> <h4>with frame="vsides":</h4> <table frame="vsides"> <td>first</td> <td>second</td> </table> <h4>with frame="lhs":</h4> <table frame="lhs"> <td>first</td> <td>second</td> </table> HTML tables (Πίνακες 13) Παραδείγματα html πίνακων με διαφορετικούς τύπους ορίων (borders) ανάλογα με το γνώρισμα frame του tag <table>: <h4>with frame="rhs":</h4> <table frame="rhs"> <td>first</td> <td>second</td> </table> 38
HTML lists (Λίστες 1) Η HTML υποστηρίζει λίστες σορταρισμένες και μη: <h4>an Unordered List:</h4> <ul> <li>coffee</li> <li>tea</li> <li>milk</li> </ul> <h4>an Ordered List:</h4> <ol> <li>coffee</li> <li>tea</li> <li>milk</li> </ol> 8/5/2017 HTML - Καραμαούνας Π. 39
<h4>numbered list:</h4> <ol> <li>apples</li> <li>bananas</li> <li>lemons</li> <li>oranges</li> </ol> HTML lists (Λίστες 2) Άλλου τύπου σορταρισμένες λίστες : <h4>letters list:</h4> <ol type="a"> <li>apples</li> <li>bananas</li> <li>lemons</li> <li>oranges</li> </ol> <h4>lowercase letters list:</h4> <ol type="a"> <li>apples</li> <li>bananas</li> <li>lemons</li> <li>oranges</li> </ol> <h4>roman numbers list:</h4> <ol type="i"> <li>apples</li> <li>bananas</li> <li>lemons</li> <li>oranges</li> </ol> <h4>lowercase Roman numbers list:</h4> <ol type="i"> <li>apples</li> <li>bananas</li> <li>lemons</li> <li>oranges</li> </ol> HTML - Καραμαούνας Π. 40
HTML lists (Λίστες 3) Άλλου τύπου μη σορταρισμένες λίστες : <h4>disc bullets list:</h4> <ul type="disc"> <li>apples</li> <li>bananas</li> <li>lemons</li> <li>oranges</li> </ul> <h4>circle bullets list:</h4> <ul type="circle"> <li>apples</li> <li>bananas</li> <li>lemons</li> <li>oranges</li> </ul> <h4>square bullets list:</h4> <ul type="square"> <li>apples</li> <li>bananas</li> <li>lemons</li> <li>oranges</li> </ul> HTML - Καραμαούνας Π. 41
Εμφωλευμένες λίστες : <h4>a nested List:</h4> <ul> <li>coffee</li> <li>tea <ul> <li>black tea</li> <li>green tea <ul> <li>china</li> <li>africa</li> </ul> </li> </ul> </li> <li>milk</li> </ul> HTML lists (Λίστες 3) 8/5/2017 HTML - Καραμαούνας Π. 42
HTML forms (Φόρμες 1) Η HTML υποστηρίζει φόρμες για την εισαγωγή διαφορετικού τύπου δεδομένων: <form> First name: <input type="text" name="firstname"> <br> Last name: <input type="text" name="lastname"> </form> 8/5/2017 HTML - Καραμαούνας Π. 43
HTML forms (Φόρμες 2) HTML φόρμα τύπου password: <form> Username: <input type="text" name="user"> <br> Password: <input type="password" name="password"> </form> 8/5/2017 HTML - Καραμαούνας Π. 44
HTML forms (Φόρμες 3) HTML φόρμα τύπου checkbox: <form> I have a bike: <input type="checkbox" name="bike"> <br> I have a car: <input type="checkbox" name="car"> </form> 8/5/2017 HTML - Καραμαούνας Π. 45
HTML forms (Φόρμες 4) HTML φόρμα τύπου radio: <form> Male: <input type="radio" checked name="sex" value="male"> <br> Female: <input type="radio" name="sex" value="female"> </form> 8/5/2017 HTML - Καραμαούνας Π. 46
HTML forms (Φόρμες 5) HTML φόρμα τύπου drop-down list: <form> <select name="cars"> <option value="volvo">volvo <option value="saab">saab <option value="fiat">fiat <option value="audi">audi </select> </form> 8/5/2017 HTML - Καραμαούνας Π. 47
HTML forms (Φόρμες 6) HTML φόρμα τύπου text area: <textarea rows="10" cols="30"> The cat was playing in the garden. </textarea> 8/5/2017 HTML - Καραμαούνας Π. 48
HTML forms (Φόρμες 7) HTML φόρμα τύπου button: <form> <input type="button" value="hello world!"> </form> 8/5/2017 HTML - Καραμαούνας Π. 49
HTML forms (Φόρμες 8) HTML φόρμα τύπου text με πλαίσιο: <fieldset> <legend> Health information: </legend> <form> Height <input type="text" size="3"> Weight <input type="text" size="3"> </form> </fieldset> 8/5/2017 HTML - Καραμαούνας Π. 50
HTML images (Εικόνες 1) Η HTML υποστηρίζει την εμφάνιση εικόνων στις σελίδες: <p> An image: <img src="../images/constr4.gif" width="144" height="50"> </p> <p> A moving image: <img src="../images/hackanm.gif" width="48" height="48"> </p> 8/5/2017 HTML - Καραμαούνας Π. 51
HTML images (Εικόνες 2) Κάθετη ευθυγράμμιση εικόνων : <p> An image <img src ="../images/xhtml.gif" align="bottom" width="100" height="50"> in the text </p> <p> An image <img src ="../images/xhtml.gif" align="middle" width="100" height="50"> in the text </p> <p> An image <img src ="../images/xhtml.gif" align="top" width="100" height="50"> in the text </p> <p>note that bottom alignment is the default alignment</p> <p> An image <img src ="../images/xhtml.gif" width="100" height="50"> in the text </p> <p> <img src ="../images/xhtml.gif" width="100" height="50"> An image before the text </p> <p> An image after the text <img src ="../images/xhtml.gif" width="100" height="50"> </p> 8/5/2017 HTML - Καραμαούνας Π. 52
HTML images (Εικόνες 3) Οριζόντια ευθυγράμμιση εικόνων : <p> <img src ="../images/xhtml.gif" align ="left" width="100" height="50"> A paragraph with an image. The align attribute of the image is set to "left". The image will float to the left of this text. </p> <p> <img src ="../images/xhtml.gif" align ="right" width="100" height="50"> A paragraph with an image. The align attribute of the image is set to "right". The image will float to the right of this text. </p> 8/5/2017 HTML - Καραμαούνας Π. 53
HTML images (Εικόνες 4) Αλλαγή μεγέθους εικόνων : <p> <img src="../images/hackanm.gif" width="20" height="20"> </p> <p> <img src="../images/hackanm.gif" width="45" height="45"> </p> <p> <img src="../images/hackanm.gif" width="70" height="70"> </p> <p> You can make a picture larger or smaller changing the values in the "height" and "width" attributes of the img tag. </p> 8/5/2017 HTML - Καραμαούνας Π. 54
HTML images (Εικόνες 5) Εικόνα με συμβουλευτικό κείμενο (alt) : <img src=../images/goleft.gif" alt="go Left" width="32" height="32"> <p> Text-only browsers will only display the text in the "alt" attribute, which is "Go Left". Note that if you hold the mouse pointer over the image it will display the text. </p> 8/5/2017 HTML - Καραμαούνας Π. 55
HTML images (Εικόνες 6) Εικόνα με υπερσύνδεσμο : <p> You can also use an image as a link: <a href="test.htm"> <img border="0" src="buttonnext.gif" width="65" height="38"> </a> </p> 8/5/2017 HTML - Καραμαούνας Π. 56
HTML images (Εικόνες 7) Εικόνα τύπου image-map. Δηλ. εικόνα με καθορισμένες περιοχές ως υπερσυνδέσμους σε άλλες σελίδες : <p> Click on one of the planets to watch it closer: </p> <img src="../images/planets.gif" width="145" height="126" usemap="#planetmap"> <map name="planetmap"> <area shape="rect" coords="0,0,82,126" alt="sun" href="sun.htm"> <area shape="circle" coords="90,58,3" alt="mercury" href="mercur.htm"> <area shape="circle" coords="124,58,8" alt="venus" href="venus.htm"> </map> 8/5/2017 HTML - Καραμαούνας Π. 57
HTML images (Εικόνες 8) Εικόνα ως background σελίδας : <body background="../images/paper.gif"> <h3>image Background</h3> <p>both gif and jpg files can be used as HTML backgrounds.</p> <p>if the image is smaller than the page, the image will repeat itself.</p> 8/5/2017 HTML - Καραμαούνας Π. 58