Proszę o pomoc, jeszcze nie stykałem się nigdy z programowaniem w Internecie, a mam zadanie i nie wiem jak to zrobić... Może ktoś mi pomoże? Będę wdzięczny...
Kaskadowe arkusze stylów CSS
Należy utworzyć trzy dokumenty XHTML oraz jeden plik będący arkuszem stylu w następujący sposób:
plik 1.html zawierający opis strony, na której na niebieskim tle będzie umieszczona tabela w kształcie szachownicy do gry (16x16 pól, na przemian pola białe i czarne). Należy użyć zmian stylu "inline" - w miejscu wystąpienia danego obiektu)
plik 2.html zawierający opis strony jak w poprzednim punkcie, z tym, że należy w nagłówku dokumentu zdefiniować styl dla dwóch klas obiektów ("white" i "black") a następnie użyć tych stylów dla odpowiednich pól szachownicy
plik 3.html zawierający opis strony na której będzie widoczna szachownica o określonych wymiarach pól 100px x 100px (użyć <div>), która po najechaniu wskaźnikiem myszy na dane pole wyświetli na nim odpowiedni napis (np. A1 albo C7 itp.). Należy zdefiniować styl komórek w osobnym pliku 3.css korzystając z przykładu z rozwijalnym menu z wykładu (preudoklasa hover). Styl powinien też dawać możliwość wydrukowania strony na drukarce (@media print) na białym tle i z o połowę mniejszymi rozmiarami szachownicy.
Pełna wersja: [HTML][CSS]XHTML+CSS
Kolego, czy Ty liczysz, że ktoś całość zrealizuje za Ciebie? ;]
Pierwsza lepsza książka do ręki lub kurs online i jedziesz z tematem.
Pierwsza lepsza książka do ręki lub kurs online i jedziesz z tematem.
Właśnie potrzebuję chociaż jakiejś podpowiedzi, może by ktoś powiedział chociaż 1plik jak zrobić? Bo nie rozumiem do końca 
a dalej już sam zrobię... czy mam zrobić html z table i tyle oraz dodać scc z kolorem body i tr jakoś pokolorować?
a dalej już sam zrobię... czy mam zrobić html z table i tyle oraz dodać scc z kolorem body i tr jakoś pokolorować?
Na forum nie odrabiamy zadań domowych. Pierwszy z brzegu kurs css/html Ci to wszystko wyjaśni. Tu http://www.signs.pl/html/ masz ściągawkę ze znaczników css.
<?xml version = "1.0" encoding = "utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig. 2.10: table1.html -->
<!-- Creating a basic table. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>A simple XHTML table</title>
</head>
<body bgcolor="blue">
<!-- the <table> tag opens a table -->
<table border cellspacing="8" cellpadding="15"
<!-- all table content is enclosed -->
<!-- within the <tbody> -->
<tbody>
<tr>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
</tr>
<tr>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
</tr>
<tr>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
</tr>
<tr>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
</tr>
<tr>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
</tr>
<tr>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
</tr>
<tr>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
</tr>
<tr>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
</tr>
<tr>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
</tr>
</tbody>
</table>
</body>
</html>
Mam coś takiego ale jeszcze nie zrobiłem osobno w scc i html ale ogólnie dobrze robię?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- Fig. 2.10: table1.html -->
<!-- Creating a basic table. -->
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>A simple XHTML table</title>
</head>
<body bgcolor="blue">
<!-- the <table> tag opens a table -->
<table border cellspacing="8" cellpadding="15"
<!-- all table content is enclosed -->
<!-- within the <tbody> -->
<tbody>
<tr>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
</tr>
<tr>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
</tr>
<tr>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
</tr>
<tr>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
</tr>
<tr>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
</tr>
<tr>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
</tr>
<tr>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
</tr>
<tr>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
</tr>
<tr>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
<td style="background-color: white"> </td>
<td style="background-color: black"> </td>
</tr>
</tbody>
</table>
</body>
</html>
Mam coś takiego ale jeszcze nie zrobiłem osobno w scc i html ale ogólnie dobrze robię?
@nowy4
Rozumiem, że zadano Ci to w ramach jakiegoś przedmiotu.
Po cholerę więc wybierasz taki kierunek nauczania skoro nie chce Ci się za przeproszeniem ruszyć d**y i przeczytać podstawowego kursu?
Może kopanie rowów będzie dla Ciebie odpowiednim zajęciem? Chociaż w tych czasach to i łopatą trzeba umieć się posługiwać.
Ogólnie bardzo irytuje mnie to, że ktoś przychodzi na forum z zadaniem i czeka na gotowca bez najmniejszych prób jego rozwiązania samodzielnie :/
Rozumiem, że zadano Ci to w ramach jakiegoś przedmiotu.
Po cholerę więc wybierasz taki kierunek nauczania skoro nie chce Ci się za przeproszeniem ruszyć d**y i przeczytać podstawowego kursu?
Może kopanie rowów będzie dla Ciebie odpowiednim zajęciem? Chociaż w tych czasach to i łopatą trzeba umieć się posługiwać.
Ogólnie bardzo irytuje mnie to, że ktoś przychodzi na forum z zadaniem i czeka na gotowca bez najmniejszych prób jego rozwiązania samodzielnie :/
Właśnie robię samodzielnie i nie proszę o gotowca, tylko pytam czy w poprawnym kierunku idę
w CSS do kolorowania co drugiej komórki na jeden kolor użyj selektora :nth-child() z wartością np. 2n
pokoloruje każdą parzystą komórkę na biały kolor
Kod
td:nth-child(2n) {background: #fff;}
pokoloruje każdą parzystą komórkę na biały kolor
Cytat(Greg0 @ 16.03.2013, 19:14:15 ) 
w CSS do kolorowania co drugiej komórki na jeden kolor użyj selektora :nth-child() z wartością np. 2n
pokoloruje każdą parzystą komórkę na biały kolor
Kod
td:nth-child(2n) {background: #fff;}
pokoloruje każdą parzystą komórkę na biały kolor
Dziękuję za podpowiedź
Nie ustawiaj każdego atrybutu w znacznikach przez style, tylko dołącz do dokumentu html, plik css i w nim zapisuj wartości.
Właśnie teraz próbuję w css wszystko ustawić aby identycznie wyglądało
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.