Supporting the community

Foaie de Stil

Lucrul in Brut


Structura HTML si unele coduri seducatoare pentru aranjare de baza

cyberscoala

IAUP - Permisiuni

 

HTML: Modificati pagina dvs. web usor.
Index de Elemente
Text Fals
Codul HTML
Editorul pico Crearea si editarea fisierelor
De baza, pauze intre linii
caractere aldine, italice, subliniate
Culoare / fundal Adaugarea de culori si mai mult la pagina dvs
Reguli orizontale Linii de pe pagina dvs
Efectuarea de Link-uri 
Hypertext catre alte pagini
Paragraf Tab-urile si indentarile
Indenting Tabs and Indents
Gloante / Liste Numere si puncte pentru linii
Cadre Un mod mai avansat de organizare a paginii
Tabele Un mod bun de a organiza pagina.
Rame Versiunea acestei pagini
Marquee Text ce se deruleaza Adaugand sunete la pagina Dvs
Traseele mouse-ului Adauga o linie de design pe cursorul de pe ecran
Splash Creati o pagina animata
PopUp Generator de ferestre
PopUp Generator de ferestre
PopUp Generator de ferestre
Cod sursa Criptarea scriptului Protejati-va codul
Favicon pagina pictogramei
Criptati codul sursa HTML Protejati-va codul
Arhivarea creare de arhive
Waka Waka: <> Un poem distractiv de cod
Un alt tutorial HTML bun
Obtineti o diploma de design Web Unde sa continuati studiul.
Vreau sa..
GO2WEB2.0
Tutorial
HTML de la Paul Turtola
Carti online How2 pe HTML Aveti nevoie de un manual?
Aplicatii Mozilla Un alt browser GRATUIT
Putty aplicatie telnet PC gratuita
Invatati comenzile de baza Putty si UNIX.
CoreLiteFTP Client PC FTP 
FUGU FREE Mac FTP client
Irfan editor Grafic GRATUIT
Audacity editor de sunet
Face fisiere PDF si converteste.
Converteste PDF2WORD gratuit.
Converteste PDF2HTML
Convertoare PDF 
Coverter PDF spreOffice files
ZAMZAR program gratuit de conversie.
Zotero
Formate
Crearea unui fisier nou
  1. Realizarea paginii de pornire a profesorului
  2. Tema Pagina principala
  3. Sablonul de scoala
  4. Realizarea paginii de pornire a studentilor
  5. Crearea fisierului de hartie
  6. Rapid si murdar
Top zece greseli in Web Design email ted@tnellen.com pentru ajutor
Best Viewed With Any Browser

 

Editorul pico

Cand va conectati la contul dvs. scolar, veti vedea un prompt:
[tnellen@students webdocs]$
Toate fisierele dvs. vazute pe Internet se afla in directorul numit webdocs. In loc de tnellen, veti vedea datele de conectare. Aceasta este prompterul UNIX. Comanda pe care o tastati pentru a crea sau edita un fisier este pico, urmata de numele fisierului pe care doriti sa-l creati sau sa-l editati. Pentru a crea un fisier, mentineti numele simplu si litere mici urmate de html (periodic), de exemplu: pico index.html pentru a edita pagina de pornire. Pentru a crea un fisier: pico newfilename.html.
Folositi comenzile de baza Putty si UNIX din meniul de mai sus pentru a afla mai multe.

 

De Baza SUS
<center> Acesta este modul in care va centrati textul </center>

 

Spatierea unica devine un br la sfarsitul liniei <br>
Spatierea dubla devine un p la sfarsitul liniei<p> <i>italics</i>
<b>bold</b>
<u>subliniere</u> Iata un truc bun. Sa spunem ca vrei sa scrii o nota pe care nimeni nu o vede, un memento. In DOS este REM. Deschideti cu: <!--
Nota ta este intre aceste coduri. Acest lucru nu apare pe pagina web, dar va fi vazut in View Source
inchidere cu: -->
Rubricile SUS
<h1>Rubrica 1</h1>

Rubrica 2

Rubrica 3 Rubrica 4 Rubrica 5 Rubrica 6
Alinieri Orizontale SUS

<hr>

 



<hr align=left size=5 width=75%>

<hr size=3 width=50%>

<hr align=right size=1 width=25%>

<hr noshade size=5 width=50% align=center>
Font SUS


Fontul de baza poate fi stabilit utilizand formula de baza font = n formula. <base font = 4> Schimbarea fonturilor:

MARIME

 

  • <font size=+1> F </font> <font size=+2> O </font> <font size=+3> N </font> <font size=+4> T </font>

    Daca vrei asta:
    <font size=6>I</font>f daca vrei asta:

     

Stilul
  • <font face="Comic sans MS">Comic Sans Text</font>

    Alegeti o caracteristica a fontului aici (utilizati fila noua)
    Du-te aici pentru al testa. (Utilizati fila noua)

    Un avertisment: daca fontul pe care il alegeti nu este pe calculatorul utilizatorilor sau daca utilizatorul forteaza fontul pe computerul lui, alegerea dvs. nu va aparea. Cu alte cuvinte, utilizatorul trebuie sa aiba fontul pe care il alegeti si sa il permiteti sa se intample.

CULOARE <font color="green">GREEN TEXT</font> Grafice de culoricaractere speciale É é ¿ ¢ Ñ ñ etc Mai mult
Alinierea SUS
  1. <dd> Pentru a indenta doar prima linie, ca TAB intr-un paragraf, puteti folosi acest cod in fata liniei.

     

     

    <dd> Omul care a fost angajat sa fie spanzurat a fost aparent de treizeci si cinci de ani. El era un civil, daca ar fi putut sa judece dupa obiceiurile sale, care eru de plantator. Trasaturile sale erau bune - un nas drept, o gura ferma, o frunte larga, din care parul lung si intunecat ii era pieptanat in spate, cazand in spatele urechii pana la gulerul imbracamintei sale bine asezate. Purta o mustata si o barba ascutita, dar fara perciuni; Ochii lui erau mari si de culoare inchisa si aveau o expresie amabilade la care te-ai fi putut astepta cu greu ca va atarna in streang. Evident ca nu era un asasin vulgar. Codul militar liberal prevede suspendarea multor tipuri de persoane, iar domnii nu sunt exclusi.

     

  2. Pentru a incadra DOAR marginea stanga a intregului paragraf, utilizati acest cod <ul> inainte de paragraf si acesta, </ ul> la sfarsitul paragrafului.

     

    • <ul> Omul care a fost angajat sa fie spanzurat a fost aparent de treizeci si cinci de ani. El era un civil, daca ar fi putut sa judece dupa obiceiurile sale, care eru de plantator. Trasaturile sale erau bune - un nas drept, o gura ferma, o frunte larga, din care parul lung si intunecat ii era pieptanat in spate, cazand in spatele urechii pana la gulerul imbracamintei sale bine asezate. Purta o mustata si o barba ascutita, dar fara perciuni; Ochii lui erau mari si de culoare inchisa si aveau o expresie amabilade la care te-ai fi putut astepta cu greu ca va atarna in streang. Evident ca nu era un asasin vulgar. Codul militar liberal prevede suspendarea multor tipuri de persoane, iar domnii nu sunt exclusi. </ul>

     

  3. Pentru a alinia marginile din stanga si din dreapta, utilizati <blockquote> la inceputul paragrafului si </ blockquote> la sfarsitul paragrafului.

     

    <blockquote> Omul care a fost angajat sa fie spanzurat a fost aparent de treizeci si cinci de ani. El era un civil, daca ar fi putut sa judece dupa obiceiurile sale, care eru de plantator. Trasaturile sale erau bune - un nas drept, o gura ferma, o frunte larga, din care parul lung si intunecat ii era pieptanat in spate, cazand in spatele urechii pana la gulerul imbracamintei sale bine asezate. Purta o mustata si o barba ascutita, dar fara perciuni; Ochii lui erau mari si de culoare inchisa si aveau o expresie amabilade la care te-ai fi putut astepta cu greu ca va atarna in streang. Evident ca nu era un asasin vulgar. Codul militar liberal prevede suspendarea multor tipuri de persoane, iar domnii nu sunt exclusi. </blockquote>

     

  4. Linia suspendata

     

    <p style='text-indent:-25'> (25 este arbitrar din partea dvs)

    Omul care a fost angajat sa fie spanzurat a fost aparent de treizeci si cinci de ani. El era un civil, daca ar fi putut sa judece dupa obiceiurile sale, care eru de plantator. Trasaturile sale erau bune - un nas drept, o gura ferma, o frunte larga, din care parul lung si intunecat ii era pieptanat in spate, cazand in spatele urechii pana la gulerul imbracamintei sale bine asezate. Purta o mustata si o barba ascutita, dar fara perciuni; Ochii lui erau mari si de culoare inchisa si aveau o expresie amabilade la care te-ai fi putut astepta cu greu ca va atarna in streang. Evident ca nu era un asasin vulgar. Codul militar liberal prevede suspendarea multor tipuri de persoane, iar domnii nu sunt exclusi.

     

  5. Pentru a alinia marginile din stanga si din dreapta, utilizati <p align = justify>. Caveat: este posibil sa existe mai mult spatiu alb intre cuvinte pentru a obtine acest aspect, asa ca aveti grija.

    <p align=justify>

    Omul care a fost angajat sa fie spanzurat a fost aparent de treizeci si cinci de ani. El era un civil, daca ar fi putut sa judece dupa obiceiurile sale, care eru de plantator. Trasaturile sale erau bune - un nas drept, o gura ferma, o frunte larga, din care parul lung si intunecat ii era pieptanat in spate, cazand in spatele urechii pana la gulerul imbracamintei sale bine asezate. Purta o mustata si o barba ascutita, dar fara perciuni; Ochii lui erau mari si de culoare inchisa si aveau o expresie amabilade la care te-ai fi putut astepta cu greu ca va atarna in streang. Evident ca nu era un asasin vulgar. Codul militar liberal prevede suspendarea multor tipuri de persoane, iar domnii nu sunt exclusi.

     

  6. Pentru a copia doar textul si a utiliza NO codul HTML incercati <pre> inainte de text si </ pre> la sfarsitul acestuia.
    <pre>
    Omul care a fost angajat sa fie spanzurat a fost aparent de treizeci si cinci de ani. El era un civil, daca ar fi putut sa judece dupa obiceiurile sale, care eru de plantator. Trasaturile sale erau bune - un nas drept, o gura ferma, o frunte larga, din care parul lung si intunecat ii era pieptanat in spate, cazand in spatele urechii pana la gulerul imbracamintei sale bine asezate. Purta o mustata si o barba ascutita, dar fara perciuni; Ochii lui erau mari si de culoare inchisa si aveau o expresie amabilade la care te-ai fi putut astepta cu greu ca va atarna in streang. Evident ca nu era un asasin vulgar. Codul militar liberal prevede suspendarea multor tipuri de persoane, iar domnii nu sunt exclusi.
    </pre>
    

Efectuarea unei legaturi SUS
Crearea unei legaturi la un site:
<a href="http://www.yahoo.com/">Yahoo</a>
Adresa completa este necesara: http://
Yahoo Catre un fisier din directorul dvs. Web:
<a href="cylib.html">Cybrary</a>
Observati cum nu trebuie sa introduceti adresa URL completa, ci doar numele fisierului.
Cybrary In aceeasi pagina:
Cand faceti clic pe  "SUS" in stanga, accesati partea de sus a acestei pagini. Apoi, cand faceti clic pe "Efectuarea legaturilor" in partea de sus, ajungeti la acest loc. De ce?
Codul pentru a crea linkul este: <a href="#top">TOP</a> tpentru a merge in partea de sus. Notati utilizarea simbolului #
Al doilea cod este: <a name=top> care este plasat la fata locului la care doriti sa mergeti. Utilizarea unui grafic ca link: Scriind acest lucru:
<a href="http://www.utoronto.ca/webdocs/HTMLdocs/NewHTML/htmlindex.html">
<img src="http://www.tnellen.com/pics/html.gif">LINK</a> face asta:
Deschiderea altui browser Poate doriti ca cineva sa vada o alta pagina, in special una care nu se afla in controlul dvs. si nu doriti ca el sa va piarda pagina, astfel incat adaugati target=new la sfarsitul codarii legaturii.
<a href="http://www.yahoo.com/" target=new>Yahoo</a>
Yahoo email Ted
<a href="mailto:tnellen@tnellen.com">ted@tnellen.com</a>
Marcatori SUS
<li> a bullet

 

  • Numerotarea automata: Puneti <ol> inaintea listei si </ ol> la sfarsitul listei. Notati fiecare element trebuie sa aiba un <li> in fata care converteste de la un marcator la un numar. Numerotarea este automata, astfel incat sa puteti rearanja elementele din lista, mentinand in acelasi timp o secventiere corespunzatoare.

<ol>

  1. <li> an item
  2. <li> an item
  3. <li> an item
  4. <li> an item
  5. <li> an item
  • </ol> Pentru mai multe, verificati urmatoarele:Liste Mai multe Liste OL element si mai mult folosind un gif, o imagine sau o pictograma
<img src="http://www.tnellen.com/pics/dotred.gif" WIDTH=14 HEIGHT=14>
Culoare: SUS

<body bgcolor=#?????? text=#?????? link=#?????? alink=#?????? vlink=#??????>
DEFAULT: <body bgcolor=white text=black link=blue alink=magenta vlink=magenta>
bgcolor este culoarea de fundal a paginii, pentru a nu fi confundata cu fundalul care este de obicei un gif sau jpg.
link este culoarea link-ului inainte de a merge la el
alink este o legatura activa
vlink este o legatura vizualizata
SAU
<body background="http://www.website.com/filename.gif" or filename.jpg text=#....>
Pentru fundal fix face acest lucru:
<body bgproperties=fixed background="http://www.website.com/filename.gif" or filename.jpg text=#....> Daca utilizati un alt grafic decat propriul dvs. grafic sau cele care apar pe www.tnellen.com/pics/ sau pe un site care spune ca puteti utiliza imaginile lor, trebuie sa cereti permisiunea de a utiliza acea imagine. Utilizati acest formular ca e-mail sau ca o scrisoare catre detinatorul drepturilor de autor, inainte de a utiliza graficul. bgcolor and background pot fi pe aceeasi pagina. Background va fi implicit, dar daca background nu se poate incarca, bgcolor va prelua.

  • ?????? Este codul de culoare din diagrama de culori
  • Fundalul este o grafica GIF sau jpg.

NOTA: Puteti folosi nume de culori in multe cazuri in loc de cod pentru unele culori, dar nu toate. In cele mai multe cazuri si cu cele mai multe browsere, singurul cuvant al culorilor de baza, cum ar fi alb, negru, rosu, albastru, verde, gri, galben etc., va functiona. Cu toate acestea, compusi numiti culori ar putea sa nu. De asemenea, culoarea depinde de monitorul utilizat pentru vizualizarea culorii, deci daca cautati o culoare foarte bine reglata pe un monitor foarte bun, aceasta culoare ar putea sa nu apara in acest fel pe un monitor ieftin. Deci, ati putea corecta codul corporal de mai sus astfel:
<body bgcolor=white text=black link=blue alink=magenta vlink=magenta>

Culoarea fontului

F + U + N = Invatand impreuna pe Internet
  • <font SIZE="+1" COLOR="#FF0000"> F </font>
    <font SIZE="+1" COLOR="black">+ </font>
    <font SIZE="+1" COLOR="green">U </font>
    <font SIZE="+1" COLOR="black">+ </font>
    <font SIZE="+1" COLOR="blue">N </font>
    <font SIZE="+1" COLOR="black">= </font>
    < font SIZE="+1" COLOR="maroon">Invatand impreuna pe Internet</font>
Adaugarea unui grafic SUS

Adaugarea unui grafic este simpla. Dupa ce ati gasit un grafic pe care doriti sa il adaugati la pagina dvs., localizati documentul in care doriti sa plasati graficul. Pentru a adauga spatiu inainte si dupa grafic, utilizati codul <p>. Intre aceasta scriere de cod scrieti <img src = "URL of GRAPHIC">. Daca doriti sa centrati, utilizati codul de centru: <center> inainte de el si </ center> dupa acesta. Mai degraba decat sa aveti graficul pe serverul dvs. care ar putea incalca drepturile de autor, indicati-l utilizand adresa URL. Pentru a gasi adresa URL a graficului, utilizati butonul dreapta de la mouse pe grafic si gasiti Proprietati. Faceti clic pe butonul din stanga pe Proprietati si adresa URL va fi dezvaluita. Copiati adresa URL din Proprietati in pagina in care doriti sa fie afisata grafica.

Daca utilizati un alt grafic decat propriul dvs. grafic sau cele care apar pe www.tnellen.com/pics/ sau pe un site care spune ca puteti utiliza imaginile lor, trebuie sa cereti permisiunea de a utiliza acea imagine. Utilizati acest formular ca e-mail sau ca o scrisoare catre detinatorul drepturilor de autor, inainte de a utiliza graficul.

    Pentru a vedea unele imagini grafice incercati:
Index de grafica Pentru mai multe imagini grafice: codificare avansata. - indicarea sursei - etichete de latime si inaltime - Photoshop Pentru a afla mai multe despre codificarea grafica, consultati mai multe despre lucrul cu imaginile.
<img src="http://www.tnellen.com/pics/elecschl.gif" width="72" height="72">Alinierea semnelor permite tilizarea clara a alfabetului.
<img src="http://www.tnellen.com/pics/u.gif" align="bottom" WIDTH="59" HEIGHT="61">

Tabele SUS
Tabelele sunt folosite pentru proiectare si pentru a va permite sa aveti fundaluri nebune si sa ne lasati sa citim pagina. Ideea este ca o caseta de text sa fie dezactivata si centrata pe pagina cu fundal. Acest lucru va permite dvs. sa aveti fundalul si noi sa vedem textul. Utilizati View Source (Vizualizare sursa) pentru a vedea codificarea tabelului si cum se face in aceasta pagina. Asa functioneaza. Pe pagina dvs. veti vedea codul de tabel care se afla in partea de sus a paginii dvs. Puteti ajusta partea % care este la 80% acum. In eticheta td adaugati la td: bgcolor = white pentru a vedea cum functioneaza. Jucati-va cu acest design. Pentru a face celula (td) transparenta:
<TD style="background:transparent"> Instructiuni pentru tabele. Si un alt esantion de tabele. Si mai multe tabele. Margini de tabele
Adaugarea sunetului SUS

Citeste mai intai asta.
Sunet Adaugarea sunetului la pagina dvs
Sunetul poate fi dificil. Mai intai trebuie sa gasiti sunetul. De exemplu, puteti gasi clipul de sunet dorit la CDNOW. Dupa ce ati gasit clipul, redati-l in format Windows Media. In timpul redarii, faceti clic pe Fisier si faceti clic pe proprietati pentru a gasi adresa URL a clipului audio. Evidentiati intreaga adresa URL a clipului pe care il ascultati. Va fi lung. Apoi utilizati adresa URL copiata cu eticheta corespunzatoare de mai jos. Plasati acest cod in partea de sus a paginii sub eticheta BODY.

Eticheta pentru fundal de sunet <BGSOUND> The BGSOUND tag folosita cu: SRC Formatul pentru acest atribut este sa-l setati egal cu calea si numele fisierului de sunet care urmeaza sa fie inradacinat in document.
 

LOOP Fisierele de sunet pot fi implementate ca sunete de fundal utilizand atributul LOOP.
DELAY Un autor HTML poate, de asemenea, sa intarzie redarea unui sunet inline pentru un numar de secunde X utilizand atributul DELAY. De exemplu:

<BGSOUND SRC="*.wav">
Reda fisierul audio o data.
<BGSOUND SRC="*.wav" LOOP=infinite>
Reda fisierul de sunet din nou si din nou.
<BGSOUND SRC="*.wav" DELAY=10>
Reda fisierul audio dupa o intarziere de 10 secunde.

Eticheta de sunet

<SOUND> Eticheta SOUND este utilizata cu:

SRC Formatul pentru acest atribut este sa-l setati egal cu calea si numele fisierului de sunet care urmeaza sa fie inradacinat in document.
LOOP  Fisierele de sunet pot fi implementate ca sunete de fundal utilizand atributul LOOP.
DELAY Un autor HTML poate, de asemenea, sa intarzie redarea unui sunet inline pentru un numar de secunde X utilizand atributul DELAY.

<SOUND SRC="*.wav">
Reda fisierul audio o data.
<SOUND SRC="*.wav" LOOP=infinite>
Reda fisierul de sunet din nou si din nou.
<SOUND SRC="*.wav" DELAY=10>
Reda fisierul audio dupa o intarziere de 10 secunde.

Eticheta incorporata

<embed src>

Eticheta Embed este folosita cu:

SRC Formatul pentru acest atribut este sa-l setati egal cu calea si numele fisierului de sunet care urmeaza sa fie inradacinat in document.
LOOP Fisierele de sunet pot fi implementate ca sunete de fundal utilizand atributul LOOP.
DELAY Un autor HTML poate, de asemenea, sa intarzie redarea unui sunet inline pentru un numar de secunde X utilizand atributul DELAY.

<embed SRC="*.wav">
Reda fisierul audio o data.
<embed SRC="*.wav" LOOP=infinite>
Reda fisierul de sunet din nou si din nou.
<embed SRC="*.wav" DELAY=10>
Reda fisierul audio dupa o intarziere de 10 secunde.
Arhivarea: ar trebui sa va arhivati toata lucrarea la sfarsitul fiecarei perioade de marcare.
050605 este data: luna, ziua, anul; incare faceti noua arhiva. Utilizati Astazi pentru acest NOT 102004, cu exceptia cazului in care este 6 mai 2005.
webdocs)$ mkdir 050605 ENTER Aceasta comanda face noul director
webdocs)$ cp *.* 050605 ENTER Aceasta comanda copiaza toate fisierele dvs. in noul director de arhiva
webdocs)$ cd 050605 ENTER  Aceasta comanda va schimba sau va muta in noul director
050605) $ chmod +r * ENTER Aceasta comanda permite altora sa vizualizeze acest nou director
050605)$ cd .. ENTER Aceasta comanda va intoarce in directorul principal
webdocs)$ Acum te-ai intors in directorul principal Ori de cate ori arhivati adaugati un link la noua arhiva in "journal.html".
Ar trebui sa arate astfel:
<li><a href="http://students.ithsnyc.org/??????/050605/">May 6, 2005</a>
Nota: inlocuiti ?????? Cu datele de conectare.  mail link
<a href="mailto:tnellen@tnellen.com"><img src="http://www.tnellen.com/pics/mailbox.gif" WIDTH="31" HEIGHT="38">mail link</a>
© Ted Nellen 2002 - 2013

Translated by: Irina Vasilescu

Link to the original page: Click Here

We love giving back to the community

We believe in helping people and that matter to us more than anything else. Since the very beginning of our company, our team have been willing and wishing to help.