Learn HTML Web Design Lesson and Creating Hyperlinks
"Explore HTML web design lessons, understanding hyperlinks, and creating subpages for projects. Dive into coding classes, link structures, and webpage organization to enhance your skills."
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.
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 4 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 saw how you add CSS style for your website. Now let us see how hyperlink works. HTML 3
HTML On your homepage (index.html) under the headline coding, you want to show the users about the scratch project you did in your coding class. You need to hyperlink the section I did a cool project in my coding class to show the user about the project you did. Notice that the hyperlink need to be link to somewhere, so you need to create a page where you need to link it to. So, you have first to create a page that you want to link to. HTML 4
HTML And to create a page, click-on Add file, and you can call the file MyProject.html Make sure the file has an html extension If you click the file, there is nothing in it. HTML 5
HTML You know, every HTML file has the following structure. Write/copy it into your MyProject.html <!DOCTYPE html> <html> <head> <title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> </title> </body> </html> HTML 6
HTML In the title section, put the following: <title> My Project in Scratch</title> HTML 7
HTML In the body section, write the following: <h1> Topics that I learned in Scratch</h1> 1. How to move your sprite.<br> 2. How to spin your sprite.<br> 3. How to change the color of your sprite.<br> 4. How to make your sprite follow your mouse.<br> 5. How to make your sprite dance.<br> <h2> My Project</h2> I did a cool project cat vs mouse tag or Tom chasing Jerry. HTML 8
HTML Now Run it. and see your browser. What change do you see? Nothing right! Because this page is not linked yet! Let us see how to make a link to this page. Open your index.html, and create hyperlink tag to link the subpage that you created HTML 9
HTML Here is how you do link tag. Link tag is <a>, it is a container tag, so it has opening <a> and closing </a> I did a cool <a> project in my coding class</a>. <br> Run it. Nothing happened. HTML 10
HTML The reason is, we didn t specify what file the hyperlink a to link it to. The way you specify the file to link to is as follow: Inside the tag , after the element a you type the variable href = I did a cool <a href = "Project.html"> project in my coding class</a>.<br> Now run it and click the hyperlink. You see it brought us to the MyProject.html subpage. HTML 11
HTML you can also add a hyperlink that allows you to go back to your homepage. To do that, open MyProject.html and add a hyperlink there. <a href="index.html"> Go back to home page </a> HTML 12
HTML To add image on your webpage, you use the following syntax: <img src = > Open your index.html file, and put the following code under About Me. <img src= > Inside the quote mark, you can put the following path as source of your image HTML 13
HTML Inside the quote mark, you can put the following path as source of your image: https://technoroll.org/wp-content/uploads/2021/01/Perfect-Gaming-Setup-.jpg <img src= https://technoroll.org/wp-content/uploads/2021/01/Perfect-Gaming-Setup-.jpg> Run it. HTML 14
HTML If you feel the image is a little big, you can adjust it by adding width = 300 before the closing bracket. <img src= https://technoroll.org/wp-content/uploads/2021/01/Perfect-Gaming-Setup-.jpg width="300"> HTML 15
HTML You can also write it this way: <img src=https://technoroll.org/wp-content/uploads/2021/01/Perfect-Gaming-Setup-.jpg alt = Image of give it a name width="300"> HTML 16
HTML Try the following image paths, put them inside the quote marks https://ep01.epimg.net/elpais/imagenes/2018/07/18/mamas_papas/1531900114_403539_1531 901084_noticia_normal.jpg https://www.pngkit.com/png/full/835-8358791_kids-math-clipart.png https://yolabs.in/wp-content/uploads/2020/08/coding_20200102.jpg And let us know which one you think is cool! Remember <img src= >, and you put the above address inside the quote marks HTML 17
