Cze
05
2014

Tworzenie stron web i ich elemetów www

kurs htmlJak myślisz, czy trudno jest zbudować porządną, interesującą witrynę internetową? Nie wymaga to ani wiedzy tajemnej, ani nadzwyczajnych zdolności. Rozejrzyj się — zobacz, jak wielu ludzi ma własnoręcznie wykonaną stronę  internetową. W rzeczywistości wystarczy do tego opanowanie jednego lub więcej języków programowania strony www .  W tym artykule przedstawimy parę ważnych wskazówek jakie jest zastosowanie znaczników w stronach typu HTML 4.01 / XHTML1.0  , objaśnimy ci ich znaczenie  . przedstawimy listę nie których typów plików ….

Poniższa lista zawiera posortowane alfabetycznie  znaczniki   HTML 4.01 / XHTML 1.0. Zostały ponumerowane aby było można łatwiej wyszukać danego znacznika . Wartości w kolumnie „typ” – Definicja typu dokumentu oznaczają w której wersji HTML/XHTML można korzystać z podanego znacznika:  S-Strict , T – Transitional , F – Frameset

lista zawiera 93 znaczniki 

Numer >> Znacznik >> Opis >> typ

  1.  !–…– | Komentarz | STF
  2.  !DOCTYPE | Definicja typu dokumentu | STF
  3. a | Odnośnik (kotwica) | STF
  4. abbr | Skrót | STF
  5. acronym | Akronim | STF
  6. address | Adres | STF
  7. applet | Applet (niezalecany) | TF
  8. area | Element mapy odsyłaczy | STF
  9. b | Pogrubienie tekstu | STF
  10. base | Definicja bazowego adresu URL dla wszystkich odnośników na stronie | STF
  11. basefont | Definicja bazowego fontu (niezalecany) | TF
  12. bdo | Kierunek wyświetlania tekstu | STF
  13. big | Powiększenie tekstu | STF
  14. blockquote | Komentarz blokowy | STF
  15. body | Ciało dokumentu HTML | STF
  16. br | Przejście do nowej linii | STF
  17. button | Przycisk | STF
  18. caption | Tytuł tabeli | STF
  19. center | Centrowanie tekstu (niezalecany) | TF
  20. cite | Cytat | STF
  21. code | Fragment kodu programu | STF
  22. col | Definicja kolumny tabeli | STF
  23. colgroup | Definicja grupy kolumn w tabeli | STF
  24. dd | Opis definicji | STF
  25. del | Tekst skasowany | STF
  26. dfn | Definiowane słowo lub wyrażenie | STF
  27. dir | Lista katalogu (niezalecany) | TF
  28. div | Sekcja w dokumencie | STF
  29. dl | Lista definicji | STF
  30. dt | Definiowane słowo lub wyrażenie | STF
  31. em | Emfaza | STF
  32. fieldset | Grupa pól | STF
  33. font | Określenie czcionki, jej rozmiaru i koloru (niezalecany) | TF
  34. form | Formularz | STF
  35. frame | Definicja zawartości ramki na stronie z ramkami | F
  36. frameset | Grupa ramek na stronie z ramkami | F
  37. h1 | Nagłówek poziomu 1 | STF
  38. h2 | Nagłówek poziomu 2 | STF
  39. h3 | Nagłówek poziomu 3 | STF
  40. h4 | Nagłówek poziomu 4 | STF
  41. h5 | Nagłówek poziomu 5 | STF
  42. h6 | Nagłówek poziomu 6 | STF
  43. head | Definicja informacji o dokumencie | STF
  44. hr | Pozioma linia | STF
  45. html | Definicja dokumentu HTML | STF
  46. i | Tekst pochylony | STF
  47. iframe | Ramka pływająca (iframe) | TF
  48. img | Obrazek | STF
  49. input | Pole formularza (opis ogólny) | STF
  50. ins | Tekst wstawiony | STF
  51. isindex | Definiuje jednoliniowe pole do wprowadzania tekstu (niezalecany) | TF
  52. kbd | Tekst wprowadzony z klawiatury | STF
  53. label | Erykieta dla kontrolki formularza | STF
  54. legend | Tytuł dla grupy pól | STF
  55. li | Element listy | STF
  56. link | Odnośnik do zasobu | STF
  57. map | Mapa odsyłaczy graficznych | STF
  58. menu | Lista typu menu (niezalecany) | TF
  59. meta | Informacje meta | STF
  60. noframes | Sekcja noframe (dla przeglądarek nie obsługujących ramek)| TF
  61. noscript | Sekcja noscript (dla przeglądarek nie obsługujących skryptów) | STF
  62. object | Osadzony obiekt | STF
  63. ol | Lista numerowana | STF
  64. optgroup | Grupa opcji | STF
  65. option | Opcja w liście rozwijalnej | STF
  66. p | Paragraf | STF
  67. param | Parametr dla obiektu | STF
  68. pre | Tekst preformatowany | STF
  69. q | Krótki cytat | STF
  70. s | Tekst przekreślony (niezalecany) | TF
  71. samp | Przykład kodu komputerowego | STF
  72. script | Skrypt | STF
  73. select | Lista wybieralna | STF
  74. small | Pomniejszony tekst | STF
  75. span | Sekcja w dokumencie | STF
  76. strike | Tekst przekreślony (niezalecany) | TF
  77. strong | Tekst silnie wyróżniony | STF
  78. style | Definicja arkuszy styli CSS | STF
  79. sub | Tekst w dolnym indeksie | STF
  80. sup | Tekst w górnym indeksie | STF
  81. table | Tabela | STF
  82. tbody | Ciało tabeli | STF
  83. td | Komórka tabeli | STF
  84. textarea | Pole do wprowadzania wielu linii tekstu | STF
  85. tfoot | Stopka tabeli | STF
  86. th | Komórka nagłówka tabeli | STF
  87. thead | Nagłówek tabeli | STF
  88. title | Tytuł dokumentu HTML | STF
  89. tr | Wiersz tabeli | STF
  90. tt | Tekst „maszynowy” | STF
  91. u | Tekst podkreślony (niezalecany) | TF
  92. ul | Lista wypunktowana | STF
  93. var | Zmienna (np. w programie) | STF

Znaki: „< ” (znak mniejszości) oraz „>” (znak większości) są zarezerwowane dla znaczników, nie powinny się one pojawić w normalnej treści strony. Jeżeli musimy ich użyć, należy wpisywać zamiast nich odpowiednio: < oraz >. Ponadto znak „&” (ampersand – angielskie „and” – Shift+7) należy zastępować przez: &

Znacznik otwierający musi znaleźć się zawsze przed znacznikiem zamykającym . nawias otwieramy < …> zamykamy i to samo przy drugim typie nawiasu robimy otwieramy [ link ] zamykamy

pierwszy typ nawiasów występuje w html drugi zwykle to php . Należy również pamiętać, że prawie każdy znacznik (poza nielicznymi wyjątkami) trzeba zamknąć za pomocą odpowiedniego znacznika zamykającego, co oznacza, że nie można zapominać o wstawianiu znaczników zamykających!

objaśnienie znaczeń :

button | klasyczny przycisk |

checkbox | pole wyboru |

hidden | element ukryty |

password | pole tekstowe do wpisywania haseł |

radio | pole wyboru |

reset | przycisk reset |

select | lista wyboru |

submit | przycisk submit |

text | pole tekstowe |

textarea | rozszerzone pole tekstowe |

 

 

Praktycznie prawie każdy edytor HTML oferuje:

  • Kolorowanie składni polega na tym, że jeśli wpiszemy poprawny znacznik, jego składnia przyjmie określony kolor – zależny od ustawień. Dzięki temu od razu uwidaczniają się wszystkie błędy (najczęściej literowe). Jest to chyba najważniejsza zaleta stosowania edytorów HTML. Dlatego właśnie nie poleca się używania zwykłych edytorów tekstu, do tworzenia stron WWW.
  • Automatyczne zamykanie znaczników polega na dopisaniu przez program odpowiedniego znacznika zamykającego, zaraz po tym jak użytkownik poda znacznik otwierający. Dzięki temu, że nie trzeba tego robić ręcznie, praca przebiega dużo sprawniej, a dodatkowo nie zapomnimy o zamykaniu znaczników, ponieważ program robi to automatycznie za nas.
  • Generatory (lub inaczej kreatory – ang. wizards) pomagają przy tworzeniu różnorodnych znaczników (poprzez specjalne okna dialogowe

 

lista formatów plików nie których

STP
INDD
RPT
XLS
HTM
MND
WEBARCHIVE
MSI
DBF
MDB

LDT
TRC
DXF
TSV
MHT
PPT
PSB
EMF
JSP
GHO

 

Przykładowa struktura kodu strony html

 

<html> początek kodu strony

<head> początek  sekcji head 

 <title>nagłówek strony treść nagłówka koniec sekcji nagłówka </title>

</head> koniec sekcji head

miejsce na znacznik meta

<body> sekcja body
<h1> treść w znacznika nagłówka poziom 1 </h1>

</body>koniec sekcji body

</html> koniec kodu strony

 

Struktura  znaczników meta częściowa

<meta http-equiv=
<meta name=
<meta property=

 

Przykład sposobu tworzenia plików elementów strony bez kodu pełnego w pliku
tworzymy stronę html
wpisujemy kod krok pierwszy
< kod> krok drugi zapisz jako np dar.html strona gotowa

tworzymy stronę php

bierzemy otwieramy wordpad lub notatnik

otwieramy notatnik lub inny program tego typu

powtarzamy krok 1 i następnie

zapis jako dar.php gotowe

tworzymy JScript Script File

otwieramy notatnik lub inny program tego typu

powtarzamy krok 1 i następnie

zapis jako dar.js gotowe

tworzymy Dokument Arkusz stylu kaskadowego

otwieramy notatnik lub inny program tego typu

powtarzamy krok 1 i następnie

zapis jako dar.css gotowe

tworzymy htm

otwieramy notatnik lub inny program tego typu powtarzamy

krok 1 i następnie

zapis jako dar.htm gotowe

tworzymy xhtml

otwieramy notatnik lub inny program tego typu powtarzamy

krok 1 i następnie zapis jako dar.xhtml gotowe

tworzymy xml

otwieramy notatnik lub inny program tego typu

powtarzamy krok 1 i następnie

zapis jako dar.xml gotowe

tworzymy xhtm

otwieramy notatnik lub inny program tego typu

powtarzamy krok 1 i następnie

zapis jako dar.xhtm gotowe

 

 Ważna ciekawostka index .html jest plikiem strony  podstawowym który zawsze będzie się wyświetlał jako pierwsza strona twoje strony www.   Zaś dar wyświetli się jako podstrona www , tak jak strony  teletekstu mają też swoje podstrony tak i te w internetowe strony www też mają swoje podstrony www powiedzmy  że teletext to pierwszy internet w oborniku tv. Podobny efekt struktury kodu uzyskujemy też na stronach  internetowych  www  jak  wspomnianym teletekscie tv …

 

Trudno wyobrazić sobie współczesny świat bez internetu.
dziś wszystko praktycznie przeniosło się do internetu
telewizja czy też radio . Kiedyś grywało się w gry planszowe tylko
lub podwórkowe , w tych czasach są gry dostępne w internecie .
Czytanie książek polegało na wertowaniu kartek obecnie ,
wertuje się strony plikowe e-booków w czytaniu książek . Życie
stało się życie znacznie bardziej łatwiejsze . Jeśli masz
chęć stworzenia czegoś równie interesującego i przekazania
tego innym jak własna strona internetowa . Która prezentować
będzie twoją firmę lub twoje własne życie prywatne . Jak
fotografie z ślubu czy twoje poglądy życiowe . Wystarczy
kupić jedną z polecanych przez nas książek aby uzupełnić
wiedzę z powyższego artykułu o to parę 

interesujących wartych polecenia książek :

lista książek polecanych

Tworzenie stron WWW Praktyczny kurs

Tworzenie stron WWW Ilustrowany przewodnik

Projektowanie serwisów WWW

Podręcznik WordPressa

ProBlogger. Jak czerpać zyski ze swojego bloga

Drupal 7. Od podstaw

HTML, XHTML i CSS. Biblia

Projektowanie WWW  Księga pomysłów

HTML5 i CSS3. Zaawansowane wzorce projektowe

HTML i CSS. Zaprojektuj i zbuduj witrynę WWW

XHTML, CSS i JavaScript. Pierwsza pomoc

Joomla! 2.5. Praktyczny kurs

Tworzenie bezpiecznych aplikacji internetowych (z przykładami w PHP)

Jak stworzyć własny xFACEBOOK

Webmasterstwo w 7 dni

PHP i MySQL. Od nowicjusza do wojownika ninja

Mobile Web. Rusz głową!

Powered by WordPress | ® świat rozrywki | Polityka cookies

  • RSS
  • Newsletter
  • Facebook
  • Google+
  • YouTube
  • Pinterest