Site-uri și aplicații pentru web

Aplicații (2)


Titluri, subtitluri

Creaţi folosind Sublime Text fişierul D:\postuniv\web\lab2\webdeveloper.html astfel:

  • preluaţi textul "/pt_lab/lab2/web_developer.txt" de pe pagina cursului;
  • adăugaţi-i la început rândurile:
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Web developer</title>
</head>
<body>
   (aici inserati textul)
   şi la sfârşit rândurile
</body>
</html>
  • salvaţi fişierul cu numele de webdeveloper.html şi vizualizaţi-l în browser:
  • adăugaţi marcaje html pentru evidenţierea titlului - <h1> - , subtitlurilor - <h2> - şi a paragrafelor - <p>.

...

<h1>Web developer</h1>

<p>A web developer is a programmer who specializes in, or is specifically engaged in, the development of ...</p>

<h2>Nature of employment</h2>

<p>Modern web applications often contain three or more tiers, and depending on the size of the team a developer works on, he or she may specialize in one or more of ...</p>

<h2>Educational and licensure requirements</h2>

<p>There are no formal educational or licensure requirements to become a web developer. However, many colleges and trade schools offer coursework in web development. There are... </p>



TOP

Fonturi

Creaţi în directorul proiectului un subdirector denumit css. Adăugați în acest subdirector un fişier denumit stil.css şi ataşaţi-l paginii dv. web inserând în interiorul elementului head rândul:

   <link href="css/stil.css" rel="stylesheet">
  • căutaţi la adresa https://fonts.google.com/ fonturile denumite Bad Script şi Englebert.
  • copiaţi linia care trebuie plasată în secțiunea head pentru a putea utiliza apoi aceste fonturi în fişierul de stiluri (stil.css), respectând indicaţiile din cursul 2.
<link href="https://fonts.googleapis.com/css?family=Bad+Script|Englebert" rel="stylesheet">
  • adăugați în fişierul stil.css stiluri pentru formatarea titlului, subtitlurilor şi a paragrafelor, folosind diverse fonturi (tipuri, mărimi şi culori diferite), de exemplu:
    • pentru elementul h1
    • h1 {
         background-color: #C6C7FF;
         font-size: 1.8rem;
         color: #2B2EFF;
      } 
    • pentru primul paragraf definiți clasa .intro:
    • .intro {
          font-family: Verdana;
          color: # 404088;
      }
    • iar pentru evidențierea unor regiuni din text definiți clasele .bold și .italic:
    • .bold {
         font-weight:bold;
      }
      
      .italic {
         font-style:italic;
      } 
  • referiți în primul paragraf clasele definite, astfel:

Rezultat:

  • adăugați fișierului stil.css clasa .formare în care utilizați fontul Bad Script selectat pe site-ul https://fonts.google.com/:
  • .formare {
        font-family:'Bad Script', cursive;
        font-size: 1.25rem;
    }
  • aplicați noua clasă paragrafului "There are no formal educational or licensure requirements ..." din partea a doua a paginii webdeveloper.html:

Rezultat:



Creaţi clasa .engle în care se folosește fontul Englebert. Aplicați această clasă primului paragraf și paragrafelor rămase nestilizate folosind clase.

.engle {
    font-family: 'Englebert', sans-serif;
    font-size: 1.25rem;
}

Observație: Pentru stilizarea primului paragraf vor fi folosite două clase, după modelul:

Rezultat:


TOP

Activitate suplimentară

Pentru fixarea cunoștințelor acumulate, vă invităm să realizați exercițiul următor:

  • creați un nou director activi2, în care să salvați fișierul HTML, sub denumirea em_rem.html și un subdirector CSS, în care să salvați fișierul de stil, sub denumirea de em_rem.css

Conținutul fișierului em_rem.html

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>Em vs Rem</title>
 <link href="css/em_rem.css" rel="stylesheet">
</head>

<body>
  <div class="parinte">
    Sunt div parinte. Am 15 px.
      <div class="copil">
        Sunt primul div copil. Câți pixeli am? <br>
        Răspuns: 

      <div class="copil">
        Sunt al doilea div copil. Câți pixeli am? <br>
        Răspuns:

        <div class="copil">
         Sunt al treilea div copil. Câți pixeli am? <br>
         Răspuns:
        </div>

      </div>
    </div>
  </div>
 </body>
</html>
	

Conținutul fișierului em_rem.css

.parinte {
  font-size: 15px;
}
.copil {
 font-size: 2em; /*înseamnă de 2 ori mărimea curentă a fontului*/
 }
	
  • completați răspunsul, indicând numărul de pixeli corespunzător pentru fiecare div copil
  • modificați unitatea de măsură pentru clasa copil și anume rem
.copil {
 font-size: 2rem; 
 }
  
  • completați răspunsul, indicând numărul de pixeli corespunzător pentru fiecare div copil
TOP