Autora:
Laura McKinney
Data De La Creació:
3 Abril 2021
Data D’Actualització:
1 Juliol 2024
Content
HTML (HyperText Markup Language) és un llenguatge bàsic per crear pàgines web. Es va crear com un llenguatge de codificació fàcil i flexible. Gairebé tots els llocs web d'Internet es desenvolupen amb alguna forma d'aquest codi (ColdFusion, XML, XSLT). L’HTML és fàcil d’entendre, però podeu continuar aprenent-ne durant molt de temps si us interessa la seva funcionalitat completa. Per afegir color i diversió al vostre lloc web, podeu aprendre CSS bàsic tan aviat com us acostumeu a una pàgina HTML bàsica.
Passos
Primera part de 4: Construir un document
Obriu un editor de text senzill. NotePad és una bona opció i es pot descarregar gratuïtament. Podeu escriure HTML amb la majoria d’editors de text, però un programari més complex amb capacitats de format automàtic pot dificultar l’organització de la vostra pàgina HTML.
- No utilitzeu TextEdit, ja que normalment guarda el fitxer en un format que el vostre navegador pot no reconèixer com a HTML.
- També podeu utilitzar un editor HTML en línia. No es recomana programes d'edició HTML dedicats per a principiants.
Deseu un fitxer com a pàgina web. Trieu Fitxer → Desa com al menú de la part superior. Canvieu el format del fitxer a "Pàgina web", ".html" o ".htm". Deseu el fitxer on el pugueu trobar fàcilment.- No hi ha diferència entre aquestes tres opcions.
Obriu el fitxer en un navegador. Feu doble clic al fitxer i s'obrirà automàticament com una pàgina web en blanc al navegador. Com a alternativa, podeu obrir un navegador, com ara Firefox o Internet Explorer, i després utilitzar Fitxer → Obre fitxer per seleccionar el document.
- Aquest lloc web no està en línia. Només es pot visualitzar a l'ordinador.
Actualitzeu la pàgina web i consulteu els canvis realitzats. Escriviu el següent al document en blanc: Hola. Deseu el document. Actualitzeu la pàgina web en blanc del navegador i hauríeu de veure la paraula "Hola" en negreta a la part superior de la pàgina. Sempre que vulgueu provar el vostre nou HTML durant aquest tutorial, deseu el document .htm i, a continuació, actualitzeu la finestra del navegador per veure com es compila HTML.- Si veieu les paraules ""i"'' Apareix al vostre navegador, el fitxer no s'ha compilat correctament en HTML. Proveu un editor de text diferent o un altre navegador.
Apreneu les etiquetes. Les ordres HTML s'escriuen en "etiquetes" que indiquen al navegador com compilar i mostrar la vostra pàgina web. Sempre s’escriuen entre cometes simples, i no es mostren a la pàgina web tal com les heu utilitzat a l'exemple anterior: - és una "targeta d'inici" o "targeta oberta". Tot el que s'escrigui després d'aquesta etiqueta es definirà com a "negreta" (negreta en una pàgina web).
- és una "etiqueta final" o "etiqueta de tancament", que podeu distingir pel símbol de /. Denota el final del text en negreta. La majoria de les etiquetes (no totes) necessiten una etiqueta final per funcionar, així que assegureu-vos d’incloure-la.
Construeix el document. Suprimiu tot el document HTML. Comenceu de nou amb el text següent, exactament tal com estava escrit (menys els punts vius). Aquest codi HTML indica al navegador quin tipus d’HTML utilitzeu i que tot el vostre HTML es col·locarà dins de les etiquetes. i .
Afegiu el cap (cap) i les etiquetes del cos. Els documents HTML es divideixen en dues parts. La secció "superior" és per obtenir informació especial, com el títol de la pàgina. La secció "cos" conté el contingut principal de la pàgina. Afegiu aquestes dues seccions al document i recordeu d’incloure les etiquetes finals. El text acabat d'afegir és en negreta:
Posa un títol a la teva pàgina. La majoria de les cartes de la secció principal no tenen importància per aprendre-les amb un principiant. Tanmateix, l’etiqueta de títol és fàcil d’utilitzar i determinarà el que apareix com a nom de la finestra del navegador o a la pestanya del navegador. Col·loqueu les etiquetes d'inici i de finalització del títol dins de les etiquetes del cap i escriviu les capçaleres que vulgueu entre aquestes etiquetes:
La meva primera pàgina HTML.
Part 2 de 4: format de text
Afegiu text al vostre cos. Per a aquesta secció, només treballarem amb etiquetes corporals. L’altre text continuarà estant al vostre document, però estalviarem espai si no el repetiu en aquest tutorial. Escriu el que vulguis entre les cartes i , i apareixerà com a primer contingut de la vostra pàgina. Per exemple:
- Vaig seguir les instruccions de wikiHow per escriure una pàgina HTML.
Afegiu capçaleres per al text. Organitzeu la pàgina amb etiquetes d’encapçalament, que indiquen al navegador que mostri text entre elles amb una mida de lletra més gran. Aquestes etiquetes també les utilitzen els motors de cerca i altres eines per determinar de què tracta el vostre lloc web i com s’organitza.
és l'encapçalament més gran i podeu crear encapçalaments més petits fins a
. Proveu-los a la vostra pàgina:Benvingut a la meva pàgina.
- Vaig seguir les instruccions de wikiHow per escriure una pàgina HTML.
El meu objectiu avui:
Objectius assolits:
- Obteniu informació sobre com s'utilitzen els encapçalaments.
Objectius incomplerts:
- Obteniu més informació sobre les etiquetes de format de text.
Obteniu més informació sobre les etiquetes de format de text. Ja heu vist l'etiqueta "forta", però hi ha moltes altres maneres de formatar el text. Proveu aquestes etiquetes o amb diverses etiquetes alhora per a la mateixa cadena de text. Recordeu afegir etiquetes finals a la part posterior.
- Text important, que es mostra en negreta al navegador.
- Text destacat, que es mostra en cursiva al navegador.
- Envieu un missatge de text una mica més petit de l'habitual. Aquest text canviarà automàticament la mida si s’utilitza en un encapçalament.
El text ja no és rellevant, es mostra amb un guió corporal.- El text s'insereix més tard que altres documents, es mostra amb subratllats.
Organitzeu el text a la vostra pàgina. És possible que us hàgiu adonat que prement la tecla "enter" no és suficient perquè el text aparegui en una altra línia. Aquestes etiquetes us poden ajudar a crear paràgrafs i salts de línia o a organitzar el text d’altres maneres:
Abreviació de "paràgraf", aquesta etiqueta mantindrà tot el text entre aquestes etiquetes en un paràgraf i el separarà del text superior i inferior.
Aquesta etiqueta generarà salts de línia. No hi afegiu cap etiqueta final, ja que no interfereix amb cap altre contingut. Utilitzeu aquesta etiqueta en poemes o línies d’adreces, no en paràgrafs.Si heu de mostrar text amb molta precisió, aquesta etiqueta estableix el text que hi ha dins d’un tipus de lletra d’amplada fixa (cada lletra té la mateixa amplada) i us permet crear intervals Espais en blanc i salts de línia com vulgueu per editar-los regularment en lloc d'etiquetes.
Aquesta etiqueta defineix el tipus de text que es cita d'una font.
Podeu descriure la font més endavant amb citar targeta.
Afegiu un text de subtítol invisible. Les etiquetes de comentaris no es mostren a la pàgina web. Permeten anotar-vos al document HTML sense afectar el contingut. No afegiu cap etiqueta final.
- Les cartes que van soles sense etiquetes finals s'anomenen "etiquetes buides".
Combineu-los junts. La millor manera de recordar aquestes etiquetes és utilitzar-les al vostre lloc web. Aquí teniu un exemple d’utilitzar les cartes en els passos que heu après fins ara. Proveu de predir com es mostraran al navegador i, a continuació, copieu-los al vostre document i informeu-vos-en. publicitat
Part 3 de 4: Afegir enllaços i imatges
Més informació sobre els atributs. Les etiquetes poden tenir informació addicional escrita al seu interior, anomenades atributs. Aquests atributs es representen amb paraules addicionals dins de les etiquetes, en el formulari nom de la propietat = "valor específicPer exemple, qualsevol etiqueta HTML pot tenir l'atribut title:
El paràgraf d’introducció és aquí.
Anoteu el títol del paràgraf "Introducció" que apareixerà quan passeu el cursor per sobre del paràgraf de la pàgina web.
Enllaços a altres llocs web. Ús de cartes per crear un hiperenllaç a qualsevol altra pàgina web. Inseriu l'URL de la pàgina web per enllaçar-lo mitjançant l'atribut href. Aquí teniu un exemple que enllaça a la pàgina web que esteu llegint:
Afegiu un atribut d'identificador a l'etiqueta. Un altre atribut que pot utilitzar qualsevol etiqueta HTML és l'element "id". En qualsevol targeta, escriviu id = "vidu" o utilitzeu qualsevol nom que no contingui espais. No produeix cap efecte visible, però l’utilitzarem en el següent pas.
- Per exemple, afegiu el següent al vostre document:
Aquest paràgraf s'utilitza com a exemple per descriure el funcionament de l'atribut id.
- Per exemple, afegiu el següent al vostre document:
Enllaç a un element amb un identificador determinat. Ara podem utilitzar l’etiqueta d’enllaç, , per enllaçar a una altra ubicació de la mateixa pàgina. En lloc d’un URL, utilitzarem el símbol #, seguit del valor d’identificador al qual volem enllaçar. Per exemple, Aquest text enllaçarà al text amb l'identificador "vidu".
- Tots els valors HTML distingeixen entre majúscules i minúscules. "#VIDU" i "#vidu" enllaçaran a la mateixa ubicació.
- Si la vostra pàgina és prou curta per mostrar-la sencera alhora, probablement no notareu res quan feu clic a l'enllaç del navegador. Canvieu la mida de la finestra fins que aparegui la barra de desplaçament i torneu-ho a provar.
Afegiu fotos. Targeta
és una etiqueta buida, és a dir, que no cal cap etiqueta final. Tota la informació que el navegador necessita per mostrar la imatge s’afegeix mitjançant atributs. Aquí teniu un exemple per mostrar el logotip de wikiHow, amb una descripció de cada atribut al darrere:
- Propietats src = "" indica al navegador on és la foto. (Tingueu en compte que publicar una foto des del lloc d'una altra persona es considera inadequat i que desapareixerà quan la pàgina deixi d'estar activa).
- Propietats style = "" Pot fer moltes coses, però el més important és que s’utilitza per definir l’amplada i l’alçada d’una imatge en píxels. (També podeu utilitzar els atributs separats width = "" i height = "", però això pot comportar problemes de redimensionament estranys si utilitzeu CSS.)
- Propietats alt = "" és una breu descripció de la imatge que l'usuari veurà si la imatge no s'ha pogut carregar. Això es considera un requisit, ja que s’utilitza per als lectors de pantalla per als visitants del lloc web que són cecs.
Part 4 de 4: Més informació Afegir i posar en línia el vostre lloc web
Confirmeu el vostre HTML. La validació HTML comprova si hi ha errors al vostre codi. Si el vostre lloc no es mostra correctament, la validació us pot ajudar a trobar l’error que està provocant el problema. També us pot ensenyar més informació sobre HTML determinant que el codi es veu bé, però ja no es recomana a causa de les noves actualitzacions de l’estàndard HTML. L’ús d’HTML no vàlid no fa inútil el vostre lloc, però pot causar problemes o mostrar-se inestable en diferents navegadors.
- Proveu un servei gratuït de validació en línia des del W3C o cerqueu una altra eina de validació HTML 5 en línia.
Obteniu més informació sobre etiquetes i atributs. Hi ha moltes altres etiquetes i atributs HTML, i molts llocs per aprendre'ls:
- Proveu w3schools i HTML Dog per obtenir més tutorials i llistes completes d'etiquetes.
- Cerqueu una pàgina web que us agradi com es veu i, a continuació, utilitzeu la funció "Veure la font de la pàgina" del navegador per obtenir el codi HTML. Copieu-lo al document i examineu-ne el funcionament.
- Llegiu altres articles i obteniu informació sobre com crear taules en HTML, utilitzar metaetiquetes per augmentar les vostres possibilitats de ser trobats pels motors de cerca o utilitzar una divisió. establiu una àrea a la pàgina) i span (que s'utilitza per especificar l'estil de l'element de text) per ajudar l'estil a través de CSS.
Obteniu el vostre lloc web en línia. Trieu un servei per allotjar el vostre lloc web i, a continuació, podeu penjar tantes pàgines HTML com vulgueu al vostre domini web personal. Per fer-ho, haureu d’utilitzar el programari de càrrega FTP, però molts serveis de lloguer web també ofereixen aquest servei.
- En enllaçar a pàgines o imatges directament al vostre lloc, haureu d’utilitzar l’adreça completa. Per exemple, si el vostre nom de domini és www.chuyengiahtmlsieudang.com, llavors el text es troba en aquestes etiquetes enllaçarà a "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html"
Afegiu estils amb CSS. Si la vostra pàgina HTML sembla una mica monòtona, proveu d'aprendre els conceptes bàsics de CSS per afegir colors, tipus de lletra diferents i controlar millor on es col·loquen els elements. Enllaçar un "full d'estil" CSS a una pàgina HTML us permetrà fer canvis dràstics sobre la marxa, ajustant dinàmicament l'estil de tot el text d'una etiqueta determinada. Podeu jugar una mica amb la capa de format bàsica aquí o endinsar-vos en tutorials més detallats al tutorial CSS de HTML Dog.
Afegiu JavaScript al vostre lloc web. JavaScript és un llenguatge de programació que s’utilitza per afegir moltes funcions a les vostres pàgines HTML. Les ordres de JavaScript s’insereixen entre les etiquetes inicial i final i es pot utilitzar per afegir botons interactius, calcular problemes matemàtics i molt més. Obteniu més informació als exemples del w3c. publicitat
Consells
- La declaració doctype (Declaració de tipus de document utilitzada) que s'utilitza en aquest tutorial és "transició HTML 4.0.1 solta" (HTML 4.0.1 no transició ajustada), un format fàcil. per als novells. Utilitzar () una alternativa per al navegador per compilar-lo en estricte format HTML 5, que és l’estil estàndard recomanat (encara que menys utilitzat).
Advertiment
- L’objectiu de l’HTML és mantenir el contingut en un format global. No té cap control sobre la presentació del vostre lloc web, com ara el color de fons i la ubicació exacta dels elements. Tot i que encara hi ha etiquetes que us permeten fer-ho, és una bona idea utilitzar CSS per crear un lloc web més controlable i coherent.
Què necessites
- Un editor de text senzill, com NotePad o TextEdit
- Un navegador web, com Internet Explorer o Mozilla Firefox
- (Opcional) Un editor HTML com Adobe Dreamweaver, Aptana Studio o Microsoft Expression Web
