Tag: Code

The basics of HTML (it’s pretty cool)

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:

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 🙂

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

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:

html element anatomy

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:

  • h1

\\ Code:

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

\\ Output:

This is what the header looks like using h1

  • h2

\\ Code:

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

\\ Output:

This is what the header looks like using h2

  • h3

\\ Code:

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

\\ Output:

This is what the header looks like using h3

  • h4

\\ Code:

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

\\ Output:

This is what the header looks like using h4

  • h5

\\ Code:

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

\\ Output:

This is what the header looks like using h5

  • h6

\\ 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:

Screen Shot 2020-07-27 at 1.12.19 AM

\\ Output:

Screen Shot 2020-07-27 at 1.14.22 AM.png

ordered list

\\ Code:

Screen Shot 2020-07-27 at 1.19.02 AM.png

\\ Output:

Screen Shot 2020-07-27 at 1.19.40 AM

 

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

© Elizabeth Anne Villoria

Python Basics!!!

by Elizabeth, posted in Awesome, Create, D.I.Y, Learn, Programming

Quote of awesomeness: “It’s harder to read code than to write it.” ~ Joel Spolsky

Let’s learn some basics!

Here are some simple datatypes:

  • Integers (whole number)
    • 1, 2, 3, 4, 5, 6….

 

  • Floats (decimals)
    • 1.1, 1.2, 1.3, 1.4, 1.5…..

 

  • String (anything in “quotation marks”)
    • “hello”, “my”, “awesome”, “readers!”

 

  • Boolean (I know, sounds kinda funny right)
    • these datatypes are values at two constant objects
    • a boolean is either True or False (yes, with a capital T and a capital F)

 

Want to do something cool? Yeah, me too. Okay, once you open up your terminal, type in and press enter. The next that should have happened is that your terminal should have showed this:

>>>

Did you know??!!: #when a hashtag is put in python, this is known as a comment and it doesn’t affect the code

Did you know that we can keep datatypes stored into variables? It works like this. When you write a variable a word or letter, for example, then followed by this is a equal sign you can assign a variable. Let’s try it out on your terminal! Try doing something similar to the following:

>>> x = “helllloooooo thereeee!!!”

When you pressed enter, you must have not seen anything happen but just another >>>. But, it’s okay, here’s the thing. The string I just put with the variable is now stored. So when I put my variable alone this is what happens:

>>> x

Press enter and theeeeen!!

>>> helllloooooo thereeee!!!

TADA! WASN’T THAT SUPER COOL?!?! And, that’s just the very basics of what can be reached with python. 

You can even do some math with python. The arithmetics might be slightly different but I’m sure you will get the hang of it soon!:

  • Multiply (it’s the asterisks sign)
    • * 
  • Division (it’s the slash)
    • / 
  • Addition (it’s the plus sign)
    • +
  • Subtraction (it’s the minus sign)
    • –
  • Exponentiation (it’s two asterisks)
    • **
  • Modulus (it’s the percentage sign) 
    • %
    • this divides a number with another number and inputs the remainder

Here’s an example of each of these signs and their outputs. You can also test this out on the python which we opened up earlier on the terminal.

multiplication, *

>>> 2 * 9

When we put the equation above, our output would be

>>> 18

 

division, /

>>> 256 / 2

The output would be:

>>> 128

 

addition, +

>>> 1000 + 1000

The output would be

>>> 2000

 

subtraction, –

>>> 500 – 200

The output would be:

>>> 300

exponentiation, **

>>> 4 ** 2

The output would be:

>>> 16

 

modulus, %

>>> 2 % 5

Would get the output of:

>>> 1

 

Go on. Try experimenting at your terminal!

!important! : Unlike other programming types, python is very picky with whitespace. Meaning the indentations! Sometimes an error on expected or unexpected indentations may rise here and there but it’s nothing a few backspaces or the tab button can’t handle.

We’ve gotten down with some of the very basics that can be done with programming. With what you’ve learned here so far try exploring and trying this out! 

Yours truly,

L.O.A.S.H

Project Python | Command Line Calender

by Elizabeth, posted in Awesome, D.I.Y, How to...., Programming

You can make your own calendar and even add, update and view.

For your python code, copy and paste the following:

from time import sleep, strftime
name = “Libster”calendar = {}
def welcome():    print(“Welcome, ” + name + “!”)    print(“Calendar starting…”)    sleep(1)    print (“Today is “) + strftime( “%A %B %d, %Y”)     print (“The time is “) + strftime(“%I:%M:%S”)    sleep(1)    print(“What would you like to do?”)    def start_calendar():  welcome()  start = True  while start:    user_choice = raw_input(“Please choose A to Add, U to Update, V to View, X to Exit. “)    user_choice=user_choice.upper()    if user_choice == “V”:      if len(calendar.keys()) <1:        print “Your calendar is empty”      else:        print calendar    elif user_choice == “U”:        date = raw_input(“What date? “)        update = raw_input(“Enter the update: “)        calendar[date] = update        print(“Update successful.”)        print calendar    elif user_choice == “A”:        event = raw_input(“Enter event: “)        date = raw_input(“Enter date (MM/DD/YYYY): “)        if len(date) > 10 or int(date[6:]) < int(strftime(“%Y”)):            print(“Invalid date.”)              try_again = raw_input(“Try again? Y for Yes, N for No: “)            try_again = upper.try_again()            if try_again == “Y”:                continue            else:                start = False            else:            calendar[date] = event            print(“Event update successful.”)            print calendar    elif user_choice == “D”:        if calendar.keys(len(date)) < 1: #check this line if fail            print(“The calendar is empty.”)        else:            event = raw_input(“What event?”)             for date in calendar.keys():                if event == calendar[date]:                     del calendar[date] # deletes entire entry, inc date & event                print(“Event deleted.”)                print calendar            else:                print(“Incorrect date.”)    elif user_choice == “X”:        start = False    else:        print(“Invalid command.”)        breakstart_calendar()

 

Then in the command line, play your python code.

Screen Shot 2017-07-02 at 17.40.47

Above, the picture is an example of how it should turn out to be. I added an event, updated that same event and viewed! Don’t forget to try to experiment and maybe make this cooler.

Yours truly,

L.O.A.S.H