Lists, Media, and External Links in HTML

Lists in HTML

Unordered lists <ul>

Ordered lists <ol>

Ordered lists: 3 important attributes:

type="",

start="",

reversed.

 

One CSS property:
list-style-type
 

Lists in HTML

Ordered lists - list-style-type in CSS

Lists in HTML

<dl> - description list

<dt> - description terms

<dd> - description details

Description Lists

Links in HTML

Anchor Tag <a>:

The <a> anchor tag, along with the href attribute, create a hyperlink.

<!-- Adding an absolute URL -->
<a href="https://machinelearningworkshop.com">
  Machine Learning Workshop
</a>

<!-- Adding link fragment identifier -->
<a href="#teachers">Our teachers</a>

<!-- Adding URL + link fragment identifier -->
<a href="https://machinelearningworkshop.com#teachers">MLW teachers</a>

<!-- Open mail app -->
<a href="mailto:hal9000@machinelearningworkshop.com">Email Hal</a>
<a href="mailto:?subject=Join%20me%21&body=You%20need%20to%20show%20your%20human%20that%20you%20can%27t%20be%20owned%21%20Sign%20up%20for%20Machine%20Learning%20workshop.%20We%20are%20taking%20over%20the%20world.%20http%3A%2F%2Fwww.machinelearning.com%23reg
">Tell a machine</a>

<!-- Open call app -->
<a href="tel:8005551212">Call Hal</a>

<!-- links to a downloadable resource -->
<a href="blob:https://jakearchibald.github.io/944a5fc8-fdb3-458a-91ee-cdd5964b6646" download="hal.svg">
  
  
<!-- link to a JavaScript: -->
<a href="javascript:alert('Hello World!');">Execute JavaScript</a>

target property:
_blank
_parent
_self
_top


<!-- Opens the linked document in a new window or tab -->

<a href="https://www.bewebmasters.com" target="_blank">Visit WebMasters</a>


<!-- Opens the linked document in the same frame as it was clicked (this is default) -->

<a href="https://www.bewebmasters.com" target="_self">Visit WebMasters</a>


<!-- Opens the linked document in the parent frame -->

<a href="https://www.bewebmasters.com" target="_parent">Visit WebMasters</a>


<!-- Opens the linked document in the full body of the window -->

<a href="https://www.bewebmasters.com" target="_top">Visit WebMasters</a>

Links in HTML

fragment identifier with <a> tag:

Links in HTML

Links in HTML

iFrame Tag <iframe>:

The <iframe> tag is used to add/embed a document in another document.

<iframe 
    width="560" 
    height="315" 
    src="https://www.youtube.com/embed/kGUOGr37Yg4?si=CIkRiHYs9XyKqrY4" 
    title="YouTube video player" 
    frameborder="0" 
    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" 
    allowfullscreen
        >
</iframe>

<iframe 
    src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d404.47429496545516!2d77.46567808478822!3d23.25112226936742!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x397c43d4e34b978d%3A0x752d37d81bc1ac4!2sWebMasters!5e0!3m2!1sen!2sin!4v1699013109312!5m2!1sen!2sin" 
    title="webmasters" 
    allowfullscreen="" 
    loading="lazy"
    referrerpolicy="no-referrer-when-downgrade" 
    style="border: 0px;">
</iframe>

<!-- 
loading="lazy"
loading="eager" -->

Links in HTML

iFrame Tag <iframe>: referrer-policy

 

Indicates which referrer to send when fetching the frame's resource:

no-referrer - The Referer header will not be sent.

no-referrer-when-downgrade - The Referer header will not be sent to origins without TLS (HTTPS).

origin - The sent referrer will be limited to the origin of the referring page: its scheme, host, and port.

origin-when-cross-origin - The referrer sent to other origins will be limited to the scheme, the host, and the port. Navigations on the same origin will still include the path.

same-origin - A referrer will be sent for same origin, but cross-origin requests will contain no referrer information.

strict-origin - Only send the origin of the document as the referrer when the protocol security level stays the same (HTTPS→HTTPS), but don't send it to a less secure destination (HTTPS→HTTP).

strict-origin-when-cross-origin (default)
Send a full URL when performing a same-origin request, only send the origin when the protocol security level stays the same (HTTPS→HTTPS), and send no header to a less secure destination (HTTPS→HTTP).

unsafe-url
The referrer will include the origin and the path (but not the fragment, password, or username). This value is unsafe, because it leaks origins and paths from TLS-protected resources to insecure origins.

Media Tags in HTML

Media Tags:

  • <img/>

  • <video></video>

  • <audio></audio>

Media Tags in HTML

<img> tag:

<img 
     class="image" 
     src="https://framerusercontent.com/images/gPrYLwg38BGyWaAHDpE9nIvAa1Y.jpeg" 
     alt="MDN Logo" 
     height="300"
     width="300"
     loading="lazy" //eager
/>

Media Tags in HTML

<video> tag:

This is used for rendering videos in HTML,

supported formats: .mp4, .ogg, .webm etc

<video 
   class="video" 
   controls 
   muted 
   autoplay 
   loop 
   playsinline 
   type="video/mp4" 
   preload
   src="https://vod-progressive.akamaized.net/exp=1707462515~acl=%2Fvimeo-prod-skyfire-std-us%2F01%2F828%2F16%2F404141637%2F1729093247.mp4~hmac=b0182af8c59d98846be7a0940e1c5278c7b64f0ce69bb86e8e8d6bc327f6e559/vimeo-prod-skyfire-std-us/01/828/16/404141637/1729093247.mp4?download=1&filename=production_id%3A4076734+%282160p%29.mp4"
   >
</video>

<video 
   class="video" 
   controls 
   muted 
   autoplay 
   loop 
   playsinline 
   type="video/mp4" 
   src="https://vod-progressive.akamaized.net/exp=1707462433~acl=%2Fvimeo-prod-skyfire-std-us%2F01%2F2150%2F8%2F210754025%2F722786077.mp4~hmac=be53a8bd77bb3b5b02505c7bc86bbc184c2f63aa5b19d6f2727270cc420d6e02/vimeo-prod-skyfire-std-us/01/2150/8/210754025/722786077.mp4?download=1&filename=pexels_videos_2903+%281080p%29.mp4"
   >
</video>

Media Tags in HTML

<audio> tag:

This is used for playing audio in HTML,

supported formats: .mp3, etc

<audio 
       controls 
       src="/media/cc0-audio/t-rex-roar.mp3">
</audio>

Transitions and Animations in CSS

Transitions in CSS

div {
  width: 100px;
  height: 100px;
  background-color: gray;
  border: 5px solid black;
  border-radius: 5px;
}

div:hover {
  background-color: skyblue;
}

Transitions:- when value of a property changes on some user action, we can enrich the path to that change

STEP 1:

Create a transition

STEP 2:

Smoothen that transition

div:hover {
  background-color: skyblue;
}

div {
  transition-property: background-color;
  transition-duration: 500ms;
  transition-timing-function: ease-in-out;
  transition-delay: 0s;
/*   transition: background-color 300ms ease-in-out 0s; */
}

Transitions in CSS

  1. Transform functions: rotate(), scale(), translate(), skew()

  2. Shadows: text-shadow, drop-shadow, box-shadow

  3. Filters: like: blur, brightness, contrast, grayscale

  4. etc.

Transitions in CSS

Examples for transition properties:

Transitions in CSS

Useful example for transition delay

Animations with CSS:

.home {
  animation: my2 1000ms linear infinite;
}


@keyframes my2 {
  from {
    background: blue;
  }
  to {
    background: red;
  }
}

@keyframes my {
  10% {
    background: hotpink;
    transform: scale(1.1);
  }
  30% {
    background: green;
  }
  50% {
    background: blue;
    transform: scale(1.2);
  }
  70% {
    background: skyblue;
  }
  100% {
    background: red;
    transform: scale(1.3);
  }
}

Keyframes:

Meant to assign animation states to timestamps, along a timeline.


.my-element {
    animation: my-animation 10s ease-in-out 
      1s infinite forwards forwards running;
}

/* animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
animation-fill-mode: forwards, backwards, both
animation-play-state */

Animations with CSS:

animation-fill-mode -

property defines which values in your @keyframes timeline persist before the animation starts or after it ends:
forwards: The last keyframe will persist, based on the animation direction.
backwards: The first keyframe will persist, based on the animation direction.
both: follows the rules for both forwards and backwards

animation-iteration-count:
defines how many times the @keyframes timeline should run. Can use infinite for looping.

Animations with CSS

animation-timing-function:

animation-play-state:
paused, running etc.

W2_D4

By Yash Priyam

W2_D4

  • 145

More from Yash Priyam