From e8f18641750ae90101cda96e23abe1cf0dcad35c Mon Sep 17 00:00:00 2001 From: KAR2014 Date: Thu, 25 Jun 2015 18:48:07 -0600 Subject: [PATCH] Final --- .DS_Store | Bin 0 -> 6148 bytes Make a Web Page/.DS_Store | Bin 0 -> 6148 bytes Make a Web Page/index.html | 164 +++++++++++++++++++++++++++++++++++++ Make a Web Page/style.css | 82 +++++++++++++++++++ 4 files changed, 246 insertions(+) create mode 100644 .DS_Store create mode 100644 Make a Web Page/.DS_Store create mode 100644 Make a Web Page/index.html create mode 100644 Make a Web Page/style.css diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..86c490cb1f9c208ca7932264c7783b319f82cd2e GIT binary patch literal 6148 zcmeHKUuzRV5T8wBy|fQrQK8_=K2``4iEZ%h8WX{XLhwq1Sc!Mu(JZ~*hTNq=Lg1eL z82nfnIv&;P^**^flnxp7GfC~T)Dq*RD%^!r` zlg>%Wc*=-Ojlm%R4qb>LoQt-O|B(Tz-3{2ny6t1tPS=k^2fcd`KS|`PFp*SI`k6dN zT|;HF8MfzUhvRHuvVVnxL}Yob_LG$s%GVaJJC&tndfb(z7k*!k{XED=Su+?uS3MEM zp|Lwb-aodtrA$ujAlwo0xaZz_B-1<)X*@iYy4w|LB*#rTN~3Jo*W-0Xl=pk??anYh z#MDlZ#ycVtp-4pj+Nsdfb5|#m#`?o5uh%!GRX%AnYE}NA-k46^FOGBP?)v7|v%&Pu z+js9jeEjtJ>o-LNF#HoJxoPkizN2vt$%pd0El#qRDw1g z5-Eop^b8gn@eK;osfaq2nJWg<>FDPs&NEnO)ak&~%s7sjnVB03Q?sL=t8ieRM%!8j zECXj5SkPUU_W$-rw0yHTpx1>Vi4^B})qUHxs9ui0wQUoOEuHzs0*)X##SIF!O`{`#=NCp0t z0ydi6&ZhjO=&ggFQ?D)bJNl + + + HTML Structure + + + + +
notes
+ + +
+

Introduction to Programming: Lesson 1

+
+
+

Stage 1.1: Basics of Web and HTML

+
+
+

How does the web work

+
+
+
+

+ The user sends the data to the Internet and makes contact with a server via HTML. The server sends back the appropriate HTML to the user where the browser decodes the information and projects it to the screen. +

+
+ + +
+
+

HTML

+
+
+
+

+ Stands for Hypertext Markup Language, which is basically based on text (what you see) and Markup (how it looks). HTML classifies page content, tells a browser what's text and image and so on. HTML controls structure by following certain syntax and rules. +

+
+ + +
+
+

Computers are Stupid!

+
+
+
+

+ It means that computers have a specific language and understanding for things which sometimes makes it frustrating for programmers commit silly mistakes could make it more difficult to program an application. +

+
+ + +
+
+

Tags and Elements

+
+
+
+

+ HTML is made of elements which help to give plain text more texture and structure with the help of tags, which consist of a wide variety of choices from making text bold, italic, or refer to a website like Google. We can <br>eak long lines and create more structure by tagging <p>aragraphs and <h>eadlines. Some elements are invisible, but the visible elements form rectangular boxes. +

+
+ + +
+
+

Inline and Block

+
+
+
+

+ Inline is mostly for elements that work within a line like "break," "bold," and "italic." Block are mostly within several lines like "paragraph" and "division" where they form an invisible box around their content. +

+
+ + +
+
+

Don't Memorize Everything!

+
+
+
+

+ There are a lot of references on the web that programmers could use to write code instead of trying to memorize every single element and attribute. It is important for a programmer to familiarize him/herself with those references and resources so he/she could be more effective and fluent writing code. +

+
+
+ + + +
+

Introduction to Programming: Lesson 2

+
+ +
+

Stage 1.2: Creating a Structured Document with HTML

+
+
+

Structured like tree

+
+
+
+

+ According to Wikipedia, a tree structure is "a way of representing the hierarchical nature of a structure in a graphical form." HTML includes a lot of elements inside other elements which create relationships between them. Defining those relations will help to build a structure that will bring order to HTML coding. +

+
+ +
+
+

Boxes within Boxes within...

+
+
+
+

+ Elements are contained within boxes and because elements could exist withing each other, there could be two or more boxes inside each box. It's important to keep track of their attributes so there won't be any unnecessary overlapping and conflict. +

+
+ + +
+
+

Tools

+
+
+
+

+ Programmers use tools to write code which are called text editors. There are many different text editors like Sublime Text and Scratchpad which make programmer's life a lot easier. They specially help with elements and tags where programmer wouldn't have to worry memorizing or writing the whole tag, the text editor will view suggestions and even complete the tag with one click. +

+
+
+ + + +
+

Introduction to Programming: Lesson 3

+
+ +
+

Stage 1.3: Adding CSS to HTML

+
+
+

Stay away from repetitions

+
+
+
+

+ There are a lot of similar lines within an HTML code and copy/pasting those lines helps a programmer to save some time, but it may cause a lot of mistakes. It's important to define and structure those lines so it wouldn't create unwanted repetitions. By creating class and div within a code could help avoiding those mistakes and repetitions. +

+
+ + +
+
+

CSS

+
+
+
+

+ CSS stands for Cascading Style Sheets, and it basically gives a programmer to control the style of an HTML element. An important part of CSS is "Inheritance" which is part of an ancestor-descendant relationship. By using class in a code we are taking advantage of the inheritance property in an HTML. It helps to style a class and its descendants rather than styling it line by line. +

+
+
+ + \ No newline at end of file diff --git a/Make a Web Page/style.css b/Make a Web Page/style.css new file mode 100644 index 0000000..d988f60 --- /dev/null +++ b/Make a Web Page/style.css @@ -0,0 +1,82 @@ +/* Body */ +body { + padding: 30px; + font-family: "Times New Roman"; + max-width: 85%; + margin: 0 auto; + font-size: 20px; + background: url("http://www.webdevsnippets.com/wp-content/uploads/2013/07/sublime_text.png") no-repeat fixed; +} + + +/* Content of document */ +.content { + text-align: center; + list-style-position: inside; + background-color: #CCCC00; + border-radius: 10%; + max-width: 40%; + margin: auto; +} + + +/* HTML Image */ +.image2 { + + text-align: center; + padding-top: 50px; + padding-bottom: 30px; +} + +.title { + color: white; + border: solid; + border-color: #0099CC; + border-style: outset; + background-image: url('http://fishpondusa.com/img/pattern_blue60.png'); + border-radius: 20px; + text-align: center; +} + +p { + margin: 30px; + font-family: "broadway"; +} + +.stage { + text-align: center; + background-color: #7cfc00; + border-radius: 10%; + color: #280000; + padding: 15px; + margin: 30px; +} + +h2 { + margin: 20px; + font-size: 35px; + +} + + +/* HTML and CSS Content */ +.concept { + background-color: #00bfff; + padding: 8px; + margin: 15px; + border-radius: 20%; + color: black; +} + +.concept-title { + font-size: 30px; + margin: auto; + text-align: center; + color: #522900; + text-decoration: underline; +} + +.concept-description { + font-weight: normal; + margin: auto; +} \ No newline at end of file