Está en la página 1de 10

Lenguaje de marcado HTML

No es un lenguaje de programacin, que nos permite crear estructuras de sitios


web, que va de la mano con CSS y JavaScript

Una estructura es un contenido, los textos, lo botones, los formularios, etc

Nuestro interprete vendra a hacer el NAVEGADOR WEB

NECESITAR

Navegador web: Firefox, chrome, opera, safari

Donde escribir el cdigo. Editor de cdigo(texto): block de notas, notepad++

XHTML = HTML. Si escuchas estos 2 trminos hoy en da es prcticamente lo


mismo

A la hora de guardar el documento, tienes que guardarlo bajo en nombre de


.html

Maquetar una pgina web

Necesitamos dos herramientas fundamentales:


Un editor de texto. NetBeans, que es open-source y muy eficiente.
Un navegador web. Google Chrome, Mozilla, safari, opera, etc.

La maquetacin consta de dos etapas:

La primera se realiza slo con HTML 5 y se trata de crear una estructura de


etiquetas para albergar todo el contenido y las distintas secciones.

La segunda etapa se realiza slo con CSS, y consiste en darle a la pgina


el aspecto visual que queramos as como determinar la colocacin en
pantalla de todos los elementos.
Cdigo HTML

-Nuestro documento consta de varias partes, consta tanto de la cabecera y


cuerpo

<(etiqueta)html>

<(etiqueta)head>

Dentro de esta etiqueta va informacin que el usuario no puede ver a primera


vista la mayora de las veces. Va por ejemplo, el titulo

<title> Titulo de primera web </title>

-Es importante para el navegador chrome, para que la pgina pueda ser
buscada.

Informacin para el navegador

</head>

<body>

Todo lo que escribamos aqu si que se va a visualizar

<h1> Titular mas grande </h1>

<br />

<h6> mas pequeo </h6>

</body>

</html>

<! - - Comentarios: Cdigo no visible - - >

Etiqueta <br />: Salto de lnea


ETIQUETA: Es un fragmento de cdigo que representa algo en un sitio web.
Por ejemplo, puede representar: un botn, texto,

Cada etiqueta tiene lo que es un contenido

Ejm:

SINTAXIS

Hay de esta forma. Casi todas las etiquetas se encierran de la siguiente forma

<etiqueta>(inicio de la etiqueta) CONTENIDO </etiqueta>(fin de la etiqueta)

O tambin las puedes encontrar con atrbutos

<etiqueta atributos=valor>Contenido</etiqueta>

<h1> Introduccin a HTML </h1>

<h2> </h2> <h6> Titular ms pequeo </h6>


Etiquetas importantes para maquetar; maquetar significa que vamos a
construir un sitio, en este caso la estructura de un documento HTML

Etiquetas que se especializan en texto. Manejar texto

<html>

<head> </head>

<body>

<! - - TITULARES - - >

<h1> . </h1> : Solo puedes utilizar un h1, no varios; en cambio h2,


h3, si se puede

Esto porque tiene un valor semntico. Google toma en cuenta que


tengas una buena estructura HTML para poder aparecer, entre otros factores

<! - - PARRAFOS - - >


<p>
Al mostrar nmeros raros estamos sobrepasando el alcance de un
dato de tipo entero, cada tipo de dato abarca una horquilla de
valores. Estamos desbordando el dato. <br /> La clase
<b>BigInteger</b> nos permite trabajar con nmeros mas
grandes que los datos de tipo Long

</p>

<hr />
<h3> Subtitulo</h3>

<p> <cite> Es como el autor </cite>

<blockquote>

//PARA ESTABLECER Tools -> Options -> Editor -> Code Templates
-> New //PARA EJECUTAR Click en el proyect ->
Properties -> Run -> Browse //PARA LOS METODOS
GET Y SET Source -> Insert Code
//Click derecho -> Navigate -> Inspect Hierarchy
//PARA PROYECTS, SERVICES, FILES, MAIN-NAVIGATOR Float ->
Para hacerlos ventanas
//PARA VOLVER ES -> Dock

<blockquote>
</p>

</body>
</html>

<b> Letras en negrita </b> o <strong> Letra negrita </strong> --- No habr
ningn cambio visual, las 2 se van a ver igual

La etiqueta b simplemente se usa para tener un estilo visual, pero la etiqueta


strong, lo que nos permite es darle un poco ms de nfasis para el
navegador, y sobre todo para los buscadores. Si tienes en el strong,
contenido importante, el buscador o navegador web, te lo va a buscar. pOr
ejemplo en Google, si tienes ah algn texto. Google le va ser mas fcil que lo
encuentres con la etiqueta strong que con la etiqueta b.

Es importante diferenciarlas, y sobretodo si vas a usar strong para hacer


nfasis a un contenido que quieres que el usuario pueda buscar en tu buscador
web, pues no abuses de la etiqueta strong, si abusas, Google te puede
penalizar y no vas a aparecer tan alto en los resultados

Utiliza b y strong

<span> </span>

<i> Letra itlica </i> Usarla cuantas veces se quiera

<blockquote>
</blockquote>

Se utiliza para designar una

cita de texto

<hr /> Para agregar una lnea

<u> Subrayado</u>

<strike> Tachado </strike> o <s> </s>

<small> texto mas pequeo </small>

<big> texto mas grande </big>

<sub> subndice </sub>

<sup> superndice </sup>

UNA MEJOR ESTRUCTURA A NUESTRO SITIO WEB


Y ESTAS SON LAS ETIQUETAS MAS IMPORTANTES PARA PODER ESTRUCTURAR
TEXTOS

ENLACES

Son los textos subrayados de color azul, a los que les das click y te envan a
otra pgina, redirigir a los usuarios hacia otros sitios. Agregar la etiqueta a, y
atributo href

Enlace:

<a href= >Ir a google </a> Si le damos un click, no nos va a enviar a


ningn lado. Para eso tenemos que indicarle una URL(link), es a donde vamos a
enviar al usuario a la hora de darle click

<a href = https://www.google.com.mx/> </a>

Existen rutas absolutas y rutas relativas

En este caso es una ruta absoluta, porque es un link externo; estamos


enviando una pgina externa, como es Google que ya tiene una URL
predefinida

Pero tambin hay links que tienen una ruta relativa

-Para acceder a esta, lo que se puede hacer es utilizar un enlace relativo. Ejm:

<a href = (carpeta en la que esta)imagenes/logo.(y ver el formato en el que


esta)jpg>

Esto se puede hacer con cualquier documento. Puede ser un archivo de


Word(.doc), archivo de power point(.ppt), pdf.

Para que se abra en otra pestaa. Incluir el atributo target = _blank

<a target = _blank href = C:\Program Files\Dev-Cpp\asxsa.txt> nombre


</a>
Tambin existen enlaces hacia documentos Javascript y documentos.css. Y para
enlazar estos documentos. Para agregar un archivo CSS dentro de nuestro
documento, tendremos que escribir la siguiente etiqueta:

<head>

<title> .. </title>

<link rel = stylesheet href= archivo.css>

</head>

<body>

<script src = archivo.js> </script>

<! - - Nos va a permitir enlazar un archivo Javascript en el cual vamos a poder


ejecutar cdigo, sin ensuciar el documento html - - >

</body>

Por ejemplo: Cuando entramos a Google. Tenemos ese icono, es el favicon de


Google

BUSCA ESO DE FAVICON

Para crear nuestro propio icono a nuestro sitio web

<head>

<link rel = shortcut icon type = image/x-icon href =


(ejemplo)favicon.ico>

</head>
Hay un enlace para activar automticamente el correo

<body>

<a href = mailto: (nombre del correo)israel2@gmail.com title = Enviar


correo a cawq> Enviar mail </a>

</body>

Esta etiqueta funciona de la siguiente forma:

-Cuando abrimos nuestro sitio, y le damos click, nos va a abrir una ventana, en
la cual nosotros vamos a escoger una aplicacin de correo, y vamos a poder
enviarle un correo directamente a esa persona. El title sirve para desplegar un
recuadro.

Tambin tiene partes malas, y es que si quieres trabajar con mails de esta
manera, hay un problema, y es que los boos de internet van a detectar tu mail,
si lo agregas de esta manera, van a detectarlo, y te van a enviar correos no
deseados, lo que se conoce como span. Entonces no es la mejor manera para
hacerlo, hay otras mejores maneras para enviar correos
LISTAS

Las listas tienen 2 funciones o utilidades; tanto de ponerle un


contenido que queremos a copilar para mostrar de una manera ms
fcil, como tambin el de utilizar esas listas para con CSS y/o otros
lenguajes podamos darle un formato y hacer que sea un men de
navegacin o algn otro elemento de los sitios web.

Con la etiqueta <ul> creamos una lista desordenada, y dentro vamos


a crear el elemento <li>; esta etiqueta va a contener nuestro tem#1,
o nuestro contenido numero uno.

<ul>

<li> Item#1 </li> Tenemos nuestras lista desordenada.


<li> Item#2 </li> Y cada <li> representa un item
<li> Item#3 </li>
<li> Item#4 </li>
<li> Item#5 </li>

</ul>

Cdigo:

Item#1
Item#2
Item#3
Item#4
Item#5
ATRIBUTO

id= class=