Lekcja 3
Lekcja 3
Embedded Files
Temat: Tabela na stronie WWW.
Temat: Tabela na stronie WWW.
Cele lekcji:
Poznanie znaczników przy pomocy których możemy stworzyć tabele na stronie internetowej.
Opanaowanie wstawiania fragmentów kodu html na witrynie Google.
Znaczniki tworzące tabele.
Znaczniki tworzące tabele.
<caption> ... </caption> tytuł tabeli (nad).
<table> border=1 </table> definiuje tabelę HTML + atrybut grubości ramki.
<tr> ... </tr> definiuje wiersz w tabeli HTML.
<th> ... </th> definiuje komórkę nagłówka w tabeli HTML.
<td> ... </td> definiuje standardową komórkę w tabeli HTML.
Używane atrybuty do <th> i <td>
colspan=... łączenie komórek w poziomie
rowspan=... łączenie komórek w pionie
Ćwiczenia:
Utwórz plik l3.html (możesz wykorzystać kopie pliku zrobionego na poprzedniej lekcji).
Zrób podobną tabelę jak na przykładzie z lekcji ale tabele bez 4 kolumny i zastąp słowo komórka swoim imieniem.
Po skończeniu przekopiuj do udostępnionego folderu Google.
Wstaw fragment kodu pliku L3.html do swojej lekcji na witrynie Google.
Wstaw przycisk prowadzący do pliku (Pamiętaj o przekopiowaniu go na dysk współdzielony).
Utwórz plik L3a.html i wstaw ją podobnie jak poprzednie ćwiczenie. (możesz pracować na kopi poprzedniego ćwiczenia)
Możesz wstawić więcej tabel które utworzyłeś ;-)
Przykładowe wykonanie ćwiczenia:
Przykładowe wykonanie ćwiczenia:
Budowanie strony za pomocą tagu <div> (divide czyli podziały):
<head>
<style>
#unikatowa_nazwa_sekcji
{
wight:1000px;
margin-left:auto;
margin-right:auto;
padding:20px;
}
</style>
</head>
<body>
<div id="unikatowa_nazwa_sekcji">
<h1>
Ta zawartość wyświetli się na stronie
</h1>
</div>
</body>
Uwagi ogólne o divach:
Sekcje podziału (div) z automatu ustawiają się jedna pod drugą.
Jeżeli chcemy aby sekcje były obok siebie to w każdym kontenerze należy użyć w stylach atrybutu float: left. Pierwszy kontener, który ma być w nowej linii w sekcji style powinien posiadać zapis o resetowaniu sklejania czyli clear: both.
Atrybut padding: 20px, ustawia 20pixelowy odstęp od granic sekcji podziału (odstęp z góry, dołu, lewej i prawej strony) względem jego zawartości np. tekstu lub obrazka.
Jedną z zalet <div> jest ustawianie parametrów wyglądu w sekcji style, które często są w innym pliku. Dzięki odseparowaniu treści strony od jej wyglądu łatwo nawigować w kodzie i zmieniać zawartość czy wygląd. Dodatkowo każda podstrona może pobierać style z tego samego pliku co sprawia, że zostaje zachowany motyw przewodni.
Ćwiczenie do samodzielnego wykonania:
Zbuduj stronę z zastosowaniem divów. Główny pojemnik "contener", którego zawartość to kolejne divy: logo, nawigacja, treść, reklamodawcy, sponsorzy i na dole stopka.
Logo: to sekcja z logo i nazwą o czym jest strona
Nav: Linki do podstron
Content: Treść strony
Ad: Obrazy tematyczne powiązane ze stroną
Footer: Informacje o autorze, dacie ostatniej zmiany aktualizacji, informacja o prawach autorskich.
Lista tematów zgodna z numerem w dzienniku:
Zwierzęta zagrożone wyginięciem Planety Układu Słonecznego
Słynni wynalazcy i ich odkrycia
Historia wybranego kraju
Jak działa komputer?
Portfolio młodego artysty
Blog z opowiadaniami fantasy
Style muzyczne i ich cechy
Galeria zdjęć z wycieczki szkolnej
Moda młodzieżowa
Techniki skutecznego uczenia się
Jak radzić sobie ze stresem?
Zdrowy styl życia nastolatków
Hobby i pasje uczniów
Motywacja i wyznaczanie celów
Kultura wybranego kraju
Atrakcje turystyczne w Polsce
Ciekawostki językowe ze świata Święta i tradycje różnych narodów
Znani Polacy i ich osiągnięcia
Bezpieczeństwo w internecie
Jak stworzyć własną aplikację?
Wynalazki XXI wieku
Nowinki technologiczne
Ekologiczne rozwiązania w domu
Quizy i zagadki logiczne
Gry komputerowe i planszowe
Ulubione filmy i seriale
Strona fanowska zespołu muzycznego
Przepisy kulinarne dla młodych kucharzy
Planety Układu Słonecznego
Święta i tradycje różnych narodów
Źródła:
Podręcznik "Nowa Informatyka na czasie 2" Nowa Era
strona https://www.w3schools.com/
Pomoce YT: Tabele w html 5.0
Pomoce YT: Tabele w html 5.0
film 1 [6:42]
film 2 [7.:17]
Page updated
Report abuse