Class notes

APRENDE PROGRAMACIÓN - HTML , CSS, JavaScript , PYTHON

4 views 0 purchase

Course
Programación ()

Institution
National University Of General San Martín (UNSAM )

¿Quieres dominar HTML, CSS, JavaScript y Python desde cero hasta nivel experto? Estos apuntes completos te guiarán paso a paso con ejemplos, explicaciones detalladas y ejercicios prácticos. Ideal para estudiantes, profesionales y autodidactas que deseen aprender a programar o mejorar sus habilid...

[Show more]

Preview 4 out of 52 pages

View example

Uploaded on November 27, 2024
Number of pages 52
Written in 2024/2025
Type Class notes
Professor(s) -
Contains All classes

html
python
css
javascript

Institution
National University of General San Martín (UNSAM )
Course
Programación ()

$10.49

Added

Add to cart

Add to wishlist

100% satisfaction guarantee
Immediately available after payment
Both online and in PDF
No strings attached

HTML (Lenguaje de Marcado de Hipertexto)

1. Estructura Básica de un Documento HTML
Todo documento HTML tiene una estructura esencial, como esta:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Título de la página</title>
</head>
<body>

</body>
</html>

Explicación:

1. <!DOCTYPE html>: Indica que el documento es HTML5.
2. <html>: Contiene todo el contenido del documento.
3. Atributo lang="es": Define el idioma del contenido.
4. <head>: Contiene metadatos (no visibles en la página).
5. <body>: Contiene el contenido visible en el navegador.

2. Principales Etiquetas HTML y su Uso
2.1. Encabezados

Los encabezados (<h1> a <h6>) organizan el contenido jerárquicamente.

Ejemplo:

<h1>Este es un título principal</h1>
<h2>Este es un subtítulo</h2>
<h3>Encabezado de tercer nivel</h3>

2.2. Texto y Párrafos

● <p>: Define párrafos.
● <br>: Salto de línea.
● <strong> y <em>: Negrita e itálica semántica.
● <mark>: Resaltar texto.
● <code>: Muestra texto como código.

,Ejemplo:

<p>Este es un párrafo.</p>
<p>Texto con <strong>negrita</strong> y <em>cursiva</em>.</p>
<p>Texto <mark>resaltado</mark>.</p>
<code>console.log('Hola, Mundo');</code>

2.3. Listas
Listas ordenadas (<ol>):

<ol>
<li>Elemento 1</li>
<li>Elemento 2</li>
</ol>

Listas no ordenadas (<ul>):

<ul>
<li>Elemento A</li>
<li>Elemento B</li>
</ul>

Listas de definición (<dl>):

<dl>
<dt>HTML</dt>
<dd>Lenguaje de marcado.</dd>
<dt>CSS</dt>
<dd>Lenguaje de estilos.</dd>
</dl>

2.4. Enlaces

Los enlaces (<a>) conectan documentos o recursos.

Ejemplo:

<a href="https://example.com">Visita Example</a>
<a href="#seccion2">Ir a la sección 2</a>
<a href="archivo.pdf" download>Descargar PDF</a>

, ● Atributos importantes:
○ href: Define la URL.
○ target="_blank": Abre en una nueva pestaña.
○ download: Descarga el archivo.

2.5. Imágenes

Las imágenes se insertan con <img>.

Ejemplo:

<img src="imagen.jpg" alt="Descripción de la imagen" width="300" height="200">

● Atributos importantes:
○ src: Ruta de la imagen.
○ alt: Texto alternativo.
○ width y height: Dimensiones de la imagen.

2.6. Tablas

Las tablas permiten estructurar datos tabulares.

Ejemplo básico:

<table border="1">
<thead>
<tr>
<th>Nombre</th>
<th>Edad</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ana</td>
<td>25</td>
</tr>
<tr>
<td>Juan</td>
<td>30</td>
</tr>
</tbody>
</table>

Explicación:

, ● <table>: Define la tabla.
● <thead>, <tbody>, <tfoot>: Cabecera, cuerpo y pie.
● <tr>: Define filas.
● <th>: Define encabezados de columnas.
● <td>: Define celdas.

2.7. Formularios

Los formularios permiten recolectar datos del usuario.

Ejemplo básico:

<form action="procesar.php" method="post">
<label for="nombre">Nombre:</label>
<input type="text" id="nombre" name="nombre">

<label for="edad">Edad:</label>
<input type="number" id="edad" name="edad">

<button type="submit">Enviar</button>
</form>

Atributos importantes:

● action: URL a la que se envían los datos.
● method: Método HTTP (get o post).

2.8. Multimedia
Audio:

<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Tu navegador no soporta audio.
</audio>

Video:

<video controls width="640" height="360">
<source src="video.mp4" type="video/mp4">
Tu navegador no soporta video.
</video>

The benefits of buying summaries with Stuvia:

Guaranteed quality through customer reviews

Stuvia customers have reviewed more than 700,000 summaries. This how you know that you are buying the best documents.

Quick and easy check-out

You can quickly pay through credit card or Stuvia-credit for the summaries. There is no membership needed.

Focus on what matters

Your fellow students write the study notes themselves, which is why the documents are always reliable and up-to-date. This ensures you quickly get to the core!

Frequently asked questions

What do I get when I buy this document?

You get a PDF, available immediately after your purchase. The purchased document is accessible anytime, anywhere and indefinitely through your profile.

Satisfaction guarantee: how does it work?

Our satisfaction guarantee ensures that you always find a study document that suits you well. You fill out a form, and our customer service team takes care of the rest.

Who am I buying these notes from?

Stuvia is a marketplace, so you are not buying this document from us, but from seller mayragutierrezc04. Stuvia facilitates payment to the seller.

Will I be stuck with a subscription?

No, you only buy these notes for $10.49. You're not tied to anything after your purchase.

Can Stuvia be trusted?

4.6 stars on Google & Trustpilot (+1000 reviews)

60904 documents were sold in the last 30 days

Founded in 2010, the go-to place to buy study notes for 14 years now

Start selling

Popular Universities in the United States

Popular books

Find notes and summaries for these qualifications

Seller