Innehållsförteckning
HTML (HyperText Markup Language) eller hypertextmarkeringsspråk, är standarden som används för utveckling av webbsidor, det är ett språk baserat på taggar som strukturerar information baserat på innehållshierarkin. HTML ger i sig inte grafiska egenskaper för den information som presenteras, den organiserar den bara på ett sådant sätt att den har en logisk läsordning.För det andra CSS (Cascading Style Sheet) eller cascading style sheets är ett språk som används för att definiera och skapa presentationen av ett strukturerat dokument skrivet i HTML.
I denna handledning kommer vi att presentera den grundläggande strukturen för ett dokument HTML5, de mest populära etiketterna och den hierarkiska ordningen för att deklarera dem. I sin tur kommer vi att förklara förhållandet mellan HTML5 och CSS3, hur de kan relateras, strukturen för deklarationerna som gjorts i CSS3 och de grafiska attributen som de kan ge HTML -dokumentet.
För exemplen som vi ska utföra är det nödvändigt att ha en kodredigerare, i vårt fall är den valda redaktören Dreamweaver CC 2014, i självstudien Dreamweaver CS6 Grunder: Att känna till arbetsmiljön applikationens egenskaper beskrivs som förblir desamma trots skillnaden i deras versioner
1. Struktur för ett HTML5 -dokument
TILL) Denna tagg indikerar den version som vi kommer att använda i dokumentet, i det här fallet är det version 5 av HTML.
B) Indikerar öppnandet av ett HTML -dokument, det är den första taggen som deklareras.
C) Du kan inkludera en titel för dokumentet, skript, stilar, metainformation, bland annat.
D) Ger metadata om HTML -dokumentet. Metadata visas inte på sidan, de analyseras endast som bifogad information. Elementen används normalt för att ange sidbeskrivning, sökord, dokumentförfattare bland annat. I exemplet som visas på bilden har vi använt teckenuppsättningsattributet för att definiera teckenuppsättningen där sidan ska visas, charset = "utf-8" när det gäller det spanska språket.
OCH) Det tillåter oss att tilldela namnet på sidan som kommer att visas i webbläsare.
F) De allra flesta taggar i HTML behöver en öppningsdeklaration och en avslutande deklaration:
Märk innehållI det här fallet stänger bilden som visas taggen med
G) Allt inom detta element kommer att visas av webbläsaren, det vill säga inom denna tagg kommer vi att beteckna allt visuellt innehåll i vårt HTML -dokument.
H) På samma sätt som förklaras i avsnittet F detta är stängningen av taggen
Jag) På samma sätt som förklaras i avsnittet F detta är stängningen av taggen
Struktur för ett CSS3 -dokument
TILL) .klass: Alla deklarationer som börjar med en period är av klastypen, deras grafiska egenskaper kan tillämpas på valfri HTML -tagg.
B) #Id: Deklarationer som börjar med pundtecknet indikerar att det är av typ -ID. Både klasser och ID används för att ange vilka grafiska attribut vi vill ge till vårt HTML -innehåll. Skillnaderna mellan dessa två typer av påståenden är dock följande:
ID: n är unika:
- Varje element kan bara ha ett ID.
- Varje sida kan bara ha ett element med det ID: t.
Vår HTML -kod klarar inte validering om samma ID används i mer än ett element.
Klasserna är inte unika:
- Samma klass kan användas i flera element.
- Du kan använda flera klasser i samma element.
Varje styling som måste tillämpas på flera objekt på en sida måste göras med en klass. Det är viktigt att nämna att allt som anges i CSS -dokument är skiftlägeskänsligt.
C) {Öppningsstöd som startar deklarationen av attributen.
D) } Nyckel som stänger deklarationer som gjorts till en klass eller ett ID.
OCH) Attributstruktur: efter att ha deklarerat ett attribut är det nödvändigt att ange dess värde, i exemplet som visas i bilden tilldelar vi en höjd på 600 pixlar till #Id.
För att skilja attributen och deras värden används ett semikolon; som illustreras på bilden.
Dessa är på ett enkelt sätt de allmänna egenskaperna hos en kods struktur HTML, de nödvändiga etiketterna och hur du beställer dem. I fallet med CSS deklarationstyperna och deras allmänna struktur. Med denna kunskap kommer vi att vara redo att göra vår första HTML och ge etiketterna grafiska egenskaper.Gillade du och hjälpte denna handledning?Du kan belöna författaren genom att trycka på den här knappen för att ge honom en positiv poäng