Playback starts YouTube’s embedded player (privacy-enhanced mode).
HOW TO MAKE A WEB PAGE WITH AN IMAGE
ChannelEasy Codes for KidsDescription from the creator
HOW TO MAKE A WEB PAGE WITH AN IMAGE. This is the absolute easiest web page lesson ever, I guarantee it! Please follow these steps:
1️⃣ Go to www.Codepen.io. If you aren't registered at Codepen, please watch this video to see a step by step tutorial of how I register my students for free.
➡Learn HTML with Minka and Bear: Part 1 youtube.com/watch?v=qg-2sCg7SnU
2️⃣ Click on New Pen in your Dashboard. This gives you a new, blank web page to play with and experiment with forever and ever.
3️⃣ Follow the code on the screen.
Here is the lesson on my website if you need it PRINTED or SHARED:
easycodesforkids.com/how-to-make-your-first-web…
4️⃣ Ask your students to change the text in the heading, change the background color, and change the font color. For a list of HTML color names go to w3schools.com/colors/colors_names.asp
5️⃣ Have fun, experiment, ask students to poll each other to see what color combinations are the easiest to read, what are the hardest, which do you like the best, Google logos and why companies like Target and Coca Cola use Red? What is the thought behind using certain colors for brands and online? Can you name the a company and their logo like the Nike Swoosh mark?
The code we are using today is super simple and easy to understand. We start with our basic code structure that we use in all of our lessons which looks like this. *REMEMBER, there are no brackets in this description but we can take a look at the tags.
!DOCTYPE html
html
head
title This is my first web page /title
/head
body
h1 My Web Page about Minka and Bear! /h1
img src="i.imgur.com/fqnVBYB.jpg" alt="Minka facing the camera at 2 years old" height="500" width="600"
/body
/html
*Again, we can't use brackets in this YouTube description so the HTML above is missing its brackets and will look differently in the Codepen. The above is a little glimpse into tags and the way we are formatting our HTML today.
Here is the link in Codepen to experiment and play with in your class: codepen.io/23456SS/pen/povMRrq
👩A little about me:
1️⃣ I am a real mom, ISTE educator, & live in Ohio
2️⃣ I teach kids about animation & coding
3️⃣ My lessons are free for your class use at www.easycodesforkids.com
4️⃣ Watch my videos in your class & complete lessons with me
✔My lessons are for grades 4 and up but I do have younger students!
✔They take about 30 minutes to complete.
They require only the following:
➡Devices with keyboards like Chromebooks, iPads, laptops, Desktops
➡Internet connection
➡Access to the following websites Codepen, w3Schools.com, SCRATCH
➡Access to my website www.easycodesforkids.com Hop onto my website and see the lessons for yourself!
Complete a lesson and another and another and see just how fun and engaging coding can be!
I use my dogs as subject matters to teach kids because kids ❤🐕LOVE dogs. My dogs are 2 year old Alaskan Malamute, Minka, and 4 month old, Bernese Mountain Dog, Bear. It's difficult to make videos for YouTube and find the right background and lighting, but it's just 🤦♀comical to try to film with dogs!
🍖They don't come into the shot unless you bribe them
🤷♀they're always facing the opposite way you'd like them to face
🥊They fight and bicker like kids
🐻Bear constantly tries to chew my microphone I make videos for you, the teacher that wants to teach coding, but doesn't have a lot of time and equipment.
Follow these step by step tutorials and videos and make web pages for me for free! Here is our newest video tutorial series and it has lots of video of Minka and Bear.
Learn HTML with Minka and Bear: Part 1 youtube.com/watch?v=qg-2sCg7SnU
Learn HTML with Minka and Bear: Part 2 youtube.com/watch?v=2qagUhWC0g4
Learn HTML with Minka and Bear: Part 3 youtube.com/watch?v=NZNOamtg0fo
Here are more pictures you may use for free on your web page learning:
i.imgur.com/7jBXBJ6.jpg
i.imgur.com/BPkRwdU.jpg
i.imgur.com/nSd53SP.jpg
i.imgur.com/fqnVBYB.jpg
Need more lessons? Just go to: www.easycodesforkids.com Don't forget to subscribe and ring the bell to see more lessons with Minka and Bear and thank you so much for tuning in!
Show🐕 Minka and Bear some love...✔Subscribe and ❤Like this video.
1️⃣ Go to www.Codepen.io. If you aren't registered at Codepen, please watch this video to see a step by step tutorial of how I register my students for free.
➡Learn HTML with Minka and Bear: Part 1 youtube.com/watch?v=qg-2sCg7SnU
2️⃣ Click on New Pen in your Dashboard. This gives you a new, blank web page to play with and experiment with forever and ever.
3️⃣ Follow the code on the screen.
Here is the lesson on my website if you need it PRINTED or SHARED:
easycodesforkids.com/how-to-make-your-first-web…
4️⃣ Ask your students to change the text in the heading, change the background color, and change the font color. For a list of HTML color names go to w3schools.com/colors/colors_names.asp
5️⃣ Have fun, experiment, ask students to poll each other to see what color combinations are the easiest to read, what are the hardest, which do you like the best, Google logos and why companies like Target and Coca Cola use Red? What is the thought behind using certain colors for brands and online? Can you name the a company and their logo like the Nike Swoosh mark?
The code we are using today is super simple and easy to understand. We start with our basic code structure that we use in all of our lessons which looks like this. *REMEMBER, there are no brackets in this description but we can take a look at the tags.
!DOCTYPE html
html
head
title This is my first web page /title
/head
body
h1 My Web Page about Minka and Bear! /h1
img src="i.imgur.com/fqnVBYB.jpg" alt="Minka facing the camera at 2 years old" height="500" width="600"
/body
/html
*Again, we can't use brackets in this YouTube description so the HTML above is missing its brackets and will look differently in the Codepen. The above is a little glimpse into tags and the way we are formatting our HTML today.
Here is the link in Codepen to experiment and play with in your class: codepen.io/23456SS/pen/povMRrq
👩A little about me:
1️⃣ I am a real mom, ISTE educator, & live in Ohio
2️⃣ I teach kids about animation & coding
3️⃣ My lessons are free for your class use at www.easycodesforkids.com
4️⃣ Watch my videos in your class & complete lessons with me
✔My lessons are for grades 4 and up but I do have younger students!
✔They take about 30 minutes to complete.
They require only the following:
➡Devices with keyboards like Chromebooks, iPads, laptops, Desktops
➡Internet connection
➡Access to the following websites Codepen, w3Schools.com, SCRATCH
➡Access to my website www.easycodesforkids.com Hop onto my website and see the lessons for yourself!
Complete a lesson and another and another and see just how fun and engaging coding can be!
I use my dogs as subject matters to teach kids because kids ❤🐕LOVE dogs. My dogs are 2 year old Alaskan Malamute, Minka, and 4 month old, Bernese Mountain Dog, Bear. It's difficult to make videos for YouTube and find the right background and lighting, but it's just 🤦♀comical to try to film with dogs!
🍖They don't come into the shot unless you bribe them
🤷♀they're always facing the opposite way you'd like them to face
🥊They fight and bicker like kids
🐻Bear constantly tries to chew my microphone I make videos for you, the teacher that wants to teach coding, but doesn't have a lot of time and equipment.
Follow these step by step tutorials and videos and make web pages for me for free! Here is our newest video tutorial series and it has lots of video of Minka and Bear.
Learn HTML with Minka and Bear: Part 1 youtube.com/watch?v=qg-2sCg7SnU
Learn HTML with Minka and Bear: Part 2 youtube.com/watch?v=2qagUhWC0g4
Learn HTML with Minka and Bear: Part 3 youtube.com/watch?v=NZNOamtg0fo
Here are more pictures you may use for free on your web page learning:
i.imgur.com/7jBXBJ6.jpg
i.imgur.com/BPkRwdU.jpg
i.imgur.com/nSd53SP.jpg
i.imgur.com/fqnVBYB.jpg
Need more lessons? Just go to: www.easycodesforkids.com Don't forget to subscribe and ring the bell to see more lessons with Minka and Bear and thank you so much for tuning in!
Show🐕 Minka and Bear some love...✔Subscribe and ❤Like this video.
About this tutorial
Easy Codes for Kids published this 20:58 video tutorial on March 2, 2020. It has been watched 1,877 times on YouTube.
- Channel
- Easy Codes for Kids
- Category
- Education
- Duration
- 20:58
- Published
- March 2, 2020
- Views
- 1,877
- Likes
- 27
Tags
Share
This tutorial in other languages
- FRCOMMENT FAIRE UNE PAGE WEB AVEC UNE IMAGE
- ESCÓMO HACER UNA PÁGINA WEB CON UNA IMAGEN
- PTCOMO FAZER UMA PÁGINA WEB COM UMA IMAGEM
- ITCOME FARE UNA PAGINA WEB CON UN'IMMAGINE
- DEWIE eine Web-Seite mit einem Bild MACHEN
- NLHoe maak je een webpagina met een BEELD
- RUКак сделать веб-страницу с IMAGE
- PLJak zrobić stronę WWW z obrazem
- JAA WEB PAGE WITH ANイメージを作成する方法
- ARكيفية اجراء WEB PAGE مع صورة
- HIबनाने के लिए कैसे एक वेब पेज के साथ एक छवि
- IDCARA MEMBUAT WEB HALAMAN DENGAN GAMBAR