HTML5 and jQuery: Essential Web Development

Posted on Feb 10, 2025 in Computers

HTML5 and jQuery: Essential Web Development

CSS Counters

Example of CSS counters (not valid HTML, just for demonstration):

body {
  counter-reset: chapter;
}

h1 {
  counter-reset: section;
}

h1:before {
  content: "Chapter " counter(chapter) ". ";
  counter-increment: chapter;
}

h2:before {
  content: counter(chapter) "." counter(section) " ";
  counter-increment: section;
}

Responsive Design with Media Queries

Media queries are crucial for creating responsive websites. Here’s a basic example:

@media only screen and (max-width: 600px) {
  /* Styles for screens smaller than 600px */
}

Embedding Media: Images, Audio, and Video

Images

Use the <img> tag to embed images. Always include the alt attribute for accessibility and SEO.

Audio

The correct way to embed audio is using the audio tag:

<audio controls>
 <source src="your-audio-file.mp3" type="audio/mpeg">
 Your browser does not support the audio tag.
</audio>

Video

The correct way to embed video is using the video tag:

<video width="320" height="240" controls>
  <source src="your-video-file.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

HTML5 Form Input Types and Attributes

HTML5 introduced several new input types and attributes for creating more user-friendly and functional forms:

Input Types: color, date, datetime, datetime-local, email, month, number, range, search, tel, time, url, week
Attributes: max, min, maxlength, step

HTML5 Structure

A basic HTML5 structure example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Website Title</title>
  <link rel="stylesheet" href="style.css">
  <link rel="alternate" type="application/rss+xml" href="/feed.rss" />
</head>
<body>
  <header>
    <h1>My Website</h1>
    <p>My website created in HTML5</p>
  </header>
  <nav>
    <ul>
      <li><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li><a href="#">Link 3</a></li>
    </ul>
  </nav>
  <main>
    <section>
      <h2>Content Title</h2>
      <p>Content (including images, quotes, videos, etc.)</p>
    </section>
    <section>
      <h3>Content Title</h3>
      <p>Content</p>
    </section>
  </main>
  <footer>
    <p><span style="color: #333399;">Copyright</span></p>
  </footer>
</body>
</html>

jQuery Fundamentals

jQuery is a fast, small, and feature-rich JavaScript library. It simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.

Here’s a breakdown of common jQuery operations (inside a $(document).ready() function):

$(document).ready(function() {

  // Select elements by class
  $("ul.lista1");

  // Select individual list items
  $(".lista1 li:nth-child(2)");

  // Select elements by attribute selectors
  $("label[for='q']");
  $("input[name='q']");

  // Get the number of elements
  var lista = $("li").length;
  alert(lista);

  // Select odd elements
  $("li:odd");

  // Iterate through elements with .each()
  $("li").each(function(){
    var $elemento = $(this);
    var texto = $elemento.text();
    alert(texto);
  });

  // Get attributes
  var nombre= $("input").attr("name");
  alert(nombre);

  // Add and remove classes
  $("div").addClass("clase1");
  $("div").removeClass("clase1");

  // Get the first and last elements
  var $primero = $("li").first();
  var $ultimo = $("li").last();
  alert($primero.text());
  alert($ultimo.text());

  // Chaining, .next(), and .siblings()
  $("li").first().addClass("clase2").next().addClass("clase3");
  $("li").last().addClass("clase2").siblings().removeClass("clase2");

  // Add elements with .append()
  var inicio = $("li").length + 1;
  var fin= inicio + 5;
  for (i= inicio; i < fin; i++) {
    $(".lista1").append("<li>Element " + i + "</li>" );
  }

  // Remove elements with .remove()
  $("li").last().remove();

  // Add elements with .after()
  $("div").last().after("<div></div>").addClass("clase1");

  // Click event
  $("div").click(function(){
    $(this).addClass("clase4");
  });

  // Move elements
  $("body").append("<div></div>");
  $("div").last().addClass("contenedor");
  $("body").append("<div></div>");
  $("div").last().addClass("clase4");
  $(".contenedor").append($(".clase4"));

  // Hover, fadeIn, and fadeOut
  $("span").hover(function(){
    $(this).addClass("clase3");
  },
  function(){
    $(this).removeClass("clase3");
  });

  $("span").click(function(){
    $(this).fadeOut(4000);
  });

  $(".fade").click(function(){
    $("span").fadeIn(4000);
  });


  // Animate
  $("#animate").click(function(){
    $("#animarse").fadeIn(2000,
    function(){
      $(this).css("background", "blue");
      $(this).animate({
        "height":"300px",
        "top":"100px",
        "left":"200px"
      },2000);
      $(this).fadeOut(3000);
    });
  });


  // Show and hide
  $("#mostrar").click(function(){
    $("#e1").show(4000);
  });

  $("#ocultar").click(function(){
    $("#e1").hide(4000);
  });

  // Slide toggle
  $("#deslizamiento").click(function(){
    $("#deslizar").slideToggle(2000);
  });

  // Other useful jQuery methods and functions (examples):
  // var myVar = setInterval(function(){ alert("Hello"); }, 3000);
  // clearInterval(myVar);
  // .find()
  // .eq(2)
  // Math.floor((Math.random()*100)+1)
  // .val()
  // .text()
  // .css()

});

HTML5 and jQuery: Essential Web Development