HTML

Hyper text markup language lenguaje de marcado hipertexto, lenguaje donde estructuramos la
web.agarrar cajas y ponenrlas en distintos lugares de la pagina
Lo primero que haremos es guardar el documento de sublime text como index.html esta es la
pagina que los los servidores pondrán de primera cuando los buscadores quieran acceder a
nuestro sitio web.
Las etiquetas son las diferentes estructures que pondremos en nuestra web, lo que vemos y no
vemos en nuestro sitio y las estructuraremos de la siguiente manera.
HAY ETIQUETAS QUE SE ABREN Y NO SE CIERRAN
Y HAY ETIQUETAS QUE SE ABREN Y SE CIERRAN
<!DOCTYPE html>
ESTA ETIQUETA LA PONEMOS SIEMPRE AL PRINCIPIO QUE DICE ESTE ES UN DOCUMENTO DE DE

TIPO HTML LA ULTIMA VERSION.
<HTML>
ESTA ES UNA ETIQUETA QUE SE ABRE Y SE CIERRA TODO LO QUE ESTE ENTRE ELLA ES LO QUE
ESTARA EN LA PAGINA WEB
</HTML>
<HEAD>
AQUÍ ESCRIBIREMOS TODO LO QUE NO VEREMOS EN LA PAGINA WEB COMO POR EJEMPLO EL
TITULO QUE APARECE EN LA PESTAÑA.
</HEAD>
<BODY>
TODO LO QUE APARECE EN LA PAGINA ESTA DENTRO DE ESTA ETIQUETA
</BODY>
<TITLE>
TITULO
</TITLE>
28:09
<body>
<h1>Hola mundo</h1> TITLOS GRANDES (SOLO PONER UNA VES EN LA WEB)
<h2>Hola mundo</h2> SUB TITULOS
<h3>Hola mundo</h3> SUB TITULOS -
<h4>Hola mundo</h4> INFINITAS
<h5>Hola mundo</h5>INFINITAS
<h6>Hola mundo</h6>INFINITAS
<p>
Etiqueta para poner parrafos
</p>
<b>NEGRITA</b>
<i>LADEADA</i>
<strike>tachada</strike>
<small> pequeña </small>
Hay etiquetas que completan la línea y otras que no las que completas la línea de llaman
Display block y las que no, display line.
Laa <h1> completasn la línea pero por ejemplo las <i> de cursiva no la completa
La etiqueta <a> sirve para redireccionarte a otra pagina, la etiqueta a tiene un atributo y este un
valor
Que es el href
El href necesita que le des un atributo y el atributo necesita una referencia de a donde quieres
redirigir la pagina cuando le das click.
<a href = “ “></a>
Hay dos tipos de rutas, las rutas locales y las rutas externas, las locales son aquellas que están en
nuestro servidor en nuestra carpeta y las externas están fuera de nuestro servidor o que no
estamos enlazando de manera local
PROTOCOLo HTTPS :
Protocolo de transferencia de hypertexto
Para redireccionar de forma local y el archivo esta en una carpeta hay que colocar el nombre de la
carpeta/y el nombre del archivo
Palabra/
../ volver a la carpeta de atrás
LA ETIQUETA <br> sirve para completar la línea y dar espacio entre párrafos
Cuando vamos a redireccionar pero queremos que la pagina se abra en otra pestaña
Haz <a href=” https://google.com” target=”_BANK”>click aquí</a> para ir a Google
Para insertar imágenes
<img src="”>
El atributo source es como el href hay que indicar entre las comillas la rutade la imagen ya sea
local o externa, esta etiqueta no es necesario cerrarla pero la de audio y video si.
Para insertar video la etiqueta es
<video src=”nombredelvideo.formato” controls=””>
</video>
Para audio lo mismo solo que en ves de video se pone la palabra audio
<div>
Esta etiqueta se usa para separar y agrupar contenido a nivel semántico es la etiqueta correcta
Es parecida al párrafo <p>
</div>
<form>
Esta etiqueta sirve para insertar formularios
</form>
Esta teiqueta tiene un imput
<input type=”text” >
<input type=”password” >
<input type=”number” >
<input type=”email” >
<input type=”color” >

<input type=”range” min=”1 max=5>
<input type=”date” >
<input type=”time”>
<input type=”button” value=”boton”>
<imput type=”submit”>
Required es un atributo para obligar al usuario a completar el campo o no se podrá enviar.
Los metadatos es información que describe otra información, la descripción de los videos, las
palabras clave, los títulos de los videos hacen parte de los metadatos.
En html los trabajamos en el <head> ya que no necesitamos que se vean
Los metadatos se trabajan en html con la etiqueta <meta>
Estos nos sirven para cambiar la codificación de la pagina por ejemplo para que nos permita poner
acentos como tilde en los títulos ya que por defecto no nos deja asi que aremos la siguiente
etiqueta con el siquiente atributo
<meta charset=”utf-8”>
Hay diferentes tipos de metaetiquetas que nos sirven para proporcionar mas información de
nuestra pagina
Una seria
<meta name=”keywords” content=”deporte, futbol, freestyle”> palabras clave de mi pagina

<meta name=”description” content=” dragonite es una compañía dedicada a brindar salud y
felicidad a las personas por medio del ejercicio físico”>
>meta name=”author” content=”abel ahumada”
<meta charset=”copyright”> content=”dueño de los derechos”>
<meta name=”robots” content=”index”> o
<meta name=”robots” content=”noindex”> o si queremos que nuestra pagina no salga en Google
Lo primero que tiene que tener nuestra pagina web es un encabezado y un nav o barra de
navegación. Estos pueden ir juntos
Después vienen el articulo con las diferentes secciones
Yluego esta el aside que es como una barra de navegación secundaria
Y el footer o pie de pagina
CURSO DE CSS
Podemos enlazar los documentos html con css de 4 formas distintas, estilo en línea, estilos con
etiqueta syle, archivo externo con etiqueta link y el import.
La forma correcta y mas apropiada de hacerlo es con archivo externo con etiqueta link
<link rel="stylesheet" type="text/css" href="estilo.css">
Este se pone en el head se le da un valor que es “hoja de estilo” un atributo que es tipear “texto
css” y se redirecciona hacia donde esta el archivo

selector {
propiedad: valor;
En el selector va a ir el elemento que queremos cambiar
En propiedad el atributo del elemento que queremos cambiar
Y en valor el código que representa el cambio
Tipos de selectores css
Universal – * todos los elementos
De tipo – <nombre del elemento>
Clases – .titulo-h2
Se le pone al elemento a modificar en el html lo siguiente
<h2 class="titulo-h2">mi primer h2 con css</h2>
ID – #element-for-modify
<h2 id="element-for-modify">mi primer h2 con css</h2>
Por atributo –
Desendiente –
Pseudo-clases -

HTML

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

HTML

Cargado por

Copyright:

Formatos disponibles

Hyper text markup language lenguaje de marcado hipertexto, lenguaje donde estructuramos la

web.agarrar cajas y ponenrlas en distintos lugares de la pagina

HAY ETIQUETAS QUE SE ABREN Y NO SE CIERRAN

Y HAY ETIQUETAS QUE SE ABREN Y SE CIERRAN

ESTA ETIQUETA LA PONEMOS SIEMPRE AL PRINCIPIO QUE DICE ESTE ES UN DOCUMENTO DE DE

TODO LO QUE APARECE EN LA PAGINA ESTA DENTRO DE ESTA ETIQUETA

<h1>Hola mundo</h1> TITLOS GRANDES (SOLO PONER UNA VES EN LA WEB)

<h2>Hola mundo</h2> SUB TITULOS

<h3>Hola mundo</h3> SUB TITULOS -

<h4>Hola mundo</h4> INFINITAS

Etiqueta para poner parrafos

<small> pequeña </small>

Display block y las que no, display line.

<a href = “ “></a>

estamos enlazando de manera local

Protocolo de transferencia de hypertexto

carpeta/y el nombre del archivo

../ volver a la carpeta de atrás

Haz <a href=” https://google.com” target=”_BANK”>click aquí</a> para ir a Google

Para insertar imágenes

Para insertar video la etiqueta es

<video src=”nombredelvideo.formato” controls=””>

Es parecida al párrafo <p>

Esta etiqueta sirve para insertar formularios

Esta teiqueta tiene un imput

<input type=”text” >

<input type=”password” >

<input type=”number” >

<input type=”email” >

<input type=”color” >

<input type=”date” >

<input type=”button” value=”boton”>

Required es un atributo para obligar al usuario a completar el campo o no se podrá enviar.

En html los trabajamos en el <head> ya que no necesitamos que se vean

Los metadatos se trabajan en html con la etiqueta <meta>

etiqueta con el siquiente atributo

<meta name=”keywords” content=”deporte, futbol, freestyle”> palabras clave de mi pagina

felicidad a las personas por medio del ejercicio físico”>

>meta name=”author” content=”abel ahumada”

<meta charset=”copyright”> content=”dueño de los derechos”>

<meta name=”robots” content=”index”> o

<meta name=”robots” content=”noindex”> o si queremos que nuestra pagina no salga en Google

navegación. Estos pueden ir juntos

Después vienen el articulo con las diferentes secciones

Yluego esta el aside que es como una barra de navegación secundaria

Y el footer o pie de pagina

etiqueta syle, archivo externo con etiqueta link y el import.

<link rel="stylesheet" type="text/css" href="estilo.css">

css” y se redirecciona hacia donde esta el archivo

En el selector va a ir el elemento que queremos cambiar

En propiedad el atributo del elemento que queremos cambiar

Y en valor el código que representa el cambio

Tipos de selectores css

Universal – * todos los elementos

De tipo – <nombre del elemento>

Se le pone al elemento a modificar en el html lo siguiente

<h2 class="titulo-h2">mi primer h2 con css</h2>

<h2 id="element-for-modify">mi primer h2 con css</h2>

También podría gustarte