Servicios Web

PRACTICA 001: CREAR UNA PAGINA WEB CON HTML5

Ing. Honoria Reyes Macedo

IDE: Dreamweaver, Atom o Block de notas
Lenguaje de paginas ESTATICAS: HTML(HyperText Markup Language)

Lenguaje de Estilos CSS3(Cascade Style Sheets) Para darle un aspecto visual.

INTRODUCCION

a) El lenguaje html esta definido por el uso de etiquetas e identificadores(body, head, div, input, p, a, li…).

Evoluciona a HTML5 y agrega nuevas etiquetas de agrupación:

section, header, nav, footer, article, figure, figcaption, hgroup

b) Se apoya de las hojas en cascada CSS y CSS3 que lleva un orden en el uso de sus estilos

* Primero Usar comodin *, para html y body

* A continuacion estilizar etiquetas de html

* Estilizar para identificadores id ( #nombre-id ), à en html con id="nombre-id"

* Estilizar para identificadores clase ( .nombre-clase ), à en html con class="nombre-clase"

* Ordenar los atributos alfabéticamente Ejemplo

#nombre-id { atributo1:valorf;

atributo2:valork;}

* Usar Unidades absolutas px, pt

* Usar Unidades relativas %, em (Recomendadas para paginas Responsive)

Existen generadores de estilos css3

http://css3generator.com/

CSS3 Maker

Colorful CSS Gradient Background Generator

Ultimate CSS Gradient Generator

Wait! Animate

CSS Keyframes Animation Generator

c) Se apoya en lenguajes de programación para que sus paginas sean DINAMICAS

- java script

- TypeScript

- php

- .net

- Python

d) Utiliza internet para su ejecución apoyándose en el protocolo HTTP

ACTIVIDADES

1.- Paso 1. Crear Un prototipo de interfaz. Crear un archivo inicio.html en una carpeta “paginaWeb”

* El tema a escoger sera por cada alumno

1.1 Utilizar las siguientes etiquetas para definir las secciones o cajas:

section, aside, article, figcaption, figure, footer, header, hgroup, nav.

Buscar en internet y observar: “ejemplo de estructura de html5”

Ejemplo:

inicio.html quedaría así con este ejemplo, pero todavia sin estilos

Cada alumno tendrá sus propias divisiones

2.- Crear un archivo miestilo.css (cascading style sheets) en una carpeta llamada “css” dentro de la carpeta “paginaWeb”, para separar los estilos de la estructura html. . (Tambien puedes crear una carpeta img para las imágenes a ocupar)

2.1 El primer contenido de miestilo.css debera indicar los valores iniciales:

2.2 Agregar las siguientes línea al archivo inicio.html

dentro de la etiqueta <head>

<link rel="stylesheet" href="css/miestilo.css" />

2.3 Agregar el borde que nos permitirá ver la posición de cada etiqueta (Al final se la pueeden quitar)

Al probar inicio.html (Con doble click) àen el navegador se mostrara asi:

Cada alumno tendra su propia estructura

2.4 Poner el nombre de clase a cada sección en inicio.html

2.5 Agregar el estilo de cada sección en miestilo.css

Al probar inicio.html en el navegador se mostrara asi

2.6 Agregar el estilo de ancho de cada sección en miestilo.css

Al probar inicio.html en el navegador se mostrara asi

2.7 Alinear segmentos de la misma fila en miestilo.css

2.8 Agregar un logo y un icono a la página

2.8.1 Crear una carpeta img y agregar dos imágenes: un logo y un icono

2.8.2 En inicio.html: Agregar dentro de header(lineas sombreadas)

- Agregar una etiqueta figure dentro del header para presentar un logo dentro de un img

- Agregar nav en una etiqueta article y agregar la leyenda “<h1>Conociendo HTML5</h1>”

- Agregar en el head el link para el icono y en title la leyenda “<title> Mi Pagina HTML5</title>”

(lineas sombreadas)

2.8.3 En el archivo miestilo.css agregar estilo los artículos creados

2.9 En el archivo inicio.html agregar un menú en nav “<nav class="posicion_2_1">”

(lineas sombreadas)

<ul>

<li> <a href="#"> 🍂 Inicio</a> </li>

<li> <a href="#">🍄Habilidades</a> </li>

</ul>

2.9.1 Dar un estilo al menú lateral

Al final quedaria asi:

2.10 Agregar etiquetas en inicio.html : h1, h2, h4, a, div, li, etc. de acuerdo a las

necesidades de el prototipo

ANEXO

Agregar formato de color y alineación en el archivo css. Los colores los puedes usar en hexadecimal

Nota: Se pueden indicar las caracteristicas de varias secciones al mismo tiempo, como por ejemplo section, aside, footer

section, aside, footer {

background:#D2CDD0 url(../img/fondo-interno.jpg);

display:inline-block; /*Los pone al mismo nivel en forma horizontal*/

}

Dar formato a los títulos

h1{

color:#F60;

margin:0.25em auto; /*primer pareja es de arriba y abajoy el segundo de los laterales (.25em 0 1 em 3em)*/

text-align:center;

-ms-text-shadow:5px 5px 10px rgba(255,255,255,0.5); /* x, y, blur, */ /*Para Internet Explorer*/

-moz-text-shadow:5px 5px 10px rgba(255,255,255,0.5); /*Para FireFox*/

-o-text-shadow:5px 5px 10px rgba(255,255,255,0.5); /*Para Opera*/

-webkit-text-shadow:5px 5px 10px rgba(255,255,255,0.5); /*Para Chrome, Zafari*/

text-shadow:5px 5px 10px rgba(255,255,255,0.5);

}

Agregar un logo (Guardar una imagen en una carpeta "img")

Indicar en inicio.html su ubicacion. Ejemplo:

<div class="posicion_1_1">
<img src="img/Logo.jpg" alt="">
</div>

Ajustar imágenes

audio, iframe, img, video {

max-width:100%; /*la imagen se reduce de acuerdo a la ventana, se reajusta*/

}

Dar formato a un párrafo

p {

color: #524c56;

font-size: 160%;

line-height: 155%;

padding: 3%;

text-indent: 2%;

text-align: justify;

}

Dar efecto a un enlace

a {

color: #524c56;

text-decoration: none;

list-style:none; /*quita viñetas*/

font-weight: bold;

text-decoration: underline;

text-align: left;

-ms-transition:all 0.5s ease-in; /*Opcional, para la transicion del boton*/

-moz-transition:all 0.5s ease-in;

-o-transition:all 0.5s ease-in;

-webkit-transition:all 0.5s ease-in;

transition:all 0.5s ease-in;

/* border:0.1em #009 solid ;

display:inline-block;

/*background: #C6D580;*/

}

Agregar formato al menu

ul{

list-style:none; /*quita viñetas*/

text-align: left;

}

li{

display: block; /*Un menú hacia abajo*/

}

Cambiar el color del menu

ul a{

padding: 5px 5px 5px 15px;

width: 100%;

text-decoration: none;

background: #C6D580;

display: inline-block;

}

a:active, a:focus {

background: #ADB96E;

color: #FFF;

}

a:hover {

background:blue;

color: #524c56;

}

Agregar un icono, para mostrar en la pestaña del navegador:

     En este caso se escogio una pequeña imagen"pestana2.ico"
   Copiar la siguiente linea dentro de la etiqueta <head>

    <link rel="shortcut icon" type="image/x-icon" href="img/pestana2.ico" />

Agregar un titulo a la pagina

Copiar la siguiente linea dentro de la etiqueta <head>

<title> Mi Pagina HTML5</title>

RECURSOS EN INTERNET>
Tipos de letras:
http://www.fontsquirrel.com/

Desplazamiento de contenido:
http://www.woothemes.com/flexslider/

colores:
http://html-color-codes.info/codigos-de-colores-hexadecimales/
http://meyerweb.com/eric/css/colors/

Servicios Web

Friday, February 7, 2020

No comments:

Post a Comment