linki adsense

piątek, 29 marca 2013

KURS HTML - UKŁAD (SZABLON) STRONY


Żeby Twoja strona wyglądała dobrze, bardzo ważny jest dobrze zaprojektowany układ strony.
Bardzo dokładnie projektuj układ swojej strony
Examples

Przykład

Projektowanie układu strony za pomocą elementów <div>
Jak stworzyć układ strony za pomocą elementów <div>.
Projektowanie układu strony za pomocą elementów <table>
Jak stworzyć układ strony za pomocą elementów <table>.

Układ stron internetowych


Zawartość większości stron internetowych jest podzielona na kilka kolumn (jak w gazecie).
Te kolumny są stworzone za pomocą elementu <div> lub <table>. Do pozycjonowania elementów, tworzenia tła lub kolorowego wyglądu stron używany jest CSS. 
lampNawet jeśli myślisz, że tworzenie ładnego układu stron jest możliwe za pomocą tabel, to niestety tabele stworzone są do prezentowania danych tabelarycznych, a nie do tworzenia układu stron internetowych.

Projektowanie układu strony za pomocą elementu <div>

Element <div> to element blokowy używany do grupowania elementów HTML.
Poniższy przykład używa 5 elementów div do stworzenia układu kilku kolumn, otrzymujemy ten sam rezultat jak w poprzednim przykładzie:

Przykład

<!DOCTYPE html>
<html>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">Tytuł Strony</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
Treść strony</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
Copyright © W3Schools.com</div>

</div>

</body>
</html>

Spróbuj Sam »
Rezultat powyższego kodu HTML:

Tytuł Strony

Menu
HTML
CSS
JavaScript
Treść strony
Copyright © W3Schools.com

Projektowanie układu strony za pomocą elementu <table>

A simple way of creating layouts is by using the HTML <table> tag.
Multiple columns are created by using <div> or <table> elements. CSS are used to position elements, or to create backgrounds or colorful look for the pages.
Łatwym sposobem projektowania układu stron www, jest użycie do tego celu znacznika <table>.
Układ kilku kolumn można stworzyć za pomocą elementu <div> lub <table>. Do pozycjonowania elementów, tworzenia tła lub kolorowego wyglądu stron używany jest CSS. 
lampNawet jeśli myślisz, że tworzenie ładnego układu stron jest możliwe za pomocą tabel, to niestety tabele stworzone są do prezentowania danych tabelarycznych, a nie do tworzenia układu stron internetowych.

W poniższym przykładzie użyto tabeli z 3 wierszami i 2 kolumnami - pierwszy i ostatni wiersz rozdziela obydwie kolumny przy użyciu atrybutu colspan:

Przykład

<!DOCTYPE html>
<html>
<body>

<table width="500" border="0">
<tr>
<td colspan="2" style="background-color:#FFA500;">
<h1>Tytuł Strony</h1>
</td>
</tr>

<tr>
<td style="background-color:#FFD700;width:100px;">
<b>Menu</b><br>
HTML<br>
CSS<br>
JavaScript
</td>
<td style="background-color:#EEEEEE;height:200px;width:400px;">
Treść strony</td>
</tr>

<tr>
<td colspan="2" style="background-color:#FFA500;text-align:center;">
Copyright © W3Schools.com</td>
</tr>
</table>

</body>
</html>

Spróbuj Sam»
Rezultat powyższego kodu HTML:

Tytuł Strony


Menu
HTML
CSS
JavaScript
Treść strony
Copyright © W3Schools.com

Układ strony - wskazówki

Tip: Największą zaletą używania CSS jest to, że jeżeli wstawisz kod CSS do zewnętrznego arkusza stylów, Twoja strona stanie się dużo łatwiejsza w zarządzaniu. Możesz zmienić układ wszystkich swoich stron poprzez edycję jednego pliku. Żeby nauczyć się CSS, przejrzyj CSS tutorial.
Tip: Ponieważ tworzenie zaawansowanego wyglądu stron jest czasochłonne, szybszą opcją jest użycie szablonu. Wejdź na Google i poszukaj darmowych szablonów stron WWW (to gotowe układy stron, które możesz używać i zmieniać).

Znaczniki do projektowania układu stron WWW

ZnacznikOpis
<div>Definiuje sekcję w dokumencie (blokowo)
<span>Definiuje sekcję w dokumencie (w linii)
o

18 komentarzy:

  1. Monika Zawadzka13 lipca 2018 05:57

    Absolutne i dobre podstawy dla osób chcących tworzyć strony internetowe. Ja swoją witrynę zleciłam https://dolp.pl/strony-www bo się kompletnie na tym nie znam. Jednak wykonanie strony internetowej przez firmę dolp przeszło moje oczekiwania. Jest super !

    OdpowiedzUsuń
  2. PoL24 sierpnia 2019 02:50

    Gotowy szablon HTML kupisz w wielu miejscach, również np. na TemplateMonster.

    OdpowiedzUsuń
  3. Tygrysek31 października 2019 04:01

    https://strony-www.net/

    OdpowiedzUsuń
  4. Vikii1 grudnia 2019 07:07

    Darmowe szablon wordpress przyciągają jak magnes. Jest ich olbrzymia ilość, ale nie wszystkie są godne Twojej uwagi.

    OdpowiedzUsuń
  5. Vikii1 grudnia 2019 07:08

    szablon wordpress

    OdpowiedzUsuń
  6. Vikii1 grudnia 2019 07:08

    www.templatemonster.com/pl/type/szablony-wordpress/

    OdpowiedzUsuń
  7. Anonimowy21 sierpnia 2020 00:18

    Uważam, iż ogólnie pozycjonowanie stron internetowych jest bardzo istotne i moim zdaniem, że warto się tym zainteresować. Niedawno o tym czytałem w artykule https://www.dziennikwschodni.pl/artykuly-sponsorowane/pozycjonowanie-stron-internetowych-co-musisz-wiedziec,n,1000263764.html i jak najbardziej, uważam że takie kwestie są istotne. Tym bardziej, iż teraz chyba większość z nas marzy aby być na pierwszych miejscach w wyszukiwarce internetowej.

    OdpowiedzUsuń
  8. Monika Zawadzka27 sierpnia 2020 13:24

    Gdyby spojrzeć na to z innej strony, to ogólnie reklama naszej witryny www jest bardzo ważna. Na przestrzeni ostatnich dni ciekawie to ostało opisane na https://www.reklama.pl/aktualnosci/szczegoly/pozycjonowanie-stron--od-czego-zaczac,11451 i taka jest prawda w momencie optymalizacji stron. Na początku trzeba poznać czym tak naprawdę jest to pozycjonowanie.

    OdpowiedzUsuń
  9. Anonimowy7 grudnia 2020 01:49

    To nie są moje artykuły, tylko tłumaczenie tutoriala z W3Schools z angielskiego na polski.
    Jeśli umiesz czytać po angielsku to cały tutorial jest tu:https://www.w3schools.com/
    W3shools to świetna strona, dlatego postanowiłem przetłumaczyć ich tutoriale na język polski. Niestety obecna praca nie pozwala mi się już tym zajmować (brak czasu).

    OdpowiedzUsuń
  10. Izabella Nowotka16 grudnia 2020 13:23

    Świetnie napisane. Pozdrawiam serdecznie.

    OdpowiedzUsuń
  11. Mateusz Domański17 grudnia 2020 09:54

    Bardzo fajnie opisane podstawy tworzenia stron www i muszę powiedzieć, że jak dla mnie takie kwestie są istotne. Osobiście bardzo chętnie korzystam z usług firmy https://haiku.com.pl/ która również i dla mnie robiła już nie jedną stronę internetową.

    OdpowiedzUsuń
  12. Mateusz Domański19 maja 2021 08:40

    Świetnie napisany artykuł.

    OdpowiedzUsuń
  13. Dawid16 marca 2023 21:01

    Bardzo ciekawe informacje. Wykorzystam je podczas pracy przy wizytówki internetowe

    OdpowiedzUsuń
  14. Pozycjonowanie lokalne16 marca 2023 21:17

    Dobrze, że opowiadasz o takich rzeczach. Na pewno wielu osobom się to przyda.

    OdpowiedzUsuń
  15. Neteor8 października 2023 01:56

    Tworzenie strony internetowej to fascynujący proces, który daje możliwość wyrażenia swojej kreatywności, komunikowania się z szeroką publicznością i realizowania różnych celów, od osobistych po biznesowe.

    OdpowiedzUsuń
  16. Anonimowy27 listopada 2023 02:04

    Rozwijaj swoje umiejętności programistyczne z JavaScript! Ten dynamiczny język otwiera drzwi do fascynującego świata interakcji online. Dołącz do kursu i zanurz się w kodzie https://coderslab.pl/pl/javascript-developer-react

    OdpowiedzUsuń
  17. Rowery powystawowe elektryczne outlet3 grudnia 2023 16:12

    Dzięki, bardzo mi się to przydało.

    OdpowiedzUsuń
  18. aexol.com13 lutego 2024 10:14

    Z pewnością takie podstawy mi się przydadzą :)

    OdpowiedzUsuń

Subskrybuj: Komentarze do posta (Atom)