Παράδειγμα = θέλω να γράφει
Μαρία Νικολάου
maria@gmail.com
maria.blogspot.com
----- θα πρέπει να γράψω στον κώδικα
(html>
(head>
(title> test (/title>
(body>
Μαρία Νικολάου (br>
(a href = “mail to : maria@gmail.com”>
maria@gmail.com (/a> (br>
(a href = “maria.blogspot.com”>
Maria.blogspot.com(/a>
(/body>
(/html>
Αν θέλω να συνεχίσω τη λίστα μου με άλλο όνομα τότε αντιγράφω από το κάτω μέρος του (body> μέχρι και το τέλος του (body> δηλαδή από το Μαρία Νικολάου έως και το maria.blogspot.com(/α>
Κάθε σελίδα html πρέπει απαραιτήτως να περιέχει=
(html>
(head>
(title> test (/title>
(/head>
(body>
…
…
…
(/body>
(/html>
Π Ι Ν Α Κ Ε Σ
Πίνακας = (table> (/table>
Σειρά = (tr> (/tr>
Κελί = (td> (/td>
Περίγραμμα - πλαίσιο = (table border = “1”> χωρίς κλείσιμο ιδιαίτερο. Κλείνει απλώς (/table>
Χρώμα περιγράμματος = (table border = “1” bordercolor = “green” or “#00ff00”>
Χρώμα σε συγκεκριμένο κουτάκι = (td bgcolor = “red”>
για να γράψω μέσα στο κάθε κελί του πίνακα = (table> (tr> (td> ονοματεπώνυμο (/td> (td> blog (/td> (td> e-mail (/td> (/tr> (/table>
πλάτος πίνακα = (table width = “500”> ή (table width = 80%> sos η συγκεκριμένη ανάλυση οθόνης είναι περίπου 1.000 pixel. Όμως για να μην βγάζει λάθη καλό θα είναι να χρησιμοποιούμε το “800” και όχι το 80%
Θέση πίνακα = algin = “center” ή “left” ή “right”
πχ (table border = “1” Bordercolor = “green” algin = “center”>
κατακόρυφη στοίχιση πίνακα= valign = “middle” ή “top” ή “bottom”
ύψος κελιού πίνακα = height = 80%
για να προσθέσω εικόνες σε πίνακα = (table> (tr> (td> (img src = “1.jpg”> (/td>
##############################################################
πώς αναρτούμε ιστοσελίδες
(html> (head> (title> test (/title> (/head> (/html>
(table width = 100% border = “0”
(tr>
(td width = “200” valign = “top”>
Test 1
(/td>
(td valign = “top”>
Test 2
(/td>
(/tr>
(/table>
2η κίνηση όπου test 1 το αντικαθιστώ με =
(a href = “page1.html”> ποιοι είμαστε (/a> (br>
(a href = “page2.html”> προϊόντα (/a> (br>
(a href = “page3.html”> επικοινωνία (/a> (br>
3η κίνηση πρέπει να βάλω σελίδες στα page 1, page 2, page 3. για να γίνει αυτό, μέσα στο φάκελο (c:\βεζύρη βίκυ….. αντιγράφω 3 φορές τον φάκελο «πίνακας σε πίνακα» και τα ονομάζω page1.html, page2.html, page3.html. πρέπει να βάλω περιεχόμενο σε κάθε σελίδα.
4η κίνηση μπαίνω στον 1ο φάκελο και γράφω στη θέση test 2 το τι θέλω να δείχνει το link. Το ίδιο κάνω και με τον 2ο και 3ο φάκελο.
Για να βγάζει link σε νέους συνδέσμους πχ google, αρχικά δημιουργώ έναν νέο 4ο φάκελο (p> σύνδεσμοι (br>
(a href=”http//www.google.com”> google (/a> (/p>
Για να κάνω μια εικόνα link
(img src=”1.jpg”>
Αν θέλω πατώντας την εικόνα να ανοίγει νέο link
(a href=http://www.google.com>
(img src=”1.jpg”>
(/a>
Πίνακας μέσα σε πίνακα
(table>
(tr>
(td>
Test 1
(/td>
(/tr>
Test 2
(/td>
(/table>
Για να βάλω 2ο πίνακα μέσα στη θέση πχ του test 2, τότε μέσα στη θέση αυτή γράφω
(tr> (td> όνομα (/td> (td> vasiliki (/td>(/tr>
(tr> (td> επώνυμο (/td> (td> veziri (/td>(/tr>
………….
(/table>
Για να προσθέσω video στην ιστοσελίδα
Αρχικά δημιουργώ έναν κενό .html φάκελο. Ανοίγω το www.youtube.com. Βάζω να παίξει ένα video. Δεξιά βγάζει τη λέξη embet και από κάτω έναν κώδικα. Αντιγράφω τον κώδικα στον κενό .html φάκελο.
Πώς φτιάχνω σελίδα η οποία καλεί δύο άλλες σελίδες πχ. Σελίδα index.html
Στη σελίδα index γράφω
(frameset cols = “200,*”>
(frame src = “left.html”>
(frame src = “right.html”>
(/frameset>
Με αυτόν τον τρόπο δημιουργώ έναν πίνακα με δύο στήλες. Το πλάτος της πρώτης (αριστερής – left) στήλης είναι 200. το πλάτος της δεύτερης (δεξιάς – right) στήλης είναι το υπόλοιπο * και πιο μεγάλο (φαρδύ) μέρος.
Φτιάχνω τις 2 σελίδες left.html και right.html
Στη σελίδα index γράφω
……..(frame src = “right.html” name = “frame1”>
Μέσα στη σελίδα left.html γράφω
(html>(head> (title> test (/title> (/head>
(body>
(/body> (/html>
Hr= τραβάει οριζόντια γραμμή και πάει το κείμενο από κάτω
Background = για να κάνω μια εικόνα φόντο
Αν θέλω να δημιουργήσω μια ιστοσελίδα με left + right αλλά να γράφει πχ ποιοι είμαστε, προϊόντα, επικοινωνία, τότε μέσα στο φάκελο προσθέτω 3 αρχεία .html, στα οποία γράφω μόνο με απλά γράμματα ότι θέλω να γράψω (=χωρίς κώδικα)
www.telegraph.co.uk --- digital life --- 101 most usefull sites
ιστοσελίδα μαγαζιού Αγγελικής
κατ’ αρχήν θα πρέπει τα link να μπουν οριζόντια και όχι κάθετα (αν είναι μέχρι 4 τότε τα βάζω οριζόντια).
(html>
(head>
(title> ιστοσελίδα μαγαζιού Αγγελικής (/title>
(/head>
(body>
(table>
(tr> (td> (img src=”1.jpg”> (/td> (/tr>
(tr> (td>
(a href=”page1.html”> ποιοι είμαστε (/a>
(a href=”page2.html”> προϊόντα (/a>
(a href=”page3.html”> δραστηριότητες (/a>
(a href=”page4.html”> φωτογραφίες (/a>
(/td> (/tr>
(td> (tr>
………………
………….
(/td> (/tr> (/table>
(/body>
(/html>
Ετικέτες τίτλου
Γράφονται πριν από τον τίτλο. Για να καταλάβει ότι ξεκινάει μια ετικέτα πρέπει να αρχίζει με meta.
Για ελληνικά = char set=windows-1253
(html>
(head>
(meta http-e quiv=”content-type” content=”text/html; char set=windows-1253”>
(meta name=”keywords” content= “elevator, electronics”> (=θα βάζω το τι θέλω πχ hotel, Greece)
(meta name = “description” content = “this is a Greek hotels, apartments and villa’s guide”> (=περιγραφή)
(title> test (/title>
(/head>
(body test = “green” alink = “green” (= τι χρώμα θα έχει το χεράκι όταν το πατάω) link = “red” (τι χρώμα θα έχουν τα link) vlink = “yellow” (τι χρώμα θα έχει όταν θα το έχω επισκεφτεί )>
Πώς να ενημερώνομαι για το html = www.w3schools.com και www.w3.org
Στήλες πίνακα = (tr>
Photoshop
Οι φωτογραφίες χρησιμοποιούνται σε τίτλους και σαν background
Ανάρτηση σελίδων
1 να κατοχυρώσω domain name. Το κατοχυρώνω από τους καταχωρητές. Κατ’ αρχήν πάω στο www.gr. Καταχωρητές = papaki.gr, hoster.gr, ip.gr, forthnet.gr. για να κατοχυρώσω domain πληρώνω 23€ την διετία
2 πρέπει να βρω server = ο υπολογιστής που θα πρέπει να βάλω τα αρχεία. Ο server κρίνεται από τον
Χώρο = 100ΜΒ 1GB 10GB 100GB
Badwidth = 1GB 10GB 100GB 1TB
Ετησίως = 50€ 100€ 150€ 200€
Badwidth = η κίνηση των αρχείων που μετακινούνται προς τον χρήστη ανά μήνα. Χρεώνεται από 50€ και επάνω.
3 θα χρησιμοποιήσω ένα πρόγραμμα FTP για να μεταφέρει τα αρχεία στον server. Είναι δωρεάν
www.freewebspace.com -- sing up now – freesub – domain // vivika.freewebspace.com / password = vasilokio*123
/// www.dhgate.com = τσάντες channel φθηνές
Φόρμες = τρόπος αλληλεπίδρασης με τον χρήστη
Sos = ότι γράφω στο name πρέπει να είναι πάντα στα αγγλικά. Ότι είναι να γράψω στο value θα πρέπει να είναι στα ελληνικά
Θα βγάζει ένα κενό οπου μπορείς να γράψεις και ένα κουμπί submit. Για να πατάω το κουμπί submit και να βγάζει κάτι ….= αν βάλω δίπλα στο “pedio1” value=”hello” τότε μέσα στο κενό πεδίο θα γράφει hello.
Αν θέλω να γράψω φόρμα με το όνομα, επώνυμο, διεύθυνση ….
Συγχώνευση κελιών = colspan
Επικεφαλίδα = header = h3
Θα πρέπει να βάλω όρια. Άρα θα πρέπει να βάλω μια επιπλέον στήλη που θα λέει μέχρι πόσους χαρακτήρες προσθέτω στο όνομα το πόσα χαρακτήρες (μετά το td και πριν το tr)
Για να στέλνουν τη γνώμη τους για την ιστοσελίδα μας
Στείλτε μας τη γνώμη σας για την ιστοσελίδα μας:
////////////////////////
Πώς να βάλω κουμπάκια στρογγυλά που τσεκάρω. Να τσεκάρεται μόνο ένα
Sos= η λέξη στο name=”fylo” θα πρέπει να είναι ακριβώς η ίδια, αλλιώς δεν θα ξε τσεάρετε το κουμπάκι, ουτως ώστε να τσεκάρω μόνο το male ή το female
Πώς να βάλω τετράγωνο κουμπάκι που θα τσεκάρω πολλά μαζί
Για να γράφω username και το password να βγαίνει με αστεράκια (=τελείες)
Αυτός ο κώδικας όπου βλέπει input type=”password” θα βάζει τελείες (θα είναι κρυφό)
για να βγαίνει στο πεδίο τοξάκι που θα κατεβάζει λίστα
SOS= το name πάντα στα αγγλικά / το value στα ελληνικά
www.htmltutorial.com / www.ituom.gr/teaching.html
SOS= το name πάντα στα αγγλικά / το value στα ελληνικά
www.htmltutorial.com / www.ituom.gr/teaching.html
πώς φτιάχνω Στυλ css cascading style sheets
(html>
(head> (title> σελίδα με στυλ (/title>
(/head>
(body>
εδώ είναι κείμενο με στυλ
καλημέρα είναι παράγραφος με άλλο στυλ
(/body>
(/html>
Sos το στυλ μπαίνει πάντα μέσα στο body