Strona internetowa to dokument z sieci World Wide Web napisany w języku znaczników hipertekstu. Ten język składa się z setek elementów, zwanych również „tagi". Podczas gdy arkusz stylów kaskadowych może pomóc w HTML w celu zapewnienia właściwości stylizacji elementom HTML.

Podczas rozpoczynania tworzenia stron internetowych początkujący mogą nie znać metody utworzenia prostej strony HTML i jej wykonania. Tak więc ten podręcznik pokaże:

• Warunki wstępne do utworzenia strony internetowej
• Jak utworzyć prostą stronę HTML?
• Jak stylizować prostą stronę HTML?

Warunki wstępne do tworzenia strony internetowej

Aby utworzyć stronę internetową, warunki wstępne to:

• Edytor tekstu
• przeglądarka internetowa

Edytor tekstu jako warunek wstępny do tworzenia strony internetowej

Oprogramowanie komputerowe, które pozwala użytkownikom na edytowanie, przechowywanie i drukowanie tekstu, jest edytorem tekstu. Kilku redaktorów tekstowych można wykorzystać do tworzenia programów internetowych, stron internetowych i innych, takich jak kod Visual Studio, Sublime Text, Notate i tak dalej. Jeśli jesteś początkującym, Notatnik jest stosunkowo łatwy w użyciu. Ale w przypadku dużych projektów lepiej jest korzystać z dowolnego innego edytora, takiego jak Sublime Text lub Visual Studio Code.

Przeglądarka internetowa jako warunek wstępny do przeglądania strony internetowej

Przeglądarka internetowa to oprogramowanie, które zabiera Cię w dowolnym miejscu w Internecie. Pobiera informacje i wyświetla je na ekranie.

Jak utworzyć prostą stronę HTML?

Teraz zacznijmy tworzyć prostą stronę HTML krok po kroku.

Krok 1: Utwórz pusty folder
Najpierw utwórz pusty folder jako repozytorium naszego projektu:

Krok 2: Otwórz edytor tekstu
Aby napisać kod HTML, najpierw wybierz wybrany edytor tekstu. Na przykład użyjemy Notatnika ++, a jego obszar roboczy w jakiś sposób będzie wyglądał tak:

Krok 3: Dodaj elementy HTML do edytora tekstu
Elementy HTML są używane do konstruowania różnych komponentów dokumentu HTML. Na przykład, aby dodać akapit,

Używany jest znacznik, znaczniki nagłówka są oznaczone jako

,

,

,

,

, I

. Aby dodać obraz, można zastosować znacznik. Wszystkie te znaczniki są dodawane w tagach początkowych i zamykających elementu głównego .

Na przykład dodaliśmy przykładowy kod HTML w naszym pliku w następujący sposób:

Html

Witamy na mojej pierwszej stronie HTML.

Poniższy obraz pokazuje przykładowy kod napisany w notatniku ++:

Krok 4: Zapisz plik
Zapisz plik HTML w folderze, który utworzyłeś w pierwszym kroku, klikając „Ratować„Opcja, jak pokazano poniżej:

W rezultacie zostaniesz poproszony o określenie nazwy pliku i jego typu. Po tym kliknij „Ratować”Przycisk, jak pokazano poniżej:

Krok 5: Otwórz plik z przeglądarką internetową
Aby zobaczyć, w jaki sposób plik HTML pojawia się w przeglądarce, postępuj zgodnie z poniższymi krokami:

• Najpierw otwórz folder, w którym zapisany jest plik HTML.
• Wybierz plik i kliknij prawym przyciskiem myszy na pliku. W rezultacie pojawi się rozwijane menu.
• Następnie wybierz „Otwierać z”Opcja, a następnie wybierz przeglądarkę, której chcesz użyć do otwarcia strony internetowej. Na przykład wybraliśmy „Google Chrome”:

Wybierając przeglądarkę, kod HTML wygeneruje wynik w następujący sposób:

W ten sposób możemy utworzyć prostą stronę HTML. Możesz zastosować style do tych elementów HTML za pomocą CSS.

Jak stylizować prostą stronę HTML?

CSS lub kaskadowy arkusz stylów jest wykorzystywany do określenia, w jaki sposób elementy HTML są wyświetlane w przeglądarce internetowej. Pozwala użytkownikom zastosować kilka właściwości stylizacji do elementów HTML, aby strona internetowa wyglądała bardziej atrakcyjnie i atrakcyjnie.

Teraz stylizujmy wyżej wymyśloną stronę HTML za pomocą właściwości CSS:

• Najpierw dodaj znacznik w sekcji głównej pliku HTML.
• Wewnątrz H1 służy do uzyskania dostępu do

  tag, na którym zastosujemy różne właściwości.

• Aby dodać kolor czcionki, użyj „kolor„Właściwość i ustal jej wartość jako„czerwony".
• „„tekst-align„Wartość właściwości jest ustalana jako„Centrum”, Co oznacza, że ​​nagłówek będzie wyświetlany w środku.
• Następnie, aby podkreślić nagłówek, „dekoracja tekstu„Własność jest ustalona jako„8px Podkreśl szary”, Gdzie 8px reprezentuje szerokość linii, podkreślenie jest właściwością dekoracyjną, a szary to kolor. Użytkownicy mogą ustawić wartości właściwości zgodnie z ich preferencjami.
• Podobnie zastosujemy niektóre właściwości do

  również element.

Poniżej znajduje się kod wyżej opisanego scenariusza:

Zapisz plik, a następnie otwórz go w przeglądarce internetowej:

To super! Nauczyliśmy się tworzyć prostą stronę HTML i stylizować ją za pomocą niektórych właściwości CSS.

Wniosek

Aby opracować stronę internetową, po pierwsze, użytkownicy muszą nauczyć się języków HTML i CSS, ponieważ język HTML zapewnia strukturę strony internetowej i upiększyć strony internetowe, używamy właściwości CSS. Te właściwości są ustawione zgodnie z wyborem użytkownika. Aby utworzyć prosty plik HTML, możesz użyć edytora tekstu lub edytora kodu i postępować zgodnie z podaną procedurą. Niniejszy podręcznik wyjaśnił, jak utworzyć prostą stronę HTML z CSS za pomocą praktycznego wdrożenia.