Loading repository data…
alexbs01 / repository
Todos los apuntes de HTML de clase
HTML son las siglas en inglés de HyperText Markup Language, que en castellano significa Lenguaje de Marcas de HipertTexto. Se usa para crear el cuerpo de una pagina web y como su propio nombre indica es un lenguaje de marcas, que para codificar un documento incorpora etiquetas de apertura y cierre, o que se cierran en la misma etiqueta de apertura.
La estructura minima de un HTML es:
<html>
<head>
<title>Nombre que aparece en la pestaña</title>
</head>
<body>
<p>Texto que aparece en la propia página</p>
</body>
</html>
Como se puede ver, la unica diferencia entre una etiqueta de apertura y una de cierre es la /. Todo el codigo del HTML irá entre dos etiquetas, y .
Dentro de esta iran y , dentro de HEAD habrá información necesaria del documento, ya sea el título que aparece en la pestaña del navegador, que codificado de caracteres tiene esa página, cada cuanto tiempo se recarga la página, etc.
Dentro de BODY irá el contenido de la página web, imágenes, textos, links, formularios, etc. Todo lo necesrio para mostrar información al lector de la página.
Los comentarios pueden ir en cualquier sitio porque no se ejecutan, estos se hacen de la siguiente forma: <!-- -->.
HTML5 es la última versión de HTML, esta sigue en desarrollo, en ella se eliminaron etiquetas obsoletas, se modificaron otras y se añadieron nuevas con nuevas funcionalidades.
<!DOCTYPE HTML>
<html>
<head>
<title>Nombre que aparece en la pestaña</title>
</head>
<body>
<p>Texto que aparece en la propia página</p>
</body>
</html>
Como podemos ver para indicar que es en HTML5 solo se debe añadir al inicio del código <!DOCTYPE HTML>.
Contiene la información relevante de la página. En head se pueden incluir otras etiquetas como TITLE o META.
<title>Nombre</title>: En esta etiqueta se pone el nombre de la página web que aparecerá en la pestaña del navegador.
<meta attributes="..."/>: Esta es una etiqueta que se cierra en la misma etiqueta de apertura, contiene atributos en su interior que ayudan a definir el comportamiento de la página.
<body>...</body>: Es el cuerpo de la página, contiene todo lo necesario para mostrar la información que se quiere mostrar a los visitantes de la web, contiene el resto de las etiquetas. Tiene cinco atributos que modifican el texto y el fondo de la página.
Las etiquetas del interior de BODY se pueden clasificar en etiquetas para texto, para listas, para tablas, para multimedia (de estas solo imágenes), para formularios y para dividir la web por secciones.
1. De texto: Crean titulares, links, distintos tipos de fuentes, tamaños y colores, ayudan a dividir el texto por parrafos...
2. De listas: Para crear listas de elementos de forma ordenada o desordenada, indicandando que caracteres se utilizarán para crear dicha lista.
3. De tablas: Para crear tablas de ciertos tamaños, colores, líneas divisorias, etc.
4. De multimedia: Para incluir archivos de audio, video y fotografía.
5. Para formularios: Para recoger información de los usuarios.
6. De división por secciones: Hay determinadas etiquetas que no muestran ningún contenido, si no que ayudan al desarrollador web como dividir la página para que sea más fácil de editarla y crear cambios en ella, estas etiquetas pueden ser los DIV, HEADER, NAV, SECTION, ASIDE, ARTICLE, FOOTER, FIGURE o FIGCAPTION.
Titulares: Para se usa la etiqueta <hN>...</hN>, donde se sustituye la N por un número entre el uno y el seis, siendo el H1 el más grande y el H6 el más pequeño. A la hora de hacer titulares se recomienda usar una única vez el H1 por temas de SEO.
Párrafos: Para crear los párrafos se usa la etiqueta <p>...<p>, el texto va entre estas dos etiquetas, cuando se cierra la etiqueta, el texto da un salto de línea para saltar a un nuevo párrafo.
Saltos de línea: La etiqueta da un salto de línea de la misma forma que si pulsaramos la tecla ENTER, se puede usar en el interior de los párrafos para crear saltos de línea sin dividir el bloque P.
Barra horizontal: Crea una barra horizontal que se puede utilizar para separar párrafos y hacer la página más estética.
Dar formato al texto: Dar formato al texto significa cambiar la fuente, el tamaño de las letras o el color, y para ello se utiliza la etiqueta . Esta etiqueta se puede usar para modificar cualquier tipo de texto, desde titulares, a párrafos enteros o fragmentos de estos.
Existen tres tipos de listas, ordenadas, desordenadas y de definición, las primeras siguen un orden llevado por números decimales, números romanos en minúculas o mayúsculas, leras en minúscula o mayúscula... Mientras que las listas desordenadas no llevan ningún tipo de caracter que te indique que posición de la lista estamos, se marca con un punto, un cuadrado, etc. Las listas de definición se usan para definir palabras.
Listas ordenadas: Estas siguen un orden, y para indicar que queremos este tipo de lista lo haremos con la etiqueta <ol></ol> de ordered list.
Atributos de las listas ordenadas:
type="T": Indica con que tipo de caracter queremos que marcar el orden. A con letras mayúsculas, a con letras minúsculas, 1 con número decimales, I con números romanos en mayúsculas e i con número romanos en minúculas.
start="S": Indica con número en de la lista quieres empezar.
reversed: Con este atributo indicamos que es una lista en orden inverso.
Para crear un elemento de la lista se usa la etiqueta <li>...</li>.
Listas desordenadas: No están enumeradas, en su lugar llevan un signo que identifica a cada elemento de la lista. Se hacen con la etiqueta <ul>...</ul> de unordered list.
Selected from shared topics, language and repository description—not editorial ratings.
Mooenz /
Este repositorio es creado con el objetivo de guardar todos los apuntes, registros y ejercicios recopilados en los diferentes cursos tomados en la plataforma Platzi.
<font>...</font>Negrita, cursiva y subrayada: Para aplicar alguno de estos formatos basta con poner, <b>bold</b> para negrita, <i>italic</i> para cursiva,<u>underlined</u> para subrayado, strong hace lo mismo que b y em lo mismo que i, solo que tienen un signigicado distinto para el documento. Estas etiquetas se pueden usar a la vez pero se recomienda hacerlo de forma ordenada.
Links o enlaces: Los links o enlaces son un elemento de la página que hace que podamos navegar entre varias webs o a través de la propia página con solo hacer clic en determinados links. Un link se crea con la etiqueta <a>...</a> y el texto que va entre las etiquetas será el enlace.
<a href="#indice">Vuelta al índice</a>), y un link que te lleva a un ancla sería (<a href="https://miweb.com/index#indice">Vuelta al índice<a/>).