HTML to szeroko używany język znaczników do zbudowania struktury strony internetowej. Zapewnia różne tagi, które są wykorzystywane do dodawania różnych elementów do strony internetowej, takich jak , ,
, I . Te tagi są zdefiniowane w edytorze tekstu i widoczne w przeglądarce. W tym artykule omówiono:
Warunki wstępne do utworzenia strony internetowej Jak utworzyć stronę HTML? Jak zbudować witrynę HTML z kodem? Jak stylizować elementy HTML przez CSS? Warunki wstępne do utworzenia strony internetowej
Warunkiem wstępnym do utworzenia strony internetowej to:
Edytor tekstu Przeglądarka internetowa Co to jest edytor tekstu?
Edytor tekstu to program komputerowy, który umożliwia użytkownikom edytowanie, przechowywanie i drukowanie tekstu. Te redaktorzy są często znani jako oprogramowanie Notatnik. Istnieje kilku redaktorów tekstowych, takich jak:
Notatnik Kod Studio Visual Sublime Text Notatka: Do demonstracji użyjemy edytora kodu Visual Studio. Użytkownicy mogą zainstalować dowolny z edytorów tekstu zgodnie z ich preferencjami.
Jak utworzyć stronę HTML?
Procedura krok po kroku tworzenia witryny w kodzie Visual Studio wyjaśniono poniżej.
Krok 1: Utwórz folder projektu
Najpierw utwórz folder i nazwij go tak, jak chcesz. Na przykład określiliśmy nazwę pliku jako „Html ". W tym folderze utworzymy podgadniki i pliki dla naszego projektu:
Krok 2: Open Folder
Otwórz folder projektu, kliknij prawym przyciskiem myszy, a następnie wybierz „Otwórz kodem „Opcja z menu kontekstowego:
W rezultacie zostanie wyświetlone następujące okno:
Krok 3: Utwórz nowy „.plik html ”
Utwórz nowy plik, klikając nową ikonę pliku, jak pokazano na poniższym obrazku:
Zapisz plik za pomocą „.html " rozszerzenie.
Krok 4: Dodaj kod HTML
Dodaj wymagany kod HTML w pliku:
Wykonajmy przykład, aby zobaczyć, jak kod HTML wykonuje i wyświetla stronę internetową w przeglądarce.
Jak zbudować stronę internetową w HTML?
Aby zbudować stronę internetową od zera, sprawdź poniżej podane kroki.
Krok 1: Utwórz pojemnik „Div”
W HTML stwórz div o nazwie „pojemnik ". W ramach tej div dodamy elementy do utworzenia strony internetowej:
Krok 2: Dodaj elementy „Nagłówek” i „Nav”
Wewnątrz pojemnika Div umieść „”Tag. Element nagłówka zawiera obraz i pasek nawigacyjny. Mówiąc dokładniej, pasek nawigacyjny wyświetla listę linków do kilku sekcji naszej strony internetowej:
Krok 3: Dodaj „Banner sekcji”
Dodać "" Tag z nazwą klasy „transparent ". Ta sekcja zawiera
Tag do nagłówka:
Krok 4: Utwórz sekcję „Około”
Następnie stwórz „o nas „Sekcja, która będzie zawierać informacje o naszej stronie internetowej. Utwórzmy to, najpierw dodając nagłówek z „
O nas
Linuxhint to najlepsza witryna samouczka online. Stąd możesz nauczyć się inaczej
Czytaj więcej Idźmy naprzód w kierunku następnego kroku.
Krok 5: Zrób sekcję „OurServices”
Następnie dodaj sekcję dla „Nasze Usługi ". Ta sekcja będzie zawierać informacje o usłudze o naszej stronie internetowej.
Utwórzmy to, dodając dwa Divy do DIV o imieniu „Nasze Usługi ". Pierwszy div ”usługi ”Będzie zawierał divy drzewne o nazwie„praca „Każdy z innymi informacjami. Każdy "praca ”Div zawiera różne wartości atrybutów,
i tagi przycisków:
Zapewniamy światu wysokiej jakości edukację.
Zobacz usługę Zapewniamy światu wiedzę o pojawiających się technologiach.
Zobacz usługę Chętnie pomoże światu.
Zobacz usługę Krok 6: Zdefiniuj element „stopki”
Aby zrobić stopkę witryny, użyj „”Tag. Ten element zawiera znacznik, który wyświetla zawartość z mniejszym tekstem:
(c) Prawa autorskie - Wszelkie prawa zastrzeżone Struktura naszej witryny to Don. Teraz przejdźmy do CSS w celu stylizacji.
Jak stylizować elementy HTML przez CSS?
Teraz sprawdź, jak stylizujemy naszą stronę internetową za pomocą właściwości CSS.
Styl wszystkie elementy (*)
* Gwiazdka „ * ”Jest używany w CSS do wyboru dowolnego lub wszystkich rodzajów elementów i zastosowania następujących właściwości:
"margines „Własność jest wykorzystywana do dawania miejsca wokół elementu. "wyściółka ”Służy do dawania miejsca wokół treści elementu. "rozmiar pudełka ”Określa metodę obliczenia ogólnej wysokości i szerokości elementu. "rodzina czcionek ”Definiuje styl czcionki. Styl „H2”
H2 „„ "rozmiar czcionki ”Służy do ustawiania rozmiaru czcionki. "grubość czcionki ”Określa grubość czcionki. Element „sekcji” stylu
Sekcja Do stylu "Sekcja ”, Zastosuj poniżej wyświetlone właściwości:
"Wyściółka ”Jest wykorzystywany do dawania miejsca na treści. "Wyściółka ”Zastosuje przestrzeń na dole treści. Element „guzika” stylu
przycisk Każdy przycisk naszej witryny będzie utrzymywał następujące właściwości:
"kolor tła ”Stosuje kolor do tła przycisku. "kolor „Właściwość określa kolor podpisu przycisku. "granica „Właściwość stosuje granicę do przycisku, określając szerokość, typ i kolor. "wyściółka „Własność służy do dawania miejsca wokół treści tekstu. "rozmiar czcionki ”Ustawia rozmiar czcionki. "kursor ”Określa wskaźnik myszy na zawisie. Styl „kontener” div
.pojemnik Tutaj:
"maksymalna szerokość „Właściwość określa maksymalną szerokość elementu. "margines „Własność jest wykorzystywana do dawania miejsca wokół elementu. Styl „nagłówek”
nagłówek Według danego fragmentu kodu:
"Wyściółka ”Jest wykorzystywany do dawania miejsca u góry treści. "Wyściółka ”Jest ustawione na przestrzeń na dole treści. "kolor tła ”Jest ustawiony tak, aby zastosować kolor na tło elementu. "wyświetlacz ”Określa zachowanie wyświetlania. Wartość elastyczna służy do wykonania elastycznego układu. "justify-content ”Umieści elastyczne elementy zgodnie z podaną wartością. "Wyrównanie ”Ustawia wyrównanie elementu wewnątrz elastycznego pojemnika. Styl „Nagłówek
nagłówek ul Lista nieopisanej znacznika nagłówka jest powiązana z następującymi właściwościami:
"List w stylu ”Służy do nadania stylu listy. W przykładzie ustaliliśmy jego wartość jako „nic „Aby usunąć podkreślenie z listy. "wyświetlacz „Właściwość jest wykorzystywana do określenia zachowania wyświetlania znaczników. Wartość elastyczna służy do wykonania elastycznego układu. Styl „A”
nagłówek ul li a Elementy kotwiczne znacznika nagłówka są dostarczane z następującymi stylami:
"dekoracja tekstu „Właściwość służy do dekoracji tekstu za pomocą różnych stylów linii. "wyściółka ”Służy do dawania miejsca wokół każdego znacznika kotwicy. "kolor „Właściwość ma zastosować kolor do tekstu znacznika kotwicy. Styl „baner” div
.baner Div z imieniem „transparent ”Jest stylizowany w następujący sposób:
"zdjęcie w tle „Ta właściwość jest przypisana adresie URL obrazu tła. "pozycja w tle ”To pozycja obrazu jako centrum. "powtarzanie tła ”Właściwość ustawia obraz jako brak powtórzenia. "Rozmiar tła ”Jest ustawiona jako pokrywa, co oznacza, że obraz pasuje do div. "Wyściółka ”Daje przestrzeń na górze treści. "Wyściółka „Daje miejsce na dole treści. Styl „H2” TAG of Banner Div
.Banner H2
Tag banerowej Div jest stosowany z tymi właściwościami:
"kolor „Właściwość ustawia kolor tekstu. "tekst-align „Z centrum wartości ustawym tekst jako środek wyrównany. "rozmiar czcionki ”Właściwość ustawia rozmiar czcionki elementu. Styl „Aboutus” Div
.o nas „„.o nas ”Służy do dostępu do klasy ous. „„tekst-align „Właściwość jest ustawiona tekst elementu w środku.
Styl tagów „H2” i „P”
.O H2,Następnie ustaw „Wyściółka „Nieruchomość jako„20px „Do obu
I
tagi.
Styl „OurServices” Div
.Nasze Usługi Div „OurServices” jest wyposażony w „kolor tła " Jak "#efefef ".
Styl „usługi” div
.Nasze Usługi .usługi Dziecko Div ”usługi „Diva Div”Nasze sevices ”Jest stylizowany z właściwościami opisanymi poniżej:
"wyświetlacz „Właściwość jest wykorzystywana do ustawienia zachowania wyświetlania. Wartość elastyczna stanowi elastyczny układ. "justify-content ”Property poziomo wyrównuje elementy elastycznego elementu. Styl „Service” Div
.Nasze Usługi .praca „„.Nasze Usługi .praca ”Odnosi się do Dziecięcia Div”praca ”Diva Div„Nasze Usługi „Div. Każda usługa jest zdefiniowana za pomocą tekstu nieruchomości z centrum wartości.
Element „guzika” stylu
.przycisk OurServices Własność "margines ”Jest wykorzystywany do ustawiania miejsca na górze elementu przycisku.
Element stylu „stopki”
stopka Tag stopu jest stylizowany w następujący sposób:
"Wyściółka ”Ma na celu zapewnienie miejsca na górze zawartości stopki. "Wyściółka ”Ma na celu zapewnienie miejsca na dole zawartości stopki. "kolor tła ”Ma zastosować kolor z tyłu stopki. "kolor ”Określa kolor czcionki. "tekst-align ”Jest ustawiony jako centrum. Krok 5: Zapisz plik HTML i otwórz go w przeglądarce
Zapisz plik HTML za pomocą kombinacji kluczowej „Ctrl+s ”Lub zapisz, wybierając„Ratować „Opcja z menu pliku w lewym górnym rogu edytora. Następnie kliknij prawym przyciskiem myszy w oknie pracy kodu Visual Studio i kliknij „Otwórz z serwerem na żywo „Opcja z menu rozwijanego, jak pokazano poniżej:
Notatka: Jeśli nie zainstalowałeś rozszerzenia serwera na żywo, postępuj zgodnie z naszym innym dedykowanym postem.
Jak widać, pomyślnie stworzyliśmy i zaprojektowaliśmy naszą stronę internetową:
Chodziło o budowę strony internetowej z kodem HTML i CSS.
Wniosek
Język znaczników hipertekstów jest standardem do tworzenia stron internetowych. Istnieją setki elementów używanych w plikach HTML. Każdy element jest wykorzystywany do niektórych określonych zadań dla aplikacji internetowej. Aby napisać kod HTML, konieczne jest użycie edytora tekstu, takiego jak Sublime Text, Visual Studio Code, Notepad ++ lub więcej. W tym artykule z powodzeniem wyjaśniono procedurę krok po kroku w celu utworzenia strony internetowej HTML w kodzie Visual Studio.
