Struktura dokumentu HTML: poznaj podstawową strukturę HTML

Opublikowany: 2020-12-14

HTML był używany jako standardowy język znaczników dla dokumentów dostępnych w Internecie za pośrednictwem danych przeglądarki. HTML składa się z serii krótkich elementów, tagów i kodów, które po skompilowaniu w ustrukturyzowanym formacie tworzą stronę internetową, którą może wyświetlić każdy, kto ma odpowiedni dostęp do Internetu.

Zmieniło sposób, w jaki ludzie pracują. HTML i CSS służą do tworzenia i manipulowania elementami na stronie internetowej wraz z javascript, HTML pozwala twórcom zdefiniować różne role dla każdego elementu, dając pełną swobodę dostosowywania w procesie tworzenia.

HTML oznacza Hyper Text Markup Language i służy do projektowania stron internetowych, które są wyświetlane na stronach internetowych.

Istnieją trzy główne aspekty, które połączone razem pomagają zbudować stronę internetową.

Struktura HTML — obsługuje elementy strukturalne
Styl CSS — pomaga w projektowaniu i nadaje styl tym elementom konstrukcyjnym
Interakcja JS — umożliwia interakcję między tymi elementami

W strukturze HTML elementy i znaczniki są ze sobą połączone w celu oznaczenia treści.

Każda strona dostępna w Internecie zawiera znaczniki HTML. Tagi te pomagają wyświetlać treści online z jasną i otwartą perspektywą, którą zawsze można moderować i zmieniać. W celu uproszczenia wyjaśnijmy, w jaki sposób elementy i tagi są używane w programie.

Zmieniają się elementy otwierające i zamykające, ale tagi pozostają takie same. Tagi są wstawiane przed i na końcu zdań, umożliwiając ich formatowanie na stronie. Idealna strona internetowa składa się z trzech głównych i niezbędnych sekcji:

Tytuł
Głowa
Ciało

Element Head służy do podświetlenia początku/nagłówka sekcji głowy. Sekcja nagłówka zawsze pomaga jako opis strony. Treść w tagach head, tj. nagłówek, jest wykorzystywana jako źródło do identyfikacji zawartości strony.

Poniżej wymienione są wszystkie tagi, których można użyć w elemencie head:

<baza>
<link>
<meta>
<noscript>
<skrypt>
<styl>
<tytuł>

Na przykład:

<GŁOWA>

<TITLE> Przykład Hello world w HTML<TITLE>

</HEAD>

Elementy na poziomie blokowym służą do identyfikowania określonych sekcji strony internetowej, czy to akapitu, podtytułów, czy niektórych list do utworzenia.

Akapit: <P>i </P>

Nagłówek, poziom pierwszy:<H1>Nagłówek, poziom drugi:<H2>i </H2>

Linia pozioma:<HR> Centrowanie:<CENTRUM>

Stopka : nie ma specjalnych tagów, które by to oznaczały, ale nadal zaleca się umieszczenie stopki na stronie internetowej, aby pomóc zidentyfikować sekcje wymagające kontaktu z autorem. Mogą zawierać sekcję FAQ lub e-mail, aby zapisać się do biuletynu.

<HTML>

<GŁOWA>

<TITLE> Firma obuwnicza <TITLE>

</HEAD>

<H1>Witamy w niesamowitych butach! </H1>: </H2>

<CENTER> Dlaczego nie odwiedzić <A HREF =..http://www.example1.com/..>Przykładowa witryna

</A>

</CENTRUM>

</BODY>

</HTML>

Powyższa sekcja wyjaśnia główne elementy struktury HTML na stronie internetowej.

Teraz przechodzimy do źródła HTML i próbujemy zrozumieć, jak można go wykorzystać do zrozumienia struktury programu i jego elementów.

Jako początkującemu bardzo pomaga to zrozumieć, w jaki sposób tworzone są inne strony, i można je wykorzystać jako odniesienie do stworzenia dostosowanej wersji dla własnej strony internetowej.

Kliknij prawy przycisk w dowolnym miejscu na stronie, a następnie wybierz „wyświetl źródło strony”. Otworzy się okno zawierające kod źródłowy strony.

Aby sprawdzić stronę

Kliknij prawy przycisk w dowolnym miejscu na stronie, a następnie wybierz „Sprawdź”, aby zobaczyć listę i typy elementów użytych do zbudowania tej konkretnej strony internetowej. Zawierałby zarówno HTML, jak i CSS, które można modyfikować za pomocą panelu stylów.

Po wyjaśnieniu podstawowej struktury HTML i jego tagów, przejdźmy teraz do zrozumienia podstawowych elementów wymaganych do pisania treści w HTML.

<p> Ten tag jest używany na stronie internetowej, gdy potrzebny jest akapit, a na jego końcu używany jest tag </p> .

<br> Ten tag służy do łamania wierszy i jest używany głównie do zapisywania pojedynczych wierszy, czy to kontaktu, czy adresu.

<hr> Ten tag służy do rozdzielenia zawartości strony internetowej na dwie sekcje.

Wszystkie tagi tutaj są zaimplementowane w przykładowym kodzie strony internetowej

Dowiedz się: 21 pomysłów na projekty dotyczące tworzenia stron internetowych

WEJŚCIE

<html>

<głowa>

</head>

<ciało>

<h1>Struktura HTML</h1>

<p>

Według wyższej edukacji<br>

<hr>

Poznaj podstawy <br>

<hr>

Według wyższej edukacji<br>

</p>

</body>

</html>

Atrybuty

W przypadku wszystkich wspomnianych tagów atrybut jest używany, gdy istnieje potrzeba dodatkowych informacji. Atrybuty są definiowane za pomocą dwóch parametrów, a mianowicie „wartość” i „nazwa”.

W tym przypadku parametr „name” ma funkcję, która przyjmuje nazwę właściwości, którą uważa się za przypisaną. A parametr „value” ma podobną funkcję, która przyjmuje wartość nazw właściwości dopasowanych do elementu.

<img> Ten atrybut służy do dodawania/osadzenia obrazu na stronie internetowej. Ten tag pomoże określić ścieżkę obrazu. A <wysokość> i <szerokość> wskazują odpowiednio wysokość i szerokość obrazu.

<alt> Ten atrybut jest stosowany, gdy obraz nie może zostać załadowany z powodu błędu połączenia lub z innego powodu. Tag alt służy jako podtytuł do obrazu.

Zapisz się na kursy inżynierii oprogramowania z najlepszych światowych uniwersytetów. Zdobywaj programy Executive PG, Advanced Certificate Programs lub Masters Programs, aby przyspieszyć swoją karierę.

Przeczytaj: 8 ekscytujących pomysłów i tematów na projekty Full Stack

Przykład

<html>

<ciało>

<h2>Atrybut src</h2>

<p>Obrazy HTML są definiowane za pomocą tagu img, a nazwa pliku źródła obrazu jest określona w atrybucie src:</p>

</body>

</html>

Do zmiany stylu, rozmiaru, czcionki i innych funkcji związanych z tekstem służy znacznik <style>

Przykład

<html>

<ciało>

<h2>Atrybut stylu</h2>

<p>Atrybut służy do zmiany stylów, takich jak kolor:</p>

<p style=”color:red;”>To jest czerwony akapit.</p>

</body>

</html>

Wraz z aplikacjami do modyfikacji tekstu, HTML zapewnia również znaczniki do modyfikowania tekstu do niestandardowych żądań przy użyciu tych znaczników.

<b> – tekst pogrubiony
<strong> – Ważny tekst
<i> – kursywa
<em> – Wyróżniony tekst
<mark> – zaznaczony tekst
<mały> – mniejszy tekst
<del> – usunięty tekst
<ins> – wstawiony tekst
<sub> – Tekst indeksu dolnego
<sup> – tekst w indeksie górnym

Podsumowując artykuł, poznaliśmy następujące funkcje i podstawy HTML:

Struktura HTML
Tagi, elementy i ich rodzaje
Podstawowe tagi i ich zastosowania

Wszystkie te funkcje, znaczniki i atrybuty pomagają zrozumieć potrzebę HTML.

Jeśli chcesz dowiedzieć się więcej o tworzeniu oprogramowania z pełnym pakietem, zapoznaj się z programem Executive PG UpGrad i IIIT-B w zakresie tworzenia oprogramowania z pełnym pakietem, który jest przeznaczony dla pracujących profesjonalistów i oferuje ponad 500 godzin rygorystycznych szkoleń, ponad 9 projektów, i zadania, status absolwentów IIIT-B, praktyczne praktyczne projekty zwieńczenia i pomoc w pracy z najlepszymi firmami.

Przygotuj się na karierę przyszłości

Aplikuj teraz na studia magisterskie z inżynierii oprogramowania