¿Supiste lo que acaba de lanzar LagriHost? Sí, como lo estabas esperando, ahora vendemos Web Hosting y Dominios. Conoce más :)


Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
[Diseño Web] 2.- Etiquetas y Comentarios
#1
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

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>
->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:
[Imagen: lVBeOwP.png]
♪Desde hoy las emisoras las detesto, por estar tocando cancioncitas de amor♫
♪ La television hace daño! que mueran las novelas de amor♫

#2
0
Bueno a mí me quedó así la tarea:

[Imagen: 169jbx2.jpg]

Sin embargo, el tercer color es distinto.

Capturé el color de la imagen que pusiste y vi el valor: #008000. Con ése sí queda como la captura que dejaste.

[Imagen: 14e5ds5.jpg]

Dejaré aquí el código con el último valor para que se vea igual a la captura que dejaste.

Código:
<html>
<head>
</head>
<body>
<div class="cabecera" style="background-color: red; width: 100px; height: 100px;"></div>
<div class="contenedor" style="background-color: yellow; width: 100px; height: 100px;"></div>
<div class="menu" style="background-color: #008000; width: 100px; height: 100px;"></div>
<div class="pie" style="background-color: blue; width: 100px; height: 100px;"></div>
</body>
</html>

Listo. Ya hice mi tarea. Sonrisa

#3
0
Excelente trabajo @Dark 20/20
♪Desde hoy las emisoras las detesto, por estar tocando cancioncitas de amor♫
♪ La television hace daño! que mueran las novelas de amor♫

#4
0
Excelente a ver que tenga tiempo hago el ejercicio, esperamos la tercera parte Sonreir
Reglas de LagriHost | WIKI/Ayuda-FAQ | Nuestro Equipo | Solicita tu Hosting en 7 Pasos
No doy soporte por MP! Para eso esta el foro Guiño


[Imagen: banner-colabora.gif][Imagen: 8mt2wBp.jpg]



Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  Etiquetas basicas de html torgar22 0 396 18-06-2015, 11:56 AM
Último mensaje: torgar22
  Etiquetas HTML5 ldavidl 8 978 28-10-2014, 06:21 PM
Último mensaje: jarcx9
  Tutorial [Diseño Web] 1.- Estructura Básica Eloy 12 1,698 22-08-2014, 01:42 AM
Último mensaje: Dark
  Tutorial Diseño Web [Introduccion] Eloy 7 895 15-08-2014, 01:01 AM
Último mensaje: Dark



Usuarios navegando en este tema:
1 invitado(s)


Forum software by © MyBB Theme © Kevinex & iAndrew 2018