Site-uri și aplicații pentru WWW

Aplicații (3)


Elemente HTML 4

Imagini, liste

Creaţi folosind Sublime Text fişierul D:\postuniv\web\lab3\reteta.html. Porniți de la conținutul minimal al unui fișier în format HTML5:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8">
      <title>Titlul paginii</title>
   </head>
   <body>
      <h1>Prima pagină HTML</h1>
      <p>Acest paragraf conţine şi caractere cu diacritice.</p>
      <!-- Iar acesta este un comentariu. Comentariile nu produc nimic pe ecran. -->
   </body>
</html>

Operați schimbări succesive în fișierul reteta.html astfel încât acesta să producă următorul conținut:

Rețeta a fost preluată de pe site-ul http://www.retete-gustoase.ro/. Titlul (Rețetă: Șnițel vienez) va fi definit ca legătură pentru acceasrea acestui site.

Pentru ușurarea rezolvării exercițiului vi se oferă următoarele blocuri de text:

Ingrediente: 
2 bucăți de fleică de vită (de regulă bucată din pulpă), de aproximativ 180-200 de grame fiecare 
1 ou 
2 linguri făină 
2-3 linguri pesmet 
sare și piper 
1 sfert de lămâie 
ulei pentru prăjire.
Preparare:
1. Pregătiți carnea: eliminați zgârciurile și bateți-o bine cu un ciocan pentru carne. Carnea trebuie să-și reducă la jumătate grosimea în urma acestui proces. 
2. Amestecați făina cu puțină sare și piper. 
3. Bateți oul cu 1 lingură de apă. 
4. Treceți cele două bucăți de carne prin făină. Eliminați excesul de făină. 
5. Treceți cele două bucăți de carne prin ou. 
6. Scurgeți carnea de ou și treceți-o prin pesmet. Presați ușor pentru ca pesmetul să adere la învelișul de ou. 
7. Prăjiți șnițelul, în baie de ulei sau pe ambele părți, pînă se rumenește și devine auriu. 
8. Scoateți șnițelul din ulei și puneți-l pe un șervet de hârtie pentru a elimina excesul de grăsime. 
9. Șnițelul vienez se servește tradițional cu salată de cartofi, un sfert de lămâie și un pahar de vin. 


TOP

Stiluri, clase

Adăugați proiectului directorul suplimentar /css. În acest subdirector adăugați un fișier denumit stil.css. Inserați acest fișier în reteta.html adăugând în secțiunea head linia:

<link href="css/stil.css" rel="stylesheet">

Accesați site-ul http://www.google.com/fonts și selectați fontul Bad Script.

Inserați în secțiunea head a paginii realizate linia care integrează noul font, conform metodei din cursul 2:

  <link href="https://fonts.googleapis.com/css?family=Bad+Script" rel="stylesheet">

Modificați fișierul stil.css astfel încât cele două liste din pagină să folosească fontul Bad Script.

ul, ol {
   font-family:'Bad Script', cursive;
} 

Adăugați fișierului stil.css liniile necesare declarării a două clase suplimentare de numite ingred și prepa. Cele două clase vor diferi prin mărimea și culoarea scrisului.

Variante posibile:

ul.ingred {  /*sau simplu, .ingred */
   color: #880000;
   font-size: 14px;
}

ol.prepa {
   color: #0000CC;
   font-size: 12px;
}

Atașați elementelor ul și ol stilurile astfel definite:

     <ul class="ingred"><li>2 bucăți de ...
     <ol class="prepa"><li>Pregătiți carnea: ...

TOP

Tabele

Imaginea prezintă caracteristicile nutritive ale câtorva legume și fructe, organizate tabelar.

Refaceți tabelul din imagine, încercând să vă apropiați cât mai mult de model.

Observație: Puteți adăuga tabelul la sfârșitul fișierului reteta.html, evident, înainte de închiderea etichetei </body>!


Pentru a vă asigura că stilizarea tabelului este corectă, puteți consulta mai jos stilizarea prezentată în materialul video.

table{
	width: 50%;
	margin: 0 auto;
	}

table, th, td {
    border: 1px solid #9bbb59;
    border-collapse: collapse;
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 11px;
}
th, td {
    padding: 3px;
}
th {
    text-align: center;
    font-weight:bold;
    background-color:#9bbb59; 
    font-size: 14px;
}
td{
	width: 25px;
	vertical-align: middle;
}
td.bold{
	 font-weight:bold;
}
td.center{
	text-align: center;
}
td.fundal{
	background-color:#CCFFCC;
}
td.all{
  font-weight:bold;
  text-align: center;
  background-color:#CCFFCC;
}
	

TOP

Blog

În cele ce urmează, folosind cunoștințele de HTML5 și CSS3 acumulate, veți realiza pagina principală a unui blog. Pentru aceasta creaţi fişierul D:\postuniv\web\blog\index.html, pornind de la conținutul minimal cunoscut. În directorul D:\postuniv\web\blog adăugați de asemenea subdirectoarele css și imagini.

Modificați conținutul fișierului index.html adăugând ansamblul de elemente HTML5 necesar creării unei structuri similare celei din imagine:

Structura astfel creată este comună multor pagini web. În cele ce urmează veți realiza un fișier .html complex pornind de la un model (eng. template) bazat pe structura creată. Modelul ales poate fi descărcat gratuit de la adresa http://maggner.templateify.com/:

Codificarea în HTML5 a principalelor elemente este următoarea:

<header>
   <img src="imagini/myblog.png">
</header>
<nav>
   <ul>
      <li><a href="index.html">HOME</a></li>
      <li><a href="prezent.html">PROIECTE</a></li>
      <li><a href="prezent.html">CALATORII</a></li>
      <li><a href="prezent.html">DESPRE MINE</a></li>
   </ul>
</nav>
<main>
   <article>
      <h1>Fotografia favorita de azi </h1>
      <h3>Postat de mine       comentarii</h3>
      <img src="imagini/foto1.jpg" height="200px" width="200px">
      <p>Este o postare vesela cu favorita mea ....de azi</p>
   </article>
</main>
<aside>
   <section>
      <p>formular de cautare</p>
   </section>
   <section>
      <p>Like us</p>
   </section>
   <section>
      <p>Posturi populare</p>
   </section>
</aside>
<footer>
   <p>Posted by: Me</p>
   <p>Copyright &copy;MyBlog 2021</p>
</footer> 

Imaginile referite (myblog.png și foto1.jpg) pot fi descărcate din directorul pt_lab/lab3.

Rezultat:

Observații:

  • Imaginile folosite sunt păstrate în subdirectorul /imagini;
  • Imaginea din antet (myblog.png) are dimensiunile 1000 x 115 px;
  • Imaginea din pagina (foto1.jpg) are dimensiunea iniţială de 300 x 280 px;
  • Afişarea este realizată în lipsa unui fişier cu stiluri.

TOP