Embedding flash and pdfs used to be common but now linking and using <canvas> or <video> is more common.
There were some security issues.
Now you can still embed a youtube video or a google map. Just make sure to set your Content Security Policy up properly. And serve pages using https instead of just http.
In the early 2000s when we began having enough bandwidth, flash and silverlight brought us inaccessible unsecure multimedia content.
A few years later the HyperText Markup Language 5 (HTML5) specifications brought us the <audio> and <video> elements.
Online Video Providers (OVPs) like Youtube Vimeo and Dailymotion can help solve some;of the worries about bandwidth today. There are also some Online Audio Providers like Soundcloud.
<video src="images/sundogs.webm" controls>
<p>Your browser doesn't support HTML5 video. Here is a <a href="images/sundogs.webm">link to the video</a> instead.</p>
</video>
The <p></p> inside the video tags is called fallback content.
<video width="600" controls>
<source src="images/sundogs.mp4" type="video/mp4">
<source src="images/sundogs.webm" type="video/webm">
<p>Your browser doesn't support HTML5 Video. Here is a <a href="images/sundogs.mp4">link to the video</a> instead.</p>
</video>
If you take the src=”attribute” out and put in <source> tags, the browser will go through each one in order to see if one is compatible.
The type=”attribute” lists the Multipurpose Internet Mail Extensions (MIME Type) of the file. This way the browser can check if it can open that type of file before attempting to open it, which would take longer.
<audio controls>
<source src="images/dogsandcats.ogg" type="audio/ogg">
<source src="images/dogsandcats.mp3" type="audio/mp3">
<p>Your browser does not support HTML5 Audio. Here is a <a href="images/dogsandcats.ogg">link to the audio file</a> instead.</p>
</audio>
All the other attributes used for the <video> element (except width, height, and poster) can also be used with the <audio> element.
For the hearing impaired, or those who want a transcript (or subtitles, or a text description): use the <track> element with a VTT file.
A WebVTT file looks like this:
WEBVTT
1
00:00:02.230 --> 00:00:10.260
This is the first description.
2
00:00:15.260 --> 00:00:27.280
This is the second.
…and here is how to place it inside the <track> element:
<video controls>
<source src="images/sundogs.webm" type="video/webm">
<source src="images/sundogs.mp4" type="video/mp4">
<track src="images/descriptions_en.vtt" kind="descriptions" srclang="en">
</video>
The <track> element can also help you with SEO. Text tracks even allow a search engine to link to a specific time in the video or audio.
The humble (and empty) <img> element needs at minimum a src=”attribute.jpg” to be useful. The src can be either a relative or absolute url just like the href=”http://www.attribute.com” in the <a> or anchor tag.
If your image is in the same directory as the web page it could be this simple:
<img src="bird.svg">
If it’s in an images subdirectory:
<img src="images/bird.svg">
Google recommends that you use an images folder as it reads the folder and filenames for Search Engine Optimization. This is also why you should give your images a descriptive filename.
You could embed the image using its absolute Uniform Resource Locator (URL):
<img src="https://www.example.com/images/bird.svg">
…but that would be a pointless waste of typing and processing. The browser would have to re-check the Domain Name System (DNS) server to look up the Internet Protocol (IP) address again. You’ll almost always keep your images on the same server as your HyperText Markup Language (HTML).
Warning: do not use someone else’s image on your site unless you have written permission, or ample proof the image is in the public domain.
“Hotlinking” steals someone else’s bandwidth. You also don’t have control over what the image could be replaced with.
Note: elements like <img> and <video> are sometimes referred to as replaced elements. This is because the element’s content and size are defined by an external source (like an image or video file) and not by the elements themselves.
The alt=”attribute” is a text description of the image. This is for use with a screen reader or if bandwidth is to slow to load the image. For example:
<img src="images/bird.svg"
alt="the underside of a white bird with its wings spread open">
The easiest way to check your alt text is to misspell your filename. Then the browser will display the alt text instead if the image.
Other reasons to use alt text are:
If your image is for decoration only, include empty alt text so the screen reader doesn’t read out the image Uniform Resource Locator (URL):
<img src="images/background.svg" alt="">
Empty alt text can also be used if the content describes the image enough. This is to reduce redundancy.
If you turn your image into a link use either the link text or the alt text. Not both.
You shouldn’t put text inside an image. But if you can’t avoid doing this, supply the text an an alt attribute.
The main thing is to keep all the content accessible to as many people as possible.
You can use the width and height attributes to set the size of your image.
If you are on Android you could use Photo Resizer HD and save the image as 800×600(svga):
<img src="images/bird-800x600.jpg" alt="the underside of a white bird with its wings spread open"
width="800"
height="600"
This is a good idea as it will leave space for the image while the browser is loading.
However, don’t alter the size of the image using HyperText Markup Language (HTML). This can cause both pixelation and distortion.
It is possible (though not recommended) like a link, to add a title=”attribute” to your image:
<img src="images/bird-800x600.jpg" alt="the underside of a white bird with its wings spread open"
width="800"
height="600"
title="a bird in flight"
Because the title element only works for users with a mouse it is not suggested. Better to put the information in the article itself or in the alt text.
<img src="https://raw.githubusercontent.com/mdn/learning-area/master/html/multimedia-and-embedding/images-in-html/dinosaur_small.jpg" alt="the bones of a rather large bird" title="this title deserves to be accessible"
width="200"
height="171">
Here is one way to make a caption:
<img src="images/bird.svg" alt="the underside of a white bird in flight"
height="400"
width="200">
<p>Here is a dove ascending</p>
…this is OK. But what if there were 50 images and captions? How would a screen reader be able to link them properly?
A better solution is to use the HyperText Markup Language 5 (HTML5) <figure> and <figcaption>:
<figure>
<img src="images/bird.svg"
alt="the underside of a white bird with its wings open"
width="400"
height="800">
<figcaption>A dove ascends from above</figcaption>
</figure>
Captions and alt=”text” should say different things. Captions are visible to people who can see the image. Alt text is in the images’ stead.
A figure doesn’t have to be an image. It can be multiple images, a video a code snippet or a table.
<figure>
<img src="images/bird.svg"
alt="a white bird flying"
height="171"
width="200">
<figcaption>
The dove ascends and alights
</figcaption>
</figure>
If an image has no meaning at all and is purely for decoration, then you can use CSS to render it. For example behind every paragraph:
p {
background-image: url("images/bird.svg");
}
This is easier to place and style in CSS than HTML. However, if you want your image to have meaning, put it in using HTML and give it alt=”text” & a go<figcaption>.
Guesstimates based off the Mozilla Curriculum
So far it took me 120 hours to do 20 hours of curriculum. This does include the Learning How to learn Course though. Not including that I probably take 5 times as long as Mozilla’s estimates. This was done over the course of about 2 months.
So to guess how long the Multimedia module will take me: about the same. Both my previously completed HTML Intro, and the next module on Multimedia are listed by Mozilla to take 20 hours. Therefore it may take me another 100 hours to complete. At about 50 hours per month, that may take me to the end of December.
Long term if things go as they have, it will be January or February of 2021 by the time I finish HTML and move on to CSS. With 2 weeks off for the holidays will mean Februrary or March 2021.
At this rate CSS (being 120 hours) will take about a full year. With time off for Christmas and summer that amounts to 15 months. Projected completion of CSS will be around June 2022.
Java Script, at 180 hours, will take about another year and a half. Taking breaks into consideration, 2 years; around summer of 2024.
Web Forms are listed at 50 hours. Therefore it will be winter early 2025.
Accessibility lasts 75 hours according to Mozilla. That will take me 375 hours and, with breaks, last until Fall of 2026.
Modern tooling, listed at 90 hours, will take me until Fall 2027.
How much will change in 7 years?
Will I be consistent enough to last?
My post on Mozilla’s Discourse:
It would be greatly appreciated if anyone could assess this:
Mozilla’s Original Debugging HTML Article
My Marking Up A Letter Assessment Answer Page
W3C Validator Errors for my Letter
The validator called errors on several <p></p> elements. One was in the <head>. It needs to be there as part of a script. The rest were focussed on closing </p> tags. It seems if you put a list inside a <p> then the closing </p> tag is not properly recognized.
My hunch upon having written this is that if I close the <p> tags before I open the list elements then it may validate.
[Edit:] Yes that fixed it.
The other problem of the <p> in the <head> seems to be unfixable if I want it to work with Internet Explorer and other older browsers.
Also the meta errors are common but I chose to include meta tags for Google Facebook and Twitter.
Based on Mozilla’s Original Article.
Sighted people use color and text size. This helps them see structure. For people with vision impairments, (1 in 20) they need content marked up based on its functionality:
<header>The top part of a site. Usually contains an <img src="philsawa-logo.png" alt="philsawa's logo"> and an <h1>Top Level Heading</h1>
</header>
The <nav> contains the site’s main navigation. Also a search field inside the <form> element.
<nav>
<dl>
<dt>philsawa</dt>
<dd><a href="index.html" title="philsawa's homepage">Homepage</a></dd>
<dd><a href="index006-projects.html" title="philsawa's projects">Projects</a></dd>
<dd><a href="index007-photos.html" title="philsawa's photos">Photos</a></dd>
<dd><a href="index008-social.html" title="philsawa's social">Social</a></dd>
</dl>
<form>
<input type="search" name="q" placeholder="search query">
<input type="submit" value="Go!">
</form>
</nav>
The <main> sometimes has <articles> with <section>s; or <section>s with multiple <article>s. Also sometimes contains an <aside> sidebar.
<main>
<h2>Main Changeable Website Contents</h2>
<article>
<header><h3>Article Title</h3>
<section><p>The first section of the first article.</p></section>
<section><p>Sections can also have multiple articles.</p></section></article>
<aside>
<h2>Aside</h2>
<ul>
<li>En francais</li>
<li>ont vous parle</li>
</ul>
</aside>
</main>
The <footer> usually contains copyright info.
<footer>
<p>Copyright No One, 2020; All rights reversed</p>
</footer>
<div></div> and <span></span> can be used. This can be to target an element for CSS. Beware though as using these clutter your HTML without helping non-sighted readers navigate. Try to only use <div></div> and <span></span> when functionality doesn’t fit into any of the previous categories.
<span></span> is an inline element used to target or separate text:
<p>While picture-walking one needs to be able to see. <span class="accessibility-friendly">Unless one has reduced vision; then you can see better using the images' alt text.</span>
<div></div> is a block-level non-semantic element. Only use it when you can’t think of a better element or if you don’t want to add meaning:
<div class="shopping-cart">
<h2>Shopping Cart</h2>
<dl>
<dt>Glasses</dt>
<dd>$9.99</dd>
</dl>
<p>Total Cost: $13.00</p>
</div>
If you include a heading it can aid screenreader users in finding your <div></div>.
<br> is an empty element that can force a line break. For example in a postal address:
<p>1234 Counting Lane,<br>
West Numbersfield, NB<br>
N0M 3E7</p>
Without the <br> elements, the paragraph would be rendered as one long line. This is because HTML ignores most whitespace.
The empty <hr> element forms a horizontal rule across the page.
<p>Does it all come down to steps?</p>
<hr>
<p>One foot in front of the other.</p>
Does it all come down to steps?
One foot in front of the other.
Using Information Architecture, plan content and links. IA aims for the best possible user experience.
Header & nav
Main content
Footer
All the pages link to each other.
<dl></dl> stands for Description List;
<dt></dt> for Description Term;
and <dd></dd> for Description Definition.
<dl>
<dt>food</dt>
<dd>what you eat</dd>
</dl>
<dl>
<dt>Wow Butter</dt>
<dd>The glue that binds the world together.</dd>
<dt>Rye Flour</dt>
<dd>The glue that binds the pumpernickel together.</dd>
<dt>Water</dt>
<dd>The drink that keeps the world afloat.</dd>
<dd>Only a slight bit blue in color.</dd>
</dl>
The Blockquote:
If an extended section is quoted from elsewhere, wrap it in a <blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"> <em>This</em> is the <strong><em><code><blockquote></code></em></strong> that is being <strong>quoted</strong>.</blockquote>
The Quotation Element:
<p>The quotation element - <code><q></code> - is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote/q">is intended for short quotations that don't need a paragraph break.</q></p>
The Cite Element:
Is meant to mark up the title of a quote. It displays in italic. The Cite element seems like it should automatically be a link. This is not the case. A link must be wrapped around the cite element.
<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote"><cite>MDN Blockquote Page</cite></a></p>
<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
The <strong>HTML <code><blockquote></code> Element</strong> (or <em>HTML Block Quotation Element</em>) indicates that the enclosed text is an extended quote.</p></blockquote>
<p>The quote element - <code><q></code> - is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote/q">intended for short quotations that don't include paragraph breaks</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote/q"><cite>MDN q page</cite></a>.</p>
<p>Hello and welcome to my motivation page. As <a href="http://www.brainyquote.com/quotes/authors/c/confucius.html"><cite>Confucius' quotes site</cite></a> says:</p>
<blockquote cite="http://www.brainyquote.com/quotes/authors/c/confucius.html"><p>It does not matter how slowly you go as long as you do not stop.</p></blockquote>
<p>I also love the concept of positive thinking, and <q cite="http://www.affirmationsforpositivethinking.com">The Need To Eliminate Negative Self Talk</q> (as mentioned in <a href="http://www.affirmationsforpositivethinking.com"><cite>Affirmations for Positive Thinking</cite></a>.)</p>
<abbr title=”Abbreviation”>Ab.</abbr>
There is another element: <acronym>. Basically does the same but it is not supported. Just use <abbr> instead.
<p><abbr title="Mozilla Developer Network">MDN</abbr> sure helps people learn Web Development.</p>
<address></address> is used to mark up contact details or links to such details.
<address>
Chris Mills, The Grim North, UK
</address>
<address> can also contain more complicated markup:
<address>
<p>
Mollie&Ellie Sawa<br>
Phil Sawa's Lap<br>
The Couch<br>
L1V R0M
</p>
<dl>
<dt>Dmail</dt>
<dd>dogs@couch.ca</dd>
<dt>Delephone</dt>
<dd>(555) ERS-PTUP</dd>
</dl>
</address>
If the link below sends one to Ellie’s contact info then it is acceptable too:
<address>
<a href="../contacts/elliesawa.html" title="ellie sawa's contact info" target="_blank">Ellie Sawa's Contact Info</a>
</address>
<p>My Birthday is on April 1<sup>st.</sup></p>
<p>The chemical formula for water is H<sub>2</sub>O.</p>
<code></code> is for marking up generic pieces of computer code.
<pre></pre> is for retaining whitespace like tabs and indents. It is generally used alongside <code>:
<code><pre>
print {
[tab]"halo world?"}
</code></pre>
To mark up a variable use <var>x</var>.
<kbd>alt</kbd>+<kbd>c</kbd> to mark up keyboard and other types of input.
<samp>error line 1</samp> for marking up the output of a computer program.
<p>You shouldn't use presentational elements like <code><font></code> and <code><center></code></p>
<samp>$ could not render</samp>
<time datetime="2020-10-13">Tuesday October 13<sup>th,</sup> 2020.</time>
Just year and month:
<time datetime="2020-10">October 2020</time>
Just month and day:
<time datetime="10-13">October 13<sup>th</sup></time>
Just time, hours and minutes:
<time datetime="14:19">2:19pm</time>
Time with hours, minutes, seconds, and miliseconds:
<time datetime="14:22:12.123">2:22:12.123pm</time>
Date and time:
<time datetime="2020-10-13OT14:24">2:24pm on October 13<sup>th,</sup> 2020.</time>
Date and time with timezone offset:
<time datetime="2020-10-13OT2:34+01:00">2:34 is 3:34 in the next timezone</time>
A specific week number:
<time datetime="2020-W40">The fortieth week of 2020</time>
Wondering if anyone would mind assessing this:
Hyperlinks are what makes the web a web. They link documents, resources, and apps.
<p>Here is a link to <a href="https://philsawa.github.io" title="Serving half-baked examples of webpages" target="_blank">philsawa's homepage</a>
Look at the example above. The title attribute gives information about the link. The target attribute opens the link in a new window.
A title is only revealed with mouse hover. Not available to touch screen users. If the title info is really important, put it in the link text.
<a href="index.html" title="home"><img src="images/og-image.svg" alt="tablety"></a>
Find myself forgetting to use ‘src’ instead of ‘href’ for the img tag.
A Uniform Resource Locator is text that defines where something is on the web.
Into a subdirectory:
<a href="folder/filename.html"><img src="images/og-image.svg"></a>
Into a parent directory:
<a href="../filename.html"><img src="../images/og-image.svg></a>
<a href=”../../../you-can-combine/parent-and-sub-directory-paths”><img src=”../../../../images/og-image.svg></a>
You can link to a specific part of a webpage. Just add an id inside a heading:
<h2 id="tablety's_heading">This is Tablety</h2>
…then reference the id with a hashtag(#):
<a href="#tablety's_heading">About Tablety</a>
Absolute links include protocol and domain names:
<a href="https://philsawa.github.io">home</a>
…”index.html” is not needed because web servers look for that automatically.
A relative URL points to a location that is relative to the file you are linking from:
<a href="../filename.html"><img src="images/og-image.svg" alt="tablety" target="_blank"></a>
If you move any files around in;your directory, you will also need to change the links.
Use clear wording. Don’t use “Click Here” or the word “link”. Make it as short yet unique as possible.
Relative links save server processing time.
If linking to a download or page that requires flash, put that in the link text. You can also specify a “download” attribute:
<a href="files/my.pdf" download="insert-default-filename-here.pdf">Download (pdf, 10mb)</a>
The following link will email with cc, bcc, subject, and body:
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email&body=The%20body%20of%20the%20email"> Send mail with cc, bcc, subject and body </a>Hi wondering if anyone would be so kind as to assess this.
My Webpage Containing Links Assessments 1, 2, & 3
Go here for the more verbose version.
HTML’s main purpose is to give structure and meaning to text.
<h1>This is a Top-level Heading</h1>
<p>This is a paragraph. Yep it is.</p>
There are 6 levels of headings: <h1><h2><h3><h4><h5> and <h6>. Try to separate pages with more than 3 levels of headings though.
For SEO & screen readers we need to show each document has a higherarchy.
<h1>My short story</h1>
<p>I am a statistician and my name is Trish.</p>
<p>My legs are made of cardboard and I am married to a fish.</p>
Semantics means relying on previous experience to tell us what the function of an object is. Instead of using CSS, use HTML to tell people the text’s function. This way the meaning will be also accessible to screen readers and for SEO.
Unordered list:
<ul>
<li>Water;</li>
<li>food;</li>
<li>and sleep.</li>
</ul>
Ordered list:
<ol>
<li>Head east;</li>
<li>turn right;</li>
<li>destination on left.</li>
</ol>
<h1>Quick hummus recipe</h1>
<p>This recipe makes quick, tasty hummus, with no messing. It has been adapted from a number of different recipes that I have read over the years.
Hummus is a delicious thick paste used heavily in Greek and Middle Eastern dishes. It is <em>very</em> tasty with salad, grilled meats and pitta breads.</p>
<h2>Ingredients</h2>
<ul>
<li>1 can (400g) of chick peas (garbanzo beans)</li>
<li>175g of tahini</li>
<li>6 sundried tomatoes<</li>
<li>Half a red pepper</li>
<li>A pinch of cayenne pepper</li>
<li>1 clove of garlic</li>
<li>A dash of olive oil</li>
</ul>
<h2>Instructions</h2>
<ol>
<li>Remove the skin from the garlic, and chop coarsely</li>
<li>Remove all the seeds and stalk from the pepper, and chop coarsely</li>
<li>Add all the ingredients into a food processor</li>
<li>Process all the ingredients into a paste
<ul>
<li>If you want a coarse "chunky" hummus, process it for a short time</li>
<li>If you want a smooth hummus, process it for a longer time</li>
</ul>
</li>
</ol>
<p>For a different flavour, you could try blending in a small measure of lemon and coriander, chili pepper, lime and chipotle, harissa and mint, or spinach and feta cheese. Experiment and see what works for you.</p>
<h2>Storage</h2>
<p>Refrigerate the finished hummus in a sealed container. You should be able to use it for about a week after you've made it. If it starts to become fizzy, you should definitely discard it.</p>
<p>Hummus is suitable for freezing; you should thaw it and use it within a couple of months.</p>
<em>Emphasis <strong>and</strong> Strong Importance</em> can be nested inside each other.
<h1><strong>Important</strong> notice</h1>
<p>On <em>Sunday January 9th 2010</em>, a gang of goths were spotted stealing several garden gnomes from a shopping center in downtown Milwaukee. They were all wearing <em>green jumpsuits and silly hats</em>, and seemed to be having a <strong>whale</strong> of a time. </p>
<p>If anyone has any information about this incident, please contact the police <strong>now</strong>.</p>
<b></b><i></i>&<u></u>are known as presentational elements. They came about before CSS and should no longer be used. Especially underline, as it can be confused with a hyperlink.
Headings and Paragraphs:
<h1>Basic HTML Animals</h1> <p>This is the first paragraph in our page. It introduces our animals.</p> <h2>The Llama</h2>
<p>Our Llama is a big fan of list items. When she spies a patch of them on a web page, she will eat them like sweets, licking her lips as she goes.</p>
<h2>The Anaconda</h2>
<p>The crafty anaconda likes to slither around the page, travelling rapidly by way of anchors to sneak up on his prey.</p>
Lists:
<h1>Looking at lists</h1>
<p>Turn the following list of my favorite vegetables into an unordered list.</p>
<ul>
<li>Cucumber</li>
<li>Broccoli</li>
<li>Asparagus</li>
<li>Pepper</li>
</ul>
<p>Turn the following directions into an ordered list.</p>
<ol>
<li>First knock on the door</li>
<li>When prompted, say the magic word</li>
<li>Wait for at least 5 seconds</li>
<li>Turn the handle and push</li>
</ol>
Emphasis & Strong Importance:
<h1>Emphasis and importance</h1>
<p>There are <em>two</em> things I care about — <strong>music</strong> and <strong>friends</strong>. Someday I might be able to get my <strong>friends interested in <em>each other</em>, and <em>my</em> music!</p>
 | airplane upholstery on Learning How To Learn: Illusio… |
