Pierwsze kroki w kodowaniu. Lub od czego zacząć naukę HTML

Pierwsze strony podręcznika:

Samouczek HTML dla manekinów. Narzędzia.

Kolejność to przede wszystkim dlatego przed rozpoczęciem pracy stworzymy na naszym komputerze osobny folder na przyszłą stronę.

D:\pierwsze kroki\

Na swoim komputerze utworzyłem taki folder na dysku D i nazwałem go Pierwsze kroki. Możesz oczywiście utworzyć swój folder w dowolnym miejscu i nazwać go, jak chcesz. Teraz otwórz notatnik - notatnik (start - programy - akcesoria - notatnik lub start - programy - standard - notatnik) i skopiuj tam następujący tekst:

Witam, to moja pierwsza strona.

Witam! :)

()

Zapiszmy ten dokument, nadając mu nazwę *.html

D:\pierwsze kroki\index.html

Wielu czytelników natyka się na zdanie: „ A teraz zapiszmy ten dokument, nadając mu nazwę *.html”, piszą listy o tym, co udaje im się zapisać tylko jako dokument tekstowy *.txt, a nie jako *.html. Aby uniknąć tego głupiego nieporozumienia w przyszłości, piszę tę notatkę.

Krok 8.

Teraz, gdy nauczyliśmy się ustawiać rozmiar czcionki, nadszedł czas, aby porozmawiać o tym, jak zdefiniować styl czcionki. W tym rozdziale dowiemy się, jak pisać kursywą, podkreślać, przekreślać, pogrubiać, ustawiać tekst na monospace, jak indeksować górny i dolny — wszystkie te znaczniki są zwykle brane pod uwagę razem i nie odbiegamy od tradycji.

Spójrzmy najpierw na kursywę i pół Miniaturka:

Pogrubiony tekst
Tekst kursywą (kursywa)

Jak widać, wszystko jest proste. Możesz je samemu szturchać w tekście, gdzie chcesz, do testów, a w przykładzie znów będę dręczyć mojego wirtualnego przyjaciela:

Teraz kilka linijek o czcionce mossyrinny. Co to za czcionka? Jest to czcionka ze znakami o tej samej stałej szerokości, jak czcionka maszynowa. A tag to:

czcionka o stałej szerokości

W naszym przykładzie nie wejdę (zrób to sam).

Ponadto tekst zawarty w tagu jest wyświetlany czcionką o stałej szerokości.

tekst (wiele spacji) tekst tekst (wiele spacji) tekst tekst (wiele spacji) tekst

Jest jedna niezwykła cecha: tekst w nim zawarty jest wyświetlany do spacji dokładnie tak, jak wpisałeś go w notatniku.  Ten znacznik może być przydatny na przykład do formatowania wierszy.
Do jednego fragmentu tekstu można zastosować kilka tagów jednocześnie:

 tekst

W naszym przykładzie tekst jest o stałej szerokości, pogrubiony i pisany kursywą (w ten sposób:).  Nie bój się używać różnych kombinacji tagów, eksperymentuj, ale mądrze :)
Tak więc pozostało nam jeszcze kilka tagów, które musimy opanować na tym etapie, zanim przejdziemy dalej.
Podkreślony tekst jest wprowadzany za pomocą znacznika :

  Podkreślony tekst  
Tagi oraz przedstawiają tekst przekreśloną czcionką, możesz użyć dowolnej, która Ci się podoba, nie ma między nimi zasadniczej różnicy:

 przekreślone 

przekreślone 
Etykietka pojawia się dużym drukiem i drobnym drukiem w stosunku do tekstu głównego:

 Mały
normalny tekst 

Duża 
Tagi Sup i Sub definiują indeks górny i dolny.  Sup - góra, Sub - dół.  Gdzie mogą się przydać?  No na przykład pisząc jakąś formułę - H 2 O (wszystko, co wyciągamy ze szkoły :).
Napisany u góry łyk
indeks pod 

/ Samouczek HTML.  Krok 13.



Samouczek HTML dla manekinów.  Pierwotniaki.
Krok 13.
Zabawna i edukacyjna lekcja z miłośnikiem kiełbasek dobiegła końca, a my przechodzimy do kolejnej lekcji, w której opowiemy o linkach.
Nasza strona może składać się z kilku dokumentów.  Jednym z nich jest główny (index.html) - otwiera się jako pierwszy i musi znajdować się w Twojej witrynie w Internecie.  Możesz nazwać pozostałe dokumenty, jak chcesz (photos.html, about_me.html, my_pets.html, friends.html, gh516hgd.html).  Wszystkie mogą znajdować się w tym samym katalogu (folderze) lub w różnych.
Używamy linków, aby połączyć te dokumenty.  Czyli ze strony głównej poprzez linki możemy przejść do strony ze zdjęciami, z tej strony możemy wrócić do strona główna lub powiedzmy na stronę z naszymi wierszami itp.
Na początek stwórzmy nowy dokument(w naszym przykładzie prf.html) w tym samym katalogu (folderze), w którym znajduje się nasz główny dokument index.html.  Sam wymyśl treść dokumentu, masz już na to wystarczającą wiedzę.
Niech prf.html będzie dokumentem z Twoimi zdjęciami.  Wtedy możemy bez wyrzutów sumienia zamieścić w frazie „zobacz moje zdjęcia” link do prf.html:
zobacz moje zdjęcia
(1) - moje zdjęcia 
(2) - moje zdjęcia 
(3) - moje zdjęcia
W przypadku (1) dokument znajduje się w tym samym katalogu (folderze) co dokument, w którym odwołujemy się do prf.html, w przypadku (2) dokument znajduje się w podkatalogu /photos, w przypadku (3) odwołujemy się do Witryna http ://www.homepage.ru, na której znajduje się potrzebny nam dokument.
Pierwsze dwa przykłady (1) i (2) to ścieżki względne.  (3) – bezwzględne, czyli  określone w całości, w tym nazwa witryny (w naszym przypadku - http://www.homepage.ru/).  Używamy ścieżki bezwzględnej, gdy odwołujemy się do stron innych osób, używamy ścieżki względnej, gdy odwołujemy się do dokumentów w naszej witrynie.
Dla wszystkich linków w naszym dokumencie możemy określić kolory: link - kolor samego linku, alink - kolor aktywny link(wciśnięty), vlink - kolor już odwiedzonego linku.

  
Oprócz koloru całego tekstu w dokumencie, przepisujemy kolory linków w .  W naszym przykładzie kolory dla prostego linku, aktywnego i odwiedzanego są takie same, ale mogą się różnić - to zależy od Ciebie.







 






 text="#336699" bgcolor="#000000" link="#339999" alink="#339999" vlink="#339999">

 

Witam, to moja pierwsza strona.



Witam! :)


Niedawno zacząłem poznawać wirtualne życie, ale zgodnie z długą tradycją chciałem też stworzyć własną stronę główną dla moich nowych wirtualnych przyjaciół i znajomych, aby mogli
zobacz moje zdjęcia

, poczytaj o mnie, napisz kilka linijek w mojej księdze gości.


A może po prostu przypadkowy gość nagle chce mnie poznać, a ja będę miałkolejny wirtualny przyjaciel?  :) 

 Zdjęcie mnie pokazuje.  Jakość zdjęcia niestety nie jest zbyt dobra, więc nie jest wyraźna i trochę problematyczne jest dostrzeżenie rysów mojej twarzy.  Ale generalnie widać, że jest całkiem w porządku :)

Jeśli i Ty tak uważasz, to spotkajmy się kiedyś, porozmawiajmy, napijmy się herbaty w kawiarni?:) Kto wie, może my prawdziwe życie Zostańmy przyjaciółmi :)




 ()


Jak widać, nic skomplikowanego.
Jak pamiętasz, możemy ustawić różne kolory dla różnych bloków tekstu w naszym dokumencie ( ).  W przypadku linków tekstowych możemy również ustawić inny kolor - odbywa się to za pomocą tagu i jego atrybut koloru:

 zobacz moje zdjęcia
Notatka, - jest napisane wewnątrz tagu, jeśli napiszesz inaczej, nie będziesz mógł ustawić swojego linku na kolor inny niż kolor innych linków w dokumencie.
Przejdźmy teraz do następnego kroku i kontynuujmy naszą znajomość z linkami.

Samouczek HTML dla manekinów.  Autor - Allenova Natalia
 
 Od autora:

  "Napisałem ten przewodnik z myślą o początkujących, pamiętając, jak sam kiedyś zacząłem.  To nie jest sucha prezentacja wszystkiego, to próba pracy nad skojarzeniami, żeby wszystko było łatwiejsze do zapamiętania.  Gdzieś nie udało mi się uniknąć nudnych chwil, ale starałem się i nadal będę dążyć do uzupełniania i poprawiania wszystkiego, co od czasu do czasu napisane."



 
Pierwotniaki.
4 - „Pokoloruj sam. Zmień kolor tekstu”. 
5 - „Jak zmienić kolor tła strony. Trochę o etyce kolorów”. 
6 - „Paragrafy i DIV. Nauka wyrównywania tekstu”. 
7 - „Czym są nagłówki i jak ustawić rozmiar liter”. 
8 - „Kursywa, pogrubiony tekst, podkreślony i inne”. 
9 - „Czcionki standardowe. Jak przepisać czcionkę”. 
10 - „Co to jest ścieżka? Jak wstawiać zdjęcia”. 
11 - „Co można zrobić z obrazem. Obraz jako tło dokumentu itp.” 
12 - „O miłośniku kiełbasek i przymusowym przerwaniu przepływu tekstu wokół obrazu”. 
13 - „Link i jak sobie z nim poradzić”. 
14 - „Link do e-maila. Podpowiedź do linku tekstowego”. 
15 - "Czy obraz może być linkiem?" 
16 - „Gdzie się udać, do czego się odwoływać. Nowe okno po kliknięciu linku”. 
17 - „Mapy. Jak utworzyć łącze jako część obrazu”. 
18 - „Karty. Jako część obrazu utwórz link 2”. 
19 - "Karty. Jak zamienić część obrazka w link 3". 
20 - "Zakładka. Jak zrobić link w dokumencie."
Tabele.
21 - „Nauka tworzenia tabel”. 
22 - ciąg dalszy „Nauka tworzenia tabel”. 
23 - „Tabele, wyrównanie w pionie (valign)”. 
24 - „Tabele, nauka rozciągania komórek (rowspan, colspan)”. 
24-2 - "Dodatkowy rozdział. Odpowiedzi na pracę domową." 
25 - „Tabele, co to są odstępy między komórkami i dopełnienie komórek. Co zrobić z przestrzenią”. 
26 - „Zagnieżdżone tabele i kilka niuansów”. 
27 - „O ramach stołów i narzekanie na stoły w końcu”. 
28 - „Tworzenie prostej strony z tabelami”.
Dodatkowy.
29 - „Znaki specjalne lub ból głowy”. 
30 - „O liniach. Proste i przydatne”. 
31 - "Jak usunąć wcięcia (marginesy) dokumentu, górny margines, lewy margines, szerokość marginesu, wysokość marginesu". 
32 - "O listach. Listy nieuporządkowane". 
33 - "Listy porządkowe. Uwaga: co to jest specyfikacja i konsorcjum". 
34 - „Określone tagi, biegnący wiersz tekstu”.
Ramki.
35 - „Wprowadzenie. Dlaczego (ramki) są potrzebne?” 
36 - „Nauka tworzenia ramek”. 
37 - ciąg dalszy „Nauka tworzenia ramek”. 
38 - ciąg dalszy „Nauka tworzenia ramek”. 
39 - „Usuń pasek przewijania, pozbądź się ramek, dostosuj szerokość pól ramek”. 
40 - „Kiedy klikniesz link, dokument otwiera się w innej ramce, w pełnym oknie”. 
41 - "Ostatni rozdział o ramkach. Co to jest IFrame".
/ Samouczek HTML.  Krok 8.



Samouczek HTML dla manekinów.  Pierwotniaki.
 Krok 8. 
Teraz, gdy nauczyliśmy się ustawiać rozmiar czcionki, nadszedł czas, aby porozmawiać o tym, jak zdefiniować styl czcionki.  W tym rozdziale nauczymy się, jak pisać kursywą, podkreślać, przekreślać, pogrubiać, ustawiać tekst na monospace, jak indeksować górny i dolny — wszystkie te znaczniki są zwykle brane pod uwagę razem i nie odbiegamy od tradycji.
Przyjrzyjmy się najpierw kursywą i pogrubieniem tekstu:

 Pogrubiony tekst


 Tekst kursywą (kursywa)
Jak widać, wszystko jest proste.  Możesz je samemu szturchać w tekście, gdzie chcesz, do testów, a w przykładzie znów będę dręczyć mojego wirtualnego przyjaciela:
 


 


 


 

 












Witam, to moja pierwsza strona.



Witam! :)


Niedawno zacząłem poznawać wirtualne życie, ale zgodnie z długą tradycją chciałem też stworzyć własną stronę domową dla moich nowych wirtualnych przyjaciół i znajomych, aby mogli zobaczyć moje zdjęcia, poczytać o mnie, rzucić kilka linijek w mojej księdze gości.  A może po prostu przypadkowy gość nagle chce mnie poznać, a ja będę miałkolejny wirtualny przyjaciel?  :)


 


 

 ()


Teraz kilka linijek o czcionce mossyrinny.  Co to za czcionka?  Jest to czcionka ze znakami o tej samej stałej szerokości, jak czcionka maszynowa.  A tag to:

 czcionka o stałej szerokości 
W naszym przykładzie nie wejdę (zrób to sam).
Ponadto tekst zawarty w tagu jest wyświetlany czcionką o stałej szerokości. 
:
 
 
tekst (dużo spacji) tekst 
tekst (dużo spacji) tekst 
tekst (dużo spacji) tekst 
 Na metce 
Jest jedna niezwykła cecha: tekst w nim zawarty jest wyświetlany do spacji dokładnie tak, jak wpisałeś go w notatniku.  Ten znacznik może być przydatny na przykład do formatowania wierszy.
Do jednego fragmentu tekstu można zastosować kilka tagów jednocześnie:

 tekst

 
W naszym przykładzie tekst jest o stałej szerokości, pogrubiony i pisany kursywą (w ten sposób:).  Nie bój się używać różnych kombinacji tagów, eksperymentuj, ale mądrze :)
Tak więc pozostało nam jeszcze kilka tagów, które musimy opanować na tym etapie, zanim przejdziemy dalej.
Podkreślony tekst jest wprowadzany za pomocą znacznika :

  Podkreślony tekst
 
Tagi oraz przedstawiają tekst przekreśloną czcionką, możesz użyć dowolnej, która Ci się podoba, nie ma między nimi zasadniczej różnicy:

 przekreślone 

przekreślone 
Etykietka pojawia się dużym drukiem i drobnym drukiem w stosunku do tekstu głównego:

 Mały
normalny tekst 

Duża 
Tagi Sup i Sub definiują indeks górny i dolny.  Sup - góra, Sub - dół.  Gdzie mogą się przydać?  No na przykład pisząc jakąś formułę - H 2 O (wszystko, co wyciągamy ze szkoły :).
Napisany u góry łyk
indeks pod 
To w rzeczywistości wszystko.  Możemy przejść do następnego kroku.

Od autora: wszystko się kiedyś zaczyna.  Więc zdecydowałeś się w końcu opanować naukę budowania stron internetowych.  Musisz zacząć od język html.  Bardzo ważne jest, aby śmiało stawiać pierwsze kroki, w przeciwnym razie możesz się potknąć i nie kontynuować nauki.  Dziś opowiem Ci, jak najprościej i najefektywniej nauczyć się języka.
 
Dla każdego zawsze jest pierwszy raz.  Jako małe dziecko pewnego dnia musi postawić swoje pierwsze kroki, więc Ty, osoba, która zdecydowała się na tworzenie stron internetowych, musisz po raz pierwszy zanurzyć się w tym świecie.  Aby nurkowanie było jak najbardziej przyjemne, polecam podążanie najprostszą i zrozumiałą ścieżką.
 
Jak zacząłem i co musisz z tego zrozumieć
 
Uważam, że jest to bardzo przydatne i konieczne, aby opowiedzieć o tym, jak nauczyłem się html.  Przede wszystkim chcę od razu was pocieszyć, żebyście nie myśleli, że nauka html to budowanie promu kosmicznego.  Nie, wszystko jest o wiele prostsze.  Co więcej, aby opanować ten język, nie musisz posiadać żadnej podstawowej wiedzy.  Możesz być absolutnie zerowy w temacie, nawet nie rozumiejąc oczywistych rzeczy.
 
Tak więc pierwszym krokiem do nauki jest zrozumienie, że jest to łatwe.  Html jest naprawdę niesamowicie prosty.  Zasadniczo musisz dowiedzieć się tylko kilku rzeczy:
 
Jak przebiega proces tworzenia strony i dlaczego potrzebny jest tam html?
 
Jaka jest struktura dokumentu, na jakie części jest podzielony?
 
Czym są tagi i atrybuty, czym są i jak ich używać
 
Cóż, wszystko inne już szlifuje twoją wiedzę.  To nie jest technologia, w której trzeba przez 14 dni siedzieć przy komputerze i studiować teorię, a potem dopiero zacząć coś rozumieć i zacząć ćwiczyć.  Tak naprawdę pierwszą praktykę można rozpocząć już w pierwszej godzinie nauki.
 
Jak więc nauczyłem się tego języka?  Korzystałem z usług Yandex i Google, gdzie zdobyłem odpowiednie informacje (coś w rodzaju studiowania html).  Od razu zwróciłem uwagę na 1 stronę, na której było 15 lekcji na temat html w kolejności złożoności.  Kupiłem chyba zeszyt na 48 kartek, zebrałem się na odwagę i zacząłem się uczyć, zapisując prawie każdą literę w zeszycie i używając znaczników, których się właśnie nauczyłem 300 razy dziennie.
 
Ta sprawa była niesamowicie interesująca.  Właściwie ten sposób studiowania ma jeden problem:
  
Mimo to trochę brakowało szkolenia wideo.  Idealnie byłoby, gdyby żywa osoba w filmie jeszcze raz wyjaśniła, co jest napisane w tekście.
 
Tak więc dosłownie w 1 miesiąc nauczyłem się języka.  Oczywiście nie do końca.  Powiem ci, że nie trzeba go studiować od i do.  Na przykład zapytaj mnie teraz, co oznacza tag dfn lub bdi?  Zajrzę do instrukcji.  Ale to nie przeszkadza mi w łatwym tworzeniu stron w html, ponieważ 70-80% zawartych w nim tagów i atrybutów jest używanych niezwykle rzadko i praktycznie nie są potrzebne w standardowych sytuacjach.
 
Najszybszy sposób na naukę html na wysokim poziomie - plan krok po kroku
 
Szczerze mówiąc, w mojej głowie już widzę idealny plan, jak możesz perfekcyjnie nauczyć się języka w zaledwie 1 miesiąc, a nawet znacznie mniej, jeśli bardzo się postarasz.  Kiedyś spędzałem więcej czasu.
 
Wielki problem nauka za pomocą bezpłatnych informacji polega na tym, że często z jej pomocą wszystkie istotne sztuczki i sztuczki nie są ujawniane.  W związku z tym dodatkowe  Informacji należy szukać z innych źródeł.  Ale ludzie są leniwi i często tego nie znajdują, więc ich wiedza pozostaje niepełna.
 
Na szczęście nie musisz już niczego szukać, mogę Ci zaoferować najwięcej szybki sposób nauka języka gwarantującego rezultaty.  Wszystkie lekcje dostępne są na naszej stronie internetowej.
 
Po przejściu przez pierwszy krok uzyskasz ogólną wiedzę na temat tworzenia witryny.  Po przejściu kolejnego kroku będziesz w stanie z łatwością zrozumieć podstawową teorię html, a nawet stworzyć proste strony internetowe umieszczając na nich tabele, obrazki, formularze itp.
 
Następnym krokiem jest pełna praktyka.  Mianowicie budujesz stronę internetową.  Bardzo proste, ponieważ po raz pierwszy jest to dokładnie to, czego potrzebujesz.  Najważniejszą rzeczą na tym etapie jest nauczenie się stosowania zdobytej wiedzy.  W końcu wiedza bez zastosowania nie ma wartości.  Nie chcesz uczyć się html, żeby chwalić się znajomym, prawda?  Mam nadzieję, że nie za to.  Celem jest nauczenie się korzystania z html jako język podstawowy przy tworzeniu stron internetowych.
 
Następnym i ostatnim krokiem jest przestudiowanie najbardziej aktualnych informacji na temat nowych tagów i funkcji wprowadzonych przez html5, aby przestudiować nowe funkcje css3.  Cóż, w samym kursie w końcu dokonasz potężnego przełomu w budowaniu witryn: tworzysz trzy witryny, każda trudniejsza niż poprzednia.  O tak, nawet 4, ponieważ jest jeszcze kilka lekcji dla Ciebie jako bonus.
 
Ostatnią zbudowaną przez Ciebie stroną będzie sklep internetowy.  Czujesz moc takiego treningu?  Teraz jesteś kompletnym 0 (może nawet nie wiesz, co to jest tag), a za miesiąc będziesz mieć profesjonalny szablon sklepu internetowego.  Nie wiem nawet, jaki przykład dać.  To tak, jakbyś jechał na czterokołowym rowerze, a potem od razu przesiadł się do BMW.
 
Wynik
 
Ogólnie zasugerowałem najlepszy sposób na naukę języka.  Oczywiście będzie to wymagało od Ciebie inwestycji.  Jako inwestycja pieniędzy oraz czasu i wysiłku.  Ale to naprawdę najkrótsza droga od początkującego do profesjonalisty.
 
Być może przesadzam, nie chcę cię oszukiwać, bo profesjonalistami nie zostajesz w miesiąc, ale jak długo jedna osoba błąka się po serwisach miesiącami i latami, zbierając darmowe informacje, możesz działać skuteczniej i przejść przez ścieżkę uczenia się 15-20 razy bardziej produktywnie.