Podstawy HTML Kurs HTML5/CSS3 Cz.1

Podstawy HTML Kurs HTML5/CSS3 Cz.1

Witam cię w kursie HTML, być może już znasz, ale znajdzie się ktoś, kto trafi tutaj i będzie chciał nauczyć się HTMLa. W kursie tym skupię się głównie na nauce HTML5 i CSS3. Jest to po prostu „must have” w programowaniu webowym.  Oprócz programowania webowego mam wiele pomysłów na różne wpisy, poradniki kursy.

Co to jest HTML5

HTML skrót Hyper Text Markup Language jest to język hipertekstowy znaczników, służy on do opisania struktury wyglądu strony, znajduję się tam takie elementy jak Hiperłącza, obrazki, tekst itd. W skrócie jest to wszystko to co widzisz na ekranie przeglądarki.

Instalacja Środowiska

Aby zacząć pisać kod należy zainstalować notatnik. Ale nie taki jaki jest w Windowsie tylko taki, który ma ciemne tło i podpowiada nam składnie. Aby się nauczyć lepiej HTML możesz wyłączyć podpowiedzi. Bardziej utrwalą ci się w pamięci znaczniki i tagi HTML. Ja w swoim kursie będę używał Sublime Text 3. Jest on płatnym programem, ale za to wygodnym do pisania kodu. Możesz pobrać jego darmową wersję. Lub skorzystać z innych dobrych edytorów np. Notepad++, Brackets lub Atom. Albo pisać w przeglądarce, istnieje taka strona JSbin gdzie możesz pisać kod bez instalowania żadnych innych programów. Sam zdecyduj jakiego chcesz używać edytora.

Stworzenie pierwszego dokumentu HTML

Na pulpicie utwórz folder o dowolnej nazwie. Może to być np. KursHTML. Następnie utwórz plik o nazwie index.html. Pamiętaj że nie może być to index.txt i index.html.txt. Zapisz go i powinieneś go móc otworzyć w swojej przeglądarce. Powinno wyglądać to tak jak na obrazku. Pamiętaj także aby zapisać plik w formacie utf-8. W Submlime możesz to zrobić tak: file-> Reopen with encoding -> utf-8

wyświetlenie dokumentu HTML w przeglądarce

Wyświetlane twojego pierwszego dokumentu HTML

 

	
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Pierwsza Strona</title>
</head>
<body>

</body>
</html>

<html> i </html> Pierwszy z nich to tag otwierający drugi to zamykający. Pamiętaj o zamykaniu tagów, które są zbudowane z dwóch tagów np. <html>.

Powinno wyglądać jak ten przykład:

<something> </something>

Tag <head> Znajdują się tam elementy które nie są widoczne na stronie. Są tam m.in arkusze styli, znaczniki meta, tytuł strony itd, więcej o tym nauczysz się w dalszej części.

Tag <title> To nazwa strony jaka wyświetla się w oknie przeglądarki

W sekcji <body> Znajduję się zawartość całej witryny czyli, teksty, linki obrazki, tabelki i cała reszta. Jak na razie nic się w naszej sekcji nie znajduje więc przeglądarka nic nam nie pokaże.

Dodaj komentarz