Site-uri și aplicații pentru web

Aplicații (1)


Prima pagina web

Pentru a crea fișierele unui site Web respectați următoarele principii:

  • Realizați fişierele cu ajutorul unui editor de texte adaptat (de exemplu Sublime Text), respectând structura specifică (două părţi : head – antet şi body - corp);
  • Salvaţi fişierele cu extensia .html;
  • Vizualizaţi paginile cu ajutorul unui browser de navigare: Internet Explorer, Google Chrome, Firefox, Opera etc. urmând paşii: File->Open->Browse.... sau selectând fișierul .html cu un dublu clic în File Explorer;
  • După efectuarea unei modificări într-un fişier .html, salvaţi-l şi reîmprospătaţi conţinutul afişat în programul de navigare pentru a vedea efectul modificării operate.

Creați directorul D:\postuniv\web\lab1.

Creați folosind SublimeText fişierul D:\postuniv\web\lab1\loremipsum.html astfel:

  • preluaţi textul "/pt_lab/lab1/fisier_lab1.txt" din site-ul cursului;
  • adăugaţi-i la început rândurile:
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Lorem ipsum</title>
</head>
<body>
  • adăugaţi-i la sfârșit rândurile:
    (aici inserati textul)
    . . .
</body>
</html> 
  • salvaţi fişierul cu numele de loremipsum.html şi vizualizaţi-l în browser:
  • adăugaţi marcaje html pentru evidenţierea titlului - <h1> - şi paragrafelor - <p> :

TOP

Primele notiuni de stilizare

Adăugați în directorul D:\postuniv\web\lab1 subdirectorul css. Creaţi apoi un fişier pentru stiluri denumit stil.css, care va conține stiluri pentru formatarea documentului realizat. Salvați fișierul stil.css în subdirectorul \css.

Inserați în fișierul stil.css următoarele reguli:

h1 {
   font-family:arial, verdana, sans-serif;
   color:red;
}

p {
   font-family:arial, verdana, sans-serif;
   color:#B16DFF;
   font-size:0.75em;
}

şi ataşaţi acest fişier paginii dv. web inserând în interiorul elementului head rândul:

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

Adăigați în fișierul stil.css încă două stiluri, astfel:

#pagina {
   width:900px;
   margin:0 auto;
   border:3px solid #FFA126;
}

.paragraf {
   width:850px;
   margin:0 auto;
   border:1px solid #1687FF;
} 

Utilizaţi în pagina dv. web aceste stiluri, astfel:

<div id="pagina">
 <h1>Lorem Ipsum</h1>
 <p class="paragraf">Lorem Ipsum este ...........Ipsum.</p>
 <p class="paragraf">E un fapt ........................</p>
 <p>In ciuda opiniei .................</p>
 <p>Exista o multime................. </p>
</div>

Operați câteva modificări asupra stilurilor folosite, astfel:

.paragraf {
    width:850px;
    margin:0 auto;
    border:3px dotted #1687FF;
}

sau:

.paragraf {
    width:600px;
    margin:0 auto;
    border:1px dashed #FF312D;
} 

După fiecare modificare salvați fișierul stil.css și reîncărcați pagina.


TOP