Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • HTML

    Cargado por

    Israel Huamani De La Cruz
    19 vistas10 páginas
    algunos conceptos

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    DOCX, PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    algunos conceptos

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    19 vistas10 páginas

    HTML

    Cargado por

    Israel Huamani De La Cruz
    algunos conceptos

    Copyright:

    © All Rights Reserved
    Descargue como DOCX, PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 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=

    También podría gustarte