Lab1 P - Web.

Universitatea Tehnica a Moldovei
Facultatea Calculatoare, Informatica si Microelectronica

Departamentul ISA
RAPORT
Lucrarea de laborator Nr. 1
la disciplina
Tehnologii WEB
Tema:Crearea web-paginii cu ajutorul CSS ,HTML si Bootstrap
A efectuat: st. gr. TI-173. Florin Rosca
A verificat: Asistent universitar. Rusu Cristian
Chișinău 2019
Scopul:Studierea principiilor HTML, CSS și Bootstrap
Sarcina lucrării: Implimentarea cunoștințelor obținute pentru crearea unei web-

pagini.
Teorie:
Informații generale HTML

 Hypertext Markup Language a fost propus în 1989 de Tim Bernes-Lee,
pentru organizația științifică CERN (Elveția)
 Strămoșul său este SGML (Standard Generalized Markup Language)
 În trecut, specificația de HTML era versionată, dar mai nou nu se
folosesc numere de versiune. HTML 5 reprezintă practic
“HTML modern”.
 Dimensiunea curenta a www este de aproximativ 20 miliarde pagini
(identificate de motoarele de căutare)
Structură:
“Hello world” în HTML:
<!DOCTYPE html>
<html>
<head>
<title>Titlu</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
 Documentul începe cu o declarație de tip (pentru HTML5, aceasta este
'DOCTYPE HTML')
 Minimul necesar pentru un document valid constă într-un tag title; cu
toate acestea, recomandarea este ca documentul să conțină cel puțin un
tag html, cu un singur head, un title și un body
 Documentul poate conține taguri fără conținut (e.g. br)
Taguri pentru conținut text
 article Articol (tag specific HTML5)
 p Paragraf
 h1-6 Titlu secțiune, ierarhizat pe 6 niveluri
 a Reprezintă o legătură web, către o altă adresă, sau un element din
același document, specificate în atributul href; poate conține
atributul target care specifică modul în care se va deschide noua
adresă (i.e. înlocuind pagina deschisă curentă, sau creând o alta nouă)
 ol, ul Listă ordonată, respectiv ne-ordonată; ambele conțin enumerări
de taguri li
 dl, Listă de grupuri nume-valoare (sau definiții), unde dt specifică
numele și este urmat de ddcare specifică valoarea
 pre,code Afișează text preformatat, respectiv text care reprezintă cod
într-un limbaj de programare; aceste taguri indică clientului să nu
încerce să formateze sau să evalueze posibilele expresii din conținutul
tagurilor, ci să le afișeze așa cum sunt
Secțiuni
 div,span Secțiuni dintr-un document HTML, fără o semantică
specială, cu rolul formatării și poziționării selective
 header,nav,section,aside,footer Secțiuni specifice HTML5 pentru
atribuirea de semantică diverselor secțiuni tipice dintr-un document
Tabele
 table Tabel
 thead Cap de tabel
 tbody Conținutul tabelului
 tfoot Subsol tabel
 tr Linie de tabel (poate fi conținută în thead, tbody sau tfoot)
 th Celulă din capul de tabel
 td Celulă din tabel
 colgroup Grup de coloane folosite pentru a crea diviziuni intr-un
tabel; conține taguri de tipul col și este inclus direct în tagul table
Taguri pentru formulare
 form Formular; conține un atribut action și un
atribut method specificând parametrii cererii HTTP ce se va genera în
urma trimiterii datelor din formular
 input Câmp de interacțiune cu utilizatorul; conține un
atribut name prin care se specifică denumirea parametrului ce va fi
trimis către server și type prin care se specifică tipul câmpului:
 text, password conține text, respectiv text mascat pentru
introducerea de parole
 radio, checkbox conține o opțiune da/nu, exclusivă, respectiv
non-exclusivă
 file se folosește pentru încărcarea de fișiere
 hidden se folosește pentru a trimite un parametru fără a fi
vizualizat de utilizator
 button,submit, reset reprezintă butoane – generic, respectiv
special pentru trimiterea sau golirea formularului
 textarea Câmp pentru introducerea unui text mai extins
 select Câmp de selecție a unei valori dintr-o listă de taguri option
 label Text afișat în dreptul unui input; conține un atribut for pentru a
specifica input-ul corespunzător
 fieldset Subdiviziune a unui formular; poate conține legend pentru a
specifica titlul subdiviziunii
 button Buton generic; preferat unui input de tipul button
Taguri media
 img Afișează o imagine; sunt necesare atributele src, pentru a
preciza URL-ul imaginii, și altpentru a preciza textul afișat în lipsa
imaginii
 video Afișează un film; este necesar atributul src, pentru a preciza
sursa video; conținutul tagului poate conține o manieră alternativă de
a afișa filmul, în caz că tagul nu este suportat de navigator
 object, embed Includ un obiect non-HTML, e.g. applet Java, Flash,
audio, etc.
Alte taguri
 script Permite introducerea unui script rulat pe client, într-un limbaj
suportat; poate apărea în head sau în body
 meta Permite introducerea de informații despre document (e.g. setul
de caracter utilizat, cuvinte cheie, scurta descriere, etc.)
 iframe Permite introducrea unui alt document HTML într-o secțiune
a documentului curent; noul document se poate afla pe un alt server
 <!– … - > Comentariu; conținutul acestui tag nu va fi evaluat sau
afișat de client
Informații generale CSS
 CSS (Cascading Style Sheet) este maniera preferată prin care atașăm proprietăți grafice
de randare elementelor din DOM. Versiunea standard curenta este 2.1, fiind in lucru
documentatia pentru versiunea 3 si in planificare versiunea 4.
 Putem include declarații CSS direct în atributul style al fiecărui element, în
tagul style din head, sau într-un fișier separat (varianta preferată). În cazul unui fișier
separat, acesta trebuie legat în head prin tagul
<link rel="stylesheet" type="text/css" href="mystylesheet.css">
 O declaratie CSS este in felul urmator:

selector{
proprietate:valoare;
...
}
Selectori
Tipuri de elemente
h1{
font-size:large;
}
Clase
.titlu_subliniat{
text-decoration:underline;
}
Identificatori
#titlu_principal{
color:red;
}
Atribute
[lang="ro"]{
color: green;|
}
Putem combina selectori, folosind:

Reuniune
h1,h2{
}
Intersectie
h1.titlu_principal{
font-size:large;
}
Descendenta
.antet_pagina h1{}
}
Descendenta directa
.antet_pagina > h1{
}
Rezultatul:
Listingul ptogramului:
Fisierul “index.html”:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>HTML5 и CSS3 сайт</title>
<link rel="stylesheet" href="main.css" >
</head>
<body>
<header>
<div id="logo" onclick="slowScroll('#top')">
<span>WebProgerMD</span>
</div>
<div id="about">
<a href="#" title="Opportunities"
onclick="slowScroll('#main')">Opportunities</a>
<a href="#" onclick="slowScroll('#overview')" title="Benefits">Benefits</a>
<a href="#" onclick="slowScroll('#contacts')" title="Contacts">Contacts</a>
<a href="#" onclick="slowScroll('#mess_send')" title="Register">Register</a>
</div>
</header>
<div id="top">
<form action="action_page.php">
<div class="container" id="sign">
<h1>Programming</h1>
<h3>As a way of life!</h3>
<h2>Sign In</h2><br/><br /><br />
<label for="email"><b></b></label>
<input type="text" placeholder="Enter Email" name="email" required>
<label for="psw"><b></b></label>
<input type="password" placeholder="Enter Password" name="psw"
required><br />
<button type="submit" class="registerbtn">Login</button>
</div>
</form>
</div>
<div id="main">
<div class="intro">
<h2>Web Programmers Tutorials</h2>
<span>Here you can find the answer to any question about web programming!
</span>
</div>
<div class="text">
<span>Web developers are professionals who build attractive and functional
websites. A professional and user-friendly website reflects a business that is
trustworthy, relevant and client or consumer-centric. People make decisions about which
products and services to buy based on information they’ve searched for online.You’ll
confidently promote your website, knowing that it reflects your brand’s value, and reap
the rewards.</span>
</div>
</div>
<div id="overview">
<h2>Benefits</h2>
<h4>everything is easier with us</h4>
<div class="img">
<a href="#"><img src="https://itproger.com/img/courses/1476977754.jpg"
alt=""></a>
<span><a href="#">Learning JS for Beginners</a></span>
</div>
<div class="img">
<a href="#"><img src="https://itproger.com/img/courses/1530341233.jpg"
alt=""></a>
<span><a href="#">PhotoShop tutorials for beginners</a></span>
</div>
</div>
<div id="contacts">
<center><h5>Feedback</h5></center>
<form id="form_input">
<label for="name">Name <span>*</span></label><br>
<input type="text" placeholder="Enter your name " name="name" id="name"><br>
<label for="email">Email<span>*</span></label><br>
<input type="email" placeholder="Enter email" name="email" id="email"><br>
<label for="message">Message <span>*</span></label><br>
<textarea placeholder="Enter your message" name="message"
id="message"></textarea><br>
<div id="mess_send" class="btn">To send</div>
</form>
</div>
<div id="overview">
<form action="action_page.php">
<div class="container" id="sign">
<h1>Register</h1>
<p>Please fill in this form to create an account and to learn about new
courses...</p>
<hr>
<label for="email"><b>Email</b></label><br />

<input type="text" placeholder="Enter Email" name="email" required><br />
<label for="psw"><b>Password</b></label><br />

<input type="password" placeholder="Enter Password" name="psw"
required><br />
<label for="psw-repeat"><b>Repeat Password</b></label><br />

<input type="password" placeholder="Repeat Password" name="psw-repeat"
required>
<hr>
<p>Already have an account? <a href="#">Sign in</a>.</p>

<button type="submit" class="registerbtn">REGISTER</button>
</div>
</form>
</div>
<div id="faq">
<div>
<span class="title">PAYMENT</span><br>
<span class="heading">How will the payment go?</span>
<p>Web developers are professionals who build attractive and functional
trustworthy, relevant and client or consumer-centric.</p>
</div>
<div>
<span class="title">INFORMATION</span><br>
<span class="heading">What is included in the service?</span>
</div>
<div>
<span class="title">WARRANTY</span><br>
<span class="heading">What guarantees are there?</span>
</div>
</div>
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
function slowScroll(id) {
$('html, body').animate({
scrollTop: $(id).offset().top
}, 500);
}
$(document).on("scroll", function () {
if ($(window).scrollTop() === 0)
$("header").removeClass("fixed");
else
$("header").attr("class", "fixed");
});
</script>
</body>
</html>
Concluzie:

Lab1 P - Web.

Încărcat de

Informații document

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Lab1 P - Web.

Încărcat de

Drepturi de autor:

Formate disponibile

Universitatea Tehnica a Moldovei

Facultatea Calculatoare, Informatica si Microelectronica

Tema:Crearea web-paginii cu ajutorul CSS ,HTML si Bootstrap

A efectuat: st. gr. TI-173. Florin Rosca

A verificat: Asistent universitar. Rusu Cristian

Sarcina lucrării: Implimentarea cunoștințelor obținute pentru crearea unei web-

Informații generale HTML

 O declaratie CSS este in felul urmator:

Putem combina selectori, folosind:

<label for="email"><b>Email</b></label><br />

<label for="psw"><b>Password</b></label><br />

<label for="psw-repeat"><b>Repeat Password</b></label><br />

<p>Already have an account? <a href="#">Sign in</a>.</p>

S-ar putea să vă placă și