tworzenie stron internetowych 1 - politechnika częstochowska stron internetowych 1.pdfselektory...
Post on 07-Aug-2020
7 Views
Preview:
TRANSCRIPT
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>
</tr><tr><td>21</td>
<td>22</td><td>23</td>
</tr><tr><td>31</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ść;
właściwość : wartość;
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 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
Podstawowe właściwości CSS (2)
Dekorowanie tekstu
text-decoration: underline;
none | line-through | underline | overline | blink
Kolor tekstu
color: #FF0000;
Podstawowe właściwości CSS (3)
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)
Model pudełkowy CSS (3)
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;
Model pudełkowy CSS (4)
Renderowanie elementu
Wyświetlanie elementu
display:block;none, inline, block,
list-item, inline-block,
visibility:hidden; visible, hidden
Model pudełkowy CSS (5)
"Wystawanie" zawartości
overflow
overflow-x
overflow-y
• hidden
• visible
• scroll
• auto
Model pudełkowy CSS (5)
Pływalność elementu
float:left; left, right, none
clear: left; left, right, both, none
Model pudełkowy CSS (6)
Pozycja elementu
position:relative;static, relative,
absolute, fixed
top:12px;
left:12px;
bottom:12px;
right:12px;
top related