Tag: #HTMLBASICS

Posted on

Multimedia Presentation Using HTML (Video And Audio Tracks Explained).

Working with the Iframe, Video, Audio, Track, and its Sources.

NOTE: for the purpose of this information, a value pair attribute looks like this: name="value".  However, a Boolean value attribute looks like this: controls.  A Boolean value is a data type that represents one of two values; true or false.

<iframe></iframe> Element

An Iframe is used to embed one website within another website. In other words, the frame will be located on website A, but the contents of the frame will display the information from website B.

<iframe>
</iframe>
Iframe attributes
  • src – Specifies the url or location of the other website that will be embedded. src=”URL”
  • srcdoc – HTML content of the page to show in the frame. srcdoc=”HTML”
  • name – the name given to the element. name=”TEXT”
  • allowfullscreen – Can be activated to take advantage of full screen mode. (Boolean attribute)
  • allowpaymentrequest – Whether to allow payment request through the Payment API. (Boolean attribute).
  • height – how high should the frame be? (height=”300″)
  • width – the width of the frame (width=”300″).
  • loading – tells the browser to load the frame immediately or to delay loading the iframe until certain conditions are met.
<iframe height="300" width="600" src="https://www.someurl.com/index.html" allowfullscreen="true">
</iframe>

<video></video> Element

The video element is used to embed videos in a web page. This element can use multiple sources to attempt and use the best format based on the browser attempting to display the video.

How does it work? The video element will have multiple source elements inside of the element. The browser will attempt from the top down the first source. If the browser is unable to play that source, then the browser will skip to the next source and attempt to play that video. If that video doesn’t play it will continue doing this until it runs out of sources. Once all sources are exhausted in attempts, the message will be displayed. The text just below the sources will only be displayed if all sources fail to play.

Example:

<video width="300" height="600" controls>
       <source src="movie1.ogg" type="video/mp4">
       <source src="movie2.mp4" type="video/ogg">
      The browser was unable to play any of these video types.
</video>
Attributes for video element
  • width – sets the width of the video player (in pixels). width=”300″
  • height – sets the height of the video player (in pixels). height=”300″
  • autoplay – specifies if the video control should be played. Boolean attribute
  • loop – specifies if the video should be played in a loop. Boolean attribute.
  • controls – tells the browser to display the video controls such play, pause, volume and fast forward. controls=”control”
  • muted – specifies whether to mute the video or not. Boolean attribute
  • poster – provides the option of a image to be shown while the video is downloading. poster=”URL”
  • preload – how the page should load the video and when it should be loaded.
  • src – the URL of the video to play.

<audio></audio> Element

The audio element works similar to the video element in the since that it can too have multiple sources with an error message or warning. The process of playing the audio files works the same as the video file; the browser will try to play each audio file from the top down to see which one will play. If all the audio files fail to play, then the text will be used to display a message on the browser.

<audio controls>
       <source src="URL" type="audio/mpeg">
       <source src="URL" type="audio/ogg">
       We were unable to play your audio file.
</audio>
Audio Attributes
  • autoplay – a Boolean attribute that signifies that the audio will start playing as soon as possible. (Boolean Attribute)
  • controls – a Boolean attribute that signifies that the audio controls should be displayed. (Boolean Attribute)
  • loop – a Boolean attribute that signifies that the audio will start over again on its own. (Boolean Attribute)
  • muted – a Boolean value that defines if the audio should be muted. (Boolean Attribute)
  • preload – how the page should preload the audio.
  • src – the location of the audio file. src=”URL”

<track> Tag

This tag defines a track to be played for an audio or video element. The track tag is placed inside of the video or audio file and tells the browser which track to play with them.

Track Attributes
  • default – enable if preferences don’t override. (Boolean Attribute)
  • kind – specifies the kind of track. kind=”vtt”
  • label – the title of the track. label=”text”1
  • src – specifies where the track is located src=”URL””
  • srclang – the language of the track. scrclang=”lang”
<audio controls>
       <source src="URL" type="audio/mpeg">
       <source src="URL" type="audio/ogg">
       <track src="URL" kind="subtitles" srclang="en" label="English">
       We were unable to play your audio file.
</audio>

<source> tag

The source tag is used to define the location of multiple sources in the audio or video elements. This void tag will state where the actual file is located. The video and audio element can have as may sources are formats are available.

<audio controls>
       <source src="URL" type="audio/mpeg">
       <source src="URL" type="audio/ogg">
       <track src="URL" kind="subtitles" srclang="en" label="English">
       We were unable to play your audio file.
</audio>
Source Attributes
  • src – the location of the audio or video src=”URL”.
  • type – specifies the mime type. type=”MIME-type”
  • media -the media query that sometimes is defined in CSS.
Posted on

Constructing and Analyzing HTML

What is HTML?

HTML stands for Hyper Text Markup Language. HTML is defined by elements or tags. Elements have an opening and closing tag while a tag or void or empty tag is just one tag without any content or a closing tag. These elements tell the browser how to display content on a webpage.

Defining and Understanding Basic Table Elements

<table> element defines an HTML table.  Tables consist of rows and columns.  Tables are used to organize data into a specific manner.
The table element has child elements called table rows <tr> and table data (columns) called <td>.  Additionally it also has table headers <th> which are used to define the headers of a table.

Example:
<table>
       <tr>
           <th>Header 1</th>
       </tr>
       <tr>
           <td>Cell 1</td>
       <tr>
</table>

<table></table>  - Defines an HTML table.
<th></th>        - Defines a table header.
<tr></tr>        - Defines a table row in an HTML table.
<td></td>        - Defines a table data (column).

Table attributes:
colspan="2" - Defines table cells that span more than one column.

Defining and Understanding H1 – H6

<h1> to </h6> elements are used to define headings in HTML.  The headings range from an <h1></h1> being the larges (most important) of the heading to an <h6></h6> being the smallest (least important).  

<h1></h1> - probably should be main heading in any one page and should only be used once.
<h2></h2> - sub heading.
<h3></h3> - sub heading.
<h4></h4> - sub heading.
<h5></h5> - sub heading.
<h6></h6> - sub heading (smallest or least important).

Paragraph HTML element

<p></p> - The paragraph element defines a paragraph.  A paragraph element always starts on a new line and has an empty line just after.  This element is known as a block level element.  

Block level element - an element that always starts on a new line and takes up the entire width of the page whether it needs it or not.

<p>
This is an example of a paragraph element.  Always keep in mind that a paragraph is a block level element, which is greedy.
</p>

Break Tag

<br> - is a tag (void tag) that is used to a line break.  As an empty tag or void tag this tag doesn't have any content.

<p>
This is an example of a paragraph element.  <br> Always keep in mind that a paragraph is a block level element, which is greedy.
</p>
By using the <br> tag the "Always" sentence will now start on the next line but still inside the paragraph element.

Horizontal Rule Tag

<hr> - The horizontal rule tag (void or empty tag) is used to draw a horizontal line across the screen.  While this tag can be styled to define the color, thickness, and even style of the line by default it is just a black think line.

Division Element

<div></div> - The div element is a container which defines a division or section of HTML.  Think of it as a container for HTML and then can be styled using CSS.  In order to style this element, one would need to define a class or id attribute in the opening tag and style the element using those attributes or just just the element name in the selector to style it.

Span Element

<span></span> - The span element is used to markup parts of text.  You can style a word or an entire sentence in a paragraph.  The element can be styled using CSS either by its element name, adding an id attribute, or adding a class attribute.
span {
   background-color: yellow;
}
<---snip--->
<p>
   This is an example of the <span>span</span> element.
</p>

Unordered List Element

<ul></ul>  The Unordered list element creates a list that has no particular order.  The items in the list will be defined by default by bullet points.  Each Unordered list may have as many list items as needed.  List items define the items in the unordered list.
<ul></ul> - Defines that an unordered list.
<li></li> - Defines a list item.

<ul>
    <li>Bananas</li>
    <li>Oranges</li>
    <li>Grapes</li>
</u>

Ordered List Element

<ol></ol> The ordered list will create a list of items that have an order.  The items are defined either by a numerical value, alphabetical value, or Roman numeral value.  Ordered lists also have list items that are defined by <li></li>

<ol></ol> - Defines an ordered list.
<li></li> - Defines the list item.

<ol>
    <li>List item 1</li>
    <li>List item 2</li>
    <li>List item 3</li> 
</ol>