Zawartość

• Kroki
• Metoda 1 z 2: Praca w HTML 4.01
• Metoda 2 z 2: Praca w CSS / HTML5

W tym artykule dowiesz się, jak dodać poziomą linię w HTML. Linia pozioma może służyć do oddzielania treści na stronie. Kod do tworzenia linii jest dość prosty. Jednak w HTML 4.01 możliwa jest zmiana projektu linii za pomocą poleceń wewnętrznych. W HTML5 będziesz musiał użyć CSS do stylizacji linii.

Kroki

Metoda 1 z 2: Praca w HTML 4.01

1. 1 Otwórz istniejący lub utwórz nowy dokument HTML. Dokumenty HTML można edytować za pomocą edytora tekstu, takiego jak Notatnik, lub specjalistycznego edytora kodu, takiego jak Adobe Dreamweaver. Wykonaj następujące kroki, aby otworzyć dokument HTML w wybranym programie:
   • Otwórz Notatnik lub inny edytor tekstu / kodu.
   • Otwórz menu Plik.
   • Kliknij otwarty.
   • Wybierz plik HTML.
   • Kliknij otwarty
2. 2 Wybierz lokalizację, w której chcesz wstawić linię. Przewiń w dół, aż znajdziesz wiersz, powyżej którego powinien pojawić się wiersz, a następnie przesuń kursor bezpośrednio na początek tego wiersza, klikając skrajną lewą stronę tego wiersza.
3. 3 Dodaj pustą linię. Podwójne wciśnięcie ↵ Wejdźaby przejść w dół tekstu, przed którym chcesz wstawić wiersz, a następnie umieść kursor w pustym wierszu.
4. 4 Dodaj tag hr>. Wchodzić godz.> do pustego miejsca na początku wiersza. Etykietka godz.> umożliwia narysowanie poziomej linii na całej stronie.
5. 5 Przesuń kursor za znacznikiem "hr" do nowej linii, naciskając ↵ Wejdź. Teraz tag godz.> powinien znajdować się w osobnej linii.
6. 6 Dodaj atrybuty do linii poziomej (opcjonalnie). Dodaj atrybuty, takie jak długość, grubość, kolor i wyrównanie. Ujmij je w nawiasy klamrowe zaraz po „hr”. Aby dodać wiele atrybutów, oddziel je spacją.
   • Wchodzić hr rozmiar = "#">aby zmienić grubość linii. Zastąp „#” liczbową wartością grubości (na przykład size = „10”).
   • Wchodzić szerokość godz. = "#">aby zmienić szerokość linii. Zastąp „#” liczbą pikseli lub procentem szerokości strony (na przykład szerokość = „200” lub szerokość = „75%”).
   • Wchodzić hr kolor = "#">aby zmienić kolor linii. Zastąp „#” nazwą koloru lub jego kodem szesnastkowym (na przykład color = „red” lub color = „# FF0000”).
   • Wchodzić hr align = "#">aby wyrównać linię. Zamień „#” na „w prawo” (w prawo), „w lewo” (w lewo) lub „w środku” (w środku) (na przykład hr width = "50%" align = "center">).
7. 7 Zapisz plik HTML. Aby zapisać plik tekstowy jako dokument HTML, musisz zmienić rozszerzenie pliku (.txt, .docx) na „.html”. Wykonaj następujące kroki, aby zapisać dokument HTML:
   • Otwórz menu Plik.
   • Kliknij Zapisz jako.
   • Wprowadź nazwę pliku w polu Nazwa pliku.
   • Dodać .html po nazwie pliku.
   • Kliknij Ratować.
8. 8 Sprawdź swój dokument HTML. Aby sprawdzić plik HTML, kliknij go prawym przyciskiem myszy i wybierz Otwórz za pomocą. Następnie wybierz swoją przeglądarkę internetową. W miejscu wstawienia tagu „hr” powinna pojawić się linia ciągła. Kod HTML będzie wyglądał mniej więcej tak:

   DOCTYPE html> html> body> h1> Heading / h1> hr size = "6" width = "50%" align = "left" color = "green"> p1> Ta linia powinna być oddzielona od nagłówka linią . / P1 > / body> / html>

Metoda 2 z 2: Praca w CSS / HTML5

1. 1 Otwórz istniejący lub utwórz nowy dokument HTML. Dokumenty HTML można edytować za pomocą edytora tekstu, takiego jak Notatnik, lub specjalistycznego edytora kodu, takiego jak Adobe Dreamweaver. Wykonaj następujące kroki, aby otworzyć dokument HTML w wybranym programie:
   • Otwórz Notatnik lub inny edytor tekstu / kodu.
   • Otwórz menu Plik.
   • Kliknij otwarty.
   • Wybierz plik HTML.
   • Kliknij otwarty
2. 2 Dodaj tytuł do dokumentu HTML. Jeśli Twój dokument HTML nie ma jeszcze nagłówka, wykonaj poniższe czynności, aby go dodać. Nagłówek musi znajdować się po tagu html> i przed tagiem body>.
   • Wchodzić głowa> u góry dokumentu.
   • Podwójne wciśnięcie ↵ Wejdźaby dodać dwie nowe linie.
   • Wchodzić / głowa>aby zamknąć tytuł.
3. 3 Wchodzić typ stylu = "tekst / css"> wewnątrz nagłówka. Znacznik stylu jest umieszczony między dwoma znacznikami nagłówka, aby utworzyć miejsce, w którym można użyć CSS do modyfikacji projektu HTML.
   • Alternatywnie możesz użyć zewnętrznego arkusza stylów. Przeczytaj artykuł "Jak wstawić plik CSS do HTML»Aby dowiedzieć się, jak połączyć zewnętrzny plik CSS z plikiem HTML.
4. 4 Wchodzić godz. {. To jest tag CSS do stylizacji linii poziomej. Dodaj go po tagu „style” w nagłówku lub zewnętrznym pliku CSS.
5. 5 Dodaj style CSS dla tagu hr>. Muszą pojawić się po tagu „hr {”. Linię poziomą można stylizować na wiele sposobów. Poniżej kilka z nich.
   • Wchodzić szerokość: ## px;aby dostosować szerokość linii. Zastąp „##” szerokością linii w pikselach. Zamiast pikseli (px) możesz użyć wartości procentowej (%).
   • Wchodzić wysokość: ## px;aby dostosować grubość linii. Zastąp „##” szerokością linii w pikselach.
   • Wchodzić kolor tła: ##;aby określić kolor linii. Zastąp „##” nazwą koloru lub hashem (#), po którym następuje szesnastkowy kod koloru.
   • Wchodzić margines prawy: ## px;aby określić liczbę pikseli od prawej krawędzi. Zastąp „##” liczbą pikseli lub kodem „auto”. Wpisz „auto”, aby wyrównać linię do lewej lub do środka.
   • Wchodzić margines lewy: ## px;aby określić liczbę pikseli od lewej krawędzi. Zastąp „##” liczbą pikseli lub kodem „auto”. Wpisz „auto”, aby wyrównać linię do prawej lub do środka.
   • Wchodzić górny margines: ## px; aby określić górną wyściółkę linii. Zastąp „##” liczbą odpowiadającą dopełnieniu w pikselach.
   • Wchodzić margines-dolny: ## px;aby określić dolną wyściółkę linii. Zastąp „##” liczbą odpowiadającą dopełnieniu w pikselach.
   • Wchodzić szerokość obramowania: ## px;aby narysować ramkę wokół linii (opcjonalnie). Zastąp „##” liczbą odpowiadającą szerokości obramowania w pikselach.
   • Wchodzić kolor ramki: ##;aby określić kolor obramowania (opcjonalnie). Zastąp „##” nazwą koloru lub hashem (#), po którym następuje szesnastkowy kod koloru.
6. 6 Wchodzić } po atrybutach stylu, aby zakończyć stylizację znacznika hr>.
7. 7 Wchodzić godz.> w dowolnym miejscu w treści dokumentu HTML, aby dodać linię poziomą. Ustawienia stylu CSS będą stosowane za każdym razem, gdy użyjesz tagu hr> w dokumencie HTML. Twój kod powinien wyglądać mniej więcej tak:

   !DOCTYPE html> html> head> style type = "text / css"> hr {szerokość: 50%; wysokość: 20px; kolor tła: czerwony; margines prawy: auto; margines lewy: auto; margines górny: 5px; margines-dolny: 5px; szerokość obramowania: 2px; kolor obramowania: zielony; } / style> / head> body> h1> Nagłówek / h1> hr> p1> Ta linia powinna być oddzielona od nagłówka linią poziomą / p1> / body> / html>