Jak utworzyć prostą stronę internetową z HTML

W tym artykule powiemy Ci, jak utworzyć prostą stronę internetową za pomocą kodu HTML. HTML jest jednym z głównych elementów Internetu, ponieważ określa strukturę stron internetowych. Strona internetowa Możesz utworzyć w edytorze tekstu w systemie Windows lub MacOS.

Kroki

Część 1 z 6:

Jak dodać znacznik "głowy" (opis strony internetowej)

jeden. Otwórz edytor tekstu. W systemie Windows uruchom notatnik lub notatnik ++, aw MacOS - Textedit:

Windows - Otwórz menu Start

, Wpisz w ciągu wyszukiwania notatnik lub Notatnik++, A następnie kliknij "Notatnik" lub "Notatnik ++" w górnej części menu "Start".

System operacyjny Mac - Kliknij "Spotlight"

, Wchodzić Textedit, A następnie kliknij dwukrotnie "Textedit" na górze wyników wyszukiwania.

2. Wchodzić i naciśnij ↵ Enter. Poinformujesz więc przeglądarkę internetową, że jest to dokument HTML.

3. Wchodzić i naciśnij ↵ Enter. To jest otwarcie tagu kodu HTML.

cztery. Wchodzić i naciśnij ↵ Enter. Ten znacznik zawiera opis strony internetowej i elementów nagłówka. Zawartość tego znacznika na stronie zazwyczaj nie jest wyświetlana. Treści są opisem strony, metadanych, tabele stylów CSS i innych języków skryptowych.

pięć. Wchodzić . Ten znacznik zawiera nazwę strony.

6. Wprowadź nazwę strony. Wprowadź tekst, który ma być wyświetlany na karcie strony.

7. Wchodzić i naciśnij ↵ Enter. Ten znacznik zamyka znacznik nazw strony.

osiem. Wchodzić i naciśnij ↵ Enter. Ten znacznik zamyka znacznik opisu strony. Na tym etapie kod HTML powinien wyglądać tak.

Moja strona internetowa

Część 2 z 6:

Jak dodać znacznik "ciała" (wszystkie zawartość)

jeden. Wpisz Tag pod tagiem zamykającym "głowa". Ten znacznik zawiera całą zawartość dokumentu HTML. Zawartość Ten znacznik jest wyświetlany na stronie internetowej.

2. Wchodzić . Ten znacznik zawiera tytuł strony. Tytuł jest dużym tekstem, który zwykle znajduje się na górze strony.

3. Wprowadź tytuł strony. Może to być nazwa strony lub powitania.

cztery. Wchodzić Po tekście nagłówka i kliknij ↵ Enter. Ta znacznik zamyka tag tytułowy.

Dodaj dodatkowe nagłówki w razie potrzeby. Możesz utworzyć do sześciu nagłówków - odbywa się to za pomocą tagów - . Nagłówki będą miały różne rozmiary. Na przykład kod tworzenia trzech nagłówków o różnych rozmiarach będzie:

Witam na mojej stronie!Mam na imię Max.Mam nadzieję, że nie będziesz nudny.

pięć. Wchodzić . Ten znacznik zawiera akapit tekstowy. Taki znacznik wyświetli tekst normalnego rozmiaru.

6. Wpisz tekst. Na przykład wprowadź opis strony internetowej lub inne informacje.

7. Wchodzić Po tekście i kliknij ↵ Enter. Ta znacznik zamyka tekst akapitu tekstu. Poniżej znajduje się przykład akapitu w dokumencie HTML:

To jest pierwszy akapit.

Aby utworzyć kilka akapitów pod jednym nagłówkiem, dodaj kilka wierszy z rzędu.

Zmień kolor tekstu. Na początku tekstu wprowadź tag , I na końcu tagu . Zamiast słowa "kolor" Zastąp żądany kolor (w języku angielskim) i nie usuwaj cytatów. Tagi te pozwolą Ci zmienić kolor dowolnego tekstu (na przykład nagłówek). Na przykład, aby wykonać tekst na tekst, wprowadź następujący kod: Wieloryby - majestatyczne zwierzęta.

Ponadto czcionka może być odważna, nachylona i inne. Poniżej znajdują się przykłady formatowania tekstu za pomocą tagów HTML:

 Tekst tekstowy Bold Podręcznik  Tekst podstawiający  Wyściełany tekst

Część 3 z 6:

Jak dodać dodatkowe przedmioty

jeden. Dodaj zdjęcie na stronę. Dla tego:

Wchodzić . Ten tag zawiera zdjęcie.
Skopiuj i wklej adres URL obrazu po znaku równości (=) w cytatach.
Wchodzić > Po obrazie URL, aby zamknąć tag obrazu. Na przykład, jeśli obraz URL jest http: // Mój obraz.Com / Ocean.JPG, wprowadź następujący kod:

 Src ="http: // Mój obraz.Com / Ocean.jpg">

2. Dodaj link do innej strony internetowej. Dla tego:

Wchodzić . Ten tag zawiera link do innej strony.

Skopiuj i wklej adres URL po znaku równości (=) w cytatach.

Wchodzić > Po URL, aby zamknąć adres.

Wprowadź tekst łącza po symbolu ">".

Wchodzić Po link tekstowy, aby zamknąć znacznik łącza. Poniżej znajduje się przykład odniesienia do Yandex.

 href ="https: // Ya.Ru"> Yandex.

3. Dodaj szczelinę ciągu. Aby to zrobić, wejdź . Wstaw zostanie transfer rzędów. Ten znacznik można użyć do oddzielania różnych partycji strony.

Część 4 z 6:

Jak zmienić kolory

jeden. Skontaktuj się z oficjalną listą kolorów i ich kodów w kolorze HTML. World Consortium (W3C) prowadzi oficjalną listę kolorów, które można znaleźć w https: // W3.Org / Wiki / CSS / Właściwości / Kolor / Słowa kluczowe. Każdy kolor ma formalną nazwę, 6-cyfrowy kodeks szesnastkowy i dziesiętny. Możesz użyć dowolnego z tych parametrów, aby ustawić kolor elementów na swojej stronie. W tym przykładzie przyjmiemy oficjalne nazwy kolorów.

2. Ustaw kolor tła za pomocą tagu . Aby to zrobić, musisz dodać atrybut do tagu Styl. Załóżmy, że chcesz zrobić tło całej strony lawenda (Lavend):

3. Ustaw kolor tekstowy dla dowolnej tagu. Atrybut Styl Możesz także użyć, aby wskazać, jaki kolor cały tekst w określonym znaczniku. Na przykład, chcesz tekst w jednym z tagów Był Niebieska północ (Ciemny niebieski):

Zmiana koloru dotyczy tylko tekstu w tym znaczniku . Jeśli później otworzysz nowy tag , gdzie tekst powinien mieć kolor Niebieska północ, Atrybut "Styl" będzie musiał poprosić o niego.

cztery. Ustaw kolor tła dla nagłówka lub akapitu. Tak jak określiłeś kolor tła dla tagu ciała, możesz wybrać kolory tła dla innych tagów. Na przykład, chcesz kolor tła Był Jasnoszary (jasnoszary) i kolor nagłówka nagłówka H1 - LightskyBlue (jasny niebieski):

Część 5 z 6:

Jak zamknąć kod HTML

jeden. Wchodzić , Aby zamknąć tag "ciało". Po zakończeniu dodawania tekstu, obrazów i innych elementów wprowadź określony znacznik na dole dokumentu HTML.

2. Wchodzić , Aby zamknąć kod HTML. Wprowadź ten znacznik pod oznaczeniem zamykającym "Ciało". Więc poinformujesz przeglądarkę internetową, która po tym tagu nie ma kodu HTML. Cały kod HTML musi być w przybliżeniu:

Strona wentylatora YandexPozdrowienia dla ciebie na mojej stronie"http: // Ya.Ru"> Yandex

Część 6 z 6:

Jak zapisać i otworzyć stronę internetową

jeden. Konwertuj dokument do normalnego tekstu (tylko dla użytkowników MacOS). Kliknij "Format" (na górze ekranu)> "Utwórz prosty tekst" (w menu rozwijanym).

Nie można tego robić w oknach.

2. Kliknij Plik. Ta opcja znajduje się w pasku menu na górze ekranu.

3. Kliknij Zapisz jako. Znajdziesz tę opcję w menu Plik.

Możesz także kliknąć Ctrl+S (Windows) lub ⌘ polecenie+S (Prochowiec).

cztery. Wprowadź nazwę dokumentu HTML. Wpisz go w ciągu "Nazwa pliku" (Windows) lub "Nazwa" (Mac).

pięć. Zmień format pliku za pomocą TXT na HTML. Dla tego:

Windows - Kliknij menu "Typ pliku", wybierz "Wszystkie pliki", a następnie wejdź .Html Na końcu nazwy pliku.

System operacyjny Mac - Na końcu nazwy pliku .TEKSTWchodzić .Html.

6. Kliknij Zapisać. Ta opcja znajduje się na dole okna. Plik HTML zostanie utworzony.

Zazwyczaj pliki HTML otwierają się w domyślnej przeglądarce internetowej.

7. Zamknij edytor tekstu. Teraz otwórz plik HTML w przeglądarce, w której można wyświetlić utworzoną stronę internetową.

osiem. Otwórz plik HTML w przeglądarce. Aby to zrobić, kliknij dwukrotnie plik HTML. Jeśli zostanie powiadomiony błąd, wykonaj następujące czynności:

Windows - Kliknij prawym przyciskiem myszy Plik, wybierz "Otwórz za pomocą", a następnie kliknij żądaną przeglądarkę.

System operacyjny Mac - Kliknij plik, kliknij polecenie "Plik", wybierz "Otwórz za pomocą", a następnie wybierz żądaną przeglądarkę.

dziewięć. Edytuj dokument HTML (jeśli jest to wymagane). Możesz zauważyć błąd na stronie. Aby go naprawić, wprowadzaj zmiany w zawartości pliku HTML:

W systemie Windows kliknij prawym przyciskiem myszy pliku i wybierz "Edytuj" (jeśli Notepad ++ jest zainstalowany na komputerze, wybierz opcję "Edytuj w Notepad ++").

Kliknij plik MacOS, kliknij "Plik", wybierz "Otwórz za pomocą" i kliknij "Textedit". Teraz przeciągnij plik HTML do okna TextEdit.

Rada

Możesz dodać pasek boczny tekstu przewijania za pomocą tagu .Ale pamiętaj, że niektóre przeglądarki nie rozpoznają tego znacznika.
Wiele osób używa notatnika ++ do napisania i skompilowania kodu.
Każdy znacznik musi się zamknąć. Na przykład tagi Powinien być zamknięty taki: .
Aby wyjaśnić zdjęcie na stronie, wprowadź Po nazwie obrazu w tagu "img" (na przykład, ).

Ostrzeżenie

Załaduj zdjęcia do Imgur lub podobne, jeśli zamierzasz je dodać do strony internetowej. Pamiętaj, że użycie zdjęć należących do innych osób narusza prawa autorskie.