Structura Unei Pagini Web (Salvat Automat)

<!
DOCTYPE html>
(declaratie pentru browser ca acest fisier e de tipul HTML 5)
<html lang="ro-RO">
(<html… este tagul de baza al HTML, incapsuleaza tot ce contine pe
pagina asta
-lang – ro = limba
- RO = tara
<head>
(o bucata din HTML care incapsuleaza METAINFORMATIA (informatie
despre informatie))
<title>Viorel Axentiev - Link-uri utile</title>
(textul din google , sa nu fie mai mare de 80 de caractere, este
numele TAB-ului)
<meta charset="utf-8" />

(SETUL DE CARATERE - are foarte multe caratere si toate limbile
lumii 16.000 caractere
Tagul asta se autoinchide /> , nu este nevoie si de <meta…)
<meta name="robots" content="index, follow" />

(cand goole intra pe HTML-ul scris de noi, index si follow ii
permit sa scaneze toata pagina de sus pana jos, s-o citeasca sa intre
pe fiecare link in parte si sa le citesca pe toate si sa le acceseze,
Index = indexarea paginii curente adica ingerarea continutului din
HTML in google, atunci cand cineva cauta ceva din pagina asta, pagina
asta sa rancheze,
Follow = permisiunea tu ca developer o dai lui google sa urmeze
linkurile pe care tu le pui in pagina curenta si sa continue sa le
ingereze si pe alea)
<meta name="viewport" content="width=device-width,initial-scale=1.0" />

(width=device-width = in momentul in care cineva intra de pe
telefon pe pagina pe care o construim latimea ecranului telefonului va defini
latimea saitu-lui, un fel de acceptare a faptului ca un telefon de 320 de
pixeli latime va avea la dispozitie 320 de pixeli din site sa-i afiseze
Initial-scale = se joaca cu zoom-ul, pe langa Faptul ca tu
definesti un nr de pixeli in width poti sa zici daca sa faca scaling browserul
adica sa dea zoom in sau zoom aut - ce e mai mic de 1.0 e zoom out ce e
mai mare de 1.0 e zoom in
<meta property="og:title" content="The Rock" />
(este echivalentul lui <title>Viorel Axentiev - Link-uri

utile</title>
Trebuie sa aibă acelasi titlu cu tagul <title…

<meta property="og:site_name" content="Viorel Axentiev" />
<meta property="og:type" content="website" />
(in momentul in care dai share la pagina asta facebook va

sti ca pagina asta e un website
<meta property="og:locale" content="ro_RO" />
(definim limba
Facebook accepta la ="ro_RO" liniuta jos (underscrol)
<meta property="og:url" content="https://

https://www.viorelaxentiev.ro/linkuri/" />
(este URL-ul paginii noastre
<meta property="og:image" content="og-image.jpg" />
(face referire la o imagine
Definesti imaginea de share
<meta property="og:image:width" content="300" />
(marimea facebook standard 1200
Definesti latimea pentru imagine
<meta property="og:image:height" content="300" />
(marimea facebook standard 600
Definesti inaltimea pentru imagine
<link rel="stylesheet" href="style.css" />

(am linkat css
rel = relationship de tipul stylesheet" >
din momentul in care am pus codul asta, ori ce am
scrie in style css se va aplica
</head>
<body>
<div class="Container">
(Container poate fi main dar din ratiuni de semantica e mai bine

sa fie div
In acest container vom reproduce structura din pagina care vrem sa

o facem in exempul asta
<header>
( o bucata de continut principal..
<h1 class="TitlulPaginii">
<strong>Viorel Axentiev</strong>
</h1>
<p class="DescrierePrincipala">Toate link-urile mele,
Profilurile de social media plus grupurile pe care sunt
activ si unde raspund la intrebari.</p>
(este un paragraf sub titlul paginii ….
</header>
<main>
(aici punem lista de lucru in cazul exemplului nostru
Lista ordonata, neordonata sau de definitii

<ul class="Listalinkuri">
(In cazul nostru lista neordonata ul:
<li class="ListaItem">
(in acest ul avem o ListaItem
<a href="https://code.visualstudio.com/"
class="ListaLink" title="TITLU" target="_blank" rel="noreferrer noopener">
>
(un titlu ce ave
(target="_blank" rel="noreferrer noopener">= sa
evitam probleme de securitate care se pot intampla cand iti fura identitatea
<h2 class="ListaTitlu">Editor / IDE - VSCode</h2>

(aici este titlu
<p >
class="ListaText">https://code.visualstudio.com/</p
(
</a>
(aici este link-ul
</main>
</div>
</body>
</html>
(<html… este tagul de baza al HTML, incapsuleaza tot ce contine pe
pagina asta
html { background: black url(background.jpg.jpg) center center no-repeat;

background-size cover; color: white; }
body { display: block; place-items: center; margin: 0; font-family: Inter,

Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5em; }
@media (min-width: 500 px) { body { display: grid; } }
.Container { background: rgba(79, 109, 245, 0.8); padding: 1rem; font-size:

clamp(1rem, 2vw, 2rem); line-height: 1.5em; }
@media (min-width: 300 px) { .Container { margin: 2vh auto; padding: 2rem; }
border-radius: 2rem; }
header { }
.Avatar { display: block; float: left; width: 112px; height: auto;
margin: 0 1em 1em 0; border-radius: 50%; }
@media (min-width: 380 px) { .Avatar { float: left; } }
.TitlulPaginii { display: block; margin: 0; font-size: clamp(2rem,
6vw, 4rem); line-height: 1em; }
main { }
.ListaLinkuri { display: block; margin: 0; padding: 0; border-top: 1px
solid white;}
.ListaItem { display: block; margin: 0; padding: 0; border-bottom:
1x solid white; }
.ListaLink { display: block; padding: 0.5em; color: white;
text-decoration: none; }
.ListaLink:hover { background: white; color: black; }
.ListaTitlu, .ListaText { display: block; margin: 0;
padding: 0; font-size: 1em; line-height: 1.5em; }
.ListaText { white-space: nowrap; overflow: hidden; text-
overflow: ellipsis; }
(white-space: nowrap = nu lasa sa iasa de pe un singur rand textul
overflow: hidden;= taie textul cand se termina containerul
text-overflow: ellipsis; = daca exista overflow pune tri puncte la

final
@media (min-width: 500 px) { body { display: grid; } }

= declaratie css f utila
= prim media putem scrie if-uri
= executa tot ce este in interiorul lui adica { body { display:
grid; } doar daca codul este valid adica asta … (min-width: 500 px)
(min-width: 500 px) = inseamna ca latimea intregului ecran, e
vorba de view port, view port are min 500 px, de la 500 px in sus
inclusiv, bady va fi display grid
@media (min-width: 380 px) { .Avatar { float: left; } }

= de la 380 px in sus Avatarul va fi float: left
<p>See more <a href="https://freecatphotoapp.com" targe
t="_blank">cat photos</a> in our gallery.</p>
Add a target attribute with the value _blank to the anchor (a) element's

opening tag, so that the link opens in a new tab.
Protocolul Open Graph
- https://ogp.me/
- Niste taguri META care definesc niste elemente din pagina care folosesc
diverse siteuri cum sunt facebook , pintrest …..sa-si traga niste
informatii aditionale despre pagina care o construiesti de la un titlu
aditional special pt social media, pana la o descriere speciala pt
social media pana la o imagine sociala despre social media care sa fie
de o anumita dimensiune si care sa apara frumos in momentul in care ii
dai share……:
- <meta property="og:title" content="The Rock" />
- <meta property="og:type" content="video.movie" />
- <meta property="og:url"
content="https://www.imdb.com/title/tt0117500/" />
- <meta property="og:image"
content="https://ia.media-imdb.com/images/rock.jpg" />
Social Media Image Size
- Locul de unde vezi marimile standard pentru social media

Structura Unei Pagini Web (Salvat Automat)

Î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

Structura Unei Pagini Web (Salvat Automat)

Încărcat de

Drepturi de autor:

Formate disponibile

<!

<meta charset="utf-8" />

<meta name="robots" content="index, follow" />

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

<meta property="og:title" content="The Rock" />

(este echivalentul lui <title>Viorel Axentiev - Link-uri

Trebuie sa aibă acelasi titlu cu tagul <title…

<meta property="og:type" content="website" />

(in momentul in care dai share la pagina asta facebook va

<meta property="og:locale" content="ro_RO" />

Facebook accepta la ="ro_RO" liniuta jos (underscrol)

<meta property="og:url" content="https://

(este URL-ul paginii noastre

<meta property="og:image" content="og-image.jpg" />

(face referire la o imagine

Definesti imaginea de share

<meta property="og:image:width" content="300" />

(marimea facebook standard 1200

Definesti latimea pentru imagine

<meta property="og:image:height" content="300" />

(marimea facebook standard 600

Definesti inaltimea pentru imagine

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

(Container poate fi main dar din ratiuni de semantica e mai bine

In acest container vom reproduce structura din pagina care vrem sa

<h2 class="ListaTitlu">Editor / IDE - VSCode</h2>

html { background: black url(background.jpg.jpg) center center no-repeat;

body { display: block; place-items: center; margin: 0; font-family: Inter,

.Container { background: rgba(79, 109, 245, 0.8); padding: 1rem; font-size:

(white-space: nowrap = nu lasa sa iasa de pe un singur rand textul

overflow: hidden;= taie textul cand se termina containerul

text-overflow: ellipsis; = daca exista overflow pune tri puncte la

@media (min-width: 500 px) { body { display: grid; } }

@media (min-width: 380 px) { .Avatar { float: left; } }

Add a target attribute with the value _blank to the anchor (a) element's

Social Media Image Size

- Locul de unde vezi marimile standard pentru social media

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