Cum să creați propriul dvs. site Web

Un site web de bază poate fi proiectat folosind HyperText Markup Language (HTML). Scripturile pot fi scrise în Notepad sau într-un document text, în funcție de sistemul de operare pe care îl utilizați. Instrumentele de bază pentru crearea unui site web încep cu utilizarea etichetelor HTML și a elementelor HTML. Primele sunt adesea utilizate pentru a transmite informații despre unitatea conținutului, iar cele din urmă sunt utilizate pentru a formata unelte pentru pagina web. În timp ce codificați, atributele și valorile HTML sunt utilizate pentru a furniza informații cum ar fi destinația de plasare, înălțimea etc. pentru conținut. În plus față de acestea, se pot utiliza etichete de culoare, etichete de imagine și etichete diviziune HTML pentru a crea o pagină web vie.

Cum să creați propriul dvs. site Web

Ce este HTML?
cerinţe
- Exemplul 1:
Etichete HTML
Elementele HTML
Elemente de bază HTML pentru a reaminti
- Exemplul 2
Atribuiri și valori HTML
- Exemplul 3
Etichete de culoare
- Exemplul 4
Formatul textului
- Exemplul 5
Etichetele diviziei HTML
- Exemplul 6
Etichete de imagine
- Exemplul 7
Legarea etichetelor
- Exemplul 8
Etichete de tabel
- Exemplul 9
Etichete cadru HTML
- Exemplul 10
WYSIWYG Software

Atunci când creați un site web, mulți oameni aleg de multe ori pentru a obține un designer de web pentru ajutor. Cu toate acestea, există modalități simple de a învăța cum să faceți un site web de bază și acestea vor fi explicate în acest articol.

Ce este HTML?

Pentru a crea un site web, va trebui să înveți elementele de bază ale HTML. HTML este acronimul pentru HyperText Markup Language, care este limba de programare folosită pentru a crea documente hipertext pe World Wide Web. Limba este alcătuită dintr-un set de coduri și simboluri care vor genera text, imagini, sunete, cadre și animație în paginile browserului dvs.

Două moduri comune de a începe site-ul dvs. sunt:

Crearea propriilor coduri într-un simplu editor de text și salvarea lor ca fișier .htm
Utilizarea software-ului generatorului HTML

cerinţe

Pentru cei care utilizează Windows, începeți prin a deschide un nou document Notepad .

Pentru cei care rulează MAC, deschideți un nou document SimpleText .

Pentru utilizatorii OSX, deschideți TextEdit și efectuați următoarele modificări:

1. Deschideți meniul "Format" și alegeți "Text simplu"

2. În meniul "Editare text", deschideți fereastra "Preferințe" și alegeți opțiunea "Ignoră comenzile de text îmbogățit în fișiere HTML".

Exemplul 1:

După ce ați primit documentul gol, puteți începe prin a scrie:

Acesta este titlul paginii dvs.

Acesta este locul unde va apărea tot conținutul

Notă:

1. Salvați întotdeauna documentele cu extensia .htm sau html pentru a le afișa în browserul dvs. web. (de ex. index.htm).

2. Pentru a edita documentul sursă, selectați opțiunea "Vizualizare" din bara de instrumente din fereastra browserului și selectați "Sursă".

3. Nu uitați să salvați fiecare modificare făcută în documentul dvs.

4. Pentru a vizualiza modificările aduse documentului în fereastra browserului, reîmprospătați pagina utilizând tasta F5.

Etichete HTML

O etichetă HTML este definită ca un marcaj care este adăugat într-un document HTML pentru a oferi mai multe informații despre conținut. O etichetă HTML este pusă între paranteze și are nevoie de o etichetă de închidere. (de exemplu ).

Elementele HTML

Elementele sunt etichete de marcare utilizate pentru formarea unor secțiuni ale unei pagini Web. Un exemplu de element HTML este eticheta, utilizată pentru bold textul afișat în browser.

este folosit pentru a spune browser-ului dvs. că fișierul este alcătuit din date codate HTML. este folosit la sfârșitul documentului pentru a spune browserului că conținutul HTML se termină acolo.

conține prima parte a documentului și este locul în care va fi găsit titlul paginii dvs. de browser. De asemenea, poate conține comenzile utilizate pentru a formata afișarea browserului dvs. (de exemplu, apeluri CSS). este apoi folosit pentru a termina această secțiune. Această parte nu va fi afișată în browserul dvs.

va fi folosit pentru a eticheta site-ul dvs. web. este, prin urmare, folosit pentru a indica sfârșitul acestei comenzi.

definește tot conținutul care va fi afișat în browserul dvs.

Elemente de bază HTML pentru a reaminti

rubricile

Titlurile sunt folosite pentru a indica subiectul următorului conținut în pagina dvs. web. În HTML, pot varia în funcție de mărime, de la

alineatele

Paragrafele sunt utilizate pentru a separa blocurile de text din pagina dvs. Web. În HTML, ele sunt definite cu

etichetă. Un paragraf va avea o etichetă de deschidere

și o etichetă de închidere

Această secțiune a definit etichete HTML

Întreruperea liniei

În HTML, pauzele de linie NU necesită o etichetă de închidere. Prin urmare, ele sunt pur și simplu definite cu

etichetă.

Această secțiune a definit etichete HTML

Comentarii

Comentariile sunt inserate într-o pagină HTML pentru a localiza diferitele secțiuni dintr-o pagină web de către designerul său. Acestea sunt definite cu etichetă. Etichetele de comentariu nu sunt afișate în browser și pot fi folosite oriunde în document fără a afecta formatul paginii web.

Exemplul 2

Totul despre HTML

HTML este acronimul pentru HyperText Markup Language

Atribuiri și valori HTML

Atributele HTML sunt informații adăugate elementelor și utilizate pentru a include o caracteristică particulară elementelor HTML. Atributele HTML sunt întotdeauna scrise împreună cu o valoare (de exemplu, name = "value" ) și sunt plasate la eticheta de început a unui element HTML.

De exemplu, dacă doriți ca poziția să fie plasată în centrul paginii dvs., în loc să fie afișată în stânga în mod implicit, puteți adăuga atributul aliniat la etichetă:

HTML este acronimul pentru HyperText Markup Language

Etichete de culoare

Etichetele de culoare vă permit să modificați culoarea textului care este afișat în fereastra browserului. este un exemplu despre modificarea culorii textului dacă doriți să faceți acest lucru.

În HTML, puteți utiliza, de asemenea, coduri de culori pentru a obține culori specifice utilizând coduri hexazecimale. Așa-numitele triplete hexazecimale corespund culorilor roșu, verde și albastru (RGB). Prin urmare, eticheta de culoare în hexazecimal va arăta ceva asemănător . Puteți obține codurile și numele culorilor urmând acest link: //www.computerhope.com/htmcolor.htm

De asemenea, puteți utiliza etichete de culori pentru a modifica culoarea de fundal a site-ului dvs. web prin adăugarea atributului BGCOLOR . Prin urmare, va schimba culoarea de fundal din albul implicit.

Exemplul 4

Totul despre HTML

HTML este acronimul pentru HyperText Markup Language

Notă:

1. Este recomandabil să nu alegeți culori izbitoare precum galben sau roz pentru textul dvs., deoarece aceste culori tind să fie deranjante pentru ochi

2. De asemenea, încercați să utilizați maximum 4 tonuri de culoare ușor potrivite, care corespund atmosferei site-ului dvs. web pentru a avea un rezultat mai bun de armonizare.

3. Nu creați potriviri de culoare incomode, cum ar fi textul roz pe un fundal albastru pentru site-urile oficiale, deoarece acesta va părea ciudat.

Formatul textului

Etichetele de formatare a textului vă permit să modificați afișarea textului în fereastra browserului. De exemplu, pentru un text îngroșat, puteți folosi etichetă. (de ex. Acest text va avea un font aldine ). Mai jos este lista etichetelor comune de formatare a textului pe care le puteți utiliza pentru a modifica afișarea textului:

1. Bold Tag

Acest text va fi îngroșat

2. Etichetă italică

Acest text va fi în italic

3. Subliniați eticheta

Acest text va fi subliniat

4. Accentuați eticheta

Acest lucru va accentua textul dvs.

5. Etichetă puternică

Acest text va fi puternic

6. Big Tag

Acest lucru va defini textul mare

7. Etichetă mică

Aceasta va defini textul mic

8. Eticheta subscrisului

_{Acest text va fi abonat}

9. Tag-ul Superscript

Acest text va fi superscripat

10. Etichetă de centru

Acest text va fi centrat

11. Eticheta stângă

Acest text va fi afișat în partea stângă a ecranului

12. Etichetă dreaptă

Acest text va fi afișat în partea dreaptă a ecranului

13. Eticheta neordonată a listei

Aceasta este o listă neordonată

Aceasta este o listă neordonată

14. Eticheta listei comandate

Acesta este numărul 1 din lista mea

Acesta este numărul 2 din lista mea

Notă:

1. Aceste etichete pot fi, de asemenea, combinate. Dacă doriți un text subliniat subliniat, puteți utiliza Acest text va fi îndrăzneț și subliniat

2. Cu toate acestea, închideți întotdeauna prima etichetă pe care ați deschis-o ultima dată. În exemplul de mai sus, a fost deschis FIRST, înainte de tag, dar a fost închis LAST.

Exemplul 5

Totul despre HTML

HTML este acronimul pentru HyperText Markup Language

Limba este alcătuită dintr-un set de coduri și simboluri care vor genera:

text,

imagini,

sunete,

rame

animație în paginile browserului dvs.

Două moduri comune de a începe site-ul dvs. sunt fie:

pentru a crea propriile coduri într-un simplu editor de text și a le salva ca fișier .htm. sau

utilizați un program generator de HTML.

Etichetele diviziei HTML

Regulă orizontală

Regulile orizontale sunt utilizate pentru a diviza sau subdiviza secțiunile paginii dvs. Web.

eticheta este utilizată pentru a crea o linie orizontală și poate fi modificată pentru a crea diferite tipuri de linii prin modificarea dimensiunii, culorii sau lățimii acestora.

De exemplu

Linie solida

eticheta este folosită pentru a crea o linie solidă. Modifică ușor de la eticheta regulii orizontale pe măsură ce produce linia fără decuplarea 3D generată de

etichetă.

Exemplul 6

Totul despre HTML

HTML este acronimul pentru HyperText Markup Language

Limba este alcătuită dintr-un set de coduri și simboluri care vor genera:

text,

imagini,

sunete,

rame

animație în paginile browserului dvs.

Două moduri comune de a începe site-ul dvs. sunt fie:

pentru a crea propriile coduri într-un simplu editor de text și a le salva ca fișier .htm. sau

utilizați un program generator de HTML.

Etichete de imagine

Documentele HTML vă permit să inserați imagini utilizând etichete imagine. Puteți să răsfoiți o imagine dintr-o adresă URL online sau din propriul computer. Eticheta imaginii înseamnă "sursa de imagine"; prin urmare, calea imaginii trebuie definită după atribut. Dacă imaginea este găsită în același director ca și documentul dvs. sursă, nu este necesar să introduceți întregul director de cale.

De exemplu

sau sau

Etichetă de aliniere

Încă o dată, puteți folosi atributul ALIGN pentru a afișa imaginea fie în partea centrală, din partea dreaptă, fie în partea stângă a browserului.

Eg1

Notă: Este posibil ca browserul dvs. să nu accepte această etichetă. Prin urmare, puteți utiliza eticheta chiar înainte de eticheta imaginii pentru a centra imaginea în browser.

EG2

Marimea imaginii

Dimensiunea imaginii afișate poate fi modificată utilizând atributul WIDTH și HEIGHT. Puteți utiliza procentajul sau pixelii pentru a mări imaginea.

Eg1

EG2

Limita imaginii

Dacă doriți să inserați o margine în imagine, puteți folosi atributul BORDER pentru a face acest lucru.

De exemplu

Spațiu de rulare

Spațiul de rulare se referă la spațiul gol din jurul imaginii. Aceasta este o etichetă foarte utilă atunci când aveți text în jurul imaginii. Acesta este definit folosind atributul VSPACE pentru partea superioară și inferioară, iar atributul HSPACE este utilizat pentru laturile stânga și dreapta.

De exemplu

Exemplul 7

Totul despre HTML

HTML este acronimul pentru HyperText Markup Language

Limba este alcătuită dintr-un set de coduri și simboluri care vor genera:

text,

imagini,

sunete,

rame

animație în paginile browserului dvs.

Două moduri comune de a începe site-ul dvs. sunt fie:

pentru a crea propriile coduri într-un simplu editor de text și a le salva ca fișier .htm. sau

utilizați un program generator de HTML.

Coduri de culori

Puteți utiliza codurile de culoare hexazecimale furnizate de Theodora pentru a vă crea propria atmosferă a site-ului

Acesta este exemplul pe care îl aveți cu atributul vspace și hspace

Legarea etichetelor

În HTML, etichetele de conectare sunt utilizate pentru a sari de la o secțiune a paginii la alta sau de la o pagină la alta. Acestea se numesc legături interne dacă vă permit să sari de la o secțiune sau de pe pagina proprie a site-ului dvs. la alta și la Link extern când deschideți o nouă fereastră de browser de pe un alt site web. Avantajul major al legării etichetelor este că acestea vă permit să creați un site dinamic în loc să creați o pagină web derulantă.

Link extern

va afișa "Linkul de adresă Web" ca un hyperlink în pagina dvs. web și atunci când utilizatorul va face clic pe text, va încărca pagina www.webaddress.com

Link intern

Există două modalități specifice de a introduce o legătură internă:

1. Pentru a sări de la pagina curentă la o altă pagină de pe același site web

2. Pentru a sări de la secțiunea curentă a paginii la o altă secțiune din aceeași pagină.

Pentru a putea sări de la o secțiune la alta, trebuie să dai mai întâi un nume secțiunii, astfel încât eticheta să poată localiza atunci când este apelată. De exemplu, dacă secțiunea privind legăturile HTML trebuie inserată în partea superioară a paginii web, chiar deasupra liniei "Legături HTML", introduceți eticheta . Valoarea "link-uri" se va referi la secțiunea care trebuie să fie localizată; prin urmare, dacă o secțiune a paginii dvs. Web se bazează pe pisici, introduceți eticheta chiar deasupra rubricii pentru pisici.

După acest proces, trebuie să inserați și linkul din care doriți să sari. În acest exemplu, dacă doriți să sari de la partea de sus a paginii la locația "Link-uri HTML" găsită în partea de jos a paginii, introduceți linking etichetele . Se va afișa textul "Linking Tags" cu hyperlink, iar atunci când utilizatorul dă clic pe el, acesta va sari de la locația curentă la secțiunea indicată.

Exemplul 8

Totul despre HTML

Coduri de culori

Legarea etichetelor

HTML este acronimul pentru HyperText Markup Language

Limba este alcătuită dintr-un set de coduri și simboluri care vor genera:

text,

imagini,

sunete,

rame

animație în paginile browserului dvs.

Două moduri comune de a începe site-ul dvs. sunt fie:

pentru a crea propriile coduri într-un simplu editor de text și a le salva ca fișier .htm. sau

utilizați un program generator de HTML.

Coduri de culori

Puteți utiliza codurile de culoare hexazecimale furnizate de Theodora pentru a vă crea propria atmosferă a site-ului

Acesta este exemplul pe care îl aveți cu atributul vspace și hspace

Puteți găsi un util pentru a vizita site-ul Microsoft făcând clic pe acest link

Legarea etichetelor

Această secțiune va discuta despre importanța asocierii etichetelor pe site-ul dvs. web.

Notă:

Acestea sunt doar exemple privind modul în care puteți utiliza etichetele de conectare. Puteți schimba, desigur, plasarea lor pentru a face site-ul dvs. mai ușor de utilizat și atractiv.

Fereastra țintă

Fereastra țintă va încărca pagina legată într-o altă fereastră a browserului, astfel încât utilizatorul să poată rămâne pe pagina curentă a site-ului dvs. și să vizualizeze adresa hyperlink într-un alt browser.

Etichete de tabel

Introducerea de tabele pe site-ul dvs. poate fi foarte utilă pentru afișarea informațiilor într-un mod ordonat. De asemenea, vă va permite să vă ocupați mai mult de text și de grafică.

Eticheta de deschidere

este folosit pentru a spune browser-ului dvs. că tabelul din pagină începe acolo și se termină cu

etichetă. De asemenea, puteți modifica culoarea, dimensiunea și dimensiunea marginilor mesei.

Dimensiunea tabelului poate fi modificată prin utilizarea funcției

etichetă. Puteți utiliza pixelii sau procentajul pentru a modifica dimensiunea tabelului.

Puteți utiliza eticheta

de exemplu pentru a face o margine invizibilă în browserul dvs.

eticheta este folosită pentru a crea un spațiu între text și linia interioară a marginii mesei.

eticheta este folosită pentru a introduce un spațiu între linia interioară și cea exterioară a marginilor mesei.

Un tabel este alcătuit din celule care sunt definite de coloanele și rândurile din tabel. O celulă va fi spațiul în care va fi introdus conținutul. Eticheta coloanei este definită ca

tagurile și rândurile sunt definite ca șiEtichete. Pentru a modifica lățimea celulei, puteți utiliza funcția și pentru a alinia o coloană, introduceți eticheta

și

etichetă. Dimensiunea poate fi setată fie în procentaj, fie în pixeli.

De asemenea, puteți alinia rândurile și coloanele prin adăugarea atributului ALIGN în etichetele dvs. Prin urmare, pentru a alinia un anumit rând, de exemplu, introduceți eticheta

Pentru alinierea celulei, puteți folosi atributul VALIGN .

va plasa celula în centrul superior al paginii dvs.

Pentru a acoperi o coloană, puteți utiliza eticheta

pentru a seta numărul de coloane pe care ar trebui să le cuprindă celula. Rețineți că valoarea implicită este setată la 1.

De asemenea, pentru a acoperi o celulă cu mai multe rânduri, utilizați

etichetă.

Exemplul 9

Totul despre HTML

Coduri de culori

Etichete de tabel

HTML este acronimul pentru HyperText Markup Language

Limba este alcătuită dintr-un set de coduri și simboluri care vor genera:

text,

imagini,

sunete,

rame

animație în paginile browserului dvs.

Două moduri comune de a începe site-ul dvs. sunt fie:

pentru a crea propriile coduri într-un simplu editor de text și a le salva ca fișier .htm. sau

utilizați un program generator de HTML.

Coduri de culori

Puteți utiliza codurile de culori Hexadecimal furnizate de Theodora pentru a vă crea atmosfera proprie a site-ului.

Mai multe texte pot fi adăugate aici.

Etichete de masă

Această secțiune vă va oferi mai multe detalii despre etichetele de masă

rubrică
Aceasta este o altă parte a conținutului
Coloana 1	Coloana 2	Coloana 3
Expansiunea celulelor în 3 rânduri (a doua și a treia fuzionată)	Cuprins de celule în 2 rânduri (prima și a doua celulă au fuzionat)	Prima celulă
		Celula a doua
		Celula a treia
	Celula a treia	Celula a 4-a

Etichete cadru HTML

Framele HTML vă permit să creați ferestre independente într-o pagină Web. Ele sunt foarte utile deoarece vă permit să afișați mai mult de un document într-o pagină web.

Pentru a utiliza cadrele, trebuie să aveți cel puțin două fișiere .htm diferite, dintre care unul va fi numit index.htm . Fișierul index.htm va fi în cazul în care toate ferestrele vor fi afișate. Eticheta pentru cadru este definită ca si tag-ul este folosit pentru a defini setul de cadre care sunt utilizate în fișierul index.htm.

Exemplul 10

Încercați etichetele de cadre

va seta mărimea rândurilor care vor fi afișate în browserul dvs.

va seta dimensiunea coloanelor care vor fi afișate în browserul dvs.

eticheta va numi cadrul și va fi utilizată pentru a le conecta la fereastra principală.

tag-ul va fi folosit pentru a seta o margine la cadrele dvs. Setarea la 0 va asigura compatibilitatea cu toate browserele.

va stabili un spațiu între cele mai apropiate cadre.

va stabili spațiul de lățime de pe ambele părți ale cadrelor. Dimensiunea trebuie să fie setată în pixeli.

va seta dimensiunea marginii de sus și de jos în pixeli.

eticheta va putea bara de derulare verticală sau orizontală a cadrului dvs. Valoarea sa trebuie să fie setată la "da", "nu" sau "auto".

WYSIWYG Software

Există programe software numite WYSIWYG (ceea ce vedeți este ceea ce obțineți), care codifică pentru dvs., cu toate acestea acest lucru nu ar trebui să vă împiedice să învățați un minim de concepte html pentru a evita surprize neplăcute! Cu acest software, puneți textul și imaginile, iar software-ul generează simultan codul HTML corespunzător. De asemenea, va facilita includerea animațiilor sau scripturilor. Există, de exemplu:

Dreamweaver, nu gratuit, dar foarte cuprinzător și ușor de utilizat, cu un tutorial bine conceput

Editorul GoLive Photoshop

Pentru WYSIWYG gratuit, putem menționa: