Cała tabela w HTML

Całą tabelę należy umieścić pomiędzy znacznikami: <table>, </table>. W znaczniku otwierającym <table> należy umieścić atrybuty określające wysokość i szerokość całej tabeli. (Pamiętaj o tym, żeby wartość atrybutów zawrzeć w cudzysłowie). Przykładowo, znacznik otwierający tabelę o szerokości 500 pikseli i wysokości 300 pikseli będzie wyglądać następująco:

<table width=”500″ height=”300″>

Jeżeli chcesz, żeby tabela znalazła się na środku strony, dodaj atrybut align=”center”.

Wiersz tabeli w HTML

Zanim przejdziemy dalej, zwróć uwagę, by zaplanowana liczba i wysokość wierszy zgadzała się z wysokością całej tabeli. To znaczy, w naszym przypadku, tabela o wysokości 300 pikseli pomieści 3 wiersze o wysokości 100 pikseli, ale nie 4 takie wiersze.

Zobacz też: Kolory w HTML

Każdy wiersz tabeli należy umieścić pomiędzy znacznikami: <tr>, </tr>. W znaczniku otwierającym wiersz należy podać jego wysokość. Na przykład, jeżeli chcesz uzyskać wiersz o wysokości 100 pikseli, wpisz: height=”100″.

Komórki tabeli

Pomiędzy znacznikami <tr> i </tr> trzeba umieścić wszystkie komórki, które mają znaleźć się w danym wierszu. Każda komórka będzie wyróżniona znacznikiem otwierającym <td> i zamykającym </td>. Do znacznika otwierającego wpisz atrybuty wysokości i szerokości komórki, cały czas pamiętając o tym, by obliczenia się zgadzały.

Na przykład, w wierszu o szerokości 500 pikseli możesz umieścić dwie komórki o szerokości 250. Na początku postaraj się, żeby w każdym wierszu znalazła się taka sama liczba komórek. Co zrobić, gdy potrzebujesz scalić kilka komórek ze sobą, na przykład 3 komórki w wierszu? Wtedy ta komórka, która „obejmuje” je wszystkie, powinna zawierać w znaczniku otwierającym atrybut colspan=”3″. Jeśli natomiast chcesz scalić komórki pionowo (w kolumnie), użyj atrybutu rowspan.

Poniżej przedstawiono przykład zastosowania tabeli w dokumencie HTML:

The post Tabele w HTML appeared first on Lepiej Widoczni.

W zastosowanym powyżej przykładzie posłużono się takiem <p> tj. paragrafem, a wartość określającą kolor czerwony przedstawiono w predefiniowanej nazwie w języku angielskim. Równie dobrze, zamiast słowa „red” można użyć zapisu HEX tj. w tym przypadku #ff0000 lub rgb(255, 0, 0) w modelu przestrzeni barw.

Hex – zapis heksadecymalny kolorów (kody kolorów HTML)

Jak zapisywać kolory w HTML? Najpopularniejszym sposobem przedstawienia kolorów w HTML jest zapis szesnastkowy (ang. hex triplet), czyli w skrócie hex.

Kolory w systemie szesnastkowym

Składa się on z hashtaga (#) oraz sześciu cyfr szesnastkowych, których następujące po sobie pary odpowiadają kolejno za barwy: czerwoną, zieloną i niebieską. Każda taka para cyfr, zwana bajtem, przyjmuje wartości z przedziału od 00 (0) do FF (255). Im wartość jest większa, tym bardziej intensywny komponent otrzymujemy. Przykładowo zapis #FF0000 jest renderowany na czerwono, ponieważ czerwony składnik posiada maksymalną wartość, a pozostałe są ustawione na 0.

Zobacz też: Składnia HTML

Kod koloru składa się z sześciu cyfr, nawet w przypadku, gdy intensywność jednej z barw jest mniejsza niż 16 (w zapisie szesnastkowym składa się z jednej cyfry). Wówczas jej wartość musi poprzedzać 0. Na przykład, odcień zielonego, w którym czerwony posiada wartość 1, zielony 170 (czyli AA), a niebieski 9 będzie wyglądał następująco: #01AA09. Zapis heksadecymalny może zostać skrócony tylko wtedy, kiedy każdy bajt składa się z takich samych cyfr, np. 1122AA można zapisać jako 12A.

Poniżej przedstawiony został wykaz przykładowych kolorów, możliwych do zastosowania podczas Tworzenia własnego dokumentu HTML. W pierwszej kolumnie wskazano nazwę angielską, w drugiej HEX, trzecia zaś prezentuje docelowy kolor, który pojawi się na tworzonej przez Was stronie www.

The post Kolory w HTML appeared first on Lepiej Widoczni.

Składnia HTML – tagi

Składnia w HTML posiada różne tagi, które mają swoje własne zastosowania i funkcje. Dzięki standaryzacji większość przeglądarek i komputerów interpretuje polecenia w podobny sposób, dlatego strony są tak samo wyświetlane. Ostatni fragment – Language – oznacza, że zarówno człowiek, jak i komputer, poprawnie zinterpretuje ten kod. Przeglądarka nie wyświetla znaczników HTML, pokazuje tylko pożądaną treść, dzięki temu że odczytuje wskazane polecenia w odpowiedni sposób. Dokument HTML składa się na dwie części – wprowadzającą i właściwą. W pierwszej, która rozpoczyna, występują tagi mówiące o tytule, opisie strony, słowach kluczowych, można tam także wprowadzić inne informacje, np. o dacie utworzenia, autorze itd. Część właściwa ma w sobie znaczniki dotyczące formatowania tekstu i innych elementów strony.

Zobacz też: Język znaczników HTML

Sekcja HEAD w HTML

Pierwsza część kodu strony mieści się pomiędzy znacznikami <head> i </head> . Znajdziemy tutaj m.in: informacje o sposobie kodowania strony, formatowanie, tytuł, opis strony czy kody analityczne.

Sekcja BODY

Druga część składni HTML znajduje się pomiędzy znacznikami <body> i </body> i znajdziemy tam właściwą treść, która po interpretacji przez przeglądarki trafi na ekran komputera użytkownika.

Całość składni dokumentu HTML (zarówno HEAD jak i BODY) zamknięta jest w znacznikach <html> i </html> określających początek i koniec dokumentu.

Na samej górze dokumentu znajduje się zaś wspomniana nieco wyżej deklaracja typu dokumentu, w przypadku HTML5 <!DOCTYPE html>. Informuje ona przeglądarkę o rodzaju dokumentu, który został wysłany do przetworzenia. Przeanalizujmy więc składnię dokumentu HTML na konkretnym przykładzie. Jak widzimy na wyżej załączonej grafice dokument ten rozpoczyna się od wspomnianej wyżej deklaracji <!DOCTYPE html>. Dalej mamy znacznik otwierający <HTML>, w którym zawarta jest deklaracja języka dokumentu lang=”pl-PL”. Małe litery „pl” odnoszą się do stosowanego w witrynie języka natomiast duże litery „PL” określają kraj, w którym ten język jest używany. Nieco dalej mamy znaczniki otwierający <head>, w którym znajdują się elementy określające zawartość i ustawienia strony lecz niewidoczne dla użytkownika. Mamy tutaj więc deklarację charset=”UTF-8″ określającą sposób kodowania znaków (dzięki czemu przeglądarka wyświetlać będzie polskie znaki.

Zobacz też: Komponenty języka HTML

Nieco dalej mamy znaczniki <title> i <meta name=”description”, które określają kolejno tytuł strony dla przeglądarki oraz jej opis. Ich uzupełnienie ma duże znaczenie ponieważ są one widoczne z poziomu wyników wyszukiwania Google i innych wyszukiwarek i mają wpływ na widoczność naszej strony na konkretne frazy. Tytuł powinien mieć około 65 znaków ze spacjami, a opis około 165. Jeśli wpiszemy zbyt długi tytuł lub opis strony istnieje ryzyko, że nie wyświetli się w pełni w wynikach wyszukiwania i tym samym zniechęci użytkownika do kliknięcia i przejścia na Twoją stronę.

Tuż przed znacznikiem zamykającym sekcję HEAD tj. </head> mogą znaleźć się wszelkie kody analitycze np. kod Google Analytics. Po sekcji HEAD następuje otwarcie sekcji BODY znacznikiem <body>. W tej części dokumentu znajdują się wszystkie dane, które docelowo ukażą się użytkownikowi w oknie przeglądarki. W sekcji BODY znajdują się więc wszelkie grafiki, treści, tabele czy filmy. Zamknięcie tej części strony wykonuje się znacznikiem </body>. Ostatnim elementem widocznym w naszej przykładowej składni dokumentu HTML jest znacznik zamykający cały dokument, czyli </html>. W ten sposób informujemy przeglądarkę o tym, gdzie zakończyć interpretację dokumentu HTML.

W ten sposób prezentuje się właśnie składnia dokumentu HTML.

The post Składnia HTML appeared first on Lepiej Widoczni.

Znaczniki w HTML

Znaczniki HTML mają formę znaków lub wyrazów, zapisywanych w nawiasach skośnych. Zazwyczaj występują w parach jako znacznik otwierający i zamykający. Stanowią rodzaj opisu treści zawartej pomiędzy nimi. Nie są poleceniami, innymi słowy nie są przez komputer „wykonywane” ale odnoszą się do danych zawartych w ich obrębie. Za przykład mogą posłużyć znaczniki otwierający <h1> oraz zamykający </h1> które wskazują, że tekst między nimi zapisany to treść nagłówka h1 (header nagłówek). Istnieją też znaczniki jednolite, po których nie używa się znacznika zamykającego np. <img> czy <br>.

Atrybuty i wartości w HTML

Atrybuty w języku HTML występują w parach atrybut=”wartość”. Atrybut to inaczej cecha. Za przykład może posłużyć znacznik <html lang=”eng- US”> , z którego przeglądarka „dowiaduje się” że odczytywanego pliku html jest to, że zapisany jest w języku (atrybut lang) angielskim\amerykańskim (wartość eng-US).

Istnieją również atrybuty o wartości stałej, której nie trzeba definiować. Pary atrybut:wartość są powszechnie stosowane w wielu językach. Praktycznie każda strona internetowa zawiera w swojej treści tzw. znaki specjalne. Przykładem tego jest znak praw autorskich znajdujący się najczęściej na samym dole strony (małe c w kółku). Znakiem takie mogą być poprawnie wyświetlone w przeglądarce dzięki zastosowaniu encji oraz referencji znakowych. Są to kombinacje liter, znaków i cyfr, które nie wchodzą skład znaczników html. Dzięki temu wykluczona jest sytuacja, w której przeglądarka traktuje fragment treści tekstu strony jako część kodu (co mogłoby mieć miejsce np. wtedy gdy w tekście znajduje się znak mniejszości < lub większości >). Więcej na temat encji w kolejnych wpisach.

Zobacz też: Język znaczników HTML – czym jest?

Kolejnym komponentem języka HTML są typy danych. Występują one w kodzie w postaci wartości elementów lub atrybutów. Dostarczają one przeglądarce informację, jakiego typu danych dotyczy element lub określona wartość atrybutu. Typy danych to np. skrypty, identyfikatory, jednostki miary długości, kolory, dane arkuszy stylów, nazwy czy data i czas.

Technologia HTML od początku jej istnienia jest bezustannie udoskonalana.

Deklaracja typu dokumentu

Dynamiczny rozwój języka idzie w parze z tworzeniem nowych przeglądarek internetowych przystosowanych do pracy ze stronami napisanymi w nowszych wersjach kodu. Z drugiej strony niektórzy użytkownicy sieci nadal używają starych przeglądarek. Skąd przeglądarka ma wiedzieć, w jakiej wersji języka HTML powstała odczytywana strona? Informacji na ten temat dostarcza ostatni komponent HTML — deklaracja typu dokumentu. Deklaracja DOCTYPE to informacja, która w zasadzie powinna znajdować się w pierwszej lini kodu strony. Obecnie obowiązującym standardem jest HTML5 a deklaracja typu dokumentu napisanego w tym języku to po prostu <!DOCTYPE >.

Zapis taki rozpoznają wszystkie aktualne przeglądarki takie jak Chrome, Firefox, Opera, IE,Edge czy Safari. Znajomość komponentów HTML oraz ich zastosowania to klucz do poprawnego tworzenia treści stron. Żeby budować nowoczesne witryny internetowe potrzeba również dobrej znajomości CSS oraz JavaScript, jednak HTML jest absolutną podstawą.

W kolejnych wpisach na naszej stronie poznasz składnię dokumentu HTML wraz z przykładowym dokumentem zawierającym omawiane wyżej elementy, opis stosowania kolorów w języku znaczników HTML wraz z tabelą kolorów, naukę tworzenia tabel czy szczegółowe wyjaśnienie tego, czym są encje i w jakim celu się je stosuje.

Jak widać komponenty języka HTML to absolutna podstawia w zbieraniu wiedzy w dziedzinie tego języka znaczników.

The post HTML – komponenty języka znaczników appeared first on Lepiej Widoczni.

Specyfikacja języka znaczników HTML

W pierwszej specyfikacji znalazło się 18 elementów składających się na początkowy język HTML. Z wyjątkiem znacznika hiperłącza, bazowały one na znacznikach SGMLguid, wewnętrznym formacie dokumentacji wykorzystywanym wówczas w CERN.

Berners- Lee uważał HTML za aplikację SGMLa i tak też został on formalnie zdefiniowany przez Internet Engineering Task Force (IETF) w 1993 roku, w pierwszej propozycji specyfikacji HTML. Początkowo HTML zawierał w sobie także opis prezentacji dokumentów, ale obecnie najczęściej opis stylu jest wydzielony i opisywany za pomocą osobnych dokumentów zawierających tzw. kaskadowe arkusze stylów (CSS). Dodatkowo w HTMLu mogą występować fragmenty kodu w językach skryptowych, takich jak JavaScript. Niezależnie od technologii w jakiej zbudowana jest strona – czy jest to PHP, Ruby on Rails, Java czy też innych serwer, zanim prześle do nas stronę, konwertuje ją na dokument HTML.

Jak przeglądarka interpretuje język HTML?

Taki dokument jest przesyłany do przeglądarki WWW, która dekoduje go wyświetlając multimedialną stronę internetową. HTML opisuje semantycznie strukturę strony. Elementy HTML są cegiełkami, z których budowane są strony HTML. Za pomocą języka HTML można na stronie osadzić obrazy, łącza do innych dokumentów oraz inne obiekty, takie jak interaktywne formularze. HTML umożliwia tworzenie w dokumentach struktur za pomocą semantyki strukturalnej obejmującej nagłówki, akapity, listy, łącza, cytaty i inne elementy.

Elementy HTML – tagi – są oznaczone znacznikami, wyznaczanymi za pomocą nawiasów kątowych. Tagi takie jak <img /> i <input /> bezpośrednio wprowadzają treść na stronę. Inne tagi, takie jak <p> dostarczają informacji o tekście dokumentu i mogą zawierać inne tagi jako podelementy. Przeglądarki www nie wyświetlają tagów HTML, ale używają ich do interpretacji zawartości strony.

Budowa HTML

Język HTML składa się z kilku kluczowych elementów, w tym tagów wraz z atrybutami, danych alfanumerycznych, odniesień do znaków i odniesień do obiektów. Tagi HTML najczęściej występują w parach, takich jak znacznik nagłówka <h1> i </h1>, chociaż niektóre reprezentują tzw. puste elementy, a więc są niesparowane. Do tych ostatnich należy znacznik wstawienia obrazu <img> (choć niektóre standardy wymagały dodania znacznika zamykającego – </img>).

Pierwszy znacznik w takiej parze jest znacznikiem początkowym (otwierającym), a drugi znacznikiem końcowym (zamykającym). Dokumenty HTML mają strukturę zagnieżdżonych elementów – elementy te są zaznaczane w dokumencie za pomocą znaczników <p> i </p>. Treść elementu, jeśli istnieje, jest umieszczana między tymi znacznikami. Znaczniki mogą także zawierać dodatkowe elementy między tagami początku i końca, w tym mieszankę znaczników i tekstu. Pozwala to na zagnieżdżanie elementów jako podrzędnych. Znacznik początkowy może w obrębie nawiasów <> zawierać atrybuty, wskazujące dodatkowe informacje, takie jak identyfikatory sekcji w dokumencie, identyfikatory używane do wiązania informacji o stylu z prezentacją dokumentu w CSS, a dla niektórych znaczników, takich jak <img> są używane do osadzania obrazów, czy jak w przypadku <http> do definiowania hiperłączy. Wybrane elementy, takie jak podział linii <br>, nie zezwalają na osadzanie treści. Wymagają tylko jednego tagu początkowego i nie używają tagu końcowego.

Aktualny stan języka znaczników HTML

Aktualnie w piątej generacji jako HTML5 jest ostatnią wersją HTML wydaną pod nadzorem konsorcjum World Wide Web Consortium (W3C). Obecna specyfikacja jest znana jako HTML Living Standard, a jej definiowanie i rozwój zostały scedowane na konsorcjum głównych dostawców przeglądarek (Apple, Google, Mozilla i Microsoft), tworzących Grupę Roboczą ds. Technologii Hipertekstowych Aplikacji Sieciowych (WHATWG).

The post Język znaczników HTML – czym jest? appeared first on Lepiej Widoczni.