Lecții html și css, lecția 1

manual hypertext pe HTML

Lecția 1: Crearea unei pagini HTML-

  1. Aflați comenzile de bază utilizate pentru a crea HTML-pagini.
  2. 5 efectua exerciții în text lecție.
  3. Efectuați o sarcină de control.
  4. Treceți lecția profesorul răspunde verbal la întrebările și prezintă toate acțiunile de pe computer.

Ca rezultat al acestei lecții va crea o pagină web pe RGPPU, așa cum se arată în figura de mai jos.

1. Structura HTML-document, definiția culorilor într-un web

În plus față de text simplu HTML fișier conține doar un singur tip de structuri de control, numite etichete (tag-uri).

Tag-uri gestiona browser-ul atunci când se afișează pagina web.

Toate etichetele, pentru a le separa de conținutul paginii, închise în paranteze unghiulare <>.

De obicei, asociat tag-uri. tag-ul final arata la fel ca la început, dar cu o bară oblică (/). tag-uri asociate trebuie să fie imbricate fără intersecții, adică, Și dacă în zona deschisă în tag-ul, acesta trebuie să fie închis înainte de eticheta închidere A.

Structura documentul HTML (a se vedea Listarea 1)

Toate HTML-document semnat între etichetele și . Acest lucru este necesar tag-ul.

între etichetele și Acesta conține antetul documentului.

Porțiunea antet include tag-uri și . care sunt folosite pentru a atribui un nume pentru document. Acest nume atunci când încărcați un document apare în bara de titlu a browser-ului. Titlul trebuie să fie concis, informative și pe o singură linie.

elementul Acestea pot conține, de asemenea, alte tag-uri, care oferă legături între diferitele documente și metoda de a trimite mesaje speciale pentru un anumit browser sau alt program.

Exercitiul 1.

1. Deschideți directorul web din fișierul descărcat, un dosar aflat în dosarul web și biblioteca rgppu. În viitor, toate HTML-fișierele sunt salvate în directorul web!

2. Deschideți Notepad.

3. Tipul (sau copie) textul din Listarea 1.

4. Salvați documentul într-un dosar de web numit fist.html. Când salvați un document în tipul de fișier pentru a instala toate fișierele (fig. 1).

5. Închideți Notepad.

6. Du-te la un folder și executați fișierul fist.html dublu-clic. Browserul web-pagina ar trebui să fie după cum urmează (fig. 2). Când descărcați un document descris în Listarea 1, bara de titlu a browser-ului afiseaza titlul de primul meu pas.

corpul documentului

între etichetele și situat în partea principală a materialului documentului.

Multe etichete ca pereche și nepereche, au atribute care specifică tag-ul de acțiune.

Notă: Tabelul de mai sus nu include toate atributele tag . Atâta timp cât ne limităm la o cunoștință cu doar câteva.

In acest exemplu, modelul de fundal al unui document va fi image.jpg, care este dosarul Fons. În acest caz, documentul HTML stocat în structura de fișiere de pe același nivel ca și directorul Fons.

culori Definirea

Când creați o pagină pe care trebuie să lucreze cu o selecție de diferite culori și combinații ale acestora. Culoarea este determinată pentru text document HTML și diferitele sale fragmente (paragrafe, titluri, note de subsol, etc.). Culoarea este folosit pentru a seta fundalul documentului și forma de hyperlink-uri. Să luăm în considerare modul de a defini culorile în WEB.

La stabilirea culorilor pentru documentul HTML, puteți utiliza fie numele de culoare sau coduri hexazecimale.

Tabelul de mai jos prezintă numele unor culori și codurile lor hex.

Culori Marcarea v Paginile

De exemplu: Următoarele șiruri sunt aceleași, culoarea de fundal document va fi de culoare roșie.


2. Document ZagolovkiHTML

Elemente H1, H2, H3, H4, H5, H6

În continuare Corpul documentului de structurare se realizează în cadrul elementului prin anteturi definite elemente H1, H2, H3, H4, H5, H6, și alte etichete.

Elementele antet sunt asociate, astfel încât trebuie să aibă o etichetă de deschidere.

Exercitiul 2.

  1. Creați document HTML, care introduceți textul din Listarea 2.
  2. Asigurați-vă că ați copiat în folderul bibliotecă director web.
  3. Salvați documentul într-un dosar de web numit elementH.html
  4. Start fișier elementH.html

Fig. 3 prezintă modul în care diferitele niveluri de titluri afișate de browser.

3. Aliniere text

atributul ALIGN specifica locația textului. Valorile posibile ale atributului.

Notă: Identificatorii de caz sensibile în etichetele și atributele nu sunt luate în considerare.

Listarea 3. antete Align

Exercitiul 3.

  1. Crearea unui nou document HTML.
  2. Introduceți textul de listare 3 (pentru fundal se poate utiliza orice imagine sau orice culoare din dosarul bibliotecă / culori).
  3. Salvați documentul într-un dosar de web numit align.html
  4. Start align.html fișier

Documentul dvs. ar trebui să arate ceva de genul asta, așa cum se arată în Fig. 4.

Împărțirea textului în paragrafe

etichetă

Acesta specifică începutul paragrafului și introduce un interval de martor corespunzător pentru a separa acest lucru de la paragraful anterior. punctul tag-ul are un singur atribut ALIGN.

align = „left“ - alinierea paragrafului pe marginea din stânga a textului (implicit).

align = „dreapta“ - alinierea paragrafului este un text aliniat la dreapta.

align = „centru“ - alinierea paragrafului.

align = „justifica“ - alinierea paragrafului lățime.

sfârșiturile de linie Forced

etichetă
Acesta vă permite să migreze restul paragrafului text la linia următoare. Această etichetă nepereche. Spre deosebire de punctul tag-ul nu crește intervalul în text.

schimba fontul

etichetă și Acesta vă permite să modificați intervalul de tip text, dimensiunea fontului și culoarea.

Caracteristica size = „n“ este folosit pentru a specifica dimensiunea absolută între 1 și 7. size = „+ n“ sau -N - crește sau descrește fontul din valoarea curentă.

Caracteristica face = „NAME“ - specifică tipul de font utilizat pentru afișarea fragmentului de text. Puteți specifica mai multe nume de fonturi separate prin virgulă, în care browser-ul caută sistemul local. Utilizat va fi cel al cărui nume este găsit mai întâi.

Caracteristica de culoare = „Numele“ definește culoarea textului.

stilul fontului

etichetă ... - Acesta vă permite să afișați textul cu caractere aldine.

etichetă ... - Acesta vă permite să afișați textul cu caractere cursive.

etichetă ... - display-uri text subliniat.

În acest caz, textul va fi afișat caractere aldine cursive , dar nu exagerat.

Și în acest caz, textul va fi scris cursive aldine subliniate .

Exercițiul 4

  1. Align.html deschide fișierul și salvați-l sub un nume nou text_format.html într-un dosar de web.
  2. Modificați codul din listingul 4 (pentru fundal poate fi orice culoare din dosarul de culori). Pentru a evita tastarea manuală, aveți posibilitatea să copiați textul din fișierul text_fomat.txt dintr-un dosar de web.
  3. Start text_format.html fișier
  4. Rezultatul ar trebui să fie similară cu cea din figura 5.

4. Imagini în document HTML

Inserarea imaginilor

Pagini web acceptă următoarele formate de imagine: jpg, gif, png.

Imaginile folosite pentru introducerea unei etichete . O necesitate pentru această etichetă este atributul SRC (din SOURCE engleză - sursa). Acesta definește calea către fișierul de imagine, imaginea care trebuie să fie afișate pe pagina web.

Pentru a insera este utilizată o comandă de imagine

.

Listarea 5. imagini Introducerea în Web-documente

Exercitiul 5

  1. Crearea unui nou document HTML.
  2. Introduceti textul din listă 5 (pentru fundal se poate utiliza orice imagine sau orice culoare din dosarul de culori).
  3. Salvați documentul într-un dosar de web numit tiger.html
  4. Start tiger.html fișier

Documentul dvs. ar trebui să arate acest lucru, așa cum se arată în Fig. 6.

5. sarcini de control

Sarcina: Crearea paginii web, în ​​conformitate cu fig. 7

  1. Toate imaginile sunt pentru locurile de muncă sunt în directorul web / rgppu.
  2. Context pentru pagini web, puteți alege / biblioteca / director web Fons.
  3. Texte necesare pentru a crea pagina prezentată mai jos.
  4. Salvați document HTML într-un dosar de web numit rgppu.html

Universitatea de Stat Român profesional Pedagogică (RGPPU) a fost fondată în 1979 și este șeful învățământului superior în sistemul românesc. RGPPU - este țară primul liceu pedagogic-inginerie pentru formarea învățământului primar, secundar și superior.

Pentru istorie mai mult de 25 de ani a dezvoltării sale, universitatea a devenit unul dintre liderii recunoscuți în sistemul de formare a cadrelor didactice și este în mod constant pe locul cinci in topul clasamentului din 100 de universități de top pedagogice din România.

În prezent, structura Institutului RGPPU 3