Daven FARNHAM: Vandaag ga ik praten een beetje over HTML, HyperText Markup Language. Je ziet HTML overal deze dagen. In feite, als je dit ziet video in een browser, je bent zien HTML nu. HTML is geen programmeertaal, Integendeel, het is een opmaaktaal die wordt gebruikt door webbrowsers om pagina's te maken op het internet. 

Dus je zou kunnen vragen, hoe precies is het schrijven een webpagina in HTML verschillende het schrijven van een programma in een programmeertaal taal zoals C? Nou, C is een taal met een zeer strikte syntactische regels die moet worden gecompileerd voordat het kan draaien. Als je ooit bent vergeten om een ​​onder puntkomma aan het einde van een verklaring uw C-code, je weet wat ik bedoel over met betrekking tot strikte syntax. 

Webbrowsers zijn echter een beetje meer vergevingsgezind als het gaat om HTML. Zelfs als uw HTML is niet syntactisch correct, kan uw pagina nog steeds weergegeven door een browser, maar het kan niet kijken zoals u dat wilt. Dus het is altijd het beste om volg de regels. De beste manier om een ​​intuïtie te krijgen over hoe de dingen werken is om gaan door een voorbeeld. 

Dus wat we hier hebben is een basis blauwdruk voor een webpagina. Je hebt waarschijnlijk een heleboel dingen tussen haakjes. Nou, die zijn gewoon tags. Tags principe webbrowsers informeren dat, hey, iets wordt op je afkomt. Vergeet echter niet, wanneer u opent een tag, moet je om te sluiten als je eenmaal bent gedaan gebruiken. 

Dus ik bijvoorbeeld een sectie te openen code met open steunhuis, haakje sluiten. Voeg ik dan wat tekst, in dit geval, mijn eerste webpagina toen ik ging naar Sluit dit gedeelte gebruik ik bijna een identieke tag behalve deze keer met een slash voor lichaam. In het algemeen, dit is het formaat dat u bent gaat gebruiken wanneer u opent en sluiten van tags. Samen, een open-tag en een eind-tag componeren wat een element genoemd. 

Als je kijkt naar de eerste lijn, zult u zie een uitroepteken gevolgd door DOCTYPE html. Dit is eigenlijk gewoon het vertellen van uw browser dat het bestand is een webpagina geschreven in HTML. De HTML-tag zegt in wezen, hier komt een aantal HTML. Dan hebben we een hoofd-tag met een titel tag erin. De hoofd-tag die je kunt bedenken als bestaande uit HTML-code die wordt geleverd voor het grootste deel van uw webpagina's eigenlijke inhoud. 

In het algemeen zet je de titel van je webpagina hier, hoewel er enkele andere tags die kunnen worden weergegeven hier ook. Daarna komt uw webpagina's lichaam, de werkelijke vlees en botten van uw website. In ons voorbeeld hebben we net een eenvoudige zin, Mijn eerste webpagina, die, als we onze site draaien, zal kijken een beetje zoiets als dit. Onze webpagina is niet al te vreemd, maar maak je geen zorgen. We zullen het sparren binnenkort. 

Zodat de bovenstaande HTML, geven we u een zeer geven basic sjabloon voor een webpagina, niets bijzonders, alleen de kale botten. Maar als ik ben het creëren van een webpagina, wat als ik wil een toevoegen beeld van, zeg, mezelf? Nou, ik kan dat doen. Er zijn een paar manieren om afbeeldingen toe te voegen aan uw site. Als de afbeelding in dezelfde map als uw HTML-bestand, kunt u een link naar de afbeelding via dergelijke route. 

U opent met een afbeelding tag gevolgd door in Alt attribuut in de bron van het beeld. Waarde van de Alt-attribuut is slechts enkele alternatieve tekst in het geval dat een gebruiker niet kan zie de afbeelding. Als alternatief kunt u ook koppelen aan beelden via een volledige URL, zoals deze. Nu, betekent dat de website niet echt bestaat, maar als er een foto van me op dat adres, kon ik gebruik de bron URL behoren haar imago op mijn website. Hoe dan ook, eindig je met een veel mooier website, iets als dit. 

Nou, dat is wel cool, maar ik soort van willen wat tekst hier ook. Dus laten we gewoon iets toevoegen super eenvoudig boven de beeld, net als de header. Alles wat ik tot nu toe heb gedaan, is gebruik maken van de header tag, H1 en een regeleinde tag, br. De header-tag maakt het lettertype een beetje beetje groter en meer op de voorgrond. Het regeleinde-tag, aan de andere kant, is wel cool. In tegenstelling tot de meeste andere tags, hoef je niet een opening en sluiting break-tag, net de hierboven. Dit komt omdat breuk heeft geen inhoud en is daarom een ​​leeg element. 

Lege elementen zoals dit, kunt u openen en dicht tegelijkertijd gewoon door inclusief een slash op het einde van de eerste aangifte. Dus nu mijn website ziet er een beetje iets als dit. Beter, maar het soort voelt als een doodlopende weg. Er is nergens anders opzij te gaan van deze hoofdpagina. Nou, laten we dat op te lossen door inclusief een link. 

Wat ik ga doen, is gebruik maken van een attribuut aangeduid met A en maak de afbeelding een link naar, laten we zeggen, CS50 TV. Op die manier, wanneer iemand klikt op mij, hun browser wordt doorverwezen naar andere, waarschijnlijk meer nuttig, webpagina. Ik heb gehad om de grootte van de te minimaliseren tekst een beetje omdat onze webpagina is steeds meer geavanceerde. Maar hopelijk, het is nog steeds duidelijk. Mijn website ziet er precies hetzelfde alleen nu, wanneer ik klik op de foto, mijn browser opent een ander tabblad voor de webpagina CS50.tv. 

Tot slot, laten we zeggen dat ik ga stijl deze website later met behulp van CSS. CSS is wat bekend staat als een cascading style sheet. En het principe biedt een efficiënte manier te bewerken en stijl soortgelijke blokken code. Ik wil beginnen met het organiseren van mijn HTML naar het gemakkelijker om stijl later. Hier richtte ik twee verschillende soorten identifiers te helpen organiseren mijn code. Ik heb de ID-attribuut in een divisie of div-tag, en ik heb gebruik gemaakt van een Class attribuut binnen een andere div-tag. 

Id en class attributen werken op vergelijkbare wijze. Het enige verschil is dat je kunt alleen een element, het specifieke ID, maar elk aantal elementen kan een klasse delen. Dus bijvoorbeeld, kan ik de klas te gebruiken afbeelding meerdere keren, maar ik kan niet creëren een andere divisie met de ID-top. Hoewel ik nog niet gegaan in CSS, andere taal veelgebruikte naast HTML, zodra ik begin styling mijn code met CSS, kan ik deze gebruiken organisatorische kenmerken die invloed esthetiek van mijn webpagina's. 

Alles binnen de divisie top zullen gelijkaardige stylings of hebben andere groep van HTML I groep in de afbeelding klasse zal een gelijkaardige blik delen. Dit is veel gemakkelijker dan te proberen te bewerken en stijl beelden of blokken tekst individueel. 

Dus gingen we over de basisprincipes van hoe naar een webpagina maken met HTML. HTML heeft een heleboel andere functies te dat wanneer gecombineerd met andere talen zoals CSS en JavaScript, kan echt maken pagina's opvallen. De beste manier om te wennen aan HTML is gewoon om te prutsen met het, zien wat werkt en wat niet. 

Mijn naam is Daven Farnham. Dit is CS50. 

Dus bijvoorbeeld, kan ik gebruiken het imago van de klas - Nee, er zijn zo veel attributen. Mijn naam is Daven Farnham. Dit is CS 650. Ik wil CSS zeggen. Dit is CSS.