Κυριακή 11 Φεβρουαρίου 2024

Html-Labs

**********************************
queBa.mousika
Excel_queba
Κοινόχρηστος φάκελος 

Παράδοση ασκήσεων
**********************************

1o Εργαστήρι html

- Βασικά :
- Γράψτε μία απλή παράγραφο στο Notepad++, αποθηκεύστε ως html αρχείο και ανοίξτε (drag&drop) το αρχείο στο chrome (ή σε οποιοδήποτε άλλο firefox, opera, Edge...).
- Προσθέστε το tag <p> στην αρχή και το </p>  στο τέλος και ξανανοίξτε το (ΠΑΡΑΤΗΡΗΣΗ). Στη συνέχεια va επιλέξτε συγκεκριμένες λέξεις και να τις "κλείσετε" μέσα στο atrribute <strong>...</strong> (άνοιγμα & παρατήρηση).
- Βάλτε τίτλο και κλείστε τον μέσα στα tags <h1> και </h1> (άνοιγμα & παρατήρηση). Ομοίως με άλλους τίτλους και με tags <h2> έως <h6>.
- Αντιγράψτε τον παρακάτω κώδικα, αλλάζοντας το lang="en" σε lang="el" (άνοιγμα & παρατήρηση).


- Λίστες :
- unordered <ul> (εμφανίζονται κουκίδες) και ordered <ol> ( εμφανίζεται αρίθμηση).


<ul>
  <li>list-item-1</li>
  <li>list-item-2</li>
  ......
</ul>

<p>The topics covered are:</p>
<ul>
  <li>HyperText Markup Language (HTML)
    <ul>
      <li>Based on SGML</li>
      <li>Used to create web pages</li>
      <li>Maintained by W3C</li>
    </ul>
  </li>
  <li>Cascading Style Sheet (CSS)
    <ul>
      <li>Used to define presentation style for web pages</li>
      <li>Also maintained by W3C</li>
    </ul>
  </li>
</ul>

- Πίνακες
- Παράδειγμα 1. Χωρίς μορφοποίηση.
<table>
  <caption>Price List</caption>
  <tr>
    <th>Fruit</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>Apple</td>
    <td>$0.50</td>
  </tr>
  <tr>
    <td>Orange</td>
    <td>$0.65</td>
  </tr>
</table>

- Παράδειγμα 2. Με μορφοποίηση πίνακα.
<!DOCTYPE html>
<html lang="en">
<!-- Save as "HtmlEg3.html" -->
<head>
<meta charset="utf-8">
<title>Table and Images</title>
<style>
table {  /* table */
   border: 1px solid black;
   border-spacing: 5px;
   border-collapse: separate;
}
th, td {  /* cells */
   border: 1px solid #aaa;
   padding: 5px 10px;
}
</style>
</head>
<body>
  <h1>Table and Images</h1>
  <table>
    <caption>Logo of Languages</caption>
    <tr>
      <th>S/No</th>
      <th>Language</th>
      <th>Logo</th>
    </tr>
    <tr>
      <td>1.</td>
      <td>HTML5</td>
      <td><img src="../images/HTML5_Logo_128.png" alt="HTML Logo" height="64" width="64"></td>
    </tr>
    <tr>
      <td>2.</td>
      <td>CSS3</td>
      <td><img src="../images/css3.png" alt="CSS Logo"  height="64" width="64"></td>
    </tr>
    <tr>
      <td>3.</td>
      <td>JavaScript</td>
      <td><img src="../images/js3.png" alt="JavaScript Logo" height="64" width="64"></td>
    </tr>
  </table>
</body>
</html>

2o Εργαστήρι html-CSS

Κατεβάστε-λήψη από τον κοινόχρηστο φάκελο τον φάκελο html-lab2, μετονομάστε τον προσθέτοντας στο τέλος το επίθετο και το όνομά σας και υλοποιήστε τα ακόλουθα :

- Ανοίξτε τα δύο αρχεία (html και css) στο notepad++ και τρέξτε στο chrome σε παράλληλο παράθυρο το lab2.html.
- Αφαιρέστε από το css την πρώτη παύλα (refresh το lab2.html στο chrome και παρατήρηση).
- Επαναλάβετε το προηγούμενο βήμα για τις υπόλοιπες παύλες.

Επιπλέον, να κάνετε τις απαραίτητες αλλαγές ώστε :
- να αλλάζει από "γαλάζιο" σε "πράσινο" το χρώμα του background της δεύτερης και όχι της πρώτης λίστας.
- να εμφανίζονται bold οι πρώτες λέξεις της δεύτερης λίστας.
- να αλλάξετε τα χαρακτηριστικά του στοιχείου  <p> : background, color, border, text-align:justify;

Τέλος, "ανεβάστε"-μεταφορτώστε στον κοινόχρηστο φάκελο αυτόν που μετονομάσατε με τις αλλαγές στο css file.

3o Εργαστήρι html (input forms)-Javascript

- Πεδία εισαγωγής δεδομένων

Αντιγράψτε και "τρέξτε" τον παρακάτω html κώδικα :

<!DOCTYPE html>
<!-- HtmlFormEx2.html -->
<html lang="en">
<head>
<meta charset="utf-8">
<title>Input Validation</title>
</head>
 
<body>
<form action="submit.php" method="get">
  <fieldset>
    <legend>Login</legend>
    <label for="username">Username*</label><br> <!-- "for" targets "id" -->
    <input type="text" id="username" name="username" required><br>
    <label for="password">Password*</label><br>
    <input type="password" id="password" name="password" required pattern=".{4,}">
  </fieldset>
 
  <fieldset>
    <legend>Gender*</legend>
    <label><input type="radio" name="gender" value="m" required> Male</label>
    <label><input type="radio" name="gender" value="f"> Female</label>
  </fieldset>
 
  <fieldset>
    <legend>Programming Skill</legend>
    <label><input type="checkbox" name="programming" value="java"> Java</label>
    <label><input type="checkbox" name="programming" value="cpp" checked> C++</label>
    <label><input type="checkbox" name="programming" value="csharp"> C#</label>
  </fieldset>
 
  <fieldset>
    <legend>Fruit</legend>
    Choose a fruit:
    <select name="fruit">
      <option value="apple">Apple</option>
      <option value="banana" selected>Banana</option>
      <option value="orange">Orange</option>
    </select>
  </fieldset>
 
  <textarea name="comment" placeholder="Enter your comment here" rows="5" cols="40" maxlength="180"></textarea><br>
 
  <input type="submit" value="SEND">
  <input type="reset" value="RESET">
</form>
</body>
</html>

- Εντολές javascript (DOM Html)
1. Κατεβάστε τον φάκελο lab3, ανοίξτε και "τρέξτε" το lab3_app.html.
2. Ανοίξτε και "τρέξτε" το lab3_js.html.

4o Εργαστήρι html-CSS-Javascript

App - Σβήστε τα φώτα!!

Κατεβάστε-λήψη από τον κοινόχρηστο φάκελο τον φάκελο html-lab3, μετονομάστε τον προσθέτοντας στο τέλος το επίθετο και το όνομά σας και υλοποιήστε τα ακόλουθα :

- Ανοίξτε τα τρία αρχεία (html, css και js) στο notepad++ και τρέξτε στο chrome σε παράλληλο παράθυρο το lab2.html.
- Αφαιρέστε από το css την πρώτη παύλα (refresh το lab2.html στο chrome και παρατήρηση).
- Επαναλάβετε το προηγούμενο βήμα για τις υπόλοιπες παύλες.
Posted by at
Labels: , ,