Consejos útiles

Lección 1

En la primera lección, ya examinamos un pequeño ejemplo de creación de una página html. Ahora crea una página más compleja. Quiero señalar que explicaré cómo hacer esto sin el uso de un software especial. Todo lo que se necesita para trabajar es un bloc de notas regular de Windows. Para un trabajo más conveniente, recomiendo descargar Notepad ++ (un cuaderno avanzado con la capacidad de resaltar etiquetas html). Entonces comencemos.

Abra el bloc de notas y copie lo siguiente en él:

Luego, haga clic en "guardar como", en el cuadro de tipo de archivo, seleccione "todos los archivos" y escriba index.html en el nombre. Asegúrese de incluir la extensión .html (no .txt) al final del nombre, de lo contrario, los navegadores no lo interpretarán como un documento web.

Si por alguna razón no puede crear una página html, puede descargar el ejemplo anterior desde el enlace: index.rar.

Ahora algunas palabras sobre las etiquetas que utilizamos para hacer esta página.

Descripción de etiquetas.

La primera etiqueta es (esta etiqueta está emparejada, es decir, se requiere la etiqueta de cierre): se usa como un contenedor, dentro del cual se encuentra todo el contenido de la página (texto, imágenes, etc.). Aunque esta (s) etiqueta (s) es opcional, su uso habla de una buena regla de tono. Por lo tanto, te aconsejo que lo uses.

La siguiente etiqueta es. Esta también es una etiqueta emparejada (s). Esta etiqueta no aparece en la página (excepto el título), pero es necesario indicar parámetros de página adicionales: descripción de la página (utilizada por los motores de búsqueda), palabras clave (utilizada por los motores de búsqueda), estilos, scripts, título y más.

Etiqueta: etiqueta (s) emparejada (s), requerida para indicar el título de la página. Además, esta etiqueta debe colocarse solo dentro de la etiqueta.

Y la última, en nuestro código, es la etiqueta. También etiqueta emparejada (y

Estudios de caso

Abra cualquier sitio y vea el código fuente. Esto se puede hacer directamente en el navegador usando el atajo de teclado Ctrl + U.

Ahora puede ver cómo los profesionales escriben código HTML y obtienen mucho dinero por ello. Diferente de nuestra primera página, ¿verdad? Pero esto también se puede aprender en unos pocos meses. Y si desea obtener una educación completa con conocimientos de CSS y JavaScript, con un trabajo como programador junior, tendrá que estudiar durante todo un año.

Conjunto de tecnología HTML5

HTML5 es la última y más poderosa versión del estándar HTML, con nuevos elementos, nuevos atributos y un nuevo comportamiento. El término HTML5 también significa un conjunto de tecnologías., lo que le permite crear una variedad de sitios y aplicaciones web.

De hecho, el término HTML5 se usa para referirse a más de diez estándares separados. Y algunas de las tecnologías HTML5 aún no se han finalizado. No todos los navegadores los admiten (o cada navegador es diferente).

Cuando hablamos de sitios interactivos y AJAX, casi siempre estamos hablando de tecnologías HTML5.

HTML5 tiene interfaces de programación (API) para transmitir video y sonido, para chats, incluidos chats de video a través de un navegador, y muchas otras cosas interactivas interesantes. HTML5 te permite crear juegos de navegador. Incluso YouTube ahora está trabajando a través de HTML5, aunque anteriormente requería Flash.

Formalmente, cambiar de HTML normal (HTML4) a HTML5 es muy simple: simplemente escriba la etiqueta al comienzo del código de la página web para indicar el tipo de documento.

Cómo aprender a escribir HTML

Ya has aprendido a escribir una página simple en HTML. Simplemente aprenda los elementos básicos y experimente. Establezca una tarea específica (por ejemplo, cree un sitio de tarjeta de presentación para su IP) o tome una tarea paga como profesional independiente e intente implementarla.

Puede echar un vistazo al directorio, google, solicitar asesoramiento en foros y sitios con preguntas y respuestas. O encuentre el sitio más similar, abra su código y comprenda cómo funciona. Puede cambiarlo según sus necesidades, solo recuerde borrar los derechos de autor y los comentarios de los autores.

Copiar y pegar el trabajo de otra persona es un fenómeno normal en la programación, aquí se llama Open Source, una transmisión muy moderna y avanzada.

Las personas comparten entre sí sus programas y fragmentos de código. Algunos desarrolladores no quieren abrir su código, cifran (ofuscan) los scripts en los sitios, pero también se pueden analizar con herramientas especiales.

Para crear sitios interactivos con una funcionalidad más compleja, con un diseño moderno y hermoso, necesita estudiar más a fondo CSS, JavaScript, diseño web y algunos otros temas. Aquí se requiere una preparación más fundamental.

El programa de capacitación anual Web Profession Profession es ideal para principiantes que desean una lista clara de los estilos HTML, CSS y los lenguajes de programación JavaScript y PHP. Como resultado, aprenderá cómo crear sus propios proyectos web y podrá reclamar el puesto de desarrollador junior.

Un curso práctico de un año para aquellos que desean convertirse en desarrolladores web profesionales, lanzar su proyecto de Internet o servicio web y recibir sus primeros pedidos de desarrollo.

  • Comentarios en vivo de los maestros
  • Acceso ilimitado a los materiales del curso.
  • Prácticas en empresas asociadas
  • Proyecto de graduación de un cliente real.
  • Garantía de empleo en empresas asociadas para graduados que hayan defendido su tesis.

Necesitaremos

1) Elegir editor de texto. Suficiente por primera vez Bloc de notas (Bloc de notas) (en ella solo necesitamos un equipo Guardar como)

Si inmediatamente desea comenzar a programar en editores de texto especializados, preste atención a:
1) para Ventanas
NotePad ++ (descargar o aquí)
Intype (descargar)

¡Su diferencia con los editores de texto convencionales es que sangran automáticamente! permite volver a guardar el archivo en una codificación diferente (tenga en cuenta que lo encontrará en el futuro), etiquetas de colores en varios colores, como el código al final de la lección. En un editor normal, será del mismo color.

2) Cualquier navegador de internet, por ejemplo, Explorador de internet para ventanas o Safari para Mac OS X e iOS. Si si tambien puedes Mozilla, Google Chrome, Opera, Yandex y Mail navegadores, etc.

Vamos a crear una página HTML.

1) crear una carpeta en el escritorio html . Haremos esto para que las lecciones estén estructuradas y contenidas en un solo lugar.

2)Crear nuestro archivo en un editor de texto, por ejemplo, en el Bloc de notas (NotePad). Siguiente Guardar como.

La codificación es mejor elegir UTF-8, luego elegir todos los tipos de archivo y seleccione el nombre del archivo con .html al final, por ejemplo index.html

Elegimos como directorio (carpeta) dónde guardar nuestro html
Empujar guardar. Listo

A menudo hace la pregunta que extensión de archivo no visible. Vamos a tomarlo en orden

Extensión de nombre de archivo - una secuencia de caracteres añadidos al nombre del archivo y destinados a identificar el tipo (formato) del archivo. En pocas palabras, esto es .txt .doc .exe .jpg y así sucesivamente al final del nombre del archivo

La capacidad de ver extensiones de archivo puede ayudar a determinar con precisión el tipo de archivo y le permite hacerlo manualmente (con el comando renombrar) cambia no solo la extensión, sino también el tipo de archivo (por ejemplo, de txt a html)

NO debería verse así: foto, documento de texto, juego
Debería verse así: photo.jpg, text document.txt, game.exe

Pero si todavía tiene los nombres de archivo en la primera versión (SIN, por ejemplo, .txt, jpg, .exe al final del nombre del archivo), haga lo siguiente:

Nos fijamos en la configuración de archivos y carpetas:

Para Ganar XP Abra cualquier carpeta - Herramientas (en el panel superior) - Propiedades de carpeta - Ver - Ocultar extensiones para archivos registrados (desmarcar) - Aplicar

Para Ganar 7 Abrir cualquier carpeta - Organizar - Opciones de archivo y búsqueda - Ver - Ocultar extensiones para tipos de archivos registrados (desmarcar) - Aplicar

Para Mac OS Haga clic en el escritorio - Buscador - Preferencias (Avanzado) - Avanzado - seleccione la casilla de verificación en Mostrar todas las extensiones de archivo (Aplicar extensiones)

3) inserte en él todo el código (junto con los comentarios) indicado a continuación:

4) Abre el archivo. Puede elegir otro navegador para abrir este archivo, para esto, haga clic derecho en nuestro archivo index.html - Abrir con y seleccione un navegador de la lista, por ejemplo, Internet Explorer, Google Chrome, Mozilla, Yandex Browser, etc.

Como resultado, abriendo el navegador de Internet resultante index.html , Debería ver una página de este tipo:


Figura 1

En Figura 1 Vemos cómo, como resultado, el navegador muestra su página. El texto de los siguientes elementos se resalta en rojo:

En el código presentado a continuación, puede ver el mínimo básico del documento html. Es necesario aprenderlo y no confundir las etiquetas de apertura y cierre en algunos lugares.


Etiqueta cabeza destaca el encabezado del documento. Prescribe elementos que se asocian principalmente con la ayuda del navegador en el procesamiento de los elementos de su página (nombre, palabras clave, autoría, etc.) Hablaremos sobre su contenido más adelante.

Etiqueta titulo significa nombre de la página. Esta es la única etiqueta contenida en cabezaque se muestra en la página. Lo que debe ingresar después de la apertura y antes de la etiqueta de cierre será el título de su página en Internet

Toda sangría a la izquierda de las etiquetas en los ejemplos es opcional. Están hechos a modo de ilustración para que vea un par de etiquetas.

Etiqueta cuerpo indica el cuerpo de la página. Qué ingresar después de las etiquetas de apertura y cierre cuerpo y será el contenido de tu página


Casi todas las etiquetas en HTML apertura y cierre (excepción, por ejemplo, la etiqueta img, que indica la inserción de una imagen).


Una vez más, recuerdo que es importante no olvidar escribir etiquetas de cierre para todos los demás tipos de etiquetas, de lo contrario, el navegador no entenderá exactamente dónde desea terminar este o aquel elemento. Como abajo:


Después de la palabra negrita, olvidamos intencionalmente la etiqueta de cierre b. Como resultado, el navegador mostró lo siguiente

Quiero resaltar el texto negrita, y este ya está en cursiva

Como puede ver, el texto se resaltará en negrita hasta el final, y el que estaba implícito en cursiva estará en negrita y cursiva. ¡Así que ten cuidado!

5) Si quieres editar algo en tu archivo index.html (y ahora solo se abre de manera predeterminada por el navegador), luego haga clic con el botón derecho del mouse en nuestro archivo index.html - elegir Abrir con y de la lista seleccionamos un editor de texto, ya sea Bloc de notas (en inglés Bloc de notas)u otro editor de texto que haya instalado.

En principio, explicó los conceptos básicos. Si bien la página html parece bastante simple, pero en las próximas lecciones le contaré en detalle sobre estos y otros elementos y su propósito: insertaremos imágenes, crearemos enlaces y mucho más)