Teraz kilka słów o tagach, których użyliśmy tworząc tę ​​stronę.

Opis znaczników HTML z przykładu

1. - te tagi muszą być obecne na każdej stronie internetowej. Mówią przeglądarkom i Wyszukiwarkiże jest to strona HTML.

Każda strona HTML ma następująca struktura:

... Tagi nagłówków ... ... Treść strony ...

2. - pomiędzy tymi tagami znajduje się cała widoczna treść strony.

4. - pomiędzy tymi tagami wpisany jest tytuł strony, który wyświetla się na samej górze przeglądarki. Swoją drogą, gdy szukasz czegoś w wyszukiwarkach, pierwszą rzeczą, która się wyświetla, jest nazwa strony. Etykietka często skracane do „tytułu”. Radzę przeczytać artykuł: jak stworzyć tag — znaczniki wskazujące nazwę witryny;

— ten tag zawiera kod witryny.

Przykład struktury dokumentu strony internetowej w formacie HTML

Pierwsza linia dokumentu określa wersję języka HTML.

Zapiszmy to ten kod w Notatniku i zapisz go w formacie .html.

Następnie otwórz go w dowolnej przeglądarce i jeśli wszystko się zgadza, otworzy się pusta strona. Następnie musisz określić projekt witryny: miejsce na nagłówek, położenie menu, w którym będzie znajdować się tekst.

Wybrałem taki układ: na górze strony znajduje się nagłówek, pod nim 4 przyciski, menu po lewej stronie i tekst po prawej.

Aby utworzyć taką witrynę, musisz dokonać znaczników za pomocą tabel.

NA język HTML tabela jest definiowana za pomocą tagów

, a wiersz w tabeli to , kolumny - .

Tabela będzie wyglądać następująco:

8 i 33 - terminy otwierają i zamykają tabelę;

14 i 21 - wiersze otwierają i zamykają wiersz w tej tabeli;

15, 16, 17, 18 linii – otwieranie i zamykanie kolumny;

Linie 22 i 25 - otwierają i zamykają kolumnę. W tym przypadku atrybut colspan=”1” oznacza liczbę kolumn, szerokość=”170” i wysokość=”317” oznacza szerokość i długość komórki;

27 i 30 - ponownie otwórz i zamknij kolumnę. W tym przypadku atrybut colspan=”3” oznacza, że ​​komórka jest rozciągnięta na 3 kolumny. Jego wymiary to: szerokość=”510” i wysokość=”317”.

W ten sposób tworzona jest strona za pomocą tabel.

Jeśli usuniesz atrybut border=”1” w ósmej linii, tabela stanie się niewidoczna i właśnie to zrobimy.

Aby utworzyć szablon strony internetowej, będziesz potrzebować programu Adobe Photoshopa.

Otwórz program i utwórz nowy dokument„Plik” - „Nowy”.

Określ szerokość, wysokość, rozdzielczość, tryb koloru, tło.

Piszemy wszystko jak pokazano tutaj:

Będzie otwarte pusty dokument. Teraz musimy to zrobić w taki sam sposób jak w dokumencie HTML. Dzielimy go na komórki tabeli za pomocą prowadnic.

Aby wyświetlić linijkę, włącz „Widok” - „Linijki”, wyciągnij prowadnice bezpośrednio z linijki i utwórz szablon, jak na rysunku:

Dla większej przejrzystości wybierz tło naszej witryny i pomaluj je na przykład na zielonkawy kolor. Aby to zrobić, musisz utworzyć w Photoshopie Nowa warstwa, kliknij na pasku narzędzi „Próbnik kolorów” i wprowadź wybrany przez nas kolor. Naciśnij klawisze skrótu Alt + Backspace, a dokument zostanie pomalowany na określony przez nas kolor. W ten sposób możesz wybrać dowolny kolor.

Kontynuujmy tworzenie witryny w formacie HTML. Teraz musisz zaznaczyć menu witryny, nagłówek, przyciski itp.

Stwórzmy nową warstwę, dla której bierzemy narzędzie „Prostokątna markiza”. Wybierz nagłówek witryny i przytrzymując klawisze Alt + Backspace, zamaluj nagłówek. Następnie naciśnij raz Ctrl + T, przytrzymując Klawisz Alt, zmniejsz nagłówek.

Powinno to wyglądać mniej więcej tak:

W podobny sposób wykonujemy pozostałe obszary serwisu. Możesz zmienić kolor, zrobić ramkę dla bloków, dodać cień, zastosować gradient. Aby to zrobić, wybierz warstwę z zaciśniętym Klawisz Ctrl i korzystaj z funkcji programu Photoshop.

Wybierać wymagana funkcja np.: udar. Podajemy jego rozmiar w pikselach i kolorze.

W podobny sposób tworzymy pozostałe elementy na stronie.

Na przyciskach piszemy nazwy, można je zapisać w formacie HTML lub od razu wykonać przyciski graficzne. Wybierz narzędzie „Tekst” i wykonaj napisy na przyciskach. Na przykład: Strona główna, Usługi, Kontakty itp.

Dodaj obraz do nagłówka witryny i proste przeciąganie i upuszczanie zdjęcia, umieść je w górnym bloku witryny. Możesz zmienić rozmiar obrazu za pomocą za pomocą Ctrl+ T.

W rezultacie otrzymujemy gotowy szablon strona internetowa:

Potnijmy szablon na części i zapiszmy wszystko w osobnym folderze w wymaganym formacie.

Weź narzędzie tnące i wybierz każdy obszar witryny.

Ratujemy wszystko. Przejdź do menu, wybierz „Plik” -> „Zapisz dla Internetu”. Zapisz w formacie .jpeg lub .png.

W rezultacie: na pulpicie znajduje się folder z gotowe bloki przyszła witryna. Przenieśmy te pliki do folderu naszej witryny.

Przejdźmy do najważniejszej rzeczy – stworzenia strony HTML. Na tym etapie musisz umieścić wszystkie części szablonu w dokumencie, dodać tekst strona główna, zapisz menu itp.

Poniżej końcowy wynik:

Myślę, że nie jest trudno odgadnąć, co tu jest co.

Linia 10 – ustaw nagłówek strony z atrybutem tła;

15, 16, 17, 18 – wstaw przyciski i dodaj linki;

Linia 22 – ustaw tło menu za pomocą atrybutu tła;

23 – 28 linii – zapisujemy pozycje menu serwisu;

Linia 33 – tekst strony internetowej.

Okazuje się, że nie ma nic skomplikowanego w stworzeniu strony internetowej w HTML.

Dzięki temu nauczyliśmy się jak zrobić stronę internetową w HTML.

To wszystko, nasza strona jest gotowa!

Tak, jest to oczywiście prosta strona utworzona w formacie HTML.

Ale wiesz już, jak powstaje szablon i układ, co oznacza, że ​​możesz zacząć uczyć się więcej skomplikowane sposoby ulepszenia witryny.

Spróbuj zacząć od czegoś małego i jeśli nauczysz się tworzyć proste strony, z czasem będziesz mógł stworzyć coś więcej. Najważniejsze to nie rezygnować z nauki, wtedy już niedługo nauczysz się tworzyć profesjonalne strony internetowe.

Polecam:

Lekcja 2.

Stwórzmy pierwszą stronę HTML.

W tej lekcji będziesz postępować zgodnie z moimi instrukcjami, aby utworzyć swoją pierwszą stronę internetową. Na razie nie musisz zagłębiać się w to, jakich niezrozumiałych symboli będziesz musiał użyć. W tej lekcji tworzymy stronę, a w kolejnych dwóch lekcjach w pełni zrozumiemy każdy zapisany znak.

Pierwszą rzeczą, którą robimy, jest utworzenie folderu na pulpicie i nadanie mu nazwy „Witryna”. Całe nasze dalsze tworzenie będzie miało miejsce w tym folderze.

Teraz uruchommy Notatnik++, który zainstalowaliśmy. (Jeśli jeszcze tego nie zrobiłeś, oto instrukcja instalacji). Domyślnie program powinien znajdować się w katalogu /Program Files/Notepad++/ lub można go uruchomić poprzez Start. Otwórz program i wklej do niego następujący tekst:

<html>
<head>
<title>Moja pierwsza strona internetowa </title>
</głowa>
<treść>
Cześć! To jest moja pierwsza strona internetowa!
</ciało>
</html>

Większość witryn RuNet składa się ze stron HTML zapisanych w kodowaniu UTF-8. Aby nasze strony wyświetlały się poprawnie w przeglądarce, również będziemy stosować to kodowanie.

Teraz musimy zapisać nasz plik w formacie HTML.

Nie zapominaj, że Notepad++ jest edytorem tekstu, co oznacza, że ten moment mamy regularne plik tekstowy z zestawem znaków. Aby nasza przeglądarka wyświetlała stworzone przez nas strona tekstowa podobnie jak strona internetowa, musimy przekształcić ją w plik rozszerzenie HTML.

W tym celu w górnym menu klikamy przycisk „Plik”, następnie „Zapisz jako”, wybieramy katalog (ścieżkę) w którym plik zostanie zapisany, zapisujemy go w utworzonym przez nas folderze: Desktop/Site/ i co najważniejsze , wybierać żądany typ plik, w naszym przypadku jest to Hyper Text Markup Language (html).

Gratulacje! Właśnie stworzyłeś swoją pierwszą stronę internetową! Teraz możesz przejść do folderu „Site” i uruchomić utworzony plik. Strona otworzy się w przeglądarce i zobaczysz ją zamiast dziwne postacie które wstawiliśmy, przeglądarka wyświetla na ekranie całkiem zrozumiałe informacje.

9 głosów

Witamy na stronach bloga Start-Luck. Dziś pokażę Wam jak wykorzystać kod. Pisanie stron internetowych to ciekawe zajęcie, które dla wielu może wydawać się niemożliwie trudne. Tak naprawdę prostą stronę można stworzyć w zaledwie 5 minut.

W tym artykule będę mówić tworzenie HTML-a strony. Wykonamy to zadanie w niecałe 10 minut, a następnie przyjrzymy się bardziej szczegółowo głównym tagom. Błędem byłoby nazywanie takiej publikacji lekcją. To raczej ziarno, które ma pokazać Ci prostotę pracy i dać Ci chęć do dalszego działania, uczenia się więcej, robienia czegoś lepiej.

Jak stworzyć stronę

Sugeruję zapisanie pierwszej strony w notatniku. Najprostszym, który znajduje się w menu Start, jest folder „Akcesoria”. Nie ma jeszcze potrzeby pobierania czegokolwiek. Spróbuj wykorzystać to, co masz.

Otwórz dokument.

Wklej do niego ten kod.

<HTML > <głowa > <tytuł > Moja pierwsza strona</tytuł> </głowa> <ciało > <centrum > </h1> <br/> <centrum > „https://pixabay.com/static/uploads/photo/2016/10/14/18/03/workplace-1740807_960_720.jpg”> <br/> <styl czcionki="kolor:czerwony" ></czcionka> <br/> <b></b> <br/> Dotarliśmy na sam dół<br/> Teraz wiesz już trochę więcej o tagach i potrafisz z nich korzystać. Spróbujmy wstawić link, aby połączyć ze sobą kilka stron.<br/> <godz. > Na przykład tutaj jest link do mojego bloga -<a href = "http://site/" > Start-szczęście</a>- mówi po prostu o „skomplikowanych rzeczach”.<br/> <br/> </ciało> </html>

Tworzenie strony jest łatwiejsze niż myślisz

Wielu może pomyśleć, że tworzenie stron internetowych jest trudne, a nawet niemożliwe. Aby to zrobić, musisz się uczyć, uczyć i dużo robić. Tak naprawdę jest około 100 tagów, których nawet nie musisz się uczyć. Ważne jest tylko, aby zrozumieć, czego i gdzie się używa. Możesz wyszukiwać informacje w różnych ściągawkach, a z czasem zaczniesz automatycznie zapamiętywać tagi.



Prosty kod pozwala na zmianę koloru tekstu na czerwony

Pisanie pogrubioną czcionką nie jest dużo trudniejsze

Dotarliśmy na sam dół

Teraz wiesz już trochę więcej o tagach i potrafisz z nich korzystać. Spróbujmy wstawić link, aby połączyć ze sobą kilka stron..

OK, już wszystko skończone. Twoja pierwsza strona jest gotowa

Plik musi mieć nazwę indeks.html. Kończący się „.html” wskazuje rozszerzenie pliku. Jeśli po prostu wpiszesz nazwę indeksu, dokument zostanie zapisany jako plik tekstowy i nie będzie otwierany przez przeglądarkę.

Zapisałem dokument na pulpicie. Teraz musisz go znaleźć, kliknij prawy przycisk myszką i otwórz w dowolnej przeglądarce. Wybiorę Google Chrome.

Tak wygląda strona, którą właśnie utworzyłem. Twoje nie będzie inne. Wszystko jest dokładnie takie samo: ze zdjęciami i kolorową czcionką.

Teraz omówię tagi bardziej szczegółowo, ale na razie usuńmy „z tytułu Centrum " i wstaw linię zawierającą słowo " Kolor" Swoją drogą już pisałem. To bardzo proste, polecam przeczytać.

Zapisz dokument ponownie, tym razem możesz po prostu użyć skrótu klawiaturowego Ctrl+S, a następnie odświeżyć stronę w przeglądarce za pomocą przycisku F5

Pamiętaj, że prawie każdy tag musi się otwierać i zamykać. Oznacza to, że kod z ukośnikiem musi gdzieś się znajdować. W tym przypadku wygląda to tak: .

Widzisz, że tytuł zmienił kolor na czerwony. W ten sam sposób możesz nadać pożądany odcień dowolnej części tekstu.

Cóż, to wszystko, przykład jest gotowy i powinieneś być z siebie dumny. Oczywiście nie jest to jeszcze online; w tym celu należy opublikować stronę internetową, którą zapewnia hosting. Musisz także podłączyć swoją domenę, aby inne osoby mogły zobaczyć Twoje dzieło.

Na razie tylko Ty możesz zobaczyć tę stronę. Ale trzeba przyznać, że taka strona może tylko zaskoczyć osobę z epoki żelaza. Ale to pierwsza próba, sprawmy, aby była jeszcze bardziej skuteczna, poznając tagi, których użyliśmy. Pomoże Ci to nauczyć się tworzyć własne projekty bez niczyjej pomocy.

Tagi

Za Twoją zgodą przejdę na program NotePad++. Ma szereg zalet w porównaniu do zwykłego notatnika. Teraz naprawdę będę potrzebował wyróżniania tagów, aby pokazać elementy, o których będę mówić. Ogólnie rzecz biorąc, jeśli zamierzasz nauczyć się HTML, gorąco polecam zainstalowanie tego darmowego programu.

Nie jest jedyna i mogę zaproponować jeszcze kilka, jeśli ktoś jest zainteresowany alternatywami. Przechodzimy do części teoretycznej.

Podstawowy

Strona zaczyna się i kończy tagami . Pokazują przeglądarce, że jest to dokument internetowy utworzony przy użyciu HTML.

Następny przychodzi lub tytuł. Zawiera najwięcej ważna informacja o stronie, w naszym przypadku – . Jeśli nie znalazłeś jeszcze frazy „Moja pierwsza strona”, która występuje w kodzie, zwróć uwagę na samą zakładkę, nad linią wyszukiwania.

To tagi odpowiadają za początek i koniec głównych informacji o stronie.

Etykietka

wskazuje, że fraza jest nagłówkiem. Domyślnie jest nieco większy niż tekst główny i jest pogrubiony. Gdybyśmy teraz pisali nie tylko w HTML, ale także stworzyli plik CSS, z którym nasz plik się nałożył, moglibyśmy kontrolować rozmiar, czcionkę, a nawet kolor wszystkich nagłówków na stronie bez pisania styl czcionki tak jak to zrobiliśmy w przykładzie. Chociaż jest jeszcze za wcześnie, aby o tym mówić.

Nawiasem mówiąc, tytuł i H1 mają wpływ na przypisanie Twojej witrynie miejsca wyniki wyszukiwania. Trzeba je traktować z wielką uwagą i nie pisać nic w środku tylko dla tego. Są powiązane. Oprócz h1 istnieją również h2, h3, h4.

W tej samej linii znajduje się otwarcie i zamknięcie

. Dzięki temu elementowi możesz wyrównać tekst do środka. Jeśli ten znacznik zostanie usunięty, tekst zostanie wyrównany do prawej strony.

- jeden z niewielu pojedynczych tagów. Oznacza to, że działa samodzielnie. Dzięki temu przeskakujesz elementy z jednej linii do drugiej. Mówiąc najprościej, robisz wcięcie. Napisaliśmy to raz, czyli raz, dwa razy zeszliśmy w dół, tak jak ja, i wcięcie okazało się trochę większe.

Zdjęcie

Następny jest tag obraz czyli obraz, obraz. Nawias kwadratowy otwiera się, wprowadzane są do niego wszystkie podstawowe informacje o obrazie, dopiero potem się zamyka. Należy zauważyć że obraz jest znacznikiem, a wszystkie inne elementy kodu, które się w nim mieszczą, są jego atrybutami.

Pierwszą rzeczą jest alt czyli opis. Jest to również konieczne do optymalizacji. Czasami jest również dodawany tytuł . Kiedy najedziesz myszką na obraz, obok kursora pojawi się podpowiedź, gdy strona jest już otwarta w przeglądarce.

Można było wrzucić rysunek do folderu serwisu i wpisać do niego ścieżkę, ale poszedłem w prosty sposób. Znalazłem zdjęcie wśród Pixabay, otworzyłem je w nowym oknie i wkleiłem link.

W tagu źródło podana jest ścieżka do obrazu. To on mówi przeglądarce, co ma dalej ruszyć, aby znaleźć żądany obraz, i w którą stronę patrzeć - piszesz sam.

Formatowanie tekstu

odpowiada za nadanie części tekstu specjalnego stylu, na przykład, jak w naszym przypadku, innego koloru. styl=”kolor:czerwony” oznacza, że ​​kolor będzie czerwony. Jeśli chcesz żółty, napisz żółty, zielony - zielony. Możesz użyć kodów kolorów z Photoshopa.

pomaga pogrubić tekst.

---

rysuje linia pozioma. Jest pojedynczy i używany tylko w stanie zamkniętym. Jeśli napiszesz

---

kilka razy, otrzymasz dokładnie tę samą kwotę poziome paski podczas otwierania strony w przeglądarce.

Spinki do mankietów

informuje przeglądarkę, że w następnej kolejności będzie łącze. Chcesz przekierować czytelnika na inny adres. Ten tag ma wymagany atrybut href=”adres” . Cytaty zawierają ścieżkę, do której przeglądarka powinna skierować osobę odwiedzającą stronę. Po zapisaniu tego tagu wstawiany jest opis, słowo lub kilka, które po kliknięciu przeniosą czytelnika dalej. Po spełnieniu tych warunków możesz wstawić drugi, zamykający tag .

Po napisaniu głównej części strony zamykasz tag ciało , ponieważ ciało jest skończone. I wskaż, że od dzisiaj przestaniesz go używać HTML .

Jeśli chcesz wiedzieć więcej nt znaczniki HTML i dowiedz się, jak wstawiać nie tylko zdjęcia, ale także filmy, tworzyć przyciski, różne kształty, listy, akapity, to mogę Ci zaoferować darmowy kurs Jewgienija Popowa” Podstawy HTML " Tylko 33 lekcje pomogą Ci osiągnąć kolejny poziom.

Chciałbym również polecić Ci kurs wideo, który pokaże Ci, jak projektuje się strony internetowe. Cały proces pokazano w prawdziwe przykłady, co jest szczególnie dobre. Kurs przeznaczony jest zarówno dla początkujących, którzy nie znają jeszcze HTML-a, jak i dla tych, którzy dobrze znają już HTML i CSS, ale nie wiedzą, jak dobrze układać strony internetowe. Więcej pełna informacja Można go zdobyć klikając na link: www.srs.myrusakov.ru/makeup

Poza tym zabierz Darmowa książka przy tworzeniu strony internetowej ! Ta książka jest przeznaczona dla początkujących i to właśnie w tym miejscu tworzona jest strona OD i DO. Oznacza to, że projekt jest przygotowany, następnie strony są układane, zapisywane część oprogramowania, a następnie witryna zostaje opublikowana w Internecie. Autor szczegółowo wszystko komentuje, a w książce znajduje się mnóstwo zrzutów ekranu i ilustracji. Co więcej, osobliwością tej książki jest to, że nie tworzy ona jakiejś abstrakcyjnej witryny, ale całkowicie realną, istniejącą w Internecie.

Dzisiaj zrobiłeś wiele, bo pierwszy krok jest najtrudniejszy.

Zapisz się do newslettera i Grupa VKontakte , a także dowiedz się: po co i po co potrzebny jest silnik WWW, co to jest układ blokowy I siatka modułowa, jak poprawnie pisać strony internetowe i wiele więcej.

Do zobaczenia ponownie i powodzenia!