Bienvenido de nuevo.
Así que en esta lección vamos a comenzar haciendo que un nuevo archivo realmente lo llene con
una apertura en el navegador y también vamos a aprender sobre la estructura subyacente de cada documento HTML.
Así que hay algunas cosas que cada documento siempre tiene un tipo de repetición sobre el que vamos
a aprender.
Entonces, para comenzar ir a Sublime y voy a hacer un nuevo archivo.
Entonces archiva un nuevo archivo o comando y luego voy a guardar el archivo y darle un nombre.
Así que guarde el archivo o comando como.
Entonces, una vez que hago eso, le daremos un nombre.
Vamos a llamarlo primera página la página T. METRO. y esta parte es muy importante.
Dot h Timo.
Entonces presionaré guardar.
Y ese punto cada equipo lo digo sublime.
Y cuando lo abro en Chrome, le dice a chrome que este es un archivo que trataré como tal.
Entonces podemos escribirle a Tim Allen aquí.
Así que comenzaremos con solo una etiqueta que hemos visto hasta ahora son una de las etiquetas que es un H-1.
Y notarás que está resaltado para mí.
Así que llenemos esto.
Esta es mi primera etiqueta y guardo este archivo y verás que sublime sabe que es H D M L por lo que resalta que
hace que las etiquetas correspondientes sean rojas.
En mi caso.
Ahora lo que queremos hacer es abrir este archivo y verlo porque recuerde que cada vez que
sale solo se trata de texto, pero nuestro navegador lo interpreta y lo convierte en algo como esto o esto.
Para que realmente Chrome lo abra hay algunas soluciones.
El primero es simplemente hacer doble clic en él y lo abrirá en su navegador predeterminado.
Si eso no es Chrome, seguirá funcionando, pero lo abrirá en Safari, Firefox o
Internet Explorer y, aunque se vea, al abrirlo no me muestra el html real, lo
está quitando y lo está convirtiendo en esta buena representación visual.
Como siempre, puedo ver mi fuente de página y verá que es solo una etiqueta.
Así que definitivamente más simple que algo como esto.
Pero subyacentes son exactamente lo mismo.
Y probablemente también haya un H-1 en esta página.
Entonces, otra forma de hacer esto.
Puede tomar el archivo con el botón derecho y hacer clic en abrir con Google Chrome o puede hacer clic en él
y arrastrarlo a Chrome, que también lo abrirá.
Lo mismo ocurre con el más sublime, así que si accidentalmente cierra el archivo puede arrastrarlo aquí y lo
volverá a abrir.
Entonces solo para mostrarle que haga clic y puedo abrirlo.
Así que, lamentablemente, tengo que dar la noticia de que son simples.
Es Tim L, que hemos escrito hasta ahora, está un poco equivocado.
La etiqueta de correo electrónico en sí está bien, pero este no es un documento válido.
Y eso es porque nos falta la estructura subyacente que toda página debe tener.
Entonces se ve así.
Es mucho comparado con lo que hemos hecho hasta ahora.
Pero la buena noticia es que hay dos buenas noticias.
Uno es siempre lo mismo.
Y dos sublimes tiene un buen atajo que nos da esta estructura muy rápidamente con solo
cuatro letras que debemos escribir.
Así que vamos a repasar estas piezas individualmente y solo un poco, pero
voy a comenzar mostrándoles cómo hacerlo en sublime archivo sublime en lugar de h tim l, podemos escribir la palabra h
tim L y luego, toca la pestaña y automáticamente obtenemos esta estructura.
Así que repasemos qué hace esto.
Primero vamos a guardar.
Así que este tipo de documento lo saca de arriba y es raro porque
no hay un tipo de documento de cierre correspondiente, como H-G M-L, y el tipo de documento de cabecera, título y cuerpo es independiente.
Así que vamos a M. RE. es ser un desarrollador para buscar en Google.
y simplemente mostrándote cómo llegarías escribiría MT-NW y luego doc y podría parecer una tontería hablar de eso,
pero esto es importante porque encontrar esta información es lo que realmente
¿Cómo encuentras la respuesta correcta?
Voy a ser un completo disco roto en eso.
Mis alumnos se ríen cada vez que hablo sobre el arte de buscar en Google, pero realmente es importante.
Entonces estoy aquí.
Vamos a ver.
Dice que el tipo de documento para cada Timofei es simple para indicar que su contenido HMO usa HDMI.
Cinco simplemente usan doctype H-2 con un signo de admiración enfrente y queremos usar
HMO 5.
Hablaremos exactamente sobre lo idiota que es un 5 y lo que no es.
En un video futuro.
Pero queremos usarlo.
Básicamente es la versión más reciente de él.
Así que ponemos esto arriba.
Entonces, lo siguiente que vamos a hablar es el elemento h t m l.
Así que este es un poco más difícil de encontrar buscando quién hace MT-NW una HMO.
Si simplemente
seleccionamos el elemento allí, siempre busco este extremo vacío en el nombre.
Y esto nos dice que el elemento raíz envejecido le representa la raíz de un documento HMO.
Todos los otros elementos deben ser descendientes de este elemento.
Entonces es bastante auto explicativo.
Básicamente, todo lo que escribimos debe ir dentro de cada elemento.
un elemento principal seguido de un cuerpo, que es lo que tenemos una cabeza y un cuerpo.
Y lo más importante, bajo el contenido permitido, nos dice
Así que echemos un vistazo a qué cabeza es el elemento principal.
Proporcione metadatos de información general sobre el documento, incluido su título, y enlaces a definiciones de
guiones y hojas de estilo.
Entonces, lo que eso significa es básicamente todo lo que no vemos en la página como usuario.
Así que cosas como los archivos de fuentes en nuestros archivos de hojas de estilo o los archivos javascript todos
van en la cabeza y luego el cuerpo es donde ponemos todo nuestro contenido.
Representa el contenido de un documento HTML de edad.
Entonces, si volvemos aquí, puedo asegurarle una cosa más que es cómo escribir comentarios y sacarle
partido.
Si quisiera escribir una nota para mí mismo si acabo de escribir este contenido entra en el cuerpo
y luego aparece, escribí una información que entra en la cabeza.
Afortunadamente, eso no funcionará porque esto realmente se mostrará en la página.
Su equipo lo tratará como un texto y quiero que sea solo una nota para mí.
Entonces esto es algo que puedes hacer en cada lenguaje de programación.
exclamación menos que dos guiones y luego un poco de contenido y luego en el otro lado dos guiones y un signo mayor que.
Puede convertir esto en un comentario y un comentario se ve como si esto comenzara con un signo de
Entonces él puede escribir que te escuches escribirlo manualmente y
puedes ver que se pone gris en sublime.
Pero otro atajo realmente ingenioso es que puedes seleccionar una línea, no tienes que
seleccionarla, solo tienes que ir a alinear y
presionar la barra inclinada del comando y también puedes ver que puede ir hasta ella y puedes ir a comentar alternar el comentario.
Entonces, en caso de que olvide esto y no quiera escribirlo.
Otra cosa agradable.
Supongamos que tengo un montón de notas para mí, puedo seleccionarlas todas y hacer lo mismo.
Barra de Comando
Estupendo.
Así que voy a mantener estos comentarios aquí que son solo notas para mí.
Mi contenido va en el cuerpo.
Va en la cabeza.
Entonces eso significa que si seguimos nuestras propias notas, nuestro contenido aquí debe ir dentro de nuestro cuerpo.
Por lo tanto, no deberíamos tener nada flotando fuera del elemento H Tim L a excepción de doctype.
Todo lo demás va en la cabeza o en el cuerpo.
Así que vamos y abrímoslo, asegúrese de que se vea igual que antes.
Haga doble clic.
Puedes ver que se ve idéntico.
Veamos que el origen de la página tiene el mismo aspecto.
Tenga en cuenta que nuestros comentarios no se muestran, por supuesto, solo aparece nuestro H-1.
Una cosa que nos falta mientras estamos aquí es un título.
Un título es importante, no porque aparezca en la página, no aparecerá en nuestra página actual aquí.
Recuerda que está en la cabeza.
Entonces, son solo metadatos lo que hacen es dos cosas.
Uno de ellos determinará el nombre o el texto que aparece en nuestra pestaña.
Y también es importante para los motores de búsqueda y para otras páginas cuando hay otras páginas
vinculadas a su sitio o cuando va a Google y busca MDA en estos nombres aquí.
Estos provienen de los elementos del título.
Entonces, por ejemplo, M. RE. y celebra 10 años de documentos en su web, haga clic en eso.
Puedes ver aquí dice MDA y celebra que se corta.
Puede inspeccionar la página buscar un elemento de título.
Así que muchas cosas aquí vamos.
Titula y celebra 10 años de documentar tu web.
El blog de mizzle.
Entonces el título es importante.
Así que vamos a darle un título a ArcSight, vamos a llamarlo mi primer refresco de página y verlo aquí mismo.
Eso es todo por ahora.
Recuerda dos cosas
Este texto repetitivo solo puede escribir H l l tab.
Nunca tendrías más de uno en el documento.
Pero solo para recordar la pestaña html y los comentarios.
Puede hacer con slash de comando puede dirigirlos dentro y fuera.
Todo bien