Informatică: Elemente ale etichetelor HTMl. Vizualizați conținutul unei prezentări „prezentare”
Cateva date:
limbaj HTML a fost dezvoltat din punctul de vedere că toate tipurile de dispozitive ar trebui să poată utiliza informațiile de pe Web: calculatoare personale Cu afisajele grafice cu diferite rezoluții și număr de culori, telefoane mobile,...
Poveste Creare HTML (Hyper Text Limbajul de marcare - limbaj de marcare hipertext)
Cateva date:
În 1945, un om de știință american și consilier științific al președintelui, Vannevar Bush, a venit cu ideea hipertextului.
În 1968, Douglas Engelbart (creatorul unei interfețe de dialog software care răspundea la acțiuni index special- cursorul, precum și creatorul manipulatorului - mouse) demonstrează munca legăturilor hipertext în lucrarea creată de el procesor de text.
Istoria limbajelor de marcare datează din anii 1960, când angajații IBM au acceptat provocarea de a transfera documente între diverse platformeŞi sisteme de operare. Rezultatul eforturilor lor a fost limbajul GML (General Markup Language - limbaj comun markup), care a fost destinat utilizării pe computerele din familia IBM. Limbajul GML a fost extins ulterior, iar în anii 80 a fost standardizat de ISO (International Organization for Standardization). Acest puternic și modul universal marcajul, numit SGML (Standard General Markup Langugage), a fost folosit de departamentul militar al SUA pentru a proiecta documentatia tehnica. Cu toate acestea, SGML nu este utilizat pe scară largă datorită complexității și costului ridicat de implementare.
Următoarea etapă în dezvoltarea limbajelor de marcare este asociată cu numele fizicienilor și angajaților CERN (Centrul European de Cercetare Nucleară) din Geneva. Așadar, la sfârșitul anilor 80, Tim Berners-Lee a preluat problema stocării și afișării datelor obținute de colegi. Problema era că fiecare specialist care venea la Centru folosea propriile metode de prezentare a informațiilor și era nevoie urgentă de a crea sistem universal, care nu ar depinde de platforma informatică folosită și în același timp ar fi destul de simplu.
Tim Berners-Lee a bazat limbajul pe care este dezvoltat limbajul SGMLși tehnici de lucru cu hipertextul, motiv pentru care numele limbajului pe care l-a creat - HTML. Limbă nouă au folosit constructe de bază SGML pentru a descrie documente și legături hipertext.
Termenul „hipertext” a fost inventat pentru prima dată de Ted Nelson în anii 1960. Termenul „hipertext” înseamnă document electronic, care conține link-uri către alte documente.
Dezvoltarea HTML a dus în cele din urmă la tehnologie nouă distribuirea documentelor hipertext pe Internet. Totuși, pentru distribuția largă a WWW, pe lângă limbajul HTML, a fost necesară dezvoltarea unui protocol de transmisie hipertext HTTP(HyperText Transfer Protocol), care permitea schimbul de documente HTML. Acest protocol a permis aplicației client să găsească și să utilizeze resursele stocate pe un alt computer. Protocolul HTTP căutări și descărcări documentul solicitat.
Primele documente HTML accesate pe Internet la începutul anilor 90 au fost exclusiv documente text. Acesta a fost cazul până la NCSA ( Centrul Național cercetarea supraconductoarelor) Universitatea din Illinois nu a dezvoltat primul GUI(Mozaic) pentru documente HTML. Ulterior, odată cu apariția multor simple și browsere disponibile pentru Web și alte servicii de Internet au început noua era pentru HTML. Limbajul HTML a devenit principalul instrument de diseminare a informațiilor pe Internet, deși inițial a fost destinat organizării informațiilor în cadrul unui singur centru științific.
Limbajul HTML a fost dezvoltat din punctul de vedere că toate tipurile de dispozitive ar trebui să poată folosi informațiile de pe Web: computere personale cu afișaje grafice de diferite rezoluții și număr de culori, telefoane mobile...
„Lucrare practică1”
Lucrări practice № 1 pe tema „Crearea celor mai simpleweb -pagini"
Sarcina 1.Crearea de fișiere simpleHTML .
Pentru a crea propriul tău fișier HTML, faceți următoarele:
Creați un folder KURS în care vom salva paginile web create.
Lansați programul standard Notepad.
Tastați în fereastra editorului text simplu Fișier HTML:
Fișier tutorial HTML
CAP
CORP
Programul cursurilor de marți
CORP
HTML
4. Salvați fișierul ca RASP.HTM.
5. Pentru a vizualiza pagina web creată, descărcați browserul Microsoft Internet Explorator.
6. Rulați comanda din meniul browserului Fişier(Fişier), Deschide(Deschide) Vedere
(Răsfoiți), găsiți fișierul RASP.HTM în folderul KURS și descărcați-l.
Asigurați-vă că titlul paginii web (fișier HTML tutorial) este reflectat
în vârf linia de stare browser.
Sarcina 2. Controlul plasării textului pe ecran.
Informaţii .
Când afișează documente HTML, browserele plasează automat textul pe ecran fără a ține cont de eventualele întreruperi de rând sau spații consecutive care apar în fișier.
1. Dacă este necesar, parcurgeți pașii 5, 6 din sarcina 1.
2. Deschideți pagina web sursă - - în meniul browserului, executați comanda Vedere(Vedere) Sursă(Ca HTML). Se va deschide o fereastră cu programul standard Caiet(Notepad), în care pagina dvs. web este prezentată în comenzi HTML.
3. Faceți modificări textului fișierului HTML, plasând cuvintele „Program”, „cursuri”, „pentru marți” pe linii diferite:
Fișier tutorial HTML
Programa
marți
Vizualizați conținutul documentului
"rezumat de bază"
____________________________________________________________
____________________________________________________________________
html
index
.
html
)
html -fişier
html -codul executa VIEW – sub formă de NTML
5 F 5)
numele de fișiere trebuie să aibă numai nume latine cu extensia htm sauhtml
html
TAG –
Acest_____________________________________________________________________________
______________________________________________________________________________________
Particularități:
5. ", de exemplu lățimea ="80".
cap ... cap .
corp ... corp .
Lista elementelorHTML
De bază
| Tip document | HTML HTML | începutul și sfârșitul fișierului |
| Numele documentului | TITLEX/ TITLU | ar trebui să fie în titlu |
| Titlu | HEADX HEAD | |
| BODYX/ CORP | Conținutul din pagină |
Definiţia structure
| Titlu | ?H? | standardul definește 6 niveluri |
| cu aliniere | N ? ALIGN=STÂNGA|CENTRU|DREAPTA |
Aspect
| Stresat | U/ U | adesea nesuportat |
| Superscript | SUB/ SUB | |
| Indice | CINA/ CINA | |
| Dimensiunea fontului | DIMENSIUNEA FONT =?/ FQNT | |
| Culoarea fontului | CULOARE FONT ="#$$$$$$" FONT | |
| Selectarea fontului | FONT FACE="***"/ FONT | |
| Aliniere |
| HREF="URL"/ O | ||
| HREF ="URL #***"/A | (în alt document) |
|
| HREF="#***"/ O | (in acelasi document) |
|
| IMG SRC="URL" | ||
| Aliniere | ||
| (în puncte) |
||
| Borduri | IMG SRC ="URL " BORDER =? | (în puncte) |
| (în puncte) |
Separatoare
| Paragraf | ||
| Aliniere | P ALIGN=STÂNGA|CENTRU|DREAPTA | |
| (alimentare cu o singură linie) |
||
| Separator orizontal | ||
| Aliniere |
Liste
| Dezordonat | UL LI UL | (LI înainte de fiecare element) |
| Compact | UL COMPACT/ UL | |
| Tipul etichetei | (pentru intreaga lista) |
|
| (acesta și următoarele) |
||
| Numerotat | OL LI/ OL | (LI înainte de fiecare element) |
| Lista definițiilor | DL DT DD/ D.L. | (D T=termen DD=diviziune onpe) |
Fundal și culori
| BODY BACKGROUND="URL" | ||
| Culoare de fundal | BODY BGCOLOR="#$$$$$$" | |
| Culoarea textului | BODY TEXT="#$$$$$$" | |
| BODY_LINK="#$$$$$$" |
Mesele
| Definiți tabelul | MASĂ/ MASĂ | |
| Marginea mesei | chenar tabel=? |
Rând de masă
TR/ TR
Aliniere
Celula de tabel
TD/ T.D.
(trebuie să fie în interiorul liniei)
Aliniere
Lățimea dorită
TD WIDTH=?
(în puncte)
Lățimea în procente
TD WIDTH="%"
procent din lățimea paginii)
Culoarea celulei
TD BGCOLOR="#$$$$$$"
Titlul tabelului
/TN
Aliniere
ALIGN =STÂNGA |DREAPTA |CENTRU |MIJLOC |BOTTQM
celule de flori
TN BGCOLOR= "#$$$$$$"
Vizualizați conținutul documentului
„lista elementelor HTML”
Lista elementelorHTML
De bază
| Tip document | HTML HTML | începutul și sfârșitul fișierului |
| Numele documentului | TITLEX/ TITLU | ar trebui să fie în titlu |
| Titlu | HEADX HEAD | descrierea documentului, cum ar fi numele acestuia |
| BODYX/ CORP | Conținutul din pagină |
Definiţia structure
| Titlu | ?H? | standardul definește 6 niveluri |
| cu aliniere | N ? ALIGN=LEFT|CENTER|RIGHT___ |
Aspect
| Stresat | U/ U | adesea nesuportat |
| Superscript | SUB/ SUB | |
| Indice | CINA/ CINA | |
| Dimensiunea fontului | FONT DIMENSIUNE =?/ FQNT | |
| Culoarea fontului | CULOARE FONT ="#$$$$$$" FONT | |
| Selectarea fontului | FONT FACE="***"/ FONT | |
| Aliniere |
| HREF="URL"/ O | ||
| HREF ="URL #***"/A | (în alt document) |
|
| HREF="#***"/ O | (in acelasi document) |
|
| IMG SRC="URL" | ||
| Aliniere | | |
| | (în puncte) |
|
| Borduri | IMG SRC ="URL " BORDER =? | (în puncte) |
| IMG SRC ="URL" HSPACE -? VSPACE=? | (în puncte) |
Separatoare
| Paragraf | închiderea elementului nu este adesea necesară) |
|
| Aliniere | P ALIGN=STÂNGA|CENTRU|DREAPTA | |
| Linie nouă | (alimentare cu o singură linie) |
|
| separator orizontal_ | ||
| Aliniere |
Liste
| Dezordonat | UL LI UL | (LI înainte de fiecare element) |
| Compact | UL COMPACT/ UL | |
| Tipul etichetei | (pentru intreaga lista) |
|
|
PĂTRAT | (acesta și următoarele) |
|
| Numerotat | OL LI/ OL | (LI înainte de fiecare element) |
| Lista definițiilor | DL DT DD/ D.L. | (D T=termen DD=diviziune onpe) |
Fundal și culori
| Imagine de fundal | BODY BACKGROUND="URL" | |
| Culoare de fundal | BODY BGCOLOR="#$$$$$$" | (comanda: rosu/verde/albastru) |
| Culoarea textului | BODY TEXT="#$$$$$$" | |
| BODY_LINK="#$$$$$$" |
Mesele
| Definiți tabelul | MASĂ/ MASĂ | |
| Marginea mesei | chenar tabel=? |
Rând de masă
TR/ TR
Aliniere
ALINIERĂ-STÂNGA|DREAPTA|CENTRU|MIJLOC|JOS
Celula de tabel
TD/ T.D.
(trebuie să fie în interiorul liniei)
Aliniere
Lățimea dorită
TD WIDTH=?
(în puncte)
Lățimea în procente
TD WIDTH="%"
procent din lățimea paginii)
Culoarea celulei
TD BGCOLOR="#$$$$$$"
Titlul tabelului
/TN
ca datele, dar caractere aldineși alinierea)
Aliniere
TN
ALIGN=LEFT|RIGHT|CENTRE|MIDDLE|BOTTQM
celule de flori
TN BGCOLOR= "#$$$$$$"
Titlul tabelului
Aliniere
partea de sus/de jos a mesei
Rame
| Document cu rame | FRAMESETX/FRAMESEI | în loc de CORP |
| Înălțimea rândului | SET DE CADRU | (puncte sau %) |
| Înălțimea liniei | RÂNDURI= */ CADRE ET | (* = dimensiune relativă) |
| Lățimea coloanei | COLS=* | (puncte sau %) |
| Document | SR C= „URL” | |
| Numele cadrului | NAME="***"|_blank|_selt| _părinte|_top | |
| Lățimea chenarului | CADRU MARGINWIDTH=? | (chenarele din dreapta și din stânga) |
Vizualizați conținutul documentului
"lectie"
Subiectul lecției: „Crearea de pagini web cu folosind HTML. Elemente de bază HTML »
Obiectivele lecției:
Educativ: studiu Structuri HTML– document, concepte de bază: etichetă, structură, tehnologie Creare web-pagini;
Dezvoltare: capacitatea de a compara și generaliza;
Educațional: educație cultura informaţiei, atitudine pozitivă față de cunoaștere.
Tip de lecție: studierea materialului nou și apoi aplicarea acestuia în lucrări practice.
Tip de lecție: lectie teoretica
Metode: explicativ și ilustrativ, reproductiv
Materiale folosite:
mesaje pregătite pe Istoricul HTML, sub forma d/z.
sala de clasa dotata cu PC,
prezentare,
carduri,
videoproiector,
fișiere grafice în folderul c:\foto\comp și usor
eticheta card de referință
note justificative
pe desktop un fișier cu textul programului în Notepad
Planul de lecție.
Stabilirea obiectivului lecției.
Actualizarea cunoștințelor
III Studierea materialelor noi.
IV Consolidarea cunoștințelor dobândite. Lucrări practice.
V. Rezumând lecția.
Progresul lecției.
eu . Stabilirea obiectivului lecției.
Băieți, fiecare dintre voi cu ajutor telefon mobil sau conectarea computerului la Internet, veți dori cu siguranță să vedeți ce lucruri interesante la nivel global retea de calculatoare. Știi deja cum să folosești prin diverse mijloace Internet și accesați site-urile care vă interesează, site-urile prietenilor dvs. Orice utilizator al secolului XXI ar trebui să-și poată prezenta informațiile pe Internet.
V-ar dori vreunul dintre voi să-și facă propria pagină personală, propriul site web?
Astăzi vom începe să ne uităm la una dintre modalitățile de a crea un site web. Să notăm subiectul lecției... în ABSTRACT (rezumat de referință).
II Actualizarea cunoștințelor
Unde se află paginile Web? (Pe serverele web)
Web – server – calculator în rețele de internet, care stochează pagini Web și conexe software a lucra cu ei.
Informațiile despre serverele Web sunt prezentate sub forma... ( site web)
Ce este un site web? (Combinarea paginilor Web cu un singur subiect)
Ce altceva este tipic pentru un site web? (Disponibilitate pagina de titlu, care se numește acasă sau principal)
Paginile web conțin informații.
Ce informatii? (Text, grafică, sunet, video) Paginile web sunt multimedia.
În site-urile Web, cum sunt conectate paginile Web? (Hiperlinkuri)
Pentru a crea o pagină Web trebuie să scrieți un program.
Ce limbaje de programare cunoașteți?
Să ne amintim tehnologia creării unui program într-un limbaj de programare
Tastarea textului programului.
2. Lansați programul.
3. Salvarea programului cu o extensie
III Studierea materialelor noi.
Acum vom proceda altfel. Va trebui să avem 2 programe:
1. Notepad (pentru crearea textului programului)
2. Browser (va afișa informații în fereastra de lucru)
! Tehnologia de creare a unei pagini Web este citită de student punct cu punct din notele de referință; profesorul efectuează simultan pe un PC cu un proiector
Tehnologie pentru crearea paginilor web:
1.Tastați textul programului (în Notepad)
2. Salvați programul cu extensia *.htm sauhtml
(dacă este pagina de start, atunci acest fișier ar trebui să aibă numeleindex
.
html
)
3. Lansați browserul Internet Explorerși deschide din elhtml -fişier
4. Pentru a vizualiza și editahtml -codul executa VIEW – sub formă de NTML
5 . După ce faceți modificări, rulați Update (F 5)
numele de fișiere trebuie să aibă numai nume latine cu extensia htm sau html
toate fișierele aparținând unui proiect: html -fisiere, grafica etc. trebuie să fie localizat în același director
În ce limbă vom scrie un program pentru a crea o pagină Web? (În HTML).
Înainte de a începe să scriem un program în HTML, vom învăța elementele de bază ale limbajului HTML.
În primul rând, să ne familiarizăm cu istoria creării limbajului HTML. (mesajul elevului).
Diapozitivele sunt afișate cu întrebări la care clasa răspunde, un elev le citește din diapozitive
Conceptul principal al limbajului HTML este conceptul de etichetă. Slide
Notează-l în nota de referință
TAG – instrucțiuni către browser care indică modul în care ar trebui să fie afișate informațiile.
Exercita. Având în vedere etichetele, identificați etichetele pereche și simple. Slide
Etichetele sunt scrise folosind ce alfabet?
Sunt folosite doar litere atunci când scrieți etichete?
Particularități: elevul citește din NOTĂ
1. Textul pe care vrem să-l vedem în fereastra browserului este plasat între etichete.
2. toate etichetele sunt cuprinse între paranteze.
3. în etichetele pereche, eticheta de închidere începe cu simbolul / slash. Etichetele asociate evidențiază un bloc de text și îi conferă o anumită stare pe pagină; de exemplu, folosind etichetele hi ...hi, un bloc de text este evidențiat ca titlu.
4. Majoritatea etichetelor au o serie de proprietăți numite parametri ; de exemplu, un antet marcat cu hi aiign ="center ” ...hi etichete este poziționat în centrul ferestrei browserului.
5. Fiecare parametru este prezentat în urmatoarea forma: parameter_name="valoarea_parametrului" ", de exemplu lățimea = "80".
Toți parametrii sunt localizați în eticheta de deschidere. Dacă există mai mulți parametri, aceștia sunt separați prin spații. Nu contează ordinea în care apar.
6. Informații situate între etichete cap ... cap , nu este afișat în fereastra browserului, eticheta de titlu a paginii este acolo , etichete pentru motoarele de căutare, codul programului scris într-un limbaj de programare cum ar fi JavaScript, și alte informații oficiale .
7. Toate informațiile vizibile în fereastra browserului sunt plasate între etichete corp ... corp .
LUCRARE PRACTICĂ.
Cardul nr. 1 „Crearea unei pagini web simple”.
Finalizați sarcinile 1, 2. 10 min
ANALIZA LUCRĂRII
Ce comandă trebuie executată după efectuarea modificărilor codului.
S-a schimbat textul de pe ecran atunci când ați Tasta Introducere ai despartit propozitia in paragrafe?
Amintiți-vă că lucrați în editori de text. Ce parametri de text și cum am schimbat - culoarea fontului, dimensiunea, stilul, indentarea paragrafului, alinierea etc.
Pentru a schimba tipul de font, paragraf, lucru cu grafica, tabele în HTML, există echipe speciale(etichete).
În plus, există o comandă care împiedică programul browser să modifice formatarea textului în orice fel și vă permite să reproduceți cu exactitate un fragment specificat dintr-un fișier text pe ecran.
Etichetele principale pentru muncă sunt conținute în tabel ( in note opre elevi)
Să ne uităm la câteva exemple. Slide-uri
... cel mai mare
…
…
…
…
... cel mai micAtribute: align="valoare"
Valori:
Formatarea textului
1) Selectarea textului:
…
- îndrăzneț
…
- cursive
…
- evidenţierea prin subliniere
Buna ziua
O etichetă trebuie să aibă cel puțin unul dintre cele trei atribute posibile:
Dimensiunea fontului dimensiune="valoare" (valorile sunt numere întregi de la 1 la 7)
Culoarea fontului culoare="valoare"
Valoare – numele culorii sau al 16-lea cod al acesteia, de exemplu
Buna ziua
Buna ziua
Font (tip de font) FAŢĂ="valoare", de exemplu
Buna ziua (cuvântul salut are dimensiunea 7, roșu, font Arial).
3. Eticheta de paragraf:
align="valoare"
stânga(de-a lungul marginii stângi), corect(de-a lungul marginii din dreapta), centru(centru) justifica(în lățime).
Flux de linie:
| RRGGBB | RRGGBB |
||||
| negru | violet | violet | FF 00FF |
||
| alb | FFFFFF | galben | FFFF 00 |
||
| 0000 FF | maro | maro | |||
| verde | 00FF 00 | portocale | portocale | FF8000 |
|
| azur | turcoaz | 00FFFF | violet | 8000FF |
|
| albastru | 0000FF | gri | |||
Design de fundal al paginii web
Imagine de fundal- Asta fisier grafic cu imaginea unei plăci dreptunghiulare mici. Când este vizualizat într-un browser, acest blob se repetă de mai multe ori, umplând întreaga fereastră, indiferent de dimensiunea sa.
Există două moduri de a proiecta fundalul unei pagini Web:
Utilizați o culoare din tabelul de culori primare -
înlocui? linie care specifică culoarea
Utilizați fundal grafic -
înlocui? o linie care specifică numele fișierului de fundal și, dacă este necesar, locația acestuia pe discul PC-ului
Imaginea folosită pentru fundalul paginii trebuie să fie de dimensiuni mici; Browserul înmulțește automat copiile astfel încât să umple complet suprafața paginii. Pentru a forma fundalul grafic al paginii, este necesar să folosiți imagini care nu interferează cu percepția vizuală a textului și a graficelor. Fișierele utilizate ca fundal grafic trebuie să aibă o extensie de fișier (tip) similară cu oricare imagine grafică folosit pentru o pagină Web, de ex. ?.gif, ?.jpg. Imaginea, atunci când este repetată de mai multe ori, ar trebui să fie fără „cusături”, adică. fără margini vizibile între imagini
IV Consolidarea cunoștințelor dobândite. Lucrări practice.
Finalizarea sarcinilor 3-10 de pe card
Marcați-i pe cei care au finalizat sarcina rapid și corect. Temele vor fi evaluate ulterior de către profesor, sub forma verificării fișierelor salvate.
V. Rezumând lecția.
Elevii folosesc diapozitivele pentru a completa oral părțile lipsă.
Cum este tradus HTML și ce înseamnă?
Cum este structurat un document HTML?
Care este diferența dintre textul simplu și un document HTML?
La ce se folosește eticheta?
Listați etichetele necesare.
Care este diferența dintre o etichetă
de pe etichetă?
Prin ce mijloace puteți schimba stilul, culoarea, dimensiunea textului afișat pe o pagină HTML?
Cum puteți vizualiza structura unui document HTML?
În această lecție, am făcut doar primii pași. Cel mai interesant urmează să vină: lucrul cu grafică, fotografii, crearea propriile pagini. Toate acestea vor fi tratate în lecțiile următoare. La revedere!
VI Tema pentru acasă
În lecția următoare vom crea pagini Web cu grafică pe tema unei povești despre noi înșine și hobby-urile noastre. Aduceți material text și fotografii.
Literatură:
Davydova E.V. Curs opțional „Creativitatea informatică. Începuturile designului web.” //Informatică și educație. 2006. Nr. 11.
Moiseeva N.N. Curs opțional „Începuturile designului web”. // Informatică și educație. 2007. Nr. 10.
Novoselova E.N., Kadyrov I.R. Crearea de pagini web folosind HTML .//Informatică și educație. 2004. Nr. 11, Nr. 12.
Titorov D.Yu. //Informatica la scoala. Supliment la revista „Informatică și Educație”. 2007 nr. 7.
Bazele HTML
Vizualizați conținutul prezentării
"prezentare"
Crearea de pagini web folosind HTML Bazele HTML
Tehnologie pentru crearea paginilor web:
1.Tastați textul programului (în Notepad)
Tehnologie pentru crearea paginilor web:
3 . Lansați browserul Internet Explorer și deschideți fișierul html din acesta
4. Pentru a vizualiza și edita codul html, executați VIEW - sub formă de HTML
5. După ce ați făcut modificări, efectuați Actualizare (F5)
- numele de fișiere trebuie să aibă numai nume latine cu extensia htm sau html
- toate fișierele legate de un proiect: fișiere html, grafică etc. trebuie să fie localizat în același director
Istoria HTML-ului (Hyper Text Markup Language - limbaj de marcare hypertext)
În 1945, un om de știință american și consilier științific al președintelui, Vannevar Bush, a exprimat ideea......
hipertext.
În 1968, Douglas Engelbart (creatorul unei interfețe de dialog software care a răspuns la acțiunile unui pointer special - cursorul, precum și creatorul manipulatorului - mouse-ul) demonstrează ...
munca legăturilor hipertext în procesorul de text pe care l-a creat.
în anii 1960, când angajații IBM au acceptat provocarea de a transfera documente între diferite platforme și sisteme de operare. Rezultatul eforturilor lor a fost...
Limbajul GML (General Markup Language), care a fost destinat utilizării pe computerele din familia IBM.
Tim Berners-Lee a bazat limbajul dezvoltat pe...
Limbajul SGML și tehnicile de lucru cu hipertextul, motiv pentru care numele limbajului pe care l-a creat este HTML
Termenul „hipertext” a fost introdus pentru prima dată........
Termenul „hipertext” înseamnă...
Ted Nelson în anii 1960
document electronic,
Dezvoltarea HTML a condus în cele din urmă la o nouă tehnologie de distribuire a documentelor hipertext pe Internet. Cu toate acestea, pentru utilizarea pe scară largă a WWW, pe lângă limbajul HTML, a fost necesară dezvoltarea... care a permis schimbul de documente HTML.
HyperText Transfer Protocol HTTP (Protocol de transfer hipertext),
ETICHETĂ – o instrucțiune pentru browser care indică modul în care ar trebui să fie afișate informațiile.
Având în vedere etichetele, identificați etichetele pereche și simple. ,
,
Particularitati:
1. Textul pe care vrem să-l vedem în fereastra browserului este plasat între etichete.
2. toate etichetele sunt cuprinse între paranteze.
3. în etichetele pereche, eticheta de închidere începe cu simbolul / slash. Etichetele asociate evidențiază un bloc de text și îi conferă o anumită stare pe pagină ;
de exemplu, folosind etichete... blocul de text este evidențiat ca un titlu .
4 . Majoritatea etichetelor au o serie de proprietăți numite parametri ;
titlu etichetat ..., situat în centrul ferestrei browserului .
5. Fiecare parametru este prezentat după cum urmează: parameter_name="valoarea_parametrului" ", de exemplu width="80".
Toți parametrii sunt localizați în eticheta de deschidere. Dacă există mai mulți parametri, aceștia sunt separați prin spații. Nu contează ordinea în care apar.
6. Informații situate între etichete ... , nu este afișată în fereastra browserului, eticheta de titlu a paginii este acolo și alte informații oficiale .
7. Toate informațiile vizibile în fereastra browserului sunt plasate între etichete ... .
HTML acceptă 6 niveluri de titluri interne.
... cel mai mare
…
…
…
…
... cel mai mic
- Atribute: align="valoare"(definește modul în care titlul este aliniat orizontal).
- Valori: centru (centru), dreapta (marginea dreaptă), stânga (marginea stângă).
- Să facem cunoștință - Computer(titlu de primul nivel, centrat).
Formatarea textului
1) Selectarea textului:
… - îndrăzneț … - cursive … - evidenţierea prin subliniere
Buna ziua
- O etichetă trebuie să aibă cel puțin unul dintre cele trei atribute posibile:
- Dimensiunea fontului dimensiune ="valoare" (valorile sunt numere întregi de la 1 la 7)
- Culoarea fontului culoare ="valoare"
- Font (tip de font) FAŢĂ ="valoare", de exemplu
( cuvântul salut este mărimea 7, roșu, font Arial).
3. Eticheta de paragraf:
align="valoare"
stânga(de-a lungul marginii stângi), corect(de-a lungul marginii din dreapta),
centru(centru) justifica(în lățime).
Flux de linie:
Imagine de fundal - acesta este un fișier grafic cu o imagine a unui bloc dreptunghiular mic
înlocui? linia care specifică culoarea Folosește fundalul grafic – Fundalul corpului = „?” înlocui? o linie care specifică numele fișierului de fundal" width="640" Există două moduri de a proiecta fundalul unei pagini Web:
Utilizare culoare, din tabelul culorilor primare - Body BGcolor = „?” înlocui? linie care specifică culoarea
Utilizare fundal grafic – Fundalul corpului = „?” înlocui? o linie care specifică numele fișierului de fundal
Grafica folosită ca grafică de fundal este specificată într-o etichetă la începutul fișierului HTML.
Completează fraza
extensia de fișier. . .
prima etichetă de program. .
Căutare convenabilă materiale pentru profesori
ÎN exemplu de programîn informatică și TIC pe tema „Tehnologii de comunicare” sunt alocate doar 12 ore și se propune crearea unei pagini Web folosind șabloane. Pentru tema „Tehnologii multimedia” sunt alocate 8 ore, dar dacă într-o instituție de învățământ informatica este studiată la nivel propedeutic deja în clasele a 5-a, a 6-a și a 7-a, atunci este indicat să se amâne studiul. tehnologii multimediaîntr-un curs propedeutic și apoi puteți crește timpul de studiu tehnologii de comunicare, sau mai degrabă, puteți adăuga subiectul „Crearea site-urilor web în HTML” în clasa a VIII-a.
Este recomandat să începeți să stăpâniți tehnologia de creare a site-urilor web cu limbajul de marcare hipertext HTML în programul Notepad, care este baza fundamentală în această direcție. Desigur, este imposibil să înveți întreg limbajul HTML în 8 ore, dar poți arăta scopul și aplicarea etichetelor principale ale limbajului. Dacă un student devine interesat de tehnologia de creare a site-urilor web, el poate continua să studieze materialul independent sau în cursuri, cluburi sau opțiuni adecvate.
Trimis manual metodologic a fost supus unor teste repetate în clasa a VIII-a a gimnaziului nr. 441 din districtul Frunzensky din Sankt Petersburg și include materiale pentru studii teoretice și orele practice, a cărui implementare este mai întâi demonstrată printr-un proiector, iar apoi elevii efectuează independent pe computer, folosind fișe pentru lecție.
Pentru elevii care au finalizat rapid munca planificată în lecție, sunt oferite sarcini suplimentare.
Materialul este stăpânit în mod eficient atunci când elevii, împreună cu profesorul, finalizează un proiect comun, de exemplu, pe o temă din istoria Sankt-Petersburgului „Teatre dramatice din Sankt Petersburg”, apoi, ca lucrare finală, își creează propriul mic proiect, folosind ca șablon un site web creat împreună cu profesorul.
Ca test, elevii răspund la întrebările testului de cunoștințe. Etichete HTMLși să prezinte un site web creat independent.
Principalele obiective ale pregătirii: formarea interesului cognitiv, dezvoltarea abilităților intelectuale și creative în domeniul tehnologiilor Web.
Educațional:
- formarea unui sistem de cunoștințe privind tehnologia de creare a site-urilor web;
- predarea limbajului de marcare hipertext HTML pentru crearea de site-uri web;
- introduceți etapele activităților proiectului.
Educațional:
- dezvoltarea abilităților creative de auto-exprimare prin crearea de site-uri web;
- dezvoltarea capacității de a compara, de a căuta un analog și de a transfera cunoștințele către una nouă domeniul subiectului tehnologii web;
- dezvolta abilitati de calculator
Educațional:
- dezvolta o atitudine conștiincioasă față de muncă;
- promovează un sentiment de camaraderie și responsabilitate personală pentru site-ul creat;
- cultivați gustul artistic și estetic;
- pentru a educa un utilizator de internet competent și corect.
Lecția 1
1. Informații generale despre site-urile Web și limbajul HTML
Publicații în World wide web (În toată lumea Web) sunt implementate sub formă de site-uri Web. Un site web este structurat ca o revistă care conține informații despre un anumit subiect sau problemă. Așa cum o revistă este formată din pagini tipărite, un site Web este format din pagini Web de computer legate prin hyperlinkuri. Paginile web pot conține text, imagini, tabele, obiecte multimedia și dinamice. Site-urile web pot fi create folosind HTML.
HTML – Limbajul de marcare hipertext - limbaj de marcare hipertext. HTML nu este în niciun caz un limbaj de programare, este responsabil doar de aranjarea elementelor (text, imagini) în fereastra browserului. HTML este limbajul pentru crearea site-urilor Web pe World Wide Web. Limbajul HTML este format din comenzi simple - etichete. Etichetele controlează prezentarea informațiilor pe ecran atunci când este redat un document HTML. Etichetele sunt incluse în paranteze unghiulare<>…și există pereche și nepereche (single<>).
document HTML- Asta fișier text cu extensie. html sau. htm, care conține un set de etichete.
Browser – un program pentru vizualizarea paginilor Web. Browserele Microsoft Internet Explorer, Opera etc. sunt utilizate pe scară largă Când un browser primește un document HTML, îl analizează, construiește un model de obiect al documentului și apoi afișează rezultatul pe monitor.
2. Structura documentului HTML
3. Formatarea caracterelor
Se afișează caracterele dintre următoarele etichete:
Opțiuni de font
Text inclus între etichete
Dacă textul conține mai multe spații între cuvinte sau caractere de tabulatură, browserul afișează un singur spațiu pe ecran. Dacă sunt necesare spații suplimentare, atunci între cuvinte trebuie să adăugați un caracter primitiv.
O singură etichetă
întrerupe fluxul de text și inserează o linie goală. Mai multe dintre aceste etichete adaugă mai multe linii goale. Spația dintre linii este simplă.
4. Sarcina practică №1 .
Crearea primului document HTML „Teatrele Dramatice din Sankt Petersburg”, lucrând cu fonturi, stabilind culoarea și dimensiunea fontului. Stăpânirea tehnologiei de lucru.
Lecția #2
1. Formatarea textului în paragrafe
Etichetă - începe un paragraf pe un rând nou. Alineat nou separate de cea precedentă prin spațiere dublă între linii.
Alinierea textului la paragrafe:
2. Setați culoarea întregului text și fundal dintr-un document
Descris în eticheta de început a corpului documentului
TEXT=culoarea textului >.3. Titluri diferite niveluri
Etichete
4. Liste simple
5.Sarcina practică nr. 2
Formatarea textului în paragrafe, culoarea de fundal, titluri de diferite niveluri, liste.
Lecția #3
1. Inserarea graficelor
Toate browserele acceptă formate .gif, .jpg. Aceste formate sunt raster. GIF– acceptă transparență și animație, potrivite pentru imaginile desenate manual. JPG– pentru imagini color, potrivite pentru imagini și fotografii scanate, nu acceptă animația.
O singură etichetă
inserează elemente grafice într-un flux de text oriunde:
>
Atribute opționale ale etichetei :
Pentru a păstra imaginea centrată, puteți folosi eticheta
2. Sarcina practică nr. 3
Inserarea și formatarea graficelor. Creare independentă de pagini web pentru teatre de teatru.
Lecția #4
Comunicarea cu alte documente este organizată prin etichete<A>....
>< IMG SRC =’numele fișierului grafic’ >
2. Sarcina practică nr. 4
Proiectarea unei liste de teatre pe pagina principală a glavn.htm, ca hyperlinkuri către paginile Web corespunzătoare ale teatrelor.
Lecția #5
1. Tabele
Ele sunt folosite nu numai pentru aranjarea datelor în celule, ci și în scopul poziționării fragmentelor de text și imagini unul față de celălalt.
Folosind tabele, este convenabil să creați navigare pe site.
Un exemplu de tabel cu două rânduri (rânduri) care conține două celule:
Celulele tabelului pot conține text sau imagini, precum și text cu etichete HTML și hyperlinkuri. Nu ar trebui să lăsați celulele tabelului necompletate, trebuie să plasați cel puțin un spațiu care nu se întrerupe
Atributele de bază ale etichetei
| setați parametrii de tabel, rând sau celulă:
ALIGN=stânga, dreapta, centru – aliniere ( BGCOLOR=’culoare’ – culoarea de fundal ( HSPACE=valoare – spațiu liber la stânga și la dreapta tabelului în pixeli ( VSPACE=valoare - spațiu liber deasupra și sub tabel în pixeli ( WIDTH=valoare – lățimea tabelului (celulă) – în pixeli sau ca procent ( ÎNĂLŢIME =
valoare – înălțimea tabelului (celulă, rând) – în pixeli sau ca procent ( BORDER= valoare – grosimea chenarului din jurul tabelului și a celulelor acestuia, valoarea implicită=1, dacă valoarea=0, atunci nu există chenar ( BORDECOLOR=’culoare’ – culoarea cadrului ( VALIGH=jos, mijloc, sus – aliniați conținutul pe verticală ( 2. Sarcina practică nr. 5 Crearea navigării pe site sub forma unui tabel cu un rând 1. Secțiune antet Secțiunea antet de pe fiecare pagină specifică informații despre documentul care este utilizat pentru a-l afișa. Text inclus între etichete Secțiunea antet conține de obicei un număr de etichete.
cu diverse atribute care oferă informații suplimentare (metainformații) despre site-ul web: >
- - (este indicat tipul tabelului de coduri ( Windows-1251, Koi8-Rși altele) utilizate la pregătirea părții de text a documentului. - informatii despre Creează un paragraf nou Aliniază un paragraf în raport cu o parte Elemente grafice Mesele |
