Obraz zawierający tekst, Czcionka, Grafika Opis wygenerowany automatycznie 

Kierunek Informatyka

 

Instrukcja do ćwiczeń laboratoryjnych nr:

1

Nazwa przedmiotu:
Nowoczesne techniki programowania  

Temat: Podstawy języka HTML 5 

Tryb studiów: stacjonarny
i niestacjonarny

Czas trwanie ćw.

2x45 min

Autor materiałów: dr Marcin Skuba

 

1. Treści programowe: 

Język HTML – struktura strony, wybrane znaczniki (tagi).

 

2. Cel zajęć:

Celem zajęć jest opanowanie podstawowych umiejętność tworzenia strony internetowej w języku HTML z użyciem najważniejszych znaczników.

 

3. Materiały dydaktyczne

Lind do pełnej dokumentacji https://www.w3schools.com/html/default.asp

 

-         Struktura strony HTML 5


<!DOCTYPE html>
<html lang=”pl”>
   <head>
       <title>Tytuł strony </title>
   </head>
<body>
            Zawartość strony
</body>
</html>

 

-         Elementy nagłówka <HEAD>

 

Meta element służy do określenia, który zestaw znaków ma zostać użyty, opis strony, słowa kluczowe, autor i inne metadane.
Metadane są używane przez przeglądarki mówiąc jak wyświetlać zawartość, wyszukiwarki (słowa kluczowe) i inne usługi sieciowe.

 

<meta charset="UTF-8">  - Zdefiniuj użyty zestaw znaków

<meta name="description" content="Free Web tutorials"> - Zdefiniuj słowa kluczowe dla wyszukiwarek

<meta name="keywords" content="HTML, CSS, XML, JavaScript">  - Zdefiniuj słowa kluczowe dla wyszukiwarek

<meta name="author" content="Jan Kowalski">  - Autor strony

<meta http-equiv="refresh" content="30"> - odświeżanie strony

 

<title> Tytuł strony </title> - tytuł strony

<link rel="icon" type="image/x-icon" href="/images/nazwa_ikony.ico"> - ikona przy nazwie strony na karcie przeglądarki

 

-  Wybrane argumenty znacznika <body>

<body  text=”red”> - ustawianie domyślnego koloru dla czcionki (niezalecane)

<body style="color:blue;"> ustawianie domyślnego koloru dla czcionki – rekomendowane (więcej o stylach w instrukcji nr 2)

 

-  Elementy ciała strony  <BODY>

Element HTML zwykle składa się ze znacznika początkowego i znacznika końcowego, a treść jest wstawiana pomiędzy:

 

<tagname> Zawartość …</tagname>

 

Akapit:

<p> Zawartość akapitu </p>

<p style="color:red">Zawartość akapitu </p> Definiowanie akapitu z ustaleniem stylu, gdzie ustawiamy kolor tekstu na czerwony

 

Przejście do następnego wiersza:

<br> lub <br/>

<p>This is<br>treść akapitu <br> tekst w następnym wierszu </p> - przykład

 

Nagłówek:

<h1> Nagłówek na stronie  największy </h1>

<h2> Nagłówek na stronie  większy </h2>

<h3> Nagłówek na stronie  średni duży</h3>

<h4> Nagłówek na stronie  średni mały </h4>

<h5> Nagłówek na stronie  mały</h5>

<h6> Nagłówek na stronie  bardzo mały </h6>

 

link:

<a href="https://www.skuba.cba.pl">
      Link do strony www.skuba.cba.pl 
</a>       otwiera podaną stronę w tym samym oknie

<a href="https://www.skuba.cba.pl" target="_blank"> Link do strony www.skuba.cba.pl  </a>  otwiera podaną stronę w nowym oknie 

 

<a href="zdjecie.jpg" target="_blank">link do zdjęcia</a> otwiera zdjęcie w nowym oknie

 

Wyświetlanie grafiki:

<img src="obrazek.jpg" alt=”tekst alternatywny”>   - wyświetlanie grafiki w oryginalnym rozmiarze

<img src="img_girl.jpg" width="500" height="600"> - wyświetlanie grafiki o określonej szerokości i wysokości (niezalecane)

 

 

Tabele:

        <table >                                                   - deklaracja tabeli

            <tr>                                                       - deklaracja wiersza

              <th>Imię </th>                       - wiersze nagłówkowe <th>

              <th>Nazwisko </th>

              <th>Zarobki </th>

            </tr>

            <tr>

              <td>Jan</td>                          - deklaracja wiersza z danymi

              <td>Kowalski</td>

              <td>7 000</td>

            </tr>

            <tr>

              <td>Piotr</td>

              <td>Nowak</td>

              <td>3 000</td>

            </tr>

            <tr>

                <td colspan="2"><b>suma</b></td>  - scalenie dwóch komórek

                <td>10 000</td>

              </tr>

          </table>

 

            Listy – punktor:

<ul>                                                    - <ul> </ul> definicja listy
  <li>Coffee</li>                                 - <li> definicja pozycji listy
  <li>Tea</li>
  <li>Milk</li>
</ul>

           

Dostępne style dla listy:

<ul style="list-style-type:disc;">

<ul style="list-style-type:circle;">

<ul style="list-style-type:square;">                                       

<ul style="list-style-type:none;">

 

            Listy – numerowanie:

<ol>
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

 

Dostępne style dla numerowania:

<ol type="1">

<ol type="A">

<ol type="a">

<ol type="I">

<ol type="i">

 

Linia pionowa

<hr>

 

Komentarz HTML

            <!—tekst komentarza -->

 

Inne

 

<b>                  - Pogrubiony tekst

<strong>          - Ważny tekst

<i>                   - Tekst kursywą

<em>               - Tekst podkreślony

<mark>           - Tekst zaznaczony

<small>           - Mniejszy tekst

<del>               - Usunięty tekst

<ins>               - Wstawiony tekst

<sub>              - Tekst w indeksie dolnym

<sup>              - Tekst w indeksie górnym

 

 

Kolejność zaznaczanych komponentów - FOCUS. 

 

      <button tabindex="3" >Przycisk 1</button>

      <button tabindex="2">Przycisk 2</button>

      <button tabindex="1"autofocus>Przycisk 3</button>

      <button>Przycisk 4</button>

 

Typy elemetntów HTML

·         Elementy blokowe – to takie, które zawsze zaczynają się w nowym wierszu. Zazwyczaj oddzielone są jeszcze wolnym miejscem przed i po.

Najbardziej powszechne to <p> ora <div>

 

Pozostałe elementy blokowe:

<address> <article> <aside> <blockquote> <canvas> <dd> <div> <dl> <dt> <fieldset> <figcaption> <figure> <footer> <form> <h1>-<h6> <header> <hr>

<li> <main> <nav> <noscript> <ol> <p> <pre> <section> <table> <tfoot>

<ul> <video>

 

·         Elementy liniowe (inline) – nie zaczynają się w nowym wierszu. Elementy inline zajmują tyle szerokości, ile jest konieczne. Najczęściej używany to <span>, np.: <span> To jest obiekt span </span>.

 

Pozostałe elementy liniowe:

<a> <abbr>  <acronym> <b> <bdo> <big> <br> <button> <cite> <code>

<dfn> <em> <i> <img> <input> <kbd> <label> <map> <object> <output>

<q> <samp> <script> <select> <small> <span> <strong> <sub> <sup>

<textarea> <time> <tt> <var>

 

                       

 

Nowe znaczniki semantyczne HTML5

 

<HEADER> Nagłówek – często zawiera treści wstępne, np. akapit opisujący artykuł – tytuł. Znacznik HEADER może dotyczyć całego dokumentu jeśli jest bezpośrednio w część body lub może dotyczyć np. artykułu jeśli jest zawarty w znacznikach artykułu. 

 

<article>

  <header>

    <h1>Nagłówek</h1>

    <p>akapit 1</p>

    <p>akapit 2</p>

  </header>

  <p>kolejny akapit </p>

</article>

 

<NAV> Linki w dokumencie przeznaczone na nawigację. NAV można umieszczać w części HEADER lecz nie zawsze jest to wymagane, zależy to od położenia menu z linkami nawigującymi.

 

            <nav>

                        <a href="/html/">HTML</a> |

                        <a href="/css/">CSS</a> |

                        <a href="/js/">JavaScript</a>

            </nav>

 

            <nav>

                        <ul>

                        <li><a href="index.html">Strona główna</a></li>

                        <li><a href="contents.html">Spis treści</a></li>

                        </ul>

            </nav>

 

            <nav>

                        <ul>

                        <li><a href="#sec1">Rozdział 1</a></li>

                        <li><a href="#sec2">Rozdział 2</a></li>

                        </ul>

            </nav>

 

<ARTICLE> Niezależny kawałek treści dokumentu - artykuł. Artykuły mogą być zagnieżdżane w inne artykuły.

 

<article>

            <h1>Nagłówek</h1

            <p>Treść ...</p>

            <section>

                        <h2>Uwagi</h2>

                        <article>

                                    <p>artykuł 1</p>

                        </article>

                        <article>

                                    <p>artykuł 2</p>

                        </article>

            </section>

</article>

 

 

<SECTION> Ogólna sekcja dokumentu. Może być wykorzystana w połączeniu z: H1 - H6 - dla wskazania struktury dokumentu. Sekcje określają cześć większej całości w przeciwieństwie do artykułu który jest niezależną całością.

 

<section id="sekcja_pierwsza">

            <h1>Sekcja pierwsz</h1>

            <header>

                        <h1>Nagłówek artykułu 1</h1

            </header>

            <article>

                        <p>Treść artykułu 1...</p>

            </article>

 

            <header>

                        <h1>Nagłówek artykułu 2</h1

            </header>

            <article>

                        <p>Treść artykułu 2...</p>

            </article>

</section>

 

<section id="druga">

            <h1>Sekcja pierwsz</h1>

            <header>

                        <h1>Nagłówek artykułu 1</h1

            </header>

            <article>

                        <p>Treść artykułu 1...</p>

            </article>

 

            <header>

                        <h1>Nagłówek artykułu 2</h1

            </header>

            <article>

                        <p>Treść artykułu 2...</p>

            </article>

</section>

 

Przejdź do: <a href="#sekcja_pierwsza">pierwszej sekcja </a>

Przejdź do: <a href="#sekcja_pierwsza">pierwszej druga </a>

 

<MAIN> Określa główną część dokumentu, może występować tylko raz w podstronie. Sekcja ta zawiera najważniejszą treść dla podstrony. W znacznikach MAIN powinna znajdować się treść, dla której użytkownik zdecydował się wejść na naszą stronę.

Znacznik umieszczamy bezpośrednio w części BODY.  

 

 

<ASIDE> Kawałek treści, który tylko częściowo jest powiązany z resztą strony. W tym znaczniku możemy umieszczać np. reklamy.

 

<article>

            <h1>Artykuł</h1>

            <p>treść artykulu</p>

            <aside>

                        <h1>nagłówek tekstu nieznacznie powiązany z artykułem </h1>

                        <p>treść nieznacznie powiązana z artykułem.</p>

            </aside>

<article>

 

 

<FOOTER> Stopka sekcji. Może zawierać informacje na temat autora, praw autorskich itp.

 

<article>

            <h1>Nagłówek</h1>

            <p>treść artykułu</p>

            <footer>

                        Autor: <address>Piotr Nowak (piotr.nowak@examp.com)</address>

                        <p>wszelkie prawa zastrzeżone &copy</p>

            </footer>

</article>

 

Przykład

Utwórz stronę internetową w języku HTML o tematyce związanej ze swoimi zainteresowaniami.

Strona powinna składać się z jednej strony głównej, na której umieszczone będą treści pogrupowane wg znaczników HTML5 oraz podstron zapisanych w oddzielnych plikach.

Na stronie wykorzystaj wszystkie znaczniki opisane w instrukcji.