Com es crea una pàgina HTML

Vídeo: Como crear una pagina web completa en HTML - 1

Content

Passos
Mètode 1 d'1: escriure una pàgina HTML
Consells
Advertiments
Què necessites

HTML (Hypertext Markup Language) és el llenguatge de programació principal per desenvolupar pàgines web. Creat com un llenguatge de programació senzill i còmode. La majoria de les pàgines d’Internet s’han desenvolupat utilitzant una de les formes d’aquest llenguatge (ColdFusion, XML, XSLT). Després de llegir aquest article, podeu continuar la vostra formació utilitzant altres recursos a Internet. Intenteu cercar a Internet altres articles relacionats amb aquest tema.

Passos

Mètode 1 d'1: escriure una pàgina HTML

1 Abans de començar a familiaritzar-vos amb un dels passos que es presenten aquí, consulteu la secció "Què necessiteu".
2 Què heu de saber abans de començar a entendre aquest problema:
3 Els bàsics. Heu sentit a parlar mai de l’etiqueta? L'etiqueta està envoltada de claudàtors angulars, amb la paraula dins. L’etiqueta final s’escriu amb la mateixa forma, però amb l’addició d’una barra inclinada després del primer claudàtor. Un atribut és una paraula opcional d'una etiqueta que s'utilitza per afegir detalls a una etiqueta.
4 L’inici del document. En qualsevol editor de text que utilitzeu, enganxeu el següent:
html> head> title> wikiHow / title> / head> body> Hello World / body> / html> big> / big>
L'etiqueta s'ha de tancar amb la mateixa etiqueta, però amb una barra inclinada després del primer parèntesi angular. Hi ha excepcions com ara les etiquetes META o bé DOCTYPE.
5 DOCTIP
- Normalment, la majoria de pàgines web estan configurades DOCTYPE ”. Això ajuda a determinar la codificació i com serà percebuda pels navegadors web. La majoria de pàgines funcionaran sense ella, "però això és necessari si voleu coincidir (regulen els tipus de codificacions a Internet i com s'utilitzen)... A continuació es presenta el DOCTYPE per a HTML 4.01 :! DOCTYPE html PUBLIC "- // W3C // DTD HTML 4.01 // EN" "http://www.w3.org/TR/html4/strict.dtd"> Aquest és un dels més comuns DOCTYPE utilitzat en pàgines de tot Internet.En primer lloc, assenyala el tipus de pàgina que descriu el ‘html’, després ressalta el tipus de codificació i, finalment, la ubicació del DOCTYPE, que, com a resultat, descriu la pàgina del navegador web.
- Hi ha diferents tipus d’HTML (diferents versions desenvolupades al llarg dels anys), per exemple mitjançant etiquetes noves o etiquetes específiques. Algunes etiquetes estan obsoletes (s’utilitzen altres etiquetes més útils).
- b> i jo> - això és el que s’imposa actualment a les etiquetes, ja que s’utilitzen per transformar text, però no a les especificacions, com a resultat, altres etiquetes vénen a substituir-les. Etiqueta fort> és un substitut de b>, i em>, un substitut de jo>.
- És important que les etiquetes anteriors se substitueixin per etiquetes que siguin més que formatar. Si es tradueix el text, no només el format, sinó també el seu significat. Això és semànticament correcte.
- A XHTML versió 2.0, el b> i jo> no s’utilitza, igual que a la versió HTML 3+.
6 HTML "Regla d'encapsulació".
- Vegem les etiquetes més importants que s’utilitzen actualment. Durant la creació de la pàgina, s’utilitza una estructura senzilla. Si es va obrir una etiqueta, com a resultat, s’hauria de tancar... Això s'aplica a tota l'estructura. Aquí teniu un exemple vàlid de l'estructura de disseny XHTML:
- ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
- html xmlns = "http://www.w3.org/1999/xhtml">
- cap>
- meta http-equiv = "Tipus de contingut" content = "text / html; charset = utf-8" />
- title> Hello World! / title>
- / cap>
- cos>
- h1> Hello World! / h1>
- / cos>
- / html>
- Exemple de codi que emet un missatge Hola món... Això s’anomena prova Hola món.
7 Encapçalament
- El títol de la pàgina web és el contingut entre l’etiqueta cap>... Aquest contingut no el pot veure l’usuari (només el títol que es mostra al títol de la pàgina). Informació entre etiquetes cap>, pot incloure altres etiquetes, com ara:
  - L’etiqueta META s’utilitza per obtenir informació útil per als motors de cerca i altres utilitats.
  - Etiqueta LINK que crea un enllaç entre documents, per exemple per a Estils (CSS).
  - Etiqueta SCRIPT, que inclou gairebé qualsevol codificació web, amb la possibilitat d’accedir remotament (des d’un altre document).
  - L'etiqueta STYLE, que és essencialment un estil que es pot aplicar a una pàgina.
  - L'etiqueta TITLE és el títol que apareix com a títol d'una pàgina al navegador web.
- Vegem una demostració d’alguns d’aquests en un exemple de capçalera extreta d’aquest lloc web (s’ha reduït):
  - cap>
  - títol> ... / títol>
  - meta name = "description" content = "..." />
  - enllaç rel = "full d'estil" type = "text / css" href = "..." />
  - meta http-equiv = "content-type" content = "text / html; charset = UTF-8" />
  - style type = "text / css" media = "all"> ... / style>
  - script type = "text / javascript" src = "..."> / script>
  - / cap>
    
    Per si no us n'heu adonat, les etiquetes individuals s'han ressaltat i s'ha eliminat la informació real. L'exemple és bastant breu i mostra gairebé totes les etiquetes que es poden trobar cap>excepte el comentari HTML (en parlarem en etiquetes senzilles).
8 Etiquetes senzilles a tot arreu
- Seguim i veurem altres etiquetes. Aneu amb compte amb el vostre etiquetatge i recordeu la regla general, "Encapsulació".
  - fort> Destaca un text important.
  - petit> Redueix el text. La mida del tipus de lletra es mesura en unitats estàndard de l’1 al 7, 3 és la mida de text predeterminada. ...
  - pre> Defineix un bloc de text enriquit. Com és correcte, aquest text s'escriu en una font de la mateixa mida i amb tots els espais entre les paraules.
  - em> Mostra el text com a frase.
  - del> suprimeix el text.
  - ins> Defineix el text que s'ha inserit al document.
  - h1> Una de les moltes etiquetes d'encapçalament. Les etiquetes d'aquest tipus comencen per "h", amb una diferència de nombre. Assegureu-vos de tancar l’etiqueta amb el mateix número.
  - p> Defineix un paràgraf.
  - ! --- ... ---> A diferència d'altres etiquetes, el comentari ha d'estar dins de l'etiqueta mateixa. Aquesta informació només és visible quan es visualitza el codi.
  - blockquote> Mostra un pressupost, es pot utilitzar amb l'etiqueta cite>.
  - Els pocs exemples anteriors no són una llista completa d’etiquetes existents. Per obtenir informació sobre els altres, visiteu.
9 Crear una estructura clara
- Les pàgines estan dissenyades per contenir dades en conjunts senzills d’etiquetes de manera que puguem analitzar la informació en paràgrafs. L’ordinador reconeix les dades, no coneix el context ni la connexió conceptual. Hem de crear pàgines HTML adequades per a ordinadors. Això s’aconsegueix mitjançant l’etiqueta div. Ajuda a crear un gran nombre de pàgines. Es pot dissenyar amb CSS i és més fàcil que crear taules de codis grans per al disseny.
  - div> Aquesta etiqueta és especial perquè es pot dissenyar i utilitzar blocs d'informació separats que tant l'usuari com l'ordinador poden entendre.
- Vegem un disseny HTML senzill que utilitza una etiqueta div.
  - ! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  - html xmlns = "http://www.w3.org/1999/xhtml">
  - cap>
  - meta http-equiv = "Tipus de contingut" content = "text / html; charset = utf-8" />
  - title> Hello World! / title>
  - / cap>
  - cos>
  - h1> Hello World! / h1>
  - div id = "contentOne">
  - p> Aquest és un text del div # contentOne. / p>
  - div>
  - p> Un paràgraf en una subsecció de div # contentOne / p>
  - / div>
  - / div>
  - / cos>
  - / html>
- L’ús de div> tags ajuda a trobar i modificar estils mentre es treballa amb CSS i Javascript. HTML utilitzarà diferents codificacions per treballar amb estils CSS i Javascript per crear una experiència d'usuari millor i més sensible.

Consells

Després de llegir aquest article, no us atureu i penseu que heu après tot el que heu de saber. Sempre hi ha alguna cosa a aprendre, sobretot en aquesta tecnologia.
Aprendre, comprendre i escriure codi.
Tingueu en compte que algunes etiquetes només fan servir>. Para i br són alguns exemples. Les altres etiquetes obertes amb> s'han de tancar encara més. Per exemple, "div> / div>".
La gent espera nous descobriments, de manera que reinventeu, dissenyeu o codifiqueu.
Quan hàgiu après moltes coses, proveu d’aprendre la programació del servidor.
Apreneu a treballar amb CSS i Javascript.

Advertiments

Recordeu que l’HTML tracta d’editar contingut. Això significa que l'HTML només s'utilitza per emmagatzemar contingut en un format reconegut. Altres canvis s’han de fer mitjançant altres tecnologies, com ara CSS. També vol dir fer “Semànticament correcteencara que altres no ho admetin. Altres llenguatges de programació ajuden a crear pàgines web (CSS, Javascript i XML). HTML és un constructor de contingut.

Què necessites

Un editor de text que admet la codificació ANSI
Un navegador web com Internet Explorer o Mozilla Firefox
(Opcional) wysiwyg o wykiwyg editor HTML com ara Adobe Dreamweaver, Aptana Studio o Microsoft Expression Web