Jak Zrobić Stronę Internetową W Notatniku Krok Po Kroku

Otwarcie Notatnika i Pierwsze Kroki w HTML

Otwórz Notatnik. Zaczynamy pisać kod.

<!DOCTYPE html> <html> <head> <title>Moja Pierwsza Strona</title> </head> <body> </body> </html>

Zapisz plik. Wybierz "Zapisz jako". Nazwij go "index.html". Ważne, aby wybrać "Wszystkie pliki" w polu "Zapisz jako typ". Kliknij "Zapisz".

Teraz otwórz plik "index.html" w przeglądarce internetowej. Powinieneś zobaczyć pustą stronę z tytułem "Moja Pierwsza Strona".

Dodawanie Treści do Strony

Wróć do Notatnika. Między znacznikami <body> i </body> dodaj:

<h1>Witaj Świecie!</h1> <p>To jest akapit tekstu.</p>

Zapisz plik (Ctrl+S). Odśwież stronę w przeglądarce (F5). Powinieneś zobaczyć nagłówek "Witaj Świecie!" i akapit tekstu.

Formatowanie Tekstu

W Notatniku, zmień kod na:

<h1>Witaj <b>Świecie!</b></h1> <p>To jest <i>akapit</i> tekstu. Możemy również użyć <strong>pogrubienia</strong> i <em>kursywy</em>.</p>

Zapisz i odśwież. Zobaczysz zmiany w formatowaniu tekstu.

Listy

Dodaj listę uporządkowaną:

<ol> <li>Pierwszy element</li> <li>Drugi element</li> <li>Trzeci element</li> </ol>

Dodaj listę nieuporządkowaną:

<ul> <li>Element 1</li> <li>Element 2</li> <li>Element 3</li> </ul>

Zapisz i odśwież.

Linki

Dodaj link:

<a href="https://www.google.com">Kliknij tutaj, aby przejść do Google</a>

Zapisz i odśwież. Kliknięcie linku powinno przenieść Cię do Google.

Obrazki

Przygotuj obrazek. Umieść go w tym samym folderze co "index.html". Załóżmy, że obrazek nazywa się "obrazek.jpg".

Dodaj obrazek:

Zapisz i odśwież. Powinieneś zobaczyć obrazek.

Stylizacja CSS

Dodaj stylowanie: Między znacznikami <head> i </head> dodaj:

Zapisz i odśwież. Zobaczysz zmiany w wyglądzie strony.

Bardziej Zaawansowane Elementy

Dodawanie Formularzy

Dodaj formularz:

<form> <label for="fname">Imię:</label><br> <input type="text" id="fname" name="fname"><br> <label for="lname">Nazwisko:</label><br> <input type="text" id="lname" name="lname"><br><br> <input type="submit" value="Wyślij"> </form>

Zapisz i odśwież. Zobaczysz formularz.

Atrybuty

Wszystkie elementy HTML mogą mieć atrybuty. Atrybuty dostarczają dodatkowych informacji o elementach.

<p style="color:red;">To jest czerwony akapit.</p>

Dodawanie Sekcji

Podziel stronę na sekcje:

<header> <h1>Nagłówek strony</h1> <p>Opis nagłówka.</p> </header> <nav> <a href="#">Link 1</a> <a href="#">Link 2</a> <a href="#">Link 3</a> </nav> <section> <h2>Sekcja 1</h2> <p>Treść sekcji 1.</p> </section> <footer> <p>Stopka strony. © 2023</p> </footer>

Zapisz i odśwież.

Div i Span

Używaj <div> do grupowania bloków elementów:

<div> <h2>Tytuł</h2> <p>Akapit tekstu.</p> </div>

Używaj <span> do grupowania elementów w linii:

<p>To jest <span>ważny</span> tekst.</p>

Zapisz i odśwież.

Metatagi

Dodaj metatagi w sekcji <head>:

Te metatagi pomagają w pozycjonowaniu strony w wyszukiwarkach i dostosowaniu do różnych urządzeń.

Praca z CSS w Oddzielnym Pliku

Tworzenie Pliku CSS

Otwórz nowy plik w Notatniku. Wklej:

body { background-color: #f0f0f0; font-family: Arial, sans-serif; }

h1 { color: #333; text-align: center; }

p { line-height: 1.6; }

Zapisz plik jako "style.css" (pamiętaj o "Wszystkie pliki"). Umieść go w tym samym folderze co "index.html".

Łączenie CSS z HTML

W pliku "index.html", w sekcji <head>, dodaj:

Zapisz oba pliki i odśwież przeglądarkę. Zobaczysz zmiany wprowadzone przez plik "style.css".

Selektory CSS

W "style.css" możesz używać różnych selektorów:

Elementy: np. p { ... }
Klasy: np. .klasa { ... } (dodaj class="klasa" do elementu HTML)
ID: np. #id { ... } (dodaj id="id" do elementu HTML)

Na przykład:

.wazny-tekst { font-weight: bold; color: green; }

Użyj:

<p class="wazny-tekst">Ten tekst jest ważny.</p>

Zapisz i odśwież.

Box Model

CSS Box Model opisuje przestrzeń wokół elementu:

Content: Zawartość elementu (tekst, obrazki, itp.)
Padding: Przestrzeń między zawartością a obramowaniem
Border: Obramowanie elementu
Margin: Przestrzeń wokół obramowania, oddzielająca element od innych elementów

W "style.css":

div { width: 200px; padding: 20px; border: 5px solid black; margin: 10px; }

Zapisz i odśwież.

Pozycjonowanie

CSS pozwala na różne sposoby pozycjonowania elementów:

Static: Domyślne pozycjonowanie, elementy wyświetlane są w kolejności, w jakiej występują w kodzie HTML.
Relative: Element pozycjonowany względem swojej normalnej pozycji.
Absolute: Element pozycjonowany względem najbliższego elementu pozycjonowanego (lub względem elementu <html> jeśli nie ma takiego elementu).
Fixed: Element pozycjonowany względem okna przeglądarki i pozostaje w tym samym miejscu podczas przewijania strony.

Przykład (w "style.css"):

.pozycjonowany { position: relative; left: 30px; top: 20px; }

Dodaj klasę "pozycjonowany" do elementu HTML.

Dodatkowe Elementy HTML5

Semantic Elements

HTML5 wprowadził elementy semantyczne, które lepiej opisują strukturę strony:

<article>: Samodzielna treść (np. artykuł, post na blogu).
<aside>: Treść poboczna (np. sidebar).
<details> i <summary>: Pozwalają na ukrywanie i pokazywanie treści.

Przykład:

<article> <h2>Tytuł artykułu</h2> <p>Treść artykułu.</p> </article>

Multimedia

Dodawanie wideo:

<video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> Twoja przeglądarka nie obsługuje wideo. </video>

(Potrzebujesz pliku "movie.mp4" w tym samym folderze.)

Dodawanie audio:

<audio controls> <source src="audio.mp3" type="audio/mpeg"> Twoja przeglądarka nie obsługuje audio. </audio>

(Potrzebujesz pliku "audio.mp3" w tym samym folderze.)

Canvas

<canvas> to element, który pozwala na rysowanie grafiki za pomocą JavaScript.

(Potrzebujesz JavaScript, aby rysować na canvas.)

Podsumowanie

To tylko podstawy tworzenia stron internetowych w Notatniku. Możesz eksperymentować z różnymi elementami i stylami CSS, aby tworzyć bardziej zaawansowane strony. Pamiętaj o zapisywaniu plików i odświeżaniu przeglądarki, aby zobaczyć zmiany. Powodzenia!

</body> </html>