Scribd
Cargar
7 vistas24 páginas

HTML Css

Cargado por

CRISTIAN ADAIR MAY LOPEZ
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
7 vistas24 páginas

HTML Css

Cargado por

CRISTIAN ADAIR MAY LOPEZ
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 24

HTML

Ing. María Elena Ortiz Jiménez


HyperText Markup Language

El lenguaje de marcado de
hipertexto (HyperText Markup
Language) es lo que comúnmente lo
como HTML permitiendo darle
estructura mediante etiquetas al
texto, imágenes, videos entre otros,
para el desarrollo de páginas webs.
Elementos de HTML
En el código html podemos identificar diferentes elementos que lo conforman
a través de sus etiquetas, las cuales están conformadas por los signos (<,> y /).

En la mayoría de los casos los elementos tienen su etiqueta de apertura y de


cierre. Por ejemplo:

<elemento> Contenido </elemento>

APERTURA CIERRE
Atributos de los elementos
Proporciona información adicional de un elemento (etiqueta o tag). Permite realizar
configurar de forma individual y detallada la funcionalidad en una página web,

Ejemplo:

<a href=”https://www.google.com/?hl=es”>Enlace</a>

ATRIBUTO
Atributos
● class: se asigna una o más clases a un elemento.
● id: se asigna un identificador único a un elemento,
principalmente para referenciarlo con CSS o
JavaScript.
● href: define la URL a la que está apuntando el enlace.
● src: indica la ubicación del archivo que se va a invocar.
● alt: proporciona un texto alternativo para la imagen.
● style: asigna propiedades de CSS a un elemento.
● title: muestra información cuando se pasa el cursor
sobre un elemento.
Etiquetas y estructura HTML
Etiquetas (estructura de html)
● <html> Indica el inicio del código html.
● <head> Es la cabecera de la página web.
● <title> Título de la página.
● <meta> Metadatos como pueden ser licencias o
autorías.
● <link> Uso de hojas de estilo CSS.
● <body> Es el cuerpo de la página web.
● <script> Permite incrustar scripts para agregar
funcionalidades a la página.
Etiquetas para el contenido

● <table> Tabla.
● <thead> Cabecera de la tabla
● <tbody> Cuerpo de la tabla
● <tr> Fila de la tabla.
● <th> Celda de la cabecera de la tabla.
● <td> Celda del cuerpo de la tabla
Etiquetas para el contenido
● <h1> Encabezados desde h1 hasta h6.
● <p> Párrafos.
● <a> Enlaces.
● <table> Tablas.
● <ul> <ol> Listas (desordenadas y ordenadas).
● <li> Elementos de listas
● <strong> Letras negritas
● <em> Letras cursivas
● <img> Imágenes
CSS
Ing. María Elena Ortiz Jiménez
Propiedades del CSS
● color: define el color del texto.
● Font-family: define la familia tipográfica el texto.
● margin: controla el espacio exterior del elemento.
● padding: controla el espacio interior del elemento.
● border: define los bordes de un elemento.
● background-color: define el color de fondo de un
elemento.
● width: define el ancho de un elemento.
● height: define el alto de un elemento.
● z-index: controla el apilamiento de los elementos, es
decir, define el orden en el cual se superponen los
elementos en una página web. El elemento que tiene el
valor más alto es el primero que se va a superponer y por
debajo de él los elementos con menor valor.

Los posicionamiento son:

○ Relative
○ Absolute
○ Fixed
○ sticky
Ejemplo del uso de z-index
.div1 {
position: absolute;

z-index: 1;

.div2 {

position: absolute;

z-index: 2; /* Este div se mostrará encima del div1 */

}
Estructura de los archivos CSS
Tipos de
Valor de la selectores de
Selector propiedad elementos
del
p{
Etiquetas:
elemento p
color: blue;
Clases:

} .clase
Propiedad Identificador:

#identificador
Enlazar archivos CSS
<html>

<head>

<title>Ejemplo</title

<link href=”misestilos.css” rel="stylesheet" type="text/css">

</head>
PUBLICACIÓN DEL SITIO WEB EN INTERNET
PASOS PARA PUBLICAR UN SITIO WEB

DOMINIO ALOJAMIENTO ARCHIVOS


Nombre de la Servidores y/o Subir archivos de la
página web hosting página web

BASE DE DATOS SEGURIDAD PUBLICACIÓN


Configuración de la Implementación de Uso de la página
base de datos la seguridad web en los
navegadores
DOMINIO

Simplemente es el nombre nombre de la


empresa o compañia que se le asignará a
la página web con el cual se publicará en
Internet.
Existen diferentes dominios:
➔ .mx
➔ .com
➔ .net
➔ Etc.

Namecheap Squarspace GoDaddy Hostinger video


ALOJAMIENTO
Namecheap Squarspace Otro otro

Es el repositorio o servidor donde se


alojaran los archivos. Exisen diferntes tipos
de hosting van desde las opciones
gratuitas con sus restricciones, así como
planes con costos específicos, esto va a
depender de las necesidades de la página
o API que se aloje.
ARCHIVOS

En esta etapa se subirán los archivos al


hosting a través del panel de control o en
otros casos con FTP con sus credenciales
correspondientes.

Los archivos que suelen subirse son:


● Html
● Php
● Js
● Css
BASE DE DATOS

Esta etapa puede existir o no, depende


mucho del tipo de sitio web que se
publique. En caso que sí exista la base de
datos se debe de configurar la BD en el
panel de control correspondiente así como
la configuración de los archivos donde se
haga referencia a ella.
SEGURIDAD

Como parte de la seguridad se deben hacer


las pruebas correspondientes para verificar
que los usuarios ingresen solo con sus
credenciales correspondientes y no tener
puertas traseras donde se filtre la
información sobre todo los datos de la BD.
Es importante contar con un certificado de
seguridad en una página web para brindar
protección a los datos o transacciones
bancarias.
PUBLICACIÓN

¡Ahora sí!
Después de haber realizado todas las
etapas y verificar que todo esté
funcionando correctamente los clientes
pueden ingresar al dominio
correspondiente para navegar en la página
web.
En los sigguientes enlaces podrás ver
algunos videos tutoriales de la publicación
del un sitio web con diferentes proveedores.

NetLify Hostinger 000webhost


PROGRAMACIÓN WEB 1
Ing. María Elena Ortiz Jiménez

También podría gustarte