1 / 27

Estructura de un proyecto web - TICMAS

Ejemplo de practica

Sofia35
Télécharger la présentation

Estructura de un proyecto web - TICMAS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. PRESENTACIÓN

  2. ÍNDICE Módulo 1: • HTML • Sintaxis • Elementos HTML • Nombre de archivos • Ejercicio

  3. HTML

  4. ¿Qué debo escribir en código HTML? Básicamente todo el contenido de la página, pero nadaque tenga relación con el diseño y los estilos visuales. En el HTML debemos incluir los textos, links, llamadosa imágenes y videos, y principalmente las etiquetasque estructuran el contenido de toda página web.Todas las definiciones estéticas irán en la hojade estilos CSS, no en el documento HTML.

  5. Sintaxis Elemento <p>Esto es un párrafo.</p> Etiquetade apertura Contenido Etiquetade cierre

  6. Elementos anidados PADRE <p>Lorem ipsum dolor sit amet, consecteturadipiscing acris elit. Nullam sodalesleo <strong>eget mauris</strong> feugiat,at accumsan est facilisis. Pellentesque vestibulum dolor vel urna mattis laoreet ligula elit.</p> HIJO

  7. Indentado Contenido Contenido Contenido <ul> </ul> <li></li> <li></li> <li></li> <main> </main>

  8. Sintaxis con atributos <imgsrc="hola.jpg"alt="¡Hola!"> Nombrede etiqueta Atributo Valor

  9. Elementos HTML

  10. Estructura básica de un Documento HTML <!DOCTYPEhtml> <htmllang="es"> <head> <metacharset="UTF-8"> <metaname="viewport"content="width=device-width, initial-scale=1"> </head> <body> ... ... ... </body> </html>

  11. Párrafo <p>Esto es un párrafo.</p> https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_paragraphs1

  12. Énfasis <strong> <p>Algo <strong>más importante</strong> en medio del texto.</p>

  13. Títulos <h1>...<h6> <h1>Título de 1° jerarquía.</h1> <h2>Título de 2° jerarquía.</h2> <h3>Título de 3° jerarquía.</h3> <h4>Título de 4° jerarquía.</h4> <h5>Título de 5° jerarquía.</h5> <h6>Título de 6° jerarquía.</h6> https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_headers

  14. Imagen <img> <imgsrc="smiley.gif"alt="Emoji sonriente"> ATRIBUTOS OBLIGATORIOS • src:Ruta y nombre de archivo • alt:Texto alternativo (accesibilidad, buscadores, etc.) ATRIBUTOS OPCIONALES • height:Alto de la imagen en píxeles • width:Ancho de la imagen en píxeles (no es una buena práctica en HTML,el diseño va en CSS) https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_image_test

  15. Elemento <a> <ahref="https://www.w3schools.com">Visitar W3Schools</a> <ahref="otroarchivo.html">Ir a otro archivo</a> ATRIBUTOS OPCIONALES: • href:URL hacia donde dirige el link (puede ser una ruta absoluta o relativa) • target:Especifica dónde debería abrirse el nuevo link (pestaña, ventana, etc.) https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_test

  16. Contenedor <div> <divstyle="background-color: lightblue;"> <h3>Subtítulo dentro de una división</h3> <p>Párrafo dentro de una división</p> </div> (no es una buena práctica en HTML,el diseño va en CSS) https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_div_test

  17. Botones <button> <buttontype="button">Hacer clic</button> ATRIBUTOS OPCIONALES: • disabled:Estado deshabilitado • type: Tipo de botón (button|reset|submit) • title: Tooltip • name:El nombre que tendrá el botón https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_button_test

  18. Entradas <input> <labelfor="nombre">Nombre:</label> <inputtype="text"id="nombre"name="nombre"> <labelfor="apellido">Apellido:</label> <inputtype="text"id="apellido"name="apellido"> <inputtype="submit"value="Enviar"> ATRIBUTOS OPCIONALES: • name:El nombre que tendrá el input • value: Valor que tiene el input • type: Tipo de input (text|checkbox|number|password|radio|email) • disabled:Inhabilitado para escribir https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_test

  19. Etiquetas <label> <labelfor="nombre">Nombre:</label> <inputtype="text"id="nombre"name="nombre"> <labelfor="apellido">Apellido:</label> <inputtype="text"id="apellido"name="apellido"> <inputtype="submit"value="Enviar"> ATRIBUTOS OPCIONALES: • for:El id del input al que acompaña la etiqueta https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_input_test

  20. Radio buttons <input> <p>¿Cómo te vas a conectar a la clase?</p> <div> <inputtype="radio"name="conexion"id="compu"value="compu"checked> <labelfor="compu">Computadora</label> </div> <div> <inputtype="radio"name="conexion"id="celu"value="celu"> <labelfor="celu">Celular</label> </div>

  21. Checkboxes <input> <p>¿Cómo querés que te llegue el resumen de cuenta?</p> <div> <inputtype="checkbox"name="cuenta"id="mail"value="mail"checked> <labelfor="mail">Por e-mail</label> </div> <div> <inputtype="checkbox"name="cuenta"id="correo"value="correo"> <labelfor="correo">Por correo postal</label> </div>

  22. SPAN <span> <p>My mother has <spanstyle="color: blue;">blue</span> eyes.</p> (no es una buena práctica en HTML,el diseño va en CSS) https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_span

  23. Formulario <form> <formaction="action_page.php"method="get"> <labelfor="nombre">Nombre:</label> <inputtype="text"id="nombre"name="nombre"> <labelfor="apellido">Apellido:</label> <inputtype="text"id="apellido"name="apellido"> <inputtype="submit"value="Enviar"> </form> ATRIBUTOS OPCIONALES: • action:URL hacia donde se enviará la respuesta al formulario • method: Método HTTP que se usará al enviar el formulario • name:Nombre del formulario

  24. Nombre de archivos

  25. Nombre de archivos Nombre de archivo de la página de inicio de todo sitio web: index.html Esto no significa que sea el único. Los archivos pueden tener cualquier nombre, pero la mayoría de los servidores van areconocer al que se llame index.html como la página de inicio.

  26. Nombre de archivos ¿Qué puede incluir? ✔️ Letras minúsculas ✔️ Números ✔️ Guion medio y guion bajo ¿Qué no debe incluir? ❌ Espacios ❌ Letras mayúsculas ❌ Tildes, eñes y otros diacríticos ❌ Otros símbolos

  27. GRACIAS!

More Related