HTML – Zanim powstał CSS... – Lorem ipsum

View Github Repository Open presentation in a new window

beatadelura

See all presentation from beatadelura

HTML – Zanim powstał CSS... – Lorem ipsum

0 0

workshop01

On Github beatadelura / workshop01

HTML

  • (ang. HyperText Markup Language) – hipertekstowy język znaczników
  • opisuje strukturę stron internetowych
  • składa się ze znaków zapisanych pomiędzy nawiasami kątowymi, które nazywamy elementami
  • elementy te zazwyczaj składają się się z dwóch znaczników otwierającego i zamykającego
  • każdy z tych znaczników przekazuje przeglądarce informacje o swojej zawartości

Znacznik p

<p>Jestem paragrafem</p>

Inne przykładowe znaczniki:

<h1>Jestem nagłówkiem poziomu pierwszego</h1>

<h2>Jestem nagłówkiem poziomu drugiego</h2>

<h2>Jestem nagłówkiem poziomu trzeciego</h2>

<p>Jestem paragrafem</p>

<!--Jestem komentarzem. A poniżej przykład znacznika img:-->
<img src="sciezkaObrazka.jpg" alt="opis obrazka">

<div>
	Jestem konterem a w moim środku mogą znajdować się inne elementy, np. paragraf.
	<p>Oh jestem paragrafem w środku kontenera!</p>
</div>
<p>Znacznik p też może być kontenerem, <span class="font-bold">który</span> ma w środku znacznik span</p>

Listy

Unordered List / Lista nieuporządkowana

  • Item 1
  • Item 2
  • Item 3
						
<ul>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ul>

Listy

Ordered List / Lista uporządkowana

Item 1 Item 2 Item 3 
						
<ol>
	<li>Item 1</li>
	<li>Item 2</li>
	<li>Item 3</li>
</ol>

Szkielet HTML

						
<!--Deklaracja DOCTYPE informuje przeglądarke, w ktorej wersji dana strona została napisana. Czyli w naszym przypadku HTML 5-->

<!doctype html>

<!--Otwierający znacznik html informuje, że wszystko co znajduje się w jego środku jest kodem strony.-->
<html>

<!--W środku znacznika head znajdują się informacje o naszej stronie. Ta część nie jest widoczna dla użytkownika.-->
<head>
	<title>Title</title>
	<link rel="stylesheet" href="./css/style.css" />
	<link rel="stylesheet" href="./css/reset.css" />
<!-- Atrybut charset określa kodowanie znaków dla dokumentu HTML. Do przeczytania: https://pl.wikipedia.org/wiki/UTF-8-->
	<meta charset="utf-8">
</head>

<body>
	<h1>Hello world!</h1>

	<script src="./js/app.js"></script>
</body>

</html>

Zadanie 1

Stwórz szkielet HTML.

CSS

  • ang. Cascading Style Sheets – Kaskadowe arkusze stylów
  • język służący do opisu formy prezentacji strony www
  • został opracowany przez organizację W3C w 1996 r.
  • został stworzony w celu odseparowania struktury dokumentu od formy jego prezentacji

Zanim powstał CSS...

wszystkie informacje (style strony) były zawarte wewnątrz znacznika HTML:

							
<h1 style="color: red; font-size: 14px; margin: 10px;">Lorem ipsum</h1>
<p style="background-color: red; color: blue;">Hello world!</p>
<p style="background-color: red; color: blue;">Hello world!</p>

..w niektórych przypadkach stosuje się je do dziś :)

Dzięki CSS..

style zapisujemy w oddzielnych plikach, więc nie musimy ich powtarzać. Zapis wygląda w ten sposób:

							
<p>Hello world!</p>

<!--p jest selektorem, natomiast to co znajduje się pomiędzy klamrami jest deklaracją:-->
p {
	background-color: red;
	color: blue;
}
Dzięki CSS możemy zadeklarować te same wartości dla kilku różnych elementów na stronie. 
							
<h1>Title</h1>
<p>Hello world!</p>

<!--p jest selektorem, natomiast to co znajduje się pomiędzy klamrami jest deklaracją:-->
p, h1 {
background-color: red;
color: blue;
}

Atrybuty globalne

Atrybut class.

							
<p class="red-color">Jestem paragrafem 1.</p>
<p>Jestem paragrafem 2.</p>
<p class="red-color">Jestem paragrafem 3.</p>

.red-color {
	color: red;
}

Atrybut id

							
<div>
	<p id="title">Hello world!</p>
	<p>This an article about the world.</p>
	<p>Lorem ipsum...</p>
</div>

#title {
	color: blue;
	font-weight: bold;
	font-size: 26px;
}

Zadanie 2

Do stworzonego przez siebie szkieletu dodaj znaczniki HTML (min. 3) oraz nadaj mu style inline. Stwórz arkusz styli CSS oraz przenieś style inline do tego arkuszu.

Zadanie domowe

Dodaj do swojej strony jeszcze więcej elementów, upiększ je CSS-em używając przy tym class, id oraz atrybutów. Przeczytaj o właściwości float oraz clear: Przeczytaj o modelu pudełkowym (box model) Zrób nową stronę i uzyskaj podobny efekt.
HTML (ang. HyperText Markup Language) – hipertekstowy język znaczników opisuje strukturę stron internetowych składa się ze znaków zapisanych pomiędzy nawiasami kątowymi, które nazywamy elementami elementy te zazwyczaj składają się się z dwóch znaczników otwierającego i zamykającego każdy z tych znaczników przekazuje przeglądarce informacje o swojej zawartości