EJ FJ CURSO VISUAL Y PRACTICO 2 Desarrollo frontend y backend Principales tags de HTML \ Formatear el texto \ Tipos de listas \ Hipervinculos SSD Own a B H my GD afax BO Osit miovey(E355 curso visua y prActico Direccion Editorial ——_Atencidn elector, MiguelLodorkromer ——_suscripciones y ventas ee Uusershapredusers.com SE ser ‘x 454(011) 410-8700 : Ma: 952-55-8421-960 Autor Fornando Luna WEB Full Stack Desarrollo frontend y backend Publicidad publiided@redusers.com Produccién grifica — **4(011}4110.8700 Gustavo De Mattoo ‘rior Seta Capt rns eee eis A a re bs 19 ep 8D, std de Bus es +403) 435 8649H0 nD ‘ahiplan IA Pe iene Poa 12 (13S, ue as +5401] 4905 014 Meo DF Arends DttudoaS A.C, ee 18 ato achaPaco Cho. (Ge, 551060. Mca efor Conti uc presse sk Ad CV. eo NCL nas Mbden. Depa ZTHCACO. De ara oo 5128067. ee Osta Sharia SA eta. Param 35 pc 2 San om Lia Si 4208 rao 21. raga Et SAL, Papay 102, Moselis 5882921076 Venema Ctl Sede ema, Ef ke de as PD Sr Mah cus rl Laat Cats, SE212-408-250- (hrm wly ricco Sei Tro Eo rego Fox ra S..15 Noe Ge 185,138, C11SOABE Cad Ata Ge Burs Aes, pea Fecha de ek Crp NO, SH 255 66 Ts dies ean Etc pea seein ena, er ini ma,selpermsorea peo aan tl. Laer ze espana ra oui da Ge reac nour yo ac ks ens os ae cee ‘ano acta, Las femal: ean opin es autres abomasum sean a rma can su oan ers on Sg! S.A. Cet 5225 Ful Gnd Bou, ger. 2 HTML5 EIT Desarrollo frontend: HTMLS {F PROGRAMADOR HIB Entorno de Brackets i Pee a BIE Instalacion de Brackets IDE GIGI El Lenguaje de marcado HTML OG Principales tags de HTML. HIB] Formatear el texto WB Caracteres especiales WEI Tipos de listas HIG Creaci6n de tablas IB Hipervinculos CONTENIDO ADICIONAL ONLINE Codigo fuente, a ‘elementos graficos utilizados en los ejemplos y otros contenidos 011-4110-8700 | USERSHOP.REDUSERS.COM adicionales se pueden descargar en Usagi nile Haaesziet ee redusers.com/u/programadorwebDesarrollo Frontend: HTML5 Estamos solo unos pasos de comenzar.a profundizar las principales caracteristicas de HTMLS, el lenguaje de marcado por excelencla que hace que la Web sea como es, Pero antes, nos ‘ocuparemos de ponera punto nuestro entorno de desarrollo, instalando el IDE y os navegadores web necesarias, para poder realizar de manera correcta los ejercicios las pruebas correspondientes, (Quienes ya cuentan con experiencia de desarrollos para la Web o tienen su IDE preferido, pueden saltar Jos dos siguientes pasos, y apuntar directamente ala introduccién al desarrollo con HTMLS. Preparar nuestro entorno En a Clase 01 enumeramos las caractersticas de diferentes IDE (entornos de desarrollo imtegrado} es decir, programas que incluyen varias herramientas de programacién (editor de texto para escribir digo, compilador para traducilo, et). Podems elegir el que prefiramos, pero en estas clases emplearemos Adobe Brackets (ver paginas 2, 3 y 4). Microsoft Edge Mozilla Firefox A sono A Apple Safar ‘Talla 01. Prin Navegadores web Segin nuestro sistema operativo (0), deberemos tener Instalados, ademés, 20 3 navegadores: {Si contamas con Windows 10, instalaremos Chrome y Firefox, que se complementarsn con Microsoft Edge {Si uilizamos Linu, instalaremos las variantes de Chrome y Firefox para este SO, yen lugar de Microsoft Edge podremos recurrir al navegador predeterminado opreferide segin nuestra distro: Iceweasel, Konqueror, Opera o Epiphany (también conocido come Web). 1 Siutilizamos Ma, a Safar sumaremos también Chrome y Firefox. Las iltimas versiones de Chrome cambiaron su motor WebKIt por Blink por lo tanto, podremos encontrarnos con algunas diferencias entre los resultados vsualizados en Chrome y los que podamos ver en Safari, sablendo que este dltimo todavia utiliza el motor de renderizado WebKit, y Mozilla (al momento de eseribir esta obra) también est evaluando cambiar su motor Ea *Proinstalado en el SO Windows 10 lla.org/es-AR/# hetps://www.m https://www.google.com/chrome/ “Preinstalado en Mac OS http:/Awww.apple.com/satari/ ipales navegadores web. REDUSERS Bl PROGRAMADOR WEB Full StackEntorno de Brackets ‘MENG ARCHIVO Prmite abrir, grabar y cerrar archives proyectos. También permite acceder ‘a proyectos trabajedos recientemente vy gestionar extensiones que potencien a Brackets. Rater pe i pein ‘Archivo > Vista previa dinamica en el navegador web os cambios que realizamos sobre los archivos oditados. ‘Archivo > Vista previa dinamica Fjecuta a vista pre navegador pre equipo, del contenido trabajado, net terminado en nuestro AREA DE TRABAJO. ‘Aqui isualizaremos en modo Jorérquico todo ol contenido relacionado con nuestro proyecto, ‘través del mend contextual podemos ‘trabajar con archivos y carpotas, copiando, clonando, renombrando 0 Visualizando el contenido en ol editor el navegador web. DIVIDIR EDITOR DE CODIGO .de esta opcién podemos alternar entre la visualizacion de un Atra MENU EDICION Desde agut accedemos a todos los comands para trabajar con el igo ‘ue eseribimos: seleccién miitiple de texto, desplazamiento por ls lineas {de c6digo, sangrias, comentarios, sugerencias de c6tigo, y completar paréntesis de forma automética, entra ‘tras opciones. 3 archivo en el editor de cédigo. Las opciones son: visualzacin simple, visualzacion maltiple vertical, visuaizacién maltiple horizontal alolargo de ls archivos de cédigo, eacnese/tisle> feta nane="description® primeros pasos para Brackets." Stink rel="stylesheet hretsmnain.cse"> + bodys “>PRINEROS PASOS CON BRACKETS/MI> ‘a>|ésta es to gutalesn2> editor de cédigo abierto que fntiende el dtaeno web. € un Cédigo Liviane y potente at Rerramientas visuales dentro det LINEAS Y COLUMNAS: Toda la informacién referente ala cantiad de lineas y columnas escritas yutlizadas, dentro ‘do cada archivo de cédigo que manojemos. Clase 02) HTMLS‘MENU VER (MENU NAVEGACION MENU DESARROLLO Contiene funciones que nos permiten ver Podemos navegar entre los distintos Nos permite manipular el entorno contenido especifica del cédigo escrito --dacumantas archivos de cédigo con de dasarroll Brackets, inciando 0 encada archivo de nuestros proyectos, los que estemos trabajando, visualizer _reiniciando este con los complementos. manejarlos tamafos de vente, tabular, _lainformacién de una definicién, abrir _—_activados o desactivados. También indentar cédigo y ocultarovisualizar yy corrar archivos de forma répida, y accedemos alas herramientas de codigo, sogin nuostras necesidades. ‘acceder a la documentacién répida desarrolador de Google Chrome, para dol documento escrito. \dopurar e inspeccionar el cédigo dels soluciones web, VISTA PREVIA DINAMICA Ejecuta nuestro proyecto en ‘curso dentro dela vista previa del = navegador web predaterminado |: FP cesronne extensions x Nos prmitegostonar ia x eae eee tierra is para Brackets, que nos faclitan ol By desarrala de soluciones web. BO My hy ha, hay m5, Ne se (5) nwevas versions an oi eee a Se ta a Srahetipr coy eae eed #4 ao Br? tor: see: = ALTERWAR ENTRE LENGUAJES 2 came t coeceeta mete a” “font-weight Brackets nos permite a oem Sats area ut ms ot relacionados a decenas = = eee 39 es de diferentes lenguajes de = programcién, Aqui podemos = leg rpidament llngusje po ue quoremos quel etor ie ee eer EDITOR DE CODIGO 7 -estemos editando un archivo Aqui dessrollremos de forma constant los a eens ejemplos. El editor Brackets soport por dtecto i aes los ngusjes HTMLS, CSS y JaveSerit. Es wisousecten REDUSERS Ei PROGRAMADOR WEB Full Stack aInstalacion de Brackets IDE constante evolucién y desarrollo por una comunidad de colaboradores desde httpz//brackets.io/,¢ instalarlo rapido y con facilidad. Una ver Instalado en nuestro equipo y antes de adentrarnos en HTMLS, repasaremos las caracteristicas principales de Brackets, en las paginas 2 y 3. y Windows, y podemos descargarlo Brackets es un editor de cédigo gratuite desarrollado por la firma Adobe, Esa evolucién de su antigua _independientes. Su c6digo original hherramienta Adobe Edge, que tenia _proviene del editor de cédigo ‘Atom, de filosofia open source. Es multiplataforma, porlo tanto, tenemos versiones para Linux, Mac el mismo fin que Brackets, pero fue discontinuada en 2014 en pos de este itimo editor. Brackets esta en ‘as 1 veri 17.0168 lease 0336671) asd Wed 08206 122756 TONED opp 202- present Adobe syste ncported and senso. All gsr lanes de eb atm Docs yo de Web Plato etn Spent ena ce canal de Crate Commons CY os: condiciones \magen 01. Sconces aan Brackets es un editor de . codigo gratuito creado por Adobe, que basa su ‘estructura en Atom; ures encanta i documentciny cig henson esté programado ‘completamente en No ‘JS, HTMLy CSS. x EDITORES LITE Dentro de la linea de editores bajos en peso o en consumo de recursos, podemos encontrar a Brackets, VS Code y Atom. Los dos primeros estan basados en la filosofia de este dltimo. Si somos partidarios de los productos: {amos acostumbrados a ellos, Brackets sera el editor que nos haga sentir mas cémodos. plataforma Adobe Si por el contrario la plataforma Visual Studio de. de preferencia. Por iltimo, sil softwa Clase 02 HTMLSEl lenguaje de marcado HTML HTMLes una sigla que proviene de Hyper Text Markup Language y hace referencia al lenguaje de marcado que nos permite crear paginas web, Esta regido por W3C (World Wide Web Consortium), quien se ocupa de organizar la estandarizacion referente a escritura e interpretacién de casi toda la tecnologfa relacionada con la ‘web. HTML es considerado el lenguaje web mas importante, dado que permitié desarrollar y expandir lo que todos conocemos como Web o WWW. Funcionamiento Através de a organizacion segimentada en tas, el HTML nos permite distinguir cada componente titulos, textos, imagenes, videos, audios teéter} de una pagina web, para que este se visualice de manera Optima y diferenciada del resto, A su vez, 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 ocupan de formatear casi todo el contenido web, que luego sera procesado por el motor de render de un navegador web, paraser visualizado, por iltimo, de forma comprensible por los usuarios finales. HTMLS: la quinta version independiente Ellenguaje HTML tuvo varias versiones alo largo de su existencla, Una de las tiltimas levadas adelante fuela versién 40, que tiempo después incorporé soportea XForms (interfaces grficas HTML basadas ‘Ante la peticién de un 9s tomado pr del navegador, procesa finalmente mostrado de forma grafic pagina o sitio web, el or el motor de do REDUSERS Bl PROGRAMADOR WEB Full Stack en contenido XML), lo que hizo nacer a HTML 4.1. En paralelo, Mozilla, Opera software y Apple comenzaron a trabajar en conjunto en un nuevo estandar que permitiese a los diferentes motores de navegacion lecaracteristicas que habilitaran a estos 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 estandar HTMLS. Finalmente, todas las empresas desarrolladoras de navegadores web terminaron adaptando este estandar, xyaque demostré en poco tiempo ser ‘elms efectivo y répido en cuantoa ‘evolucién, desde el nacimiento dela ‘Web como tal. HTMLS era conocido ‘también como Web Applications 1.0, lun estanidar muy fuerte hoy usado porladiversidad de dispositives ‘que utilizan internet como motor ‘de comunicacién o visualizacién de contenidos. Elenfoque 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 o tags. Estos tags ‘manejan una estructura determinada, que permite que el motor de renderizado interprete y visualice el contenido web de forma éptima. Como vimos en Ja Clase 01, los tags principales son: , shead>, , que engloban el inicio yel final de una pagina web, del contenido de cabecera de esta y del contenido principal (el que visualiza el usuario). Dentro de estos tags, se van agregando otros que responden a distintos comportamientos 0 caracteristicas que tendra cada pagina, y que iremos viendo a lo largo de esta clase. Doctype es una declaracién que se incluye al inicio de cada pagina y sirve para definir el tipo de documento que esté cargando el navegador web. Con esta sintaxi 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é de cada pagina, y también funcionan sin ella, como vimas 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:

Beneficios respecto a los foquis tradiciona

<1ipaumentar 1a sensacién de saciedad Preparacién

<1i>con 1a masa consistente, cocinarlos en agua hirviendo por 1 minuto

sxtracto del sitio web www.userslife.con

Clase 023 HTMLS‘Noquis de ricota y espinaca Bento repeco ae og tan la implementacién las listas ordenadas no ordenadas, de forma Listas de definicion correcta, Las listas de definiclén nos permiten armar un Implementacton se compone por un nivel superior, y we ydefiniones, Los tagsuttzadorparaarnarias — | Diferentes de definicién son

,

y

; estas dos ultimas I Sceimeutsiaetemaen 3 UStas elemento de la lista Para comprender mejor las tre li 108 a continuacién un ejercicio que nos permita agruparlas. El resultado dela pagina html ddobe ser igual alo que muestra la imagen 03. Término

Descripeion

Tee bewe © #4 [B 12700.1:4182/ienguajesdeprogramacion html |Combinando listas en HTMLS: ga + hile EL TIPO DE LISTA + Ne eis CORRECTO a Mie valores Las listas no ordenadas, visualizadas con una vifeta mace conformada por un circulo negro, son utilizadas 2 ess Pertierra ote eet eee eetian ae de una légica de orden. Por el contrario, as i Sunes, ordenadas son ieales para los elementos qu si vet eeenee necesitan manejar un orden determinado, como por a Combinando ‘ejemplo una explicacién paso a paso. Tengamos en wm unareduserscom _‘(WiStAS que aprendimos, ‘ambos casos, CSS pormi one user ‘obtendremos como na estética que necesitemos, més Titer corde con nuestro sitio web, an ‘emu non REDUSERS Bl PROGRAMADOR WEB Full StackCreacion de tablas Las tablas se definen a través del tag , y se complementan con otros tags que permiten: 18 crear sus celdas internas: ; 18 los encabezados de las tablas:

; 1 la insercién de datos en sus celdas: te> Veamos a continuaclén un répido ejemplo: Fernando 20 dulian Nombre Apellido edad omar aic/ta> [eo Ot Imagen 10, Las tablas son un excelente ido para agrupi ‘contenido de forma estructurada, como también uicolas Mariano conte it Alejecutar este ejemplo, veremos que la tabla por efecto se alinea al centro de la pagina. En el tag , también especificamos que esta ocupe el 100% del ancho de la pagina, Cambiemos este porcentaje por uno que deseemas, asi vemos cémo se comporta, ‘También podemos detectar que los encabezados de cada columna aparecen por defecto en negrita y centrados, y que el contenido de cada celda se encuentra alineado por defecto sobre la izquierda, sin discriminar si su contenido es texto 0 nimeros. Elelemento que visualiza el contenido enriquecido de una tabla, permite poner todos los elementos , HTML: texto, imagenes, listas, tablas internas, hipervinculos, etcétera. Clase 02 HTMLSBordes Ctra caracteristica propia de os elementos tale, tho y es que, sino especificamos un borde, estos se mostrardn por defecto de manera transparente. Modifiquemos el ejemplo anterior incluyéndole, solo a un valor determinado para su borde: px solid Eneste caso, se mostrara el borde externo de la tabla. No se resaltaran los bordes propios de las celdas ni del contenido de estas, Para que toda la tabla y sus celdas tengan un borde bien marcado, debemos recurrit alas propiedades CSS, que nos permitirén definir todos sus bbordes de una sola vez. Alinear encabezados Como vimos antes, los encabezados de as columnas se alinean por defectoen el centro, Si queremos cambiar su allneaiin hala a taquerda,podemos eeurir ala propiedad text-align también propia de CSS. Modifiquems mievamente nuestro ejemplo paraalinear sbrelafaqulerda el texto de las encabezados. th style="text-align Left;">Apellido Voremerns > € > 2 [OeiNCAeanaDeseenwnn [omber pide ‘Nuestro ejemplo ya ‘muestra un marco externo ylos encabezados alineados sobre la resto de las celdas. En este caso, como atin no trabajamos con CSS, debemos repetir el estilo sobre cada tag correoelectrénico Fernando Luna A diferencia del ejemplo anterior, aquf primero definimos el tag tablerow, donde incluimos el encabezado de la tabla, que aparecerd de manera vertical. Luego los tag tablerow y table data, que ineluyen el contenido por visualizar: El table data 1 corresponderd al table head 1, mientras que los table data 2 y 3, se agrupardn directamente dentro de table head 2. Con el cédigo de ejemplo de esta explicacién, crearemos ‘una nueva pagina llamada agruparcolumnasentabla html, y vvolcaremos este c6digo, para que el resultado quede igual ala Imagen 13. Deventer x © a 0 ragri06 Agrupar filas en una tabla Penner a nee REDUSERS Bl PROGRAMADOR WEB Full Stack Seb Cre eae Tamed danchlecon Spoeine femal com ‘agrupar varias celdas contiguas bajo el titulo ‘de una dnica columna,Hipervinculos Los hipervinculos son el corazon de lainteractividad de todo un sitio web, para si mismo y hacia el resto de internet, ‘Su uso nos permite navegar el contenido de una web, saltando entre las diferentes paginas que laconforman, Dentro de lo relacionado com la navegacién por una web, ccantamos con distintas formas de navegar a través de los hipervinculos, Vesmostas.a través de la Tabla 03, El tag solo no cumple ninguna funcién. En cambio el tag define hacia dénde estamos redirigiendo Ir a pagina alineacién de DIV Eltag y , podemos especificar un titulo, palabra o texto descriptivo, que contendra el link de destino, y quea su vez describa hacia dénde vamos a dirigirnos. Atributo de destino El tag cuenta con una serie de atributos adicionales {que nos permitiran dar el salto dentro de la misma pagina o marco donde hicimos clic (atributo self), hacia luna ventana o pestafia nueva (atributo blank); cargar cllink de destino en un marco especifico (mediante los inkkhtml> se cierra con el tag , tal como atributos _top, _parent, framename). Veamos un ejemplo de esto a continuacién, para conocer cémo funcionan los Trabajando con hipervinculos Nombre Edad que tengamos definido. Y para alinear el contenido por visualizar dentro dela columna que estamos alineando sobre el margen derecho de la tabla, debemos repetir este mismo estilo SS en cada table data, , con los datos por mostrar, Titulo individual Sidebemos desplegar dierent tabla en una sma gina web, lo mas apropindo para poder identificarlas de forma mas répda es aplicarles un titulo. Siblen podemos utilizar un tag propo de HTML, el elemento incluye un titulo propio integrado bajo e tag caption Este se declara dentro delta | EL RETORNO DE LAS TABLAS Las tablas en HTMLS han resurgido de las cenizas. Cuando comenzé a implementarse_ ‘evolucion hacia una web sin ‘lash, las tablas fueron dejandose de lado, priorizando los DIVs, que permitian reestructurar correctamente una pagina. manera homogénea tanto a una computadora de esritaro como a REDUSERS El PROGRAMADOR WEB Full Stack tablet o aun smartphone,Agrupar contenido de celdas Atravi de as diferentes configuraciones que podemos establecr sobre ca elemento de una tabla, tenemas ta posibiidad de agrupar varias celdas, para ast darle un formato mas uniforme al contenido que deseamos visualizar Para realizar esto, debemas utilizar elatributo rowspan del elemento Correo electrénico Disco teeies x © a 0 wraarie6 Agrupar filas en una tabla Prerenannin ites Nombrey Apa Fame Lan fayocale pn oe fepocale yoo = Conve sectinko Amagen 12. Un ejemplo rapido del agrupamiento de cel Debemos ser exactos en ‘el nimero de rowspan que ‘deseamos agrupar, para no caer en errores de creacién dela tabla. Clase 02 HTMLS Los herederos del imperio fernandofvidamobile.com.ar ferproonlinedgmail.con ferproonlinetyahoo.com.ar Volquemos este ejemplo a un nuevo archivo HTML, ¢grabemos el mismo con el nombre agruparfilasentabla html, y ejecutemos nuestro proyecto para ver el resultado final. El mismo se debe visualizar como en la Imagen 12, Agru ar contenido deé’columnas Dela misma forma que podemos agrupar contenido en Jas celdas también es posible agrupar el contenido de tas columnas de una tabla. Para esto, en lugar de usar el atributo rowspen, usaremos el atributo colspan dentro del tag table head athe. Nombre y Apellido fernando@vidamobile.com.ar ferproonlinedgmail.com Navegar por 1a pagina tabla” style="width:800"> En 1a misma pagina En una pestafia nueva Haz clic sobre mi Pestavia Iz a Tabla 1 “$tabla2">Ir a Tabla 2. descripcién... Volver arriba toremipsum, dolor sitamet. // repetir 1a oracién varias veces, para rellenar con contenido// Volver arriba REDUSERS Bl PROGRAMADOR WEB Full Stack Fe AD oar = ‘Trabajando con hipervinculos locas dirams onsen Imagen 8, Si todo salié Lice Sirs isms gonrectamente, nuestra Laren Ss sane jina HTML nos debe pormiti recargar la pa ‘abrir esta misma pagina en postafia nueva y saltar entre las diferentes tablas. Através de este cédigo, generamos tres tablas. En la primera, establecemos los diferentes tipos de hipervinculos. En la segunda y a tercera tabla, ‘generamos contenido para poder navegar a través de cesta misma pagina, Prestando atencién al cédigo de cada elemento , veremos que estos estén compuestos por un ID: (tabla0, tabla1, tabla2). E11D que le damos a cada tabla nos permite utilizarlo como un punto de destino cuando deseamos navegar por la misma pagina. Guardemos nuestro ejemplo bajo el nombre de hipervinculos html, y ejecutémoslo para probar el correcto Funcionamiento. Hipervinculos mailto: Dentro de los hipervinculos, podemosincluirel envio de un e-mail hacia determinada direcci6n de correo electrénico, La elecucin del hipervinculo hacia un nwevo e-mall se realizautilizandoel tag ulanar # Fernando Luna ilanar a Fernando Luna "geo:-34607639,~ 58.458621">RedUsers Q ca href="nap:res Arroyos 1357, C.A.B.A.">RedUsers HQ agendar evento ‘Tabla 08, Los URI schemes potencian los Existen muchos més URI schemes, pero no son tan especificos para que los trabajemos desde una web. Por ejemplo, Google y Apple tienen desarrollados URI schemes propios, que permiten interactuar a las paginas web con diferentes servicios y aplicaciones especificas de su sistema operativo. También existen URI schemes especificas para Iniciar misica en Spotify, postear en Facebook, crear un tuit en Twitter, abrir la tienda de aplicaciones AppStore o Google Play, entre otros tantos. Hipervinculos en imagenes Las imagenes, grandes protagonistasgrificas en el diseRo visual de las web, también aceptan hipervineulos hacia otros destinos. Para lograr esto, debemas combinar el tag junto con e tag . Creamos el siguiente digo base en una pagina HTML nueva, ala que lamamos hipervinculos imagenes html. REDUSERS Bl PROGRAMADOR WEB Full Stack indo funciones de distintas plataformas.