@MerkentProgramowanie — HTML/CSS/PHP cz.1

Programowanie — HTML/CSS/PHP cz.1

17.03.2015 15:57, aktualizacja: 17.03.2015 19:22

Cześć i czołem ! Przed nami pierwsza część kursu dotycząca programowania w HTML/CSS/PHP. Każdy wie, że od czegoś trzeba zacząć – najlepiej od początku, więc i my zaczniemy od początku, a dokładnie od samych podstaw języka HTML5. Zakładam, że wiesz czym są języki w których będziemy programować (Dla tych, którzy nie mają o tym bladego pojęcia - w najbliższym czasie powstanie o tym oddzielny artykuł – zapoznajcie się znim)

Na początku powiedzmy sobie w czym będziemy programować naszą witrynę. Na rynku jak wiecie istnieje wiele edytorów tekstów typowych dla programistów. Są to między innymi: Notepad++, notatnik, Sublime Text, Dreamweaver itd. W każdym z nich możemy zaprogramować naszą stronę, jedne są mniej rozwinięte, drugie więcej ale nie w tym rzecz. W mojej opinii każdy powinien wybrać sobie edytor, który mu odpowiada. Jednym podkreślanie tekstu, kolorowanie go automatycznie przez program, może przeszkadzać, drugim ułatwi to pracę. Ja cały kurs/poradnik oprę na Notepad++.

Wiemy już jakie narzędzia umożliwią nam programowanie naszej strony, więc przejdźmy do omówienia znaczników HTML.

Co to są znaczniki HTML?

Znaczniki HTML to takie cegiełki z których zbudowana jest każda strona WWW. Aby Ci to rozjaśnić pokażę Ci kilka podstawowych znaczników, które są nam niezbędne do stworzenia strony internetowej.

- Definicja typu dokumentu
- Definicja dokumentu HTML
- Definicja informacji o dokumencie (nagłówku)
- Informacje dodatkowe
- Tytuł dokumentu HTML
- Ciało dokumentu HTML (cała zawartość strony)

Jak zapewne zauważyłeś każdy znacznik trzeba otworzyć i zamknąć. Znaczniki mają dwa sposoby zamykania. Aby sprecyzować myśl podam przykład. - Tak definiujemy dokument html. Otwieramy znacznik „<” i go zamykamy „>” - Tak definiujemy ciało naszej strony, czyli wszystko to co się znajduje na stronie jest pisane pod tym znacznikiem. Jest to jeden ze znaczników, który musimy zamknąć, bo bez tego zamknięcia nasza strona nie będzie działać poprawnie. Znacznik ten zamykamy w ten sposób - otwarcie znacznika - zamknięcie znacznika

Mam nadzieję, że jest to jasne, jeśli zaś nie, to jestem przekonany, że zrozumiesz to w praktyce.

Skoro wiesz już co to są znaczniki, jak je otwieramy i zamykamy czas przejść do podstawowej struktury HTML5.

Podstawowy dokument HTML5


<!doctype html>
<html>        			
	<head>
	<meta charset="UTF-8">      <!--Kodowanie znaków UTF-8 jest to kodowanie znaków polskich.-->
		<title>...</title>
	</head>
	<body>
		...
	</body>
</html>

W pierwszej linijce kodu widzimy deklarację typu dokumentu, następnie otwieramy sekcje head, deklarujemy znaki na naszej stronie i dodajemy tytuł strony, na koniec zamykamy nagłówek. W drugiej części otwieramy nasze ciało strony czyli body. To właśnie w body programujemy całą naszą stronę. Po zaprogramowaniu strony zamykamy body i typ dokumentu czyli html.

Skoro wiemy już jak wygląda podstawowa struktura dokumentu HTML, znamy znaczniki, to teraz czas na napisanie pierwszej, łatwej strony.

Struktura dokumentu html


<!doctype html>
<html>
	<head>
		<meta charset=”UTF-8”>
		<title> Kurs HTML/CSS/PHP by Merkent </title>
	</head>
<body>
	Jest to nasza pierwsza strona napisana w języku HTML.
</body>
</html>

Kiedy mamy już plik z zaprogramowaną stroną należy go zapisać jako index.html - po zapisie pliku, otwieramy go w przeglądarce internetowej.

Kiedy otworzymy naszą stronę ukaże nam się tytuł strony z sekcji oraz zdanie, które napisaliśmy w sekcji body.

Zakończyliśmy pierwszą lekcję kursu. W następnej części powiemy co to jest CSS i do czego się go używa oraz jak używać i do czego służy język PHP. W poniedziałek zostanie udostępniony plik graficzny z wyglądem naszej witryny.

Z powodu braku zapisów na webinar zostanie nagrany oddzielny film opisujący tą, jak i kolejną część kursu.