Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [HTML]jak się poprawnie koduje?
Forum PHP.pl > Forum > Przedszkole
liberator15
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>
php11
Cześć,

W sieci jest wiele kursów...

  1.  
  2. <img class="logo" src="obrazek.png" alt="logo" />
  3.  
  4. <p class="tresc jakas">
  5. treść paragrafu
  6. </p>
  7.  
  8. <div class="nazwa1">
  9. <img alt="logo" src="obrazek.png" />
  10.  
  11. <p class="tresc jakas">
  12. treść paragrafu
  13. </p>
  14. </div>
liberator15
ok dzieki, skad wziąść jakieś szablony nowsze do kodowania by były darmowe?
pastan
W google tego pełno, poszukaj.
Skie
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
Comandeer
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
liberator15
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>
Skie
@Comandeer no tak, wypadł mi z głowy fakt, że oni nie są spokrewnieni z W3C, za rzadko używam tej storny smile.gif 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!
Comandeer
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ś? 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

Co 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.

+ zachęcanie do zamykania wszystkich tagów a'la XHTML. Przykłady może i w HTML5, ale mentalność wciąż z 2000 wink.gif
Skie
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.
php11
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>?
Daiquiri
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 :-).
liberator15
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>
Comandeer
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.