Scribd
Cargar
23 vistas18 páginas

Parte 2

El documento describe editores de código y su función en la edición de código fuente, destacando Sublime Text 3. También se presenta HTML5, sus etiquetas más utilizadas y la estructura básica de una página web, así como la introducción a CSS para definir estilos. Se enumeran propiedades CSS comunes para modificar la apariencia de elementos en una página web.

Cargado por

juandomingo2107
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
23 vistas18 páginas

Parte 2

El documento describe editores de código y su función en la edición de código fuente, destacando Sublime Text 3. También se presenta HTML5, sus etiquetas más utilizadas y la estructura básica de una página web, así como la introducción a CSS para definir estilos. Se enumeran propiedades CSS comunes para modificar la apariencia de elementos en una página web.

Cargado por

juandomingo2107
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/ 18

Editores de Código

Son programas diseñado específicamente para editar código fuente.


Generalmente los editores de código soportan varios lenguajes y son
capaces de abrir varios archivos a la vez.

Sublime text 3:
https://www.sublimetext.com/3
HTML 5

Es la quinta versión del HTML.


Utilizan etiquetas/tags.
Para abrir crear una etiqueta utilizamos < > (los símbolos "menor
que" y "mayor que") y dentro el nombre de la etiqueta
correspondiente.
Ejemplo:
<body> contenido </body>
Etiquetas y estructura más utilizadas
dentro del body
<header></header>
Define la cabecera de una página o sección. Usualmente contiene un logotipo, el
título del sitio Web y los links para ir a las otras secciones de la página.

<section></section>
Define una sección en un documento.

<footer></footer>
Define el pie de una página o sección. Usualmente contiene un mensaje de
derechos de autoría, algunos enlaces a información legal o direcciones para dar
información.
Etiquetas y estructura más utilizadas para
mostrar contenidos
<h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>,
<h6></h6>
<h1> es la de mayor y <h6> es la de menor tamaño. Elemento
generalmente utilizado para títulos.

<p></p>
Se utiliza para párrafos

<strong></strong> - <b></b>
Se utiliza para textos en negrita.
<video src=” /video/tutorial.mp4”>
Incorporar un video, con la interfaz necesaria para reproducirlos.

<img src=” /imagen/tutorial.png”>


Incorporar una imagen.

<audio src=” /audio/tutorial.mp3”>


Incorporar un archivo de audio.

<iframe src="www.youtube.com/?=afsnan323ml"></iframe>
Incorporar un elemento externo.
<ul>
Se utiliza para hacer un listado, cada elemento dentro estará entre
<li>
<p>hola</p>
</li>
<li>
<p>como andan</p>
</li>
</ul>

<button></button>
Etiqueta de botón
<a href=""file:///C:/Users/DELL/Desktop/curso/estructura
basica2.html">clic aquí para ir a Google</a>
Para ingresar un link ya sea a otra parte de la página o página
externo

<div></div>
Es una etiqueta que por sí sola no tiene ningún atributo
Cascading Style Sheets (CSS)

Hojas de Estilo en Cascada.


Es un lenguaje para definir el estilo o la apariencia de las páginas
web.
podamos cambiar la estética entera de un sitio web, sin tocar para
nada los documentos HTML.
Estructura

<head>
<style>
esta etiqueta es para que el HTML sepa que dentro abra código CSS
</style>
</head>

<h1 style=“ ”>Hola mundo</h1>


Llamamos a lo que queremos modificar por su ID O CLASS
Para id:
#id_algo

Para class:
.class_algo

Se puede llamar a una etiqueta:


H1
Al lado se pone llaves {} y dentro de las llaves ira el CSS que
deseamos asignar.
Ejemplo:
H1{
Propiedad CSS : valor ;
Color: red;
}
Propiedades CSS mas utilizadas

color del texto


color: red;

color del fondo


background: black;

imagen de fondo
background: url(https://happygift.com.ar/img/Fondo-Web-
001.jpg);
tamaño de la letra
font-size: 15px;

grosor de la letra (para darle negrita)


font-weight: bold;

para posicionar los textos


text-align: center;
margen superior
margin-top: 5px;

margen inferior
margin-bottom: 5px;

margen izquierdo
margin-left: 5px;

margen derecho
margin-right: 5px;
espacio de relleno superior
padding-top: 5px;

espacio de relleno inferior


padding-bottom: 5px;

espacio de relleno izquierdo


padding-left: 5px;

espacio de relleno derecho


padding-right: 5px;
ancho
width: 100%;

alto
height: 100%;

bordeado
border: solid black 2px;

darle redondeado a las puntas de borde


border-radius: 10px;
ocultar algo
display: none;

Posiciona los elementos de forma flotante ayudando a que se


ubiquen en la misma línea
float: left;

También podría gustarte