27 Μαρτίου 2025

AUDIO

<center><audio controls autoplay>

<source src="1.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio> </center>

VIDEO
<center><video width="320" height="240" autoplay muted>
<source src="1.mp4" type="video/mp4"><br><br>
Your browser does not support the video tag.
</video> </center> <br> <br>

<center> <video width="320" height="240" autoplay muted>
<source src="2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video></center>

YOUTUBE
<center><iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1&mute=1">
</iframe></center><br><br>

FORMS

<html>

<body>

<h2>The autocomplete Attribute</h2>

<form action="/action_page.php" autocomplete="on">

  First name:<input type="text" name="fname"><br>

  Last name: <input type="text" name="lname"><br>

  E-mail: <input type="email" name="email" autocomplete="off"><br>

</form>

<h2>Textarea</h2>

<form action="/action_page.php">

  <textarea name="message" rows="10" cols="30">The cat was playing in the garden.</textarea>   <br>

</form>

<h2>Date Field Restrictions</h2>

<form action="/action_page.php">

Enter a date before 1980-01-01:<br>

<input type="date" name="bday" max="1979-12-31"><br><br>

Enter a date after 2000-01-01:<br>

<input type="date" name="bday" min="2000-01-02"><br><br>

</form>

<h2>The select Element</h2>

<p>The select element defines a drop-down list:</p>

<form action="/action_page.php">

  <select name="cars">

    <option value="volvo">Volvo</option>

    <option value="saab">Saab</option>

    <option value="fiat">Fiat</option>

    <option value="audi">Audi</option>

  </select>

  <br><br>

</form>

<h2>Checkboxes</h2>

<p>The <strong>input type="checkbox"</strong> defines a checkbox:</p>

<form action="/action_page.php">

<input type="checkbox" name="vehicle1" value="Bike">I have a bike

<br>

<input type="checkbox" name="vehicle2" value="Car">I have a car

<br><br>

</form>

<h2>Radio Buttons</h2>

<p>The <strong>input type="radio"</strong> defines a radio button:</p>

<form action="/action_page.php">

  <input type="radio" name="gender" value="male" checked> Male<br>

  <input type="radio" name="gender" value="female"> Female<br>

  <input type="radio" name="gender" value="other"> Other<br><br>

</form>

<h1>File upload</h1>

<form action="/action_page.php">

  Select a file: <input type="file" name="myFile"><br><br>

</form>

<h2>Search Field</h2>

<form action="/action_page.php">

  Search Google:

  <input type="search" name="googlesearch"><br><br><br>

  <input type="submit">

</form>

</body>

</html>

 


15 Μαρτίου 2025

Χρώμα κειμένου

<p style="color:red;">I am red</p>

<p style="color:blue; text-align:center;font-size:50px;">I am blue</p>

<p style="font-size:50px; color:red; font-family:courier;">I am big</p>

Χρώμα φόντου κειμένου

<h1 style="background-color:SlateBlue;">SlateBlue</h1>

<h1 style="background-color:Violet;">Violet</h1>

<h1 style="background-color:LightGray;">LightGray</h1>

Χρώμα περιγράμματος

<h1 style="border: 2px solid Tomato;">Hello World</h1>

<h1 style="border: 2px solid DodgerBlue;">Hello World</h1>

<h1 style="border: 2px solid Violet;">Hello World</h1>

Χρώμα με RGB

<h1 style="background-color:#ee82ee;">#ee82ee</h1>

<h1 style="background-color:#ffa500;">#ffa500</h1>

<h1 style="background-color:#6a5acd;">#6a5acd</h1>

<table style="width:50%" align="center" border="5px" >

  <tr align="left">

    <th>ΠΟΛΗ</th>

    <th>ΠΛΗΘΥΣΜΟΣ</th>

    <th>ΜΕΣΗ ΗΛΙΚΙΑ</th>

  </tr>

  <tr>

    <td>ΚΑΣΤΟΡΙΑ</td>

    <td>11000</td>

    <td>50</td>

  </tr>

  <tr>

    <td>ΚΟΖΑΝΗ</td>

    <td>50000</td>

    <td>30</td>

  </tr>

</table>  <br> <br>

 

13 Μαρτίου 2025

 Βασικός κώδικας

<html>

<head>

</head>

<body>

</body>

</html>

Παράγραφος και επικεφαλίδες 

<h1 style="text-align:center;">ΓΡΑΦΟΥΜΕ ΑΥΤΟ ΠΟΥ ΘΕΛΟΥΜΕ</h1>

<p style="text-align:center;">ΓΡΑΦΟΥΜΕ ΑΥΤΟ ΠΟΥ ΘΕΛΟΥΜΕ</p>

Φόντο μέσω head

<head>

<style>

body {

    background-color: lightblue;

}

</style>

</head>

Φόντο μέσω body

<body style="background-color:powderblue;">

Εικόνες

<img src="1.jpg" alt="ΛΕΖΑΝΤΑ" width="104" height="142">

Φόντο εικόνα στο head

<head>

<style>

body {

    background-image: url("bgdesert.jpg");

}

</style>

</head>

Υπερσύνδεσμοι

<p><a href="2.html">HTML Images</a> ΣΕ ΙΣΤΟΣΕΛΙΔΑ</p>

<p><a href="1.jpg">HTML Images</a> ΣΕ ΕΙΚΟΝΑ</p>

<p><a href="https://cdm.uowm.gr">ΕΠΙΚΟΙΝΩΝΙΑΣ ΨΗΦΙΑΚΩΝ ΜΕΣΩΝ</a> ΣΕ SITE</p>


4o ΜΑΘΗΜΑ  HTML