Tworzenie strony na wyciągnięcie ręki – podstawy HTML i CSS

Jeśli możesz, wyobraź sobie czas przed wynalezieniem Internetu. Strony internetowe nie istniały, a głównym źródłem informacji były książki wydrukowane na papierze i mocno oprawione. Znalezienie dokładnej informacji, której szukałeś, wymagało sporego wysiłku – i dużej ilości czytania.

Dziś możesz otworzyć przeglądarkę internetową, przejść do wybranej wyszukiwarki i rozpocząć wyszukiwanie. Wszelkie możliwe do wyobrażenia informacje są na wyciągnięcie ręki. Są też szanse, że ktoś gdzieś zbudował witrynę internetową z myślą o dokładnym wyszukiwaniu.

Chcemy tutaj zrobić wstęp na temat tego, jak tworzyć własne witryny internetowe przy użyciu dwóch najbardziej dominujących języków komputerowych – HTML i CSS. Przede wszystkim ważne jest, aby zrozumieć różnice między tymi dwoma językami, składnię każdego języka i jakąś popularną terminologię.

Co to jest HTML i CSS?

HTML, HyperText Markup Language, nadaje strukturę i znaczenie treści, definiując ją jako na przykład nagłówki, akapity lub obrazy. CSS, czyli kaskadowe arkusze stylów, to język prezentacji stworzony w celu nadania stylowi wyglądu zawartości – na przykład przy użyciu czcionek lub kolorów.

Te dwa języki – HTML i CSS – są od siebie niezależne i takie powinny pozostać. CSS nie powinien być zapisywany w dokumencie HTML i odwrotnie. Z reguły HTML zawsze będzie reprezentował zawartość, a CSS zawsze będzie reprezentował wygląd tej zawartości.

Rozumiejąc różnicę między HTML i CSS, zagłębmy się bardziej szczegółowo w HTML.

Rozpoczynając pracę z językiem HTML, prawdopodobnie napotkasz nowe – i często dziwne – terminy. Z biegiem czasu będziesz coraz bardziej zaznajomiony ze wszystkimi z nich, ale trzy popularne terminy HTML, od których powinieneś zacząć, to elementy, tagi i atrybuty.

Elementy

Elementy to desygnatory, które definiują strukturę i zawartość obiektów na stronie. Niektóre z częściej używanych elementów obejmują wiele poziomów nagłówków (identyfikowanych jako elementy od <h1> do <h6>) i akapitów (identyfikowanych jako element <p>); lista zawiera elementy <a>, <div>, <span>, <strong>, <em> i wiele innych.

Elementy są identyfikowane za pomocą nawiasów kątowych „mniejsze niż” i „większe niż”, <>, otaczających nazwę elementu. Użycie nawiasów kątowych „mniejsze niż” i „większe niż” otaczających element powoduje utworzenie tak zwanego znacznika. Tagi najczęściej występują w parach znaczników otwierających i zamykających.

Znacznik otwierający oznacza początek elementu. Składa się ze znaku mniejszości, po którym następuje nazwa elementu, a następnie kończy się znakiem większości; na przykład <div>.

Znacznik zamykający oznacza koniec elementu. Składa się ze znaku mniejszości, po którym następuje ukośnik i nazwa elementu, a następnie kończy się znakiem większości; na przykład </div>. Treść znajdująca się między tagiem otwierającym i zamykającym jest zawartością tego elementu. Na przykład link kotwicy będzie miał otwierający tag <a> i zamykający tag </a>. Między tymi dwoma tagami będzie zawartość linku zakotwiczenia.

Uważasz, że jest to dla Ciebie zbyt skomplikowane? Oddaj tworzenie stron www specjalistom z https://www.generalinformatics.pl.

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *