DISEÑO DE PAGINAS CON HTML
|
|
|
- Santiago Giménez Flores
- hace 8 años
- Vistas:
Transcripción
1 DISEÑO DE PAGINAS CON HTML
2 CONCEPTOS HTML (Hyper Text Markup Language) Lenguaje con el que se escriben paginas web. Es un lenguaje de hipertexto. Permite escribir texto de forma estructurada. Compuesto por etiquetas (marcan el inicio y fin de cada elemento del documento) Documento hipertexto contiene texto, imágenes sonido y video (documento multimedia).
3 NAVEGADORES Interpreta el código HTML de la página. Internet Explorer y Netscape Navigator
4 EDITORES Programa que permite redactar documentos. Editores visuales. Evitan la escritura de código HTML (la pagina se construye). Editores de texto. La pagina se crea a través del código HTML.
5 Editores Visuales: (generan basura) Macromedia Dreamweaver, Microsoft Frontpage, Adobe Pagemill, NetObjects Fusion, CutePage, HotDog Proffesional, Netscape Composer y Arachnophilia, MsWord otros. Editores de texto.(solo lo necesario) Wordpad Block de notas Notepad++ Otros
6 Estructura de una página <html> <head>... <title> Curso de HTML </title> </head> <body>... </body> </html> Entre las etiquetas <html> y </html> esta comprendido el resto del código HTML de la página <head> y </head>. Cabecera de la pagina puede contener <link>, <style>, <script> <meta> <title> El cuerpo del documento contiene la información propia del documento (el texto de la página, las imágenes, los formularios, etc. color o la imagen de fondo de la página.
7 Algunos atributos de body <body bgcolor="#0000ff"> <body bgcolor="blue"> <body background="fondo.gif"> <body background="imagenes/fondo.gif"> <body text="#ff0000"> <body leftmargin="20" topmargin="0" marginwidth="20" marginheight="0" >
8 Colores en hexadecimal Color Hexadecimal Nombre #FFFFFF white # black # navy #0000FF blue # green # teal #00FF00 #00FFFF lime aqua # maroon # purple # olive # gray #C0C0C0 silver #FF0000 red #FF00FF #FFFF00 fuchsia yellow
9 Creación de la primera pagina Crear un directorio de trabajo para la pagina.(ejm. mipagina) en mis documentos Con el bloc de notas escribir el siguiente codigo: <html> <head> <title>pagina de inicio</title> </head> <body bgcolor="99cc99" > </body> </html> Guardar el archivo guardar como con el nombre inicio.html en la carpeta mipagina
10 La pagina resultante es como sigue:
11 TEXTO Se requiere dar formato al texto < y > indican inicio y fin de etiqueta Carácter Representación < < Algunos caracteres especiales > > á á Á Á é é Se puede escribir directamente sin la representación en HTML É í Í ó Ó ú Ú É í Í ó Ó ú Ú   espacio en blanco ñ Ñ ñ Ñ ™
12 <!-- y //-->. comentarios <br> <pre> y </pre> Saltos de línea,no requiere fin de etiqueta texto preformateado. Aparece tal como se lo escribe, no requiere saltos de linea ni espacios en blanco en HTML No permite incluir en el texto etiquetas: <img> (para incluir imágenes), <object> (para incluir objetos como animaciones), <big>, <small>, <sub> ni <sup> <hr> Regla horizontal separar secciones dentro de una misma página. no precisa ninguna etiqueta de cierre
13 algunos atributos de la regla horizontal: Atributo Significado Posibles valores align width alineación de la regla dentro de la página ancho de la regla left (izquierda) right (derecha) center (centro) un número, acompañado de % cuando se desee que sea en porcentaje size alto de la regla un número noshade eliminar el sombreado de la regla no puede tomar valores Inicio<hr align="left" width= 50%" size= 10" noshade>bienvenidos a mi página.
14 Una ilustración simple <html> <head> <title>pagina de inicio</title> </head> <body bgcolor="99cc99" background="imagenes/fondopatas.gif" leftmargin="40" topmargin="40" marginwidth="40" marginheight="40"> hola mundo este es un texto común como están, canciónó<br> cuando se esta pensando <pre>hola, BIENVENIDOS esta ES MI PÁGINA WEB y esto un texto preformateado</pre> Inicio de un separador horizontal<hr align="left" width="50%" size="10" noshade>bienvenidos a mi página. </body> </html>
15
16 <font> y </font> propiedades del texto Atributo Significado Posibles valores face fuente nombre de la fuente, o fuentes color color del texto número hexadecimal o texto predefinido size tamaño del texto valores del 1 al 7, siendo por defecto el 3, o desplazamiento respecto al tamaño por defecto, añadiendo + o - delante del valor <font color="#993366" size="4" face="arial"> Bienvenidos a mi página, texto con propiedades </font> fuente para todo el documento <body> <basefont color="#006699" size="4" face="arial">
17 Etiqueta Significado Ejemplo <b> negrita curso HTML aulaclic <i> cursiva curso HTML aulaclic <u> subrayado curso HTML aulaclic <s> tachado curso HTML aulaclic <tt> <big> <small> etiquetas asociadas al tipo de letra: teletipo (máquina de escribir) aumenta el tamaño de la fuente disminuye el tamaño de la fuente curso HTML aulaclic curso HTML aulaclic curso HTML aulaclic
18 <p> y </p> Parráfos atributo align: cuyos valores pueden ser left (izquierda), right (derecha), center (centrado) o justify (justificado). <div> y </div> <p align="center">este es un parrafo muy simple (centrado)</p> <p>aquí encontra otro párrafo (la separacion es amplia).</p> agrupar bloques de texto, pero con la diferencia de que la separación entre ellos es menor. Tiene los mismos atributos de alineación. <div align="center">otro parrafo con agrupacion de bloques </div> <div>note que el espacio es menor</div> <center> y </center> Texto centrado <center>texto centrado</center>
19 Encabezados - Títulos Etiqueta Ejemplo <H1> Título 1: HTML <H2> <H3> Título 2: HTML Título 3: HTML <H4> <H5> <H6> Título 4: HTML Título 5: HTML Título 6: HTML <H2 align="center">el lenguaje HTML</H2><H4>Apartado 1: Las etiquetas</h4>
20 Marquesinas <marquee> y </marquee>. <marquee bgcolor="#006699" behavior="alternate" direction="right"> <b><font color="#ffffcc" size="5">esto es una marquesina </font></b> </marquee> behavior alternate scroll slide direction down up left right <li>perro</li> <li>gato</li> <li>periquito</li> Listas Perro Gato Periquito
21 <ul> y </ul>. <ul type="circle"> <li>perro</li> <li>gato</li> <li>periquito</li> </ul> <ol> y </ol>. viñeta Lista desordenada circle (círculo), disc (disco) o square (cuadrado). Lista ordenada type 1 (números), a (letras minúsculas), A (letras mayúsculas), i (numeros romanos en minúsculas) o I (números romanos en mayúsculas). Listas anidadas: combinación de las anteriores.
22 Taller Uno 1. Crear una pagina de inicio en blanco 2. Colocar un titulo centrado y subrayado (mi pagina personal) 3. Insertar una marquesina (con fondo rojo, tamaño de letra 5, y comportamiento continuo. 4. Insertar un párrafo de texto con sangría a la izquierda y alineación a la izquierda. 5. Crear una división horizontal. 6. Escribir un texto ( párrafo) centrado que indica una frase arbitraria. 7. Insertar una división horizontal. 8. Insertar un texto preformateado que introduce a nuestras ocupaciones principales (centrado). 9. Crear una lista que muestra las áreas de interés de información. 10.Insertar listas anidadas a cada item.
23 ENLACES hiperenlace, hipervínculo, o vínculo <a> y </a>. href especifica la página a la que está asociado el enlace Referencia absoluta: Conduce a una ubicación externa al sitio <a href=" Referencia relativa al sitio: Conduce a un documento situado dentro del mismo sitio <a href="inicio1.html">cambiar a otro documento "ref. relativa"</a> <a href="../mipagina/imagenes/inicio1.html">otra carpeta </a> <a href="//d:/diplomado/tutoriales/html/index.htm">navegar por el tutorial</a>
24 Destino del enlace determina en qué ventana va a ser abierta la página vinculada atributo target _blank Abre el documento vinculado en una ventana nueva del navegador. _self Abre el documento vinculado en el mismo marco o ventana que el vínculo <a href="inicio1.html" target="_blank"> cambiar a otro documento "ref. relativa"</a> <br> Anclas o puntos de fijación permite ir directamente al apartado deseado en un documento extenso <a name="miancla"></a>texto con ancla define el ancla <a href="#miancla">enlace al ancla</a> lleva al ancla
25 Correo electrónico: <a </a> <a asunto del mensaje"> mi </a> Vínculo a ficheros para descarga: <a href="sib1.doc" target=_blank > haz clic aquí para descargar el archivo </a>
26 IMAGENES <img> src : especifica el nombre de la imagen Las imágenes pueden ser de formatos diferentes: bmp, gif, jpg, etc <img src="imagenes/gatito.gif" alt="imagen ejemplo"> <img src="imagenes/foto.gif" alt="mi fiesta"> El atributo border puede tomar valores numéricos <img src="imagenes/gatito.gif" alt="imagen ejemplo" border="4">
27 imagen con borde y con un enlace: <a href="inicio1.html" target="_blank" > <img src="imagenes/gatito.gif" border="4" > </a> tamaño de la imagen width (anchura) y height (altura) <img src="imagenes/foto.gif" alt="mi fiesta" width="500" height="400"> Alineacion de la imagen align Este atributo indica la alineación de las imágenes con respecto a la línea de texto en la que se encuentran.
28 Los valores del atributo align pueden ser los siguientes: bottom left middle right texttop top inferior izquierda medio derecha texto superior superior Este <img src="imagenes/gatito.gif" alt="imagen ejemplo" border="4" align="middle"> es un grafico
29 TABLAS <table> y </table> <tr> y </tr> <td> y </td> INICO Y FIN DE TABLA Inicio y fin de fila columna o celda <table> inicio de tabla <tr> inicio de fila 1 <td> </td> celda 1 de la fila 1 <td> </td> celda 2 de la fila 1 </tr> fin de la fila 1 <tr> inicio de fila 2 <td> </td> celda 1 de la fila 2 <td> </td> celda 2 de la fila 2 </tr> fin de la fila 2.. </table> fin de la tabla
30 Atributo width height cellpadding Atributos de una tabla: Significado ancho de la tabla altura de la tabla espacio entre el contenido de las celdas y el borde Posibles valores un número, acompañado de % cuando se desee que sea en porcentaje un número, acompañado de % cuando se desee que sea en porcentaje un número cellspacing espacio entre celdas un número border grosor del borde un número align alineación de la tabla dentro de la página left (izquierda) right (derecha) center (centro) bgcolor color de fondo número hexadecimal background imagen de fondo número hexadecimal bordercolor color del borde número hexadecimal <table width="50%" border="2" align="center" cellspacing="0" bordercolor="green" bgcolor="blue">
31 nombre descripción FOTOGRAFIA FIESTA 4 DE JULIO POR EL CENTENARIO DE LA FACULTAD aquí va texto, imágenes, video GATITO GRAFICO EXTRAIDO DEL TUTORIAL OTRO CUALQUIERA PUEDE IR CUALQUIER COSA O SIMPLEMENTE TEXTO
32 <table border="2"> <tr> <td>nombre</td> <td>descripocion</td> <td>fotografia</td> </tr> <tr> <td>fiesta 4 DE JULIO</td> <td>por EL CENTENARIO DE LA FACULTAD</td> <td>aquí va texto, imágenes, video</td> </tr> <tr> <td>gatito</td> <td>grafico EXTARIDO DEL TUTORIAL</td> <td><img src="imagenes/gatito.gif" alt="imagen ejemplo" border="4"></td> </tr> <tr> <td>otro CUALQUIERA</td> <td>puede IR CUALQUIER COSA</td> <td>o SIMPLEMENTE TEXTO</td> </tr> </table>
33 Atributos de una celda: Atributo width height align valign Significado ancho de la tabla altura de la tabla alineación horizontal del contenido de la celda alineación vertical del contenido de la celda Posibles valores un número, acompañado de % cuando se desee que sea en porcentaje un número, acompañado de % cuando se desee que sea en porcentaje left (izquierda) right (derecha) center (centro) baseline (línea de base) bottom (inferior) middle (medio) top (superior) bgcolor color de fondo número hexadecimal background imagen de fondo número hexadecimal bordercolor color del borde número hexadecimal
34 <tr align="center" bgcolor="yellow"> <td bgcolor="purple">gatito</td> Para toda la fila la alineación es Centrado y el fondo amarillo Solo para la celda el fondo es púrpura Titulo de columna <th> y </th> idéntico a td pero centrado y negrilla Combinación de celdas colspan y rowspan colspan especifica el número de columnas por las que se extenderá la celda rowspan especifica el número de filas por las que se extenderá la celda
35 NOMBRE combinación de 4 columnas DATOS NOTA 1 NOTA 2 FECHA JUAN CARLOS /AGOSTO/2017 LUISA /AGOSTO/2017
36 <table width="575" border="2" cellspacing="2"> <tr align="center" valign="middle"> <th colspan="4">combinacion de 4 columnas</th> </tr> <tr align="center" valign="middle"> <th rowspan="2">nombre</th> <th colspan="2">datos</th> <th rowspan="2">fecha</th> </tr> <tr align="center" valign="middle"> <th>nota 1</th> <th>nota 2</th> </tr> <tr align="center" valign="middle"> <td>juan CARLOS</td> <td>1.75</td> <td>2.97</td> <td>16/agosto/2017</td> </tr> <tr align="center" valign="middle"> <td>luisa</td> <td >3.65</td> <td >2.65</td> <td>30/agosto/2017</td> </tr> </table>
37 MARCOS (FRAME) <frameset> y </frameset> Define el conjunto de marcos no requiere las etiquetas <body> y </body> Atributo Significado Posibles valores cols rows frameborder framespacing border tamaño de cada una de las columnas en que se divide el documento tamaño de cada una de las columnas en que se divide el documento aparece o no el borde de los marcos separación entre los marcos grosor del borde un número (acompañado de % cuando se desee que sea en porcentaje) por cada columna, separados por comas. un número (acompañado de % cuando se desee que sea en porcentaje) por cada fila, separados por comas. yes no un número un número, acompañado de % cuando se desee que sea en porcentaje bordercolor color del borde número hexadecimal
38 <frame> indica el documento a cargar en el marco atributos de un marco: Atributo frameborder Significado aparece o no el borde del marco Posibles valores yes o 1 no o 0 name nombre del marco cualquier valor noresize marginwidth marginheight scrolling si aparece, el usuario no podrá redimensionar el tamaño de este marco anchura del margen con respecto a los bordes del marco altura del margen con respecto a los bordes del marco se mostrará o no la barra de desplazamiento cuando la página del marco no se pueda visualizar completamente en él no puede tomar valores un número, acompañado de % cuando se desee que sea en porcentaje un número, acompañado de % cuando se desee que sea en porcentaje yes no auto src documento que se cargará en el marco ruta y nombre del documento
39 <frameset rows="90,*" framespacing="3" frameborder="yes" border="3" bordercolor="blue"> <frame src="titulo.html" name="marcosuperior" frameborder="yes" scrolling="yes" noresize> <frameset cols="150,*" framespacing="3" frameborder="yes" border="3" bordercolor="red"> <frame src="menu.html" name="marcoizquierdo" scrolling="yes" noresize> <frame src="inicio.html" name="marcoderecho"> </frameset> </frameset>
40 Destino de los enlaces de un marco Los nombres de los marcos pueden constituirse en el destino De un documento En la página del marco izquierdo (menu.html) crear el siguiente enlace: <a href="inicio1.html" target="marcoderecho">matematicas</a>
41 FORMULARIOS Permite recoger datos introducidos por el usuario. Un formulario está formado, entre otras cosas, por etiquetas, campos de texto, menús desplegables, y botones <form> y </form> indican el inicio y fin de un formulario El atributo action indica una dirección de correo electrónico o la dirección del programa que se encargará de procesar el contenido del formulario. El atributo method indica el metodo mediante el que se transfieren las variables del formulario. Su valor puede ser get o post
42 ELEMENTOS DE UN FORMULARIO <textarea> y </textarea> área de texto <textarea name= area1" cols="30" rows="3"> Aquí se escribe el texto</textarea> <input> elemento de entrada atributo name indica el nombre del elemento de entrada atributo type indica el tipo de elemento de entrada. El atributo size indica el número de caracteres El atributo maxlenght indica el número de caracteres El atributo value indica el valor inicial del campo de texto
43 Elementos para type: TEXTO <input name="campo" type="text" value="campo de texto" size="20" maxlength="15"> CONTRASEÑA <input name="contra" type="password" value="contraseña" size="20" maxlength="15"> BOTON <input name="boton" type="submit" value="enviar"> CASILLA DE VERIFICACION BOTON DE OPCION <input name="casilla" type="checkbox" value="acepto" checked> <input name="prefiere" type="radio" value="estudiar" checked> <input name="prefiere" type="radio" value="trabajar">
44 SELECION MULTIPLE <select name="animal" size="3" multiple> <option selected>---elige animales---</option> <option value="ave">loro</option> <option>perro</option> <option>gato</option> <option>pez</option> </select> RESTABLECER <input name="borrar" type="reset" id="borrar" value="borrar">
Etiquetas Básicas (Estructura HTML) Etiquetas Atributos Valores Descripción. Formato de Presentación Etiquetas Atributos Valores Descripción
Etiquetas Básicas (Estructura HTML) Inicio y final del documento html text link alink vlink topmargin (IE) leftmargin (IE) marginheight margin
HTML. guía rápida de referencia. Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003
HTML guía rápida de referencia Autor: Jorge Sánchez (www.jorgesanchez.net) año 2003 Basado en la normativa sobre HTML4 disponible en: http://www.w3.org/tr/html4/ Jorge Sánchez 2003 índice introducción...
MANUAL PRACTICO DE HTML
MANUAL PRACTICO DE HTML 1 La estructura tiene tres partes cabeza, cuerpo, cierre o fin. MI PC... Aquí iría el contenido que ve el usuario final
Prácticas H T M L U.A.C.M COMPUTACIÓN II
Prácticas H T M L U.A.C.M COMPUTACIÓN II M a r c o s Práctica VI HTML Básico El primer objetivo de esta práctica es familiarizarse con el uso de los marcos y posteriormente ubicar la forma de como podemos
Diseño Web. Sitio Web Conjunto de páginas web relacionadas entre sí.
Internet Es una red de redes de ordenadores, que intercambian información basándose en el protocolo TCP/IP. Existen diversas formas de acceder a Internet: Correo electrónico, FTP, Videoconferencia, y la
CONCEPTOS BÁSICOS PARA EL DISEÑO DE PAGINAS WEB
COLEGIO AGUSTINIANO CIUDAD SALITRE AREA DE TECNOLOGÍA E INFORMATICA GUIA DE APOYO PRIMER BIMESTRE GRADO UNDECIMO CONCEPTOS BÁSICOS PARA EL DISEÑO DE PAGINAS WEB UNIDAD TEMÁTICA: INICIANDO CON HTML Y DREAMWEAVER
Unidad 1. Introducción a HTML (I)
Unidad 1. Introducción a HTML (I) A lo largo de este tema vamos a conocer los conceptos básicos sobre HTML, y cómo se utiliza para crear páginas web. Qué es HTML El HTML (Hyper Text Markup Language) es
UNIDAD I HOJA ELECTRÓNICA DE CÁLCULO
UNIDAD I HOJA ELECTRÓNICA DE CÁLCULO COMPETENCIA PARTICULAR: Utiliza herramientas de la hoja electrónica de cálculo para el procesamiento de la información en su ámbito académico, social y laboral. PRACTICA
Objetivos. El alumno conocerá los elementos indispensables para crear una página web. 1. Crear una página web básica utilizando html.
Objetivos El alumno conocerá los elementos indispensables para crear una página web. Al final de esta práctica el alumno podrá: 1. Crear una página web básica utilizando html. Introducción El lenguaje
TEMA 9 CREACIÓN DE PÁGINAS WEB
TEMA 9 CREACIÓN DE PÁGINAS WEB OBJETIVOS Conocer las páginas web y sus elementos. Insertar tablas, capas, enlaces en las páginas web. Crear páginas web con NVU. Crear un sitio web. Configurar un sitio
ELABORADO POR: BRENDA PATRICIA GONZALEZ MANRIQUEZ
CECYTEM PLANTEL NICOLAS ROMERO II Manual para crear páginas web en HTML GRUPO: 301 ELABORADO POR: BRENDA PATRICIA GONZALEZ MANRIQUEZ HTML (HyperText Markup Language - Lenguaje de Marca de Hipertextos)
TEMA 2. CREAR SITIOS WEB USANDO. Tecnologías de la Información 1ºBachillerato IES Zurbarán (Badajoz)
TEMA 2. CREAR SITIOS WEB USANDO CÓDIGO HTML Tecnologías de la Información 1ºBachillerato IES Zurbarán (Badajoz) Sesión 10 Tablas Introducción Las tablas son posiblemente la manera más clara de organizar
MANUAL DE REFERENCIA DE PROGRAMACIÓN HTML
MANUAL DE REFERENCIA DE PROGRAMACIÓN HTML HTML (HyperText Markup Language) es un lenguaje muy sencillo que permite describir hipertexto, es decir, texto presentado de forma estructurada y agradable, con
Tema 3. Conceptos Básicos de HTML. ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda!
Tema 3. Conceptos Básicos de HTML ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda! Lenguajes de descripción! Grupo de lenguajes que describen cómo representar
RESUMEN HTML. Elementos de estructura
RESUMEN HTML Elementos de estructura primer elemento que enmarca todo el fichero HTML (obligatorio) zona de cabecera (obligatorio) definición de un título (obligatorio) cuerpo
H T M L. Marquesinas y Listas U.A.C.M COMPUTACIÓN II. Prácticas
Prácticas H T M L U.A.C.M COMPUTACIÓN II Marquesinas y Listas Práctica VII HTML Básico El objetivo es trabajar con dos elementos que nos darán un mejor aspecto a la información que se visualice en nuestra
Transparencias de J2EE. Tema 2: HTML. Uploaded by Ingteleco
Transparencias de J2EE Tema 2: HTML Uploaded by Ingteleco http://ingteleco.webcindario.com ingtelecoweb@hotmail.com La dirección URL puede sufrir modificaciones en el futuro. Si no funciona contacta por
Apuntes básicos de HTML I.E.S. Pintor José María Fernández
Manual Básico de HTML Este manual lo he realizado con la intención de servir como primer contacto con el lenguaje HTML (Hyper Text Markup Language), que es el que se utiliza para la creación de páginas
QUE ES HTML? Las siglas HTML se refieren a:
QUE ES HTML? Las siglas HTML se refieren a: HyperText Markup Language Es uno de los lenguajes más utilizados en el Web Wide Web. Las páginas de Internet están escritas en este lenguaje. Le brinda al autor
Nociones basicas de HTML
Nociones basicas de HTML Para comprender lo que veremos mas adelante es necesario tener conocimientos basicos de informatica e Internet en entorno Windows. Para hacer los ejercicios basta con un Navegador
Para iniciarnos en el estudio de este curso necesitamos estar familiarizados con ciertos conceptos generales, entre ellos:
Conceptos básicos de la internet y la web Para iniciarnos en el estudio de este curso necesitamos estar familiarizados con ciertos conceptos generales, entre ellos: Internet: Red mundial de computadoras
HTML. HyperText Markup Language (Lenguaje de Marcas de Hipertexto)
HTML HyperText Markup Language (Lenguaje de Marcas de Hipertexto) Introducción Un lenguaje de marcas es una forma de codificar junto con el texto, incorporando etiquetas que contienen información adicional
PHP y MySQL. Aplicaciones Web: HTML II (tercera parte) Autor: Johnny Zulca Mamani
PHP y MySQL. Aplicaciones Web: HTML II (tercera parte) Autor: Johnny Zulca Mamani 1 Presentación del curso Programación de aplicaciones Web con PHP y MySQL. Ahora continuaremos con el estudio de las páginas
Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta ADDRESS ADDRESS CITE CITE B: NEGRITA B: NEGRITA.
En la presente tabla se hace una comparación entre las etiquetas de formato de texto. Netscape no soporta : ni (tachado). Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta Con etiqueta Sin etiqueta
4º Unidad Didáctica. Lenguaje HTML. Eduard Lara
4º Unidad Didáctica Lenguaje HTML Eduard Lara 1 ÍNDICE 4.1 Lenguaje HTML 4.2 Etiquetas HTML 4.3 Estructura del documento HTML 4.4 Texto en HTML en HTML 4.5 Hiperenlaces en HTML 4.6 Imágenes en HTML 4.7
Lenguaje HTML y páginas web. Alex Sánchez
Lenguaje HTML y páginas web Alex Sánchez Introducción: La web y las páginas web Componentes de la web Como funciona la web? Como es la comunicación en la web El acceso a la Web suele basarse en un un explorador
Qué es HTML? Estructura interna de una página HTML. Cabecera de la página <head>
Qué es HTML? El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto de forma estructurada,
Tema 4. Contenido multimedia. ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda!
Tema 4. Contenido multimedia ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda! Hipertexto! Permiten conectar entre sí entre diferentes documentos, elementos
Introducción: páginas web y navegadores
IB14 Informática Aplicada a la Construcción Creación de páginas web con HTML Introducción: páginas web y navegadores Una página web, pese a la gran cantidad de colores, imágenes e información que puede
Profesor: Víctor Cárdenas Schweiger
Profesor: Víctor Cárdenas Schweiger 2014 En primer lugar se debe especificar que el archivo de texto que se esta escribiendo es un documento HTML, para ello usamos las instrucciones de inicio y fin de
Qué es HTML? Páginas WEB. Etiquetas
Guía de Html 2015 QUÉ ES HTML PÁGINAS WEB ETIQUETAS ESTRUCTURA BÁSICA DE UNA PÁGINA WEB CÓMO SE UTILIZAN LOS COLORES EN HTML? TEXTO EN HTML ENCABEZADOS UBICACIÓN, FORMATO Y ATRIBUTOS DE TEXTO TABLAS NUMERACIÓN
La primera etiqueta que vamos a aprender es aquella por la que deben empezar todos los documentos que queramos sean considerados HTML; esta es:
TEMA P1. CURSO BÁSICO DE PROGRAMACIÓN EN LENGUAJE HTML HTML es un acrónimo de HiperText Markup Language que, traducido al español, quiere decir algo así como lenguaje de definición por marcas para hipertexto,
INTRODUCCIÓN AL LENGUAJE HTML... 2 Características del lenguaje HTML... 2 Sintaxis del HTML... 2 Partes de un documento HTML... 2 FORMATO EN HTML...
INTRODUCCIÓN AL LENGUAJE HTML... 2 Características del lenguaje HTML... 2 Sintaxis del HTML... 2 Partes de un documento HTML... 2 FORMATO EN HTML... 2 Formato de párrafo... 2 Encabezados... 3 Formateando
CONTENIDO TEMÁTICO. Pág. 1. INTRODUCCIÓN A HTML... 3 QUÉ ES HTML?... 3 NAVEGADORES... 3 EDITORES... 4 ETIQUETAS... 5 MI PRIMERA PÁGINA...
CONTENIDO TEMÁTICO Pág. 1. INTRODUCCIÓN A HTML... 3 QUÉ ES HTML?... 3 NAVEGADORES... 3 EDITORES... 4 ETIQUETAS... 5 MI PRIMERA PÁGINA... 6 2. ESTRUCTURA DE UNA PÁGINA... 9 IDENTIFICADOR DEL TIPO DE DOCUMENTO
ETIQUETAS PRINCIPALES
HTML... 1 ETIQUETAS PRINCIPALES... 1 ETIQUETAS DE TÍTULOS, PÁRRAFOS Y SEPARACIONES... 3 FORMATO DE TEXTO... 5 LISTAS... 6 ENLACES E IMÁGENES... 7 TABLAS... 9 HTML Las páginas web son documentos de texto,
GUÍA DE APRENDIZAJE COMPUTACIÓN BÁSICA II COMPETENCIA GENERAL
GUÍA DE APRENDIZAJE COMPUTACIÓN BÁSICA II COMPETENCIA GENERAL Maneja herramientas informáticas vigentes que le permiten administrar y difundir información diversa en un contexto social, académico y laboral
Estas líneas son permanentes en una página Web. Siempre van a estar presentes no importando qué tan corta o tan larga sea la página y el contenido.
Estructura de una página Web Toda página Web tiene una estructura que permite al programador saber de antemano qué tipo de información necesita introducir. Esto ayuda a que la página que diseña sea claramente
Practicas de HTML. En un procesador de texto cualquiera teclear el siguiente código
7 Practicas de HTML 1. Pagina básica En un procesador de texto cualquiera teclear el siguiente código Mi primera pagina Web Esta es mi primera pagina, es muy
EDICIÓN WEB CÓDIGO HTML
EDICIÓN WEB CÓDIGO HTML 1. Estructura básica de un documento HTML 1.1. Tipos de etiquetas. Etiqueta cerrada Mi página Web Etiqueta abierta Etiqueta con parámetros
UNIDAD 4: NOCIONES BÁSICAS DE DISEÑO WEB (MAQUETACIÓN HTML) CURSO ELABORACIÓN DE CONTENIDOS FORMATIVOS Plan de Formación Edukanda
UNIDAD 4: NOCIONES BÁSICAS DE DISEÑO WEB (MAQUETACIÓN HTML) CURSO ELABORACIÓN DE CONTENIDOS FORMATIVOS Plan de Formación Edukanda 1 Índice 1. Introducción... 3 2. Objetivos... 4 3. El lenguaje HTML...
HTML El idioma de Internet (Parte 1)
HTML El idioma de Internet (Parte 1) El lenguaje HTML Lenguaje de marcas de hipertexto Sintaxis extremadamente sencilla Documentos en archivos de texto simples Texto sin formato Diferenciación de los distintos
HTML & CSS HTML. PARTE 3. Profesora: Ana Gómiz Escuela Arte Granada Obtubre 2014
05 HTML & CSS HTML. PARTE 3 Profesora: Ana Gómiz Escuela Arte Granada Obtubre 2014 01. Imágenes + Añadir imágenes. + Elegir el formato correcto. + Optimizar imágenes para web. Profesora: Ana Gómiz Escuela
Capítulo 4. Introducción a HTML
Capítulo 4. Introducción a HTML 4.1 Introducción HTML (HyperText Markup Language) es el lenguaje utilizado para representar documentos en la World Wide Web. Además de texto normal, incluye también elementos
Diseño de páginas web 2011
Diseño de páginas web 2011 Al finalizar el curso, el alumno será capaz de planificar y diseñar correctamente desde sencillas páginas web hasta completos sitios web. Para ello, se le proporciona primero
EJEMPLOS. Ejemplo Nº 1. Página Sencilla
EJEMPLOS Ejemplo Nº 1 Página Sencilla cocina Para Todos bienvenido, estás en la página comida para Todos. aquí aprenderás recetas fáciles y deliciosas.
HIPERVÍNCULOS. Es posible asignar un vínculo a un texto, a una imagen, o a parte de una imagen
HIPERVÍNCULOS Un hiperenlace, hipervínculo, o vínculo, no es más que un enlace, que al ser pulsado lleva de una página o archivo a otra página o archivo. Es posible asignar un vínculo a un texto, a una
Luis José Sánchez González INTRODUCCIÓN
CURSO BÁSICO DE HTML INTRODUCCIÓN Para crear una página web podemos optar por una de los siguientes métodos: a) Utilizar una herramienta de diseño web como Screem, Blue Fish, Front Page o incluso un procesador
Guardar el archivo como Practica1.html en formato texto y visualizarlo con el navegador.
HTML Etiquetas Básicas y de Estructura de páginas Web, Manejo de Texto y diseño de Páginas. Objetivo: Hacer prácticos los conocimientos adquiridos en la clase teórica. Investigar más etiquetas para el
Crear una página Html con el Editor.
Crear una página Html con el Editor. El Editor de Páginas HTML de RODAS permite a los usuarios crear, cargar y editar una serie de páginas web HTML que se almacenará en Mis Objetos o en una colección durante
El módulo de texto plano es un sencillo editor. Al seleccionarlo en la caja de módulos, el área central adoptará al siguiente aspecto:
Plantilla de texto plano El módulo de texto plano es un sencillo editor. Al seleccionarlo en la caja de módulos, el área central adoptará al siguiente aspecto: Título: Es el título que aparecerá identificando
CREACION DE PÁGINAS WEB
PRESENTA: CREACION DE PÁGINAS WEB OBJETIVO Conocer la aplicación de los paquetes mas utilizados para la implementación t diseño de una pagina Web. DIRIGIDO A: Estudiantes de informática, Ofimática y Personas
HTML. HTML (HyperText Markup Language) Creado en 1989 por el físico nuclear TIM BERNERS- LEE
HTML HTML (HyperText Markup Language) Creado en 1989 por el físico nuclear TIM BERNERS- LEE Se elaboró un protocolo para soportar e envío de información por la red. HTTP (Hyper Text Transfer Protocol)
Tema 5. Estructuración de contenidos. ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda!
Tema 5. Estructuración de contenidos ETSI ICAI! Departamento de Sistemas Informáticos! Rafael Palacios Hielscher! Cristina Puente Águeda! Listas! Permiten enumerar una serie de contenidos. Todas ellas
Web. Microsoft Excel: Capítulo 1 Creación de páginas web con Dreamweaver
Web Microsoft Excel: Capítulo 1 Creación de páginas web con Dreamweaver Álvarez, S., Bravo, S., Departamento de Informática y automática Universidad de Salamanca Sumario 1. Qué es Dreamweaver? 2. El entorno
HTML, PHP y bases de datos
HTML, PHP y bases de datos Estrella Pulido Cañabate HTML Estructura de un documento HTML Zen and Tumbolia The Zen monk Bassui wrote a letter to one of his disciples
SPIP (v.1.8) Manual para redactores Alfredo Sánchez Alberca (asalber@ceu.es)
SPIP (v.1.8) Manual para redactores Alfredo Sánchez Alberca (asalber@ceu.es) 1. Arquitectura de SPIP SPIP es un sistema para la publicación digital de documentos en un sitio web. Tanto la creación de nuevos
ETIQUETAS HTML 5 Diseño de Sitios Web TUW
Etiqueta Descripción Define un comentario nueva nueva nueva nueva
5.- Crear páginas web con Nvu
5.- Crear páginas web con Nvu Nvu permite crear y publicar páginas web sin necesidad de tener conocimientos de HTML y de una forma tan sencilla como utilizar un procesador de textos. La barra de herramientas
En primer lugar necesitamos indicar el tipo de documento que estamos creando. Esto en HTML5 es extremadamente sencillo:
1 Estructura global Los documentos HTML se encuentran estrictamente organizados. Cada parte del documento está diferenciada, declarada y determinada por etiquetas específicas. En esta parte del capítulo
PROPÓSITOS. Tecnicatura en Informática Profesional y Personal [ 1 ]
![PROPÓSITOS. Tecnicatura en Informática Profesional y Personal [ 1 ]](/thumbs/87/95199557.jpg "PROPÓSITOS. Tecnicatura en Informática Profesional y Personal [ 1 ]")
PROPÓSITOS Unidad 1 Reconocer el funcionamiento de internet y sus características. Interpretar el concepto de ISP, HTTP y MySQL Reconocer y aplicar criterios de adaptación del ambiente de trabajo a las
EJEMPLO DE APERTURA Y CIERRE DE UNA ETIQUETA.
DOCUMENTOS HTML QUÉ SON? Los documentos HTML son archivos creados con etiquetas en lenguaje de hyper text markup language (lenguaje de hipertexto). Estos documentos son interpretados por los programas
ELABORACIÓN DE PÁGINAS WEB. CBTIS No. 02 ISC. RICARDO GARCÍA LÓPEZ
CBTIS No. 02 ISC. RICARDO GARCÍA LÓPEZ Página1 CREACIÓN DE LA BASE DE DATOS EN MySQL REGISTRO DE USUARIOS UTILIZANDO PHP CON MYSQL Una vez instalada nuestro servidor local de Apache, procedemos a crear
Unidad 1.- Fundamentos de sitios web. El lenguaje HTML. Desarrollo de aplicaciones Web. Felipe LC
Unidad 1.- Fundamentos de sitios web. El lenguaje HTML Desarrollo de aplicaciones Web. Felipe LC La actividad #1 En qué consistió la actividad 1? Qué conceptos aprendimos? Demos algunos ejemplos. Qué aprendimos
DISEÑOS DE PÁGINAS WEB CON N.V.U. E INICIACIÓN AL CÓDIGO HTML
DISEÑOS DE PÁGINAS WEB CON N.V.U. E INICIACIÓN AL CÓDIGO HTML Una página web es un documento escrito empleando un lenguaje denominado HTML (Hyper text Markup language; Lenguaje de marcas de hipertexto).
4.- Composer: Formato de párrafos, títulos y listas
4.- Composer: Formato de párrafos, títulos y listas 4.1 Antes de empezar Vamos a configurar el composer antes de empezar a trabajar con él, para ello nos vamos al menú Editar/Preferencias y seleccionamos
HTML INDICE: 1 Internet 2 Conceptos básicos 3 Estructura de un documento HTML 4 Dar formato a un documento 5 Listas 6 Imágenes
HTML INDICE: 1 Internet 1.1 Qué es Internet 1.2 Los comienzos de Internet 1.3 Aplicaciones que nos ofrece Internet 1.4 Qué es WWW 1.5 Servicios que nos ofrece WWW 1.6 Cuestionario: Internet 2 Conceptos
Formularios HTML. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014
Formularios HTML Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014 Declaración de un formulario Elemento clave para el desarrollo de aplicaciones
MANUAL JOOMLA. Antes de empezar a modificar la información debemos introducir una serie de datos para dejar la cuenta preconfigurada.
MANUAL JOOMLA Ingresar a : http://www.oceanperu.com CONFIGURACIÓN DE SU CUENTA Antes de empezar a modificar la información debemos introducir una serie de datos para dejar la cuenta preconfigurada. Para
DISEÑO Y DESARROLLO WEB CON HTML 5, CSS Y DREAMWEAVER CS4 OBRA COMPLETA 2 VOLÚMENES
DISEÑO Y DESARROLLO WEB CON HTML 5, CSS Y DREAMWEAVER CS4 OBRA COMPLETA 2 VOLÚMENES Objetivos Dotar al interesado de conocimientos teóricos y prácticos para poder desarrollar un sitio Web con HTML y aplicar
Taller de Paginas Web
Taller de Paginas Web Las páginas web son documentos de texto que se comparten en la red. La mecánica es la siguiente : Un ordenador de usuario, que llamarermos cliente, hace una petición a una direccion
Abril 2005. Jordi Llonch jordi@laigu.net. Basado en los cursos de: http://www.webestilo.com/html/ http://www.webestilo.com/css/
Abril 2005 Jordi Llonch jordi@laigu.net Basado en los cursos de: http://www.webestilo.com/html/ http://www.webestilo.com/css/ http://creativecommons.org/licenses/by-sa/2.0/ 2 Conceptos básicos World Wide
Adaptación al Ambiente de Trabajo Curso: 7mo año, Ciclo Superior Profesor: Quevedo, Alejandro Programa 2016
Adaptación al Ambiente Trabajo UNIDAD 1 Contenidos: Adaptación l ambiente trabajo. Propósitos Ejes Contenidos Reconocer el Internet. Concepto Internet Cómo funciona?, funcionamiento Características y Ergonomía,
Contenidos del Curso Avanzado de Informática Educativa
Programa Editor de Páginas Web FrontPage Unidad 1 Programa Editor de páginas Web: recursos Lenguaje HTML Hipertexto - Hipervínculos URL Home Page o Página de Inicio Apertura del Programa FrontPage Ventana
Curso de Técnico Superior Diseño Web Profesional con Dreamweaver CS6
Modalidad Curso de Técnico Superior Diseño Web Profesional con Dreamweaver CS6 cod / EU 0518 A Distancia Duración 300 Horas Objetivos Aportar al alumno todas las competencias y conocimientos necesarios
7.1 Estructura Básica de jas Tablas
Las tablas permiten representar los elementos de una página en filas y columnas separadas entre si. Es una herramienta muy útil para ordenar contenidos de distintas partes de nuestra página. Las tablas
Los formularios irán delimitados por las etiquetas <FORM> y </FORM>, la cual tiene dos parámetros:
Formularios en HTML Los formularios nos sirven para solicitar información al usuario y procesarla. El formulario se compondrá de diferentes componentes como campos de texto, botones de opción, listas desplegables,...
Creando un Sitio Web personal.
Creando un Sitio Web personal. FrontPage Express FrontPage Express de Microsoft es un sencillo editor htm 1 l que venía instalado por defecto con Windows 98 o con el Internet Explorer 4 para Windows 95.
HTML. El Lenguaje de Programación de Páginas Web. Iván Martínez Toro
HTML El Lenguaje de Programación de Páginas Web Iván Martínez Toro ÍNDICE DECONTENIDOS Introducción al HTML. Estructura general de una página: etiquetas HTML, HEAD y BODY. Dar título a la página con la
Imágenes y objetos IMÁGENES
IMÁGENES Y OBJETOS Imágenes y objetos 2 IMÁGENES Uno de los elementos más vistosos e importantes de las páginas web. Su introducción puede explicar de manera más fácil y agradable nuestra información al
A continuación se confeccionara un formulario para el ingreso de un nombre y un botón para el envío del dato ingresado al servidor:
FORMULARIOS BAJO HTML INTRODUCCION A FORMULARIOS Un formulario permite que el visitante al sitio cargue datos y sean enviados al servidor. Es el medio ideal para registrar comentarios del visitante sobre
HTML-5 / DIVS + IFRAMES. Prof: Moisés Mañas Moimacar@esc.upv.es
HTML-5 / DIVS + IFRAMES Prof: Moisés Mañas Moimacar@esc.upv.es Básico Define una división o sección en un documento Atributos: align= left/right/center/justify Alineación de la división
Páginas Web Barcelona
Páginas Web Barcelona Requisito previo: Todos los asistentes deben de tener previo conocimiento de las plataformas Macintosh o Windows. Se prefiere que los delegados tengan una experiencia básica en HTML
Programación de aplicaciones WEB
Programación de aplicaciones WEB Tecnologías del lado del del cliente 1 Tecnologías del lado del cliente Estructura HTML/XHTML Presentación Hojas de estilo (CSS) Comportamiento JavaScript 2 Introducción
TÉCNICO PROFESIONAL EN DISEÑO WEB PROFESIONAL CON DREAMWEAVER CS6
Modalidad: Distancia Duración: 77 Horas Objetivos: En la actualidad Dreamweaver es uno de los principales programas utilizados por los profesionales para el diseño y maquetación de páginas web. Estos materiales
Adobe Dreamweaver CS6 Mi Sitio Web
Adobe Dreamweaver CS6 Mi Sitio Web Mg. Carlos Antonio Huamán Terrazas. Presentación Una de las reglas que se debe respetar en la creación de un Sitio Web es ordenar lar páginas web y los archivos a utilizar
Laboratorio 6. Creación de sitios Web - Dreamweaver
UNIVERSIDAD CARLOS III DE MADRID. ESCUELA DE TURISMO. Informática aplicada al sector turístico Laboratorio 6. Creación de sitios Web - Dreamweaver El objetivo de este laboratorio es aprender a crear sitios
PROGRAMA: Diseño y desarrollo Web con HTML 5,
PROGRAMA: Diseño y desarrollo Web con HTML 5, CSS y Dreamweaver CS 4 Objetivos: Diseño y desarrollo Web con HTML 5 y CSS Dotar al alumno de conocimientos teóricos y prácticos para poder desarrollar un
Guía para crear, editar y eliminar páginas. WordPress Grupo Mutual
Guía para crear, editar y eliminar páginas WordPress Grupo Mutual Crear una nueva Página (1) 1. Ingresar a WordPress y acceder al panel de "Páginas": Crear una nueva Página (2) 2. Seleccionar uno de los
CURSO PÁGINAS WEB HTML: CÓDIGO EN EL EDITOR GEDIT
CURSO PÁGINAS WEB HTML: CÓDIGO EN EL EDITOR GEDIT Colegio Concertado Valdecás 1. Estructura de una página web a) Etiquetas de comienzo y fin del documento (etiqueta de entrada)... (etiqueta
Plantilla de texto plano
Plantilla de texto plano Esta es la plantilla seleccionada por defecto al crear una nueva página. Título: Es el título que aparecerá identificando a la página, así como en la cabecera del documento en
El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que
El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto en forma estructurada, y que está
Proyecto: Buscador de Películas usando XQuery y exist
Buscador de Películas usando XQuery y exist Arquitecturas de Altas Prestaciones Rafael Martos Llavero I. Objetivo del Proyecto. El objetivo del proyecto es la creación de una base de datos basada en XML
INTRODUCCIÓN A HTML. Qué es HTML. Etiquetas
INTRODUCCIÓN A HTML Qué es HTML El HTML (Hyper Text Markup Language) es el lenguaje con el que se escriben las páginas web. Es un lenguaje de hipertexto, es decir, un lenguaje que permite escribir texto
PROGRAMA FORMATIVO. Diseño y desarrollo web con HTML 5, CSS y Dreamweaver CS4 - Obra completa - 2 volúmenes
PROGRAMA FORMATIVO Diseño y desarrollo web con HTML 5, CSS y Dreamweaver CS4 - Obra completa - 2 volúmenes Sector: Desarrollo Web Multimedia Modalidad: Distancia Duración: Objetivos: Código: 4356 Dotar
Aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo.
Colores y fondos Aplicar colores y colores de fondo a tus sitios web. Examinaremos también métodos avanzados para posicionar y controlar imágenes de fondo. Color de primer plano: la propiedad 'color' La
HTML y XHTML. Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014
HTML y XHTML Desarrollo de Aplicaciones Web Departamento Informática y Sistemas Universidad de Murcia Curso 2013/2014 Etiquetas Contenido de una página web: Contenido (información). Instrucciones de estructura
Tutorial 1: Creación de páginas web con Editor HTML de OpenOffice
Tutorial 1: Creación de páginas web con Editor HTML de OpenOffice Nota: el propósito del curso no es aprender a elaborar páginas web complejas. Por eso, únicamente vamos a aprender a manejar ocho procedimientos:
EDUCASTUR BLOG. Comunidad Educativa de Blogs. Formatear el texto de un artículo
EDUCASTUR BLOG Comunidad Educativa de Blogs Formatear el texto de un artículo Formatear el texto de un artículo 2008. Educastur y Servicios en Línea. Consejería de Educación y Ciencia del Principado de
Tema 5: La red de redes: Internet
Tema 5: La red de redes: Internet > Qué es Internet? Todo el mundo habla de Internet: se hace referencia en clase, en revistas de moda, entre amigos... Acceder a una página web, hablar con los amigos a