Μερικές βοήθειες σε html,css

Από που να ξεκινήσω; Που θα βρω; κ.α. γενικές ερωτήσεις για την δημιουργία μιας ιστοσελίδας.

Συντονιστές: WebDev Moderators, Super-Moderators

Απάντηση
filinis
Δημοσιεύσεις: 9
Εγγραφή: 12 Μάιος 2015 21:57

Μερικές βοήθειες σε html,css

Δημοσίευση από filinis » 12 Μάιος 2015 22:11

Καλησπέρα σας. Είπα να μάθω απο την βάση html,css κλπ. Ακολουθώντας το w3school και φτάνοντας μέχρι το μάθημα για layout. Το site το φτιάχνω με το notepad++ (έχετε να προτεινετε κατι καλύτερο)?

έχω 3 απορίες και θα ήθελα να με βοηθήσετε πριν προχωρήσω. (Αν δεν δημιουργώ πρόβλημα).

α) Αφου εμφανισιακά είναι ίδιο, γιατι να χρησιμοποιήσω το <code></code> για κώδικα και όχι απλα το <p></p>
β) Είδα πως δουλεύει το align σε κείμενο, εικόνα κλπ. Δεν κατάφερα ενα <table> να φέρω στην μέση.
γ) Δεν κατάλαβα ακριβώς την διαφορά. Ποτε χρησιμοποιούμε στο css id και πότε class? Και τα δύο δεν διαμορφώνουν ένα συγκεκριμένο element?

Ο κώδικας που έχω φτιάξει μέχρι στιγμής είναι:
html

Κώδικας: Επιλογή όλων

<!doctype html>
<html>
<head>
<title>My newest site</title>
<link rel="stylesheet" href="mysite.css">
</head>
<body>
<h1>Welcome to my site</h1>
<p>This is my test site from scratch. For more informations, press <a href="http&#58;//www.w3school.com" title="patiste edw" target="_blank">here</a><br><i><b>only for members</b></i></p>
<a href="http&#58;//www.w3school.com"><img src="http&#58;//www.w3.org/html/logo/downloads/HTML5_Logo_512.png" width="200" height="200"></a>
<table style"align&#58;center">
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Fax</th>
</tr>
<tr>
<td>Kostas</td>
<td>3433834234</td>
<td>------</td>
</tr>
</table>
<div class="testblock"> 
<h1 style="color&#58;black"> test for divs </h1>
<p>this a good div tests with classes </p>
</div>
</body>
</html>

css

Κώδικας: Επιλογή όλων

body &#123;background-color&#58;#000000;text-align&#58;center&#125;
p &#123;color&#58;white&#125;
h1 &#123;color&#58;white&#125;
th &#123;background-color&#58;#a23d12;color&#58;#000000&#125;
td &#123;background-color&#58;#ffffff;color&#58;#000000&#125;
tr &#123;background-color&#58;#ffffff;color&#58;#000000&#125;
a &#123;color&#58;#ffffff;text-decoration&#58;none&#125;
a&#58;hover&#123;color&#58;yellow;text-decoration&#58;none&#125;
table ,th, td &#123;
padding&#58;20px;
border-collapse&#58;collapse&#125;
th, td &#123;border&#58;5px solid black&#125;
table &#123;
    border-spacing&#58; 5px;
&#125;
.testblock &#123;
background-color&#58;#f65344;
padding&#58;20px;
margin-left&#58;350px;
margin-right&#58;350px;
margin-top&#58;20px;
&#125;
[/code]

filinis
Δημοσιεύσεις: 9
Εγγραφή: 12 Μάιος 2015 21:57

Μερικές βοήθειες σε html,css

Δημοσίευση από filinis » 12 Μάιος 2015 23:30

Μάλλον για μέχρι εδώ ήμουνα :( :( :(
http://www.w3schools.com/html/html_responsive.asp

Άβαταρ μέλους
webdevgr
Δημοσιεύσεις: 696
Εγγραφή: 11 Δεκ 2010 17:25
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Μερικές βοήθειες σε html,css

Δημοσίευση από webdevgr » 13 Μάιος 2015 00:20

Τα id τα δηλώνεις μόνο μια φορά σε κάθε σελίδα, δηλαδή είναι μοναδικά, ενώ τα class όσες φορές θέλεις. πχ έχεις ένα ul με μοναδικό id αλλά τα li του μπορούν να έχουν όλα την ίδια class.

Το align στοιχίζει το περιεχόμενο ενός element πχ το κείμενο ενός p αν βάλεις align center στο table θα κεντράρεις το περιεχόμενο του κι όχι το ίδιο.

Με css μπορείς να κάνεις τα p span code κ.α. να μοιάζουν ίδια, αλλά δεν είναι ίδια. Το καθένα έχεις τι δικές του αρχικές ιδιότητες.

filinis
Δημοσιεύσεις: 9
Εγγραφή: 12 Μάιος 2015 21:57

Μερικές βοήθειες σε html,css

Δημοσίευση από filinis » 13 Μάιος 2015 00:33

Σε ευχαριστώ φίλε. Κάτι άλλο. Κόλλησα άσχημα με το responsive. είτε αν φτιάξω εγώ είτε bootstrap. Δεν έχω καταλάβει με τίποτα το τρόπο λειτουργίας.

Πρέπει οπωσδήποτε να το μάθω για να συνεχίσω ή να το αφήσω για τέλος? Δηλαδή πάω τα μαθήματα με την σειρά και τώρα είμαι εδώ http://www.w3schools.com/html/html_responsive.asp .

Να πάω στα iframes ή να προσπαθήσω να μάθω οπωσδήποτε ΤΩΡΑ το responsive?

Άβαταρ μέλους
webdevgr
Δημοσιεύσεις: 696
Εγγραφή: 11 Δεκ 2010 17:25
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Μερικές βοήθειες σε html,css

Δημοσίευση από webdevgr » 13 Μάιος 2015 00:43

Θα σου πρότεινα να δοκιμάσεις το codeacademy και μετά να πας στο udacity

Τα κατεβατά του w3schools είναι ξεπερασμένα.

filinis
Δημοσιεύσεις: 9
Εγγραφή: 12 Μάιος 2015 21:57

Μερικές βοήθειες σε html,css

Δημοσίευση από filinis » 13 Μάιος 2015 20:40

Καλησπέρα. Σήμερα δοκιμάζω το Codeacademy. Έχω φτάσει εδώ http://www.codecademy.com/courses/web-b ... l-elements και ενώ τα έχω κάνει ΟΛΑ σωστα δεν με προχωράει :(

Δεν μπορώ να δω κανα λάθος στον κώδικα. ο κώδικας που έχω βάλει είναι

Κώδικας: Επιλογή όλων

<!DOCTYPE html>
<html>
  <body>
 <div class"nav"> 
 <div class"container"> 
	<ul>
	  <li>kostas</li>
	  <li>Browse</li>
	</ul>
	<ul>
	<li>Sign up</li>
	<li>Log In</li>
	<li>help</li>
	</ul>
	</div>
	</div>
	<div class"jumbotron"> 
	<div class"container">
	<h1>Find a place to stay.</h1>
	<p>Rent from people in over 34,000 cities and 192 countries.</p></div>
	</div>
  </body>
</html>


Υ.Γ. Εχθές στο w3school πήγα στις φόρμες. Τώρα που αρχίζουν και γίνονται πιο περίπλοκα τα πράγματα, είναι φυσιολογικό να αγχώνομαι? Βασικά με πιανει άγχος γιατί δεν μπορώ να θυμάμαι ακόμα όλη την σύνταξη των εντολών και πρέπει να ξανακοιτάω.

Άβαταρ μέλους
webdevgr
Δημοσιεύσεις: 696
Εγγραφή: 11 Δεκ 2010 17:25
Τοποθεσία: Ηράκλειο
Επικοινωνία:

Μερικές βοήθειες σε html,css

Δημοσίευση από webdevgr » 13 Μάιος 2015 20:48

Ξέχασες να βάλεις = στα class.

Αν αγχώνεσαι εσύ που ασχολείσαι μερικές ώρες ή μέρες εγώ που ασχολούμαι πάνω από 15 χρόνια και πολλές φορές ξεχνάω τι πρέπει να κάνω; Να φοβάμαι για αλτσχάιμερ;

filinis
Δημοσιεύσεις: 9
Εγγραφή: 12 Μάιος 2015 21:57

Μερικές βοήθειες σε html,css

Δημοσίευση από filinis » 13 Μάιος 2015 23:14

webdevgr έγραψε:Ξέχασες να βάλεις = στα class.
Ρε φίλε είσαι θεός. πρέπει να το κοιταξα 200 φορές :oops:

filinis
Δημοσιεύσεις: 9
Εγγραφή: 12 Μάιος 2015 21:57

Μερικές βοήθειες σε html,css

Δημοσίευση από filinis » 14 Μάιος 2015 05:28

Έφτιαξα ένα site με html,css,bootstrap αλλά θέλω να βάλω μια εικόνα επάνω στην εικόνα του site. Έχω φτιάξει τα πάντα σε όλα. Μονο που δεν μπορώ να βρω πως αλλάζει το χρώμα στις επιλογές του radio button (Εικόνα).

Y.Γ. Στον browser, όταν πάω να δώ τον κώδικα, βλέπω ΤΑ ΠΑΝΤΑ. έτσι πρέπει?
Συνημμένα
Capture.JPG
Capture.JPG (13.81 KiB) Προβλήθηκε 17504 φορές

filinis
Δημοσιεύσεις: 9
Εγγραφή: 12 Μάιος 2015 21:57

Μερικές βοήθειες σε html,css

Δημοσίευση από filinis » 14 Μάιος 2015 22:50

Έφτασα JS. Εδω τελειώσαμε.

σας παρακαλώ κάποιες διευκρινησεις:

α) Πρέπει να περάσω κάτι στο Header μου για να δουλέψει js,jquery, οπως έκανα και στο bootstrap? <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-cont ... tstrap.css"> (αλήθεια το bootstrap, μπορώ να το έχω τοπικά ή είναι μια χαρά και έτσι?)

β) Για να πειραματίζομαι στην JS, χωρίς να με "μπερδεύει" η υπόλοιπη σελίδα, γίνεται να φορτώσω ένα js αρχείο σε κάποιο div της σελίδας, ωστε να μην πειράζω το index αλλά μόνο το js και οι αλλαγές να φαίνονται στην σελίδα.

γ) Άσχετο με js. Τώρα έφτιαξα ένα html site. Αν θέλω να φτιάξω μια υποσελίδα, θα κάνω copy-paste την αρχική, θα αλλάξω το content, και θα την αποθηκεύσω π.χ. epikoinonia.html ή θα μπορώ να έχω κοινά header, nav, footer με πράγματα που θα μάθω αργότερα?

Άβαταρ μέλους
burnmind
Script Master
Δημοσιεύσεις: 954
Εγγραφή: 26 Σεπ 2009 02:14
Τοποθεσία: UK
Επικοινωνία:

Μερικές βοήθειες σε html,css

Δημοσίευση από burnmind » 15 Μάιος 2015 02:27

filinis έγραψε:Πρέπει να περάσω κάτι στο Header μου για να δουλέψει js,jquery, οπως έκανα και στο bootstrap? <link rel="stylesheet" href="http://s3.amazonaws.com/codecademy-cont ... tstrap.css">
Κατ' αρχήν, η γλώσσα είναι η JavaScript (JS). Η jQuery είναι απλά μία βιβλιοθήκη γραμμένη σε JS.

Υπάρχουν δύο τρόποι να γράψεις JS: Είτε μέσα σε ένα script tag, π.χ.:

Κώδικας: Επιλογή όλων

<script>
    alert&#40;'hello!'&#41;;
</script>
ή αποθηκεύοντας τον κώδικά σου σε ένα ξεχωριστό αρχείο και καλώντας τον με παρεμφερή τρόπο όπως στο παράδειγμα που δίνεις για το bootstrap:

Κώδικας: Επιλογή όλων

<script src="my-js-file.js"></script>
Παρεμπιπτόντως, αν δεν έχεις προηγούμενη εμπειρία με προγραμματισμό, επιφυλάσσομαι για το αν η JS είναι η ιδανική πρώτη γλώσσα, καθώς είναι κάπως... μυστήρια. Τέλος πάντων, αυτή μεγάλη συζήτηση.
filinis έγραψε:(αλήθεια το bootstrap, μπορώ να το έχω τοπικά ή είναι μια χαρά και έτσι?)
Ναι, μπορείς να κατεβάσεις τα αρχεία και να τα φορτώσεις τοπικά.
filinis έγραψε:Για να πειραματίζομαι στην JS, χωρίς να με "μπερδεύει" η υπόλοιπη σελίδα, γίνεται να φορτώσω ένα js αρχείο σε κάποιο div της σελίδας, ωστε να μην πειράζω το index αλλά μόνο το js και οι αλλαγές να φαίνονται στην σελίδα.
Δεν καταλαβαίνω τι εννοείς. Δώσε ένα συγκεκριμένο παράδειγμα του τι θέλεις να κάνεις και τι σε εμποδίζει από το να το καταφέρεις.
filinis έγραψε:Άσχετο με js. Τώρα έφτιαξα ένα html site. Αν θέλω να φτιάξω μια υποσελίδα, θα κάνω copy-paste την αρχική, θα αλλάξω το content, και θα την αποθηκεύσω π.χ. epikoinonia.html ή θα μπορώ να έχω κοινά header, nav, footer με πράγματα που θα μάθω αργότερα?
Αν και πλέον υπάρχουν τα HTML Imports (παρεμπιπτόντως, νομίζω ο Firefox δε θα τα ενσωματώσει αλλά θα υπάρχει κάποιο workaround), η πιο συνήθης λύση είναι με τη χρήση κάποιας server-side γλώσσας (π.χ. PHP, Python, Ruby, κλπ). Ουσιαστικά φτιάχνεις ένα template που περιέχει τα κοινά στοιχεία και αλλάζεις μόνο αυτό που θέλεις κάθε φορά (π.χ. το κείμενο σε ένα blog post). Τα τελευταία χρόνια είναι trendy και οι static site generators.
filinis έγραψε:Y.Γ. Στον browser, όταν πάω να δώ τον κώδικα, βλέπω ΤΑ ΠΑΝΤΑ. έτσι πρέπει?
Ναι.

filinis
Δημοσιεύσεις: 9
Εγγραφή: 12 Μάιος 2015 21:57

Μερικές βοήθειες σε html,css

Δημοσίευση από filinis » 15 Μάιος 2015 04:09

Φίλε μου σε ευχαριστώ πολύ για τις απαντήσεις σου. Με κάλυψες στα περισσότερα!
Απλά: α) έχεις να προτείνεις κάτι καλύτερο για αρχή, αντί για js? β) Πάλι δεν κατάλαβα, αν θέλω να έχω jquery, την κατεβάζω και την δηλώνω στο header όπως το bootstrap?
burnmind έγραψε:
filinis έγραψε:Για να πειραματίζομαι στην JS, χωρίς να με "μπερδεύει" η υπόλοιπη σελίδα, γίνεται να φορτώσω ένα js αρχείο σε κάποιο div της σελίδας, ωστε να μην πειράζω το index αλλά μόνο το js και οι αλλαγές να φαίνονται στην σελίδα.
Δεν καταλαβαίνω τι εννοείς. Δώσε ένα συγκεκριμένο παράδειγμα του τι θέλεις να κάνεις και τι σε εμποδίζει από το να το καταφέρεις.
Μου απάντησες και σε αυτό :wink: Αυτό εννοούσα.

ή αποθηκεύοντας τον κώδικά σου σε ένα ξεχωριστό αρχείο και καλώντας τον με παρεμφερή τρόπο όπως στο παράδειγμα που δίνεις για το bootstrap:

Κώδικας: Επιλογή όλων

<script src="my-js-file.js"></script>
Αυτό έλεγα. Να φορτώνω το αρχείο στην html και να έχω ένα άδειο αρχικά js να δοκιμάζω!

Άβαταρ μέλους
burnmind
Script Master
Δημοσιεύσεις: 954
Εγγραφή: 26 Σεπ 2009 02:14
Τοποθεσία: UK
Επικοινωνία:

Μερικές βοήθειες σε html,css

Δημοσίευση από burnmind » 15 Μάιος 2015 13:05

filinis έγραψε:Πάλι δεν κατάλαβα, αν θέλω να έχω jquery, την κατεβάζω και την δηλώνω στο header όπως το bootstrap?
Ναι, τη δηλώνεις στο header πριν τον δικό σου JS κώδικα, είτε αυτός περιέχεται στο header ή σε ξεχωριστό αρχείο, δεν έχει σημασία, πχ:

Κώδικας: Επιλογή όλων

<script src="jquery.min.js"></script>
<script src="my-js-file.js"></script>
filinis έγραψε:έχεις να προτείνεις κάτι καλύτερο για αρχή, αντί για js?
Κατ' αρχήν, όπως προείπα, είναι μεγάλη συζήτηση και ο καθένας έχει την άποψή του. Δεν υπάρχει κάποια αντικειμενική αλήθεια. :)

Προσωπικά θα πρότεινα κάποια server-side γλώσσα γι' αρχή (και η JS μπορεί πλέον είναι server-side, αλλά μπλέκουμε), π.χ. PHP, Python, Ruby, κλπ, ώστε να μάθεις -στην πορεία- και 2-3 πράγματα για τις βάσεις δεδομένων. Μπορείς επίσης να πας και σε πιο παραδοσιακες γλώσσες (που η βάση τους είναι άσχετη με το web) όπως Java, C++ (κι εδώ υπάρχει debate για το πόσο εύκολη είναι για κάποιον αρχάριο), κλπ.

Εξαρτάται βέβαια και από το τι θέλεις να κάνεις, αν πχ θέλεις να μάθεις σοβαρό προγραμματισμό και τη θεωρία του, αν θες απλά να παίξεις με μικρά script-άκια για την πλάκα σου, αν θες να ασχοληθείς αποκλειστικά με το web ή και με desktop εφαρμογές, κλπ.

Γενικά πάντως ο προγραμματισμός δεν είναι έννοια που συνδέεται άρρηκτα με μία γλώσσα. Η γλώσσα είναι απλά εργαλείο. Αν μάθεις να προγραμματίζεις είναι συνήθως αρκετά εύκολο να μεταπηδήσεις σε μία άλλη γλώσσα.

Έπειτα, είναι και θέμα γούστου. Μπορεί πχ να μη σου αρέσει ο τρόπος που η PHP κάνει πράγματα και να σου αρέσει περισσότερο η Python, αλλά αυτές οι επιλογές συνήθως γίνεται αφότου αποκτήσεις λίγη εμπειρία με διάφορες γλώσσες.

Πραγματικα πάντως, αν ρωτήσεις 10 άτομα είναι πολύ πιθανό να πάρεις 10 διαφορετικές απαντήσεις και ακόμα και αν συμφωνούν σε κάτι να πάρεις εντελώς διαφορετικές αιτιολογίες.

Βλέπω πως χρησιμοποιείς το Codecademy, το οποίο υποθέτω έχει courses για PHP και Python (αφήνω τη Ruby απ' έξω καθώς δεν την έχω χρησιμοποιήσει ποτέ), οπότε γιατί δε δοκιμάζεις και τα δύο για να δεις περί τίνος πρόκειται;

Άβαταρ μέλους
korgr
Honorary Member
Δημοσιεύσεις: 5067
Εγγραφή: 07 Οκτ 2008 18:30
Τοποθεσία: Corinth
Επικοινωνία:

Μερικές βοήθειες σε html,css

Δημοσίευση από korgr » 15 Μάιος 2015 13:32

Προσωπικά με HTML, CSS, jQuery, PHP (και MySQL για βάσεις δεδομένων) δεν έχω βρεθεί ποτέ στην ανάγκη να μου λείψει κάτι για οτιδήποτε θελήσω να υλοποιήσω.

Δυστυχώς πρέπει να μάθεις ταυτόχρονα (ή με τη σειρά) και PHP και jQuery, γιατί η κάθε μία κάνει πράγματα που η άλλη δεν μπορεί!
Και επειδή όπως σου είπαν η jQuery είναι JS Library, θα πρέπει ναζί της να μάθεις τα θεμελιώδη της Javascript!
Φυσικά στην πράξη σκέτη jQuery θα χρησιμοποιείς για την ευκολία και την ευελιξία που σου παρέχει. Για παράδειγμα για να αναφερθείς σε ένα div με id="myDIV", με σκέτη Javascript χρειάζεται το

Κώδικας: Επιλογή όλων

document.getElementById&#40;"myDIV"&#41;
ενώ με jQuery απλά το

Κώδικας: Επιλογή όλων

$&#40;'#myDIV'&#41;
οπότε καταλαβαίνεις πόση διαφορά έχει σε ένα ολόκληρο script!

Άβαταρ μέλους
giannis17
Honorary Member
Δημοσιεύσεις: 1215
Εγγραφή: 06 Ιαν 2005 19:50
Τοποθεσία: Παγκράτι - Αθήνα
Επικοινωνία:

Μερικές βοήθειες σε html,css

Δημοσίευση από giannis17 » 20 Μάιος 2015 20:09

Απλά να προσθέσω πως γίνεται να κάνεις import κομμάτια html χωρίς server-side γλώσσα αλλά με AJAX calls

παράδειγμα index.html

Κώδικας: Επιλογή όλων

<html>
<head>
.... &#40;φορτώνεις jquery/css/js δηλώνεις meta tags&#41;
</head>
<body>
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</body>
</html>
Παράδειγμα js

Κώδικας: Επιλογή όλων

$&#40;document&#41;.ready&#40;function&#40;&#41;&#123;
  $.get&#40;"/blocks/header.html", function&#40;data&#41;&#123;
    $&#40;'#header'&#41;.append&#40;data&#41;;
  &#125;&#41;;
  $.get&#40;"/blocks/content.html", function&#40;data&#41;&#123;
    $&#40;'#content'&#41;.append&#40;data&#41;;
  &#125;&#41;;
  $.get&#40;"/blocks/footer.html", function&#40;data&#41;&#123;
    $&#40;'#footer'&#41;.append&#40;data&#41;;
  &#125;&#41;;
&#125;&#41;;
Οπότε έχεις στην index σου τον σκελετό μαζί με όλα τα includes και στο φάκελο blocks τα επιμέρους κομμάτια της σελίδας τα οποία μπορείς να καλείς κατά βούληση.

Σημείωση 1: για να λειτουργήσει το AJAX πρέπει να γίνει το request σε κάποιον HTTP server, όχι να ανοίγεις το html αρχείο στον browser (μπορείς να κατεβάσεις xampp ή wampp ή και σκέτο apache αν δεν νομίζεις πως θα χρειαστείς ποτέ php/mysql)

Σημείωση 2: αν τα blocks που φορτώνεις έχουν μέσα και κώδικα javascript, ο κώδικας αυτός δεν θα παίξει. Θα πρέπει να αποθηκεύσεις τον κώδικα σε δικό του js και να το καλείς στην index με την getScript αφού φορτώσεις το block σου
"There is only one problem with common sense; it’s not very common."
&#8211; Milt Bryce

Απάντηση

Επιστροφή στο “Γενικές ερωτήσεις κατασκευής ιστοσελίδων”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 0 επισκέπτες