Tema 1.1

Tema 1: HTML y CSS
Ms. Ing. Carlos Jara García

1. Introducción a HTML
2. Elementos de HTML
3. Listas y Tablas
4. Links e imágenes
5. Validar tu documento HTML
 HyperText Markup Language (HTML) es el
lenguaje de la web. Cuando tú vas a una
página web en tu navegador como Internet
Explorer, Firefox, or Safari, el browser
descarga y muestra HTML.
 Document types
◦ <!doctype html>  HTML5
 Un página web básica
<!doctype html>
<html>
<head>
<title>My First Document</title>
</head>
<body>
<div>My Web Page</div>
</body>
</html>
 Creando un buen HTML
◦ Las páginas web frecuentemente usan importantes
elementos de página, algunos llamados tags.
◦ La tabla 1-1 describe algunos de esos elementos:
 Colocando texto en una página
◦ <h1>, <h2>, <h6>, <p>, <span>, <div>
 Seleccionando elementos blobk-level o inline
◦ Block-level elements: Both <div> and <p> elements son
conocidos como block-level elements. Un elemento de nivel
de bloque se muestra en todo el ancho de la página; nada
puede aparecer junto a un elemento de nivel de bloque o
de lado largo. Básicamente, piense en los elementos a nivel
de bloque como si tuvieran un retorno de carro después de
ellos.
◦ Inline elements: Ciertos elementos, principalmente el
element <span>, son considerados inline elements, o que
significa que otros elementos pueden aparecer junto a
ellos. En otras palabras, los elementos en línea no tienen un
retorno de carro después de ellos.
 Insertando line break y spaces
<!doctype html>
<html>
<head>
</head>
<body>
<h1>My Web Page</h1>
<p>Welcome to my web page. Here you’ll find all sorts of
information about me.</p>
<h2>My Books</h2>
<p>You can find information on my books here as well.</p>
</body>
</html>
 Usando <br> para line break
<!doctype html>
<html>
<head>
</head>
<body>
<p>Welcome to my web page. Here you’ll find all sorts of
information
about me.</p>
<br>
<br>
<br>
<br>
<br>
<h2>My Books</h2>
<p>You can find information on my books here as well.</p>
</body>
</html>
 Agregando comentarios
<!doctype html>
<html>
<head>
</head>
<body>
<p>Welcome to my web page. Here you’ll find all
sorts of
information
about me.</p>

<h2>My Books</h2>
<p>You can find information on my books here as
well.</p>
</body>
</html>
 Agregando listas y tablas: HTML tiene tags
para crear entre listas y tablas. Lo puedes ver
en la tabla 1-2
 Incluyendo links e imágenes en tu página
◦ Los links son agregados con el elemento <a>, el
atributo “href” vincula al recurso destino, pudiendo
ser una página, un sitio web externo, un
documento o archivo. Cerramos el elemento con
</a>
◦ Links a otra página
◦ <p>Here’s a link to <a
href=”http://www.braingia.org”>Steve Suehring’s
site</a></p>
 Enlazando dentro de una página
◦ Algunas veces necesitarás dentro de una misma
página. Usted podría hacer esto en una página
particularmente larga, donde tiene una tabla de
contenido en la parte superior y a continuación, el
artículo completo más abajo en la página.
◦ La creación de enlaces en la página utiliza el mismo
elemento <a> que ha visto, este tiempo con el
atributo de nombre.
◦ Para abrir el link en una página en blanco usamos:
◦ El atributo target asignándole el valor _blank
 <a href=”http://www.braingia.org” target=”_blank”>
Steve Suehring’s site</a>
 Agregar imágenes
◦ Referenciando la ubicación de la imagen
 <img src=”images/books_mysqlbible.gif”>
◦ Atributo alt
 <img src=”images/books_mysqlbible.gif” alt=”MySQL
Bible”>
◦ También deberías considere la altura y el ancho de

la imagen, el tamaño del archivo y su formato.
◦ Los navegadores web pueden ver imágenes
formateadas en numerosos formatos, incluyendo
◦ JPG, GIF y PNG, así como varios otros.
◦ Cambiar el tamaño de las imágenes a menos de
100 kilobytes (KB) es importante. Otro aspecto
importante a considerar es la suma de todas las
imágenes en la página. Por ejemplo, si tiene 15
imágenes a 100KB cada una, entonces está
solicitando el visitante descargar imágenes por
valor de 1,5 MB, lo que probablemente sea
demasiado para muchos visitantes porque la página
parecerá lenta de cargar.
 Escribiendo HTML válido
◦ Cuando creas una página web con HTML, hay
ciertas reglas a seguir para asegurarse de que los
navegadores web puedan leer y mostrar la página
correctamente.
◦ El sitio web utilizado para validar HTML se llama la
validación de marcado W3C, Servicio
(frecuentemente llamado el Validador W3C) y es
operado por el World Consorcio Wide Web (W3C). El
validador W3C se encuentra en
http://validator.w3.org y es de uso gratuito.
 Escribiendo HTML válido
1. Introducción a CSS
2. Conectando CSS a una página web
3. Seleccionando elementos para el estilo
4. Cambiando fonts y agregando bordes
5. Agregando estilos de listas
6. Modificando Background
7. Trabajando con Layout
8. Agregando cabecera y pie de página
 CSS complementa a HTML al proporcionar
una apariencia a las páginas web. Las páginas
HTML que creó en la sección anterior
parecían bastante simples, con una fuente
por defecto y el tamaño de la fuente. Usando
CSS, puedes darle un toque especial a esa
apariencia, agregando Imágenes en color y
fondo, cambio de fuente y tamaño de fuente,
dibujo. Bordes alrededor de las áreas, e
incluso cambiando el diseño de la página en
sí.
 Limitaciones
◦ La principal limitación de CSS es que no todas las
webs, navegadores soportan CSS exactamente de la
misma manera. Un navegador puede interpretar su
diseño de una manera ligeramente diferente,
colocando elementos superiores o inferiores o en
un lugar completamente diferente.
 Se puede agregar CSSa una página de
diferentes maneras:
◦ Directly to an HTML element
◦ With an internal style sheet
◦ With an external style sheet
 La forma más reutilizable de agregar CSS a
una página es mediante una hoja de estilo
externo, pero lo más sencillo es agregar
información de estilo directamente en un
elemento.
 Usando hoja de estilo interna
◦ You add internal styles within the <head> portion of a web
page using the <style> element. Listing 2-1 shows HTML
with a <style> element.
 Usando hoja de estilo interna
◦ The page adds an internal style sheet to add a bold font to
<div> elements and an italic styled font to all <span>
elements in the page.
 Usando hoja de estilo externa
◦ Puede usar hojas de estilo externas para
compartir CSS entre varias páginas. Se puede
incluir una hoja de estilo externa, como otro tipo
de documento de texto, en cada página. El
navegador lee esta hoja de estilos externa del
mismo modo que leería los estilos aplicados
dentro de la propia página y los aplica en
consecuencia.
◦ Usted agrega o incluye una hoja de estilo externa
con el elemento <link>, que va en el área
<head> de una página HTML.
 Usando hoja de estilo externa
◦ Contenido del archivo style.css

 Targeting style
◦ CSS utiliza los selectores para determinar el
elemento o elementos a los que se aplicará una
regla.
 Selecting HTML elements
 Selecting individual element
◦ La Id(abreviatura de identificador) le permite
seleccionar uno y solo un elemento dentro de una
página.
◦ En el archivo de estilos se vería asociaría de esta

forma:
◦ Nota: el valor del id es case sensitive, debe de

coincidir tanto en el HTML como en el CSS.
 Selecting a group of elements
◦ Like an id, a class is applied first to the HTML
elements with an attribute.
◦ Tanto el Id como la clase son case sensitive la

clase también distingue entre mayúsculas y
minúsculas. El nombre utilizado en el HTML debe
coincidir con el declarado en el CSS.
 Estableciendo Font family
 Estableciendo Font size
◦ How large the text appears on a web page is its
font size. You can set font sizes using the
font-size CSS property. Font sizes can be
set in one of four units:
 Percentage
 Pixels
 Points
 Em’s
 Estableciendo Font size
◦ When using em’s for font sizes, an em value of 1.0

corresponds to 100%. Therefore, 0.9em would be
about 90%, while 1.7em (as in the example) is
essentially 170%.
 Estableciendo Font color
 En la tabla 2-1 podemos observar los colores

que podríamos aplicar
 Agregando bordes
◦ Cuando creamos un borde con CSS establecemos:
 Border thickness
 Border style
 Border color
◦ These three items are set in a list, separated by a
space, as in this example:
 border: 1px solid black;
 Agregando bordes
◦ Algunos estilos de borde podemos ver en la tabla
2-2
 Agregando estilo
◦ El estilo de lista está determinado por la propiedad
CSS list-style-type
 Agregando color de fondo
◦ Este es un ejemplo de cambiar el color de fondo
body {
background-color: #FFFF00;
}
 Agregando imagen de fondo

◦ Las imágenes de fondo aparecen detrás de otros
elementos. Esto significa que tu puede superponer
todo su HTML, incluidas otras imágenes, sobre un
fondo imagen.
background-image:url(“myImage.jpg”);
◦ Buscar imágenes en la red:

http://search.creativecommons.org
http://lorempixel.com
 Agregando imagen de fondo repetida
◦ Puedes usar una imagen que se repita, este es un
escenario común en páginas web
En este ejemplo se muestra una imagen pequeña back.jpg (15px por 15px) usada como una
imagen que se repite.
body {
background-image:url(“back.jpg”);
}
 En html se usa el elemento<div> como
contenedor. El contenedor El contenedor
ayuda a crear el diseño y no contiene ningún
contenido de texto propio. Podemos usar las
propiedades: Ancho(width), margen(margin) y
limpiar(clear). Así es como funcionan:
◦ Width: Establece el ancho horizontal de un
elemento. No importa cuán pequeña sea la ventana
del navegador, es decir, su HTML nunca será más
pequeño que el valor establecido.
◦ Margin: Este es el complemento a la propiedad de
relleno que se mostró anteriormente. Define el
espaciado en el exterior del elemento.
◦ En el caso de margin: 0 auto;
El valor "auto" significa que el navegador elije el
valor.
◦ En el caso de margin: 0px 50px 200px 300px;
es equivalente a:
margin-top: 0px;
margin-right: 50px;
margin-bottom: 200px;
margin-left: 300px;
 Modelo de caja
 Modelo de caja (Block)
 Colapso de margen
◦ Los márgenes Top y bottom de los bloques a veces están
combinados (colapsados) en un solo margen cuyo tamaño es el
mayor de los márgenes combinados, un comportamiento
conocido como colapso de margen.
 Colapso de margen
◦ Ten en cuenta que los márgenes de flotantes y
elementos con posición absoluta nunca colapsan.
 Modelo de caja (InLine)
 Modelo de caja (InLine)
 Posición relativa
 Posición absoluta
 Posición fija
 Float
 Los encabezados se utilizan generalmente
para transmitir información como el nombre
del sitio o para proporcionar un menú; pies
de página se utilizan para proporcionar
información adicional como los derechos de
autor y también se utilizan para proporcionar
un mapa de enlaces dentro de un sitio,
conocido como un mapa del sitio.

Tema 1.1

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Tema 1.1

Uploaded by

Copyright:

Available Formats

Tema 1: HTML y CSS

Ms. Ing. Carlos Jara García

◦ También deberías considere la altura y el ancho de

◦ Contenido del archivo style.css

◦ En el archivo de estilos se vería asociaría de esta

◦ Nota: el valor del id es case sensitive, debe de

◦ Tanto el Id como la clase son case sensitive la

◦ When using em’s for font sizes, an em value of 1.0

 En la tabla 2-1 podemos observar los colores

 Agregando imagen de fondo

◦ Buscar imágenes en la red:

You might also like