HTML - szybki przewodnik

HTML oznacza Htaktwew Markup Language i jest to najczęściej używany język do tworzenia stron internetowych.

Hypertextodnosi się do sposobu, w jaki strony internetowe (dokumenty HTML) są ze sobą połączone. W związku z tym łącze dostępne na stronie internetowej nazywa się hipertekstem.
Jak sama nazwa wskazuje, HTML to plik Markup Language co oznacza, że używasz HTML do „zaznaczania” dokumentu tekstowego za pomocą tagów, które informują przeglądarkę internetową, jak zorganizować jego wyświetlanie.

Pierwotnie HTML został opracowany z zamiarem zdefiniowania struktury dokumentów, takich jak nagłówki, akapity, listy itp., Aby ułatwić wymianę informacji naukowych między badaczami.

Obecnie HTML jest powszechnie używany do formatowania stron internetowych za pomocą różnych tagów dostępnych w języku HTML.

Podstawowy dokument HTML

W najprostszej formie poniżej znajduje się przykład dokumentu HTML -

<!DOCTYPE html>
<html>

   <head>
      <title>This is document title</title>
   </head>
	
   <body>
      <h1>This is a heading</h1>
      <p>Document content goes here.....</p>
   </body>
	
</html>

Tagi HTML

Jak powiedziano wcześniej, HTML jest językiem znaczników i wykorzystuje różne znaczniki do formatowania treści. Te znaczniki są zawarte w nawiasach kątowych<Tag Name>. Z wyjątkiem kilku tagów, większość tagów ma odpowiadające im znaczniki zamykające. Na przykład,<html> ma swój tag zamykający </html> i <body> tag ma swój tag zamykający </body> tag itp.

Powyższy przykład dokumentu HTML używa następujących tagów -

Sr.No	Tag i opis
1	<!DOCTYPE...> Ten tag określa typ dokumentu i wersję HTML.
2	<html> Ten znacznik obejmuje cały dokument HTML i składa się głównie z nagłówka dokumentu, który jest reprezentowany przez <head> ... </head> oraz treści dokumentu, która jest reprezentowana przez znaczniki <body> ... </body>.
3	<head> Ten tag reprezentuje nagłówek dokumentu, który może przechowywać inne tagi HTML, takie jak <title>, <link> itp.
4	<title> Znacznik <title> jest używany wewnątrz tagu <head>, aby wspomnieć o tytule dokumentu.
5	<body> Ten tag reprezentuje treść dokumentu, która przechowuje inne tagi HTML, takie jak <h1>, <div>, <p> itp.
6	<h1> Ten tag reprezentuje nagłówek.
7	<p> Ten tag reprezentuje akapit.

Aby nauczyć się języka HTML, musisz przestudiować różne tagi i zrozumieć, jak zachowują się podczas formatowania dokumentu tekstowego. Nauka języka HTML jest prosta, ponieważ użytkownicy muszą nauczyć się używania różnych tagów, aby sformatować tekst lub obrazy, aby stworzyć piękną stronę internetową.

World Wide Web Consortium (W3C) zaleca używanie małych liter, zaczynając od HTML 4.

Struktura dokumentu HTML

Typowy dokument HTML będzie miał następującą strukturę -

<html>
   
   <head>
      Document header related tags
   </head>
   
   <body>
      Document body related tags
   </body>
   
</html>

W kolejnych rozdziałach przestudiujemy wszystkie tagi nagłówka i treści, ale na razie zobaczmy, czym jest tag deklaracji dokumentu.

Deklaracja <! DOCTYPE>

Znacznik deklaracji <! DOCTYPE> jest używany przez przeglądarkę internetową do zrozumienia wersji kodu HTML użytego w dokumencie. Obecna wersja HTML to 5 i wykorzystuje następującą deklarację -

<!DOCTYPE html>

Istnieje wiele innych typów deklaracji, których można użyć w dokumencie HTML, w zależności od używanej wersji HTML. Więcej szczegółów na ten temat zobaczymy, omawiając tag <! DOCTYPE ...> wraz z innymi tagami HTML.

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 do przejścia.

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 do przejścia.

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 bez przechowywania 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 łamała tekst, powinieneś użyć nierozdzielającej jednostki spacji  zamiast normalnej przestrzeni. Na przykład podczas kodowania „12 gniewnych mężczyzn” 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 -

Na HTML elementjest definiowana przez znacznik początkowy. Jeśli element zawiera inną treść, kończy się tagiem zamykającym, gdzie nazwa elementu jest poprzedzona ukośnikiem, jak pokazano poniżej z kilkoma tagami -

Start Tag	Zadowolony	Tag końcowy
<p>	To jest treść akapitu.	</p>
<h1>	To jest treść nagłówka.	</h1>
<div>	To jest treść podziału.	</div>
<br />

Więc tu <p>....</p> jest elementem HTML, <h1>...</h1>to kolejny element HTML. Istnieje kilka elementów HTML, których nie trzeba zamykać, na przykład<img.../>, <hr /> i <br />elementy. Są one znane jakovoid elements.

Dokumenty HTML składają się z drzewa tych elementów i określają, w jaki sposób powinny być budowane dokumenty HTML oraz jaką treść należy umieścić w jakiej części dokumentu HTML.

Tag HTML a element

Element HTML jest definiowany przez znacznik początkowy . Jeśli element zawiera inną treść, kończy się tagiem zamykającym .

Na przykład, <p> jest początkowym tagiem akapitu i </p> jest tagiem zamykającym tego samego akapitu, ale <p>This is paragraph</p> jest elementem akapitu.

Zagnieżdżone elementy HTML

Bardzo wolno trzymać jeden element HTML wewnątrz innego elementu HTML -

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Nested Elements Example</title>
   </head>
	
   <body>
      <h1>This is <i>italic</i> heading</h1>
      <p>This is <u>underlined</u> paragraph</p>
   </body>
	
</html>

Spowoduje to wyświetlenie następującego wyniku -

Widzieliśmy kilka tagów HTML i ich zastosowanie jak tagi nagłówków <h1>, <h2>, tag akapitu <p>i inne tagi. Używaliśmy ich do tej pory w ich najprostszej formie, ale większość tagów HTML może mieć również atrybuty, które są dodatkowymi bitami informacji.

Atrybut jest używany do definiowania właściwości elementu HTML i jest umieszczany wewnątrz znacznika otwierającego elementu. Wszystkie atrybuty składają się z dwóch części - aname i a value

Plik nameto właściwość, którą chcesz ustawić. Na przykład akapit<p> element w przykładzie zawiera atrybut o nazwie align, którego możesz użyć do wskazania wyrównania akapitu na stronie.
Plik valuejest tym, czego chcesz, aby wartość właściwości była ustawiona i zawsze umieszczana w cudzysłowie. Poniższy przykład pokazuje trzy możliwe wartości atrybutu align: left, center i right.

W nazwach i wartościach atrybutów wielkość liter nie jest rozróżniana. Jednak konsorcjum World Wide Web Consortium (W3C) zaleca małe litery / wartości atrybutów w swoich zaleceniach HTML 4.

Przykład

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>Align Attribute  Example</title> 
   </head>
	
   <body> 
      <p align = "left">This is left aligned</p> 
      <p align = "center">This is center aligned</p> 
      <p align = "right">This is right aligned</p> 
   </body>
	
</html>

Spowoduje to wyświetlenie następującego wyniku -

Podstawowe atrybuty

Cztery podstawowe atrybuty, których można użyć w większości elementów HTML (choć nie we wszystkich), to -

Id
Title
Class
Style

Atrybut Id

Plik idatrybut znacznika HTML może służyć do jednoznacznego identyfikowania dowolnego elementu na stronie HTML. Istnieją dwa główne powody, dla których warto użyć atrybutu id na elemencie -

Jeśli element posiada atrybut id jako unikalny identyfikator, można zidentyfikować tylko ten element i jego zawartość.
Jeśli masz dwa elementy o tej samej nazwie na stronie internetowej (lub arkuszu stylów), możesz użyć atrybutu id, aby rozróżnić elementy o tej samej nazwie.

Arkusz stylów omówimy w osobnym tutorialu. Na razie użyjmy atrybutu id, aby rozróżnić dwa elementy akapitu, jak pokazano poniżej.

Example

<p id = "html">This para explains what is HTML</p>
<p id = "css">This para explains what is Cascading Style Sheet</p>

Tytułowy Atrybut

Plik titleatrybut podaje sugerowany tytuł elementu. Składają się natitle atrybut jest podobny do wyjaśnienia dla id atrybut -

Zachowanie tego atrybutu będzie zależeć od elementu, który go przenosi, chociaż często jest wyświetlany jako podpowiedź, gdy kursor znajdzie się nad elementem lub podczas ładowania elementu.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>The title Attribute Example</title>
   </head>
	
   <body>
      <h3 title = "Hello HTML!">Titled Heading Tag Example</h3>
   </body>
	
</html>

To da następujący wynik -

Teraz spróbuj ustawić kursor na „Przykład znacznika nagłówka z tytułem”, a zobaczysz, że tytuł, którego użyłeś w kodzie, pojawia się jako podpowiedź kursora.

Atrybut klasy

Plik classatrybut służy do kojarzenia elementu z arkuszem stylów i określa klasę elementu. Dowiesz się więcej o korzystaniu z atrybutu class, gdy nauczysz się kaskadowego arkusza stylów (CSS). Więc na razie możesz tego uniknąć.

Wartością atrybutu może być również lista nazw klas oddzielonych spacjami. Na przykład -

class = "className1 className2 className3"

Atrybut stylu

Atrybut style umożliwia określenie reguł kaskadowego arkusza stylów (CSS) w elemencie.

<!DOCTYPE html>
<html>

   <head>
      <title>The style Attribute</title>
   </head>
	
   <body>
      <p style = "font-family:arial; color:#FF0000;">Some text...</p>
   </body>
	
</html>

To da następujący wynik -

W tej chwili nie uczymy się CSS, więc kontynuujmy bez zawracania sobie głowy CSS. Tutaj musisz zrozumieć, czym są atrybuty HTML i jak można ich używać podczas formatowania treści.

Atrybuty internacjonalizacji

Istnieją trzy atrybuty internacjonalizacji, które są dostępne dla większości (choć nie wszystkich) elementów XHTML.

dir
lang
xml:lang

Atrybut reż

Plik diratrybut pozwala wskazać przeglądarce kierunek, w którym powinien płynąć tekst. Atrybut dir może przyjąć jedną z dwóch wartości, jak widać w poniższej tabeli -

Wartość	Znaczenie
ltr	Od lewej do prawej (wartość domyślna)
rtl	Od prawej do lewej (w przypadku języków, takich jak hebrajski lub arabski, czytanych od prawej do lewej)

Example

<!DOCTYPE html>
<html dir = "rtl">

   <head>
      <title>Display Directions</title>
   </head>
	
   <body>
      This is how IE 5 renders right-to-left directed text.
   </body>
	
</html>

To da następujący wynik -

Gdy atrybut dir jest używany w tagu <html>, określa sposób prezentacji tekstu w całym dokumencie. Kiedy jest używany w innym tagu, kontroluje kierunek tekstu tylko dla zawartości tego tagu.

Atrybut lang

Plik langatrybut umożliwia wskazanie głównego języka używanego w dokumencie, ale ten atrybut został zachowany w HTML tylko w celu zapewnienia zgodności wstecznej z wcześniejszymi wersjami HTML. Ten atrybut został zastąpiony przezxml:lang atrybut w nowych dokumentach XHTML.

Wartości atrybutu lang to standardowe dwuznakowe kody języka ISO-639. CzekHTML Language Codes: ISO 639 aby uzyskać pełną listę kodów języków.

Example

<!DOCTYPE html>
<html lang = "en">

   <head>
      <title>English Language Page</title>
   </head>

   <body>
      This page is using English Language
   </body>

</html>

To da następujący wynik -

Atrybut xml: lang

Xml: lang atrybut jest zastąpienie XHTML dla lang atrybutu. Wartość atrybutu xml: lang powinna być kodem kraju zgodnym z ISO-639, jak wspomniano w poprzedniej sekcji.

Atrybuty ogólne

Oto tabela innych atrybutów, które są łatwo używane w przypadku wielu tagów HTML.

Atrybut	Opcje	Funkcjonować
wyrównać	prawo, lewo, środek	Poziomo wyrównuje etykiety
valign	góra, środek, dół	Ustawia tagi w pionie w elemencie HTML.
bgcolor	wartości numeryczne, szesnastkowe, RGB	Umieszcza kolor tła za elementem
tło	URL	Umieszcza obraz tła za elementem
ID	Określony przez użytkownika	Nazywa element do użycia z kaskadowymi arkuszami stylów.
klasa	Określony przez użytkownika	Klasyfikuje element do użycia z kaskadowymi arkuszami stylów.
szerokość	Wartość numeryczna	Określa szerokość tabel, obrazów lub komórek tabeli.
wysokość	Wartość numeryczna	Określa wysokość tabel, obrazów lub komórek tabeli.
tytuł	Określony przez użytkownika	Tytuł „Pop-up” elementów.

<!DOCTYPE html>
<html>

   <head>
      <title>Smaller Text Example</title>
   </head>

   <body>
      <p>The following word uses a <small>small</small> typeface.</p>
   </body>

</html>

To da następujący wynik -

Grupowanie treści

Plik <div> i <span> elementy pozwalają na zgrupowanie kilku elementów w celu utworzenia sekcji lub podsekcji strony.

Na przykład możesz chcieć umieścić wszystkie przypisy na stronie w elemencie <div>, aby wskazać, że wszystkie elementy w tym elemencie <div> odnoszą się do przypisów. Następnie możesz dołączyć styl do tego elementu <div>, aby pojawiały się przy użyciu specjalnego zestawu reguł stylów.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Div Tag Example</title>
   </head>
	
   <body>
      <div id = "menu" align = "middle" >
         <a href = "/index.htm">HOME</a> | 
         <a href = "/about/contact_us.htm">CONTACT</a> | 
         <a href = "/about/index.htm">ABOUT</a>
      </div>

      <div id = "content" align = "left" >
         <h5>Content Articles</h5>
         <p>Actual content goes here.....</p>
      </div>
   </body>
	
</html>

To da następujący wynik -

Z drugiej strony element <span> może służyć do grupowania tylko elementów wbudowanych. Więc jeśli masz część zdania lub akapitu, którą chcesz zgrupować, możesz użyć elementu <span> w następujący sposób.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Span Tag Example</title>
   </head>
	
   <body>
      <p>This is the example of <span style = "color:green">span tag</span>
         and the <span style = "color:red">div tag</span> alongwith CSS</p>
   </body>
	
</html>

To da następujący wynik -

<!DOCTYPE html>
<html>

   <head>
      <title>Text Abbreviation</title>
   </head>
	
   <body>
      <p>My best friend's name is  <abbr title = "Abhishek">Abhy</abbr>.</p>
   </body>
	
</html>

To da następujący wynik -

Element akronimu

Plik <acronym> element pozwala wskazać, że tekst między tagami <acronym> i </acronym> jest akronimem.

Obecnie główne przeglądarki nie zmieniają wyglądu zawartości elementu <acronym>.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Acronym Example</title>
   </head>
	
   <body>
      <p>This chapter covers marking up text in <acronym>XHTML</acronym>.</p>
   </body>
	
</html>

To da następujący wynik -

Kierunek tekstu

Plik <bdo>...</bdo> element oznacza Bi-Directional Override i służy do zastąpienia bieżącego kierunku tekstu.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Text Direction Example</title>
   </head>

   <body>
      <p>This text will go left to right.</p>
      <p><bdo dir = "rtl">This text will go right to left.</bdo></p>
   </body>

</html>

To da następujący wynik -

Specjalne warunki

Plik <dfn>...</dfn>element (lub element definicji HTML) pozwala określić, że wprowadzasz specjalny termin. Jego użycie jest podobne do kursywy w środku akapitu.

Zazwyczaj element <dfn> użyjesz przy pierwszym wprowadzeniu kluczowego terminu. Najnowsze przeglądarki wyświetlają zawartość elementu <dfn> kursywą.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Special Terms Example</title>
   </head>
	
   <body>
      <p>The following word is a <dfn>special</dfn> term.</p>
   </body>
	
</html>

To da następujący wynik -

Cytowanie tekstu

Jeśli chcesz zacytować fragment z innego źródła, umieść go pomiędzy <blockquote>...</blockquote> tagi.

Tekst wewnątrz elementu <blockquote> jest zwykle wcięty od lewej i prawej krawędzi otaczającego tekstu, a czasami używa się czcionki kursywą.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Blockquote Example</title>
   </head>
	
   <body>
      <p>The following description of XHTML is taken from the W3C Web site:</p>

      <blockquote>XHTML 1.0 is the W3C's first Recommendation for XHTML,following on 
         from earlier work on HTML 4.01, HTML 4.0, HTML 3.2 and HTML 2.0.</blockquote>
   </body>
	
</html>

To da następujący wynik -

Krótkie notowania

Plik <q>...</q> element jest używany, gdy chcesz dodać podwójny cudzysłów w zdaniu.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Double Quote Example</title>
   </head>
	
   <body>
      <p>Amit is in Spain, <q>I think I am wrong</q>.</p>
   </body>
	
</html>

To da następujący wynik -

Cytaty tekstowe

Jeśli cytujesz tekst, możesz wskazać źródło, umieszczając go między otworem <cite> tag i zamykanie </cite> etykietka

Jak można się spodziewać po publikacji drukowanej, zawartość elementu <cite> jest domyślnie wyświetlana kursywą.

Przykład

<!DOCTYPE html>
<html>
   
   <head>
      <title>Citations Example</title>
   </head>
   
   <body>
      <p>This HTML tutorial is derived from <cite>W3 Standard for HTML</cite>.</p>
   </body>
   
</html>

To da następujący wynik -

Kod komputerowy

Każdy kod programistyczny, który ma pojawić się na stronie internetowej, powinien być umieszczony wewnątrz <code>...</code>tagi. Zwykle zawartość elementu <code> jest prezentowana czcionką o stałej szerokości, tak jak kod w większości książek o programowaniu.

Przykład

<!DOCTYPE html>
<html>
   
   <head>
      <title>Computer Code Example</title>
   </head>
   
   <body>
      <p>Regular text. <code>This is code.</code> Regular text.</p>
   </body>
   
</html>

To da następujący wynik -

Tekst klawiatury

Kiedy mówisz o komputerach, jeśli chcesz powiedzieć czytelnikowi, aby wprowadził jakiś tekst, możesz użyć <kbd>...</kbd> element wskazujący, co należy wpisać, jak w tym przykładzie.

Przykład

<!DOCTYPE html>
<html>
   
   <head>
      <title>Keyboard Text Example</title>
   </head>
   
   <body>
      <p>Regular text. <kbd>This is inside kbd element</kbd> Regular text.</p>
   </body>
   
</html>

To da następujący wynik -

Programowanie zmiennych

Ten element jest zwykle używany w połączeniu z <pre> i <code> elementy wskazujące, że zawartość tego elementu jest zmienną.

Przykład

<!DOCTYPE html>
<html>
   
   <head>
      <title>Variable Text Example</title>
   </head>
   
   <body>
      <p><code>document.write("<var>user-name</var>")</code></p>
   </body>
   
</html>

To da następujący wynik -

Wyjście programu

Plik <samp>...</samp> element wskazuje przykładowe dane wyjściowe programu, skryptu itp. Ponownie jest używany głównie podczas dokumentowania koncepcji programowania lub kodowania.

Przykład

<!DOCTYPE html>
<html>
   
   <head>
      <title>Program Output Example</title>
   </head>
   
   <body>
      <p>Result produced by the program is <samp>Hello World!</samp></p>
   </body>
   
</html>

To da następujący wynik -

Tekst adresu

Plik <address>...</address> element służy do przechowywania dowolnego adresu.

Przykład

<!DOCTYPE html>
<html>
   
   <head>
      <title>Address Example</title>
   </head>
   
   <body>
      <address>388A, Road No 22, Jubilee Hills -  Hyderabad</address>
   </body>
   
</html>

To da następujący wynik -

HTML pozwala na określenie metadanych - dodatkowych ważnych informacji o dokumencie na różne sposoby. Elementy META mogą służyć do dołączania par nazwa / wartość opisujących właściwości dokumentu HTML, takie jak autor, data wygaśnięcia, lista słów kluczowych, autor dokumentu itp.

Plik <meta>tag służy do dostarczania takich dodatkowych informacji. Ten znacznik jest pustym elementem i dlatego nie ma tagu zamykającego, ale zawiera informacje w swoich atrybutach.

Możesz dołączyć jeden lub więcej metatagów do swojego dokumentu w zależności od tego, jakie informacje chcesz zachować w dokumencie, ale generalnie metatagi nie wpływają na fizyczny wygląd dokumentu, więc z punktu widzenia wyglądu nie ma znaczenia, czy dołączysz je czy nie.

Dodawanie metatagów do dokumentów

Możesz dodawać metadane do swoich stron internetowych, umieszczając znaczniki <meta> w nagłówku dokumentu, który jest reprezentowany przez <head> i </head>tagi. Metatag może mieć następujące atrybuty oprócz atrybutów podstawowych -

Sr.No	Atrybut i opis
1	Name Nazwa nieruchomości. Może być wszystko. Przykłady obejmują słowa kluczowe, opis, autora, poprawkę, generator itp.
2	content Określa wartość właściwości.
3	scheme Określa schemat interpretacji wartości właściwości (zgodnie z deklaracją w atrybucie treści).
4	http-equiv Używany do nagłówków wiadomości odpowiedzi HTTP. Na przykład http-equiv można użyć do odświeżenia strony lub ustawienia pliku cookie. Wartości obejmują content-type, expires, refresh i set-cookie.

Określanie słów kluczowych

Możesz użyć tagu <meta>, aby określić ważne słowa kluczowe związane z dokumentem, a później te słowa kluczowe będą używane przez wyszukiwarki podczas indeksowania strony internetowej w celu wyszukiwania.

Przykład

Poniżej znajduje się przykład, w którym dodajemy HTML, metatagi, metadane jako ważne słowa kluczowe dotyczące dokumentu.

<!DOCTYPE html>
<html>
   
   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
   </head>
   
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>

To da następujący wynik -

Opis dokumentu

Możesz użyć tagu <meta>, aby podać krótki opis dokumentu. To znowu może być używane przez różne wyszukiwarki podczas indeksowania strony internetowej w celu wyszukiwania.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
   
</html>

Data weryfikacji dokumentu

Możesz użyć tagu <meta>, aby podać informacje o czasie ostatniej aktualizacji dokumentu. Informacje te mogą być używane przez różne przeglądarki internetowe podczas odświeżania strony internetowej.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Odświeżanie dokumentu

Tag <meta> może służyć do określenia czasu, po którym strona internetowa będzie się automatycznie odświeżać.

Przykład

Jeśli chcesz, aby strona odświeżała się co 5 sekund, użyj następującej składni.

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
      <meta http-equiv = "refresh" content = "5" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Przekierowanie strony

Możesz użyć tagu <meta>, aby przekierować swoją stronę na dowolną inną stronę internetową. Możesz również określić czas trwania, jeśli chcesz przekierować stronę po określonej liczbie sekund.

Przykład

Poniżej znajduje się przykład przekierowania bieżącej strony na inną stronę po 5 sekundach. Jeśli chcesz natychmiast przekierować stronę, nie określaj atrybutu treści .

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "revised" content = "Tutorialspoint, 3/7/2014" />
      <meta http-equiv = "refresh" content = "5; url = http://www.tutorialspoint.com" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Ustawienia plików cookie

Pliki cookie to dane przechowywane w małych plikach tekstowych na komputerze i wymieniane między przeglądarką internetową a serwerem sieciowym w celu śledzenia różnych informacji w zależności od potrzeb aplikacji internetowej.

Możesz użyć tagu <meta> do przechowywania plików cookie po stronie klienta, a później te informacje mogą zostać wykorzystane przez serwer sieci Web do śledzenia osoby odwiedzającej witrynę.

Przykład

Poniżej znajduje się przykład przekierowania bieżącej strony na inną stronę po 5 sekundach. Jeśli chcesz natychmiast przekierować stronę, nie określaj atrybutu treści .

<!DOCTYPE html>
<html>
   <head>
      <title>Meta Tags Example</title>
      <meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />
         
   </head>
   <body>
      <p>Hello HTML5!</p>
   </body>
</html>

Jeśli nie podasz daty i godziny wygaśnięcia, plik cookie jest uważany za sesyjny i zostanie usunięty, gdy użytkownik wyjdzie z przeglądarki.

Note- Możesz zapoznać się z samouczkiem dotyczącym PHP i plików cookie, aby uzyskać szczegółowe informacje na temat plików cookie.

Ustawianie nazwy autora

Możesz ustawić nazwisko autora na stronie internetowej za pomocą metatagu. Zobacz przykład poniżej -

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Określ zestaw znaków

Możesz użyć tagu <meta>, aby określić zestaw znaków używany na stronie internetowej.

Przykład

Domyślnie serwery i przeglądarki internetowe używają kodowania ISO-8859-1 (Latin1) do przetwarzania stron internetowych. Poniżej znajduje się przykład ustawienia kodowania UTF-8 -

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Aby strona statyczna była wyświetlana z tradycyjnymi chińskimi znakami, strona internetowa musi zawierać tag <meta> w celu ustawienia kodowania Big5 -

<!DOCTYPE html>
<html>

   <head>
      <title>Meta Tags Example</title>
      <meta name = "keywords" content = "HTML, Meta Tags, Metadata" />
      <meta name = "description" content = "Learning about Meta Tags." />
      <meta name = "author" content = "Mahnaz Mohtashim" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = Big5" />
   </head>
	
   <body>
      <p>Hello HTML5!</p>
   </body>
	
</html>

Komentarz to fragment kodu, który jest ignorowany przez każdą przeglądarkę internetową. Dobrą praktyką jest dodawanie komentarzy do kodu HTML, szczególnie w złożonych dokumentach, w celu wskazania sekcji dokumentu i wszelkich innych uwag każdemu, kto ogląda kod. Komentarze pomagają Tobie i innym zrozumieć Twój kod i zwiększają czytelność kodu.

Komentarze HTML są umieszczane pomiędzy tagi. Tak więc każda zawartość umieszczona w tagach <! - ... -> będzie traktowana jako komentarz i zostanie całkowicie zignorowana przez przeglądarkę.

Przykład

<!DOCTYPE html>
<html>

   <head>  <!-- Document Header Starts -->
      <title>This is document title</title>
   </head> <!-- Document Header Ends -->
	
   <body>
      <p>Document content goes here.....</p>
   </body>
	
</html>

Daje to następujący wynik bez wyświetlania treści podanej jako część komentarzy -

Ważne a nieprawidłowe komentarze

Komentarze nie zagnieżdżają się, co oznacza, że nie można ich umieścić w innym komentarzu. Po drugie, podwójny myślnik „-” nie może pojawić się wewnątrz komentarza, z wyjątkiem jako część zamykającego tagu ->. Musisz także upewnić się, że w ciągu komentarza na początku komentarza nie ma spacji.

Przykład

Tutaj podany komentarz jest prawidłowym komentarzem i zostanie usunięty przez przeglądarkę.

<!DOCTYPE html>
<html>

   <head>
      <title>Valid Comment Example</title>
   </head>
	
   <body>
      <!--   This is valid comment -->
      <p>Document content goes here.....</p>
   </body>
	
</html>

To da następujący wynik -

Jednak następujący wiersz nie jest prawidłowym komentarzem i zostanie wyświetlony przez przeglądarkę. Dzieje się tak, ponieważ między lewym nawiasem trójkątnym a wykrzyknikiem znajduje się spacja.

<!DOCTYPE html>
<html>

   <head>  
      <title>Invalid Comment Example</title>
   </head>
	
   <body>
      < !--   This is not a valid comment -->
      <p>Document content goes here.....</p>
   </body>
	
</html>

To da następujący wynik -

Komentarze wielowierszowe

Do tej pory widzieliśmy komentarze jednowierszowe, ale HTML obsługuje również komentarze wieloliniowe.

Możesz skomentować wiele wierszy za pomocą specjalnego znacznika początkowego <! - i końcowego znacznika -> umieszczonego przed pierwszą linią i końcem ostatniej linii, jak pokazano w podanym przykładzie poniżej.

Przykład

<!DOCTYPE html>
<html>

   <head>  
      <title>Multiline Comments</title>
   </head> 
	
   <body>
      <!-- 
         This is a multiline comment and it can
         span through as many as lines you like.
      -->
      
      <p>Document content goes here.....</p>
   </body>
	
</html>

To da następujący wynik -

Komentarze warunkowe

Komentarze warunkowe działają tylko w przeglądarce Internet Explorer (IE) w systemie Windows, ale są ignorowane przez inne przeglądarki. Są one obsługiwane od wersji Explorer 5 i można ich używać do wydawania instrukcji warunkowych dla różnych wersji IE.

Przykład

<!DOCTYPE html>
<html>

   <head>  
      <title>Conditional Comments</title>

      <!--[if IE 6]>
         Special instructions for IE 6 here
      <![endif]-->
   </head> 
   
   <body>
      <p>Document content goes here.....</p>
   </body>
	
</html>

Spotkasz się z sytuacją, w której będziesz musiał zastosować inny arkusz stylów oparty na różnych wersjach przeglądarki Internet Explorer, w takiej sytuacji pomocne będą komentarze warunkowe.

Korzystanie z tagu komentarza

Niewiele przeglądarek obsługuje znacznik <comment> do komentowania części kodu HTML.

Note- Tag <comment> został wycofany w HTML5. Nie używaj tego elementu.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Using Comment Tag</title>
   </head>
	
   <body>
      <p>This is <comment>not</comment> Internet Explorer.</p>
   </body>
	
</html>

Jeśli używasz IE, to da następujący wynik -

Ale jeśli nie używasz IE, to da następujący wynik -

Komentowanie kodu skryptu

Chociaż nauczysz się JavaScript z HTML, w osobnym samouczku, ale tutaj musisz zauważyć, że jeśli używasz Java Script lub VB Script w swoim kodzie HTML, zaleca się umieszczenie tego kodu skryptu w odpowiednich komentarzach HTML, aby stary przeglądarki mogą działać poprawnie.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Commenting Script Code</title>
      
      <script>
         <!-- 
            document.write("Hello World!")
         //-->
      </script>
   </head>
	
   <body>
      <p>Hello , World!</p>
   </body>
	
</html>

To da następujący wynik -

Komentowanie arkuszy stylów

Chociaż nauczysz się używać arkuszy stylów z HTML w osobnym samouczku, ale tutaj musisz zauważyć, że jeśli używasz kaskadowego arkusza stylów (CSS) w swoim kodzie HTML, to zaleca się umieszczenie tego kodu arkusza stylów w odpowiednich komentarzach HTML aby stare przeglądarki działały poprawnie.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Commenting Style Sheets</title>
      
      <style>
         <!--
            .example {
               border:1px solid #4a7d49;
            }
         //-->
      </style>
   </head>
	
   <body>
      <div class = "example">Hello , World!</div>
   </body>
	
</html>

To da następujący wynik -

Obrazy są bardzo ważne, aby upiększać, a także przedstawiać wiele złożonych koncepcji w prosty sposób na Twojej stronie internetowej. Ten samouczek przeprowadzi Cię przez proste kroki, aby używać obrazów na swoich stronach internetowych.

Umieść obraz

Możesz wstawić dowolny obraz na swoją stronę internetową, używając <img>etykietka. Poniżej znajduje się prosta składnia użycia tego tagu.

<img src = "Image URL" ... attributes-list/>

Znacznik <img> jest pustym tagiem, co oznacza, że może zawierać tylko listę atrybutów i nie ma tagu zamykającego.

Przykład

Aby wypróbować następujący przykład, zachowajmy nasz plik HTML test.htm i plik obrazu test.png w tym samym katalogu -

<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>
	
   <body>
      <p>Simple Image Insert</p>
      <img src = "/html/images/test.png" alt = "Test Image" />
   </body>
	
</html>

To da następujący wynik -

Możesz użyć pliku obrazu w formacie PNG, JPEG lub GIF w zależności od wygody, ale upewnij się, że podałeś poprawną nazwę pliku obrazu w srcatrybut. W nazwie obrazu jest zawsze rozróżniana wielkość liter.

Plik alt atrybut jest obowiązkowym atrybutem, który określa alternatywny tekst dla obrazu, jeśli obraz nie może zostać wyświetlony.

Ustaw lokalizację obrazu

Zwykle przechowujemy wszystkie obrazy w oddzielnym katalogu. Zachowajmy więc plik HTML test.htm w naszym katalogu domowym i utwórzmy podkatalogimages wewnątrz katalogu domowego, w którym będziemy przechowywać nasz obraz test.png.

Przykład

Zakładając, że lokalizacja naszego obrazu to „image / test.png”, wypróbuj następujący przykład -

<!DOCTYPE html>
<html>

   <head>
      <title>Using Image in Webpage</title>
   </head>
	
   <body>
      <p>Simple Image Insert</p>
      <img src = "/html/images/test.png" alt = "Test Image" />
   </body>
	
</html>

To da następujący wynik -

Ustaw szerokość / wysokość obrazu

Możesz ustawić szerokość i wysokość obrazu w zależności od wymagań za pomocą width i heightatrybuty. Możesz określić szerokość i wysokość obrazu w pikselach lub w procentach rzeczywistego rozmiaru.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Width and Height</title>
   </head>
	
   <body>
      <p>Setting image width and height</p>
      <img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>
   </body>
	
</html>

To da następujący wynik -

Ustaw obramowanie obrazu

Domyślnie obraz będzie miał wokół siebie obramowanie, możesz określić grubość obramowania w pikselach za pomocą atrybutu border. Grubość 0 oznacza brak obramowania wokół obrazu.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Border</title>
   </head>
	
   <body>
      <p>Setting image Border</p>
      <img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
   </body>
	
</html>

To da następujący wynik -

Ustaw wyrównanie obrazu

Domyślnie obraz zostanie wyrównany do lewej krawędzi strony, ale możesz użyć align atrybut, aby ustawić go w środku lub w prawo.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Set Image Alignment</title>
   </head>
	
   <body>
      <p>Setting image Alignment</p>
      <img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
   </body>
	
</html>

To da następujący wynik -

Darmowa grafika internetowa

Aby uzyskać bezpłatną grafikę internetową, w tym wzory, możesz zajrzeć do darmowej grafiki internetowej

Tabele HTML umożliwiają autorom stron internetowych układanie danych, takich jak tekst, obrazy, łącza, inne tabele itp. W wierszach i kolumnach komórek.

Tabele HTML są tworzone przy użyciu rozszerzenia <table> tag, w którym <tr> tag służy do tworzenia wierszy tabeli i <td>tag służy do tworzenia komórek danych. Elementy w <td> są domyślnie regularne i wyrównane do lewej

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Tables</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
         </tr>
         
         <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
         </tr>
      </table>
      
   </body>
</html>

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Colspan/Rowspan</title>
   </head>
	
   <body>
      <table border = "1">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
	
</html>

To da następujący wynik -

Tabele Tła

Tło tabeli można ustawić na jeden z dwóch poniższych sposobów -

bgcolor atrybut - możesz ustawić kolor tła dla całej tabeli lub tylko dla jednej komórki.
background atrybut - możesz ustawić obraz tła dla całej tabeli lub tylko dla jednej komórki.

Możesz także ustawić kolor obramowania również za pomocą bordercolor atrybut.

Note- Atrybuty bgcolor , background i bordercolor są przestarzałe w HTML5. Nie używaj tych atrybutów.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Background</title>
   </head>
	
   <body>
      <table border = "1" bordercolor = "green" bgcolor = "yellow">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
	
</html>

To da następujący wynik -

Oto przykład użycia backgroundatrybut. Tutaj użyjemy obrazu dostępnego w katalogu / images.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Background</title>
   </head>
	
   <body>
      <table border = "1" bordercolor = "green" background = "/images/test.png">
         <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
         </tr>
         <tr>
            <td rowspan = "2">Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
         </tr>
         <tr>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
         </tr>
         <tr>
            <td colspan = "3">Row 3 Cell 1</td>
         </tr>
      </table>
   </body>
	
</html>

Spowoduje to następujący wynik. Tutaj obraz tła nie miał zastosowania do nagłówka tabeli.

Wysokość i szerokość stołu

Możesz ustawić szerokość i wysokość tabeli za pomocą width i heightatrybuty. Możesz określić szerokość lub wysokość tabeli w pikselach lub w procentach dostępnego obszaru ekranu.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Width/Height</title>
   </head>
	
   <body>
      <table border = "1" width = "400" height = "150">
         <tr>
            <td>Row 1, Column 1</td>
            <td>Row 1, Column 2</td>
         </tr>
         
         <tr>
            <td>Row 2, Column 1</td>
            <td>Row 2, Column 2</td>
         </tr>
      </table>
   </body>
	
</html>

To da następujący wynik -

Podpis tabeli

Plik captiontag będzie służyć jako tytuł lub wyjaśnienie tabeli i pojawi się na górze tabeli. Ten tag jest przestarzały w nowszej wersji HTML / XHTML.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table Caption</title>
   </head>
	
   <body>
      <table border = "1" width = "100%">
         <caption>This is the caption</caption>
         
         <tr>
            <td>row 1, column 1</td><td>row 1, columnn 2</td>
         </tr>
         
         <tr>
            <td>row 2, column 1</td><td>row 2, columnn 2</td>
         </tr>
      </table>
   </body>
	
</html>

To da następujący wynik -

Nagłówek, treść i stopka tabeli

Tabele można podzielić na trzy części - nagłówek, korpus i stopkę. Nagłówek i stopka są raczej podobne do nagłówków i stopek w dokumencie przetwarzanym tekstowo, które pozostają takie same dla każdej strony, podczas gdy treść jest głównym miejscem przechowywania zawartości tabeli.

Trzy elementy do oddzielenia głowy, korpusu i podstawy stołu to:

<thead> - aby utworzyć oddzielny nagłówek tabeli.
<tbody> - wskazać główną część tabeli.
<tfoot> - aby utworzyć osobną stopkę tabeli.

Tabela może zawierać kilka elementów <tbody> wskazujących różne strony lub grupy danych. Należy jednak zauważyć, że tagi <thead> i <tfoot> powinny pojawiać się przed tagiem <tbody>

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table</title>
   </head>
	
   <body>
      <table border = "1" width = "100%">
         <thead>
            <tr>
               <td colspan = "4">This is the head of the table</td>
            </tr>
         </thead>
         
         <tfoot>
            <tr>
               <td colspan = "4">This is the foot of the table</td>
            </tr>
         </tfoot>
         
         <tbody>
            <tr>
               <td>Cell 1</td>
               <td>Cell 2</td>
               <td>Cell 3</td>
               <td>Cell 4</td>
            </tr>
         </tbody>
         
      </table>
   </body>
	
</html>

To da następujący wynik -

Tabele zagnieżdżone

Możesz użyć jednej tabeli wewnątrz innej tabeli. Nie tylko tabele, możesz użyć prawie wszystkich tagów wewnątrz znacznika danych tabeli <td>.

Przykład

Poniżej znajduje się przykład użycia innej tabeli i innych tagów wewnątrz komórki tabeli.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Table</title>
   </head>
	
   <body>
      <table border = "1" width = "100%">
         
         <tr>
            <td>
               <table border = "1" width = "100%">
                  <tr>
                     <th>Name</th>
                     <th>Salary</th>
                  </tr>
                  <tr>
                     <td>Ramesh Raman</td>
                     <td>5000</td>
                  </tr>
                  <tr>
                     <td>Shabbir Hussein</td>
                     <td>7000</td>
                  </tr>
               </table>
            </td>
         </tr>
         
      </table>
   </body>
	
</html>

To da następujący wynik -

HTML oferuje autorom stron internetowych trzy sposoby określania list informacji. Wszystkie listy muszą zawierać co najmniej jeden element listy. Listy mogą zawierać -

<ul>- Lista nieuporządkowana. Spowoduje to wyświetlenie elementów przy użyciu zwykłych punktorów.
<ol>- Uporządkowana lista. Spowoduje to użycie różnych schematów liczb do wystawienia przedmiotów.
<dl>- Lista definicji. Pozwoli to uporządkować elementy w taki sam sposób, jak są ułożone w słowniku.

Listy nieuporządkowane HTML

Lista nieuporządkowana to zbiór powiązanych elementów, które nie mają specjalnej kolejności ani kolejności. Ta lista jest tworzona przy użyciu HTML<ul>etykietka. Każda pozycja na liście jest oznaczona kropką.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>
	
   <body>
      <ul>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>
   
</html>

To da następujący wynik -

Atrybut typu

Możesz użyć typeatrybut dla tagu <ul>, aby określić typ pocisku, który lubisz. Domyślnie jest to płyta. Poniżej przedstawiono możliwe opcje -

<ul type = "square">
<ul type = "disc">
<ul type = "circle">

Przykład

Poniżej znajduje się przykład, w którym użyliśmy <ul type = "square">

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul type = "square">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

</html>

To da następujący wynik -

Przykład

Poniżej znajduje się przykład, w którym użyliśmy <ul type = "disc"> -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>
	
   <body>
      <ul type = "disc">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>

</html>

To da następujący wynik -

Przykład

Poniżej znajduje się przykład, w którym użyliśmy <ul type = "circle"> -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Unordered List</title>
   </head>

   <body>
      <ul type = "circle">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ul>
   </body>
	
</html>

To da następujący wynik -

Listy uporządkowane w formacie HTML

Jeśli musisz umieścić swoje elementy na liście numerowanej zamiast wypunktowanej, zostanie użyta lista uporządkowana w formacie HTML. Ta lista jest tworzona przy użyciu<ol>etykietka. Numeracja zaczyna się od jednego i jest zwiększana o jeden dla każdego kolejnego uporządkowanego elementu listy oznaczonego tagiem <li>.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol>
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>

To da następujący wynik -

Atrybut typu

Możesz użyć typeatrybut dla tagu <ol>, aby określić typ numeracji, który lubisz. Domyślnie jest to liczba. Poniżej przedstawiono możliwe opcje -

<ol type = "1"> - Default-Case Numerals.
<ol type = "I"> - Upper-Case Numerals.
<ol type = "i"> - Lower-Case Numerals.
<ol type = "A"> - Upper-Case Letters.
<ol type = "a"> - Lower-Case Letters.

Przykład

Poniżej znajduje się przykład, w którym użyliśmy <ol type = "1">

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>

   <body>
      <ol type = "1">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>

</html>

To da następujący wynik -

Przykład

Poniżej znajduje się przykład, w którym użyliśmy <ol type = "I">

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "I">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

To da następujący wynik -

Przykład

Poniżej znajduje się przykład, w którym użyliśmy <ol type = "i">

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "i">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

To da następujący wynik -

Przykład

Poniżej znajduje się przykład, w którym użyliśmy <ol type = "A">

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "A">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

To da następujący wynik -

Przykład

Poniżej znajduje się przykład, w którym użyliśmy <ol type = "a">

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "a">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

To da następujący wynik -

Atrybut początkowy

Możesz użyć startatrybut dla znacznika <ol>, aby określić punkt początkowy numeracji, którego potrzebujesz. Poniżej przedstawiono możliwe opcje -

<ol type = "1" start = "4">    - Numerals starts with 4.
<ol type = "I" start = "4">    - Numerals starts with IV.
<ol type = "i" start = "4">    - Numerals starts with iv.
<ol type = "a" start = "4">    - Letters starts with d.
<ol type = "A" start = "4">    - Letters starts with D.

Przykład

Poniżej znajduje się przykład, w którym użyliśmy <ol type = "i" start = "4">

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Ordered List</title>
   </head>
	
   <body>
      <ol type = "i" start = "4">
         <li>Beetroot</li>
         <li>Ginger</li>
         <li>Potato</li>
         <li>Radish</li>
      </ol>
   </body>
	
</html>

To da następujący wynik -

Listy definicji HTML

HTML i XHTML obsługują styl listy o nazwie definition listsgdzie wpisy są wymienione jak w słowniku lub encyklopedii. Lista definicji to idealny sposób na przedstawienie słownika, listy terminów lub innej listy nazw / wartości.

Lista definicji wykorzystuje następujące trzy znaczniki.

<dl> - określa początek listy
<dt> - termin
<dd> - definicja terminu
</dl> - definiuje koniec listy

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Definition List</title>
   </head>
	
   <body>
      <dl>
         <dt><b>HTML</b></dt>
         <dd>This stands for Hyper Text Markup Language</dd>
         <dt><b>HTTP</b></dt>
         <dd>This stands for Hyper Text Transfer Protocol</dd>
      </dl>
   </body>
	
</html>

To da następujący wynik -

Strona internetowa może zawierać różne linki, które prowadzą bezpośrednio do innych stron, a nawet do określonych części danej strony. Te linki są znane jako hiperłącza.

Hiperłącza umożliwiają odwiedzającym nawigację między witrynami sieci Web poprzez klikanie słów, fraz i obrazów. W ten sposób możesz tworzyć hiperłącza za pomocą tekstu lub obrazów dostępnych na stronie internetowej.

Note- Zalecam przeczytanie krótkiego samouczka o zrozumieniu adresu URL

Łączenie dokumentów

Link jest określany za pomocą znacznika HTML <a>. Ten tag nazywa sięanchor taga wszystko pomiędzy tagiem otwierającym <a> a tagiem zamykającym </a> staje się częścią odsyłacza, a użytkownik może kliknąć tę część, aby dotrzeć do połączonego dokumentu. Poniżej znajduje się prosta składnia użycia znacznika <a>.

<a href = "Document URL" ... attributes-list>Link Text</a>

Przykład

Wypróbujmy następujący przykład, który łączy http://www.tutorialspoint.com na Twojej stronie -

<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "https://www.tutorialspoint.com" target = "_self">Tutorials Point</a>
   </body>
	
</html>

Daje to następujący wynik, w którym możesz kliknąć wygenerowany link, aby przejść do strony głównej Tutorials Point (w tym przykładzie).

Atrybut docelowy

Użyliśmy targetatrybut w naszym poprzednim przykładzie. Ten atrybut służy do określenia lokalizacji, w której zostanie otwarty połączony dokument. Poniżej przedstawiono możliwe opcje -

Sr.No	Opcja i opis
1	_blank Otwiera połączony dokument w nowym oknie lub karcie.
2	_self Otwiera połączony dokument w tej samej ramce.
3	_parent Otwiera połączony dokument w ramce nadrzędnej.
4	_top Otwiera połączony dokument w całej treści okna.
5	targetframe Otwiera połączony dokument w nazwanej ramce docelowej .

Przykład

Spróbuj poniższego przykładu, aby zrozumieć podstawową różnicę w kilku opcjach podanych dla atrybutu docelowego.

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body>
      <p>Click any of the following links</p>
      <a href = "/html/index.htm" target = "_blank">Opens in New</a> |
      <a href = "/html/index.htm" target = "_self">Opens in Self</a> |
      <a href = "/html/index.htm" target = "_parent">Opens in Parent</a> |
      <a href = "/html/index.htm" target = "_top">Opens in Body</a>
   </body>

</html>

Daje to następujący wynik, w którym możesz kliknąć różne linki, aby zrozumieć różnicę między różnymi opcjami podanymi dla atrybutu docelowego.

Korzystanie ze ścieżki podstawowej

W przypadku łączenia dokumentów HTML związanych z tą samą witryną nie jest wymagane podawanie pełnego adresu URL dla każdego łącza. Możesz się go pozbyć, jeśli używasz<base>tag w nagłówku dokumentu HTML. Ten znacznik służy do podania ścieżki bazowej dla wszystkich łączy. Twoja przeglądarka połączy podaną ścieżkę względną z tą ścieżką podstawową i utworzy pełny adres URL.

Przykład

Poniższy przykład wykorzystuje znacznik <base> do określenia podstawowego adresu URL, a później możemy użyć względnej ścieżki do wszystkich linków zamiast podawania pełnego adresu URL dla każdego łącza.

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "/html/index.htm" target = "_blank">HTML Tutorial</a>
   </body>
	
</html>

Daje to następujący wynik, w którym możesz kliknąć wygenerowany link HTML Tutorial aby przejść do samouczka HTML.

Teraz podany adres URL <a href = "/html/index.htm" jest uważany za <ahref = "http://www.tutorialspoint.com/html/index.htm"

Łączenie do sekcji strony

Możesz utworzyć łącze do określonej sekcji danej strony internetowej za pomocą nameatrybut. To jest proces dwuetapowy.

Note- atrybut nazwy jest przestarzały w HTML5. Nie używaj tego atrybutu. Zamiast tego użyj atrybutu id i title .

Najpierw utwórz łącze do miejsca, do którego chcesz przejść na stronie internetowej i nazwij je za pomocą tagu <a ...> w następujący sposób -

<h1>HTML Text Links <a name = "top"></a></h1>

Drugim krokiem jest utworzenie hiperłącza do linku do dokumentu i miejsca, do którego chcesz dotrzeć -

<a href = "/html/html_text_links.htm#top">Go to the Top</a>

Spowoduje to wygenerowanie następującego łącza, w którym można kliknąć wygenerowany link Go to the Top aby dotrzeć do początku samouczka HTML Text Link.

Go to the Top

Ustawianie kolorów łączy

Możesz ustawić kolory swoich linków, linków aktywnych i odwiedzonych linków za pomocą link, alink i vlink atrybuty tagu <body>.

Przykład

Zapisz poniższy plik w test.htm i otwórz go w dowolnej przeglądarce internetowej, aby zobaczyć, jak to zrobić link, alink i vlink atrybuty działają.

<!DOCTYPE html>
<html>
   
   <head>
      <title>Hyperlink Example</title>
      <base href = "https://www.tutorialspoint.com/">
   </head>
	
   <body alink = "#54A250" link = "#040404" vlink = "#F40633">
      <p>Click following link</p>
      <a href = "/html/index.htm" target = "_blank" >HTML Tutorial</a>
   </body>
   
</html>

Spowoduje to następujący wynik. Po prostu sprawdź kolor linku przed kliknięciem w niego, następnie sprawdź jego kolor po aktywacji i po wejściu na link.

Pobierz linki

Możesz utworzyć łącze tekstowe, aby pobrać pliki PDF, DOC lub ZIP. To jest bardzo proste; wystarczy podać pełny adres URL pliku do pobrania w następujący sposób -

<!DOCTYPE html>
<html>

   <head>
      <title>Hyperlink Example</title>
   </head>
	
   <body>
      <a href = "https://www.tutorialspoint.com/page.pdf">Download PDF File</a>
   </body>
	
</html>

Spowoduje to wygenerowanie następującego łącza i zostanie użyte do pobrania pliku.

Okno dialogowe pobierania pliku

Czasami pożądane jest udostępnienie opcji, w której użytkownik kliknie łącze i zamiast wyświetlać rzeczywistą zawartość, wyświetli się okno „Pobieranie pliku”. Jest to bardzo łatwe i można to osiągnąć za pomocą nagłówka HTTP w odpowiedzi HTTP.

Na przykład, jeśli chcesz utworzyć plik Filename plik do pobrania z podanego linku, jego składnia będzie następująca.

#!/usr/bin/perl

# Additional HTTP Header
print "Content-Type:application/octet-stream; name = \"FileName\"\r\n";
print "Content-Disposition:attachment; filename = \"FileName\"\r\n\n";

# Open the target file and list down its content as follows
open( FILE, "<FileName" );

while(read(FILE, $buffer, 100)){ print("$buffer");
}

Note- Aby uzyskać więcej informacji na temat programów PERL CGI, przejdź do samouczka PERL i CGI .

Widzieliśmy, jak tworzyć łącza hipertekstowe za pomocą tekstu, a także nauczyliśmy się, jak używać obrazów na naszych stronach internetowych. Teraz nauczymy się, jak używać obrazów do tworzenia hiperłączy.

Przykład

Używanie obrazu jako hiperłącza jest proste. Musimy tylko użyć obrazu wewnątrz hiperłącza w miejscu tekstu, jak pokazano poniżej -

<!DOCTYPE html>
<html>

   <head>
      <title>Image Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      <a href = "https://www.tutorialspoint.com" target = "_self"> 
         <img src = "/images/logo.png" alt = "Tutorials Point" border = "0"/> 
      </a>
   </body>
	
</html>

Daje to następujący wynik, w którym możesz kliknąć obrazy, aby przejść do strony głównej Tutorials Point.

To był najprostszy sposób tworzenia hiperłączy za pomocą obrazów. Następnie zobaczymy, jak możemy tworzyć linki do obrazów wrażliwych na mysz.

Obrazy wrażliwe na mysz

Standardy HTML i XHTML zapewniają funkcję, która umożliwia osadzenie wielu różnych łączy w jednym obrazie. Możesz tworzyć różne łącza na pojedynczym obrazie w oparciu o różne współrzędne dostępne na obrazie. Po dołączeniu różnych łączy do różnych współrzędnych możemy klikać różne części obrazu, aby otworzyć dokumenty docelowe. Takie obrazy wrażliwe na myszy są znane jako mapy obrazów.

Istnieją dwa sposoby tworzenia map obrazów -

Server-side image maps - Jest to włączone przez ismap atrybut znacznika <img> i wymaga dostępu do serwera i powiązanych aplikacji przetwarzających mapy obrazów.
Client-side image maps - To jest tworzone za pomocą usemap atrybut tagu <img> wraz z odpowiednimi tagami <map> i <area>.

Mapy obrazów po stronie serwera

Tutaj po prostu umieść swój obraz w hiperłączu i użyj ismapatrybut, który czyni go specjalnym obrazem, a gdy użytkownik kliknie jakieś miejsce w obrazie, przeglądarka przekazuje współrzędne wskaźnika myszy wraz z adresem URL określonym w tagu <a> do serwera WWW. Serwer używa współrzędnych wskaźnika myszy, aby określić, który dokument ma zostać dostarczony z powrotem do przeglądarki.

Gdy używana jest ismap , atrybut href zawierającego znacznika <a> musi zawierać adres URL aplikacji serwerowej, takiej jak skrypt cgi lub PHP itp., Aby przetworzyć przychodzące żądanie na podstawie przekazanych współrzędnych.

Współrzędne pozycji myszy to piksele ekranu liczone od lewego górnego rogu obrazu, zaczynając od (0,0). Współrzędne, poprzedzone znakiem zapytania, są dodawane na końcu adresu URL.

Na przykład, jeśli użytkownik kliknie 20 pikseli powyżej i 30 pikseli w dół od lewego górnego rogu poniższego obrazu -

Który został wygenerowany przez następujący fragment kodu -

<!DOCTYPE html>
<html>

   <head>
      <title>ISMAP Hyperlink Example</title>
   </head>
	
   <body>
      <p>Click following link</p>
      
      <a href = "/cgi-bin/ismap.cgi" target = "_self"> 
         <img ismap src = "/images/logo.png" alt = "Tutorials Point" border = "0"/> 
      </a>
   </body>
	
</html>

Następnie przeglądarka wysyła następujące parametry wyszukiwania do serwera internetowego, który może być przetwarzany przez ismap.cgi script lub map file i możesz połączyć dowolne dokumenty z tymi współrzędnymi -

/cgi-bin/ismap.cgi?20,30

W ten sposób możesz przypisać różne łącza do różnych współrzędnych obrazu, a po kliknięciu tych współrzędnych możesz otworzyć odpowiedni połączony dokument. Nauczyć się więcej oismapatrybut, możesz sprawdzić Jak używać obrazu ismap?

Note- Nauczysz się programowania CGI podczas nauki programowania w Perlu. Możesz napisać skrypt do przetwarzania tych przekazanych współrzędnych za pomocą PHP lub dowolnego innego skryptu. Na razie skupmy się na nauce HTML, a później możesz wrócić do tej sekcji.

Mapy obrazu po stronie klienta

Mapy obrazu po stronie klienta są włączane przez usemap atrybut znacznika <img /> i zdefiniowany przez specjalne znaczniki rozszerzenia <map> i <area>.

Obraz, który ma stanowić mapę, jest wstawiany na stronę za pomocą znacznika <img /> jako normalny obraz, z wyjątkiem tego, że zawiera dodatkowy atrybut o nazwie usemap. Wartość atrybutu usemap to wartość, która będzie używana w tagu <map> do łączenia map i tagów obrazu. <map> wraz ze znacznikami <area> definiują wszystkie współrzędne obrazu i odpowiadające im linki.

Znacznik <area> wewnątrz znacznika mapy określa kształt i współrzędne, aby zdefiniować granice każdego klikalnego punktu aktywnego dostępnego na obrazie. Oto przykład z mapy obrazu -

<!DOCTYPE html>
<html>

   <head>
      <title>USEMAP Hyperlink Example</title>
   </head>
	
   <body>
      <p>Search and click the hotspot</p>
      <img src = /images/html.gif alt = "HTML Map" border = "0" usemap = "#html"/>
      <!-- Create  Mappings -->
      
      <map name = "html">
         <area shape = "circle" coords = "80,80,20" 
            href = "/css/index.htm" alt = "CSS Link" target = "_self" />
         
         <area shape = "rect" coords = "5,5,40,40" alt = "jQuery Link" 
            href = "/jquery/index.htm" target = "_self" />
      </map>
   </body>
   
</html>

To da następujący wynik -

System współrzędnych

Rzeczywista wartość współrzędnych jest całkowicie zależna od danego kształtu. Oto podsumowanie, po którym znajdują się szczegółowe przykłady -

rect = x₁ , y₁ , x₂ , y₂

x ₁ i y ₁ to współrzędne lewego górnego rogu prostokąta; x ₂ i y ₂ to współrzędne prawego dolnego rogu.
circle = x_c , y_c , radius

x _c i y _c to współrzędne środka okręgu, a promień to jego promień. Okrąg o środku w odległości 200,50 i promieniu 25 miałby atrybut coords = "200,50,25"
poly = x₁ , y₁ , x₂ , y₂ , x₃ , y₃ , ... x_n , y_n

Różne pary xy definiują wierzchołki (punkty) wielokąta, przy czym „linia” jest rysowana od jednego punktu do następnego. Wielokąt w kształcie rombu, którego górny punkt ma 20,20 i 40 pikseli w najszerszym miejscu, miałby atrybut coords = „20,20,40,40,20,60,0,40” .

Wszystkie współrzędne odnoszą się do lewego górnego rogu obrazu (0,0). Każdy kształt ma powiązany adres URL. Możesz użyć dowolnego oprogramowania graficznego, aby poznać współrzędne różnych pozycji.

Umieszczenie łącza e-mail w formacie HTML na swojej stronie internetowej nie jest trudne, ale może to spowodować niepotrzebny problem ze spamowaniem na koncie e-mail. Są ludzie, którzy mogą uruchamiać programy do zbierania tego typu wiadomości e-mail, a następnie na różne sposoby wykorzystywać je do spamowania.

Możesz mieć inną opcję, aby ułatwić innym wysyłanie Ci e-maili. Jedną z opcji może być użycie formularzy HTML do zbierania danych użytkownika, a następnie użycie skryptu PHP lub CGI do wysłania wiadomości e-mail.

Prosty przykład, sprawdź nasz formularz kontaktowy . Przyjmujemy opinie użytkowników za pomocą tego formularza, a następnie używamy jednego programu CGI, który zbiera te informacje i wysyła nam wiadomość e-mail na podany identyfikator e-mail.

Note- Dowiesz się o formularzach HTML w formularzach HTML, ao CGI dowiesz się z naszego kolejnego samouczkaPerl CGI Programming.

Tag HTML Email

HTML <a>tag umożliwia określenie adresu e-mail do wysłania wiadomości e-mail. Używając <a> tagu jako tagu e-mail, będziesz używaćmailto: email addresswraz z atrybutem href . Poniżej znajduje się składnia usingmailto zamiast używać protokołu http.

<a href = "mailto: [email protected]">Send Email</a>

Ten kod wygeneruje następujący link, którego możesz użyć do wysłania wiadomości e-mail.

Send Email

Teraz, jeśli użytkownik kliknie to łącze, uruchamia jednego klienta poczty e-mail (np. Lotus Notes, Outlook Express itp.) Zainstalowanego na komputerze użytkownika. Istnieje inne ryzyko związane z używaniem tej opcji do wysyłania wiadomości e-mail, ponieważ jeśli użytkownik nie ma zainstalowanego klienta poczty e-mail na swoim komputerze, wysyłanie wiadomości e-mail nie byłoby możliwe.

Ustawienia domyślne

Możesz określić domyślny temat i treść wiadomości wraz z adresem e-mail. Poniżej znajduje się przykład użycia domyślnego tematu i treści.

<a href = "mailto:[email protected]?subject = Feedback&body = Message">
Send Feedback
</a>

Ten kod wygeneruje następujący link, którego możesz użyć do wysłania wiadomości e-mail.

Send Feedback

Ramki HTML służą do dzielenia okna przeglądarki na wiele sekcji, z których każda może załadować oddzielny dokument HTML. Zbiór ramek w oknie przeglądarki jest nazywany zestawem ramek. Okno podzielone jest na ramki w podobny sposób zorganizowany w tabele: na rzędy i kolumny.

Wady ramek

Korzystanie z ramek ma kilka wad, dlatego nigdy nie zaleca się używania ramek na stronach internetowych -

Niektóre mniejsze urządzenia często nie radzą sobie z ramkami, ponieważ ich ekran nie jest wystarczająco duży, aby można go było podzielić.
Czasami Twoja strona będzie wyświetlana inaczej na różnych komputerach ze względu na różną rozdzielczość ekranu.
Przycisk Wstecz przeglądarki może nie działać zgodnie z oczekiwaniami użytkownika.
Nadal istnieje kilka przeglądarek, które nie obsługują technologii ramek.

Tworzenie ramek

Aby użyć ramek na stronie, używamy tagu <frameset> zamiast tagu <body>. Znacznik <frameset> określa, jak podzielić okno na ramki. Plikrows atrybut znacznika <frameset> definiuje ramki poziome, a colsatrybut definiuje ramki pionowe. Każda ramka jest oznaczona tagiem <frame> i określa, który dokument HTML ma otwierać się w ramce.

Note- Tag <frame> jest przestarzały w HTML5. Nie używaj tego elementu.

Przykład

Poniżej znajduje się przykład tworzenia trzech poziomych ramek -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Frames</title>
   </head>
	
   <frameset rows = "10%,80%,10%">
      <frame name = "top" src = "/html/top_frame.htm" />
      <frame name = "main" src = "/html/main_frame.htm" />
      <frame name = "bottom" src = "/html/bottom_frame.htm" />
   
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
      
   </frameset>
   
</html>

To da następujący wynik -

Przykład

Umieśćmy powyższy przykład w następujący sposób, tutaj zastąpiliśmy atrybut wierszy kolumnami i zmieniliśmy ich szerokość. Spowoduje to utworzenie wszystkich trzech ramek w pionie -

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML Frames</title>
   </head>
   
   <frameset cols = "25%,50%,25%">
      <frame name = "left" src = "/html/top_frame.htm" />
      <frame name = "center" src = "/html/main_frame.htm" />
      <frame name = "right" src = "/html/bottom_frame.htm" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
   
</html>

To da następujący wynik -

Atrybuty tagu <frameset>

Poniżej znajdują się ważne atrybuty tagu <frameset> -

Sr.No	Atrybut i opis
1	cols Określa liczbę kolumn zawartych w zestawie ramek i rozmiar każdej kolumny. Możesz określić szerokość każdej kolumny na jeden z czterech sposobów - Wartości bezwzględne w pikselach. Na przykład, aby utworzyć trzy pionowe ramki, użyj cols = "100, 500, 100" . Procent okna przeglądarki. Na przykład, aby utworzyć trzy pionowe ramki, użyj cols = "10%, 80%, 10%" . Używanie symbolu wieloznacznego. Na przykład, aby utworzyć trzy pionowe ramki, użyj cols = "10%, , 10%"* . W tym przypadku symbol wieloznaczny zajmuje pozostałą część okna. Jako względne szerokości okna przeglądarki. Na przykład, aby utworzyć trzy pionowe ramki, użyj cols = "3 , 2 , 1 "* . To alternatywa dla procentów. Możesz użyć względnych szerokości okna przeglądarki. Tutaj okno jest podzielone na szóste: pierwsza kolumna zajmuje połowę okna, druga jedną trzecią, a trzecia jedną szóstą.
2	rows Ten atrybut działa podobnie jak atrybut cols i przyjmuje te same wartości, ale jest używany do określania wierszy w zestawie ramek. Na przykład, aby utworzyć dwie poziome ramki, użyj wierszy = "10%, 90%" . Możesz określić wysokość każdego wiersza w taki sam sposób, jak wyjaśniono powyżej dla kolumn.
3	border Ten atrybut określa szerokość krawędzi każdej klatki w pikselach. Na przykład border = "5". Wartość zero oznacza brak obramowania.
4	frameborder Ten atrybut określa, czy między ramkami powinna być wyświetlana trójwymiarowa ramka. Ten atrybut przyjmuje wartość 1 (tak) lub 0 (nie). Na przykład frameborder = "0" nie określa obramowania.
5	framespacing Ten atrybut określa ilość miejsca między ramkami w zestawie ramek. Może to przyjąć dowolną wartość całkowitą. Na przykład framespacing = "10" oznacza, że między klatkami powinno być 10 pikseli odstępu.

Atrybuty tagu <frame>

Poniżej znajdują się ważne atrybuty tagu <frame> -

Sr.No	Atrybut i opis
1	src Atrybut ten służy do podania nazwy pliku, który ma zostać załadowany do ramki. Jego wartością może być dowolny adres URL. Na przykład src = "/html/top_frame.htm" załaduje plik HTML dostępny w katalogu html.
2	name Ten atrybut umożliwia nadanie nazwy ramce. Służy do wskazania, do której ramki należy załadować dokument. Jest to szczególnie ważne, gdy chcesz utworzyć łącza w jednej ramce, które ładują strony do innej ramki. W takim przypadku druga ramka wymaga nazwy, aby zidentyfikować się jako cel łącza.
3	frameborder Ten atrybut określa, czy krawędzie tej klatki są wyświetlane; przesłania wartość podaną w atrybucie frameborder w znaczniku <frameset>, jeśli taki został podany, i może to przyjąć wartość 1 (tak) lub 0 (nie).
4	marginwidth Ten atrybut umożliwia określenie szerokości odstępu między lewą i prawą krawędzią ramki a zawartością ramki. Wartość podawana jest w pikselach. Na przykład marginwidth = "10".
5	marginheight Ten atrybut umożliwia określenie wysokości odstępu między górną i dolną krawędzią ramki oraz jej zawartością. Wartość podawana jest w pikselach. Na przykład marginheight = "10".
6	noresize Domyślnie możesz zmienić rozmiar dowolnej ramki, klikając i przeciągając krawędzie ramki. Atrybut noresize uniemożliwia użytkownikowi zmianę rozmiaru ramki. Na przykład noresize = "noresize".
7	scrolling Ten atrybut steruje wyglądem pasków przewijania, które pojawiają się w ramce. Przyjmuje wartości „tak”, „nie” lub „auto”. Na przykład scrolling = "no" oznacza, że nie powinno mieć pasków przewijania.
8	longdesc Ten atrybut umożliwia udostępnienie łącza do innej strony zawierającej długi opis zawartości ramki. Na przykład longdesc = "framedescription.htm"

Obsługa ramek przez przeglądarkę

Jeśli użytkownik korzysta ze starej przeglądarki lub dowolnej przeglądarki, która nie obsługuje ramek, wówczas element <noframes> powinien zostać wyświetlony użytkownikowi.

Musisz więc umieścić element <body> wewnątrz elementu <noframes>, ponieważ element <frameset> ma zastąpić element <body>, ale jeśli przeglądarka nie rozumie elementu <frameset>, powinna zrozumieć, co jest wewnątrz elementu element <body> zawarty w elemencie <noframes>.

Możesz przekazać miłą wiadomość dla użytkownika posiadającego starą przeglądarkę. Na przykład przepraszam !! Twoja przeglądarka nie obsługuje ramek. jak pokazano w powyższym przykładzie.

Nazwa ramki i atrybuty celu

Jednym z najpopularniejszych zastosowań ramek jest umieszczanie pasków nawigacji w jednej ramce, a następnie ładowanie stron głównych do osobnej ramki.

Zobaczmy następujący przykład, w którym plik test.htm ma następujący kod -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Target Frames</title>
   </head>
	
   <frameset cols = "200, *">
      <frame src = "/html/menu.htm" name = "menu_page" />
      <frame src = "/html/main.htm" name = "main_page" />
      
      <noframes>
         <body>Your browser does not support frames.</body>
      </noframes>
   </frameset>
	
</html>

Tutaj utworzyliśmy dwie kolumny do wypełnienia dwoma ramkami. Pierwsza klatka ma szerokość 200 pikseli i będzie zawierać pasek menu nawigacji zaimplementowany przezmenu.htmplik. Druga kolumna wypełnia pozostałą przestrzeń i będzie zawierać główną część strony i jest zaimplementowana przezmain.htmplik. Dla wszystkich trzech linków dostępnych na pasku menu wymieniliśmy ramkę docelową jakomain_page, więc po każdym kliknięciu dowolnego łącza na pasku menu, dostępne łącze otworzy się na stronie głównej.

Poniżej znajduje się zawartość pliku menu.htm

<!DOCTYPE html>
<html>

   <body bgcolor = "#4a7d49">
      <a href = "http://www.google.com" target = "main_page">Google</a>
      <br />
      <br />
      
      <a href = "http://www.microsoft.com" target = "main_page">Microsoft</a>
      <br />
      <br />
      
      <a href = "http://news.bbc.co.uk" target = "main_page">BBC News</a>
   </body>
	
</html>

Poniżej znajduje się zawartość pliku main.htm -

<!DOCTYPE html>
<html>

   <body bgcolor = "#b5dcb3">
      <h3>This is main page and content from any link will be displayed here.</h3>
      <p>So now click any link and see the result.</p>
   </body>
	
</html>

Kiedy ładujemy test.htm plik, daje następujący wynik -

Teraz możesz spróbować kliknąć linki dostępne w lewym panelu i zobaczyć wynik. Targetattribute może przyjąć jedną z następujących wartości -

Sr.No	Opcja i opis
1	_self Wczytuje stronę do bieżącej ramki.
2	_blank Wczytuje stronę do nowego okna przeglądarki. Otwarcie nowego okna.
3	_parent Wczytuje stronę do okna nadrzędnego, które w przypadku pojedynczego zestawu ramek jest głównym oknem przeglądarki.
4	_top Wczytuje stronę do okna przeglądarki, zastępując bieżące ramki.
5	targetframe Ładuje stronę do nazwanej ramki docelowej.

Możesz zdefiniować ramkę wbudowaną ze znacznikiem HTML <iframe>. Znacznik <iframe> nie jest w jakiś sposób powiązany ze znacznikiem <frameset>, zamiast tego może pojawić się w dowolnym miejscu w dokumencie. Znacznik <iframe> definiuje prostokątny obszar w dokumencie, w którym przeglądarka może wyświetlać oddzielny dokument, w tym paski przewijania i obramowania. Ramka wbudowana służy do osadzania innego dokumentu w bieżącym dokumencie HTML.

Plik src atrybut służy do określenia adresu URL dokumentu, który zajmuje ramkę wbudowaną.

Przykład

Poniżej znajduje się przykład pokazujący, jak używać elementu <iframe> -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Iframes</title>
   </head>
	
   <body>
      <p>Document content goes here...</p>
      
      <iframe src = "/html/menu.htm" width = "555" height = "200">
         Sorry your browser does not support inline frames.
      </iframe>
      
      <p>Document content also go here...</p>
   </body>
	
</html>

To da następujący wynik -

Atrybuty tagu <Iframe>

Większość atrybutów tagu <iframe>, w tym name, class, frameborder, id, longdesc, marginheight, marginwidth, name, scrolling, style i title zachowuje się dokładnie tak samo, jak odpowiadające im atrybuty tagu <frame>.

Note- The frameborder , marginwidth , longdesc , przewijanie , marginheight atrybutów przestarzałe HTML5. Nie używaj tych atrybutów.

Sr.No	Atrybut i opis
1	src Atrybut ten służy do podania nazwy pliku, który ma zostać załadowany do ramki. Jego wartością może być dowolny adres URL. Na przykład src = "/html/top_frame.htm" załaduje plik HTML dostępny w katalogu html.
2	name Ten atrybut umożliwia nadanie nazwy ramce. Służy do wskazania, do której ramki należy załadować dokument. Jest to szczególnie ważne, gdy chcesz utworzyć łącza w jednej ramce, które ładują strony do innej ramki. W takim przypadku druga ramka wymaga nazwy, aby zidentyfikować się jako cel łącza.
3	frameborder Ten atrybut określa, czy krawędzie tej klatki są wyświetlane; przesłania wartość podaną w atrybucie frameborder w znaczniku <frameset>, jeśli taki został podany, i może to przyjąć wartość 1 (tak) lub 0 (nie).
4	marginwidth Ten atrybut umożliwia określenie szerokości odstępu między lewą i prawą krawędzią ramki a zawartością ramki. Wartość podawana jest w pikselach. Na przykład marginwidth = "10".
5	marginheight Ten atrybut umożliwia określenie wysokości odstępu między górną i dolną krawędzią ramki oraz jej zawartością. Wartość podawana jest w pikselach. Na przykład marginheight = "10".
6	height Ten atrybut określa wysokość elementu <iframe>.
7	scrolling Ten atrybut steruje wyglądem pasków przewijania, które pojawiają się w ramce. Przyjmuje wartości „tak”, „nie” lub „auto”. Na przykład scrolling = "no" oznacza, że nie powinno mieć pasków przewijania.
8	longdesc Ten atrybut umożliwia udostępnienie łącza do innej strony zawierającej długi opis zawartości ramki. Na przykład longdesc = "framedescription.htm"
9	width Ten atrybut określa szerokość elementu <iframe>.

Wszystkie elementy HTML można podzielić na dwie kategorie (a) Blokowe elementy poziomu (b)Elementy wbudowane.

Elementy blokowe

Elementy blokowe pojawiają się na ekranie tak, jakby miały przerwę w linii przed i po nich. Na przykład <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr Elementy />, <blockquote> i <address> są elementami blokowymi. Wszystkie zaczynają na własnej nowej linii, a wszystko, co następuje po nich, pojawia się w nowej linii.

Elementy wbudowane

Z drugiej strony elementy wbudowane mogą pojawiać się w zdaniach i nie muszą pojawiać się w osobnym wierszu. <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, < code>, <cite>, <dfn>, <kbd> i <var> to elementy wbudowane.

Grupowanie elementów HTML

Istnieją dwa ważne tagi, których używamy bardzo często do grupowania różnych innych tagów HTML (i) tag <div> i (ii) tag <span>

Tag <div>

Jest to bardzo ważny znacznik blokowy, który odgrywa dużą rolę w grupowaniu różnych innych tagów HTML i stosowaniu CSS na grupie elementów. Nawet teraz tag <div> może być używany do tworzenia układu strony internetowej, w którym definiujemy różne części (lewą, prawą, górną itp.) Strony za pomocą tagu <div>. Ten tag nie zapewnia żadnych wizualnych zmian w bloku, ale ma to większe znaczenie, gdy jest używany z CSS.

Przykład

Poniżej znajduje się prosty przykład tagu <div>. Nauczymy się kaskadowego arkusza stylów (CSS) w osobnym rozdziale, ale użyliśmy go tutaj, aby pokazać użycie tagu <div> -

<!DOCTYPE html>
<html>
   
   <head>
      <title>HTML div Tag</title>
   </head>
	
   <body>
      <!-- First group of tags -->
      <div style = "color:red">
         <h4>This is first group</h4>
         <p>Following is a list of vegetables</p>
         
         <ul>
            <li>Beetroot</li>
            <li>Ginger</li>
            <li>Potato</li>
            <li>Radish</li>
         </ul>
      </div>

      <!-- Second group of tags -->
      <div style = "color:green">
         <h4>This is second group</h4>
         <p>Following is a list of fruits</p>
         
         <ul>
            <li>Apple</li>
            <li>Banana</li>
            <li>Mango</li>
            <li>Strawberry</li>
         </ul>
      </div>
   </body>
   
</html>

To da następujący wynik -

Tag <span>

HTML <span> jest elementem wbudowanym i można go używać do grupowania elementów wbudowanych w dokumencie HTML. Ten tag również nie zapewnia żadnych wizualnych zmian w bloku, ale ma większe znaczenie, gdy jest używany z CSS.

Różnica między tagiem <span> a tagiem <div> polega na tym, że tag <span> jest używany z elementami wbudowanymi, podczas gdy tag <div> jest używany z elementami blokowymi.

Przykład

Poniżej znajduje się prosty przykład tagu <span>. Nauczymy się kaskadowego arkusza stylów (CSS) w osobnym rozdziale, ale użyliśmy go tutaj, aby pokazać użycie tagu <span> -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML span Tag</title>
   </head>
	
   <body>
      <p>This is <span style = "color:red">red</span> and this is
         <span style = "color:green">green</span></p>
   </body>
	
</html>

To da następujący wynik -

Domyślnie tło Twojej strony internetowej jest w kolorze białym. Może ci się to nie podobać, ale nie martw się. HTML zapewnia dwa dobre sposoby dekorowania tła strony internetowej.

Tło HTML z kolorami
Tło HTML z obrazami

Przyjrzyjmy się teraz każdemu podejściu, używając odpowiednich przykładów.

Tło HTML z kolorami

Plik bgcolor Atrybut jest używany do kontrolowania tła elementu HTML, w szczególności treści strony i tła tabeli.

Note- Atrybut bgcolor jest przestarzały w HTML5. Nie używaj tego atrybutu.

Poniżej przedstawiono składnię użycia atrybutu bgcolor z dowolnym znacznikiem HTML.

<tagname bgcolor = "color_value"...>

Tę wartość_koloru można podać w dowolnym z następujących formatów -

<!-- Format 1 - Use color name -->
<table bgcolor = "lime" >
 
<!-- Format 2 - Use hex value -->
<table bgcolor = "#f1f1f1" >
 
<!-- Format 3 - Use color value in RGB terms -->
<table bgcolor = "rgb(0,0,120)" >

Przykład

Oto przykłady ustawiania tła tagu HTML -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Colors</title>
   </head>
	
   <body>
      <!-- Format 1 - Use color name -->
      <table bgcolor = "yellow" width = "100%">
         <tr>
            <td>
               This background is yellow
            </td>
         </tr>
      </table>
 
      <!-- Format 2 - Use hex value -->
      <table bgcolor = "#6666FF" width = "100%">
         <tr>
            <td>
               This background is sky blue
            </td>
         </tr>
      </table>
 
      <!-- Format 3 - Use color value in RGB terms -->
      <table bgcolor = "rgb(255,0,255)" width = "100%">
         <tr>
            <td>
               This background is green
            </td>
         </tr>
      </table>
   </body>
   
</html>

To da następujący wynik -

Tło HTML z obrazami

Plik backgroundAtrybut może być również używany do kontrolowania tła elementu HTML, w szczególności treści strony i tła tabeli. Możesz określić obraz, aby ustawić tło strony HTML lub tabeli.

Note- atrybut background jest przestarzały w HTML5. Nie używaj tego atrybutu.

Poniżej znajduje się składnia użycia atrybutu tła z dowolnym znacznikiem HTML.

Note- Atrybut background jest przestarzały i zaleca się używanie arkusza stylów do ustawiania tła.

<tagname background = "Image URL"...>

Najczęściej używanymi formatami obrazów są obrazy JPEG, GIF i PNG.

Przykład

Oto przykłady ustawiania obrazów tła tabeli.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set table background -->
      <table background = "/images/html.gif" width = "100%" height = "100">
         <tr><td>
            This background is filled up with HTML image.
         </td></tr>
      </table>
   </body>
   
</html>

To da następujący wynik -

Wzorzyste i przezroczyste tła

Być może widziałeś wiele wzorów lub przezroczystych tł na różnych stronach internetowych. Można to po prostu osiągnąć za pomocą wzorzystego obrazu lub przezroczystego obrazu w tle.

Zaleca się, aby podczas tworzenia wzorów lub przezroczystych obrazów GIF lub PNG używać możliwie najmniejszych wymiarów, nawet tak małych jak 1 x 1, aby uniknąć powolnego ładowania.

Przykład

Oto przykłady ustawiania wzoru tła tabeli -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Background Images</title>
   </head>
	
   <body>
      <!-- Set a table background using pattern -->
      <table background = "/images/pattern1.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>

      <!-- Another example on table background using pattern -->
      <table background = "/images/pattern2.gif" width = "100%" height = "100">
         <tr>
            <td>
               This background is filled up with a pattern image.
            </td>
         </tr>
      </table>
   </body>
   
</html>

To da następujący wynik -

Kolory są bardzo ważne, aby zapewnić dobry wygląd i styl witryny. Możesz określić kolory na poziomie strony za pomocą tagu <body> lub możesz ustawić kolory dla poszczególnych tagów za pomocąbgcolor atrybut.

Tag <body> ma następujące atrybuty, których można użyć do ustawienia różnych kolorów -

bgcolor - ustawia kolor tła strony.
text - ustawia kolor tekstu podstawowego.
alink - ustawia kolor dla aktywnych linków lub wybranych linków.
link - ustawia kolor dla połączonego tekstu.
vlink- ustawia kolor dla odwiedzonych linków - to znaczy dla linków, w które już kliknąłeś.

Metody kodowania kolorami HTML

Istnieją trzy różne metody ustawiania kolorów na stronie internetowej -

Color names - Możesz bezpośrednio określić nazwy kolorów, takie jak zielony, niebieski lub czerwony.
Hex codes - Sześciocyfrowy kod reprezentujący ilość czerwieni, zieleni i niebieskiego, które składają się na kolor.
Color decimal or percentage values - Ta wartość jest określana za pomocą właściwości rgb ().

Teraz zobaczymy te schematy kolorowania jeden po drugim.

Kolory HTML - nazwy kolorów

Możesz bezpośrednio określić nazwę koloru, aby ustawić kolor tekstu lub tła. W3C wymieniło 16 podstawowych nazw kolorów, które zostaną sprawdzone za pomocą walidatora HTML, ale istnieje ponad 200 różnych nazw kolorów obsługiwanych przez główne przeglądarki.

Note- Sprawdź pełną listę nazw kolorów HTML.

W3C Standard 16 kolorów

Oto lista nazw W3C Standard 16 Colours i zalecane jest ich używanie.

czarny	Szary	Srebro	Biały
Żółty	Limonka	wodny	Fuksja
Czerwony	Zielony	niebieski	Purpurowy
Kasztanowaty	Oliwa	Marynarka wojenna	Cyraneczka

Przykład

Oto przykłady ustawiania tła tagu HTML według nazwy koloru -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Colors by Name</title>
   </head>
	
   <body text = "blue" bgcolor = "green">
      <p>Use different color names for for body and table and see the result.</p>
      
      <table bgcolor = "black">
         <tr>
            <td>
               <font color = "white">This text will appear white on black background.</font>
            </td>
         </tr>
      </table>
   </body>
   
</html>

Kolory HTML - kody szesnastkowe

Szesnastkowy to sześciocyfrowa reprezentacja koloru. Pierwsze dwie cyfry (RR) reprezentują wartość czerwoną, następne dwie to wartość zielona (GG), a ostatnie to wartość niebieska (BB).

Wartość szesnastkową można pobrać z dowolnego oprogramowania graficznego, takiego jak Adobe Photoshop, Paintshop Pro lub MS Paint.

Każdy kod szesnastkowy będzie poprzedzony znakiem krzyżyka lub krzyżyka #. Poniżej znajduje się lista kilku kolorów w notacji szesnastkowej.

Kolor	Kolor HEX
	# 000000
	# FF0000
	# 00FF00
	# 0000FF
	# FFFF00
	# 00FFFF
	# FF00FF
	# C0C0C0
	#FFFFFF

Przykład

Oto przykłady ustawiania tła tagu HTML za pomocą kodu koloru w formacie szesnastkowym -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Colors by Hex</title>
   </head>
	
   <body text = "#0000FF" bgcolor = "#00FF00">
      <p>Use different color hexa for for body and table and see the result.</p>
      
      <table bgcolor = "#000000">
         <tr>
            <td>
               <font color = "#FFFFFF">This text will appear white on black background.</font>
            </td>
         </tr>
      </table>
   </body>
   
</html>

Kolory HTML - wartości RGB

Ta wartość koloru jest określana za pomocą rgb( )własność. Ta właściwość przyjmuje trzy wartości, po jednej dla koloru czerwonego, zielonego i niebieskiego. Wartość może być liczbą całkowitą od 0 do 255 lub wartością procentową.

Note - Żadna przeglądarka nie obsługuje właściwości color rgb (), więc nie zaleca się jej używania.

Poniżej znajduje się lista pokazująca kilka kolorów przy użyciu wartości RGB.

Kolor	Kolor RGB
	rgb (0,0,0)
	rgb (255,0,0)
	rgb (0,255,0)
	rgb (0,0,255)
	rgb (255,255,0)
	rgb (0,255,255)
	rgb (255,0,255)
	rgb (192,192,192)
	rgb (255,255,255)

Przykład

Oto przykłady ustawiania tła znacznika HTML za pomocą kodu koloru przy użyciu wartości rgb () -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Colors by RGB code</title>
   </head>
	
   <body text = "rgb(0,0,255)" bgcolor = "rgb(0,255,0)">
      <p>Use different color code for for body and table and see the result.</p>
      
      <table bgcolor = "rgb(0,0,0)">
         <tr>
            <td>
               <font color = "rgb(255,255,255)">This text will appear white on black background.</font>
            </td>
         </tr>
      </table>
   </body>
   
</html>

Bezpieczne kolory w przeglądarce

Oto lista 216 kolorów, które mają być najbezpieczniejszymi i niezależnymi od komputera. Te kolory są bardzo od kodu szesnastkowego 000000 do FFFFFF i będą obsługiwane przez wszystkie komputery posiadające paletę 256 kolorów.

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

Czcionki odgrywają bardzo ważną rolę w uczynieniu strony internetowej bardziej przyjazną dla użytkownika i zwiększeniu czytelności treści. Krój i kolor czcionki zależą całkowicie od komputera i przeglądarki używanej do przeglądania strony, ale możesz użyć HTML<font>tag, aby dodać styl, rozmiar i kolor do tekstu w witrynie. Możesz użyć<basefont> , aby nadać całemu tekstowi ten sam rozmiar, twarz i kolor.

Znacznik czcionki ma trzy atrybuty o nazwie size, color, i faceaby dostosować czcionki. Aby zmienić dowolny atrybut czcionki w dowolnym momencie na swojej stronie internetowej, po prostu użyj tagu <font>. Tekst, który następuje, pozostanie zmieniony aż do zamknięcia znacznikiem </font>. Możesz zmienić jeden lub wszystkie atrybuty czcionki w jednym znaczniku <font>.

Note- Czcionka i tagi basefont są przestarzałe i powinno zostać usunięte w przyszłej wersji HTML. Dlatego nie należy ich raczej używać, zaleca się używanie stylów CSS do manipulowania czcionkami. Wciąż jednak dla celów edukacyjnych, w tym rozdziale szczegółowo omówimy czcionki i tagi basefont.

Ustaw rozmiar czcionki

Możesz ustawić rozmiar czcionki zawartości za pomocą sizeatrybut. Zakres akceptowanych wartości wynosi od 1 (najmniejsza) do 7 (największa). Domyślny rozmiar czcionki to 3.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Size</title>
   </head>

   <body>
      <font size = "1">Font size = "1"</font><br />
      <font size = "2">Font size = "2"</font><br />
      <font size = "3">Font size = "3"</font><br />
      <font size = "4">Font size = "4"</font><br />
      <font size = "5">Font size = "5"</font><br />
      <font size = "6">Font size = "6"</font><br />
      <font size = "7">Font size = "7"</font>
   </body>

</html>

To da następujący wynik -

Względny rozmiar czcionki

Możesz określić, o ile rozmiarów powinno być większych lub o ile mniejszych niż wstępnie ustawiony rozmiar czcionki. Możesz to określić jak<font size = "+n"> lub <font size = "−n">

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Relative Font Size</title>
   </head>

   <body>
      <font size = "-1">Font size = "-1"</font><br />
      <font size = "+1">Font size = "+1"</font><br />
      <font size = "+2">Font size = "+2"</font><br />
      <font size = "+3">Font size = "+3"</font><br />
      <font size = "+4">Font size = "+4"</font>
   </body>

</html>

To da następujący wynik -

Ustawianie kroju czcionki

Możesz ustawić krój czcionki za pomocą atrybutu twarzy, ale pamiętaj, że jeśli użytkownik przeglądający stronę nie ma zainstalowanej czcionki, nie będzie jej mógł zobaczyć. Zamiast tego użytkownik zobaczy domyślną czcionkę stosowaną na komputerze użytkownika.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Font Face</title>
   </head>

   <body>
      <font face = "Times New Roman" size = "5">Times New Roman</font><br />
      <font face = "Verdana" size = "5">Verdana</font><br />
      <font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
      <font face = "WildWest" size = "5">WildWest</font><br />
      <font face = "Bedrock" size = "5">Bedrock</font><br />
   </body>

</html>

To da następujący wynik -

Określ alternatywne kroje czcionek

Gość będzie mógł zobaczyć twoją czcionkę tylko wtedy, gdy ma tę czcionkę zainstalowaną na swoim komputerze. Można więc określić dwie lub więcej alternatywnych krojów czcionek, wymieniając nazwy czcionek oddzielone przecinkiem.

<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">

Po załadowaniu strony przeglądarka wyświetli pierwszą dostępną czcionkę. Jeśli żadna z podanych czcionek nie jest zainstalowana, wyświetli się domyślny krój czcionki Times New Roman .

Note - Sprawdź pełną listę HTML Standard Fonts.

Ustawianie koloru czcionki

Możesz ustawić dowolny kolor czcionki, używając atrybutu koloru . Możesz określić żądany kolor za pomocą nazwy koloru lub kodu szesnastkowego dla tego koloru.

Note - Możesz sprawdzić pełną listę HTML Color Name with Codes.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Color</title>
   </head>
	
   <body>
      <font color = "#FF00FF">This text is in pink</font><br />
      <font color = "red">This text is red</font>
   </body>
	
</html>

To da następujący wynik -

Element <basefont>

Element <basefont> ma na celu ustawienie domyślnego rozmiaru, koloru i kroju czcionki dla wszystkich części dokumentu, które nie są w inny sposób zawarte w znaczniku <font>. Możesz użyć elementów <font>, aby nadpisać ustawienia <basefont>.

Znacznik <basefont> przyjmuje również atrybuty koloru, rozmiaru i twarzy i będzie obsługiwał względne ustawienie czcionki, podając rozmiarowi wartość +1 dla rozmiaru większego lub -2 dla dwóch rozmiarów mniejszych.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Basefont Color</title>
   </head>
	
   <body>
      <basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
      <p>This is the page's default font.</p>
      <h2>Example of the &lt;basefont&gt; Element</h2>
      
      <p><font size = "+2" color = "darkgray">
            This is darkgray text with two sizes larger
         </font>
      </p>

      <p><font face = "courier" size = "-1" color = "#000000">
            It is a courier font, a size smaller and black in color.
         </font>
      </p>
   </body>
	
</html>

To da następujący wynik -

Formularze HTML są wymagane, gdy chcesz zebrać dane od osoby odwiedzającej witrynę. Na przykład podczas rejestracji użytkownika chciałbyś zebrać informacje takie jak imię i nazwisko, adres e-mail, karta kredytowa itp.

Formularz pobierze dane wejściowe od odwiedzającego witrynę, a następnie wyśle je do aplikacji zaplecza, takiej jak CGI, skrypt ASP lub skrypt PHP itp. Aplikacja zaplecza wykona wymagane przetwarzanie na przekazanych danych w oparciu o zdefiniowaną wewnątrz logikę biznesową Aplikacja.

Dostępne są różne elementy formularza, takie jak pola tekstowe, pola tekstowe, menu rozwijane, przyciski opcji, pola wyboru itp.

HTML <form> tag służy do tworzenia formularza HTML i ma następującą składnię -

<form action = "Script URL" method = "GET|POST">
   form elements like input, textarea etc.
</form>

Atrybuty formularza

Oprócz typowych atrybutów poniżej znajduje się lista najczęściej używanych atrybutów formularza -

Sr.No	Atrybut i opis
1	action Skrypt zaplecza gotowy do przetwarzania przekazanych danych.
2	method Metoda, która ma być używana do przesyłania danych. Najczęściej używane są metody GET i POST.
3	target Określ docelowe okno lub ramkę, w której zostanie wyświetlony wynik działania skryptu. Przyjmuje wartości takie jak _blank, _self, _parent itp.
4	enctype Możesz użyć atrybutu enctype, aby określić, w jaki sposób przeglądarka koduje dane przed wysłaniem ich na serwer. Możliwe wartości to - application/x-www-form-urlencoded - Jest to standardowa metoda, której większość formularzy używa w prostych scenariuszach. mutlipart/form-data - Jest to używane, gdy chcesz przesłać dane binarne w postaci plików takich jak obraz, plik tekstowy itp.

Note- Możesz zapoznać się z Perl i CGI, aby uzyskać szczegółowe informacje na temat wysyłania danych z formularzy.

Kontrolki formularza HTML

Istnieją różne typy formantów formularzy, których można używać do zbierania danych za pomocą formularza HTML -

Kontrolki wprowadzania tekstu
Kontrolki pól wyboru
Sterowanie skrzynką radiową
Wybierz opcję Box Controls
Pola wyboru pliku
Ukryte elementy sterujące
Klikalne przyciski
Przycisk przesyłania i resetowania

Kontrolki wprowadzania tekstu

Istnieją trzy typy wprowadzania tekstu używane w formularzach -

Single-line text input controls- Ten element sterujący jest używany w przypadku elementów, które wymagają tylko jednego wiersza wprowadzania danych przez użytkownika, takich jak pola wyszukiwania lub nazwy. Są tworzone za pomocą HTML<input> etykietka.
Password input controls- Jest to również jednowierszowe wprowadzenie tekstu, ale maskuje znak, gdy tylko użytkownik go wprowadzi. Są również tworzone za pomocą tagu HTMl <input>.
Multi-line text input controls- Stosuje się, gdy użytkownik jest zobowiązany do podania szczegółów, które mogą być dłuższe niż jedno zdanie. Wielowierszowe kontrolki wprowadzania danych są tworzone przy użyciu języka HTML<textarea> etykietka.

Jednowierszowe kontrolki wprowadzania tekstu

Ta kontrolka jest używana w przypadku elementów, które wymagają tylko jednego wiersza wprowadzania danych przez użytkownika, takich jak pola wyszukiwania lub nazwy. Są tworzone za pomocą tagu HTML <input>.

Przykład

Oto podstawowy przykład jednowierszowego wprowadzania tekstu używanego do wpisywania imienia i nazwiska -

<!DOCTYPE html>
<html>

   <head>
      <title>Text Input Control</title>
   </head>
	
   <body>
      <form >
         First name: <input type = "text" name = "first_name" />
         <br>
         Last name: <input type = "text" name = "last_name" />
      </form>
   </body>
	
</html>

To da następujący wynik -

Atrybuty

Poniżej znajduje się lista atrybutów dla znacznika <input> służących do tworzenia pola tekstowego.

Sr.No	Atrybut i opis
1	type Wskazuje typ kontrolki wprowadzania tekstu i dla kontrolki wprowadzania tekstu, na jaką zostanie ustawiona text.
2	name Służy do nadania nazwy kontrolce, która jest wysyłana do serwera w celu rozpoznania i pobrania wartości.
3	value Może to służyć do podania wartości początkowej w formancie.
4	size Umożliwia określenie szerokości kontrolki wprowadzania tekstu w postaci znaków.
5	maxlength Pozwala określić maksymalną liczbę znaków, które użytkownik może wprowadzić w polu tekstowym.

Kontrola wprowadzania hasła

Jest to również jednowierszowe wprowadzanie tekstu, ale maskuje znak, gdy tylko użytkownik go wprowadzi. Są również tworzone za pomocą znacznika HTML <input>, ale atrybut type jest ustawiony napassword.

Przykład

Oto podstawowy przykład jednowierszowego wprowadzenia hasła używanego do wpisania hasła użytkownika -

<!DOCTYPE html>
<html>

   <head>
      <title>Password Input Control</title>
   </head>
	
   <body>
      <form >
         User ID : <input type = "text" name = "user_id" />
         <br>
         Password: <input type = "password" name = "password" />
      </form>
   </body>
	
</html>

To da następujący wynik -

Atrybuty

Poniżej znajduje się lista atrybutów znacznika <input> służących do tworzenia pola hasła.

Sr.No	Atrybut i opis
1	type Wskazuje typ kontroli wejścia i dla kontroli wprowadzania hasła, który zostanie ustawiony password.
2	name Służy do nadania nazwy kontrolce, która jest wysyłana do serwera w celu rozpoznania i pobrania wartości.
3	value Może to służyć do podania wartości początkowej w formancie.
4	size Umożliwia określenie szerokości kontrolki wprowadzania tekstu w postaci znaków.
5	maxlength Pozwala określić maksymalną liczbę znaków, które użytkownik może wprowadzić w polu tekstowym.

Wielowierszowe kontrolki wprowadzania tekstu

Jest to używane, gdy użytkownik jest zobowiązany do podania szczegółów, które mogą być dłuższe niż jedno zdanie. Wielowierszowe kontrolki wprowadzania są tworzone za pomocą znacznika HTML <textarea>.

Przykład

Oto podstawowy przykład wielowierszowego wprowadzania tekstu używanego do opisu przedmiotu -

<!DOCTYPE html>
<html>

   <head>
      <title>Multiple-Line Input Control</title>
   </head>
	
   <body>
      <form>
         Description : <br />
         <textarea rows = "5" cols = "50" name = "description">
            Enter description here...
         </textarea>
      </form>
   </body>
	
</html>

To da następujący wynik -

Atrybuty

Poniżej znajduje się lista atrybutów dla znacznika <textarea>.

Sr.No	Atrybut i opis
1	name Służy do nadania nazwy kontrolce, która jest wysyłana do serwera w celu rozpoznania i pobrania wartości.
2	rows Wskazuje liczbę wierszy pola obszaru tekstowego.
3	cols Wskazuje liczbę kolumn w polu obszaru tekstowego

Kontrola pola wyboru

Pola wyboru są używane, gdy wymagane jest wybranie więcej niż jednej opcji. Są również tworzone za pomocą znacznika HTML <input>, ale atrybut type jest ustawiony nacheckbox..

Przykład

Oto przykładowy kod HTML dla formularza z dwoma polami wyboru -

<!DOCTYPE html>
<html>

   <head>
      <title>Checkbox Control</title>
   </head>
	
   <body>
      <form>
         <input type = "checkbox" name = "maths" value = "on"> Maths
         <input type = "checkbox" name = "physics" value = "on"> Physics
      </form>
   </body>
	
</html>

To da następujący wynik -

Atrybuty

Poniżej znajduje się lista atrybutów dla tagu <checkbox>.

Sr.No	Atrybut i opis
1	type Wskazuje typ kontroli wejścia i dla kontroli wejścia pola wyboru, na jaki zostanie ustawiony checkbox..
2	name Służy do nadania nazwy kontrolce, która jest wysyłana do serwera w celu rozpoznania i pobrania wartości.
3	value Wartość, która będzie używana, jeśli pole wyboru jest zaznaczone.
4	checked Ustaw zaznaczone, jeśli chcesz je wybrać domyślnie.

Sterowanie przyciskiem radiowym

Przyciski opcji są używane, gdy z wielu opcji wystarczy wybrać tylko jedną. Są również tworzone za pomocą znacznika HTML <input>, ale atrybut type jest ustawiony naradio.

Przykład

Oto przykład kodu HTML dla formularza z dwoma przyciskami opcji -

<!DOCTYPE html>
<html>

   <head>
      <title>Radio Box Control</title>
   </head>

   <body>
      <form>
         <input type = "radio" name = "subject" value = "maths"> Maths
         <input type = "radio" name = "subject" value = "physics"> Physics
      </form>
   </body>

</html>

To da następujący wynik -

Atrybuty

Poniżej znajduje się lista atrybutów przycisku opcji.

Sr.No	Atrybut i opis
1	type Wskazuje typ sterowania wejściem, a dla sterowania wejściem pola wyboru zostanie ustawiony na radio.
2	name Służy do nadania nazwy kontrolce, która jest wysyłana do serwera w celu rozpoznania i pobrania wartości.
3	value Wartość, która będzie używana w przypadku zaznaczenia pola radiowego.
4	checked Ustaw zaznaczone, jeśli chcesz je wybrać domyślnie.

Wybierz opcję Box Control

Pole wyboru, nazywane również rozwijanym polem, które umożliwia wyświetlenie listy różnych opcji w postaci listy rozwijanej, z której użytkownik może wybrać jedną lub więcej opcji.

Przykład

Oto przykład kodu HTML dla formularza z jednym rozwijanym oknem

<!DOCTYPE html>
<html>

   <head>
      <title>Select Box Control</title>
   </head>
	
   <body>
      <form>
         <select name = "dropdown">
            <option value = "Maths" selected>Maths</option>
            <option value = "Physics">Physics</option>
         </select>
      </form>
   </body>
	
</html>

To da następujący wynik -

Atrybuty

Poniżej znajduje się lista ważnych atrybutów tagu <select> -

Sr.No	Atrybut i opis
1	name Służy do nadania nazwy kontrolce, która jest wysyłana do serwera w celu rozpoznania i pobrania wartości.
2	size Można to wykorzystać do zaprezentowania przewijanego pola listy.
3	multiple Jeśli ustawione na „wiele”, umożliwia użytkownikowi wybranie wielu elementów z menu.

Poniżej znajduje się lista ważnych atrybutów tagu <option> -

Sr.No	Atrybut i opis
1	value Wartość, która będzie używana, jeśli zostanie wybrana opcja w polu wyboru.
2	selected Określa, że ta opcja powinna być początkowo wybraną wartością podczas wczytywania strony.
3	label Alternatywny sposób oznaczania opcji

Okno przesyłania plików

Jeśli chcesz zezwolić użytkownikowi na przesyłanie pliku do Twojej witryny internetowej, będziesz musiał użyć pola przesyłania plików, znanego również jako pole wyboru plików. Jest to również tworzone przy użyciu elementu <input>, ale atrybut type jest ustawiony nafile.

Przykład

Oto przykładowy kod HTML dla formularza z jednym polem do przesyłania plików -

<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <input type = "file" name = "fileupload" accept = "image/*" />
      </form>
   </body>
	
</html>

To da następujący wynik -

Atrybuty

Poniżej znajduje się lista ważnych atrybutów pola przesyłania plików -

Sr.No	Atrybut i opis
1	name Służy do nadania nazwy kontrolce, która jest wysyłana do serwera w celu rozpoznania i pobrania wartości.
2	accept Określa typy plików, które akceptuje serwer.

Przyciski sterujące

Istnieje wiele sposobów tworzenia klikalnych przycisków w HTML. Możesz również utworzyć przycisk klikalny za pomocą tagu <input>, ustawiając jego atrybut type nabutton. Atrybut type może przyjmować następujące wartości -

Sr.No	Typ i opis
1	submit Tworzy to przycisk, który automatycznie przesyła formularz.
2	reset Tworzy to przycisk, który automatycznie resetuje kontrolki formularza do ich początkowych wartości.
3	button Spowoduje to utworzenie przycisku, który jest używany do wyzwalania skryptu po stronie klienta, gdy użytkownik kliknie ten przycisk.
4	image Tworzy to klikalny przycisk, ale możemy użyć obrazu jako tła przycisku.

Przykład

Oto przykład kodu HTML dla formularza z trzema typami przycisków -

<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>
	
   <body>
      <form>
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
         <input type = "button" name = "ok" value = "OK" />
         <input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
      </form>
   </body>
	
</html>

To da następujący wynik -

Ukryte kontrolki formularza

Ukryte kontrolki formularzy służą do ukrywania danych na stronie, które później można przekazać na serwer. Ta kontrolka ukrywa się w kodzie i nie pojawia się na rzeczywistej stronie. Na przykład następujący ukryty formularz jest używany do zachowania bieżącego numeru strony. Kiedy użytkownik kliknie następną stronę, wartość ukrytej kontroli zostanie wysłana do serwera WWW i tam zadecyduje, która strona zostanie wyświetlona jako następna na podstawie przekazanej bieżącej strony.

Przykład

Oto przykładowy kod HTML pokazujący użycie ukrytej kontroli -

<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <p>This is page 10</p>
         <input type = "hidden" name = "pagename" value = "10" />
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
      </form>
   </body>
	
</html>

To da następujący wynik -

Czasami musisz dodać muzykę lub wideo do swojej strony internetowej. Najłatwiejszym sposobem dodania wideo lub dźwięku do witryny internetowej jest dołączenie specjalnego tagu HTML o nazwie<embed>. Ten znacznik powoduje, że przeglądarka sama zawiera elementy sterujące dla automatycznie dostarczanych multimediów. Przeglądarka obsługuje znacznik <embed> i dany typ multimediów.

Możesz również dołączyć plik <noembed>tag dla przeglądarek, które nie rozpoznają tagu <embed>. Możesz na przykład użyć <embed>, aby wyświetlić wybrany film, a<noembed> aby wyświetlić pojedynczy obraz JPG, jeśli przeglądarka nie obsługuje znacznika <embed>.

Przykład

Oto prosty przykład odtwarzania osadzonego pliku midi -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>
	
   <body>
      <embed src = "/html/yourfile.mid" width = "100%" height = "60" >
         <noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
      </embed>
   </body>

</html>

Atrybuty tagu <embed>

Poniżej znajduje się lista ważnych atrybutów, których można używać ze znacznikiem <embed>.

Note- Atrybuty align i autostart są przestarzałe w HTML5. Nie używaj tych atrybutów.

Sr.No	Atrybut i opis
1	align Określa sposób wyrównywania obiektu. Można go ustawić na środku, w lewo lub w prawo .
2	autostart Ten atrybut logiczny wskazuje, czy nośnik powinien zostać uruchomiony automatycznie. Możesz ustawić wartość true lub false.
3	loop Określa, czy dźwięk powinien być odtwarzany w sposób ciągły (ustaw pętlę na true), określoną liczbę razy (wartość dodatnia), czy wcale (fałsz)
4	playcount Określa, ile razy ma być odtwarzany dźwięk. Jest to alternatywna opcja pętli, jeśli używasz IE.
5	hidden Określa, czy obiekt multimedialny ma być wyświetlany na stronie. Wartość fałszywa oznacza nie, a wartości prawdziwe oznaczają tak.
6	width Szerokość obiektu w pikselach
7	height Wysokość obiektu w pikselach
8	name Nazwa używana do odniesienia do obiektu.
9	src Adres URL obiektu do osadzenia.
10	volume Kontroluje głośność dźwięku. Może mieć wartość od 0 (wyłączone) do 100 (pełna głośność).

Obsługiwane typy wideo

W tagu embed można używać różnych typów plików multimedialnych, takich jak filmy Flash (.swf), AVI (.avi) i MOV (.mov).

.swf files - to typy plików utworzone przez program Flash firmy Macromedia.
.wmv files - to typy plików Microsoft Windows Media Video.
.mov files - to format Quick Time Movie firmy Apple.
.mpeg files - to pliki filmowe utworzone przez grupę Moving Pictures Expert Group.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>

   <body>
      <embed src = "/html/yourfile.swf" width = "200" height = "200" >
         <noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
      </embed>
   </body>

</html>

To da następujący wynik -

Dźwięk w tle

Możesz użyć HTML <bgsound>, aby odtworzyć ścieżkę dźwiękową w tle Twojej strony internetowej. Ten tag jest obsługiwany tylko przez Internet Explorer, a większość innych przeglądarek ignoruje ten tag. Pobiera i odtwarza plik audio, gdy dokument główny jest po raz pierwszy pobierany przez użytkownika i wyświetlany. Plik dźwiękowy tła będzie również odtwarzany za każdym razem, gdy użytkownik odświeży przeglądarkę.

Note- Znacznik bgsound jest przestarzały i powinien zostać usunięty w przyszłej wersji HTML. Dlatego nie należy ich raczej używać, sugeruje się użycie dźwięku znacznika HTML5 do dodania dźwięku. Wciąż jednak dla celów edukacyjnych, w tym rozdziale wyjaśniono szczegółowo tag bgsound.

Ten tag ma tylko dwie pętle atrybutów i src . Oba te atrybuty mają takie samo znaczenie, jak wyjaśniono powyżej.

Oto prosty przykład odtworzenia małego pliku midi -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>
	
   <body>
      <bgsound src = "/html/yourfile.mid">
         <noembed><img src = "yourimage.gif" ></noembed>
      </bgsound>
   </body>
	
</html>

Spowoduje to wyświetlenie pustego ekranu. Ten znacznik nie wyświetla żadnego komponentu i pozostaje ukryty.

Internet Explorer może również obsługiwać tylko trzy różne pliki w formacie dźwiękowym - wav, format natywny dla komputerów PC; au, format natywny dla większości stacji roboczych Unix; i MIDI, uniwersalny schemat kodowania muzyki.

Znacznik obiektu HTML

HTML 4 wprowadza <object>element, który oferuje uniwersalne rozwiązanie do ogólnego dołączania obiektów. Plik<object> element umożliwia autorom HTML określenie wszystkiego, co jest wymagane przez obiekt do jego prezentacji przez klienta użytkownika.

Oto kilka przykładów -

Przykład 1

Możesz osadzić dokument HTML w samym dokumencie HTML w następujący sposób -

<object data = "data/test.htm" type = "text/html" width = "300" height = "200">
   alt : <a href = "data/test.htm">test.htm</a>
</object>

Tutaj atrybut alt pojawi się na obrazku, jeśli przeglądarka nie obsługuje znacznika obiektu .

Przykład - 2

Możesz osadzić dokument PDF w dokumencie HTML w następujący sposób -

<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">
   alt : <a href = "data/test.pdf">test.htm</a>
</object>

Przykład - 3

Możesz określić niektóre parametry związane z dokumentem z rozszerzeniem <param>etykietka. Oto przykład osadzania pliku wav -

<object data = "data/test.wav" type = "audio/x-wav" width = "200" height = "20">
   <param name = "src" value = "data/test.wav">
   <param name = "autoplay" value = "false">
   <param name = "autoStart" value = "0">
   alt : <a href = "data/test.wav">test.wav</a>
</object>

Przykład - 4

Możesz dodać dokument Flash w następujący sposób -

<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id = "penguin" 
   codebase = "someplace/swflash.cab" width = "200" height = "300">
   
   <param name = "movie" value = "flash/penguin.swf" />
   <param name = "quality" value = "high" />
   <img src = "penguin.jpg" width = "200" height = "300" alt = "Penguin" />
</object>

Przykład - 5

Możesz dodać aplet java do dokumentu HTML w następujący sposób -

<object classid = "clsid:8ad9c840-044e-11d1-b3e9-00805f499d93" 
   width = "200" height = "200">
   <param name = "code" value = "applet.class">
</object>

Plik classidatrybut określa, której wersji wtyczki Java należy użyć. Możesz użyć opcjonalnego atrybutu codebase, aby określić, czy i jak pobrać środowisko JRE.

Markiza HTML to przewijany fragment tekstu wyświetlany poziomo w poprzek lub pionowo w dół strony internetowej, w zależności od ustawień. Jest to tworzone za pomocą tagu HTML <marquees>.

Note- Tag <marquee> jest przestarzały w HTML5. Nie używaj tego elementu, zamiast tego możesz użyć JavaScript i CSS do tworzenia takich efektów.

Składnia

Prosta składnia użycia znacznika HTML <marquee> jest następująca -

<marquee attribute_name = "attribute_value"....more attributes>
   One or more lines or text message or image
</marquee>

Atrybuty tagów <marquee>

Poniżej znajduje się lista ważnych atrybutów, których można używać ze znacznikiem <marquee>.

Sr.No	Atrybut i opis
1	width Określa szerokość markizy. Może to być wartość taka jak 10 lub 20% itd.
2	height Określa wysokość markizy. Może to być wartość taka jak 10 lub 20% itd.
3	direction Określa kierunek, w którym powinna się przewijać markiza. Może to być wartość taka jak góra, dół, lewo lub prawo .
4	behavior Określa typ przewijania markizy. Może to mieć wartość taką jak przewijanie, przesuwanie i naprzemiennie .
5	scrolldelay Określa, jak długo należy opóźnić każdy skok. Będzie to miało wartość taką jak 10 itd.
6	scrollamount Określa prędkość tekstu markizy. Może mieć wartość taką jak 10 itd.
7	loop Określa, ile razy należy wykonać pętlę. Wartość domyślna to INFINITE, co oznacza, że marquee zapętla się bez końca.
8	bgcolor Określa kolor tła pod względem nazwy koloru lub wartości szesnastkowej koloru.
9	hspace Określa poziomą przestrzeń wokół markizy. Może to być wartość taka jak 10 lub 20% itd.
10	vspace Określa pionową przestrzeń wokół markizy. Może to być wartość taka jak 10 lub 20% itd.

Poniżej znajduje się kilka przykładów pokazujących użycie znacznika markizy.

Przykłady - 1

<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>
	
   <body>
      <marquee>This is basic example of marquee</marquee>
   </body>
	
</html>

To da następujący wynik -

Przykłady - 2

<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>
	
   <body>
      <marquee width = "50%">This example will take only 50% width</marquee>
   </body>
	
</html>

To da następujący wynik -

Przykłady - 3

<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>

   <body>
      <marquee direction = "right">This text will scroll from left to right</marquee>
   </body>
	
</html>

To da następujący wynik -

Przykłady - 4

<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>
	
   <body>
      <marquee direction = "up">This text will scroll from bottom to up</marquee>
   </body>
	
</html>

To da następujący wynik -

Dowiedzieliśmy się, że typowy dokument HTML będzie miał następującą strukturę -

Document declaration tag 
<html>
   
   <head>
      Document header related tags
   </head>

   <body>
      Document body related tags
   </body>
   
</html>

Ten rozdział poda trochę więcej szczegółów na temat części nagłówka, która jest reprezentowana przez znacznik HTML <head>. Tag <head> jest kontenerem różnych ważnych tagów, takich jak <title>, <meta>, <link>, <base>, <style>, <script> i <noscript>.

Tag HTML <title>

Znacznik HTML <title> służy do określenia tytułu dokumentu HTML. Poniżej znajduje się przykład nadania tytułu dokumentowi HTML -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Title Tag Example</title>
   </head>

   <body>
      <p>Hello, World!</p>
   </body>

</html>

To da następujący wynik -

Tag HTML <meta>

Tag HTML <meta> służy do dostarczania metadanych o dokumencie HTML, które zawierają informacje o wygaśnięciu strony, autorze strony, liście słów kluczowych, opisie strony itp.

Oto kilka ważnych zastosowań tagu <meta> w dokumencie HTML -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Meta Tag Example</title>

      <!-- Provide list of keywords -->
      <meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">

      <!-- Provide description of the page -->
      <meta name = "description" content = "Simply Easy Learning by Tutorials Point">

      <!-- Author information -->
      <meta name = "author" content = "Tutorials Point">

      <!-- Page content type -->
      <meta http-equiv = "content-type" content = "text/html; charset = UTF-8">

      <!-- Page refreshing delay -->
      <meta http-equiv = "refresh" content = "30">

      <!-- Page expiry -->
      <meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT">

      <!-- Tag to tell robots not to index the content of a page -->
      <meta name = "robots" content = "noindex, nofollow">

   </head>

   <body>
      <p>Hello, World!</p>
   </body>
	
</html>

To da następujący wynik -

Tag HTML <base>

Znacznik HTML <base> służy do określania podstawowego adresu URL dla wszystkich względnych adresów URL na stronie, co oznacza, że wszystkie inne adresy URL zostaną połączone w podstawowy adres URL podczas lokalizowania dla danego elementu.

Na przykład wszystkie podane strony i obrazy będą przeszukiwane po uprzednim dodaniu podanych adresów URL bazowego adresu URL http://www.tutorialspoint.com/ katalog -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Base Tag Example</title>
      <base href = "https://www.tutorialspoint.com/" />
   </head>

   <body>
      <img src = "/images/logo.png" alt = "Logo Image"/>
      <a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a> 
   </body>

</html>

To da następujący wynik -

Ale jeśli zmienisz podstawowy adres URL na inny, na przykład, jeśli podstawowy adres URL to http://www.tutorialspoint.com/home, obraz i inne podane łącza staną się takie jak http://www.tutorialspoint.com/home/images /logo.png i http://www.tutorialspoint.com/html/index.htm

Tag HTML <link>

Znacznik HTML <link> służy do określania relacji między bieżącym dokumentem a zasobem zewnętrznym. Poniżej znajduje się przykład połączenia zewnętrznego pliku arkusza stylów dostępnego w programiecss podkatalog w katalogu głównym sieci -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML link Tag Example</title>
      <base href = "https://www.tutorialspoint.com/" />
      <link rel = "stylesheet" type = "text/css" href = "/css/style.css">
   </head>
	
   <body>
      <p>Hello, World!</p>
   </body>
	
</html>

To da następujący wynik -

Tag HTML <style>

Znacznik HTML <style> służy do określenia arkusza stylów dla bieżącego dokumentu HTML. Poniżej znajduje się przykład definiowania kilku reguł arkusza stylów wewnątrz znacznika <style> -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML style Tag Example</title>
      <base href = "https://www.tutorialspoint.com/" />
      
      <style type = "text/css">
         .myclass {
            background-color: #aaa;
            padding: 10px;
         }
      </style>
   </head>
	
   <body>
      <p class = "myclass">Hello, World!</p>
   </body>

</html>

To da następujący wynik -

Note- Aby dowiedzieć się, jak działa kaskadowy arkusz stylów, zapoznaj się z osobnym samouczkiem dostępnym pod adresem css

Tag HTML <script>

Znacznik HTML <script> służy do dołączania zewnętrznego pliku skryptu lub do definiowania wewnętrznego skryptu dla dokumentu HTML. Poniżej znajduje się przykład, w którym używamy JavaScript do zdefiniowania prostej funkcji JavaScript -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML script Tag Example</title>
      <base href = "http://www.tutorialspoint.com/" />
      
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "OK"  />
   </body>

</html>

Daje to następujący wynik, w którym możesz spróbować kliknąć dany przycisk -

Note- Aby dowiedzieć się, jak działa JavaScript, zapoznaj się z osobnym samouczkiem dostępnym pod adresem javascript

Kaskadowe arkusze stylów (CSS) opisują, jak dokumenty są prezentowane na ekranach, w druku, a może jak są wymawiane. W3C aktywnie promuje korzystanie z arkuszy stylów w Internecie od momentu założenia konsorcjum w 1994 roku.

Kaskadowe arkusze stylów (CSS) zapewniają łatwe i skuteczne alternatywy dla określania różnych atrybutów znaczników HTML. Używając CSS, możesz określić wiele właściwości stylu dla danego elementu HTML. Każda właściwość ma nazwę i wartość oddzielone dwukropkiem (:). Każda deklaracja właściwości jest oddzielona średnikiem (;).

Przykład

Najpierw rozważmy przykład dokumentu HTML, który używa znacznika <font> i powiązanych atrybutów do określenia koloru tekstu i rozmiaru czcionki -

Note- Znacznik czcionki został wycofany i ma zostać usunięty w przyszłej wersji HTML. Dlatego nie należy ich raczej używać, zaleca się używanie stylów CSS do manipulowania czcionkami. Jednak nadal w celach edukacyjnych, w tym rozdziale zajmiemy się przykładem użycia znacznika czcionki.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>
	
   <body>
      <p><font color = "green" size = "5">Hello, World!</font></p>
   </body>

</html>

Możemy ponownie napisać powyższy przykład za pomocą arkusza stylów w następujący sposób -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>

   <body>
      <p style = "color:green; font-size:24px;" >Hello, World!</p>
   </body>

</html>

To da następujący wynik -

Możesz używać CSS na trzy sposoby w swoim dokumencie HTML -

External Style Sheet - Zdefiniuj reguły arkusza stylów w oddzielnym pliku .css, a następnie dołącz ten plik do dokumentu HTML za pomocą znacznika HTML <link>.
Internal Style Sheet - Zdefiniuj reguły arkusza stylów w sekcji nagłówka dokumentu HTML za pomocą tagu <style>.
Inline Style Sheet - Zdefiniuj reguły arkusza stylów bezpośrednio wraz z elementami HTML za pomocą style atrybut.

Zobaczmy kolejno wszystkie trzy przypadki, posługując się odpowiednimi przykładami.

Arkusz stylów zewnętrznych

Jeśli potrzebujesz użyć arkusza stylów na różnych stronach, zawsze zaleca się zdefiniowanie wspólnego arkusza stylów w oddzielnym pliku. Plik arkusza stylów kaskadowych będzie miał rozszerzenie jak.css i zostanie dołączony do plików HTML za pomocą tagu <link>.

Przykład

Zastanów się, czy zdefiniujemy plik arkusza stylów style.css który ma następujące zasady -

.red {
   color: red;
}
.thick {
   font-size:20px;
}
.green {
   color:green;
}

Tutaj zdefiniowaliśmy trzy reguły CSS, które będą miały zastosowanie do trzech różnych klas zdefiniowanych dla tagów HTML. Proponuję nie przejmować się tym, jak te reguły są definiowane, ponieważ nauczysz się ich podczas nauki CSS. Skorzystajmy teraz z powyższego zewnętrznego pliku CSS w naszym następującym dokumencie HTML -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML External CSS</title>
      <link rel = "stylesheet" type = "text/css" href = "/html/style.css">
   </head>

   <body>
      <p class = "red">This is red</p>
      <p class = "thick">This is thick</p>
      <p class = "green">This is green</p>
      <p class = "thick green">This is thick and green</p>
   </body>

</html>

To da następujący wynik -

Wewnętrzny arkusz stylów

Jeśli chcesz zastosować reguły arkusza stylów tylko do pojedynczego dokumentu, możesz uwzględnić te reguły w sekcji nagłówka dokumentu HTML za pomocą znacznika <style>.

Reguły zdefiniowane w wewnętrznym arkuszu stylów zastępują reguły zdefiniowane w zewnętrznym pliku CSS.

Przykład

Przepiszmy jeszcze raz powyższy przykład, ale tutaj napiszemy reguły arkusza stylów w tym samym dokumencie HTML za pomocą tagu <style> -

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Internal CSS</title> 
      
      <style type = "text/css"> 
         .red { 
            color: red; 
         } 
         .thick{ 
            font-size:20px; 
         } 
         .green { 
            color:green; 
         } 
      </style> 
   </head>
	
   <body> 
      <p class = "red">This is red</p>  
      <p class = "thick">This is thick</p>  
      <p class = "green">This is green</p>  
      <p class = "thick green">This is thick and green</p> 
   </body>
	
</html>

To da następujący wynik -

Wbudowany arkusz stylów

Możesz zastosować reguły arkusza stylów bezpośrednio do dowolnego elementu HTML za pomocą styleatrybut odpowiedniego tagu. Należy to zrobić tylko wtedy, gdy chcesz dokonać określonej zmiany tylko w jakimkolwiek elemencie HTML.

Reguły zdefiniowane w elemencie zastępują reguły zdefiniowane w zewnętrznym pliku CSS, a także reguły zdefiniowane w elemencie <style>.

Przykład

Napiszmy jeszcze raz powyższy przykład, ale tutaj napiszemy reguły arkusza stylów wraz z elementami HTML za pomocą style atrybut tych elementów.

<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Inline CSS</title> 
   </head>
 
   <body> 
      <p style = "color:red;">This is red</p>  
      <p style = "font-size:20px;">This is thick</p>  
      <p style = "color:green;">This is green</p>  
      <p style = "color:green;font-size:20px;">This is thick and green</p> 
   </body>
 
</html>

To da następujący wynik -

ZA scriptto mały fragment programu, który może dodać interaktywność do Twojej witryny. Na przykład skrypt może generować wyskakujące okienko ostrzegawcze lub udostępniać menu rozwijane. Ten skrypt można napisać przy użyciu JavaScript lub VBScript.

Możesz napisać różne małe funkcje, zwane programami obsługi zdarzeń, używając dowolnego języka skryptowego, a następnie wyzwalać te funkcje za pomocą atrybutów HTML.

Tylko teraz JavaScript i powiązane z nim frameworki są używane przez większość twórców stron internetowych, VBScript nie jest nawet obsługiwany przez różne główne przeglądarki.

Możesz przechowywać kod JavaScript w osobnym pliku, a następnie dołączać go tam, gdzie jest to potrzebne, lub możesz zdefiniować funkcjonalność w samym dokumencie HTML. Zobaczmy kolejno oba przypadki z odpowiednimi przykładami.

Zewnętrzny JavaScript

Jeśli zamierzasz zdefiniować funkcjonalność, która będzie używana w różnych dokumentach HTML, lepiej zachować tę funkcjonalność w osobnym pliku JavaScript, a następnie dołączyć ten plik do dokumentów HTML. Plik JavaScript będzie miał rozszerzenie.js i zostanie dołączony do plików HTML za pomocą tagu <script>.

Przykład

Rozważmy, że definiujemy małą funkcję za pomocą JavaScript w script.js który ma następujący kod -

function Hello() {
   alert("Hello, World");
}

Skorzystajmy teraz z powyższego zewnętrznego pliku JavaScript w naszym następującym dokumencie HTML -

<!DOCTYPE html>
<html>

   <head>
      <title>Javascript External Script</title>
      <script src = "/html/script.js" type = "text/javascript"/></script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
   </body>

</html>

Daje to następujący wynik, w którym możesz spróbować kliknąć dany przycisk -

Skrypt wewnętrzny

Możesz napisać kod skryptu bezpośrednio w dokumencie HTML. Zwykle przechowujemy kod skryptu w nagłówku dokumentu za pomocą tagu <script>, w przeciwnym razie nie ma żadnych ograniczeń i możesz umieścić kod źródłowy w dowolnym miejscu dokumentu, ale wewnątrz tagu <script>.

Przykład

<!DOCTYPE html>
<html>

   <head>
      <title>JavaScript Internal Script</title>
      <base href = "https://www.tutorialspoint.com/" />
      
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
   </body>

</html>

Daje to następujący wynik, w którym możesz spróbować kliknąć dany przycisk -

Obsługa zdarzeń

Programy obsługi zdarzeń to nic innego jak po prostu zdefiniowane funkcje, które można wywołać w przypadku dowolnego zdarzenia myszy lub klawiatury. Możesz zdefiniować logikę biznesową w module obsługi zdarzeń, która może się wahać od jednego do tysięcy kodu liniowego.

Poniższy przykład wyjaśnia, jak napisać procedurę obsługi zdarzeń. Napiszmy jedną prostą funkcję EventHandler () w nagłówku dokumentu. Wywołamy tę funkcję, gdy dowolny użytkownik najedzie myszką na akapit.

<!DOCTYPE html>
<html>

   <head>
      <title>Event Handlers Example</title>
      <base href = "https://www.tutorialspoint.com/" />
      
      <script type = "text/JavaScript">
         function EventHandler() {
            alert("I'm event handler!!");
         }
      </script>
   </head>

   <body>
      <p onmouseover = "EventHandler();">Bring your mouse here to see an alert</p>
   </body>

</html>

Teraz To da następujący wynik. Najedź myszą na tę linię i zobacz wynik -

Ukryj skrypty ze starszych przeglądarek

Chociaż obecnie większość (jeśli nie wszystkie) przeglądarek obsługuje JavaScript, niektóre starsze przeglądarki nie obsługują. Jeśli przeglądarka nie obsługuje JavaScript, zamiast uruchomić skrypt, wyświetli kod użytkownikowi. Aby temu zapobiec, możesz po prostu umieścić komentarze HTML wokół skryptu, jak pokazano poniżej.

JavaScript Example:
<script type = "text/JavaScript">
   <!--
      document.write("Hello JavaScript!");
   //-->
</script>

VBScript Example:
<script type = "text/vbscript">
   <!--
      document.write("Hello VBScript!")
   '-->
</script>

Element <noscript>

Możesz również podać alternatywne informacje użytkownikom, których przeglądarki nie obsługują skryptów, oraz użytkownikom, którzy wyłączyli opcję skryptów, ich przeglądarki. Możesz to zrobić za pomocą<noscript> etykietka.

JavaScript Example:
<script type = "text/JavaScript">
   <!--
      document.write("Hello JavaScript!");
   //-->
</script>

<noscript>Your browser does not support JavaScript!</noscript>

VBScript Example:
<script type = "text/vbscript">
   <!--
      document.write("Hello VBScript!")
   '-->
</script>

<noscript>Your browser does not support VBScript!</noscript>

Domyślny język skryptów

Może zaistnieć sytuacja, w której uwzględnisz wiele plików skryptów i ostatecznie użyjesz wielu tagów <script>. Możesz określić domyślny język skryptowy dla wszystkich znaczników script . Dzięki temu nie musisz określać języka za każdym razem, gdy używasz tagu script na stronie. Poniżej przykład -

<meta http-equiv = "Content-Script-Type" content = "text/JavaScript" />

Zwróć uwagę, że nadal możesz zastąpić ustawienie domyślne, określając język w tagu script.

Układ strony internetowej jest bardzo ważny, aby zapewnić lepszy wygląd witryny. Zaprojektowanie układu strony internetowej o świetnym wyglądzie i działaniu zajmuje dużo czasu.

W dzisiejszych czasach wszystkie nowoczesne witryny internetowe używają struktury opartej na CSS i JavaScript do tworzenia responsywnych i dynamicznych witryn, ale możesz stworzyć dobry układ za pomocą prostych tabel HTML lub znaczników podziału w połączeniu z innymi znacznikami formatującymi. W tym rozdziale znajdziesz kilka przykładów, jak stworzyć prosty, ale działający układ strony internetowej przy użyciu czystego kodu HTML i jego atrybutów.

Układ HTML - przy użyciu tabel

Najprostszym i najpopularniejszym sposobem tworzenia układów jest użycie tagu HTML <table>. Tabele te są ułożone w kolumny i wiersze, dzięki czemu możesz używać tych wierszy i kolumn w dowolny sposób.

Przykład

Na przykład poniższy przykład układu HTML jest uzyskiwany przy użyciu tabeli z 3 wierszami i 2 kolumnami, ale kolumna nagłówka i stopki obejmuje obie kolumny za pomocą atrybutu colspan -

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Layout using Tables</title>
   </head>

   <body>
      <table width = "100%" border = "0">
         
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <h1>This is Web Page Main title</h1>
            </td>
         </tr>
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "50">
               <b>Main Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
            
            <td bgcolor = "#eee" width = "100" height = "200">
               Technical and Managerial Tutorials
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <center>
                  Copyright © 2007 Tutorialspoint.com
               </center>
            </td>
         </tr>
         
      </table>
   </body>

</html>

To da następujący wynik -

Układ wielu kolumn - przy użyciu tabel

Możesz zaprojektować swoją stronę internetową, aby umieścić zawartość internetową na wielu stronach. Możesz zachować zawartość w środkowej kolumnie, a lewej kolumny możesz użyć do korzystania z menu, a prawej kolumny do umieszczenia reklamy lub innych rzeczy. Ten układ będzie bardzo podobny do tego, co mamy na naszej stronie tutorialspoint.com.

Przykład

Oto przykład tworzenia układu trzech kolumn -

<!DOCTYPE html>
<html>

   <head>
      <title>Three Column HTML Layout</title>
   </head>

   <body>
      <table width = "100%" border = "0">
         
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "20%">
               <b>Main Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
				
            <td bgcolor = "#b5dcb3" height = "200" width = "60%">
               Technical and Managerial Tutorials
            </td>
				
            <td bgcolor = "#aaa" width = "20%">
               <b>Right Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
         </tr>
         
      <table>
   </body>

</html>

To da następujący wynik -

Układy HTML - przy użyciu DIV, SPAN

Element <div> jest elementem blokowym używanym do grupowania elementów HTML. Chociaż tag <div> jest elementem blokowym, element HTML <span> służy do grupowania elementów na poziomie wbudowanym.

Chociaż możemy osiągnąć całkiem ładne układy za pomocą tabel HTML, ale tabele nie zostały tak naprawdę zaprojektowane jako narzędzie do układu. Tabele lepiej nadają się do prezentowania danych tabelarycznych.

Note - Ten przykład wykorzystuje kaskadowy arkusz stylów (CSS), więc zanim zrozumiesz ten przykład, musisz lepiej zrozumieć, jak działa CSS.

Przykład

Tutaj postaramy się osiągnąć ten sam rezultat używając tagu <div> wraz z CSS, niezależnie od tego, co osiągnąłeś używając tagu <table> w poprzednim przykładzie.

<!DOCTYPE html>
<html>

   <head>
      <title>HTML Layouts using DIV, SPAN</title>
   </head>

   <body>
      <div style = "width:100%">
		
         <div style = "background-color:#b5dcb3; width:100%">
            <h1>This is Web Page Main title</h1>
         </div>
			
         <div style = "background-color:#aaa; height:200px; width:100px; float:left;">
            <div><b>Main Menu</b></div>
            HTML<br />
            PHP<br />
            PERL...
         </div>
			
         <div style = "background-color:#eee; height:200px; width:350px; float:left;" >
            <p>Technical and Managerial Tutorials</p>
         </div>
		
         <div style = "background-color:#aaa; height:200px; width:100px; float:right;">
            <div><b>Right Menu</b></div>
            HTML<br />
            PHP<br />
            PERL...
         </div>
			
         <div style = "background-color:#b5dcb3; clear:both">
            <center>
               Copyright © 2007 Tutorialspoint.com
            </center>
         </div>
			
      </div>
   </body>

</html>

To da następujący wynik -

Możesz stworzyć lepszy układ używając DIV, SPAN wraz z CSS. Więcej informacji na temat CSS można znaleźć w samouczku CSS.