…Hoewel de syntaxis van HTML relatief eenvoudig te leren is,…zijn er nog steeds veel elementen, attributen en…andere concepten die je moet leren en bijhouden.…Hoewel deze cursus bedoeld is om je te introduceren om je kennis te laten maken met de essentie van HTML, het is...echt niet ontworpen om je elk afzonderlijk element en attribuut te leren dat beschikbaar is....Dus met dat in gedachten wil ik je een paar online HTML-bronnen geven,...die je echt kunnen helpen als je begint HTML te leren, en...kan later als waardevolle referentie dienen, terwijl je je eigen pagina's schrijft....Nu gaan we beginnen bij de specificaties zelf....
En dit is iets, twee documenten waar je zeker een bladwijzer van had moeten maken....Dus dit is de W3Cs-versie van HTML5....Je kunt zien dat ze een nieuwste uitgeversversie hebben....Je kunt de Editor's Draft bekijken,...als je dat wilt kijk wat er naar beneden komt, door de pijp....En dit is behoorlijk groot....Als ik naar beneden scrol, kun je zien dat hier alleen de inhoudsopgave is....En ik ga niet eens door alle van hen.…
Hervat transcriptie automatisch scrollen
Bijgewerkt
3/30/2017Uitgegeven
3/16/2015HTML is de programmeertaal die het internet aandrijft. En zoals elke taal kunt u, zodra u deze onder de knie heeft, beginnen met het maken van uw eigen inhoud, of het nu gaat om eenvoudige websites of complexe webapplicaties. Deze cursus biedt een diepgaand inzicht in de essentie: de syntaxis van HTML en best practices voor schrijven en bewerken van uw code. Senior stafauteur James Williamson bespreekt de structuur van een typisch HTML-document en laat zien hoe u pagina's kunt opsplitsen en uw inhoud kunt opmaken met HTML Plus, hoe u koppelingen en lijsten kunt maken en hoe HTML werkt. CSS en JavaScript om rijke, boeiende gebruikerservaringen te creëren. Open dus een teksteditor, bekijk deze video's en begin met het op de juiste manier leren HTML te schrijven.
Onderwerpen zijn onder meer:
- Waarom is HTML belangrijk?
- Een HTML-document verkennen
- Inhoud opmaken
- Afbeeldingen weergeven
- Nav-, artikel- en div-elementen gebruiken
- Linken naar pagina's en downloadbare inhoud
- Lijsten maken
- Stijl beheren (lettertypen, kleuren en meer)
- Basisscripts schrijven
Ik besloot door te gaan met dit populaire onderwerp. Ik heb een lijst samengesteld met de beste bronnen voor het leren van HTML en CSS om diegenen te helpen die geïnteresseerd zijn in het leren van deze problemen. Ik weet nog dat ik, toen ik begon als webmaster, zo'n selectie aan hoogwaardige en nuttige bronnen echt miste.
Eerst enkele definities:
Html (van het Engelse "HyperText Markup Language" - hypertext opmaaktaal) is een standaard opmaaktaal voor webpagina's.
CSS (van het Engelse "Cascading Style Sheets" - cascading style sheets) is een technologie om het uiterlijk van een webpagina te beschrijven.
Zonder kennis van html en css zal het runnen van uw website zeer problematisch zijn - u zult niet eens een statistiekenteller of zelfs een banner kunnen installeren. Moeten we niet naar specialisten gaan voor hulp of moeten we niet onderwerp na onderwerp op forums creëren? Je hoeft het alleen maar te nemen en te leren.
Uit eigen ervaring kan ik zeggen dat html en css in 1 maand te leren zijn. Ik heb het natuurlijk niet over professionele hoogten; je kunt ze zelf bereiken als je wilt.
Naar mijn mening is de beste manier om HTML, CSS en andere onderwerpen te leren, inclusief websitepromotie, door je eigen website te maken en erop te oefenen. Je kunt trouwens de eerste website zien die ik heb gemaakt voor kaarten voor het spel Counter-Strike, waarvan ik toen enthousiast was. Hier zijn de kaarten en hun screenshots, gemaakt door de oude man Globator in die tijd dat hij nog niet wist wat de top 10, TCI en PR waren, en zorgeloos in de zon dartelde en driedimensionale kaarten maakte :) Ik heb deze site in een maand gemaakt, waarbij ik html en css in de praktijk leerde.
Je hoeft geen technisch expert te zijn om html en css te leren. Ik ben bijvoorbeeld over het algemeen een humanist en voor wiskunde kreeg ik meestal een “2” :) Iedereen kan dus HTML en CSS leren. De bronnen die ik heb opgesomd zijn ook geschikt, zodat u ze op elk moment kunt gebruiken om elk punt te achterhalen waarin u geïnteresseerd bent met betrekking tot html en css.
Websites om HTML en CSS te leren
Ik zal beginnen met een selectie van nuttige bronnen voor het leren van HTML en CSS van een site die ik zelf heb gebruikt. Dit zijn Wild html-lessen geschreven door Valentina Akhmetzyanova, ook bekend als Dikarka. Ze beschreef alle noodzakelijke punten zo vrolijk en interessant dat het leren van html en css met behulp van haar lessen een spannende bezigheid wordt. Trouwens, je kunt de site voor de blog lezen. Wilde lessen zijn voldoende om html en css te leren op het niveau dat nodig is om als webmaster te werken.
Kun je je voorstellen wie ik zou zijn als ik me verder zou ontwikkelen in het onderwerp Photoshop? Ik zou een echt monster zijn! Maar ik raakte betrokken bij SEO en vegeteerde hier, terwijl ik deze letters typte met verkrampte vingers van de vorst :) Grapje, het is hier ook warm en het eten is goed :)
Ph.D. Lavlinsky N.E., technisch directeur van Method Lab LLC
Onlangs is een nieuwe standaard voor Preload-technologie gepubliceerd (link). Het belangrijkste doel van deze specificatie was om de ontwikkelaar in staat te stellen de logica voor het laden van paginabronnen te verfijnen.
Vorige normen
Het idee van lastbeheer is niet nieuw. Er zijn eerder verschillende tagopties ontwikkeld link met attributen subbron, voorweergave En vooraf ophalen. Ze werkten echter een beetje anders: met hun hulp kunt u pagina-elementen of hele pagina's laden die mogelijk nodig zijn voor verdere navigatie op de site. Dat wil zeggen dat de browser dergelijke verzoeken met lage prioriteit en als laatste heeft verzonden. Als het nodig was om de prioriteit te verhogen, waren er geen oplossingen.
Bronnen laden met preload
Wat houdt de nieuwe specificatie in? Ten eerste vindt het laden nu plaats met verduidelijking van wat er wordt geladen. Op basis van het opgegeven type bron stelt de browser de downloadprioriteit in. Bijvoorbeeld:
link rel = "preload" href = "/js/script.js" as = "script" >link rel = "preload" href = "/fonts/1.woff2" as = "font" type = "font/woff2" crossorigin>
Ten tweede het resourcetype ( als) zorgt ervoor dat de browser de juiste headers verzendt, zodat de server inhoud met betere compressie-opties kan verzenden (bijvoorbeeld WebP-afbeeldingen verzenden als de browser deze ondersteunt).
In het tweede voorbeeld laden we een lettertypebestand en is een specifiek formaat (WOFF2) gespecificeerd, dat niet door alle browsers wordt ondersteund. Zolang de ondersteuning voor het preload-mechanisme echter overeenkomt met de ondersteuning voor dit formaat, zijn er geen problemen. De huidige steun voor het mechanisme kan worden bekeken.
Sneller laden van lettertypen
Een voorbeeld van het versnellen van een website met behulp van vooraf laden is het laden van diep verborgen bronnen, zoals lettertypen. Tijdens het normale downloadproces moet de browser eerst het CSS-bestand downloaden dat naar het lettertype verwijst, het bestand parseren en vervolgens een verzoek in de wachtrij plaatsen om het lettertypebestand te downloaden.
Als we dit lettertype vooraf laden in de HTML-paginacode, verzendt de browser het verzoek onmiddellijk na het parseren van het HTML-document, wat een paar seconden eerder kan zijn dan in het normale geval. En we weten dat plug-in-lettertypen elementen blokkeren en de weergave van het lettertype op de pagina vertragen, dus moeten ze zo snel mogelijk worden geladen. Dit probleem is vooral acuut bij het gebruik van HTTP/2, wanneer de browser veel verzoeken tegelijk naar de server stuurt, waardoor sommige afbeeldingen de balk van de client kunnen vullen en het laden van belangrijke bronnen wordt vertraagd.
Asynchrone CSS-laden
CSS-bestanden blokkeren altijd de weergave van pagina's, dus alle CSS-bronnen die kunnen worden uitgesteld, kunnen als gewone bestanden worden geladen en dynamisch aan de pagina worden gekoppeld.
Dit gebeurt als volgt:
link rel = "preload" as="style" href = "async_style.css" onload = "this.rel="stylesheet"" >JS-code laden zonder uitvoering
Het kan ook handig zijn om de JS-scriptcode vooraf te laden, zodat u deze later kunt uitvoeren.
Dit kan gedaan worden met de volgende code:
link rel = "preload" as = "script" href = "async_script.js"laden = "var script = document.createElement("script"); script.src = dit.href; document.body.appendChild(script);">We hebben gekeken naar de belangrijkste manieren om het voorlaadmechanisme te gebruiken, maar daar houden de mogelijkheden niet op: voer je eigen experimenten uit!
Onlangs is het onderwerp van het laden van bronnen herhaaldelijk ter sprake gekomen. Kort gezegd: “Ik laad een afbeelding vanuit c:\work\image.gif, maar als ik het programma vanuit een jar-bestand/op een andere computer uitvoer, wordt het niet geladen. Wat te doen?".
Ondertussen is hier niets ingewikkelds. Je hoeft alleen maar de principes te begrijpen.
Allereerst is het laden van bronnen naar een absoluut adres op de schijf een nutteloze taak. Ik denk dat je zelf perfect begrijpt waarom: je hebt het bestand van de schijf verwijderd en 'vaarwel aan de bron'. Je moet alles bij je dragen.
De tweede optie die ik vaak zie, is het laden van de bron vanuit een jar-bestand. Maar hier wordt heel vaak een fout gemaakt: ze proberen een bron te laden via de klasse java.io.File. Ondanks het feit dat deze klasse alleen bedoeld is voor het werken met bestandssystemen.
Hoewel het idee zelf correct is. De benodigde bron moet echt in een jar-bestand worden geplaatst. Je hoeft alleen maar te begrijpen hoe je het vanaf daar kunt downloaden. Dit is waar ik je over zal vertellen.
Om een bron te laden, gebruikt u de methoden java.lang.Class.getResource(String) , java.lang.Class.getResourceAsStream(Stri ng) , java.lang.ClassLoader.getResource(String) en java.lang.ClassLoader.getResourceAsStream (Snaar) . Klassemethoden delegeren aanroepen naar ClassLoader.
GetResource(String) retourneert, gegeven een bronnaam, de java.net.URL waarmee de bron kan worden opgehaald. getResourceAsStream(String) retourneert, zoals je zou kunnen raden, een java.io.InputStream waarmee de bron kan worden gelezen.
De resourcenaam is het pad naar de resource. Er is één belangrijke subtiliteit, namelijk hoe het wordt geïnterpreteerd.
De naam kan absoluut of relatief zijn. Het externe verschil is dat de absolute naam begint met het teken “/”. In het eerste geval wordt de bron doorzocht ten opzichte van de hoofdmap van het klassenpad. Die. Alle paden en jar-bestanden die in het klassenpad zijn opgenomen, worden gebruikt en de bron wordt doorzocht ten opzichte van het geheel van deze punten. Als de naam relatief is, wordt het pad dat is verkregen uit het pakket van de huidige klasse aan het begin toegevoegd. Er wordt dan gezocht zoals bij een absolute naam.
Het is gemakkelijker om dit te begrijpen met voorbeelden. Laten we een bepaald klassenpad hebben: c:\work\myproject\classes;c:\lib\lib.jar . De voorbeeldcode bevindt zich in de klasse ru.skipy.test.ResourceLoadingTest.
Voorbeeld 1. We gebruiken de getClass().getResource("/images/logo.png") constructie. Omdat de naam begint met een "/"-teken, wordt deze als absoluut beschouwd. Het zoeken naar een bron gebeurt als volgt:
- Aan het klassenpad c:\work\myproject\classes wordt de bronnaam /images/logo.png toegevoegd, waardoor er naar het bestand c:\work\myproject\classes\images\logo.png wordt gezocht. Als het bestand wordt gevonden, stopt het zoeken. Anders:
- In het jar-bestand c:\lib\lib.jar wordt gezocht naar het bestand /images/logo.png, en de zoekopdracht wordt uitgevoerd vanuit de hoofdmap van het jar-bestand.
- Het huidige klassenpakket waarin de code zich bevindt, wordt toegewezen aan het pad uit klassenpad c:\work\myproject\classes – /ru/skipy/test – en vervolgens de resourcenaam res/data.txt, waardoor het bestand c:\work\ wordt doorzocht myproject\classes\ru\skipy\test\r es\data.txt . Als het bestand wordt gevonden, stopt het zoeken. Anders:
- In het jar-bestand c:\lib\lib.jar wordt gezocht naar het bestand /ru/skipy/test/res/data.txt (de pakketnaam van de huidige klasse plus de bronnaam) en wordt de zoekopdracht uitgevoerd vanaf de hoofdmap van het jar-bestand.
Hier kunt u een volledig werkend voorbeeld downloaden dat beide soorten belasting illustreert: . Bronnen - afbeelding en tekst - bevinden zich in een aparte map, tijdens het samenstellen komen ze in een jar-bestand terecht en worden ze geladen, de een op absolute naam, de ander op relatieve naam. Het voorbeeld is gebouwd en gestart via ant, met de opdracht ant run wordt het gestart vanuit de map build/classes/build, en met de opdracht ant run-jar vanuit het samengestelde jar-bestand.
Hier, ergens zoals dit. Vragen? Opmerkingen?
Het World Wide Web Consortium (W3C) heeft in 1996 CSS-technologie (Cascading Style Sheets) aanbevolen. Sindsdien gebruiken webontwikkelaars trapsgewijze stijlbladen om unieke website-ontwerpen te creëren.
Twintig jaar geleden speelden ontwikkelaars met lettertypeopties, tekstkenmerken en kleuren van pagina-elementen. Tegenwoordig worden animaties, schaduwen, verlopen, anti-aliasing en vele andere geavanceerde dingen gebruikt.
Installeer de Web Developer-extensie voor Chrome of de Disable CSS-add-on voor Firefox om van uw favoriete sites te genieten zonder trapsgewijze stijlbladen.
De veranderingen zullen dramatisch zijn, maar niet altijd. Zo zal nieuwsaggregator Drudge Report niet veel veranderen: het is zo simpel als twee keer twee. Niettemin wordt de bron maandelijks meer dan 150 miljoen keer bekeken.
Waar u de fijne kneepjes van CSS kunt leren
Laten we consistent zijn en beginnen met een sterke theoretische basis. Hiervoor wenden we ons tot Vlad Merzhevich, een auteur van boeken en een webontwikkelaar die verschillende hoogwaardige bronnen onderhoudt over de lay-out en stijl van webpagina's.
Hier vindt u een duidelijke tutorial en antwoorden op veelgestelde vragen over trapsgewijze stylesheets. Er zijn ook educatieve artikelen over de huidige derde CSS-specificatie.
Biedt een alfabetische verwijzing naar CSS. Elke eigenschap heeft een korte beschrijving, syntaxis en een live voorbeeld. Aarzel niet om vragen te stellen - de auteurs van het project nemen contact met u op en bespreken graag de details.
Naast Russischtalige tutorials zullen we buitenlandse sites toevoegen. Met hun hulp is het voor sommige studenten gemakkelijker om zich in het beroep te verdiepen en de terminologie ervan te accepteren. Daarom is alle aandacht erop gericht. Er is niets overbodigs op de site: CSS-eigenschappen, uitleg en acties. Onder de leuke kleine dingen merken we het snel zoeken en kopiëren van eigendommen naar het klembord met een muisklik.
Trainen is een lange en soms saaie taak. Het zou leuk zijn om motivatie te vinden, zodat het helpt in moeilijke tijden. Wij laten ons inspireren door andere webdesigners, of liever gezegd op de website. Hier wordt elke dag een kwalitatief hoogstaand project gepresenteerd dat als voorbeeld dient van wat de moeite waard is om naar te streven. Veel van de winnaars zijn echt verrassend. Vergeet niet langs te komen en te stemmen op jouw favoriete genomineerden.
Nu je kennis en een baken hebt veiliggesteld, is het tijd om je kracht in actie te testen. En om lange tijd geen weg te kiezen, verwijzen wij u naar de pagina. Het bevat een onveranderlijk HTML-bestand dat gebruikers van over de hele wereld buitengewone ontwerpen proberen te geven met behulp van trapsgewijze stijlbladen.
Download de referentie-HTML, voeg uw eigen stijl toe en stuur het allemaal terug. Jouw aanpak is misschien wel de beste. Je kunt trouwens de versie van iemand anders downloaden en zien hoe deze wordt geïmplementeerd.
Het is duidelijk dat je iets wilt gebruiken dat de aandacht van iedereen zal trekken. We weten niet of zoiets bestaat, maar er liggen zeker tientallen en honderden interessante technieken rond.
U kunt de code niet rechtstreeks downloaden. Je zult naar het ontwikkelaarsmenu moeten gaan - dit is het beleid van de lokale partij. De overgrote meerderheid van CSS-stijlen kan echter zonder toestemming van de auteur worden gebruikt.
Waarom hebben we de spullen van iemand anders nodig als onze eigen handen recht groeien? Zal dit echt blijken? Naast de basiscontrole van de CSS-syntaxis controleert de webservice of er wordt voldaan aan regels die de laadsnelheid van de pagina beïnvloeden. De uitvoer is goede, browservriendelijke CSS-code.
Welke bronnen over trapsgewijze stijlbladen kunt u aanbevelen?
