Skocz do zawartości
  • Przeglądający   0 użytkowników

    Brak zarejestrowanych użytkowników, przeglądających tę stronę.

Devzan

Prośba o pomoc w nauce kodowania html/css

Promowane odpowiedzi

Devzan    27

Witam. Bawię się w webdesign i ogólnie chciałbym się tym zajmowac na poziomie, wraz z cięciem i kodowaniem. Jeśli chodzi o stronę graficzną, to nie mam z tym problemu, ale problem pojawia się w kodowaniu. W związku z tym, na pewnym forum graficznym poprosiłem o jakieś proste layouty do trenowania kodowania, ale tutaj domyślam się, że nie będzie z tym takiego odzewu.

Generalnie to uczyłem się HTML i CSS zanim wyszło HTML5 i CSS3, a niedawno zdobyłem parę prywatnych pdfów od znajomej ze studiów, które nieco objaśniły mi co doszło w tych wersjach. Więc to nie tak, że w ogóle nie umiem HTML i CSS. Mimo to, to za mało.

Jak nie miałem internetu, to zakodowałem sobie stary layout, dość niedokładnie graficznie, od strony kody pewnie jeszcze bardziej skopany, ale wygląda to mniej więcej tak (nie oceniać od strony graficznej bo robiłem to bez wszystkich grafik :v):

http://devzan.freehost.pl/cod/

Poza ocenieniem tego, prosiłbym o podrzucenie tytułów jakichś w miarę tanich/średnio tanich książek nt. kodowania właśnie w HTML 5 i CSS 3. No i ogólnie, jakieś rady, przydatne porady itd. itp. etc. :D

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
SimLay    118

Pierwsze co rzuca się w oczy to:


Otwarcie serwera

Devzan, 24.03.13

[/code] Zamiast tego zrób tak: [b]HTML[/b]
[code]

Otwarcie serwera

Devzan, 24.03.13

CSS
h1 {
float:right;
}
h2 {
float:left;
}
Z jakiej racji dodałeś: do nagłówka newsa?! :shock: Chyba nie wiesz do czego ten znacznik jest. Jest on poto aby oznaczyć nim GÓRE STRONY nie NEWSA! Ponieważ pomaga on poprawnie indeksowac witryne... powinien znaleść się tutaj:
	
Strona główna
Aktualności
Ekipa
Media
Nasze serwery
Kontakt
[/code]
czyli:
i w
header.main {width:900px;height:150px;padding:30px 30px 30px 30px;display:block;}
header.main img {position:relative;bottom:95px;left:435px;}
oraz
nav.menu{width:960px;height:25px;margin:0 auto;padding:12px 0px 10px 0px;text-align:center;font-size:17px;color:#fff;border-top:1px dashed #fff;border-bottom:1px dashed #fff;}
nav.menu a:link, nav.menu a:active, nav.menu a:visited {color:#fff;text-decoration:none;}
nav.menu a:hover{text-decoration:underline;}
nav.menu li{display:inline;margin:0px 10px 0px 10px;padding:0;list-style:none;text-shadow:2px 2px 12px #000;}
na ten kod:
header {width:900px;height:150px;padding:30px 30px 30px 30px;display:block;}
header img {position:relative;bottom:95px;left:435px;}
i
header{width:960px;height:25px;margin:0 auto;padding:12px 0px 10px 0px;text-align:center;font-size:17px;color:#fff;border-top:1px dashed #fff;border-bottom:1px dashed #fff;}
header a:link, nav.menu a:active, nav.menu a:visited {color:#fff;text-decoration:none;}
header a:hover{text-decoration:underline;}
header li{display:inline;margin:0px 10px 0px 10px;padding:0;list-style:none;text-shadow:2px 2px 12px #000;}
oraz zamiast robić w css(podam kawałek kodu):
nav.menu{width:960px;height:25px;margin:0 auto;padding:12px 0px 10px 0px;text-align:center;font-size:17px;color:#fff;border-top:1px dashed #fff;border-bottom:1px dashed #fff;}
nav.menu a:link, nav.menu a:active, nav.menu a:visited {color:#fff;text-decoration:none;}
nav.menu a:hover{text-decoration:underline;}
nav.menu li{display:inline;margin:0px 10px 0px 10px;padding:0;list-style:none;text-shadow:2px 2px 12px #000;}
zrób
/** NAV */
.menu{width:960px;height:25px;margin:0 auto;padding:12px 0px 10px 0px;text-align:center;font-size:17px;color:#fff;border-top:1px dashed #fff;border-bottom:1px dashed #fff;}
.menu a:link, nav.menu a:active, nav.menu a:visited {color:#fff;text-decoration:none;}
.menu a:hover{text-decoration:underline;}
.menu li{display:inline;margin:0px 10px 0px 10px;padding:0;list-style:none;text-shadow:2px 2px 12px #000;}
/** NAV KONIEC */

Wygląda to ładniej i jest wygodniej,

A tutaj proszę masz opisane co się zmieniło w HTML 5:

http://stronymalowane.pl/html-4-html-5/

Pozdrawiam,

SmileyPL

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Devzan    27

Siema ;) Dzięki wielkie za odpowiedź! Podoba mi się motyw Twojej wypowiedzi, bo jasno mi objaśniłeś co jest złe, a jak dobrze ma być ;) No i dałeś też linka, którego potrzebowałem.

Przymierzałbym się do zakupu jakichś książek, możesz, lub ktoś inny, polecić jakieś dobre? Póki co myslałem o czymś pokroju:

http://helion.pl/ksiazki/wstep-do-html5-i-css3-bartosz-danowski,wshtcs.htm

http://helion.pl/ksiazki/htcssp.htm

I inne z http://helion.pl/search?qa=&wsprzed=1&wprzyg=0&serwisyall=0&szukaj=html+5+css+3

Chociaż nie wiem jak to bedzie wyglądało, bo książki chcę kupić w "Taniej książce", bo ceny Helionu mnie odstraszają :P

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
CzareK    4,500
Devzan    27

Co do kursów wideo to jeśli nie darmowe to śmiesznie tanie. Na książki sobie pozwalam, ponieważ liczę, że "wybrane" ze mnie książki będą w pobliskich "Tanich książkach" i dorwę je za grosze :E Nie mam stałego zarobku żeby sobie pozwolić na parę kursów w cenach 100+.

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
SimLay    118

Aha zapomnniałem napisać, abyś do większych stref zamiast class używał id

Czym się różni class od id?

Różni się przede wszystkim kodem w CSS

W przypadku class przed nazwą dodajemy ., czyli np.:

.nazwa {
float: right;
}
Natomiast w przypadku id jest to # czyli np.:
#nazwa {
float: right;
}

Jak znajde coś to jeszcze napisze, jesli chciał byś pomoc pisz na pw :)

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Devzan    27

Różnice class i id znam. Tylko, że id może być tylko jedno, a class się może powtarzać i dlatego wybrałem class, a nie id. Ja już mówiłem - w HTML 4/xHTML 1.1 i CSS 2 (?) jestem w miarę ogarnięty, po prostu przestałem w tym siedzieć zanim weszło HTML 5/CSS3 i dopiero teraz do tego wracam.

Udostępnij tego posta


Odnośnik do posta
Udostępnij na innych stronach
Gość
Ten temat został zamknięty. Brak możliwości dodania odpowiedzi.

×