HTML

Què és l'HTML?

En aquest apartat coneixerem el llenguatge HTML, el qual és utilitzat per estructurar el contingut i l'estructura de tota classe de pàgines web, aquest funciona mitjançant etiquetes. N'hi ha de molts tipus i cadascuna serveix per a un contingut en particular.

El navegador demana una petició a un servidor i s’encarrega de mostrar el codi HTML en un format determinat que prèviament hem definit.

HTML (Hyper Text Markup Language) ha anat evolucionant des de la seva creació l'any 1991, tot i que encara es mantenen moltes de les etiquetes (tags) originals. Actualment treballem amb HTML5.

Sintaxi:

Característiques principals:

No és un llenguatge de programació. És un llenguatge d’estructura.

És la base de totes les pàgines web del món.
L’objectiu és comunicar als navegadors l’estructura de les pàgines web i el contingut, per als cercadors.
Funciona amb etiquetes. Hi ha molts tipus d’etiquetes i cadascuna serveix per a un contingut en particular.
Hi ha etiquetes i atributs, i els atributs són els que utilitzem per configurar elements específics.
Es poden posar etiquetes a dins d'altres etiquetes.

Estructura bàsica:

L'estructura principal de totes les webs és:

<html> indica que escriurem amb llenguatge HTML i embolcalla tota la resta del codi.

<head> és la capçalera del document HTML i conté tots els elements no visibles que ajuden a fer que la pàgina funcioni correctament.

<body> conté tots els elements visibles.

Elements bàsics que utilitzem per programar amb HTML:

<em>, <strong>, <ins> i <del>

<em> Serveix per marcar el text, el coneixem com a lletra cursiva

<strong> serveix per marcar text diferenciat, però aquest és en negreta

<ins> serveix per subratllar text.

<del> s’utilitza per ratllar text “suprimit”, de manera que queda ratllat.

Llistes

A HTML, diferenciem 2 tipus de llistes: ordenades i no ordenades:

Per les ordenades, utilitzem l'etiqueta <ol> i després atribuïm als elements de la llista com <li>

Podem caracteritzar els estils segons el que desitgem mitjançant el list-style-type. I podem personalitzar-les de la següent manera:

type "a" (a, b, c, d…)
type "I" (I, II, III, IV, V…)
type "i" (i, ii, iii, iv, v…)

I per les no ordenades, utilitzem l'etiqueta <ul> i posteriorment atribuïm als elements de la llista com <li>, igual que a l'anterior.

Podem caracteritzar els estils segons el que desitgem mitjançant el list-style-type. I podem personalitzar-les de la següent manera:

disc (el per defecte, un cercle pintat)
circle (un cercle buit)
square (un quadrat)
none (no hi ha cap marcador, només el sagnat)

Links a HTML

Enllaços relatius: Aquests serveixen per enllaçar elements de diferents arxius adjunts a la pàgina d'HTML, aquests tenen una jerarquia.

Enllaços absoluts: Aquests serveixen per enllaçar elements fora de la pàgina HTML.

Per definir el tipus d'enllaç usem l'atribut target:

_self - obre el document enllaçat en el mateix marc on s'ha fet clic.

_blank - obre el document enllaçat en una finestra o pestanya nova. Aquest s'utilitzaria per fer un enllaç absolut i conduir a l'usuari cap a altra pàgina externa de l'arrel.

Una etiqueta <a> s'utilitza per definir un enllaç. Dins de l'etiqueta <a> hi ha l'atribut href, que dona a l'URL la destinació de l'enllaç.

Imatges a HTML

L'etiqueta <img> s'utilitza per inserir imatges a la pàgina web. L'origen de la imatge s'indica amb l'atribut src. Aquesta etiqueta no cal tancar-la, es tanca sola automàticament. Exemple: