Deze tutorial beschrijft een site met behulp van HTML en CSS, die alle fasen: website ontwikkeling,
aanmaken van een account op een gratis hosting en ten slotte het uploaden van bestanden van onze website op die hosting, gratis hosting is een snelle methode voor het zetten van een website van onze online binnen een paar minuten, het nadeel van deze methode is dat we zullen moeten een aantal advertenties weergegeven ten alle tijden aan de top (header hierboven).
Iedereen die wil een website te openen, moet je HTML en CSS weten, niet nodig om een expert in HTML (HYper Text MArkupe Language), maar sommige code-informatie is absoluut essentieel om te begrijpen hoe deze dingen werken.
Zelfs als je een site te bouwen, moet je nog steeds geen idee van wat er gebeurt door middel van deze bestanden periodiek correctie van fouten of bereiken van veranderingen vereisen.
Veel mensen vluchten weg van code, velen vergelijken code met hiërogliefen, zo is het helemaal niet, iemand zei ooit: "CODE IS POËZIE", hij had gelijk, als je ziet dat iets wordt geboren uit een reeks regels code, voel je je geweldig, je bouwt een virtuele wereld met alleen toetsenbord en muis.
We hebben lange tijd applicaties gebruikt die door softwarebedrijven zijn gebouwd, we hebben alleen computerbewerkingen gedaan, het is tijd om te programmeren, in feite is het geen programmeertaal, het is een "opmaaktaal", maar we zullen verwijzen naar het is als een programmeertaal, want het klinkt nogal raar "opmaaktaal", HTML is een van de gemakkelijkste programmeertalen (markup) die tegenwoordig wordt gebruikt, we zien HTML op elke site, veel software heeft in het zijn componenten van HTML, deze programmeertaal is overal, het is tijd om het te leren.
De eerste keer kan minder ontmoedigend zijn, maar als je voorzichtig zijn dan u meteen zult begrijpen dat niet alles is het zo moeilijk zijn eenvoudig en mooie dingen, iets creëren we met onze handen zijn, dat is het belangrijkste.
We zullen leren de basis, dan leren we het invoeren van tekst in een webpagina, dan zullen we regelen en zal de tekstkleur, maken we gebruik van een pagina stijl CSS (cascading style sheets) waarmee we alle elementen van de pagina te plaatsen HTML helemaal, zodat u op onze website te plaatsen wordt gemaakt om te kijken als een stuk.
Je leert eenvoudige technieken, eenvoudige HTML en CSS, hoewel deze fundamentele dingen in HTML en CSS, krijgt een overzicht aangenaam te maken.
Voor deze training moet je jezelf arm met aandacht en geduld, deze tutorial is niet iets wat we ons kunnen veroorloven om door te gaan weinig of scroll enkele seconden je iets heel belangrijks kunnen missen en je zal daarna niet meer zien zinvol, concentratie de informatie is extreem hoog en dat is waarom ik u vragen heel, heel voorzichtig zijn.
Na deze tutorial, zelfs intensieve cursus zou ik zeggen, heb je een beter idee van wat HTML en CSS, kunt u de code goed onder controle te hebben en u volledig begrijpen HTML-document, het gevoel dat HTML is niet alleen een reeks van heroglife zal verdwijnen, weet je wat het is als je kijkt naar een HTML of CSS één.
We zullen leren over-tags (labels), hebben we hier een aantal voorbeelden van-tags (labels) die u kunt gebruiken in een HTML-document, maak je geen zorgen, hoeft niet te onthouden ze allemaal, moet je alleen de basis in de eerste tabel te leren de rest is hier te vinden op de site of op het net wanneer je ze nodig hebt.
Zelfs de tafels zijn gerangschikt deze tags worden gemaakt met behulp van HTML.
Basiselementen (labels).
| Definieer een bestandsformaat Web | |
| documentkop | |
| Tilul document | |
| HTML-pagina lichaam | |
| BGCOLOR = kleur | De achtergrondkleur van de pagina |
| TEXT =kleur | Tekstkleur op de pagina |
| LINK =kleur | Onbezochte koppeling kleurenpagina |
| VLINK =kleur | Bezochte link kleur van de pagina |
| ALINK =kleur | Link Color tijdens de klik gebruiker exacutat |
| ACHTERGROND = url | Achtergrond afbeelding pagina |
| paragraaf | |
| <Hn> <Hn> | De ondertitel van het document niveau (n = 1-6) |
| Specifieke kenmerken van de kadertekst | |
| SIZE =n | De tekst grootte is 1-7 |
| FACE ="A, b" | Geef font: aIndien beschikbaar, of b |
| COLOR =s | Tekst kleur: ofwel een naam kleur of een RGB-waarde |
| newline | |
| informatie geformatteerd | |
| HTML Comenatriu | |
| Materiaal centra in pagina | |
| horizontale liniaal | |
| SIZE =x | Heerser hoogte in pixels |
| WIDTH =x | Ruler breedte in pixels of percentages |
| noshade | Uitschakelen schaduw scherm horizontale liniaal |
| ALIGN =x | Lijn horizontale liniaal op de pagina (links, midden, rechts) |
| COLOR =x | De kleur van de horizontale liniaal (alleen IE) |
| Anker merk | |
| HREF =url | Hypertext Reference |
| HREF =# Naam | Verwijzing naar een intern anker |
| Naam =naam | Definitie van interne ankers |
Elementen lijsten .
| Beschrijving definition | |
| Lijst typedefinitie | |
| Term definitie | |
| Feature List | |
| <OL | Geordende lijst (genummerde) |
| TYPE =type | Typ nummering. Mogelijke waarden: a, A, i, i, 1 |
| START =x | Startnummer van de lijst besteld |
| <UL | Ongeordende lijst (en) |
| TYPE =om zo een | Vorm van de markering. Mogelijke waarden: cirkel, vierkant, disc. |
Tekenopmaak elementen .
| Tekst plakken in vet | |
| Plak tekst cursief | |
| Gemarkeerde tekst plakken | |
| Lettertype Minivan | |
| Quote bibliogarfica | |
| Programma Listing | |
| Stijl highlighting logische | |
| Tekst van het toetsenbord | |
| Markeer krachtige logica | |
| Programma of variabele | |
| <BASISVORM SIZE = n> | Hiermee geeft u het standaard lettertype van de pagina |
Elementen voor frames .
| Het definiëren van het schrijven pagina | |
| COLS =x | Het aantal en de relatieve grootte van de kolommen |
| RIJEN =x | Het aantal en de relatieve omvang van de lijnen |
| BORDER =x | Specificeert de "aan" of "uit" status voor het FRAMESET frame (1 of 0) |
| Frameborder = x | Specificeert de framemaat |
| FRAMESPACING = x | De ruimte tussen twee aangrenzende frames |
| De definitie van een bepaald kader | |
| SRC =url | URL source framework |
| NAME =naam | Framenaam (gebruikt in combinatie met TARGET = naam als onderdeel van het ankermerk |
| Scrollen =SCRL | Definieer optie mogelijk derulare.Valori bar: op (enabled), uit (uitgeschakeld), auto (automatische) |
| Frameborder =x | Rand rond de framemaat |
| Marginheight =x | Extra ruimte boven en onder bepaalde marges |
| Marginwidth =x | Extra eenheid ruimte links en rechts van een bepaald frame |
| Sectie weergegeven pagina voor gebruikers die niet kunnen zien het frame | |
| Interne Frame (voor (IE) | |
| SRC =url | Kader source |
| NAME =s | Naam venster (handig voor TARGET) |
| HEIGHT =x | Hoogte van embedded |
| WIDTH =x | Embedded framebreedte |
Artikelen voor tafels .
| HTML Table | |
| BORDER =x | Box tafel |
| Cellpadding =x | Extra ruimte binnen tabelcellen |
| Cellspacing =x | Extra ruimte tussen tabelcellen |
| WIDTH =x | Breedte opgelegd tafel |
| FRAME =waarde | Fijnafstelling van tafel |
| REGELS =waarde | Fijnafstelling van de tafel heersers |
| BorderColor = kleur | Geeft de grens kleurentabel |
| BORDERCOLORLIGHT = kleur | De lichtere kleur van de twee kleuren gespecificeerde |
| BORDERCOLORDARK = kleur | De donkere kleur van de twee kleuren gespecificeerd |
| ALIGN =links | Lijn de tafel aan de linkerzijde van de pagina en de tekst er rechts |
| ALIGN =rechts | Lijn de tabel aan de rechterkant van de pagina, en loopt de tekst naar links |
| Hspace =x | Extra eenheid horizontale ruimte rond de tafel |
| Vspace =x | Extra eenheid verticale ruimte rond de tafel |
| COLS =x | Bepaalt het aantal kolommen van een tabel |
| Definieert een set kolomdefinities met behulp van markup | |
| <KOL WIDTH =x> | Definieer een kolombreedte in pixels |
| Definieert de tabel titel | |
| Definieert de tafel lichaam | |
| Lijn tafel | |
| BGCOLOR =kleur | Hiermee geeft u de achtergrondkleur voor de hele lijn |
| ALIGN =richting | Lijn cellen in de huidige rij (links, midden, rechts) |
| De cel van de tabelgegevens | |
| BGCOLOR =kleur | Hiermee geeft u de achtergrondkleur voor de cel data |
| Colspan =x | Aantal kolommen dat de huidige mobiele data overspant |
| Rowspan =x | Aantal lijnen van de gegevens verspreid over de huidige cel |
| ALIGN =richting | Het uitlijnen van het weefsel van de mogelijke date.Valori cel (links, rechts, midden) |
| Valign =richting | Verticale uitlijning van het celmateriaal date.Valori mogelijk: (boven, onder, midden) |
| ACHTERGROND =url | Geef op de achtergrond voor tabelcel |
| NOWRAP | Sta niet toe dat de scheiding regels tekst in een cel |
| ALIGN =basislijn | Lijn cellen met basisgegevens naar aangrenzende tekst |
| ALIGN =karakter | Lijnt een kolom uit op een specifiek teken (het standaardteken is ".") |
| ALIGN =rechtvaardigen | Lijn de rand van zowel de linker en rechter rand van de tekst |
Voeg het beeld elementen.
| Markering ingang beelden | |
| SRC =url | De source grafische bestand |
| ALT =tekst | Alternatieve tekst indien nodig te laten zien |
| ALIGN =richting | Uitlijning afbeelding in de pagina. Mogelijke waarden: top (boven), midden (midden), bodem (bodem), links (links), rechts (rechts) |
| HEIGHT =x | Afbeelding hoogte (in pixels) |
| WIDTH =x | Afbeelding Breedte |
| BORDER =x | Het kader rond het beeld wanneer het wordt gebruikt als een hyperlink |
| Hspace =x | Aanvullende horizontale ruimte rondom de afbeelding (in pixels) |
| Vspace =x | Extra verticale ruimte rondom de afbeelding (in pixels) |
Elementen vormen.
| HTML-formulier actieve | |
| ACTION =url | CGI-programma op de server die de gegevens ontvangt |
| METHODE =methode | Hoe gegevens worden voorgelegd aan de server (GET of POST) |
| <INVOER | Tekstveld of andere invoerapparaten |
| TYPE =optie | Type invoerveld . Mogelijke waarden: tekst, wachtwoord, selectievakje, verborgen, bestand, radio, indienen, reset, afbeelding. |
| NAME =naam | De symbolische naam van het veld waarde |
| VALUE =waarde | Standaard inhoud van het tekstveld |
| GECONTROLEERD = optie | Knop / vakje Standaard |
| SIZE =x | Aantal tekens in een tekstveld |
| SIZE =x | Het maximum aantal toegestane tekens |
| Groep selectievakjes | |
| NAME =naam | De symbolische naam van het veld waarde |
| SIZE =x | Het aantal menu-items die ooit worden weergegeven (standaard = 1) |
| MEERDERE =x | Maakt keuze uit meerdere menu-items |
| <OPTIE | Bijzondere keuze in een veld |
| VALUE =waarde | De verkregen waarde van de selecties op het menu |
| Versterking Camp tekst op meerdere regels | |
| NAME =naam | De symbolische naam van het veld waarde |
| RIJEN =x | Aantal regels in het tekstvak |
| COLS =x | Aantal kolommen (karakters) per regel tekst box |
| Delen formulier in logische delen | |
| Naam verbonden set van velden (fieldset) | |
| ALIGN =s | Specificeert de uitlijning van de legenda (uitleg) weergegeven (boven, onder, links, rechts) |
| Tabindex =x | Hiermee wordt de volgorde van elementen als de gebruiker op de Tab-toets |
| ACCESKEY =c | Geeft aan dat de sneltoets geeft op het toetsenbord van een bepaald element |
| UITGESCHAKELD | Element is niet actief, maar wordt op het scherm |
| Readonly | Item wordt weergegeven op het scherm, maar kunnen niet worden bewerkt |
Geavanceerde elementen.
| Specifieke informatie over het model stijlen | |
| TYPE =golf | Het type stijlmodel. Gewoonlijk "text / css" |
| Meestal bevat een Javascript script in webpagina | |
| TAAL =taal | De taal die gebruikt wordt |
| EVENT =evenement | Indien de uitvoering van specifieke scripts triggers |
| VOOR =numeobiect | Object naam van de pagina waarop het script werkt |
Als u wilt controleren in zelfstudie, kunt u toegang tot dit adres: http://www.videotutorial.150m.com.
Wij raden u aan het bijgevoegde bestand uit te pakken en de studie van de drie html-bestanden, of CSS-bestand met Notepad + + of een ander programma om webpagina's op deze manier kunt u wijzigingen Cau maken bewerken kan ook aantekeningen te maken tijdens het je zal html zonder je leren account.
Ik wens u een prettige en verwelkomen u graag op de volgende tutorials in deze reeks en daarbuiten.
Bekijk reacties (333)
Zeer mooie, tonnen van informatie in deze tutorial.
Deze tutorial kan worden genoemd: infusie HTML en CSS.
Misschien heb je niet krijgt om te leren in een paar maanden kunt u hier leren in een uur of zo, ik heb het allemaal gezien voordat deze geplaatst en ik kan zeggen dat indruk op mij citaat informatie kunnen passen in een tutorial.
Op een gegeven moment voelde ik de behoefte om water te drinken, hoewel ik zag net de tutorial, noch heb ik willen denken, citaat Dan dronk water na dat.
Er is iets HTML en / of CSS niet te leren na deze tutorial.
Aoleu, wat ik al ongeveer 3 maanden probeer om te beginnen met leren, ik heb nog steeds geen tijd...
Thanks a lot, ik kijk het zorgvuldig!
ja, je hebt gelijk, Cristi, maar ik ben teleurgesteld omdat ik dacht dat je een tutorial zou maken :( maar hoe dan ook, goed gedaan, zeer goede tutorial
Het is niet aardig wat je zei en ik zeg je dit eerlijk: deze man heeft ongeveer anderhalf uur geworsteld om je te leren hoe je een website helemaal opnieuw kunt maken en je zegt dat je teleurgesteld bent omdat hij het niet heeft gedaan? Kun je je voorstellen hoeveel werk de man erin heeft gestoken en hoeveel tijd hij heeft verloren om ieder van ons de basisprincipes van html en css te leren? Bedenk voordat je je mond opendoet dat het niet bij je zou passen om het werk erin te stoppen en dan anderen te laten nutteloze opmerkingen zoals jij bent teleurgesteld dat iemand anders deze tutorial niet heeft gemaakt, wees dankbaar dat je iets hebt om van te leren;)
Wat denk jij, dat de serie over "Hoe maak je een website" voorbij is.
In de volgende tutorial zal ik me wel.
Want wat de volgende tutorial zal ik moeten worden bekeken deze tutorial gemaakt door Dan.
Wat ik presenteren is anders dan de tutorial ik besefte aza Dan, maar de informatie die erin zal van essentieel belang voor een goed begrip van de dingen te zijn.
Er zijn verschillende manieren om content te publiceren op het web, maar hebben allemaal een gemeenschappelijke deler, HTML en CSS, zonder hen kun je niets doen.
Hoi Cristi, beschuldig ik een reeks van php of js?
We praten over alles, maar ook PHP en JS website bindt aan HTML, zonder HTML kan niet.
PHP wordt meer gebruikt voor het extraheren van gegevens uit databases, webpagina's zijn nog steeds gebaseerd op HTML, of we het nu hebben over dynamische sites (php, dhtml, asp, jsp, cf) of dat we het hebben over een statische site, we zullen je gebruiken de HTML-taal, zonder deze kan niets worden gedaan.
Velen maken een grote verwarring: "Ik wil geen HTML-site meer, ik wil een dynamische php-site", het is een grote fout, bijna overal wordt HTML gebruikt, ongeacht of we het over dynamische sites of statische sites hebben.
JS (java script) is niet hetzelfde met JSP (Java Server Pages) die afhankelijk is van een server, worden JS sites die worden gebruikt voor bepaalde scripts, geen behoefte aan een server, kan JS scripts in elke browser draaien zonder de noodzaak server-component, en in deze tutorial, Dan gebruikt een reeks van scripts JS (fotogalerij) voor off stuff gebruikt JS, er zijn hele websites met JS plaats zijn volledige websites met behulp van Java Server Pages en dat is iets anders, maar ze lijken hetzelfde.
Ik weet dat je al lang geleden bent begonnen met het bestuderen van de "code", deze tutorial is een uitstekende hulp, Dan heeft geweldig werk geleverd met deze tutorial, je zult niet eens beseffen hoe waardevol deze tutorial is, onder de tutorial heb je bijna alle de tags (de elementen) die in HTML worden gebruikt, kunt u gebruiken, vooral omdat ze allemaal een beschrijving hebben.
Laat uw ALEX, breek de code, het is gebaseerd.
Geloof me, je mist potentiële NO!
Wauw, veel informatie, zeer goed gestructureerd, zodat iedereen het kan begrijpen. Ik heb persoonlijk de tutorial bekeken alleen maar om iets nieuws te leren, en naarmate de tutorial vorderde, was ik verbaasd over hoe gemakkelijk het is om een website te maken, niet echt geladen en zeer een lust voor het oog. Gefeliciteerd met deze tutorial, maar ook voor alle anderen. Ik kijk uit naar de volgende "infusie" (in de woorden van Cristi) met informatie.
Gefeliciteerd!! Zeer leuke tutorial, er zal een Roemenië vol webontwerpers zijn :) (laten we hopen!!)
wanneer het een tutorial dreamweaver? Of geen gebruik maken dreamweaver dc in uw lessen?
Gefeliciteerd met alle tutorials...je bent de beste;)
Hallo.. de tutorial is echt gaaf, er is heel veel informatie.. en ik denk dat ik de basis-html op voorpagina 98 moest leren door tientallen tests uit boeken in de bibliotheek te doen, omdat ik op dat moment geen net had en nu kan ik een tutorial bekijken waarin alles wordt uitgelegd wat ik moet weten. Je kunt zien dat ik ben geëvolueerd :))). Ik vond het leuk dat het stap voor stap werd uitgelegd en dat ze allemaal op de website werden gezet de basiscommando's + een voorbeeld waar aan gewerkt kan worden.. het is te zien dat je weet wat je doet, jullie zijn echte leraren!!
Maar de meerderheid van degenen die werkzaam zijn in web design met behulp van programma's die automatisch orders en mijn vraag te maken heeft zal een tutorial dergelijk programma doen?
Ik weet dat je deze tutorial hebt gemaakt om de commando's te begrijpen en dus een beter begrip van de webontwerpprogramma's. Maar toch ben ik benieuwd wat je verder gaat met deze serie tutorials, want er wordt zelfs veel over dit onderwerp gesproken als sommigen het saai vinden als het gaat om tutorials zoals die gemaakt door Dan, die ik bij deze gelegenheid feliciteer met de tutorial...