Conceptos básicos HTML
Ainhoaec01
288 views
32 slides
May 09, 2019
Slide 1 of 32
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
About This Presentation
Trabajo TIC sobre la utilización de este tipo de lenguaje.
Slide Content
LENGUAJE HTML Ainhoa Expósito Calamardo Lidia Usero Zamora
ÍNDICE Lenguaje HTML Significado de HTML y utilidad ¿Por qué HTML no es un lenguaje de programación? Etiquetas Atributos Estructura básica de una página HTML Editores de texto plano y editores de documentos web. Ejemplos Elementos básicos de la estructura de un documento HTML Elementos de bloque y de línea Etiquetas básicas Atributos globales aplicables a cualquier etiqueta: id, class , style , title Listas y tipos Encabezados Tablas Imágenes Enlaces Personalización del estilo: CSS Significado de CSS y utilidad Formas de colocación del código CSS Selectores básicos Colores Texto Tamaño Bordes Márgenes Posicionamiento Imagen de fondo
LENGUAJE HTML Significado de HTML y utilidad ¿Por qué HTML no es un lenguaje de programación ? Etiquetas Atributos
SIGNIFICADO Y UTILIDAD El HTML es un tipo de lenguaje que se usa para el desarrollo de páginas web. Las siglas significan: “ hypertext markup language ”, traducido en: “lenguaje de marcas de hipertexto”. Gracias a él puedes crear tu propia página de Internet, ordenándola y estructurándola a tu gusto e incluso añadir links a otras páginas.
¿POR QUÉ NO ES UN LENGUAJE DE PROGRAMACIÓN? Aunque hayamos hablado de él como un tipo de lenguaje no lo es en realidad, ya que no posee las características de los lenguajes de programación como tal, no tiene la capacidad de control ni de tomar decisiones como otros (Java, php …). Pues él funciona a través de un conjunto de etiquetas que el ordenador interpreta.
ETIQUETAS Las etiquetas de HTML consisten en un nombre que las define en minúscula y encerrado por los símbolos <>.
ATRIBUTOS Son valores que se añaden a una etiqueta para modificar su comportamiento. Hay algunos que son globales y otros que se aplican únicamente a unas etiquetas determinadas. Se añaden solamente a las etiquetas de apertura, nunca a las de cierre. Los atributos se ponen entre los corchetes ("<" y ">") dentro de la misma etiqueta de apertura. Algunos de ellos son el atributo title ( se usa en enlaces ) o el align (para alinear).
ESTRUCTURA BÁSICA DE UNA PÁGINA HTML Editores de texto plano y editores de documentos web. Ejemplos Elementos básicos de la estructura de un documento HTML Elementos de bloque y de línea Etiquetas básicas Atributos globales aplicables a cualquier etiqueta: id, class, style, title Listas y tipos Encabezados Tablas Imágenes Enlaces
EDITORES DE TEXTO PLANO Y EDITORES DE DOCUMENTOS WEB. EJEMPLOS Se puede utilizar cualquier editor de texto plano excepto procesadores de texto como Microsoft Word. Es conveniente elegir un editor de plano adecuado que resalte los atributos y las etiquetas del documento HTML. Los más conocidos son Notepad ++ o NetBeans .
ELEMENTOS BÁSICOS DE LA ESTRUCTURA DE UN DOCUMENTO HTML Todo documento HTML tiene una serie de elementos básicos que definen su estructura. Muchos de los editores añaden esta estructura por defecto al crear un documento. Los elementos son: DOCTYPE Informar de qué tipo de archivo se trata. < html > Elemento raíz del documento. <head> Se incluye información sobre la página web. <meta charset =“UTF-8”/> Indica al navegador el tipo de codificación que usa el editor. < body > Da paso al contenido de la página.
ELEMENTOS DE BLOQUE Y DE LÍNEA Elementos de bloque : ocupan todo el ancho disponible y no permite que otro elemento se coloque a su lado, tiene que situarse debajo de este. Aunque pueden incluir otros elementos de bloque. Algunos ejemplos de este tipo son <p> (párrafos), < div > (bloques de división ). Elementos de línea : son aquellas que ocupan el espacio mínimo horizontal, permitiendo a su vez que otros elementos se coloquen a su lado, únicamente otros elementos de línea, texto e imágenes. Por ejemplo: < img > (imagen), < strong > (resaltar en negrita).
ETIQUETAS BÁSICAS < div > Divide la página en sectores . <p> Representa un párrafo . <span> Similar a < div >, a diferencia de que no define un bloque. Agrupa textos y otros elementos en línea. <u> El texto aparecerá subrayado . <em> El texto aparecerá en cursiva . <strong> El texto se resalta en negrita . <sub> El texto elegido se convierte en un subíndice . <sup> El texto elegido se convierte en un superíndice . <br> Salto de línea en el texto. No contiene etiqueta de cierre. <hr> Dibuja una línea de separación horizontal en la página. Tampoco etiqueta de cierre.
ATRIBUTOS GLOBALES APLICABLES A CUALQUIER ETIQUETA: ID, CLASS, STYLE, TITLE ID Identificar una etiqueta determinada en el documento HTML. Puede contener letras, números y los caracteres -,_,: y …. CLASS Agrupa varias etiquetas con un estilo común . Se puede añadir varias clases a un mismo elemento si se separan sus nombres con un espacio dentro de este valor “ class ”. STYLE Se emplea para aplicar un estilo mediante CSS directamente a un elemento. TITLE Sirve para elaborar una descripción corta de un elemento , normalmente al pasar el ratón por encima del mismo aparecerá el valor de dicho atributo.
Es una estructura la cual engloba a un grupo de elementos. Ordenadas : se representa por la etiqueta < ol > y admite atributos como reversed (invierte el orden), start (comienzo de la lista) y type (tipo de numeral se usará). Desordenadas : representadas por la etiqueta < ul >. Los elementos que componen la lista se representan con la etiqueta < li >. Esta etiqueta es equivalente en cuanto a su contenido a un párrafo, siendo por lo tanto un elemento de bloque. LISTAS Y TIPOS
ENCABEZADOS Su función es crear títulos o subtítulos en las diferentes secciones de una página web. Se definen por las etiquetas <h1> hasta <h6 > .
TABLAS Una tabla es un elemento de bloque para organizar datos en filas y columnas. Las filas de una tabla se representa con la etiqueta < tr >. Las columnas de una tabla con la etiqueta < td >.
IMÁGENES Son elementos en línea, se representa con la etiqueta < img >, sin etiqueta de cierre. En el caso de ser una imagen externa : Imagen en el subdirectorio img Imagen en un servidor externo : img /imagen.jpg http:// dominio.com/ruta/imagen.jpg ../imagen.jpg Imagen en el directorio anterior (padre )
ENLACES Son relaciones a otras páginas ya sean locales o externas, su etiqueta es <a > . Los atributos propios son: href (incluir una ruta hacia la página con la que enlazará) target (indica a navegador que deberá abrir el enlace en una página o enlace en una página ). Un ejemplo sería : < a href = “https://google.com ”>Enlace a Google</a>
PERSONALIZACIÓN DEL ESTILO: CSS Significado de CSS y utilidad Formas de colocación del código CSS Selectores básicos Colores Texto Tamaño Bordes Márgenes Posicionamiento Imagen de fondo
SIGNIFICADO DE CSS Y UTILIDAD CCS son las siglas de Cascading Style Sheets (Hojas de Estilo en Cascada ). Describe la presentación de los documentos estructurados de Html en páginas webs .
FORMAS DE COLOCACIÓN DEL CÓDIGO CSS En un atributo HTML con el atributo style : Con la etiqueta < style > : En un archivo independiente:
SELECTORES BÁSICOS Selectores por tipo Se escribe solo el nombre de una etiqueta HTML. Selectores de clase El nombre debe ir precedido de un punto y con el tributo class . Selectores de id Corresponde al nombre del identificador de un elemento es decir al valor de su atributo id.
COLORES Para cambiar el color de texto: la propiedad color . Para cambiar el fondo: la propiedad background -color . Métodos para incluir un valor cromático. Nombre Blue, red, green… Rgb en hexadecimal precedido de almohadilla #FF 000. Rgb en porcentajes rgb (100, 0, 0 ). Valor RGB más un valor de 0 a 1 rgba ( 225, 0, 0, 0.5).
TEXTO Alineación Subrayado Tamaño texto Sombreado Cursiva Grosor de texto text - align text-decoration font-size text shadow fond-style font-weight
TAMAÑO Propiedades width (ancho) y height (alto). Pueden tener un valor relativo (en píxeles) o absoluto (en porcentajes). Para poder averiguar que tamaño ocupa un elemento con respecto al espacio disponible se establecen colores de fondo. Se puede establecer un tamaño máximo ( max-width , max-height ) o mínimo ( min- width , min- height ).
BORDES Border-width Añade grosor al borde de los 4 lados. Border-style Tipo de trazo con el que se dibuja el borde. Border -color Define el color de borde. Border Permite establecer las tres propiedades anteriores a la vez. Border-radius Radio de curvatura , se mide en pixeles.
MÁRGENES margin Espacio entre un elemento y los que lo rodean, o el borde del elemento que lo contiene. Se puede medir en px o porcentaje. padding Margen interno entre un elemento y su contenido. Mismos valores que la propiedad anterior.
MÁRGENES Estas propiedades modifican por defecto los cuatro lados del elemento, pero se pueden modificar individualmente mediante los sufijos – left , - right ,-top, - bottom . Establecen además las cuatro medidas separas por espacios.
POSICIONAMIENTO Position static Por defecto, después de cada elemento de bloque realiza un salto de línea y añade debajo el siguiente. Position relative Ocuparía el mismo espacio que si tuviese el valor static . Se puede desplazar la posición sin alterar al resto de elementos (top, bottom , left y right ). Position absolute El elemento se coloca en la esquina superior izquierda del elemento que lo contiene. Esto el programa lo entiende como si ese elemento no estuviera ocupando espacio en el documento. Margin -top y margin-left Mover un elemento. Position fixed Similar a absolute , pero utiliza la ventana y no el documento como referente. Por lo que el elemento siempre estará visible.
IMAGEN DE FONDO Blackground-image : su valor será la ruta a la imagen desde el directorio donde se encuentra el archivo CSS background-image : url (“../img.png ”). Blackground -position: si la imagen es mas pequeña que el elemento , esta propiedad establece la alineación vertical y horizontal de la misma left , center, right , bottom , right . Blackground-repeat : si la imagen es más pequeña que el elemento, se repetirá hasta ocupar todo el espacio no- repeat , repeat -x, repeat -y.
F MUCHAS GRACIAS POR SU ATENCIÓN I N
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 288
- Slides 32
- Age 2398 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
30 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
32 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
30 views
14
Fertility awareness methods for women in the society
Isaiah47
29 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views