0
Para bien html nos sirve para la maquetacion de paginas webs como bien ya sabemos, ahora les vengo a mostrar el uso de las etiquetas mas usuales en html, aunque todas son usuales pero les quiero hacer investigar a ustedes un poco para ver si están al tanto del desarrollo del curso...
Como bien sabemos, las paginas webs estan diseñadas de manera de secciones las cuales conocemos en el tema anterior [Diseño Web] 1.- Estructura Basica.
Iniciando la creacion de estructuras principales (Header = Cabecera), (Content=Contenido) y el (Footer = Pie de pagina) como comunmente existen en la mayoria de las paginas webs
entonces iniciamos creando nuestra estructura basica
Aqui lo que hago es crear 3 secciones previamente descritas arriba cabecera, contenido y footer o pie de pagina, guardo mi codigo en un bloc de notas y lo ejecuto en mi navegador (No me muestra Nada!) Por supuesto que no mostrara nada, ya que no le definimos a cada seccion algun diseño respectivo para diferenciarlo de otro.
Como visualizo cada seccion en mi pagina web?
Muy facil, recordemos que toda pagina web debe de llevar css, podemos incluir css dentro del mismo codigo html o dentro de las mismas etiquetas de nuestras secciones de esta manera:
Aqui le estamos dando estilo al body de color rojo ("Todas las etiquetas deben de ir en colores Hexadecimales o en colores escritos en ingles")
Intentenlo!
Siguiendo con el tema...
Para poder hacerle mantenimiento a nuestra pagina web es muy importante que cuando vayamos realizando nuestro código vayamos definiendo mediante algún comentario nuestro codigo para poder saber que significa, con el fin de poder ayudar a otros diseñadores por si quieren realizarle alguna modificacion.
Los Comentarios no podran ser vistos por nuestro navegador ya que no los toma en cuenta...
La manera para realizar comentarios dentro de nuestro codigo html es:
<!-- Comentario >
Ejemplo:
Lista de Algunas etiquetas HTML:
->Tamaños Estandar
con estas pocas etiquetas logre maquetar la plantilla que llego desarrollando Agregandole Css que lo veremos mas adelante
Proyecto Xtremehost
Ayuda: Para agregarle estilo dentro de una etiqueta div la agregan mediante el atributo style:
Ejemplo:
<div class="Id de la etiqueta" style="atributos del dv separados por ;"></div>
<div class="header" style="background-color: red; width: 100px; height: 100px;"></div>
Tarea:
1. Maquetar una pagina web con las siguientes secciones:
- Cabecera
Atributos:
1. Color de fondo: rojo
2. alto: 100px
3. ancho: 100px
- Contenedor
Atributos:
1. Color de fondo: amarillo
2. alto: 100px
3. ancho: 100px
- Pie de pagina
Atributos:
1. Color de fondo: azul
2. alto: 100px
3. ancho: 100px
- Menú de Navegación
Atributos:
1. Color de fondo: #ccff00
2. alto: 100px
3. ancho: 100px
2. Investigar algunas Etiquetas Adicionales usadas frecuentemente en el html.
Dudas Publicarlas por aca.
Un Saludo...
Asi les deberia de quedar la tarea Nº1:
Como bien sabemos, las paginas webs estan diseñadas de manera de secciones las cuales conocemos en el tema anterior [Diseño Web] 1.- Estructura Basica.
Iniciando la creacion de estructuras principales (Header = Cabecera), (Content=Contenido) y el (Footer = Pie de pagina) como comunmente existen en la mayoria de las paginas webs
entonces iniciamos creando nuestra estructura basica
Código:
<html>
<head>
< Aqui van nuestra MetaData> Pronto les explicare
</head>
<body>
<div class="header"></div>
<div class="Contenido"></div>
<div class="footer"></div>
</body>
</html>
Aqui lo que hago es crear 3 secciones previamente descritas arriba cabecera, contenido y footer o pie de pagina, guardo mi codigo en un bloc de notas y lo ejecuto en mi navegador (No me muestra Nada!) Por supuesto que no mostrara nada, ya que no le definimos a cada seccion algun diseño respectivo para diferenciarlo de otro.
Como visualizo cada seccion en mi pagina web?
Muy facil, recordemos que toda pagina web debe de llevar css, podemos incluir css dentro del mismo codigo html o dentro de las mismas etiquetas de nuestras secciones de esta manera:
Código:
<body style="background-color: red;"></body>
Aqui le estamos dando estilo al body de color rojo ("Todas las etiquetas deben de ir en colores Hexadecimales o en colores escritos en ingles")
Intentenlo!
Siguiendo con el tema...
Para poder hacerle mantenimiento a nuestra pagina web es muy importante que cuando vayamos realizando nuestro código vayamos definiendo mediante algún comentario nuestro codigo para poder saber que significa, con el fin de poder ayudar a otros diseñadores por si quieren realizarle alguna modificacion.
Los Comentarios no podran ser vistos por nuestro navegador ya que no los toma en cuenta...
La manera para realizar comentarios dentro de nuestro codigo html es:
<!-- Comentario >
Ejemplo:
Código:
<html>
<head>
<!-- Aqui van nuestra MetaData> -> Esto es un Comentario
</head>
<body>
<div class="header"></div>
<div class="Contenido"></div>
<div class="footer"></div>
</body>
</html>
Lista de Algunas etiquetas HTML:
Código:
<html></html> -> Inicio de nuestra Pagina
<head></head> -> Cabecera con Metadata
<title></title> -> Titulo de nuestra Pagina web Dentro de cabecera metadata
<body></body> -> Cuerpo de nuestra Pagina
<div></div> -> Seccion de nuestra pagina
<ol></ol> -> Lista Ordenada
<ul></ul> -> Lista No Ordenada
<li></li> -> Elementos de Lista Ordenada/No Ordenada
<p></p> -> Parrafos de nuestra pagina
<br /> -> Etiqueta Especial Espacio horizontal en blanco transparente
<h1></h1> -> Tamaños Estandar de tipos de letras
<h2></h2> ... <h6></h6>
con estas pocas etiquetas logre maquetar la plantilla que llego desarrollando Agregandole Css que lo veremos mas adelante
Proyecto Xtremehost
Ayuda: Para agregarle estilo dentro de una etiqueta div la agregan mediante el atributo style:
Ejemplo:
<div class="Id de la etiqueta" style="atributos del dv separados por ;"></div>
<div class="header" style="background-color: red; width: 100px; height: 100px;"></div>
Tarea:
1. Maquetar una pagina web con las siguientes secciones:
- Cabecera
Atributos:
1. Color de fondo: rojo
2. alto: 100px
3. ancho: 100px
- Contenedor
Atributos:
1. Color de fondo: amarillo
2. alto: 100px
3. ancho: 100px
- Pie de pagina
Atributos:
1. Color de fondo: azul
2. alto: 100px
3. ancho: 100px
- Menú de Navegación
Atributos:
1. Color de fondo: #ccff00
2. alto: 100px
3. ancho: 100px
2. Investigar algunas Etiquetas Adicionales usadas frecuentemente en el html.
Dudas Publicarlas por aca.
Un Saludo...
Asi les deberia de quedar la tarea Nº1:
♪Desde hoy las emisoras las detesto, por estar tocando cancioncitas de amor♫
♪ La television hace daño! que mueran las novelas de amor♫
♪ La television hace daño! que mueran las novelas de amor♫