Advertentie
Inhoudsopgave
§1. Inleiding
§2 - Aan de slag met xHTML
§3 – Ontwerpen met CSS
§4 – Meer informatie
1. Inleiding: wat is xHTML?
Welkom in de wereld van XHTML - Uitbreidbare Hypertext Markup Language - een opmaaktaal (vergelijkbaar met programmeren) waarmee iedereen webpagina's kan samenstellen met veel verschillende functies. In veel opzichten is het de primaire taal van internet.
Dus waarom kan het ons schelen?
Wel, heb je nooit je eigen website willen hebben? Of je eigen spel maken? De rol van deze gids is om u een voorproefje te geven van deze krachtige wereld. Als je eerdere programmeerervaring hebt, zul je dit natuurlijk gemakkelijker vinden dan wanneer je net aan je programmeeravontuur begint. Hoe dan ook, ik hoop dit uit te leggen, zodat zelfs een beginner het kan begrijpen.
We geven om xHTML omdat het een sterk startpunt is om de basisbouwstenen van het web te leren. Sociale netwerksites zoals Facebook, MySpace en Twitter gebruiken een andere (server-side) programmeertaal genaamd PHP, maar het is een goed idee om de basisprincipes te begrijpen voordat je de programmering induikt wereld. Deze gids gaat over de basis.
Als je meer wilt weten over hoe internet werkt of misschien hoe computernetwerken hiermee werken technische dingen of zelfs hoe computers kunnen worden gebouwd, probeer dan deze geweldige gidsen van je vrienden op Gebruikmaken van:
//www.makeuseof.com/tag/the-guide-build-your-own-pc/ Hoe u uw eigen pc kunt bouwenHet is erg fijn om je eigen pc te bouwen; evenals intimiderend. Maar het proces zelf is eigenlijk vrij eenvoudig. We leiden je door alles wat je moet weten. Lees verder
//www.makeuseof.com/tag/everything-need-know-home-networking/ Alles wat u moet weten over thuisnetwerkenEen thuisnetwerk opzetten is niet zo moeilijk als je denkt. Lees verder
//www.makeuseof.com/tag/guide-file-sharing-networks/ De MakeUseOf-gids voor netwerken voor het delen van bestandenHeb je je ooit afgevraagd wat de grootste netwerken voor het delen van bestanden zijn die er zijn? Wat zijn de verschillen tussen BitTorrent, Gnutella, eDonkey, Usenet etc.? Lees verder
//www.makeuseof.com/tag/download-the-ultimate-windows-7-guide/ De Windows 7: Ultimate GuideAls je bang bent om te upgraden van Vista of XP omdat je denkt dat het totaal anders is dan je gewend bent, lees dan deze nieuwe gids. Lees verder
//www.makeuseof.com/tag/download-how-the-internet-works/ Hoe het internet werktWe hebben nu toegang tot internet vanaf onze thuiscomputers, kantoor, laptops en onze telefoons. Maar veel mensen weten nog steeds niet helemaal zeker wat internet is en hoe het echt werkt. Lees verder
2. Aan de slag met xHTML
In dit hoofdstuk leert u hoe u websites kunt maken en aanpassen op veel verschillende manieren, waaronder leren hoe u:
• Afbeeldingen toevoegen aan webpagina's.
• Maak en gebruik hyperlinks om door webpagina's te navigeren.
• Stel lijsten met informatie op met puntpunten en dergelijke.
• Creëer tabellen met rijen en kolommen met willekeurige gegevens en controleer de opmaak van die tabellen.
• Maak en gebruik formulieren waarmee u daadwerkelijk interactie kunt hebben.
• Maak webpagina's toegankelijk voor zoekmachines.
Dit alles zal worden gedaan met xHTML-programmering. Geloof je het niet? Lees verder. Het zou je verbazen hoeveel je van zo'n korte gids kunt leren.
Voordat we daadwerkelijk ingaan op het "coderen" -gedeelte van deze handleiding, heb je wat software nodig om te gebruiken, zodat je je programma's kunt bewerken, testen en eigenlijk overal kunt ontwikkelen. Ga naar www.dreamspark.com en ontvang GRATIS een van de volgende programma's, ervan uitgaande dat je student bent:
• Microsoft Visual Studio 2010
• Expression Studio 4
Als je geen student bent, kun je ook gebruiken Notepad ++, waar je vrij gemakkelijk aan kunt komen www.notepad-plus-plus.org
Zodra u een van de programma's hebt ontvangen en deze hebt geïnstalleerd, kunt u uw xHTML-ervaring starten.
Mogelijk gebruikt u een Mac of Linux in plaats van Windows; je moet een vinden teksteditor dat werkt dan voor jou. Probeer er een te vinden die je het aantal lijnen en de kleurcode voor je laat zien.
• //www.makeuseof.com/tag/leafpad-ultralightweight-text-editor-linux/ Leafpad - Een ultralichte teksteditor [Linux] Lees verder
• //www.makeuseof.com/tag/geany-great-lightweight-code-editor-linux/ Geany - Een geweldige lichtgewicht code-editor voor LinuxVerrassend genoeg biedt Linux niet zoveel goede IDE's (Integrated Development Environments). Ik geloof dat dit komt omdat vroeger de meeste Linux-programmeurs de goede oude Kladblok (of in dit geval gedit) hebben verwijderd en zijn begonnen ... Lees verder
Als u liever geen speciale tools downloadt, kunt u nog steeds een teksteditor gebruiken Kladblok of Wordpad. De bovenstaande programma's zijn echter veel betere tools voor testen en ontwerpen en helpen u daarbij uw codering zoals het u vraagt als u een fout maakt of als u probeert het juiste woord te onthouden gebruik. Eenvoudig is beter, toch? Ik gebruik persoonlijk Notepad ++ en Microsoft Visual Studio, hoewel ik veel geweldige dingen heb gehoord over Expression Studio 4. Je moet beslissen wat je het leukst vindt, maar ze werken allemaal prima.
NOTITIE: Een website testen die is gemaakt met Kladblok of Wordpad:
Klik terwijl het bestand is geopend op Bestand >> Opslaan als
Typ aan het einde van de bestandsnaam.html en klik Sparen
Open het nieuw opgeslagen bestand (het zal openen in uw standaard internetbrowser)
2.1 "De wereld" leren kennen
Oké, dit is het begin van de reis. Laten we beginnen met iets op het scherm op deze webpagina te zetten. Eerst moet je weten wat zijn. XHTML-code gebruikt begin- en eindtags om uit te zoeken wat er met elk element van de pagina gebeurt.
Hier is een voorbeeld van een start-tag:
Hier is een voorbeeld van een eindtag:
Zie het verschil? De ene heeft de elementnaam tussen de puntige haakjes en de andere is hetzelfde, maar heeft een schuine streep voor de elementnaam.
BELANGRIJK: U moet een tag sluiten nadat u deze ergens in de code hebt geopend. Ook tags moeten worden genest, dat wil zeggen dat u het volgende niet kunt doen:; het zou moeten zijn. Zie je hoe de tags in elkaar passen? Zie ze als dozen: je kunt iets vasts niet in een doos en een half stoppen.
De beste manier om te leren programmeren is door het echt te doen, dus genoeg theorie. Ter referentie, ik ga elke regel code labelen met een nummer zodat ik regel voor regel kan uitleggen wat er aan de hand is.
In regel 1 heb ik de html-code vermeld en in regel 5 heb ik deze beëindigd. Binnen in de tag is de
). Als je dit in een webbrowser opent, zie je het volgende op het scherm verschijnen:
Als u de titel van de pagina wilt wijzigen vanuit het oogpunt van de browser (bijv. firstpage.html) dan kunt u gemakkelijk de volgende regel code toevoegen:
Hierdoor ziet uw webpagina er professioneler uit.
2.2 Vanaf de en werken de
In de meeste gevallen binnen tag is er een
en een .De wordt meestal gebruikt voor scripting in CSS (sectie 3) en JavaScript (uitgelegd in een komende handleiding), terwijl de is meestal de inhoud van de pagina.
Sommige inhoud kan worden gewijzigd met behulp van de scripting in de
, maar de is meestal de inhoud die niet te wijzigen is op de pagina. Een voorbeeld is een korte beschrijving van de website die u bezoekt.U kunt wijzigingen aanbrengen in de opmaak van de inhoud met behulp van CSS (sectie 3) in de
. U kunt echter ook wijzigingen aanbrengen in de opmaak in de .Een veelgebruikte set tags die in de hoofdtekst worden gebruikt, zijn de koptekstlettertypen. Deze koptekstlettertypen variëren in grootte en sterkte / vetheid. Kijk zelf hieronder:
2.3 Is uw foto meer dan duizend woorden waard? - Afbeeldingen
Tot nu toe hebben we het alleen gehad over tekst en wat het kan doen op een website, maar er is nog meer. Wilt u uw website nog aantrekkelijker maken dan alleen mooie lettertypen? Probeer een aantal goede afbeeldingen te krijgen zodat uw site het publiek echt iets geeft om naar te kijken. Wees echter voorzichtig met copyrightwetten; Het is het beste om uw eigen foto's te maken als u van plan bent uw website op internet te zetten.
Mogelijk moet u Photoshop of een aantal digitale beeldvaardigheden gebruiken om een geweldige foto te maken of misschien uw eigen afbeelding te verbeteren en deze er nog fantastischer uit te laten zien. Probeer deze handleidingen voor enkele geweldige tips en inzichten:
• //www.makeuseof.com/tag/learn-photo-editing-photoshop-get-basics-1-hour/ Leer fotobewerking in Photoshop: leer de basis binnen 1 uurPhotoshop is een intimiderend programma, maar met slechts een uur leer je alle basisprincipes. Pak een foto die je wilt bewerken en laten we beginnen! Lees verder
• //www.makeuseof.com/tag/guide-to-digital-photography/ Een beginnershandleiding voor digitale fotografieDigitale fotografie is een geweldige hobby, maar kan ook intimiderend zijn. Deze beginnershandleiding vertelt je alles wat je moet weten om aan de slag te gaan! Lees verder
De meest populaire afbeeldingsindelingen zijn:
• GIF = Graphics Interchange Format
• JPEG = Joint Photographic Experts Group
• PNG = Portable Network Graphics
Bekijk de onderstaande code en ik zal hierna uitleggen wat het betekent; dat wil zeggen, hoe u afbeeldingen aan uw webpagina kunt toevoegen.
Zoals in eerdere secties werd geleerd, beginnen we altijd met de en co-tags. Vervolgens de
Na het openen van de alinea in regel 9 worden hier de afbeeldingen op de website ingevoegd. Om een afbeelding / afbeelding toe te voegen, moet u gebruiken om te beginnen met. Vervolgens moet u voorstellen waar het bestand zich bevindt. Meestal zou u proberen dit bestand in dezelfde map te hebben als de websitebestanden, anders moet u het mappad invoeren waarin het zich bevindt. In het bovenstaande geval heb ik gebruikt
. Dit betekent dat de bron (src) van de foto staat in dezelfde map en de naam van dat fotobestand is Afbeelding.jpg. Makkelijk toch?
U hoeft niets meer toe te voegen dan om een afbeelding te maken met een alt eigenschap, maar u kunt er eigenschappen aan toevoegen om er enkele wijzigingen in aan te brengen.
Ook gekend als Alt-tekst, wordt deze eigenschapswaarde weergegeven wanneer u met de muis over de afbeelding beweegt.
Je merkt misschien dat ik in regel 10 de tag ben begonnen en eindigde het met />. Dit is een andere manier om tags te openen en te sluiten. Dit is de gebruikelijke manier om afbeeldingen te maken, omdat u de verschillende eigenschappen van de afbeelding kunt kiezen, zoals breedte en hoogte, zoals weergegeven in het bovenstaande voorbeeld.
In regels 11 en 12 wordt een andere afbeelding ingevoegd, maar deze gebruikt de andere methode voor het openen en sluiten van tags. Lijn 10 creëert het beeld op een veel nettere manier; gebruik dat in plaats van de methode in regels 11 en 12.
2.4 Hyperlinks waar kunnen ze naartoe?
2.4.1 Zich verplaatsen in "de wereld"
Wil je je vrienden een aantal coole sites op je website laten zien, maar weet je niet hoe? U bent hier aan het juiste adres, lees verder ...
Bekijk de onderstaande code en kijk of je kunt raden wat ik doe voordat ik het uitleg.
Dat klopt, ik maak hyperlinks naar een aantal geweldige en nuttige sites. Om een hyperlink te maken naar een bepaalde webpagina met een webadres, gebruikt u eenvoudig de onderstaande syntaxis:
[wat je wilt linken]
Het lijkt niet erg moeilijk, toch? Je kunt er vrij eenvoudig tekst in plaatsen zoals de voorbeeldcode hierboven. Er is echter geen reden waarom u zoiets als een afbeelding niet zou kunnen gebruiken. Voor een beetje extra informatie: een URL is een Uniform Resource Locator, eigenlijk het webadres.
2.4.2 Afbeeldingen herinneren je aan waar je bent geweest en brengen je er weer naartoe
Hier is een voorbeeld van het gebruik van een afbeelding als hyperlink:
Ik weet zeker dat als je de vorige delen van dit gedeelte leest dat je vrijgeeft, dit gewoon een mix is van het maken van afbeeldingen en hyperlinks. De syntaxis is ingesteld om de hyperlinking aan de buitenkant en de afbeelding aan de binnenkant te hebben, waarbij een hyperlink van de ingevoegde afbeelding wordt geplaatst.
2.4.3 Je hebt mail - Hyperlinking naar een e-mailadres
Dit is gewoon een herhaling van het laatste deel, maar als je niet zoveel aandacht hebt besteed, kijk dan eens naar de onderstaande code:
In plaats van een URL te gebruiken (bijv. http://www.something.com) hier gebruik ik een e-mailadres waarbij de volgende syntaxis achter het gelijkteken wordt geplaatst:
"Mailto: [uwemailadres]"
Lijn 10 is het basisvoorbeeld van dit concept. Dus wie ga je e-mailen? Ghostbusters!
2.4.4 Uw wereld verkennen - Interne hyperlinks
Nu kunt u zien hoe u op uw eigen website terechtkomt. Dit doet u eenvoudig door uw bestandsnaam als URL te gebruiken. Daarom kunt u websites opzetten zoals in het onderstaande diagram wordt weergegeven. De syntaxis die u zou gebruiken, zou er ongeveer als volgt uitzien:
2.5 Ben je speciaal? Deze karakters zijn ...
Wanneer u informatie invoert die op de website wordt weergegeven, zoals inhoud, moet u dit mogelijk doen plaats zoiets als een symbool zoals het copyright-symbool: © of misschien een kleiner dan of groter dan symbool. Maar aangezien de normale symbolen worden gebruikt door de coderingssyntaxis, moest er een andere manier zijn om deze kleine te omzeilen obstakel, en de oplossing was het gebruik van een ampersand (&) en daarna een korte code om de computer te vertellen welk symbool inleggen. Hieronder staat een tabel met een paar voorbeelden van speciale tekens uit codering:
Je zou bijvoorbeeld kunnen zeggen:
Er zijn
Er zijn <6 rijen in de bovenstaande tabel, maar> 2 rijen
2.6 Lijsten, lijsten en meer lijsten
Oké, we zullen een paar dingen moeten organiseren, zoals een boodschappenlijstje. Er zijn twee soorten lijsten. Zij zijn de:
• geordende lijst (cijfers, alfabetten, Romeinse cijfers)
• Ongeordende lijst (opsommingstekens)
Voor een geordende lijst gebruikt u de volgende tags =
Voor een ongeordende lijst gebruikt u de volgende tags =
Bijvoorbeeld:
In het bovenstaande voorbeeld heb ik zowel ongeordende als geordende lijsttypes opgenomen. Maar heb je gemerkt wat ik nog meer deed? Ik heb ook een techniek genoemd Geneste lijsten. Deze geneste lijsten kunnen worden gebruikt om hiërarchische relaties weer te geven, zoals de lijst met ingrediënten in de Krijg ingrediënten stap van het recept hierboven.
Je ziet misschien dat ik de hele lijst als een geordende lijst in regel 10 heb gestart en deze in regel 23 heb voltooid. Tussendoor zou je het zien en tags die ik heb gebruikt. Deze geven aan Lijstitems. De lijstitems zijn de woorden die worden weergegeven, zoals in regel 21:
Als je naar het volgende hiërarchische niveau van puntpunten of getallen wilt gaan, nest je dan als volgt in zichzelf:
2.7 Tabellen... nee, geen wiskunde
Is dit net zo moeilijk als je tafels van vermenigvuldiging? Natuurlijk niet, als je het op de juiste manier aanpakt. Als je net begint met dit concept en ik neem aan dat je dat bent, dan is het meestal het beste om de tafel die je wilt maken te tekenen op een stuk papier zoals ik hieronder heb:
Bekijk het nu in onderstaande code:
Meng ze nu en de onderstaande weergave zou u moeten helpen begrijpen hoe de tabel is opgebouwd:
EEN
en
vet de eerste en laatste rij respectievelijk in om meer aandacht te vestigen op die delen van de tabel. De meeste mensen zouden eerst naar het totaal in de voettekst van de tafel kijken, toch?2.8 Digitale formulieren (pennen weg)
Tijdens het surfen op het internet moet u communiceren met de webpagina's die u tegenkomt. Op www.makeuseof.com moet u bijvoorbeeld uw e-mailadres invoeren zoals hieronder omcirkeld naar abonneer u op de nieuwsbrief en dagelijkse updates van MakeUseOf. Nadat u uw e-mailadres heeft ingevoerd, kunt u zou drukken Doe mee en dit zou de informatie (uw e-mail) in het tekstvak naast de knop naar een database of misschien een ander e-mailadres sturen. Formulieren worden gebruikt om dit te doen, wat u in dit hoofdstuk zult leren.
Hieronder is een formulier dat wordt gebruikt om alleen uw naam in te voeren en op een van beide te klikken Verzenden of Doorzichtig:
Hier is de code van achter de schermen, die ik binnenkort in meer detail zal uitleggen:
Allereerst is het belangrijkste in het bovenstaande script regel 10. Dit is het begin van het formulier. De methode is meestal ook post of krijgen. Vrij duidelijk, maar post is de informatie ergens naar toe sturen om een record te maken, zoals een e-mailadres of database. Bijvoorbeeld: een vraag plaatsen op MakeUseOf Answers. Krijgenverzendt daarentegen de door u verstrekte informatie en geeft feedback met feedback, zoals een zoekmachine, verzendt de zoekwoorden en retourneert de resultaten.
Het bovenstaande coderingsblok is een voorbeeld van een postformulier waarbij u uw e-mailadres invoert en het wordt met een e-mailadres naar de verborgen accommodatie gestuurd nadat u op de knop Verzenden hebt geklikt. De
De regels 22 - 25 plaatsen de knoppen Verzenden en Reset / Wissen op de pagina onder het tekstvak. De Reset knop verwijdert eenvoudig alle tekst die is ingevoerd in het tekstvak of de vakken in dat formulier. De Verzenden knop volgt instructies van de verborgen delen van het formulier die zijn gemaakt in regels 14 - 18. Het verborgen type gaat er meestal van uit dat iets automatisch of een deel van iets anders in de huidige vorm wordt gebruikt. In dit geval is het de laatste die de posted informatie een bestemming, in dit geval [email protected], met het onderwerp in deze case "Abonneer e-mail" en leidt u vervolgens om naar een andere pagina, in dit geval de hoofdpagina of "Index.html".
2.9 meta wat? Waarom?
Heb je je ooit afgevraagd hoe zoekmachines websites vinden? Dit is eigenlijk wat ze gebruiken: meta-elementen. Zoekmachines catalogiseren sites meestal door links te volgen naar pagina's op sites die ze vinden. Deze meta-elementen hebben informatie over de pagina erop. Bekijk het volgende uittreksel van een code voor een voorbeeld:
Zoals je hierboven kunt zien, gaat de meta-informatie in de
3. Ontwerpen met CSS
Meestal houden mensen die naar gidsen als deze kijken, gewoon van het spelen van videogames. CSS is echter geen Counter Strike Source en ook geen First Person Shooter (FPS). CSS is een technologie die werkt met xHTML, en staat voor Coplopend Style Sheets. xHTML is op zichzelf best saai, maar als je een eerlijke portie CSS toevoegt, is de opmaak en presentatie van je creatie veel interessanter. Auteurs kunnen wijzigingen aanbrengen in elementen op een webpagina, zoals lettertypen, spatiëring, kleuren; dit gebeurt afzonderlijk van de documentstructuur (hoofd, lichaam, enz.; dit zal in latere hoofdstukken worden uitgelegd). xHTML is eigenlijk ontworpen om de inhoud en structuur van een document te specificeren. Het is niet zo dat xHTML geen wijzigingen kon aanbrengen in de opmaak van de inhoud. Deze opzet is echter veel voordeliger omdat deze indien nodig vanaf één plek kan worden bediend. Als het formaat van een website bijvoorbeeld volledig wordt bepaald door een bijgevoegde stylesheet, kan een webontwerper eenvoudig een ander stylesheet plaatsen om de presentatie van de website sterk te veranderen.
3.1 Inline dansstijlen
Zoals hierboven vermeld, gaat deze sectie helemaal over opmaak en stijlen. Aangezien er veel manieren zijn om de stijl van uw inhoud en pagina te wijzigen, dacht ik dat het goed zou zijn om te beginnen met de meest rechttoe rechtaan techniek die is Inline stijlen. Dit wordt gedaan door de code in het eigenschappengedeelte van een tabblad te plaatsen dat de inhoud omvat. Soortgelijk:
Klinkt te moeilijk? Laat me je een voorbeeld geven:
Let op: Kleur wordt gespeld kleur bij het gebruik van deze code omdat deze ergens is gemaakt die niet zo cool is als Australië of Canada; Ik hoop dat je er niet al te veel last van hebt.
De vetgedrukte informatie in het bovenstaande voorbeeld is de opmaak die wordt verwerkt op de inhoud die is opgenomen in de
label. Zoek voor een lijst met hexadecimale codes voor verschillende kleuren op Google of gebruik deze site: http://html-color- codes.com/
3.2 Embedded Style Sheets (Cheat Sheets zijn win)
Het gebruik van de inline-stijlen in de vorige sectie kan lastig zijn als u een zeer grote site heeft. Maar als u dezelfde stijlen keer op keer wilt gebruiken, waarom zou u dan geen Ingesloten stijlblad? Met dit alternatief kunt u uw eigen stijlen maken in de
tag van de code en dan verwijs je ernaar in de code wanneer je wat inhoud op je pagina invoegt. Te ingewikkeld? Hier is een voorbeeld:
Zie je hoe de tekst van kleur, grootte of opmaak verandert, afhankelijk van het stijlblad bovenaan? Dit is niet zo moeilijk te begrijpen, toch?
In regel 7 introduceren we de start van de
Lijn 16 gebruikt de .extra klasse die eerder was gemaakt. De manier waarop dit werkt, is dat het bijdraagt aan de extra klasse aan welke stijl het is geopend, waarbij alle eigenschappen die de extra klasse gebruikt. Bijvoorbeeld: als een stijl het lettertype 20pt heeft en de kleur groen is, wordt er een klasse overheen geplaatst met een verschillende lettertypegrootte, dan zal de nieuwe lettergrootte de oude vervangen, maar de oude kleur groen zal doorgaan zoals het is.
3.3 Styles at war (conflicterende stijlen)
Er zijn drie stijlen en deze zijn:
• Gebruiker (bekijkt de website)
• Auteur (van de website)
• User Agent (browser)
De stijlen versmelten zo dat de best mogelijke setup ontstaat vanuit de positie van de gebruiker. De volgende grafiek toont de hiërarchie van de drie niveaus:
3.4 Style Sheets from beyond (extern)
Vind je het niet vervelend om in elk nieuw coderingsbestand altijd hetzelfde stijlblad te moeten schrijven? Er is een oplossing: Externe Style Sheets. U kunt een ander bestand maken om het te gebruiken voor opmaak; het is een ".css" het dossier. Typ het volgende uittreksel om het in een ander bestand te gebruiken:
Vervangen bestandsnaam met de naam van uw CSS-bestand en daar gaan we, ze zijn gekoppeld. Zorg ervoor dat uw CSS-bestand zich in dezelfde map bevindt als uw gekoppelde bestand (en).
Voorbeeld CSS-bestand:
Voordat we verdergaan, heb ik nagelaten te vermelden wat ze doet. Hierboven ziet u in de laatste regel dat ik "ul ul {font-size: .8em; } ”En dit betekent dat de lettergrootte zal worden gewijzigd in de relatieve .8 of 80% van de normale grootte die de gebruiker wil dat het zijn eigen stijlblad gebruikt dat in zijn browser is geladen. De meeste mensen gebruiken geen door de gebruiker gedefinieerd opmaakmodel, dus laten we ons daar geen zorgen over maken.
3.5 Positioneringselementen (waar naar de volgende?)
Wanneer u een afbeelding op een webpagina plaatst, wilt u niet dat deze gewoon ergens heen gaat. Zou je er geen zeggenschap over willen hebben? Nou, dit is hoe je het doet, het is eigenlijk een voorbeeld en ik zal het kort uitleggen:
In regel 9 t / m 13 zul je merken dat het een klasse is met de ID as fgpic en heeft een paar eigenschappen die erin worden gebruikt. De positie eigenschap is ingesteld op absoluut wat betekent dat het niet uitmaakt hoe de gebruiker het verandert, de afbeelding blijft waar uw (de auteur) het met zijn code plaatst. De top en links eigenschappen geven een punt aan waarop het element (bijv. afbeelding / tekst) wordt geplaatst. De z-index eigenschap is een zeer krachtig hulpmiddel omdat het het niveau van stapelen bepaalt, zoals weergegeven in de onderstaande schermafbeelding:
Zie hoe de achtergrondafbeelding aan de achterkant is met de z-indexwaarde van 1 en de tekst aan de voorkant met de z-indexwaarde van 3, terwijl de voorgrondafbeelding in het midden staat met een z-indexwaarde van 2. Laat het er eigenlijk best goed uitzien als je je kaarten goed speelt
3.6 Let op je omgeving (achtergrond)
Websites zien er goed uit met achtergronden, nietwaar? Zou het niet echt saai zijn als alle websites alleen een witte of zwarte achtergrond zouden hebben? Waarom plaats je er geen foto in en verander je de kleur een beetje? Er zijn een paar eigenschappen die u kunt gebruiken om de achtergrond van uw pagina iets meer te laten opvallen en de pagina wat opflakkering te geven. Bekijk de volgende code en kijk of je kunt uitzoeken wat de gemarkeerde eigenschappen doen:
Ben je erachter gekomen wat het doet? In feite is de achtergrondafbeelding wat we op de achtergrond gaan gebruiken, het pad van de afbeelding gaat tussen haakjes / haakjes als volgt> url (HIER). Je zou dit kunnen beschouwen als een z-indexwaarde 0 omdat het altijd helemaal achteraan de pagina staat. De achtergrondpositie van de afbeelding is linksonder ingesteld, vrij duidelijk rechts? Vervolgens is de achtergrondafbeelding herhaald over de x-as van de pagina (herhaal-x) en niet alleen dat, maar is vastgezet aan de onderkant van het venster (achtergrond-bijlage). Ten slotte is de kleur willekeurig ingesteld om voornamelijk rood te zijn. Kijk hieronder voor het resultaat:
3.7 Hoe groot denk je? (afmetingen van elementen / tekstlimieten)
Als je denkt dat dat alles is wat CSS te bieden heeft, heb je het helemaal mis. CSS-regels kunnen de werkelijke afmetingen van elk pagina-element specificeren. Laten we het voorbeeld van een tekstvak nemen. Wil je wat tekst typen die niet helemaal over het scherm gaat, of misschien een tekstvak maken dat kan worden gescrolld zonder de pagina te verplaatsen? Dit is waar je dan zou moeten zijn. Zie de onderstaande schermafbeelding voor wat ik zojuist heb beschreven:
Laten we nu eens kijken naar de code achter de schermen:
Een kleine opmerking: regel 6 voegt een marginale rand toe aan de onderkant van elk van de tekstvakken. Best cool, toch? Maar meer over grenzen in de volgende sectie.
3.8 Wat rondgaat, komt rond (grenzen)
Ik denk niet dat dit een uitleg nodig heeft, maar ik zal er toch een geven. In principe kunt u vrijwel overal grenzen stellen, dus laten we eens kijken hoe u dit moet doen. Dus hier is de code:
Dit is wat de code doet, in feite een assortiment randen rond de naam / namen van het type grens dat wordt gebruikt. Houd er rekening mee dat het tegenovergestelde van groef nok is en het tegenovergestelde van inzet is begin.
3.9 Drijvende en vloeiende elementen
Het is meestal nogal saai om eerst de kop, dan de tekst en vervolgens de kop en dan de tekst te zien. Hoewel het er niet een beetje leuker uitziet? Er is een methode die kan worden gebruikt drijvend, en nu ga ik je laten zien hoe je dat moet doen. Met zwevend kunt u een element naar één kant van het scherm verplaatsen, terwijl andere inhoud in het document vervolgens rond het zwevende element stroomt. Het zwevende element kan een afbeelding of een kop zijn of zelfs een ander tekstblok. Laten we nu eens kijken hoe dat eruit ziet:
Behoorlijk goed voor nogal wat situaties, nu is dit de code die dit ontwerp construeert:
Is het niet verbazingwekkend wat je kunt doen als je gewoon de juiste methode vindt?
3.10 Laat het menu niet vallen - voorbeeld
Als je overweegt een website te maken, heb je waarschijnlijk een menu nodig, toch? Nou, dit is misschien de juiste plek om naartoe te gaan als je iets wilt dat niet alleen daar zit. Dynamische elementen zorgen ervoor dat webpagina's er beter uitzien en een beter gevoel geven aan de algehele site.
Een van mijn favoriete soorten menu's moet een zijn drop-down menu dus laten we nu eens kijken hoe we er een kunnen maken met CSS. Bekijk de onderstaande code:
Ik weet dat dit in het begin een beetje ontmoedigend lijkt, maar als je geduldig bent en gewoon verder leest, zul je het snel genoeg begrijpen.
Regel 15 zegt: wanneer ik een
Regel 16-21 zegt: als ik een
Regel 22 zegt: wanneer ik een
Kijk hieronder voor het eindproduct:
3.11 User Style Sheets (jij bent het middelpunt van het universum)
Gebruikers kunnen hun eigen definiëren stijlbladen voor gebruikers om pagina's eruit te laten zien zoals ze willen. Gewoon om onderscheid te maken Gebruikersstijlbladen en Auteur Style Sheets. Gebruikersstijlen zijn externe stijlbladen die gebruikers zelf kunnen maken en die eenvoudig als CSS-bestanden worden uitgevoerd zonder de meeste codering. Hier laat ik je er een zien:
Was dat niet extreem eenvoudig?
Als u wilt weten hoe u dit in uw eigen browser kunt instellen, gaat u gewoon naar Extra >> Internetopties >> Algemeen >> Toegankelijkheid >> Definieer vervolgens uw eigen bestand Het Author Style Sheet wordt gedefinieerd in de code ertussenin .
4. Meer informatie
4.1 Waarom xHTML en co gebruiken. over ontwerp en andere toepassingen?
Voordat je dit als feit of iets dergelijks beschouwt, moet je weten dat dit gewoon een standpunt is, afhankelijk van waar je staat en hoe technisch ingesteld je bent. Ik gebruik graag programmeertalen om mijn projecten te voltooien, omdat dit betekent dat u begrijpt wat er achter de ontwerpen zit, terwijl u ontwerptoepassingen zoals gebruikt Adobe Dreamweaver en met Microsoft FrontPage kunt u uw website maken met alleen de tools die beschikbaar zijn in de menu's. Daarom zijn de ontwerptoepassingen beperkt tot de menuoptie die u wordt aangeboden. Kortom, het is volkomen duidelijk dat het gebruik van programmeertalen de website of het voltooide product zou inbouwen iets veel aantrekkelijkers omdat de functionaliteit ervan alleen wordt beperkt door de vaardigheid van de programmeur met de aangewezen taal (bijv. JavaScript, CSS, xHTML). Ik weet dat je waarschijnlijk denkt dat ik bevooroordeeld ben, maar je moet ze allebei uitproberen en beslissen hoe veel moeite die u in uw werk wilt steken, kies dan de juiste hulpmiddelen om bij uw werk te komen bestemming. U kunt er zelfs voor kiezen om beide te gebruiken, omdat zowel Dreamweaver als FrontPage een "codeerweergave" en een "ontwerpweergave" hebben.
Er zijn andere manieren om websites te maken, zoals het gebruik van Joomla en WordPress.
4.2 Joomla
Joomla is een geweldig Content Management Systeem (CMS) met veel flexibiliteit en met een makkelijk te gebruiken gebruiker interface waar veel mensen geïntimideerd over raken als ze beseffen hoeveel opties en configuraties er zijn beschikbaar. Joomla is een platform gebaseerd op PHP en MySQL. Deze software is open source waar je van kunt krijgen http://www.joomla.org/download.html
Als je een diepgaande gids over Joomla wilt, probeer dan deze gids van MakeUseOf: //www.makeuseof.com/tag/download-the-complete-beginners-guide-to-joomla/ De beginnersgids voor JoomlaDeze gids zal u door alles leiden, van waarom u Joomla kiest en hoe u het op uw webserver installeert, hoe u uw site naar eigen wens kunt ontwerpen en aanpassen. Lees verder
4.3 WordPress
WordPress is een Content Management Systeem (CMS) waarmee gebruikers via een administratie een website kunnen maken en onderhouden interface, inclusief een automatisch gegenereerde navigatiestructuur, zonder dat u HTML hoeft te kennen of een andere tool hoeft te leren. WordPress is een stuk open source-software dat door duizenden programmeurs over de hele wereld is gemaakt en in het publieke domein is geplaatst, dus u hoeft niet te betalen om het te gebruiken. WordPress is een webgebaseerde applicatie, geschreven in PHP en MySQL, ontworpen om op Linux-servers te draaien: PHP is een programmeertaal voor internet applicaties, MySQL is een relationele database (zoals MS Access) en Linux is een besturingssysteem voor webservers - deze zijn ook allemaal open bron. WordPress is verreweg het populairste CMS met eind 2009 meer dan 200 miljoen sites wereldwijd.
Extra lezen
- Top 11 HTML-tags die elke blogger en website-eigenaar moet kennen Top 11 HTML-tags die elke blogger en website-eigenaar moet kennenHet world wide web kent vele talen en is gecodeerd in verschillende talen. De enige taal die overal te vinden is en die al bestaat sinds de uitvinding van webpagina's, is de ... Lees verder
- 5 leuke dingen om online te doen met HTML5 5 leuke dingen om online te doen met HTML5HTML5 blijft groeien, met steeds meer websites die overschakelen naar de nieuwe standaard die multimedia-inhoud naar het web brengt zonder de noodzaak van plug-ins zoals Adobe Flash. Is dat gestraald ... Lees verder
- Code voor het web met deze tools rechtstreeks in uw browser Build It: 11 briljante Chrome-extensies voor webontwikkelaarsChrome is geweldig voor webontwikkelaars vanwege de pool van extensies. Als u ooit van plan bent een website te ontwerpen of te coderen, zijn hier enkele essentiële tools die u meteen moet installeren. Lees verder
Gids gepubliceerd: juni 2011
