From 9b0bda7304261b30cae8c5dc650f9f5299227762 Mon Sep 17 00:00:00 2001 From: KAR2014 Date: Sat, 4 Jul 2015 02:41:23 -0600 Subject: [PATCH] Finished Project --- .DS_Store | Bin 0 -> 6148 bytes Automate Your Page/css/style.css | 44 +++ Automate Your Page/html_generator.py | 31 ++ Automate Your Page/my_site.html | 414 +++++++++++++++++++++++++++ 4 files changed, 489 insertions(+) create mode 100644 .DS_Store create mode 100755 Automate Your Page/css/style.css create mode 100755 Automate Your Page/html_generator.py create mode 100755 Automate Your Page/my_site.html diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..ab557db31bb4f0d7a17e189ccb036bbce3d53fdd GIT binary patch literal 6148 zcmeHKyH3ME5S%3`f@mTt%Ily);tx#ZAW-u@q`DwV2y&iLG||un;bZ1Oa)SbRNzwq{XZ1CVinjr+OLB_kMBA^R#fA&-6e=6##LbJ z$QhbAmFQH7D~33o`4V+iVC(2~h^@>%v9iPsMQnBEi<$ literal 0 HcmV?d00001 diff --git a/Automate Your Page/css/style.css b/Automate Your Page/css/style.css new file mode 100755 index 0000000..8e54e1b --- /dev/null +++ b/Automate Your Page/css/style.css @@ -0,0 +1,44 @@ +/* In all HTMl file */ +* { + font-family: Helvetica; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + -ms-box-sizing: border-box; + box-sizing: border-box; +} + +/* Headerpage in the HTMl file */ +#pageheader { + font-weight: bold; + color: white; + background: #1A1A80; + border-radius: 0.3125em; + padding-left: .2em; +} + +.sectiontitle { + text-decoration: underline; +} + +/* All lessons in the HTMl file */ +.lesson { + background: #1A1A80; + padding: 0.3125em; + border-radius: 0.3125em; + color: white; + margin-bottom: .2em; +} + +/* All notes in the HTMl file */ +.note { + background-color: #D6F5FF; + border-radius: 0.3125em; + padding: .2em; + margin: .2em; + color: black; +} + +/* All examples in the HTMl file */ +.example { + font-weight: bold; +} \ No newline at end of file diff --git a/Automate Your Page/html_generator.py b/Automate Your Page/html_generator.py new file mode 100755 index 0000000..87bbf1b --- /dev/null +++ b/Automate Your Page/html_generator.py @@ -0,0 +1,31 @@ +"""This set of functions takes an input, notes, formatted in a list with lists containing the title and notes""" + +#List +notes = ["Lists", "Lists are one of the most powerful storage containers in Python. They are a mutable structure that can hold things like variables, numbers, strings and even other lists. Individual aspects of a list can be changed while not becoming a new, copied list."], ["Index", "Indexing in lists grabs the position of an element in a list. You can using slicing with these indexes to grab certain items in a list."], ["Mutation vs Copied", "While lists can be mutated they can also be copied and will be with certain functions. When concatenating two lists a new list is created to hold the elements. Changing specific values at certain indexes or using a function such as .append mutates the list into holding new or more elements."], ["Finding Length", "To find the length of an element such as a string or list the 'len' function is used. It will return the number of items in a list or characters in a string."], ["In", "The function 'in' is used in a boolean fashion. If x can be found in y, True will be returned. Otherwise it will return False. This can be used to find a certain word in a long string or a certain element in a list."], ["Devensive Programming", "Defensive programming is the practice of desigining code so that it can deal with circumstances that were unintended and allows for the program to continue running instead of crashing."], ["Problem Solving", "Problem solving is a vital process to coding. When trying to figure out how to code or deal with a problem, you need to break it down into several steps. Figure out the input and the output. Write some pseudocode to get an idea of how to structure the code. Then you pick the foundation of the code and begin. After every part extensive testing should be done to ensure the code functions as intended."] + +#Function than show the concepts +def html_note_structure(concept): + """Puts together a title and note into an html structure""" + html1 = """
+

""" + concept[0] + html2 = """

+

+ """ + concept[1] + html3 = """ +

+
+ +""" + + return html1 + html2 + html3 + +def much_html(concepts): + """Repeats html_note_structure until all of notes has been structured""" + HTML = "" + #Loop for the Concepts + for concept in concepts: + HTML += html_note_structure(concept) + return HTML + +#print the HTML structure in the console +print much_html(notes) \ No newline at end of file diff --git a/Automate Your Page/my_site.html b/Automate Your Page/my_site.html new file mode 100755 index 0000000..fcea22d --- /dev/null +++ b/Automate Your Page/my_site.html @@ -0,0 +1,414 @@ + + + + + + Kar Notes + + + + + + + +
+ +
+

Lesson 0

+
+ +
+

HTML

+

+ HTML stands for HyperText Markup Language. It is the foundation of all web pages and allows for all web design and implimentation of images, videos, links, etc. +

+
+ +
+

Hyperlinks/Links

+
+ <a href="www.website.com">What is visible</a> +
+

+ Hyperlinks (commonly referred to as links) connects the web. Links are paths to other pages or specific parts of a page. +

+
+ +
+

Tags

+

+ Tags help change generic text in HTML documents.Tags can be used to create links, bold or italicize words, seperate certain instances oftext so they can receive a style and much more. Tags outline elements.Some tags require to be closed while void tags, which are used for images and break, do not.Tags can also have attributes which change the way the tag functions. +

+
+ Some Tags: +
    +
  • b - bold
    • +
  • em - italic
    • +
  • a - can have attributes and is typical shown as: a href="website", creates links
    • +
  • br - creates a newline, void
    • +
+
+
+ +
+

Elements

+

+ Elements are what HTML documents are made of. They are seperated by tags. +

+
+ +
+

Inline vs Block

+

+ Elements in HTML can be either inline or block. If they are block thereis an invisible box around the element. +

+
+
+ +
+ +
+

Lesson 1

+
+ +
+

HTML vs CSS

+

+ HTML is the basic structure and the content of a web page. CSS is the style in which the HTML is presented. +

+
+ +
+

CSS

+

+ CSS, also known as Cascading Style Sheets, controls font, size, border, position, margins, orientation and much more. +

+
+ +
+

Document Object Model

+

+ Document Object Model or DOM is a cross platform convention for language. Things are ordered in a tree like structure to represent how elements interact with each other. This method of organization bears strong resemblance to a family tree with branches having the ability to inherit + traits. +

+
+ +
+

Boxes

+

+ Every element in an HTML file is represented by boxes. Text, boxes. Images, boxes. Circles, boxes. HTML makes the boxes. CSS is used to mix, match and even overlap these boxes in creating a web page. +

+
+
+ +
+ +
+

Lesson 2

+
+ +
+

Adding Style

+

+ Style is added to an HTML page through a CSS page. Use a period before classes (.note, .sectiontitle) a hashtag/pound sign before ids (#pageheader) and nothing prior to tags (p, div). Weave them together such as h.sectionheader to change the style on a specific part of a class. +

+
+ +
+

CSS - Inheritance

+

+ Inheritance is the process with which nested elements recieve style because they are part of an overarching element. For example you can make all the text in an html file appear as a certain font and then change the size of the font for each individual tag, class or id. Inheritance allows for less code and repetition. +

+
+ +
+

Margin, Border, Padding, Content

+

+ Every element has multiple layers which make up the total element. There is the content which could be a video, text, image, etc. Then there is the padding which expands the box and inherits color of the box/content background color. The border surrounds the padding and also inherits the background color. However the color and design can be changed causing a definitive border. The margin is the space an element requires before running into another element. This helps seperate elements. +

+
+ +
+

Box-Sizing: Border-Box

+

+ Browser specific prefixs may be necessary for this newer technique. Using border-box lets you set the size of the whole box in either percentage or pixels. This includes the border, padding and content. +

+
+ +
+

Flexbox

+
+ display: flex +
+

+ Flexbox is a tool used to position boxes. Flexbox allows for boxes to be position next to each other rather than just in a list format. Apply display:flex and change the size percentage of the box to allow for boxes to position next to each other. +

+
+ +
+

Images

+
+ <img src="folder/name" alt="random"> +
+

+ Store an image in a place that the HTML document can access it (folder for images in the website folder). In case the image has trouble loading add an alt attribute. +

+
+ +
+

Devtools

+

+ DevTools can be used to tweak a page to get an idea of what you may want to permanently change on a page. After any tweaks you can simply refresh the page to have the page return to its original form. +

+
+ +
+

Repetition

+

+ One of the biggest parts of coding is avoiding repetitive code. That is why CSS, classes and other such things exist. CSS allows you to style large chunks of code all at once. Likewise, classes allow you to style multiple sections of code that are of that class. There are a lot of things you can do to reduce the amount written and to streamline your code. +

+
+
+ +
+ +
+

Lesson 3

+
+ +
+

Programs

+

+ Programs are anything that tell a computer what to do; how complicated or simple it is does not matter. Web pages, games and operating systems are all examples of programs. +

+
+ +
+

High Level Languages

+

+ High level languages exist as a non ambigious language platform. Spoken languages such as English are far too ambigious to tell a computer what to do. As stated prior, computers will only do what they are told so code can not be ambigious. This is in both the way the syntax is, and how it is used. Expressions such as 2 + 2 + will end up causing an error as it is not a proper expression. +

+
+ +
+

Expressions

+

+ Code is made up of expressions which are the "grammatical" foundation of the language, similiar to sentences. Can be as simple as 2 + 2 or much more complicated like ((123 * 526) + 231) - 326 and beyond. Structure will not always be numeric. +

+
+ +
+

Limits of Computers

+

+ Computers are inherently limited by the speed that data can be moved. Data can be moved at a speed close to light and because of this hard limit computers have been getting smaller. The smaller the computer the less distance the data must travel allowing for quicker computations. +

+
+
+ +
+ +
+

Lesson 4

+
+ +
+

Variables

+

+ Variables are one of the main concepts in programming. With an assignment operator you can give a variable (letters or words) a value. That value is then stored and can be used or modified. Variables are used to clarify code and store data. +

+
+ +
+

Assignment Operator

+
+ variable = expression +
+

+ Unlike in typical arithmetic, the equal sign (=) is used as an assignment operator in python and other programming languages. It is used to give a variable a value. +

+
+ +
+

Strings

+

+ Strings are characters surrounded by single or double quotations. They can be stored in variables. Anything within the quotations will not be read as an expression. +

+
+ +
+

Concatenation

+
+ string + string == stringstring +
+

+ Concatenation is the method of joining strings. "This is " + "an example." Will concatenate into "This is an example." Take care to realize when you are concatenating or adding as the symbol is the same and the process is determined by whether numbers or strings are used. +

+
+ +
+

Indexing

+
+ "index"[0] == i +
+

+ Indexing is the method with which to give strings a numeric reference. You can index a string or a variable that is storing a string. The first character in a string is at the 0 position. Using [n:x] you can specify a section of a string that you would like to retrieve. [n:] Takes everything starting at n. [:n] Takes everything for n. [:] Takes the whole string. [n:x] Starts at n and takes up to, but not including, x. Indexing can also start from the back of the string with negative numbers starting at -1. +

+
+ +
+

Find

+
+ string.find(x,n) +
+

+ Find compares a given set of characters to a string. If it finds the set of charcters in the string it will give you the position of the first character. If it does not find anything it will return -1. At x is what find will look for in the string and n is the position at which it will start looking. You can find with a string or a variable. +

+
+
+ +
+ +
+

Lesson 5

+
+ +
+

Functions

+
+ def functionname(parameters) +
+

+ Functions or procedures are code that receives an input, works with it and then returns an output. You call a function with an input. Functions can be called multiple times meaning you can code something then use it repeatedly, helping eliminate repetition and simply code. +

+
+ +
+

Making vs Using a Function

+

+ Functions must be defined. In this definition the function is coded to perform a task. However just creating a function does not actually fulfill the task. You must use the function, normally with an input, so that the function executes and performs the task. +

+
+ +
+

Importance of Return

+

+ Without return a function may do nothing at all. It can execute addition in a sum function but then by never returning the value, it "forgets" the changed value and for the program it is like the function was never called. Functions can do things such as print but to save a value it must be returned. +

+
+
+ +
+ +
+

Lesson 6

+
+ +
+

Making Decisions

+

+ Python has a number of operands used to return a boolean datatype of True or False. There are many different types of comparison such as: +

    +
  • > - greater than
    • +
  • >= - greater than or equal to
    • +
  • < - less than
    • +
  • <= - less than or equal to
    • +
  • == - equal to
    • +
  • != is not equal to
    • +
+ There are also logical structures such as and, or and not that can be used in comparisons. +

+
+ +
+

If-else

+

+ If or if-else statements execute code if a condition is met. In an if else code will also be executed if the if statement is False. +

+
+ +
+

While loops

+

+ Unlike if statement which will only execute 0 or 1 times, while loops execute as long as the condition is True. This means that if the condition does not change to False, the loop will continue forever. While loops can also be stopped by a break input. +

+
+ +
+

Debugging

+

+ Making mistakes in code is something that happens to everyone. One of the most important skills to have is to be a good debugger. This means figuring out what is wrong with code and solving. This often happens by breaking up and seeing what each part of the code does. However, sometimes when correcting code your code will become less correct that the original. It is important to keep variations of code even after figuring out a variant that works. +

+
+
+ +
+ +
+

Lesson 7

+
+ +
+

Lists

+
+ list = [] +
+

+ Lists are one of the most powerful storage containers in Python. They are a mutable structure that can hold things like variables, numbers, strings and even other lists. Individual aspects of a list can be changed while not becoming a new, copied list. +

+
+ +
+

Index

+
+ list[0] +
+

+ Indexing in lists grabs the position of an element in a list. You can using slicing with these indexes to grab certain items in a list. Indexing starts at the 0 position. +

+
+ +
+

Mutation vs Copied

+

+ While lists can be mutated they can also be copied and will be with certain functions. When concatenating two lists a new list is created to hold the elements. Changing specific values at certain indexes or using a function such as .append mutates the list into holding new or more elements. +

+
+ +
+

Finding Length

+
+ len("string") +
+

+ To find the length of an element such as a string or list the 'len' function is used. It will return the number of items in a list or characters in a string. +

+
+ +
+

In

+
+ if x in y +
+

+ The function 'in' is used in a boolean fashion. If x can be found in y, True will be returned. Otherwise it will return False. This can be used to find a certain word in a long string or a certain element in a list. +

+
+ +
+

Defensive Programming

+

+ Defensive programming is the practice of desigining code so that it can deal with circumstances that were unintended and allows for the program to continue running instead of crashing. +

+
+ +
+

Problem Solving

+

+ Problem solving is a vital process to coding. When trying to figure out how to code or deal with a problem, you need to break it down into several steps. Figure out the input and the output. Write some pseudocode to get an idea of how to structure the code. Then you pick the foundation of the code and begin. After every part extensive testing should be done to ensure the code functions as intended. +

+
+
+ + \ No newline at end of file