The tools from this semester (HTML, CSS, Python), provide a wealth of options for a programmer. So much so, that it is easy to get lost in the various versions of tags/attributes/functions etc. Over the course of the semester, we will learn a subset of each of these languages. This page will contain anything that we have covered in class, and that you will be responsible to know. All assignments (unless otherwise noted) can be completed without any other functions/tags/attributes.
..: One directory up~: Home directory.: Current Directoryls$ ls-l, -a-l is used, long information about each file will be displayed. If -a is used, all files, including “hidden” files, will be listed.cd$ cd TARGETTARGET your current directory.clearmkdir$ mkdir NEWDIRtouch$ touch FILEFILE does not exist, create a new empty file with that name.FILE does exist, update it’s file modification timestamp.mv$ mv SOURCE DESTINATIONSOURCE to DESTINATION.cp$ cp SOURCE DESTINATION-r-r is present, copy SOURCE and any files and subdirectories within SOURCE.scp$ scp SOURCE DESTINATION-rcp, except SOURCE or DESTINATION can be a different computer, effectively copying files between computers over a network. When specifying a remote file, use the following syntax:
USERNAME@COMPUTER:FILEscp hello.html dw@homer.stuy.edu:public_html/rm$ rm FILE-rFILE. This is an irreversible action, you cannot recover files removed with rm.tree$ tree DIRECTORYDIRECTORYr: read (can access contents of the file)w: write (can modify the contents of the file)x: execute (can run the file as a program)u: The owner of the file (user)g: The group associated with the fileo: Everyone elsechmod$ chmod PERMISSIONS FILEFILE. PERMISSIONS is a string representing the new permissions, there are multiple potential formats for PERMISSIONS.
+ or - followed by a permission: Add (+) or remove (-) that permission for all areas (e.g. +x).+ or -, followed by a permission: Add or remove that permission for the specified area (eg o-w)class and id are attributes that can be added to any HTML element. They are commonly used as selectors in css.id attribute, and ids are supposed to be unique.class attributes (class="c0 c1 c2"), and multiple elements can share classes.div<div>span<span>doctype<!doctype html>html specifies an html version 5 page.htmllang<html lang="en">lang="en" specifies the language of the page as englishhead<head>metacharset<meta charset="utf-8">charset which specifies what character encoding the webpage uses.head element.charset="utf-8" specifies utf-8 unicode encodingtitle<title> Hello, World </title>body<body>body should be inside other container elements as well, like p.h1, h2 … h6<h1>Big Heading</h1>ahref<a href="http://xkcd.com">wisdom</a>href attribute to link to another page..imgsrc, alt, height, width<img src="cat.jpg">src attribute to set the image source. The source can either be a local file (i.e. cat.jpg) or a url.alt attribute will set text to display if the image cannot be loaded.width and height should be given pixel values.ol or ul<ol>, <ul>ol creates a numbered list, ul will use bullets. Must contain list itemsstyle html elements to determine which elements you are providing style information for.a, h1, body …) can be used as selectors. If used, the defined style will be applied to all elements of that type.* Can be used to select all HTML elements..CLASSNAME will select all elements that share the class CLASSNAME.#IDNAME will select the element with the id IDNAME.rgb(176, 196, 222)#b0c4delightsteelblue
width and height attributes in CSS except for images, where setting them in the HTML img tag is preferred.25px (note that in HTML, you do not include px)width: 30%; would set an element’s width to 30% of the width of its parent element.em. 1.5em would represent a size 1.5 times the normal font size of the parent element.colorbackground-colortext-alignstart end center justifywidth, heightpx for pixels, % for % of parent, etc.)border or border-width, border-style, border-colorborder-width: Unit of lengthborder-style:: solid, dotted, dashed (and others)border-color: Any CSS colorborder-radius:border, i.e. border: 1px solid green; or use the specific property.font or font-size, font-weight, font-familyfont-size: Unit of length or special keywords (i.e. small, medium, large…)font-weight: The boldness of a font, keywords bold or normal, or number in the range [1, 1000]. normal is 400 and bold is 700.font-family: Set possible fonts to use. Can be a specific font (i.e. font-family: "Times") or a generic font family (i.e. font-family: "serif").font or use the specific property.paddingmarginautoauto, the browser will determine the correct margin. This will often center an element horizontally.-top -bottom -left -rightborder, padding, and margin will apply the provided style to all 4 sides.border-bottom: 1pxmargin-left: 10pxborder-radiusborder property, but providing a border-radius will result in a curved border as well.border-radius: 10%;.border-radius: 10px 10x 0px 0px;displayblock, inline, and othersblock
width is not set, it will extend as far as its parent.width and height are interpreted correctly.padding margin and border will cause other elements to be pushed away.inline
width and height are ignored.overflowvisible, hidden, autooverflow will set how a browser handles the case when the content would go past the border of the element.visible: default behavior, show the overflowing content.hidden: do not show the overflowing content (not advised)auto: add scroll bars to show overflow content.floatleft, right, none+ - *: Addition, subtraction, multiplication. If both operands are int values, will return and int. If at least one value is a float, will return a float.**: Exponent. If both operands are int values, will return and int. If at least one value is a float, will return a float.%: Modulo (remainder). If both operands are int values, will return and int. If at least one value is a float, will return a float./: Division. Will always return a float.//: Returns the floor of the division of the two operands. If both operands are int values, will return and int. If at least one value is a float, will return a float.True and False== > < >= <= !=and or not'hello, world'"hello, world""""hello, world""". Strings in """ """" can contain newline and tab characters without breaking a program.[] are used to access individual characters.len(s): returns the length (number of characters) in s.s.find(key): Returns the index of string key in s, returns -1 if not found.+: Concatenate (combine) two strings.