Creating "LOGO" on our website !!

-
In this Chapter, we're going to learn about creating LOGO. 

when you go to website, you see the logo bar on the top or at the bottom,, like Google LOGO even when you search something it remains at every pages. 

How does it happen, should we make a copy of the logo at every single page ?  Django makes things way easier!  

Let's make the logo on our website ! 


First you need to create folder "templates"

I made inside "Newproject" folder where our project is located at. 

and make new file  "home.html"  and put this sentence 

<h1>Home Template</h1>

Also make "room.html" file at the same direction, saying;

<h1>Room Template</h1>

now we have two templates.  we need to return this inside of our views. 

First thing we need to do is let Django know that we have "templates" now. 

project folder 
this is my path;  (mysite/ setting.py) 
 

    we add     "BASE_DIR / 'templates'  " into TEMPLATES

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            BASE_DIR / 'templates'


And going back to the views.py, we actually need to create "render" function, which needs 2 parameters. the parameters are "request" and "specify the template name"  In this case, we have home.html

I deleted HttpResponse and made two function following;

from django.shortcuts import render

# Create your views here.

def home(request):
    return render(request, 'home.html')

def room(request):
    return render(request, 'room.html')
 


Add in a navigation bar, adding all those tags, styling, and then if we change out one link in the navigation bar, we're going to need to go back to all the templates. so we can make inheritance template and include sections of templates inside of other templates. 

I'm going to make another file inside of templates folder, naming "navbar.html" 

<a href="/">
    <h1>LOGO</h1>
</a>

<hr>

<a href>: going to send the user back to the home page we'll just direct to a forward slash and then ; it can be image or letters, especially "LOGO" here 

Now we're going back to home.html, use a template tag curly braces and percent symbols like this 

{% %}  

{% include 'navbar.html' %}

<h1>Home Template</h1>

{% include 'navbar.html' %}
means we're going to  include navbar template into home template.  Let's run the homepage again


You see the "LOGO"  ! 


if you want to make the logo on "/room" page as well , go to the room template and add the same thing,,

Let's make multiple logos here like this  

{% include 'navbar.html' %}

<h1>Room Template</h1>

{% include 'navbar.html' %}
{% include 'navbar.html' %}

and run again !  /room


Now you see "Multiple LOGO" here !  


I'm going to show you how to make them cool next time :) 



Popular posts from this blog

[Python] Dictionary

-
This Chapter, we're going to make basic dictionary.  mondict = {     "1" : "Janunary" ,     "2" : "February" ,     "3" : "March" ,     "4" : "April" } whenever you make dictionary in python, you're going to use open and close curly brackets "{ }" Let's run  print ( mondict [ "2" ]) you get "February"  you can also use "get" function print ( mondict . get ( "2" )) you can specify default value that I wanna use if the key is not found by using get function. so when you run this print ( mondict . get ( "6" )) 6 is not on the list, you're going to get "none"  you can also pass the default value to print out  print ( mondict . get ( "6" , "invalid value" )) and you're going to get "invalid value"
Read more

[Visual Design 2/3]

-
Image
1. Push Elements Left or Right with the float Property The next positioning tool does not actually use position, but sets the float property of an element. Floating elements are removed from the normal flow of a document and pushed to either the left or right of their containing parent element. It's commonly used with the width property to specify how much horizontal space the floated element requires. The given markup would work well as a two-column layout, with the section and aside elements next to each other.  Let me   Give the #left item a float of left and the #right item a float of right. 2. Change the Position of Overlapping Elements with the z-index Property When elements are positioned to overlap (i.e. using position: absolute | relative | fixed | sticky), the element coming later in the HTML markup will, by default, appear on the top of the other elements. However, the z-index property can specify the order of how elements are stacked on top of one another. It ...
Read more

[JavaScript] For loop , Function

-
Image
let fruit = prompt ( "which one you need ?" ) switch ( fruit ){   case "apple" :     console . log ( "1,000" );     break ;   case "Banana" :     console . log ( "500" );         break ;   case "Melon" :     console . log ( "2,000" );         break ;   default :     console . log ( "Sorry, We don't sell that one" ); } prompt 는  그 값의 아래는 전부 불러옴. 예를들어 Banana를 입력했을 깨 500과 그 아래 값들도 모두 불러옴. 때문에 break 를 써줘야함 default는 해당하지 않는 값을 입력했을 때 ..  Function function showError (){   alert ( "Error, Try again" ) } showError (); function sayHello ( name ){   const msg = `Hello, ${ name } ` ;   console . log ( msg ); } sayHello ( 'Mike' ); sayHello ( "Jane" ); "Hello, Mike" "Hello, Jane" function sayHello ( name ){     let msg = `Hello` ;     if ( name ){         msg += ', ' + name ;     }     console...
Read more