0% encontró este documento útil (0 votos)
155 vistasProgramador Web Full Stack 2 - HTML5
HTML5
Cargado por
Aharon Alexander Aguas NavarroDerechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF o lee en línea desde Scribd
0% encontró este documento útil (0 votos)
155 vistasProgramador Web Full Stack 2 - HTML5
HTML5
Cargado por
Aharon Alexander Aguas NavarroDerechos de autor
© © All Rights Reserved
Formatos disponibles
Descarga como PDF o lee en línea desde Scribd
/ 28
SSSA cursovisuatypractico D
DY acodkomacolan<-Like ms backend
Principales tags de HTML \ Formatear el texto \ Tipos de listas \ Hipervinculos
SSN wKi Ten
git myaquey (BESSTFq curso visual Y PRACTICO
Direccién Ediorial ——_Atancién al ectr,
MiguolLodertremer —_susesipcionas y varias
fan: [email protected]
rs #54011) 4110-5700
Mv $52-58-8821-9560
Publicidad
[email protected]
Produccion grafiea — *54/011/41108700
Gustavo De Matteo
Fernerdo jam
‘Autor
Fernando Luna
Maye 4
oY Vaned ICOM icodsnesdine| backend
‘snr Agonina Cpt Vo pw he A. R19 tr 08 Oo Brea S401 406 964008 oe Dee
‘alles SOP Siete 1:2 (7 1SSHEM, Bec Aes Te St 4806-018 Mee rea isis AC, te? Ita ache Pda
(Cot, el S515 Monn er Cont ork pes loc ess SA oe CV om 8D Ck rar Mein, Ops: TAC) Us ee
(Con Tel 512267. ane Certo Skew SA, hapten Paar E35 pi 2 Sn er Li S11 1294 rem 2 ray Ee SRL, Pay 124,
ai Te 230 2% 076s Veet Dr bad Caran Boa Ge Aas Eco Bo oe as 293" San Nt. owe al La Pa Cas 88212-4842.
Goya racics Sov Tec, at veut: Fox aS P15 Novara do 180, 1380, C'SDAE, GuealAtivona do ace Aus. Agee Fata Wed
yamgt © WANE. 2515-855 Ts cos rac aap raps re | nen par on mato.emel pepe wt de
teacia eel Leder resume epreabi ay cscie orace cede els ace, incom yon Gels erveos adn eae tm
‘nano ptt a a frst pn obs as ab ere Ws, Ue el TP ran OE bal EP pa on Srp S.A
tao 225 Fut, and Boy Ae
2 HTML5
_ BID Desarrollo frontend: HTMLS
EE — BI Entorno de Brackets
tS Fall Stack BRET Instalacion de Brackets IDE
EI El Lenguaje de marcado HTML
IG Principales tags de HTML.
HIB Formatear el texto
IE Caracteres especiales
IE] Tipos de listas
iG Creacion de tablas
BB Hipervinculos
ae
Peay
CONTENIDO
ADICIONAL ONLINE
Cbidigo fuente,
=| elementos graficos utilizados
en los ejemplos y otros contenidos
011-4110-8700 | USERSHOP.REDUSERS.COM
adicionales se pueden descargar en
eRe eee reduser.conv/u/programadorweb
iva Ree Desarrollo Frontend:
HTML5
Estamos solo unos pasos de comenzar a
profundizarlas principales caracteristicas de
HTMLS, el lenguaje de marcado por excelencia
que hace que la Web sea como es. Pero antes, nos
‘ocuparemos de ponera punto nuestro entorno de
desarrollo, instalando el IDE y los navegadores web
necesarios, para poder realizar de manera correcta
los ejercicios ylas pruebas correspondientes,
(Quienes ya cuentan con experiencia de desarrollos
para la Web o tienen su IDE preferido, pueden saltar
los dos siguientes pasos, y apuntar directamente
ala introducci6n al desarrollo con HTMLS.
Preparar nuestro entorno
Bn a Clase 01 enumeramos las caracteristicas
de diferentes IDE (entornos de desarrollo
Integrado), es decir, programas que incluyen
varias herramientas de programacién (editor
de texto para escribir cédigo, compiladar
para traducirlo, etc). Pdemoselegirel que
prefiramos, pero en estas clases emplearemos
Adobe Brackets (ver paginas 2, 3 y 4).
Navegadores web
Segin nuestro sistema operatvo ($0), deberemos
tener instalados,ademis, 20 3 navegadores:
1 Si contamos con Windows 10,
Chrome y Firefas, que se complementardn con
Microsoft Ege
Si utilizamos Lim, instalaremos las vartantes
de Chrome y Firefox para este SO, yen lugar de
Microsoft Edge podremos recuriral navegador
predeterminadoo preferido segin nuestra distro:
Ieeweasel, Konqueror, Opera o Epiphany (sambién
conocido como Web).
{Si utiizamos Maca Safar sumaremos también
Chrome y Firefox. Las dltimas versiones de
Chrome cambiaron su motor WebKit por Blink,
orl tanto, podremos encantrarnos con algunas
Aieroncias entre ls resultatos visualizados
en Chrome y los que podamos ver en Safari,
sableno que ese tltimo todavia utiliza motor
de renderizado WebKit, y Mozilla (al momento
de escribir esta obra) también esta evaluando
cambiar su motor
stalaremos
PE Me a ore Erte
Microsoft Edge *Preinstalado en el SO Windows 10
Mozilla Firefox A hteps://www mozilla org/es-AR/#
coo ch re reer
joogle Chrome » ps:/www.qoogle.com/chrome/
*Proinstalado en Mac OS
Apple Safari htcp://www.apple.com/safari/
‘Vobla Q\. Principales navegadores wob.
REDUSERS Ei PROGRAMADOR WEB Full Stack Entorno de Brackets
MENU ARCHIVO
Permite abrir, qrabary cerrar archivos
'y proyectos. También permite acceder
1 proyectos trabajados recientemente
Ygestionar extensiones que potencien
a Brackets.
7 tate pi nip
Archivo > Vista previa dinamica
experimental
Permite visualizar en tiempo real
ene! navegador web los cambios
‘que realizamos sobre los erchivos
editados.
Archivo > Vista previa dinamica
Ejecute i vista previa, en el
navegador predeterminado en nuestro
equipo, del contenido trabajado,
AREA DE TRABAJO
Aqui visualzaremos en mo¢o
Jerdrquion toda el contenico
jonado con nuestro proyecto
A través del mend contextual pademos
‘trabajar con archivos y carpetas,
copiando, clonando, renombrando 0
visualizando ol contenido en al editor
el navegador web.
DIVIDIR EDITOR DE cODIGO
‘través de esta opcién podemos alternar entre la visuaizacion de un
archivo en el editor de cédigo. Las opciones son: visualizacin simple,
visualizacion méltiple vertical, visvalizacin maitiple horizontal
(MENU EDICION
Desde aqui accedemos a todos los
‘comandos para trabajar con el cédigo
quo oscribimos: soleccién maitiplo do
‘texto, desplazamiento porlasiineas
de cécigo,sangrias, comentarios,
sugerencias de césigo, y completar
paréntesis de forma automatice, entre
otras opciones,
‘MEN BUSCAR
Permite buscar y eemplezar contenido
2 lolargo de los archivos de c6digo.
“nota Weep-eautve"a-Un-conpat tbl
“eitesoetweras pasos con
auocrse/ettle>
ontent="na gia interactive
prineron pasos para Brackets.*>
° Sling ret=*stytecheet™
frefematncaa">
Be Sete
a “NL>PRINEROS PASOS CON BRACKETSC/n3>
ua ‘e>jeata es tu guiale/ka>
> aterventde 2 arath
‘de cédigo abierto que
setter de .
errantentas visuales dentro del
LINEAS Y COLUMNAS:
‘ous la informacién eferente ala cantidad de
lineas y columnas eseritasyutlizadas, dentro
de cada archivo de codigo que mangjemos.
Clase 02 HTMLS MENU VER
Contiene funciones que nos permiten ver
contenido especifico del cbdigo escrito
an cada archivo de nuestros proyectos,
manejarlos tamafis de fuente, tabular,
indentar eédigo y ocutaro visualizer
édigo, segiinnuestras necesidades,
3 Font-fantiys Mh
Podsing: 2em 2em Aen;
hay hay ay, be €
olor! 12235
font-weight! 600;
Vine-heiphe? 1633
aera
nD
BE by strong (
ae” Tone wetgnes 6005
BD
ay sme
‘ttsplay! mone;
EDITOR DE cODIGO
‘Aqui desarrollaremos de forma constente los
ejemplos. El editor Brackets soporta por defecto
los lenguajas HTML5, CSS y JavaScript.
MENU NAVEGACION
demas navagar entre los cistintos
documentos o archivos de e6digo con
los que estomos trabajando, visualizar
la informacién de una defnicin, abrir
\cerrar archivos de forma répide, y
acceder ala documentacién répida
del documento escrito.
REDUSERS Ei PROGRAMADOR WEB Full Stack
MENU DESARROLLO
Nos permite manipular el entorno
de desarrollo Brackets, iniciando 0
roiniciando oste con os complementos
activados o desactivados. También
accedemos alas herramientas de
esarrollador de Google Chrome, para
depurar e inspeccionar el e6diga de las
soluciones web,
VISTA PREVIA DINAMICA
Ejecuta nuestro proyecto en
curso dentro de la vista previa del
‘navegador web pradeterminado.
GESTOR DE EXTENSIONES
Nos permite gestionarlas
‘extensiones necesarias disponibles
para Brackets, que nos facitan el
desarrallo de soluciones web,
[NUEVAS VERSIONES,
Notificador integrado que nos
informa cuando una nueva version de
Brackets esté disponib
ALTERWAR ENTRE LENGUAJES
Como soporte extendido,
Brackets nos permite
aditar archivos de cédigo
relacionados a decenas
Uo diferentes lenguajes do
programacién. Agui podemos
lagi rpidamente el lengua)
{que queremos que el editor
reconozca por defecto, cusndo
astemos aditando un archivo
aspecifico, Esto nos ayudard
tanto con a sintaxis come con
le deteccién de errores. Instalacio6n de
Brackets IDE
Brackets es un editar de cédigo constante evalucton y desarrollo
por una comunidad de colaboradores desde http:
y Windows, y podemos deseargarlo
fbrackets.io/, ¢ instalarlo
‘gratuito desarrollado por la firma
Adobe, Esa evolucién desuantigua _independientes. Su cédigo original rapido y con facilidad. Una vez
herramienta Adobe Edge,quetenia _proviene del editor de cédigo instalado en nuestro equipo y antes de
el mismo fin que Brackets, pero fue Atom, de filosoffa open source, adentrarnos en HTMLS, repasaremos
discontinuada en 2014 en pos de Es multiplataforma, por lo tanto, las caracterfsticas principales de
este ditimo editor. Brackets estden tenemos versiones para Linux, Mac Brackets, en las paginas 2 y3.
Brackets
lease 7 vs 1.716888 (lease b03387!)
sis ee We 0820162275 GMTHO10D
apr 2012-present Adobe tems neoporatd ands enzo. All
esreaned,
-Elcontend de ne Ptr ocsy logo de Web Plato esti
Sites te Lene concn de Crete Cons CC-8Y
Imagen.
Brackets es un editor de
een ‘cérigo gratuito creado
‘por Adobe, que basa su
estructura en Ato
esta programado
‘completamente en Node,
JS, HTML y CSS.
x | EDITORES LITE
Dentro de la linea de editores bajos en peso o en consumo de recursos, podemos encontrar a Brackets, VS Code
Atom. Los dos primeros estan basados en la filosofia de este sitimo. Si somos partidarios de los produotos de la
plataforma Adobe o estamos acostumbrados a ellos, Brackets sera el editor que nos haga sentir mas cémodos.
Si por el contrario la plataforma Visual Studio de Microsoft es nuestra preferida, VS Code seré nuestro editor
de preferencia, Por aitimo, sel software libre es lo que profesamos, Atom es el editor que buscamos instalar.
‘que pueda existir en uno, y no en otro, cualquiera de estos tres editores nos
realizar los ejercicios planteados en este curso.
Clase 021 HTMLS El lenguaje
de marcado HTML
HTML es una sigla que proviene de
Hyper Text Markup Language y hace
referencia al lenguaje de marcado
‘que nos permite erear paginas web.
Est regido por W3C (World Wide
Web Consoreium), quien se ocupa de
organizarla estandarizacién referente
a escritura e interpretacién de casi
toda a tecnologfa relacionada con la
‘web. HTML es considerado el lenguaje
‘web mas importante, dado que
permitié desarrollar y expandirlo que
todos conocemos como Web o WWW.
Funcionamiento
Através de la organizacién
segimentada en tags el HTML nos
permite distingui ead componente
(titulo, textos, imagenes, videos,
audios, etettera) de una pigina
web, para que este se visualice de
manera dptima y diferenciada del
Ante la peticion de un usuario de una pagi
resto, A su ver, cada componente
es segmentado a través de un
tag especifico, y ubicado en una
posicién determinada de la pagina.
HTML en conjunto con CSS JavaScript
se acupan de formatear east tado
el contenido web, que luego seré
procesada por el motar de render
den navegador web, para ser
visualizado, por iltimo, de forma
‘comprensible por los usuarios finales.
HTMLS:
la quinta version
independiente
Ellenguaje HTMLtuvo varias
versiones a lo largo de su existencia,
Una de las ‘iltimas levadas adelante
fue a versién 4.0, que tiempo
después incorpors soporte a XForms
(interfaces graficas HTML basadas
web, el
‘contenido es tomado previamente por el motor de renderizado
ddl navegador, procesado y finalmente mostrado de forma grafica.
REDUSERS Ei PROGRAMADOR WEB Full Stack
en cantenido XMI}, lo que hizo nacer
aHTML44. En paralelo, Mozilla,
Opera software y Apple comenzaron
trabajar en conjunto en un nuevo
estindar que permitiese alos
Alferentes motores de navegacion
compartir una serie de caracte
ue habilitaran aestos a mostrar
por igual el contenido de toda web
de forma homogénea sin importar
el navegador utilizado, Asi nacié el
proyecto conjunto de estas empresas,
bautizado WHATWG, de donde
devino luego el estndar HTMLS.
Finalmente, todas las empresas
desarrolladoras de navegadores web
terminaron adaptando este estandar,
‘ya que demostré en poco tiempo ser
el mas efectivo y rpido en cuanto.a
evolucién, desde el nacimiento dela
Web como tal. HTMLS era conocido
también como Web Applications 1.0,
tun estandar muy fuerte hoy usado
por la diversidad de dispositivas
que utlizan internet como motor
de comunicacién o visualizacién
teas
de contenides. E] enfoque que
abordaremos de HTML en este curso
‘serd sobre HTMLS, Principales tags
de HTML
El lenguaje HTMLS, al igual que sus antecesores,
segmenta su contenido en etiquetas 0 tags. Estos tags
manefan una estructura determinada, que permite
que el motor de renderizado interprete y visualice
el contenido web de forma éptima, Coma vimos en
Ja Clase 01, os tags principales son: , ,
, que engloban el inicio y el final de una pagina
‘web, del contenido de cabecera de estayy del contenido
principal (el que visualiza el usuario). Dentro de estos
tags, se van agregando otros que responden a distintos
comportamientos o caracteristicas que tendré cada
pagina, y que iremos viendo a lo largo de esta clase.
Doctype es una declaracién que se Incluye al iniclo de
cada pagina y sirve para definir el tipo de documento
que esté cargando el navegador web. Con esta sintaxis,
cuando el navegador web procesa el documento,
le indicamos que el lenguaje de marcado que
constituye esta pagina es HTMLS. En la actualidad, los
navegadores funcionan con esta declaracién al inicio
de cada pagina, y también funcionan sin ella, como
vvimos en los ejemplos elaborados en la clase anterior.
Por convencién y para asegurarnos el correcto
funcionamiento de nuestros sitios, siempre conviene
declararlo, Su uso correcto es:
Este atributo es utizado deforma anidada dentro del
tag head, para representar el tule deca pina web.
Esta informacién visualizada ea que vemos en el borde
superior dea ventana o dela pestaia, cuando cargamos
una pina en esta, También su uso es aplicado cuando
‘guardamos una URL et los marcadores o favoritos de
nuestro navegador web, y cuando la pagina es indexada
4 mostrada dentro de los resultados de biisqueda de un
motor de biisquedas. Su uso correcto es:
<titleszete es el titulo de mi
pagina</titie>
<HEAD>
Es el tag donde se declaran todos los elementos que
componen la cabecera de una pagina web, La mayoria de
estos no seran visibles para el usuario, pero hacen ala
estructura de cada pAgina, Aqui animamos, por ejemplo,
las diferentes hojas de estilo que arman la estética
del sitio, e link alos archivos JavaScript que agrupan
las sentenciasen Javascript cualquier declaracion
JavaScript que necesitemos para utilizar en la pagina
“tittesatributo Lange eitie>
‘Styles Al feolortredi p fcoloribloe;}<fatyte>
“ceript typesttext/jnaseript"s,
sar rombredeleuree
<pecrige
DesarrolLador Fallstacki
los tags <tite>, <style> y <script>; estos atimos
pertenecen a CSS y JavaScript, respectivamente,
<body>
tg ody sl gicstnazea td conenida qe
finalminte te viral sil pin eb tax titulo,
Imdgenes, videos, audios, hipervinculos, etter, Todo Io
aque este tag contenga dentro se mostrard en el navegador.
<H1>..<H6>
Los tags <i>, <h2>, <td>, hd, <his>y <h6> corresponden
a titulos, Estos se despliegan desde la escala de mayor
Clase 021 HTMLS on
: “Rasrttate 3 on cot rjesht>
Aqui vemos el uso
Jado de los tags <h>,
<P cing> volta
‘comentario que es el
“Ginica que no muestra
contenido en pantalla,
jerarquia <hl> hasta la de menor jerarquia ch».
Estos tags nos permitiran titular de forma estructurada
contenido que ocupa mucho texto en las paginas html.
‘Su implementacién es sencilla: se abre el tag
correspondiente, se escribe el titulo y se elerra:
<body>
<hipgste es el titulo
principal</ni>
</body>
Por defecto, este tag genera un salto de linea, para
que lo que continuemos escribiendo aparezca por
debajo de este
<p>
Este tag es el utilizado para representar el texto 0 el
parrafo que compone las paginas web,
Su uso es de forma anidada dentro del tag <body>.
jemplo.
<p>Esto es un parrafo.</p>
REDUSERS Ei PROGRAMADOR WEB Full Stack
ar =
Titulo 1 en color rojo
RedUSERS
© [© teams Noe
<EJERCICIO PRACTICO>
Primeros tags
Para practicarlo visto hasta ahora, crearemos una
‘nueva pagina donde debemos incorporar los tags
‘mencionados hasta ef momenta:
*<doctype>
“<head>
setitle>
“<body>
eh <ho>
np
Guardaremos la pagina con el nombre ejerciciot html,
le ejecutaremos en el navegador web. El resultado
debe ser igual al de fa imagen 04.
@ f(D 7Har owe
Este es el titulo 1
Este es el titulo 2
stees to 3 a
‘Sitodo sali6
‘correctamente, ef
tesultado de nuestro
-ejercicio debe visualizarse
ernie pl <DIV>
E] tag <dive es utilizado por lo comin para definir
una divisién o para especificar una seccién dentro
de un documento HTML, Espectficamente se aplica
cuando necesitamos agrupar elementos 0 un bloque
de elementos, que luego seran formateados a través de
las hojas de estilo CSS. Dado que este tag se usa para
formatear su contenido, el mismo tipo de sentencias
utilizadas en CSS pueden ser aplicadas directamente
sobre el DIV, para asi formatearlo sin necesidad de
recurrir a CSS. Veamosa continuacién un pequefio
ejemplo del uso de DV:
<body>
<div>
<p>Este es un parrafo
comin.</p>
<p>Este es otro parrafo,
utilizando el tag DIV.</p>
</div>
</body>
Este nos permite poner diferentes parrafos y otro
tipo de contenido dentra de un bloque determinado,
y formatear todo de manera glabal. Si, por ejemplo,
necesitamos alinear el contenido de este div en el centro
de la pantalla, simplemente debemos agregar dentro del
| <!-- COMENTARIOS -->
Todo lo que se escriba dontro del tag de apertura
13. de ciere -> es interpr
a dentro del contonido HTML. Los
comentarios sirven, por ejemplo, para referenciar
determinada parte de Ia estructura de la pagina,
izados en especial por los disenadores
0 desarrolladores. El usuario final no veré el
contenido anidado dentro de estos tags, aunque
quien visualice el céigo fuente de cualquier
pagina a través de las herramientas para
desarrolladores propias de cada navegador web,
sipodra acceder a estos.
DIV la propiedad margin de CSS, seguido del estilo de
alineacién, Esto quedaria de la siguiente manera
<div style="text-align: center:”>
<ppEste
<ppEste es otro pirrafo, utilizando
el tag DIV.</p>
</div>
8 un parrafo comin.</p>
Ahora si, todo el contenido de DIV estaré alineado en el
centro de la pantalla. Llevemas este ejemplo a la praetica
para poder ver su funcionalidad. Crearemos para ello un
hnuevo archivo html llamado alineaciandediv html, y alli
escribimos el texto anterior. EI resultado debe quedar
como en la Imagen 05.
Centrando un DIV.
tee 0 pn, wd tg IV
‘Imagen 05. Si aprovechamos algunas propiedades
aque corresponden a CSS, podemes trabajar un DIV,
formateéndolo junto con todo su contenido,
<BR>
Este tag se utiliza para insertar un salto de linea, Su uso
se realiza de a siguiente manera
<ppEste pirrafo contendra un salto
de lineacbr> a partir de esta
parte.</p>
<HR>
ste tag permite trazar una lines horizontal, utilizada
para separar segmentos de una pgina web. Veamos a
nun ejemplo de ello:
Clase 021 HTMLS donde extraemos dicha cita, a través de la inclusin de
<p>Este parrafo contendré una linea luna URL. Veamas a continuacidn su correcto uso
horizontal para separarlo del otro
parrafo.</p> 5
<hr> <blockquote cite="http://wuw.redusers,
classic-nintendo-
<poEste es e1 otro parrafo con/noticias/la-né
se-agota-primer-dia-venta-estados-unidos/">
arado del anterior por Ja 1ini
<p>El relanzamiento de una
nueva version de NES causa furor
y agota 1a consola en todas las
horizontal.</p>
<hr>ybradiferencia de los otros tags vistos hasta —-—~=tendas de USA, en ou primer dia de
aqui, no requieren un mismo tagde cierre ventas.</p>
</blockquote>
<blockquote>
Est tag sirve para insertar una acotacén o una Insertar una cita con este tag hard que el texto
cita, dentro de un pirrafo.Dispone de un aributo correspondiente se vea tabuladorespecto al esta del
denominado <cite>, que permite especificarla fuente de contenido de la pagina
<EJERCICIO PRACTICO>
Integremos tags
Para comprender mojor su uso, realizaremos una pagina donde exista un titulo, una breve introduccion de un tema, una
cita o referencia utilizando el tag <blockquote>, y sumaremos tam! mente, corr
parrafo, yvisualizamos nuestra pagina en el navegador web. El resultado del ejercicio debe ser como el de la imagen 06.
el tag <hr>.
1 mmc es smea/Ohom
ce at (a eer 7
oe
{a Nitendo NES cen cnela deed pr i jpnet Nate, sane la 186
Como podemos apre
celresultado del ejercicio,
el uso
‘nose ve referenciado en
nuestra pagina web. Solo
se utiliza para nombrar
internamente a fuente
original.
‘emai dwn ner veri de NES cn ry oi coc dt
REDUSERS Ei PROGRAMADOR WEB Full Stack a Formatear el texto
Hasta ahora hemos visto ejemplas sencillos de ct
establecer texto a lo largo de una pagina web. Es
hora de que el texto comience a tener un formato algo
mas destacado; esto lograra que el contenido de una
pagina comience a tomar vida,
Veamos a continuacién qué opciones de formato
podemos aplicar directamente con html a nuestro
texto estandar.
<strong>
Este tag se liza por lo comn para resaltar un texto
con un estilo equivalente a negrita,
Su uso habitual se da dentro de un pérraf, en formato
anidado al tag q Veamos a continuacin un ejemplo
de ello:
<pEste pirrafo contendré parte
de su texto en <strong>negrita</
strong>.</p>
Vemos solamente cémo la palabra negrita, es destacada
rrespecto al resto del texto de este parrafo.
x EL“ESTILO” DE CSS
Hasta ahora visualizamos solo HTML en formato
plano, A través de CSS, que veremos desde
la Clase 03, todo este contenido comenzaré
4@ cobrar vida y tendré diferentes formatos,
colores, espacios y recuadros, gracias a todas
aplicar.
las opciones que CSS nos permi
<em>
El tag <em>, también conocido como Emphasis,
permite que un parrafo se vea de forma levemente
inclinada.
Es el equivalente a cursiva, utilizado en los
procesadores de texto, Un ejemplo de ello, a
continuacién:
<p>Este pirrafo contendra parte de
ado <en>con énfasis</
<code>
Este tag permite establecer parte de un texto en formato
cédigo fuente, Es ullizado por locomdn en portales
donde se debe representar una porcién de cédigo. EL
texto resultante visualizado se muestra bajo un formato
de fuente tipo consola. Veamos a continuacién un
ejemplo de sa us
<p>El formato correcto del uso de 1a
sentencia if es:</p>
<coda>if a = 1 then (//haceralgo} </
code>
<samp>
tag «samp>, al igual que <code>, representan un estilo
cécigo fuente, con a diferencia que sang es utilizado
pba eepresentar ch eeul del cua obec oat
contin 6 wena de depuracn UilcaCondaente
una fuente tipo Courier New de ancho fj,
<p>El formato correcto del uso de 1a
sentencia if e¢:</p>
<code>if a= 1 then (//haceralgo} </
code>
Clase 021 HTMLS <p>A continuacién vemos el resultado
de 1a sentencia <em>it</en>:</p>
<samp>//aqui se muestra el resultado
de if</samp>
<u>
Este tag se utiliza para subrayar un texto determinado.
Puede aplicarse de forma anidada tanto en un parrafo
<p> como también dentro de un tag correspondiente a
Litulos. Se implementa de la siguiente manera:
<p>cu>ate es un parrato
completamente subrayado.</u></p>
<hS>¥ este es un titulo BS
<u>subrayado de forma parcial</
w><hs>
<sub> y <sup>
inetegy coub-y cape nox permiéen sitalecer un
bloque de texto en formato subindiceosuperindce,
Esto se utiliza por lo comin para representar nimeros
0 palabras que resalten una parte del parrafo que
componen. Veamas a continuaciOn un ejemplo de ello:
<p>Este texto contiene una palabra
con el tag<sub>subindice</sub>.</p>
<ppMientras que este otro texto
contiene una palabra con el
‘tag<eup>superindice</sup>.</p>
<del> e<ins>
Las tags <dl> cns> permitenestablecerunterto
tachado einsertado,respectivamente, dentro de un
parrafo, Esmuy comtin encantrarios en blogs donde se
representa una opinin personal dl autor, como si se
<p>Creo firmemente que
<del>no 1lego a estar en forma</
del><ins>me veré nuevamente algo
excedido de peso</ins>.</p>
<EJERCICIO PRACTICO>
Comparemos formatos
Realicemos a continuacion un
nuevo ejercicio que nos permi
visualizar los tags de formateo
1D esienenando tomas
© 2 © A [0 P700113104/exoformateadonnl
do texto, para asi comprender
mejor el uso el resultado de
cada uno de ellos. Creamos
‘una nueva pégina html, llamada
textoformateado.html, y creamos
diferentes pérratos, donde
aplicamos cada uno de los tags
vistos hasta aqui. El resultado del
ejercicio debe ser como el de la
Imagen 7.
Ese es un sinle pirate
teste rsaltnde on soi
Un tito carve, ocom ene
ste. pao completamente subavado
‘eeu ne HS sbrsade form prt
Imagen.
Elformateo de texto
‘cuando implementemos
css.
REDUSERS El PROGRAMADOR WEB Full Stack Caracteres especiales
Hasta ahora hemos desarrollado
una serie de ejemplos utilizando
nuestra propia vocabulario
espaiiol, el cual difiere bastante
del inglés, que es el lenguaje
estindar que se utiliza para el
desarrollo de cualquier solucién
de software
Pero, si queremos que nuestras
paginas en espanol se vean
correctamente en todos los
navegadores web de cualquier
parte del mundo, sin importar el
idioma del SO ni del navegador
web, debemos reemplazar los
caracteres con tildes, diéresis,
Hhuflo o caracteres con cedilla
(6), entre otras, por sus
equivalentes de la tabla de
caracteres especiales. Fxiste
‘mucha informacién en internet
que nos guiaré para encontrar la
equivalencia ASCII ISO de la tabla
de caracteres especiales, y asi
podamos aplicarlos en nuestras
‘webs. Solo nos enfocaremos en
las equivalencias para las vocales
con tilde y para representar la
letra w-8,
Caracteres
especiales en ment
contextual
Durante la creacién de una
acentuadas u otros caracteres
especiales, Brackets dispone
de una ayuda contextual que
se activa de forma automstica,
cuando escribimos el cardcter 8.
Probemos de escribir un parrafo
de texto que contenga alguno de
estos caracteres y veremas cémo
se activa la ayuda de Brackets,
Naveguemos por ella para
Interiorizarnos y ver la diversidad
de opciones que disponemos.
Existen otras caracteres
extendidos que seguramente
deberemos utilizar y que también
cuentan con su equivalente en
ASCII, como por ejemplo: <> &/5
=
Podemos encontrarlos también en
+=, entre otros tantos més.
el mem contextual de Brackets.
eats
"CitesTable de caracts
vpectatencstitier
cinead>
"ene
creed
<imeal>
cy Soy
tocate;
cig
Sobre el spartadoiquierdo, vemos el
‘mend contextual que muestra el cédigo
‘ASCII para laletraa conte.
pagina html que requiera insertar
contenido que referencia a palabras
OB Clase 02 HTMLS fam
fF)
EN cos rm
‘Baacute; ‘(Gaacute;mpara lampara
eacute: laeacutexico lexico
aiscut; conocBiscut; conoct
aacute ‘runcidcacut; fruncio
usacute; Narani8uscut; Narani
adacute: AAacutestol Arbo!
acute; SEaciteser for
Blacute: alacuwreao icaro
AOacute: SOacutelo yale
aUacute: Uacutetine Otime
ati; nid;anduscute; Aandi
8Ntide:ufo Rutlo
es especiales del espatal.
GD caecterennpednin tt
Gpoantthde;<ro
pean
epicio
ass, 5
eo; ‘
ass )
Sobre el apartado derecho,
‘el cidigo equivatente ps
elsimbolo%.
REDUSERS Ei PROGRAMADOR WEB Full Stack
El porqu ede
los caracteres
especiales
Cuando nace ta
informatica, la agenc
ANSI (American National
‘Standards Institute) creo
de cédigos,
Hamada ASCII (American
Standard Code or
Anlormation Interchange),
para representar todo tipo
de caracteres diferentes de
Jas consonantes y voeales
que componen el abecedario
estandar occidental. Estos
caracte i
Permiten representar de
manera uniforme un carécter
especial, un simboto o una
letra extendida de un idioma
especitico (occidental u
oriental), a través de un
cédigo estandarizado,
‘que se respetaria en todo
1 mundo. Al expandirse
rmundialmente el uso de
internet, los navegadores
‘web incorporaron la tabla de
caracteres y Ia ineluyeron
dentro del desarrollo de
los estandares que dieron
HTML Asi
los caractores UNICODE
de todo el mundo, los
navegadores pueden
visualizar conte!
forma homogéi
cual
importar et
del sistema oper Tipos de Listas
En muchas ocasiones necesitaremos agrupar
determinadas palabras o consignas que componen el texto
de una web, dentra de un conjunto de elementos que les
‘otorguen un significado determinado,
Para esto, el lenguaje HTML define la necesidad de ageupar
textos con un mismo fin, como listas de elementos.
Dentro de las lstas que HTMLS maneja, se destacan las
listas ordenadas y as listas no ordenadas.
Listas no ordenadas
Las listas més comunes en cuanto a uso para diseho
‘web son las no ordenadas. Estén compuestas de
elementos relacionados entre st, pero sin un orden 0
secuencia espectficos.
Para implementartas, debemos recurrira la
construccién de estas, combinando dos tags: <ul> y <i».
1 <ub> es el tag estndar para trabajar con listas no
ordenadas (abreviatura de unordered list).
1 <li es el tag que permite enumerar el contenido de
dicha lista (abreviatura de lis iter).
Listas ordenadas
‘diferencia de las no ordenadas, este tipo deistas nos
permiten establecerun orden logic sobre el conjunto de
items que se mostrar, Su estructura se arma través de
los tags <aby lb; e primero deellas es la abreviatura
de ordered list Veamos el recuadro de ejemplo Cédigo
#01, donde aplicamos ambos tipos de ists. Copiemos
este contenido una nueva pagina web en Brackets, a
que lamaremos receta htm, y ejecutémosla para vere
resultado en el navegador web (atencién: algunas lineas
del e6dligo han sido recortadas).
<!D0CTYPE hem1>
<head>
<title>Receta de doquis Light
Beneficios respecto a los foquis tradiciona:
consistente, cocinarlos en agua hirviendo por 1 minuto
Woquis de ricota y espinaca
- Descripeién Eds, neopgusta Las listas no ordenadas, visualizadas con una vifleta conformada por un circulo negro, son utilizadas para mostrar aquellos elementos que no requieren do.una légica de orden. Por el contraro, las Listas ordenadas son ideales para los clementos que necesitan manejar un orden determinado, como por eemplo una explicacién paso a paso, Tengamas en ‘cuenta que, para ambos casos, CSS permitiré levar las listas hacia una estética que necesitemos, mas acorde con nuestro sitio web. REDUSERS El PROGRAMADOR WEB Full Stack Mr easy ea, Este simple ejemplo le implementacién de {as listas ordenadas y no ordenadas, de forma correcta,
Preparacién
Extracto del eitio web www.userslife.comClase 021 HTMLS Noquis de ricota y espinaca Preparacion Listas de definici6n Las listas de definicign nos permiten armar en bol jerdrquico con varios niveles. La forma de implementacin se compone por un nivel superior, y clementosjerarquicos internos al primero (términos ¥definiciones) Los tags utilizados para armaristas de definicin son <>, edt y
