Bandung, Indonesia, October 22, 2020, 15:55PM - Why are videos used on the website? Well, if you are looking for ways to improve your business website then add videos to the website is the answer. Videos are about storytelling, many people prefer to watch videos rather than read an article, am I right? There're many strategies in digital marketing and one of them is video, we combine text with video or maybe picture and video.
People browsing on the internet to get information, but visitors are much engaging with the videos than with static text. So as you can see that youtube has more viewers (means you can get million to billion views in a short time) than blog because a blog is boring blog is a bunch of words so I prefer to watch youtube than read articles on the blog. This is interesting because of research I got an idea, how if I combine videos and text into one animation?
Before we start the lesson, I suggest Download the Video(the smoke effect) as a support file.
HTML
We'll start from the head, the head is the place to put information on your website. Also, we can put many attributes inside the head
1. <meta charset = "UTF-8"> means we're going to create the website to support many other languages, the language I mean is a natural language like Coptic, Sinhala, Phonecian, Cherokee, etc), as well as many non-spoken languages (Music notation, mathematical symbols, APL).so my website, can be flexible and not focus only on a few languages.
2.<meta name = "viewport" content = "width=device-with, initial-scale=1.0"> viewport has a simple function to calculate and measure the different screen size of a device to open the website so the website can estimate the different screen sizes. Content = "width=device-width, initial-scale=1.0" Basically we can see from the words of the set code like width, device, and initial-scale which means we're talking about different screen size. The main function of these codes is the zoom level of the website when the website is opened in different screen sizes.
3. <link rel = "stylesheet" href = "stylec.ss"> this is one of the basic elements in the website to connects one file with other file called an external file to HTML. Usually we connect an external link from google for example bootstrap and an external file in your computers like CSS and JavaScript.
This is the body, the place we used to put content on the website page. You can see that I only put a video Download the Video a
nd a few words in different places.
CSS ( style.css ) external
First, we adjust all the common settings in the local element like the body and the others element inside. We adjust the size, margin, padding, transform in Y-axis, display(we set as inline-block/horizontal).
This is the part to adjust the opacity(transparent/not) and the transform of words in the HTML inside <span>. I adjust them to disappear and then appear at a certain time.
This is the part to adjust the time of word's appear. I put 7 word's in total, so I need 7 timelines in the CSS at a different time to appears. If you want to change the words then you have to adjust them by yourself.
That's all for the lesson
Thank you for reading my blog and see you in the next article
Comments
Post a Comment