7. Exerciții. Pagini WEB
Instrumente de lucru pentru crearea site-urilor web
Metode
- 1. fișierul (Word, Excel, PowerPoint) se salvează ca tip de pagină web,
- 2. programe editoare de pagini web (Publisher)
- 3. editoare de HTML,
-4. site-uri editoare de pagini web (Google sites, wordpress, blogspot)
- 1.Editoare de texte și de calcul tabelar care salvează documente ca pagini web.
- Microsoft Word. Să se realizeze un fișier care să conțină o noțiune: definiție și imagine potrivită (ex. smartphone, tableta, Bill Gates, Steve Jobs). Să se salveze în 2 formate specifice paginilor web. Ce observați?
- Microsoft Excel. Să se realizeze un tabel care să conțină date privind numărul elevilor din clasă separat pe fete și băieți, Să se reprezinte grafic radial datele din tabele. Să se salveze în 2 formate specifice paginilor web. Ce observați?
- Microsoft PowerPoint. Să se realizeze în PowerPoint o prezentare (pe teme școlare) care să conțină 2 diapozitive. Să se salveze în cele 2 formate specifice paginilor web. Ce observați?
. Ce este HTML? (Hypertext Markup Language)
- Este un set de coduri logice care constituie apariţia unui document web si a informatiilor pe care le deţine. Elementele de bază sunt etichetele
<></>
Structura documentului HTML (observaţi culorile)
<html>
<head>
<title>Titlu Documentului</title>
</head>
<body>
Continutul paginii
</body>
</html>
ATENŢIE
Toate codurile de mai jos pot fi copiate intr-un fişier deschis cu NOTEPAD şi salvate cu orice nume dar obligatoriu se adauga extensia *.html sau *.htm
Pentru modificarea fișierului
- pe pagina web (fișierul închis) se face clic dreapta-> Deschidere cu ...->Microsoft Word
(astfel se poate edita fișierul în Word)
Pentru a determina corect titlul paginii web :
- se deschide fișierul HTML
- se accesează meniul Vizualizare (View)
- se selectează opțiunea sursă
- se identifică textul dintre etichetele <title> </title>
Doar pentru cei care doresc să aprofundeze (nu neaparat pentru examenul de bacalaureat) îi invit să citească în continuare
Titluri
<h1></h1>, <h2></h2>,<h3></h3>v...
Cod HTML
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
</body>
</html>
Cum apare in pagina
Paragraf <p> ... </p>
Cod HTML
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<p>Paragraf 1</p>
<p>Paragraf 2</p>
<p>Paragraf 3</p>
<p>Paragraf 4</p>
</body>
</html>
Cum apare in pagina
Paragraf 1
Paragraf 2
Paragraf 3
Paragraf 4
Un nou rand <br>
Linie orizontala <hr>
Tag-ul <FONT> ... </FONT>
Mărimea fontului
ex.
<font size="+2">Doua mărimi mai mare</font>
Tipul fontului
ex.
<font face="Arial Black">Acesta este tipul de font Arial Black</font>
Culoarea fontului
<font color=green>Acest text are culoarea verde</font>
OBS
Culorile sunt în tabelul de la sfârşitul documentului, prima coloană descrie culorile cu nume iar celelalte coloane cu coduri
Bold, Italic, Underline
- - Bold (ingrosat) <b> ... </b>
- - Italic (inclinat) <i> ... </i>
- - Underline (subliniat) <u> ... </u>
ex.
Cod HTML
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<body>
<b> Bold </b>
<i> Italic </i>
<u> Underline </u>
</body>
</html>
Cum apare in pagina
Bold Italic Underline
Alinierea
<div align="valoare"> ... </div>
valoare= LEFT, RIGHT si CENTER
Cod HTML
<html>
<head>
<title>Titlu documentului</title>
</head>
<body>
<p><div align="left"> ... Text1</div></p>
<p><div align="right"> ... Text1</div></p>
<p><div align="center"> ... Text1</div></p>
</body>
</html>
Cum apare in pagina
... Tex1
... Tex1
... Tex1
Elementele pentru marcatori si numerotare
Un element des folosit in formarea listelor (neordonate) este <ul>.
- - <ul> este elementul de început si dupa scrierea listei se incheie cu </ul>.
- - Majoritatea elementelor pentru marcatori si numerotare sunt compuse din unu sau mai multe elemente <li> ... </li> (list element). Fara atributul "type" specificat in "<ul>" acestea prezintă un marcaj ca un bullet.
Cod HTML
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ul>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ul>
</body>
</html>
Cum apare in pagina
List item 1 ...
List item 2 ...
List item 3 ...
- Sunt 3 tipuri de marcaje: disc, circle (cerc) si square (patrat)
- Tipul de marcaj care se doreste folosit se introduce prin atributul type in eticheta <ul>
Cod HTML
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ul type="square">
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ul>
</body>
</html>
Cum apare in pagina
- List item 1 ...
- List item 2 ...
- List item 3 ...
Un alt element folosit pentru formarea listelor (ordonate) este <ol>.
- - <ol> ... </ol> este un element de numerotare. Elementele din lista sunt numerotate automat.
- - Impreuna cu <ol> se foloseste <li> ... </li>
Cod HTML
<html>
<head>
<title>titlu documentului</title>
</head>
<body>
<ol>
<li>List item 1 ...</li>
<li>List item 2 ...</li>
<li>List item 3 ...</li>
</ol>
</body>
</html>
Cum apare in pagina
- List item 1 ...
- List item 2 ...
- List item 3 ...