Strony internetowe, blogi, strony internetowe - pojęcia znane już w naszych czasach. Wraz z rozwojem Internetu witryny do hostowania stron internetowych stały się niezwykle popularne i nie jest to zaskakujące: dla niektórych posiadanie własnej strony internetowej jest koniecznością, dla innych jest to przyjemna rozrywka. W pierwszym przypadku zwykle mówimy o firmach, korporacjach, prywatnych przedsiębiorcach, gdy reklamują dowolny poszukiwany produkt lub usługę. Drugi dotyczy blogerów.
Oprócz tego, są użytkownicy Internetu, którzy po prostu szukają informacji, czytają blogi, oglądają filmy i tak dalej.
Aby stworzyć witrynę wysokiej jakości, istnieje wiele opcji. Skoncentrujemy się na programowaniu stron internetowych za pomocą HTML.
Co to jest HTML
HTML to skrót od Hyper Text Mark-Up Language. W tłumaczeniu z angielskiego oznacza to „język znaczników hipertekstowych”.
Innymi słowy, HTML to zestaw kodów, za pomocą których można tworzyć główne elementy witryny, jej ramkę, np.jak słowa składają się ze zdań.
Kody HTML są pisane wyłącznie literami łacińskimi i nazywane są znacznikami, a każdy kod jest ujęty w nawiasy ostre. Niektóre tagi są sparowane, inne nie.
Sparowane oznacza, że muszą być używane bezbłędnie w parach. Na przykład tag otwierający wskazuje, gdzie zaczyna się na stronie internetowej, a tag zamykający wskazuje, gdzie się kończy. Ten ostatni różni się od pierwszego obecnością ukośnika po nawiasie kątowym otwarcia. Na przykład jest znacznikiem otwierającym,jest znacznikiem zamykającym.
Niesparowane tagi nie wymagają partnera.
Wiele tagów może mieć atrybuty - dodatkowe elementy, które nadają im bardziej konkretne znaczenie. Na przykład tag.
Gdzie używany jest HTML
Klasyczne rozumienie, gdzie potrzebny jest HTML, to tworzenie stron internetowych.
W praktyce może to wystarczyć, ponieważ HTML umożliwia tworzenie głównych elementów witryny, menu (w tym wielopoziomowych), ustawianie tła, wstawianie tekstu, obrazów, audio, wideo, edytowanie czcionek i wiele więcej.
Istnieją jednak inne języki, które pozwalają na dodawanie ciekawszych i często potrzebnych elementów do strony internetowej:
- CSS ustala style dla całej witryny bez konieczności ciągłego dopisywania cech stylu poszczególnych elementów za pomocą tagów - na przykład koloru i czcionki tekstu.
- Język skryptowy umożliwia tworzenie i osadzanie mini-programów (skryptów) w witrynie, począwszy odbanalne rzeczy estetyczne (zmiana koloru linku po najechaniu myszką) a kończąc na funkcjonalnych (zbieranie adresów e-mail klientów, numerów telefonów).
- Dzięki PHP możesz stworzyć własną księgę gości lub system komentowania.
Również HTML jest używany do tworzenia wiadomości e-mail do dystrybucji.
Co to jest link
Pozwalają na przejście do innej strony internetowej, zarówno wewnątrz witryny, jak i na zewnątrz.
Linki HTML są powszechnie używane:
- Aby przejść do zewnętrznego zasobu internetowego.
- Aby poruszać się po stronach w witrynie.
- Aby przejść do formularzy Google.
Często wskazywany jest również link do źródła w HTML, zwłaszcza że kopiując materiał z innej witryny, należy określić autora. W przeciwnym razie kopiowanie bez podania źródła może podlegać definicjom naruszenia praw autorskich, kradzieży treści i odwrotu. Ponadto korzystanie z pożyczonych, nieunikatowych materiałów zmniejsza wydajność SEO, a wskazanie linku do źródła zmniejsza ryzyko.
Rodzaje linków
W klasycznym sensie link to adres zasobu internetowego, do którego można przejść, klikając go.
Oprócz tego są hiperłącza: tekst i obrazy. W takich przypadkach link HTML jest „ukryty” pod jakimś zdaniem (słowem) lub obrazem i aby go śledzić, musisz kliknąć tekst lub obraz.
Inne typy linków:
- Unvisited - link, który nie został jeszcze kliknięty podczas określonej sesji. Na przykład, jeśli skorzystałeś z tego łącza wczoraj, a następnie wyłączyłeś komputer i włączyłeś go ponownie dzisiaj, teraz łącze jest ponownie nieodwiedzane, ponieważ rozpoczęła się nowa sesja.
- Aktywny - w tym stanie link jest zapisywany przez bardzo krótki czas: odstęp między kliknięciem w link a podążaniem za nim.
- Odwiedzone - link, który został już odwiedzony przynajmniej raz w ciągu jednej sesji.
W przypadku zwykłych linków tekstowych, odwiedzane mają tendencję do zmiany koloru, chyba że określono inaczej.
Obraz z hiperłączem nie zmienia swojego wyglądu, niezależnie od tego, czy jest odwiedzany, czy nie.
Jak wstawić zwykły link
Wiele zasobów internetowych postrzega adres witryny jako łącze, natychmiast umożliwia kliknięcie i wyróżnienie kolorem. Na przykład, jeśli adres zostanie wysłany w komunikatorze lub e-mailem, klikając go, możesz przejść do serwisu.
W przypadku samodzielnego tworzenia witryny za pomocą HTML, musisz wstawić link za pomocą specjalnego tagu. Będzie to wyglądać tak: adres strony internetowej. Tekst łącza w HTML musi być określony w całości, z protokołem.
Jak wstawić hiperłącze tekstowe
Wcześniej zostało powiedziane, że hiperłącze tekstowe spełnia tę samą funkcję, co zwykły link, ale wygląda bardziej estetycznie: zamiast adresu witryny, który często jest niepotrzebnie długi, wskazane jest słowo lub fraza. Na przykład w zdaniu „Poszukaj informacji tutaj” możesz ukryć link wsłowo „tu”. Zostanie on podświetlony, a kliknięcie go przeniesie użytkownika do żądanej witryny.
Jak utworzyć łącze HTML zostało już omówione wcześniej. Hiperłącze tekstowe można wstawić za pomocą tego samego tagu. Jedyną różnicą jest to, że musisz określić między tagami tekst, pod którym link będzie ukryty: widoczny tekst.
Jak wstawić hiperłącze do obrazu
Tu jest trochę bardziej skomplikowane. Używamy tego samego tagu, ale zamiast tekstu musisz podać ścieżkę do obrazka.
Ścieżka to lokalizacja obrazu. Jeśli obraz (zdjęcie) znajduje się w usłudze udostępniania plików, musisz określić wszystkie foldery na ścieżce do obrazu za pomocą ukośnika. Jeśli to możliwe, możesz również dołączyć link do obrazu.
Aby oznaczyć
oprócz src stosowane są również inne atrybuty, które pozwalają dostosować wysokość, szerokość i położenie obrazu i wiele więcej. Niektóre z nich:
- Src - określa ścieżkę do obrazu.
- Lowsrc - identyczny z poprzednim atrybutem, ale określony dla obrazów o niskiej jakości.
- Wysokość - wysokość obrazu.
- Szerokość - szerokość.
- Alt - opis obrazu. Gdy najedziesz kursorem na zdjęcie lub obraz, pojawi się tekst określony w tym atrybucie.
- Border - określa grubość obramowania wokół obrazu.
Atrybuty są określone po tagu i są zawarte wjego skład. Po atrybucie musi następować jego wartość. Na przykład dla atrybutów „height” lub „width” (wysokość, szerokość) określa wysokość obrazu na stronie internetowej. Jednostką miary są piksele, chyba że określono inaczej.
Wygląda to tak: <a href="adres strony internetowej"
. Te atrybuty pomogą ustawić odpowiedni rozmiar obrazu. Border pomaga stworzyć niewidoczną ramkę wokół obrazu.
Powyższe atrybuty dotyczą osobno tagu wstawiania obrazu. Na przykład:.
Co to są linki kotwiczne
Tworzenie linków kotwicznych to bardzo przydatna umiejętność. Często istnieje potrzeba zaprojektowania strony internetowej z długim blokiem tekstu lub kilkoma podsekcjami na jednej stronie. W takim przypadku możesz od razu zacząć od listy linków do podsekcji tekstu lub strony internetowej, a po ich kliknięciu użytkownik przejdzie bezpośrednio do żądanej sekcji.
Tworzenie linków kotwicznych będzie wymagało większego użycia znaczników atrybutów niż inne typy linków.
Najpierw musisz ustawić ogólną wartość dla każdego bloku informacji lub podsekcji tekstu za pomocą atrybutu top, a następnie powiązać go z odpowiednim linkiem.
Ich funkcje są bardziej rozbudowane, dlatego zaleca się najpierw opanować tworzenie prostszych linków, a następnie przejść do tworzenia linków kotwicznych.
Wskazówki
Pomoc od doświadczonychprogramiści:
- Możesz sprawić, by informacje o łączu były wyświetlane po najechaniu kursorem w HTML. Do tego może się przydać atrybut alt, którego używamy również dla elementów graficznych.
- Możliwe jest stworzenie listy linków za pomocą HTML. W szczególności może to być przydatne w przypadku linków kotwiczących, a także wtedy, gdy trzeba utworzyć listę zasobów internetowych, do których można przejść bezpośrednio z bieżącej strony internetowej.
- Za pomocą CSS i JavaScript, a także niektórych funkcji HTML, możesz stworzyć inny wygląd linków tekstowych i hiperłączy niż zwykle. Na przykład, gdy najedziesz kursorem na link, może on zmienić jego kolor i powrócić do poprzedniego, gdy kursor jest od niego oddalony. Można to zrobić za pomocą niestandardowego skryptu JavaScript. Ponadto kolor linku można ustawić na inny niż niebieski w przypadku nieodwiedzonych lub fioletowy w przypadku odwiedzonych. To jest zadanie CSS.
- Nie nadużywaj linków. Strona internetowa z wieloma nieodpowiednimi linkami wygląda niechlujnie i niechlujnie.
- Upewnij się, że użytkownik rozumie, że hiperłącze z obrazem jest w rzeczywistości obrazem, a nie tylko obrazem.
Wniosek
Bardzo łatwo jest utworzyć łącze do strony w kodzie HTML. Ważne jest, aby przestrzegać wszystkich głównych punktów tego języka, ponieważ nawet mały błąd może doprowadzić do tego, że nie będzie rezultatu, a kod nie będzie działał.
