Obrazek użytkownika cytrynek

Elementy języka HTML

Treść: 

HTML (ang. HyperText Markup Language) – hipertekstowy język znaczników, obecnie szeroko wykorzystywany do tworzenia stron internetowych.

 

Elementy języka HTML to przede wszystkim znaczniki ułożone wg określonej struktury.

Znacznik (tag) opisuje się w następujący sposób

 

<nazwaTagu>Treść</nazwaTagu>

 

Przykład źródła prostej strony napisanej w HTML

<!DOCTYPE html>
<html>

<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>

</html>

 

Nagłówek

 

 <!DOCTYPE html>
<html>
<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>

Paragraf czyli akapit

Treść strony internetowej podzielona jest na akapity. Każda nowa myśl w tekście powinna się od niego zaczynać.

W paragrafie mogą się znajdować inne znaczniki np.: <br> (break – ang.: łamać, służy do łamania linii)

 

 <!DOCTYPE html>
<html>
<body>

<p>To jest paragraf pierwszy</p>
<p>To jest paragraf drugi</p>
<p>A to jest paragraf ze złamaną linią.<br>To jest tekst po złamanej linii</p>
<p>Oczywiście w akapicie mogą znajdować się inne akapity <p>To jest wspomniany akapit</p></p>

</body>
</html> 

Formatowanie tekstu w języku HTML

 

Do formatowania tekstu służą znaczniki

 

<b>

Defines bold text

<em>

Defines emphasized text 

<i>

Znacznik wizualnie pochyla tekst lecz ma też wyrazić emocje lub alternatywnym znaczeniem. Służy głównie do wyrażenia myśli, tekst z obcego języka, nazwy techniczne.

 

np.: <p>Wczoraj byliśmy w chińskiej restauracji. Zamówiliśmy danie <i>Special Tofu Thuong Chay La Ha</i></p>

<small>

Znacznik pomniejsza tekst

<strong>

Znacznik pogrubia tekst jeśli chcemy go wizualnie zaznaczyć

<sub>

Znacznik obniżający tekst np.: H<sub>2</sub>O

<sup>

Znacznik podwyższający tekst np.:2<sup>2</sup>

<ins>

Definiuje tekst osadzony (wizualnie go podkreśla)

<del>

Definiuje tekst nieważny (wizualnie go przekreśla)

<mark>

Wyróżnia teks przez dodanie jaskrawego tła

 

 

 <!DOCTYPE html>
<html>
<body>

<p><b>To jest tekst wytłuszczony</b></p>
<p><strong>To jest tekst wzmocniony</strong></p>
<p><em>To jest pochylony za pomocą znacznika em</em></p>
<p><i>To jest tekst pochylony za pomocą znacznika i</i></p>
<p><small>To jest pomniejszony tekst</small></p>
<p>To jest tekst<sub> obniżony</sub> and <sup>podniesiony</sup></p>
<p>Mój ulubiony owoc to <del>jabłko</del> <ins>granat</ins>!</p>
<p>Pamiętaj, że jutro masz utworzyć <mark>galerię w PHP</mark>.</p>
</body>
</html>. 

Komentarze w HTML-u

Komentarze są elementem widocznym w kodzie źródłowym strony natomiast nie widać go podczas generowania jej w przeglądarce. Idealnie nadają się do oznaczania końca przedziałów skomplikowanej struktury bloków

 

 <!-- treść komentarza -->
<!-- /#topmenu -->

 

Komentarzy używa się także do wczytywania alternatywnych stylów lub skryptów np.:

Jeżeli wystąpi przeglądarka Internet Explorer 6 wówczas wczytaj styl z css/ie6.css

 

<!--[if IE 6]> <link rel="stylesheet" type="text/css" href="css/ie6.css" /> <![endif]-->

 

Atrybuty w HTML-u

Atrybuty są elementem nadającym dodatkowe właściwości znacznikowi. Np:

 

 <p title="Historia ZSP 5 w Kożuchowie">
Zespół Szkół Ponadgimnazjalnych nr 5 w Kożuchowie jest szkołą o długiej tradycji.  Początki powstania szkoły sięgają 1964 roku, wówczas jako Liceum Ogólnoksztacące siedzibę swą szkoła miała przy ul. Chopina w budynku obecnej Szkoły Podstawowej nr1. 
</p>

 

Po najechaniu myszką na to pole pojawi się dodatkowy tekst "Historia ZSP 5 w Kożuchowie"

 

 <a href="http://www.zsp5kozuchow.pl">Strona ZSP 5 w Kożuchowie</a>

<img src="../img/zsp5herb.jpg" width="104" height="142" alt="Herb Zespołu Szkół Ponadgimn. W Kożuchowie">

Określamy: źródło ilustracji (../ ← katalog wyżej w podkatalogu img znajduje się plik zsp5herb.jpg, width-> szerokość, height-> wysokość i alt → tekst alternatywny (widziany przez przeglądarki tekstowe i roboty wyszukiwarek)

 

Wczytywanie Kaskadowych Arkuszy Stylów (CSS)

 

Kaskadowe arkusze stylów wpływają na wygląd szkieletu strony utworzonej w języku znaczników HTML. Poprzez donoszenie się do określonych znaczników, ich klas lub identyfikatorów możemy zmienić wygląd każdego elementu na stronie internetowej.

 

Posiadamy 3 rodzaje określania stylów CSS:

 

  • Liniowy (ang. Inline) – jako atrybut znacznika

  • Wewnętrzny (ang. Internal) – używający znaczników <style> w sekcji <head>

  • Zewnętrzny (ang. External) – używający zewnętrznych plików CSS

 

Liniowy:

<p style="color:green;margin-left:20px;">Ala ma kota</p>

 

Wewnętrzny:

<!DOCTYPE html>
<html>
<head>

<style>
body {background-color:lightgrey}
h1 {color:blue}
p {color:green}
</style>

</head>

 

Zewnętrzny:

 

 <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>

<body>
<h1>Witaj w tekście na temat zewnętrznego stylu CSS</h1>
<p>Cześć wszystkim</p>
</body>

</html>
 

Zewnętrzny styl (styles.css ) wygląda następująco:

 

h1 {font-size:1.5em; color:red}
p {color:#444; margin-left:10%}

 

 

 

 

 

ZSP nr 5 im. Leszka Kołakowskiego
ZESPÓŁ SZKÓŁ PONADGIMNAZJALNYCH
NR 5 IM. LESZKA KOŁAKOWSKIEGO
W KOŻUCHOWIE

wspomagane przez open source