Zestaw zadań laboratoryjnych i praktycznych „Język HTML”. CSS dla początkujących: lekcja praktyczna

Zadania z podstaw HTML mają na celu wzmocnienie pracy z pisaniem następujące tematy: Struktura HTML, komentarze HTML, podstawowe znaczniki, podstawowe Atrybuty HTML. .

Zadania dla obrazków w HTML: wstawianie obrazka do HTML (kod obrazu HTML), Rozmiar HTML obrazy, wyrównanie obrazu... w HTML.

Zaawansowane przypisania HTML i CSS

Zadania HTML z Emmetem. Szybki układ, polecenia Emmeta (tzw. ściągawka Emmeta). Po wykonaniu zadań z wtyczką Emmet, szybkość tworzenia układu/rozwoju znacznie wzrośnie. .

Zadania dotyczące selektorów CSS. Selektory CSS: selektory klas CSS, selektory atrybutów CSS, sąsiadujące selektory CSS, kontekstowe selektory css, selektory podrzędne +w css, priorytet selektora. .

Aby zrozumieć złożone układy, ważne jest, jak działa pozycjonowanie CSS. Oto zadania do zrozumienia i pracy z nimi: pozycja bezwzględna, pozycja względna, pozycja ustalona i pozycja statyczna, właściwości CSS górny lewy dolny prawy róg. .

Zadania dotyczące układu formularza

Utwórz na stronie formularz uwierzytelniający, taki sam jak w Twitter Bootstrap (bez korzystania z tego frameworka). Na przykład jak w .

Utwórz formularz dyspozytora na stronie internetowej

Podłącz wtyczkę jQuery, aby wybrać datę/miesiąc z pola

Utwórz pole wyboru podobne do sieci społecznościowej.

Utwórz formularz rejestracyjny osoby odwiedzającej witrynę

Utwórz formularz podobny do tego, który sortuje produkty w Yandex.Market

Jednym z zadań projektanta układu jest pisanie kodu dla różnych przeglądarek. Kod, który sprawi, że strony będą wyglądać największa liczba przeglądarki są takie same lub tak podobne, jak to możliwe. .

Nowoczesne możliwości CSS pozwalają tworzyć wspaniałe rzeczy i pracować z tłem, kolorując je wypełnienie gradientowe. Mały zestaw zadań do animacji CSS.

Zadania dotyczące zapytań o media (strony mobilne). kreacja wersja mobilna Tworzenie stron internetowych jest ważną częścią umiejętności programistów stron internetowych. Zadania poświęcone są następującym tematom: utworzenie serwisu mobilnego, sprawdzenie wersji mobilnej serwisu. .

Zadania dotyczące układu układu psd i frameworków CSS. Układ strony internetowej oparty na układzie PSD to najważniejsza część pracy projektanta stron internetowych. Na lekcjach HTML przyglądamy się podstawowym krokom tworzenia układu z PSD do HTML. Zadania.

1.1. Utwórz na serwer lokalny Xampp w folderze htdocs znajduje się folder testowy test, znajdują się w nim foldery css, obrazy i strony, a także pusta strona główna Index.html naszej witryny testowej. Następnie w folderze stron utwórz pustą stronę internetową strona_1.html, a w folderze css dwa puste pliki css: style_1.css i style_2.css. Nie usuwaj w przyszłości folderu testowego, wszystkie ćwiczenia będziemy w nim wykonywać. W dokumentach HTML nie zapomnij podać kodowania utf-8 i tytułu strony „title”. Dla szybki dostęp Do strona główna, utwórz dla niego zakładkę w swojej przeglądarce. Ścieżka adresu do strony powinna wyglądać następująco: http://localhost/test/index.html. Pokaż rozwiązanie.

Rozwiązanie zadania nr 1.1

1.2. Utwórz ponownie kod strony internetowej pokazanej na rysunku. Użyj wewnętrznego arkusza stylów, selektorów elementów p i span, właściwości css koloru i szerokości. Ustaw szerokość akapitu na 300 pikseli. Używaj kolorów czerwonego i niebieskiego. Pokaż rozwiązanie.

Stan zadania nr 1.2

Zadania CSS p(kolor: czerwony; szerokość: 300px;) span(kolor: niebieski)

Rozwiązanie zadania nr 1.2

1.3. Użyj warunku drugiego zadania, ale umieść arkusz stylów w zewnętrznym pliku Style_1.css . Aby podłączyć zewnętrzny arkusz stylów, użyj elementu usługi „link”. Pokaż rozwiązanie.

Zadania CSS

Tekst akapitu powinien być w kolorze czerwonym. Ale nie, ponieważ... Zawartość elementu „span” powinna być niebieska.

Rozwiązanie zadania nr 1.3

1.4. Użyj warunku trzeciego zadania, ale podłącz zewnętrzny arkusz stylów za pomocą właściwości @import, umieszczając regułę w elemencie usługi „style”. Pokaż rozwiązanie.

Zadania CSS /* Możesz użyć różnych wpisów reguł */ /* @import "http://localhost/test/css/styles_1.css"; */ @import url("http://localhost/test/css/styles_1.css");

Tekst akapitu powinien być w kolorze czerwonym. Ale nie, ponieważ... Zawartość elementu „span” powinna być niebieska.

Rozwiązanie zadania nr 1.4

1,5. Użyj warunku drugiego problemu, ale umieść regułę akapitu w zewnętrznym pliku Style_1.css i regułę dla elementu „span” w zewnętrznym pliku Style_2.css. Połącz jeden z tych plików za pomocą elementu usługi „link”, a drugi za pomocą właściwości @import, umieszczając regułę w elemencie usługi „style”. We wszystkich czterech zadaniach wynik powinien być taki sam! Pokaż rozwiązanie.

Zadania CSS @import url("http://localhost/test/css/styles_1.css");

Tekst akapitu powinien być w kolorze czerwonym. Ale nie, ponieważ... Zawartość elementu „span” powinna być niebieska.

Rozwiązanie problemu nr 1.5

1.6. Poniżej znajduje się kod strony HTML oraz wygląd strony wyświetlanej przez przeglądarkę. Do strony podłączony jest zewnętrzny arkusz stylów, którego kod należy odtworzyć. Użyj selektorów identyfikatorów, klas i atrybutów. Pokaż rozwiązanie.

Zadania CSS

Niebieski „rozpiętość”.
Zielony „rozpiętość”.

Kod strony dla zadania nr 1.6

Wymagany wygląd strony w zadaniu nr 1.6

#p_1( kolor: czerwony; szerokość: 300px; ) .s_1( kolor: niebieski; ) span( kolor: zielony; )

Rozwiązanie zadania nr 1.6

1.7. Poniżej znajduje się kod strony HTML oraz wygląd strony wyświetlanej przez przeglądarkę. Do strony podłączony jest zewnętrzny arkusz stylów, którego kod należy odtworzyć. W regułach CSS dozwolone jest używanie wyłącznie selektorów kontekstowych, podrzędnych i sąsiadujących. Pokaż rozwiązanie.

CSS rzuca wyzwanie Orange „em”

Pierwsza czerwona linia akapitu.
Niebieski „rozpiętość”.

Kod strony dla zadania nr 1.7

Wymagany wygląd strony w zadaniu nr 1.7

Rozwiązanie zadania nr 1.7

1.8. Poniżej znajduje się kod strony HTML oraz wygląd strony wyświetlanej przez przeglądarkę. Do strony podłączony jest zewnętrzny arkusz stylów, którego kod należy odtworzyć. Użyj selektorów pseudoklas i pseudoelementów :hover , :visited , ::first-letter . W przypadku akapitu użyj zwykłego selektora elementów. Pokaż rozwiązanie.

Wyzwania CSS Kiedy najedziesz na mnie kursorem, zmieniam kolor na pomarańczowy.

Pierwsza czerwona linia akapitu.
Byłem już odwiedzany.

Kod strony dla zadania nr 1.8

Wymagany wygląd strony w zadaniu nr 1.8

P( kolor: czerwony; szerokość: 300px; ) em:hover( kolor: pomarańczowy; ) p::pierwsza litera ( kolor: niebieski; ) a:odwiedzone ( kolor: zielony; )

Rozwiązanie zadania nr 1.8

1.9. Który selektor ma większą specyficzność: p em(...) czy p.class(...), #m_d(...) czy em.m_cl(...), div p#my_id span(... ) lub div span#s_id(...), div>div.my_class p.red_color span:hover(...) lub div p+div p.green_color span(...). Pokaż rozwiązanie.

Ustalamy specyfikę i porównujemy. p em(...) em.m_cl(...), ponieważ (1,0,0)>(0,1,1); div p#my_id span(...) div.my_class p.red_color span:hover(...) > div p+div p.green_color span(...), ponieważ (0,4,4)>(0,2,5).

Rozwiązanie zadania nr 1.9

§2. Właściwości CSS dla tekstu, czcionki, list, tabel i formularzy

2.1. Poniżej znajduje się kod strony HTML oraz wygląd strony wyświetlanej przez przeglądarkę. Do strony podłączony jest zewnętrzny arkusz stylów, którego kod należy odtworzyć. Ustaw szerokość (szerokość) akapitów odpowiednio na 500px, tło (kolor tła) ustaw na żółty i fioletowy (fiolet), odległość pomiędzy słowami odpowiednio 3px i 12px, odległość pomiędzy poszczególnymi literami - 1px i 2px, wysokość linii - 1.1em i 1.6em , wcięcie pierwszego wiersza - 1% i 3% . W drugim akapicie tekst powinien być wyrównany do prawej strony. Nie zapomnij przekreślić (podkreślić) odpowiednich linii. Porównaj wyniki formatowania obu akapitów. Pokaż rozwiązanie.

Zadania CSS

Pierwsze zdanie akapitu.

Pierwsze zdanie akapitu. Drugie dłuższe zdanie akapitu. Trzecie i ostatnie zdanie akapitu.

Kod strony dla zadania nr 2.1

Wymagany wygląd strony w zadaniu nr 2.1

P_1( szerokość: 500 pikseli; kolor tła: żółty; odstępy między wyrazami: 3 piksele; odstępy między literami: 1 piksele; wysokość linii: 1,1 em; wcięcie tekstu: 1%; ) #p_2 (dekoracja tekstu: przejście przez linię) .p_3( szerokość: 500 pikseli; kolor tła: fioletowy; odstępy między wyrazami: 12 pikseli; odstępy między literami: 2 piksele; wysokość linii: 1,6 em; wcięcie tekstu: 3%; wyrównanie tekstu: do prawej; ) #p_4( tekst -dekoracja: podkreślenie ;)

Rozwiązanie zadania nr 2.1

2.2. Poniżej znajduje się kod strony HTML oraz wygląd strony wyświetlanej przez przeglądarkę. Do strony podłączony jest zewnętrzny arkusz stylów, którego kod należy odtworzyć. Ustaw szerokość (szerokość) akapitów na 500px, tło (kolor tła) odpowiednio na żółty i fioletowy (fioletowy). W pierwszym akapicie użyj czcionki Arial, a w drugim – Times New Roman. Ustaw rozmiar czcionki w obu akapitach na 1em. W razie potrzeby użyj właściwości czcionki-wariantu, czcionki-wagi i stylu czcionki. Porównaj wynik formatowania tekstu z wynikiem formatowania w zadaniu 2.1. Pokaż rozwiązanie.

Zadania CSS

Pierwsze zdanie akapitu. Drugie dłuższe zdanie akapitu. Trzecie i ostatnie zdanie akapitu.

Kod strony dla zadania nr 2.2

Wymagany wygląd strony w zadaniu nr 2.2

P_1( szerokość: 500px; kolor tła: żółty; rodzina czcionek: arial; rozmiar czcionki: 1em; ) #p_2( odmiana czcionki: kapitaliki; ) .p_3( szerokość: 500px; kolor tła: fioletowy; rodzina czcionek: „Times New Novel”; rozmiar czcionki: 1em; grubość czcionki: pogrubiona; ) #p_4( styl czcionki: kursywa; )

Rozwiązanie zadania nr 2.2

2.3. Poniżej znajduje się kod strony HTML oraz wygląd strony wyświetlanej przez przeglądarkę. Do strony podłączony jest zewnętrzny arkusz stylów, którego kod należy odtworzyć. Ustaw szerokość (szerokość) list na 500px, tło (kolor tła) odpowiednio na żółty i fioletowy (fioletowy). W razie potrzeby użyj właściwości typu listy i stylu listy. Porównaj wyniki formatowania obu list. Pokaż rozwiązanie.

Zadania CSS

Używamy typu znacznika dziesiętnego.

Znaczniki umieszczamy poza listą.

Używamy typu znacznika kwadratowego.

Kod strony dla zadania nr 2.3

Wymagany wygląd strony w zadaniu nr 2.3

List_1 ( szerokość: 500 pikseli; kolor tła: żółty; typ stylu listy: dziesiętny; pozycja w stylu listy: na zewnątrz; ) .list_2 ( szerokość: 500 pikseli; kolor tła: fioletowy; typ stylu listy: kwadrat; pozycja w stylu listy: wewnątrz; )

Rozwiązanie zadania nr 2.3

2.4. Poniżej znajduje się kod strony HTML oraz wygląd strony wyświetlanej przez przeglądarkę. Do strony podłączony jest zewnętrzny arkusz stylów, którego kod należy odtworzyć. Użyj właściwości caption-side , border-collapse border-spacing , pustych komórek . Porównaj wynik formatowania obu tabel. Pokaż rozwiązanie.

Zadania CSS

Tabela nr 1

Komórka 1.1	Komórka 1.2
Komórka 2.1	Komórka 2.2

Tabela nr 2

Komórka 1.1	Komórka 1.2
	Komórka 2.2

Kod strony dla zadania nr 2.4

Wymagany wygląd strony w zadaniu nr 2.4

Tabela_1(strona podpisu: góra; zwinięcie obramowania: zwiń; ) .table_2(strona podpisu: dół; zwinięcie obramowania: oddzielne; odstępy między obramowaniami: 5 pikseli; puste komórki: ukryj; )

Rozwiązanie zadania nr 2.4

§3. Ustawianie rozmiarów, obramowań, dopełnień i marginesów elementów

3.1. Poniżej znajduje się kod strony HTML oraz wygląd strony wyświetlanej przez przeglądarkę. Do strony podłączony jest zewnętrzny arkusz stylów, którego kod należy odtworzyć. Ustaw szerokość pierwszego akapitu na 400 pikseli, drugiego na 300 pikseli. Ustaw wysokość pierwszego akapitu na 10vh, drugiego na 200px. W drugim akapicie ustaw minimalny limit szerokości na 400 pikseli i maksymalny limit wysokości na 100 pikseli. Użyj właściwości szerokość , wysokość , min-width , max-height . Zwróć uwagę na końcowe wyniki szerokości i wielkości drugiego akapitu wynikające z zastosowanych ograniczeń. Pokaż rozwiązanie.

Zadania CSS

Szerokość akapitu wynosi 400 pikseli, wysokość wynosi 10% wysokości obszaru wyświetlania okna przeglądarki.

Szerokość akapitu będzie wynosić 400 pikseli, ponieważ... szerokość jest mniejsza niż minimalna szerokość, a wysokość wynosi 100 pikseli, ponieważ wysokość przekracza maksymalną wysokość.

Kod strony dla zadania nr 3.1

Wymagany wygląd strony w zadaniu nr 3.1

P_1( kolor tła: żółty; szerokość: 400px; wysokość: 10vh; ) .p_2( kolor tła: fioletowy; minimalna szerokość: 400px; maksymalna wysokość: 100px; szerokość: 300px; wysokość: 200px; )

Rozwiązanie problemu nr 3.1

3.2. W warunku zadania 3.1 prezentowany jest kod strony HTML, a poniżej wygląd strony wyświetlanej przez przeglądarkę. Do strony podłączony jest zewnętrzny arkusz stylów, którego kod należy odtworzyć. Wykorzystaj wynik zadania 3.1, dodając go do arkusza stylów dodatkowe właściwości, które wyznaczają odpowiednie granice akapitu: border , border-top , border-bottom . Ustaw szerokość wszystkich obramowań na 4px. Pokaż rozwiązanie.

Wymagany wygląd strony w zadaniu nr 3.2

P_1(kolor tła: żółty; szerokość: 400px; wysokość: 10vh; obramowanie: jednolicie czerwone 4px; górne obramowanie: niebieskie kropkowane; dół obramowania: niebieski przerywany; ) .p_2(kolor tła: fioletowy; minimalna szerokość: 400px; maksymalna wysokość: 100px; szerokość: 300px; wysokość: 200px; obramowanie: ciągłe zielone 4px; )

Rozwiązanie zadania nr 3.2

3.3. W warunku zadania 3.1 prezentowany jest kod strony HTML, a poniżej wygląd strony wyświetlanej przez przeglądarkę. Do strony podłączony jest zewnętrzny arkusz stylów, którego kod należy odtworzyć. Skorzystaj z wyników problemów 3.1 i 3.2, dodając do arkusza stylów dodatkowe właściwości, które ustawiają zaokrąglenie odpowiednich narożników pierwszego akapitu i zewnętrznych krawędzi drugiego akapitu: border-radius , border-bottom-right-radius , promień-obramowanie-dolny-lewy-promień, kontur, przesunięcie konturu. Ustaw zaokrąglenie obramowania na 1em, a dolne rogi na 2em. Ustaw odległość między krawędzią wewnętrzną i zewnętrzną na 2 piksele. Ustaw szerokość zewnętrznej krawędzi na 4px. Pokaż rozwiązanie.

Wymagany wygląd strony w zadaniu nr 3.3

P_1( kolor tła: żółty; szerokość: 400 pikseli; wysokość: 10vh; obramowanie: jednolicie czerwone 4 piksele; górne obramowanie: niebieskie kropkowane; dolne obramowanie: niebieska przerywana; promień obramowania: 1em; promień obramowania dolnego prawego rogu: 2em; obramowanie-dolny-lewy-promień: 2em; ) .p_2( kolor tła: fioletowy; minimalna szerokość: 400 pikseli; maksymalna wysokość: 100 pikseli; szerokość: 300 pikseli; wysokość: 200 pikseli; obramowanie: jednolicie zielone 4 piksele; kontur: jednolity niebieski 4 piksele; przesunięcie konturu: 2 piksele; )

Rozwiązanie zadania nr 3.3

3.4. W warunku zadania 3.1 prezentowany jest kod strony HTML, a poniżej wygląd strony wyświetlanej przez przeglądarkę. Do strony podłączony jest zewnętrzny arkusz stylów, którego kod należy odtworzyć. Skorzystaj z wyników zadań 3.1, 3.2 i 3.3, dodając do arkusza stylów dodatkowe właściwości, które ustalają wewnętrzne i zewnętrzne wcięcia akapitów: padding, padding-left, margines, margines-góra. Ustaw dopełnienie w obu akapitach na 0,5 em, a następnie ponownie zdefiniuj ich dopełnienie na 0,8 em. Ustaw margines na 30px, ale w drugim akapicie margines na górze zastąp wartość 50px . Porównaj wyniki wszystkich czterech problemów. Pokaż rozwiązanie.

Wymagany wygląd strony w zadaniu nr 3.4

P_1( kolor tła: żółty; szerokość: 400 pikseli; wysokość: 10vh; obramowanie: jednolicie czerwone 4 piksele; górne obramowanie: niebieskie kropkowane; dolne obramowanie: niebieska przerywana; promień obramowania: 1em; promień obramowania dolnego prawego rogu: 2em; promień obramowania-dolnego-lewego-promień: 2em; dopełnienie: 0,5em; dopełnienie-lewe: 0,8em; margines: 30px; ) .p_2(kolor tła: fioletowy; minimalna szerokość: 400px; maksymalna wysokość: 100px; szerokość: 300 pikseli; wysokość: 200 pikseli; obramowanie: jednolity zielony 4 piksele; kontur: jednolity niebieski 4 piksele; przesunięcie konturu: 2 piksele; dopełnienie: 0,5 em; dopełnienie po lewej stronie: 0,8 em; margines: 30 pikseli; górny margines: 60 pikseli; )

Rozwiązanie zadania nr 3.4

§4. Ustawianie koloru i tła za pomocą animacji

4.1. Poniżej znajduje się kod strony HTML oraz wygląd strony wyświetlanej przez przeglądarkę. Do strony podłączony jest zewnętrzny arkusz stylów, którego kod należy odtworzyć. Skopiuj obraz teczki do folderu obrazy, który znajduje się w utworzonym wcześniej przez nas folderze testowym na serwerze lokalnym (jeśli go usunąłeś, to spójrz na stan zadania nr 1.1 na początku księgi zadań i utwórz wszystko jeszcze raz). Tekst pierwszego akapitu powinien być czerwony, tło powinno być żółte, a szerokość akapitu powinna wynosić 300 pikseli. Szerokość drugiego akapitu powinna wynosić 300px, ustaw tło na fioletowe. Dodaj także zdjęcie w tle, którego nie należy powtarzać, wymiary powinny wynosić 20% szerokości i 40% wysokości akapitu, położenie początkowe należy określić współrzędnymi x =15px i y =15px. Wybierz jako tło tylko obszar zawartości akapitu. Pokaż rozwiązanie.

Zadania CSS

Tekst tego akapitu powinien być czerwony, a tło żółte. Szerokość akapitu powinna wynosić 300 pikseli.

Szerokość akapitu powinna wynosić 300px, tło powinno być fioletowe. Obrazu nie należy powtarzać, wymiary powinny wynosić 20% szerokości i 40% wysokości akapitu. Pozycję wyjściową należy określić współrzędnymi x=15px i y=15px. Wybierz jako tło tylko obszar zawartości akapitu.

Kod strony dla zadania nr 4.1

Wymagany wygląd strony w zadaniu nr 4.1

Tło_1( kolor: czerwony; kolor tła: żółty; ) .background_2( kolor tła: fioletowy; obraz tła: url("http://localhost/test/images/cabinet.png"); powtórzenie tła: nie -powtórz; pozycja tła: 15 pikseli 15 pikseli; rozmiar tła: 20% 40%; klip tła: pole zawartości; ) .border_1 ( dopełnienie: 15 pikseli; szerokość: 300 pikseli; obramowanie: pełne 2 piksele zielone; )

Rozwiązanie zadania nr 4.1

4.2. Poniżej znajduje się kod strony HTML oraz wygląd strony wyświetlanej przez przeglądarkę. Do strony podłączony jest zewnętrzny arkusz stylów, którego kod należy odtworzyć. Tekst pierwszego akapitu powinien być czarny, a tło powinno mieć liniowy gradient od czerwieni do biały. Szerokość akapitu powinna wynosić 300px, a jego wysokość 150px. Szerokość drugiego akapitu powinna wynosić 300px, a jego wysokość 150px. Tło powinno mieć gradient promieniowy od zielonego do białego. Elipsa gradientu powinna mieć promienie 250px i 280px, a środek powinien znajdować się w punkcie o współrzędnych x =100px i y =180px. Pokaż rozwiązanie.

Zadania CSS

Tekst tego akapitu powinien być czarny, a tło powinno stanowić liniowy gradient od czerwieni do bieli. Szerokość akapitu powinna wynosić 300px, a jego wysokość 150px.

Szerokość akapitu powinna wynosić 300px, a jego wysokość 150px. Tło powinno mieć gradient promieniowy od zielonego do białego. Elipsa gradientu powinna mieć promienie 250px i 280px, a środek powinien znajdować się w punkcie o współrzędnych x=100px i y=180px.

Kod strony dla zadania nr 4.2

Wymagany wygląd strony w zadaniu nr 4.2

Tło_1( kolor: czarny; obraz tła: gradient liniowy (90deg, #ff0000, #ffffff); ) .background_2( tło: gradient radialny (250px 280px przy 100px 180px, #00ff00, #ffffff); ) .border_1( dopełnienie: 15px; szerokość: 300px; wysokość: 150px; obramowanie: pełne 3px niebieskie; )

Rozwiązanie zadania nr 4.2

4.3. Poniżej znajduje się kod strony HTML oraz kod zewnętrznego arkusza stylów style_1.css. Wpisz je do Notepad++ i poeksperymentuj, zmieniając wartości właściwości animacji.

Zadania CSS

Kod strony HTML dla zadania nr 4.3

Tło_1 (wypełnienie: 0 pikseli; szerokość: 450 pikseli; wysokość: 100 pikseli; obramowanie: pełne 3 piksele czerwone; nazwa animacji: przykład_1; opóźnienie animacji: 1 s; czas trwania animacji: 4 s; liczba iteracji animacji: nieskończona; kierunek animacji: odwróć; funkcja synchronizacji animacji: łatwość; tryb wypełniania animacji: do tyłu; ) @keyframes example_1( 0%( tło: #ff0000; wysokość: 0px; ) 100% ( tło: #0000ff; wysokość: 200px; ) )

Kod zewnętrznego arkusza stylów dla zadania nr 4.3

4.4. Poniżej znajduje się kod strony HTML oraz kod zewnętrznego arkusza stylów style_2.css. Wpisz je do Notepad++ i poeksperymentuj, zmieniając wartości właściwości tranzytowych.

Tworzenie efektów przejścia

Kod strony HTML dla zadania nr 4.4

Tło_1 (wypełnienie: 10 pikseli; szerokość: 100 pikseli; wysokość: 100 pikseli; obramowanie: pełne 3 piksele niebieskie; kolor tła: #ff0000; właściwość przejścia: szerokość, kolor tła; opóźnienie przejścia: 0,2 s; czas trwania przejścia: 2 s; funkcja pomiaru czasu przejścia: łatwość; ) p:hover(kursor: wskaźnik; kolor tła: #0000ff; szerokość: 450px;)

Kod zewnętrznego arkusza stylów dla zadania nr 4.4

§5. Wyświetlanie elementów w dokumencie

5.1. Poniżej znajduje się kod strony HTML oraz kod zewnętrznego arkusza stylów style_2.css. Wpisz je w Notepad++. Zwróć uwagę, jak zachowują się akapity podczas przewijania strony i jak zmienia się wygląd elementu „span”, gdy najedziesz na niego myszką, w wyniku czego zmienia się wartość zastosowanej do niego właściwości display.

Zadania CSS

Zmiana wyświetlacza

pozycja: stała;

pozycja: absolutna;

Kod strony HTML dla zadania nr 5.1

Div_0( dopełnienie: 10 pikseli; szerokość: 200 pikseli; wysokość: 200 pikseli; obramowanie: pełne 3 piksele pomarańczowe; ) span:hover (kursor: wskaźnik; wyświetlacz: blok; ) .div_1( dopełnienie: 10 pikseli; szerokość: 200 pikseli; wysokość: 600 pikseli; obramowanie : jednolity pomarańczowy 3px; tło: gradient liniowy (180deg, #0000ff, #ffffff); pozycja: stała; góra: 250px; ) .div_2( dopełnienie: 10px; szerokość: 200px; wysokość: 100px; obramowanie: pełne 3px czerwone; tło: gradient liniowy (90 stopni, #0000ff, #ffffff); pozycja: bezwzględna; góra: 1100 pikseli; lewa: 0 pikseli; )

Kod zewnętrznego arkusza stylów dla zadania nr 5.1

5.2. Poniżej znajduje się kod strony HTML oraz wygląd strony wyświetlanej przez przeglądarkę. Do strony podłączony jest zewnętrzny arkusz stylów, którego kod należy odtworzyć. Wymagane właściwości elementów pokazano na samych rysunkach. Pokaż rozwiązanie.

Zadania CSS Dla głównego elementu div ustawione jest stałe położenie, górne przesunięcie wynosi 30 pikseli, lewe przesunięcie wynosi 35 pikseli, szerokość elementu div wynosi 300 pikseli, wysokość elementu div wynosi 400 pikseli, wewnętrzne dopełnienie wynosi 15 pikseli.

div_2 Dla drugiego elementu div szerokość wynosi 70 pikseli, wysokość 50 pikseli, gradient (35 pikseli 35 pikseli przy 10 pikseli 10 pikseli, #00ffff, #ffffff), dopełnienie wynosi 5 pikseli, szerokość obramowania wynosi 2 piksele. Unosi się po lewej stronie.

div_3 Dla trzeciego elementu div szerokość wynosi 70 pikseli, wysokość 50 pikseli, gradient (45 stopni, #0000ff, #ffffff), dopełnienie wynosi 5 pikseli, szerokość obramowania wynosi 2 piksele. Unosi się w prawo. Po najechaniu kursorem zmienia przezroczystość na 0,3.

Kod strony dla zadania nr 5.2

Wymagany wygląd strony w zadaniu nr 5.2

Div_1( dopełnienie: 15 pikseli; szerokość: 300 pikseli; wysokość: 400 pikseli; obramowanie: przerywana 5 pikseli #00ff00; pozycja: stała; góra: 30 pikseli; lewa: 35 pikseli; ) .div_3:hover( kursor: wskaźnik; krycie: 0,3; ) .div_2 ( dopełnienie: 5 pikseli; szerokość: 70 pikseli; wysokość: 50 pikseli; obramowanie: pełne 2 piksele pomarańczowe; tło: radial-gradient (35 pikseli 35 pikseli przy 10 pikseli 10 pikseli, #00ffff, #ffffff); float: lewy; ) .div_3( dopełnienie: 5 pikseli; szerokość: 70 pikseli; wysokość: 50 pikseli; obramowanie: kropkowane 2 piksele czerwone; tło: gradient liniowy (45 stopni, #0000ff, #ffffff); pływak: prawy; )

Rozwiązanie zadania nr 5.2

5.3. Poniżej znajduje się kod strony HTML oraz wygląd strony wyświetlanej przez przeglądarkę. Do strony podłączony jest zewnętrzny arkusz stylów, którego kod należy odtworzyć. Wymagane właściwości elementów pokazano na samych rysunkach. Pokaż rozwiązanie.

Zadania CSS Dla głównego elementu div ustawione jest pozycjonowanie bezwzględne, górne przesunięcie wynosi 30 pikseli, lewe przesunięcie wynosi 35 pikseli, szerokość elementu div wynosi 500 pikseli, wysokość elementu div wynosi 200 pikseli, wewnętrzne dopełnienie wynosi 15 pikseli.

Dla drugiego elementu div szerokość wynosi 200 pikseli, wysokość wynosi 100 pikseli, dopełnienie wynosi 5 pikseli, szerokość obramowania wynosi 2 piksele.Pływa po lewej stronie.przepełnienie: przewijanie Dla trzeciego elementu div szerokość wynosi 200 pikseli, wysokość wynosi 100 pikseli, dopełnienie wynosi 5 pikseli, szerokość obramowania wynosi 2 piksele. Płynie po prawej stronie. przepełnienie: auto

Kod strony dla zadania nr 5.3

Wymagany wygląd strony w zadaniu nr 5.3

Div_1( dopełnienie: 10 pikseli; szerokość: 500 pikseli; wysokość: 200 pikseli; obramowanie: przerywana 5 pikseli #0000ff; kolor tła: żółty; pozycja: bezwzględna; góra: 30 pikseli; po lewej: 35 pikseli; ) .div_2( dopełnienie: 5 pikseli; szerokość: 200 pikseli ; wysokość: 100 pikseli; obramowanie: pełne 2 piksele niebieskie; pływak: lewy; przepełnienie: przewijanie; ) .div_3( dopełnienie: 5 pikseli; szerokość: 200 pikseli; wysokość: 100 pikseli; obramowanie: kropkowane 2 piksele niebieskie; pływak: prawo; przepełnienie: auto; )

Rozwiązanie zadania nr 5.3

§6. @-zasady. Wstawianie treści. Wydrukuj dokument.

6.1. Poniżej znajduje się kod strony HTML oraz wygląd strony wyświetlanej przez przeglądarkę. Do strony podłączony jest zewnętrzny arkusz stylów, którego kod należy odtworzyć. Aby utworzyć liczniki dla treści dokumentu i elementu h2 należy skorzystać z właściwości counter-reset, a wartości liczników wstawić korzystając z właściwości content i licznik-inkrementacji. Pokaż rozwiązanie.

Wyzwania CSS Wprowadzenie do HTML Czym jest HTML? Wyświetlanie dokumentu internetowego w przeglądarce. Pojęcie znacznika HTML i jego składnia.
Formatowanie tekstu Elementy blokowe i wbudowane. Dzielenie tekstu na akapity. Stosowanie nagłówków.

Kod strony dla zadania nr 6.1

Wymagany wygląd strony w zadaniu nr 6.1

Treść (reset licznika: parag_1; /* Utwórz licznik dla treści dokumentu */ ) h2(reset licznika: parag_2; /* Utwórz licznik dla nagłówka „h2” */ ) /* Zlicz wszystkie „h2” " w elemencie "body" */ /* Przed każdym "h2" wstaw treść: linia+bieżąca wartość licznika+linia */ h2:before(przyrost licznika: parag_1 1; treść: "§" licznik(parag_1) ". "; ) /* Zlicz element "h2" wszystkie "h3" */ /* Wstaw treść przed każdym "h3": bieżąca wartość licznika parag_1+linia+bieżąca wartość licznika parag_2+linia */ h3:przed(przyrost licznika: parag_2 1; treść: licznik(parag_1) "." licznik(parag_2) "."; )

Rozwiązanie zadania nr 6.1

§7. Praktyczny układ elementy witryny w formacie HTML i CSS

7.1.1 Pobierz kod samouczka dla adaptacyjnego szkieletu strony, przestudiuj go w komentarzach, a następnie zaprojektuj go samodzielnie.

7.1.2 Pobierz kod samouczka dla adaptacyjnej struktury strony, przestudiuj go, korzystając z komentarzy, a następnie zaprojektuj go samodzielnie. Porównaj z pierwszą opcją.

7.1.3 Pobierz kod samouczka dla adaptacyjnego środowiska strony, przestudiuj go, korzystając z komentarzy, a następnie zaprojektuj go samodzielnie. Porównaj z poprzednimi opcjami.

7.2.1 V kod edukacyjny, który można pobrać, pokazuje, jak utworzyć boczną nawigację umożliwiającą przewijanie strony w górę lub w dół. Nie ma komentarzy, ale kodu jest niewiele, więc zrozumienie go nie będzie zbyt trudne. Przestudiuj przykład, a następnie wykonaj go według własnego uznania.

7.2.2 Korzystając z kodu z poprzedniego przykładu utwórz przycisk „Powrót do góry” na dole strony. Usuń boczną nawigację. Jeśli nie udało Ci się wykonać zadania, spójrz na rozwiązanie, a następnie samodzielnie wpisz kod.

7.2.3 Poradnik do pobrania pokazuje, jak utworzyć przycisk „Powrót do góry” z boku witryny, który pojawia się po przewinięciu strony o określoną liczbę, np. pikseli. Komentarzy jest niewiele, ale kodu jest niewiele, więc zrozumienie go nie będzie trudne. Przestudiuj przykład, a następnie wykonaj go według własnego uznania.

7.3.1 Utwórz menu poziome pokazany na rysunku. Użyj do tego listy, umieszczając łącza w elementach listy. Aby elementy wyglądały jak linia, przekonwertuj je na elementy wbudowane. Po najechaniu myszką elementy menu, powinny zmienić kolor na czarny. Możesz pobrać rozwiązanie. Zmień menu na pionowe. Aby usunąć numery pozycji, użyj odpowiedniej właściwości dla znaczników list (zobacz dokumentację CSS).

Wymagany wygląd menu zadań nr 7.3.1

7.3.2 Przestudiuj poniższy kod menu rozwijanego, a następnie wpisz go samodzielnie.

7.3.3 Przestudiuj następujący kod pionowego menu rozwijanego menu wielopoziomowe, a następnie wpisz go samodzielnie.

7.3.4 Przestudiuj poniższy kod dla poziomego, płynnego menu rozwijanego, a następnie wpisz go samodzielnie.

Wykonanie serwisu edukacyjnego nr 1

7.4.1 Najpierw przejrzyj strony serwisu edukacyjnego, pobierz i dokładnie przestudiuj jego kod, a następnie samodzielnie zaprojektuj witrynę (bez komentarzy, tylko kod).

Layout serwisu edukacyjnego nr 2

7.5.1 Aby uzyskać dodatkową praktykę w zakresie układu strony internetowej, jeszcze jedno studium przypadku stronę, pobierz ją i przestudiowaj z komentarzy jej kod, a następnie korzystając z gotowego układu i szablonów graficznych samodzielnie zaprojektuj witrynę.
Spróbuj samodzielnie utworzyć arkusz stylów dla wysokich rozdzielczości. Jeśli pracujesz na laptopie, to aby symulować wyższe rozdzielczości, zmień rozdzielczość w zapytaniach o media na przykład z 1366px na 1266px, aby działał arkusz stylów dla dużych rozdzielczości ekranu. Tworząc arkusz stylów, użyj współczynnika rozmiaru 1,3. A następnie spójrz na wynik wyświetlania w przeglądarce i dostosuj.
Rozmiary obrazów można zmieniać w edytorze graficznym lub rozciągać przy użyciu odpowiedniej właściwości CSS (patrz przykład i odnośnik).

Tylko dla abonentów

Reg.ru: domeny i hosting

Największy rejestrator i dostawca usług hostingowych w Rosji.

Ponad 2 miliony nazw domen w obsłudze.

Promocja, poczta domenowa, rozwiązania biznesowe.

Wyboru dokonało już ponad 700 tysięcy klientów na całym świecie.

*Najedź myszą, aby wstrzymać przewijanie.

Powrót do przodu

30 dobre praktyki w CSS dla początkujących

CSS to język używany w pewnym momencie przez prawie każdego programistę. Chociaż czasami uważamy to za oczywiste, jest to jednak potężne narzędzie i ma wiele zróżnicowanych zastosowań, które pomagają w rozwoju. jakość projektu(lub skomplikować ten proces). Poniżej znajduje się 30 dobrych rekomendacji, które pomogą Ci napisać poprawny i kompetentny kod, unikając wielu typowych błędów.

1. Zadbaj o czytelność

Łatwa czytelność pliku CSS jest bardzo ważna, choć wiele osób nie docenia tego punktu. Dobra czytelność pozwala w przyszłości uprościć pracę z nim, przy wsparciu strony, ponieważ wielokrotnie szybciej znajdziesz potrzebne elementy. Pamiętaj również, że Twój plik może wymagać sprawdzenia i poprawienia przez kogoś innego.

Notatka
Pisząc pliki CSS, większość programistów dzieli się na dwie grupy, dwie skrajności.

Grupa 1: Wszystko w jednej linii

SomeDiv (tło: czerwone; dopełnienie: 2em; obramowanie: 1px jednolity czarny;)

Grupa 2: Każdy styl ma osobną linię

SomeDiv (tło: czerwone; dopełnienie: 2em; obramowanie: 1px jednolity czarny;)

Tak naprawdę obie praktyki są całkiem dobre, chociaż nieporozumienia pomiędzy przedstawicielami tych grup nie są rzadkością! Tylko pamiętaj - musisz wybrać opcję, na którą chcesz patrzeć. To wszystko.
Notatka

2. Zrób to w całości

Oprócz zwiększenia czytelności kodu, zadbaj o jego większą spójność. Powinieneś zacząć rozwijać swój własny „podjęzyk” CSS, który pozwoli ci trzymać się określonego stylu nazewnictwa. Istnieje pewna liczba klas, które tworzę prawie zawsze i za każdym razem nadaję im te same nazwy. Ja na przykład używam .caption-right aby wyrównać obrazy do prawej strony.

Zastanów się, czy użyjesz myślników i podkreśla w nazwach i identyfikatorach klas oraz w jakich przypadkach byś to zrobił. Kiedy zaczniesz tworzyć własne standardy CSS, znacznie zbliżysz się do bycia profesjonalistą CSS.

3. Zacznij od frameworka

Wiele osób uważa, że nie należy używać frameworków CSS, ale ja uważam, że jeśli ktoś poświęcił czas i stworzył program, który może przyspieszyć proces rozwoju, to po co wymyślać koło na nowo? Wiem, że nie wszędzie należy stosować frameworki, jednak w wielu przypadkach ich użycie jest w pełni uzasadnione.

Wielu projektantów tworzy własne frameworki w trakcie pracy. Jest to również świetny pomysł, aby zachować spójność kodu we wszystkich projektach.

Notatka
Nie zgadzam się. Frameworki CSS to rzecz niezbędna, ale tylko dla nielicznych, dla tych, którzy potrafią dobrze z nich korzystać.

„To nie tyle kwestia wynalezienia koła na nowo, co raczej zrozumienia, jak to działa”.

Jeśli dopiero zaczynasz rozumieć kaskadowe arkusze stylów, zalecałbym trzymanie się z daleka od różnych frameworków przez co najmniej rok. W przeciwnym razie po prostu się zdezorientujesz. Najpierw naucz się CSS, a potem zoptymalizuj swoją pracę z tym językiem.
Notatka

4. Użyj zerowania

Większość frameworków CSS ma wbudowany nullyfikator stylu, ale jeśli nie zamierzasz go używać, możesz skorzystać z innych nullyfikatorów. Zresetowanie stylów pozwala uniknąć wielu problemów z nierównym wyświetlaniem różne przeglądarki, ustawienie jasnych parametrów rozmiarów czcionek, nagłówków, marginesów zewnętrznych i wewnętrznych itp. To „zerowanie” pozwala uzyskać ten sam obraz we wszystkich przeglądarkach.

Oto linki do najpopularniejszych resetowań: MeyerWeb, reset programisty Yahoo. Alternatywnie możesz wymyślić własny „niwelator”, opierając się na poniższych informacjach.

5. Uporządkuj pliki stylów od góry do dołu

Zawsze warto uporządkować plik CSS, aby móc szybko znaleźć potrzebny fragment kodu. Zalecam zastosowanie podejścia odgórnego, które polega na zbudowaniu arkusza stylów w kolejności, w jakiej style są stosowane na stronie. Np:

1. Klasy ogólne (treść, a, p, h1, itd.) 2. #header 3. #nav-menu 4. #main-content

Nie zapomnij dodać komentarzy do każdej sekcji!

/****** główna treść *********/ style przejdź tutaj... /****** stopka ***********/ style przejdź tutaj...

6. Elementy grupowe

Często elementy mogą mieć nakładające się, wspólne style. Zamiast przepisywać istniejący kod, lepiej po prostu pogrupować elementy. Na przykład nagłówki h1, h2 I h3 może mieć tę samą czcionkę i kolor:

H1, h2, h3 (rodzina czcionek: tahoma, kolor: #333)

7. Najpierw utwórz znaczniki HTML

Wielu programistów tworzy plik CSS równolegle z tworzeniem znaczników HTML. Wydaje się to logiczne, ale nadal możesz zaoszczędzić dużo czasu, jeśli najpierw zrozumiesz HTML, a dopiero potem style. Takie podejście pozwala myśleć o stronie jako o całości, zastanawiać się, gdzie zastosować jakie style i uzyskać bardziej spójny plik stylów z góry na dół.

8. Jeśli to konieczne, zastosuj wiele klas do elementu

Czasami lepiej jest zastosować kilka klas do elementu na raz. Załóżmy, że masz pojemnik div kogo chcesz zapytać pływać: prawda i masz już zajęcia .Prawidłowy w pliku stylów, który wszystko wyrównuje. Możesz po prostu dodać kolejną klasę do swojego kontenera div:

Możesz dodać dowolną liczbę klas, oddzielając je spacjami.

Notatka
Zachowaj szczególną ostrożność, używając nazw takich jak lewy I Prawidłowy. Wyobraź sobie, że nagle musisz ustawić pojemnik w lewo. W takim przypadku należy wrócić do kodu HTML i zmienić nazwę klasy - wszystko po to, aby zmienić wygląd strony. To jest niesemantyczne. Pamiętaj: HTML służy do znaczników, CSS służy do prezentacji wizualnej.

Jeśli potrzebujesz edycji HTML, aby zmienić układ strony, robisz coś złego!

9. Użyj prawidłowego tagu Doctype

Elementy należące do obu typów obejmują:

Rozpiętość, a, silny, em, img, br, wejście, skrót, akronim

Elementy blokowe obejmują:

Div, h1...h6, p, ul, li, tabela, cytat blokowy, pre, formularz

13. Ułóż właściwości alfabetycznie

Zastosowanie takiego systemu do porządkowania nieruchomości pozwoli Państwu zaoszczędzić mnóstwo czasu przy wyszukiwaniu pożądanej nieruchomości.

#cotton-candy ( kolor: #fff; pływak: lewy; waga czcionki: wysokość: 200 pikseli; margines: 0; dopełnienie: 0; szerokość: 150 pikseli; )

Notatka
Ech.. poświęć prędkość na rzecz nieco lepszej czytelności.. Przekonaj się sam..
Notatka

14. Użyj kompresorów CSS

Kompresory CSS pomagają znacznie zmniejszyć rozmiar pliku arkusza stylów, usuwając niepotrzebne podziały wierszy i łącząc elementy. Wszystko to pozwala na szybsze ładowanie Twojej witryny. CSS Optimizer i CSS Compressor to dwie świetne usługi online do wykonywania takich zadań.

Wraz ze zmniejszeniem rozmiaru pliku w naturalny sposób następuje znaczne pogorszenie jego czytelności, dlatego warto korzystać z takich usług, gdy nie należy się już spodziewać wprowadzania zmian w stylach.

15. Używaj klas ogólnych

Wkrótce zauważysz, że istnieją style, których używasz wielokrotnie. Zamiast dodawać ten styl do każdego identyfikatora, możesz utworzyć klasy ogólne i dodać je do identyfikatorów innych klas CSS (patrz zalecenie nr 8 w tym artykule).

Na przykład zauważyłem, że używam pływać: prawda I pływak: w lewo wielokrotnie w moich projektach. Właśnie dodaję zajęcia .lewy I .Prawidłowy do mojego pliku stylu i zastosuj go do elementów.

Lewo (float:left) .right (float:right) ...

Dzięki temu nie będziesz musiał pisać przez cały czas pływak: w lewo dla wszystkich elementów, do których należy zastosować tę właściwość.

16. Użyj opcji „Margines: 0 auto”, aby wyśrodkować projekt

Wiele osób, które dopiero zaczynają przygodę z CSS, nie rozumie, dlaczego nie mogą po prostu użyć CSS pływak: środek aby uzyskać efekt centrowania elementów blokowych. Gdyby to było takie proste! Niestety trzeba to zrobić w ten sposób:

Margines: 0 automatyczny; /* 0 – dla góry i dołu; auto - dla lewej i prawej */

17. Nie umieszczaj wszystkiego w DIV

Często kuszące jest zrobienie czegoś takiego:

Tekst tytułu

Może się to wydawać całkiem dobrym rozwiązaniem, ale zacznie zaśmiecać plik stylów. Zamiast tego uprość sprawę:

Tekst nagłówka

I już po tagu h1 możesz ustawić dowolny projekt, którego potrzebujesz.

18. Użyj Firebuga

Spodobał Ci się materiał i chcesz mi podziękować?
Po prostu udostępnij znajomym i współpracownikom!

Ten artykuł nie udaje, że tak jest obszerny przewodnik Język znaczników dokumentów HTML. Opisuje podstawy HTML - podstawowe zasady, pojęcia i definicje tej technologii, po ich opanowaniu możesz z łatwością kontynuować naukę kodowania HTML.

Aby przestudiować lekcję, pobierz archiwum z niezbędnymi plikami.

HTML to język znaczników dokumentów. Prawidłowa wymowa to HTT.

Prawdopodobnie kiedykolwiek pracowałeś w edytorze dokumentów Word lub podobnym. aplikacje biurowe? Prawdopodobnie to wiesz ten typ edytory posiadają bogate możliwości edycji tekstu, układania elementów, wstawiania obrazków itp.

Dlaczego, możesz zapytać, pisać o edytorach tekstu w artykule na temat HTML? Ale dlaczego. Jeśli już to zrozumiesz, kim jest redaktor biurowy? Jest to aplikacja służąca do edycji i wyświetlania dokumentów.

Kluczowym słowem jest tutaj dokument. Oznacza to, że tworzymy, edytujemy i przeglądamy dokument w jakimś programie w w tym przypadku- w edytorze biurowym. Jeśli otworzymy taki dokument w prostym edytorze tekstu, np. Notatniku, zobaczymy wiele dziwnych symboli i znaków. Ten bałagan symboli jest niezrozumiały dla ludzkości, ale zrozumiały dla komputerów. Dzięki temu wewnętrznemu językowi Dokument Worda nabiera w samym edytorze określonej struktury i wyglądu, a dokument pojawia się przed nami w całej okazałości ze sformatowanym tekstem i obrazami na swoim miejscu.

HTML to język znaczników dokumentów dla przeglądarki. Słowo tutaj jest przeglądarką, a dokument jest stroną HTML. To jest podstawa technologii HTML, której zrozumienie jest konieczne, aby nie pomylić języka znaczników dokumentów internetowych z językami programowania. Nazwa mówi sama za siebie - z za pomocą HTML My cechowanie, gdzie na stronie będzie pokazany element, obrazek lub tekst i w jakiej kolejności będą się pojawiać obok siebie.

Tak, proste pisanie i formatowanie tekstu w aplikacjach biurowych nie ma nic wspólnego z programowaniem. Jednak uważny czytelnik dostrzeże istotny szczegół – w Edytor tekstu Piszemy, edytujemy i formatujemy tekst i obrazy za pomocą wizualnych przycisków i menu, ale dlaczego kod HTML jest pisany ręcznie? Po co uczyć się tak wielu szczegółów technicznych dotyczących pisania znaczników do dokumentu?

W rzeczywistości istnieje wiele edytorów, za pomocą których można tworzyć i edytować strony HTML, podobnie jak w programie Word. Oznacza to, że źródłowy kod HTML jest dla nas ukryty i nie mamy do niego dostępu.

Coś w rodzaju Worda dla HTML. Taki redaktorzy wizualni są nazywane:

WYSIWYG redaktorzy - To, co widzisz, jest tym, co otrzymujesz. Oznacza to, że jeśli przetłumaczymy to na język rosyjski: otrzymamy to, co widzimy.

Nazywam je „wuzivoogies”. Chociaż jest to niepoprawne fonetycznie, wyraźnie pokazuje bezsens tego wynalazku. Początkujący bardzo często korzystają z takich edytorów przy tworzeniu swoich pierwszych stron internetowych. Oczywiście jest to wygodne - nie musisz zagłębiać się w naukę tagów, stylów projektowania i innych, na pierwszy rzut oka, nieprzyjemnych i skomplikowanych rzeczy. Sam edytor automatycznie konwertuje nasze działania na kod HTML.

Ale jak to mówią, nic nie dzieje się samo. Mówiąc dokładniej, podejście to ma bardzo poważne wady. Co powstrzymuje wszystkich przed używaniem edytorów wizualnych Projekt HTML strony? Faktem jest, że strony utworzone w ten sposób zazwyczaj zawierają dużo niepotrzebnego kodu i mnóstwo błędów z semantycznego punktu widzenia. Teraz oczywiście nie ma problemów z szybkim łączem internetowym i różnica w wielkości strony 400 kb i 100 kb nie jest znacząca dla szybkości, jednak zoptymalizowany i poprawnie napisany kod HTML eliminuje wiele problemów i zapewnia wiele korzyści, mianowicie:

Kompetentny kod HTML ma pozytywny wpływ na optymalizację wyszukiwarek i szybkość, z jaką robot wyszukiwania indeksuje witrynę. Kilobajty kodu wygenerowane przez vuzivugę są niedopuszczalne, a nawet szkodliwe;

Kod HTML wygenerowany przez edytor WYSIWYG zawiera wiele błędów semantycznych. Oznacza to, że tagi wygenerowane przez taki edytor są wykorzystywane do innych celów, w których trzeba ich użyć, na przykład list

łatwa edycja

Generowanych jest wiele niepotrzebnych tagów, a struktura dokumentu staje się rozdęta. Załóżmy, że przesuwasz element w takim programie, najpierw w prawo, potem w lewo, a potem na środek - każda akcja pozostawia ślad w źródłowym kodzie HTML. Edytor to program i nie może wiedzieć, co dokładnie chcesz uzyskać; generuje tony kodu, biorąc pod uwagę wszystko możliwe opcje zachowanie dokumentu w przeglądarce.
Z reguły edytory do wizualnego projektowania kodu HTML szybko stają się przestarzałe. A ze względu na brak zainteresowania ze strony profesjonalistów, są oni na ogół pozbawieni wsparcia i przestają się rozwijać. A HTML ewoluuje. Wszystko się rozwija z wyjątkiem wuzivoogi. W związku z tym nie są w stanie wygenerować poprawnego i nowoczesnego kodu, który wykorzystywałby nowe funkcje i rozwiązania.
Wspieranie i rozwijanie takich projektów to kara niebiańska. O używaniu wzorców i ponownym wykorzystaniu kodu nie można w ogóle mówić.

Będziemy więc pisać HTML tylko za pomocą długopisów. Nie wynaleziono jeszcze odpowiednich narzędzi do wizualnej edycji HTML i jest mało prawdopodobne, że się pojawią. Język znaczników HTML jest łatwy do nauczenia się i zrozumienia, a także narzędzia do automatyzacji pisanie HTML-a Kodu jest dużo, ale więcej o tym w innych lekcjach.

Po drobnych majsterkowaniu przy edytorze WYSIWYG młodzi guru HTML porzucają to daremne zadanie i idą dalej.

Struktura dokumentu HTML

Na zajęcia polecam pobrać i zainstalować edytor Sublime Text. Zdecydowanie odradzam używanie wbudowanego Notatnika systemu Windows do obsługi układu HTML, jeśli nie chcesz złamać swojej psychiki na wczesnych etapach nauki HTML.

Zdecydowaliśmy, że kod dokumentu HTML napiszemy ręcznie, czyli go przepiszemy. Układ HTML - proces Tworzenie HTML dokument. W zwykłych ludziach i kręgach poinformowanych jest to po prostu układ. Każdy dokument ma strukturę i pewne zasady konstrukcji. Z jakich elementów składa się kod, jaka jest struktura HTML?

Stwórzmy na komputerze początkowy szablon - plik indeks.html, otwórzmy go za pomocą edytora i wklejmy do niego następujący kod:

Treść dokumentu nagłówkowego Należy pamiętać, że dokumenty HTML mają rozszerzenie .html.

A więc w kolejności z przykładu.

- typ dokumentu (doctype)

Konstrukcja ta jest zawsze wskazywana na początku dokumentu, aby przeglądarka poprawnie „zrozumiała”, która wersja HTML jest używana podczas konstruowania dokumentu.

Ze względu na fakt, że HTML stale się rozwija, ma kilka wersji, jak każde oprogramowanie. Obecna wersja HTML jest piątą, a typ dokumentu podany w przykładzie jest aktualny.

W zasadzie nie ma sensu zagłębiać się w badanie typów dokumentów, ponieważ wraz z wydaniem HTML5 ten projekt stał się standardem. Po prostu wstaw go na początku dokumentu za każdym razem, gdy zaczniesz tworzyć układ strony internetowej.

- początek dokumentu

Pierwszym tagiem, który widzimy po typie dokumentu, jest .

Znacznik HTML jest jednostką strukturalną znaczników dokumentu HTML. Kod HTML składa się z elementów zwanych tagami. Każdy znacznik ma swoją własną funkcję, a nauka języka znaczników HTML polega ostatecznie na poznaniu znaczników i ich właściwości w dokumencie.

Chciałbym zauważyć, że nauka HTML nie jest tak trudna, jak mogłoby się wydawać na pierwszy rzut oka. Nauka znaczników używanych w znacznikach dokumentów nie jest taka łatwa. ogromne ciśnienie na mózgu.

Zatem znaczniki dokumentu zaczynają się od znacznika i kończą znacznikiem zamykającym. Każdy tag zawierający inne tagi lub elementy musi być zamknięty tagiem zamykającym. Na przykład , , itp.

Znacznik jest obowiązkowy, gdyż zawiera w sobie całą strukturę dokumentu i stanowi opakowanie dla pozostałych elementów.

Etykietka

Następnie widzimy tag, który zawiera inne elementy, które nie są jeszcze dla nas jasne. Zawiera inne elementy — oznacza to, że elementy lub znaczniki znajdują się pomiędzy znacznikami otwierającymi i zamykającymi konstrukcji:

treść lub inne tagi

Celem tagu jest przechowywanie metainformacji dokumentu HTML, czyli informacji, które nie są wyświetlane w samym dokumencie, ale są ważne i w dużej mierze decydują o tym, jak dokument będzie wyglądał i zachowywał się.
Ten znacznik jest wymagany w dokumencie.

Tag - tytuł dokumentu Tytuł

Tytuł to wymagany tag zawierający metainformacje tekstowe wyświetlane w tytule przeglądarki lub karty. Znacznik musi znajdować się w formacie . Wykorzystywana jest także zawartość tego tagu Wyszukiwarki aby wyświetlić dokument w wynikach wyszukiwania.

Metatag

Metatag to wyspecjalizowany tag zaprojektowany w celu dostarczania uporządkowanych danych o stronie. Metatagi są najczęściej używane w plikach . Metatagi nie są wymagane w strukturze dokumentu HTML.

Favikona

Dołącza do dokumentu plik z obrazem favikony. Favicon to miniaturowa ikona wyświetlana obok tytułu dokumentu w zakładce przeglądarki. Favikona jest plik graficzny, rozmiar 16 x 16 (lub 32 x 32) pikseli, który może mieć różne formaty, takie jak png, jpg, ico, gif. Tradycyjnie używany jest format ico. Animowane favicony to pliki gif zawierające animację. Animowaną favikonę możesz zobaczyć na przykład na VKontakte, gdy nadejdzie nowa wiadomość.

Style dokumentów CSS

Łączy się z Dokument CSS Plik stylizacji HTML.

CSS- kaskadowe Style dokumentów HTML. Każdy tag, który znajduje się w tagu, posiada zestaw właściwości, takich jak kolor, szerokość, wysokość, położenie względem innych elementów. Wszystkie te właściwości to style CSS, które można wyeksportować do pliku zewnętrznego. Projekt łączy pliki zewnętrzne z dokumentem HTML, w tym style CSS.

Uwaga: Właściwość href konstrukcji określa lokalizację pliku zewnętrznego. W naszym przykładzie plik styl.css I favicon.ico, znajdują się w tym samym folderze co plik indeks.html. nie ma znacznika zamykającego.

Etykietka

Tag zawiera kod lub link do Plik JavaScript i jest najczęściej używany wewnątrz tagu, chociaż narzędzie Google do optymalizacji szybkości ładowania strony zaleca użycie tego tagu na końcu dokumentu, przed tagiem zamykającym.

W naszym przykładzie podłączony jest plik zewnętrzny skrypt.js, który znajduje się w tym samym folderze, co główny plik Index.html.

Tak więc, przyjaciele, przyjrzeliśmy się głównym elementom, które są najczęściej używane w tagu. Oprócz tych elementów istnieje wiele innych, bardziej szczegółowych i opcjonalnych.

Ciało, czyli ciało

Tutaj zaczynają się wszystkie zabawne i namacalne wizualnie rzeczy w układzie HTML dokumentu.

Przejdźmy bezpośrednio do układu widocznej części strony. Wszystko, co napiszemy i układ wewnątrz tagu, zostanie wyświetlone w przeglądarce. Otwórzmy nasz plik indeks.html w przeglądarce, aby wyraźnie zobaczyć, co robimy w edytorze.

Tag może zawierać dowolne Tagi HTML niezbędne do przygotowania dokumentu i zapewnienia jego funkcjonalności (formularz). Przedstawię tabelę najczęściej używanych tagów i krótko opiszę każdy z nich. Przykłady podane w edytorze możesz od razu uruchomić.

Etykietka	Opis
	Znacznik służący do tworzenia linków w dokumencie. Przykład: tekst linku Atrybut href określa dokument, do którego prowadzi link.
,	Tworzy tekst kursywa lub pogrubienie (podkreślenie). Przykład: tekst kursywy, pogrubiony (podkreślony) tekst
, , , , ,	Nagłówki dokumentów. W sumie istnieje 6 poziomów nagłówków, ale w praktyce używane są tylko h1 do h4. W dokumencie powinien znajdować się tylko jeden nagłówek, oznaczony znacznikiem h1, jako główny nagłówek dokumentu. Przykłady: Nagłówek pierwszego poziomu Nagłówek drugiego poziomu Nagłówek trzeciego poziomu... itd.
,	Listy dokumentów. Są to listy numerowane lub wypunktowane. Elementem takiej listy jest tag Przykłady: Element lista punktowana 1 Punktor 2 Numerowana pozycja listy 1 Numerowana pozycja listy 2
	Ustęp. Znacznik ten definiuje akapit tekstu oddzielony od innych akapitów. Zdecydowanie zaleca się zamknięcie tego tagu. Przykład: Wygląd znaczników HTML w dużej mierze zależy od stylów CSS. Jednak niektórzy webmasterzy decydują się nie używać stylów na wczesnych etapach projektu.
	Zdjęcie. Za pomocą tego tagu możesz wstawić obraz do znaczników HTML. Pamiętaj o dołączeniu tekstu alternatywnego do wszystkich obrazów – atrybut „alt”. Ten tag zamyka się samoczynnie. Przykład:
+ +	Formularze i elementy wejściowe. Formularze służą do wprowadzania informacji do systemu na serwerze. Rodzaj sprzężenia zwrotnego pomiędzy użytkownikiem a witryną. Na przykład formularze są używane, gdy trzeba wysłać jakąś wiadomość na serwer. Oprócz tego formularze mogą pełnić inne funkcje, ale głównym zadaniem jest przesyłanie danych do serwera. Przykładem może być prosty formularz wysłania wiadomości, w którym użytkownik serwisu podaje swoje imię i nazwisko, adres e-mail oraz tekst wiadomości: Treść wiadomości
	Definiuje podciąg w ciągu. Służy do stylizowania części linii za pomocą CSS. Jeden z najczęściej używanych tagów. Bez projektu nie objawia się to w żaden sposób w przeglądarce. Przykład: Nauka języka HTML w większości przypadków nie sprawia początkującym żadnych trudności.
,	Tagi służą do wstawiania wideo i audio do dokumentu. Znacznik zamykający jest wymagany. Przykłady: Parametr kontroli mówi nam, że strona powinna wyświetlać elementy sterujące zawartością multimedialną, zupełnie jak zwykły odtwarzacz audio/wideo.
	Prawdziwie królewski tag. Najczęściej używany i popularny tag w znaczniki HTML strony. Jest to element blokowy przeznaczony do zarządzania blokami na stronie. Często używana jest koncepcja „cudownego” układu - oznacza to, że wszystkie bloki na stronie są rozmieszczone za pomocą tych tagów. Może zawierać inne tagi. Przykład: Tekst w zagnieżdżonym bloku W większości przypadków wszystkie elementy są ozdobione właściwościami Style CSS. Znacznik zamykający jest wymagany.
	Ten tag się ładuje strona zewnętrzna do dokumentu. Przykład:

Nie uwzględniliśmy wszystkich tagów i nie jest to konieczne. na tym etapie. Najważniejsze jest, aby zrozumieć podstawową ideę HTML, nauczyć się korzystać z przedstawionych powyżej tagów, a następnie przejść dalej.

Należy pamiętać, że wszystkie nazwy w załączonych plikach muszą być zapisane alfabetem łacińskim, bez spacji.

Na przykład nie:

Jest to konieczne dla większej kompatybilności treści strony. Ponadto dyktują standardy pisania kodu HTML.

Zatem znamy już pewne podstawy HTML: jaką strukturę powinien mieć typowy dokument HTML, znamy kilka najpopularniejszych tagów, czas przejść do najsmaczniejszej części, czyli plików cookie.

Praktyczne zadanie dotyczące układu HTML

Jeśli jeszcze nie pobrałeś archiwum z przykładami, zrób to. Możesz na przykład spojrzeć na plik example.html, który również znajdował się w archiwum.

Rozpakuj archiwum i utwórz plik indeks.html w folderze z rozpakowanymi plikami. Otwórz utworzony plik za pomocą Edytor tekstu Wzniosły tekst;
Utwórz początkową strukturę dokumentu z typem dokumentu, znacznikiem zawierającym i i przystąp do edycji zawartości znacznika;
Otwórz plik readme.txt i wykonaj odpowiednie zadania w utworzonym pliku Index.html. Aby sprawdzić wynik, otwórz plik Index.html w swojej ulubionej przeglądarce.

Na tym kończymy lekcję o podstawach HTML, w kolejnej lekcji „Podstawy CSS” nauczymy się zarządzać stylami elementów dokumentu, poznamy kaskadowe arkusze stylów, nauczymy się korzystać z klas stylów i sprawić, by nasz układ był piękny i kolorowy .

Do zobaczenia ponownie, przyjaciele!

Praktyczna praca z HTML

Zadanie nr 1.

Tworzenie podstawowego pliku HTML

1. Utwórz folder osobisty, w którym będziesz zapisywać wszystkie pliki swojej witryny.

2. Kliknij kliknij prawym przyciskiem myszy myszką i wybierz „Nowy” - „Pusty plik”.

3. Wpisz nazwę pliku rasp.html.

4. Kliknij prawym przyciskiem myszy „Otwórz za pomocą” - „Podkładka pod mysz”

5. Wybierz prosty HTML dokument:

Szkolenie plik HTML

Plan zajęć na środę.

6. Zapisz dokument i zamknij edytor.

7. Otwórz dokument rasp.html dwukrotnie klikając myszką i sprawdź wynik.

Zadanie nr 2.

Sterowanie położeniem tekstu na ekranie

1. Wykonaj krok nr 4 z poprzedniego zadania, dla pliku rasp.html

2. Dokonaj zmian w pliku rasp.html, umieszczając słowa Grafik zajęć na środę na różnych liniach.

Przykład:

Harmonogram

zajęcia

w środę.

Nie zdziw się, że wygląd Twojej strony internetowej się nie zmienił.

Zadanie nr 3.

Kontrolowanie rozmieszczenia tekstu na ekranie 2

1. Wykonaj krok nr 4 z pierwszego zadania, dla pliku rasp.html

2. Dokonaj zmian w pliku rasp.html:

Przykład:

Harmonogram

zajęcia

w środę.

3. Zapisz tekst za pomocą zmiany dokonane w pliku rasp.html.

4. Otwórz dokument rasp.html podwójnym kliknięciem i sprawdź wynik.

Wygląd linii powinien się zmienić. Dlaczego tekst się zmienia?

Zadanie nr 4.

Formatowanie tekstu

Znacznik kanału liniowego
oddziela linię od kolejnego tekstu lub grafiki.

Znacznik akapitu

również oddziela linię, ale także dodaje pustą linię, która wizualnie

podkreśla akapit.

Plik samouczka HTML

Harmonogram

zajęcia

Na środę.

3. Zapisz tekst ze zmianami w pliku rasp.html.

4. Otwórz dokument rasp.html podwójnym kliknięciem i sprawdź wynik.

Zadanie nr 5.

Formatowanie tekstu

1. Wprowadź zmiany w pliku RASP.HTML

Plik samouczka HTML

Harmonogram

zajęcia

w środę.

3. Zapisz tekst ze zmianami w pliku rasp.html.

4. Otwórz dokument rasp.html podwójnym kliknięciem i sprawdź wynik.

5. Odpowiedz na pytanie: jakie znaczniki służą do ustawiania czcionek podkreślonych, pochylonych i pogrubionych?

Zadanie nr 6.

Ustaw rozmiary znaków na stronie internetowej

Istnieją dwa sposoby kontrolowania rozmiaru tekstu wyświetlanego przez przeglądarkę:

stosowanie stylów nagłówków,

Ustaw rozmiar czcionki dokumentu głównego lub bieżący rozmiar czcionki.

Stosowanych jest sześć tagów tytułowych: from

Każdy tag ma określony styl przypisany przez ustawienia przeglądarki.

1. Wprowadź zmiany w pliku RASP.HTML

Plik samouczka HTML

w środę.

3. Zapisz tekst ze zmianami w pliku rasp.html.

4. Otwórz dokument rasp.html podwójnym kliknięciem i sprawdź wynik.

5. Zamień znacznik h1 na h2-h6 i zobacz, jak zmienia się rozmiar tytułu.

Zadanie nr 7.

Ustaw bieżący rozmiar czcionki

Znacznik czcionki umożliwia ustawienie rozmiaru aktualnej czcionki w poszczególnych miejscach tekstu

zakres od 1 do 7.

Plik samouczka HTML

Harmonogram zajęć

w środę.

3. Zapisz tekst ze zmianami w pliku rasp.html.

4. Otwórz dokument rasp.html podwójnym kliknięciem i sprawdź wynik.

5. Zamień rozmiar czcionki na inny i zobacz, jak zmienia się rozmiar tekstu.

Zadanie nr 8.

Ustawianie koloru czcionki

Tag zapewnia kontrolę nad krojem pisma, kolorem i rozmiarem tekstu.

Aby zmienić kolor czcionki możesz w tagu użyć atrybutu KOLOR=”X”. Zamiast

„X” należy zastąpić angielską nazwą koloru ujętą w cudzysłów („ ”) lub jej liczbą szesnastkową

oznaczający. Określając kolor w postaci liczby szesnastkowej, należy przedstawić ten kolor

rozkłada się na trzy składowe: czerwony (R – Czerwony), zielony (G – Zielony), niebieski (B – niebieski),

z których każdy ma wartość od 00 do FF. W tym przypadku mamy do czynienia z tzw

formacie RGB.

Przykłady zapisu tekstu w formacie RGB przedstawiono w tabeli 1:

1
. Wprowadź zmiany w pliku RASP.HTML

Plik samouczka HTML

Harmonogram

Zajęcia na środę.

3. Zapisz tekst ze zmianami w pliku rasp.html.

4. Otwórz dokument rasp.html podwójnym kliknięciem i sprawdź wynik.

5. Zmień kolor na inny i zobacz efekt znacznika czcionki.

Zadanie nr 9.

Wyrównaj tekst poziomo.

Wyrównanie tekstu określa jego wygląd i orientację krawędzi akapitu i może być wyrównane do lewej, do prawej, wyśrodkowane lub wyjustowane. Znacznik akapitu jest zwykle używany do ustawiania wyrównania tekstu

1. Dokonaj zmian w pliku RASP.HTML

Plik samouczka HTML

Harmonogram

zajęcia w środę.

3. Zapisz tekst ze zmianami w pliku rasp.html.

4. Otwórz dokument rasp.html podwójnym kliknięciem i sprawdź wynik.

Utwórz stronę internetową zgodnie z poniższym przykładem.

Kolor tekstu podano w nawiasach. Wyrównanie tekstu musi być obecne.

Nazwij plik biscuit.html