tworzenie stron internetowych 1 - politechnika częstochowska stron internetowych 1.pdfselektory...

Tworzenie stron Tworzenie stron Tworzenie stron Tworzenie stron internetowych internetowych internetowych internetowych z z z z wykorzystaniem wykorzystaniem wykorzystaniem wykorzystaniem HTML5HTML5HTML5HTML5, , , , JavaScriptJavaScriptJavaScriptJavaScript, CSS3 i , CSS3 i , CSS3 i , CSS3 i jQueryjQueryjQueryjQueryŁukasz Łukasz Łukasz Łukasz BartczukBartczukBartczukBartczuk

Podstawy tworzenia stron internetowych

Moduł 1

Agenda

• Podstawy stron internetowych

• Przegląd języka HTML

• Wprowadzenie do kaskadowych arkuszy styli (CSS)

• Wprowadzenie do języka JavaScript

• Wprowadzenie je biblioteki JQuery.

Podstawy stron internetowych

• Technologie internetowe

• Elementy składowe strony internetowej

Technologie internetowe

kik.pcz.pl/Lukasz_Bartczuk/wyklad.html

kik.pcz.pl

get kik.pcz.pl/Lukasz_Bartczuk/wyklad.html

<html><head>…</head><body>…</body>

Adres URL

http://kik.pcz.pl/Lukasz_Bartczuk/wyklad.html

nazwaprotokołu

adresserwera

nazwakatalogu

nazwapliku

Składowe strony internetowej

Dokument

Struktura (XHTML)

Wygląd (CSS)

Funkcjonalność (JavaScript)

Przegląd języka HTML

• Czym jest język HTML?

• Znaczniki

• Dokument HTML

• Podstawowe elementy języka HTML

Znaczniki (1)

• Język HTML składa się z znaczników

• Znacznik zawarty jest pomiędzy parą nawiasów < i >

• Każdy znacznik musi być zamknięty.

• Każdy znacznik posiada swoje znaczenie

<div><p>lorem ipsum…. <img src="rys.jpg" /></p>

</div>

Znaczniki (2)

• Znaczniki mogą być zagnieżdżane

• Każdy znacznik może posiadać atrybuty

• Atrybuty umieszczamy w znaczniku otwierającym

<div><p id="tresc">lorem ipsum….

<img src="rys.jpg" /></p></div>

Dokument HTML

<!DOCTYPE html>

<html>

<head><title>Tytuł strony</title>

</head><body>

Zawartość strony......</body>

</html>

DEMO 1

Stworzenie podstawowej strony internetowej

w Visual Studio 2012

Elementy HTML (1)

• <!DOCTYPE>,<html>,<body>, Podstawowe

• <h1>-<h6>,<p>,<div>,<span>,<br />,<hr/>

Struktura

• <acronym>,<abbr>,<address>,<b>,<bdo>,<big>,<blockquote>,<code>,<del>,<dfn>,<em>,<i>,<ins>,<kbd>,<pre>,<q>,<samp>,<small>,<strong>,<sub>,<sup>,<tt>,<u>,<var>

Formatowania

• <form>,<input>,<textarea>,<button>, <select>,<optgroup>,<option>,<label>,<fieldset>,<legend>

Formularze

• <table>,<caption>,<th>,<tr>,<td>,<thead>,<tbody>,<tfoot>,<col />,<colgroup>

Tabele

Elementy HTML (2)

• <ul>,<ol>,<li>,<dl>,<dt>,<dd>Listy

• <script>,<noscript>,<object>,<param />Programowanie

• <img />,<map>,<area />Obrazy

• <head>,<title>,<meta>Metadane

• <style>Style

• <a>, <link />Linki

Elementy strukturalne

Do elementów strukturalnych języka HTML zaliczamy:

• div-y• paragrafy• nagłówki• span-y

Elementy te mogą zawierać zarówno tekst jak i inne elementy HTML

elementy blokowe

element liniowy

Linki (1)

Linki (2)

• zewnętrzne

<a href="adres_strony.html">link</a>

• wewnętrzne

<a href="#nazwa">link</a> …<div id="nazwa">Zawartość do linku</div>

• do określonego miejsca na stronie

<a href="adres_strony.html#nazwa">link</a>

Rysunki

• Znacznik <img />• Brak znacznika zmykającego

<img src="rys.jpg" />

<img src="rys.jpg"

alt="rysunek"/>

Tabele

<table><caption>Podpis</caption><tr><th>Nagłówek 1</th>

<th>Nagłówek 2</th><th>Nagłówek 3</th>

</tr><tr><td>11</td>

<td>12</td><td>13</td>


<td>22</td><td>23</td>


<td>32</td><td>33</td>

</tr></table>

Listy

• Wyróżniamy trzy rodzaje list:

• Punktowane (<ul>)• Numerowane (<ol>)• Definicyjne (<dl>)

• Mogą zawierać jeden lub więcej pozycji (<li>)

DEMO 2

Stworzenie strony internetowej zawierającej podstawowe

elementy języka HTML.

Wprowadzenie do CSS

• Czym są kaskadowe arkusze styli

• Składnia CSS i selektory

• Podstawowe style

Czym są kaskadowe arkusze styli

Kaskadowe arkusze styli (ang. Cascade Style Sheets) pozwalają nazdefiniowanie wyglądu i układu strony internetowej.

Składnia CSS

• Informacje o wyglądzie strony są zapisywane w formie reguł• Reguła zapisywana jest w postaci:

• Język jest czuły na wielkość znaków.

selektor { właściwość : wartość;właściwość : wartość;właściwość : wartość;

}

Miejsce umieszczania CSS

miejsce umieszczenia reguł CSS

w tagu HTML w części HEAD w osobnym pliku

…

<p style="color:blue;">

...

</p>

…

<p style="color:blue;">

...

</p>

…

<head>

<style type="text/css">

p {color: blue;}

</style>

</head>

<link rel="stylesheet"

type="text/css"

href="style.css" />

Selektory proste

Selektory

HTML Klasy ID

zależne niezależne

Selektory proste - HTML

Selektory HTML dopasowują się do określonego rodzaju elementu HTML

h1 {color:blue; text-decoration:underline;}

p {color:black; text-style:italic;}

Selektory proste – klasy niezależne

Selektory klasy niezależne dopasowują się do grupy elementów z przypisaną określoną klasą

Każdy element HTML może mieć przypisaną klasę, która pozwala łączyć kilka różnych elementów w grupę.

.news {color:blue; text-decoration:underline;}

…<h1 class="news">Jakiś tytuł 1</h1><p class="news">Jakiś paragraf 1</p><h1>Jakiś tytuł 2</h1><p>Jakiś paragraf 2</p>…

Selektory proste – klasy zależne

Selektory klasy zależne dopasowują się do grupy elementów tego samego typu z przypisaną określoną klasą.

h1.news {color:blue; text-decoration:underline;}p.news {color:black; text-style:italic;}

…<h1 class="news">Jakiś tytuł 1</h1><p class="news">Jakiś paragraf 1</p><h1>Jakiś tytuł 2</h1><p>Jakiś paragraf 2</p>…

Selektory proste – ID

Selektory ID dopasowują się do tylko do elementu z określonym identyfikatorem.

Każdy element HTML może mieć przypisany identyfikator, który pozwala jednoznacznie ten element na stronie.

#newsSuperWazny {color:blue; text-decoration:underline;}#news {color:black; text-decoration:underline;}

…<h1 id="newsSuperWazny">Jakiś tytuł 1</h1><p id="news">Jakiś paragraf 1</p><h1>Jakiś tytuł 2</h1><p>Jakiś paragraf 2</p>…

Grupowanie selektorów

sel1,sel2,… {

właściwość : wartość;



}

h1,h2,h3 {color:blue; text-decoration:underline;}

Selektory pochodne

p span {color:orange; text-decoration:underline;}

…

<p id="news">

Jakiś paragraf 1 <span> bardzo <span> interesujące

</span> cytowanie </span> Dalsza część paragrafu 1

<span>kolejne interesujące cytowanie</span> Dalsza

część paragrafu 1

</p>

…

Selektory dzieci

p span {color:orange;}

p>span {color:red;}

…

<p id="news">

Jakiś paragraf 1 <span> bardzo <span> interesujące

</span> cytowanie </span> Dalsza część paragrafu 1

<span>kolejne interesujące cytowanie</span> Dalsza

część paragrafu 1

</p>

…

Selektory atrybutów (1)

Są dopasowywane do elementów posiadających określone atrybuty lub ich wartości

• [atrybut] – reguła jest dopasowana, gdy element ma przypisaną wartośćdla atrybutu "atrybut"

• [atrybut=wartość] – reguła jest dopasowywana, gdy atrybut "atrybut" madokładnie wartość "wartość".

• [atrybut~=wartość] – reguła jest dopasowana, gdy atrybut "atrybut" maprzypisaną listę wartości oddzielonych spacjami, z których jedna jest równa"wartość"

• [atrybut|=wartość] – reguła jest dopasowana, gdy atrybut ma wartość"wartość" lub, gdy rozpoczyna się od wartości "wartość" po której występujeznak "-".

Selektory atrybutów (2)

a[href="http://onet.pl"] {color:blue;}

img[alt~="opis"] {border:1px solid red;}

<a href="http://onet.pl">onet.pl</a>

<img alt="jakiś opis" />

input[readonly] {color:blue;}

<input type="text" readonly="readonly" />

Pseudo-klasy

a:link {color:blue;}a:visited {color:orange;}a:hover {color:red;}a:active {color:green;}

…<a href="http://onet.pl/">onet.pl</a>…

Pseudo-elementy (1)

p:first-letter {font-size:50px; color:red;

float:left; margin-right:10px;}

p:first-line {color:yellow;}

…

<p>Lorem ipsum dolor sit amet, consectetur adipiscing

elit. Donec dignissim nulla eget neque pellentesque ut

vehicula massa blandit. Donec mattis condimentum

pharetra. Donec nec enim sit amet arcu pretium congue

eget eu neque. Donec metus enim, dignissim aliquet

tempus ac, rhoncus at elit. Vivamus in felis libero,

et semper elit. Quisque non orci ut sapien ultrices

consectetur non nec arcu. </p>

…

Pseudo-elementy (2)

p.news:before {content:"Coś ważnego: ";}

p.news:after {content:"!!!";}

…

<p class="news">Jakiś paragraf 1</p>

…

Jednostki i kolory w CSS

względnewzględnewzględnewzględne bezwzględnebezwzględnebezwzględnebezwzględne

em mm

ex cm

px in

pt

pc

Jednostki CSS

notacja heksadecymalna:color: #808000;

notacja dziesiętna:color: rgb(128,128,0);

słowa kluczowe:color:olive

Kolory CSS

Podstawowe właściwości CSS (1)

font: <font-weight> <font-style> <font-variant><font-size>/<line-height> <font-family>

p {font: normal italic 2em/1.5em times,serif;}

Ustawienia czcionek

Wyrównanie tekstu w poziomie:

text-align:left; left|center|right|justify


Dekorowanie tekstu

text-decoration: underline;

none | line-through | underline | overline | blink

Kolor tekstu

color: #FF0000;


Tło

background: background-color background-imagebackground-repeat background-attachmentbackground-position

background: yellow url(tlo.jpg) repeat-x fixed 0 left;

Model pudełkowy CSS (1)

ZawartośćZawartość

Dopełnienie (padding)Margines (margin)

Ramka (border) Linia zewnętrzna (outline)


Dopełnienie

Margines

padding:10px;

padding:10px 5px;

padding:10px 5px 10px;

padding:10px 5px 10px 5px;

margin:10px;

margin:10px 5px;

margin:10px 5px 10px;

margin:10px 5px 10px 5px;


Renderowanie elementu

Wyświetlanie elementu

display:block;none, inline, block,

list-item, inline-block,

visibility:hidden; visible, hidden


"Wystawanie" zawartości

overflow

overflow-x

overflow-y

• hidden

• visible

• scroll

• auto


Pływalność elementu

float:left; left, right, none

clear: left; left, right, both, none


Pozycja elementu

position:relative;static, relative,

absolute, fixed

top:12px;

left:12px;

bottom:12px;

right:12px;

tworzenie stron internetowych 1 - politechnika częstochowska stron internetowych 1.pdfselektory...

Documents