Learn HTML Web Design Basics: Youth Code Now, Inc.

Slide Note

Youth Code Now, Inc. introduces basic HTML web design concepts through lessons in this insightful content. Explore the fundamentals of web development, understand browser rendering, and learn the impact of HTML tags on content presentation. Discover how proper tagging enhances the layout and readability of your web pages.

jeliz Follow

Uploaded on Mar 20, 2025 | 0 Views

Download Presentation

Please find below an Image/Link to download the presentation.

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.

You are allowed to download the files provided on this website for personal or commercial use, subject to the condition that they are used lawfully. All files are the property of their respective owners.

Download Presentation

The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author.

E N D

Presentation Transcript

Youth Code now, Inc. Youth Code now, Inc. HTML web design Lesson 3 HTML

HTML Now, you need to go to your Replit account. 1. https://replit.com 2. Click the log in icon, (it s on the top right-side corner) 3. Enter your username and password HTML 2

HTML Recap: Last time We wrote the following phrase Are you a Youth Code Now student, and tell us about what you like? Coding What did you enjoy about Youth Code Now after school program? What did you learn at your after-school program? HTML 3

HTML And we Run the file and viewed it. What did you observe? In your html file, these four sentences are on different paragraph. But, in the web browser those four sentences merged, and we see only one big paragraph. Why? Because web browsers ignore white space. White space helps separate paragraphs of text. HTML 4

HTML The web browser is going to display content as best it can fit your window unless you give it some instructions and those instructions can come in the form of HTML tags. Let s add these instructions: Let s wrap About me with a headline: <h1>About Me</h1> Let s wrap the next sentence with a paragraph: <p>Are you a Youth Code Now student, and tell us about what you like?</p> HTML 5

HTML Let s wrap Coding with a headline: <h2>Coding</h2> Let s wrap the next sentence with a paragraph: <p>What did you enjoy about Youth Code Now after school program? What did you learn at your after-school program?</p> HTML 6

HTML Now Run it. and see your browser. What change do you see? ANS: This page looks different, right? The text that we wrapped inside of this h1 element is now shown in big bold letter, so what the h1 tag does is it creates a headline. And what the p element does is, it separates the paragraph. HTML 7

HTML If you want to create a new line, you can use the element br. Example: Type the following: <h2>Math</h2> How do you use Math in everyday?<br> Do you use it to play games? <br> Do you use it to count score when you play games? <br> Tell us how else you use Math? HTML 8

HTML Now, Run it! What does <br> does? It tells the web browser to wrap the text to the new line. Note that the element inside the brackets give the browser some guidance as to how to display the content within the tags but they themselves (the tags) are not actually showing up on your page. HTML 9

HTML I want to turn the word Math bold in the above statement How do you use Mathin everyday? The HTML tag for bold is <b> </b> or <strong> .</strong> Now change your code in your index.html to this: do you use <b>Math</b>in everyday? Do you use it to <strong> play games </strong>? Run it and see your browser. Do you see the change you made? The content within the strong tag (which is play games) or the b tag (which is Math) is displayed in bold. HTML 10

HTML You can also put contents in italics by wrapping the texts in em (stands for emphasis) tags. Type the following code in your index.html I like to eat <em> cake and icecreams </em>. <br> Run it. What change do you see? As you have seen so far, with HTML markup you can guide the browser how you want to display texts on your page. HTML 11

HTML You see that your web page has no background colors, and all texts are black color. So now let us see how to make your webpage more stylish using CSS. HTML 12

HTML Style.css is what makes our website pretty. Click on the style.css (found at your left-hand side ). Of course, there is nothing in yet there. let us put some code into it, to make your website look nice and cool. HTML 13

HTML The first section in your CSS file that you are going to include is body. Write the following codes: Body { When you open the curly bracket, replit will close the curly bracket for you, so you just need to hit the enter key. Inside those bracket, you will type the styles you want to reflect in the body of your web page. HTML 14

HTML Let s type the following: To change your font, you need to type font-family: In fact, as soon as you type font replit provides you a menu to choose from, and you can select font-family: So, you have the option to type it fully, or you can type the first few letters and then choose from the drop-down menu HTML 15

HTML So, I am going to put the font Tahoma within a quote mark and end it with semicolon. Statement in CSS must end with semicolon. Body { Font-family: Tahoma ; } then Run it HTML 16

HTML Let us also change the color of the font, and the background body { font-family: Tahoma ; color:aqua; background-color:blue; } HTML 17

HTML Run this file and view it. What do you observe? HTML 18

HTML You can also change the heading color, align it to center/left/right, and make the font a little bigger, or smaller h1 { color:brown; text-align:center; font-size:3ex; } HTML 19