-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathalexander.html
99 lines (99 loc) · 4.91 KB
/
alexander.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="CSS/estiloalexander.css">
<link rel="stylesheet" type="text/css" href="CSS/responsivoalexander.css">
<link rel="stylesheet" type="text/css" href="CSS/iconos.css">
<link rel="icon" type="image/png" href="img/html5.png">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<script>
$(document).ready(function(){
$("#inicio").css({"height":$(window).height()+"px"})
var menu=1;
$("#abrir_menu,#cerrar_menu").click(function(){
if(menu==1){
$("#menu").css({"left":"-45px"});
menu=0;
}else{
$("#menu").css({"left":"-100%"});
menu=1;
}
})
});
</script>
<body>
<header>
<section id="logo">
<h2 title="hola">Alexander BV</h2>
<span id="abrir_menu" class="icon-menu"></span>
</section>
<section id="menu">
<nav><span id="cerrar_menu" class="icon-cross"></span></nav>
<ul>
<a href="#inicio" title="Página ">Inicio</a>
<a href="#acerca">Acerca</a>
<a href="#servicios">Servicios</a>
<a href="#contacto">Contactos</a>
</ul>
</section>
</header>
<section id="inicio">
<center><img src="img/html5.png" >
<br>
<a href="#">Conocer Más</a>
</center>
</section >
<section id="acerca">
<center>
<section id="acerca-main">
<h3 id="part1">Acerca</h3>
<p>Esta es una página que sirve como ejemplo de una plantilla de HTML5 y CSS3 realizada por el estudiante de ingenieria
de sistemas Alexander BV.</p>
<br>
<a href="https://elbauldelprogramador.com/introduccion-html5/">¿Que es HTML5?</a>
<br> <br>
<p>HTML5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios web modernos. Algunos de ellos son técnicamente similares a las etiquetas div y span, pero tienen un significado semántico, como por ejemplo nav (bloque de navegación del sitio web) y footer.
</p>
<br>
<p>Como bien indica su propio nombre es la 5 versión del estándar de WWW (World Wide Web), el W3C a estado años trabajando en este nuevo estándar despuesdespués del XHTML, el cual se puede denominar como uno de sus fracasos, al tener un lenguaje muy estricto, y no ser compatible con la mayoría de las webs publicadas en el momento del lanzamiento, esta nueva versión sí es compatible con todas las anteriores, ademas de incorporar nuevas mejoras, algunas de las novedades que mas ruido han hecho ha sido la desaparición del case sensitive, con lo que podemos escribir por ejemplo la etiqueta ID de un div en mayúsculas o minúsculas y que los navegadores lo reconozcan sin producir error, aun así se recomienda seguir unos estándares, como son el de escribir todos los elementos en minúsculas, y sus valores entre comillas dobles “”, aunque en esta versión sean validas las comillas simples ”; también se recomienda cerrar todas las etiquetas, aunque no sea obligatorio como en XHTML; así mismo también incluye nuevas funciones como la reproducción de vídeo y sonido, y algunas etiquetas nuevas, para ello hicieron un estudio sobre el nombrado de etiquetas de las webs mas famosas, y casi todas tenían una barra lateral, llamada aside,un encabezado llamado header, y un pie llamado footer, así como las barras de navegación nav; y un largo etc.</p>
<br>
<p>Aqui podras observar el diseño y las accions que se le ha dado a la pagina gracias a CSS# y JavaScrip, con ayuda de CSS3
se le dio estilo a la fuente de letra, panel ce navegacion, bordes, sombreados, entre otros que podras observar; con
JavaScrip pudimos realizar las acciones del menu como abrir el menu y cerrar cuando se esta desde un movil;
esta página tambien esta hecha responsivamente (para que puede ser observada desde tableto cualquier otro smarphone)
</p>
</section>
</center>
</section>
<section id="servicios">
<center>
<section id="servicios-main">
<h3>Servicios</h3>
<ul>
<a href="https://www.facebook.com/alexander.bautistavillegas"><span class="icon-facebook2"></span>Facebook</a>
<a href="https://www.youtube.com/c/AlexandeBautistavillegas"><span class="icon-youtube"></span>YouTube</a>
<a href="https://twitter.com/"><span class="icon-twitter"></span>Twitter</a>
<a href="https://plus.google.com/u/0/+AlexandeBautistavillegas/posts"><span class="icon-google"></span>Google+</a>
</ul>
</section>
</center>
</section>
<section id="contacto">
<center>
<section id="contacto-main">
<h3>Contacto</h3>
<form>
<input type="text" name="Asunto" placeholder="Asunto..."><br><br>
<input type="email" name="Correo" placeholder="Correo..."><br><br>
<input type="text" name="Asunto" placeholder="Nombre..."><br><br>
<textarea placeholder="Escriba su mensaje..."></textarea><br><br>
<input id="boton"type="submit" value="Enviar" >
</form>
</section>
</center>
</section>
</body>
</html>