16 września 2024

Klasa 8 . Strona internetowa.

 

Temat: Jak to zrobić w HTML-u?

Programy do tworzenia stron internetowych.

  1. Struktura dokumentu HTML.
  2. Definiowanie styli w dokumencie HTML.
  3. Stosowanie wpisanych, osadzonych i zewnętrzne arkuszy stylów.
Prezentacja - Tworzenie stron internetowych 


Czym różni się Notepad++ od Notatnika

Notepad++ numeruje kolejne wiersze, a także wyróżnia kolorem znaczniki opisujące właściwy tekst,
co usprawnia śledzenie kodu. Program sygnalizuje również błędy w zapisie znaczników.

 Podstawowa struktura strony www

<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="mojstyl.css" type="text/css">
<title>Tytuł strony...</title>
</head>
<body>
Główna treść dokumentu
</body>
</html>

Podstawowe znaczniki w języku HTML:

<br> – nowa linia
<hr> – pozioma linia
<a href> – hiperłącze (odsyłacz)
<b> – pogrubienie tekstu (bold)
<i> – pochylenie tekstu (italic)
<u> – podkreślenie tekstu (underline)
<strike> – przekreślenie tekstu
<margin> – margines
<sup> – indeks górny
<sub> – indeks dolny
<big> – duża czcionka
<small> – mała czcionka
<center> – wyśrodkowanie elementu
<font-size> – wielkość czcionki
<font-family> – krój czcionki
<color> – kolor czcionki
<img src> – wstawianie obrazka
<title> – tytuł strony
<form> – wstawianie formularza
<input> – pole formularza
<table> – wstawianie tabeli
<tr> – wstawianie wiersza tabeli
<td> – wstawianie kolumny tabeli
<ol> – lista numerowana
<ul> – lista wypunktowana
<li> – element listy

W HTMLu można również wstawiać komentarze, które są ignorowane przez przeglądarki internetowe. Komentarz rozpoczyna się znakami <!– a kończy się znakami –>

 Zadanie. 

Utwórz swoją stronę internetową (możesz wykorzystać własne pomysły lub tekst poniżej). Zapisz ją w folderze klasy 8 / HTML  pod nazwą ja.html

Praca z tekstem:

Cały ja, czyli prawda o mnie
Imię: Kleofas
Nazwisko: Słuszny
Miejscowość: Bładzigłowy
Urodziłem się pod koniec wieku. Wszyscy mówia: XX wiek - wiek szalony.
Ja jednak nie zdążyłem tego zauważyć, bo jakoś tak szybko nastał wiek XXI.
Czy ten nowy zasłuży sobie na lepsze miano?
Myślę, że najważniejsza informacja o mnie, będzie to, że ponad wszystko cenie sobie spokój.
Wasz Kleofas

Zastosuj:

– porubienia (b)
– kursywa (i) (italic)
– kolor (font color = "blue"")
– czcionki – (font face = "arial, verdana oraz Monotype Corsiva")
– nagłówek (h1)
– wielkość czcionki (font size="4") wg akapitu: imię, wasz(font size = "7")
 Wygląd tekstu obrobionego:

 

Dla chętnych

nagłówek:

  • czcionka – Times New Roman
  • wielkość: 4
  • kolor: czerwony
  • grubość (weight) – pogrubiony (bold)
  • wyrównanie: wyśrodkowany

tekst:

  • czcionka: Verdana
  • wielkość czcionki: 3

podpis:

  • wyrównanie: do środka
  • styl czcionki kursywa (italic)

koniec

***Praca dodatkowa

Utwórz nową stronę o podróżach po 3 stolicach Europy.







Autor:
Etykiety: ,