Embed Size (px)
Citation preview
NTIC’S IINOMBRE: BYRON JIMENEZSEGUNDO A-S
TUTORIAL DE HTML
¿Qué son los archivos HTML?HTML (HyperText Markup Language) o "Lenguaje para Marcado de Hipertexto".Los archivos HTML deben tener una extensión htm o html.Para crear un archivo HTML solo hace falta un editor de texto.Un archivo HTML está compuesto por etiquetas.Las etiquetas le dicen al navegador(Ej: Internet Explorer, Firefox, Mozilla, etc.) como mostrar la página.
Si estás usando Windows, abre el "Block de Notas".Si usas Mac, abre "Simpletext".
Escribe en el mismo, el siguiente texto:
<html><head><title>Mi primera página Web</title></head>
<body>Hola a todos.</body></html>
Guarda el archivo como "pagina1.html" (las extensiones ".htm" o ".html" tienen el mismo significado y nos indican que se trata de un archivo HTML).
Abre el navegador Internet(Internet Explorer, Firefox, Opera, etc.).Selecciona "File" y luego "Open".Se abrirá una ventana, selecciona "Browse" y ubica el archivo que acabas de guardar -"pagina1.html"- elígelo y presiona "Open".Ahora tú ves la dirección, por ejemplo "C:\My Documents\pagina1.html". Presiona "OK" y el navegador mostrará la página.
Expliquemos el ejemplo<html> --> Indica al navegador que abre un archivo HTML.<head> --> Apertura de la cabecera del documento. Sección que no se muestra en la pantalla.<title>Mi primera página Web</title> --> Título de la página.</head> --> Cierre de la cabecera del documento.
<body> --> Apertura del cuerpo del documento. Esta sección aparece en la pantalla.Hola a todos. --> Texto que va a ser mostrado por el navegador.</body> --> Cierre del cuerpo del documento.</html> --> Cierre del archivo HTML
HeadingsNos definen el tamaño de un título o cabecera.
<h1> nos dá el tipo de letra más grande.<h6> nos dá el tipo de letra más pequeño.HTML agrega automaticamente un espacio antes y después de cada título.
<h1> al ser usado como título de una página Web, es de suma importancia ya que es uno de los parámetros que Google tiene en cuenta, a la hora de indexar su sitio.
Código
<html><head><title>Headings</title></head>
<body><h1>Heading 1</h1><h2>Heading 2</h2><h3>Heading 3</h3><h4>Heading 4</h4><h5>Heading 5</h5><h6>Heading 6</h6></body></html>
Resultado Heading 1Heading 2Heading 3Heading 4Heading 5Heading 6
Etiqueta Se ve•<B>Texto en Negrita</b>•<I>Itálica</i>•<B><I>Negrita e Itálica</i></b>•<U>Subrayado</u>•<EM>Enfatizado</em>•<STRONG>Fuerte</strong>•<CODE>Code Texto</code>•<CITE> Citation Text</cite>•<KBD>Keyboard Text</kbd>•<SAMP>Sample Text</samp>•<TT>Teletype Text</tt>•<VAR>Variable Element Text</var>•<BIG>Texto grande</big>•<SMALL>Texto pequeño</small>•<SUB>Subindice</SUB> •<SUP>Superíndice</SUP> •<BLINK> Texto intermitente</blink> •<STRIKE>Texto tachado</STRIKE>
•Texto en Negrita•Itálica•Negrita e Itálica•Subrayado Solo Explorer •Enfatizado •Fuerte•Code Texto •Citation Text •Keyboard Text •Sample Text •Teletype Text •Variable Element Text •Texto grande•Texto pequeño •Subíndice Solo Explorer •Superíndice Solo Explorer •Texto intermitente Solo Netscape •Texto tachado
Estilos de fuentes
Como ves en la tabla es muy sencillo conseguir los efectos deseados, solamente tienes que colocar el texto entre las etiquetas adecuadas.
Tamaño de fuentesEl tamaño de las fuentes se puede especificar de dos maneras, una de ellas por medio de un número del 1 al 7 (de más pequeño a más grande) del siguiente modo<font size=1> Esta es la letra más pequeña que se puede conseguir </font>que se verá comoEsta es la letra más pequeña que se puede conseguirOtra forma es por medio de una referencia relativa:<font size="+1"> Esto es igual que poner size=4 </font>que se ve comoEsto es igual que poner size=4El tamaño por defecto es el 3
Tipos de fuentesEl tipo de fuente es un atributo de FONT y tiene la siguiente sintaxis<font face="Courier">Eso se verá en la fuente Courier</font>que se ve como:Eso se verá en la fuente CourierColor de las fuentesEs otro atributo de FONT. Mira en la página de colores para saber cómo se especifican los colores. La sintaxis es la siguiente:<font size=2 face="MS Sans Serif" color="navy">Como ves se pueden poner varios atributos separados por un espacio</font>que se verá así:Como ves se pueden poner varios atributos separados por un espacio
Párrafos y bloquesPara definir y separar bloques de texto se emplean una serie de etiquetas que definen los párrafos, texto preformateado o bloques con significado especial como direcciones o citas. Etiquetas de bloques: <P> Se utiliza para que los párrafos queden separados por una línea en blanco. Si solo quieres escribir un punto y aparte debes usar <BR>. Las marcas inicial y final son <P> y </P>. La etiqueta <P> admite los atributos:ALIGN="left" , ALIGN="right" , ALIGN="center" y ALIGN="justify" para alinearlo a la izquierda, a la derecha, centrarlo o justificarlo totalmente. Por defecto está alineado a la izquierda.
<PRE> El texto insertado entre las marcas <PRE> y </PRE> será visualizado por el navegador respetando el formato con el que fue escrito en el fichero fuente HTML. Esta etiqueta es muy útil para escribir más de un espacio o para hacer pequeñas tablas<ADDRESS> empleada para indicar que un texto representauna dirección o una firma. Generalmente se presenta en cursiva y tabulado.<BLOCKQUOTE> Se representa con tabulaciones a la izquierda y derecha. Toda los párrafos de esta página están entre las etiquetas <BLOCKQUOTE> y </BLOCKQUOTE>, de ese modo se consigue que el texto se presente con márgenes a ambos lados.
<BR> Este elemento sólo tiene marca inicial e indica un salto de línea, es decir un punto y aparte sin separar el párrafo. Esta etiqueta no tiene su correspondiente de cierre<HR> Se emplea para representar una línea horizontal. Tampoco tiene pareja de cierre. Se pueden emplear los atributos ALIGN="left" , ALIGN="right" , para alinearla a la izquierda o a la derecha. Por defecto aparece centradaWIDTH="66%" SIZE="3", para especificar el ancho en % y el alto en píxelsCOLOR="#0000FF" , para especificar el color
![cQl@ll 1IITn]@ll - CGIAR](https://img.pdfslide.tips/doc/110x75/6198a916b87c36391649b004/cqlll-1iitnll-cgiar.jpg)
