Μάθημα : ΕΦΑΡΜΟΓΕΣ ΠΛΗΡΟΦΟΡΙΚΗΣ Α ΛΥΚΕΙΟΥ
Κωδικός : EL781107
-
Εμφάνιση όλων των ενοτήτων
ΚΕΦΑΛΑΙΟ 11 ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML
Ερώτηση ενεργοποίησης: "Τι είναι μια ιστοσελίδα; Που βρίσκονται αποθηκευμένες οι ιστοσελίδες;Πώς δημιουργούνται; Τι κρύβεται πίσω από τις ιστοσελίδες;"
Δραστηριότητα σε ομάδες:
- Aνοίξτε τον ιστότοπο της Βικιπαίδεια https://el.wikipedia.org/wiki/%CE%A0%CF%8D%CE%BB%CE%B7:%CE%9A%CF%8D%CF%81%CE%B9%CE%B1.
Αναζητήστε τις παρακάτω έννοιες: Ιστοσελίδα, http, HTML ( Στο πεδίο αναζήτηση σε Βικιπαίδεια γράψτε κάθε φορά την έννοια που θέλετε να αναζητήσετε).
Στη συνέχεια λύστε το σταυρόλεξο: https://crosswordlabs.com/view/1-html
ΟΔΗΓΙΕΣ : Κάθε φορά που συμπληρώνετε μια απάντηση μετά το πάτημα του Enter αν αυτή γίνεται πράσινη έχετε απαντήσει σωστά διαφορετικά η απάντησή σας θα εμφανίζεται κόκκινη.Δοκιμάστε μέχρι όλες σας οι απαντήσεις να είναι σωστές δηλαδή πράσινες.
ΠΑΡΟΥΣΙΑΣΕΙΣ;
ΦΥΛΛΟΜΕΤΡΗΤΕΣ & ΕΙΣΑΓΩΓΙΚΑ ΣΤΗΝ HTML
ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML ΒΑΣΙΚΕΣ ΕΤΙΚΕΤΕΣ
ΔΡΑΣΤΗΡΙΟΤΗΤΕΣ:
- Ανοίξτε τον σύνδεσμο https://www.wlearn.gr/index.php/html-html-33 μελετήστε την δομή της HTML και απαντήστε στην παρακάτω ερώτηση
- ΠΡΟΣΟΧΗ!!! Αν δεν λειτουργεί η παραπάνω πλαρφόρμα δοκιμάστε τις ασκήσεις απο την https://www.w3schools.com/html/html_intro.asp
Ποιες είναι οι 2 εντολές – ετικέτες που λείπουν στο παρακάτω πρόγραμμα HTML;
<html>
<head>
<title>Η πρώτη μου Ιστοσελίδα </title>
<body> Προσπαθώ να κατανοήσω την βασική δομή της <b>HTML</b><br>
Ελπίζω να τα καταφέρω!!!
</html>
- πειραματιστείτε με το “Δοκίμασέ το” και ανακαλύψτε ποια είναι η λειτουργία των ετικετων:
- <b> …..</b>
- <i>……..</i>
- <u>…..</u>
ΕΝΑ ΒΙΝΤΕΟ ΜΕ ΤΙΣ ΒΑΣΙΚΕΣ ΕΤΙΚΕΤΕΣ HTML
Και τώρα ας εξασκηθούμε ....
Μάθαμε λοιπόν και πως να δημιουργούμε τα διάφορα μεγέθη επικεφαλίδων με την HTML ή μήπως έχουμε ακόμη απορίες; Η επανάληψη ποτέ δεν μας βλάπτει!
Ας δούμε λοιπόν την παρακάτω παρουσίαση για να μην έχουμε καμιά αμφιβολία ότι έχουμε κατακτήσει το θέμα των επικεφαλίδων! Στη συνέχεια δημιουργήστε την σελίδα που αναφέρεται στο τέλος της παρουσίασης και ελέξτε το αποτέλεσμα στο φυλλομετρητή σας! Μπράβο παιδιά!
Ας κάνουμε τώρα και μια άσκηση αυτοαξιολόγησης πάνω στα εισαγωγικά της HTML! Για να την κάνετε πηγαίνετε στο πλαινό μενού στις Ασκήσεις και επιλέξτε την ασκηση ΕΙΣΑΓΩΓΗ ΣΤΗΝ HTML!
Καλή επιτυχία!
ΕΡΩΤΗΣΗ ΠΡΟΒΛΗΜΑΤΙΣΜΟΥ
Οι μαθητές/τριες χωρίζονται σε ομάδες των 2-3 και απαντούν:
Σε τι διαφέρουν οι ετικέτες <br> και <p>...</p>; Πότε χρησιμοποιούμε την μια και πότε την άλλη;
Ελπίζω να απαντήσατε όλοι σωστά! Ας επιβεβαιώσουμε όμως την απάντηση στις παρακάτω παρουσιάσεις και στο σύντομο βίντεο! Ταυτόχρονα θα ανακαλύψουμε και την λειτουργία της ετικέτας <hr> αλλά και τον τρόπο εσαγωγής σχολίων στο αρχείο μας html!
ΠΑΡΟΥΣΙΑΣΕΙΣ
ΕΙΣΑΓΩΓΗ ΟΡΙΖΟΝΤΙΑΣ ΓΡΑΜΜΗΣ ΚΑΙ ΕΙΣΑΓΩΓΗΣ ΣΧΟΛΙΩΝ
ΒΙΝΤΕΟ
ΕΙΣΑΓΩΓΗ ΓΡΑΜΜΗΣ ΠΑΡΑΓΡΑΦΟΥ ΣΧΟΛΙΩΝ ΚΑΙ ΟΡΙΖΟΝΤΙΑΣ ΓΡΑΜΜΗΣ
Και τώρα ας εμπλουτίσουμε περισσότερο την ιστοσελίδα μας εισάγοντας υπερσυνδέσμους και πίνακες!
Αλήθεια ξέρουμε τι είναι ο υπερσύνδεσμος και τι το υπερκείμενο;Μμ! Ακούω τις ιδέες σας.....Ωραία για να δούμε τι θα ανακαλύψουμε ! Εμπρός πάμε!
ΒΙΝΤΕΟ: ΔΗΜΙΟΥΡΓΙΑ ΥΠΕΡΣΥΝΔΕΣΜΟΥ ΚΑΙ ΠΙΝΑΚΑ
Λιγάκι δύσκολο και περίπλοκο η δημιουργία πίνακα με την HTML δεν σας φάνηκε; Ας περιοριστούμε προς το παρόν στους υπερσυνδέσμους!
ΠΑΡΟΥΣΙΑΣΗ : ΔΗΜΙΟΥΡΓΙΑ ΥΠΕΡΣΥΝΔΕΣΜΟΥ
Ωραία και τώρα η σειρά σας να δράσετε! Ας κάνετε λοιπόν μια μικρή και εύκολη δραστηριότητα !
ΔΡΑΣΤΗΡΙΟΤΗΤΑ ΣΤΟΥΣ ΥΠΕΡΣΥΝΔΕΣΜΟΥΣ
Επειδή όμως "μια εικόνα χίλιες λέξεις" τι θα ήταν οι ιστοσελίδες μας χωρίς εικόνες ; Ας παρακολουθήσουμε ένα βιντεάκι και ας δούμε και μια παρουσίαση πριν κάνουμε ασκησούλες !
ΒΙΝΤΕΟ: ΕΙΣΑΓΩΓΗ ΕΙΚΟΝΑΣ ΚΑΙ ΔΗΜΙΟΥΡΓΙΑ ΛΙΣΤΑΣ
ΠΑΡΟΥΣΙΑΣΗ : ΕΙΣΑΓΩΓΗ ΕΙΚΟΝΑΣ ΚΑΙ ΔΗΜΙΟΥΡΓΙΑ ΛΙΣΤΑΣ
ΔΡΑΣΤΗΡΙΟΤΗΤΑ 2 ΕΙΚΟΝΑ ΓΕΝΕΘΛΙΑ
Και τώρα που καταλάβαμε πως λειτουργεί η HTML ας πάμε ένα βηματάκι παραπέρα και ας κάνουμε ασκήσεις χωρίς ...λυσάρι! Τι λέτε;