PRACTICA 013: GRAFICOS:HTML
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.
ACTIVIDADES
* El tema a escoger será por cada
alumno
1.- Paso 1. Crear un archivo libros_HRM.html en
una carpeta de trabajo
(En la carpeta de trabajo crear 3 carpetas tambien:
css,img, js)
1.1 Utilizar las siguientes etiquetas para definir las secciones
o cajas:
section, aside, article, figcaption, figure, footer, header, hgroup,
nav.
En html quedaria asi:
2.- Crear un archivo mi_estiloLibros.css (cascading style sheets) en una carpeta llamada “css” dentro de la carpeta de trabajo, para separar los estilos de la estructura html.
.
2.2 Agregar las siguientes línea al archivo libros_HRM.html (Para indicar el uso de los estilos)
dentro de la etiqueta <head>
<link rel="stylesheet" href="css/mi_estiloLibros.css"
/>
2.3 Al probar libros_HRM.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 libros_HRM.html
2.5 Agregar contenido en
algunas secciones (Líneas sombreadas)
3.- Agregar estilos
3.1 Alinear segmentos de la misma fila en mi_estiloLibros.css
3.2 Alinear el menu en el archivo mi_estiloLibros.css
Al final quedaría asi:
ANEXO I
: EJERCICIO DE OBSERVACION CON 2 IMAGENES
Nota: Los ejercicios se agregaran en un nuevo article </article>
dentro de la seccion class="posicion_2_1"
1.-
Agregar dos triángulos (Cada triangulo inicia con su propio espacio svg)
<article class="posicion_2_1_2">
<h3>002 PRACTICA
OBSERVACION</h3>
<svg width="240px" height="300px" > <path fill="orange" d="M 10,215 210,215 110, 42 z " stroke="purple" stroke-width="3"/></svg>
<svg width="240px"
height="300px" > <path fill="orange" d=" M
10,100 210,100 110,273 z" stroke="purple"
stroke-width="3"/></svg>
</article>
2.-
Agregar en el article dos triángulos(Con un mismo espacio svg).
<svg width="240px"
height="300px" >
<path fill="orange"
d="M 10,215 210,215 110, 42 z " stroke="purple"
stroke-width="3"/>
<path fill="orange" d=" M 10,100
210,100 110,273 z" stroke="purple"
stroke-width="3"/>
</svg>
3.- Agregar en el article dos triángulos (Con un mismo path)
<svg width="240px"
height="300px" >
<path
fill="orange" d="M 10,215 210,215 110, 42 z M 10,100 210,100
110,273 z" stroke="purple" stroke-width="3"/>
</svg>
4.- Agregar en el article dos triángulos (Con un mismo polygon)
<svg> <polygon points="125,10 175,130 75,130 100,10
190,100 75,130"
style="fill:#6ab150;stroke:#003300;stroke-width:3"></polygon>
</svg>
5.- Agregar en el article dos triángulos (Con un mismo polygon con una regla de llenado)
<svg> <polygon
fill-rule="evenodd" points="125,10
175,130 75,130 100,10 190,100 75,130"
style="fill:#6ab150;stroke:#003300;stroke-width:3"></polygon>
</svg>
Al final quedaría asi:
6.- Agregar en el article un circulo con borde grueso y dividido en cortes de 8,3,2 8,3,2 8,3,2:
<svg> <circle cx="125" cy="75" r="40" stroke="black" stroke-width="15" fill="#6ab150" stroke-dasharray="8,3,2"></circle> </svg>
---------------------------------0---0----------------------------------------------------
-----------------------------000--00----------------------------------------------------
No comments:
Post a Comment