The basics of HTML (it’s pretty cool)

July 26, 2020August 2, 2020 by Elizabeth, posted in Something Cool

Sup peoples!

Soooo, you’ve decided to learn some HTML (aka HyperText Markup Language), huh. How cool is that. VERY MUCH c00l. What is HTML, you may be wondering. Basically, it’s the structure of a web page. You know those websites that we ever so often go to as we’re on the google. YUP THOOOOSE! I know.. pretty mind blowing and cool. Okay, so, aside from being the literal skeleton of all web pages (woah), HTML is what lets you (the user) see those images, texts, videos, etc. YOU KNOW WHAT’S EVEN FLIPPING COOLER?? Wait, I need a sec to compose myself, I’m not screaming, I’m just excited.

…

Okay, back to what I was saying. You’re about to learn some HTML basics (aka the first step when creating a website). YOU READY??!! Let’s goo:

What you need:

First offff, you’ll need two programs: an editor and a browser.

Here’s a few examples you can use for an editor:

CodePen

Online website. CodePen is social development environment where you can build and test your code, learn and discover other people’s projects, and more! You can use this as your online editor to start coding! This one already has the editor and the output it will show for the code you put 🙂

Visual Studio Code

Free and open source code editing software! This is the one I use majority of the time and it’s pretty good.

Sublime Text

Sublime Text is one of the best editors, in my opinion. However, I think that after a certain period, you’re going to need to pay to continue using this one.

A browser is used for viewing and testing your website, a few examples for a browser: Google (I recommend using this one), Safari, and Firefox.

HTML Element Anatomy:

quick side note: HTML is made of elements. Majority of the time (not all of the time tho!!) an Html Element consists of two tags (one opening and closing tag).

Here’s a lil diagram to show a paragraph element:

mini breakdown of <p> element (psst it’s the image above hehe) anatomy:

Element name:

This is the name of the element you are using. In our example, we used a <p> element, this would change if you were putting a video, image, header, etc.

Opening tag:

This would have the name of the element, in the example above its p. The name of the element is wrapped in an opening and closing angle bracket.

Element Content:

This is the content of your element. In our example, it’s the text saying: ur cool (which you are very much so btw).

Closing tag:

Although not all elements have a closing tag (such as an image element), in the case of the <p> element there is one. It’s almost exactly like the opening tag EXCEPT it has a forward slash before the element name.

HTML Document Basics To do (to do, to do, to do, to do, to doooo):

To tell the browser that the document you are uploading is a HTML document, start the first line with: <!DOCTYPE html>

To start and end the html document, you wrap all the content with the <html> element.

Inside the <html> document, there are two sections: head section and body section.

About the head section: uses the <head> element. Inside this section, put <meta charset=”utf-8“>, this element indicates and sets the character of your document. Aside from the <title> element which sets the title of your page, another thing I want to mention is that the information put in the head section does not appear to your page’s viewers.

About the body section: uses the <body> element. This part of the html document has all the content you want to show to your website user.

Headings:

There are six different headings. These headings have a lot of different purposes such as for articles, descriptions, titling, and more. Ordered from largest to smallest in size, here are the list of heading elements:

\\ Code:

<h1> This is what the header looks like using h1 </h1>

\\ Output:

This is what the header looks like using h1

\\ Code:

<h2> This is what the header looks like using h2 </h2>

\\ Output:

This is what the header looks like using h2

\\ Code:

<h3> This is what the header looks like using h3 </h3>

\\ Output:

This is what the header looks like using h3

\\ Code:

<h4> This what the header looks like using </h4>

\\ Output:

This is what the header looks like using h4

\\ Code:

<h5> This is what the header looks like using h5 </h5>

\\ Output:

This is what the header looks like using h5

\\ Code:

<h6> This is what the header looks like using h6 </h6>

\\ Output:

This is what the header looks like using h6

Paragraphs:

This element is defined with the <p> tags. This is a paragraph.

\\ Code:

<p> hallo u amazing human </p>

\\ Output:

hallo u amazing human

Divs:

A div (aka division, element, or a container) is the most usable tag in web development and it is used to separate out data in the web page and group elements in your HTML together which can later be styled with CSS. A div can contain any HTML elements, such as links, texts, images, or videos. A div is usually given a unique id to distinguish it from other div elements.

Attributes:

Attributes are used for putting more information for an item and expanding an element’s tag. Attributes are added to the opening tag of an element and include a name and a value. There should be a space between the attribute and element. The attribute name should be followed by an ‘=’ sign. The attribute value should be wrapped by an opening and closing quotation mark.

Lists:

There are ordered lists and unordered lists. Unordered lists are lists where the order of the list doesn’t matter, these types of lists are wrapped in a <ul> element. On the other hand, an ordered list have an order that matters and is wrapped in a <ol> element. After declaring what type of list you want, each item inside the list is wrapped in a <li> (aka list item) element.

unordered list

\\ Code:

\\ Output:

ordered list

\\ Code:

\\ Output:

Image:

IMAGES!! To add an image to a web page you will be using the <img> element. HOWEVER this element is lil bit different because it doesn’t have a separate closing tag. It actually has a self-closing tag. I’ll show what this means in the example below. An <img> element contains these attributes:

src

The src should be set to the image’s source, URL, location, or file name.

alt (aka alternative text)

This is a description for the image. If the photo is not loading properly or the user of your website is visually impaired the alt attribute is a descriptive text that will help in those cases. It also helps with SEO (aka Search Engine Optimization).

Video:

Aside from images, you can also add videos using HTML! To add a video you will need to use the <video> element. There is a closing and opening tag. The attributes for a video are these: src, width, height, and controls (allows for basic video controls like pause, play, and skip).

tip: indentation is great for organization and you should really use it in your code!

Okie dokie 🙂 that’s going to be allll for now peeps! Hope that you found this useful and fun hehe. Now, go make a file on your editor, write some code, experiment, save the file (making it end it .html), and test it out on a browser!

Yours truly,

L.O.A.S.H

PROject Python | Blackjack (#extremely.cool.it’s.kinda.unbelieveable,just.saying)

June 16, 2018June 16, 2018 by Elizabeth, posted in fun, How to...., Interesting stuff, Programming, Project, Something Cool, You can.

Quote of AWESOMENESS: “Thinking is already a conversation” ~ Paul Pangaro

Hey there!

I know it’s been awhile but here I am with another Python project. Today, you will be learning the code for blackjack! Just put it out on your editor, study the code, and explore the game on your terminal. It was quite some challenge getting toward the end of finishing up the game. And, at some point, problems and bugs constantly came up that I didn’t that it would actually get done. BUT, nevertheless, it’s finally hereeee!!

*ahem, drum rollllllllll*

*cricket sounds*

*Umm….. DRUMMM ROLLLL!!!……. please?*

*DRUM ROLLLLLLLLLL (in the background, finally)*

TADA!!!!:

#import the random library from python
from random import *


#Function Definitions 
def deal_from_deck(deck):
    if len(deck)<1:
         create_deck(deck)
         shuffle_deck(deck)
         deal_cards()

def deal_cards(deck):
    return deck.pop(0)

def define_cards(n):
    rank_string = ("ace", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "jack", "queen","king")
    suit_string = ("clubs", "diamonds", "hearts", "spades")
    cards = []

    for suit in range(4):
        for rank in range(13):
            card_string = rank_string[rank] + " of " + suit_string[suit]
            cards.append(card_string)
    return cards[n]

def create_deck(deck):
    for i in range(52):
        deck.append(i)
    return

def shuffle_deck(deck):
    shuffle(deck)
    return

def card_value(n):
    vals = (11, 2, 3, 4, 5, 6, 7, 8, 9, 10, 10, 10, 10)
    card_vals = []

    for s in range(4):
        for r in range(13):
            card_vals.append(vals[r])
    return card_vals[n]

def card_display(n):
    name = define_cards(n)
    val = card_value(n)
    print (name + " : " + str(val))

def show_cards(hand):
    for card in hand:
        card_display(card)


def hand_val(hand):
    list = []
    for card in hand:
        list.append(card_value(card))
    if sum(list) > 21:
        for i in range(len(list)):
            if list[i] == 11:
                list[i] = 1
    return sum(list)





# Initializing
drawn_hands = 0
player_wins = 0
dealer_win = 0
deck = []
player_hand = []
dealer_hand = []
playing = True


#Processing
create_deck(deck)
shuffle_deck(deck)

for i in range(2):
    card = deal_cards(deck)
    card2 = deal_cards(deck)
    player_hand.append(card)
    dealer_hand.append(card2)


# put in a loop for player hand
print()
print("--------------------")
print("Dealer shows: ")
card_display(dealer_hand[0])
print("--------------------")

while playing == True:
    player_val = hand_val(player_hand)
    print()
    print()
    print("* * * * * * * * * * *")
    print("Your current hand is...")
    show_cards(player_hand)
    print(hand_val(player_hand))
    print("* * * * * * * * * * *")
    print()
    print()
    if player_val < 22:
        response = input("Would you like another card?")
        if response == "yes":
            player_hand.append(deal_cards(deck))
        else:
            playing = False
    else:
        playing = False
        print("sorry you busted")
        print("Thanks for playing")
        exit()

# check if it is higher than 21, if yes then end program, dealer hand wins
show_cards(dealer_hand)

playing = True
while playing == True:
    if hand_val(dealer_hand) < 17:
        dealer_hand.append(deal_cards(deck))
    else:
        playing = False

print()
print()
print("****************")
print("Dealer has:")
print(show_cards(dealer_hand))
print("****************")
print()
print()

if hand_val(dealer_hand) > 21:
    print("The dealer busted")
    show_cards(dealer_hand)
    print("You win!")
    exit()
elif hand_val(dealer_hand) > hand_val(player_hand):
    print("Dealer wins")
    show_cards(dealer_hand)
    exit()
elif hand_val(player_hand) > hand_val(dealer_hand):
    print("You win!")
    show_cards(player_hand)
    exit()
else:
    print("It's a draw")
    exit()

don’t forget to smile & be awesome 🙂

Yours truly,

L.O.A.S.H

PROject Python: Making a function

April 17, 2018April 14, 2018 by Elizabeth, posted in Awesome, Create, Education, fun, Interactive, Learn Something Outta This :), Programming, Something Cool

Quote of AWESOMENESS: “The function of leadership is to produce more leaders, not more followers” ~ Ralph Leader

Hiii!

Functions are so useful and cool at the same time and right now I’m going to teach just how to make one!

But, before we go there, what exactly is a function? It’s somewhat like a pre-made command that you get to customize yourself. For example, you wanted to make five circles, imagine you would have to make each circle repeating how big you wanted it to be, the color, locations, and others. But, if you had a function, you would make it so much simpler in just adding the code and copy-pasting the function.

Here’s the code for a function:

[remember: WHITESPACE is very important in Python]

# This hastag is a comment and won't affect the code
# We start making function by defining it with the word def
# The thing written inside the parenthesis is called the argument
# Remember to put the colon then the indentation will be proper, too

def list(alist):
    # Here, I'm setting the variable a to number 0
    a = 0

    # This is a for-loop and the i just stands for index 
    for i in alist:
        if i > 0:
            a += 1
        else:
            pass
    print(a)


# Here is the actual function in action!
# Test section
mylist = [2,-4,5,-16,-20]
mylist2 = [2,6,8,-4]
mylist3 = [-5,-6,-7,-8,10]


list(mylist)
list(mylist2)
list(mylist3)

This is just a simple example of what you can make of a function. Try it out!

Don’t forget to be awesome!

Yours truly,

L.O.A.S.H

Project Python: Advanced Number Guessing Game (#fun)

April 14, 2018 by Elizabeth, posted in Awesome, fun, Interactive, Interesting stuff, Programming

Quote of AWESOMENESS: “Creativity is intelligence having fun” ~ Albert Einstein

Hey, guys!

Back again with another python program.

Awesome isn’t?

Now, this program is an “advanced” version of a guessing number game. So basically, the program gives the user three guesses and the numbers are ranging from 1-10. Through each time the user types in the answer and is wrong, the input would spit out either “too high” or “too low” indicating what the user’s next move should be.

Mix around with it and experiment like maybe adding a wider range of numbers to guess from or maybe adding riddles to guess the number. This code is somewhat the basis of what else can be built with it, so be creative and have fun!

Here’s the code:

import random

range = random.randint(1, 10)

user_guess = 0

guess_counter = 0

print(“This is a guessing game and you will be given three tries to win! \nThe range will be between 1 and 10. \nGood luck!!”)

while guess_counter < 3:

user_guess = input(“What’s your guess?”)

guess_counter += 1

if user_guess.isnumeric():

user_guess = int(user_guess)

if user_guess < range:

print(“too low”)
elif user_guess > range:
print(“too high”)
else:
break

else:
print(“Not a number!”)

if user_guess == range:
print(“Awesome! You won!!”)
else:
print(“The number was actually”, range)
print(“Try again!”)

Have an awesome weekend!

Yours truly,

L.O.A.S.H

L.O.A.S.H’s Guide to (nearly) Everything: Arduino Color Lamp Mixer!

March 19, 2018 by Elizabeth, posted in Activity, arduino, Awesome, Create, fun, Interactive, Programming, Project, Something Cool, Technology, You can.

Quote of awesomeness: “Is not about creating an object. It is about creating a perspective.” ~ Albert Paley

Level of hardness: intermediate (You can do this!)

Heyyy!!!! Here’s another Arduino project for you!

For this project, you will need the following:

1x Arduino UNO Board
1x USB Cable Type A/B
1x Breadboard
1x RGB LED
3x 220-Ohm Resistor
3x 10k-Ohm Resistor
3x Photoresistors
13x Jumper Wires

Step 1:

The first step is two connect your breadboard to your Arduino and it should look something like the photo above. Then, add your RGB LED to your breadboard.

Step 2:

Next, you need to grab another wire and connect the other positive lane of the breadboard to the negative lane on the other side of the breadboard.

Step 3:

In this step, we will be placing the three 220-Ohm Resistors to three of the legs of the RGB LED. You will only be placing the resistors on the R, G and B of the RGB LED, this will leave you with one leg unconnected.

Step 4:

For this step, you will be needing four wires. Remember I told you that you were left with one leg of the RGB LED which isn’t connected? Well, it’s time to connect it now! Place one end of the wire to the remaining leg of the RGB LED then place the other end to the negative lane of the board. In the photo, the wire which I used for this connection is white.

With the other three wires, connect it to each of the 220-ohm resistors. Then, connect the other end of the wires to the Arduino 9, 19, and 11.

Step 5:

Let’s place the photo-resistors on the breadboard so that they cross the center divide from one side to the other.

Step 6:

Now, connect the 10k-Ohm resistors to one side of the photo-resistors and the other side to the negative lane of the breadboard.

Step 7:

Taking three other wires, connect it between the photo-resistor and the 10k-Ohm resistor then connect the other end to the Analog In pins 0, 1, and 2 on the Arduino.

Step 8:

Going on the other side of the photo-resistor, connect each leg to the positive lane of the Arduino with three wires.

Your result should look something like this!

Step 9:

This is the final step! Connect your Arduino to your computer, fire up your Arduino and copy paste in the following code:

const int greenLEDPin = 9;
const int redLEDPin = 11;
const int blueLEDPin = 10;

const int redSensorPin = A0;
const int greenSensorPin = A1;
const int blueSensorPin = A2;

int redValue = 0;
int greenValue = 0;
int blueValue = 0;

int redSensorValue = 0;
int greenSensorValue = 0;
int blueSensorValue = 0;

void setup() {
Serial.begin(9600);

pinMode(greenLEDPin, OUTPUT);
pinMode(redLEDPin, OUTPUT);
pinMode(blueLEDPin, OUTPUT);

}

void loop() {
redSensorValue = analogRead(redSensorPin);
delay(5);
greenSensorValue = analogRead(greenSensorPin);
delay(5);
blueSensorValue = analogRead(blueSensorPin);

Serial.print(“Raw Sensor Value \t Red: “);
Serial.print(redSensorValue);
Serial.print(“\t Green: “);
Serial.print(greenSensorValue);
Serial.print(“\t Blue: “);
Serial.print(blueSensorValue);

redValue = redSensorValue/4;
greenValue = greenSensorValue/4;
blueValue = blueSensorValue/4;

Serial.print(“Mapped Sensor Values \t Red: “);
Serial.print(redValue);
Serial.print(“\t Green: “);
Serial.print(greenValue);
Serial.print(“\t Blue: “);
Serial.println(blueValue);

analogWrite(redLEDPin, redValue);
analogWrite(greenLEDPin, greenValue);
analogWrite(blueLEDPin, blueValue);
}

Then watch as your RGD LED comes to life! It should change, mix and fade in different colours as the light around it changes, too! Awesome, right?? Yeah, it totally is.

Yours truly,

L.O.A.S.H