HTML

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=

HTML

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

HTML

Diunggah oleh

Hak Cipta:

Format Tersedia

Lenguaje de marcado HTML

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

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

Nuestro interprete vendra a hacer el NAVEGADOR WEB

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

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

Maquetar una pgina web

Necesitamos dos herramientas fundamentales:

La maquetacin consta de dos etapas:

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

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

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

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

<title> Titulo de primera web </title>

Informacin para el navegador

Todo lo que escribamos aqu si que se va a visualizar

<h1> Titular mas grande </h1>

<h6> mas pequeo </h6>

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

Etiqueta <br />: Salto de lnea

Cada etiqueta tiene lo que es un contenido

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

O tambin las puedes encontrar con atrbutos

<h1> Introduccin a HTML </h1>

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

Etiquetas que se especializan en texto. Manejar texto

<! - - TITULARES - - >

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

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

<! - - PARRAFOS - - >

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

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

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

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

Se utiliza para designar una

<hr /> Para agregar una lnea

<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

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

<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

Pero tambin hay links que tienen una ruta relativa

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

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

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

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

<link rel = stylesheet href= archivo.css>

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

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

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

BUSCA ESO DE FAVICON

Para crear nuestro propio icono a nuestro sitio web

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

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

Esta etiqueta funciona de la siguiente forma:

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

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