Home-theater-designers
Tot i que els llocs web moderns generalment es construeixen amb interfícies fàcils d'utilitzar, és útil conèixer alguns HTML bàsics. Si coneixeu les següents 17 etiquetes d’exemple HTML (i alguns extres), podreu crear una pàgina web bàsica des de zero o modificar el codi creat per una aplicació com WordPress.
Hem proporcionat exemples de codi HTML amb sortida per a la majoria de les etiquetes. Si voleu veure'ls en acció, descarregueu el fitxer HTML de mostra al final de l'article. Podeu jugar-hi en un editor de text i carregar-lo en un navegador per veure què fan els vostres canvis.
1.
Necessitareu aquesta etiqueta al principi de cada document HTML que creeu. Assegura que un navegador sap que llegeix HTML i que espera HTML5, la versió més recent.
Tot i que en realitat no es tracta d’una etiqueta HTML, encara és bo saber-ho.
2.
Aquesta és una altra etiqueta que indica a un navegador que llegeix HTML. L'etiqueta va directament després de l'etiqueta DOCTYPE i la tanqueu amb una etiqueta just al final del fitxer. La resta del document va entre aquestes etiquetes.
3.
L'etiqueta inicia la secció de capçalera del fitxer. El contingut que entra aquí no apareix a la vostra pàgina web. En el seu lloc, conté metadades per als motors de cerca i informació per al vostre navegador.
Per a les pàgines bàsiques, l'etiqueta contindrà el vostre títol, i això és tot. Però hi ha algunes altres coses que podeu incloure, que revisarem en un moment.
4.
Aquesta etiqueta defineix el títol de la vostra pàgina. Tot el que heu de fer és posar el títol a l’etiqueta i tancar-lo, així (també he inclòs les etiquetes de capçalera per mostrar el context):
My Website
Aquest és el nom que es mostrarà com a títol de la pestanya quan s'obri en un navegador.
5.
Igual que l'etiqueta de títol, les metadades es col·loquen a l'àrea de capçalera de la pàgina. Els motors de cerca utilitzen principalment les metadades i són informació sobre el que hi ha a la vostra pàgina. Hi ha diversos metacamps diferents, però aquests són alguns dels més utilitzats:
- descripció : Una descripció bàsica de la vostra pàgina.
- paraules clau : Una selecció de paraules clau aplicables a la vostra pàgina.
- autor : L'autor de la vostra pàgina.
- finestra gràfica : Una etiqueta per garantir que la vostra pàgina tingui un bon aspecte en tots els dispositius.
A continuació, es mostra un exemple que es pot aplicar a aquesta pàgina:
L'etiqueta 'viewport' sempre hauria de tenir 'width = device-width, initial-scale = 1.0' com a contingut per assegurar-vos que la vostra pàgina es mostri bé als dispositius mòbils i d'escriptori.
6.
Després de tancar la secció de capçalera, arribareu al cos. Ho obriu amb l'etiqueta i el tanqueu amb l'etiqueta. Això passa just al final del fitxer, just abans de l'etiqueta.
Tot el contingut de la vostra pàgina web es troba entre aquestes etiquetes. És tan senzill com sembla:
Everything you want displayed on your page.
7.
Capçalera una mica menys gran
Sub-capçalera
Resultat:
Com podeu veure, es fan més petits a cada nivell.
8.
L'etiqueta de paràgraf inicia un paràgraf nou. Això sol inserir dos salts de línia.
Mireu, per exemple, el trencament entre la línia anterior i aquesta. Això és el que un
etiqueta farà.
Your first paragraph.
Your second paragraph.
Resultat:
El vostre primer paràgraf.
El vostre segon paràgraf.
Tu pots també utilitzeu estils CSS a les etiquetes de paràgraf, com aquesta que canvia la mida del text:
This is 50% larger text.
Resultat:
9.
L'etiqueta de salt de línia insereix un salt de línia únic:
The first line.
The second line (close to the first one).
Resultat:
Treballar d 'una manera similar és
etiqueta. Dibuixa una línia horitzontal a la pàgina i serveix per separar seccions de text.
10.
Aquesta etiqueta defineix un text important. En general, això vol dir que serà en negreta. No obstant això, és possible utilitzar CSS per crear la visualització del text és diferent.
com afegir música al vídeo a l'iPhone
No obstant això, podeu utilitzar-lo amb seguretat a text en negreta.
Very important things you want to say. Resultat:
Coses molt importants que voleu dir.
Si esteu familiaritzat amb el per a text en negreta, encara podeu utilitzar-lo. No hi ha cap garantia que continuï funcionant en versions futures d'HTML, però de moment funciona.
11.
M'agrada i , i estan relacionats. El l'etiqueta identifica el text emfatitzat, que en general vol dir que apareixerà en cursiva. De nou, hi ha la possibilitat que CSS faci que el text emfatitzat es mostri de manera diferent.
An emphasized line. Resultat:
Una línia emfatitzada.
El etiqueta encara funciona, però, de nou, és possible que quedi obsolet en futures versions d'HTML.
12.
El , o ancoratge, us permet crear enllaços. Un enllaç senzill té aquest aspecte:
Aneu a MUO L'atribut 'href' identifica la destinació de l'enllaç. En molts casos, aquest serà un altre lloc web. També pot ser un fitxer, com una imatge o un PDF.
Altres atributs útils inclouen 'objectiu' i 'títol'. L'atribut de destinació s'utilitza gairebé exclusivament per obrir un enllaç en una nova pestanya o finestra, com aquesta:
Go to MUO in a new tab Resultat:
Aneu a MUO en una pestanya nova
L'atribut 'title' crea una descripció emergent. Passeu el cursor per sobre de l'enllaç següent per veure com funciona:
Hover over this to see the tool tip Resultat:
Passeu el cursor per sobre per veure el consell de l'eina
13. ![]()
Si voleu incrustar una imatge a la vostra pàgina, haureu d'utilitzar l'etiqueta d'imatge. Normalment l’utilitzarà juntament amb l’atribut 'src'. Això especifica la font de la imatge, així:
Resultat:
com esbrinar què eren els vídeos de YouTube suprimits
Hi ha altres atributs disponibles, com ara 'altura', 'amplada' i 'alt'. A continuació s’explica el fet:
Com podríeu esperar, els atributs 'altura' i 'amplada' estableixen l'alçada i l'amplada de la imatge. En general, és una bona idea establir només un d’ells perquè la imatge s’escali correctament. Si utilitzeu les dues coses, podríeu acabar amb una imatge estirada o reduïda.
L'etiqueta 'alt' indica al navegador quin text ha de mostrar si la imatge no es pot mostrar i és una bona idea incloure-la amb qualsevol imatge. Si algú té una connexió especialment lenta o un navegador antic, encara es pot fer una idea del que hauria de figurar a la vostra pàgina.
14.
L'etiqueta de llista ordenada us permet crear una llista ordenada. En general, això significa que obtindreu una llista numerada. Cada element de la llista necessita una etiqueta d'element de llista (
), de manera que la vostra llista tindrà aquest aspecte:
- First thing
- Second thing
- Third thing
Resultat:
- Primera cosa
- Segona cosa
- Tercera cosa
En HTML5, podeu utilitzar-lo
per invertir l'ordre dels nombres. I podeu establir el valor inicial amb l’atribut start. L'atribut 'tipus' us permet indicar al navegador quin tipus de símbol s'ha d'utilitzar per als elements de la llista. Es pot establir a '1,' A, 'a,' I 'o' i ', configurant la llista que es mostrarà amb el símbol indicat així:
15.
La llista no ordenada és molt més senzilla que la seva contrapartida ordenada. És simplement una llista amb vinyetes.
- First item
- Second item
- Third item
Resultat:
- Primer element
- Segon ítem
- Tercer element
Les llistes no ordenades també tenen atributs 'tipus' i podeu configurar-lo a 'disc', 'cercle' o 'quadrat'.
16.
Tot i que l’ús de taules per al format està mal vist, hi ha moltes vegades que voldreu utilitzar files i columnes per segmentar la informació de la vostra pàgina. Calen diverses etiquetes perquè una taula funcioni. Aquí teniu el codi HTML de mostra:
1st column
2nd column
Row 1, column 1
Row 1, column 2
Row 2, column 1
Row 2, column 2
El
i
les etiquetes especifiquen l'inici i el final de la taula. ElL'etiqueta conté tot el contingut de la taula. Cada fila de la taula està inclosa en un
etiqueta. Cada cel·la de cada fila s'embolica en una de les duesetiquetes per a capçaleres de columna o etiquetes per a dades de columnes. Necessiteu una d’aquestes per a cada columna de cada fila. Resultat:
1a columna 2a columna Fila 1, columna 1 Fila 1, columna 2 Fila 2, columna 1 Fila 2, columna 2
17.
Quan citeu un altre lloc web o persona i vulgueu establir el pressupost a part de la resta del vostre document, utilitzeu l’etiqueta blockquote. Tot el que heu de fer és incloure el pressupost a les etiquetes de pressupostos d'obertura i tancament:
The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.
Resultat:
La web tal com la vaig preveure, encara no l’hem vista. El futur encara és molt més gran que el passat.
El format exacte que s'utilitzi pot dependre del navegador que utilitzeu o del CSS del vostre lloc. Però l’etiqueta continua sent la mateixa.
Mostres de codi HTML
Amb aquests 17 exemples HTML, hauríeu de ser capaç de crear un lloc web senzill. Podeu provar-los tots ara mateix en un editor de text en línia per tenir una idea de com funcionen.
Per obtenir més lliçons en HTML de mida de mossegada, proveu algunes aplicacions de microaprenentatge per codificar. Us ajudaran a posar-vos al dia en poc temps.
Compartir Compartir Tweet Correu electrònic Voleu aprendre la codificació bàsica? Proveu 5 aplicacions de codificació de mida picada en el vostre temps lliure Voleu aprendre la codificació bàsica però teniu poc temps? Aquestes aplicacions de codificació de mida petita ocuparan pocs minuts del dia ocupat.
Llegiu a continuació Temes relacionats - Programació
- Wordpress
- HTML
- Desenvolupament web
- Tutorials de codificació
Sobre l'autor Andy Betts(221 articles publicats) Andy és un ex-periodista imprès i editor de revistes que fa 15 anys que escriu sobre tecnologia. En aquest temps ha col·laborat en innombrables publicacions i ha realitzat treballs de redacció per a grans empreses tecnològiques. També ha proporcionat comentaris d'experts als mitjans de comunicació i ha organitzat panells en esdeveniments de la indústria.
Més d'Andy BettsSubscriu-te al nostre butlletí
Uniu-vos al nostre butlletí per obtenir consells tècnics, ressenyes, llibres electrònics gratuïts i ofertes exclusives.
Feu clic aquí per subscriure-us