From 989309c1686215a4e7d1871601ea40bff12dffd5 Mon Sep 17 00:00:00 2001
From: WhitePeachTea <peng_lei_1021@hotmail.com>
Date: Tue, 3 Oct 2017 11:01:18 -0400
Subject: [PATCH 1/3] Update README.md

---
 README.md | 58 ++++++++++++++++++++++++++++++++++++++++---------------
 1 file changed, 42 insertions(+), 16 deletions(-)

diff --git a/README.md b/README.md
index 6f4b0d5..c5429cf 100644
--- a/README.md
+++ b/README.md
@@ -1,32 +1,58 @@
-# Understanding `a` tags in HTML
+# Adding audio and video in HTML
 
-The `a` tag is a fundamental HTML element responsible for much of the linking goodn ess that makes HTML great!
+ Videos and audios make your website more interesting:)
 
-## Components
-Let's take a quick look at how the tag works:
+ This tutorial is to teach you how to use the `video` and `audio` tag.
+ 
+ So you could add more contexts to your website.
+
+## What is a HTML5 Video?
+
+<a href="https://en.wikipedia.org/wiki/HTML5_video">What is a HTML5 Video</a>
+
+In past, We used plug-in tool such as <a href="https://en.wikipedia.org/wiki/Adobe_Flash_Player">Adobe Flash Player</a> to play video in website.
+But Flash is history now,
+Today we use HTML5 <audio> and <video> element to embed a video in a web page.
+ 
+This is a example for code to add a <video> or <audio> in HTML.
+
+``` html
+  <video width="320" height="240" controls>
+  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
+</video> 
+```
+
+As in any codes, there's a basic structure. Tags `width="" height=''`  adjust the side of containers of video.
 
 ``` html
-<a href="sourceurl">Displayed Text</a>
+<video width="320" height="240" controls>
 ```
 
-As in any tag, there's a basic structure of ```<tag attr="value">content</tag>```. The fantastic, amazing attribute in the `a` tag is `href` -- short for "hypertext reference". The `href` attribute identifies a target URL; when this HTML snippet is displayed in a browser, the browser will direct you to the URL in the href attribute. Let's try it out:
+The tag `autoplay` allows video to play automatically once the website opened
 
 ``` html
-<a href="https://google.com">Google Owns All Your Data</a>
+<video width="320" height="240" autoplay>
 ```
 
-<a href="https://google.com">Google Owns All Your Data</a>
+The `source` tag tell the browser to find the video from the link address you provided. 
 
-As with most HTML tags, the `a` tag accepts a number of possible attributes. Some of them are used only rarely, but you will often see the `target` attribute in the real world. THis allows you to specify where to open the link you click on:
-- `_self` means "open here"
-- `_blank` means "open in a new tab"
-- `_parent` means "if you're looking at an [internal frame](https://developer.mozilla.org/en/docs/Web/HTML/Element/iframe), open this link in the frame's arent tab. Otherwise, just open here like in `_self`
+``` html
+<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">>
+```
+The `type` tag identifies the format of the video. 
 
-## Try it yourself
+``` html
+<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
+```
 
-You can clone this repository and load a local copy of [the tutorial page](./a-tag-tutorial.html) in your browser to see the tag in action. Then make some changes to the file to learn this yourself!
 
-## Learn More
 
-The [Mozilla Developer Network](https://developer.mozilla.org/en/docs/Web/HTML/Element/a) has lots more detail about this and every HTML tag!
+## Youtube Video
 
+In most situations, you would add youtube videos to your website. It is diffcult to add a youtube video by using <video> code.There is more simple way to add a youtube video.
+ 
+Right click to select the "copy the embed code" option.You get codes with tag <iframe>. The <iframe> tag is used to embed another document within the current HTML document.
+
+``` html
+<iframe width="854" height="480" src="https://www.youtube.com/embed/LSxElWwWVFE" frameborder="0" allowfullscreen></iframe>
+```

From cb47b134c5d190090d728638842bddddb3f86e2c Mon Sep 17 00:00:00 2001
From: WhitePeachTea <peng_lei_1021@hotmail.com>
Date: Tue, 3 Oct 2017 11:02:06 -0400
Subject: [PATCH 2/3] Update a-tag-tutorial.html

---
 a-tag-tutorial.html | 87 +++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 84 insertions(+), 3 deletions(-)

diff --git a/a-tag-tutorial.html b/a-tag-tutorial.html
index 7a4e2a1..1b3412c 100644
--- a/a-tag-tutorial.html
+++ b/a-tag-tutorial.html
@@ -5,16 +5,97 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
 
-    <title>a tag tutorial</title>
+    <title>a HTML5 <Video> <Audio> tutorial</title>
 
     <link rel="stylesheet" href="tutorial.css">
   </head>
 
   <body>
-    <h2> The simplest possible HTML page </h2>
+    
+<div>
+  
+  <h>A HTML5 &lt;video&gt; &lt;audio&gt; tutorial</h>
+  
+  <p>By Peng Lei</p>
+  
+<h1>Add video and audio to webpage</h1>
 
-    <p>Try editing the link and the content in <a href="https://www.google.com">this a tag</a>. It's the miracle of HTML! </p>
+  <p> It is pretty simple to insert a video or audio to your website as long as you could provide links.</p>
 
+  <p>The basic code to add a video is this one.</p>
+  
+  <p1> &lt;video width="" height="" controls&gt;
+  &lt;source src="" type=""&gt;
+&lt;/video&gt; </p1>
+  
+  <p>Elements in the code
+    <ul>
+      <li>width/height  - use to adjust the size of video/audio containers</li>
+      <li>source  - links of video/audio from internet</li>
+      <li>type (video)  - there are 3 supported video formats
+        <ul>
+          <li>mp4</li>
+          <li>webm</li>
+          <li>ogg</li>
+          </ul>
+      </li>
+        <li>type (audio)  - there are 3 supported audio formats
+        <ul>
+          <li>mp3</li>
+          <li>webm</li>
+          <li>wav</li>
+          </ul>
+      </li>
+      </ul>
+  </p>
+  
+  <p>Here is a example.</p>
+    
+  <p1> &lt;video width="320" height="240" controls&gt;
+  &lt;source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"&gt;
+&lt;/video&gt; </p1>
+  
+  <video width="320" height="240" controls>
+  <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
+</video> 
+ 
+ 
+  
+
+   <p> The same goes with &lt;audio&gt;.</p>
+    
+    <p1>&lt;audio width="320" height="240" controls&gt;
+  &lt;source src="http://www.noiseaddicts.com/samples_1w72b820/4033.mp3" type="video/mp4"&gt;
+&lt;/audio&gt;</p1>
+      
+  
+<audio width="320" height="240" controls>
+  <source src="http://www.noiseaddicts.com/samples_1w72b820/4033.mp3" type="video/mp4">
+</audio> 
+    
+<p> Try it out on <a href=https://jsbin.com/?output>Jsbin<a/>.</p> 
+  
+    </div>
+    
+    
+
+<div>
+    <h1> The simplest way to add a youtube video </h1>
+
+    <p>Most of the video you need could be find in youtube Channel, and they provided a simplest way to embed to your website by using iframe tag. 
+     </p>
+  <p> Right click to select the "copy the embed code" option.</p>
+  
+  <img src="https://help.tallyfy.com/wp-content/uploads/2016/09/embed-youtube-1024x640.png" height="480" width="640">
+  
+  <p>You get the code like this &lt;iframe width="854" height="480" src="https://www.youtube.com/embed/LSxElWwWVFE" frameborder="0" allowfullscreen&gt; &lt;/iframe&gt;</p>
+  
+  <p>Paste the code in your HTML and here you go</p>
+  
+  <iframe width="640" height="480" src="https://www.youtube.com/embed/LSxElWwWVFE" frameborder="0" allowfullscreen></iframe>
+
+</div>
+  
   </body>
 
 </html>

From 6b8f5171282f412d72af0de278a603b521148461 Mon Sep 17 00:00:00 2001
From: WhitePeachTea <peng_lei_1021@hotmail.com>
Date: Tue, 3 Oct 2017 11:02:47 -0400
Subject: [PATCH 3/3] Update tutorial.css

---
 tutorial.css | 83 ++++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 81 insertions(+), 2 deletions(-)

diff --git a/tutorial.css b/tutorial.css
index 31255d9..837f34e 100644
--- a/tutorial.css
+++ b/tutorial.css
@@ -1,6 +1,85 @@
+h {
+  font-family:Helvetica, Arial, sans-serif;
+  font-size: 32px;
+  line-height: 48px;
+  font-weight: 300;
+}
+
+
 body {
-    font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
+
+    background-color: lightgrey;
+}
+
+ul {
+    font-family: "Times New Roman", Times, serif;
+    font-weight: 300;
+    font-size: 18px;
+    line-height: 48px;
+    color: black;
+}
+
+p1{
+  
+    font-weight: 300;
+    font-size: 16px;
+    line-height: 48px;
+    color: grey;
+}
+
+p {
+    font-family: "Times New Roman", Times, serif;
     font-weight: 300;
     font-size: 16px;
-    line-height: 24px;
+    line-height: 48px;
+    color: black;
+}
+
+
+
+h1 {
+  font-family:Helvetica, Arial, sans-serif;
+  font-style: italic;
+  font-size: 24px;
+  color: #2f4f4f;
+  line-height: 48px;
+  font-weight: 300;
+}
+
+div {
+    width: 1080px;
+    border: 5px solid #ffeeee;
+    padding: 25px;
+    margin: 25px;
+    background-color: white;
+}
+
+p1{
+    font-family:Helvetica, Arial, sans-serif;
+    font-weight: 300;
+    font-size: 16px;
+    line-height: 48px;
+    color: grey;
+}
+
+p {
+    font-family: "Times New Roman", Times, serif;
+    font-weight: 300;
+    font-size: 16px;
+    line-height: 48px;
+    color: black;
+}
+
+html, body {
+    height: 100%;
+}
+
+html {
+    display: table;
+    margin: auto;
+}
+
+body {
+    display: table-cell;
+    vertical-align: middle;
 }