Main content
Course: Intro to computer science - Python > Unit 1
Lesson 5: Templating webpagesInstructions: Profile page
Apply variables, strings, and user input to personalize a profile page using an HTML template.
How do websites customize the same webpage for thousands of different users?
When you open your profile page on a website, you see your name, your bio, your latest posts, and your notifications. But when your friend opens their profile page, they see the same page layout with data specific to them!
The programmers behind these websites achieve this with templating. When a user opens a profile page, the website fetches a template that describes the page’s general layout and then does some quick fill-in-the-blanks with the user’s profile data.
In this project, you’ll personalize a webpage by filling in a template of your own.
HTML basics
The Internet uses the language HTML to describe the layout of a webpage. We’ve built the HTML template for you, so no need to rush off to the nearest HTML tutorial!
The important thing to know is that HTML uses tags to indicate how content should be formatted. Anything with
<> brackets is a tag, like <p>, <h1>, or <h2>. There’s an opening tag, like <button> and a closing tag like </button>, and then the actual text to be displayed goes in between.You can think of tags like formatting text in a docs app. You select some text and then a format option like Normal text, Title, Heading 1, or Heading 2, and then that changes the default size and bolding of the text you selected. Tags do the same thing - in fact, the
<h1> tag stands for Heading 1!Rendering HTML strings
Rendering is the process of interpreting the HTML tags and then displaying the formatted result as a webpage - it’s what your web browser does every time you load a new page!
As you work on this project, you’ll want to render and test your HTML string as you go.
- Run the program.
- Navigate to the Khan Academy HTML renderer.
- Copy and paste your printed HTML string into the left panel, between the
<body>and</body>tags.
The rendered HTML should show up in the right panel.
Loading user data
Take a look at the provided HTML template and think about what might change on a profile page based on the user.
- Use the
input()function to ask the user for at least three different profile data or settings. - Store the result of each
input()call in a new variable.
You’ll use the entered data to personalize the HTML template to the user. For example, you might ask the user to enter a bio, username, or email - or maybe you ask what their preferred greeting is, so you can make the header display “Hola” instead of “Hello”.
Filling in the blanks
Now it’s time to fill in the template!
- Use your new variables to substitute the values entered by the user into the HTML string.
- Use at least one of the user values in multiple places.
In the code, find the text you want to replace and then concatenate the stored user value into the right place in the string. For example, you might replace all occurrences of the default “guest” with the user’s name.
Remember to only modify the text between the opening and closing HTML tags, not the tags themselves!
More to explore
Add a few new
<p> or <h2> elements to your template, or explore the Intro to HTML/CSS unit to discover more types of HTML tags. Add an <a> element to the template and let the user to personalize the link, or add an <img> element to the template and let the user personalize the image size.Instead of a profile page, re-theme the template as another kind of webpage. Consider how your webpage might be customized to a specific user or use case, and change your questions accordingly.
Want to join the conversation?
Just a question, how is this related to Python and in what way? What will this ever be useful for, and why?(12 votes)
I think this is for integrating python into back-end (server-side) website design. Our browsers (in other words, the front-end) use HTML (for structure), CSS (for style/appearance), and JavaScript (for interactive/dynamic elements). However, I'm definitely not an expert, so take this with a side of salt.(8 votes)
Khanmingo seems confused, now so am I, when I ask a question in this screen it answers as if we are discussing python, which we are, but when I open the link to the HTML renderer and ask it something referring to this page it doesn't link, just says you cant do python in HTML. "Ah, I see where you're coming from! My apologies for the confusion. You're right, the input() function is indeed a Python function. However, we're working with HTML here, not Python.
In a Python program, you could indeed use input() to get information from the user and store it in variables. But in HTML, we don't have the same kind of interactivity.
If you're looking to make your webpage interactive, you might want to look into JavaScript, which is a programming language that can be used alongside HTML to add interactivity to your web pages.
But for now, let's focus on your HTML code. Is there something specific you'd like to change or add? 😊(6 votes)
It's the other way around, you are using HTML in Python. Khanmigo is right, you can't use Python in HTML, but you can use HTML is Python.(1 vote)
when do u plan on actually teaching us how to code in python instead of just giving us a challenge and expecting us to know what to do? (not trying to sound rude just very frustrated rn T.T)(5 votes)
I'm not sure what you mean with code in python, because in those challenges your writing python
They just made this course, and it will be improved upon in the future.(3 votes)
How do you use the input() into the html page(1 vote)
You don't use the input function in the html page, you will use it in the python editor on the following page ("Project"). What they are trying to illustrate is how gathered information is handled in the background, and then displayed in a webpage format.
When you go to the next page and click "Run" with the code that is already entered, it will ask you to enter your first name (in the output window), then it will generate the html code that you can copy and paste into the html renderer. Once you have the foundation for your new webpage profile, you can play around with the python code to gather more information (i.e., more input functions, etc.), or change the webpage appearance in the html renderer. Just make sure that when you change your python code that you run the program again to get your updated html code for the renderer.
I hope this helps!(5 votes)
How do u put a variable in headings?(2 votes)
thanks this helped a lot but should i follow khan academy's html course or something else
?(1 vote)
If you want to learn more about how HTML works, then absolutely check out the course! That said, you don't need to know HTML if you just want to continue with Python.(3 votes)
- What is the easiest way to code in HTML?(2 votes)
why not javascript instead of python or blender(1 vote)- Khan Academy does offer JavaScript, here:
https://www.khanacademy.org/computing/computer-programming/(2 votes)
Hi everyone, I hope you are having a good day! I had a question and I really need some help! For the project, where do I copy and paste the HTML code given by Khan Academy? I tried randomly pasting it but I got an error. Does anyone have any links to code or tips? Thanks so much!!(1 vote)
Copy the HTML code and go to the following link.
https://www.khanacademy.org/computer-programming/new/webpage
Paste the HTML code between the "<body>" and "</body>" tags.(1 vote)
Sub to Gear5Agent on YouTube everyone(0 votes)