SlideShare una empresa de Scribd logo
C O L E G I O B U C E R I A S
C O M P U T A C I Ó N
M A E S T R A : A Z U C E N A C E R V A N T E S
7 / M A Y O / 2 0 1 5
E S L I D A N I E L A C H Á V E Z
Códigos HTML
¿Qué es una fuente en código HTML?
 A la hora de crear páginas webs a veces nos encontramos limitados por
las tipografías o fuentes tipográficas que podemos utilizar en ellas, dado
que no todos los navegadores y sistemas operativos incluyen el mismo
número de fuentes, y las tipografías de los sistemas operativos no serán
las mismas.
Imaginanet(2011) Fuente en HTML
Recuperado 7/Mayo/2015
de: http://www.imaginanet.com/blog/como-utilizar-cualquier-fuente-tipografia-en-nuestra-pagina-web.html
Etiquetas para manipular el tamaño de letra
 Este tamaño puede ser absoluto o relativo. Si hablamos en términos
absolutos, existen 7 niveles de tamaño distintos numerados de 1 a 7 por
orden creciente. Elegiremos por tanto un valor size="1" para la letra
más pequeña o size="7" para la más grande.
<font size=4>Este texto es más grande</font>
Desarroweb(2001) Tamaño de letra
Recuperado 7/Mayo/2015
de: http://www.desarrolloweb.com/articulos/556.php
Etiquetas para generar encabezados
Puede que queramos empezar
nuestra web o nuestro texto
con un encabezado indicando
el título del artículo,
categoría, etc. Pues bien, para
escribir encabezados
disponemos de las etiquetas
<h>.
Esta etiqueta viene
acompañada de un número,
desde el 1 hasta el 6,
predefiniendo éstos el
tamaño del encabezado. Así,
<h1> sería el encabezado más
grande mientras que <h6>
sería el más pequeño.
aprendeaprogramar(2015) Etiquetas para
encabezado
Recuperado 7/Mayo/2015
Etiqueta Font Face
La marca FONT se emplea para formatear el tipo y tamaño
del texto en algunos puntos del documento específicos. La
marca FONT puede definir el tipo utilizado, así como su
tamaño y color.
Aquí tienes la sintaxis correcta de la marca:
<FONT FACE="arial" SIZE=5 COLOR=red>Tipo para formatear</FONT>
El atributo FACE="arial" indica el tipo que se
visualizará; SIZE=5 el tamaño del tipo, que puede
estar comprendido entre 1 y 7 (mayor dimensión
cuanto más cercano al 7); COLOR=red indica el
color del texto (que puede expresarse asimismo en
valores hexadecimales).
Htmlpoint(2006) Font face
Recuperado 7/Mayo/2015
de:
http://www.htmlpoint.com/g
uida/html_06.htm
¿Cómo manipular el color de fuente?
El color del texto puede ser definido mediante el atributo color. Cada color es
a su vez definido por un número hexadecimal que esta compuesto a su vez de
tres partes. Cada una de estas partes representa la contribución del rojo,
verde y azul al color en cuestión.
Desarrolloweb(2001) Color de fuente
Recuperado: 7/Mayo/2015
de:
http://www.desarrolloweb.com/articu
los/556.php
Etiqueta Marquee
La etiqueta marquee nos sirve para dar un efecto diferente a
los texto de nuestra página Web. Gracias a ella podemos
conseguir texto en movimiento. Para aplicar este efecto a los
textos, éstos deben estar dentro de la etiqueta marquee,
entre su inicio "<marquee>" y su cierre "</marquee>".
Hazunaweb( ) Etiqueta Marquee
Recuperado: 7/Mayo/2015
de: http://html.hazunaweb.com/116.php
Etiqueta para insertar una imágen
Una de las primeras cosas que debemos aprender del HTML es la
etiqueta <img> que funciona para colocar imágenes dentro de una
página web.
Para poner una imágen utilizamos el siguiente código:
<img src="imagenHTML.jpg">
Ejemplode( ) Imagenes en HTML
Recuperado 7/Mayo/2015
de: http://www.ejemplode.com/17-html/81-
ejemplo_de_como_colocar_imagenes_con_html.html
Manipular el ancho y alto de una imágen
Si queremos modificar el tamaño
deberemos de utilizar los atributos
HTML width y height, los cuales
nos permiten modificar el ancho y
el alto de la imagen
respectivamente. A estos atributos
les tendremos que dar unos
valores numéricos que indiquen el
valor en pixels que queremos
reflejar.
Función ALT
Entre comillas podremos escribir un texto que
se mostrará si la imagen no llega a cargar,
mientras se carga o, cuando visualizando ya la
imagen, pasamos el ratón por encima.
Aprende a programar ( ) Función ALT
Recuperado: 7/Mayo/2015
de:
http://www.aprenderaprogramar.com/index.ph
p?option=com_content&view=article&id=484:et
iquetas-html-basicas-imagenes-img-src-alt-
width-height-deprecated-border-align-rutas-
cu00714b&catid=69:tutorial-basico-
programador-web-html-desde-cero&Itemid=192

Más contenido relacionado

PPTX
Inf2_ p1 a_exc2_danna
PPTX
Inf2 p1 a_exc2_danna
PPTX
Inf2-exc-1-diego alvarez
PPTX
Exc2 inf a-alonsodueñas
DOCX
Colegio nacional nicoles esguerra
PPTX
Exc12 p1 b_ana gabriela ramos lozano
PDF
Webinar emBlue Agosto 2012 - ¿Cómo crear una correcta pieza de email marketing?
DOCX
paul walker nissa
Inf2_ p1 a_exc2_danna
Inf2 p1 a_exc2_danna
Inf2-exc-1-diego alvarez
Exc2 inf a-alonsodueñas
Colegio nacional nicoles esguerra
Exc12 p1 b_ana gabriela ramos lozano
Webinar emBlue Agosto 2012 - ¿Cómo crear una correcta pieza de email marketing?
paul walker nissa

La actualidad más candente (18)

DOCX
Paginaii
PPTX
HTML
PPTX
Inf1_P1b_Exc12_Celina_Valenzuela
PPT
Presentacinhtml 091121100213-phpapp02
PPTX
Creación de diapositivas con efectos especiales en power point
PPTX
periódico escolar
DOCX
Html basico
PDF
Primera clase de HTML
DOCX
Html archivo ((completo))
DOCX
Edificamosfuturo
ODP
Introduccion Xhtml
DOCX
Html00000
PDF
Insertar tu propio banner en el blog
PPTX
Creacion de diapositivas matias rogelio gastelum cota 2'01
PDF
HTML-Andrea Sofia
PDF
Inf2 p1 a_ejercicio2_estefaniaramirez
DOCX
Pagina web 2
PPTX
El mejor curso de html lección no.1
Paginaii
HTML
Inf1_P1b_Exc12_Celina_Valenzuela
Presentacinhtml 091121100213-phpapp02
Creación de diapositivas con efectos especiales en power point
periódico escolar
Html basico
Primera clase de HTML
Html archivo ((completo))
Edificamosfuturo
Introduccion Xhtml
Html00000
Insertar tu propio banner en el blog
Creacion de diapositivas matias rogelio gastelum cota 2'01
HTML-Andrea Sofia
Inf2 p1 a_ejercicio2_estefaniaramirez
Pagina web 2
El mejor curso de html lección no.1
Publicidad

Destacado (14)

PPTX
CODIGOS HTML
DOCX
Codigos HTML...paginas web
PPTX
Prueba parcial, Códigos html y creación de páginas web.
PPTX
Códigos html y creaciones de páginas web
PPT
Insertar códigos en html
PPTX
Códigos html y creación de paginas web
PPTX
Codigos html
DOC
Profile_Prakash
PDF
Las 10 claves para mejorar tu posicionamiento en buscadores - Mauro Xesteira
PPT
Etiquetas de imagen e hipervínculo
PPSX
Programación en html 5
PPTX
Enlaces o hipervínculos en HTML
PPT
Codigos HTML Continuación
PPT
Codigos HTML Lenguaje IV
CODIGOS HTML
Codigos HTML...paginas web
Prueba parcial, Códigos html y creación de páginas web.
Códigos html y creaciones de páginas web
Insertar códigos en html
Códigos html y creación de paginas web
Codigos html
Profile_Prakash
Las 10 claves para mejorar tu posicionamiento en buscadores - Mauro Xesteira
Etiquetas de imagen e hipervínculo
Programación en html 5
Enlaces o hipervínculos en HTML
Codigos HTML Continuación
Codigos HTML Lenguaje IV
Publicidad

Similar a CODIGOS HTML (20)

PPTX
HInf2 exc12 p1_a_unidad 3_html_jessica
PPTX
Victor machuca
PPTX
Exc12 unidad 3 html_mayrafranco
PPTX
Inf2 exc2 unidad3_p1_a_fridaleyva
PPTX
Exc12 unidad 3 html_mayrafranco
PPTX
Info p1 b_exce11_andrea salgado
PPTX
Inf2 exc12 p1_a_unidad 3_html_josue rodriguez
PPTX
Exc2 paolasolis comp1_a
PDF
Html- Andrea Sofia
PPTX
INF2_P1B_EXC2_KARINA SANDOVAL
PPTX
Codigos de html mitzi inf 1
PPTX
Inf1a _ex2_adilenecardenas
PDF
Guia de repaso html11
PPTX
Html – básico 1
PPTX
Producto 4
PPTX
PAGINA HTML
PPTX
PAGINA HTML
PPS
Html apunte 2
DOCX
HInf2 exc12 p1_a_unidad 3_html_jessica
Victor machuca
Exc12 unidad 3 html_mayrafranco
Inf2 exc2 unidad3_p1_a_fridaleyva
Exc12 unidad 3 html_mayrafranco
Info p1 b_exce11_andrea salgado
Inf2 exc12 p1_a_unidad 3_html_josue rodriguez
Exc2 paolasolis comp1_a
Html- Andrea Sofia
INF2_P1B_EXC2_KARINA SANDOVAL
Codigos de html mitzi inf 1
Inf1a _ex2_adilenecardenas
Guia de repaso html11
Html – básico 1
Producto 4
PAGINA HTML
PAGINA HTML
Html apunte 2

Último (20)

PDF
Teologia-Sistematica-Por-Lewis-Sperry-Chafer_060044.pdf
PDF
Guia de Tesis y Proyectos de Investigacion FS4 Ccesa007.pdf
PDF
Híper Mega Repaso Histológico Bloque 3.pdf
PDF
Unidad de Aprendizaje 5 de Matematica 1ro Secundaria Ccesa007.pdf
PDF
Gasista de unidades unifuncionales - pagina 23 en adelante.pdf
PDF
MATERIAL DIDÁCTICO 2023 SELECCIÓN 1_REFORZAMIENTO 1° BIMESTRE.pdf
DOCX
V UNIDAD - SEGUNDO GRADO. del mes de agosto
PDF
Tomo 1 de biologia gratis ultra plusenmas
PDF
COMPLETO__PROYECTO_VIVAN LOS NIÑOS Y SUS DERECHOS_EDUCADORASSOS.pdf
DOCX
PLAN DE AREA DE CIENCIAS SOCIALES TODOS LOS GRUPOS
DOCX
PLAN DE CASTELLANO 2021 actualizado a la normativa
PDF
TOMO II - LITERATURA.pd plusenmas ultras
PPTX
caso clínico iam clinica y semiología l3.pptx
DOCX
V UNIDAD - PRIMER GRADO. del mes de agosto
PDF
5°-UNIDAD 5 - 2025.pdf aprendizaje 5tooo
PDF
biología es un libro sobre casi todo el tema de biología
DOCX
PROYECTO DE APRENDIZAJE para la semana de fiestas patrias
PDF
DI, TEA, TDAH.pdf guía se secuencias didacticas
PDF
Romper el Circulo de la Creatividad - Colleen Hoover Ccesa007.pdf
PDF
PFB-MANUAL-PRUEBA-FUNCIONES-BASICAS-pdf.pdf
Teologia-Sistematica-Por-Lewis-Sperry-Chafer_060044.pdf
Guia de Tesis y Proyectos de Investigacion FS4 Ccesa007.pdf
Híper Mega Repaso Histológico Bloque 3.pdf
Unidad de Aprendizaje 5 de Matematica 1ro Secundaria Ccesa007.pdf
Gasista de unidades unifuncionales - pagina 23 en adelante.pdf
MATERIAL DIDÁCTICO 2023 SELECCIÓN 1_REFORZAMIENTO 1° BIMESTRE.pdf
V UNIDAD - SEGUNDO GRADO. del mes de agosto
Tomo 1 de biologia gratis ultra plusenmas
COMPLETO__PROYECTO_VIVAN LOS NIÑOS Y SUS DERECHOS_EDUCADORASSOS.pdf
PLAN DE AREA DE CIENCIAS SOCIALES TODOS LOS GRUPOS
PLAN DE CASTELLANO 2021 actualizado a la normativa
TOMO II - LITERATURA.pd plusenmas ultras
caso clínico iam clinica y semiología l3.pptx
V UNIDAD - PRIMER GRADO. del mes de agosto
5°-UNIDAD 5 - 2025.pdf aprendizaje 5tooo
biología es un libro sobre casi todo el tema de biología
PROYECTO DE APRENDIZAJE para la semana de fiestas patrias
DI, TEA, TDAH.pdf guía se secuencias didacticas
Romper el Circulo de la Creatividad - Colleen Hoover Ccesa007.pdf
PFB-MANUAL-PRUEBA-FUNCIONES-BASICAS-pdf.pdf

CODIGOS HTML

  • 1. C O L E G I O B U C E R I A S C O M P U T A C I Ó N M A E S T R A : A Z U C E N A C E R V A N T E S 7 / M A Y O / 2 0 1 5 E S L I D A N I E L A C H Á V E Z Códigos HTML
  • 2. ¿Qué es una fuente en código HTML?  A la hora de crear páginas webs a veces nos encontramos limitados por las tipografías o fuentes tipográficas que podemos utilizar en ellas, dado que no todos los navegadores y sistemas operativos incluyen el mismo número de fuentes, y las tipografías de los sistemas operativos no serán las mismas. Imaginanet(2011) Fuente en HTML Recuperado 7/Mayo/2015 de: http://www.imaginanet.com/blog/como-utilizar-cualquier-fuente-tipografia-en-nuestra-pagina-web.html
  • 3. Etiquetas para manipular el tamaño de letra  Este tamaño puede ser absoluto o relativo. Si hablamos en términos absolutos, existen 7 niveles de tamaño distintos numerados de 1 a 7 por orden creciente. Elegiremos por tanto un valor size="1" para la letra más pequeña o size="7" para la más grande. <font size=4>Este texto es más grande</font> Desarroweb(2001) Tamaño de letra Recuperado 7/Mayo/2015 de: http://www.desarrolloweb.com/articulos/556.php
  • 4. Etiquetas para generar encabezados Puede que queramos empezar nuestra web o nuestro texto con un encabezado indicando el título del artículo, categoría, etc. Pues bien, para escribir encabezados disponemos de las etiquetas <h>. Esta etiqueta viene acompañada de un número, desde el 1 hasta el 6, predefiniendo éstos el tamaño del encabezado. Así, <h1> sería el encabezado más grande mientras que <h6> sería el más pequeño. aprendeaprogramar(2015) Etiquetas para encabezado Recuperado 7/Mayo/2015
  • 5. Etiqueta Font Face La marca FONT se emplea para formatear el tipo y tamaño del texto en algunos puntos del documento específicos. La marca FONT puede definir el tipo utilizado, así como su tamaño y color. Aquí tienes la sintaxis correcta de la marca: <FONT FACE="arial" SIZE=5 COLOR=red>Tipo para formatear</FONT> El atributo FACE="arial" indica el tipo que se visualizará; SIZE=5 el tamaño del tipo, que puede estar comprendido entre 1 y 7 (mayor dimensión cuanto más cercano al 7); COLOR=red indica el color del texto (que puede expresarse asimismo en valores hexadecimales). Htmlpoint(2006) Font face Recuperado 7/Mayo/2015 de: http://www.htmlpoint.com/g uida/html_06.htm
  • 6. ¿Cómo manipular el color de fuente? El color del texto puede ser definido mediante el atributo color. Cada color es a su vez definido por un número hexadecimal que esta compuesto a su vez de tres partes. Cada una de estas partes representa la contribución del rojo, verde y azul al color en cuestión. Desarrolloweb(2001) Color de fuente Recuperado: 7/Mayo/2015 de: http://www.desarrolloweb.com/articu los/556.php
  • 7. Etiqueta Marquee La etiqueta marquee nos sirve para dar un efecto diferente a los texto de nuestra página Web. Gracias a ella podemos conseguir texto en movimiento. Para aplicar este efecto a los textos, éstos deben estar dentro de la etiqueta marquee, entre su inicio "<marquee>" y su cierre "</marquee>". Hazunaweb( ) Etiqueta Marquee Recuperado: 7/Mayo/2015 de: http://html.hazunaweb.com/116.php
  • 8. Etiqueta para insertar una imágen Una de las primeras cosas que debemos aprender del HTML es la etiqueta <img> que funciona para colocar imágenes dentro de una página web. Para poner una imágen utilizamos el siguiente código: <img src="imagenHTML.jpg"> Ejemplode( ) Imagenes en HTML Recuperado 7/Mayo/2015 de: http://www.ejemplode.com/17-html/81- ejemplo_de_como_colocar_imagenes_con_html.html
  • 9. Manipular el ancho y alto de una imágen Si queremos modificar el tamaño deberemos de utilizar los atributos HTML width y height, los cuales nos permiten modificar el ancho y el alto de la imagen respectivamente. A estos atributos les tendremos que dar unos valores numéricos que indiquen el valor en pixels que queremos reflejar.
  • 10. Función ALT Entre comillas podremos escribir un texto que se mostrará si la imagen no llega a cargar, mientras se carga o, cuando visualizando ya la imagen, pasamos el ratón por encima. Aprende a programar ( ) Función ALT Recuperado: 7/Mayo/2015 de: http://www.aprenderaprogramar.com/index.ph p?option=com_content&view=article&id=484:et iquetas-html-basicas-imagenes-img-src-alt- width-height-deprecated-border-align-rutas- cu00714b&catid=69:tutorial-basico- programador-web-html-desde-cero&Itemid=192