Este tutorial describe un sitio que utiliza HTML y CSS, que abarca todas las etapas: la creación del sitio,
la creación de una cuenta en un hosting gratuito y finalmente subir archivos que nuestro alojamiento de sitios web, hosting gratuito es una forma rápida de poner un par de minutos en nuestro sitio web en línea, el inconveniente de este método es que vamos a tener algunos anuncios que aparecen en todo el en la parte superior (parte superior de la cabeza).
Cualquier persona que quiera abrir un sitio web, necesitará saber HTML y CSS, no es necesario ser un experto en HTML (Hyper Text MArkupe Language), pero cierta información de código es absolutamente esencial para comprender cómo funcionan estas cosas.
Incluso si usted construye un sitio, todo lo que necesita saber lo que está pasando por estos archivos, necesitará corrección periódica de errores y lograr el cambio.
Muchas personas huyen del código, muchos comparan el código con los jeroglíficos, no es así en absoluto, alguien dijo una vez: "EL CÓDIGO ES POESÍA", tenía razón, cuando ves que algo nace de una serie de líneas de código, te sientes maravilloso, construyes un mundo virtual solo con teclado y mouse.
Utilizamos aplicaciones creadas por compañías de software durante mucho tiempo, solo realizamos operaciones de computadora, es hora de hacer programación, de hecho no es un lenguaje de programación, es un "lenguaje de marcado", pero nos referiremos a es como un lenguaje de programación, porque suena bastante extraño "lenguaje de marcado", HTML es uno de los lenguajes de programación (marcado) más fáciles de usar hoy en día, vemos HTML en cualquier sitio, muchos programas tienen son componentes de HTML, este lenguaje de programación está en todas partes, es hora de aprenderlo.
La primera vez puede ser un poco intimidante, pero si usted es menos cuidadoso que comprenderá de inmediato que todo es tan difícil, las cosas son simples y hermosas, creamos algo con nuestras manos, esto es lo más importante.
Le enseñaremos lo básico, entonces vamos a aprender a insertar texto en una página web, entonces arreglaremos y el color del texto, se utiliza una página de estilo CSS (Cascading Style Sheets) con el que vamos a colocar todos los elementos de la página Copiar en todo lo que va a colocar en nuestra página para que parezca que está hecho de una sola pieza.
Usted aprenderá técnicas sencillas de HTML básico y CSS, aunque estas son cosas básicas en HTML y CSS, crear una buena visión general.
Para este tutorial usted debe cuidadosamente armado con paciencia, este tutorial es la que nos podemos dar el lujo de llevar poco o rebobinar unos segundos se puede pasar por alto algo muy importante y que verá después de que no se llevaría a efecto, la concentración La información es muy alto y por eso te pido que seas muy, muy cuidadoso.
Después de este tutorial, yo diría que por supuesto aún intensiva, usted tendrá una mejor idea de lo que HTML y CSS, puede controlar el código y que entiende completamente un documento HTML HTML sensación que no sólo es una línea de heroglife se disipará, ya sabes lo que es cuando nos fijamos en un documento HTML o CSS.
Aprendemos sobre los Tags (etiquetas), tenemos aquí algunos ejemplos de etiquetas (etiquetas) que se pueden utilizar en un documento HTML, no se preocupe, no hay necesidad de almacenar todos ellos, sólo tiene que aprender los conceptos básicos de la primera tabla el resto se puede encontrar aquí en el sitio o en Internet cuando usted los necesita.
Incluso las tablas se ordenan estas etiquetas, se realizan utilizando HTML.
Elementos básicos (tags).
| Definir un formato de archivo Web | |
| Cabecera del documento | |
| Documento Tilul | |
| El cuerpo de la página HTML | |
| BGCOLOR = color | El color de fondo de la página |
| TEXTO =color | Página de texto Color |
| Link =color | Unvisited enlace de color de la página |
| Vlink =color | Visitado el color de los enlaces de la página |
| ALINK =color | Enlace color durante el usuario exacutat click |
| ANTECEDENTES = url | Imagen de fondo de la página |
| Párrafo | |
| <Hn> <Hn> | Nivel subtítulo del documento (n =-1 6) |
| Especifica los atributos de texto enmarcados | |
| SIZE =n | El tamaño del texto es 1, 7 |
| Face ="A, b" | Especifica el tipo de letra: aSi está disponible, o b |
| COLOR =s | Color de texto: un nombre de color o valor RGB |
| Nueva línea | |
| Información preformateado | |
| HTML Comenatriu | |
| Materiales cruza la página | |
| Regla horizontal | |
| SIZE =x | Altura Ruler en píxeles |
| WIDTH =x | Ancho Ruler en píxeles o porcentajes |
| NOSHADE | Desactivar la pantalla sombra regla horizontal |
| ALIGN =x | Alinear regla horizontal en la página (izquierda, centro, derecha) |
| COLOR =x | El color de la línea horizontal (IE solamente) |
| Marca Anchor | |
| HREF =url | Hipertexto Referencia |
| HREF =# Nombre | La referencia a un ancla interna |
| Name =nombre | Definición de los anclajes internos |
Listas de Elementos .
| Descripción definición | |
| Definición de tipo de lista | |
| Término Definición | |
| Lista de funciones | |
| <OL | Lista ordenada (numerada) |
| TYPE = de estilista | Escriba numeración. Valores posibles: A, A, I, i, 1 |
| START =x | A partir del número de la lista ordenada |
| <UL | Lista desordenada (s) |
| TYPE =forma | Forma del marcado. Valores posibles: círculo, cuadrado, disco. |
Elementos de formato de caracteres .
| Pegar el texto en negrita | |
| Pegar el texto en cursiva | |
| Pegar texto seleccionado | |
| Fuente del texto Minivan | |
| Citar bibliogarfica | |
| Ficha del programa | |
| Resaltado Estilo lógicas | |
| Texto desde el teclado | |
| Resalte lógica poderosa | |
| Programa o variable | |
| <FUENTE BASE SIZE = n> | Especifica el tamaño de fuente por defecto de la página |
Elementos para cuadros .
| Definición de la página de la escritura | |
| COLS =x | El número y el tamaño relativo de las columnas |
| FILAS =x | El número y el tamaño relativo de las líneas |
| BORDER =x | Especifica el estado "activado" o "desactivado" para el marco FRAMESET (1 o 0) |
| Frameborder = x | Especifica el tamaño del marco |
| Framespacing = x | La cantidad de espacio entre dos marcos adyacentes |
| La definición de un cierto marco | |
| SRC =url | Marco de código URL |
| NAME =nombre | Nombre del marco (utilizado junto con TARGET = name como parte de la marca de anclaje |
| Scrolling =SCRL | Defina las opciones posibles bar derulare.Valori: on (activado), off (desactivado), auto (automático) |
| Frameborder =x | Border todo el tamaño del marco |
| Marginheight =x | El espacio adicional por encima y por debajo de un cierto marco |
| Marginwidth =x | Espacio de unidad adicional a la izquierda y derecha de una trama dada |
| Sección de página que se muestra a los usuarios que no pueden ver el marco | |
| Marco interno (para (IE) | |
| SRC =url | Marco Fuente |
| NAME =s | Ventana Nombre (útil para TARGET) |
| HEIGHT =x | Altura del embedded |
| WIDTH =x | Ancho del marco integrado |
Artículos para tablas .
| Tabla HTML | |
| BORDER =x | Tabla Caja |
| CellPadding =x | El espacio adicional dentro de las celdas de tabla |
| CellSpacing =x | El espacio adicional entre las celdas |
| WIDTH =x | Ancho impuso mesa |
| FRAME =valor | El ajuste fino de la mesa |
| REGLAS =valor | El ajuste fino de las reglas de la mesa |
| BorderColor = color | Especifica la tabla de colores frontera |
| BORDERCOLORLIGHT = color | El color más claro de los dos colores especificados |
| BORDERCOLORDARK = color | El color más oscuro de los dos colores especificados |
| ALIGN =izquierda | Alinear la mesa a la izquierda de la página y el texto fluye lado derecho |
| ALIGN =Derecho | Alinear la tabla en la parte derecha de la página y el texto fluye a la izquierda |
| Hspace =x | Unidad adicional espacio horizontal alrededor de la mesa |
| Vspace =x | Unidad adicional espacio vertical alrededor de la mesa |
| COLS =x | Especifica el número de columnas de una tabla |
| Define un conjunto de definiciones de columna mediante marcado | |
| <col WIDTH =x> | Defina un ancho de columna en píxeles |
| Define el título de la tabla | |
| Define el cuerpo de la tabla | |
| Mesa Line | |
| BGCOLOR =color | Especifica el color de fondo de toda la línea |
| ALIGN =alineación | Alinear celdas de la fila actual (izquierda, centro, derecha) |
| La célula de los datos de la tabla | |
| BGCOLOR =color | Especifica el color de fondo de los datos de la celda |
| Colspan =x | El número de columnas que se extiende por los datos de la celda actual |
| RowSpan =x | Número de líneas de datos que abarca la celda actual |
| ALIGN =alineación | Alineación de la tela de la célula date.Valori posible (izquierda, derecha, centro) |
| Valign =alineación | Alineación vertical del date.Valori material celular sea posible: (arriba, abajo, centro) |
| ANTECEDENTES =url | Especifique la imagen de fondo de celda de la tabla |
| NoWrap | No permita que las líneas de separación de texto dentro de una celda |
| ALIGN =base | Alinear celdas con los datos de referencia en el texto adyacente |
| ALIGN =personaje | Alinea una columna con un carácter específico (el carácter predeterminado es ".") |
| ALIGN =justificar | Alinee el borde del borde izquierdo y derecho del texto |
Agregar elementos de la imagen.
| <IMG | Marcado de imágenes de entrada |
| SRC =url | El archivo gráfico fuente |
| ALT =texto | Texto alternativo para mostrar si es necesario |
| ALIGN =alineación | Alineación de la imagen en la página. Valores posibles: arriba (top), medio (medio), inferior (abajo), izquierda (a la izquierda), a la derecha (a la derecha) |
| HEIGHT =x | Altura de la imagen (en píxeles) |
| WIDTH =x | Anchura de imagen |
| BORDER =x | El marco alrededor de la imagen cuando se utiliza como un hipervínculo |
| Hspace =x | Espacio horizontal adicional alrededor de la imagen (en píxeles) |
| Vspace =x | Espacio vertical adicional alrededor de la imagen (en píxeles) |
Formas elementos.
| Formulario HTML activo | |
| ACCIÓN =url | Programa CGI en el servidor que recibe los datos |
| METHOD =método | ¿Qué datos se envían al servidor (GET o POST) |
| <ENTRADA | Campo de texto u otra entrada |
| TYPE =opción | Tipo de campo de entrada . Valores posibles: texto, contraseña, casilla de verificación, oculto, archivo, radio, presente, restablecer la imagen. |
| NAME =nombre | El nombre simbólico del campo de valor |
| VALUE =valor | Contenido por defecto del campo de texto |
| Seleccionado = opción | Botón / caja marcada por defecto |
| SIZE =x | Número de caracteres en un campo de texto |
| SIZE =x | El número máximo de caracteres permitidos |
| Casillas de verificación Grupo | |
| NAME =nombre | El nombre simbólico del campo de valor |
| SIZE =x | El número de elementos de menú que aparecen una vez (por defecto = 1) |
| MULTIPLE =x | Permite la selección de múltiples elementos de menú |
| <OPCIÓN | Elección particular en un campo |
| VALUE =valor | El valor resultante de las selecciones en el menú |
| Refuerzo texto campamento en varias líneas | |
| NAME =nombre | El nombre simbólico del campo de valor |
| FILAS =x | Número de líneas en el cuadro de texto |
| COLS =x | El número de columnas (caracteres) por línea de cuadro de texto |
| Compartir forma en partes lógicas | |
| Nombre asociado un conjunto de campos (fieldset) | |
| ALIGN =s | Especifica la alineación de la leyenda (explicación) muestra (arriba, abajo, izquierda, derecha) |
| Tabindex =x | Especifica el orden de los elementos cuando el usuario presiona la tecla Tab |
| Acceskey =c | Especifica que proporciona tecla de acceso directo en el teclado de un elemento particular |
| DISCAPACIDAD | Element está inactivo, pero se muestra en la pantalla |
| Sólo lectura | Artículo aparece en la pantalla, pero no se puede editar |
Elementos avanzados.
| La información específica sobre los estilos de modelo | |
| TYPE =val | El tipo de modelo de estilo. Generalmente "text / css" |
| Por lo general, incluye un script Javascript en la página web | |
| LANGUAGE =idioma | El lenguaje utilizado |
| EVENT =evento | Evento que activa la ejecución de scripts específicos |
| DE =numeobiect | Nombre del objeto de la página en la que el script funciona |
Descargar tablas etiquetas HTML
Si desea revisar hizo en el tutorial, puede acceder a la siguiente dirección: http://www.videotutorial.150m.com.
Le recomendamos que descomprimir el archivo adjunto y el estudio de los tres archivos HTML o archivos CSS utilizando Notepad + + u otro programa para editar las páginas web de esta manera se pueden realizar cambios cau puede incluso tomar notas durante la misma aprenderá HTML sin su cuenta.
Les deseo una agradable y darle la bienvenida a los siguientes tutoriales de esta serie y más allá.
Ver Comentarios (333)
Muy agradable, un montón de información en este tutorial.
Este tutorial se puede llamar: Infusión de HTML y CSS.
Tal vez usted no llega a aprender en pocos meses se puede aprender en una hora o así, he visto todo antes de ser publicado y puedo decir que me impresionó información de la cotización puede caber en un tutorial.
En un momento me sentí la necesidad de beber agua, a pesar de que acabo de ver el tutorial, ni me quiero pensar, cita Dan bebía agua después de eso.
Hay algo que no aprender HTML y / o CSS después de este tutorial.
Aoleu, lo que he estado tratando de aprender durante unos 3 meses, aparentemente no tengo tiempo ...
Muchas gracias, lo miro con cuidado!
sí tienes razón cristi pero estoy decepcionado porque pensé que harías el tutorial :( pero de todos modos bravo dan muy buen tutorial
No es agradable lo que dijiste y honestamente te digo esto, este hombre luchó durante aproximadamente una hora y media para enseñarte cómo hacer un sitio desde cero y ¿dices que estás decepcionado porque no lo hizo? ¿Te imaginas cuánto trabajo ha hecho el hombre y cuánto tiempo ha perdido para enseñarnos los conceptos básicos de html y css? Piensa antes de abrir la boca que no te conviene enviar el trabajo y luego dejar otros comentarios innecesarios como estás decepcionado de que no haya puesto, alguien más creó este tutorial, gracias porque tienes dónde aprender;)
¿Qué crees que la serie sobre "Cómo hacer un sitio" ha terminado.
En el siguiente tutorial voy a ser yo.
Porque lo que el siguiente tutorial voy a necesitar un control este tutorial hecho por Dan.
Lo que presento es diferente del tutorial me di cuenta de aza Dan, pero la información será esencial para la correcta comprensión de las cosas.
Hay varias maneras de publicar contenido en la web, pero todos tienen un denominador común, HTML y CSS, sin ellos no se puede hacer nada.
Hola Cristi, me culpaba de una serie de php o js?
Hablamos de todo, pero también PHP y JS sitio se une a HTML sin HTML no se puede.
PHP se usa más para extraer datos de bases de datos, las páginas web todavía están en HTML, ya sea que estemos hablando de sitios dinámicos (php, dhtml, asp, jsp, cf) o estamos hablando de un sitio estático, Utiliza HTML, sin él no puedes hacer nada.
Mucha gente comete un gran error "Ya no quiero un sitio HTML, quiero un sitio php dinámico", es un gran error, el HTML se usa en casi todas partes, ya sea que estemos hablando de sitios dinámicos o sitios estáticos.
JS (java script) no es lo mismo con JSP (Java Server Pages), que depende de un servidor, sitios de JS se utilizan para ciertos scripts, sin necesidad de ningún servidor, los scripts JS se pueden ejecutar en cualquier navegador sin necesidad componente de servidor, y en este tutorial, Dan utiliza una serie de scripts JS (galería de fotos) para la materia de usos JS, hay sitios web enteros con JS vez son sitios llenos con Java Server Pages, que es otra cosa, aunque parecen lo mismo.
Sé que comenzaste a estudiar el "código" hace mucho tiempo, este tutorial es una ayuda excelente, Dan hizo algo extraordinario con este tutorial, ni siquiera te das cuenta de lo valioso que es este tutorial, en el tutorial tienes casi todas las etiquetas ) utilizados en HTML, puede usarlos, especialmente porque cada uno tiene una descripción.
No deje que su ALEX, romper el código, que se basa.
Confía en mí, te pierdes potencial NO!
una gran cantidad de información muy bien estructurada para que cualquiera pueda entender. Yo personalmente miré el tutorial solo para descubrir algo nuevo, y a medida que avanzaba el tutorial, me sorprendió lo fácil que se puede hacer un sitio, no demasiado cargado y muy agradable de ver. Felicitaciones por este tutorial pero también por todos los demás. Espero con ansias la próxima "infusión" (palabras de cristi) con información.
¡¡Felicidades!! Muy buen tutorial, será una Rumanía llena de diseñadores web :) (¡ojalá!)
cuando se trata de un tutorial de Dreamweaver? O no utilizar Dreamweaver pb en los tutoriales?
Felicidades por todos los tutoriales ... eres el más fuerte;)
Hola ... el tutorial es realmente genial, hay "toneladas" de información ... y creo que tuve que aprender el html básico en la página 98 'haciendo docenas de pruebas tomadas de libros en la biblioteca porque no tenía net en ese momento y ahora puedo ver un tutorial que explica todo lo que necesito saber ... está claro que he evolucionado :))) .. Me gustó el hecho de que se explicó paso a paso y que se pusieron en el sitio todos los comandos básicos + un ejemplo en el que se puede trabajar ... ¡está claro que sabes lo que estás haciendo, son verdaderos maestros!
Sin embargo la mayoría de los que trabajan en el diseño web con programas que automáticamente hacen pedidos y mi pregunta es la voluntad de hacer un tutorial de este programa?
Sé que hiciste este tutorial para comprender los comandos y, por lo tanto, una mejor comprensión de los programas de diseño web ... pero todavía tengo curiosidad por ver qué continuarás con esta serie de tutoriales porque se habla mucho sobre este tema, incluso si algunos lo consideran aburrido cuando se trata de tutoriales como el realizado por Dan, que felicito en esta ocasión por el tutorial ...