Curs Web Design - Modul 1 - Nivel BASIC

Capitolul isi propune definirea si intelegerea unor notiuni si concepte fundamentale menite sa se constituie intr-un vocabular comun de pornire. Se vor explica notiuni precum:

• Internet, Intranet, Servicii de comunicatii, Serviciul WWW, Protocoale, Pachete de date, TCP/IP, Adrese IP, Hosturi, Hipertext, HTML, Istoricul si versiunile limbajului HTML, HTTP, HTTPS, Pagina web, Pagina de start, Site web, Browser web, URL, URI, URN, Server, Server web, httpd, DNS, Motoare de cautare, SEO, Avantajele paginilor web, Scenariul de accesare a paginilor web utilizand arhitectura client-server.

Capitolul isi propune insusirea de catre cursanti a elementelor de baza necesare realizarii primelor pagini web. Se vor discuta si exersa practic notiuni precum:

• Tipuri de editoare web (dedicate scrierii codului versus WYSIWYG), Principalele browsere, Prima pagina web, Structura standard a unei pagini web, Clasificarea etichetelor, Etichetele html, head si body, Reguli de editare si formatare HTML, Spatierea si regula spatiilor albe, Titlul paginii web si eticheta title, Intreruperea randului si eticheta br, Text preformatat si eticheta pre, Rand neintrerupt si eticheta nobr, Blocurile de comentarii in HTML, Tipuri de documente HTML si importanta etichetei DOCTYPE, Corectitudinea si validarea codului paginilor web folosind serviciile de validare, Etichetele depreciate si etichetele invechite, Implicatiile elementelor discutate pentru browsere, aplicatii, motoare de cautare si SEO.

Capitolul isi propune discutarea si exersarea practica a urmatoarelor notiuni referitoare la formatarile fizice ale textului:

• Parametrii prestabiliti ai browserului, Formatarile fizice de text pentru scrierea teletype (eticheta tt), Scrierea cursiv (eticheta i), Scrierea ingrosata (etichetele b si strong), Scrierea subliniata (eticheta u), Taierea textului (etichetele s si strike), Marirea si micsorarea textului (etichetele big si small), Scrierea cu indice si exponent (etichetele sub si sup), Bune practici pentru lizibilitatea textului, Implicatiile elementelor discutate pentru browsere, aplicatii, motoare de cautare si SEO.

Capitolul isi propune discutarea in detaliu si exersarea practica a urmatoarelor notiuni referitoare la formatarile logice si structurale ale textului:

• Atributele etichetelor HTML, Titlurile de text (etichetele de la h1 la h6), Paragrafele (eticheta p), Diviziunile de text (eticheta div), Blocurile citat (eticheta blockquote), Citatele in linie (eticheta q), Elementul span, Blocurile preformatate (etichetele pre, xmp si plaintext), Atributul title, Liniile orizontale (eticheta hr), Centrarea blocurilor (eticheta center), Alte elemente de logica semantica (etichetele em, dfn, code, samp, kbd, var, cite, abbr, acronym), Implicatiile elementelor discutate pentru browsere, aplicatii, motoare de cautare si SEO.

Capitolul isi propune discutarea in detaliu si exersarea practica a urmatoarelor notiuni referitoare la formatarea stilurilor html pentru fonturi:

• Culori sigure pentru web, Specificarea culorilor dupa nume si dupa codificarea RGB in baza hexazecimala, Instrumente ajutatoare pentru identificarea culorilor, Tipul de litera (etichetele font si basefont), Atributele elementului body pentru margini, culori de background si text in pagina, Caractere speciale si codificarea caracterelor in HTML, Implicatiile elementelor discutate pentru browsere, aplicatii, motoare de cautare si SEO.

Capitolul isi propune discutarea in detaliu si exersarea practica a urmatoarelor notiuni referitoare la liste:

• Tipurile de liste, Listele neordonate (etichetele ul si li), Listele ordonate (etichetele ul si li), Liste goale, Liste imbricate, Liste de definitii (etichetele dl, dt si dd), Compactarea listelor, Liste de directoare (eticheta dir), Liste de meniuri (eticheta menu), Implicatiile elementelor discutate pentru browsere, aplicatii, motoare de cautare si SEO.

Capitolul isi propune discutarea in detaliu si exersarea practica a urmatoarelor notiuni referitoare la tabele:

• Importanta tabelelor in machetarea paginilor, Realizarea tabelelor (etichetele table, tr si td), Capete de tabel (eticheta th), Borduri de tabel (atributul border), Bordura exterioara a tabelului, Bordurile interioare ale tabelului, Culoarea bordurilor, Culori de background pentru tabel, Imagini de background, Randuri si celule, Celule goale si implicatiile lor, Alinierea tabelelor, Spatiul alb exterior tabelului, Dimensionarea tabelelor, Dimensionarea celulelor, Distanta dintre celule, Distanta dintre continutul celulei si bordura acesteia, Alinierea continutului in celule, Text neintrerupt in celule, Titlul tabelului (eticheta caption), Unirea celulelor pe randuri si coloane, Formatarea rapida a tabelului (etichetele thead, tbody si tfoot), Stiluri pentru coloane (eticheta colgroup), Implicatiile elementelor discutate pentru browsere, aplicatii, motoare de cautare si SEO, Analiza unui site formatat cu tabele.

Capitolul isi propune discutarea in detaliu si exersarea practica a urmatoarelor notiuni referitoare la utilizarea imaginilor in paginile web:

• Formatele de imagini utilizate pe web si caracteristicile acestora, Pluggin-uri si elemente multimedia, Copyrightul in utilizarea imaginilor, Aplicatii software pentru editarea imaginilor, Inserarea in pagina a unei imagini (eticheta img), Imagini accesate prin adresare URL absoluta, Imagini accesate prin adresare URL relativa, Bordura imaginilor, Dimensionarea imaginilor, Alinierea pe verticala a continutului in raport cu imaginea, Alinierea pe orizontala a imaginilor si corectarea comportamentului flotant, Text alternativ pentru imagini, Imagini de rezolutie mica, Imagini de fundal, Atasarea iconitelor semn de carte, Inserarea iconitelor favorite (favicon), Liste particularizate utilizand imagini, Inserarea in pagina a filmuletelor youtube sau video, Inserarea in pagina a hartilor GMaps, Multimedia si fisierele de aplicatii, Tipuri MIME, Inglobarea fisierelor multimedia (etichetele embed si object), Inglobarea miniaplicatiilor (etichetele applet si param), Implicatiile elementelor discutate pentru browsere, aplicatii, motoare de cautare si SEO.

Capitolul isi propune discutarea in detaliu si exersarea practica a urmatoarelor notiuni referitoare la utilizarea metadatelor in documentele web:

• Ce sunt metadatele, Inserarea metadatelor in documentul web (eticheta meta), Atributele etichetei meta, Descrierea paginii web, Introducerea cuvintelor cheie, Specificarea autorului paginii, Specificarea informatiilor privind copyrightul, Data creerii si actualizarii documentului, Specificarea persoanei de contact, Detaliile despre continutul fisierului, Specificarea limbii continutului, Directiva pragma, Reimprospatarea automata a paginii, Directionarea automata catre o pagina, Implicatiile elementelor discutate pentru browsere, aplicatii, motoare de cautare si SEO.

Capitolul isi propune discutarea in detaliu si exersarea practica a urmatoarelor notiuni referitoare la utilizarea legaturilor in paginile web:

• Structurarea site-urilor, Crearea unei legaturi (eticheta a), Legaturi catre pagini in acelasi director, Legatura prin adresare URL relativa, Legatura catre o adresa URL absoluta, Legatura dintr-o imagine, Legaturi pentru salt in cadrul aceleiasi pagini, Legatura catre o zona dintr-o alta pagina, Ferestre destinatie, Culori pentru legaturi, Legatura catre o adresa de e-mail, Legatura catre un fisier oarecare, Atributul title, Implicatiile elementelor discutate pentru browsere, aplicatii, motoare de cautare si SEO.

Capitolul isi propune discutarea in detaliu si exersarea practica a urmatoarelor notiuni referitoare la utilizarea hartilor de imagini:

• Tipuri de zone in cadrul hartilor de imagini, Crearea hartilor de imagini (etichetele map si area).

Capitolul isi propune discutarea in detaliu si exersarea practica a urmatoarelor notiuni referitoare la utilizarea formularelor:

• Inserarea formularelor in pagina web (eticheta form), Metode de transmitere a datelor catre server, Elemente de formular, Camp de text (eticheta input), Camp pentru parola, Camp pentru selectarea fisierelor, Butoane radio, Casute de validare, Liste de selectie / optiuni (etichetele select si option), Camp de editare multilinie, Butoane submit, Butoane reset, Butoane universale (eticheta button), Utilizarea imaginilor la realizarea butoanelor, Etichetele de grupare a elementelor (eticheta label), Eticheta isindex, Introducere in integrarea cu limbaje de scripting pentru client (javascript), Introducere in integrarea cu limbajele de scripting pentru server (php).

Capitolul isi propune discutarea in detaliu si exersarea practica a urmatoarelor notiuni referitoare la folosirea cadrelor:

• Organizarea documentului in cadre (eticheta frameset), Definirea cadrelor (eticheta frame), Comportamentul browserelor vechi (eticheta noframe), Cadre in linie (eticheta iframe), Cadre orizontale, Cadre verticale, Imbricarea cadrelor.

Capitolul isi propune discutarea in detaliu si exersarea practica a urmatoarelor notiuni referitoare la folosirea limbajului XHTML:

• Legatura dintre XHTML, HTML si XML, Declaratia XML, Declaratia DOCTYPE in cazul XHTML, Specificarea tipului de continut in documentele XHTML, Structura standard a documentului XHTML, Regulile XHTML de scriere a etichetelor, Regulile XHTML de scriere a atributelor, Reguli pentru atributele minimizate, Alte reguli XHTML relativ la CSS si JavaScript.

Convertirea unei pagini HTML la cod XHTML folosind caracteristicile automatizate ale editoarelor de cod specializate pentru web si validarea corectitudinii codului XHTML utilizand un serviciu Web de validare a codului.

Capitolul isi propune discutarea in detaliu si exersarea practica a urmatoarelor notiuni de baza referitoare la aplicarea Foilor de Stil in Cascada:

• Declaratiile CSS si blocurile de declaratii, Selectorii de tip, Atributele universale pentru elementele HTML, Stilurile CSS aplicate in linie, Foile de stil definite in interiorul documentului, Foile de stil definite in fisier extern, Cascadarea stilurilor, Selectia universala, Selectia generala, Selectia cu clase, Selectia cu identificatori, Selectia descendenta, Selectorul copil, Selectorul frate adiacent, Selectia dupa atribute, Pseudo-clasa first-child, Pseudo-clasele legaturilor, Selectia primei linii, Selectia primului caracter, Gruparea selectorilor, Comentarea codului in CSS, Specificarea valorilor in CSS, Specificarea culorilor in CSS, Pseudo-clasele si pseudo-elementele CSS, Calcularea specificitatii in CSS.

Capitolul isi propune discutarea in detaliu si exersarea practica a proprietatilor aplicabile la formatarea fonturilor in CSS:

• Familiile de fonturi in CSS, Stilurile fonturilor, Variantele fonturilor, Grosimea fonturilor, Alungirea fonturilor, Dimensionarea fonturilor, Aspectul fonturilor, Proprietatea generala font, Utilizarea fonturilor web, Fonturi responsive, Inserarea de icon-uri.

Capitolul isi propune discutarea in detaliu si exersarea practica a proprietatilor aplicabile la formatarea blocurilor de text in CSS:

• Culoarea textului, Indentarea textului, Alinierea textului, Decoratiuni pentru text, Umbre pentru text, Spatierea literelor, Spatierea cuvintelor, Utilizarea majusculelor, Distantierea liniilor de text, Formatarea spatiilor albe, Directia textului, Alinierea verticala, Bidirectionalitate, Depasirea textului, Efecte asupra textului.

Capitolul isi propune discutarea in detaliu si exersarea practica a proprietatilor aplicabile la formatarea casetelor in CSS:

• Conceptul de caseta in CSS, Dimensionarea casetelor, Dimensionari maxime si minime, Paddingul casetei, Marginea casetei, Bordura casetei, Rotunjiri, Imagini pentru borduri, Cursoare, Comportamentul la depasirea casetei, Decuparea casetelor, Vizibilitatea casetei, Culoarea de fundal a casetei, Imagine de fundal pentru caseta, Imagini multiple de fundal, Pozitionarea fundalului, Originea fundalului, Multiplicarea fundalului in cadrul casetei, Dimensionarea imaginii de fundal a casetei, Comportamentul fundalului atasat casetei, Decuparea fundalului casetei, Proprietatea generala de fundal, Centrarea automata a elementelor in caseta, Linia exterioara casetei, dimensionarea imaginilor, Redimensionarea casetelor.

Capitolul isi propune discutarea in detaliu si exersarea practica a proprietatilor aplicabile la pozitionarea casetelor in CSS:

• Modelul caseta, Afisarea in linie, Afisarea bloc, Casete flotante, Stiva de casete flotante, Proprietatea clear, Pozitionarea relatica a elementelor, Pozitionarea absoluta a elementelor, Pozitionarea fixa a elementelor, Pozitionare lipicioasa, Stiva de straturi, Pozitionarea marginilor casetei.

Capitolul isi propune discutarea in detaliu si exersarea practica a proprietatilor aplicabile la formatarea tabelelor in CSS:

• Tabele HTML obisnuite, Tabele CSS obisnuite, Tabele CSS avansate, Proprietatile CSS pentru coloane, Macheta CSS a tabelului, Alinierea pe verticala, Alinierea pe orizontala, Borduri pentru celule, Spatierea bordurilor, Celule goale, Restrangerea bordurilor, Tabele responsive.

Capitolul isi propune discutarea in detaliu si exersarea practica a notiunilor referitoare la generarea automata a continutului si la proprietatile CSS aplicabile in cazul listelor:

• Pseudo-elemente si continut generat, Proprietatea content, Definirea ghilimelelor cu CSS, Elemente articol de lista, Definirea tipului de simbol pentru lista, Definirea imaginii indicatoare pentru lista, Definirea pozitiei pentru imaginea indicatoare a listei, Stilul general pentru lista, Counteri pentru liste.

Capitolul isi propune discutarea in detaliu si exersarea practica a notiunilor referitoare la diverse proprietatile avansate din CSS si alte aplicatii utile cu CSS:

• CSS Layout, Griduri CSS, Variante de alinieri cu CSS, Opacitatea / transparenta, Gradienti, Umbre pentru casete, Metode de transformare 2D, Metode de transformare 3D, Tranzitii cu CSS, Animatii cu CSS, Casete cu indicatii, Stiluri pentru imagini, Butoane, Paginari, Coloane multiple, Utilizarea functiei variabila, Casete flexibile, Reguli diferite pentru medii diferite, Bare de navigare, Meniuri dropdown, Galerii de imagini, Formatarea formularelor.

Capitolul isi propune discutarea in detaliu si exersarea practica a noilor elemente semantice si de structura introduse de HTML5:

• Definirea continutului principal al documentului, Definirea articolelor in cadrul documentului, Definirea sectiunilor in cadrul documentelor, Definirea antetelor de pagina, Definirea subsolurilor de pagina, Definirea zonelor cu link-uri de navigare, Definirea de detalii suplimentare, Definirea titlurilor pentru zonele de detalii, Definirea de continut separat, Izolarea textului directionat diferit, Definirea casetelor si a ferestrelor de dialog, Specificarea figurilor, Titlul figurilor, Marcarea textului, Bare de masurare, Bare de progres, Definirea datei si a timpului, Definirea intreruperilor de linie, Implicatiile elementelor discutate pentru browsere, aplicatii, motoare de cautare si SEO.

Capitolul isi propune discutarea in detaliu si exersarea practica a noilor elemente de formular introduse de HTML5:

• Lista predefinita de optiuni, Definirea rezultatelor calculate automat, Camp pentru culoare, Camp pentru data, Camp pentru data si timp, Camp pentru data si timp local, Camp pentru email, Camp pentru luna, Camp numeric, Camp domeniu de valori, Camp pentru cautare, Camp pentru telefon, Camp pentru timp, Camp pentru URL, Camp pentru saptamana.

Capitolul isi propune discutarea in detaliu si exersarea practica a noilor elemente introduse de HTML5 pentru grafica si multimedia:

• Desenarea graficii prin scripting, Desenarea graficii vectoriale scalabile, Inserarea continutului audio, Inserarea continutului video, Definirea pistelor de text pentru elementele media, Resurse multimple pentru elemente media, Definirea containere lor pentru aplicatii externe.

Capitolul isi propune discutarea regulilor XHTML aplicabile in cazul HTML5