Basics: Creating Your Very Own HTML Document Básicos: la creación de su propio documento HTML

This brief tutorial will guide you through creating your first web page. Este breve tutorial te guiará a través de la creación de su primera página web.

What is HTML, and What Do I Need? ¿Qué es el HTML, y ¿Qué necesito?

In order to create an HTML document you have to understand that HTML is the language of the Net. Con el fin de crear un documento HTML usted tiene que entender que HTML es el lenguaje de la Red. It’sa simple yet universal mark-up language that gives web developers and designers the ability to create complex pages of text that turn into images, styles, and valuable content that can be viewed by any one person using any sort of computer or browser on the web. Es un simple pero universal lenguaje de marcado que da a los desarrolladores web y diseñadores la posibilidad de crear complejas páginas de texto que se convierten en imágenes, estilos y contenidos valiosos que pueden ser vistos por cualquier persona usando cualquier tipo de ordenador o navegador en la web.

Some of you may have heard that you need some sort of special software in order to publish your own HTML page, however that is a blatantly false statement. Algunos de ustedes pueden haber escuchado que se necesita algún tipo de software especial para publicar tu propia página HTML, sin embargo, que es abiertamente una declaración falsa.

Here’sa small list of all the tools you need: He aquí una pequeña lista de todas las herramientas que usted necesita:

-A word processor (such as SimpleText, BBEdit, Notepad, or Microsoft Word) -Un procesador de textos (como SimpleText, BBEdit, el Bloc de notas o Microsoft Word)

-A simple working knowledge of HTML. -A simple conocimiento de HTML. (Fortunately HTML is easy and fun to learn!) (Afortunadamente HTML es fácil y divertido para aprender!)

Yup! Sí! Thats it! Eso es! These are all the tools you need as of now, told you it was small list. Estas son todas las herramientas que necesita a partir de ahora, le dijo que era una pequeña lista.

Tags Tags

H yper T ext M ark-up- L anguage mostly consists of several tags that are embedded into a simple text document. H yper T ext M arca-UP-L ENGUA mayoría se compone de varias etiquetas que se insertan en un simple documento de texto. They are really just hidden behind the scenes, controlling most of what it lets you view, and what it wants you to view at the designated time. Son realmente sólo oculta detrás de las escenas, el control de la mayor parte de lo que le permite ver, y lo que quiere que veas a la hora. Hm, kind of reminds me of the parental control feature on the tv a bit. Hm, de tipo me recuerda a la función de control parental en el televisor un poco.

HTML tags heavily take into account the existance of the English language. Las etiquetas HTML en gran medida tener en cuenta la existencia del idioma Inglés. As most of the tags are words (such as blockquote) or abbreviations (such as “p” for paragraph), but they’re uniquely separated from the regular text since they’re placed in small angle brackets (such as these < >). Como la mayoría de las etiquetas son palabras (como bloque) o abreviaturas (como "p" para párrafo), sino que únicamente está separado de regular el texto, ya que está colocado en el ángulo pequeño entre paréntesis (como estos <>) . Therefore the bold tag would look like <b> , and the blockquote tag is <blockquote> . Por lo tanto, la etiqueta en negrita se vería como <b>, y la etiqueta blockquote <blockquote>.

There are certain tags that will have the most influence on how the page will be formatted (for example; <p> begins a new paragraph, and <br> can break the last line within the paragraph to allow a space), and others differentiate how the words appear ( <i> makes text italic). Hay ciertas etiquetas que tienen la mayor influencia sobre la forma en que la página se dará formato (por ejemplo; <p> comienza un nuevo párrafo, y <br> puede romper la última línea dentro del párrafo para permitir un espacio), y otros diferenciar cómo aparecen las palabras (<i> hace texto en cursiva). Most others provide information — such as the title — that doesn’t appear on the page itself. La mayoría de proporcionar información a otros - como el título - que no aparece en la propia página.

One very important thing you must remember about tags is that for every one tag there is another one paired along with it. Una cosa muy importante que debe recordar acerca de las etiquetas es que para cada una etiqueta hay otro a lo largo de un vinculados con ella. Every time you use a tag - say <br> - you must also add and close it off with another tag - in this case, </br> . Cada vez que utiliza una etiqueta - <br> decir - debe añadir, además, y la cierra con otra etiqueta - en este caso, </ br>. Note the slash - / - before the tag “br”; that’s what keeps in contrast the closing tag from the opening tag. Nota de la barra - / - antes de la etiqueta "br", que es lo que mantiene en cambio la etiqueta de cierre de la etiqueta de apertura.

A basic HTML page always begins with the tag <html> and ends with </html> . Una básica en HTML de la página siempre comienza con la etiqueta <html> y termina con </ HTML>. In between, the file has two sections - the header and the body. Entre tanto, el archivo tiene dos secciones - la cabecera y el cuerpo.

The header enclosed by the <head> and </head> tags - contains information about your page that won’t be visible on the final page, for example the title. La cabecera delimitada por la <head> y </ head> - contiene información acerca de su página que no será visible en la última página, por ejemplo el título. The body enclosed by <body> and </body> - is where the real HTML action takes place. El cuerpo delimitada por <body> y </ body> - es donde la verdadera acción HTML se lleva a cabo. Every thing that appears on the page is contained within these tags. Cada cosa que aparece en la página está contenida dentro de estas etiquetas.

Now On To The HTML Document Ahora en el documento HTML

I think we’re ready to start creating a simple page. Creo que estamos listos para empezar a crear una sencilla página. Right?  Ok the first step, of course, is to create a new text document (remember, it should be saved as “Text Only” or “Plain Text” if you’re using a word processor that’s fancier than, say, SimpleText or NotePad) and name it “anything.html” where “anything” is, um, well basically anything at all. ¿Verdad? Ok el primer paso es, por supuesto, para crear un nuevo documento de texto (recuerda, debe ser guardado como "Sólo Texto" o "Texto sin formato" si usted está usando un procesador de textos más elegante que la que, por ejemplo, SimpleText o el Bloc de notas) y el nombre es "anything.html" donde "nada", es decir, um, bien, básicamente, nada en absoluto.

Your basic document should look something like this: Su documento de base debería ser algo como esto:

 <html> 
  <head> 
  <title>SimpleHelp.Net</title> <title> SimpleHelp.Net </ title> 
  </head> </ head> 

  <body> 
  <h1>HTML Basics</h1> <h1> HTML básicos </ h1> 

  <p>This is a simple article to help you create a working HTML page on SimpleHelp.Net!</p> <p> Se trata de un simple artículo para ayudarle a crear una página HTML en SimpleHelp.Net </ p> 

  <p>Simple helping on SimpleHelp.Net :)</p> Simple <p> ayudar en SimpleHelp.Net:) </ p> 

  </body> </ body> 
  </html> </ html> 

Within the <head> tags, we have the title “SimpleHelp.Net” which will appear in the bar across the top of your browser. Dentro de las etiquetas <head>, tenemos el título de "SimpleHelp.Net", que aparecerá en la barra en la parte superior de su navegador.

Within the body tags, you should have everything that will be clearly visible on the page. Dentro de las etiquetas "body", usted debe tener todo lo que será claramente visible en la página. With what we’ve written above it will look something like this: Con lo que hemos escrito anteriormente, se verá algo como esto:

HTML Basics HTML Básico

This is a simple article to help you create a working HTML page on SimpleHelp.Net. Se trata de un simple artículo para ayudarle a crear una página HTML en SimpleHelp.Net.

Simple helping on SimpleHelp.Net Simple ayudar en SimpleHelp.Net

As you might have guessed, <h1> is the tag for a headline (the largest headline, in fact compared to <h2>, <h3>, and so on) and <p> , of course, marks the beginning of a new paragraph. Como usted podría haber adivinado, <h1> es la etiqueta para un título (el mayor título, de hecho, en comparación con <h2>, <h3>, y así sucesivamente) y <p>, por supuesto, marca el comienzo de una nueva párrafo. Each paragraph is closed off by a corresponding </p> tag. Cada apartado se cierra con una </ p> etiqueta. As should every other tag be closed off by their correspondant tags that include a “/”. Así como todos los demás etiqueta de ser cerrado por su corresponsal etiquetas que incluyan un "/".

Does “HTML-ing” seem pretty simple? Significa "HTML-ing" parece bastante simple? Well guess what? Pues ¿adivinen qué? It sure is! No es seguro!

Every page has a source code and this can with this you can view every web pages HTML code by accessing it through your browsers menu options. Cada página tiene un código fuente y esto puede con este puedes ver todos las páginas web de código HTML para acceder a él a través de su menú de opciones de navegadores. And best of all, you don’t need your own homepage to practice! Y lo mejor de todo, usted no necesita su propia página web a la práctica! You can save HTML documents on your local or portable drives and then have them open up using the Open option under the File menu within your browser. Puede guardar documentos HTML en tu portátil o unidades y, a continuación, les han abierto utilizando la opción Abrir en el marco del menú Archivo dentro de tu navegador.

I wish you all the best of luck as hopefully this has helped a couple novice readers create an HTML page and maybe even helped refresh a few of the more intermediate developers minds as well. Les deseo a todos la mejor de las suertes, como espero que esto ha ayudado a un par de novatos lectores crear una página HTML y tal vez incluso ayudó a refrescar algunas de las más mentes de los desarrolladores intermedios también.

Feel free to comment! Siéntase en la libertad de opinión!