Scribd
Cargar
7 vistas5 páginas

Teoria

HTML es el lenguaje de marcado utilizado para crear páginas web y asegurar su compatibilidad en diversos navegadores. Se compone de etiquetas que definen la estructura y presentación del contenido, y se pueden utilizar editores específicos para facilitar su creación. Además, se abordan conceptos como hiperenlaces, tablas y marcos, junto con sus atributos y ejemplos de uso.

Cargado por

Damaris Hernandez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como TXT, PDF, TXT o lee en línea desde Scribd
7 vistas5 páginas

Teoria

HTML es el lenguaje de marcado utilizado para crear páginas web y asegurar su compatibilidad en diversos navegadores. Se compone de etiquetas que definen la estructura y presentación del contenido, y se pueden utilizar editores específicos para facilitar su creación. Además, se abordan conceptos como hiperenlaces, tablas y marcos, junto con sus atributos y ejemplos de uso.

Cargado por

Damaris Hernandez
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como TXT, PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 5

HTML

¿Qué es html?
HTML, siglas en inglés de HyperText Markup Language (‘lenguaje de marcado de
hipertexto’), hace referencia al lenguaje de marcado para la elaboración de
páginas web.

¿Qué es la compatibilidad web?


Que una web sea compatible con todos los navegadores significa que se vea igual (o
muy similar) en todos ellos.

Obviamente esto es bastante complicado, podremos estar satisfechos si conseguimos


que se vea igual de bien en los más importantes, como Chrome Explorer, Firefox,
Opera, Safari y Mozilla.

Si consigues que se vea bien en estos 5, conseguirás que el 99% de tus usuarios vea
correctamente tu web.

TAREA No. 1
Investigue 10 navegadores compatibles con HTML.
Unicamente debe colocar la imagen(recorte) y el nombre del navegador.
Todo debe de ir en una sola hoja en el cuaderno.

¿Editores de html?
Es un software para editar y crear código HTML que se utiliza para sitios web
u otros documentos web. Con los editores HTML basados en texto, el código fuente
puede ser editado directamente. Los editores WYSIWYG muestran el documento que
se va a editar de la misma manera que se mostrará en el navegador más tarde.
Los editores HTML suelen formar parte de un entorno de desarrollo integrado.
Ejemplos:
1. Atom
2. Notepad++
3. Sublime Text
4. Adobe Dreamweaver CC
5. Visual Studio Code

TAREA No. 2
Investigue 10 editores de HTML.
Unicamente debe colocar la imagen(recorte) y el nombre del editor de HTML.
Todo debe de ir en una sola hoja en el cuaderno.

Cuando escribes código en HTML, estás escribiendo etiquetas HTML.


Todas las etiquetas HTML están hechas con un número de partes específicas,
incluyendo:
1. El carácter “menor que” <
2. Una palabra o carácter que determina qué etiqueta se está escribiendo
Cualquier número de atributos HTML que se quiera usar, escritos de la forma nombre
=”valor”
3. El carácter “mayor que” >

Las etiquetas HTML son fragmentos de código que permiten crear elementos HTML,
estructuras básicas del lenguaje de programación HTML en el que se escriben
las páginas web porque es el que entienden los navegadores.

Los atributos son la forma que tienen los autores de definir propiedades para un
elemento. Estas propiedades habitualmente cambian la forma en que los navegadores
interpretan al elemento, al cambiar su significado o presentación.
Por ejemplo, el elemento a inserta un vínculo en el documento, pero el atributo
rel indica la relación entre el documento actual (el que contiene al vínculo) y
el recurso de destino (al cual el vínculo está apuntando).
Comando son las instrucciones ejecutadas por un atributo, osea las que definen en
si la caracteristica a utilizar.

Para guardar una pagina web se utilizan las extensiones:


nombre_documento.html
nombre_documento.htm

Para abrir una etiqueta utilizamos <nombre_etiqueta>


Para cerrar una etiqueta utilizamos </nombre_etiqueta>

<html> nos permite abrir una pagina web.


</html> nos permite cerrar una pagina web.
<head> nos permite la cabecera de una pagina web.
</head> nos permite cerrar la cabecera de una pagina web.
<title> nos permite abrir el titulo de una pagina web.
</title> nos permite cerrar el titulo de una pagina web.
<body> nos permite abrir el cuerpo de una pagina web. En ella escribimos todo
lo que deseamos ver en la pagina web.
</body> nos permite cerrar el cuerpo de una pagina web.
La etiqueta body utiliza 2 atributos:
1. bgcolor: nos permite definir un color de fondo. Utiliza los colores en
hexadecimal.
Ejemplo:
bgcolor="#990000"
Tarea Busque una tabla de colores en internet que sea en valores hexadecimal
y pegue en su cuaderno.
2. background: nos permite definir una imagen de fondo en la pagina web.
Ejemplo:
Se puede llamar la imagen desde la direccion exacta.
background="C:\Users\SERVIDOR-SIMEON\Downloads\descarga.jpg"

Se puede llamar solo escribiendo el nombre de la imagen y su extension.


Con la condicion que la imagen debe de estar guardada en el mismo lugar
donde se guarde la pagina web.
background="perro.jpg"

<htlm> </html>
<head> </head>
<title> </title>
<body> </body>

estructura basica de un programa

<hmtl>
<head>
<title></title>
</head>
<body>
</body>
</html>

<font> nos permite agregarle caracteristicas a un parrafo.


</font> nos permite cerrar las caracteristicas agregadas a un parrafo.
La etiqueta font tiene 3 atributos:
1. size: nos permite definir el tamaño del texto.
Ejemplo:
size="12"
2. color: nos permite definir el color del texto.
Ejemplo:
color="#009900"
3. face:nos permite definir el tipo de letra. Este atributo detecta todos los
tipos de letras que hay en word.
Ejemplo:
face="arial"

<br> nos permite dar un salto de linea y no tiene etiqueta de cierre.

Marquesinas:
<marquee> nos permite abrir una marquesina. (una marquesina es un recuado donde
hay un objeto en movimiento).
</marquee> nos permite cerrar una marquesina.
La etiqueta marquee tiene 3 atributos:
1. behavior: nos permite que el objeto se pueda mover.
Tiene 3 comandos:
a. alternate: permite que el objeto rebote de un lado hacia otro.
b. slide: permite que el objeto pase una sola vez y luego se quede estatico.
c. scroll: permite que el objeto pase de forma circular, osea entra de un lado y
sale del otro.
Ejemplo:
behavior="alternate"
behavior="slide"
behavior="scroll"
2. direction: nos permite decidir en donde empezara a moverse el objeto.
Tiene 4 comandos:
a. up
b. down
c. left
d.right
Ejemplo:
direction="left"
direction="down"
3. bgcolor: nos permite colocar color de fondo a la marquesina.
Ejemplo:
bgcolor="#aa9900"

Imagenes
<img> nos permite mandar a llamar una imagen y no tiene etiqueta de cierre
Atributos:
src: nos permite mandar a llamar una imagen. (extension .jpg - .png - .gif)
Ejemplo:
src="C:\Users\SERVIDOR-SIMEON\Downloads\perro.png"
src="gato.jpg" (con la condicion que la imagen debe de estar guardada donde se
guardo la pagina web.)
border: nos permite agregar border y definir el grosor del borde de la imagen.
Ejemplo: border="5"
width: nos permite definir el ancho de una imagen.
Ejemplo: width="200"
height: nos permite definir el alto de una imagen.
Ejemplo: height="200"

Hiperenlaces o Archivos de descarga


Hiperenlace: es una direccion de internet.
<a> nos permite abrir un hiperenlace o archivo de descarga.
</a> nos permite cerrar un hiperenlace o archivo de descarga.
href: nos permite mandar a llamar un hiperenlace o archivo de descarga.
Ejemplo:
href="http:www.google.com/"
href="http:www.facebook.com/"
href="http:www.youtube.com/"
href="C:\Users\SERVIDOR-SIMEON\Downloads\historia.docx"
href="ley.pdf" (con la condicion que la imagen debe de estar guardada donde se
guardo la pagina web.)
target: nos permite indicar donde se abrira un hiperenlace.
Tiene 4 destinos de enlace
1. _self: permite abrir el hiperenlace en el mismo lugar donde nos encontramos. y
lo traen por defecto todas las paginas web.
2. _blank: nos permite abrir el hiperenlace en una pestaña nueva del navegador.
3. _top: nos permite abrir el hiperenlace en la pantalla completa del navegador.
4. _parent: nos permite abrir el hiperenlace en un marco especifico del navegador.
Ejemplo:
target="_top"
target="_blank"

Tablas
<table> nos permite abrir una tabla.
</table> nos permite cerrar una tabla.
Atributos:
border: nos permite definir el grosor del borde de la tabla.
Ejemplo: border="5"
width: nos permite definir el ancho de la tabla.
Ejemple width="75%"
height: nos permite definir el alto de una tabla.
Ejemplo: height="75%"

La etiqueta <table> tiene dos etiquetas dentro de su estructura.


<tr> nos permite abrir una fila.
</tr> nos permite cerrar una fila.
<td> nos permite abrir una columna.
</td> nos permite cerrar una columna.
Atributos:
colspan: nos permite unir columnas.
rowspan: nos permite unir filas.

Marcos
<frameset> nos permite abrir un marco, esta etiqueta sustituye el body y la pagina
se guarda con el nombre Index.html
</frameset> nos permite cerrar un marco.
Atributos:
frameborder: nos permite definir si deseamos bordes o no. Comandos yes | no.
Ejemplo: frameborder="yes"
border: nos permite definir el grosor del border del marco.
Ejemplo: border="5"
bordercolor: nos permite definir el color del borde del marco.
Ejemplo: bordercolor="#990000"
framespacing: nos permite definir la anchura del borde de cada marco.
Ejemplo: framespacing="10"
Los siguientes ejemplos nos permite agregar columnas y filas
cols: nos permite agregar columnas.
rows: nos permite agregar filas.
*: toma por defecto lo que sobre en una division o divide en partes iguales.
cols="800,200"
cols="150,*"
cols="*,*,*"
cols="150,*,150"
rows="800,200"
rows="150,*"
rows="*,*,*"
rows="150,*,150"

La etiqueta <frameset> tiene una etique dentro de su estructura


<frame> nos permite llamar un documento HTML en un marco especifico. Y no tiene
etiqueta de cierre.
Atributos:
marginwidth: nos permite definir la separacion entre el borde del frame y el
contenido hacia lo ancho.
Ejemplo: marginwidth="5"
marginheight: nos permite definir la separacion entre el borde del frame y el
contenido hacia lo alto.
Ejemplo: marginheight="5"
scrolling: nos permite definir una barra de desplazamiento y tiene 3 comandos yes |
no | auto
Ejemplo: scrolling="auto"
noresize: nos permite inmovilizar las divisiones de los macos.
frameborder: nos permite definir si deseamos bordes o no. Comandos yes | no.
Ejemplo: frameborder="no"
bordercolor: nos permite definir el color del borde del marco.
Ejemplo: bordercolor="#990000"
src: nos permite mandar a llamar una pagina web.
Ejemplo: src="ejemplo5.html"
name: nos permite asignarle un nombre al frame.
Ejemplo: name="ejemplo5"

También podría gustarte