czesc
jak sie poprawnie koduje?
takie coś moze być?
<img class="logo" src="obrazek.png"></img>
<p class="tresc jakas">
<div class="nazwa1"><img></img></div>
Pełna wersja: [HTML]jak się poprawnie koduje?
ok dzieki, skad wziąść jakieś szablony nowsze do kodowania by były darmowe?
W google tego pełno, poszukaj.
Jeśli chodzi o semantykę to na sieci jest masa kursów, ale polecałbym tutaj przeczytanie co najmniej jednej książki, bo poprawne użycie tagów HTML jest obce wielu programistom. Szczerze mówiąc, to dziedzina, która jest pomijana przez wielu jako oczywista lub łatwa, a nigdy w życiu nie spotkałem jeszcze programistę, który nie robiłby błędów semantycznych w HTML - ja również takie popełniam.
Jeśli chodzi o składnię, to jest ona bardzo zależna od typu HTML, którego używasz - HTML4, XHTML i HTML5 mają inną składnię i np. przykład @php11 z tagiem img byłby niepoprawny dla HTML4, niepoprawny ale działający dla HTML5, i poprawny XHTML. Jeśli masz się uczyć jednego z nich to oczywiście HTML5 jako najnowszy i dający największe możliwości i bez zbędnego XMLowego mambo jambo.
Jeśli chodzi o konwencje to najlepiej uczyć się od organizacji standaryzujących, jak np tutaj : http://www.w3schools.com/html/html5_syntax.asp
Jeśli chodzi o składnię, to jest ona bardzo zależna od typu HTML, którego używasz - HTML4, XHTML i HTML5 mają inną składnię i np. przykład @php11 z tagiem img byłby niepoprawny dla HTML4, niepoprawny ale działający dla HTML5, i poprawny XHTML. Jeśli masz się uczyć jednego z nich to oczywiście HTML5 jako najnowszy i dający największe możliwości i bez zbędnego XMLowego mambo jambo.
Jeśli chodzi o konwencje to najlepiej uczyć się od organizacji standaryzujących, jak np tutaj : http://www.w3schools.com/html/html5_syntax.asp
Cytat
Jeśli chodzi o konwencje to najlepiej uczyć się od organizacji standaryzujących
Więc dlaczego go odsyłasz do największego * jeśli chodzi o zasoby webmasterskie? Zajrzyj do postrony "About" W3Schools:
Cytat
The site derives its name from the World Wide Web (W3), but is not affiliated with the W3C.
a następnie poczytaj o akcji W3Fools…
Jedyny dobry zasób, jaki można polecić, to Mozilla Developer Network. Albo specyfikacja. Ale W3Schools nigdy, bo piszą tam głupoty
co jest źle w tym kodzie?
Kod
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>www</title>
<style>
.nazwa1{background-color:grey;width:900px;height:1200px;float:left;}
#logo{width:450px;height:130px;}
#baner{width:900px;height:130px;}
#ikonka{width:50px;height: 50px;}
.t1{position:relative; top:-62px; left:50px;}
.t2{position:relative; top:-62px; left:50px;}
.nazwa5{position:relative; top:-15px;}
.nazwa6{position:relative; top:-130px; left:550px;}
.nazwa7{position:relative; top:-180px;}
.t3{width:400px;position:relative; top:-140px; left:240px;}
#obrazek1{width:250px;height: 150px;}
#obrazek2{position:relative; top:-60px; left:170px;width:80px;height: 80px;}
.t4{width:150px;position:relative; top:-140px; left:240px;}
.nazwa8{position:relative; top:-430px;left:430px;}
</style>
</head>
<body>
<div class="nazwa1">
<div class="nazwa2"><img id="logo" alt="" src="logo.png" /></div>
<div class="nazwa3">menu</div>
<div class="nazwa4"><img id="baner" alt="" src="baner.png" /></div>
<div class="nazwa5"><img id="ikonka" alt="" src="ikonka.png" />
<p class="t1">jakis tekst ptrzykladowy.</p></div>
<div class="nazwa6"><img id="ikonka alt="" src="ikonka.png" />
<p class="t2">jakis tekst ptrzykladowy.</p></div>
<div class="nazwa7"><img id="obrazek1" alt="" src="obrazek1.png" />
<p class="t3">jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.</p></div>
<div class="nazwa8"><img id="obrazek2" alt="" src="obrazek2.png" />
<p class="t4">jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst </p></div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>www</title>
<style>
.nazwa1{background-color:grey;width:900px;height:1200px;float:left;}
#logo{width:450px;height:130px;}
#baner{width:900px;height:130px;}
#ikonka{width:50px;height: 50px;}
.t1{position:relative; top:-62px; left:50px;}
.t2{position:relative; top:-62px; left:50px;}
.nazwa5{position:relative; top:-15px;}
.nazwa6{position:relative; top:-130px; left:550px;}
.nazwa7{position:relative; top:-180px;}
.t3{width:400px;position:relative; top:-140px; left:240px;}
#obrazek1{width:250px;height: 150px;}
#obrazek2{position:relative; top:-60px; left:170px;width:80px;height: 80px;}
.t4{width:150px;position:relative; top:-140px; left:240px;}
.nazwa8{position:relative; top:-430px;left:430px;}
</style>
</head>
<body>
<div class="nazwa1">
<div class="nazwa2"><img id="logo" alt="" src="logo.png" /></div>
<div class="nazwa3">menu</div>
<div class="nazwa4"><img id="baner" alt="" src="baner.png" /></div>
<div class="nazwa5"><img id="ikonka" alt="" src="ikonka.png" />
<p class="t1">jakis tekst ptrzykladowy.</p></div>
<div class="nazwa6"><img id="ikonka alt="" src="ikonka.png" />
<p class="t2">jakis tekst ptrzykladowy.</p></div>
<div class="nazwa7"><img id="obrazek1" alt="" src="obrazek1.png" />
<p class="t3">jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.</p></div>
<div class="nazwa8"><img id="obrazek2" alt="" src="obrazek2.png" />
<p class="t4">jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst ptrzykladowy.jakis tekst </p></div>
</body>
</html>
@Comandeer no tak, wypadł mi z głowy fakt, że oni nie są spokrewnieni z W3C, za rzadko używam tej storny 
Aczkolwiek zasób , który poleciłem jest w tym przypadku w porządku - zawiera wszystkie niezbędne rzeczy, które są opisane poprawnie. Co do Mozilla Developer Network to nie przepadam za nimi. Mają za dużą skłonność opisywania rzeczy zgodnych z FireFox, przez co praktycznie wszystko co jest tam napisane trzeba sprawdzać pod kątem poprawności z Chrome i innymi przeglądarkami. Co do W3Fools nie znałem tego, przejrzę jak będę miał trochę czasu, dzięki!
Aczkolwiek zasób , który poleciłem jest w tym przypadku w porządku - zawiera wszystkie niezbędne rzeczy, które są opisane poprawnie. Co do Mozilla Developer Network to nie przepadam za nimi. Mają za dużą skłonność opisywania rzeczy zgodnych z FireFox, przez co praktycznie wszystko co jest tam napisane trzeba sprawdzać pod kątem poprawności z Chrome i innymi przeglądarkami. Co do W3Fools nie znałem tego, przejrzę jak będę miał trochę czasu, dzięki!
Cytat
Mają za dużą skłonność opisywania rzeczy zgodnych z FireFox, przez co praktycznie wszystko co jest tam napisane trzeba sprawdzać pod kątem poprawności z Chrome i innymi przeglądarkami.
Kiedy tam ostatnio byłeś?
W każdym artku jest tabelka kompatybilności z innymi przeglądarkami. Od kilku lat MDN jest de facto dokumentacją dla HTML i DOM i dba o to społeczność webdevowaCo do tego zasobu:
Cytat
In the future, programs like XML readers, may want to read your HTML.
Using a well-formed "close to XHTML" syntax, can be smart.
Using a well-formed "close to XHTML" syntax, can be smart.
+ zachęcanie do zamykania wszystkich tagów a'la XHTML. Przykłady może i w HTML5, ale mentalność wciąż z 2000
Cytat
Kiedy tam ostatnio byłeś? wink.gif W każdym artku jest tabelka kompatybilności z innymi przeglądarkami. Od kilku lat MDN jest de facto dokumentacją dla HTML i DOM i dba o to społeczność webdevowa
Jakieś 2 lata temu się tam porządnie przejechałem na artykułach dot. websocketów i mnie to zniechęciło do tej strony, a że mało robię w froncie to napotkane problemy rozwiązywałem przeglądając stacka. Jeśli poprawili tam jakość dokumentacji to super.
Cytat(Skie @ 12.08.2015, 13:05:32 ) 
kod z tagiem img byłby niepoprawny dla HTML4, niepoprawny ale działający dla HTML5, i poprawny XHTML.
Czyli w html5 <img> powinien być zawsze w <figure>?
Skie, Comandeer - Panowie, jak chcecie dalej dyskutować na temat nieco pokrewny, to idźcie na priv, albo mogę Wam dyskusję przenieść do innego tematu, ale w tym już skończcie :-).
jak to wypozycjonowac?
Kod
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>www</title>
<style>
.calosc{width:1000px; height:1000px; background-color:grey;float:left;}
</style>
<div class="calosc">
<div><img src="logo.png"></div>
<div>menu</div>
<div><img src="baner.png"></div>
<div><img src="ikonka.png">jakas tresc.</div>
<div><img src="ikonka.png">jakas tresc.</div>
<div><img src="obrazek1.png">jakas tresc.</div>
<div><img src="obrazek2.png">jakas tresc.</div>
<div>jakas tresc.<img src="obrazek3.png"></div>
<div><img src="ikonka.png">jakas tresc.</div>
<form id="searchform" method="get" action="">
<input type="text" name="s" id="s" size="12" value="" />
<input type="submit" id="submit" value="" /></form>
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>www</title>
<style>
.calosc{width:1000px; height:1000px; background-color:grey;float:left;}
</style>
<div class="calosc">
<div><img src="logo.png"></div>
<div>menu</div>
<div><img src="baner.png"></div>
<div><img src="ikonka.png">jakas tresc.</div>
<div><img src="ikonka.png">jakas tresc.</div>
<div><img src="obrazek1.png">jakas tresc.</div>
<div><img src="obrazek2.png">jakas tresc.</div>
<div>jakas tresc.<img src="obrazek3.png"></div>
<div><img src="ikonka.png">jakas tresc.</div>
<form id="searchform" method="get" action="">
<input type="text" name="s" id="s" size="12" value="" />
<input type="submit" id="submit" value="" /></form>
</div>
</body>
</html>
Cytat("php11")
Czyli w html5 <img> powinien być zawsze w <figure>?
Nie, figure stosuje się de facto jedynie w obrębie artykułów, do oznaczania obiektów mających związek z artykułem, ale mogących być prezentowane samodzielnie. I nie dotyczy to tylko obrazków, ale też wykresów, filmików, cytatów itd.
Ale ozdobnik do artykułu nie jest figure, bo:
- nie posiada autonomicznego znaczenia
- jego kontekstu nie można zmienić
Natomiast wykres inflacji w artykule o PKB w Polsce już tak, bo:
- ma autonomicznego znaczenie
- jego kontekst może się zmienić (np. można go przenieść do artykułu o kryzysie gospodarczym)
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.