Μαθήματα HTML. 8/5/2017 HTML - Καραμαούνας Π. 1
|
|
|
- Ἀθήνη Παχής
- 8 χρόνια πριν
- Προβολές:
Transcript
1 Μαθήματα HTML 8/5/2017 HTML - Καραμαούνας Π. 1
2 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
3 Πώς προβάλλονται οι σελίδες; Όλες οι Web σελίδες περιέχουν εντολές για την εμφάνιση του κειμένου Ο Web browser διαβάζει τις εντολές αυτές και εμφανίζει αναλόγως τη σελίδα Οι πιο κοινές εντολές εμφάνισης λέγονται HTML tags 8/5/2017 HTML - Καραμαούνας Π. 3
4 Εισαγωγή στην HTML HTML σημαίνει : Hyper Text Markup Language Ένα αρχείο HTML πρέπει να έχει την επέκταση.htm ή.html Ένα αρχείο HTML μπορεί να δημιουργηθεί με οποιονδήποτε επεξεργαστή κειμένου (π.χ. Notepad) 8/5/2017 HTML - Καραμαούνας Π. 4
5 Παράδειγμα 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
6 Παράδειγμα HTML Εναλλακτικά χρησιμοποιήστε έναν online HTML editor: π.χ /5/2017 HTML - Καραμαούνας Π. 6
7 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
8 Paragraphs (Παράγραφοι) Οι παράγραφοι ορίζονται με το tag <p>... </p>: <p>πρώτη παράγραφος</p> <p>δεύτερη παράγραφος</p> <p>τρίτη παράγραφος</p> 8/5/2017 HTML - Καραμαούνας Π. 8
9 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
10 Comments (Σχόλια) Τα σχόλια ορίζονται με το tag <! >: <!--This comment will not be displayed--> <p>this is a regular paragraph</p> 8/5/2017 HTML - Καραμαούνας Π. 10
11 Στοιχισμένες Επικεφαλίδες Οι επικεφαλίδες στοιχίζονται με το γνώρισμα 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
12 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
13 Χρωματισμός σελίδας Οι σελίδες χρωματίζονται με το γνώρισμα bgcolor του tag : <body bgcolor="yellow"> <h2>look: Colored Background!</h2> 8/5/2017 HTML - Καραμαούνας Π. 13
14 Παράδειγμα: <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
15 HTML links (Σύνδεσμοι) Οι σύνδεσμοι ορίζονται με το tag <a> </a>: <p>σύνδεσμος για την <a href="test.htm/">τοπική σελίδα</a> </p> <p>σύνδεσμος για το <a href=" Παιδείας</a> </p> 8/5/2017 HTML - Καραμαούνας Π. 15
16 HTML images-links (Σύνδεσμοι) Οι εικόνες σύνδεσμοι ορίζονται ως εξής: <p> Μπορεί να χρησιμοποιηθεί και μία εικόνα σαν σύνδεσμος: <a href=" <img border="0" src="buttonnext.gif" width="65" height="38"> </a> </p> 8/5/2017 HTML - Καραμαούνας Π. 16
17 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
18 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
19 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
20 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
21 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
22 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
23 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
24 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
25 HTML frames (Πλαίσια 6) Ένα inline frame με μία html σελίδα μέσα του, μπορεί να ορισθεί ως εξής: <p>inline frame :</p> <iframe src="19.htm"></iframe> 8/5/2017 HTML - Καραμαούνας Π. 25
26 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
27 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
28 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
29 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
30 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
31 HTML tables (Πίνακες 6) Παράδειγμα html πίνακα με κάθετες επικεφαλίδες (headings): <h4>vertical headers:</h4> <table border="1"> <th>first Name:</th> <td>bill Gates</td> <th>telephone:</th> <td> </td> <th>telephone:</th> <td> </td> </table> 8/5/2017 HTML - Καραμαούνας Π. 31
32 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> </td> <td> </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> </td> <td> </td> </table> HTML - Καραμαούνας Π. 32
33 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
34 HTML tables (Πίνακες 9) Παράδειγμα html πίνακα με περιθώρια στα κελιά : <h4>with cellpadding:</h4> <table border="1" cellpadding="10"> <td>first</td> <td>second</td> 8/5/2017 HTML - Καραμαούνας Π. 34
35 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
36 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
37 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">$ </th> <th align="right">$744.65</th> </table> HTML - Καραμαούνας Π. 37
38 <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
39 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
40 <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
41 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
42 Εμφωλευμένες λίστες : <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
43 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
44 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
45 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
46 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
47 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
48 HTML forms (Φόρμες 6) HTML φόρμα τύπου text area: <textarea rows="10" cols="30"> The cat was playing in the garden. </textarea> 8/5/2017 HTML - Καραμαούνας Π. 48
49 HTML forms (Φόρμες 7) HTML φόρμα τύπου button: <form> <input type="button" value="hello world!"> </form> 8/5/2017 HTML - Καραμαούνας Π. 49
50 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
51 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
52 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
53 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
54 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
55 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
56 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
57 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
58 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
Μαθήματα HTML. 24/10/2014 HTML - Καραμαούνας Π. 1
Μαθήματα HTML www.w3schools.com 24/10/2014 HTML - Καραμαούνας Π. 1 World Wide Web Το World Wide Web (WWW) είναι ένα παγκόσμιο δίκτυο ΗΥ Όλοι οι ΗΥ χρησιμοποιούν ένα standard επικοινωνίας, το ΗΤΤP Όλες
11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες
11. Η γλώσσα HTML Πίνακες, Λίστες, Φόρμες Σκοπός του Εργαστηρίου: Σκοπός της παρούσας εργαστηριακής άσκησης είναι η εμβάθυνση σε συχνά χρησιμοποιούμενες ετικέτες HTML, όπως οι πίνακες και οι λίστες, καθώς
Ετικέτες HTML. <!-->: Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον
Ετικέτες HTML : Τα σχόλια χρησιμοποιούνται για να γράφουμε σημειώσεις μέσα στον πηγαίο κώδικα για να διευκολύνουμε την επεξεργασία και την συντήρηση του αρχείου. Τα σχόλια δεν εμφανίζονται στην οθόνη
Άσκηση 6 Επαναληπτική Άσκηση HTML
Άσκηση 6 Επαναληπτική Άσκηση HTML ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει τον τύπο του αρχείου Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο
Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας
Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας Δικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) Διάλεξη #5η: HTML: πίνακες (tables), πλαίσια (frames) Γαβαλάς Δαμιανός
Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML
Επαναληπτική Άσκηση ΕΤΙΚΕΤΕΣ HTML ΕΤΙΚΕΤΑ ΠΕΡΙΓΡΑΦΗ ΙΔΙΟΤΗΤΕΣ ΙΔΙΟΤΗΤΑ ΤΙΜΗ ΠΕΡΙΓΡΑΦΗ Βασικές Ορίζει ένα αρχείο HTML Ορίζει ένα τίτλο για το αρχείο Ορίζει το σώµα της background URL
Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html. Χρ. Ηλιούδης
Εισαγωγή στον Παγκόσμιο ιστό και στη γλώσσα Html Χρ. Ηλιούδης Παγκόσμιος Ιστός (WWW) Ο Παγκόσμιος Ιστός (World Wide Web WWW), ή απλώς Ιστός, βασίζεται στην ιδέα των κατανεμημένων πληροφοριών. Αντί όλες
ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ
ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 2 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ ΣΥΝΔΕΣΜΟΙ Στην άσκηση αυτή θα εμπλουτίσουμε την ιστοσελίδα που φτιάξαμε στην προηγούμενη άκηση με πίνακες, συνδέσμους και γραφικά. 1.
Προγραμματισμός Παγκόσμιου Ιστού
Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Προγραμματισμός Παγκόσμιου Ιστού 2 η Διάλεξη Δημοσθένης Κυριαζής Δευτέρα 6 Μαρτίου 2017 Σημερινή διάλεξη Σύνοψη προηγούμενης διάλεξης HTML / HTML5 Λίστες,
ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής)
http://www.zioulas.gr ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΣΧΟΛΙΚΟ ΒΙΒΛΙΟ ΚΕΦΑΛΑΙΟ 11 Ευάγγελος Χ. Ζιούλας (Καθηγητής Πληροφορικής) WEB SERVER Είναι μια εφαρμογή software που αναλαμβάνει την αποστολή μιας ιστοσελίδας σε
ΠΡΟΓΡΑΜΜΑΤΙΣΜΟΣ ΙΑ ΙΚΤΥΟΥ HTLM CSS LECTURE 1
ΠΡΟΓΡΑΜΜΑΤΙΣΜΟΣ ΙΑ ΙΚΤΥΟΥ HTLM CSS LECTURE 1 ver. 2.03 Jan 2011 ρ. Γεώργιος Φ. Φραγκούλης 1 What is HTML? HTML is a language for describing web pages. HTML stands for Hyper Text Markup Language HTML is
Υπερκείμενο / Υπερμέσα
Υπερκείμενο / Υπερμέσα Γιώργος Τζιρίτας Τμήμα Επιστήμης Υπολογιστών http://www.csd.uoc.gr/~tziritas Άνοιξη 2016 1 Υπερκείμενο Πλούσιο κείμενο με δυναμική οργάνωση των πληροφοριών Οργάνωση της γνώσης με
2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ
2014 2. ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΓΙΩΡΓΟΣ ΓΙΑΝΝΑΚΑΚΗΣ, ΜΑΝΩΛΗΣ ΤΣΙΚΝΑΚΗΣ H HTML είναι μία γλώσσα σήμανσης και αποτελεί την κύρια γλώσσα δημιουργίας ιστοσελίδων του διαδικτύου. Είναι το ακρωνύμιο των λέξεων HyperText
ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML
ΕΠΛ 003: ΕΠΙΣΤΗΜΗ ΤΗΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΚΑΙ ΠΛΗΡΟΦΟΡΙΑΚΑ ΣΥΣΤΗΜΑΤΑ HTML Στόχοι 1 Να δημιουργήσουμε υπερκείμενα με την Γλώσσα Επισημείωσης Υπερκειμένων (hypertext markup language, HTML). Υπολογιστικά συστήματα:
ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ
ΠΡΟΓΡΑΜΜΑΤΙΣΤΙΚΑ ΕΡΓΑΛΕΙΑ ΓΙΑ ΤΟ ΔΙΑΔΙΚΤΥΟ Κεφάλαιο 4. Η γλώσσα HTML Επιμέλεια: Καραγιάννης Σπύρος Καθηγητής ΠΕ19 Βασικοί κανόνες σύνταξης HTML ομή σελίδας HTML Μορφοποίηση κειμένου Κατάλογοι Εισαγωγή
Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML)
Τεχνολογίες Διαδικτύου (Εξασκηθείτε στην HTML) 1. Δημιουργία μιας απλής σελίδας HTML Ανοίξτε το Notepad ακολουθώντας τη διαδρομή Start All Programs Accessories Notepad Πληκτρολογήστε το ακόλουθο κείμενο:
Η γλώσσα HTML. Επιμέλεια: Δέγγλερη Σοφία
Η γλώσσα HTML Επιμέλεια: Δέγγλερη Σοφία Υπερκείμενο Το δομικό χαρακτηριστικό του Παγκόσμιου Ιστού Ένα αρχείο Απλό κείμενο και υπερσύνδεσμοι Υπερσύνδεσμος Μετάβαση σε διάφορα άλλα έγγραφα Αποτελείται από
1. <body> 2. <header> 3. <h1> My Page </h1> 4. </header> 5. <section>
Ενδεικτικές ερωτήσεις 1. Τι σημαίνουν τα αρχικά CSS 2. Τι σημαίνουν τα αρχικά HTML 3. Ποια η διαφορά μεταξύ Internet και Web; a. Είναι το ίδιο b. Το Web είναι μια υπηρεσία του διαδικτύου 4. Ποια η διαφορά
Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους
Εισαγωγή στην HTML Τα tags της HTML και τα γνωρίσματά τους Με την γλώσσα περιγραφής υπερ-κειμένου (HTML) μπορούμε να σχεδιάζουμε ιστοσελίδες. Η HyperText Markup Language βασίζεται στην SGML (Standard Generalized
Η λίστα <ol> (ordered list)
Λίστες (lists) Σε πολλά έγγραφα απαιτείται η παρουσίαση ή η καταγραφή στοιχείων σε μορφή λίστας. Για παράδειγμα, μια λίστα από ονόματα ή μια λίστα από προϊόντα. Τα στοιχεία μιας λίστας μπορεί να είναι
HTML... 1. Εισαγωγή στην HTML και τα CSS
HTML...... 1 Εισαγωγή στην HTML και τα CSS HTML...... 2 HTML. H HTML (HYPERTEXT MARKUP LANGUAGE), είναι µία γλώσσα η οποία «λέει» στον υπολογιστή πως θα πρέπει να εµφανίσει µία ιστοσελίδα. Τα αρχεία στα
Σταύρος Καουκάκης Ευτύχιος Βαβουράκης
ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ 1 ο ΣΧΟΛΕΙΟ ΚΩΔΙΚΑ «Βασικά Θέματα Προγραμματισμού στην Ανάπτυξη Δυναμικών Διαδικτυακών Εφαρμογών» (Part 1) Σταύρος Καουκάκης Ευτύχιος Βαβουράκης 1 Λίγα Λόγια για το Σχολείο Μονάδες
Προγραμματισμός Διαδικτύου
Πανεπιστήμιο Δυτικής Μακεδονίας Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Προγραμματισμός Διαδικτύου Δρ. Μηνάς Δασυγένης mdasygenis@uowm.gr Τμήμα της παρουσίασης δημιουργήθηκε από τον κ. Παναγιώτη
Εισαγωγή στην Επιστήμη Υπολογιστών. Εισαγωγή στην HTML. Άννα Κεφάλα Παναγιώτα Μιχόλια
Εισαγωγή στην Επιστήμη Υπολογιστών Άννα Κεφάλα Παναγιώτα Μιχόλια Εργαστηριακές Σημειώσεις ΕΙΣΑΓΩΓΗ ΣΤΗ ΓΛΩΣΣΑ HTML Τί θα δούμε.. Τί είναι η HTML. Σε τί χρησιμεύει. Εκδόσεις. Tags, elements, attributes
Εισαγωγή στην Επιστήμη Υπολογιστών. Εισαγωγή στην HTML. Άννα Κεφάλα Παναγιώτα Μιχόλια
Εισαγωγή στην Επιστήμη Υπολογιστών Εισαγωγή στην HTML Άννα Κεφάλα Παναγιώτα Μιχόλια Εργαστηριακές Σημειώσεις ΕΙΣΑΓΩΓΗ ΣΤΗ ΓΛΩΣΣΑ HTML ΜΕΡΟΣ Β': CSS ΚΑΙ FORMS 2 Cascading Style Sheets (CSS) Cascading Style
Προγραμματιστικές Εφαρμογές στο Διαδίκτυο Εργαστήριο 5
Προγραμματιστικές Εφαρμογές στο Διαδίκτυο Εργαστήριο 5 Τεχνολογικό Εκπαιδευτικό Ίδρυμα Κεντρικής Μακεδονίας Σχολή Τεχνολογικών Εφαρμογών Τμήμα Μηχανικών Πληροφορικής 1. Στόχος Στόχος του εργαστηρίου είναι
Προγραμματισμός Διαδικτύου
Πανεπιστήμιο Δυτικής Μακεδονίας Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Προγραμματισμός Διαδικτύου Δρ. Μηνάς Δασυγένης mdasygenis@uowm.gr Τμήμα της παρουσίασης δημιουργήθηκε από τον κ. Παναγιώτη
Πίνακες. ετικέτα <table>
Πίνακες ετικέτα σύνταξη κελί 1 κελί 2 κελί 3 κελί 4 : πίνακας : γραμμή : κελί Ιδιότητα border border : ορίζει
Εισαγωγη στην html. Η δομή μιας ιστοσελίδας (αρχείο html) Η βασική δομή ενός αρχείου html είναι η εξής: <html> <head>
Εισαγωγη στην html Ο παγκόσμιος ιστός (αγγ.: World Wide Web ή www) είναι η πιο δημοφιλής υπηρεσία που μας παρέχει το Διαδίκτυο (Internet) και είναι ένα σύστημα διασυνδεδεμένων πληροφοριών (κειμένου, εικόνας,
ΠΛΗΡΟΦΟΡΙΑΚΑ & ΤΗΛΕΠΙΚΟΙΝΩΝΙΑΚΑ ΣΥΣΤΗΜΑΤΑ
Οικονοµικό Πανεπιστήµιο Αθηνών Τµήµα ιοικητικής Επιστήµης & Τεχνολογίας ΠΛΗΡΟΦΟΡΙΑΚΑ & ΤΗΛΕΠΙΚΟΙΝΩΝΙΑΚΑ ΣΥΣΤΗΜΑΤΑ Κεφάλαιο 11 Eισαγωγή στην ανάπτυξη ιστοσελίδων µε HMTL Γιώργος Γιαγλής Περίληψη Κεφαλαίου
Α ΛΥΚΕΙΟΥ - ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ ΜΑΪΟΣ 2019 ΕΝΔΕΙΚΤΙΚΕΣ ΕΡΩΤΗΣΕΙΣ ΚΑΤΑΝΟΗΣΗΣ
Το υλικό αυτό δίνεται στους μαθητές για τη σωστή μελέτη της διδαχθείσας ύλης του μέρους Β. Πρόκειται για ένα συμπαγή κορμό ερωτήσεων και ασκήσεων οι οποίες καλύφθηκαν κατά τη διάρκεια της έως τώρα σχολικής
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 6 ο Τεχνολογίες Διαδικτύου: HTML II Εισαγωγή Εικόνων Οι φυλλομετρητές μπορούν να εμφανίσουν ένθετες
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου. Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I
Πληροφορική Τμήμα Σχεδιασμού & Τεχνολογίας Ξύλου & Επίπλου Αντώνιος Καραγεώργος Ευανθία Τσιλιχρήστου Μάθημα 5 ο Τεχνολογίες Διαδικτύου: HTML I Διαδικτυακή Εφαρμογή (1/2) Ως διαδικτυακή εφαρμογή μπορούμε
Κεφάλαιο 4 HyperText Markup Language - HTML. Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013
Κεφάλαιο 4 HyperText Markup Language - HTML Προγραμματιστικά εργαλεία για το διαδίκτυο Φίλιππος Κουτσάκας, Πολύγυρος 2013 Τι είναι η HTML; Ένας τρόπος για να πεις στον σελιδομετρητή πώς να αναπαραστήσει
Βαρβάκειο Πρότυπο Γυμνάσιο
Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2016-2017 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,
2. Επιλέξτε την σωστή ετικέτα HTML που προσφέρει το μεγαλύτερο φόντο κειμένου. <head> <heading> <h6> <h1>
ΤΜΗΜΑ ΗΛΕΚΤΡΟΝΙΚΗΣ Τομέας Υπολογιστικών Συστημάτων και Ελέγχου Τεχνολογίες Πολυμέσων - Εφαρμογές Δρ. Β. ΒΑΛΑΜΟΝΤΕΣ Ε-mail: vala@teiath.gr Να απαντήσετε στις παρακάτω ερωτήσεις. 1. Τι σημαίνουν τα αρχικά
Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου.
Hyper Text Markup Language (HTML) που σημαίνει γλώσσα σήμανσης υπερκειμένου. 1 η ΑΣΚΗΣΗ Οι HTML σελίδες είναι απλές σελίδες κειμένου και μπορούν να δημιουργηθούν από οποιοδήποτε πρόγραμμα επεξεργασίας
ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ
ΒΑΣΙΚΕΣ ΑΡΧΕΣ ΣΧΕΔΙΑΣΜΟΥ ΕΦΑΡΜΟΓΩΝ Βαγγελιώ Καβακλή Τμήμα Πολιτισμικής Τεχνολογίας & Επικοινωνίας 8 Μαρτίου 2001 Hypertext Markup Language (HTML)! Σε μια ιστοσελίδα μπορούν να εμφανίζονται διαφορετικά
Εισαγωγή στην πληροφορική
Τμήμα Μηχανικών Πληροφορικής & Τηλεπικοινωνιών Εισαγωγή στην πληροφορική Ενότητα 5: Εισαγωγή στην HTML (Μέρος Α) Αγγελίδης Παντελής Τμήμα Μηχανικών Πληροφορικής και Τηλεπικοινωνιών Άδειες Χρήσης Το παρόν
Macromedia DreamWeaver 8.0.2. Παρουσίαση εργαλείου σχεδίασης διεπαφής χρήστη
Macromedia DreamWeaver 8.0.2 Παρουσίαση εργαλείου σχεδίασης διεπαφής χρήστη ο Μέρος 1 : Βασικές Έννοιες Εισαγωγή στην επιφάνεια εργασίας Insert Bar Property Bar Panels 10' Building a Web Page Παράδειγμα
Σχεδίαση ιστοσελίδων με τη γλώσσα HTML
Τ.Ε.Ι. Δυτικής Ελλάδας Σχολή Διοίκησης και Οικονομίας Τμήμα Διοίκησης Επιχειρήσεων - Πάτρα Σχεδίαση ιστοσελίδων με τη γλώσσα HTML Γιάννης Κουτσονίκος Σημειώσεις για το Εργαστήριο «Επιχειρηματικές δικτυακές
Σταύρος Καουκάκης Ευτύχιος Βαβουράκης
ΠΑΝΕΠΙΣΤΗΜΙΟ ΚΡΗΤΗΣ 1 ο ΣΧΟΛΕΙΟ ΚΩΔΙΚΑ «Βασικά Θέματα Προγραμματισμού στην Ανάπτυξη Δυναμικών Διαδικτυακών Εφαρμογών» (Part 1) Σταύρος Καουκάκης Ευτύχιος Βαβουράκης 1 Λίγα Λόγια για το Σχολείο Μονάδες
ΑΣΠΑΙΤΕ. ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α. Υπερκείμενο και HTML. Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :...
ΠΡΑΚΤΙΚΗ ΑΣΚΗΣΗ 4α Υπερκείμενο και HTML ΑΣΠΑΙΤΕ Ημερομηνία :... Τμήμα :... Ονοματεπώνυμο :... Η HTML (HyperText Markup Language) είναι η γλώσσα που χρησιμοποιείται για να περιγράψει τη δομή και τη διαμόρφωση
Ref.: SLWS 1 5Copyright 2005 The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7
The European Computer Driving Licence Foundation Ltd Σελίδα 1 από 7 ΣΤΟΧΟΙ ΕΞΕΤΑΣΗΣ Η ενότητα ECDL WebStarter απαιτεί από τον Υποψήφιο να κατανοεί τις κύριες έννοιες της σχεδίασης και δημοσίευσης δικτυακών
Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο
Άσκηση 3 -Δηµιουργία ιστοσελίδων µε HTML µέρος 3 ο Εικόνες στην HTML Oι εικόνες ορίζονται µε την ετικέτα . Η συγκεκριµένη ετικέτα δεν κλείνει (είναι λάθος το: ) ή µπορούµε να πούµε ότι ανοίγει
Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο
Τεχνολογίες Διαδικτύου - Εργαστήριο 1 ο 1. Δημιουργία μιας απλής σελίδας HTML Στον προσωπικό σας κατάλογο δημιουργήστε ένα φάκελο με όνομα HTML. Ανοίξτε το Notepad ακολουθώντας τη διαδρομή (Start All Programs
Ειςαγωγή. Μορφοποίηςη. HTML - Basic. h t m l. d o c u m e n t. <html> <body>
Ειςαγωγή h t m l d o c u m e n t my First Heading this is a heading this is a heading my first paragraph. this is another paragraph. this is
Εισαγωγή εικόνων. ετικέτα <img>
Εισαγωγή εικόνων ετικέτα σύνταξη η ιδιότητα src καθορίζει ποια εικόνα θα εισαχθεί στη σελίδα η τιμή url είναι η πλήρης ή σχετική διαδρομή της εικόνας Παράδειγμα 1
<HTML> <HEAD> <TITLE> <BODY>
ΑΣΚΗΣΗ 1 1. Ανοίξτε τον επεξεργαστή ιστοσελίδων 2. Αποθηκεύστε στο X:/mathimata/html/askiseis/ με όνομα askisi1b.html 3. Θα φτιάξουμε μια νέα ιστοσελίδα, χρησιμοποιώντας τις βασικές ετικέτες
ΚΕΡΑΜΟΠΟΥΛΟΣ ΕΥΚΛΕΙΔΗΣ
ΚΕΡΑΜΟΠΟΥΛΟΣ ΕΥΚΛΕΙΔΗΣ H HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language (γλώσσα μορφοποίησης υπερκειμένου) και είναι η βασική γλώσσα δόμησης σελίδων του World Wide Web. 2 Βασικά χαρακτηριστικά
Σχεδίαση ιστοσελίδων
Τ.Ε.Ι. Δυτικής Ελλάδας Σχολή Διοίκησης και Οικονομίας Τμήμα Διοίκησης Επιχειρήσεων - Πάτρα Σχεδίαση ιστοσελίδων Θεώνη Πιτουρά, Γιάννης Κουτσονίκος Σημειώσεις για το Εργαστήριο «Επιχειρηματικές δικτυακές
Εισαγωγή στην γλώσσα υπερκειμένου HTML
Εισαγωγή στην γλώσσα υπερκειμένου HTML 1 Βασικές έννοιες 2 3 Yπερκείμενο - Υπερσύνδεσμος - HTML Το δομικό χαρακτηριστικό του WWW είναι το υπερκείμενο (hypertext), δηλαδή ένα αρχείο που εκτός από απλό κείμενο
ΕΠΛ 012. Υπερκείµενα
ΕΠΛ 012 Υπερκείµενα Hypertext Τι είναι το Υπερκείµενο Ένα κείµενο τύπου «Υπερκείµενο» (Hypertext) περιέχει ετικέτες που ονοµάζονται Links (σύνδεσµοι). Χρησιµεύουν: Μεταπήδηση σε άλλο σηµείο της ιστοσελίδας
Κειµενογράφοι ετικετών
ΕΠΛ 012 Γλώσσα Μορφοποίησης HTML Πως κτίζουµε τις Ετικέτες Notepad ή άλλο TEXT editor Πού τα κάνουµε Save? Πώς τα οργανώνουµε Πώς τα βάζουµε δηµόσια online Τα αρχεία να τελειώνουν σε.html ή.htm Πως ξεκινούµε
<a href="http://www.somepage.com/somepage.html">μετάβαση στο κείμενο</a>.
HTML Τα αρχεία της HTML έχουν ετικέτες (tags) που ορίζουν τη δομή και τη μορφοποίηση των ιστοσελίδων. Οι περισσότερες HTML ετικέτες τις συναντούμε ως ζεύγη τα οποία ενεργούν στα περιεχόμενα μεταξύ των
«Σχεδιαστής ιστοσελίδων και εφαρμογών (Front End Web Developer)»
«Σχεδιαστής ιστοσελίδων και εφαρμογών (Front End Web Developer)» Εισαγωγή Εισαγωγικό Σημείωμα Οι σημειώσεις αυτές δεν είναι εμπορικό προϊόν. Συντάχθηκαν για τους ωφελούμενους του έργου «ΘΕΩΡΗΤΙΚΗ ΚΑΤΑΡΤΙΣΗ,
Πανεπιστήμιο Αιγαίου. Χειμερινό εξάμηνο. Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας
Πανεπιστήμιο Αιγαίου Σχολή Κοινωνικών Επιστημών Τμήμα Πολιτισμικής Τεχνολογίας Και Επικοινωνίας ικτυακά Πολυμέσα Ι (Β Έτος, 3ο εξ) ιάλεξη #4η: HTML: σύνδεσμοι, Χάρτες Εικόνων (Image Maps) Χειμερινό εξάμηνο
Βαρβάκειο Πρότυπο Γυμνάσιο
Παραδόσεις & εργαστηριακές ασκήσεις στην HTML Βαρβάκειο Πρότυπο Γυμνάσιο Σχολ. Χρονιά 2017-2018 Θ. Οτζάκογλου Εργαστήρι Πληροφορικής Σχολ. Έτος 2016 2017 Αν και δεν είναι μία ακόμη «γλώσσα προγραμματισμού»,
ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 1 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ
ΕΡΓΑΣΤΗΡΙΑΚΗ ΑΣΚΗΣΗ 1 ΜΕΛΕΤΗ ΚΑΙ ΕΦΑΡΜΟΓΗ ΔΗΜΙΟΥΡΓΙΑΣ HTML ΣΕΛΙΔΩΝ 1. ΒΑΣΙΚΕΣ ΕΝΝΟΙΕΣ HTML ΣΕΛΙΔΩΝ Ας δούμε τι συμβαίνει όταν «μπαίνουμε» στο internet και επισκεπτόμαστε μια ιστοσελίδα. Για να μπούμε στο
Προγραμματισμός Παγκόσμιου Ιστού
Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Προγραμματισμός Παγκόσμιου Ιστού 2 η Διάλεξη Δημοσθένης Κυριαζής Δευτέρα 21 Μαρτίου 2016 Αρχιτεκτονική 2 επιπέδων Φυσική αρχιτεκτονική Τεχνική αρχιτεκτονική
7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα. Europe Code Week
7-22 Οκτωβρίου 2017 Μία γιορτή δημιουργίας με κώδικα @ #codeeu codeeu 7-22 October 2017 Europe Code Week Εισαγωγή στο Web Development HTML Λίγα λόγια... Η HTML είναι η βασική γλώσσα γραφής των ιστοσελίδων!
Εργαλεία ανάπτυξης εφαρμογών internet Ι
IEK ΟΑΕΔ ΚΑΛΑΜΑΤΑΣ ΤΕΧΝΙΚΟΣ ΕΦΑΡΜΟΓΩΝ ΠΛΗΟΦΟΡΙΚΗΣ Εργαλεία ανάπτυξης εφαρμογών internet Ι HTML Διδάσκουσα: Κανελλοπούλου Χριστίνα ΠΕ19 Πληροφορικής HTML (HyperText Markup Language) Η γλώσσα που χρησιμοποιείται
ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 1o ΕΡΓΑΣΤΗΡΙΟ ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML
ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ ΠΕΡΙΕΧΟΜΕΝΟ ΜΑΘΗΜΑΤΟΣ 1. Ετικέτες (tags) 1o ΕΡΓΑΣΤΗΡΙΟ ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML 2. Δομή εγγράφου (αρχείου html) 3. Δημιουργία αρχείου html 4.
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
Εργασία 11 η Πίνακες (βασικές ετικέτες, βασικές ιδιότητες) 1. Στο Σημειωματάριο πληκτρολογήστε τον παρακάτω κώδικα:
Εργασία 11 η Πίνακες (βασικές ετικέτες, βασικές ιδιότητες) 1. Στο Σημειωματάριο πληκτρολογήστε τον παρακάτω κώδικα: εισαγωγή εικόνων
Συλλογή και Επεξεργασία Δεδομένων με Φόρμες
Συλλογή και Επεξεργασία Δεδομένων με Φόρμες Οι φόρμες αποτελούν τον πιο δημοφιλή τρόπο για τη συλλογή δεδομένων μέσω του World Wide Web (WWW). Επιτρέπουν στους χρήστες να επικοινωνούν με τη βοήθεια του
Europe Code Week 7-22 Οκτωβρίου Μία γιορτή δημιουργίας με κώδικα
Europe Code Week 7-22 Οκτωβρίου 2017 7-22 October 2017 Μία γιορτή δημιουργίας με κώδικα @CodeWeekEU #codeeu codeeu Εισαγωγή στο Web Development CSS Λίγα λόγια... Η γλώσσα CSS χρησιμοποιείται για τη μορφοποίηση
Νέες Τεχνολογίες στην Εκπαίδευση
Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Πλαίσια Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
How to register an account with the Hellenic Community of Sheffield.
How to register an account with the Hellenic Community of Sheffield. (1) EN: Go to address GR: Πηγαίνετε στη διεύθυνση: http://www.helleniccommunityofsheffield.com (2) EN: At the bottom of the page, click
Τι είναι η HTML; Τί είναι οι ετικέτες (tags); Πώς είναι μια ετικέτα (tag);
Τι είναι η HTML; Η HTML είναι το ακρώνυμο από το Hyper Text Markup Language που σημαίνει γλώσσα χαρακτηρισμού υπερκειμένου. Η χρήση μιας γλώσσας χαρακτηρισμού σημαίνει ότι γράφεται πρώτα το κείμενο και
Διάλεξη 3η HTML intermediate
Διάλεξη 3η HTML intermediate Στέλιος Μόσχογλου Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος I S S E L D e. c o. d e (Intelligent Systems & Software Engineering Lab) Στόχος της ώρας Επέκταση γνώσεων στην html
Περιγράφει τα δεδοµένα της ιστοσελίδας και τη δοµή τους στο ίδιο αρχείο
Γλώσσα για τη δηµιουργία ιστοσελίδων Μεταφορά µέσω του πρωτοκόλλου HTTP (HyperText Transfer Protocol) Ο πελάτης (client) στέλνει αίτηµα για ιστοσελίδα Ο server στέλνει τη σελίδα Περιγράφει τα δεδοµένα
Προγραμματισμός Παγκόσμιου Ιστού
Πανεπιστήμιο Πειραιώς Τμήμα Ψηφιακών Συστημάτων Προγραμματισμός Παγκόσμιου Ιστού 1 η Διάλεξη Δημοσθένης Κυριαζής Δευτέρα 20 Φεβρουαρίου 2017 Σημερινή διάλεξη Εισαγωγή Στοιχεία μαθήματος Τυπικά θέματα Διαδικτυακή
Πίνακες HTML. Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου
Πίνακες HTML Παναγιώτης Γαλάτης 1ο ΕΠΑΛ Ηρακλείου Τι είναι Πίνακας Ένας πίνακας στοιχείων αποτελείται από γραμμές και στήλες. Το σημείο τομής μιας γραμμής και μιας στήλης ονομάζεται κελί (cell( cell).
Άσκηση 5 -Δηµιουργία ιστοσελίδων µε HTML µέρος 5 ο
Άσκηση 5 -Δηµιουργία ιστοσελίδων µε HTML µέρος 5 ο HTML Φόρµες Για να δηµιουργήσουµε µια φόρµα στην οποία θα γράφουν σχόλια ή παρατηρήσεις οι επισκέπτες των σελίδων µας, χρειαζόµαστε την ετικέτα .
ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML. Decode, ISSEL. Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος Στέλιος Μόσχογλου
ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML Θεοδόσης Σουργκούνης Αντώνης Χρυσόπουλος Στέλιος Μόσχογλου Decode, ISSEL Τμήμα Ηλεκτρολόγων Μηχανικών και Μηχανικών Υπολογιστών, Αριστοτέλειο Πανεπιστήμιο Θεσσαλονίκης Στόχος της ώρας
HTML 1. Στόχος της ώρας 11/3/2014. Εισαγωγή της γλώσσας HTML σε αρχάριο επίπεδο:
HTML 1 Στόχος της ώρας Τι είναι HTML και CSS; ιαχωρισμός περιεχομένου/μορφοποίησης Πότε χρησιμοποιούμε το ένα και πότε το άλλο; Εισαγωγή της γλώσσας HTML σε αρχάριο επίπεδο: Βασική σύνταξη, ετικέτες Τίτλοι,
Πίνακες. ιδιότητες ετικέτας <tr>
Πίνακες ιδιότητες ετικέτας Ιδιότητα align στοιχίζει κατά την οριζόντια διεύθυνση τα περιεχόμενα μιας γραμμής του πίνακα αριστερά (left), δεξιά (right), στο κέντρο (center), ή με πλήρη στοίχιση (justify)
ιαχείριση Πληροφοριών στο ιαδίκτυο
ιαχείριση Πληροφοριών στο ιαδίκτυο Εργαστήριο (Φυλλάδιο 7) ΤΕΙ Καβάλας - Σχολή ιοίκησης & Οικονοµίας Τµήµα ιαχείρισης Πληροφοριών ιδάσκων: Μαρδύρης Βασίλειος, ιπλ. Ηλ. Μηχανικός & Μηχ. Υπολογιστών, MSc
Νέες Τεχνολογίες στην Εκπαίδευση
Σχολή Εφαρμοσμένων Μαθηματικών και Φυσικών Επιστημών Εθνικό Μετσόβιο Πολυτεχνείο Νέες Τεχνολογίες στην Εκπαίδευση Πίνακες Στεφανέας Πέτρος Ζαμαρίας Βασίλης Άδεια Χρήσης Το παρόν εκπαιδευτικό υλικό υπόκειται
Φόρμες. Γενικοί κανόνες. Η ετικέτα <form>
Φόρμες Οι φόρμες περιέχουν τα στοιχεία φόρμας στο οποία ένας χρήστης μπορεί να εισαγάγει δεδομένα τα οποία στη συνέχεια αποστέλλονται σε έναν εξυπηρετητή για παραπέρα επεξεργασία. Γενικοί κανόνες Για τις
Στελεχώνου ε το σή ερα το τώρα και το αύριο!
Web HTML & CSS Εκπαιδευτικός & Εξεταστικός όμιλος FACEtoFACE Authorized Training & Certification Centers E.O.P.P.E.P Πιστοποιημένο Εκπαιδευτικό & Εξεταστικό Κέντρο Αθήνας Από το Υπουργείο Παιδείας Authorized
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο)
TEC410 Ανάπτυξη Δικτυακών Τόπων (Δ εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Στέλλα Λάμπουρα Εαρινό εξάμηνο Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό έχει αναπτυχθεί
ιαχείριση Πληροφοριών στο ιαδίκτυο
ιαχείριση Πληροφοριών στο ιαδίκτυο Εργαστήριο (Φυλλάδιο 4) ΤΕΙ Καβάλας - Σχολή ιοίκησης & Οικονοµίας Τµήµα ιαχείρισης Πληροφοριών ιδάσκων: Μαρδύρης Βασίλειος, ιπλ. Ηλ. Μηχανικός & Μηχ. Υπολογιστών, MSc
Βασίλειος Κοντογιάννης ΠΕ19
Ενότητα3 Επικοινωνία και Διαδίκτυο 11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML (HyperText Markup Language); Είναι μια γλώσσα σήμανσης (Markup) με την οποία πραγματοποιείται η δόμηση σελίδων του Παγκόσμιου
ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ. 4o ΕΡΓΑΣΤΗΡΙΟ ΕΙΚΟΝΕΣ ΣΤΗΝ HTML
ΕΡΓΑΣΤΗΡΙΟ: ΤΕΧΝΟΛΟΓΙΕΣ ΠΛΗΡΟΦΟΡΙΑΣ ΚΑΙ ΕΠΙΚΟΙΝΩΝΙΑΣ ΣΤΟΝ ΤΟΥΡΙΣΜΟ ΠΕΡΙΕΧΟΜΕΝΟ ΜΑΘΗΜΑΤΟΣ 1. Εικόνες 2. Ασκήσεις 4o ΕΡΓΑΣΤΗΡΙΟ ΕΙΚΟΝΕΣ ΣΤΗΝ HTML 1. Εικόνες 1. Οι μορφές (format) των εικόνων που μπορείτε
TEC510 Ανάπτυξη Δικτυακών Τόπων (Ε εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Γιώργος Μηλιώτης
TEC510 Ανάπτυξη Δικτυακών Τόπων (Ε εξάμηνο) Διδάσκων: Ανδρέας Γιαννακουλόπουλος Επιστημονικός συνεργάτης Εργαστηρίου: Γιώργος Μηλιώτης Χειμερινό εξάμηνο 2011-2012 Χρηματοδότηση Το παρόν εκπαιδευτικό υλικό
ΚΥΠΡΙΑΚΗ ΕΤΑΙΡΕΙΑ ΠΛΗΡΟΦΟΡΙΚΗΣ CYPRUS COMPUTER SOCIETY ΠΑΓΚΥΠΡΙΟΣ ΜΑΘΗΤΙΚΟΣ ΔΙΑΓΩΝΙΣΜΟΣ ΠΛΗΡΟΦΟΡΙΚΗΣ 6/5/2006
Οδηγίες: Να απαντηθούν όλες οι ερωτήσεις. Ολοι οι αριθμοί που αναφέρονται σε όλα τα ερωτήματα είναι μικρότεροι το 1000 εκτός αν ορίζεται διαφορετικά στη διατύπωση του προβλήματος. Διάρκεια: 3,5 ώρες Καλή
Ποιες είναι οι κύριες ετικέτες που χρησιμοποιεί η HTML για την περιγραφή της συνολικής δομής μιας ιστοσελίδας;
Τι είναι η HTML; Η HTML είναι το ακρωνύμιο των λέξεων HyperText Markup Language, δηλαδή Γλώσσα Χαρακτηρισμού Υπερ Κειμένου και βασίζεται στη γλώσσα SGML, Standard Generalized Markup Language, που είναι
Η Γλώσσα Προγραμματισμού του Internet HTML
Η Γλώσσα Προγραμματισμού του Internet HTML Η HTML και το Internet Κάθε σελίδα που εμφανίζεται στο Internet είναι ένα αρχείο γραμμένο με τη γλώσσα HTML (HyperText Markup Language, Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου),
ΗΤΜL ΔΗΜΙΟΥΡΓΩΝΤΑΣ ΕΝΑ HTML ΑΡΧΕΙΟ
ΗΤΜL HTML σημαίνει HyperText Markup Language, είναι δηλαδή μια γλώσσα που μας επιτρέπει να μορφοποιούμε κάποιες πληροφορίες προκειμένου να εμφανιστούν με τον τρόπο που θέλουμε σε έναν φυλλομετρητή. Η HTML
Cascading Style Sheets (CSS)
Cascading Style Sheets (CSS) Τα Cascading Style Sheets προσφέρουν έναν εύκολο τρόπο για να ορίσουμε τη μορφοποίηση που επιθυμούμε να έχουν οι σελίδες μία τοποθεσίας του Παγκόσμιου Ιστού που δημιουργούμε.
Σχεδίαση και Ανάπτυξη Ιστότοπων
Σχεδίαση και Ανάπτυξη Ιστότοπων Η Γλώσσα HTML Παρουσίαση 4 η 1 Βελώνης Γεώργιος Καθηγητής Περιεχόμενα Κανόνες σύνταξης της HTML Δομή σελίδας και βασικές ετικέτες Ιεραρχία (Hierarchy) Κανόνες σύνταξης της
1. Κλικ στην καρτέλα Insert 2. Tables 3. Κλικ Table 4. Σύρουμε το δείκτη του ποντικιού και επιλέγουμε τον επιθυμητό αριθμό γραμμών και στηλών
ΜΑΘΗΜΑ 4 ΣΤΟΧΟΙ: 1. Προσθήκη Πίνακα (Table) 2. Εισαγωγή Και Μετακίνηση Κειμένου Σε Πίνακα 3. Εισαγωγή Στηλών Και Γραμμών Σε Πίνακα 4. Διαγραφή Στηλών Και Γραμμών Σε Πίνακα 5. Αλλαγή Πλάτους Στηλών Και
ΚΥΠΡΙΑΚΗ ΕΤΑΙΡΕΙΑ ΠΛΗΡΟΦΟΡΙΚΗΣ CYPRUS COMPUTER SOCIETY ΠΑΓΚΥΠΡΙΟΣ ΜΑΘΗΤΙΚΟΣ ΔΙΑΓΩΝΙΣΜΟΣ ΠΛΗΡΟΦΟΡΙΚΗΣ 19/5/2007
Οδηγίες: Να απαντηθούν όλες οι ερωτήσεις. Αν κάπου κάνετε κάποιες υποθέσεις να αναφερθούν στη σχετική ερώτηση. Όλα τα αρχεία που αναφέρονται στα προβλήματα βρίσκονται στον ίδιο φάκελο με το εκτελέσιμο
DREAMWEAVER MX. 7. Με ποιον τρόπο μορφοποιούμε κάποιους χαρακτήρες της σελίδας μας; Στο παράθυρο Properties υπάρχει η πιο κάτω γραμμή εργαλείων:
1 Πώς δημιουργούμε ένα νέο Site; Πατάμε Site/ Manage Sites και μετά στο παράθυρο που εμφανίζεται πατάμε το κουμπάκι New και επιλέγουμε Site Στη συνέχεια θα πρέπει να δώσουμε: Α το όνομα που θέλουμε να
Κεφάλαιο 11: Εισαγωγή στην HTML. Εφαρμογές Πληροφορικής Κεφ. 11 Καραμαούνας Πολύκαρπος
Κεφάλαιο 11: Εισαγωγή στην HTML 1 11.1 Γενική εισαγωγή στην HTML Τι είναι η HTML HyperText Markup Language - Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου είναι η βασική γλώσσα με την οποία πραγματοποιείται η δόμηση
Αλεξιάδης Γεώργιος (ΠΕ86) -
11.1 Γενική Εισαγωγή στην HTML Τι είναι η HTML; HyperText Markup Language (Γλώσσα Χαρακτηρισμού Υπερ-Κειμένου) Βασίζεται στην SGML (Standard Generalized Markup Language) που είναι ένα πολύ μεγαλύτερο σύστημα
ΚΕΦΑΛΑΙΟ 4. H Γλώσσα Σήµανσης HTML. - Απρίλιος ηµήτριος Σάµψων. Επίκουρος Καθηγητής
ΠΑΝΕΠΙΣΤΗΜΙΟ ΠΕΙΡΑΙΩΣ Τµήµα ιδακτικής της Τεχνολογίας και Ψηφιακών Συστηµάτων ΚΕΦΑΛΑΙΟ 4 H Γλώσσα Σήµανσης HTML ηµήτριος Σάµψων Επίκουρος Καθηγητής - Απρίλιος 2004 - Περιεχόµενα 4 Η Γλώσσα Σήµανσης HTML...