Sådan oprettes et websted, del 2, komplet websted lavet af 0 i HTML, CSS med billedgalleri - video tutorial

Dette selvstudium beskriver et websted ved hjælp af HTML og CSS, der dækker alle faser: hjemmeside udvikling,
oprette en konto på en gratis hosting og endelig uploade filer vores hjemmeside på, at hosting, gratis hosting er en hurtig metode til at sætte en hjemmeside vores online inden for få minutter, den ulempe ved denne metode er, at vi vil have nogle annoncer, der vises på alle tidspunkter i toppen (header ovenfor).

Enhver, der ønsker at åbne en hjemmeside, du behøver at vide HTML og CSS, behøver ikke at være ekspert i HTML (Hyper Text Markup Language), men nogle kodeoplysninger er absolut nødvendige for at forstå, hvordan disse ting fungerer.

Selv hvis du bygger et websted, du stadig nødt til at have nogen idé om, hvad der sker gennem disse filer vil kræve periodisk korrektion af fejl eller opnåelse af forandringer.

Mange mennesker løber væk fra kode, mange sammenligner kode med hieroglyfer, det er slet ikke sådan, nogen sagde engang: "KODE ER POETRY", han havde ret, når du ser, at noget er født fra en række kodelinjer, du føler dig vidunderlig, du bygger en virtuel verden med kun tastatur og mus.

Vi brugte applikationer bygget af softwarevirksomheder i lang tid, vi udførte kun computerdrift, det er tid til at udføre programmering, faktisk er det ikke et programmeringssprog, det er et "markup-sprog", men vi vil henvise til det er som et programmeringssprog, fordi det lyder temmelig underligt "markup sprog", HTML er et af de nemmeste programmeringssprog (markup), der bruges i dag, vi ser HTML på ethvert websted, mange software har i de komponenter af HTML, dette programmeringssprog er overalt, det er tid til at lære det.

Den første gang kan være mindre skræmmende, men hvis du er omhyggelig, end du vil straks forstå, at ikke alt er det så svært er enkle og smukke ting, vi skaber noget med vores hænder, det er det vigtigste.

Vi vil lære det grundlæggende, så vi lærer at indtaste tekst på en webside, så vil vi arrangere og vil farve teksten, bruger vi en sidetypografi CSS (cascading style sheets), som vi vil placere alle elementer på siden HTML overhovedet, så du vil placere på vores hjemmeside er lavet til at ligne et stykke.

Du vil lære enkle teknikker, grundlæggende HTML og CSS, selvom disse er grundlæggende ting i HTML og CSS, vil skabe overblik fornøjelig.

Til denne tutorial skal du væbne dig med opmærksomhed og tålmodighed, denne tutorial er ikke noget, vi har råd til at fortsætte lidt, om rulle par sekunder, du kan gå glip af noget meget vigtigt og du vil se bagefter ikke længere giver mening, koncentration oplysningerne er ekstremt høj, og det er derfor, jeg beder dig at være meget, meget forsigtig.

Efter denne tutorial, selv intensivt kursus vil jeg sige, vil du have en bedre idé om, hvad HTML og CSS, kan du styre koden godt, og du forstår HTML-dokument, føler, at HTML er ikke kun en vifte af heroglife vil sprede, du ved, hvad det er, når man ser på en HTML eller CSS én.

Vi vil lære om tags (tags), har vi her nogle eksempler på tags (tags), som du kan bruge i et HTML-dokument, så fortvivl ikke, behøver ikke at huske dem alle, er du nødt til at lære blot det grundlæggende i den første tabel resten kan findes her på hjemmesiden eller på nettet, når du har brug for dem.

Selv tabellerne er bestilt disse tags, er lavet ved hjælp af HTML.

Grundlæggende elementer (tags).

Definerer et filformat Web
dokument header
Tilul dokument
HTML-side krop
BGCOLOR = farve Baggrundsfarve på siden
TEKST =farve Tekstfarve på siden
LINK =farve Ikke besøgte link farve side
VLINK =farve Besøgte link farve på siden
ALINK =farve Link Color under klik brugeren exacutat
BAGGRUND = url Baggrundsbillede side
afsnit
<Hn> <Hn> Undertitlen af ​​dokumentet niveau (n = 1-6)
Specifikke egenskaber af indrammede tekst
SIZE =n Teksten størrelse er 1-7
FACE ="A, b" Angiv font: aHvis det er tilgængeligt, eller b
COLOR =s Tekstfarve: enten en farve navn eller en RGB-værdi
newline
oplysninger forformatteret
HTML Comenatriu
Materiale centre i side
vandrette lineal
SIZE =x Lineal højde i pixels
Bredde =x Lineal bredde i pixels eller procenter
NOSHADE Deaktiver visning af skygge for den vandrette lineal
align =x Tilpasningen vandrette lineal på siden (venstre, center, højre)
COLOR =x Color vandrette lineal (kun IE)
Mark typen anker
Href =url hypertekst henvisning
Href =#name Henvisning til et internt anker
Navn =navn Definitionen af ​​interne ankre

Elementer til lister .

Beskrivelse definition
definition List typen
Inden definition
Feature liste
<OL Bestilt liste (nummereret)
TYPE =tip Nummereringen. Mulige værdier: A, a, jeg, jeg, 1
START =x Antallet af startede ordnet liste
<UL Uordnet liste (markeret)
TYPE =formular Form bogmærke. Mulige værdier: cirkel, firkant, disc.

Tegn formatering elementer .

Indsæt tekst med fed
Indsæt tekst i kursiv
Indsæt fremhævet tekst
Proportional skrifttype tekst
citation bibliogarfica
oversigt Program
Style fremhævning logik
Tekst tastatur
Fremhævning stærk logik
Program eller variabel
<BASEFONT SIZE = n> Angiver standard skriftstørrelsen af ​​siden

Elementer til rammer .

Definition skrivning side
COLS =x Antallet og den relative størrelse af kolonnerne
RÆKKER =x Antallet og relative størrelse linjer
Border =x Specificerer status "on" eller "off" for FRAMESET-rammen (1 eller 0)
frameborder = x Angiver rammen størrelse
FRAMESPACING = x Mængden af ​​plads mellem to tilstødende rammer
Definitionen på et bestemt billede
SRC =url URL kilde til rammen
NAME =navn Rammenavn (bruges sammen med TARGET = navn som en del af ankermærket
rulning =SCRL Definer option bar derulare.Valori muligt: ​​på (aktivere), off (inaktiv), auto (automatisk)
frameborder =x Størrelsen af ​​grænsen rundt om rammen
marginheight =x Den ekstra plads over og under en vis ramme
marginwidth =x Suplimetar plads til venstre og højre for en specifik
Afsnit side vises for brugere, der ikke kan se en ramme
Framework (kun (IE)
SRC =url ramme kilde
NAME =s Vinduet navn (nyttigt for TARGET)
HEIGHT =x Embedded ramme højde
Bredde =x Embedded ramme bredde

Elementer til tabeller .

HTML-tabel
Border =x tabel border
cellpadding =x Den ekstra plads i tabelceller
cellspacing =x Den ekstra plads mellem tabelceller
Bredde =x Pålagt bredde bord
FRAME =værdi Finjustering af bordet
REGLER =værdi Linealer finjustering table
bordercolor = farve farve Specifikationer Tabel grænsen
BORDERCOLORLIGHT = farve Den lysere farve af de to farver specificeret
BORDERCOLORDARK = farve Den mørkere farve af de to farver specificeret
align =til venstre Justerer bordet til venstre margen på siden, og teksten flyder højre side
align =højre Justerer tabellen til højre kant af siden og teksten flyder til venstre
hspace =x Suplimetar vandret plads rundt om bordet
vspace =x Suplimetar lodret plads omkring bordet
COLS =x Angiver antallet af kolonner i en tabel
Definerer et sæt kolonnedefinitioner ved hjælp af markering
<COL Bredde =x> Definerer en kolonne bredde i pixel
Definerer overskriften tabellen
Definerer bordet krop
Linje bord
BGCOLOR =farve Angiver baggrundsfarven for hele linjen
align =tilpasning Cell tilpasning til den aktuelle linje (venstre, center, højre)
Datacelle i tabellen
BGCOLOR =farve Angiver baggrundsfarven for cellen data
colspan =x Antallet af kolonner, der dækker aktuelle celle data
rowspan =x Antallet af linier strækker aktuelle celle data
align =tilpasning Rettes stoffet af cellen date.Valori mulige: (venstre, højre, center)
VALIGN =tilpasning Lodret justering af materialet fra cellen date.Valori mulige: (top, bund, midten)
BAGGRUND =url Angiver baggrundsbillede for tabelcelle
NOWRAP Lad ikke opdele tekstlinjer inden for en celle
align =baseline Juster data celler til grundlinjen af ​​tilstødende tekst
align =karakter Justerer en kolonne til et specifikt tegn (standardtegnet er ".")
align =retfærdiggøre Juster både den venstre kant og højre kant af teksten

Produkter til tilføje billeder.

<IMG Mærkning input billeder
SRC =url Kildefil grafik
ALT =tekst Alternativ tekst skal vises, hvis det er nødvendigt
align =tilpasning Justering af billedet på siden. Mulige værdier: top (top), midterste (i midten), bund- (nedenfor), venstre (venstre), højre (højre)
HEIGHT =x Billede højde (i pixel)
Bredde =x billede bredde
Border =x Rammen omkring billedet, når det anvendes som hyperlinks
hspace =x Den ekstra plads omkring billedet vandret (i pixel)
vspace =x Den ekstra plads omkring billedet lodret (i pixel)

Forms elementer.

Aktiv HTML-formular
ACTION =url CGI program på den server, der modtager data
METODE =metode Hvordan data sendes til serveren (GET eller POST)
<INDGANG Camp tekst eller andre data input
TYPE =option Indtastningstype . Mulige værdier: tekst, adgangskode, afkrydsningsfelt, skjult, fil,
Radio, indsende, nulstille billede.
NAME =navn Den symbolske navn værdifeltet
VALUE =værdi Indhold standard felt tekst
CHECKED = option Knap / afkrydsningsfelt markeret som standard
SIZE =x Antallet af tegn i et tekstfelt
SIZE =x Det maksimale antal tegn er tilladt
Gruppe afkrydsningsfelter
NAME =navn Den symbolske navn værdifeltet
SIZE =x Antallet af menupunkter, der vises én gang (standard = 1)
FLERE =x Giver flere valg af menupunkter
<MULIGHED Særligt valg i et felt
VALUE =værdi Den resulterende værdi af denne menuvalget
Camp forstærkning tekst på flere linjer
NAME =navn Den symbolske navn værdifeltet
RÆKKER =x Antallet af linjer af tekstboksen
COLS =x Antallet af kolonner (tegn) per linie af tekstboksen
Del logisk form, i dele
Navn tilhørende sæt felter (fieldsets)
align =s Angiv tilpasningen legende (forklaring) vises (top, bund, venstre, højre)
tabindex =x Angiv ordrelinjer, når brugeren trykker på Tab-tasten
ACCESKEY =c Hvilket giver specifik nøgle fra tastaturgenvejen knyttet til et bestemt punkt
DEAKTIVERET Elementet er inaktiv, men vises på skærmen
skrivebeskyttet Elementet vises på skærmen, men kan ikke redigeres

Avancerede elementer.

Specifikke oplysninger om model stilarter
TYPE =val Typen af ​​stilmodel. Normalt "tekst / css"
Normalt indeholder et script Javascript i din webside
LANGUAGE =sprog Sproget
EVENT =begivenhed Begivenhed, der udløser udførelsen af ​​specifikke scripts
TIL =numeobiect Objekt Navn side der fungerer script

DOWNLOAD HTML TABELLER MED TAGS

Hvis du ønsker at besøge stedet gennemført tutorial, kan du få adgang på denne adresse: http://www.videotutorial.150m.com.

Jeg anbefaler, at du lyne den vedhæftede fil og studere de tre filer html eller CSS-fil ved hjælp af Notepad ++ eller anden redigering program websider på denne måde kan foretage ændringer Cau kan endda gøre notater under det du vil lære html uden dig konto.

Du ønsker dig et behageligt og byder dig velkommen på følgende tutorials i denne serie og videre.

DOWNLOAD FILES TEST

af Dan Constantin
tutorialegimp.blogspot.com
Cristian Cismaru: Jeg kan godt lide alt relateret til IT&C, jeg kan godt lide at dele den erfaring og information, jeg indsamler hver dag. Jeg lærer at lære dig!

Se kommentarer (333)

  • Very nice, tonsvis af oplysninger i denne tutorial.
    Denne tutorial kan kaldes infusion af HTML og CSS.
    Måske har du ikke kommer til at lære i et par måneder, du kan lære her i en time eller deromkring, jeg har set det hele før bliver bogført og kan sige, at imponeret mig citere oplysninger kan passe ind i en tutorial.
    På et tidspunkt følte jeg behov for at drikke vand, selv om jeg kun set den lærer, heller ikke jeg vil tænke, citerer Dan drak vand efter det.
    Der er noget ikke at lære HTML og / eller CSS efter denne tutorial.

  • Aoleu, hvad jeg har prøvet i omkring 3 måneder for at begynde at lære, har jeg stadig ikke tid...
    Mange tak, jeg ser det omhyggeligt!

  • Cristi-adminVery nice, tonsvis af oplysninger i denne tutorial.
    Denne tutorial kan kaldes infusion af HTML og CSS.
    Måske har du ikke kommer til at lære i et par måneder, du kan lære her i en time eller deromkring, jeg har set det hele før bliver bogført og kan sige, at imponeret mig citere oplysninger kan passe ind i en tutorial.
    På et tidspunkt følte jeg behov for at drikke vand, selv om jeg kun set den lærer, heller ikke jeg vil tænke, citerer Dan drak vand efter det.
    Der er noget ikke at lære HTML og / eller CSS efter denne tutorial.

    ja, du har ret, Cristi, men jeg er skuffet, fordi jeg troede, du ville lave en tutorial :( men alligevel, godt gået, meget god tutorial

    • Det er ikke pænt, det du sagde, og jeg fortæller dig det ærligt, denne mand kæmpede i cirka halvanden time for at lære dig, hvordan du laver en hjemmeside fra bunden, og du siger, at du er skuffet, fordi han ikke gjorde det? Kan du forestille dig, hvor meget arbejde manden har lagt i, og hvor meget tid han har mistet for at lære hver enkelt af os det grundlæggende i html og css, tænk før du åbner munden, at det ikke ville passe dig at lægge i arbejdet og så forlade andre ubrugelige kommentarer som at du er skuffet over, at en anden ikke lagde denne tutorial, vær taknemmelig for at du har noget at lære af ;)

  • næb:
    Cristi ja du har ret, men jeg er skuffet, fordi jeg troede, at du vil gøre tutorialu men alligevel dan bravo meget god tutorialu

    Hvad tror du, at serien om "Sådan laver man en hjemmeside" er slut.
    I den næste tutorial vil være mig.
    For hvad det næste tutorial jeg bliver nødt til at blive set denne tutorial udført af Dan.
    Hvad jeg præsentere er forskellig fra den tutorial jeg lavede aza Dan, men oplysningerne i det vil være uundværlig for korrekt forståelse af tingene.
    Er flere måder at udgive indhold på internettet, men alle har en fællesnævner, HTML og CSS, uden dem kan du ikke gøre noget.

  • Cristi-admin:
    Hvad tror du, der endte serien om "Hvordan man laver en hjemmeside".
    I den næste tutorial vil være mig.
    For hvad det næste tutorial jeg bliver nødt til at blive set denne tutorial udført af Dan.
    Hvad jeg præsentere er forskellig fra den tutorial jeg lavede aza Dan, men oplysningerne i det vil være uundværlig for korrekt forståelse af tingene.
    Er flere måder at udgive indhold på internettet, men alle har en fællesnævner, HTML og CSS, uden dem kan du ikke gøre noget.

    Hej Cristi, vil komme en række php eller js?

  • Alex:
    Hej Cristi, vil komme en række php eller js?

    Vi taler om alt, men også PHP og JS stedet binder til HTML, kan HTML ikke uden.
    PHP bruges mere til at udtrække data fra databaser, websider er stadig baseret på HTML, uanset om vi taler om dynamiske sider (php, dhtml, asp, jsp, cf) eller om vi taler om et statisk websted, vil vi bruge HTML-sproget, uden det kan intet gøres.
    Mange laver en stor forvirring "Jeg vil ikke have en HTML-side mere, jeg vil have en dynamisk php-side", det er en stor fejl, næsten alle steder bruges HTML uanset om vi taler om dynamiske sider eller statiske sider.
    JS (java script) er ikke det samme med JSP (Java Server Pages), der er afhængig af en server, der JS sites anvendes til visse scripts, ikke behov for nogen server scripts JS kan køre i en browser uden behov server komponent, og i denne tutorial, Dan brugt en række scripts JS (fotogalleri), at proppe punktlige anvendelser JS, er der ingen fuld websteder med JS i stedet er fulde websteder ved hjælp af Java server Pages, der er noget andet, selv om de synes det samme.
    Jeg ved, at du begyndte at studere "koden" for længe siden, denne tutorial er en fremragende hjælp, Dan gjorde et godt stykke arbejde med denne tutorial, du vil ikke engang indse, hvor værdifuld denne tutorial er, under tutorialen har du næsten alt tags (elementerne ), der bruges i HTML, kan du bruge dem, især da hver enkelt har en beskrivelse.
    Lad ikke din ALEX, break kode, er det baseret.
    Tro mig, du mangler IKKE POTENTIALE!

  • wow, en masse information meget velstruktureret, så alle kan forstå. Jeg så personligt selvstudiet bare for at lære noget nyt, og efterhånden som selvstudiet skred frem, blev jeg overrasket over, hvor nemt det er at lave en hjemmeside, der ikke rigtig er indlæst og meget behageligt for øjet.Tillykke med denne tutorial, men også til alle de andre. Jeg ser frem til den næste "infusion" (med Cristis ord) med information.

  • Tillykke!! Meget flot tutorial, der vil være et Rumænien fuld af webdesignere :) (lad os håbe!!)

  • Det vil være en tutorial Dreamweaver? Dc ikke bruge Dreamweaver eller i din tutorials?

    Tillykke med alle tutorials... du er den bedste ;)

  • Hej.. tutorialen er virkelig cool, der er masser af information.. og jeg tror, ​​at jeg var nødt til at lære grundlæggende html på forside 98 ved at lave snesevis af tests taget fra bøger på biblioteket, fordi jeg ikke havde net på det tidspunkt og nu kan jeg se en tutorial, der forklarer alt, hvad jeg har brug for at vide..det kan ses, at jeg har udviklet mig :)))..Jeg kunne godt lide, at det blev forklaret trin for trin, og at de blev lagt på hjemmesiden alle de grundlæggende kommandoer + et eksempel der kan arbejdes videre med.. det kan ses at I ved hvad I laver, I er rigtige lærere!!
    Alligevel meget af dem, der arbejder i webdesign hjælp programmer, der automatisk gør ordrer og mit spørgsmål er, vil du lave en tutorial med et sådant program ??
    Jeg ved, at du har lavet denne tutorial for at forstå kommandoerne og dermed en bedre forståelse af webdesign-programmerne..men alligevel er jeg nysgerrig efter at se, hvad du vil fortsætte med denne serie af tutorials, fordi der er meget snak om dette emne, selv hvis nogle synes, det er kedeligt, når det kommer til tutorials som den lavet af Dan, som jeg ved denne lejlighed ønsker tillykke med tutorialen...

relaterede indlæg

Denne hjemmeside bruger cookies.