HTML - tagi podstawowe

Tagi nagłówka

Każdy dokument zaczyna się od nagłówka. Możesz użyć różnych rozmiarów dla swoich nagłówków. HTML ma również sześć poziomów nagłówków, które używają elementów<h1>, <h2>, <h3>, <h4>, <h5>, i <h6>. Podczas wyświetlania dowolnego nagłówka przeglądarka dodaje jedną linię przed i jedną po tym nagłówku.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Heading Example</title>
   </head>
	
   <body>
      <h1>This is heading 1</h1>
      <h2>This is heading 2</h2>
      <h3>This is heading 3</h3>
      <h4>This is heading 4</h4>
      <h5>This is heading 5</h5>
      <h6>This is heading 6</h6>
   </body>
	
</html>

To da następujący wynik -

Znacznik akapitu

Plik <p>tag oferuje sposób na podzielenie tekstu na różne akapity. Każdy akapit tekstu powinien znajdować się między otwierającym tagiem <p> a zamykającym </p>, jak pokazano poniżej w przykładzie -

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Paragraph Example</title>
   </head>
	
   <body>
      <p>Here is a first paragraph of text.</p>
      <p>Here is a second paragraph of text.</p>
      <p>Here is a third paragraph of text.</p>
   </body>
	
</html>

To da następujący wynik -

Znacznik końca linii

Ilekroć używasz <br />element, wszystko następujące po nim zaczyna się od następnego wiersza. Ten tag jest przykładem plikuempty element, w którym nie ma potrzeby otwierania i zamykania tagów, ponieważ nie ma między nimi nic.

Znacznik <br /> zawiera spację między znakami bri ukośnik. Jeśli pominiesz tę spację, starsze przeglądarki będą miały problemy z renderowaniem podziału wiersza, a jeśli pominiesz znak ukośnika i po prostu użyjesz <br>, nie jest to poprawne w XHTML.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Line Break  Example</title>
   </head>
	
   <body>
      <p>Hello<br />
         You delivered your assignment ontime.<br />
         Thanks<br />
         Mahnaz</p>
   </body>
	
</html>

To da następujący wynik -

Wyśrodkowanie treści

Możesz użyć <center> znacznik, aby umieścić dowolną zawartość na środku strony lub w dowolnej komórce tabeli.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Centring Content Example</title>
   </head>
	
   <body>
      <p>This text is not in the center.</p>
      
      <center>
         <p>This text is in the center.</p>
      </center>
   </body>
	
</html>

To da następujący wynik -

Linie poziome

Poziome linie służą do wizualnego podziału sekcji dokumentu. Plik<hr> tag tworzy linię od bieżącej pozycji w dokumencie do prawego marginesu i odpowiednio ją przerywa.

Na przykład możesz chcieć umieścić linię między dwoma akapitami, jak w podanym przykładzie poniżej -

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Horizontal Line Example</title>
   </head>
	
   <body>
      <p>This is paragraph one and should be on top</p>
      <hr />
      <p>This is paragraph two and should be at bottom</p>
   </body>
	
</html>

To da następujący wynik -

Jeszcze raz <hr /> tag jest przykładem empty element, w którym nie ma potrzeby otwierania i zamykania tagów, ponieważ nie ma między nimi nic.

Plik <hr /> element ma spację między znakami hri ukośnik. Jeśli pominiesz tę spację, starsze przeglądarki będą miały problem z renderowaniem linii poziomej, a jeśli pominiesz znak ukośnika i po prostu użyj<hr> nie jest poprawne w XHTML

Zachowaj formatowanie

Czasami chcesz, aby Twój tekst był zgodny z dokładnym formatem, w jakim jest zapisany w dokumencie HTML. W takich przypadkach możesz użyć wstępnie sformatowanego tagu<pre>.

Dowolny tekst między początkiem <pre> tag i zamykający </pre> tag zachowa formatowanie dokumentu źródłowego.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Preserve Formatting Example</title>
   </head>
	
   <body>
      <pre>
         function testFunction( strText ){
            alert (strText)
         }
      </pre>
   </body>
	
</html>

To da następujący wynik -

Spróbuj użyć tego samego kodu, nie przechowując go w środku <pre>...</pre> tagi

Przestrzenie nierozerwalne

Załóżmy, że chcesz użyć wyrażenia „12 gniewnych mężczyzn”. W tym przypadku nie chcesz, aby przeglądarka dzieliła „12, Zły” i „Mężczyźni” na dwie linie -

An example of this technique appears in the movie "12 Angry Men."

W przypadkach, gdy nie chcesz, aby przeglądarka klienta przerywała tekst, powinieneś użyć nierozdzielającej jednostki spacji  zamiast normalnej przestrzeni. Na przykład podczas kodowania „12 gniewnych ludzi” w akapicie powinieneś użyć czegoś podobnego do następującego kodu -

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Nonbreaking Spaces Example</title>
   </head>
	
   <body>
      <p>An example of this technique appears in the movie "12&nbsp;Angry&nbsp;Men."</p>
   </body>
	
</html>

To da następujący wynik -