Zawartość

• Kroki
• Część 1: Jak odkryłem HTML
• Rada
• Ostrzeżenie
• Czego potrzebujesz

HTML (HyperText Markup Language) to podstawowy język do tworzenia stron internetowych. Został stworzony jako łatwy i elastyczny język kodowania. Prawie każda witryna internetowa jest tworzona przy użyciu jakiejś formy tego kodu (ColdFusion, XML, XSLT). HTML jest łatwy do zrozumienia, ale możesz się o nim uczyć przez długi czas, jeśli interesuje Cię jego wszechstronna funkcjonalność. Aby dodać kolor i zabawę do swojej witryny, możesz nauczyć się podstawowych CSS, gdy tylko przyzwyczaisz się do podstawowej strony HTML.

Kroki

Część 1 z 4: Tworzenie dokumentu

1. 

   Otwórz prosty edytor tekstu. NotePad to dobra opcja, którą można pobrać bezpłatnie. Możesz pisać HTML za pomocą większości edytorów tekstu, ale bardziej złożone oprogramowanie z funkcjami automatycznego formatowania może utrudnić porządkowanie strony HTML.
   • Nie używaj TextEdit, ponieważ zazwyczaj zapisuje plik w formacie, którego Twoja przeglądarka może nie rozpoznać jako HTML.
   • Możesz także skorzystać z internetowego edytora HTML. Dedykowane programy do edycji HTML nie są zalecane dla początkujących.

2. 

   
   
   Zapisz plik jako stronę internetową. Wybierz Plik → Zapisz jako w menu u góry. Zmień format pliku na „Strona internetowa”, „.html” lub „.htm”. Zapisz plik w łatwo dostępnym miejscu.
   • Nie ma różnicy między tymi trzema opcjami.

3. 

   Otwórz plik w przeglądarce. Kliknij dwukrotnie plik, a otworzy się on automatycznie jako pusta strona internetowa w przeglądarce. Alternatywnie możesz otworzyć przeglądarkę, taką jak Firefox lub Internet Explorer i użyć Plik → Otwórz plik, aby wybrać dokument.
   • Ta strona internetowa nie jest online. Można go przeglądać tylko na komputerze.

4. 

   
   
   Odśwież stronę internetową i zobacz wprowadzone zmiany. Wpisz następujące informacje w pustym dokumencie: cześć. Zapisz dokument. Odśwież pustą stronę internetową w przeglądarce. U góry strony powinno pojawić się pogrubione słowo „Witaj”. Ilekroć chcesz przetestować swój nowy kod HTML w trakcie tego samouczka, zapisz dokument .htm, a następnie odśwież okno przeglądarki, aby zobaczyć, jak kompilowany jest HTML.
   • Jeśli widzisz słowa „"i"'' Pojawia się w Twojej przeglądarce, plik nie został poprawnie skompilowany w HTML. Wypróbuj inny edytor tekstu lub inną przeglądarkę.

5. 

   
   
   Naucz się tagów. Polecenia HTML są zapisane w „tagach”, które mówią przeglądarce, jak skompilować i wyświetlić stronę internetową. Są zawsze zapisane w pojedynczych cudzysłowach , i nie są wyświetlane na stronie internetowej tak, jak zostały użyte w powyższym przykładzie:
   • to „karta startowa” lub „karta otwarta”. Wszystko, co zostanie napisane po tym tagu, będzie określone jako „pogrubione” (pogrubienie na stronie internetowej).
   • to „tag końcowy” lub „tag zamykający”, który można odróżnić po symbolu / znaku. Oznacza koniec pogrubionego tekstu. Większość (nie wszystkie) tagów wymaga do działania tagu końcowego, więc pamiętaj, aby go uwzględnić.

6. 

   Zbuduj swój dokument. Usuń wszystko z dokumentu HTML. Zacznij od następnego tekstu, dokładnie tak, jak został napisany (bez wypunktowania). Ten kod HTML informuje przeglądarkę, jakiego typu HTML używasz, i że cały kod HTML zostanie umieszczony wewnątrz tagów. i .

7. 

   Dodaj znaczniki głowy (głowy) i ciała. Dokumenty HTML są podzielone na dwie części. Sekcja „góra” zawiera specjalne informacje, takie jak tytuł strony. Sekcja „body” zawiera główną treść strony. Dodaj obie te sekcje do swojego dokumentu i pamiętaj o dołączeniu znaczników końcowych. Nowo dodany tekst jest pogrubiony:

8. 

   Nadaj swojej stronie tytuł. Większość kart w sekcji głównej nie ma znaczenia, aby uczyć się z początkującym. Znacznik tytułu jest jednak łatwy w użyciu i określa, co pojawia się jako nazwa okna przeglądarki lub na karcie przeglądarki. Umieść tagi początku i końca nagłówka wewnątrz tagów head, a między tagami wpisz dowolne nagłówki:
   Reklama

Część 2 z 4: Formatowanie tekstu

1. 

   Dodaj tekst do swojego ciała. W tej sekcji będziemy pracować tylko z tagami body. Drugi tekst nadal będzie w twoim dokumencie, ale zaoszczędzimy miejsce, nie powtarzając go w tym samouczku. Napisz, co chcesz, między kartami i i pojawi się jako pierwsza treść na Twojej stronie. Na przykład:
   • Postępowałem zgodnie z instrukcjami wikiHow, aby napisać stronę HTML.

2. 

   Dodaj nagłówki tekstu. Uporządkuj swoją stronę za pomocą tagów nagłówków, które instruują przeglądarkę, aby wyświetlała między nimi tekst większym rozmiarem czcionki. Te tagi są również używane przez wyszukiwarki i inne narzędzia do określania, o czym jest Twoja witryna i jak jest zorganizowana.
   jest największym nagłówkiem i możesz tworzyć mniejsze nagłówki do
   . Wypróbuj je na swojej stronie:
   • Witam na mojej stronie.

   • Postępowałem zgodnie z instrukcjami wikiHow, aby napisać stronę HTML.

   • Mój dzisiejszy cel:

   • Zrealizowane cele:

   • Dowiedz się, jak używać nagłówków.

   • Niezrealizowane cele:

   • Dowiedz się więcej o tagach formatowania tekstu.

3. 

   Dowiedz się więcej o tagach formatowania tekstu. Widzieliście już „silny” tag, ale istnieje wiele innych sposobów formatowania tekstu. Wypróbuj te tagi lub wiele tagów naraz dla tego samego ciągu tekstowego. Pamiętaj, aby dodać końcowe tagi z tyłu!
   • Ważny tekst, pogrubiony w przeglądarce.
   • Wyróżniony tekst, kursywą w przeglądarce.
   • Tekst trochę mniejszy niż zwykle. Ten tekst automatycznie zmieni rozmiar, jeśli zostanie użyty w nagłówku.
   • Tekst nie jest już istotny, wyświetlany z kreską w treści.
   • Tekst jest wstawiany później niż inne dokumenty i jest wyświetlany z podkreśleniami.

4. 

   Uporządkuj tekst na swojej stronie. Być może zauważyłeś, że naciśnięcie klawisza „enter” nie wystarczy, aby tekst pojawił się w innym wierszu. Te znaczniki mogą pomóc w tworzeniu akapitów i podziałów wierszy lub układaniu tekstu w inny sposób:

   • Skrót od „akapit”, ten tag zachowa cały tekst między tymi tagami w akapicie i oddzieli go od tekstu powyżej i poniżej.

   • 
     Ten tag będzie generował podziały wierszy. Nie dodawaj do niego tagu końcowego, ponieważ nie koliduje z żadną inną zawartością. Użyj tego znacznika w wierszach lub wierszach adresu, a nie w akapitach.

   • Jeśli chcesz bardzo dokładnie wyświetlić tekst, ten znacznik ustawia tekst w nim na czcionkę o stałej szerokości (każda litera ma tę samą szerokość) i umożliwia tworzenie interwałów Spacje i podziały wierszy, jak chcesz, do regularnej edycji zamiast tagów.

   • Ten tag określa typ tekstu cytowanego ze źródła.

     Możesz opisać źródło później za pomocą cytować kartę.

5. 

   Dodaj niewidoczny tekst podpisu. Tagi komentarzy nie są wyświetlane na stronie internetowej. Umożliwiają dodawanie adnotacji do dokumentu HTML bez wpływu na zawartość. Nie dodawaj tagu końcowego.
   • Karty, które idą same bez tagów kończących, nazywane są „pustymi tagami”.

6. 

   Połącz je razem. Najlepszym sposobem na zapamiętanie tych tagów jest użycie ich w swojej witrynie. Oto przykład użycia kart w krokach, których się do tej pory nauczyłeś. Spróbuj przewidzieć, jak pojawią się w przeglądarce, a następnie skopiuj je do swojego dokumentu i dowiedz się.
   • Witam na mojej stronie internetowej.

   • Mamy nadzieję, że podoba Ci się ta strona!

     Zrobiłem to tylko dla Ciebie.

   • Część 1: Jak odkryłem HTML

   • Nauczyłem się HTML już w jeden dwagodzin, więc teraz jestem ekspertem.
   Reklama

Część 3 z 4: Dodawanie łączy i obrazów

1. 

   Dowiedz się o atrybutach. Tagi mogą zawierać dodatkowe informacje, zwane atrybutami. Te atrybuty są reprezentowane przez dodatkowe słowa w samych tagach w formularzu nazwa właściwości = „konkretna wartośćNa przykład każdy tag HTML może mieć atrybut title:

   • Paragraf wprowadzający jest tutaj.

     Zatytułuj akapit „Wprowadzenie”, który pojawi się po najechaniu kursorem na akapit na stronie internetowej.

2. 

   Linki do innych stron internetowych. Korzystanie z kart aby utworzyć hiperłącze do dowolnej innej strony internetowej. Wstaw adres URL strony internetowej, do której ma prowadzić łącze za pomocą atrybutu href. Oto przykład prowadzący do czytanej strony internetowej:
   • Osoby odwiedzające Twoją witrynę internetową mogą kliknąć ten tekst, aby przejść do łącza.

3. 

   Dodaj atrybut id do tagu. Kolejnym atrybutem, którego może używać każdy znacznik HTML, jest element „id”. Napisz na dowolnej karcie id = "vidu" lub użyj dowolnej nazwy, która nie zawiera spacji. Nie daje widocznego efektu, ale wykorzystamy go w kolejnym kroku.
   • Na przykład dodaj do dokumentu następujące elementy:

     Ten akapit służy jako przykład do opisu działania atrybutu id.

4. 

   Link do elementu o określonym identyfikatorze. Teraz możemy użyć tagu hiperłącza, , aby utworzyć łącze do innej lokalizacji na tej samej stronie. Zamiast adresu URL użyjemy symbolu #, po którym nastąpi wartość id, do której chcemy utworzyć link. Na przykład, Ten tekst będzie linkiem do tekstu o identyfikatorze „vidu”.
   • We wszystkich wartościach HTML rozróżniana jest wielkość liter. „#VIDU” i „#vidu” będą prowadzić do tej samej lokalizacji.
   • Jeśli Twoja strona jest wystarczająco krótka, aby wyświetlić całą stronę od razu, prawdopodobnie nie zauważysz, że coś się dzieje, klikając łącze w przeglądarce. Zmień rozmiar okna, aż pojawi się pasek przewijania, a następnie spróbuj ponownie.

5. 

   Dodaj zdjęcia. Karta jest pustym tagiem, co oznacza, że ​​nie jest potrzebny żaden tag końcowy. Wszystkie informacje potrzebne przeglądarce do wyświetlenia obrazu są dodawane za pomocą atrybutów. Oto przykład wyświetlania logo wikiHow z opisem każdego atrybutu za:
   • 
   • Nieruchomości src = „” informuje przeglądarkę, gdzie jest zdjęcie. (Pamiętaj, że opublikowanie zdjęcia z witryny innej osoby jest uważane za nieodpowiednie - a zdjęcie zniknie, gdy strona nie będzie już aktywna).
   • Nieruchomości style = „” Może robić wiele rzeczy, ale przede wszystkim służy do ustawiania szerokości i wysokości obrazu w pikselach. (Możesz także użyć oddzielnych atrybutów width = "" i height = "", ale może to prowadzić do dziwnych problemów ze zmianą rozmiaru, jeśli używasz CSS.)
   • Nieruchomości alt = „” to krótki opis obrazu, który zobaczy użytkownik, jeśli nie udało się załadować obrazu. Jest to uważane za wymóg, ponieważ jest używane w czytnikach ekranu dla niewidomych odwiedzających witrynę.
   Reklama

Część 4 z 4: Więcej informacji Dodawanie i umieszczanie witryny internetowej w Internecie

1. 

   Potwierdź swój kod HTML. Sprawdzanie poprawności HTML pod kątem błędów w kodzie. Jeśli witryna nie wyświetla się poprawnie, weryfikacja może pomóc Ci znaleźć błąd, który jest przyczyną problemu. Może również nauczyć Cię więcej o HTML, określając, czy kod wygląda dobrze na wyświetlaczu, ale nie jest już zalecany z powodu nowych aktualizacji standardu HTML. Użycie nieprawidłowego kodu HTML nie powoduje, że witryna jest bezużyteczna, ale może powodować problemy lub może być niestabilna w różnych przeglądarkach.
   • Wypróbuj bezpłatną usługę walidacji online firmy W3C lub wyszukaj inne narzędzie do weryfikacji HTML 5 online.

2. 

   Dowiedz się więcej tagów i atrybutów. Istnieje wiele innych tagów i atrybutów HTML oraz wiele miejsc, w których można się ich nauczyć:
   • Wypróbuj w3schools i HTML Dog, aby uzyskać więcej samouczków i pełne listy tagów.
   • Znajdź stronę internetową, która Ci się podoba, a następnie użyj funkcji przeglądarki „Wyświetl źródło strony”, aby samodzielnie zobaczyć kod HTML. Skopiuj go do swojego dokumentu i przestudiuj, jak to działa.
   • Przeczytaj inne artykuły i dowiedz się, jak tworzyć tabele w HTML, używać metatagów, aby zwiększyć swoje szanse na znalezienie ich w wyszukiwarkach, lub użyć podziału. ustaw obszar na stronie) i rozpiętość (używane do określenia stylu elementu tekstowego), aby ułatwić stylizację za pomocą CSS.

3. 

   Udostępnij swoją witrynę internetową. Wybierz usługę hostowania swojej witryny internetowej, a następnie możesz przesłać dowolną liczbę stron HTML do swojej osobistej domeny internetowej. Aby to zrobić, musisz użyć oprogramowania do przesyłania FTP, ale wiele wypożyczalni internetowych oferuje również tę usługę.
   • W przypadku tworzenia linków do stron lub obrazów znajdujących się bezpośrednio w Twojej witrynie musisz użyć pełnego adresu. Na przykład, jeśli nazwa Twojej domeny to www.chuyengiahtmlsieudang.com, to tekst znajduje się w tych tagach będzie prowadzić do „www.chuyengiahtmlsieudang.com/nhatky/thuhai.html”

4. 

   Dodaj style za pomocą CSS. Jeśli Twoja strona HTML wygląda trochę monotonnie, spróbuj nauczyć się podstaw CSS, aby dodawać kolory, różne czcionki i lepiej kontrolować miejsce umieszczania elementów. Podłączenie „arkusza stylów” CSS do strony HTML pozwoli ci na dokonywanie drastycznych zmian w locie, automatycznie dostosowując styl całego tekstu w danym tagu. Możesz tutaj trochę pobawić się podstawową warstwą formatowania lub zagłębić się w bardziej szczegółowe samouczki w samouczku CSS HTML Dog.

5. 

   Dodaj JavaScript do swojej witryny. JavaScript to język programowania używany do dodawania wielu funkcji do stron HTML. Polecenia JavaScript są wstawiane między znacznikiem początkowym i końcowym i może służyć do dodawania interaktywnych przycisków, obliczania zadań matematycznych i nie tylko. Dowiedz się więcej z przykładów w3c. Reklama

Rada

• Deklaracja doctype (użyta deklaracja typu dokumentu) użyta w tym samouczku to „luźna przejściowa wersja HTML 4.0.1” (HTML 4.0.1 nie ma ścisłego przejścia), łatwy format. dla nowicjuszy do użytku. Posługiwać się () alternatywa dla skompilowania go przez przeglądarkę w ścisłym formacie HTML 5, który jest zalecanym (choć rzadziej używanym) standardowym stylem.

Ostrzeżenie

• Celem HTML jest zachowanie treści w formacie globalnym. Nie ma kontroli nad prezentacją Twojej witryny, np. Kolorem tła i dokładnym rozmieszczeniem elementów. Chociaż nadal istnieją tagi, które pozwalają to zrobić, dobrym pomysłem jest użycie CSS do stworzenia bardziej kontrolowanej i spójnej witryny.

Czego potrzebujesz

• Prosty edytor tekstu, taki jak NotePad lub TextEdit
• Przeglądarka internetowa, taka jak Internet Explorer lub Mozilla Firefox
• (Opcjonalnie) Edytor HTML, taki jak Adobe Dreamweaver, Aptana Studio lub Microsoft Expression Web