Wejdź na stronę https://www.apachefriends.org/pl/index.html i pobierz XAMPP.

XAMPP służy do szybkiej i instalacji serwera Apache oraz bazy danych. Po jego zainstalowaniu w swoim domowym komputerze można od razu testować jak będzie zachowywała się Twoja strona internetowa kiedy znajdzie się na płatnym serwerze w Internecie.

https://wojciechpietrzak.com.pl/localhost-jak-zainstalowac-serwer-lokalny-xampp-na-windows-10/

Po zainstalowaniu XAMPP uruchamiamy z Menu Start systemu Windows  XAMPP Control Panel.

xampp

Klikamy na Start przy Apache i MySQL.

Teraz w dowolnej przeglądarce wpisujemy w adresie 127.0.0.1

Otworzy się strona http://127.0.0.1/dashboard/

Jeżeli XAMPP został zainstalowany w domyślnym folderze to ścieżka dostępu do folderu, który jest odpowiednikiem katalogu głównego na serwerze to c:\xampp\htdocs

Jeżeli w folderze htdocs założysz sobie np. podfolder strona1, a do tego podfolderu skopiujesz pliki składające się na Twoją stronę, a jeden z nich będzie miał nazwę index.html to po wpisaniu w polu adresowym przeglądarki adresu 127.0.0.1/strona1 uruchomisz swoją stronę.

HTML (ang. HyperText Markup Language, hipertekstowy język znaczników) to podstawowy język projektowania stron internetowych. Nie jest to język programowania. Obowiązującym obecnie standardem HTML jest HTML5.
UWAGA! Stronę można utworzyć w Notatniku ale należy pamiętać o zapisaniu pliku z rozszerzeniem .html 
Tylko tak zapisany plik zostanie prawidłowo odczytany przez przegladarkę. Główna strona w każdym serwisie internetowym musi mieć nazwę index.html, jeżeli takiej strony brakuje na serwerze to witryna nie będzie działała.

Znacznik (tag) jest to specjalny tekst umieszczony w nawiasach ostrych - np.: <b>. Jest on częścią składni języka HTML i pozwala sterować wyglądem strony. Dzięki niemu możesz np. ustalić kolor tła, rodzaj formatowania tekstu, wstawić obrazek czy tabelę itd. Znacznik nie jest widoczny na ekranie. Widoczne są tylko efekty jego działania (np. wstawienie obrazka).

Poniższe znaczniki są podstawowe dla dokumentów HTML i powinny występować na każdej poprawnej, zgodnej z HTML5 stronie internetowej.

Szkielet (osnowa) dokumentu HTML
<html> <head> </head> <body> </body> </html>

 

Wyjaśnienie znaczenia powyższych znaczników:

  • <html></html> ten znacznik określa ramy dokumentu HTML, a więc jego początek i koniec;
  • sekcja <head></head> tworzy tak zwany nagłówek dokumentu. W tym przykładzie jest on pusty ale powinien obowiązkowo zawierać kilka informacji. W wersji minimum są to: strona kodowa, tytuł, oraz słowa kluczowe i opis strony;
  • sekcja <body></body> to tak zwane ciało dokumentu, tutaj umieszczamy treść. O ile sekcja head pełni rolę czysto informacyjną i jej zwartość (poza tytułem, który przeglądarka wyświetla na pasku tytułu) można obejrzeć tylko w źródle strony, o tyle zawartość body jest w całości wyświetlane w oknie przeglądarki.

Przedstawione niżej znaczniki HTML występują na wielu stronach internetowych ale nie wszystkie są zalecane przez najnoiwsza scecyfikację HTML5. Warto je jednak poznać.

<title> </title> Ten znacznik wykorzystuje się do wpisania tytułu strony wyświetlanej na pasku tytułowym przeglądarki

<br> - zejście do nowej linii
<b> </b> - pogrubienie
<i> </i> - pochylenie, kursywa, italik
<u> </u> - podkreślenie
<hr> - linia pozioma
<img src="/nazwapliku.jpg"> - wstawianie obrazka, którego plik źródłowy znajduje się w tym samym folderze (katalogu) co plik html strony, zwróć uwagę na wielkość liter w nazwie, brak polskich znaków, spacji, a szczególnie na rozszerzenie nazwy pliku graficznego (najczęściej jpg lub png lub gif)
<a href="https://www.wp.pl">WP</a> - wstawienie linku do strony wp.pl znajdującej się w internecie, zwróć uwagę na literki https (nie wszystkie strony mają protokół https, mogą mieć http); link do strony lokalnej nie musi mieć "https://www" wystarczy sama nazwa pliku i jego rozszerzenie, najczęściej html

<body bgcolor="green"> - ustalenie koloru tła strony na zielony

<font size="7">napis</font> ustalenie wielkości fontów na maksymalną 

<font color="red"> - ustalenie koloru czcionki na czerwony
<font face="arial"> - ustalenie kroju czcionki na Arial

UWAGA! Można połączyć kilka poleceń z początkiem font w jednym znaczniku tzn. np. <font size="5" color="pink" face="verdana">tekst</font>

<img src="/nazwapliku.jpg" width="300"> - ustalenie wielkości obrazka na 300 pikseli

<p> </p> - paragraf, akapit

<p align="center">treść akapitu</p> - wyśrodkowanie akapitu

<p align="right">treść akapitu</p> - akapit do prawej

<p align="left">treść akapitu</p> - akapit do lewej

<p align="justify">treść akapitu</p> - akapit wyjustowany

Pierwsza strona serwisu www zawsze musi nazywać się index.html bo inaczej przeglądarka nie znajdzie strony, mimo poprawnego adresu.

lista uporządkowana

<ol> </ol> - znacznik otwierający i zamykający listy uporządkowanej, domyślna lista jest numerowana cyframi arabskimi

<li></li> - każda kolejna pozycja listy zaczyna się i kończy takim znacznikiem

<ol type="a"> - taki znacznik otwierający dla listy uporządkowanej uruchamia numerowanie małymi literami alfabetu łacińskiego

<ol type="A"> - j.w. ale wielkie litery

<ol type="I"> - j.w. ale cyfry rzymskie

lista nieuporządkowana

<ul> </ul> - znacznik otwierający i zamykający listy nieuporządkowanej, domyślna lista posiada punktor - czarna kropka

<li></li> - każda kolejna pozycja listy zaczyna się i kończy takim znacznikiem

<ul type="circle"> - taki znacznik otwierający listy nieuporządkowanej spowoduje wyświetlenie punktora - biała kropka

<ul type="square"> - taki znacznik otwierający listy nieuporządkowanej spowoduje wyświetlenie punktora - czarny kwadrat

<ul type="disc"> - taki znacznik otwierający listy nieuporządkowanej spowoduje wyświetlenie punktora - czarna kropka (domyślny)

W tym zadaniu mamy do czynienia z listami zagnieżdżonymi. Należy pamiętać o zamykaniu znaczników <ol> i <ul> w odpowiednich miejscach.

Utwórz dokument HTML o nazwie lista.html a w nim poniższą listę:

tabelka

Utwórz tabelę wg powyższego wzoru.

<table> </table> - polecenie do utworzenia tabeli

<table border="1"> - tabelka obramowana; domyślne obramowanie nie wygląda tak jak na obrazku wzorcowej tabeli, taka ramka wymaga użycia CSS

<tr> </tr> - znacznik rozpoczyna i kończy wiersz tabeli

<td></td> - znacznik rozpoczyna i kończy komórkę tabeli

<td colspan="2"></td> - takie polecenie spowoduje połączenie dwóch sąsiednich komórek tabeli w jedną

<td rowspan="3"></td> - to polecenie spowoduje połączenie trzech sąsiednich komórek w danej kolumnie, połączona komórka jest długa na trzy wiersze tabeli

Zawartość pliku index.html

<!DOCTYPE html>
<html lang="pl-PL">
<head>
<meta charset="UTF-8" />
<title>Strona o stałej szerokości oparta na divach</title>
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<div id="page">
  <div id="header">#header</div>
  <div id="left">#left</div>
  <div id="main">#main</div>
  <div id="footer">#footer</div>
</div>
</body>
</html>

 Zawartość pliku style.css

html, body {
	background-color: #fff; /* ustalenie koloru tła na biały */
	color: #000; /* ustalenie koloru tekstu na czarny */
	margin: 0; /* likwidacja marginesów */
	padding: 0; /* likwidacja marginesów wewnętrznych */
	text-align: center;
}
#page { /* ten obiekt to wielkie pudełko na wszystkie inne elementy */
	width: 1004px; /* ustalenie szerokośći strony na 1004px */
	margin: 0px auto; /* ustalenie marginesów lewego i prawego strony na auto powoduje wyśrodkowanie strony */
	text-align: left;
}
#header { /* ten obiekt nagłówek */
	background-color: #888; /* ustalenie koloru tła nagłówka dla jego odróżnienia od reszty strony */
}

#left { /* ten obiekt to lewa kolumna */
	width: 150px; /* szerokość lewej kolumny */
	min-height: 300px; /* minimalna długość lewej kolumny */
	float: left; /* obiekt ma popłynąć w lewo */
	overflow: hidden; /* elementy nie mieszczące się w kolumnie ukryj */
	background-color: #ccc; /* ustalenie koloru tła lewej kolumny */
}

#main { /* ten obiekt to zasadnicza część strony, w niej będą wyświetlane obrazki i teksty */
	width: 854px; /* szerokość części głównej */
	float: left; /* obiekt ma popłynąć w lewo, ustawi się obok obiektu left */
	overflow: hidden; /* elementy nie mieszczące się w main ukryj */
	min-height: 300px; /* minimalna długość części głównej */
	background-color: #fff; /* ustalenie koloru tła części środkowej strony */
}
#footer { /* ten obiekt to stopka */
	clear: both; /* ustalenie przylegania stopki do obu obiektów nad nią, gdyby tego nie było a obiekty miały różne długości strona rozjechałaby się */
	background-color: #888; /* ustalenie koloru tła stopki */
}

 Wygląd strony

Gdybyśmy chcieli zamiast strony o 2 kolumnach stworzyć szablon strony z 3 kolumnami do powyższego szablonu w pliku style.css musimy dodać:

#right {
width: 150px;
min-height: 300px; /* minimalna długość prawej kolumny */
float: right;
overflow: hidden;
background-color: #ccc;
}

 

Należy też pamiętać o zmniejszeniu o 150px szerokości #main, bo tyle px potrzeba na prawą kolumnę!

Do index.html przed divem footer musimy wstawić:

<div id="right">#right</div>

 Wygląd szablonu z 3 kolumnami

html how 2

w3s

colorpicker

Walidator HTML oraz CSS

© 2020 classroom.pl All Rights Reserved.
DMC Firewall is a Joomla Security extension!