Jak zakodować stronkę html?


(wilk2) #1

czesc jak tro zakodowac poprosze o rady?

 

http://zapodaj.net/4eb9c8b59034d.jpg.html


(CZiPEN) #2

Tam znajdziesz wszystko:

http://www.w3schools.com/html/default.asp


(wilk2) #3

a to jest dobrze zakodowane?

 

<html>
<head>
<title>zzz</title>
</head>
<body>


<header id="tlo"></header>
<header id="baner"></header>
<article id="menu">
<ul>
<li><a href="index.html"><img src="p1.gif" alt="1"></a></li>
<li><a href="index.html"><img src="p2.gif" alt="1"></a></li>
<li><a href="index.html"><img src="p3.gif" alt="1"></a></li>
</ul>
</article>

<article id="menu2">
<ul>
<li><a href="index.html"><img src="o1.gif" alt="1"></a></li>
<li><a href="index.html"><img src="o2.gif" alt="1"></a></li>
<li><a href="index.html"><img src="o3.gif" alt="1"></a></li>
</ul></article>

<article id="logo2"><img src="logo2.gif" alt="1"></article>
<article id="logo1"><img src="logo1.gif" alt="1"></article>
<aside id="kwadrat"><img src="kwadrat.gif" alt="1"></aside>
<aside id="kwadrat2"><h4>FEATURED PRODUCTS<br>
OUR FEATURED PRODUCTS COLUMN</h4></aside>
<aside id="go"><img src="go.gif" alt="1"></aside>
<aside id="go2"><h2>SEARCH SITE:</h2></aside>

</body>
<style>
h2{font-size:12px;color:white;}
h4{font-size:12px;}
#tlo{margin-left:200px;background-image:url('tlo.jpg');background-repeat:no-repeat;border: 1px solid black;
width:760px; height:600px;}
#baner{margin-left:200px;background-image:url('baner.gif');background-repeat:no-repeat;border: 1px solid black;
width:760px; height:600px;position:relative; z-index:1px;bottom:600px;}
#menu{margin-left:200px;position:relative; z-index:1px;bottom:1200px;left:460px;}
ul,li{display: inline;    white-space: nowrap;}
#menu2{margin-left:200px;position:relative; z-index:1px;bottom:1040px;right:50px;}
#logo2{margin-left:200px;position:relative; z-index:1px;bottom:1240px;}
#logo1{margin-left:200px;position:relative; z-index:1px;bottom:1405px;}
#kwadrat{margin-left:200px;position:relative; z-index:1px;bottom:1160px;left:480px;}
#kwadrat2{margin-left:200px;position:relative; z-index:1px;bottom:1380px;left:500px;}
#go{margin-left:200px;position:relative; z-index:1px;bottom:1530px;left:700px;}
#go2{margin-left:200px;position:relative; z-index:1px;bottom:1565px;left:550px;}
</style>

</html>

(CZiPEN) #4

Na 100% nie jest dobrze. Przede wszystkim brakuje DOCTYPE (z kodu wynika, że jest to HTML5, ale musisz to dodać). Żeby było dobrze zakodowane to strona musi poprawnie się wyświetlać na wszystkich docelowych przeglądarkach oraz przechodzić pozytywnie walidację HTML oraz CSS:

 

http://validator.w3.org/

http://jigsaw.w3.org/css-validator/


(wilk2) #5

a jak powinna wyglądać przykładowa strona w html/css? poprosze o przykład.


(Kamatori) #6

http://www.codecademy.com/tracks/web <- przerób sobie interaktywny tutorial 

 

albo

 

http://netpress.960pixels.pl/2011/02/html5-tutorial-czyli-podstawy-pisania-w-nowym-htmlu/

 

albo jeśli chcesz zacząć od html4:


(wilk2) #7

kursy juz przerobiłem niewiem czemu mi zle wychodzi,

mógłby ktos jakis przykład podać od siebie?


(kacztery) #8

Odeślę Cię tutaj. Masz tam oparte na przykładach kodowanie z PSD do HTML/CSS. Niektóre przykłady mogę być starsze, dlatego zwróć uwagę w jakiej specyfikacji są pisane i jakie zasadny panują (szczególnie doctype).

 

Po przerobieniu kursów przychodzi taki etap, że coś się wie, ale jest taka blokada, jak się przychodzi samemu do rozwiązywaniu przykładów. Czytaj, rób tutoriale itp., a z czasem samo przyjdzie.


(wilk2) #9

zna ktoś jakieś darmowe stronki html by popatrzec jak jest zrobiona?


#10

Z mojej strony, autora postu czeka bardzo dużo pracy. Nauka kodowania w html i css oraz jak z pliku PSD czy innego obrazka przenieść top samo do HTMla.

 

Polecam zainwestować parę złotych w kurs z eduweb.pl. Jak ogarniesz jak ktoś to robi robiąc to samemu według kursu to potem będzie z górki.

Aby zrobić to co widziałem na zdjęciu potrzeba dużo więcej kodu i stylów css, które należy wywalić z pliku html i stworzyć osobny plik i z niego wczytywać deklaracje.

 

Każdą stronę obejrzysz jak jest zrobiona klikając na nią prawym klawiszem i wybierając opcje "pokaż źródło".


(Jusko) #11

 

 

Każda jedna - przeglądarka internetowa ma opcję podglądu kodu. W Firefox klepiesz klawisze Ctrl + U i masz podgląd kodu. Zauważ jednak, że wiele z nich będzie miało wplecione wiele loklanych skryptów JavaScript bądź PHP i składnia nie będzie czystym HTML, stąd kod może nie być w pełni dla Ciebie zrozumiały.

 

Poza tym - przyda się Tobie dobra książka, przy okazji tania. Od siebie polęcę jedną książkę - jest napisana tak niesamowicie przystępnym językiem i porusza zarówno HTML5 jak i CSS, że po przeczytaniu śmiało możesz kodzić strony internetowe. Na Allegro na pewno znajdziesz taniej. Po jej przeczytaniu po prostu nie ma siły, abyś nie załapał tematu, tak jest po prostu dobrze napisana :slight_smile: Jednak jest dla początkujących - od zera możesz się nauczyć kodzić, jednak po trudniejsze materiały jak animacja za pomocą jQuery czy w ogóle JavaScript lub PHP, musisz sięgnąć po inne książki tego dotyczące.

 

Książka to "Bartosz Danowski: HTML5. Ćwiczenia praktyczne". Link: http://helion.pl/ksiazki/html5-cwiczenia-praktyczne-bartosz-danowski,cwhtm5.htm

 

Zachęcam do zapoznania się z książką - podstawy zapewne już znasz, jednak nie masz ich posegregowanych w głowie - stąd wiesz co chciałbyś zrobić, jednak nie za bardzo wiesz jeszcze jak. To nic złego - po prostu wiedza nieustandaryzowana :slight_smile:

 

Gotowego kodu raczej nikt tu Tobie nie napisze, bo robota trudna by to nie była, jednak byłoby parę linijek tego kodu (HTML + CSS) i nikt za darmo raczej by całego layoutu od strony kodu nie podarował :wink: