Temat: HTML – część pierwsza

<!doctype html>
<html>
     <head>
              <title>tytuł strony</title>
             <meta charset=UTF-8" />
</head>
            <body>
właściwa treść dokumentu
             </body>
</html>

1. HTML – Hypertext markup language to znaczy w Polskim tłumaczeniu hipertekstowy język znaczników

2. Znaczniki <p>

3. Znaczniki dzielimy na dwie grupy:

a) Znaczniki otwarcia np.: <p>

b) Znaczniki zamknięcia </p>

4. Deklaracja HTML – informacja dla przeglądarki z jakim dokumentem ma do czynienia i co, gdzie wyświetlać

<!DOCTYPE HTML>

5. Po deklaracji rodzaju dokumentu trzeba ustawić język polski ponieważ wyświetlanie polskich znaków jest kłopotliwe (ó. Ź,ź itp.)

<html>

<meta charset=”utf-8”>

</html>

6. Wiemy już, że w sekcji html będziemy używać języka polskiego.

7. W sekcji <head> będziemy podawać ustawienia dokumentu

8. Właściwa treść strony internetowej w sekcji <body>

<body>

</body>

9. Kod do notatnika:

<!DOCTYPE HTML>

<html>

<head>

<meta charset=”utf-8”>

</head>

<body>

Moja pierwsza strona internetowa w HTML. Klasa 8a.

</body>

</html>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<html>

<head>

<p style="text-align: center">Podróże po stolicach Europy-Grzegorz Krawczyk</p>

<body style="background-color: silver; color: white">

</head>

<body>

Moja pierwsza strona internetowa w HTML. Klasa 8a.

<table border=2>

<tr><th>Nagłówek kolumny 1</th><th>Nagłówek kolumny 2</th><th>Nagłówek kolumny 3</th><th>Nagłówek kolumny 4</th><th>Nagłówek kolumny 4</th></tr>

<tr><td>Kolumna 1, wiersz 1</td><td>Kolumna 2, wiersz 1</td><td>Kolumna 3, wiersz 1</td><td>Kolumna 4, wiersz1</td><td>Kolumna 4, wiersz1</td></tr>

<tr><td>Kolumna 1, wiersz 2</td><td>Kolumna 2, wiersz 2</td><td>Kolumna 3, wiersz 2</td><td>Kolumna 4, wiersz2</td><td>Kolumna 4, wiersz1</td></tr>

</table>

</body>

</html>

Podstrona

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<html>

<head>

<p style="text-align: center">ALBANIA</p>

<body style="background-color: silver; color: white">

</head>

<body>

Albania, Republika Albanii – państwo w południowo-wschodniej Europie na Bałkanach. Albania na zachodzie ma dostęp do Morza Adriatyckiego, a na południowym zachodzie do Morza Jońskiego. Od Włoch oddziela ją cieśnina Otranto o szerokości ok. 72 km.

<img src="albania1.jpg">

</body>

</html>

podstrony

<html>

<head>

<p style="text-align: center">Podróże po stolicach Europy-Grzegorz Krawczyk</p>

<body style="background-color: silver; color: white">

</head>

<body>

Moja pierwsza strona internetowa w HTML. Klasa 8a.

<table border=2>

<tr><th>Nagłówek kolumny 1</th><th>Nagłówek kolumny 2</th><th>Nagłówek kolumny 3</th><th>Nagłówek kolumny 4</th><th>Nagłówek kolumny 4</th></tr>

<tr><td>Kolumna 1, wiersz 1</td><td>Kolumna 2, wiersz 1</td><td>Kolumna 3, wiersz 1</td><td>Kolumna 4, wiersz1</td><td>Kolumna 4, wiersz1</td></tr>

<tr><td>Kolumna 1, wiersz 2</td><td>Kolumna 2, wiersz 2</td><td>Kolumna 3, wiersz 2</td><td>Kolumna 4, wiersz2</td><td>Kolumna 4, wiersz1</td></tr>

</table>

<section>

<nav>

<ul>

<li><a href="podstrona1.html">Mostar</a></li>

<li><a href="podstrona2.html">Położenie</a></li>

<li><a href="podstrona3.html">Historia</a></li>

<li><a href="podstrona5.html">Ogólne informacje</a></li>

</nav>

</section>

</body>

</html>

Podstrona i zdjęcia

<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

<html>

<p style="text-align: center"><span style="font-size: xx-large">M O S T A R - Grzegorz Krawczyk</p>

<body style="background-color: gray; color: white">

<head>

<center><span style="font-size: x-large">Mostar – miasto w Bośni i Hercegowinie, w Federacji Bośni i Hercegowiny, stolica kantonu hercegowińsko-neretwiańskiego, siedziba miasta Mostar. Jest położony nad Neretwą. Stanowi jeden z największych ośrodków miejskich w kraju. W 2013 roku liczyło 60 195 mieszkańców, z czego większość stanowili Chorwaci.

Najważniejszym zabytkiem Mostaru jest położony w centrum XVI-wieczny kamienny Stary Most, wybudowany w 1566 r. 9 listopada 1993, w wyniku działań wojennych, został on zburzony przez Chorwatów, a jego odbudowę zakończono 23 lipca 2004. W lipcu 2005 Stary Most i jego najbliższe otoczenie zostały wpisane na listę światowego dziedzictwa kulturowego UNESCO. Nazwa pochodzi od słowa mostari („strażnicy mostu”).

Mostar jest zlokalizowany w południowo-zachodniej części Bośni i Hercegowiny, przy drodze wiodącej z Dubrownika do Sarajewa i linii kolejowej Sarajewo-Ploce. Leży na równinie Mostarsko polje, na wysokości od 60 do 110 m n.p.m., na obu brzegach Neretwy.

Mieszają się tu wpływy klimatu umiarkowanego ciepłego i śródziemnomorskiego. Okolice Mostaru uchodzą za region o najcieplejszych latach w całym kraju. Maksymalna zanotowana tu temperatura to 46 °C. Średnia temperatura zimą wynosi 6 °C, a latem 26 °C. Opady nie przekraczają 800 mm.

Miasto wieloetniczne. Według spisu ludności z 1991 struktura ludności gminy Mostar wyglądała następująco: 35% Boszniacy, 34% Chorwaci, 19% Serbowie, 10% Jugosłowianie (osoby nieczujące przynależności do żadnej z grup etnicznych) – w sumie 126 tys. mieszkańców. Według spisu z 2003 roku: 48% Chorwaci, 47% Boszniacy, 4% Serbowie.

Pierwsze ślady osadnictwa pochodzą z czasów prehistorycznych (neolit). Tereny te zamieszkane były też w czasach rzymskich.</span></center>

</title>

<div style='float:left'>

<img src='1.jpg' >

</div>

<div style='float:left'>

<img src='2.jpg' >

</div>

<div style='float:left'>

<img src='3.jpg' >

<div style='float:left'>

<img src='4.jpg' >

</div>

</head>

<body>

</html>

To jest tekst normalny

<strong>To jest tekst pogrubiony</strong>

<em>To jest tekst pochylony</em>

Treść akapitu zapisana czcionką o wielkości xx-large

Albo:

<p style="font-size:x-small">Treść akapitu</p>

Co da:

Treść akapitu zapisana czcionką x-small

Zaleca się stosowanie imiennych wielkości absolutnych i relatywnych czcionek, jak xx-small, x-small, small, medium, large, x-large, xx-large oraz smaller i larger, które są najbardziej elastyczne.

przykład:

<p style="color: darkgreen; ">Treść akapitu w kolorze darkgreen</p>

Co w efekcie da:

Treść akapitu w kolorze darkgreen.

Galeria

<!DOCTYPE html>

<head>

<title>moja galeria</title>

<p style="text-align: center"><span style="font-size: xx-large">Galeria - Grzegorz Krawczyk</p>

</head>

<body>

</tr>

<tr>

<tr>

</tr>

<tr>

<td>Mostar 1</td>

<td>Mostar 2</td>

<td>Mostar 3</td>

</tr>

<tr>

</tr>

<tr>

<td>Mostar inny</td>

</tr>

</table></td>

</tr>

</table>

</div>

</body>

</html>

Wstawianie filmiku z Youtube

<div align="right">KOD FILMU</div>

1. Kod filmu znajdziemy na YouTube, mianowicie:

- pod każdym filmem na YouTube znajduje się sekcja Udostępnij na którą klikamy.

- następnie wybieramy Umieść

- wówczas pojawia się kod do wklejenia na nasza stronę w miejscu KOD FILMU

2. Dodajemy również znacznik <p> aby dodać tekst który pojawi się jako opis filmu