 Hello. Let's get started. Hi. Welcome, everyone. Get ready for an exciting adventure into web development. Today, we'll learn about web design and coding where you'll create your own digital world. It's a journey that will unlock your creativity, problem-solving skills, and show you the incredible possibilities of the online world. So join me and Tita Spencer as we explore HTML and CSS, the languages that will make you web developers. Welcome to Kids Camp at WordCamp Ileilo, where imagination meets technology. Okay. I'm very excited to be here with all of you for today's adventure into the world of web development. My name is Jaycee Palmes, and I'll be one of your guides on this journey. As a web developer and engineering manager at Web Dev Studios, I've been fortunate to work with amazing teams in creating awesome websites. Technology has always fascinated me, and today I'm thrilled to share my knowledge and help you explore the exciting world of web development. So let's dive in together and let our creativity shine as we learn HTML and build our very own digital masterpieces. So hold on to those blank papers. If you have laptops that would be okay, I've prepared the paper for you so that you'll know exactly. Because writing gives you better, well, it helps you remember. So we'll draw, we'll write, and you'll learn. Before we begin our journey into web development, let's learn about two very important words. HTML and CSS. HTML or hypertext, markup language, is like the blueprint or the skeleton of a website. It helps us organize and structure content, just like walls and rooms in-house. Listen carefully, kids. There will be a quiz later, and you'll know what. CSS on the other hand or cascading style sheets is like the magic paint and decorations for the web. It makes websites look beautiful with colors, fonts, and stylish arrangements. So HTML gives structure while CSS adds visual appeal. Together, they let us create amazing websites. Okay, so building a web page is like constructing a house. But instead of bricks, we use special instructions called tags. These tags act as building blocks, telling computers how to display different things on the web page. Just like a house has walls and windows, a web page has tags for headings, paragraphs, and images. For example, the H1 tag. Let me see. Do I have H1 here? No, I don't. But it's exactly like this. You have this and then H1. That one that stands for heading. So the H1 tag acts like the main entrance, making a big statement at the top. The P tag or the paragraph tag creates walls of text, and the image tag adds pictures like windows of a house. And with these tags, we can build our very own digital house on the internet. It's a virtual space for people to visit and explore. The head and structure. So a an HTML document is like a house with different parts. The head section is the brain, holding important information or instructions for the web page. The body section is where the fun happens. With headings, paragraphs, images, and links, both sections work together to make your web page look great and provide information. Remember, the head is the brain and the body is the heart of your web page. And there is only one head and one body for each website. Website page, web page. Hey, HTML elements. So just like building blocks come together to construct a house, web pages are created using special building blocks called HTML elements. These elements are like puzzle pieces that fit together to form the content and structure of a web page. In HTML, each element is represented by tags, which act as labels telling the computer how to treat that specific piece of content. And HTML element consists of an opening tag. An opening tag is this or opening or the start tag. I should have bought a pointer, right? But that's okay. Where was I? Yeah, and the, well, opening tag, the content itself, and then the closing tag. It's similar to a sandwich where the opening tag acts as the bread on one side. The content is the tasty filling. And the closing tag is the bread on the other side, keeping everything neatly enclosed. So I'll teach you more about this HTML elements later doing a workshop. But by combining and using this them creatively, we can build web pages that are informative and visually appealing, just like constructing a unique and beautiful house. Okay, so in house walls divide rooms, right? Right? I can't hear you, right? Nice. So those rooms create different spaces with specific purposes. Can you give me an example of a room in a house, anyone? Bedroom. Very good. So in HTML, we use special tags to divide and organize content on a web page. So to write regular tags on a web page, we use the p tags or the paragraph tag. And this p tag acts like walls separating paragraphs. They help break down information into manageable shallots, making it easier to read and understand. Headings, on the other hand, self-headings. Each one and each six are heading tags. Each one to each six are heading tags. These headings act like signs on the doors of different rooms. They indicate the topic of or importance of each section. So HTML provides different levels of headings using each one to each six, where the each one heading is the biggest and most important, while the each six heading is the smallest. So in a house, where would the each one heading be? Anyone? Living room. Yeah. Front door living room. So it's the sign at the top of the door. Where would the each six heading be? Yeah. Sure. That works. So by using these tags, we can create paragraphs for text and headings to organize our content. It's like designing walls with rooms and labeling them with signs. Okay, so HTML is a special language for building web pages. As I mentioned before, it has special tags that acts like doors and windows. So imagine a web page. It's like a house, and links are like doors. When you click on the link, it's like opening a door and going into a different room or a different web page. So links help us explore and find more information on the internet. Now imagine, the web pages are also like rooms in a house. Images are like windows into these rooms or in these rooms. With the image tag or the IMG tag, I don't have that there. I'll teach you that later. We can add pictures or graphics to our web pages. It's sort of like looking through a window and seeing something interesting or beautiful. Images make our web pages look nice and help us show information with pictures. So with HTML, we can make doors with links and windows with images. This makes our web pages fun to explore and they look great. CSS. So CSS is a magical tool that transforms our web pages just like colors, decorations and furniture make a house beautiful. With CSS, we have the power to change colors, fonts, sizes, layouts of our web pages. It's as if we have a magical paintbrush that completely changes the look and feel of our digital house. We can select vibrant colors, elegant fonts and arrange elements in a visually appealing way. So by applying these different styles using CSS, we can make our web pages unique and attractive. It's similar to adding personal touches and making our digital house reflect our creativity and taste and we are going to do that later. You're going to write your code on paper and then we're going to use my laptop to make those codes that you write on paper appear digitally. Okay, so it's time to put everything that I told you about earlier that hopefully you've learned because I'm going to ask questions later. We're going to practice and build our own HTML house from scratch. First, we'll lay solid foundation. Using special tags to structure pages, then we'll add walls and grooms by using headings, paragraphs and lists to organize the content. And next, we'll add doors and windows to make them interactive and visually appealing. We'll create links with the eight tag and insert images using the IMG or the image tag to bring the page to life. So let me just go back to the slide before. So with HTML, this is the house that you get. But with CSS, that is the house that you get. I could not find an image with a complete color, but we're going to do that later. But that's basically how CSS transforms HTML or your web page. Okay, so with CSS later, we're going to add colors, fonts and styles to make your page uniquely yours. And by the end of the workshop, you'll have built a cool web page that showcases your creativity and new HTML and CSS kills. So get ready to roll up your steves because after Peter Spencer's talk, we'll dive right into the workshop. Hopefully you learned something from what I've just said. Did you? What did you learn? I didn't get any. Nice. I need to give him a wapoo, right? How are you? So before we get Peter Spencer to do his talk, do you have any questions? Everything is clear to you because we are going to do our workshop later. All good. Nice.