Potrzebuję szablon strony www jak na obrazku w załączniku. Szablon musi być oparty na <div>. STOSOWANIE TABLELK <td> NIE WCHODZI W GRĘ. Szablon musi być w 100% zgodny ze standardani W3C i poprawnie walidować się na http://validator.w3.org/. Aktualne do wieczora.
KIT
Gotowy kod html. Wystarczy stworzyć folder, wrzucić do niego plik index.html z poniższym kodem i do tego samego pliku wgrać zdjęcie pic.jpg. Jak gotowa strona wygląda, zamieściłem w pliku screen.png
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Szablon strony HTML - tytuł</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <div style="width: 80%; height: 200px; border: solid 5px; text-align: center; line-height:12em; background-color: yellow; margin-left: auto; margin-right: auto"> Szablon strony HTML </div> <div style="width: 80%; height: auto; border: solid 5px; padding-bottom: 10px; padding-top: 10px; background-color: #b5e51d; margin-left: auto; margin-right: auto"> <p style="margin-left: 10px;">Tutaj znajduje się treść strony Możesz wstawić tutaj jakiś <b>obrazek</b></p> <img src="./pic.jpg" style="margin-left: 10px;" alt="zdjecie" /> <p style="margin-left: 10px;"> lub link do niego: <a href="./pic.jpg" style="color: black; text-decoration: none; font-weight: bold" target="_blank">link</a></p> </div>
Jak gotowa strona wygląda, zamieściłem w pliku screen.png
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Szablon strony HTML - tytuł</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<div style="width: 80%; height: 200px; border: solid 5px; text-align: center; line-height:12em; background-color: yellow; margin-left: auto; margin-right: auto">
Szablon strony HTML
</div>
<div style="width: 80%; height: auto; border: solid 5px; padding-bottom: 10px; padding-top: 10px; background-color: #b5e51d; margin-left: auto; margin-right: auto">
<p style="margin-left: 10px;">Tutaj znajduje się treść strony
Możesz wstawić tutaj jakiś <b>obrazek</b></p>
<img src="./pic.jpg" style="margin-left: 10px;" alt="zdjecie" />
<p style="margin-left: 10px;"> lub link do niego: <a href="./pic.jpg" style="color: black; text-decoration: none; font-weight: bold" target="_blank">link</a></p>
</div>
<div style="width: 80%; height: 60px; padding-top: 40px; border: solid 5px; text-align: center; background-color: #23b14d; margin-left: auto; margin-right: auto;">
Stopka
</div>
</body>
</html>