Crearea Paginilor WEB: HTML CSS

Crearea paginilor WEB
HTML CSS JAVASCRIPT

HTML (unde îl vizualizăm?)
BROWSER
HTML
HTML - HyperText Markup Language este un limbaj de marcare utilizat pentru
crearea paginilor web ce pot fi afișate într-un browser.
Scopul HTML este prezentarea informațiilor.
paragrafe tabele ș.a.m.d.

CSS (Cascading Style Sheets)
CSS este un limbaj de stilizare al elementelor HTML.
HTML
(text)
CSS
(culori + 3d
efect)
JavaScript
JavaScript este un limbaj de programare și este folosit în general în
documente HTML pentru introducerea unor funcționalități în paginile
web.
Despre ce vorbim astăzi ?
HTML
Etichetă deschidere
Limbaj de marcare
Etichetă închidere
Structura HTML
Declarare HTML 5
Deschidere rădăcină
site
Informația META (SEO)
ș.a.
Titlul Paginii
Închidere META (SEO) ș.a.
Toate componentele
paginii
Text
mare
Paragraf
Închidere etichetă cu inf.

Închidere rădăcină
site
HTML
Etichetele (tag-urile) de bază:
<html> </html> - Eticheta de bază a unei pagini HTML
<head> </head> - Eticheta ce conține informațiile meta(seo),

titlul paginii și alte informații
<title> </title> - Eticheta ce conține titlul paginii, se

pune între eticheta <head> </head>
<body> </body> - Eticheta ce conține toate textele,

imaginile, tabelele ș.a.
<p> </p> - Eticheta ce conține text (paragraf)
<h1> </h1> - Eticheta care face textul mai mare (h1, h2, h3,
h4, h5, h6)
HTML
EXERCIȚIU
Porniți Visual Studio Code de pe Desktop

Modificați codul ca:
Declarare HTML 5 Numele | Prenumele
vostru
Deschidere rădăcină site
Informația META (SEO) ș.a.
Titlul Paginii
Închidere META (SEO) ș.a.
Toate componentele
paginii
Text mare
Paragraf
Data | Anul nașterii
Închidere etichetă cu inf.

Închidere rădăcină
site
HTML
Ai finisat?
Salvează!
Pornește fișierul salvat

Numele |
Prenumele
Data | Anul nașterii
HTML
Etichetele (tag-urile) secundare:
<b> Text </b> <p> <b> Text </b> </p> - Text bold
<i> Text </i> <p> <i> Text </i> </p> - Text italic
<u> Text </u> <p> <u> Text </u> </p> - Text subliniat
<center> text </center> <center> <p> Text </p> </center> - Text la mijloc
HTML
<ul> <li> </li> </ul> - 1 etichetă <ul> sau <ol>(inițiere listă)
2 etichetă <li> (punctul la fiecare element)
<ul>
<li> Cristina </li>
<li> Oxana </li> • Cristina
<li> Elena </li> • Oxana
</ul> • Elena
HTML
<div> </div> - divizare blocurilor

HTML (div)
DIV - 1
DIV - 2 DIV - 3
DIV - 4
Această aranjare se realizează cu ajutorul la CSS!

HTML
<img src="nume.jpg"> - Adaugă imagine
<a href="site">Jocul preferat</a> - Link spre un site

HTML
<button> Text </button> - Afișează buton pe pagina WEB
<audio controls><source></source></audio> - Afișează muzică (player)
<source src="horse.mp3" type="audio/mpeg"> - Adresa către muzică
<video controls><source></source></video> - Afișează muzică (player)
<source src="horse.mp4" type="video/mp4"> - Adresa către muzică
!ATENȚIE (fișierele trebuie salvate în aceeași mapa cu index.html)

Tabele HTML
Inițiere TABEL
Declarare rând 1
Prima celulă BOLD
A doua celulă BOLD
Închidere rând 1
Declarare rând 2 Pentru asta în <HEAD>
Prima celulă mai jos de </TITLE>
A doua celulă <style>

Închidere rând 2 table, th, td {
border: 1px solid black;
Încheiere tabel }
</style>
HTML
EXERCIȚIU după imagine
CSS
IDENTIFICATORI
Sunt 2 tipuri de identificatori
care pot fi utilizați de CSS.
<style>
<p id="numeID"> Text </p> #numeID {
ID-ul este o adresă către acest paragraf color: blue;
}
.numeClasa {
<p class="numeCLASA"> Text </p> color: red;
Clasa este o adresă către acest paragraf }
</style>
CSS
IDENTIFICATORI
Deți atât #id cât și .class se pot folosi pentru
a da stil unui element html.
În practică
.class #id
CSS
Proprietăți CSS pentru text:
color: red; - Schimbă culoarea textului (în cazul dat roșu)
text-align: center; - Aranjează textul proporțional ecranului.

Poate fi (:left; :right; :center; :justify;)
font-family: "Courier New"; - Schimbă fontul textului
font-size: 40px; - Schimbă mărimea textului

CSS
Proprietăți CSS pentru dimensionare:
width: 100%; - Lățimea tag-ului față de ecran (poate fi în
"%" | "px"
height: 100px; - Înălțimea tag-ului față de ecran (poate fi în

"%" | "px"
<style> <style>
.marime { .marime {
width: 500px; width: 200px;
height: 600px; height: 300px;
} }
</style> </style>
CSS
Proprietăți CSS pentru background:
background-color: #d496ff; - Schimbă culoarea la background

Poate fi (#d496ff | rgb(114, 90, 82) | green)
background-image: url("link"); - Schimbă imaginea la background
<DIV> cu .class
HTML (div)
DIV - 1
DIV - 2 DIV - 3
DIV - 4
Această aranjare se realizează cu ajutorul la CSS!

HTML
EXERCIȚIU după instrucțiuni
1. Creați o mapă în mapa voastră cu denumirea web2
2. Creați un nou document în Visual Studio Code
3. Salvați documentul creat în mapa web2 (de mai sus) în formatul .html
4. Scrieți structura HTML
5. Creăm o divizare cu 4 link-uri (în loc de link scrieți "#link")
6. Adăugați o clasă cu denumirea "topnav"
7. Deschidem tag-ul <style> (acolo unde trebuie)
CSS
Proprietăți CSS pentru meniu:
overflow: hidden; - Ascunde bara de scroll (obligatorie p/u meniu)

text-decoration: none; - Șterge decorațiile textului (puncte, linii)
a :hover
link tag .topnav a:hover { Când dai cu mousul deasupra
background-color: #ddd;
color: black;
}
padding
CSS
Proprietăți CSS pentru meniu:
padding
padding: 15px 10px 15px 10px;
top padding este 15px
right padding este 10px În cazul nostru îl utilizăm la
bottom padding este 15px tag-ul <a href="">
left padding este 10px
HTML
Continuăm EXERCIȚIU după instrucțiuni
1. Creați o mapă în mapa voastră cu denumirea web2
2. Creați un nou document în Visual Studio Code
3. Salvați documentul creat în mapa web2 (de mai sus) în formatul .html
4. Scrieți structura HTML
5. Creăm o divizare cu 4 link-uri (în loc de link scrieți "#link")
6. Adăugați o clasă cu denumirea "topnav"
7. Deschidem tag-ul <style> (acolo unde trebuie)
HTML
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
JavaScript
HTML CSS JAVASCRIPT
JavaScript
JavaScript este un limbaj de programare și este folosit în general în
documente HTML pentru introducerea unor funcționalități în paginile
web.
Structura HTML cu includere JavaScript
Declarăm că avem
diacritice
Deschidem
JavaScript
Scriem un alert
Închidem
JavaScript
JavaScript
Metoda JavaScript și proprietatea acesteia:
METODĂ PROPRIETATE
getElementById("demo") innerHTML
Cum scriem corect?
document.getElementById("demo").innerHTML = "Paragraful schimbat!";
JavaScript
EXEMPLU
JavaScript
1. Creați 2 butoane
2. Adăugați un paragraf cu id-ul "vibemd"
3. În paragraf scrieți textul Academie IT – Vibe.MD
4. Creați 1 funcție astfel încât tastând pe primul buton textul din
paragraf să se modifice în Salut!
5. Creați a 2-a funcție astfel încât tastând pe al 2-lea buton textul din
paragraf să se modifice în Ce faci?
6. Verificați ce s-a primit

JavaScript
Pe lângă faptul că JAVASCRIPT poate schimba atributele textuale, ea
poate schimba și imagini între ele.
METODĂ PROPRIETATE
getElementById("demo") src
Cum scriem corect?
document.getElementById("demo").src = "imagine.png";
JavaScript
JavaScript
Declararea variabilelor:
VARIABILĂ de tip număr VARIABILĂ de tip text

var a = 5; var b = "text";
var x = "25";
var y = 18;
JavaScript

Crearea Paginilor WEB: HTML CSS

Î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

Crearea Paginilor WEB: HTML CSS

Încărcat de

Drepturi de autor:

Formate disponibile

Crearea paginilor WEB

HTML CSS JAVASCRIPT

Scopul HTML este prezentarea informațiilor.

paragrafe tabele ș.a.m.d.

CSS este un limbaj de stilizare al elementelor HTML.

Închidere etichetă cu inf.

<head> </head> - Eticheta ce conține informațiile meta(seo),

<title> </title> - Eticheta ce conține titlul paginii, se

<body> </body> - Eticheta ce conține toate textele,

<p> </p> - Eticheta ce conține text (paragraf)

Porniți Visual Studio Code de pe Desktop

Închidere etichetă cu inf.

Pornește fișierul salvat

<div> </div> - divizare blocurilor

Această aranjare se realizează cu ajutorul la CSS!

<a href="site">Jocul preferat</a> - Link spre un site

<audio controls><source></source></audio> - Afișează muzică (player)

<source src="horse.mp3" type="audio/mpeg"> - Adresa către muzică

<video controls><source></source></video> - Afișează muzică (player)

<source src="horse.mp4" type="video/mp4"> - Adresa către muzică

!ATENȚIE (fișierele trebuie salvate în aceeași mapa cu index.html)

A doua celulă <style>

text-align: center; - Aranjează textul proporțional ecranului.

font-family: "Courier New"; - Schimbă fontul textului

font-size: 40px; - Schimbă mărimea textului

height: 100px; - Înălțimea tag-ului față de ecran (poate fi în

background-color: #d496ff; - Schimbă culoarea la background

background-image: url("link"); - Schimbă imaginea la background

Această aranjare se realizează cu ajutorul la CSS!

overflow: hidden; - Ascunde bara de scroll (obligatorie p/u meniu)

Cum scriem corect?

6. Verificați ce s-a primit

Cum scriem corect?

VARIABILĂ de tip număr VARIABILĂ de tip text

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