Podstawy Informatyki - W4

Podstawy informatyki – W4
dr hab. inż. Janusz Kozak, prof. uczelni

HTML
Hyper Text Markup Language
hipertekstowy język znaczników

HTML - Hyper Text Markup Language
HTML to język oparty na znacznikach (tagach) opisujący
zawartość strony internetowej
Plik HTML jest plikiem tekstowym z rozszerzeniem .htm lub .html

Strony internetowe to pliki tekstowe
Strona Politechniki Lubelskiej w przeglądarce Kod źródłowy (tekst HTML)

Przeglądarki internetowe
Znacznik (tag)
Znacznik definiujący hiperłącze:
<a href="http://www.pollub.pl">Politechnika Lubelska</a>

Znacznik (tag)
< >
Znacznik (tag)
wyświetlany napis
Znacznik (tag)
adres wyświetlany napis

Znacznik (tag)
adres wyświetlany napis
Politechnika Lubelska
Znacznik (tag)
<a >
Znacznik <a> definiuje hiperłącze
Znacznik (tag)
Znacznik otwierający Znacznik zamykający
Znacznik (tag)
href – hypertext reference

adres do którego prowadzi link
Znacznik (tag)
Atrybut
nazwa atrybutu="wartość"
Znaczniki
Znacznik definiujący obraz:

<img width="100" height="100" src="logoPL.jpg"/>
src – source
Znaczniki
Znacznik definiujący obraz:

<img src="logoPL.jpg"/>
Wymiary obrazka przeglądarka pobierze z pliku graficznego

Znaczniki
<a></a> znacznik podwójny
<img /> znacznik pojedynczy
a – definiuje hiperłącze
img – definiuje obrazek
Znaczniki
Atrybut – cech znacznika, zdefiniowana w jego wnętrzu:
nazwa atrybutu=”wartość”
<a href="http://www.pollub.pl">link</a>
Edytor HTML
Edytor HTML – Notepad++
Plik >> Zapisz jako >> index.html

Sekcja <head>
Sekcja <head>
<html lang="pl">
Ustawiamy polski język
<meta charset="utf-8"/>
Ustawiamy zestaw znaków utf-8
<title>Tytuł strony</title>
Tytuł witryny widoczny w zakładce przeglądarki
Sekcja <head>
<meta name="description" content="opis strony w wyszukiwarce"/>
<meta name="keywords" content="słowa kluczowe"/>
<meta http-equiv="X-UA-Compatibile" content="IE=edge,chrome=1"/>

Poprawne wyświetlenie witryny w starszych wersjach IE
<meta name="author" content="Imię Nazwisko"/>

<title>Tytuł strony</title>
Sekcja <body>
Nagłówki od <h1> do <h6> (ang. headings)
Nagłówki
<h1>Nagłówek h1</h1> największy
<h2>Nagłówek h2</h2>
<h6>Nagłówek h5</h6> najmniejszy
Paragrafy <p> (ang. paragraph)
Paragraph <p> – umożliwia podział długiego tekstu na akapity.
Podwójne <br><br> – tworzy wizualne wrażenie akapitu.
Tag <br> (ang. break) – załamanie linii.
• Lepiej używać paragrafów ponieważ łatwiej jest stylizować tekst w CSS

• Znacznik <br> można używać wewnątrz paragrafu w celu przejścia do
kolejnej linii.
Znacznik <br>
Hiperłącze <a> (link), href
<a href="http://www.pollub.pl/" target="_blank">Politechnika Lubelska</a>
Atrybut href to skrót od ang. hypertext reference – określa adres dokumentu do

którego prowadzi hiperłącze
Hiperłącze <a> (link), target
Atrybut target (ang. target - cel) – określa gdzie w przeglądarce ma się otworzyć
dokument
• target="_self " – otwórz stronę w tej samej karcie (domyślnie)

• target="_blank" – otwórz witrynę w nowej, karcie przeglądarki
• target="_parent " – otworzy adres hiperłącza w ramce o jeden poziom wyższej
• target="_top" – otworzy adres hiperłącza w nadrzędnej ramce
Obraz <img>, src
<img> (ang. image - obraz)
src (ang. source - źródło) – ścieżka dostępu do grafiki
<img src="logoPL.jpg">
Obraz <img>, alt
<alt> (ang. alternative - alternatywny) – alternatywny tekstowy opis
grafiki
<img src="logoPL.jpg" alt="Politechnika Lubelska logo">
Obraz <img>, width, height
<img src="logoPL.jpg" alt="Politechnika Lubelska logo" width="100" height="100">
<img src="logoPL.jpg" alt="Politechnika Lubelska logo" width="100" height="100"/>
width (ang. szerokość)

height (ang. wysokość)
Podajemy wartość liczbową " 100 " (bez px)
Lista nieuporządkowana (ang. unordered list)
Lista nieuporządkowana (nienumerowana) <ul>
<ul>
<li>element listy</li> •element listy
</ul>
Lista uporządkowana (ang. ordered list)
Lista uporządkowana (numerowana) <ol>
<ol>
<li>element listy</li> 1. element listy
</ol>
Lista zagnieżdżona
<ol>
<li>ELEMENT LISTY
1.ELEMENT LISTY
<ul> o element listy
<li>element listy</li> o element listy
<li>element listy</li>
</ul> 2.ELEMENT LISTY
</li> o element listy
<li>ELEMENT LISTY o element listy
<ul>
</ul>
</li>
</ol>
Tabela (ang. table) <table></table>
<style> td { border: 1px solid black; } </style>

<table>
<tr>
<td>A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
<tr>
<td>G</td> <td>H</td> <td>I</td>
</tr>
</table> <tr></tr> (ang. table row) – pojedynczy wiersz tabeli
<td></td> (ang. table drawer) – komórka tabeli
Scalanie komórek tabeli colspan
<table>
<tr>
<td colspan="2">A</td> <td>C</td>
</tr>
<tr>
<td>D</td> <td>E</td> <td>F</td>
</tr>
<tr>
</tr>
</table>
Scalanie komórek tabeli rowspan
<table>
<tr>
<td rowspan="2">A</td> <td>B</td> <td>C</td>
</tr>
<tr>
<td>E</td> <td>F</td>
</tr>
<tr>
</tr>
</table>
<thead> (ang. table head)
<style> td, th { border: 1px solid black; } </style>

<table> <tbody> (ang. table body)
<thead>
<tr>
<th>lp.</th> <th>Prąd</th> <th>Napięcie</th>
</tr>
</thead>
<tbody>
<tr>
<th>1</th> <td>10,02 mA</td> <td>0,122 V</td>
</tr>
<tr>
</tr>
<tr>
</tr>
<tr>
</tr>
</tbody>
</table>
Tabela w HTML5
<style> td, th { border: 1px solid black; } </style>

table>
<thead>
<tr> <th> lp. <th> Prąd <th> Napięcie
<tbody>
<tr> <th> 1 <td> 10,02 mA <td> 0,122 V
<tr> <th> 2 <td> 10,05 mA <td> 0,123 V
<tr> <th> 3 <td> 10,03 mA <td> 0,122 V
<tr> <th> 4 <td> 10,04 mA <td> 0,123 V
</table>
Formularze
<form action="form.php" method="post">

</form>
action – określa plik zajmujący się przetwarzaniem danych z formularza

Etykieta <label>
<input> (ang. input - wejście)
<input type="text">
Login: <input type="text"> Login:
<label>Login: <input type="text"></label> Login:

Atrybut - placeholder
<label for="L">Login:</label>
<input type="text" id="L">
Login:
<label for="L">Login:</label>
Login: e-mail
<input type="text" id="L" placeholder="e-mail">
Input type password
<label for="pass">Hasło:</label>
<input type="password" id="pass">
Input type number
<label for="liczba">Liczba:</label>
<input type="number" id="liczba">
Pole checkbox
<input type="checkbox" id="regulamin">
<label for="regulamin">Akceptuję</label>
<input type="checkbox" id="regulamin" checked>

<input type="checkbox" id="regulamin" checked="checked" >

<input type="checkbox" id="regulamin" checked="on" >

Pole typu radio
<label>
<input type="radio" name="zgoda" value="T"> TAK
</label>
<label>
<input type="radio" name="zgoda" value="N"> NIE
</label>
Lista wyboru <select>
<label for="miasto">Wybierz miasto:</label>
<select id="miasto">
<option value="L">Lublin</option>
<option value="W">Warszawa</option>
<option value="G">Gdańsk</option>
</select>
Lista wyboru <select>, selected
<select id="miasto">
<option value="W" selected>Warszawa</option>
</select>
Lista wyboru <select>, atrybut multiple
<select id="miasto" multiple>
</select>
Z użyciem klawiszy Ctrl lub Shift, można

zaznaczyć na liście kilka opcji jednocześnie.
Lista wyboru <select>, <optgroup>
<select id="miasto" multiple>
<optgroup label="Miasta wojewódzkie">
</optgroup>
</select>
Pole wieloliniowe <textarea>
<label for="opis">Podaj opis:</label>
<textarea id="opis"></textarea>
<label for="opis">Podaj opis:</label>

<textarea id="opis„ rows="10" cols="50"></textarea>
Przyciski
<input type="submit" value="Kliknij">
kliknięcie przycisku - powoduje próbę
wysłania formularza na serwer
<input type="button" value="Kliknij">

kliknięcie przycisku – nie powoduje
wysłania formularza na serwer
Przycisk button
<button>Kliknij</button>
<button><img src="image.jpg" alt="">Wyślij</button>
Kliknięcie elementu <button></button>, podobnie jak <input

type="submit"> spowoduje podsumowanie formularza.
Znacznik <strong>
<strong> (ang. strong – silny) podkreśla siłę tekstu przez wytłuszczenie jego czcionki.
<strong> stosujemy jeżeli tekst jest ważny lub przestrzega przed czymś.
<h3>PORAŻENIE PRĄDEM – PIERWSZA POMOC</h3>

<p>Podczas udzielania pierwszej pomocy osobie
porażonej, trzeba zachować szczególną ostrożność, by
samemu nie ulec wypadkowi. Przede wszystkim należy
pamiętać o tym, że <strong> nie wolno dotykać osoby
poszkodowanej bez uprzedniego odłączenia jej od źródła
prądu</strong>. Trzeba odłączyć bezpieczniki, a następnie
wyjąć z gniazdka wtyczkę urządzenia elektrycznego. Użyj
do tego celu przedmiotu, który nie przewodzi prądu (na
przykład plastikowego lub drewnianego kija). <strong>Pod
żadnym pozorem nie korzystaj z metalowych ani
miedzianych narzędzi!</strong><p>
Wyróżnienie <em>
<em> (ang. emphasis – emfaza) tekst zostanie zapisany pochyloną
czcionką. Stosujemy kiedy wypowiadamy dane słowa ze zmienioną
intonacją, czy natężeniem głosu.
Dzisiaj padał śnieg
<em>Dzisiaj</em> padał śnieg
Dzisiaj <em>padał</em>śnieg
Pogrubienie, pochylenie, podkreślenie tekstu
• <b> (ang. bold) wytłuszczenie czcionki
• <i> (ang. italic) pochylenie czcionki
• <u> (ang. underline) podkreślenie czcionki
Tagu <b> używamy w przypadku, kiedy zastosowanie <strong> nie wydaje się
własciwe w danym kontekście, a tekst powinien być wytłuszczony, nie jest to
tekst ważny ale chcemy go wytłuścić.
Znacznik <i> używamy zamiast <em> we wszystkich przypadkach, kiedy nie
kładziemy nacisku w mowie na dane słowo. Na przykład zmienne we
wzorach zapisujemy kursywą, dlatego użyjemy <i>.
Znacznika <u> lepiej używać jak najmniej - podkreślony tekst sugeruje
obecność linku.
Blok cytatu <blockquote>
• <blockquote> (ang. quote – cytat) znacznik tworzy blok cytatu w tekscie.
znacznik <blockquote> posiada atrybut cite, którego wartością jest link. Link
jest widoczny w kodzie, lecz nie jest widoczny na stronie.
<blockquote cite="https://pl.wikiquote.org/wiki/A_niechaj_narodowie_w%C5%BCdy_postronni_znaj%C4%85">
<p>A niechaj narodowie wżdy postronni znają, iż Polacy nie gęsi, iż swój język mają.</p>
<footer>
- <a href="https://pl.wikiquote.org/wiki/A_niechaj_narodowie_w%C5%BCdy_postronni_znaj%C4%85">
Mikołaj Rej</a>
</footer>
</blockquote>
Literatura:
• Laura Lemay, Rafe Colburn, Jennifer Kyrnin, HTML, CSS i JavaScript dla każdego. Wydanie VII,
Helion 2016
• Rościszewski M., Zawód front-end developer. 11 kroków do zostania webmasterem, Helion 2019
• Wołk, K., Nowoczesne strony WWW. HTML5, CSS3, Adobe Muse, Wordpress, Psychoskok 2018
• www.w3schools.com

Podstawy Informatyki - W4

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Podstawy Informatyki - W4

Uploaded by

Copyright:

Available Formats

Podstawy informatyki – W4

dr hab. inż. Janusz Kozak, prof. uczelni

hipertekstowy język znaczników

Plik HTML jest plikiem tekstowym z rozszerzeniem .htm lub .html

Strona Politechniki Lubelskiej w przeglądarce Kod źródłowy (tekst HTML)

<a href="http://www.pollub.pl">Politechnika Lubelska</a>

<a href="http://www.pollub.pl">Politechnika Lubelska</a>

<a href="http://www.pollub.pl">Politechnika Lubelska</a>

adres wyświetlany napis

<a href="http://www.pollub.pl">Politechnika Lubelska</a>

adres wyświetlany napis

Znacznik <a> definiuje hiperłącze

<a href="http://www.pollub.pl">Politechnika Lubelska</a>

Znacznik otwierający Znacznik zamykający

<a href="http://www.pollub.pl">Politechnika Lubelska</a>

href – hypertext reference

<a href="http://www.pollub.pl">Politechnika Lubelska</a>

Znacznik definiujący obraz:

Znacznik definiujący obraz:

Wymiary obrazka przeglądarka pobierze z pliku graficznego

Plik >> Zapisz jako >> index.html

<meta name="keywords" content="słowa kluczowe"/>

<meta http-equiv="X-UA-Compatibile" content="IE=edge,chrome=1"/>

<meta name="author" content="Imię Nazwisko"/>

Podwójne <br><br> – tworzy wizualne wrażenie akapitu.

Tag <br> (ang. break) – załamanie linii.

• Lepiej używać paragrafów ponieważ łatwiej jest stylizować tekst w CSS

Atrybut href to skrót od ang. hypertext reference – określa adres dokumentu do

• target="_self " – otwórz stronę w tej samej karcie (domyślnie)

width (ang. szerokość)

action – określa plik zajmujący się przetwarzaniem danych z formularza

Login: <input type="text"> Login:

<label>Login: <input type="text"></label> Login:

<input type="checkbox" id="regulamin" checked>

<input type="checkbox" id="regulamin" checked="checked" >

<input type="checkbox" id="regulamin" checked="on" >

Z użyciem klawiszy Ctrl lub Shift, można

<label for="opis">Podaj opis:</label>

<input type="button" value="Kliknij">

<button><img src="image.jpg" alt="">Wyślij</button>

Kliknięcie elementu <button></button>, podobnie jak <input

<h3>PORAŻENIE PRĄDEM – PIERWSZA POMOC</h3>

You might also like